:root{ --bg:#0B0C0C; --scrim-rgb:11,12,12; --surface:#141517; --surface-2:#1B1D20; --surface-3:#202326; --text:#F3F1EC; --muted:#A5A29A; --faint:#6E6B63; --line: rgba(243,241,236,0.10); --line-strong: rgba(243,241,236,0.18); /* soft, muted triad tuned to sit gently on the dark ground: enough hue to feel alive, never neon enough to fight the eye. */ --blue:#7FADD9; --green:#7ECEAE; --pink:#DE9BB0; --accent:#7FADD9; --accent-light:#B3D0EC; --accent-hover:#5E8FBE; --accent-dim: rgba(127,173,217,0.10); /* menu-driven selection highlight: kept distinct from --accent so it reads as "you picked this" rather than blending into the site's regular link/eyebrow colour. */ --highlight:#DE9BB0; --highlight-tint:#1C2024; --radius: 4px; --image-filter: grayscale(0.4) contrast(0.96) brightness(0.92); /* glass layer system: 4 tiers of elevation. Kept low-saturation and low-contrast on purpose — the goal is a quiet, restful surface, not a shiny one. */ --glass-1: rgba(243,241,236,0.03); --glass-1-border: rgba(243,241,236,0.05); --glass-1-blur: 10px; --glass-2: rgba(243,241,236,0.04); --glass-2-border: rgba(243,241,236,0.07); --glass-2-blur: 14px; --glass-3: rgba(243,241,236,0.05); --glass-3-border: rgba(243,241,236,0.09); --glass-3-blur: 18px; --glass-4: rgba(243,241,236,0.07); --glass-4-border: rgba(243,241,236,0.12); --glass-4-blur: 22px; --glass-shadow: 0 12px 32px -14px rgba(0,0,0,0.45); --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.05); } /* ---------- light theme ---------- */ /* Same structure, same restfulness — warm paper ground, ink text, glass panels made of soft light instead of soft dark. Toggled via [data-theme] on , set by carbon.js. */ :root[data-theme="light"]{ --bg:#F3F6FA; --scrim-rgb:243,246,250; --surface:#FFFFFF; --surface-2:#E6ECF3; --surface-3:#D7E0EA; --text:#161A22; --muted:#555F6E; --faint:#8B93A2; --line: rgba(22,26,34,0.08); --line-strong: rgba(22,26,34,0.15); /* a cooler indigo / emerald / raspberry triad — deliberately distinct from the dark theme's warm sky-blue / sage / dusty-rose set, so the light mode reads as its own palette. */ --blue:#3B5BD9; --green:#0E9A76; --pink:#C24C7C; --accent:#3B5BD9; --accent-light:#6478E6; --accent-hover:#2C46B0; --accent-dim: rgba(59,91,217,0.10); --highlight:#4A7FB5; --highlight-tint:#F2F6FA; --image-filter: grayscale(0.08) contrast(1.02) brightness(1.02); --glass-1: rgba(255,255,255,0.5); --glass-1-border: rgba(22,26,34,0.06); --glass-1-blur: 10px; --glass-2: rgba(255,255,255,0.62); --glass-2-border: rgba(22,26,34,0.08); --glass-2-blur: 14px; --glass-3: rgba(255,255,255,0.72); --glass-3-border: rgba(22,26,34,0.10); --glass-3-blur: 18px; --glass-4: rgba(255,255,255,0.82); --glass-4-border: rgba(22,26,34,0.13); --glass-4-blur: 22px; --glass-shadow: 0 12px 28px -16px rgba(22,26,34,0.14); --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.85); } :root[data-theme="light"] .nav{ background:linear-gradient(120deg, rgba(243,246,250,0.65) 0%, rgba(243,246,250,0.42) 55%, rgba(243,246,250,0.6) 100%); } :root[data-theme="light"] .btn{ color:#F3F6FA; } .glass-1{ background:var(--glass-1); border:1px solid var(--glass-1-border); backdrop-filter:blur(var(--glass-1-blur)); -webkit-backdrop-filter:blur(var(--glass-1-blur)); } .glass-2{ background:var(--glass-2); border:1px solid var(--glass-2-border); backdrop-filter:blur(var(--glass-2-blur)); -webkit-backdrop-filter:blur(var(--glass-2-blur)); box-shadow:var(--glass-shadow), var(--glass-highlight); } .glass-3{ background:var(--glass-3); border:1px solid var(--glass-3-border); backdrop-filter:blur(var(--glass-3-blur)); -webkit-backdrop-filter:blur(var(--glass-3-blur)); box-shadow:var(--glass-shadow), var(--glass-highlight); } .glass-4{ background:var(--glass-4); border:1px solid var(--glass-4-border); backdrop-filter:blur(var(--glass-4-blur)); -webkit-backdrop-filter:blur(var(--glass-4-blur)); box-shadow:var(--glass-highlight); } *{box-sizing:border-box;} /* every anchor target clears the sticky nav (~73px) plus breathing room — sections already have enough top padding to clear it on their own, but small anchor targets like a single .card inside a grid (e.g. the Technology Services cards) do not, and land tucked under the nav without this. */ [id]{ scroll-margin-top:104px; } /* overflow-x:hidden belongs on html, not body: setting it on body forces body's own overflow-y to compute as "auto" per the CSS overflow spec, which silently turns body into its own inner scroll container instead of the document/viewport — breaking scrollIntoView, native #anchor jumps, and window.scrollY everywhere. */ html{background:var(--bg); scroll-behavior:smooth; overflow-x:hidden;} @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ background:var(--bg); color:var(--text); font-family:'Red Hat Text', -apple-system, 'Segoe UI', Arial, sans-serif; font-weight:350; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; max-width:100%; position:relative; z-index:0; } /* film-grain texture + soft vignette: sit BEHIND real content (negative z-index inside the stacking context body's own position+z-index establishes), never on top of it — a layer painted over text/photos is what reads as a haze, not a texture. */ body::before{ content:''; position:fixed; inset:0; z-index:-1; 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='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 80% 60% at 50% 0%, transparent 40%, rgba(var(--scrim-rgb),0.35) 100%); } .mono{ font-family:'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; } /* Display face: Red Hat Display, used only for headings, an enterprise/infra type system. Body face: Red Hat Text, used for everything you read. Data face: JetBrains Mono, used for every number, tag, label and stat, never for prose. Three roles, never mixed. */ h1,h2,h3,h4{ font-family:'Red Hat Display', 'Red Hat Text', sans-serif; font-weight:500; color:var(--text); text-wrap:balance; margin:0; letter-spacing:-0.01em; } p{ margin:0; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; } @media (max-width:700px){ .wrap{ padding:0 20px; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } /* ---------- scroll-reveal (applied by carbon.js, no markup edits needed) ---------- */ .reveal{ opacity:0; transform:translateY(38px); filter:blur(7px); transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1), filter 1s cubic-bezier(.16,.8,.24,1); will-change:opacity, transform, filter; } .reveal.is-visible{ opacity:1; transform:translateY(0); filter:blur(0px); } .reveal-scale{ transform:translateY(30px) scale(0.94); filter:blur(7px); } .reveal-scale.is-visible{ transform:translateY(0) scale(1); filter:blur(0px); } /* anchor landing highlight: whatever a menu link jumps to (a full section or a single card within one) gets a quiet background tint plus a ring so it's obvious where you arrived, not just that the page moved. Two animations run together at different speeds on purpose: the tint settles quickly (it's just a backdrop), the ring keeps drawing in a touch longer at a constant pace so the arrival reads as deliberate rather than snappy. carbon.js keeps the ring in place until the visitor scrolls away from the section (or 60s pass, whichever first), rather than fading it on a timer. Uses --highlight rather than --accent so a menu-driven selection reads as "you picked this," distinct from the site's ordinary link/eyebrow colour; --highlight-tint has no effect on elements with their own background-image (e.g. .section-tinted's gradient), so tinted sections still get the ring without the backdrop fighting their own tint. */ @keyframes anchor-flash-tint{ from{ background-color:var(--surface); } to{ background-color:var(--highlight-tint); } } @keyframes anchor-flash-ring{ from{ box-shadow:0 0 0 0 transparent; } to{ box-shadow:0 0 0 2px var(--highlight); } } .anchor-flash{ animation:anchor-flash-tint 0.4s ease-out both, anchor-flash-ring 0.7s linear both; } /* ---------- nav ---------- */ .nav{ position:sticky; top:0; z-index:50; background:linear-gradient(120deg, rgba(var(--scrim-rgb),0.55) 0%, rgba(var(--scrim-rgb),0.38) 55%, rgba(var(--scrim-rgb),0.5) 100%); backdrop-filter: blur(var(--glass-4-blur)); -webkit-backdrop-filter: blur(var(--glass-4-blur)); border-bottom:1px solid var(--glass-4-border); box-shadow:var(--glass-highlight), 0 12px 28px -18px rgba(0,0,0,0.6); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; } .brand{ display:flex; align-items:center; gap:10px; font-family:'Red Hat Display','Red Hat Text',sans-serif; font-weight:500; font-size:16px; letter-spacing:-0.01em; color:var(--text); } .brand-logo{ width:24px; height:auto; display:block; transition:transform 0.35s cubic-bezier(.34,1.56,.64,1); } .brand:hover .brand-logo{ transform:rotate(-8deg) scale(1.08); } .footer-brand{ display:flex; align-items:center; gap:10px; font-family:'Red Hat Display','Red Hat Text',sans-serif; font-weight:500; font-size:15px; color:var(--text); margin-bottom:8px; } .footer-brand .brand-logo{ width:20px; } .nav-links{ display:flex; align-items:center; gap:28px; } @media (max-width:860px){ .nav-links{ display:none; } } /* dropdown nav items */ .nav-item{ position:relative; } .nav-trigger-row{ display:flex; align-items:center; gap:4px; } .nav-trigger-row > a{ position:relative; font-size:14px; color:var(--muted); font-weight:400; padding-bottom:4px; transition:color 0.2s ease; } .nav-trigger-row > a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--local-accent, var(--accent)); transition:right 0.28s cubic-bezier(.16,.8,.24,1); } .nav-trigger-row > a:hover::after, .nav-trigger-row > a.is-current::after{ right:0; } .nav-trigger-row > a:hover, .nav-trigger-row > a.is-current{ color:var(--text); } .nav-caret{ display:none; background:none; border:none; padding:2px; cursor:pointer; color:var(--faint); transition:color 0.2s ease; } .nav-caret svg{ width:12px; height:12px; transition:transform 0.25s cubic-bezier(.16,.8,.24,1); } .nav-item:hover .nav-caret, .nav-item.open .nav-caret{ color:var(--local-accent, var(--accent)); } .nav-item:hover .nav-caret svg, .nav-item.open .nav-caret svg{ transform:rotate(180deg); } .nav-dropdown{ list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 14px); left:0; min-width:230px; background:var(--glass-4); border:1px solid var(--glass-4-border); border-radius:12px; backdrop-filter:blur(var(--glass-4-blur)); -webkit-backdrop-filter:blur(var(--glass-4-blur)); box-shadow:0 20px 40px -12px rgba(0,0,0,0.6), var(--glass-highlight); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index:60; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .nav-dropdown li + li{ margin-top:2px; } .nav-dropdown a{ display:block; padding:9px 12px; border-radius:6px; font-size:0.88rem; color:var(--muted); font-weight:400; } .nav-dropdown a:hover, .nav-dropdown a:focus-visible{ background:var(--surface-2); color:var(--text); } @media (max-width:860px){ .nav-caret{ display:inline-flex; align-items:center; justify-content:center; } .nav-dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:4px 0 4px 14px; max-height:0; overflow:hidden; } .nav-item.open .nav-dropdown{ max-height:400px; } } .btn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#0B0C0C; font-weight:500; font-size:14px; padding:11px 18px; border-radius:100px; border:none; cursor:pointer; transition:background 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease; } .btn:hover{ background:var(--accent-light); transform:translateY(-2px); box-shadow:0 10px 24px -8px var(--accent-dim); } .btn:active{ transform:translateY(0); } .btn svg{ width:14px; height:14px; transition:transform 0.25s ease; } .btn:hover svg{ transform:translateX(3px); } .btn-ghost{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--text); padding:11px 18px; border-radius:100px; background:var(--glass-4); border:1px solid var(--glass-4-border); backdrop-filter:blur(var(--glass-4-blur)); -webkit-backdrop-filter:blur(var(--glass-4-blur)); box-shadow:var(--glass-highlight); transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1); } .btn-ghost:hover{ border-color:var(--local-accent, var(--accent)); background:var(--accent-dim); transform:translateY(-2px); } /* ---------- theme toggle ---------- */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; margin-left:6px; cursor:pointer; background:var(--glass-3); border:1px solid var(--glass-3-border); backdrop-filter:blur(var(--glass-3-blur)); -webkit-backdrop-filter:blur(var(--glass-3-blur)); color:var(--muted); transition:color 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1); } .theme-toggle:hover{ color:var(--text); border-color:var(--accent-light); transform:rotate(14deg); } .theme-toggle svg{ width:16px; height:16px; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:block; } /* ---------- page hero (sub-pages) ---------- */ .page-hero{ position:relative; z-index:0; padding:72px 0 56px; border-bottom:1px solid var(--line); overflow:hidden; } .page-hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; opacity:0.92; filter:var(--image-filter); } .page-hero-scrim{ position:absolute; inset:0; z-index:-2; background: linear-gradient(100deg, var(--bg) 0%, rgba(var(--scrim-rgb),0.92) 32%, rgba(var(--scrim-rgb),0.45) 54%, rgba(var(--scrim-rgb),0.08) 70%, transparent 100%), linear-gradient(180deg, transparent 60%, var(--bg) 100%); } @media (max-width:860px){ .page-hero-scrim{ background: linear-gradient(180deg, rgba(var(--scrim-rgb),0.2) 0%, rgba(var(--scrim-rgb),0.55) 42%, var(--bg) 85%); } } .page-hero-bg{ position:absolute; inset:0; z-index:-1; background: radial-gradient(ellipse 800px 420px at 85% 0%, var(--local-accent-dim, var(--accent-dim)), transparent 65%); opacity:0.9; } .page-hero-inner{ position:relative; z-index:1; max-width:960px; background:var(--glass-2); border:1px solid var(--glass-2-border); border-radius:18px; backdrop-filter:blur(var(--glass-2-blur)); -webkit-backdrop-filter:blur(var(--glass-2-blur)); box-shadow:var(--glass-shadow), var(--glass-highlight); padding:32px 36px; } @media (max-width:700px){ .page-hero-inner{ padding:24px 22px; border-radius:14px; } } .page-hero-caption{ margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--faint); } .page-title{ font-size:clamp(2.1rem,4.4vw,3.2rem); margin-top:16px; max-width:18ch; line-height:1.04; } .page-lead{ margin-top:20px; max-width:62ch; color:var(--muted); font-size:1.05rem; font-weight:300; } .crumb{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--faint); } .crumb a:hover{ color:var(--muted); } /* ---------- hero (home) ---------- */ .hero{ position:relative; z-index:0; padding:96px 0 72px; overflow:hidden; } .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; opacity:0.9; filter:var(--image-filter); /*