/* ============================================================ THEME — Light/Dark switch Toggle by setting [data-theme="light"] on . Default = dark (existing site palette, untouched). ============================================================ */ :root { /* ── DARK MODE (default) — canonical palette ── These are the SINGLE SOURCE OF TRUTH. Local :root blocks in each page used to redefine them — now removed. Change colors here only. */ --bg: #0e0d0b; --bg2: #131210; --bg3: #0a0908; --cream: #f2ead8; --gold: #c9a96e; --gold-light: #e2c98a; --text: #d8d0bc; --muted: #6b6357; --border: rgba(201,169,110,0.15); /* Fonts */ --ff-d: 'Cormorant Garamond', Georgia, serif; --ff-b: 'DM Sans', sans-serif; /* Aliases (legacy index.html naming) */ --ff-display: var(--ff-d); --ff-body: var(--ff-b); /* Layout */ --pad: clamp(24px, 5vw, 72px); /* Theme transitions */ --theme-transition: background-color .45s ease, color .35s ease, border-color .35s ease, opacity .35s ease; } /* ============================================================ ACCESSIBILITY - Skip-to-content link (visible only on keyboard focus) - Custom :focus-visible ring matching the brand gold ============================================================ */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 12px 20px; background: var(--gold); color: #0e0d0b; font-family: var(--ff-b); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--gold); transform: translateY(-200%); transition: transform 0.25s ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; } /* Custom focus ring — gold, accessible, hides on mouse click */ *:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; } /* Remove default outline for buttons/inputs in favour of :focus-visible only */ *:focus:not(:focus-visible) { outline: none; } /* Inputs/textareas: subtle border-glow rather than offset outline (keeps form layout clean) */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(201,169,110,0.25); } html, body, nav, footer, .panel, .hero, .about-section, .portfolio-section, .why-section, .testi-section, .testi-card, .faq-section, .cta-section, .btn, .nav-cta, .carousel-btn, #back-top, .reviews-badge, .faq-q, .faq-a, .nav-links a, .footer-nav a, .nav-social a, .footer-social a, .hero-title, .panel-title, .hero-sub, .panel-sub, .about-quote, .about-body, .why-title, .why-body, .why-list li, .portfolio-title, .testi-title, .faq-title, .cta-title, .cta-sub, .film-name, .film-type, .film-place, .testi-text, .testi-author, .lbl, .panel-tag, .hero-tag, .footer-copy, .footer-google-text, .reviews-count, .reviews-label, .legal-page, .legal-section, .legal-h2, .legal-h3, .legal-body, .legal-list li, .legal-card, .legal-toc a, .legal-meta, .legal-contact-card, .contact-section, .contact-form, .contact-form input, .contact-form textarea, .about-page, .corporate-page, .form-input, .form-label, .form-card, .center-badge, .badge-name, .badge-tagline, .nav-logo img, .footer-logo img, .badge-logo { transition: var(--theme-transition); } /* ============================================================ LIGHT MODE — variable overrides ============================================================ */ html[data-theme="light"] { --bg: #f5f1e8; --bg2: #ece6d8; --bg3: #e3dac6; --cream: #1d1a14; /* now: dark text on light bg */ --gold: #a0813f; /* slightly darker gold for AA contrast */ --gold-light:#7d6428; --text: #2a2620; --muted: #7a7163; --border: rgba(160,129,63,0.28); /* Light-mode shared utilities */ --light-veil-strong: linear-gradient(to top, rgba(245,241,232,0.85) 0%, rgba(245,241,232,0.20) 40%, transparent 70%); --light-veil-soft: linear-gradient(to top, rgba(245,241,232,0.92) 0%, transparent 100%); --light-shadow-soft: 0 1px 3px rgba(60,45,20,0.12); } html[data-theme="light"] body { background: var(--bg); color: var(--cream); } /* Grain less visible in light mode */ html[data-theme="light"] body::before { opacity: 0.04; mix-blend-mode: multiply; } /* ─────────── NAV ─────────── */ /* In light mode the nav becomes a solid cream band so headings stay legible over the hero photo. */ html[data-theme="light"] nav { background: rgba(245,241,232,0.35); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(160,129,63,0.10); } html[data-theme="light"] nav.scrolled { background: rgba(245,241,232,0.88); border-bottom: 1px solid var(--border); } /* index.html nav: keep transparent over photo (no toggle there anyway) */ html[data-theme="light"] body > .stage > nav, html[data-theme="light"] .stage nav { background: linear-gradient(to bottom, rgba(245,241,232,0.45) 0%, transparent 100%); border-bottom: none; backdrop-filter: none; } /* Logo: invert back to dark */ html[data-theme="light"] .nav-logo img, html[data-theme="light"] .footer-logo img { filter: none !important; } /* Nav links / icons → dark text */ html[data-theme="light"] .nav-links a, html[data-theme="light"] .nav-social a { color: #1d1a14 !important; text-shadow: none !important; } html[data-theme="light"] .nav-links a { opacity: .8; } html[data-theme="light"] .nav-links a:hover, html[data-theme="light"] .nav-links a.active { color: var(--gold-light) !important; opacity: 1; } html[data-theme="light"] .nav-lang { color: rgba(29,26,20,0.55); } html[data-theme="light"] .nav-lang:hover { color: #1d1a14; } html[data-theme="light"] .nav-cta, html[data-theme="light"] .nav-contact { color: #1d1a14; border-color: rgba(29,26,20,0.45); text-shadow: none; } html[data-theme="light"] .nav-cta:hover, html[data-theme="light"] .nav-contact:hover { background: rgba(29,26,20,0.06); border-color: rgba(29,26,20,0.8); } /* Burger lines */ html[data-theme="light"] .burger span { background: #1d1a14; } /* Mobile menu */ html[data-theme="light"] .mobile-menu { background: rgba(245,241,232,0.98); } html[data-theme="light"] .mobile-menu ul li a { color: var(--cream); } html[data-theme="light"] .mobile-menu-cta { color: #1d1a14; border-color: rgba(29,26,20,0.3); } html[data-theme="light"] .mobile-menu-cta:hover { background: rgba(29,26,20,0.08); border-color: rgba(29,26,20,0.7); } html[data-theme="light"] .mobile-social a { color: rgba(29,26,20,0.45); } html[data-theme="light"] .mobile-social a:hover { color: var(--gold-light); } /* ─────────── HOMEPAGE PANELS ─────────── */ /* Hover/contrast on hero panels: keep the photos but lighten the overlay so text + badge sit on a lighter veil that matches cream tone. */ html[data-theme="light"] .panel-veil { background: linear-gradient(to top, rgba(245,241,232,0.55) 0%, rgba(245,241,232,0.10) 40%, transparent 70%); } html[data-theme="light"] .panel img { filter: brightness(1) saturate(0.95); } html[data-theme="light"] .panel:hover img { filter: brightness(0.95) saturate(1); } html[data-theme="light"] .panel-title { color: #1d1a14; text-shadow: 0 2px 18px rgba(245,241,232,0.6); } html[data-theme="light"] .panel-sub { color: #2a2620; opacity: .8; } html[data-theme="light"] .panel-tag { color: var(--gold-light); } html[data-theme="light"] .panel-cta { color: var(--gold-light); } html[data-theme="light"] .cta-line::before { background: var(--gold-light); } html[data-theme="light"] .cta-line::after { border-color: var(--gold-light); } /* Center badge — invert logo and darken text */ html[data-theme="light"] .badge-logo { filter: drop-shadow(0 0 22px rgba(245,241,232,0.85)) drop-shadow(0 2px 6px rgba(245,241,232,0.7)) brightness(0.15) !important; } html[data-theme="light"] .badge-name { color: #1d1a14; text-shadow: 0 0 50px rgba(245,241,232,0.95), 0 0 24px rgba(245,241,232,0.85), 0 1px 4px rgba(245,241,232,0.7); } html[data-theme="light"] .badge-tagline { color: var(--gold-light); text-shadow: 0 0 18px rgba(245,241,232,0.95), 0 1px 4px rgba(245,241,232,0.7); } html[data-theme="light"] .badge-rule-top, html[data-theme="light"] .badge-rule-bottom { background: linear-gradient(to right, transparent, var(--gold), transparent); } /* Footer on index */ html[data-theme="light"] .stage > footer, html[data-theme="light"] body > .stage footer { background: linear-gradient(to top, rgba(245,241,232,0.85) 0%, transparent 100%); } html[data-theme="light"] .footer-legal a, html[data-theme="light"] .footer-legal span { color: #2a2620; } /* ─────────── HERO (mariage / corporate / about) ─────────── */ html[data-theme="light"] .hero img { filter: brightness(0.95) saturate(0.92); } html[data-theme="light"] .hero-veil { background: linear-gradient(to top, rgba(245,241,232,0.88) 0%, rgba(245,241,232,0.25) 40%, transparent 70%); } html[data-theme="light"] .hero-title { color: #1d1a14; text-shadow: 0 2px 22px rgba(245,241,232,0.6); } html[data-theme="light"] .hero-sub { color: var(--cream); opacity: .82; } html[data-theme="light"] .hero-tag { color: var(--gold-light); } /* ─────────── SECTIONS BG ─────────── */ html[data-theme="light"] .about-section { background: var(--bg); } html[data-theme="light"] .portfolio-section { background: var(--bg2); } html[data-theme="light"] .why-section { background: var(--bg); } html[data-theme="light"] .testi-section { background: var(--bg2); } html[data-theme="light"] .faq-section { background: var(--bg); } html[data-theme="light"] .cta-section { background: var(--bg2); } html[data-theme="light"] .cta-section::before { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(160,129,63,0.10) 0%, transparent 70%); } /* ─────────── CORPORATE-SPECIFIC SECTIONS ─────────── */ html[data-theme="light"] .expertise-section { background: var(--bg2); } html[data-theme="light"] .expertise-card { background: var(--bg); border-color: var(--border); } html[data-theme="light"] .expertise-card:hover { background: rgba(160,129,63,0.06); } html[data-theme="light"] .expertise-name { color: var(--cream); } html[data-theme="light"] .expertise-desc { color: var(--text); } html[data-theme="light"] .expertise-num, html[data-theme="light"] .expertise-arrow { color: var(--gold-light); } html[data-theme="light"] .expertise-arrow-line::before { background: var(--gold-light); } html[data-theme="light"] .expertise-arrow-line::after { border-color: var(--gold-light); } /* Trust logos band — was bg3 (near-black). In light mode: cream contrasted band */ html[data-theme="light"] .trust-section { background: #ebe4d3; border-color: var(--border); } html[data-theme="light"] .trust-label { color: var(--muted); } /* Logos used brightness(0) invert(1) → invisible on cream. Restore dark logos. */ html[data-theme="light"] .trust-logos img { filter: brightness(0) saturate(0); opacity: 0.55; } html[data-theme="light"] .trust-logos img:hover { opacity: 0.9; } /* Bloc sections (alternating) */ html[data-theme="light"] .bloc-section:nth-of-type(even) { background: var(--bg2); } html[data-theme="light"] .bloc-title { color: var(--cream); } html[data-theme="light"] .bloc-num, html[data-theme="light"] .bloc-subtitle { color: var(--gold-light); } html[data-theme="light"] .bloc-body, html[data-theme="light"] .bloc-list li { color: var(--text); opacity: .85; } html[data-theme="light"] .bloc-list-title { color: var(--muted); } html[data-theme="light"] .bloc-list li::before { background: var(--gold-light); } html[data-theme="light"] .bloc-img-wrap img { filter: brightness(1) saturate(0.92); } html[data-theme="light"] .bloc-img-wrap::after { border-color: rgba(160,129,63,0.55); } /* KPI grid */ html[data-theme="light"] .kpi-grid { background: var(--border); } html[data-theme="light"] .kpi-item { background: #ebe4d3; } html[data-theme="light"] .bloc-section:nth-of-type(even) .kpi-item { background: var(--bg); } html[data-theme="light"] .kpi-item:hover { background: rgba(160,129,63,0.08); } html[data-theme="light"] .kpi-num { color: var(--gold-light); } html[data-theme="light"] .kpi-label { color: var(--text); } html[data-theme="light"] .kpi-source { color: var(--muted); } /* Pull quote */ html[data-theme="light"] .quote-section { background: #ebe4d3; } html[data-theme="light"] .pull-quote-mark { color: var(--gold); opacity: .25; } html[data-theme="light"] .pull-quote-text { color: var(--cream); opacity: .88; } html[data-theme="light"] .pull-quote-attr { color: var(--muted); } /* Approche / generic image filters */ html[data-theme="light"] .approche-img img { filter: saturate(0.95) brightness(1); } /* btn-white (corporate) — needs dark text in light mode */ html[data-theme="light"] .btn-white { color: var(--cream); border-color: rgba(29,26,20,0.4); } html[data-theme="light"] .btn-white:hover { background: rgba(29,26,20,0.08); border-color: rgba(29,26,20,0.7); color: var(--cream); } /* ─────────── TYPOGRAPHY ─────────── */ html[data-theme="light"] .about-quote, html[data-theme="light"] .why-title, html[data-theme="light"] .portfolio-title, html[data-theme="light"] .testi-title, html[data-theme="light"] .faq-title, html[data-theme="light"] .cta-title { color: var(--cream); } html[data-theme="light"] .about-quote em { color: var(--gold-light); } html[data-theme="light"] .about-body, html[data-theme="light"] .why-body, html[data-theme="light"] .why-list li, html[data-theme="light"] .cta-sub { color: var(--text); opacity: .82; } html[data-theme="light"] .lbl, html[data-theme="light"] .cta-eyebrow { color: var(--gold-light); } html[data-theme="light"] .lbl::before { background: var(--gold-light); } /* About image frame */ html[data-theme="light"] .about-img::after { border-color: rgba(160,129,63,0.55); } html[data-theme="light"] .about-img img { filter: saturate(0.95) brightness(1); } /* ─────────── BUTTONS ─────────── */ html[data-theme="light"] .btn { color: var(--gold-light); border-color: rgba(160,129,63,0.5); } html[data-theme="light"] .btn:hover { background: var(--gold-light); color: #f5f1e8; border-color: var(--gold-light); } html[data-theme="light"] .btn-solid { background: var(--gold-light); color: #f5f1e8; border-color: var(--gold-light); } html[data-theme="light"] .btn-solid:hover { background: var(--gold); border-color: var(--gold); } /* ─────────── FILM CARDS ─────────── */ html[data-theme="light"] .film-card img, html[data-theme="light"] .why-card img { filter: brightness(0.92) saturate(0.95); } html[data-theme="light"] .film-card:hover img, html[data-theme="light"] .why-card:hover img { filter: brightness(0.7) saturate(1); } html[data-theme="light"] .film-info, html[data-theme="light"] .why-card-info { background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%); } /* film-name text stays white over image (info gradient is dark) */ html[data-theme="light"] .film-name, html[data-theme="light"] .why-card-name { color: #fff; } html[data-theme="light"] .film-type, html[data-theme="light"] .why-card-type { color: var(--gold-light); } html[data-theme="light"] .film-place { color: rgba(255,255,255,0.65); } html[data-theme="light"] .film-ring { background: rgba(245,241,232,0.25); } html[data-theme="light"] .film-play-label { color: #fff; } /* ─────────── TESTIMONIALS ─────────── */ html[data-theme="light"] .testi-card { background: var(--bg); box-shadow: 0 1px 0 rgba(0,0,0,0.04); } html[data-theme="light"] .testi-text { color: var(--cream); opacity: .9; } html[data-theme="light"] .testi-author { color: var(--gold-light); } html[data-theme="light"] .testi-q { color: var(--gold); opacity: .25; } html[data-theme="light"] .reviews-badge { background: rgba(160,129,63,0.06); border-color: rgba(160,129,63,0.3); } html[data-theme="light"] .reviews-count { color: var(--cream); } html[data-theme="light"] .reviews-label { color: var(--muted); } html[data-theme="light"] .stars, html[data-theme="light"] .footer-stars { color: var(--gold-light); } html[data-theme="light"] .carousel-dot { background: var(--muted); opacity: .5; } html[data-theme="light"] .carousel-dot.active { background: var(--gold-light); opacity: 1; } html[data-theme="light"] .carousel-btn { color: var(--text); border-color: var(--border); } html[data-theme="light"] .carousel-btn:hover { border-color: var(--gold-light); background: rgba(160,129,63,0.06); color: var(--gold-light); } /* ─────────── FAQ ─────────── */ html[data-theme="light"] .faq-item { border-top-color: var(--border); } html[data-theme="light"] .faq-q { color: var(--cream); } html[data-theme="light"] .faq-q:hover, html[data-theme="light"] .faq-q.open { color: var(--gold-light); } html[data-theme="light"] .faq-icon::before, html[data-theme="light"] .faq-icon::after { background: var(--gold-light); } html[data-theme="light"] .faq-a { color: var(--text); opacity: .82; } /* ─────────── CONTACT PAGE ─────────── */ html[data-theme="light"] .contact-section { background: var(--bg); } html[data-theme="light"] .info-block { border-bottom-color: var(--border); } html[data-theme="light"] .info-label { color: var(--gold-light); } html[data-theme="light"] .info-value, html[data-theme="light"] .info-value a { color: var(--cream); } html[data-theme="light"] .info-value a:hover { color: var(--gold); } html[data-theme="light"] .info-note { color: var(--text); opacity: .65; } html[data-theme="light"] .info-social a { color: var(--text); } html[data-theme="light"] .info-social a:hover { color: var(--gold); } html[data-theme="light"] .info-stars, html[data-theme="light"] .footer-stars { color: var(--gold-light); } html[data-theme="light"] .info-google-text { color: var(--text); } html[data-theme="light"] .form-intro { color: var(--text); opacity: .8; } html[data-theme="light"] .form-group label, html[data-theme="light"] .form-group > div[data-fr] { color: var(--gold-light); } html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group select, html[data-theme="light"] .form-group textarea { background: rgba(29,26,20,0.04); border-color: rgba(160,129,63,0.28); color: var(--cream); } html[data-theme="light"] .form-group input::placeholder, html[data-theme="light"] .form-group textarea::placeholder { color: var(--muted); opacity: .7; } html[data-theme="light"] .form-group input:focus, html[data-theme="light"] .form-group select:focus, html[data-theme="light"] .form-group textarea:focus { background: rgba(29,26,20,0.07); border-color: var(--gold-light); } html[data-theme="light"] .form-group select option { background: #fff; color: var(--cream); } html[data-theme="light"] .radio-group label { color: var(--text); border-color: rgba(160,129,63,0.28); } html[data-theme="light"] .radio-group label:hover { border-color: var(--gold-light); } html[data-theme="light"] .radio-group label:has(input:checked) { background: rgba(160,129,63,0.10); border-color: var(--gold-light); color: var(--gold-light); } html[data-theme="light"] .btn-submit { background: var(--gold-light); border-color: var(--gold-light); color: #fff; } html[data-theme="light"] .btn-submit:hover { background: var(--gold); border-color: var(--gold); } html[data-theme="light"] .form-success { background: rgba(160,129,63,0.06); border-color: rgba(160,129,63,0.32); } html[data-theme="light"] .form-success-icon, html[data-theme="light"] .form-success-title { color: var(--cream); } html[data-theme="light"] .form-success-sub { color: var(--text); } /* Date picker — light theme */ html[data-theme="light"] .dp-input { background: rgba(29,26,20,0.04); border-color: rgba(160,129,63,0.28); color: var(--cream); } html[data-theme="light"] .dp-input:hover, html[data-theme="light"] .dp-wrap.open .dp-input { background: rgba(29,26,20,0.07); border-color: var(--gold-light); } html[data-theme="light"] .dp-input.empty { color: var(--muted); } html[data-theme="light"] .dp-icon { stroke: var(--gold-light); } html[data-theme="light"] .dp-panel { background: #fdfbf5; border-color: rgba(160,129,63,0.32); box-shadow: 0 24px 60px rgba(60,45,18,0.18), 0 4px 14px rgba(60,45,18,0.10); } html[data-theme="light"] .dp-title { color: var(--cream); } html[data-theme="light"] .dp-nav { border-color: rgba(160,129,63,0.32); color: var(--gold-light); } html[data-theme="light"] .dp-nav:hover { border-color: var(--gold-light); background: rgba(160,129,63,0.10); } html[data-theme="light"] .dp-dow { color: var(--gold-light); } html[data-theme="light"] .dp-day { color: var(--text); } html[data-theme="light"] .dp-day:hover:not(.disabled):not(.selected) { background: rgba(160,129,63,0.12); color: var(--cream); } html[data-theme="light"] .dp-day.today { border-color: rgba(160,129,63,0.45); color: var(--gold-light); } html[data-theme="light"] .dp-day.selected { background: var(--gold-light); color: #fff; } html[data-theme="light"] .dp-foot { border-top-color: rgba(160,129,63,0.18); } html[data-theme="light"] .dp-clear:hover { color: var(--gold-light); } html[data-theme="light"] .dp-today-btn { border-color: rgba(160,129,63,0.32); color: var(--gold-light); } html[data-theme="light"] .dp-today-btn:hover { background: rgba(160,129,63,0.10); border-color: var(--gold-light); } /* ─────────── ABOUT PAGE — alternate band fixes ─────────── */ html[data-theme="light"] .stats-section { background: var(--bg3) !important; } html[data-theme="light"] .stat-item { background: var(--bg3) !important; color: var(--cream); } html[data-theme="light"] .stat-item:hover { background: rgba(160,129,63,0.06) !important; } html[data-theme="light"] .stats-inner { background: var(--border) !important; } html[data-theme="light"] .stat-num { color: var(--gold-light); } html[data-theme="light"] .stat-label { color: var(--text); opacity: .75; } html[data-theme="light"] .section-duo { background: var(--bg); } html[data-theme="light"] .section-duo:nth-of-type(even) { background: var(--bg2) !important; } html[data-theme="light"] .duo-tag, html[data-theme="light"] .duo-title, html[data-theme="light"] .duo-highlight, html[data-theme="light"] .duo-body { color: var(--cream); } html[data-theme="light"] .duo-body { color: var(--text); opacity: .82; } html[data-theme="light"] .duo-highlight { color: var(--cream); } /* About light: cta-section → bandeau sombre (rupture forte avec la lame cream précédente) */ html[data-theme="light"] .about-page .cta-section, html[data-theme="light"] .corporate-page .cta-section, html[data-theme="light"] section.cta-section { background: #1d1a14 !important; } html[data-theme="light"] section.cta-section .cta-title, html[data-theme="light"] section.cta-section .cta-sub { color: #f5f1e8 !important; } html[data-theme="light"] section.cta-section .cta-eyebrow { color: var(--gold-light) !important; } html[data-theme="light"] section.cta-section .btn { color: #1d1a14; } html[data-theme="light"] section.cta-section .btn-solid { background: var(--gold-light); border-color: var(--gold-light); color: #1d1a14; } html[data-theme="light"] section.cta-section .btn-solid:hover { background: var(--gold); border-color: var(--gold); } html[data-theme="light"] section.cta-section a[href^="tel"] { color: rgba(245,241,232,0.7) !important; } /* ─────────── FOOTER ─────────── */ html[data-theme="light"] .footer-nav a { color: var(--text); opacity: .75; } html[data-theme="light"] .footer-nav a:hover { color: var(--gold-light); opacity: 1; } html[data-theme="light"] .footer-sep { color: var(--muted); } html[data-theme="light"] .footer-social a { color: var(--text); opacity: .6; } html[data-theme="light"] .footer-social a:hover { color: var(--gold-light); opacity: 1; } html[data-theme="light"] .footer-google-text { color: var(--muted); opacity: .7; } html[data-theme="light"] .footer-copy { color: var(--muted); opacity: .55; } /* ─────────── BACK TOP ─────────── */ html[data-theme="light"] #back-top { background: rgba(245,241,232,0.92); border-color: var(--border); } html[data-theme="light"] #back-top svg { stroke: var(--cream); } html[data-theme="light"] #back-top:hover { border-color: var(--gold-light); } /* ─────────── DIVIDER (homepage) ─────────── */ html[data-theme="light"] .divider { background: linear-gradient(to bottom, transparent 0%, var(--gold) 25%, var(--gold) 75%, transparent 100%); opacity: 0.32; } /* ─────────── LEGAL / CONTACT / ABOUT pages — generic adjustments ─────────── */ html[data-theme="light"] .legal-page, html[data-theme="light"] .legal-section, html[data-theme="light"] .legal-card, html[data-theme="light"] .legal-contact-card { background: var(--bg); color: var(--cream); } html[data-theme="light"] .legal-h2, html[data-theme="light"] .legal-h3, html[data-theme="light"] .legal-section h2, html[data-theme="light"] .page-title { color: var(--cream) !important; } html[data-theme="light"] .legal-section h3 { color: var(--gold-light); } html[data-theme="light"] .legal-section p, html[data-theme="light"] .legal-section ul li, html[data-theme="light"] .legal-body, html[data-theme="light"] .legal-list li { color: var(--text); opacity: .85; } html[data-theme="light"] .legal-section ul li::before { color: var(--gold-light); } html[data-theme="light"] .legal-section a { color: var(--gold-light); } html[data-theme="light"] .legal-toc a { color: var(--text); } html[data-theme="light"] .legal-toc a:hover { color: var(--gold-light); } html[data-theme="light"] .legal-meta { color: var(--muted); } html[data-theme="light"] .page-header { border-bottom-color: var(--border); } /* Bigger back-top button */ #back-top { width: 52px !important; height: 52px !important; } #back-top svg { width: 16px !important; height: 16px !important; } /* Footer nav separators — boosted visibility */ .footer-sep { opacity: 0.55 !important; font-size: 12px !important; } html[data-theme="light"] .footer-sep { color: var(--gold-light) !important; opacity: 0.7 !important; } /* Footer Google badge — clickable */ a.footer-google { text-decoration: none; color: inherit; transition: opacity 0.2s; } a.footer-google:hover { opacity: 0.75; } a.footer-google:hover .footer-stars { color: var(--gold-light); } /* ============================================================ GLOBAL iOS SAFARI FIX - `body { overflow-x: hidden }` (set on every page) silently breaks `position: fixed` on iOS Safari: the fixed nav scrolls away with the page instead of staying pinned at the top, and the section behind it bleeds above the bar — making the menu look like it's floating in the middle of the screen. - `overflow-x: clip` provides the same horizontal clipping WITHOUT creating a scroll container, so `position: fixed` keeps working. Safari 16+ / iOS 16+ supports it. - The @supports guard means older browsers fall back gracefully to the original `overflow-x: hidden` behaviour. - We ALSO force this on the page wrapper / common containers in case a page sets overflow on something else. ============================================================ */ @supports (overflow-x: clip) { html, body { overflow-x: clip !important; } } /* ============================================================ GLOBAL iOS SAFARI FIX — NAV PIN Belt-and-braces stabilisation of the fixed top nav. Even with overflow-x:clip on body, iOS Safari can still desync `position: fixed` during address-bar collapse/expand if the element isn't promoted to its own compositor layer. These rules: 1. Re-assert `position: fixed; top: 0` with !important so nothing later can knock it loose. 2. Force a GPU layer via translateZ(0) so iOS treats the bar as an independent fixed layer and keeps it pinned to the visual viewport top instead of scrolling away. 3. Add a safety ::before that fills the safe-area-inset (notch / dynamic island region) with the same opaque background, so if the nav ever shifts a hair on rubber- band overscroll, nothing bleeds through behind it. ============================================================ */ nav#main-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; /* Promote the bar to its own GPU layer. This is the key fix for iOS Safari: a compositor-promoted fixed element tracks the VISUAL viewport (the visible area minus the dynamic address bar) instead of the layout viewport, so it stays pinned during the address-bar collapse/expand animation and never reveals the page content above itself. */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } /* ============================================================ GLOBAL MOBILE NAV FIX - Make the lang toggle visible on mobile (was hidden site-wide) - Always-opaque nav background so the hero/section doesn't bleed ABOVE the header (e.g. on iOS overscroll or before scroll) - Honour iOS safe-area-inset-top so the bar sits flush at the top ============================================================ */ @media (max-width: 768px) { /* iOS-bulletproof nav: position:sticky + ::before background extender. - sticky takes layout space, so no page content can ever appear ABOVE the nav (the bug the user kept hitting with fixed). - sticky doesn't suffer from iOS's position:fixed desync during address-bar collapse, rubber-band scroll, or overflow-x quirks. - The ::before extends the nav's background INFINITELY upward, attached to the sticky nav. So the safe-area / notch zone above the nav is ALWAYS covered with the nav color, no matter what (rubber-band, safe-area-inset misread, anything). - background is also set to nav color as a final fallback for any overscroll outside the body. - Scoped to #main-nav so the index.html split-screen layout (which uses