/* ============================================================================ theme.css — single styling source of truth for the entire site. To REBRAND: edit site-config.php → 'theme' (primary, accent, optional neutral and bg). bootstrap.php injects those as --brand-* custom props into ; everything else in this file derives from them via color-mix. To restyle a section, edit the section blocks below. ============================================================================ */ :root { /* Brand seeds — DEFAULTS only. bootstrap.php overrides these from config. Don't edit values here for a single client; edit site-config.php → 'theme'. */ --brand-primary: #0a5cff; --brand-accent: #ff6b35; --brand-neutral: #0f1115; --brand-bg: #ffffff; --brand-on-primary: #ffffff; /* text color that reads on top of --brand-primary */ /* Brand — derived (do not hardcode brand colors below this line) */ --color-primary: var(--brand-primary); --color-primary-hover: color-mix(in oklch, var(--brand-primary) 85%, black); --color-primary-soft: color-mix(in oklch, var(--brand-primary) 12%, transparent); --color-primary-ring: color-mix(in oklch, var(--brand-primary) 35%, transparent); --color-accent: var(--brand-accent); --color-accent-soft: color-mix(in oklch, var(--brand-accent) 12%, transparent); /* Neutrals — derived from --brand-neutral + --brand-bg */ --color-text: var(--brand-neutral); --color-text-muted: color-mix(in oklch, var(--brand-neutral) 60%, var(--brand-bg)); --color-bg: var(--brand-bg); --color-bg-alt: color-mix(in oklch, var(--brand-neutral) 4%, var(--brand-bg)); --color-bg-elev: var(--brand-bg); --color-border: color-mix(in oklch, var(--brand-neutral) 10%, var(--brand-bg)); /* Status */ --color-success: #0e9c6d; --color-error: #e0413a; /* Typography — system stack: zero load time, ages perfectly */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --fs-display: clamp(2.75rem, 5vw + 1rem, 4.75rem); --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem); --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); --fs-h3: clamp(1.375rem, 1.5vw + 1rem, 1.625rem); --fs-h4: 1.0625rem; --fs-body: 1.0625rem; --fs-lead: 1.1875rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-normal: 1.65; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Layout */ --content-max: 72rem; --reading-max: 42rem; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* Header */ --nav-height: 72px; /* Light brand bar (#EAF1FB) so the navy logo + wordmark stay readable */ --nav-bg: rgba(234, 241, 251, 0.92); --nav-blur: 16px; --nav-border: rgba(20, 35, 61, 0.12); /* Shadows — tinted with the brand neutral so they match cool/warm palettes */ --shadow-sm: 0 1px 2px color-mix(in oklch, var(--brand-neutral) 4%, transparent); --shadow-md: 0 4px 16px color-mix(in oklch, var(--brand-neutral) 6%, transparent), 0 1px 3px color-mix(in oklch, var(--brand-neutral) 4%, transparent); --shadow-lg: 0 24px 48px -12px color-mix(in oklch, var(--brand-neutral) 18%, transparent); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 500ms; } @media (prefers-color-scheme: dark) { :root { /* Flip the seeds — neutral becomes light, bg becomes near-black. Everything derived above re-mixes correctly against the new seeds. */ --brand-neutral: #f4f5f7; --brand-bg: #0b0d12; --color-bg-elev: #181c25; /* Keep the light bar in dark mode too — the navy logo needs it */ --nav-bg: rgba(234, 241, 251, 0.92); --nav-border: rgba(20, 35, 61, 0.12); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.5); } } /* ============================================================================ Reset + base ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 1rem); } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } .skip-link { position: absolute; left: -9999px; background: var(--color-primary); color: var(--brand-on-primary); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-weight: 600; z-index: 100; } .skip-link:focus { left: var(--sp-4); top: var(--sp-4); } /* ============================================================================ Typography ============================================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 750; color: var(--color-text); } h1 { font-size: var(--fs-h1); margin-block: var(--sp-6) var(--sp-4); } h2 { font-size: var(--fs-h2); margin-block: var(--sp-12) var(--sp-5); letter-spacing: -0.022em; } h3 { font-size: var(--fs-h3); margin-block: var(--sp-8) var(--sp-3); letter-spacing: -0.018em; } h4 { font-size: var(--fs-h4); margin-block: var(--sp-5) var(--sp-2); letter-spacing: -0.005em; font-weight: 700; } p { margin-block: 0 var(--sp-4); max-width: 70ch; } a { color: var(--color-primary); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--color-primary-hover); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--color-primary); color: var(--brand-on-primary); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-alt); padding: 0.15em 0.4em; border-radius: 4px; border: 1px solid var(--color-border); } /* ============================================================================ Layout ============================================================================ */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); } main { display: block; min-height: 60vh; } section + section { margin-top: var(--sp-12); } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--color-primary); margin-bottom: var(--sp-3); } /* ============================================================================ Header / nav ============================================================================ */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-height); background: var(--nav-bg); backdrop-filter: blur(var(--nav-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(180%); border-bottom: 1px solid var(--nav-border); } /* Light nav bar overrides — keep navy logo, wordmark, links, and the hamburger icon readable on the light (#EAF1FB) background. CTA buttons keep their blue fill + white text. */ .site-header .brand, .site-header .brand__name, .site-header .nav-desktop a, .site-header .nav-toggle { color: #14233D; } /* Hamburger uses the same dark hover pill as the nav links, so its icon must go white on hover too - otherwise the navy lines vanish on the dark background. */ .site-header .nav-toggle:hover { color: var(--brand-on-primary); } .site-header .brand__sub { color: #4A5A70; } /* On hover the link gets a dark pill (--color-bg-alt), so flip text to white. */ .site-header .nav-desktop a:hover { color: var(--brand-on-primary); } /* Current-page link stays navy so it matches Home/Services - overrides the generic `.nav-desktop a[aria-current]` blue recolor defined further down the file. */ .site-header .nav-desktop a[aria-current="page"] { color: #14233D; } /* ...but on hover the current-page link still gets the dark pill, so its ink must flip to white too. The aria-current rule above ties the hover rule on specificity and wins by source order, which would otherwise leave dark navy text on the dark pill (washed out) - this higher-specificity rule restores the white hover text. */ .site-header .nav-desktop a[aria-current="page"]:hover { color: var(--brand-on-primary); } .site-header .nav-desktop a.cta, .site-header .nav-desktop a.cta:hover { color: var(--brand-on-primary); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); } /* Desktop: 3-column grid -> brand left, nav centered, Call button right. */ @media (min-width: 880px) { .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; } .site-header__inner > .brand { justify-self: start; } .site-header__inner > .nav-desktop { justify-self: center; } .site-header__inner > .nav-actions { justify-self: end; } } .nav-actions { display: none; } @media (min-width: 880px) { .nav-actions { display: flex; align-items: center; } } .nav-call { display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--brand-on-primary); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-primary) 30%, transparent); transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .nav-call:hover { background: var(--color-primary-hover); color: var(--brand-on-primary); text-decoration: none; box-shadow: 0 6px 14px color-mix(in oklch, var(--brand-primary) 28%, transparent); } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.025em; color: var(--color-text); display: inline-flex; align-items: center; gap: var(--sp-3); } .brand:hover { text-decoration: none; color: var(--color-primary); } .brand__mark { display: inline-flex; flex-shrink: 0; } .brand__mark svg { width: 32px; height: 32px; border-radius: 9px; } .nav-desktop { display: none; } @media (min-width: 880px) { .nav-desktop { display: flex; align-items: center; gap: var(--sp-2); } } .nav-desktop ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--sp-1); } .nav-desktop a { color: var(--color-text); font-weight: 500; font-size: 0.9375rem; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .nav-desktop a:hover { background: var(--color-bg-alt); color: var(--color-primary); text-decoration: none; } .nav-desktop a[aria-current="page"] { color: var(--color-primary); } .nav-desktop a.cta { background: var(--color-primary); color: var(--brand-on-primary); margin-left: var(--sp-3); box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-primary) 30%, transparent); } .nav-desktop a.cta:hover { background: var(--color-primary-hover); color: var(--brand-on-primary); box-shadow: 0 4px 12px color-mix(in oklch, var(--brand-primary) 35%, transparent); transform: translateY(-1px); } /* Desktop dropdowns */ .has-dropdown { position: relative; } .has-dropdown > a::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 0.4em; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.55; vertical-align: middle; } .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-2); list-style: none !important; display: flex !important; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } /* Container padding — needs `.nav-desktop` specificity to beat `.nav-desktop ul { padding: 0 }`, otherwise items sit flush to the edges. */ .nav-desktop .dropdown { padding: var(--sp-2); } /* Invisible hover bridge spanning the 8px gap so moving the cursor from "Services" down into the menu doesn't lose hover and close it. */ .has-dropdown > .dropdown::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .dropdown a { display: block; padding: var(--sp-2) var(--sp-4); font-size: 0.9375rem; border-radius: var(--radius-sm); white-space: nowrap; } /* Hamburger */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); } .nav-toggle:hover { background: var(--color-bg-alt); } @media (min-width: 880px) { .nav-toggle { display: none; } } .nav-toggle svg { width: 22px; height: 22px; } /* Mobile menu — full-screen overlay */ .nav-mobile { position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; margin: 0; border: none; padding: var(--sp-16) var(--sp-6) var(--sp-10); background: var(--color-bg); color: var(--color-text); overflow-y: auto; } /* Lay it out as a flex overlay ONLY when open. Setting display unconditionally would override the UA rule [popover]:not(:popover-open){display:none}, leaving the nav links floating on the page when the menu is closed. */ .nav-mobile:popover-open { display: flex; flex-direction: column; } .nav-mobile::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); } .nav-mobile__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 44px; height: 44px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--color-text); } .nav-mobile__close:hover { background: var(--color-bg-alt); } /* base list reset (applies to top-level + nested) */ .nav-mobile ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } /* top-level list vertically centered (auto margins => scrolls, not clips, when tall) */ .nav-mobile > ul { margin-block: auto; align-items: center; gap: var(--sp-3); width: 100%; } .nav-mobile a { display: block; padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-sm); color: var(--color-text); font-weight: 600; font-size: 1.5rem; text-align: center; } .nav-mobile a:hover { background: var(--color-bg-alt); text-decoration: none; } .nav-mobile a[aria-current="page"] { color: var(--color-primary); } .nav-mobile details { text-align: center; } .nav-mobile details summary { padding: var(--sp-2) var(--sp-5); cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; font-size: 1.5rem; list-style: none; display: flex; justify-content: center; align-items: center; gap: var(--sp-2); } .nav-mobile details summary::-webkit-details-marker { display: none; } .nav-mobile details summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease); } .nav-mobile details[open] summary::after { transform: rotate(45deg); } .nav-mobile details[open] summary { color: var(--color-primary); } .nav-mobile details ul { align-items: center; margin-top: var(--sp-2); margin-bottom: var(--sp-3); gap: var(--sp-1); } .nav-mobile details ul a { font-size: 1.125rem; font-weight: 500; color: var(--color-text-muted); } /* ============================================================================ Footer ============================================================================ */ .site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-block: var(--sp-20) var(--sp-8); margin-top: var(--sp-32); } .site-footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--sp-12); max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); } @media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } } @media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer__tagline { margin-top: var(--sp-3); color: var(--color-text-muted); } .site-footer__address { font-style: normal; margin-top: var(--sp-4); color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.7; } .site-footer h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin: 0 0 var(--sp-4); font-weight: 600; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .site-footer a { color: var(--color-text); font-size: 0.9375rem; } .site-footer a:hover { color: var(--color-primary); } .site-footer__bottom { max-width: var(--content-max); margin: var(--sp-16) auto 0; padding: var(--sp-6) var(--sp-6) 0; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-small); color: var(--color-text-muted); } /* "Powered by Spark" credit mark — keeps its fixed brand orange on any footer background. inline-block needed because the global reset sets svg{display:block}. */ .spark-mark { display: inline-block; width: 1.6em; height: 1.6em; margin-left: 0.15em; vertical-align: -0.5em; } /* ============================================================================ Buttons ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); font-size: 0.9375rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); text-decoration: none; white-space: nowrap; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); color: var(--brand-on-primary); box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-primary) 30%, transparent); } .btn-primary:hover { background: var(--color-primary-hover); color: var(--brand-on-primary); box-shadow: 0 8px 16px color-mix(in oklch, var(--brand-primary) 25%, transparent); } .btn-ghost { background: transparent; color: var(--color-text); border-color: rgba(255,255,255,0.85); } .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; /* keep text white on hover (overrides global a:hover blue) */ text-decoration: none; box-shadow: 0 8px 16px color-mix(in oklch, var(--brand-primary) 25%, transparent); } .btn-lg { padding: var(--sp-4) var(--sp-8); font-size: 1rem; } /* ============================================================================ Forms ============================================================================ */ .form { display: grid; gap: var(--sp-5); max-width: 36rem; } .form-row { display: grid; gap: var(--sp-2); } .form label { font-weight: 500; font-size: 0.9375rem; } .form input, .form textarea, .form select { width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-primary) 18%, transparent); } .form textarea { min-height: 140px; resize: vertical; } .form .hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; } .form-help { font-size: var(--fs-small); color: var(--color-text-muted); } .form-status { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); display: none; font-size: 0.9375rem; } .form-status[data-state="ok"] { display: block; background: color-mix(in oklch, var(--color-success) 12%, transparent); color: var(--color-success); border: 1px solid color-mix(in oklch, var(--color-success) 30%, transparent); } .form-status[data-state="error"] { display: block; background: color-mix(in oklch, var(--color-error) 12%, transparent); color: var(--color-error); border: 1px solid color-mix(in oklch, var(--color-error) 30%, transparent); } /* ============================================================================ Hero — the "beautiful" landing section ============================================================================ */ .hero { position: relative; isolation: isolate; padding-block: var(--sp-24) var(--sp-20); text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -20% -10%; z-index: -2; background: radial-gradient(45% 55% at 18% 20%, color-mix(in oklch, var(--brand-primary) 20%, transparent), transparent 70%), radial-gradient(40% 50% at 85% 25%, color-mix(in oklch, var(--brand-accent) 16%, transparent), transparent 70%), radial-gradient(50% 50% at 50% 110%, color-mix(in oklch, var(--brand-primary) 12%, transparent), transparent 70%); filter: blur(2px); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, color-mix(in oklch, var(--brand-neutral) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--brand-neutral) 6%, transparent) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%); mask-image: radial-gradient(ellipse at center, black, transparent 70%); } .hero h1 { font-size: var(--fs-display); letter-spacing: -0.035em; line-height: 1.04; font-weight: 800; margin-block: 0 var(--sp-6); max-width: 18ch; margin-inline: auto; } .hero p.lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 52ch; margin-inline: auto; margin-bottom: var(--sp-8); line-height: 1.55; } .hero__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; } .hero__highlight { background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================================ Cards / sections ============================================================================ */ .section-title { text-align: center; margin-bottom: var(--sp-10); } .section-title h2 { margin-top: 0; } .section-title p { margin-inline: auto; color: var(--color-text-muted); font-size: var(--fs-lead); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); } .card { position: relative; padding: var(--sp-8) var(--sp-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elev); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .card h3 { margin-top: var(--sp-3); margin-bottom: var(--sp-2); } .card p { color: var(--color-text-muted); margin-bottom: 0; } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft)); color: var(--color-primary); } .card__icon svg { width: 22px; height: 22px; } /* Stats strip */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-6); padding: var(--sp-10); background: var(--color-bg-alt); border-radius: var(--radius-lg); border: 1px solid var(--color-border); text-align: center; } .stats__num { font-family: var(--font-display); font-size: clamp(2rem, 3vw + 1rem, 2.75rem); font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(120deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stats__label { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--sp-1); } /* CTA section */ .cta-band { text-align: center; padding: var(--sp-16) var(--sp-6); background: linear-gradient(135deg, #3E6FA8 0%, #2f5680 55%, #284a6f 100%); /* soft steel-blue (was harsh electric #2F6BFF) */ color: var(--brand-on-primary); border-radius: var(--radius-xl); margin-block: var(--sp-16); } .cta-band h2 { color: var(--brand-on-primary); margin-top: 0; } .cta-band p { color: color-mix(in oklch, var(--brand-on-primary) 85%, transparent); margin-inline: auto; max-width: 50ch; font-size: var(--fs-lead); } .cta-band .btn-primary { background: var(--brand-on-primary); color: var(--color-primary); } .cta-band .btn-primary:hover { background: color-mix(in oklch, var(--brand-on-primary) 90%, var(--brand-neutral)); color: var(--color-primary-hover); } /* Reading content (about/service body) */ .prose { max-width: var(--reading-max); margin-inline: auto; } .prose h2:first-child, .prose h1:first-child { margin-top: 0; } /* Anchor offset for sticky header */ :target { scroll-margin-top: calc(var(--nav-height) + var(--sp-6)); } /* ============================================================================ Breadcrumbs ============================================================================ */ .breadcrumbs { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--sp-12); margin-bottom: 0; } .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); } .breadcrumbs li:not(:last-child)::after { content: "›"; color: var(--color-text-muted); opacity: 0.55; } .breadcrumbs a { color: var(--color-text-muted); } .breadcrumbs a:hover { color: var(--color-primary); } .breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 500; } /* ============================================================================ Accessibility & motion ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !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; } /* ============================================================================ ============================================================================ SUNSHADE MOBILE WINDOW TINTING - project layer (built on the native theme) ============================================================================ DESIGN DIRECTION - Sunshade Mobile Window Tinting Personality: precise, seasoned, trustworthy Inspiration: (1) split hero with copy left + an interactive glass panel right, as on premium auto-detailing/PPF studio landings; (2) a draggable before/after "tint reveal" that literally demonstrates the craft - common on tint/PPF studio sites. Hero pattern: The Split (copy 48 / interactive glass 52). Trust-first personal intro paired with a live proof-of-craft visual. Signature moment: M-custom "Tint Reveal" - a CSS glass scene with a drag handle pulling the film across a sunlit window (glare -> cool tint). On-brand for glass; needs no photography. Section order: Proof-first (established business) - HERO -> CRED STRIP -> ABOUT SHAWN -> TINT REVEAL note -> SERVICES 3-up -> WHY TINT bullets -> GOOGLE REVIEWS -> SERVICE AREA (mobile) -> CONTACT CTA Font pair: #3 Space Grotesk (display) + DM Sans (body) Color recipe: Navy professional (cool) - ink #14233D, steel #1E4E8C, electric #2F6BFF on #FFFFFF; silver #C9D2DC chrome Shape language: soft 14px radius, 1px hairline borders, thin steel dividers, subtle chrome/glass gradients ============================================================================ */ :root { /* Brand fonts override the system stack (system renders first as fallback). */ --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Space Grotesk", var(--font-sans); /* Sunshade supporting tokens (chrome + glass). */ --ss-navy: #14233D; --ss-steel: #3E6FA8; --ss-silver: #C9D2DC; --ss-ice: #EEF3F8; /* cool light section tint */ --ss-ink-soft: #4A5A70; /* Single dark "automotive glass" theme. The brand seeds (injected inline by bootstrap.php / mirror ) carry a navy --brand-bg + light --brand-neutral, so the base layer derives dark automatically; the NAVY THEME block at the end of this file elevates card/form surfaces and fixes the few hardcoded light tokens. color-scheme:dark keeps native form controls / scrollbars on-theme. */ color-scheme: dark; } /* Safety net against any horizontal overflow on small screens. 'clip' (not 'hidden') does NOT create a scroll container, so the sticky header still works. */ body { overflow-x: clip; } /* Space Grotesk tops out at 700 - cap heading weights so there's no faux-bold. */ h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; } .hero h1 { font-weight: 700; } /* --- Text wordmark (no logo graphic) ------------------------------------- */ .brand { gap: 0; flex-direction: column; align-items: flex-start; line-height: 1; } .brand__logo { height: 50px; width: auto; display: block; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ss-navy); } .brand:hover .brand__name { color: var(--color-primary); } .brand__sub { font-family: var(--font-sans); font-weight: 600; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ss-steel); margin-top: 2px; } .site-footer__brand .brand__name { color: var(--ss-navy); } .site-footer__note { color: var(--color-text-muted); } /* --- Shared section helpers ---------------------------------------------- */ .ss-section { padding-block: var(--sp-20); } .ss-section--tint { background: var(--ss-ice); } .ss-section--navy { background: radial-gradient(60% 80% at 85% 0%, color-mix(in oklch, var(--brand-accent) 26%, transparent), transparent 60%), linear-gradient(160deg, #16263f 0%, var(--ss-navy) 60%, #0e1828 100%); color: #eaf1fb; } .ss-section--navy h2, .ss-section--navy h3 { color: #fff; } .ss-section--navy p { color: color-mix(in oklch, #eaf1fb 88%, transparent); } .ss-divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--ss-silver), transparent); margin-block: 0; } /* Reveal-on-scroll workhorse (shared IO sets .is-in; footer.php ships the JS) */ [data-animate] { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } [data-animate].is-in { opacity: 1; transform: none; } [data-animate][data-animate-delay="1"] { transition-delay: 0.08s; } [data-animate][data-animate-delay="2"] { transition-delay: 0.16s; } [data-animate][data-animate-delay="3"] { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; transition: none; } } /* --- Pill / chip --------------------------------------------------------- */ .ss-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--ss-silver); border-radius: 999px; background: color-mix(in oklch, var(--ss-silver) 22%, var(--brand-bg)); font-size: var(--fs-small); font-weight: 600; color: var(--ss-navy); } .ss-chip svg { width: 16px; height: 16px; color: var(--color-primary); } .ss-section--navy .ss-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; } .ss-section--navy .ss-chip svg { color: #8fb4ff; } /* --- Hero (split: copy + interactive glass) ------------------------------ */ .ss-hero { padding-block: var(--sp-20) var(--sp-16); position: relative; overflow: hidden; } .ss-hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; z-index: -1; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; background: radial-gradient(circle, color-mix(in oklch, var(--brand-accent) 14%, transparent), transparent 62%); } .ss-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); align-items: center; } @media (min-width: 920px) { .ss-hero__grid { grid-template-columns: 0.92fr 1.08fr; gap: var(--sp-16); } } /* Prevent grid blowout: let columns shrink below their content's intrinsic min-size so nothing forces the page wider than the viewport. */ .ss-hero__grid > * { min-width: 0; } .ss-hero h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.03em; margin-block: var(--sp-4) var(--sp-5); max-width: 16ch; } .ss-hero .lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 48ch; margin-bottom: var(--sp-6); } .ss-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); } .ss-hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: var(--color-text-muted); font-size: var(--fs-small); } .ss-hero__trust strong { color: var(--ss-navy); } .ss-hero__highlight { color: var(--color-primary); } /* --- Signature: Tint Reveal (CSS glass scene + drag handle) --------------- */ .ss-reveal { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--ss-silver); box-shadow: var(--shadow-lg); background: #0e1828; overflow: hidden; } .ss-reveal__scene { position: relative; aspect-ratio: 4 / 3; /* the shared "view": sky gradient + distant horizon */ background: linear-gradient(180deg, #9cc4ef 0%, #c9e3fb 52%, #e9f3fc 75%, #d7e6f1 100%); } /* untinted side: harsh sun glare + heat wash (full-bleed, sits under the film) */ .ss-reveal__glare { position: absolute; inset: 0; background: radial-gradient(58% 70% at 82% 16%, rgba(255,251,224,0.98), rgba(255,247,206,0.55) 26%, transparent 56%), linear-gradient(180deg, rgba(255,255,255,0.28), transparent 40%); mix-blend-mode: screen; } /* tinted side: the film Sunshade installs - cooler, darker, glare killed */ .ss-reveal__tinted { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,26,44,0.62) 0%, rgba(30,78,140,0.40) 60%, rgba(20,35,61,0.58) 100%); clip-path: inset(0 calc(100% - var(--pos, 55%)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--pos, 55%)) 0 0); } .ss-reveal__tinted::after { /* subtle glass reflection streak on the tinted glass */ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.10) 46%, transparent 54%); } .ss-reveal__tag { position: absolute; bottom: var(--sp-4); z-index: 3; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(4px); } .ss-reveal__tag--after { left: var(--sp-4); background: rgba(20,35,61,0.72); color: #cfe0ff; border: 1px solid rgba(143,180,255,0.4); } .ss-reveal__tag--before { right: var(--sp-4); background: rgba(255,255,255,0.78); color: #6a4a14; border: 1px solid rgba(180,150,90,0.4); } /* the film edge + grab handle at --pos */ .ss-reveal__handle { position: absolute; top: 0; bottom: 0; z-index: 4; left: var(--pos, 55%); width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--ss-silver), transparent); pointer-events: none; } .ss-reveal__handle::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.92); border: 2px solid var(--color-primary); box-shadow: 0 4px 14px rgba(20,35,61,0.35); background-image: linear-gradient(90deg, transparent 46%, var(--color-primary) 46%, var(--color-primary) 54%, transparent 54%); } .ss-reveal__handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 10px; background: linear-gradient(90deg, var(--color-primary) 0 3px, transparent 3px 9px) left/8px 100% repeat-x; opacity: 0; /* decorative arrows handled via knob; keep simple */ } /* full-area transparent range input drives --pos (accessible: arrow keys work) */ .ss-reveal__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; } .ss-reveal__range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; background: transparent; cursor: ew-resize; } .ss-reveal__range::-moz-range-thumb { width: 48px; height: 100%; border: 0; background: transparent; cursor: ew-resize; } .ss-reveal__range:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; } .ss-reveal__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); background: #0e1828; color: #aebfd6; font-size: var(--fs-small); border-top: 1px solid rgba(255,255,255,0.06); } .ss-reveal__caption svg { width: 16px; height: 16px; color: #8fb4ff; } /* --- Credibility strip ---------------------------------------------------- */ .ss-cred { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); padding: var(--sp-8) var(--sp-8); background: var(--brand-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } @media (min-width: 760px) { .ss-cred { grid-template-columns: repeat(4, 1fr); } } .ss-cred__item { display: flex; flex-direction: column; gap: 2px; } .ss-cred__item + .ss-cred__item { position: relative; } .ss-cred__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw + 1rem, 2.25rem); letter-spacing: -0.02em; color: var(--ss-navy); } .ss-cred__num span { color: var(--color-primary); } .ss-cred__label { color: var(--color-text-muted); font-size: var(--fs-small); } /* --- Image + story split (reusable) -------------------------------------- */ .ss-split { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: center; } @media (min-width: 900px) { .ss-split { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } } .ss-split__media { position: relative; } .ss-split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .ss-split__media--frame { border: 1px solid var(--ss-silver); border-radius: calc(var(--radius-lg) + 6px); padding: 10px; background: linear-gradient(160deg, var(--ss-ice), #fff); } .ss-split__media--frame img { border-radius: var(--radius-md); } @media (min-width: 900px) { .ss-split--reverse .ss-split__media { order: 2; } } /* Mobile (stacked): on the Services detail rows always show the copy first (text, bullets, button) and the image last, so the alternating desktop layout doesn't leave the image stranded on top. Scoped to .ss-service so the home About split is unaffected. */ @media (max-width: 899.98px) { .ss-service .ss-split__media { order: 2; } } .ss-split__badge { position: absolute; bottom: -18px; left: 18px; background: var(--ss-navy); color: #fff; border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-5); box-shadow: var(--shadow-lg); font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; } .ss-split__badge span { display: block; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-small); color: var(--ss-silver); letter-spacing: 0; } /* --- Services (alternating detail rows) ---------------------------------- */ .ss-service { scroll-margin-top: calc(var(--nav-height) + var(--sp-8)); } .ss-service + .ss-service { margin-top: var(--sp-20); } .ss-service__list { list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-6); display: grid; gap: var(--sp-3); } .ss-service__list li { display: flex; gap: var(--sp-3); align-items: flex-start; } .ss-service__list svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; color: var(--color-primary); } /* --- Why tint: benefit grid ---------------------------------------------- */ .ss-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); } .ss-benefit { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-8) var(--sp-6); border-radius: var(--radius-lg); /* match .card box size */ background: var(--brand-bg); border: 1px solid var(--color-border); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ss-benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .ss-benefit__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft)); color: var(--color-primary); } .ss-benefit__icon svg { width: 22px; height: 22px; } .ss-benefit h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-h4); } .ss-benefit p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); } /* --- Reviews -------------------------------------------------------------- */ .ss-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); } .ss-review { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6); background: var(--brand-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .ss-review__stars { color: #f5a623; letter-spacing: 2px; font-size: 1.05rem; } .ss-review p { margin: 0; color: var(--color-text); } .ss-review__by { margin-top: auto; font-weight: 600; color: var(--ss-navy); font-size: var(--fs-small); } .ss-reviews-cta { text-align: center; margin-top: var(--sp-8); } .ss-google { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; } .ss-google svg { width: 18px; height: 18px; } /* --- Service area band ---------------------------------------------------- */ .ss-area__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: center; } @media (min-width: 880px) { .ss-area__grid { grid-template-columns: 1.1fr 0.9fr; } } .ss-area__places { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); } .ss-area__map { border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.14); overflow: hidden; min-height: 240px; background: radial-gradient(60% 60% at 50% 42%, color-mix(in oklch, var(--brand-accent) 20%, transparent), transparent 72%), repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 38px), #0f1d31; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-3); } /* Arkansas service-area map (inline SVG + city pins) — fills the box */ .ss-area__svg { width: 100%; max-width: 560px; height: auto; display: block; } .ss-area__state { fill: color-mix(in oklch, var(--brand-accent) 12%, transparent); stroke: rgba(143,180,255,0.55); stroke-width: 1.5; stroke-linejoin: round; } .ss-pin__halo { fill: var(--brand-accent); opacity: 0.16; } .ss-pin__dot { fill: #8fb4ff; stroke: #0f1d31; stroke-width: 1; } .ss-pin__dot--hub { fill: var(--brand-accent); } .ss-pin__ring { fill: none; stroke: var(--brand-accent); stroke-width: 1.5; opacity: 0.5; } .ss-area__label { fill: #cdd9ee; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; } .ss-area__label--hub { fill: #fff; font-weight: 700; } .ss-area__caption { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ss-silver); font-weight: 500; } /* --- Contact page layout -------------------------------------------------- */ .ss-contact { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); align-items: start; } @media (min-width: 900px) { .ss-contact { grid-template-columns: 1fr 1.05fr; gap: var(--sp-16); } } .ss-contact__card { background: var(--ss-ice); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-8); } .ss-contact__row { display: flex; gap: var(--sp-4); align-items: flex-start; padding-block: var(--sp-4); } .ss-contact__row + .ss-contact__row { border-top: 1px solid var(--color-border); } .ss-contact__row svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-primary); margin-top: 3px; } .ss-contact__row h3 { margin: 0 0 2px; font-size: var(--fs-h4); } .ss-contact__row p, .ss-contact__row a { margin: 0; color: var(--color-text-muted); } /* --- 404 ------------------------------------------------------------------ */ .ss-404 { text-align: center; padding-block: var(--sp-24); } .ss-404__big { font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(5rem, 18vw, 11rem); letter-spacing: -0.04em; background: linear-gradient(120deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ss-404__links { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); } /* --- Consent banner ------------------------------------------------------- */ .ss-consent { position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); z-index: 90; max-width: 760px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--ss-navy); color: #eaf1fb; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .ss-consent p { margin: 0; font-size: var(--fs-small); color: #cdd9ec; flex: 1 1 320px; } .ss-consent a { color: #8fb4ff; } .ss-consent__btns { display: flex; gap: var(--sp-2); } .ss-consent .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); background: transparent; } .ss-consent .btn-ghost:hover { background: rgba(255,255,255,0.1); } .ss-consent[hidden] { display: none; } /* --- Mobile polish -------------------------------------------------------- */ @media (max-width: 600px) { .ss-section { padding-block: var(--sp-16); } .ss-reveal__tag { font-size: 0.625rem; } /* Hero H1: the global --fs-display floor (2.75rem) overflows ~390px phones. Use a smaller, contained clamp so "done right" never runs off-screen. */ .ss-hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.4rem); max-width: 100%; overflow-wrap: break-word; } .ss-hero .lead { font-size: 1.05rem; } } /* ============================================================================ SINGLE NAVY THEME — sitewide dark "automotive glass" finish ---------------------------------------------------------------------------- The brand seeds carry a navy --brand-bg + light --brand-neutral, so the base layer (body, header, footer, borders, muted text, form bg) derives dark automatically. This block: (1) lays the navy gradient on the page, (2) lifts card/form/dropdown surfaces off the canvas so they read as panels, (3) fixes the few hardcoded light-surface / dark-ink tokens in the project layer, and (4) brightens primary-colored TEXT (eyebrows, links, highlights) for contrast on navy. Buttons keep the bright primary fill with white text. ============================================================================ */ :root { --ss-surface: rgba(255,255,255,0.05); /* elevated panel on navy */ --ss-surface-border: rgba(255,255,255,0.14); --ss-on-navy-soft: #8fb4ff; /* light accent text on navy */ --color-text: #ffffff; /* client request: all body text white */ --color-text-muted: #ffffff; /* client request: no gray body text */ /* Depth reads better with dark shadows on a dark canvas. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30); --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.55); } /* Page canvas: navy gradient like the "Where I work" section, applied once. */ body { background-color: #0e1828; background-image: radial-gradient(70% 60% at 85% -5%, color-mix(in oklch, var(--brand-accent) 18%, transparent), transparent 60%), linear-gradient(160deg, #16263f 0%, #14233d 45%, #0e1828 100%); background-repeat: no-repeat; color: var(--color-text); } /* Sections sit directly on the canvas — no light tint bands. */ .ss-section--tint { background: transparent; } /* Panels / cards / framed media: lift off the canvas with a translucent surface. */ .ss-cred, .ss-benefit, .ss-review, .ss-contact__card, .ss-split__media--frame { background: var(--ss-surface); border-color: var(--ss-surface-border); } .dropdown, .nav-mobile { background: #16243f; border-color: var(--ss-surface-border); } .dropdown a { color: var(--color-text); } .dropdown a:hover { color: var(--ss-on-navy-soft); background: var(--ss-surface); } /* The light-bar rule .site-header .nav-desktop a (dark ink) also matches dropdown links and outranks .dropdown a; re-assert light text on the dark dropdown panel. */ .site-header .nav-desktop .dropdown a { color: var(--color-text); } .site-header .nav-desktop .dropdown a:hover { color: var(--ss-on-navy-soft); background: var(--ss-surface); } /* Form fields readable on navy. */ .form input, .form textarea, .form select { background: var(--ss-surface); border-color: var(--ss-surface-border); color: var(--color-text); } .form input::placeholder, .form textarea::placeholder { color: color-mix(in oklch, var(--color-text) 55%, transparent); } /* Native