/* ==================================================================== Dilogic Group — Spine stylesheet (Phase 4 design preview, v0.4) Locked tokens: see docs/04-design/00-design-system.md v0.4 Now supports dual-theme (dark/light) via [data-theme="…"] on . ==================================================================== */ /* ============================================================ THEME TOKENS — single source of truth ============================================================ */ :root { /* Surfaces */ --bg: #000000; --bg-2: #0a0a0a; --bg-3: #141414; --bg-elev: rgba(0,0,0,0.72); /* Foreground */ --fg: #f0ebe1; --fg-soft: rgba(240,235,225,0.6); --fg-faint: rgba(240,235,225,0.3); --fg-mute: rgba(240,235,225,0.45); /* Lines */ --line: rgba(240,235,225,0.08); --line-soft: rgba(240,235,225,0.04); --line-strong: rgba(240,235,225,0.3); /* Brand gold (works on both, but light gets a deeper variant below) */ --gold: #c8a96a; --gold-soft: rgba(200,169,106,0.4); --gold-faint: rgba(200,169,106,0.15); --gold-on: #000000; /* foreground on gold buttons */ /* Sector accent — overridden per [data-vertical] */ --color-accent: #c8a96a; --color-accent-soft: rgba(200,169,106,0.4); --color-accent-faint: rgba(200,169,106,0.15); /* Hero ambient gradient stops */ --hero-grad-1: rgba(200,169,106,0.10); --hero-grad-2: rgba(200,169,106,0.06); --hero-grad-3: rgba(15,15,15,0.4); --hero-grad-4: rgba(0,0,0,0.7); --hero-grad-5: rgba(20,15,10,0.4); --hero-overlay-top: rgba(0,0,0,0.35); --hero-overlay-mid: rgba(0,0,0,0.55); --hero-overlay-bottom: rgba(0,0,0,0.92); --hero-vignette: rgba(0,0,0,0.4); /* Image treatment (photography theme adaptation) */ --img-overlay: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0.65) 100%); --img-tone: none; /* Header */ --header-elev: rgba(0,0,0,0.72); /* Selection */ --select-bg: #c8a96a; --select-fg: #000; } /* ============== LIGHT THEME ============== */ [data-theme="light"] { --bg: #f7f3ec; --bg-2: #ffffff; --bg-3: #ece8df; --bg-elev: rgba(247,243,236,0.85); --fg: #1a1614; --fg-soft: rgba(26,22,20,0.68); --fg-faint: rgba(26,22,20,0.42); --fg-mute: rgba(26,22,20,0.55); --line: rgba(26,22,20,0.10); --line-soft: rgba(26,22,20,0.05); --line-strong: rgba(26,22,20,0.35); --gold: #8a6a32; --gold-soft: rgba(138,106,50,0.4); --gold-faint: rgba(138,106,50,0.12); --gold-on: #ffffff; --color-accent: #8a6a32; --color-accent-soft: rgba(138,106,50,0.4); --color-accent-faint: rgba(138,106,50,0.12); --hero-grad-1: rgba(138,106,50,0.10); --hero-grad-2: rgba(138,106,50,0.06); --hero-grad-3: rgba(247,243,236,0.4); --hero-grad-4: rgba(247,243,236,0.6); --hero-grad-5: rgba(236,232,223,0.5); --hero-overlay-top: rgba(247,243,236,0.05); --hero-overlay-mid: rgba(247,243,236,0.15); --hero-overlay-bottom: rgba(247,243,236,0.75); --hero-vignette: rgba(26,22,20,0.08); --img-overlay: linear-gradient(180deg, rgba(247,243,236,0.0) 0%, rgba(247,243,236,0.10) 80%, rgba(247,243,236,0.30) 100%); --img-tone: saturate(0.95) contrast(0.96); --header-elev: rgba(247,243,236,0.85); --select-bg: #8a6a32; --select-fg: #fff; } /* Sector accents — DARK (default) */ [data-vertical="retail"] { --color-accent: #d97757; --color-accent-soft: rgba(217,119,87,0.4); --color-accent-faint: rgba(217,119,87,0.12); } [data-vertical="realestate"]{ --color-accent: #a06840; --color-accent-soft: rgba(160,104,64,0.4); --color-accent-faint: rgba(160,104,64,0.12); } [data-vertical="fintech"] { --color-accent: #5a7a9c; --color-accent-soft: rgba(90,122,156,0.4); --color-accent-faint: rgba(90,122,156,0.12); } [data-vertical="gaming"] { --color-accent: #9555ec; --color-accent-soft: rgba(149,85,236,0.4); --color-accent-faint: rgba(149,85,236,0.12); } [data-vertical="mobility"] { --color-accent: #7fb8d9; --color-accent-soft: rgba(127,184,217,0.4); --color-accent-faint: rgba(127,184,217,0.12); } [data-vertical="health"] { --color-accent: #8fa985; --color-accent-soft: rgba(143,169,133,0.4); --color-accent-faint: rgba(143,169,133,0.12); } [data-vertical="tech"] { --color-accent: #67d4d4; --color-accent-soft: rgba(103,212,212,0.4); --color-accent-faint: rgba(103,212,212,0.12); } /* Sector accents — LIGHT (deeper, AA-compliant on cream) */ [data-theme="light"][data-vertical="retail"] { --color-accent: #b04a30; --color-accent-soft: rgba(176,74,48,0.35); --color-accent-faint: rgba(176,74,48,0.10); } [data-theme="light"][data-vertical="realestate"]{ --color-accent: #7d4f30; --color-accent-soft: rgba(125,79,48,0.35); --color-accent-faint: rgba(125,79,48,0.10); } [data-theme="light"][data-vertical="fintech"] { --color-accent: #3e5c7e; --color-accent-soft: rgba(62,92,126,0.35); --color-accent-faint: rgba(62,92,126,0.10); } [data-theme="light"][data-vertical="gaming"] { --color-accent: #6c3bb8; --color-accent-soft: rgba(108,59,184,0.32); --color-accent-faint: rgba(108,59,184,0.10); } [data-theme="light"][data-vertical="mobility"] { --color-accent: #336a90; --color-accent-soft: rgba(51,106,144,0.35); --color-accent-faint: rgba(51,106,144,0.10); } [data-theme="light"][data-vertical="health"] { --color-accent: #4f6845; --color-accent-soft: rgba(79,104,69,0.35); --color-accent-faint: rgba(79,104,69,0.10); } [data-theme="light"][data-vertical="tech"] { --color-accent: #1f7a7a; --color-accent-soft: rgba(31,122,122,0.35); --color-accent-faint: rgba(31,122,122,0.10); } /* ============================================================ GLOBAL RESET / BASE ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: 'Inter', system-ui, sans-serif; font-weight: 300; transition: background-color 280ms ease, color 280ms ease; } body { overscroll-behavior: none; margin: 0; } ::selection { background: var(--select-bg); color: var(--select-fg); } h1, h2, h3, h4, .display { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; } a { color: inherit; text-decoration: none; } /* Tailwind override — redirect hardcoded spine classes to CSS variables. Lets us flip the entire site without touching pages. */ .bg-spine-black, .bg-spine-black-2, .bg-spine-black-3 { transition: background-color 280ms ease; } .bg-spine-black { background-color: var(--bg) !important; } .bg-spine-black-2 { background-color: var(--bg-2) !important; } .bg-spine-black-3 { background-color: var(--bg-3) !important; } .text-spine-white { color: var(--fg) !important; transition: color 280ms ease; } .text-spine-white-soft { color: var(--fg-soft) !important; } .text-spine-white-faint { color: var(--fg-faint) !important; } .text-spine-gold { color: var(--gold) !important; } .text-spine-silver { color: var(--fg-mute) !important; } .border-spine-white-line { border-color: var(--line) !important; } .border-spine-gold { border-color: var(--gold) !important; } .bg-spine-gold { background-color: var(--gold) !important; color: var(--gold-on) !important; } /* Eyebrow */ .eyebrow { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); font-weight: 400; } .eyebrow-silver { color: var(--fg-mute); } .eyebrow-faint { color: var(--fg-faint); } .eyebrow-sector { color: var(--color-accent); } /* Ambient radial */ @keyframes breathe { 0%,100% { opacity: 0.16; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.05); } } .ambient-radial { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, var(--gold-faint), transparent 60%); animation: breathe 12s ease-in-out infinite; } .ambient-radial-sector { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, var(--color-accent-faint), transparent 60%); animation: breathe 12s ease-in-out infinite; } /* Hairlines */ .hairline-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .hairline-silver { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } .hairline-sector { height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); } /* Inline links */ .link-inline { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 300ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease; } .link-inline:hover { background-size: 100% 1px; color: var(--gold); } .link-inline-sector:hover { color: var(--color-accent); } /* Buttons */ .btn-primary { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border: 1px solid var(--gold); color: var(--gold-on); background: var(--gold); font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .btn-primary:hover { transform: translateY(-1px); letter-spacing: 0.12em; box-shadow: 0 0 24px var(--gold-soft); } .btn-primary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary-sector { background: var(--color-accent); border-color: var(--color-accent); color: var(--gold-on); } .btn-primary-sector:hover { box-shadow: 0 0 24px var(--color-accent-soft); } .btn-secondary { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border: 1px solid var(--line-strong); color: var(--fg); background: transparent; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; } .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } .btn-secondary-sector:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); background: transparent; border: 0; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 8px 0; } .btn-ghost .arrow { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-ghost:hover .arrow { transform: translateX(6px); } .btn-ghost-sector { color: var(--color-accent); } /* Cards with cursor-following glow */ .surface-card { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); padding: 32px; transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background-color 280ms ease; } .surface-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%), var(--gold-soft), transparent 60%); transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1); mix-blend-mode: screen; } [data-theme="light"] .surface-card::before { mix-blend-mode: multiply; } .surface-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); } .surface-card:hover::before { opacity: 1; } .surface-card-sector::before { background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%), var(--color-accent-soft), transparent 60%); } .surface-card-sector:hover { border-color: var(--color-accent-soft); } /* Form inputs */ .field-input { width: 100%; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--line-strong); padding: 12px 0; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 16px; transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1); } .field-input::placeholder { color: var(--fg-faint); } .field-input:focus { outline: none; border-bottom-color: var(--gold); } .field-input.error { border-bottom-color: #d97070; } /* Accordion */ details.accordion { border-bottom: 1px solid var(--line); padding: 28px 0; } details.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--fg); line-height: 1.3; } details.accordion summary::-webkit-details-marker { display: none; } details.accordion summary .plus { width: 24px; height: 24px; position: relative; flex-shrink: 0; margin-top: 8px; } details.accordion summary .plus::before, details.accordion summary .plus::after { content: ''; position: absolute; background: var(--gold); top: 50%; left: 50%; transform: translate(-50%, -50%); } details.accordion summary .plus::before { width: 14px; height: 1px; } details.accordion summary .plus::after { width: 1px; height: 14px; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } details.accordion[open] summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } details.accordion .body { padding: 16px 0 0 0; color: var(--fg-soft); font-size: 16px; line-height: 1.65; max-width: 70ch; } /* Marquee */ @keyframes marquee-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, var(--bg) 8%, var(--bg) 92%, transparent); } .marquee-track { display: flex; gap: 64px; width: max-content; animation: marquee-x 30s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } /* Scroll cue */ @keyframes scrollCue { 0%,100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(8px); opacity: 1; } } .scroll-cue { animation: scrollCue 2.4s ease-in-out infinite; } /* Hero word reveal (initial state) */ .hero-word { display: inline-block; opacity: 0; transform: translateY(40px); } /* Containers */ .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; } /* Section spacing */ section { padding: 96px 0; } @media (min-width: 768px) { section { padding: 128px 0; } } /* ============================================================ HEADER — two-tier (utility bar + main header) ============================================================ */ header.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease; border-bottom: 1px solid transparent; } header.site-header.scrolled { background: var(--header-elev); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); } .utility-bar { border-bottom: 1px solid var(--line-soft); padding: 8px 0; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-mute); background: rgba(0,0,0,0.3); transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease; } [data-theme="light"] .utility-bar { background: rgba(247,243,236,0.5); } .utility-bar a { color: var(--fg-mute); transition: color 200ms ease; } .utility-bar a:hover { color: var(--fg); } .utility-bar a.lang-active { color: var(--gold); } [data-vertical] .utility-bar a.lang-active { color: var(--color-accent); } .utility-arrow { display: inline-block; margin-left: 4px; transition: transform 200ms ease; } .utility-bar a:hover .utility-arrow { transform: translate(2px, -2px); } .utility-divider { color: var(--fg-faint); margin: 0 8px; } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; color: var(--fg-mute); transition: color 200ms ease, border-color 200ms ease, transform 200ms ease; padding: 0; margin-left: 12px; font-family: inherit; font-size: 12px; line-height: 1; } .theme-toggle:hover { color: var(--gold); border-color: var(--gold-soft); } .theme-toggle svg { width: 14px; height: 14px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-vertical] .theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent-soft); } .main-header { padding: 14px 0; } /* Brand lockup */ .brand-lockup { display: flex; align-items: center; gap: 12px; line-height: 1; } .brand-mark { width: 44px; height: 44px; flex-shrink: 0; display: block; } .brand-text { display: flex; flex-direction: column; gap: 4px; line-height: 1; } .brand-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; color: var(--fg); line-height: 1; } .brand-sector { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 400; } [data-vertical] .brand-sector { color: var(--color-accent); } /* HERO with media */ .hero-with-media { position: relative; overflow: hidden; background: var(--bg); min-height: 100vh; display: flex; align-items: center; transition: background-color 280ms ease; } .hero-media-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; mix-blend-mode: screen; } [data-theme="light"] .hero-video { opacity: 0.30; mix-blend-mode: multiply; } .hero-media-bg::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 25% 25%, var(--hero-grad-1), transparent 50%), radial-gradient(ellipse at 75% 60%, var(--color-accent-faint), transparent 55%), linear-gradient(135deg, var(--hero-grad-3), var(--hero-grad-4) 50%, var(--hero-grad-5)); background-size: 220% 220%; animation: hero-bg-drift 45s ease-in-out infinite; } @keyframes hero-bg-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-media-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--hero-overlay-top) 0%, var(--hero-overlay-mid) 60%, var(--hero-overlay-bottom) 100%); } .hero-media-overlay::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 50%, var(--hero-vignette) 100%); } /* ============================================================ HERO TEXTURE — theme-aware ambient image inside hero-media-bg Sits BEHIND the video at low opacity to add depth/grain. v0.4 ============================================================ */ .hero-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; transition: opacity 280ms ease; } .hero-texture-dark { opacity: 0.35; mix-blend-mode: screen; display: block; } .hero-texture-light { opacity: 0; display: none; } [data-theme="light"] .hero-texture-dark { opacity: 0; display: none; } [data-theme="light"] .hero-texture-light { opacity: 0.5; mix-blend-mode: multiply; display: block; } /* Place the video on top of the texture */ .hero-video { z-index: 1; } /* ============================================================ HERO TEXT LIFT — atmospheric shadow so headlines/subheads never blend into video or gradient backgrounds. v0.4 ============================================================ */ .hero-with-media h1, .hero-with-media h2, .hero-with-media h3, .hero-with-media .display, .hero-with-media .hero-word, .hero-with-media p, .hero-with-media .eyebrow, .hero-with-media .btn-primary, .hero-with-media .btn-secondary, .hero-with-media a { text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.45), 0 0 36px rgba(0,0,0,0.3); } [data-theme="light"] .hero-with-media h1, [data-theme="light"] .hero-with-media h2, [data-theme="light"] .hero-with-media h3, [data-theme="light"] .hero-with-media .display, [data-theme="light"] .hero-with-media .hero-word, [data-theme="light"] .hero-with-media p, [data-theme="light"] .hero-with-media .eyebrow, [data-theme="light"] .hero-with-media a { text-shadow: 0 1px 2px rgba(247,243,236,0.65), 0 2px 14px rgba(247,243,236,0.55), 0 0 36px rgba(247,243,236,0.4); } /* Buttons keep their solid fill — the shadow above only lifts text rendering; filled .btn-primary uses the gold background, so its inner text stays crisp. Force-disable text-shadow on filled buttons to avoid double-treatment. */ .hero-with-media .btn-primary { text-shadow: none; } [data-theme="light"] .hero-with-media .btn-primary { text-shadow: none; } /* Photography placeholder */ .placeholder-photo { position: relative; overflow: hidden; background: var(--bg-2); isolation: isolate; } .placeholder-photo::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 30% 30%, var(--hero-grad-1), transparent 55%), radial-gradient(ellipse at 70% 70%, var(--color-accent-faint), transparent 55%), linear-gradient(135deg, var(--hero-grad-3), var(--hero-grad-4) 50%, var(--hero-grad-5)); background-size: 250% 250%; animation: hero-bg-drift 60s ease-in-out infinite; } .placeholder-photo::after { content: ''; position: absolute; inset: 24px; z-index: 1; pointer-events: none; border: 1px solid var(--line-soft); } .placeholder-photo > .ph-corner-tl, .placeholder-photo > .ph-corner-tr, .placeholder-photo > .ph-corner-bl, .placeholder-photo > .ph-corner-br { position: absolute; width: 28px; height: 28px; z-index: 2; pointer-events: none; } .placeholder-photo > .ph-corner-tl { top: 0; left: 0; border-top: 1px solid var(--color-accent-soft); border-left: 1px solid var(--color-accent-soft); } .placeholder-photo > .ph-corner-tr { top: 0; right: 0; border-top: 1px solid var(--color-accent-soft); border-right: 1px solid var(--color-accent-soft); } .placeholder-photo > .ph-corner-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--color-accent-soft); border-left: 1px solid var(--color-accent-soft); } .placeholder-photo > .ph-corner-br { bottom: 0; right: 0; border-bottom: 1px solid var(--color-accent-soft); border-right: 1px solid var(--color-accent-soft); } .placeholder-photo > .ph-label { position: absolute; bottom: 16px; left: 16px; z-index: 3; font-size: 9.5px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--fg-faint); } /* ============================================================ IMAGERY LAYER (v0.4) — four contextual treatments ============================================================ */ /* (1) Photo frame — for real photographs (CC0 architectural / scene shots) Wraps an ; img receives theme-aware tonemap + dim. */ .photo-frame { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); isolation: isolate; } .photo-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: var(--img-tone); transition: filter 280ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); } .photo-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--img-overlay); } .photo-frame:hover > img { transform: scale(1.02); } .photo-frame.with-tint::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(135deg, var(--color-accent-faint), transparent 60%); mix-blend-mode: overlay; } .photo-caption { position: absolute; left: 24px; bottom: 24px; z-index: 3; font-size: 10.5px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--fg); text-shadow: 0 1px 12px rgba(0,0,0,0.6); } [data-theme="light"] .photo-caption { text-shadow: 0 1px 12px rgba(247,243,236,0.8); } /* (2) Texture panel — for AI-generated abstract textures used as section backgrounds */ .texture-panel { position: relative; overflow: hidden; background: var(--bg-2); isolation: isolate; } .texture-panel > img.texture-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; mix-blend-mode: screen; filter: var(--img-tone); } [data-theme="light"] .texture-panel > img.texture-img { opacity: 0.18; mix-blend-mode: multiply; } .texture-panel > .texture-content { position: relative; z-index: 1; } /* (3) Gradient composition — pure CSS, no images, sophisticated layered gradients */ .gradient-comp { position: relative; overflow: hidden; background: var(--bg); isolation: isolate; } .gradient-comp::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, var(--color-accent-faint), transparent 45%), radial-gradient(circle at 85% 75%, var(--gold-faint), transparent 50%), conic-gradient(from 220deg at 60% 40%, transparent, var(--color-accent-faint), transparent 60%); filter: blur(40px); } .gradient-comp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--bg) 100%); } .gradient-comp > .gradient-content { position: relative; z-index: 2; } /* (4) SVG line art — meant to be inlined; uses currentColor. Container ensures proper sizing + theme-aware stroke. */ .svg-art { display: block; width: 100%; height: auto; color: var(--color-accent); stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .svg-art-soft { color: var(--fg-faint); } .svg-art-gold { color: var(--gold); } /* Insights card thumb — refined to use texture/gradient hybrid */ .insight-thumb { position: relative; overflow: hidden; background: var(--bg-2); isolation: isolate; } .insight-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-accent-faint), transparent 60%), linear-gradient(45deg, var(--gold-faint), transparent 50%); } .insight-thumb::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent-soft), transparent); } /* Stat number */ .stat-number { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: var(--gold); letter-spacing: -0.02em; } .stat-number-sector { color: var(--color-accent); } /* Tab control */ .tab-trigger { padding: 12px 0; margin-right: 32px; color: var(--fg-soft); border: 0; border-bottom: 1px solid transparent; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; transition: color 300ms ease, border-color 300ms ease; cursor: pointer; background: transparent; } .tab-trigger:hover { color: var(--fg); } .tab-trigger.active { color: var(--gold); border-bottom-color: var(--gold); } /* Skip link */ .skip-link { position: absolute; left: -1000px; top: 0; z-index: 100; padding: 12px 20px; background: var(--gold); color: var(--gold-on); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; } .skip-link:focus { left: 16px; top: 16px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .ambient-radial, .ambient-radial-sector, .scroll-cue, .marquee-track, .hero-media-bg::before, .placeholder-photo::before { animation: none !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ HERO REGION — locked to dark-mode visual treatment regardless of page theme. When the hero plays a video, the text stays cream/gold for legibility over media. Page chrome (header/footer below) still flips themes. v0.4.1 fix: kills cream halo on light theme + texture/video conflict. ============================================================ */ .hero-with-media, .hero-with-media .text-spine-white, .hero-with-media h1, .hero-with-media h2, .hero-with-media h3, .hero-with-media .display, .hero-with-media .hero-word { color: #f0ebe1 !important; } .hero-with-media .text-spine-white-soft { color: rgba(240,235,225,0.6) !important; } .hero-with-media .text-spine-white-faint { color: rgba(240,235,225,0.35) !important; } .hero-with-media .text-spine-gold, .hero-with-media em.italic { color: #c8a96a !important; } .hero-with-media .eyebrow { color: #c8a96a !important; } .hero-with-media .eyebrow-sector { color: var(--color-accent) !important; } .hero-with-media .hairline-gold { background: linear-gradient(90deg, transparent, #c8a96a, transparent) !important; } .hero-with-media .hairline-sector { background: linear-gradient(90deg, transparent, var(--color-accent), transparent) !important; } .hero-with-media .btn-secondary { color: #f0ebe1 !important; border-color: rgba(240,235,225,0.3) !important; } .hero-with-media .btn-secondary:hover { color: #c8a96a !important; border-color: #c8a96a !important; } /* Text-shadow: ALWAYS dark, even in light theme (text is cream over media) */ .hero-with-media h1, .hero-with-media h2, .hero-with-media h3, .hero-with-media .display, .hero-with-media .hero-word, .hero-with-media p, .hero-with-media .eyebrow, .hero-with-media .btn-secondary, .hero-with-media a { text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.45), 0 0 36px rgba(0,0,0,0.3) !important; } .hero-with-media .btn-primary { text-shadow: none !important; } /* Video stays at fuller opacity in both themes — no light-theme blend trick */ [data-theme="light"] .hero-video { opacity: 0.42; mix-blend-mode: normal; } /* Hide texture imgs entirely if any remain in markup (they conflict with video) */ .hero-with-media .hero-texture { display: none !important; } /* ============================================================ MOBILE MENU — full-screen drawer (v0.5) Built dynamically by spine.js from the desktop nav. ============================================================ */ #mobile-menu-drawer { position: fixed; inset: 0; z-index: 100; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 0s linear 280ms; overflow-y: auto; } #mobile-menu-drawer[aria-hidden="false"] { opacity: 1; visibility: visible; transition: opacity 280ms ease, visibility 0s; } .mobile-menu-inner { position: relative; width: 100%; min-height: 100%; display: flex; flex-direction: column; padding: 80px 32px 40px; background: var(--bg); } .mobile-menu-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 200ms; padding: 0; } .mobile-menu-close:hover { border-color: var(--gold); color: var(--gold); } .mobile-menu-close svg { width: 20px; height: 20px; } .mobile-menu-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; } .mobile-menu-brand img { width: 36px; height: 36px; } .mobile-menu-brand .brand-name { font-size: 22px; } .mobile-menu-brand .brand-sector { font-size: 9px; } .mobile-menu-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .mobile-menu-nav a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; line-height: 1.4; font-weight: 300; color: var(--fg); padding: 12px 0; border-bottom: 1px solid var(--line-soft); transition: color 200ms, padding-left 200ms; } .mobile-menu-nav a:hover { color: var(--gold); padding-left: 4px; } .mobile-menu-nav a:last-child { border-bottom: 0; } .mobile-menu-footer { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); } .mobile-menu-footer .btn-primary { justify-content: center; } .mobile-menu-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mobile-menu-lang { color: var(--fg-mute); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; } .mobile-menu-lang a { color: var(--fg-mute); padding: 0 4px; } .mobile-menu-lang a.lang-active { color: var(--gold); } .mobile-menu-lang .utility-divider { color: var(--fg-faint); } body.mobile-menu-open { overflow: hidden; } /* Bigger theme toggle inside the drawer */ .theme-toggle.theme-toggle-big { width: 44px; height: 44px; } .theme-toggle.theme-toggle-big svg { width: 18px; height: 18px; } /* Ensure utility-bar theme toggle has proper tap target on mobile */ @media (max-width: 768px) { .theme-toggle { width: 36px; height: 36px; min-width: 44px; min-height: 32px; } .theme-toggle svg { width: 16px; height: 16px; } } /* Hide the desktop CTA on mobile, hamburger takes over */ @media (max-width: 767px) { .main-header .container-wide > .flex.items-center.gap-4 > .btn-primary { display: none; } }