/* Flowgear 2026, DARK THEME (site-wide). Imported by Shell, so it loads on every .fg26 route. Every rule is gated by [data-theme="dark"] on (resolved before paint by the inline script in layout.tsx, system preference or a stored override). Rhythm on dark comes from elevation (base / lifted / card surfaces), hairline plate edges, one teal glow on the home thesis section, a real lilac wash on AI sections, and the teal CTA band as the colour peak. Inner-page heroes, the CTA band and the footer are already dark in the base styles, this file flips the light bodies between them. */ [data-theme="dark"] body { background: #0b0e1d; } /* ---- token remap ---- */ [data-theme="dark"] .fg26 { --ink: #fff; --soft: #fff; --faint: #fff; /* on dark surfaces the deep teal must read brighter, not darker */ --teal-deep: #29BAAB; --line: rgba(255, 255, 255, 0.085); --bg: #0F1229; --bg2: #0f1326; --surface: #141a2e; --surface-2: #1a2038; background: radial-gradient(ellipse 82% 56% at 82% 8%, rgba(171, 138, 182, 0.10), transparent 72%), radial-gradient(ellipse 72% 52% at 16% 18%, rgba(41, 186, 171, 0.08), transparent 74%), radial-gradient(ellipse 70% 58% at 74% 64%, rgba(41, 186, 171, 0.045), transparent 76%), var(--pitch); } [data-theme="dark"] .fg26 .ph, [data-theme="dark"] .fg26 .pr-hero, [data-theme="dark"] .fg26 .hp-hero, [data-theme="dark"] .fg26 .hp-video, [data-theme="dark"] .fg26 .hp-ide { border-top-color: transparent; border-bottom-color: transparent; } [data-theme="dark"] .fg26-footer { border-top-color: transparent; } [data-theme="dark"] .fg26 .ph::after, [data-theme="dark"] .fg26 .pr-hero::before, [data-theme="dark"] .fg26 .hp-hero-bg { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.72) 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.72) 74%, transparent 100%); } [data-theme="dark"] .fg26 .hp-video::before, [data-theme="dark"] .fg26 .hp-ide::before, [data-theme="dark"] .fg26-footer::before { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%); } /* eyebrows + ghost links read brighter on dark */ [data-theme="dark"] .fg26 .eyebrow { color: var(--teal); } [data-theme="dark"] .fg26 .btn-ghost { color: var(--teal); } [data-theme="dark"] .fg26 .btn-secondary { background: rgba(255, 255, 255, 0.05); color: var(--ink); border-color: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .fg26 .btn-secondary:hover { background: rgba(255, 255, 255, 0.10); } /* ---- theme toggle + logo swap ---- */ [data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; } /* inline-SVG nav logo, muted at rest on the dark header, then full brand contrast on hover/focus. */ [data-theme="dark"] .fg26-nav .logo-clip { fill: rgba(255, 255, 255, 0.28); } [data-theme="dark"] .fg26-nav .logo-word { fill: rgba(255, 255, 255, 0.42); } [data-theme="dark"] .fg26-logo:hover .logo-clip, [data-theme="dark"] .fg26-logo:focus-visible .logo-clip { fill: #29BAAB; } [data-theme="dark"] .fg26-logo:hover .logo-word, [data-theme="dark"] .fg26-logo:focus-visible .logo-word { fill: #fff; } [data-theme="dark"] .fg26-theme-moon { display: none; } [data-theme="dark"] .fg26-theme-sun { display: block; } [data-theme="dark"] .fg26-theme { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .fg26-theme:hover { color: #fff; border-color: rgba(255, 255, 255, 0.34); } /* ---- NAV, translucent dark, hairline edges ---- */ [data-theme="dark"] .fg26-nav { background: rgba(11, 14, 29, 0.8); border-bottom-color: rgba(255, 255, 255, 0.07); } [data-theme="dark"] .fg26-nav.scrolled { border-bottom-color: rgba(255, 255, 255, 0.11); } [data-theme="dark"] .fg26-nav .links { color: rgba(255, 255, 255, 0.74); } [data-theme="dark"] .fg26-nav .links a:hover, [data-theme="dark"] .fg26-nav .links a.active { color: #fff; } [data-theme="dark"] .fg26-portal-main, [data-theme="dark"] .fg26-portal-toggle { color: rgba(255, 255, 255, 0.74); } [data-theme="dark"] .fg26-portal-main:hover, [data-theme="dark"] .fg26-portal-toggle:hover, [data-theme="dark"] .fg26-portal-toggle[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .fg26-mega, [data-theme="dark"] .fg26-portal-panel { background: #11152a; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.7); } [data-theme="dark"] .fg26-mega-link:hover, [data-theme="dark"] .fg26-mega-idx:hover, [data-theme="dark"] .fg26-portal-item:hover { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .fg26-mega-all { border-top-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .fg26-burger { border-color: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .fg26-burger span { background: #fff; } [data-theme="dark"] .fg26-mobile { background: #0d1124; border-bottom-color: rgba(255, 255, 255, 0.09); box-shadow: 0 26px 44px -22px rgba(0, 0, 0, 0.7); } [data-theme="dark"] .fg26-mobile-row { color: var(--ink); } [data-theme="dark"] .fg26-mobile-link:hover { background: rgba(255, 255, 255, 0.05); } /* ---- shared content surfaces ---- */ /* Shared sections sit on the global pitch canvas; glows live on .fg26. */ [data-theme="dark"] .fg26 .surf-ai { background: transparent; } /* cards lift off the base with a hairline + a faint top highlight */ [data-theme="dark"] .fg26 .fcard, [data-theme="dark"] .fg26 .sol-card, [data-theme="dark"] .fg26 .sol-rel-card, [data-theme="dark"] .fg26 .step, [data-theme="dark"] .fg26 .artefact, [data-theme="dark"] .fg26 .hp-story, [data-theme="dark"] .fg26 .ucg-group { background: var(--surface); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } [data-theme="dark"] .fg26 .ucg-group--green { border-color: rgba(41, 186, 171, 0.50); box-shadow: 0 0 28px rgba(41, 186, 171, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.035); } [data-theme="dark"] .fg26 .ucg-group--purple { border-color: rgba(171, 138, 182, 0.54); box-shadow: 0 0 28px rgba(171, 138, 182, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.035); } [data-theme="dark"] .fg26 .ucg-group:hover, [data-theme="dark"] .fg26 .ucg-group[open] { background: linear-gradient( 135deg, rgba(41, 186, 171, 0.075), rgba(171, 138, 182, 0.055) 58%, rgba(255, 255, 255, 0.018) ), var(--surface); border-color: rgba(41, 186, 171, 0.42); } [data-theme="dark"] .fg26 .ucg-head { background: rgba(255, 255, 255, 0.025); } [data-theme="dark"] .fg26 .ucg-panel { background: rgba(255, 255, 255, 0.018); } [data-theme="dark"] .fg26 a.fcard:hover, [data-theme="dark"] .fg26 a.sol-card:hover, [data-theme="dark"] .fg26 a.hp-story:hover, [data-theme="dark"] .fg26 a.sol-rel-card:hover { border-color: rgba(41, 186, 171, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 46px -26px rgba(0, 0, 0, 0.8); } [data-theme="dark"] .fg26 a.sol-card.tech:hover { border-color: rgba(171, 138, 182, 0.64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 46px -26px rgba(0, 0, 0, 0.8); } [data-theme="dark"] .fg26 .step:nth-child(odd):hover { border-color: var(--purple); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(171, 138, 182, 0.72), 0 0 34px -8px rgba(171, 138, 182, 0.78); } [data-theme="dark"] .fg26 .step:nth-child(even):hover { border-color: var(--teal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(41, 186, 171, 0.56), 0 0 34px -8px rgba(41, 186, 171, 0.72); } [data-theme="dark"] .fg26 .sys-chip { background: var(--surface); } [data-theme="dark"] .fg26 .solution-systems-section .sys-chip { background: rgba(255, 255, 255, 0.035); color: #fff; } [data-theme="dark"] .fg26 .media { background: var(--surface); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 34px 64px -30px rgba(0, 0, 0, 0.78); } [data-theme="dark"] .fg26 .media-bar { background: var(--surface-2); } /* assessment page: keep live-copy panels readable on the dark canvas */ [data-theme="dark"] .fg26 .assessment-orbit-card { background: radial-gradient(ellipse 70% 70% at 16% 0%, rgba(41, 186, 171, 0.10), transparent 70%), radial-gradient(ellipse 52% 58% at 92% 16%, rgba(171, 138, 182, 0.10), transparent 72%), var(--surface); border-color: rgba(41, 186, 171, 0.30); box-shadow: 0 30px 72px -48px rgba(0, 0, 0, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.045); } [data-theme="dark"] .fg26 .assessment-orbit-card h4, [data-theme="dark"] .fg26 .assessment-orbit-card .assessment-orbit-lead, [data-theme="dark"] .fg26 .assessment-orbit-card li { color: #fff; } [data-theme="dark"] .fg26 .assessment-orbit-card p { color: rgba(255, 255, 255, 0.78); } [data-theme="dark"] .fg26 .assessment-bullet-icon { color: var(--teal); } [data-theme="dark"] .fg26 .assessment-quote-card { background: var(--surface); border-color: rgba(255, 255, 255, 0.09); box-shadow: 0 30px 72px -48px rgba(0, 0, 0, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.045); } [data-theme="dark"] .fg26 .assessment-quote-card blockquote, [data-theme="dark"] .fg26 .assessment-quote-card strong { color: #fff; } [data-theme="dark"] .fg26 .assessment-quote-card figcaption { color: rgba(255, 255, 255, 0.68); } /* connector tiles stay white, colour brand logos need a light chip */ [data-theme="dark"] .fg26 .conn-tile img { filter: none; } /* connector directory + lite-page surfaces */ [data-theme="dark"] .fg26 .cdir-group { background: radial-gradient(ellipse 70% 70% at 16% 0%, rgba(41, 186, 171, 0.10), transparent 70%), radial-gradient(ellipse 58% 66% at 92% 16%, rgba(171, 138, 182, 0.10), transparent 72%), var(--pitch); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 24px 58px -42px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.08); } [data-theme="dark"] .fg26 .cdir-group-head h3 { color: var(--teal); } [data-theme="dark"] .fg26 .cdir-tile, [data-theme="dark"] .fg26 .conn-docs { background: var(--surface); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .fg26 .cdir-search, [data-theme="dark"] .fg26 .cdir-pills button { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.12); } /* connector logos sit directly on the dark tile */ [data-theme="dark"] .fg26 .cdir-ico { background: transparent; border: 0; border-radius: 0; } /* ---- PRICING ---- */ [data-theme="dark"] .fg26 .pr-matrix, [data-theme="dark"] .fg26 .tier, [data-theme="dark"] .fg26 .dial, [data-theme="dark"] .fg26 .cdx, [data-theme="dark"] .fg26 .xdx { background: var(--surface); border-color: rgba(255, 255, 255, 0.08); } /* the corner cell is part of the frozen header, it needs an opaque surface so scrolling content does not bleed through it */ [data-theme="dark"] .fg26 .pr-mx-corner { background: var(--surface); } [data-theme="dark"] .fg26 .pr-billing-toggle button.active { background: var(--surface-2); color: var(--ink); } [data-theme="dark"] .fg26 .cal-region-tabs button.active { background: var(--surface-2); color: var(--ink); } /* sticky header cells need an opaque surface, the light theme uses #fff, dark uses the matrix surface so header text keeps its contrast */ [data-theme="dark"] .fg26 .pr-mx-head { background: var(--surface); } [data-theme="dark"] .fg26 .pr-mx-head.feat { background: linear-gradient(180deg, rgba(41, 186, 171, 0.15), rgba(41, 186, 171, 0.05)), var(--surface); } /* feature tooltip, a lifted surface on dark, not the page colour */ [data-theme="dark"] .fg26 .pr-hint-pop { background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.1); } [data-theme="dark"] .fg26 .pr-hint-pop::after { border-top-color: var(--surface-2); } /* ---- HOME ---- */ /* find-your-path doors */ [data-theme="dark"] .fg26 .hp-door { background: radial-gradient(135% 95% at 100% 0%, rgba(41, 186, 171, 0.16), transparent 60%), var(--surface); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .fg26 a.hp-door:hover { border-color: rgba(41, 186, 171, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 50px -26px rgba(0, 0, 0, 0.8); } [data-theme="dark"] .fg26 .hp-door .door-go { color: var(--teal); } /* connector logo strip - official brand logos stay full-colour on a light chip so they read legibly on the dark wall (a knockout silhouette makes them unrecognisable and breaks the CI guide's connector-logo rule) */ [data-theme="dark"] .fg26 .hp-logos { background: transparent; } [data-theme="dark"] .fg26 .hp-logos-row img { background: #fff; border-radius: 8px; padding: 8px 14px; box-sizing: content-box; opacity: 1; } /* the durable-layer thesis sits on the same pitch canvas as the rest. */ [data-theme="dark"] .fg26 .hp-shift { background: transparent; } [data-theme="dark"] .fg26 .hp-shift-col { border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .fg26 .hp-shift-col.exposed { background: #0d1020; } [data-theme="dark"] .fg26 .hp-shift-col.durable { background: linear-gradient(180deg, rgba(41, 186, 171, 0.11), rgba(41, 186, 171, 0.02)), #141a2e; border-color: rgba(41, 186, 171, 0.42); box-shadow: inset 0 1px 0 rgba(41, 186, 171, 0.12), 0 22px 46px -28px rgba(41, 186, 171, 0.3); } [data-theme="dark"] .fg26 .hp-shift-col.durable .sc-k { color: var(--teal); } /* customer verdict, the white panel becomes a lifted dark surface */ [data-theme="dark"] .fg26 .hp-verdict-card { background: var(--surface); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 30px 60px -40px rgba(0, 0, 0, 0.8); } [data-theme="dark"] .fg26 .hp-verdict-card blockquote { color: var(--ink); } /* integration-assessment banner, white panel becomes a lifted dark surface */ [data-theme="dark"] .fg26 .hp-assess-in { background: var(--surface); border-color: rgba(255, 255, 255, 0.08); border-left-color: var(--teal); } /* awards panel, a lifted card on dark so it stays a contained panel */ [data-theme="dark"] .fg26 .hp-awards, [data-theme="dark"] .fg26 .about-awards { background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .fg26 .hp-gms img { filter: brightness(0) invert(1); opacity: 0.5; } [data-theme="dark"] .fg26 .about-gms-intro-logo { filter: brightness(0) invert(1); opacity: 0.86; } /* logo carousel, invert the knockout for the dark wall */ [data-theme="dark"] .fg26 .logo-car-item img { filter: brightness(0) invert(1); opacity: 0.5; } [data-theme="dark"] .fg26 .logo-car-item:hover img { opacity: 0.85; } /* award badges now sit in their own dark panel (.hp-awards), no per-badge white chip needed; the .gm logo is handled by the .hp-gms img rule above */ /* ---- per-page bespoke surfaces ---- */ [data-theme="dark"] .fg26 .cust-card, [data-theme="dark"] .fg26 .cust-compact, [data-theme="dark"] .fg26 .contact-region, [data-theme="dark"] .fg26 .reco-card, [data-theme="dark"] .fg26 .prog-card, [data-theme="dark"] .fg26 .prog-prop, [data-theme="dark"] .fg26 .prog-check, [data-theme="dark"] .fg26 .cert-benefits, [data-theme="dark"] .fg26 .cert-detail-card, [data-theme="dark"] .fg26 .pdir-card, [data-theme="dark"] .fg26 .unsubscribe-card { background: var(--surface); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); } [data-theme="dark"] .fg26 .cert-benefits:hover, [data-theme="dark"] .fg26 .cert-detail-card:hover { border-color: rgba(41, 186, 171, 0.48); background: linear-gradient(135deg, rgba(41, 186, 171, 0.07), rgba(171, 138, 182, 0.04) 58%, rgba(255, 255, 255, 0.018)), var(--surface); box-shadow: 0 24px 54px -34px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(41, 186, 171, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="dark"] .fg26 .cert-benefits:hover .cert-benefits-head h2, [data-theme="dark"] .fg26 .cert-detail-card:hover h3 { color: var(--teal); text-shadow: 0 0 14px rgba(41, 186, 171, 0.2); } [data-theme="dark"] .fg26 .contact-region { border-left-color: var(--teal); box-shadow: 0 0 24px -18px rgba(41, 186, 171, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.035); } [data-theme="dark"] .fg26 .story-step { background: transparent; color: #fff; } [data-theme="dark"] .fg26 .story-step-body h2, [data-theme="dark"] .fg26 .story-points li { color: #fff; } [data-theme="dark"] .fg26 .story-step-body p { color: rgba(255, 255, 255, 0.74); } /* white pill chips need a dark surface too */ [data-theme="dark"] .fg26 .conn-name { background: var(--surface); border-color: rgba(255, 255, 255, 0.09); } /* form controls, white fields are invisible-text traps on dark */ [data-theme="dark"] .fg26 .pdir-search, [data-theme="dark"] .fg26 .pdir-select, [data-theme="dark"] .fg26 .unsubscribe-form input, [data-theme="dark"] .fg26 .pr-band select, [data-theme="dark"] .fg26 .pr-expand button { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.12); } /* Native select menus render outside our custom pill surface on Windows. Keep the popup list explicitly light so options do not become white-on-white after the dark theme remaps --ink to white. */ [data-theme="dark"] .fg26 select option, [data-theme="dark"] .fg26 select optgroup { color: #0b0e1d; background: #fff; } /* customer + partner logo lockups on dark, white chips */ [data-theme="dark"] .fg26 .cust-wall-logo img, [data-theme="dark"] .fg26 .cust-card-logo img, [data-theme="dark"] .fg26 .cust-compact-logo img { background: #fff; border-radius: 8px; padding: 8px 12px; } /* on-this-page jump nav, translucent dark surface */ [data-theme="dark"] .fg26 .otp-nav { background: rgba(11, 14, 29, 0.85); border-bottom-color: rgba(255, 255, 255, 0.08); }