/* ========================================
YABAAA - UNIFIED STYLESHEET
Combined: Menu, Footer, Universal styles
Professional Design System
Version: 2.3 - CENTERED AUTO-SIZING PANEL
======================================== */
/* ========================================
UPDATES IN VERSION 2.3:
- Panel now auto-sizes to content (no empty space!)
- Vertically centered on screen (elegant positioning)
- Rounded corners on left side (modern touch)
- Eliminates wasted space when few items
- Scrollable when content exceeds max-height
Previous features from 2.2:
- Softer, elegant color palette (blue-slate)
- Reduced spacing between ToC items (tighter, cleaner)
- Pure white panel background
- Softer shadows and backdrop
Previous features from 2.1:
- Floating ToC Panel (slide-out from right)
- Dual Floating Buttons (ToC Menu + Back to Top)
- Auto-generated ToC from headings
- Active section highlighting on scroll
- Full accessibility & mobile optimization
======================================== */
/* ========================================
TABLE OF CONTENTS
========================================
1. FONTS & IMPORTS - in the html
2. BASE & RESET
3. NAVIGATION (Desktop & Mobile)
4. BREADCRUMB
5. HERO SECTIONS
6. MAIN CONTENT
7. TABLE OF CONTENTS
8. TEXT LAYOUTS & IMAGES
9. GALLERY & LIGHTBOX
10. SLIDER & SLIDESHOW
11. ACCORDION
12. FOOTER
13. SCROLL ANIMATIONS
14. UTILITY ELEMENTS (Back to Top, Progress Bar)
15. RESPONSIVE DESIGN
16. PRINT STYLES
17. UTILITY CLASSES
======================================== */
/* ========================================
1. SELF-HOSTED FONTS
======================================== */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/playfair-display-v40-cyrillic_latin-regular.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/playfair-display-v40-cyrillic_latin-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/source-sans-3-v19-cyrillic_latin-regular.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/source-sans-3-v19-cyrillic_latin-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/inter-v20-cyrillic_latin-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/inter-v20-cyrillic_latin-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/inter-v20-cyrillic_latin-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0400-045F, U+0490-0491, U+04B0-04B1;
}
/* ========================================
FONT FALLBACK METRIC OVERRIDES
Reduces CLS caused by font-display: swap
======================================== */
@font-face {
font-family: 'Playfair Display Fallback';
src: local('Georgia'), local('Times New Roman');
size-adjust: 97%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Source Sans 3 Fallback';
src: local('Arial'), local('Helvetica Neue');
size-adjust: 94%;
ascent-override: 104%;
descent-override: 27%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica Neue');
size-adjust: 96%;
ascent-override: 106%;
descent-override: 27%;
line-gap-override: 0%;
}
/* ========================================
2. BASE & RESET
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.8;
color: #1F2937;
background-color: #FAFAFA;
margin: 0;
padding: 0;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
color: #1A3A52;
line-height: 1.3;
margin-top: 0;
}
h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
margin-top: 2.5rem;
}
h3 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1rem;
}
h4 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.8rem;
}
p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
text-align: justify;
}
ul, ol {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
/* LINKS and ON Hover on links */
a {
color: #2C5F8D;
text-decoration: underline;
}
a:hover {
color: #1A3A52;
}
/* ========================================
3. NAVIGATION (Desktop & Mobile)
======================================== */
/* Desktop Navigation */
nav {
background-color: #2C5F8D;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 10000;
}
nav ul {
width: 100%;
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav li {
height: 50px;
position: relative;
}
nav a {
height: 100%;
padding: 0 30px;
text-decoration: none;
display: flex;
align-items: center;
color: #FFFFFF;
font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 18px;
font-weight: 500;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #1A3A52;
color: #FFFFFF;
}
nav li:first-child {
margin-right: auto;
}
/* Submenu Styling (Desktop) */
.submenu {
display: none;
position: absolute;
top: 50px;
left: 0;
background-color: #1A3A52;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
min-width: 250px;
width: max-content;
flex-direction: column;
list-style: none;
}
.submenu li {
height: auto;
white-space: nowrap;
}
.submenu a {
padding: 15px 30px;
display: block;
font-size: 16px;
}
.submenu a:hover {
background-color: #2C5F8D;
}
/* Show submenu on hover (Desktop only) */
nav li:hover .submenu {
display: flex;
}
/* Mobile Sidebar Navigation */
.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 260px;
z-index: 999;
background-color: rgba(26, 58, 82, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(255, 255, 255, 0.1);
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.sidebar li {
width: 100%;
}
.sidebar a {
width: 100%;
color: #FFFFFF;
font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.02em;
}
.sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #FFFFFF;
}
.sidebar button {
background: none;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 8px 8px 8px auto;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.sidebar button:hover {
background-color: rgba(255, 255, 255, 0.15);
}
nav .menu-button button {
background: none;
border: none;
cursor: pointer;
height: 50px;
padding: 0 20px;
display: flex;
align-items: center;
color: #FFFFFF;
transition: background-color 0.3s ease;
}
nav .menu-button button:hover {
background-color: #1A3A52;
color: #F9FAFB;
}
.menu-button {
display: none;
}
/* Back Arrow Navigation */
.back-arrow a {
padding: 0 20px !important;
transition: transform 0.2s ease;
}
.back-arrow a:hover {
transform: translateY(-3px);
}
.back-arrow svg {
width: 24px;
height: 24px;
fill: #FFFFFF;
}
/* ========================================
4. BREADCRUMB
======================================== */
.breadcrumb {
padding: 0.5rem 2rem;
background-color: #F3F4F6;
font-size: 0.95rem;
border-bottom: 1px solid #E5E7EB;
}
.breadcrumb a {
color: #2C5F8D;
text-decoration: underline;
transition: color 0.3s ease;
}
.breadcrumb a:hover {
color: #1A3A52;
text-decoration: underline;
}
.breadcrumb .separator {
margin: 0 0.5rem;
color: #9CA3AF;
}
.breadcrumb .current {
color: #4B5563;
}
/* ========================================
5. HERO SECTIONS
======================================== */
.hero-section {
position: relative;
height: 90vh;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
.hero-section.hero-secondary {
height: 60vh;
min-height: 400px;
}
.hero-section.hero-small {
height: 50vh;
min-height: 350px;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.5) 100%
);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
padding: 2rem;
max-width: 1000px;
animation: fadeInUp 1s ease-out;
}
.hero-content h1 {
color: white;
font-size: 4rem;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7);
margin-bottom: 1rem;
}
.hero-content h2 {
color: white;
font-size: 3rem;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
margin: 0;
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 300;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
margin-top: 0.5rem;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.scroll-indicator span {
display: block;
width: 24px;
height: 24px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg);
animation: scrollDown 2s infinite;
}
@keyframes scrollDown {
0% {
opacity: 0;
transform: rotate(-45deg) translate(-10px, -10px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(-45deg) translate(10px, 10px);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
6. MAIN CONTENT
======================================== */
.content-container {
max-width: 1400px;
margin: 0 auto;
padding: 0;
}
.content-section {
padding: 2.5rem 2rem;
background-color: white;
margin-bottom: 0;
}
.content-section:nth-child(even) {
background-color: #F9FAFB;
}
/* ========================================
7. TABLE OF CONTENTS
======================================== */
.toc-container {
max-width: 900px;
margin: 2rem auto;
border: 2px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.toc-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1.25rem 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
}
.toc-header:hover {
background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
}
.toc-header h3 {
margin: 0;
font-size: 1.3rem;
color: white;
}
.toc-toggle {
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.toc-toggle.active {
transform: rotate(180deg);
}
.toc-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
padding: 0 1.5rem;
}
.toc-content.active {
max-height: 1000px;
padding: 1.5rem;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-list li {
margin-bottom: 0.75rem;
}
.toc-list a {
color: #2C5F8D;
text-decoration: none;
font-size: 1.05rem;
display: flex;
align-items: center;
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: 6px;
}
.toc-list a:hover {
background-color: #F3F4F6;
color: #1A3A52;
padding-left: 1rem;
}
.toc-list a::before {
content: "→";
margin-right: 0.75rem;
transition: transform 0.3s ease;
}
.toc-list a:hover::before {
transform: translateX(5px);
}
/* ========================================
8. TEXT LAYOUTS & IMAGES
======================================== */
.text-content {
max-width: 900px;
margin: 0 auto;
}
.text-content.full-width {
max-width: 1200px;
}
.text-image-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
.text-image-layout.reverse {
grid-template-columns: 400px 1fr;
}
.text-image-layout.reverse .text-content {
order: 2;
}
.text-image-layout.reverse .side-image {
order: 1;
}
.side-image {
position: sticky;
top: 100px;
}
.side-image img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.side-image img:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
/* Click-to-enlarge is a desktop feature (see universal_1.js);
only hint at it with a zoom cursor above the mobile breakpoint. */
@media (min-width: 901px) {
.side-image img {
cursor: zoom-in;
}
}
.image-showcase {
margin: 3rem 0;
text-align: center;
}
.image-showcase img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* ========================================
9. GALLERY & LIGHTBOX
======================================== */
.gallery-section {
padding: 5rem 2rem;
background: #1A3A52;
color: white;
}
.gallery-section h2 {
text-align: center;
color: white;
font-size: 3rem;
margin-bottom: 3rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 12px;
cursor: pointer;
aspect-ratio: 4/3;
background-color: rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.05);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
/* Skeleton Loader for Gallery */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.gallery-item.loading {
background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
/* Lightbox */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
max-width: 100%;
max-height: 75vh;
object-fit: contain;
border-radius: 8px;
display: block;
}
.lightbox-body {
display: flex;
flex-direction: column;
align-items: center;
max-width: 90%;
max-height: 90vh;
animation: zoomIn 0.3s ease-out;
}
.lightbox-caption-wrap {
margin-top: 1.1rem;
max-width: 640px;
text-align: center;
}
.lightbox-caption-wrap[hidden] {
display: none;
}
.lightbox-caption {
font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
font-size: 1.1rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 0.35rem 0;
}
.lightbox-alt {
font-family: 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.95rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.lightbox-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 50px;
cursor: pointer;
z-index: 100000;
background: rgba(0, 0, 0, 0.5);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
font-family: inherit;
line-height: 1;
transition: all 0.3s ease;
}
.lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg);
}
.lightbox-nav {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1.5rem;
}
.lightbox-prev,
.lightbox-next {
background-color: rgba(255, 255, 255, 0.9);
color: #1A3A52;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1.5rem;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
}
.lightbox-prev:hover,
.lightbox-next:hover {
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* ========================================
10. SLIDER & SLIDESHOW
======================================== */
.slider-container {
position: relative;
max-width: 1200px;
margin: 3rem auto;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.slider-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slider-slide {
min-width: 100%;
height: 500px;
}
.slider-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.9);
color: #1A3A52;
border: none;
padding: 1rem 1.5rem;
font-size: 2rem;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
z-index: 10;
}
.slider-btn:hover {
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.slider-btn-prev {
left: 20px;
}
.slider-btn-next {
right: 20px;
}
.slider-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.75rem;
z-index: 10;
}
.slider-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.slider-indicator.active {
background-color: white;
width: 30px;
border-radius: 6px;
}
/* Slideshow (Auto-advancing) */
.slideshow-wrapper {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
border-radius: 12px;
}
.slideshow-slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow-slide.active {
opacity: 1;
}
.slideshow-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slideshow-controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.slideshow-pause,
.slideshow-play {
background-color: rgba(255, 255, 255, 0.9);
color: #1A3A52;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
}
.slideshow-pause:hover,
.slideshow-play:hover {
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* ========================================
11. ACCORDION
======================================== */
.accordion {
max-width: 900px;
margin: 0.5rem auto 0;
}
.accordion-item {
border: 1px solid #E5E7EB;
border-radius: 10px;
margin-bottom: 0.75rem;
overflow: hidden;
background: white;
transition: box-shadow 0.3s ease;
}
.accordion-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.accordion-header button {
width: 100%;
text-align: left;
padding: 1.25rem 1.5rem;
border: none;
background: #F9FAFB;
font-size: 1.15rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: background-color 0.3s ease;
color: #1A3A52;
}
.accordion-header button:hover {
background-color: #F3F4F6;
}
.accordion-header button::after {
content: "▾";
font-size: 1.5rem;
transition: transform 0.3s ease;
color: #2C5F8D;
}
.accordion-header button[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.accordion-header button[aria-expanded="true"] {
background: #EEF2FF;
color: #2C5F8D;
}
.accordion-header button:focus {
outline: 2px solid #aaa;
outline-offset: 2px;
}
.accordion-panel {
padding: 1.5rem;
background-color: white;
}
.accordion-panel p {
margin-bottom: 1rem;
line-height: 1.8;
}
.accordion-panel p:last-child {
margin-bottom: 0;
}
.accordion-panel ul,
.accordion-panel ol {
margin: 1rem 0;
padding-left: 2rem;
}
/* Recipe-specific accordion styling */
.recipe-accordion .accordion-header button {
background: linear-gradient(135deg, #FFF9F0 0%, #FFF5E8 100%);
border-left: 4px solid #FF9800;
}
.recipe-accordion .accordion-header button[aria-expanded="true"] {
background: linear-gradient(135deg, #FFF5E8 0%, #FFECCC 100%);
}
/* Reduced margin for sections containing accordions */
.fun-facts-section,
.faq-accordion-section,
.faq-section {
margin-top: 10px;
margin-bottom: 1.5rem;
}
.faq-section details {
margin-bottom: 1rem;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid #ddd;
}
.faq-section summary {
font-weight: 600;
cursor: pointer;
}
/* ========================================
12. FOOTER
======================================== */
.site-footer {
background-color: #1A3A52;
color: white;
padding: 20px 30px;
font-size: 14px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
border-top: 3px solid #2C5F8D;
}
/* Language selector - positioned first */
.footer-languages {
text-align: center;
padding: 0 0 15px 0;
margin-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 13px;
}
.footer-languages a {
color: white;
text-decoration: none;
padding: 5px 8px;
transition: all 0.3s ease;
font-weight: 500;
border-radius: 4px;
}
.footer-languages a:hover {
color: #7BA7D1;
background-color: rgba(255, 255, 255, 0.1);
}
.footer-languages .separator {
color: rgba(255, 255, 255, 0.4);
margin: 0 5px;
}
/* Footer container - FIXED: True centering with grid */
.footer-container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.footer-left {
justify-self: start;
}
.footer-center {
justify-self: center;
font-weight: 400;
font-size: 14px;
text-align: center;
}
/* Footer right is not in HTML, but keeping it for potential future use */
.footer-right {
justify-self: end;
white-space: nowrap;
font-weight: 600;
}
.footer-left a,
.footer-right a {
margin: 0 10px;
color: white;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.footer-left a svg {
width: 24px;
height: 24px;
stroke: white;
transition: stroke 0.3s ease;
}
.footer-left a:hover svg {
stroke: #7BA7D1;
}
.footer-right a:hover {
text-decoration: underline;
color: #7BA7D1;
}
/* ========================================
13. SCROLL ANIMATIONS
======================================== */
.fade-in {
animation: fadeIn 1.2s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in-section {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.visible {
opacity: 1;
transform: translateY(0);
}
/* Hover Effects */
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
/* ========================================
14. UTILITY ELEMENTS
======================================== */
/* ========================================
14. FLOATING BUTTONS & TOC PANEL
======================================== */
/* Floating Buttons Container */
.floating-buttons {
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 1000;
}
/* Individual Floating Buttons */
.float-btn {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #2C5F8D 0%, #1A3A52 100%);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(79, 124, 172, 0.25); /* Softer shadow */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.float-btn:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(79, 124, 172, 0.35); /* Softer shadow on hover */
background: linear-gradient(135deg, #3D5A80 0%, #2E4057 100%); /* Softer darker gradient */
}
.float-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4), 0 8px 24px rgba(79, 124, 172, 0.35);
}
.float-btn:active {
transform: translateY(-2px);
}
.float-btn svg {
width: 24px;
height: 24px;
stroke-width: 2.5;
}
/* Back to Top Button - Initially Hidden */
.back-to-top-btn {
opacity: 0;
visibility: hidden;
transform: scale(0.8);
}
.back-to-top-btn.visible {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/* ToC Menu Button Tooltip */
.toc-menu-btn::before {
content: attr(title);
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
margin-right: 12px;
padding: 6px 12px;
background: rgba(61, 90, 128, 0.95); /* Updated to match new button color */
color: white;
font-size: 0.875rem;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.toc-menu-btn:hover::before {
opacity: 1;
}
/* Floating ToC Panel */
.floating-toc-panel {
position: fixed;
top: 50%; /* Center vertically */
transform: translateY(-50%); /* Perfect centering */
right: -380px; /* Hidden off-screen */
width: 360px;
max-height: 85vh; /* Maximum height to prevent overflow */
height: auto; /* Auto-size to content */
background: #FFFFFF; /* Pure white background */
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12); /* Softer, more elegant shadow */
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1100;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px 0 0 12px; /* Rounded corners on left side for elegance */
}
.floating-toc-panel.active {
right: 0;
transform: translateY(-50%); /* Maintain centering when active */
}
/* ToC Panel Header */
.toc-panel-header {
background: linear-gradient(135deg, #2C5F8D 0%, #1A3A52 100%);
color: white;
padding: 1.25rem 1.5rem; /* Slightly reduced padding */
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Softer shadow */
}
.toc-panel-header h3 {
margin: 0;
font-size: 1.25rem;
color: white;
font-weight: 600;
}
.toc-panel-close {
background: rgba(255, 255, 255, 0.2);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: white;
}
.toc-panel-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.toc-panel-close:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.toc-panel-close svg {
width: 20px;
height: 20px;
}
/* ToC Panel Navigation */
.toc-panel-nav {
flex: 0 1 auto; /* Don't force growth - size to content */
overflow-y: auto; /* Scroll only if content exceeds max-height */
padding: 0.75rem 0; /* Reduced from 1.5rem to 0.75rem for tighter spacing */
max-height: calc(85vh - 100px); /* Reserve space for header */
background-color: #FFFFFF;
}
/* Custom Scrollbar for ToC Panel */
.toc-panel-nav::-webkit-scrollbar {
width: 6px;
}
.toc-panel-nav::-webkit-scrollbar-track {
background: #F3F4F6;
}
.toc-panel-nav::-webkit-scrollbar-thumb {
background: #CBD5E0;
border-radius: 3px;
}
.toc-panel-nav::-webkit-scrollbar-thumb:hover {
background: #A0AEC0;
}
/* ToC Panel Links */
.toc-panel-link {
display: block;
color: #1F2937;
text-decoration: underline;
padding: 0.7rem 1.5rem; /* Reduced from 0.875rem to 0.7rem for tighter spacing */
font-size: 1rem;
font-weight: 500;
transition: all 0.2s ease;
border-left: 3px solid transparent;
position: relative;
}
.toc-panel-link:hover {
background: #F9FAFB;
color: #2C5F8D; /* Updated to match new button color */
border-left-color: #E5E7EB;
}
.toc-panel-link:focus {
outline: none;
background: #F3F4F6;
box-shadow: inset 3px 0 0 #2C5F8D; /* Updated to match new color scheme */
}
.toc-panel-link.active {
/* background: linear-gradient(to right, rgba(79, 124, 172, 0.08) 0%, transparent 100%); Softer active background */
background: #EEF4FA;
color: #2C5F8D; /* Updated to match new button color */
border-left-color: #2C5F8D; /* Updated to match new button color */
font-weight: 600;
}
.toc-panel-link.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: #2C5F8D; /* Updated to match new button color */
}
/* Indented links (h3) */
.toc-panel-link.toc-indent {
padding: 0.6rem 1.5rem 0.6rem 2.5rem; /* Reduced vertical padding, maintained left indent */
font-size: 0.9375rem;
font-weight: 400;
}
.toc-panel-link.toc-indent:hover {
background: #F3F4F6;
}
/* Backdrop Overlay */
.toc-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* Reduced from 0.5 to 0.4 for softer appearance */
backdrop-filter: blur(3px); /* Increased blur for softer effect */
z-index: 1050;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.toc-backdrop.active {
opacity: 1;
visibility: visible;
}
/* Old Back to Top Button (Fallback) */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #2C5F8D;
color: white;
border: none;
font-size: 24px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 12px rgba(79, 124, 172, 0.25); /* Softer shadow */
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: #3D5A80; /* Updated to match new color scheme */
transform: translateY(-3px);
}
/* ========================================
RESPONSIVE DESIGN FOR FLOATING ELEMENTS
======================================== */
/* Tablet */
@media (max-width: 1024px) {
.floating-toc-panel {
width: 320px;
right: -340px;
}
}
/* Mobile Landscape & Portrait */
@media (max-width: 768px) {
.floating-buttons {
bottom: 20px;
right: 20px;
gap: 10px;
}
.float-btn {
width: 50px;
height: 50px;
}
.float-btn svg {
width: 22px;
height: 22px;
}
/* Hide tooltip on mobile */
.toc-menu-btn::before {
display: none;
}
.floating-toc-panel {
width: 90%;
max-width: 320px;
right: -100%;
border-radius: 12px 0 0 12px; /* Keep rounded corners on mobile */
}
.toc-panel-header {
padding: 1rem 1rem; /* Reduced padding */
}
.toc-panel-header h3 {
font-size: 1.125rem;
}
.toc-panel-nav {
padding: 0.5rem 0; /* Reduced from 1rem to 0.5rem for tighter mobile spacing */
}
.toc-panel-link {
padding: 0.65rem 1rem; /* Reduced for tighter spacing */
font-size: 0.9375rem;
}
.toc-panel-link.toc-indent {
padding: 0.55rem 1rem 0.55rem 2rem; /* Tighter spacing with maintained indent */
font-size: 0.875rem;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.floating-buttons {
bottom: 16px;
right: 16px;
gap: 8px;
}
.float-btn {
width: 48px;
height: 48px;
}
.float-btn svg {
width: 20px;
height: 20px;
}
.floating-toc-panel {
width: 100%;
max-width: 100%;
border-radius: 0; /* No rounded corners on full-width */
}
.toc-panel-header {
padding: 1rem 0.875rem;
}
}
/* Accessibility: Reduce motion */
@media (prefers-reduced-motion: reduce) {
.floating-toc-panel,
.toc-backdrop,
.float-btn,
.toc-panel-close {
transition: none !important;
}
.float-btn:hover {
transform: none;
}
}
/* Scroll Progress Bar */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: linear-gradient(to right, #667eea, #764ba2);
z-index: 9999;
transition: width 0.1s ease;
}
/* ========================================
15. RESPONSIVE DESIGN
======================================== */
/* Mobile Navigation Toggle */
@media(max-width: 800px) {
.hideOnMobile {
display: none;
}
.menu-button {
display: block;
}
}
@media(max-width: 400px) {
.sidebar {
width: 100%;
}
}
/* Tablet & Desktop Adjustments */
@media (max-width: 1024px) {
.text-image-layout,
.text-image-layout.reverse {
grid-template-columns: 1fr;
gap: 2rem;
}
.text-image-layout.reverse .text-content,
.text-image-layout.reverse .side-image {
order: initial;
}
.side-image {
position: relative;
top: 0;
}
h1 {
font-size: 2.8rem;
}
h2 {
font-size: 2.2rem;
}
.hero-content h1 {
font-size: 3rem;
}
.hero-content h2 {
font-size: 2.5rem;
}
.slideshow-wrapper {
height: 400px;
}
}
/* Tablet Portrait & Mobile Landscape */
@media (max-width: 768px) {
.hero-section {
height: 70vh;
min-height: 400px;
background-attachment: scroll;
}
.hero-section.hero-secondary,
.hero-section.hero-small {
height: 50vh;
min-height: 300px;
}
.hero-content h1 {
font-size: 2.2rem;
}
.hero-content h2 {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
text-align: left;
}
.content-section {
padding: 2rem 1.5rem;
}
.gallery-section {
padding: 3rem 1.5rem;
}
.gallery-section h2 {
font-size: 2rem;
}
.gallery-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.accordion-header button {
padding: 1rem;
font-size: 1rem;
}
.accordion-panel {
padding: 1rem;
}
.lightbox-content {
max-width: 95%;
max-height: 80vh;
}
.lightbox-body {
max-width: 95%;
}
.lightbox-caption {
font-size: 1rem;
}
.lightbox-alt {
font-size: 0.85rem;
}
.lightbox-close {
top: 15px;
right: 20px;
font-size: 40px;
}
.lightbox-nav {
bottom: 20px;
gap: 1rem;
}
.lightbox-prev,
.lightbox-next {
font-size: 1.5rem;
padding: 0.4rem 1rem;
}
.slider-btn {
padding: 0.75rem 1rem;
font-size: 1.5rem;
}
.slider-btn-prev {
left: 10px;
}
.slider-btn-next {
right: 10px;
}
.slideshow-wrapper {
height: 300px;
}
.toc-header h3 {
font-size: 1.1rem;
}
.toc-list a {
font-size: 0.95rem;
}
/* Footer responsive adjustments */
.footer-container {
grid-template-columns: 1fr;
gap: 10px;
text-align: center;
}
.footer-left,
.footer-center,
.footer-right {
justify-self: center;
}
.footer-left a,
.footer-right a {
margin: 0 8px;
}
.footer-languages {
font-size: 12px;
}
.footer-languages a {
padding: 4px 6px;
}
}
/* Mobile Devices */
@media (max-width: 768px) {
.fade-in-section {
opacity: 1;
transform: translateY(0);
transition: none;
}
}
@media (max-width: 480px) {
.breadcrumb {
padding: 0.8rem 1rem;
font-size: 0.85rem;
}
.hero-content h1 {
font-size: 1.8rem;
}
.hero-content h2 {
font-size: 1.5rem;
}
.hero-subtitle {
font-size: 1rem;
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.5rem;
}
.content-section {
padding: 1.5rem 1rem;
}
.gallery-section {
padding: 2rem 1rem;
}
.back-to-top {
width: 45px;
height: 45px;
font-size: 20px;
bottom: 20px;
right: 20px;
}
.slideshow-wrapper {
height: 250px;
}
/* Footer mobile optimizations */
.footer-left a svg {
width: 20px;
height: 20px;
}
.footer-left a,
.footer-right a {
margin: 0 6px;
}
.site-footer {
padding: 15px;
font-size: 13px;
}
.footer-languages {
font-size: 11px;
}
.footer-languages .separator {
margin: 0 3px;
}
}
/* Extra small devices */
@media (max-width: 400px) {
.footer-left a {
margin: 0 5px;
}
}
/* ========================================
16. PRINT STYLES
======================================== */
@media print {
.hero-section,
.gallery-section,
nav,
footer,
.breadcrumb,
.scroll-indicator,
.back-to-top,
.scroll-progress,
.slider-btn,
.slideshow-controls,
.menu-button,
.sidebar,
.floating-buttons,
.floating-toc-panel,
.toc-backdrop {
display: none !important;
}
body {
background-color: white;
}
.content-section {
page-break-inside: avoid;
}
}
/* ========================================
17. UTILITY CLASSES
======================================== */
.text-center {
text-align: center;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.p-0 { padding: 0; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
/* ========================================
READING TIME BADGE STYLES
Add this to your styles.css file
======================================== */
.reading-time-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
margin: 1rem 2rem 0.5rem;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
animation: fadeInUp 0.5s ease-out;
}
.reading-time-badge svg {
flex-shrink: 0;
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile responsive */
@media (max-width: 768px) {
.reading-time-badge {
margin: 0.5rem 1rem;
font-size: 0.85rem;
padding: 6px 12px;
}
}
@media (max-width: 480px) {
.reading-time-badge {
display: flex;
width: calc(100% - 2rem);
margin: 0.5rem 1rem;
}
}
/* ========================================
18. FACTS CARD GRID
======================================== */
.facts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 2rem;
}
.fact-card {
background: #fff;
border-radius: 12px;
padding: 1.25rem;
border: 2px solid #B8CFE6;
border-top: 4px solid #2A6B47;
box-shadow: 0 4px 14px rgba(26, 58, 82, 0.14);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fact-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(26, 58, 82, 0.2);
}
.fact-card__icon {
width: 40px;
height: 40px;
background: #D6EFE0;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.9rem;
}
.fact-card__icon svg {
width: 19px;
height: 19px;
stroke: #2A6B47;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.fact-card__label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #374151;
text-transform: uppercase;
margin-bottom: 0.45rem;
font-family: 'Inter', 'Inter Fallback', sans-serif;
line-height: 1.45;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: #2A6B47;
}
.fact-card__value {
font-size: 1rem;
color: #1A3A52;
line-height: 1.6;
font-weight: 600;
}
.fact-card__value a {
color: #2C5F8D;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.fact-card__value a:hover {
color: #1A3A52;
}
@media (max-width: 1024px) {
.facts-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.facts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
.fact-card {
padding: 1rem;
}
.fact-card__label {
font-size: 0.69rem;
}
.fact-card__value {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.facts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.7rem;
}
.fact-card {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.facts-grid {
grid-template-columns: 1fr;
}
}
/* ========================================
19. PROS & CONS GRID
======================================== */
.pros-cons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 1rem;
}
.pros-card {
border-radius: 10px;
padding: 1.5rem;
border: 2px solid transparent;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}
.pros-card--pros {
background: #F0F7F0;
border-top: 4px solid #2E7D32;
border-color: #C8E6C9;
border-top-color: #2E7D32;
}
.pros-card--cons {
background: #FFF4F4;
border-top: 4px solid #C62828;
border-color: #FFCDD2;
border-top-color: #C62828;
}
.pros-card__title {
margin-bottom: 1rem;
font-size: 1.15rem;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-weight: 700;
}
.pros-card--pros .pros-card__title {
color: #2E7D32;
}
.pros-card--cons .pros-card__title {
color: #C62828;
}
.pros-card__list {
padding-left: 1.2rem;
margin: 0;
}
.pros-card__list li {
margin-bottom: 0.5rem;
font-size: 1rem;
line-height: 1.7;
color: #1F2937;
}
.pros-card__list li:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.pros-cons-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
/* ===== Hero with ![]()
tag (SEO-friendly version) ===== */
.hero-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* ===== Footer Link ===== */
.footer-about-link {
color: white;
text-decoration: none;
}
.footer-about-link:hover {
color: #7BA7D1;
text-decoration: none;
}
/* ========================================
20. IN-PAGE TABLE OF CONTENTS
======================================== */
nav.toc-seo {
background: #F3F7FB;
border: 1px solid #B8CFE6;
border-left: 4px solid #2C5F8D;
border-radius: 6px;
padding: 1.25rem 1.5rem;
margin: 0 auto 2rem;
max-width: 1400px;
position: static;
box-shadow: none;
}
nav.toc-seo ol {
margin: 0;
padding-left: 1.4rem;
columns: 2;
column-gap: 2rem;
}
nav.toc-seo li {
height: auto;
margin-bottom: 0.35rem;
}
nav.toc-seo a {
color: #2C5F8D;
font-size: 0.95rem;
font-weight: 400;
padding: 0;
height: auto;
display: inline;
text-decoration: underline;
}
nav.toc-seo a:hover {
color: #1A3A52;
background: none;
text-decoration: underline;
}
@media (max-width: 768px) {
nav.toc-seo ol {
columns: 1;
}
}
/* ========= skip link ============= */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 9999;
}
.skip-link:focus {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: auto;
height: auto;
padding: 0.75rem 1.5rem;
background: #1A3A52;
color: #fff;
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 0.95rem;
font-weight: 600;
border-radius: 0 0 6px 6px;
text-decoration: none;
overflow: visible;
}
.definition-snippet {
font-size:1.05rem;
line-height:1.6;
margin:25px auto;
max-width:800px;
color:#333;
}
/* ========================================
HERO SPLIT — text left · image right
Replaces full-width hero-section for
breed pages. Zero overlay, fast paint.
======================================== */
.hero-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
max-height: 560px;
background: #F3F7FB;
border-bottom: 2px solid #B8CFE6;
overflow: hidden;
}
/* ── Left: text panel ── */
.hero-split__text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.5rem 2.5rem 2.5rem 3.5rem;
gap: 0;
}
.hero-split__eyebrow {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #2C5F8D;
margin-bottom: 0.6rem;
text-align: left;
}
.hero-split__text h1 {
font-size: clamp(2rem, 3.2vw, 3rem);
color: #1A3A52;
line-height: 1.15;
margin-bottom: 0.75rem;
}
.hero-split__subtitle {
font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
font-size: clamp(0.95rem, 1.4vw, 1.15rem);
font-style: italic;
font-weight: 400;
color: #2C5F8D;
line-height: 1.5;
margin-bottom: 1.25rem;
text-align: left;
padding-left: 0.75rem;
border-left: 3px solid #B8CFE6;
}
.hero-split__definition {
font-size: clamp(0.92rem, 1.2vw, 1.05rem);
line-height: 1.75;
color: #374151;
margin-bottom: 0;
text-align: left;
}
/* ── Right: image panel ── */
.hero-split__media {
overflow: hidden;
position: relative;
}
.hero-split__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 65%;
display: block;
/* No lazy — already eager+high priority above */
}
/* ── Responsive ── */
@media (max-width: 900px) {
.hero-split {
grid-template-columns: 1fr;
max-height: none;
}
.hero-split__media {
height: 260px;
order: -1; /* image on top on mobile */
}
.hero-split__text {
padding: 1.75rem 1.5rem;
}
.hero-split__text h1 {
font-size: 1.9rem;
}
}
@media (max-width: 480px) {
.hero-split__media {
height: 200px;
}
.hero-split__text {
padding: 1.25rem 1rem;
}
}
/* ===== Comparison table ===== */
.comparison-table-section {
margin: 3rem 0;
}
.comparison-table-section h2 {
margin-bottom: 1.25rem;
}
.comparison-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #d9dee3;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.comparison-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
font-size: 1rem;
line-height: 1.6;
}
.comparison-table caption {
caption-side: top;
text-align: left;
padding: 1rem 1.25rem 0;
font-weight: 700;
font-size: 0.95rem;
color: #425466;
}
.comparison-table thead th {
background: #f5f7fa;
color: #1f2a37;
text-align: left;
font-weight: 700;
padding: 1rem 1.25rem;
border-bottom: 1px solid #d9dee3;
vertical-align: top;
white-space: normal;
}
.comparison-table tbody td {
padding: 1rem 1.25rem;
border-bottom: 1px solid #e7ecf1;
vertical-align: top;
color: #243444;
}
.comparison-table tbody tr:last-child td {
border-bottom: none;
}
.comparison-table tbody tr:nth-child(even) {
background: #fbfcfd;
}
.comparison-table th:first-child,
.comparison-table td:first-child {
font-weight: 700;
color: #13202c;
width: 22%;
}
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
width: 30%;
}
.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3) {
width: 20%;
}
.comparison-table th:nth-child(4),
.comparison-table td:nth-child(4) {
width: 28%;
}
/* ===== Mobile card layout ===== */
@media (max-width: 768px) {
.comparison-table-wrap {
overflow: visible;
border: none;
box-shadow: none;
background: transparent;
}
.comparison-table {
min-width: 0;
border-collapse: separate;
border-spacing: 0;
}
.comparison-table thead {
display: none;
}
.comparison-table,
.comparison-table tbody,
.comparison-table tr,
.comparison-table td {
display: block;
width: 100%;
}
.comparison-table tr {
margin-bottom: 1rem;
background: #ffffff;
border: 1px solid #d9dee3;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.comparison-table td {
border: none;
border-bottom: 1px solid #edf1f5;
padding: 0.85rem 1rem 0.85rem 1rem;
}
.comparison-table td:last-child {
border-bottom: none;
}
.comparison-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 0.35rem;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #5b6b79;
}
}
.image-section-stand-alone-image {
margin: 40px auto;
max-width: 900px;
text-align: center;
}
.image-section-stand-alone-image img {
width: 100%;
height: auto;
display: block;
}
.image-section-stand-alone-image-figcaption {
margin-top: 10px;
font-size: 14px;
color: #666;
text-align: center;
}
/* ========================================
HERO STAND ALONE
======================================== */
.hero-standalone-img {
width: 100%;
max-width: 100%;
height: 260px;
overflow: hidden;
line-height: 0;
}
.hero-standalone-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
@media (min-width: 769px) {
.hero-standalone-img {
height: auto;
padding: 0 2rem;
box-sizing: border-box;
}
.hero-standalone-img img {
height: auto;
border-radius: 12px;
object-fit: contain;
}
}
/* Emergency mobile image containment */
@media (max-width: 768px) {
.hero-standalone-img {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.hero-standalone-img img {
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
border-radius: 0 !important;
}
}
/* ========================================
HERO ART — framed image · title +
subtitle upper-left · description lower-
right (overlay hero for "Изкуство" page)
Container aspect-ratio matches the source
photo's own ratio (1289/617 ≈ 2.089), so
object-fit:cover never has to invent extra
crop beyond what's already in the photo.
Capped at 1400px (same as .content-container)
so the image is never blown up far past its
native resolution on ultra-wide screens —
that mismatch was what caused the soft,
"stretched" look.
======================================== */
.hero-art {
position: relative;
width: calc(100% - 2 * clamp(0px, 3vw, 1.5rem));
max-width: 1400px;
margin: 1.5rem auto 2.5rem;
aspect-ratio: 1289 / 617;
max-height: 672px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 24px 48px rgba(15, 30, 45, 0.22);
background: #0F1E2B; /* shows briefly while the image decodes */
}
.hero-art__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 58% 30%;
display: block;
}
/* Scrim across top (title) and bottom (description) so
light-colored text stays readable regardless of what's
behind it in the photo */
.hero-art::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(10, 20, 30, 0.62) 0%,
rgba(10, 20, 30, 0.28) 28%,
rgba(10, 20, 30, 0) 50%),
linear-gradient(0deg,
rgba(10, 20, 30, 0.5) 0%,
rgba(10, 20, 30, 0.18) 24%,
rgba(10, 20, 30, 0) 45%);
pointer-events: none;
}
.hero-art__overlay {
position: absolute;
inset: 0;
}
/* ── Upper-left: title + subtitle ── */
.hero-art__title-block {
position: absolute;
top: clamp(1.25rem, 3vw, 3rem);
left: clamp(1.25rem, 3vw, 3rem);
max-width: 54%;
}
.hero-art__eyebrow {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #CFE0F2;
margin: 0 0 0.6rem;
}
.hero-art__title-block h1 {
font-size: clamp(1.6rem, 3.4vw, 3rem);
line-height: 1.15;
color: #ffffff;
margin: 0 0 0.85rem;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-art__subtitle {
font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
font-size: clamp(0.9rem, 1.3vw, 1.05rem);
font-style: italic;
font-weight: 400;
color: #ffffff;
line-height: 1.5;
margin: 0;
padding-left: 0.65rem;
border-left: 3px solid #B8CFE6;
}
/* ── Lower-right: description ── */
.hero-art__intro-block {
position: absolute;
bottom: clamp(1.25rem, 3vw, 3rem);
right: clamp(1.25rem, 3vw, 3rem);
max-width: 36%;
text-align: left;
background: rgba(12, 22, 32, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
padding: clamp(0.85rem, 1.6vw, 1.5rem);
}
/* ── Lower-left variant: description under the title, same side ── */
.hero-art__intro-block--left {
left: clamp(1.25rem, 3vw, 3rem);
right: auto;
max-width: 54%;
}
.hero-art__definition {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: clamp(0.82rem, 1vw, 0.92rem);
line-height: 1.6;
color: #EDF2F7;
margin: 0;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.hero-art {
width: 100%;
max-width: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
aspect-ratio: 4 / 5;
max-height: 560px;
}
.hero-art__img {
object-position: 66% center;
}
.hero-art__overlay {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(1.25rem, 3vw, 2rem);
gap: 0.9rem;
height: 100%;
box-sizing: border-box;
}
.hero-art__title-block,
.hero-art__intro-block {
position: static;
max-width: 100%;
}
}
@media (max-width: 480px) {
.hero-art {
aspect-ratio: 3 / 4;
max-height: 460px;
}
.hero-art__overlay {
padding: 1rem;
}
.hero-art__title-block h1 {
font-size: 1.5rem;
}
.hero-art__intro-block {
padding: 0.75rem;
}
}
/* ========================================
20. ARTICLE META & SPACING UTILITIES
======================================== */
.article-author {
font-size: 0.85rem;
color: #595959;
margin-bottom: 1rem;
}
.article-author a {
color: #595959;
text-decoration: underline;
}
.text-content--spaced {
margin-top: 2rem;
}
/* ========================================
18. ART SITEMAP / POPULAR LINKS
======================================== */
.art-sitemap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.art-sitemap-card {
background: white;
border: 1px solid #E5E7EB;
border-top: 3px solid #2C5F8D;
border-radius: 8px;
padding: 1.25rem 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.art-sitemap-card h3 {
margin: 0 0 0.6rem 0;
font-size: 0.9rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #1A3A52;
border-bottom: 1px solid #E5E7EB;
padding-bottom: 0.5rem;
}
.art-sitemap-card p {
margin: 0;
line-height: 1.8;
}
.art-sitemap-card a {
color: #2C5F8D;
text-decoration: underline;
transition: color 0.3s ease;
}
.art-sitemap-card a:hover {
color: #1A3A52;
}
.art-sitemap-pending {
color: #9CA3AF;
}
/* ========================================
21. COLORING CARDS — downloadable PDF grid
Used on рисунки-за-оцветяване and similar
"download this page" listing sections.
======================================== */
.coloring-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin: 2rem auto 1rem;
max-width: 1200px;
}
.coloring-card {
background: white;
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.coloring-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.coloring-card__image-wrap {
position: relative;
background: #F3F7FB;
text-align: center;
padding: 1.25rem 1rem 0.5rem;
}
.coloring-card__image-wrap img {
width: 100%;
max-width: 220px;
height: auto;
display: block;
margin: 0 auto;
}
.coloring-card__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
background: #2C5F8D;
color: white;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.3rem 0.65rem;
border-radius: 20px;
}
.coloring-card__body {
padding: 1.1rem 1.5rem 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.coloring-card__title {
margin-bottom: 0.5rem;
}
.coloring-card__desc {
font-size: 0.95rem;
color: #4B5563;
margin-bottom: 1.25rem;
text-align: center;
flex-grow: 1;
}
.coloring-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #2C5F8D;
color: white;
padding: 0.65rem 1.25rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: background-color 0.3s ease;
}
.coloring-card__btn:hover {
background: #1A3A52;
color: white;
}
@media (max-width: 900px) {
.coloring-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.coloring-cards-grid {
grid-template-columns: 1fr;
}
}
/* ========================================
Subsection Jump
======================================== */
.snippet-jump {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
margin: 1.25rem 0 0.5rem;
text-align: center;
}
.snippet-jump a {
color: #1A3A52;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
transition: color 0.15s ease;
}
.snippet-jump a:hover,
.snippet-jump a:focus-visible {
color: #A5502E;
}
/* ========================================
HERO KPS — kartina po snimka hero
Full-bleed panoramic image (native ratio
1400/463) with title + subtitle overlaid
on the right, over the raw-canvas part
of the photo. New class set, does not
touch .hero-art or any other selector.
======================================== */
.hero-kps {
position: relative;
width: calc(100% - 2 * clamp(0px, 3vw, 1.5rem));
max-width: 1400px;
margin: 1.5rem auto 2.5rem;
aspect-ratio: 1400 / 463;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 24px 48px rgba(15, 30, 45, 0.22);
background: #0F1E2B;
}
.hero-kps__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.hero-kps__panel {
position: absolute;
top: 50%;
right: clamp(1.25rem, 4vw, 3.5rem);
transform: translateY(-50%);
max-width: 46%;
text-align: right;
background: rgba(12, 22, 32, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
padding: clamp(1.1rem, 2vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem);
}
.hero-kps__eyebrow {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #CFE0F2;
margin: 0 0 0.6rem;
}
.hero-kps__panel h1 {
font-size: clamp(1.5rem, 2.6vw, 2.5rem);
line-height: 1.15;
color: #ffffff;
margin: 0 0 0.85rem;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-kps__subtitle {
font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
font-size: clamp(0.9rem, 1.2vw, 1.05rem);
font-style: italic;
font-weight: 400;
color: #EDF2F7;
line-height: 1.5;
margin: 0 0 0.9rem;
padding-right: 0.65rem;
border-right: 3px solid #B8CFE6;
}
.hero-kps__definition {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: clamp(0.82rem, 1vw, 0.92rem);
line-height: 1.6;
color: #EDF2F7;
margin: 0;
}
/* ── Mobile: stack image on top, panel below as a solid block ── */
@media (max-width: 900px) {
.hero-kps {
aspect-ratio: auto;
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
}
.hero-kps__img {
width: 100%;
height: 220px;
object-position: 60% 35%;
}
.hero-kps__panel {
position: static;
transform: none;
max-width: 100%;
text-align: left;
background: #1A3A52;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 0;
padding: 1.5rem 1.25rem;
}
.hero-kps__eyebrow {
text-align: left;
}
.hero-kps__subtitle {
border-right: none;
padding-right: 0;
padding-left: 0.65rem;
border-left: 3px solid #B8CFE6;
text-align: left;
}
}
@media (max-width: 480px) {
.hero-kps__img {
height: 180px;
}
.hero-kps__panel h1 {
font-size: 1.4rem;
}
}
/* ===== Reusable equal-width data table =====
Add class="comparison-table data-table-auto" to any
built the same way as .comparison-table (thead,
tbody, th, td, data-label attributes for mobile).
Also add one "cols-N" utility class, where N is the
number of DATA columns, meaning every column except
the first label column. A 6-column table (1 label +
5 sizes) gets class="... data-table-auto cols-5".
Column-width rules are wrapped in a min-width media
query so they never fight with the site's existing
.comparison-table mobile card layout below 769px.
Background and row-line colors apply at every width. ===== */
.comparison-table.data-table-auto thead th {
background: #DCF3E4;
}
.comparison-table.data-table-auto tbody tr {
background: #F1FBF5;
}
.comparison-table.data-table-auto tbody tr:nth-child(even) {
background: #E6F7ED;
}
.comparison-table.data-table-auto tbody tr:not(:last-child) td {
border-bottom-color: #C9E9D5;
}
.comparison-table.data-table-auto tr.table-highlight-row {
background: #CFEEDC;
}
.comparison-table.data-table-auto tr.table-highlight-row td:first-child {
color: #1F7A4D;
}
@media (min-width: 769px) {
.comparison-table.data-table-auto {
table-layout: fixed;
}
.comparison-table.data-table-auto th:first-child,
.comparison-table.data-table-auto td:first-child {
width: 22%;
}
.comparison-table.data-table-auto th:not(:first-child),
.comparison-table.data-table-auto td:not(:first-child) {
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.comparison-table.data-table-auto td:not(:first-child) {
font-weight: 600;
color: #1A3A52;
}
/* Equal-width data columns, pick the class matching how
many data columns this particular table has. */
.comparison-table.data-table-auto.cols-3 th:not(:first-child),
.comparison-table.data-table-auto.cols-3 td:not(:first-child) { width: calc((100% - 22%) / 3); }
.comparison-table.data-table-auto.cols-4 th:not(:first-child),
.comparison-table.data-table-auto.cols-4 td:not(:first-child) { width: calc((100% - 22%) / 4); }
.comparison-table.data-table-auto.cols-5 th:not(:first-child),
.comparison-table.data-table-auto.cols-5 td:not(:first-child) { width: calc((100% - 22%) / 5); }
.comparison-table.data-table-auto.cols-6 th:not(:first-child),
.comparison-table.data-table-auto.cols-6 td:not(:first-child) { width: calc((100% - 22%) / 6); }
.comparison-table.data-table-auto.cols-7 th:not(:first-child),
.comparison-table.data-table-auto.cols-7 td:not(:first-child) { width: calc((100% - 22%) / 7); }
.comparison-table.data-table-auto.cols-8 th:not(:first-child),
.comparison-table.data-table-auto.cols-8 td:not(:first-child) { width: calc((100% - 22%) / 8); }
}
/* ========================================
22. SIDE MEDIA CAROUSEL
Text on one side, auto-rotating image
stack on the other (2-4 images, default
3). Rotates every 4s via JS toggling
.is-active on .side-media-carousel__slide.
Add class="side-media-carousel--reverse"
to flip to image-left / text-right.
Pure CSS fallback: if JS never runs,
the first slide (marked is-active in the
HTML) is simply the one that's visible.
======================================== */
.side-media-carousel {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
align-items: start;
max-width: 1200px;
margin: 3rem auto;
}
.side-media-carousel--reverse {
grid-template-columns: 400px 1fr;
}
.side-media-carousel--reverse .side-media-carousel__text {
order: 2;
}
.side-media-carousel--reverse .side-media-carousel__media {
order: 1;
}
.side-media-carousel__text {
display: flex;
flex-direction: column;
justify-content: center;
}
.side-media-carousel__eyebrow {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #2C5F8D;
margin-bottom: 0.6rem;
}
.side-media-carousel__text h2,
.side-media-carousel__text h3 {
margin-top: 0;
}
.side-media-carousel__text p:last-child {
margin-bottom: 0;
}
/* Media stack: slides are absolutely positioned on top of
each other and cross-fade via opacity, so container height
is driven by an aspect-ratio rather than the tallest slide. */
.side-media-carousel__media {
position: sticky;
top: 100px;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
background: #F3F7FB;
}
.side-media-carousel__slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 1s ease-in-out;
}
.side-media-carousel__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.side-media-carousel__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Click-to-enlarge is a desktop feature (see universal_1.js);
only hint at it with a zoom cursor above the mobile breakpoint. */
@media (min-width: 901px) {
.side-media-carousel__media {
cursor: zoom-in;
}
.side-media-carousel__dots {
cursor: default;
}
}
/* Optional small dot indicators (added automatically by JS;
safe to ignore/remove if you don't want them) */
.side-media-carousel__dots {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.65rem;
z-index: 2;
}
.side-media-carousel__dot {
width: 13px;
height: 13px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
transition: all 0.3s ease;
cursor: pointer;
}
.side-media-carousel__dot:hover {
background: #FFFFFF;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}
.side-media-carousel__dot:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
}
.side-media-carousel__dot.is-active {
background: #FFFFFF;
width: 32px;
border-radius: 7px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
/* Responsive: stack text above image on tablets/phones,
and stop relying on aspect-ratio cross-fade sizing tricks */
@media (max-width: 900px) {
.side-media-carousel,
.side-media-carousel--reverse {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.side-media-carousel--reverse .side-media-carousel__text,
.side-media-carousel--reverse .side-media-carousel__media {
order: initial;
}
.side-media-carousel__media {
aspect-ratio: 16 / 10;
position: relative;
}
}
@media (max-width: 480px) {
.side-media-carousel__media {
aspect-ratio: 4 / 3;
}
}
/* Portrait media variant — for carousels whose rotating slides are
tall, portrait-oriented photos (~2:3) rather than the default
landscape shots. Keeps close to the images' native ratio so the
full photo shows, instead of being cropped down into a squarer
4:3 box. Add class="side-media-carousel__media--portrait" to the
.side-media-carousel__media element to opt in. */
.side-media-carousel__media--portrait {
aspect-ratio: 2 / 3;
}
@media (max-width: 900px) {
.side-media-carousel__media--portrait {
aspect-ratio: 3 / 4;
}
}
@media (max-width: 480px) {
.side-media-carousel__media--portrait {
aspect-ratio: 3 / 4;
}
}
@media (prefers-reduced-motion: reduce) {
.side-media-carousel__slide {
transition: none;
}
}
/* ========================================
23. HERO SPLIT — reverse modifier
Image left / text right, using the
existing .hero-split component.
======================================== */
.hero-split--reverse {
grid-template-columns: 1fr 1fr;
}
.hero-split--reverse .hero-split__media {
order: 1;
}
.hero-split--reverse .hero-split__text {
order: 2;
padding: 2.5rem 3.5rem 2.5rem 2.5rem;
}
@media (max-width: 900px) {
.hero-split--reverse .hero-split__media {
order: -1; /* image still on top on mobile */
}
.hero-split--reverse .hero-split__text {
order: 2;
padding: 1.75rem 1.5rem;
}
}
/* ========================================
24. HERO FEATURE — near full-width image
with a single positioned text block
(eyebrow / H1 / description together).
Position modifiers: --pos-left (default),
--pos-right, --pos-center.
Distinct from .hero-art / .hero-kps
(which split title and description into
two separate corners) — here all three
pieces stack together in ONE block that
you place left, right, or center.
======================================== */
.hero-feature {
position: relative;
width: calc(100% - 2 * clamp(0px, 3vw, 1.5rem));
max-width: 1400px;
margin: 1.5rem auto 2.5rem;
aspect-ratio: 16 / 7;
max-height: 640px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 24px 48px rgba(15, 30, 45, 0.22);
background: #0F1E2B;
}
.hero-feature__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Full-image scrim so text stays legible regardless of
which side it's placed on */
.hero-feature::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(10, 20, 30, 0.55) 0%,
rgba(10, 20, 30, 0.15) 35%,
rgba(10, 20, 30, 0.15) 65%,
rgba(10, 20, 30, 0.55) 100%
);
pointer-events: none;
}
.hero-feature__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: clamp(1.5rem, 4vw, 4rem);
}
.hero-feature__content {
max-width: 46%;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-feature__eyebrow {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #CFE0F2;
margin: 0 0 0.6rem;
}
.hero-feature__content h1 {
font-size: clamp(1.8rem, 3.6vw, 3.2rem);
line-height: 1.15;
color: #ffffff;
margin: 0 0 0.85rem;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-feature__desc {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: clamp(0.92rem, 1.2vw, 1.05rem);
line-height: 1.6;
color: #EDF2F7;
margin: 0;
width: 100%;
text-align: center;
}
.hero-feature__desc a {
color: #EDF2F7;
text-decoration: underline;
text-decoration-color: rgba(237, 242, 247, 0.5);
text-underline-offset: 3px;
}
.hero-feature__desc a:hover {
color: #FFFFFF;
text-decoration-color: #FFFFFF;
}
/* Position modifiers */
.hero-feature--pos-left .hero-feature__overlay {
justify-content: flex-start;
text-align: left;
}
.hero-feature--pos-right .hero-feature__overlay {
justify-content: flex-end;
text-align: right;
}
.hero-feature--pos-center .hero-feature__overlay {
justify-content: center;
text-align: center;
}
.hero-feature--pos-center .hero-feature__content {
max-width: 60%;
}
/* Center variant needs a stronger, even scrim rather than
the top/bottom gradient used for left/right placements */
.hero-feature--pos-center::before {
background: linear-gradient(
180deg,
rgba(10, 20, 30, 0.35) 0%,
rgba(10, 20, 30, 0.5) 50%,
rgba(10, 20, 30, 0.35) 100%
);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.hero-feature {
width: 100%;
max-width: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
aspect-ratio: 4 / 5;
max-height: 560px;
}
.hero-feature__overlay {
padding: clamp(1.25rem, 5vw, 2rem);
}
.hero-feature__content,
.hero-feature--pos-center .hero-feature__content {
max-width: 100%;
}
}
@media (max-width: 480px) {
.hero-feature {
aspect-ratio: 3 / 4;
max-height: 460px;
}
.hero-feature__content h1 {
font-size: 1.6rem;
}
}
/* ========================================
24. MOSAIC GALLERY ("brick wall" of photos)
A CSS Grid with a repeating, automatic size
pattern (large / tall / wide / small) driven
by :nth-child — drop in however many cells
you like, in any order, and the wall rhythm
happens on its own. No per-page manual
tagging needed.
Each cell holds 1+ .mosaic-gallery__slide.
One slide = static image. Multiple slides =
auto-rotating (same cross-fade mechanism as
the side-media-carousel), with a small corner
badge added automatically by JS so visitors
know that tile changes.
Click-to-enlarge (desktop only) opens the
shared lightbox with Prev/Next browsing every
photo across the whole wall, not just one cell.
======================================== */
.mosaic-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 190px;
grid-auto-flow: dense;
gap: 6px;
max-width: 1200px;
margin: 2.5rem auto 0;
}
.mosaic-gallery__cell {
position: relative;
overflow: hidden;
background: #F3F7FB;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Automatic size pattern — repeats every 9 cells */
.mosaic-gallery__cell:nth-child(9n+1) {
grid-column: span 2;
grid-row: span 2;
}
.mosaic-gallery__cell:nth-child(9n+3),
.mosaic-gallery__cell:nth-child(9n+6) {
grid-row: span 2;
}
.mosaic-gallery__cell:nth-child(9n+4),
.mosaic-gallery__cell:nth-child(9n+8) {
grid-column: span 2;
}
.mosaic-gallery__slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 1s ease-in-out;
}
.mosaic-gallery__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.mosaic-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Small corner badge on rotating cells, added by JS
(mosaic-gallery__cell--rotating) — a quiet signal
that this tile changes, without any text on the image. */
.mosaic-gallery__cell--rotating::after {
content: '';
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.45);
background-image:
linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9));
background-repeat: no-repeat;
background-size: 9px 9px, 9px 9px;
background-position: 4px 4px, 10px 10px;
z-index: 2;
pointer-events: none;
}
/* Click-to-enlarge is a desktop feature (see universal_1.js);
only hint at it, and only lift on hover, above the mobile
breakpoint — nothing to tap-and-guess on touch screens. */
@media (min-width: 901px) {
.mosaic-gallery__cell {
cursor: zoom-in;
}
.mosaic-gallery__cell:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
z-index: 1;
}
}
/* Below 900px: drop the wall pattern entirely and
stack as a plain single-column list — matches how
the side-media-carousels simplify at the same
breakpoint, and keeps this predictable everywhere
it gets reused. */
@media (max-width: 900px) {
.mosaic-gallery {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 1rem;
}
.mosaic-gallery__cell {
grid-column: auto !important;
grid-row: auto !important;
aspect-ratio: 4 / 3;
}
}
/* ========================================
COMPATIBILITY TIER GRID (4-box star/skull rating)
======================================== */
.compatibility-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin: 2rem 0 0;
}
.compatibility-tier {
background: #F9FAFB;
border-radius: 12px;
border-top: 4px solid #2C5F8D;
padding: 1.5rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.compatibility-tier__rating {
font-size: 1.2rem;
letter-spacing: 0.05em;
margin: 0 0 0.5rem;
}
.compatibility-tier__title {
font-family: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
color: #1A3A52;
margin: 0 0 0.75rem;
}
.compatibility-tier ul {
margin: 0;
padding-left: 1.1rem;
font-size: 0.92rem;
line-height: 1.6;
}
.compatibility-tier--best {
border-top-color: #2E7D32;
}
.compatibility-tier--good {
border-top-color: #F9A825;
}
.compatibility-tier--risky {
border-top-color: #EF6C00;
}
.compatibility-tier--avoid {
border-top-color: #B71C1C;
background: #FFF5F5;
}
@media (max-width: 900px) {
.compatibility-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.compatibility-grid {
grid-template-columns: 1fr;
}
}
/* ========================================
END OF STYLESHEET
======================================== */