/* ABOUTME: V2 design system for rayze.xyz — Geist type, Space Grotesk wordmark, icon rows, layered diagrams. */ /* ABOUTME: Dark/light themeable via data-theme on ; mint accent + glow; hairline line separators; no photography. */ /* ============================================================= Tokens */ :root { --fs-hero: clamp(2.75rem, 6.4vw, 5.625rem); --fs-display: clamp(2.5rem, 5.2vw, 4rem); --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); --fs-h3: clamp(1.375rem, 1rem + 1vw, 1.75rem); --fs-lead: clamp(1.125rem, .9rem + .9vw, 1.375rem); --fs-body: 1.0625rem; --fs-small: 1rem; --fs-label: 0.875rem; --tracking-tight: -0.03em; --tracking-tighter: -0.04em; --tracking-wide: 0.14em; --lh-tight: 1.06; --lh-head: 1.12; --lh-body: 1.6; --container: 1280px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(5rem, 11vh, 9.5rem); --radius: 14px; --ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: dark; } /* Dark (default) */ :root, [data-theme="dark"] { --bg: #000000; --bg-elevated: #0B0F0E; --bg-soft: #0E1413; --mint: #08FFB5; --mint-ink: #04140F; --mint-dim: rgba(8, 255, 181, 0.12); --mint-glow: rgba(8, 255, 181, 0.55); --text: #FFFFFF; --text-muted: #9AA5A1; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.22); } /* Light — cream */ [data-theme="light"] { color-scheme: light; --bg: #F4F3ED; --bg-elevated: #FFFFFF; --bg-soft: #ECEBE3; --mint: #03B37E; --mint-ink: #FFFFFF; --mint-dim: rgba(3, 179, 126, 0.12); --mint-glow: rgba(3, 179, 126, 0.45); --text: #0B0F0E; --text-muted: #55605C; --line: rgba(0, 0, 0, 0.14); --line-strong: rgba(0, 0, 0, 0.26); } /* ============================================================= Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: "Geist", system-ui, -apple-system, sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .4s var(--ease), color .4s var(--ease); } svg { display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; } h1, h2, h3, h4 { font-weight: 500; line-height: var(--lh-head); letter-spacing: var(--tracking-tight); } /* ============================================================= Layout */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(3rem, 7vh, 6rem); } .divider { border: 0; border-top: 1px solid var(--line); } main { display: block; } /* ============================================================= Type helpers */ .eyebrow { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } .eyebrow--mint { color: var(--mint); } .hero-title { font-size: var(--fs-hero); letter-spacing: var(--tracking-tighter); line-height: var(--lh-tight); font-weight: 500; } .display { font-size: var(--fs-display); letter-spacing: var(--tracking-tighter); line-height: var(--lh-tight); } .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); } .lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.5; letter-spacing: var(--tracking-tight); font-weight: 400; } .muted { color: var(--text-muted); } .mint { color: var(--mint); } .measure { max-width: 62ch; } .measure-sm { max-width: 46ch; } /* ============================================================= Buttons (all glow) */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem; border-radius: 100px; font-size: var(--fs-small); line-height: 1.2; white-space: nowrap; font-size: var(--fs-small); font-weight: 500; letter-spacing: -0.01em; border: 1px solid transparent; transition: all .25s var(--ease); white-space: nowrap; box-shadow: 0 0 22px -8px var(--mint-glow); } .btn svg { width: 1.05em; height: 1.05em; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 34px -6px var(--mint-glow); } .btn--primary { background: var(--mint); color: var(--mint-ink); } .btn--ghost { border-color: var(--line-strong); color: var(--text); } .btn--ghost:hover { border-color: var(--mint); } .btn--lg { padding: .7rem 1.3rem; font-size: var(--fs-small); } .link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: all .2s var(--ease); } .link-arrow:hover { color: var(--mint); border-color: var(--mint); gap: .8rem; } /* ============================================================= Header / nav */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 104px; } .logo { display: inline-flex; align-items: center; gap: 16px; } .logo-mark { width: 72px; height: 50px; display: block; flex: none; overflow: visible; } .logo-mark .lm-brk { stroke: color-mix(in srgb, var(--text) 45%, transparent); } .logo-mark .lm-r { stroke: var(--text); } .logo-mark .lm-sl { stroke: var(--mint); } .logo-ascii { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 2rem; letter-spacing: -0.06em; line-height: 1; color: var(--text); display: inline-flex; align-items: baseline; flex: none; } .logo-ascii .la-sym { color: var(--mint); } .footer-brand .logo-ascii { font-size: 1.5rem; } .logo-word { font-family: "Space Grotesk", "Geist", sans-serif; font-size: 2.7rem; font-weight: 600; letter-spacing: -0.025em; color: var(--text); line-height: 1; } .nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.4rem); } .nav-links a { font-size: var(--fs-small); color: var(--text-muted); transition: color .2s var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 1rem; } .nav-item { position: relative; display: flex; align-items: center; } .nav-item > a { display: inline-flex; align-items: center; gap: .3rem; } .nav-caret { width: 14px; height: 14px; transition: transform .2s var(--ease); } .has-sub:hover .nav-caret, .has-sub:focus-within .nav-caret { transform: rotate(180deg); } .sub-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, -6px); min-width: 200px; padding: .5rem; display: grid; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; } .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } .sub-menu a { display: block; padding: .6rem .85rem; border-radius: 6px; font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; } .sub-menu a:hover, .sub-menu a:focus-visible { color: var(--text); background: color-mix(in srgb, var(--mint) 12%, transparent); } .theme-toggle { width: 38px; height: 38px; border-radius: 100px; border: 1px solid var(--line-strong); display: inline-grid; place-items: center; color: var(--text-muted); transition: all .2s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--text); } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } .nav-toggle { display: none; } .nav-cta-mobile { display: none; } /* ============================================================= Hero (typographic, no photos) */ .hero { position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); background: radial-gradient(50% 60% at 15% 62%, var(--mint-dim), transparent 65%), radial-gradient(45% 50% at 100% 0%, var(--mint-dim), transparent 60%); } .hero-inner { position: relative; z-index: 1; padding-block: clamp(5.5rem, 17vh, 11rem) var(--section-y); } .hero .eyebrow { margin-bottom: 1.6rem; } .hero-title { max-width: 17ch; } .hero-sub { margin-top: 1.8rem; max-width: 52ch; } .hero-inner:not(:has(.hero-cta)) { padding-block: clamp(5.5rem, 17vh, 11rem) clamp(4.5rem, 13vh, 8.5rem); } .hero-cta { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: .9rem; } /* ============================================================= Section header */ .sec-head { display: grid; gap: 1.1rem; max-width: 72ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } /* ============================================================= Function list (icon + text, line-divided) */ .flist { display: grid; } .fitem { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1.25rem, 4vw, 3rem); padding-block: clamp(2rem, 5vh, 3.25rem); border-top: 1px solid var(--line); align-items: start; } .flist .fitem:last-child { border-bottom: 1px solid var(--line); } .ficon { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--mint); background: var(--mint-dim); } .ficon svg { width: 26px; height: 26px; } .fitem-label { font-family: "Geist Mono", monospace; font-size: var(--fs-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mint); margin-bottom: .7rem; } .fitem h3 { font-size: var(--fs-h3); margin-bottom: .7rem; } .fitem p { color: var(--text-muted); max-width: 64ch; } /* ============================================================= Steps / How we partner */ .step { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1.2rem,4vw,3.5rem); padding-block: clamp(2rem, 5vh, 3.5rem); border-top: 1px solid var(--line); align-items: baseline; } .steps .step:last-child { border-bottom: 1px solid var(--line); } .step-num { font-family: "Geist Mono", monospace; font-size: var(--fs-small); color: var(--text-muted); padding-top: .5rem; } .step-metric { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); line-height: 1.1; } .step-metric b { color: var(--mint); font-weight: 500; } .step-desc { margin-top: .8rem; max-width: 48ch; color: var(--text-muted); } /* ============================================================= Cards */ .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.2rem); transition: border-color .25s var(--ease), transform .25s var(--ease); } .card:hover { border-color: var(--line-strong); transform: translateY(-2px); } .card-icon { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--mint-dim); color: var(--mint); margin-bottom: 1.3rem; } .card-icon svg { width: 23px; height: 23px; } .card h3 { font-size: 1.25rem; margin-bottom: .6rem; } .card p { color: var(--text-muted); font-size: var(--fs-small); } /* Stat bar */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stat { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.3rem); } .stat-num { font-size: clamp(1.9rem, 3.5vw, 2.85rem); letter-spacing: var(--tracking-tight); line-height: 1; } .stat-num b { color: var(--mint); font-weight: 500; } .stat-label { margin-top: .6rem; font-size: var(--fs-small); color: var(--text-muted); } /* Industries (stacked cards with arrow) */ .industries { display: grid; } .ind { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; padding-block: clamp(1.9rem, 4.5vh, 3rem); border-top: 1px solid var(--line); transition: padding-left .25s var(--ease), background-color .25s var(--ease); } .industries .ind:last-child { border-bottom: 1px solid var(--line); } .ind:hover { padding-left: .7rem; } .ind h3 { font-size: var(--fs-h3); margin-bottom: .55rem; letter-spacing: var(--tracking-tight); } .ind p { color: var(--text-muted); max-width: 62ch; } .ind-arrow { width: 48px; height: 48px; border-radius: 100px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--text); transition: all .25s var(--ease); } .ind-arrow svg { width: 20px; height: 20px; } .ind:hover .ind-arrow { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); box-shadow: 0 0 26px -6px var(--mint-glow); } /* Chips */ .chips { display: flex; flex-wrap: wrap; gap: .55rem; } .chip { font-family: "Geist Mono", monospace; font-size: .85rem; letter-spacing: -0.01em; padding: .45rem .85rem; border: 1px solid var(--line-strong); border-radius: 100px; color: var(--text-muted); } /* ============================================================= Layered stack diagram (Atlas-style) */ .layers { display: grid; gap: .6rem; } .layer { border: 1px solid var(--line-strong); border-radius: 12px; padding: 1.1rem 1.4rem; background: var(--bg-elevated); display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .layer:hover { border-color: var(--mint); box-shadow: 0 0 30px -12px var(--mint-glow); } .layer-name { font-weight: 500; letter-spacing: -0.01em; } .layer-name span { display: block; font-size: .85rem; color: var(--text-muted); font-weight: 400; margin-top: .2rem; } .layer-tag { font-family: "Geist Mono", monospace; font-size: .75rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mint); white-space: nowrap; } .layer--accent { border-color: var(--mint); background: var(--mint-dim); } /* ============================================================= Numbered principle list */ .principle { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem,3vw,2.5rem); padding-block: clamp(1.7rem, 4vh, 2.7rem); border-top: 1px solid var(--line); align-items: start; } .principles .principle:last-child { border-bottom: 1px solid var(--line); } .principle-k { font-family: "Geist Mono", monospace; font-size: var(--fs-small); color: var(--mint); padding-top: .35rem; } .principle h3 { font-size: var(--fs-h3); margin-bottom: .6rem; } .principle p { color: var(--text-muted); max-width: 60ch; } /* ============================================================= Case-study card */ .case { display: flex; flex-direction: column; } .case h3 { font-size: var(--fs-h3); margin: .8rem 0 .7rem; } .case > p { color: var(--text-muted); font-size: var(--fs-small); } .case-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: auto; padding-top: 1.6rem; border-top: 1px solid var(--line); } .metric-num { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--mint); } .metric-label { margin-top: .4rem; font-size: .85rem; color: var(--text-muted); } /* ============================================================= CTA band */ .cta-band { text-align: center; } .cta-band .display { max-width: 20ch; margin-inline: auto; } .cta-band .btn { margin-top: 2.2rem; } /* ============================================================= Footer */ .site-footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vh, 5rem) 2.5rem; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } .footer-brand { max-width: 30ch; } .footer-brand .logo { margin-bottom: 1rem; } .footer-brand p { color: var(--text-muted); font-size: var(--fs-small); } .footer-cols { display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; } .footer-col h4 { font-family: "Geist Mono", monospace; font-size: var(--fs-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; font-weight: 500; } .footer-col a { display: block; font-size: var(--fs-small); color: var(--text-muted); padding-block: .35rem; transition: color .2s; } .footer-col a:hover { color: var(--text); } .footer-social { display: flex; gap: 1rem; } .footer-social a { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; color: var(--text-muted); transition: all .2s; } .footer-social a:hover { color: var(--text); border-color: var(--line-strong); } .footer-social svg { width: 18px; height: 18px; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 5vh, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-muted); } .footer-bottom a:hover { color: var(--text); } /* ============================================================= Reveal motion */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } /* ============================================================= Responsive */ @media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } .step, .fitem { grid-template-columns: 1fr; gap: .6rem; } .step-num { padding-top: 0; } .nav { height: 76px; } .logo { gap: 10px; } .logo-ascii { font-size: 1.35rem; } .logo-word { font-size: 1.8rem; } .nav-actions { gap: .6rem; } .nav-actions .btn { padding: .55rem .95rem; font-size: .82rem; } .nav-links { display: none; } .nav-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 100px; color: var(--text); } .nav-toggle svg { width: 19px; height: 19px; } .nav-links.open { display: flex; position: absolute; left: 0; right: 0; top: 76px; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1.2rem var(--gutter) 1.8rem; background: var(--bg); border-bottom: 1px solid var(--line); } .nav-links.open a { font-size: 1.15rem; padding-block: .5rem; } .nav-links.open .nav-cta-mobile { display: inline-flex; margin-top: .6rem; color: var(--mint); } .nav-links.open .nav-item { flex-direction: column; align-items: flex-start; width: 100%; } .nav-links.open .nav-caret { display: none; } .nav-links.open .sub-menu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; border: 0; box-shadow: none; background: transparent; padding: 0 0 .4rem 1rem; min-width: 0; } .nav-links.open .sub-menu a { font-size: 1rem; padding: .35rem 0; color: var(--text-muted); } } @media (max-width: 560px) { .nav-actions > .btn { display: none; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } } /* ============================================================= Reduced motion */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .btn:hover { transform: none; } } /* ============================================================= Hero motion canvas */ .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } /* ============================================================= Industry row icon */ .ind-icon { width: 54px; height: 54px; border-radius: 13px; flex: none; border: 1px solid var(--line-strong); background: var(--mint-dim); display: grid; place-items: center; color: var(--mint); transition: border-color .25s var(--ease), background-color .25s var(--ease); } .ind-icon svg { width: 26px; height: 26px; } .ind:hover .ind-icon { border-color: var(--mint); } @media (max-width: 560px) { .ind { grid-template-columns: minmax(0,1fr) auto; } .ind-icon { display: none; } } /* ============================================================= Sigma block (two-up: copy + layer stack) */ .sigma-block { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .sigma-copy .lead { max-width: 40ch; } @media (max-width: 960px) { .sigma-block { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); } .sigma-copy .lead { max-width: 56ch; } } /* ============================================================= Sigma emblem (landing) */ .sigma-emblem { display: grid; place-items: center; } .sigma-emblem svg { width: min(100%, 430px); height: auto; overflow: visible; display: block; } .sg-axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; } .sg-plate path { fill: none; stroke: var(--line-strong); stroke-width: 1.6; } .sg-plate { animation: sgfloat 9s var(--ease) infinite; animation-delay: calc(var(--i) * -1.15s); transform-origin: 200px 200px; } .sg-plate--accent path { stroke: var(--mint); fill: var(--mint-dim); } .sg-inner { stroke: var(--mint); stroke-width: 1.4; fill: none; opacity: .7; } .sg-pulse path { fill: var(--mint); } .sg-pulse { animation: sgrise 5.4s linear infinite; } @keyframes sgfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes sgrise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateY(-216px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sg-plate, .sg-pulse { animation: none !important; } .sg-pulse { opacity: 1; } } /* ============================================================= Sigma block diagram */ .sig { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .85fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .sig-frame { position: relative; padding: clamp(2.6rem, 5vw, 3.6rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--line-strong); border-radius: 18px; background: radial-gradient(60% 55% at 15% 100%, var(--mint-dim), transparent 65%), radial-gradient(50% 45% at 100% 0%, var(--mint-dim), transparent 60%), var(--bg-elevated); box-shadow: 0 24px 60px -34px rgba(0,0,0,.85); } .blk { appearance: none; font: inherit; cursor: default; width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; padding: .85rem clamp(.9rem, 2vw, 1.3rem); border: 1px solid var(--line-strong); border-radius: 8px; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text-muted); font-size: 1.05rem; letter-spacing: -0.01em; transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .blk:hover, .blk:focus-visible { color: var(--text); border-color: var(--mint); background: color-mix(in srgb, var(--mint) 18%, var(--bg-elevated)); box-shadow: 0 0 40px -14px var(--mint-glow), inset 0 1px 0 color-mix(in srgb, var(--mint) 40%, transparent); } .blk:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; } .blk-txt { display: grid; gap: .28rem; min-width: 0; } .blk-name { font-size: 1.02rem; letter-spacing: -0.01em; color: inherit; } .blk-sub { font-family: "Geist Mono", monospace; font-size: .69rem; line-height: 1.5; letter-spacing: .01em; color: color-mix(in srgb, var(--text-muted) 88%, transparent); text-wrap: pretty; } .blk-tag { flex: none; font-family: "Geist Mono", monospace; font-size: .62rem; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); opacity: .75; transition: color .22s var(--ease), opacity .22s var(--ease); } .blk:hover .blk-tag, .blk:focus-visible .blk-tag { color: var(--mint); opacity: 1; } .sig-three .blk { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .5rem; } .sig-three .blk-tag { order: -1; } .sig-pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: auto; min-height: 0; padding: .55rem 1.25rem; border-radius: 100px; background: var(--bg); color: var(--text); font-size: .92rem; font-weight: 500; border-color: var(--line-strong); white-space: nowrap; max-width: none; } .sig-pill:hover, .sig-pill:focus-visible { background: var(--bg); color: var(--mint); box-shadow: 0 0 34px -12px var(--mint-glow); } .sig-rows { display: grid; gap: clamp(.6rem, 1.2vw, .85rem); } .sig-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, .85rem); } /* the semantic layer reads as the anchor until something else is hovered */ .sig:not(:has(.blk:hover)):not(:has(.blk:focus-visible)) .blk[data-k="sem"] .blk-tag { color: var(--mint); opacity: 1; } .sig:not(:has(.blk:hover)):not(:has(.blk:focus-visible)) .blk[data-k="sem"] { color: var(--text); border-color: var(--mint); background: color-mix(in srgb, var(--mint) 18%, var(--bg-elevated)); box-shadow: 0 0 40px -14px var(--mint-glow), inset 0 1px 0 color-mix(in srgb, var(--mint) 40%, transparent); } .sig-detail { min-height: 12rem; } .sig-d { display: none; } .sig:not(:has(.blk:hover)):not(:has(.blk:focus-visible)) .sig-d[data-k="sem"] { display: block; } .sig:has(.blk[data-k="gov"]:hover) .sig-d[data-k="gov"], .sig:has(.blk[data-k="gov"]:focus-visible) .sig-d[data-k="gov"] { display: block; } .sig:has(.blk[data-k="chan"]:hover) .sig-d[data-k="chan"], .sig:has(.blk[data-k="chan"]:focus-visible) .sig-d[data-k="chan"] { display: block; } .sig:has(.blk[data-k="agent"]:hover) .sig-d[data-k="agent"], .sig:has(.blk[data-k="agent"]:focus-visible) .sig-d[data-k="agent"] { display: block; } .sig:has(.blk[data-k="sem"]:hover) .sig-d[data-k="sem"], .sig:has(.blk[data-k="sem"]:focus-visible) .sig-d[data-k="sem"] { display: block; } .sig:has(.blk[data-k="ctx"]:hover) .sig-d[data-k="ctx"], .sig:has(.blk[data-k="ctx"]:focus-visible) .sig-d[data-k="ctx"] { display: block; } .sig:has(.blk[data-k="model"]:hover) .sig-d[data-k="model"], .sig:has(.blk[data-k="model"]:focus-visible) .sig-d[data-k="model"] { display: block; } .sig:has(.blk[data-k="integ"]:hover) .sig-d[data-k="integ"], .sig:has(.blk[data-k="integ"]:focus-visible) .sig-d[data-k="integ"] { display: block; } .sig-d-kicker { font-family: "Geist Mono", monospace; font-size: .72rem; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mint); margin: 0 0 .7rem; } .sig-d h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); margin: 0 0 .8rem; } .sig-d p:last-child { color: var(--text-muted); margin: 0; text-wrap: pretty; } .sig-d em { font-family: "Geist Mono", monospace; font-style: normal; color: var(--text); font-size: .85em; } @media (max-width: 860px) { .sig { grid-template-columns: 1fr; } .sig-detail { min-height: 0; } .blk { min-height: 68px; } } @media (max-width: 520px) { .sig-three { grid-template-columns: 1fr; } .sig-pill { font-size: .8rem; padding: .45rem 1rem; } } @media (prefers-reduced-motion: reduce) { .blk { transition: none; } } /* ============================================================= Industry pages */ .subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(2rem, 4vh, 3rem); } .subnav a { font-family: "Geist Mono", monospace; font-size: .78rem; letter-spacing: .02em; padding: .5rem .95rem; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: 100px; color: var(--text-muted); transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); } .subnav a:hover { color: var(--text); border-color: var(--text-muted); } .subnav a[aria-current="page"] { color: var(--mint); border-color: var(--mint); background: var(--mint-dim); } .probs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem); } .prob { display: grid; gap: 1.4rem; padding-top: clamp(1.8rem, 3.5vh, 2.6rem); border-top: 1px solid var(--line); } .prob-stat { display: grid; gap: .5rem; } .prob-num { font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: var(--tracking-tighter); line-height: 1; color: var(--mint); font-weight: 500; } .prob-src { font-family: "Geist Mono", monospace; font-size: .72rem; letter-spacing: .02em; color: var(--text-muted); } .prob-body h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); margin-bottom: .8rem; text-wrap: pretty; } .prob-body p { color: var(--text-muted); max-width: 58ch; } .prob-ai { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); } .prob-ai b { color: var(--mint); font-weight: 500; } @media (max-width: 820px) { .probs { grid-template-columns: 1fr; } }