/* ========================================================================== INTELA — "Noir" theme An alternative art direction: near-black canvas, champagne gold, treated photography, film grain, heightened motion. SCOPED to [data-theme="dark"] so it can be toggled at runtime. Loaded AFTER main.css; when is set, these rules win. The site is built on design tokens, so re-pointing those tokens rethemes every component at once; the rest of this file is the art direction — surfaces, imagery, motion. (The scroll-progress bar geometry lives in theme.css, shared with the toggle.) ========================================================================== */ :root[data-theme="dark"] { /* --- canvas & ink ------------------------------------------------------ */ --paper: #0B0E13; /* base canvas, near-black with a blue cast */ --ivory: #11151C; /* raised surface */ --ink: #F2EFE8; /* warm off-white */ --ink-2: #B5AFA3; --ink-3: #8A8478; /* --- accent: champagne gold, used sparingly --------------------------- */ --navy: #C9A961; /* the system's accent token becomes gold */ --navy-deep: #080A0E; /* "dark" sections go deeper, not lighter */ --navy-abyss: #05070A; --steel: #D8BE84; --hairline: rgba(201, 169, 97, 0.22); --hairline-dark: rgba(201, 169, 97, 0.20); --gold: #C9A961; --gold-soft: rgba(201, 169, 97, 0.14); --gold-glow: rgba(201, 169, 97, 0.30); --t-hover: 0.5s cubic-bezier(0.22, 1, 0.36, 1); }html[data-theme="dark"] { background: var(--paper); }[data-theme="dark"] body { background: var(--paper); color: var(--ink); } /* --- film grain: a fixed, very quiet texture over the whole canvas -------- */ [data-theme="dark"] body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) {[data-theme="dark"] body::after { opacity: 0.03; }} /* --- navigation ---------------------------------------------------------- */ [data-theme="dark"] .nav { background: rgba(11, 14, 19, 0.72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: background var(--t-hover), border-color var(--t-hover); }[data-theme="dark"] .nav.is-scrolled { background: rgba(8, 10, 14, 0.92); border-bottom-color: var(--hairline); }[data-theme="dark"] .nav__links .link { color: var(--ink-2); }[data-theme="dark"] .nav__links .link:hover { color: var(--gold); }[data-theme="dark"] .nav__links .link[aria-current] { color: var(--ink); }[data-theme="dark"] .brand__word { color: var(--ink); }[data-theme="dark"] .brand img { filter: brightness(0) invert(1); } /* logo stays white in the dark theme */ [data-theme="dark"] .lang-switch { border-color: var(--hairline); color: var(--ink-2); }[data-theme="dark"] .lang-switch:hover { border-color: var(--gold); color: var(--gold); }[data-theme="dark"] .nav-toggle span { background: var(--ink); }[data-theme="dark"] .mobile-menu { background: var(--navy-abyss); }[data-theme="dark"] .mobile-menu a { color: var(--ink); border-bottom-color: var(--hairline); } /* --- surfaces ------------------------------------------------------------ */ [data-theme="dark"] .section--ivory { background: var(--ivory); } /* In the light build this chapter was navy against ivory, so it read as a distinct stage. In Noir the page is already near-black, so the band needs its own edges: gold hairlines top and bottom plus a centre-lift gradient. */ [data-theme="dark"] .section.section--dark { position: relative; background: radial-gradient(130% 90% at 80% -10%, rgba(201, 169, 97, 0.11), transparent 62%), linear-gradient(180deg, #05070A 0%, #0A0D13 46%, #05070A 100%); color: var(--ink); border-top: 1px solid rgba(201, 169, 97, 0.30); border-bottom: 1px solid rgba(201, 169, 97, 0.30); }[data-theme="dark"] .section--dark :is(h2, h3) { color: var(--ink); }[data-theme="dark"] .section--dark .lead { color: var(--ink-2); }[data-theme="dark"] .section--dark .quote { color: var(--gold); } /* hairline seam between chapters */ [data-theme="dark"] .section + .section { border-top: 1px solid rgba(201, 169, 97, 0.08); } /* --- typography ---------------------------------------------------------- */ [data-theme="dark"] .display, [data-theme="dark"] .h2 { color: var(--ink); }[data-theme="dark"] .eyebrow { color: var(--gold); }[data-theme="dark"] .eyebrow .no { color: var(--steel); }[data-theme="dark"] .eyebrow::after, [data-theme="dark"] .eyebrow--center::before, [data-theme="dark"] .section-head--center .eyebrow::before { background: var(--gold); opacity: 0.55; }[data-theme="dark"] .section--dark .eyebrow { color: var(--gold); }[data-theme="dark"] .section--dark .eyebrow .no { color: var(--steel); }[data-theme="dark"] strong { color: var(--ink); }[data-theme="dark"] ::selection { background: var(--gold); color: #08090C; } /* NOTE: this theme must change COLOUR only for anything whose geometry the eye can compare across a toggle. Two tracking overrides were removed here: the brand wordmark (the lockup changed width by ~21px between modes) and the callout kicker (it gained a whole line in dark, shunting the content below it down the page). The remaining tracking tweaks sit inside block elements that do not resize or reflow, so they stay. */ /* --- buttons: gold outline with a light sweep on hover ------------------- */ [data-theme="dark"] .btn { position: relative; overflow: hidden; background: transparent; color: var(--gold); border: 1px solid var(--gold); isolation: isolate; }[data-theme="dark"] .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent, var(--gold-soft), transparent); transform: translateX(-120%); transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }[data-theme="dark"] .btn:hover { color: #0B0E13; background: var(--gold); border-color: var(--gold); }[data-theme="dark"] .btn:hover::before { transform: translateX(120%); }[data-theme="dark"] .section--dark .btn { color: var(--gold); border-color: var(--gold); }[data-theme="dark"] .section--dark .btn:hover { color: #0B0E13; background: var(--gold); }[data-theme="dark"] .btn--ghost { color: var(--ink-2); border-color: var(--hairline); }[data-theme="dark"] .btn--ghost:hover { color: #0B0E13; background: var(--gold); border-color: var(--gold); }[data-theme="dark"] .section--dark .btn--ghost { border-color: rgba(201,169,97,0.45); color: var(--ink); } /* --- callouts, quote cards, question lists ------------------------------- */ [data-theme="dark"] .callout { background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0)); border: 1px solid var(--hairline); border-left: 2px solid var(--gold); box-shadow: 0 20px 60px -40px rgba(0,0,0,0.9); }[data-theme="dark"] .callout__label { color: var(--gold); }[data-theme="dark"] .exec-quote { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); border: 1px solid var(--hairline); border-left: 2px solid var(--gold); color: var(--ink-2); box-shadow: 0 18px 50px -38px rgba(0,0,0,0.95); transition: border-color var(--t-hover), transform var(--t-hover); }[data-theme="dark"] .exec-quote:hover { border-left-color: var(--steel); transform: translateY(-2px); }[data-theme="dark"] .q-list li::before { color: var(--gold); }[data-theme="dark"] .outcomes__title { color: var(--ink-2); }[data-theme="dark"] .outcomes li { color: var(--ink-2); border-bottom-color: var(--hairline); }[data-theme="dark"] .outcomes li::before { background: var(--gold); } /* --- exhibits ------------------------------------------------------------ */ [data-theme="dark"] .exhibit__label { color: var(--gold); border-bottom-color: var(--hairline); }[data-theme="dark"] .exhibit__caption { color: var(--ink-3); }[data-theme="dark"] .section--dark .exhibit__label { color: var(--gold); border-bottom-color: var(--hairline-dark); }[data-theme="dark"] .section--dark .exhibit__caption { color: var(--ink-3); }[data-theme="dark"] .split__visual { background: rgba(255,255,255,0.022); border: 1px solid rgba(201,169,97,0.10); } /* --- diagrams: retint the inline SVGs straight from CSS ------------------ The exhibits carry hard-coded hexes; attribute selectors let the theme re-point every one of them without touching a line of HTML. */ [data-theme="dark"] .diagram [fill="#1b2a4a"] { fill: var(--gold); }[data-theme="dark"] .diagram [stroke="#1b2a4a"] { stroke: var(--gold); }[data-theme="dark"] .diagram [fill="#ffffff"] { fill: #0B0E13; } /* text on gold plates */ [data-theme="dark"] .diagram [fill="#f4f3ee"] { fill: rgba(255,255,255,0.05); }[data-theme="dark"] .diagram [fill="#41464d"] { fill: var(--ink-2); }[data-theme="dark"] .diagram [fill="#9db2d4"] { fill: rgba(11,14,19,0.72); }[data-theme="dark"] .diagram [stroke="#8494ad"] { stroke: rgba(201,169,97,0.45); } /* Value pyramid: the generic 5% tier fill vanishes on the near-black canvas and the gold apex swallows all the emphasis. Give the lower tiers real body and a brighter outline so the three levels read as three distinct steps. */ [data-theme="dark"] .diagram--pyramid [fill="#f4f3ee"] { fill: rgba(255,255,255,0.09); } [data-theme="dark"] .diagram--pyramid [stroke="#1b2a4a"] { stroke: rgba(201,169,97,0.65); stroke-width: 1.4; } /* The Venn focus halo is navy on paper; on the near-black canvas it has to be gold or it simply disappears. */ [data-theme="dark"] .venn-focus__in { stop-color: var(--gold); stop-opacity: 0.3; } [data-theme="dark"] .venn-focus__out { stop-color: var(--gold); stop-opacity: 0; } /* --- capability-to-advantage flow --------------------------------------- */ [data-theme="dark"] .flow__step { background: rgba(255,255,255,0.05); border-color: rgba(201,169,97,0.55); } [data-theme="dark"] .flow__step--key { background: var(--gold); border-color: var(--gold); } [data-theme="dark"] .flow__title { color: var(--ink); } [data-theme="dark"] .flow__sub { color: var(--ink-2); } [data-theme="dark"] .flow__step--key .flow__title { color: #0B0E13; } [data-theme="dark"] .flow__step--key .flow__sub { color: rgba(11,14,19,0.72); } [data-theme="dark"] .flow__arrow { color: var(--gold); } /* --- orbit: a slow gold aura -------------------------------------------- */ [data-theme="dark"] .orbit__path { border-color: rgba(201,169,97,0.28); }[data-theme="dark"] .orbit__center { color: var(--ink); }[data-theme="dark"] .orbit__center::before, [data-theme="dark"] .orbit::before { content: ""; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--gold-glow), transparent 68%); filter: blur(26px); opacity: 0.55; animation: noir-pulse 7s ease-in-out infinite; pointer-events: none; } @keyframes noir-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.7; } } @media (prefers-reduced-motion: reduce) {[data-theme="dark"] .orbit::before { animation: none; }}[data-theme="dark"] .orbit__node { border-color: rgba(201,169,97,0.4); background: rgba(201,169,97,0.07); }[data-theme="dark"] .orbit__node .icon { stroke: var(--gold); }[data-theme="dark"] .orbit__label { color: var(--ink-2); } /* --- photography: duotone + vignette so light images read as night ------- */ [data-theme="dark"] .hero__media, [data-theme="dark"] .interlude { position: relative; background: #06080B; } /* Tone the daylight photography toward night WITHOUT crushing it: one gentle filter and one low-alpha vignette. (An earlier pass stacked brightness with two multiply layers and compounded the image to solid black.) */ [data-theme="dark"] .hero__media img, [data-theme="dark"] .interlude img { filter: saturate(0.62) contrast(1.04) brightness(0.88); }[data-theme="dark"] .hero__media::after, [data-theme="dark"] .interlude::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 95% at 50% 45%, transparent 40%, rgba(5,7,10,0.52) 100%), linear-gradient(180deg, rgba(201,169,97,0.11), rgba(8,10,14,0.22)); } /* soft seam into the canvas above and below the hero band */ [data-theme="dark"] .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,14,19,0.75) 0%, transparent 24%, transparent 76%, rgba(11,14,19,0.8) 100%); } /* --- portraits ----------------------------------------------------------- */ [data-theme="dark"] .founder__portrait--framed { background: #0E1218; }[data-theme="dark"] .founder__portrait img { filter: saturate(0.6) contrast(1.05) brightness(0.9); }[data-theme="dark"] .founder__portrait::after { box-shadow: inset 0 0 0 1px rgba(201,169,97,0.22); }[data-theme="dark"] .founder__name { color: var(--ink); }[data-theme="dark"] .founder__role { color: var(--gold); } /* --- insight cards ------------------------------------------------------- */ [data-theme="dark"] .insight-card { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)); border: 1px solid var(--hairline); border-top: 2px solid var(--gold); transition: transform var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover); }[data-theme="dark"] .insight-card:hover { transform: translateY(-4px); border-color: rgba(201,169,97,0.5); box-shadow: 0 30px 70px -45px rgba(0,0,0,1); }[data-theme="dark"] .insight-card h3 { color: var(--ink); }[data-theme="dark"] .insight-card p { color: var(--ink-2); }[data-theme="dark"] .insight-card__more { color: var(--gold); } /* --- contact & footer ---------------------------------------------------- */ [data-theme="dark"] .contact__mail { color: var(--gold); }[data-theme="dark"] .contact__mail:hover { color: var(--steel); }[data-theme="dark"] .footer { background: var(--navy-abyss); border-top: 1px solid var(--hairline); }[data-theme="dark"] .footer__tagline { color: var(--ink-3); }[data-theme="dark"] .footer__nav .link { color: var(--ink-2); }[data-theme="dark"] .footer__nav .link:hover { color: var(--gold); }[data-theme="dark"] .footer__bottom { border-top-color: rgba(201,169,97,0.12); color: var(--ink-3); } /* --- founder reflection -------------------------------------------------- */ [data-theme="dark"] .founder__reflection .founder__quote-intro, [data-theme="dark"] .founder__reflection .founder__quote-close { color: var(--ink-2); }[data-theme="dark"] .founder__reflection .quote { color: var(--gold); }[data-theme="dark"] .founder__quote, [data-theme="dark"] .founder__reflection { border-top-color: var(--hairline); } /* --- link underlines ----------------------------------------------------- */ [data-theme="dark"] .link { color: var(--ink-2); }[data-theme="dark"] .link:hover { color: var(--gold); }[data-theme="dark"] .skip-link { background: var(--gold); color: #0B0E13; } /* --- language notice ----------------------------------------------------- */ [data-theme="dark"] .lang-notice { background: #11151C; border-color: var(--hairline); box-shadow: 0 22px 60px -30px rgba(0,0,0,0.95); } [data-theme="dark"] .lang-notice__text { color: var(--ink-2); } [data-theme="dark"] .lang-notice__link { color: var(--gold); } [data-theme="dark"] .lang-notice__close { color: var(--ink-3); } [data-theme="dark"] .lang-notice__close:hover { color: var(--ink); background: rgba(255,255,255,0.06); } /* --- advisory ------------------------------------------------------------ */ [data-theme="dark"] .advisor__portrait { background: radial-gradient(140% 110% at 30% 0%, #1b1f27 0%, #14181f 55%, #0E1218 100%); } [data-theme="dark"] .advisor__portrait::after { box-shadow: inset 0 0 0 1px rgba(201,169,97,0.22); } [data-theme="dark"] .advisor__portrait img { filter: saturate(0.6) contrast(1.05) brightness(0.9); } [data-theme="dark"] .advisor__monogram { color: var(--gold); opacity: 0.8; } [data-theme="dark"] .advisor__name { color: var(--ink); } [data-theme="dark"] .advisor__role { color: var(--gold); } [data-theme="dark"] .advisor__bio p { color: var(--ink-2); }