/* ============================================================ MICROCELIUM DESIGN SYSTEM Brand: Cyan → Lavender → Magenta Deep ocean darkness with bioluminescent mycelial light ============================================================ */ /* 1. Custom Properties ------------------------------------------------------------ */ :root { --bg-abyss: #030712; --bg-deep: #0a0f1e; --bg-mid: #111827; --bg-surface: #162032; --bg-surface-hover: #1e2d42; --bg-elevated: #1a2940; --bg-code: #0d1117; /* Brand palette: cyan → lavender → magenta */ --accent: #00e5e3; --accent-dim: #00c4c2; --accent-glow: rgba(0, 229, 227, 0.12); --accent-glow-md: rgba(0, 229, 227, 0.25); --accent-glow-strong: rgba(0, 229, 227, 0.4); --accent-alt: #d3c5ff; --accent-alt-dim: #b8a4ff; --accent-alt-glow: rgba(211, 197, 255, 0.15); --accent-pop: #f500ff; --accent-pop-glow: rgba(245, 0, 255, 0.15); --text-bright: #f0f4f8; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #6d7d94; --text-dim: #5e6d82; --border: #1e293b; --border-light: #334155; /* Status */ --success: #4ade80; /* Surface tints used on cards, diagrams, dashed borders. Extracted 2026-04-23 from ~70 hardcoded inline instances so the light-mode variant can re-declare them in one place. */ --accent-bg-tint: rgba(0, 229, 227, 0.04); --accent-alt-bg-tint: rgba(211, 197, 255, 0.04); --accent-alt-border-dashed: rgba(211, 197, 255, 0.5); /* Focus ring — shared across interactive elements. Uses accent glow for a halo instead of a hard 2px outline so focus integrates with the brand rather than fighting it. AA-compliant at 3:1 against all surfaces because it layers over the existing border. */ --focus-ring: 0 0 0 3px var(--accent-glow-md); --focus-ring-offset: 2px; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Outfit', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; --container: 1200px; --container-narrow: 800px; --container-wide: 1400px; --nav-height: 4rem; --transition-fast: 150ms ease; --transition: 300ms ease; --transition-slow: 500ms ease; --radius-sm: 0.375rem; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; } /* ------------------------------------------------------------ Light theme overrides. Applied when . All colours live here so the rest of the stylesheet stays theme-agnostic. Accent hues shift from cyan-on-black to a darker teal/violet pair that meet WCAG 3:1 on white for large text (stat numbers, headline accents). Glow alphas nudged up slightly because white surfaces absorb less light. ------------------------------------------------------------ */ [data-theme="light"] { /* Backgrounds — tiered cool whites, lightest at the top */ --bg-abyss: #ffffff; --bg-deep: #f7f8fc; --bg-mid: #eef1f7; --bg-surface: #e8ecf3; --bg-surface-hover: #dde2eb; --bg-elevated: #ffffff; --bg-code: #f1f4f9; /* Accents — cyan darkened to teal for contrast; lavender to bold violet */ --accent: #0a8a89; --accent-dim: #086d6c; --accent-glow: rgba(10, 138, 137, 0.10); --accent-glow-md: rgba(10, 138, 137, 0.22); --accent-glow-strong: rgba(10, 138, 137, 0.38); --accent-alt: #5a3fd1; --accent-alt-dim: #432ea5; --accent-alt-glow: rgba(90, 63, 209, 0.12); --accent-pop: #b500c3; --accent-pop-glow: rgba(181, 0, 195, 0.12); /* Text — inverted scale, dark on light */ --text-bright: #0b1220; --text-primary: #1b2636; --text-secondary: #55667a; --text-muted: #6f7d91; --text-dim: #8c98a9; /* Borders — soft cool greys */ --border: #d8dde6; --border-light: #c1c8d3; /* Status — darker green for contrast on white */ --success: #1fa856; /* Surface tints — nudged alphas for readable tint on light surface */ --accent-bg-tint: rgba(10, 138, 137, 0.06); --accent-alt-bg-tint: rgba(90, 63, 209, 0.06); --accent-alt-border-dashed: rgba(90, 63, 209, 0.4); } /* Light-theme targeted overrides for rules that hardcode dark rgba() values rather than use the var system. These are the rules that'd otherwise stay dark-blue when the page flips to light. Everything else picks up the var block above automatically. */ [data-theme="light"] .nav.scrolled { background: rgba(255, 255, 255, 0.82); } [data-theme="light"] .hero-overlay { background: radial-gradient(ellipse 60% 90% at 20% 50%, rgba(255, 255, 255, 0.75) 0%, transparent 65%), linear-gradient(180deg, transparent 70%, var(--bg-abyss) 100%); } [data-theme="light"] .use-case-tabs { background: rgba(255, 255, 255, 0.92); } [data-theme="light"] tr:hover td { /* Table row hover — inverted (dark overlay on light instead of white on dark). Bumped from 0.025 to 0.045 after review feedback that the tint read as near-invisible against the section bg. */ background: rgba(0, 0, 0, 0.045); } [data-theme="light"] .pyramid-layer .layer-num { background: rgba(255, 255, 255, 0.65); } [data-theme="light"] .pyramid .below-water .layer-num { background: rgba(255, 255, 255, 0.75); } /* Tech icons are black-on-transparent SVGs. In dark mode the filter inverts to white; in light mode keep them black. */ [data-theme="light"] .tech-icon, [data-theme="light"] .tech-icon-lg { filter: brightness(0) opacity(0.75); } [data-theme="light"] tr:hover .tech-icon { filter: brightness(0) opacity(1); } /* Capability icons have stroke="#00e5e3" baked in (the dark-mode accent). In light mode the bright cyan washes out against the pale tile, so darken it via filter to approximate the light-mode accent teal. */ [data-theme="light"] .card-icon img { filter: brightness(0.45) saturate(1.3); } [data-theme="light"] .tech-icon-cloud--mono { filter: brightness(0) opacity(0.95); } [data-theme="light"] .tech-icon-cloud--mono:hover { filter: brightness(0) opacity(1); } /* Logo — light theme ships a dedicated variant (logo-primary-dark.svg) with a near-black wordmark that reads cleanly on white. The CSS swap relies on the img's src being rewritten via the sibling rule below — the brightness-filter MVP from the first light-mode pass has been removed now that a proper asset exists. */ [data-theme="light"] .nav-logo-img { content: url("../img/logo-primary-dark.svg"); } /* Brain canvas in light mode. The Three.js scene bakes a near-black background colour (config.palette.background = #030712), which on a white page would show as a dark rectangle around the brain shape. Filter trick: invert(1) flips luminance so the bg near-whitens; hue-rotate(180deg) re-rolls the hues so the cyan/lavender accents survive as cyan/lavender rather than inverting to red/green. Net effect: brain mesh on a near-white backdrop with brand accents roughly intact. Proper fix is to re-palette / transparent-canvas the brain module; this is the CSS-only MVP. */ [data-theme="light"] .hero-brain canvas { filter: invert(1) hue-rotate(180deg); } /* Theme toggle — small icon button in the nav. Sized to a 2.25rem (36px) hit area which is the smallest tap target that still reads as a utility toggle; on mobile the nav-links panel gives it full gap-xl spacing from its neighbours so the 36px is unambiguously reachable. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; margin-left: var(--space-sm); background: transparent; border: 1px solid var(--border-light); border-radius: var(--radius); color: var(--text-secondary); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); flex-shrink: 0; } .theme-toggle:hover { color: var(--text-bright); border-color: var(--accent); } .theme-toggle svg { display: block; width: 1rem; height: 1rem; } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } [data-theme="light"] .theme-toggle__sun { display: block; } [data-theme="light"] .theme-toggle__moon { display: none; } /* 2. Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-height); } /* Universal focus treatment. Uses :focus-visible so keyboard users see the ring but mouse users don't get a ring on click. Added 2026-04-23 as part of the WCAG AA pass — previously only pyramid layers and form inputs had bespoke focus treatment; everything else fell back to the browser default, which the grain overlay could obscure. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, .btn:focus-visible, .card:focus-visible, .card-flat:focus-visible, .card-pkg:focus-visible, .theme-toggle:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--focus-ring-offset); box-shadow: var(--focus-ring); } /* Form inputs keep their bespoke border-colour focus because the outline would sit outside the field and read as a stray ring; the existing border-accent + 3px glow is already AA-compliant. */ .form-input:focus-visible, .form-textarea:focus-visible { outline: none; } /* Skip-link — the one thing a keyboard user needs most. Hidden off-screen until focused, then slides into the top-left corner. Added 2026-04-23. */ .skip-link { position: absolute; top: var(--space-sm); left: var(--space-sm); padding: 0.5rem 1rem; background: var(--accent); color: var(--bg-abyss); font-weight: 600; border-radius: var(--radius); z-index: 10000; transform: translateY(-200%); transition: transform var(--transition-fast); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); color: var(--bg-abyss); outline: 2px solid var(--text-bright); outline-offset: 2px; } /* Reduced-motion global guard. Individual components with long/looping transitions (pyramid ticker, brain canvas) have their own opt-outs; this kills the rest — reveal animations, hover transforms, smooth scroll. Added 2026-04-23 to raise WCAG compliance beyond the partial coverage in §14. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } body { font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.7; color: var(--text-primary); background: var(--bg-abyss); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-alt); } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; color: inherit; border: none; background: none; } button { cursor: pointer; } /* 3. Typography ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6, .display-xl, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--text-bright); letter-spacing: -0.01em; } .display-xl { font-size: clamp(2.75rem, 5.5vw, 5rem); } .display { font-size: clamp(2.25rem, 4.5vw, 3.75rem); } h1 { font-size: clamp(2rem, 3.5vw, 3rem); } h2 { font-size: clamp(1.625rem, 2.8vw, 2.375rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); } h4 { font-size: 1.125rem; } .text-lg { font-size: 1.25rem; line-height: 1.6; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } .text-mono { font-family: var(--font-mono); font-size: 0.9em; } .text-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-alt), var(--accent-pop)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-bright { color: var(--text-bright); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .text-alt { color: var(--accent-alt); } .text-pop { color: var(--accent-pop); } .text-center { text-align: center; } .lead { font-size: 1.25rem; line-height: 1.65; color: var(--text-secondary); max-width: 52em; } .section-label { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); } .section-label::before { content: ''; width: 1.5rem; height: 1px; background: var(--accent); } /* 4. Layout ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-xl); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-xl); } .container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-xl); } .grid { display: grid; gap: var(--space-xl); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-2-1 { grid-template-columns: 2fr 1fr; } .grid-1-2 { grid-template-columns: 1fr 2fr; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .gap-xl { gap: var(--space-xl); } .gap-2xl { gap: var(--space-2xl); } /* 5. Navigation ------------------------------------------------------------ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 1000; transition: background var(--transition), box-shadow var(--transition); } .nav.scrolled { background: rgba(10, 15, 30, 0.85); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: 0 1px 0 var(--border); } /* Suppress backdrop-filter while the mobile menu is open. backdrop-filter on an ancestor creates a containing block for position: fixed descendants, which otherwise pins the mobile menu to the nav's height (~5rem) instead of the full viewport. body.nav-open is toggled in main.js. */ body.nav-open .nav, body.nav-open .nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-xl); height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; text-decoration: none; z-index: 10; } .nav-logo-img { height: 1.75rem; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: var(--space-lg); } .nav-links a { font-size: 0.9375rem; font-weight: 400; color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); position: relative; } .nav-links a:hover, .nav-links a.active { color: var(--text-bright); } .nav-links a.active::after { content: ''; position: absolute; bottom: -0.25rem; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 1px; } .nav-cta { padding: 0.5rem 1.25rem !important; background: var(--accent) !important; color: var(--bg-abyss) !important; border-radius: var(--radius) !important; font-weight: 500 !important; font-size: 0.875rem !important; transition: background var(--transition-fast), transform var(--transition-fast) !important; } .nav-cta:hover { background: var(--accent-alt) !important; transform: translateY(-1px); } .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; z-index: 10; } .nav-toggle span { width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: var(--transition); } .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* 6. Hero ------------------------------------------------------------ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-height); overflow: hidden; } .hero-short { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-5xl)); padding-bottom: var(--space-5xl); } .hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, var(--bg-abyss) 70%), linear-gradient(180deg, transparent 60%, var(--bg-abyss) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 50rem; } .hero-content .display-xl { margin-bottom: var(--space-lg); } .hero-short .display { margin-bottom: var(--space-xl); } .hero-content .lead { margin-bottom: var(--space-2xl); } .hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; } /* Hero brain canvas: covers the whole hero section so bursts + pulses have no visible boundary. Brain itself is offset to the right via sceneOffset so the left column stays readable for the text. No-WebGL2 fallback: the SVG silhouette renders as a background-image on .hero-brain itself. When the Three.js canvas mounts (via onReady → .is-ready), the canvas sits on top and covers the silhouette; when WebGL2 is unavailable, the fallback is already visible so the hero is never blank. See PROGRESS.md "Parked: brain- hero performance" for the history of this gap. */ .hero-brain { position: absolute; inset: 0; z-index: 1; /* above .hero background, below .hero-overlay */ opacity: 1; /* fallback visible immediately on no-WebGL2 */ transition: opacity 600ms ease; overflow: hidden; /* canvas clips to hero bounds at the outermost edge */ pointer-events: auto; /* receives pointer events for the warp gravity well */ background-image: url('../assets/brain/brain-silhouette.svg'); background-repeat: no-repeat; background-position: right 5% center; background-size: min(680px, 90%) auto; } /* When the WebGL2 canvas is ready, hide the silhouette under it. The is-ready class is set from onReady in home.html. */ .hero-brain.is-ready { background-image: none; } .hero-brain canvas { opacity: 0; transition: opacity 600ms ease; } .hero-brain.is-ready canvas { opacity: 1; } @media (max-width: 900px) { .hero-brain { background-position: center bottom; background-size: min(520px, 90%) auto; } } /* Re-layer the hero so text sits above the brain canvas. */ .hero-overlay { z-index: 2; /* Darken the left side where the text sits so it stays legible against the moving visual. */ background: radial-gradient(ellipse 60% 90% at 20% 50%, rgba(3, 7, 18, 0.85) 0%, transparent 65%), linear-gradient(180deg, transparent 70%, var(--bg-abyss) 100%); pointer-events: none; } .hero-split { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .hero-content { position: relative; z-index: 3; max-width: 34rem; } .hero-content .display-xl { margin-bottom: var(--space-lg); } .hero-content .lead { margin-bottom: var(--space-2xl); } @media (max-width: 900px) { .hero-brain { /* Mobile: pin brain to the lower half so the text area at top stays crisp and the brain reads below it. */ top: auto; height: 60vh; } .hero-overlay { background: radial-gradient(ellipse 100% 55% at 50% 15%, rgba(3, 7, 18, 0.88) 0%, transparent 60%), linear-gradient(180deg, transparent 70%, var(--bg-abyss) 100%); } } /* 7. Sections ------------------------------------------------------------ */ .section { padding: var(--space-5xl) 0; position: relative; } .section-deep { background: var(--bg-deep); } .section-mid { background: var(--bg-mid); } .section-abyss { background: var(--bg-abyss); } /* Content spacing within sections */ .section h2 { margin-bottom: var(--space-lg); } .section .lead, .section-deep .lead, .section-mid .lead, .section-abyss .lead { margin-bottom: var(--space-2xl); } /* Content flow: spacing after grids, feature-grids, code blocks */ .grid + p, .grid + h3, .grid + h4 { margin-top: var(--space-2xl); } .feature-grid + p, .feature-grid + h3, .feature-grid + h4 { margin-top: var(--space-2xl); } .code-block + .grid, .code-block + p { margin-top: var(--space-2xl); } .section-header { margin-bottom: var(--space-3xl); } .section-header h2 { margin-bottom: var(--space-md); } .section-header .lead { margin-top: var(--space-sm); } /* 8. Cards ------------------------------------------------------------ */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2xl); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .card:hover { border-color: var(--border-light); box-shadow: 0 0 30px var(--accent-glow); transform: translateY(-2px); } /* Block-level anchor wrapper around a .card — no underline, no anchor colour inheritance, but the whole card region clicks through. */ .card-link { display: block; text-decoration: none; color: inherit; } .card-link:hover { text-decoration: none; } .card-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 1.5rem; margin-bottom: var(--space-lg); background: var(--accent-glow); border: 1px solid rgba(0, 229, 227, 0.2); } .card-icon.cyan { background: var(--accent-alt-glow); border-color: rgba(211, 197, 255, 0.2); } .card-icon img { width: 1.5rem; height: 1.5rem; display: block; } .card h3, .card h4 { margin-bottom: var(--space-sm); } .card p { color: var(--text-secondary); } .card ul, .card-flat ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); } .card ul li, .card-flat ul li { position: relative; padding-left: 1.25rem; color: var(--text-secondary); font-size: 0.9375rem; } .card ul li::before, .card-flat ul li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .card-flat { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); transition: background var(--transition), border-color var(--transition); } .card-flat:hover { background: var(--bg-surface); border-color: var(--border-light); } .card-flat h3, .card-flat h4 { margin-bottom: var(--space-sm); } .card-flat p { color: var(--text-secondary); } .grid-1-2 > div > h4 { margin-bottom: var(--space-lg); } /* Package cards — compact variant for dense catalogue grids */ .card-pkg { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-lg); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; gap: var(--space-xs); } .card-pkg:hover { border-color: var(--border-light); box-shadow: 0 0 24px var(--accent-glow); transform: translateY(-1px); } .card-pkg .card-pkg__name { font-family: var(--font-mono, monospace); font-size: 0.95rem; font-weight: 600; color: var(--accent); word-break: break-word; } .card-pkg .card-pkg__desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; margin: 0; } /* Product-stack — the "Your Product / Microcelium / Cloud" sandwich on the home Where-Microcelium-Fits section. Neutral layers above/below the cyan-accented middle layer. Uses vars so both themes adapt. */ .product-stack { max-width: 640px; margin: var(--space-2xl) auto 0; } .product-stack__layer { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.5rem 2rem; text-align: center; margin-bottom: 2px; } .product-stack__layer--muted { opacity: 0.85; } .product-stack__layer--accent { background: var(--accent-bg-tint); border: 2px solid var(--accent); box-shadow: 0 0 30px var(--accent-glow), inset 0 0 30px var(--accent-glow); } .product-stack__tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; } .product-stack__layer--accent .product-stack__tag { opacity: 1; color: var(--accent); } .product-stack__title { margin: 0.25rem 0 0; font-weight: 500; } .product-stack__layer--accent .product-stack__title { font-weight: 600; color: var(--accent); } .product-stack__sub { margin: 0.4rem 0 0; font-size: 0.85rem; opacity: 0.7; } /* Plus divider between stacked titles — e.g. "UI toolkit & Agents" + "Headless platform infrastructure" on the Microcelium layer. */ .product-stack__plus { margin: 0.35rem 0; font-size: 1.1rem; line-height: 1; font-weight: 300; color: var(--accent); opacity: 0.6; } /* Roadmap variant — dashed outline, muted tone; used where a package is forthcoming */ .card-pkg--roadmap { background: transparent; border-style: dashed; border-color: var(--border-light); opacity: 0.82; } .card-pkg--roadmap:hover { opacity: 1; box-shadow: none; } .card-pkg--roadmap .card-pkg__name { color: var(--text-secondary); } .card-pkg__tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px solid var(--border-light); border-radius: 999px; color: var(--text-secondary); margin-left: auto; } .card-pkg__header { display: flex; align-items: center; gap: var(--space-sm); } .card-glow { position: relative; background: var(--bg-surface); border: 1px solid transparent; border-radius: var(--radius-lg); padding: var(--space-2xl); } .card-glow::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, var(--accent-glow-md), transparent, var(--accent-alt-glow)); z-index: -1; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; padding: 1px; } /* 9. Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.75rem 1.75rem; border-radius: var(--radius); font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; line-height: 1; transition: all var(--transition-fast); white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--bg-abyss); } .btn-primary:hover { background: #33f2f0; color: var(--bg-abyss); box-shadow: 0 0 24px var(--accent-glow-md); transform: translateY(-1px); } .btn-outline { border: 1px solid var(--border-light); color: var(--text-primary); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); } .btn-ghost { color: var(--text-secondary); padding: 0.5rem 1rem; } .btn-ghost:hover { color: var(--text-bright); } .btn-lg { padding: 1rem 2.25rem; font-size: 1rem; border-radius: var(--radius-lg); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.8125rem; } .btn-icon { font-size: 1.125em; line-height: 1; } /* 10. Badges ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.025em; border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-surface); } .badge-accent { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.025em; border: 1px solid rgba(0, 229, 227, 0.3); color: var(--accent); background: var(--accent-glow); } .badge-alt { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.025em; border: 1px solid rgba(211, 197, 255, 0.3); color: var(--accent-alt); background: var(--accent-alt-glow); } /* 11. Code Blocks ------------------------------------------------------------ */ pre { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); overflow-x: auto; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.65; color: var(--text-primary); } code { font-family: var(--font-mono); font-size: 0.875em; } :not(pre) > code { background: var(--bg-surface); padding: 0.15em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--accent); } .code-block { position: relative; } .code-block-label { position: absolute; top: 0; right: 0; padding: 0.375rem 0.875rem; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); background: var(--bg-surface); border-bottom-left-radius: var(--radius); border-top-right-radius: var(--radius-lg); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); } /* Syntax colors */ .token-keyword { color: var(--accent-alt); } .token-string { color: var(--accent); } .token-comment { color: var(--text-dim); font-style: italic; } .token-property { color: #c4b5fd; } .token-value { color: #fbbf24; } .token-punct { color: var(--text-muted); } /* 12. Tables ------------------------------------------------------------ */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); } table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } th { text-align: left; padding: 0.875rem 1.25rem; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--bg-surface); border-bottom: 1px solid var(--border); } td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(255,255,255,0.02); } td strong { color: var(--text-bright); font-weight: 600; } /* Table group header. A row with a single spanning cell that introduces a block of rows underneath. Used on /architecture tech-stack to turn 14 flat rows into 4 named decisions. */ .table-group-header th { background: var(--bg-surface-hover); color: var(--accent); font-size: 0.72rem; letter-spacing: 0.12em; padding: 1rem 1.25rem 0.6rem; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); } .table-group-header:first-child th { border-top: none; } /* 13. Waterline Divider ------------------------------------------------------------ */ .waterline { position: relative; height: 4rem; overflow: hidden; margin: var(--space-2xl) 0; } .waterline::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-alt) 20%, var(--accent) 50%, var(--accent-alt) 80%, transparent ); } .waterline::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 8px); height: 17px; background: linear-gradient(90deg, transparent, var(--accent-alt-glow) 20%, var(--accent-glow) 50%, var(--accent-alt-glow) 80%, transparent ); filter: blur(6px); } .waterline-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg-deep); padding: 0.25rem 1rem; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent-alt); z-index: 1; } /* Inline wave waterline variant */ .waterline-wave { position: relative; width: 100%; height: 80px; overflow: hidden; } .waterline-wave svg { position: absolute; bottom: 0; width: 100%; height: 100%; } /* 14. Pyramid Diagram ------------------------------------------------------------ */ .pyramid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2xl) 0; max-width: 700px; margin: 0 auto; } .pyramid-layer { display: flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; text-align: center; transition: all var(--transition); position: relative; cursor: default; } .pyramid-layer:hover, .pyramid-layer:focus-visible { transform: scaleX(1.02); z-index: 1; outline: none; } /* Interactive pyramid: each layer is ABSOLUTELY POSITIONED inside a full-width, fixed-height slot. The slot is a flex-column row with no layout dependency on its content. The layer's width animation happens entirely outside the document flow — sibling slots are completely untouched, so hovering one cannot cause any other to shift. */ .pyramid-interactive { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .pyramid-slot { position: relative; width: 100%; height: 2.75rem; /* matches .pyramid-layer rest height (padding + content) */ } .pyramid-interactive .pyramid-layer { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); } .pyramid-interactive .pyramid-layer { cursor: pointer; gap: var(--space-sm); transition: width 260ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease; } .pyramid-interactive .pyramid-layer__summary { display: inline-flex; align-items: center; white-space: nowrap; } .pyramid-interactive .pyramid-layer__detail { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); font-size: 0.8rem; transition: max-width 260ms ease 60ms, opacity 220ms ease 60ms, padding 220ms ease 60ms; padding-left: 0; } /* On hover/focus: layer takes its slot's full width and the detail text reveals inline to the right of the summary on a single line. Any text that doesn't fit is clipped with an ellipsis — the elegant read is worth more than fitting every component name. The layer stays inside its fixed-height slot so siblings never move. */ .pyramid-interactive .pyramid-layer:hover, .pyramid-interactive .pyramid-layer:focus-visible, .pyramid-interactive .pyramid-layer:focus-within { width: 100% !important; transform: translateX(-50%); z-index: 2; } .pyramid-interactive .pyramid-layer:hover .pyramid-layer__detail, .pyramid-interactive .pyramid-layer:focus-visible .pyramid-layer__detail, .pyramid-interactive .pyramid-layer:focus-within .pyramid-layer__detail { max-width: 100%; opacity: 0.9; padding-left: var(--space-sm); } /* Ticker: when JS detects the detail text overflows the available width on hover, it wraps the content in a two-copy track. The track scrolls left continuously while the layer is hovered/focused; on un-hover it snaps back because the animation only applies under the hover selector. Two identical copies + translate(-50%) makes the loop seamless. */ .pyramid-layer__detail.is-ticker { text-overflow: clip; } .pyramid-layer__detail-track { display: inline-flex; will-change: transform; } .pyramid-layer__detail-copy { display: inline-block; padding-right: 2rem; flex-shrink: 0; } .pyramid-interactive .pyramid-layer:hover .pyramid-layer__detail.is-ticker .pyramid-layer__detail-track, .pyramid-interactive .pyramid-layer:focus-visible .pyramid-layer__detail.is-ticker .pyramid-layer__detail-track, .pyramid-interactive .pyramid-layer:focus-within .pyramid-layer__detail.is-ticker .pyramid-layer__detail-track { animation: pyramid-ticker 14s linear infinite; } @keyframes pyramid-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .pyramid-interactive .pyramid-layer:hover .pyramid-layer__detail.is-ticker .pyramid-layer__detail-track, .pyramid-interactive .pyramid-layer:focus-visible .pyramid-layer__detail.is-ticker .pyramid-layer__detail-track, .pyramid-interactive .pyramid-layer:focus-within .pyramid-layer__detail.is-ticker .pyramid-layer__detail-track { animation: none; } } /* Accent tint on hovered layers so the active layer reads against the stack. */ .pyramid-interactive .pyramid-layer.above-water:hover, .pyramid-interactive .pyramid-layer.above-water:focus-visible { background-image: linear-gradient(90deg, rgba(0, 229, 227, 0.28), rgba(211, 197, 255, 0.2)); border-color: rgba(0, 229, 227, 0.55); } .pyramid-interactive .pyramid-layer.below-water:hover, .pyramid-interactive .pyramid-layer.below-water:focus-visible { border-color: var(--border-light); color: var(--text-bright); } .pyramid-hint { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); text-align: center; margin: 0 0 var(--space-md); } @media (hover: none) and (pointer: coarse) { .pyramid-interactive .pyramid-layer { width: 100% !important; } .pyramid-interactive .pyramid-layer__detail { max-width: 80ch; opacity: 0.75; padding-left: var(--space-sm); border-left: 1px solid rgba(255, 255, 255, 0.10); } .pyramid-hint { display: none; } } /* Mobile + tablet + narrow-laptop viewports (<=1024px): for the INTERACTIVE pyramid only (/architecture), abandon the pyramid shape in favour of a readable stack of full-width layers — the absolute- positioned slot goes back to block flow, detail text is always revealed, ticker animates unconditionally. JS initialises tickers on page load at this breakpoint. Above 1024px the pyramid shape returns (desktop has room for the triangle + fly-over detail). The plain .pyramid (home) is NOT affected — it stays as a responsive triangle across all viewports, scaling with its container. */ @media (max-width: 1024px) { .pyramid-slot { height: auto; min-height: 2.75rem; } .pyramid-interactive .pyramid-layer { position: relative; left: auto; top: auto; bottom: auto; transform: none; width: 100% !important; } .pyramid-interactive .pyramid-layer__detail { max-width: 100%; opacity: 0.9; padding-left: var(--space-sm); border-left: none; } .pyramid-interactive .pyramid-layer .pyramid-layer__detail.is-ticker .pyramid-layer__detail-track { animation: pyramid-ticker 14s linear infinite; } .pyramid-hint { display: none; } } /* Tiny phones (iPhone SE and similar, <=480px): the layer's summary + detail can no longer share a single flex row without crushing each other. Stack them vertically inside each layer — summary (ball + label) on line one, detail (ticker) on line two, centred. Tight horizontal padding buys back content width. */ @media (max-width: 480px) { .pyramid-interactive .pyramid-layer { flex-direction: column; align-items: stretch; padding: 0.55rem 0.75rem; gap: 0.15rem; } .pyramid-interactive .pyramid-layer__summary { justify-content: center; } .pyramid-interactive .pyramid-layer__detail, .pyramid-interactive .pyramid-layer:hover .pyramid-layer__detail, .pyramid-interactive .pyramid-layer:focus-visible .pyramid-layer__detail, .pyramid-interactive .pyramid-layer:focus-within .pyramid-layer__detail { padding-left: 0; text-align: center; width: 100%; max-width: 100%; } } .pyramid-layer .layer-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-bright); margin-right: var(--space-sm); /* Circular ball styling */ display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(3, 7, 18, 0.55); border: 1px solid var(--border-light); flex-shrink: 0; line-height: 1; } .pyramid .above-water .layer-num { background: rgba(0, 229, 227, 0.18); border-color: rgba(0, 229, 227, 0.55); color: var(--accent); } .pyramid .below-water .layer-num { background: rgba(3, 7, 18, 0.6); border-color: var(--border-light); color: var(--text-secondary); } .pyramid .above-water { background: linear-gradient(90deg, rgba(0, 229, 227, 0.15), rgba(211, 197, 255, 0.12)); border: 1px solid rgba(0, 229, 227, 0.25); color: var(--text-bright); } .pyramid .below-water { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); } .pyramid .below-water:hover { border-color: var(--border-light); background: var(--bg-surface-hover); } .pyramid-waterline { width: 100%; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; margin: var(--space-xs) 0; } .pyramid-waterline::before, .pyramid-waterline::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-alt), transparent); } .pyramid-waterline span { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent-alt); white-space: nowrap; } /* 14b. Surface Stack (five-layer component surface diagram) ------------------------------------------------------------ */ .surface-stack { display: flex; flex-direction: column; gap: 0.5rem; max-width: 780px; margin: 2.5rem auto 0; } .surface-stack__layer { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: var(--space-md); padding: 0.9rem 1.25rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition), background var(--transition), transform var(--transition); } .surface-stack__layer:hover { border-color: var(--border-light); background: var(--bg-surface-hover, var(--bg-surface)); transform: translateX(3px); } .surface-stack__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; text-align: center; } .surface-stack__body { min-width: 0; } .surface-stack__name { font-weight: 600; color: var(--text-bright); font-size: 0.98rem; margin-bottom: 0.2rem; } .surface-stack__desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; } /* Accent tint that graduates through the five layers */ .surface-stack__layer--1 { border-color: rgba(0, 229, 227, 0.35); } .surface-stack__layer--2 { border-color: rgba(0, 229, 227, 0.28); } .surface-stack__layer--3 { border-color: rgba(0, 229, 227, 0.22); } .surface-stack__layer--4 { border-color: rgba(211, 197, 255, 0.25); } .surface-stack__layer--4 .surface-stack__num { color: var(--accent-alt); } .surface-stack__layer--5 { border-color: rgba(211, 197, 255, 0.22); } .surface-stack__layer--5 .surface-stack__num { color: var(--accent-alt); } @media (max-width: 600px) { .surface-stack__layer { grid-template-columns: 2.5rem 1fr; padding: 0.7rem 0.9rem; } .surface-stack__num { padding: 0.25rem 0.35rem; } } /* 15. Feature Grid (Component cards) ------------------------------------------------------------ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .feature-grid .card { height: 100%; } .feature-grid .card h3 { font-size: 1.125rem; } /* 16. Stats Row ------------------------------------------------------------ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); text-align: center; align-items: stretch; } .grid-2-1 .stats { grid-template-columns: repeat(2, 1fr); } /* Each stat is a flex column with content centred vertically — so cards with shorter text ("ISO 27001" via .stat-text) or narrower label ("Vendor lock-in") don't sit visually higher than cards with taller content ("Protocol integrations" wrapping to two lines). Reserves a consistent visual block height across the row. */ .stat { display: flex; flex-direction: column; justify-content: center; min-height: 5.5rem; } .stat-number { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; margin-bottom: var(--space-sm); color: var(--accent); display: block; font-variant-numeric: tabular-nums; } .stat-number.accent { color: var(--accent); } .stat-number.alt { color: var(--accent-alt); } /* Text-stat delta tightened: was clamp(1.5rem, 3vw, 2.5rem) which rendered "ISO 27001" ~40% shorter than the numeric 56px and made the row feel uneven. Pulled closer to parity. */ .stat-number.stat-text { font-size: clamp(1.75rem, 3.5vw, 2.75rem); } .stat-label { font-size: 0.875rem; color: var(--text-muted); line-height: 1.35; } /* 17. CTA Block ------------------------------------------------------------ */ .cta-block { text-align: center; padding: var(--space-4xl) var(--space-2xl); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: radial-gradient(ellipse at 50% 0%, var(--accent-glow), transparent 60%), var(--bg-surface); position: relative; overflow: hidden; } .cta-block h2 { margin-bottom: var(--space-md); } .cta-block p { color: var(--text-secondary); margin-bottom: var(--space-2xl); max-width: 36em; margin-left: auto; margin-right: auto; } .cta-block .hero-actions { justify-content: center; } /* 18. Timeline ------------------------------------------------------------ */ .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--accent), var(--border), transparent); } .timeline-item { position: relative; padding-bottom: var(--space-2xl); } .timeline-item::before { content: ''; position: absolute; left: -2rem; top: 0.375rem; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow-md); transform: translateX(-4px); } .timeline-item h4 { margin-bottom: var(--space-xs); } .timeline-item p { color: var(--text-secondary); font-size: 0.9375rem; } /* 19. Forms ------------------------------------------------------------ */ .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-sm); } .form-input, .form-textarea { width: 100%; padding: 0.75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-textarea { resize: vertical; min-height: 8rem; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } /* 20. Footer ------------------------------------------------------------ */ .footer { background: var(--bg-deep); border-top: 1px solid var(--border); padding: var(--space-4xl) 0 var(--space-2xl); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-3xl); } .footer-tagline { color: var(--text-secondary); font-size: 0.9375rem; margin-top: var(--space-md); margin-bottom: var(--space-sm); } .footer-company { color: var(--text-muted); font-size: 0.8125rem; } .footer-links h4, .footer-links .footer-heading { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: var(--space-lg); } .footer-links a { display: block; color: var(--text-secondary); font-size: 0.9375rem; padding: 0.25rem 0; transition: color var(--transition-fast); } .footer-links a:hover { color: var(--text-bright); } .footer-location { color: var(--text-muted); font-size: 0.875rem; margin-top: var(--space-sm); } /* Social-media row inside the Connect footer column. Icons use the same tech-icon filter trick so they flip between themes correctly. */ .footer-socials { display: flex; gap: var(--space-md); margin-top: var(--space-md); } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; opacity: 0.7; transition: opacity var(--transition-fast); } .footer-socials a:hover { opacity: 1; } .footer-socials img { width: 100%; height: 100%; display: block; filter: brightness(0) invert(1); } [data-theme="light"] .footer-socials img { filter: brightness(0); } /* Use-case sector tabs (sticky strip + :target-driven panels) ------------------------------------------------------------ */ .use-case-tabs { position: sticky; top: var(--nav-height); z-index: 10; background: rgba(10, 15, 30, 0.92); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .use-case-tabs .container { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; } .use-case-tabs .container::-webkit-scrollbar { display: none; } .use-case-tabs a { flex-shrink: 0; padding: 0.85rem 1.25rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .use-case-tabs a:hover { color: var(--text-bright); } .use-case-tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* Panels: only the one with .is-active renders. Set by JS on load and on hashchange. CSS stays simple — no :target / :has tricks, works in every browser (including older Safari where :has() hit mixed behaviour with display:none panels). */ .use-case-panel { display: none; } .use-case-panel.is-active { display: block; } .footer-bottom { padding-top: var(--space-xl); border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.8125rem; } .footer-tm { margin-top: var(--space-xs); font-size: 0.75rem; opacity: 0.75; } .footer-tm a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .footer-tm a:hover { color: var(--accent); } /* 21. Grain Overlay ------------------------------------------------------------ */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; } /* 22. Animations ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 15px var(--accent-glow); } 50% { box-shadow: 0 0 30px var(--accent-glow-md); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes glow-line { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } .animate-float { animation: float 4s ease-in-out infinite; } /* 22b. Extra component styles (agent-generated) ------------------------------------------------------------ */ /* stat-value alias for stat-number (used in about page) */ .stat-value { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; margin-bottom: var(--space-sm); color: var(--accent); display: block; font-variant-numeric: tabular-nums; } /* Check list with accent bullets */ .check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); max-width: 48rem; } .check-list li { position: relative; padding-left: 1.75rem; color: var(--text-secondary); line-height: 1.6; } .check-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow-md); } /* Contact details block */ .contact-details { margin-top: var(--space-2xl); } .contact-details h4 { margin-bottom: var(--space-lg); } .contact-person { margin-bottom: var(--space-lg); } .contact-person p { color: var(--text-secondary); line-height: 1.5; } .contact-person strong { color: var(--text-bright); } /* Select dropdown styling */ select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } select.form-input option { background: var(--bg-surface); color: var(--text-primary); } /* FAQ list */ .faq-list { display: flex; flex-direction: column; gap: var(--space-lg); } .faq-list .card-flat h4 { margin-bottom: var(--space-sm); } .faq-list .card-flat p { color: var(--text-secondary); } /* Form hint */ .form-hint { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--space-md); text-align: center; } /* CTA buttons row */ .cta-buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* 23. Utilities ------------------------------------------------------------ */ .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mt-3xl { margin-top: var(--space-3xl); } .mt-4xl { margin-top: var(--space-4xl); } .mb-xs { margin-bottom: var(--space-xs); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); } .mb-3xl { margin-bottom: var(--space-3xl); } .pt-2xl { padding-top: var(--space-2xl); } .pb-2xl { padding-bottom: var(--space-2xl); } .mx-auto { margin-left: auto; margin-right: auto; } .w-full { width: 100%; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Separator */ .sep { width: 3rem; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-alt), var(--accent-pop)); border: none; border-radius: 1px; margin: var(--space-xl) 0; } /* Data flow arrow */ .flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.5rem; padding: var(--space-sm) 0; } /* Provider badge list */ .provider-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* 24. Responsive ------------------------------------------------------------ */ @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --space-5xl: 5rem; --space-4xl: 3.5rem; } .nav-toggle { display: flex; } .nav-links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(3, 7, 18, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; justify-content: center; align-items: center; gap: var(--space-xl); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .nav-links.open { opacity: 1; visibility: visible; } .nav-links a { font-size: 1.25rem; } .nav-cta { font-size: 1rem !important; } /* Light-mode mobile overlay — scoped here so desktop nav-links stays transparent (it's a flex strip, not a panel). */ [data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.97); } .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .hero-content { max-width: 100%; } .hero { min-height: 90vh; } } @media (max-width: 480px) { .container, .container-narrow, .container-wide { padding: 0 var(--space-md); } .card { padding: var(--space-xl); } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; justify-content: center; } .stats { grid-template-columns: 1fr 1fr; } } /* ========================================================================== Tech icons (Simple Icons, monochrome SVGs, themed via filter) ========================================================================== */ .tech-icon { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 0.5rem; filter: brightness(0) invert(1) opacity(0.75); transition: filter var(--transition); flex-shrink: 0; } tr:hover .tech-icon { filter: brightness(0) invert(1) opacity(1); } .tech-icon-lg { display: inline-block; width: 28px; height: 28px; vertical-align: middle; filter: brightness(0) invert(1) opacity(0.85); } /* Brandmark variant — for inline use of the Microcelium glyph which bakes in the brand gradient. Same 28px size as tech-icon-lg, but no invert filter — we want the gradient to render as-is. */ .brandmark-icon { display: inline-block; height: 28px; width: auto; vertical-align: middle; } .tech-icons-row { display: flex; gap: 0.75rem; justify-content: center; align-items: center; margin-top: 0.5rem; } .tech-icons-row .tech-icon-lg { margin: 0; } /* Cloud / compute icons — preserve brand colour at larger size */ .tech-icon-cloud { display: inline-block; height: 56px; width: auto; max-width: 180px; vertical-align: middle; opacity: 0.95; transition: opacity var(--transition), transform var(--transition); } .tech-icon-cloud:hover { opacity: 1; transform: translateY(-2px); } .tech-icon-cloud--mono { filter: brightness(0) invert(1) opacity(0.95); } .tech-icon-cloud--mono:hover { filter: brightness(0) invert(1) opacity(1); } /* ========================================================================== Stemcell image hierarchy — shared between /architecture + /engineering. Purple (accent-alt) for platform-side layers, cyan (accent) for dev-facing layers. On narrow viewports, stacks vertically with the arrows rotated 90deg to flow top-to-bottom. ========================================================================== */ .stemcell-hierarchy { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 3rem 0 2.5rem; } .stemcell-node { border-radius: 0.75rem; padding: 0.875rem 1.5rem; text-align: center; border: 2px solid; flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center; } .stemcell-node--base { border-color: var(--accent-alt); background: rgba(211, 197, 255, 0.04); } .stemcell-node--app { border-color: var(--accent); background: rgba(0, 229, 227, 0.04); } .stemcell-node__sub { font-size: 0.8rem; opacity: 0.6; margin-top: 0.25rem; } .stemcell-node .tech-icons-row { margin-top: 0.6rem; } .stemcell-arrow { font-size: 1.5rem; opacity: 0.45; padding: 0 0.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform 200ms ease; color: var(--text-secondary); } .stemcell-arrow svg { width: 1.5rem; height: 1.5rem; display: block; } @media (max-width: 640px) { .stemcell-hierarchy { flex-direction: column; align-items: center; gap: 0.25rem; } .stemcell-node { width: 100%; max-width: 20rem; } .stemcell-arrow { transform: rotate(90deg); padding: 0.25rem 0; } } /* ========================================================================== Flow Diagram — consolidates the inline-styled data-flow blocks that previously lived on /architecture, /use-cases, and /engineering. Pattern: a vertical strip of "pills" (bordered cards) separated by arrows, with a parallel side-panel of "secondary pills" (dashed border) sitting alongside. Accent colouring graduates with a .flow-* modifier on the pill — above-water cells use --accent (cyan) and below-water cells use --accent-alt (lavender) — preserving the existing semantic mapping from the inline styles. Added 2026-04-23. Visual output matches the pre-refactor inline version 1:1; inline SVG arrows replace the unicode ↓ glyph for crisper rendering and consistent sizing. ========================================================================== */ .flow-diagram { display: flex; gap: var(--space-2xl); align-items: flex-start; justify-content: center; flex-wrap: wrap; } .flow-diagram--architecture { gap: var(--space-3xl); } .flow-diagram__main { display: flex; flex-direction: column; align-items: center; gap: 0; flex: 1; min-width: 260px; max-width: 360px; } .flow-diagram--wide .flow-diagram__main { max-width: 380px; } .flow-diagram--architecture .flow-diagram__main { max-width: 480px; min-width: 280px; } .flow-diagram__aside { display: flex; flex-direction: column; gap: var(--space-md); flex: 0 0 220px; min-width: 200px; margin-top: 5rem; } .flow-diagram--architecture .flow-diagram__aside { gap: var(--space-xl); margin-top: 0; } /* The primary flow pill — solid border, tinted background. */ .flow-pill { border: 2px solid var(--accent-alt); border-radius: var(--radius-lg); padding: 0.85rem 1.25rem; text-align: center; width: 100%; background: var(--accent-alt-bg-tint); color: var(--text-primary); } .flow-diagram--architecture .flow-pill { padding: 1rem 1.5rem; } .flow-pill__label { font-weight: 600; color: var(--text-bright); display: block; } .flow-pill__sub { font-size: 0.8rem; opacity: 0.75; margin-top: 0.25rem; line-height: 1.45; } .flow-diagram--architecture .flow-pill__sub { font-size: 0.85rem; } /* Accent variants — picks which side of the waterline the cell sits on. */ .flow-pill--above { border-color: var(--accent); background: var(--accent-bg-tint); } .flow-pill--below { border-color: var(--accent-alt); background: var(--accent-alt-bg-tint); } .flow-pill--dashed { border-style: dashed; } /* Side-panel pills — dashed border, lavender tone, tighter padding. */ .flow-aside__label { font-size: 0.72rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 var(--space-xs); color: var(--text-muted); font-family: var(--font-mono); } .flow-aside__note { font-size: 0.78rem; opacity: 0.7; margin: var(--space-sm) 0 0; line-height: 1.5; color: var(--text-secondary); } .flow-aside-pill { border: 2px dashed var(--accent-alt-border-dashed); border-radius: var(--radius-lg); padding: 0.75rem 1rem; background: transparent; } .flow-aside-pill__label { font-size: 0.95rem; font-weight: 600; color: var(--text-bright); display: block; } .flow-aside-pill__sub { font-size: 0.78rem; opacity: 0.75; margin-top: 0.2rem; line-height: 1.45; color: var(--text-secondary); } .flow-aside-pill--accent { border-color: var(--accent); } .flow-aside-pill--accent .flow-aside-pill__label { color: var(--accent); } /* Architecture-page side-panel variants have solid borders + tints where the use-case variants have dashed borders. Kept as its own modifier so the two diagrams can share the aside wrapper. */ .flow-aside-pill--solid { border-style: solid; padding: 1.25rem; background: var(--accent-alt-bg-tint); text-align: center; } .flow-aside-pill--solid.flow-aside-pill--accent { background: var(--accent-bg-tint); } .flow-aside-pill--solid .flow-aside-pill__label { margin-bottom: 0.5rem; } .flow-aside-pill__scope { font-size: 0.85rem; opacity: 0.75; color: var(--text-secondary); } .flow-aside-pill__hint { font-size: 0.8rem; opacity: 0.65; margin-top: 0.75rem; color: var(--text-secondary); } .flow-aside-pill__pointer { margin-top: 0.75rem; font-size: 0.9rem; opacity: 0.6; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); } .flow-aside-pill__pointer svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* Legend rows — used under the architecture diagram. */ .flow-legend { font-size: 0.85rem; opacity: 0.8; padding: 0 0.5rem; color: var(--text-secondary); } .flow-legend p { margin: 0 0 var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); } .flow-legend p:last-child { margin-bottom: 0; } .flow-legend__swatch { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 3px; flex-shrink: 0; } .flow-legend__swatch--alt { border-color: var(--accent-alt); } /* Arrow glyph — inline SVG rendered through .flow-arrow. Kept at 1.5rem font-size for parity with the old unicode glyph, but the SVG path is crisper at any zoom level. The flow-arrow wrapper already existed for the unicode version; we just replaced the glyph. */ .flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-dim); padding: 0.65rem 0; } .flow-arrow svg { width: 1.25rem; height: 1.25rem; display: block; } /* Container for the whole block — margin above/below matches the previous inline `style="margin: 2.5rem 0 3rem"`. */ .flow-diagram-wrap { margin: var(--space-2xl) 0 var(--space-3xl); } /* ========================================================================== Content utility classes — consolidated from ~50 one-off inline styles across templates. Added 2026-04-23; the rule of thumb used was "repeated three times or more across template files, move it here". ========================================================================== */ /* Status badge inside tables — "Production", "Beta", etc. */ .status-tag { color: var(--success); font-weight: 500; } .status-tag__note { opacity: 0.6; font-size: 0.85rem; color: var(--text-secondary); font-weight: 400; } /* Roadmap chip — appears on card headings; was 70+ characters of inline style repeated ~7 times in components.html. */ .roadmap-chip { display: inline-block; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px solid var(--border-light); border-radius: 999px; color: var(--text-secondary); margin-left: 0.5rem; vertical-align: 3px; font-weight: 500; } .roadmap-chip--light { font-weight: 400; opacity: 0.9; } /* Beta chip — same pill shape as roadmap-chip but with the cyan accent so "Beta" reads as "live and evolving" rather than "not yet shipped". */ .beta-chip { display: inline-block; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: var(--accent-glow); margin-left: 0.5rem; vertical-align: 3px; font-weight: 500; } /* Headline pattern: large stat number + descriptor. Used on /platform and /home. */ .stat-inline { font-size: 2rem; font-weight: 600; color: var(--accent); margin: 0; font-family: var(--font-display); line-height: 1.1; } .stat-inline__sub { opacity: 0.75; margin-top: 0.25rem; color: var(--text-secondary); } /* Dashed border variant of .card — used on roadmap agents. */ .card--roadmap { border-style: dashed; opacity: 0.9; } .card--roadmap:hover { opacity: 1; } /* Inline tech-icon alignment helper — for icons appearing mid-paragraph rather than in the .tech-icons-row. */ .tech-icon-inline { vertical-align: -4px; margin-right: 0.35rem; } .tech-icon-lg-inline { margin-right: 0.5rem; vertical-align: -6px; } /* Aligned heading inline icon — keeps text-icon flow consistent in the provider/integrations card headings. */ .card h3 .tech-icon-lg, .card h4 .tech-icon-lg { vertical-align: middle; } /* Spacing helpers that were inline. */ .mt-2xl-i { margin-top: var(--space-2xl) !important; } .mt-3xl-i { margin-top: var(--space-3xl) !important; } /* Quoted pull-out — the 46-71 weeks ribbon on /components. */ .pull-out { font-size: 1.05rem; border-left: 3px solid var(--accent); padding: 0.5rem 0 0.5rem 1rem; margin-top: 1.75rem; color: var(--text-primary); } /* Italic italic close — small em-dash line under sections like the "first product feature ships in week three" line on /components. */ .closer { font-size: 1.2rem; opacity: 0.88; font-style: italic; max-width: 780px; margin: 0 auto; text-align: center; color: var(--text-primary); } /* Monospace scenario block — the 07:32 invoice trace on /platform. */ .scenario-trace { font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.8; color: var(--text-secondary); } .scenario-trace p { margin: 0 0 0.35rem; } .scenario-trace p:last-child { margin-bottom: 0; } .scenario-trace strong { color: var(--text-bright); } /* Centred copy helper — used under cloud deploys etc. */ .note-center { text-align: center; margin-top: var(--space-lg); font-size: 0.9rem; opacity: 0.75; color: var(--text-secondary); } /* Small muted line — "New gateways follow the same pattern" etc. */ .text-note { margin-top: var(--space-lg); opacity: 0.8; font-size: 0.9rem; color: var(--text-secondary); } .text-note--center { text-align: center; } .text-note--sm { font-size: 0.85rem; } /* Italic kicker under hero lead (engineering.html etc). */ .lead-kicker { margin-top: 0.75rem; font-style: italic; opacity: 0.8; color: var(--text-secondary); } /* Credibility card variant used on home stats row — centred layout with an accent-coloured headline + muted body. */ .credibility-card { text-align: center; } .credibility-card__name { font-size: 1.5rem; font-weight: 600; color: var(--accent); margin-bottom: 0.5rem; font-family: var(--font-display); } .credibility-card__body { opacity: 0.75; font-size: 0.85rem; color: var(--text-secondary); } .credibility-card__body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .credibility-card__body a:hover { color: var(--accent); } /* Full-width form button — contact form. */ .btn-block { width: 100%; justify-content: center; } /* Deploy-anywhere cloud logo wrapper — was 3 identical inline style attributes on architecture.html. */ .cloud-logo-wrap { min-height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }