/* ========================================================================= ML Capital — institutional editorial Bone-white base, navy/ink accent. Halyard (Adobe Fonts) throughout — Display for headlines, Text for body, Micro for legal/tiny labels. Fonts are loaded via the Adobe Fonts in each page's . ========================================================================= */ /* --- tokens ------------------------------------------------------------ */ :root { /* type families */ --font-display: "halyard-display", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-text: "halyard-text", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-micro: "halyard-micro", "Helvetica Neue", Helvetica, Arial, sans-serif; /* colour — institutional architectural palette ink (graphite black), bone (soft limestone), cream (warm concrete), navy (deep slate blue), plus steel / titanium / sandstone / mist accents. */ --ink: #17161B; --ink-70: rgba(23,22,27,0.72); --ink-50: rgba(23,22,27,0.55); --ink-30: rgba(23,22,27,0.30); --rule: rgba(23,22,27,0.14); --bone: #F3F1EC; --cream: #CFC7BC; --sandstone: #B9AA95; --navy: #394B63; --navy-2: #2A3A50; --steel: #7887A3; --titanium: #8B8F94; --mist: #E2E4E5; --white: #FFFFFF; /* tier accents — used only on the capital-structure block */ --senior: #00795D; --mezz: #E2A035; --ppl: #B50D49; --max: 1320px; --pad-x: clamp(24px, 5vw, 80px); --pad-y: clamp(72px, 10vw, 160px); --t: cubic-bezier(.2,.7,.2,1); } /* --- reset / base ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-text); font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bone); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, svg { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--navy); color: var(--bone); } /* --- containers & grid ------------------------------------------------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--pad-y); } .section + .section { padding-top: 0; } /* --- typographic scale ------------------------------------------------- */ h1,h2,h3,h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; } .display { font-family: var(--font-display); font-size: clamp(40px, 6.5vw, 88px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; } .h-xl { font-family: var(--font-display); font-size: clamp(32px, 4.6vw, 60px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; } .h-lg { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; } .h-md { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; } .lede { font-family: var(--font-text); font-size: clamp(19px, 1.6vw, 24px); font-weight: 400; font-style: italic; line-height: 1.5; color: var(--ink-70); } .muted { color: var(--ink-50); } /* eyebrow — small uppercase label, hairline rule beneath */ .eyebrow { display: inline-block; font-family: var(--font-micro); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 28px; } .eyebrow--light { color: var(--bone); border-color: var(--bone); } .eyebrow--num::before { content: attr(data-num); margin-right: 14px; color: var(--ink-50); font-variant-numeric: tabular-nums; } /* hairline rule */ .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } .tick { width: 48px; height: 2px; background: var(--ink); display: inline-block; margin-bottom: 22px; } .tick--light { background: var(--bone); } /* --- header ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; /* fully opaque to prevent body text from bleeding through on iOS Safari, which has known issues with backdrop-filter on stickied elements. */ background: var(--bone); border-bottom: 1px solid transparent; transition: border-color .3s var(--t), background .3s var(--t); } .site-header.is-scrolled { border-bottom-color: var(--rule); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 132px; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 400; letter-spacing: 0.04em; } .brand img { height: 108px; width: auto; display: block; } .brand__word { font-family: var(--font-micro); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; } @media (max-width: 1024px) { .site-header__inner { height: 96px; } .brand img { height: 72px; } } /* nav */ .nav { display: flex; gap: 36px; align-items: center; } .nav a { position: relative; font-family: var(--font-micro); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-70); padding-block: 4px; transition: color .25s var(--t); } .nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--t); } .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--ink); } .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--ink); } .nav-toggle svg { width: 24px; height: 24px; } @media (max-width: 1024px) { .nav { position: fixed; inset: 96px 0 0 0; background: var(--bone); flex-direction: column; gap: 28px; justify-content: flex-start; align-items: flex-start; padding: 48px var(--pad-x); transform: translateY(-100%); transition: transform .4s var(--t); border-top: 1px solid var(--rule); } .nav.is-open { transform: translateY(0); } .nav a { font-size: 18px; letter-spacing: 0.16em; } .nav-toggle { display: inline-flex; } } /* --- hero (home) — bridge as atmospheric backdrop, no framed image ----- */ .hero { position: relative; /* clamp prevents blow-up on print/PDF capture viewports while keeping a monumental feel on normal browser windows. */ min-height: clamp(640px, 86vh, 980px); padding-block: clamp(120px, 14vw, 220px) clamp(80px, 10vw, 140px); overflow: hidden; isolation: isolate; } /* The bridge image is positioned absolutely, anchored to the right two-thirds. A mask fades the left edge into the limestone bone so it bleeds organically. */ .hero__bridge { position: absolute; inset: 0; left: 28%; background: url("../images/bridge.png") right center / cover no-repeat; filter: contrast(1.04) saturate(0.9); z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 4%, rgba(0,0,0,0.35) 18%, rgba(0,0,0,0.75) 32%, #000 48%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 4%, rgba(0,0,0,0.35) 18%, rgba(0,0,0,0.75) 32%, #000 48%, #000 100%); } .hero__bridge::after { /* atmospheric haze top + bottom, plus warm wash for tonal harmony */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243,241,236,0.35) 0%, transparent 22%, transparent 78%, rgba(243,241,236,0.55) 100%), linear-gradient(0deg, rgba(207,199,188,0.15), rgba(207,199,188,0.15)); pointer-events: none; } .hero__inner { position: relative; z-index: 1; max-width: 60ch; } .hero__title { max-width: 19ch; margin-top: 24px; } .hero__sub { margin-top: 40px; max-width: 44ch; } .hero__cta { margin-top: 56px; display: inline-flex; } /* the architectural grid-tick lives as an HTML element inside .hero__inner */ @media (max-width: 1024px) { .hero { min-height: auto; padding-block: clamp(64px, 12vw, 120px) clamp(48px, 10vw, 96px); } .hero__bridge { position: relative; inset: auto; left: auto; height: 56vh; margin-top: 32px; -webkit-mask-image: none; mask-image: none; } .hero__bridge::after { display: none; } .hero__inner { max-width: none; } } /* --- buttons / CTAs ---------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px 16px 24px; font-family: var(--font-micro); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; border: 1px solid var(--ink); background: var(--ink); color: var(--bone); transition: background .25s var(--t), color .25s var(--t), transform .25s var(--t); } .btn .arr { transition: transform .3s var(--t); } .btn:hover { background: transparent; color: var(--ink); } .btn:hover .arr { transform: translateX(6px); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--bone); } .btn--light { background: var(--bone); color: var(--ink); border-color: var(--bone); } .btn--light:hover { background: transparent; color: var(--bone); } /* link with arrow */ .linkarr { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-family: var(--font-micro); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; transition: gap .25s var(--t); } .linkarr:hover { gap: 16px; } .linkarr--light { border-color: var(--bone); } /* --- pillar grid (home) ----------------------------------------------- */ .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); } .pillar { border-top: 1px solid var(--ink); padding-top: 24px; } .pillar h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.005em; line-height: 1.25; } .pillar p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-70); } @media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } } /* --- section header (two-col: eyebrow+title on left, lede on right) --- */ .sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); margin-bottom: clamp(56px, 7vw, 96px); align-items: end; } .sec-head__lede { padding-bottom: 6px; } @media (max-width: 880px) { .sec-head { grid-template-columns: 1fr; gap: 28px; } } /* --- generic content prose -------------------------------------------- */ .prose { max-width: 68ch; } .prose p { margin: 0 0 1.1em; } .prose p:last-child { margin-bottom: 0; } /* --- 4-col why-it-works grid ----------------------------------------- */ .fourcol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); } .fourcol > .item { border-top: 1px solid var(--ink); padding-top: 22px; } .fourcol .item h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 12px; line-height: 1.25; } .fourcol .item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-70); } @media (max-width: 980px) { .fourcol { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .fourcol { grid-template-columns: 1fr; } } /* --- two-col prose ---------------------------------------------------- */ .twocol { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); } @media (max-width: 880px) { .twocol { grid-template-columns: 1fr; } } /* --- capital structure — pyramid + descriptions ----------------------- */ /* A pyramid SVG carries the visual: senior at the wide base, mezzanine middle, profit-participation at the apex. Descriptions sit alongside in the text-led order — Senior → Mezzanine → Profit-participation. */ .stack { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .stack__col { position: relative; display: flex; align-items: center; justify-content: center; } .stack__pyramid { width: 100%; height: auto; display: block; } .stack__notes { display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 36px); } .stack__note { padding: 20px 0 20px 28px; border-left: 4px solid var(--note-color, var(--ink)); font-size: 16px; line-height: 1.6; color: var(--ink-70); } .stack__note--ppl { --note-color: var(--ppl); } .stack__note--mezz { --note-color: var(--mezz); } .stack__note--sr { --note-color: var(--senior); } .stack__note h4 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--ink); } .stack__note h4 small { font-family: var(--font-micro); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); margin-left: 12px; } @media (max-width: 720px) { .stack { grid-template-columns: 1fr; gap: 32px; } .stack__col { max-width: 360px; margin: 0 auto; } } /* --- structural decoration: contour overlay, capital-flow ribbon ----- */ /* Sleek, low-opacity SVG accents used sparingly to add architectural feel. */ .contour-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: var(--ink); opacity: 0.14; } .contour-overlay svg { width: 100%; height: 100%; display: block; } .section--decorated { position: relative; isolation: isolate; } .section--decorated > .wrap { position: relative; z-index: 1; } .flow-divider { display: block; width: 100%; height: clamp(60px, 8vw, 110px); color: var(--ink-30); margin-block: clamp(40px, 5vw, 80px); } .flow-divider svg { width: 100%; height: 100%; display: block; } /* Precision grid corner mark — replaces the simple tick at hero corner */ .grid-tick { display: block; width: 80px; height: 80px; color: var(--ink); opacity: 0.85; margin-bottom: 24px; } .grid-tick svg { width: 100%; height: 100%; display: block; } /* --- dark band (navy) -------------------------------------------------- */ .band-dark { background: var(--navy); color: var(--bone); padding-block: clamp(72px, 9vw, 120px); } .band-dark .eyebrow { color: var(--bone); border-color: var(--bone); } .band-dark .lede { color: rgba(243,241,236,0.85); } .band-dark .muted { color: rgba(243,241,236,0.65); } .band-dark .tick { background: var(--bone); } /* --- band-cream ------------------------------------------------------- */ .band-cream { background: var(--cream); } /* --- track-record big figures ----------------------------------------- */ .figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-block: clamp(48px, 6vw, 80px); } .figure { border-top: 1px solid var(--ink); padding-top: 18px; } .figure__num { display: block; font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); font-weight: 400; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-bottom: 14px; } .figure__label { font-family: var(--font-micro); font-size: 13px; letter-spacing: 0.02em; color: var(--ink-70); max-width: 28ch; line-height: 1.5; } @media (max-width: 880px) { .figures { grid-template-columns: 1fr; } } /* --- team page -------------------------------------------------------- */ .team-group { width: 100%; height: auto; display: block; filter: grayscale(100%) contrast(1.02); margin-bottom: clamp(56px, 7vw, 100px); } .member { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); align-items: start; } .member:first-of-type { border-top: 0; padding-top: 0; } .member__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; filter: grayscale(100%) contrast(1.02); } .member__name { font-family: var(--font-display); font-weight: 400; margin-bottom: 6px; } .member__title { font-family: var(--font-micro); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 28px; } .member__bio p { font-size: 15.5px; line-height: 1.65; color: var(--ink-70); margin: 0 0 1.05em; } .member__bio p strong { color: var(--ink); font-weight: 700; } .member__bio p:last-child { margin-bottom: 0; } .member--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .member--reverse .member__photo { order: 2; } @media (max-width: 880px) { .member, .member--reverse { grid-template-columns: 1fr; gap: 28px; } .member--reverse .member__photo { order: -1; } } /* --- advisors --------------------------------------------------------- */ .advisors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); margin-top: clamp(48px, 5vw, 72px); } .advisor { border-top: 1px solid var(--ink); padding-top: 24px; } .advisor__name { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 4px; letter-spacing: -0.01em; } .advisor__role { font-family: var(--font-micro); font-size: 12px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 22px; } .advisor__body { font-size: 15px; line-height: 1.6; color: var(--ink-70); } @media (max-width: 720px) { .advisors { grid-template-columns: 1fr; } } /* --- contact ---------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: end; } .contact-card { background: var(--cream); padding: clamp(28px, 3vw, 44px); } .contact-card dt { font-family: var(--font-micro); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 6px; } .contact-card dd { margin: 0 0 22px; font-size: 17px; line-height: 1.45; } .contact-card dd:last-of-type { margin-bottom: 0; } .contact-card a:hover { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } /* --- footer ----------------------------------------------------------- */ .site-footer { background: var(--ink); color: var(--bone); padding-block: clamp(56px, 6vw, 88px) 32px; margin-top: clamp(80px, 9vw, 140px); } .site-footer .wrap { display: block; } .footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 5vw, 72px); border-bottom: 1px solid rgba(243,241,236,0.18); } .footer-top h4 { font-family: var(--font-micro); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,241,236,0.55); margin: 0 0 16px; } .footer-top p, .footer-top a, .footer-top li { font-size: 14.5px; line-height: 1.6; color: rgba(243,241,236,0.85); } .footer-top ul { list-style: none; padding: 0; margin: 0; } .footer-top li { margin-bottom: 8px; } .footer-top a:hover { color: var(--bone); } .footer-top .brand img { height: 32px; width: auto; } .footer-top .brand__word { font-size: 12px; } .disclaimer { margin-top: 32px; font-family: var(--font-micro); font-size: 12px; line-height: 1.65; color: rgba(243,241,236,0.55); max-width: 80ch; } .footer-bottom { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-family: var(--font-micro); font-size: 12px; font-weight: 400; color: rgba(243,241,236,0.55); letter-spacing: 0.04em; } .footer-bottom .eu { display: inline-flex; align-items: center; gap: 16px; } .footer-bottom .eu img { height: 48px; width: auto; display: block; /* slight float on dark background */ filter: brightness(0.98); } .footer-bottom .eu span { font-family: var(--font-micro); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,241,236,0.7); max-width: 18ch; line-height: 1.4; } @media (max-width: 560px) { .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-bottom .eu { flex-direction: row; } } @media (max-width: 880px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } } /* --- page-intro (sub-page hero) --------------------------------------- */ .page-intro { padding-block: clamp(80px, 10vw, 140px) clamp(48px, 6vw, 80px); } .page-intro__title { max-width: 22ch; } .page-intro__sub { margin-top: 28px; max-width: 56ch; font-style: italic; } /* --- numeric callout list (problem / structural facts) ---------------- */ .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); } .fact { border-top: 1px solid var(--ink); padding-top: 18px; } .fact .key { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.05; font-variant-numeric: tabular-nums; } .fact .val { font-size: 15px; color: var(--ink-70); line-height: 1.55; } @media (max-width: 720px) { .facts { grid-template-columns: 1fr; } } /* --- reveal animation ------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--t), transform .9s var(--t); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* --- privacy page minimal styles -------------------------------------- */ .legal h2 { font-family: var(--font-display); margin-top: 2.2em; margin-bottom: .6em; font-size: 22px; font-weight: 700; } .legal p, .legal li { color: var(--ink-70); } .legal ul { padding-left: 1.2em; } /* --- print ------------------------------------------------------------ */ @page { size: A4; margin: 14mm 12mm; } @media print { html, body { background: var(--bone) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* reveal-on-scroll won't fire in print — force visible */ .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* sticky header would otherwise repeat awkwardly; render once at top */ .site-header { position: static !important; background: var(--bone) !important; backdrop-filter: none !important; } .nav-toggle { display: none !important; } /* keep coherent blocks together where possible */ .section, .member, .advisor, .tier, .pillar, .figure, .fourcol .item { break-inside: avoid; page-break-inside: avoid; } /* the dark band needs explicit background and text colour */ .band-dark { background: var(--navy) !important; color: var(--bone) !important; } .band-cream { background: var(--cream) !important; } .site-footer { background: var(--ink) !important; color: var(--bone) !important; } } /* ========================================================================= v4 additions: dark mode, audience-gate modal, explicit-dark surfaces ========================================================================= */ /* --- pyramid SVG inherits its color from CSS --------------------------- */ .stack__pyramid { color: var(--ink); } /* --- audience-gate modal --------------------------------------------- */ .gate { position: fixed; inset: 0; z-index: 200; background: rgba(15,14,18,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .4s var(--t); } .gate.is-shown { opacity: 1; pointer-events: auto; } .gate__panel { background: var(--bone); color: var(--ink); max-width: 640px; width: 100%; padding: clamp(32px, 5vw, 56px); border: 1px solid var(--rule); text-align: left; transform: translateY(12px); transition: transform .4s var(--t); } .gate.is-shown .gate__panel { transform: none; } .gate__logo { height: 56px; width: auto; margin-bottom: 28px; display: block; } .gate__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 500; margin: 0 0 22px; letter-spacing: -0.01em; line-height: 1.1; } .gate__body { font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 0 0 14px; } .gate__body strong { color: var(--ink); font-weight: 500; } .gate__actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; } .gate__exit { font-size: 12px; } @media (max-width: 560px) { .gate__panel { padding: 28px; } .gate__actions { flex-direction: column; align-items: stretch; } .gate__actions > * { justify-content: center; text-align: center; } } /* --- explicit dark surfaces (always dark, both modes) ----------------- */ .site-footer { background: #050507; color: #F3F1EC; } .site-footer h4 { color: rgba(243,241,236,0.55) !important; } .site-footer p, .site-footer a, .site-footer li { color: rgba(243,241,236,0.85); } .disclaimer { color: rgba(243,241,236,0.55); } .footer-bottom { color: rgba(243,241,236,0.55); } .footer-bottom .eu span { color: rgba(243,241,236,0.7); } .site-footer .brand { color: #F3F1EC; } .band-dark { color: #F3F1EC; } .band-dark .eyebrow { color: #F3F1EC; border-color: #F3F1EC; } /* --- dark mode -------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --ink: #F3F1EC; --ink-70: rgba(243,241,236,0.72); --ink-50: rgba(243,241,236,0.55); --ink-30: rgba(243,241,236,0.30); --rule: rgba(243,241,236,0.14); --bone: #0F0E12; --cream: #1F1C24; --navy: #182338; --sandstone: #5A5044; --mist: #2A2A2D; } /* sticky header backdrop matches new bone (dark) */ .site-header { background: rgba(15,14,18,0.92); } ::selection { background: var(--mist); color: var(--ink); } /* the band-dark stays slightly deeper than ordinary dark for separation */ .band-dark { background: #0D1A33; } /* contour overlay slightly more visible against dark bg */ .contour-overlay { opacity: 0.22; } /* pyramid mezzanine tier text — gold band with dark text already works, keep as is. The senior+ppl labels use lightcolour or currentColor and work in both modes. */ }