/* ========================================================= Single-source theme tokens. All colour + typography custom properties are declared here on , overridden only by [data-brightness] and [data-theme]. Every component reads them from the cascade — NEVER redefine these tokens inside a component's scoped CSS, or you'll leak the wrong theme (like the acid-green nav underline in light mode). Component-specific tokens (e.g. --haze, --graphite, --ink-2, --signal-deep) can stay local — they're not shared. ========================================================= */ html { /* Fix for Windows double-scrollbar (issue #9): keeping height: 100% on only (not body) ensures stays a non-scroll-container so natural document scroll handles vertical scrolling. See the comment above `body { overflow-x: hidden; }` for full details. */ height: 100%; /* sticky site-header height — JS refines this at runtime, but keeping a sensible fallback here avoids the first-paint flash where scroll containers sit below the header thinking it's 0px tall. */ --site-header-h: 60px; /* fonts */ --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* dark (default) */ --ink: #0B0B0D; --bone: #EDE7D9; --bone-rgb: 237, 231, 217; --bone-dim: rgba(237, 231, 217, 0.62); --bone-faint: rgba(237, 231, 217, 0.15); /* acid (default theme) */ --signal: #D8FF3F; --signal-rgb: 216, 255, 63; --plasma: #FF4FA2; --plasma-rgb: 255, 79, 162; } /* --- brightness: light --------------------------------------- */ html[data-brightness="light"] { --ink: #FAFAFA; --bone: #18181B; --bone-rgb: 24, 24, 27; /* Light-mode dim/faint values are bumped vs dark mode: - dim from 0.55 → 0.72 (≈7.4:1 contrast vs white, was ~5.7:1) - faint from 0.10 → 0.22 (visible card/dividers; was ghosting) Dark mode keeps its softer values because dim ink-on-bone already reads OK against the deep background. */ --bone-dim: rgba(24, 24, 27, 0.72); --bone-faint: rgba(24, 24, 27, 0.22); } /* --- theme: acid (needs a darker green in light mode for contrast) --- */ html[data-brightness="light"][data-theme="acid"], html[data-brightness="light"]:not([data-theme="azure"]):not([data-theme="pink"]) { --signal: #1A8B4A; --signal-rgb: 26, 139, 74; } /* --- theme: azure ------------------------------------------- */ html[data-theme="azure"] { --signal: #2097D0; --signal-rgb: 32, 151, 208; --plasma: #FF8A3D; --plasma-rgb: 255, 138, 61; } /* --- theme: pink -------------------------------------------- */ html[data-theme="pink"] { --signal: #FF4FA2; --signal-rgb: 255, 79, 162; --plasma: #39E5C7; --plasma-rgb: 57, 229, 199; } /* ========================================================= Document base ========================================================= */ html, body { margin: 0; padding: 0; background: var(--ink); color: var(--bone); overscroll-behavior-x: none; } /* Two scrollbars on Windows (issue #9): `overflow-x: hidden` forces overflow-y to compute to `auto`, turning the element into an independent scroll container. When BOTH and are scroll containers AND both have `height: 100%`, each gets its own vertical scrollbar on platforms with classic (non-overlay) scrollbars. The fix is to keep horizontal clipping on only (so stays a non-scroll-container and natural document scroll handles vertical), and not constrain 's height — grows with its content inside the html viewport box. */ body { overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } h1:focus { outline: none; } /* ========================================================= Grain overlay — used by on every page. The SVG turbulence noise is identical site-wide, so it lives here once instead of being inlined in seven scoped CSS files. Pages tune intensity via the inline --grain-opacity variable; light mode forces a much lower value so the grain stays subtle on paper-white backgrounds. ========================================================= */ /* Grain: feTurbulence produces noisy R/G/B per pixel; the matrix below collapses that to a single grayscale value (luminance avg) per channel, so each pixel is a shade of gray between 0 and 1. Combined with `mix-blend-mode: overlay` and a meaningful opacity, the bright pixels lift dark backgrounds and the dark pixels darken light backgrounds — proper film-grain behaviour both ways. The old version had RGB zeroed (uniform black) which on a near-black background made zero contribution. */ .grain-overlay { position: absolute; inset: -4%; pointer-events: none; opacity: var(--grain-opacity, 0.4); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } html[data-brightness="light"] .grain-overlay { /* On light backgrounds the same overlay grain reads stronger, so we dial it down — but keep it visible (the previous 0.04 was almost imperceptible). */ opacity: 0.18; } /* Per-service accent: pages emit `--accent-dark` and `--accent-light` inline; the cascade picks the right one based on brightness. We intentionally don't inline `--accent` itself — that would outrank these rules via inline-style specificity and the swap would never take effect. */ [style*="--accent-dark"] { --accent: var(--accent-dark); } html[data-brightness="light"] [style*="--accent-light"] { --accent: var(--accent-light); } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ========================================================= Cross-component light-mode DOM tweaks (Kept global because Blazor scoped CSS can't reach ancestor [data-brightness] on — these target descendant elements or images whose filters depend on brightness.) ========================================================= */ /* OpenAI logo: dark-mode inverts it; keep original on light */ html[data-brightness="light"] .pc-mcp-brand.is-openai img, html[data-brightness="light"] .pd__spotlight-host .client-pill.is-openai img { filter: none; } /* --- Site header: light-mode look -------------------------- */ html[data-brightness="light"] .site-header { background: rgba(250, 250, 250, 0.88); border-bottom-color: rgba(24, 24, 27, 0.08); color: rgba(24, 24, 27, 0.55); } html[data-brightness="light"] .site-header .hero__wordmark-img { filter: none; } html[data-brightness="light"] .site-header .hero__nav a { color: rgba(24, 24, 27, 0.5); } html[data-brightness="light"] .site-header .hero__nav a:hover, html[data-brightness="light"] .site-header .hero__nav a.is-active { color: #18181B; } html[data-brightness="light"] .site-header .hero__mode, html[data-brightness="light"] .site-header .hero__bright-btn { color: rgba(24, 24, 27, 0.4); } html[data-brightness="light"] .site-header .hero__mode:hover, html[data-brightness="light"] .site-header .hero__bright-btn:hover { color: #18181B; } /* ========================================================= Service art — grainy textured gradient tiles used on the Services overview, ServiceDetail, and anywhere an accent visual is useful. Cursor tracking is wired up by initAllServiceArt() in wwwroot/js/hero-neural.js. Lives in app.css (global) rather than Services.razor.css (scoped) so the same class works across pages. ========================================================= */ @property --glow-strength { syntax: ""; inherits: false; initial-value: 0; } .service-art { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; isolation: isolate; --tx: 0px; --ty: 0px; --glow-strength: 0; /* accent-tinted dark base — per-service rules below compose on top */ background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--signal)) 22%, #090611), color-mix(in srgb, var(--accent, var(--signal)) 6%, #090611) 100%); transition: filter 0.5s ease, --glow-strength 0.4s ease; } /* --- 01 · AI : centred orb with halo ring ----------------- */ .service-art--ai-implementation-adoption { background: radial-gradient(circle at 50% 50%, transparent 34%, color-mix(in srgb, var(--accent) 50%, transparent) 40%, color-mix(in srgb, var(--accent) 18%, transparent) 47%, transparent 55%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 95%, #fff) 0%, color-mix(in srgb, var(--accent) 70%, transparent) 14%, color-mix(in srgb, var(--accent) 25%, transparent) 30%, transparent 52%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #090611), color-mix(in srgb, var(--accent) 6%, #090611) 100%); } /* --- 02 · AI dev onboarding : woven mesh ------------------ */ .service-art--ai-developer-onboarding { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 1px, transparent 1px 14px), radial-gradient(circle at 30% 35%, color-mix(in srgb, var(--accent) 95%, #fff) 0%, color-mix(in srgb, var(--accent) 45%, transparent) 18%, transparent 48%), radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--accent) 70%, transparent) 0%, color-mix(in srgb, var(--accent) 25%, transparent) 22%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, #0c0820), color-mix(in srgb, var(--accent) 5%, #0c0820) 100%); } /* --- 03 · Digital product : diagonal split --------------- */ .service-art--digital-product-development { background: radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--accent) 100%, #fff) 0%, color-mix(in srgb, var(--accent) 55%, transparent) 30%, transparent 58%), radial-gradient(circle at 95% 95%, color-mix(in srgb, var(--accent) 75%, #000) 0%, color-mix(in srgb, var(--accent) 25%, transparent) 42%, transparent 72%), linear-gradient(135deg, transparent 42%, color-mix(in srgb, var(--accent) 18%, transparent) 50%, transparent 58%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #090611), color-mix(in srgb, var(--accent) 6%, #090611) 100%); } /* --- 04 · Azure : horizontal strata ---------------------- */ .service-art--microsoft-azure { background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 85%, #fff) 0%, color-mix(in srgb, var(--accent) 45%, transparent) 22%, transparent 48%), linear-gradient(to top, color-mix(in srgb, var(--accent) 70%, #000) 0%, color-mix(in srgb, var(--accent) 25%, transparent) 32%, transparent 60%), radial-gradient(ellipse 130% 28% at 50% 52%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, #090611), color-mix(in srgb, var(--accent) 10%, #090611) 100%); } /* --- 05 · Consultations : sun on horizon ----------------- */ .service-art--consultations-mentoring { background: radial-gradient(ellipse 95% 75% at 50% 108%, color-mix(in srgb, var(--accent) 100%, #fff) 0%, color-mix(in srgb, var(--accent) 80%, transparent) 18%, color-mix(in srgb, var(--accent) 30%, transparent) 48%, transparent 78%), linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 100%), linear-gradient(200deg, color-mix(in srgb, var(--accent) 20%, #110806), color-mix(in srgb, var(--accent) 6%, #110806) 100%); } /* Film-grain overlay — identical across services. */ .service-art::before { content: ""; position: absolute; inset: -4%; z-index: 3; pointer-events: none; opacity: 0.6; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-size: 200px 200px, 260px 260px; } /* Cursor-tracked highlight — GPU-composited translate3d, smoothed from JS (hero-neural.js / initAllServiceArt). */ .service-art::after { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 2; pointer-events: none; transform: translate3d(var(--tx), var(--ty), 0); will-change: transform; opacity: calc(0.55 + var(--glow-strength, 0) * 0.45); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 95%, #fff) 0%, color-mix(in srgb, var(--accent) 55%, transparent) 14%, color-mix(in srgb, var(--accent) 20%, transparent) 28%, transparent 44%); mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { .service-art { transition: none; } .service-art::after { transform: none !important; } } /* ========================================================= Mobile nav — hamburger + slide-down drawer Used by both (subpages) and 's standalone hero topbar. Lives in app.css instead of a scoped CSS file so the same classes work in both locations without duplication. The drawer must be a SIBLING of the header element, not a child: the header sets `backdrop-filter`, which creates a containing block and would clip a `position: fixed` drawer to the header's box. ========================================================= */ .site-header__burger { display: none; width: 40px; height: 40px; padding: 8px; margin-left: 0.25rem; border: none; background: transparent; color: var(--bone); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .site-header__burger:focus-visible { outline: 1px solid var(--bone-dim); outline-offset: 2px; border-radius: 4px; } .site-header__burger-bar { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.2s ease; } .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) { opacity: 0; } .site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .site-header__mobile { display: none; } @media (min-width: 761px) { .site-header__burger { display: none !important; } .site-header__mobile { display: none !important; } } @media (max-width: 760px) { .site-header__burger { display: inline-flex; justify-self: end; } .site-header__mobile { display: block; position: fixed; inset: var(--mobile-nav-top, var(--site-header-h, 64px)) 0 0 0; z-index: 90; background: rgba(11, 11, 13, 0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--bone-faint); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.7, 0, 0.3, 1); } html[data-brightness="light"] .site-header__mobile { background: rgba(250, 250, 250, 0.96); } .site-header__mobile[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; } /* No-JS fallback: keeps the drawer collapsed until the toggle script runs and removes the attribute. */ .site-header__mobile[hidden] { display: none; } .site-header__mobile-nav { display: flex; flex-direction: column; padding: 1.25rem clamp(1.25rem, 5vw, 2rem) 2rem; max-height: calc(100svh - var(--mobile-nav-top, var(--site-header-h, 64px))); overflow-y: auto; font-family: var(--font-mono); text-transform: uppercase; color: var(--bone-dim); } .site-header__mobile-nav a { font-size: 1rem; letter-spacing: 0.14em; padding: 0.95rem 0; border-bottom: 1px solid var(--bone-faint); color: var(--bone-dim); text-decoration: none; transition: color 0.25s ease; } .site-header__mobile-nav a:hover, .site-header__mobile-nav a:focus-visible, .site-header__mobile-nav a.is-active { color: var(--bone); outline: none; } .site-header__mobile-nav a:last-child { border-bottom: none; } /* --- meta (mode / brightness / theme) inside the drawer ----- */ .site-header__mobile-meta { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem clamp(1.25rem, 5vw, 2rem) 2rem; border-top: 1px solid var(--bone-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--bone-dim); } .site-header__mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; } .site-header__mobile-row-label { font-size: 0.78rem; color: var(--bone-dim); } /* The .hero__mode / .hero__bright-btn / .hero__theme styles are defined in the .hero / .site-header scoped CSS, so they don't reach the drawer (sibling of header, no .hero ancestor on subpages). Re-declare the visual basics here for the drawer and bump the tap-target sizes. */ .site-header__mobile-meta .hero__modes, .site-header__mobile-meta .hero__brightness, .site-header__mobile-meta .hero__themes { display: inline-flex; align-items: center; gap: 0.65rem; } .site-header__mobile-meta .hero__mode, .site-header__mobile-meta .hero__bright-btn { width: 32px; height: 32px; padding: 6px; border: none; border-radius: 6px; background: transparent; color: var(--bone-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.25s ease, box-shadow 0.25s ease; } .site-header__mobile-meta .hero__mode svg, .site-header__mobile-meta .hero__bright-btn svg { width: 100%; height: 100%; } .site-header__mobile-meta .hero__mode:hover, .site-header__mobile-meta .hero__bright-btn:hover { color: var(--bone); } .site-header__mobile-meta .hero__theme { width: 22px; height: 22px; padding: 0; border: none; border-radius: 999px; background: transparent; cursor: pointer; position: relative; } .site-header__mobile-meta .hero__theme::before { content: ""; position: absolute; inset: 1px; border-radius: 999px; background: currentColor; } .site-header__mobile-meta .hero__theme.is-acid { color: #D8FF3F; } .site-header__mobile-meta .hero__theme.is-azure { color: #2097D0; } .site-header__mobile-meta .hero__theme.is-pink { color: #FF4FA2; } html[data-brightness="light"] .site-header__mobile-meta .hero__theme.is-acid { color: #1A8B4A; } /* Active selection rings — match the SiteHeader pattern */ html[data-brightness="dark"] .site-header__mobile-meta .hero__bright-btn.is-dark, html[data-brightness="light"] .site-header__mobile-meta .hero__bright-btn.is-light, html:not([data-brightness="light"]) .site-header__mobile-meta .hero__bright-btn.is-dark { color: var(--signal); box-shadow: 0 0 0 1.2px var(--signal), 0 0 8px 0 color-mix(in srgb, var(--signal) 25%, transparent); } html[data-theme="acid"] .site-header__mobile-meta .hero__theme.is-acid, html[data-theme="azure"] .site-header__mobile-meta .hero__theme.is-azure, html[data-theme="pink"] .site-header__mobile-meta .hero__theme.is-pink, html:not([data-theme="azure"]):not([data-theme="pink"]) .site-header__mobile-meta .hero__theme.is-acid { box-shadow: 0 0 0 1.5px var(--signal), 0 0 8px 0 color-mix(in srgb, var(--signal) 25%, transparent); } /* Active mode highlight — only used on the home page drawer. The hero canvas sets data-mode on the .hero element; we mirror that to via the mode-pick handler too, so reading from works on both home and elsewhere (defensive). */ .hero[data-mode="neural"] .site-header__mobile-meta .hero__mode.is-neural, .hero[data-mode="swarm"] .site-header__mobile-meta .hero__mode.is-swarm, .hero[data-mode="garden"] .site-header__mobile-meta .hero__mode.is-garden { color: var(--signal); box-shadow: 0 0 0 1.2px var(--signal), 0 0 8px 0 color-mix(in srgb, var(--signal) 25%, transparent); } body.has-mobile-nav-open { overflow: hidden; } }