/* Vaelii site — dependency-free, dark theme */ /* Project fonts (copied from vaelii/src/main/resources/vaelii/public/font; licenses under /font/license). Four Hasklig faces ship: Regular, plus Semibold (headings), Bold (strong), SemiboldIt (em) mapped by weight. */ @font-face { font-family: 'Hasklig'; src: url('/font/Hasklig-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Hasklig'; src: url('/font/Hasklig-Semibold.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; /* lighter heading weight */ } @font-face { font-family: 'Hasklig'; src: url('/font/Hasklig-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Hasklig'; src: url('/font/Hasklig-SemiboldIt.woff2') format('woff2'); font-weight: 500 600; font-style: italic; font-display: swap; /* real italic for emphasis */ } @font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/font/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible Soft'; src: url('/font/AtkinsonHyperlegibleSoft-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } :root { --bg: #0c0d12; --bg-band: #101219; --surface: #161824; --surface-2: #1c1f2e; --border: #262a3b; --text: #e7e9f0; --muted: #9aa1b4; --faint: #6b7185; /* switchable accent palette — violet is the default; red / green override these via data-palette on (the header dot button cycles, persisted in localStorage). The historical names --violet / --violet-2 / --teal stay as aliases so every usage site, inline page styles included, follows the active palette. */ --accent: #a78bfa; --accent-2: #c4b5fd; --accent-b: #5eead4; --violet: var(--accent); --violet-2: var(--accent-2); --teal: var(--accent-b); --coral: #f0857a; --max: 1080px; --mono: 'Hasklig', ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --sans: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; } html[data-palette="red"] { --accent: #f0857a; --accent-2: #fca5a5; --accent-b: #67e8f9; /* cyan, not amber: cross-temperature pairs read distinct */ } html[data-palette="green"] { --accent: #4ade80; --accent-2: #86efac; --accent-b: #fbbf24; /* amber, not lime */ } /* rainbow: single-color accents stay violet/teal; the gradient spots (headline, primary button, palette dot) and the mark's nodes go full-spectrum */ html[data-palette="rainbow"] { --rainbow: linear-gradient(110deg, #f0857a 0%, #fbbf24 25%, #4ade80 50%, #5eead4 75%, #a78bfa 100%); } html[data-palette="rainbow"] .grad { background-image: var(--rainbow); } html[data-palette="rainbow"] .btn-primary { background-image: var(--rainbow); } html[data-palette="rainbow"] .palette-btn { background-image: var(--rainbow); } /* light mode — data-theme="light" on ; the header half-dot toggles it (dark stays the default). Surfaces flip, and each palette's accents darken for contrast on the light ground. */ html[data-theme="light"] { --bg: #f7f8fc; --bg-band: #eef0f7; --surface: #ffffff; --surface-2: #f2f3f9; --border: #d9dce8; --text: #1c1f2e; --muted: #4e5468; --faint: #7e86a0; --accent: #7c3aed; --accent-2: #6d28d9; --accent-b: #0f766e; } html[data-theme="light"][data-palette="red"] { --accent: #dc2626; --accent-2: #b91c1c; --accent-b: #0e7490; /* cyan-700: mirrors the dark pair's cross-temperature split */ } html[data-theme="light"][data-palette="green"] { --accent: #16a34a; --accent-2: #15803d; --accent-b: #b45309; /* amber-700 */ } html[data-theme="light"][data-palette="rainbow"] { --rainbow: linear-gradient(110deg, #dc2626 0%, #d97706 25%, #16a34a 50%, #0d9488 75%, #7c3aed 100%); } html[data-theme="light"][data-palette="rainbow"] .btn-primary { color: #fff; } /* dark-ground literals that need a light counterpart */ html[data-theme="light"] a:hover { color: #000; } html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-primary:hover { color: #fff; } html[data-theme="light"] .site-header { background: rgba(247, 248, 252, 0.8); } html[data-theme="light"] .hero-code { box-shadow: 0 24px 60px rgba(28, 31, 46, 0.14); } /* measured-table ranking text: the dark-mode pastels wash out on white */ html[data-theme="light"] #field .cmp-q td.c-win { color: #15803d; } html[data-theme="light"] #field .cmp-q td.c-mid { color: #a16207; } html[data-theme="light"] #field .cmp-q td.c-low { color: #c2410c; } html[data-theme="light"] #field .cmp-q td.c-out { color: #b91c1c; } * { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 17.5px; /* compensate for Hasklig/Atkinson metrics */ /* iOS: no auto text inflation, and never let stray width widen the page itself — wide tables scroll inside their own wrappers */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--violet-2); text-decoration: none; } a:hover { color: #fff; } code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0.1em 0.4em; color: var(--teal); } /* Hasklig's programming ligatures (=> -> <- etc.) live in calt; keep them explicitly on wherever the mono face shows code-ish sequences. */ code, pre, .code-title, .pager a { font-variant-ligatures: contextual; } /* Hasklig (mono) for all headings + chrome — the terminal identity. Now backed by a real Bold face, so large headings are crisp, not faux. */ h1, h2, h3, .brand, .eyebrow, .site-nav, .footer-brand { font-family: var(--mono); } .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .narrow { max-width: 760px; } .center { text-align: center; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: rgba(12, 13, 18, 0.78); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text); } .brand:hover { color: var(--text); } /* the logo no longer rethemes: violet edges, darker violet nodes, and a rainbow bottom rung — identical in every palette and theme */ .brand-mark { stroke-width: 2.2; } .brand-mark line { stroke: #a78bfa; } /* bottom rung: the spectrum (gradient def lives in each page's header mark, userSpaceOnUse — a horizontal line has a zero-height bbox) */ .brand-mark line:last-of-type { stroke: url(#rb-spectrum); } /* nodes: darker than the edges, no stroke ring */ .brand-mark circle { fill: #645396; stroke: none; } /* arrowheads: explicit triangles (SVG markers misrender at this scale) */ .brand-mark path.arrow { fill: #a78bfa; stroke: none; } .site-nav { display: flex; align-items: center; gap: 26px; } .site-nav a { color: var(--muted); font-size: 0.92rem; } .site-nav a:hover { color: var(--text); } .site-nav .nav-gh { border: 1px solid var(--border); padding: 6px 14px; border-radius: 7px; color: var(--text); } .site-nav .nav-gh:hover { border-color: var(--violet); } /* palette switcher: a two-tone dot showing the active accent pair */ .palette-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); padding: 0; background: linear-gradient(110deg, var(--accent) 45%, var(--accent-b) 55%); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .palette-btn:hover { border-color: var(--accent); transform: scale(1.15); } /* theme toggle: a half-light/half-dark dot */ .theme-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); padding: 0; background: linear-gradient(90deg, var(--text) 50%, var(--bg) 50%); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .theme-btn:hover { border-color: var(--accent); transform: scale(1.15); } /* ---------- hero ---------- */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; max-width: var(--max); margin: 0 auto; padding: 90px 24px 80px; } .hero-inner { min-width: 0; } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 600; color: var(--violet); margin: 0 0 18px; } .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 22px; font-weight: 600; } .grad { color: var(--violet); /* fallback when background-clip:text isn't painted */ background: linear-gradient(110deg, var(--violet) 10%, var(--teal) 90%); -webkit-background-clip: text; background-clip: text; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .grad { -webkit-text-fill-color: transparent; color: transparent; } } .lede { font-size: 1.12rem; color: var(--muted); margin: 0 0 14px; } .sub { font-size: 0.98rem; color: var(--faint); margin: 0 0 30px; font-style: italic; } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .cta-row.center { justify-content: center; } .btn { display: inline-block; padding: 11px 22px; border-radius: 9px; font-weight: 600; font-size: 0.95rem; transition: all 0.15s ease; border: 1px solid transparent; } .btn-primary { background: var(--violet); color: #15131f; } .btn-primary:hover { background: var(--violet-2); color: #15131f; transform: translateY(-1px); } .btn-ghost { border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--violet); color: #fff; } /* ---------- code blocks ---------- */ .hero-code, .code-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.4); } .code-block { box-shadow: none; margin: 22px 0; } .code-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .dot { width: 11px; height: 11px; border-radius: 50%; background: #3a3f54; } .dot:nth-child(1) { background: #f0857a; } .dot:nth-child(2) { background: #e3c05a; } .dot:nth-child(3) { background: #6bd17a; } .code-title { margin-left: 8px; font-family: var(--mono); font-size: 0.78rem; color: var(--faint); } .code-block .code-title { margin-left: 0; } pre { margin: 0; padding: 20px 18px; overflow-x: auto; font-family: var(--mono); font-size: 0.86rem; line-height: 1.65; font-variant-ligatures: common-ligatures; } pre code { background: none; border: none; padding: 0; color: var(--text); } .cmt { color: var(--faint); } .out { color: var(--teal); } .usr { color: var(--violet-2); } /* depth-colored parens, as the engine's browser draws them. In the rainbow palette they're its 9-color rainbow; in the single-accent palettes a ping-pong ramp blended from the active accent pair. */ .rb1 { color: var(--accent); } .rb2 { color: color-mix(in oklch, var(--accent) 75%, var(--accent-b)); } .rb3 { color: color-mix(in oklch, var(--accent) 50%, var(--accent-b)); } .rb4 { color: color-mix(in oklch, var(--accent) 25%, var(--accent-b)); } .rb5 { color: var(--accent-b); } .rb6 { color: color-mix(in oklch, var(--accent) 25%, var(--accent-b)); } .rb7 { color: color-mix(in oklch, var(--accent) 50%, var(--accent-b)); } .rb8 { color: color-mix(in oklch, var(--accent) 75%, var(--accent-b)); } .rb9 { color: var(--accent); } html[data-palette="rainbow"] .rb1 { color: #ed5565; } html[data-palette="rainbow"] .rb2 { color: #fc6e51; } html[data-palette="rainbow"] .rb3 { color: #ffce54; } html[data-palette="rainbow"] .rb4 { color: #a0d468; } html[data-palette="rainbow"] .rb5 { color: #48cfad; } html[data-palette="rainbow"] .rb6 { color: #4fc1e9; } html[data-palette="rainbow"] .rb7 { color: #5d9cec; } html[data-palette="rainbow"] .rb8 { color: #ac92ec; } html[data-palette="rainbow"] .rb9 { color: #ec87c0; } /* the engine's darkened rainbow literals for the light ground */ html[data-theme="light"][data-palette="rainbow"] .rb1 { color: #c21527; } html[data-theme="light"][data-palette="rainbow"] .rb2 { color: #d32704; } html[data-theme="light"][data-palette="rainbow"] .rb3 { color: #d69900; } html[data-theme="light"][data-palette="rainbow"] .rb4 { color: #6da72f; } html[data-theme="light"][data-palette="rainbow"] .rb5 { color: #2daa8a; } html[data-theme="light"][data-palette="rainbow"] .rb6 { color: #1893be; } html[data-theme="light"][data-palette="rainbow"] .rb7 { color: #1661c0; } html[data-theme="light"][data-palette="rainbow"] .rb8 { color: #4b20b6; } html[data-theme="light"][data-palette="rainbow"] .rb9 { color: #b91d75; } .transcript { white-space: pre-wrap; line-height: 1.7; } /* prose transcript wraps instead of scrolling */ /* ---------- bands / sections ---------- */ section { padding: 72px 0; } .band { background: var(--bg-band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .hero { padding-top: 70px; } h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; margin: 0 0 22px; font-weight: 600; } .section-title { text-align: center; margin-bottom: 44px; } .prose { font-size: 1.05rem; color: var(--muted); margin: 0 0 18px; } .prose strong { color: var(--text); } .prose.muted { color: var(--faint); font-size: 0.96rem; } /* ---------- feature grid ---------- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px; transition: border-color 0.15s ease, transform 0.15s ease; } .card:hover { border-color: var(--violet); transform: translateY(-2px); } .card h3 { margin: 0 0 9px; font-size: 1.02rem; color: var(--text); } .card p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.55; } /* ---------- chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 22px; } .chip { font-family: var(--mono); font-size: 0.84rem; background: var(--surface); border: 1px solid var(--border); color: var(--teal); padding: 6px 13px; border-radius: 20px; } .cta-band { text-align: center; } /* vs-vectors two-column contrast */ .vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; } .vs-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px; } .vs-col.them { opacity: 0.78; } .vs-col h3 { margin: 0 0 12px; font-size: 1rem; } .vs-col ul { margin: 0; padding-left: 18px; } .vs-col li { color: var(--muted); font-size: 0.94rem; margin-bottom: 8px; line-height: 1.5; } .vs-col.us { border-color: var(--violet); } .vs-col.us li { color: var(--text); } /* FAQ */ .faq { margin-top: 8px; } .faq details { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 12px; padding: 0 18px; } .faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--violet); font-family: var(--mono); font-size: 1.2rem; } .faq details[open] summary::after { content: "\2212"; } .faq details[open] summary { border-bottom: 1px solid var(--border); } .faq .ans { color: var(--muted); padding: 14px 0 18px; font-size: 0.96rem; line-height: 1.6; } .faq .ans code { font-size: 0.85em; } /* browser-UI mock */ .uimock { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-width: 620px; margin: 0 auto; } .uimock .bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .uimock .url { margin-left: 10px; font-family: var(--mono); font-size: 0.78rem; color: var(--faint); } .uimock pre { padding: 20px 18px; font-size: 0.82rem; line-height: 1.7; } .uimock .pred { color: var(--violet-2); } .uimock .ctx { color: var(--faint); } .uimock .lbl { color: var(--faint); } .uimock .rule { color: var(--teal); } .uimock .arrow { color: var(--faint); } /* page heads + pager */ .page-head { text-align: center; max-width: 760px; margin: 0 auto; padding: 40px 24px 0; } .page-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 10px; } .page-head p { color: var(--muted); margin: 0; } .pager { display: flex; justify-content: space-between; gap: 16px; max-width: 760px; margin: 0 auto; padding: 16px 24px 56px; } .pager a { font-family: var(--mono); color: var(--violet-2); font-size: 0.95rem; } .pager .spacer { color: transparent; } /* ---------- solo page: stats / models / proof ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 18px; text-align: center; } .stat .num { display: block; font-family: var(--mono); font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 600; color: var(--violet-2); letter-spacing: -0.02em; } .stat .num .dim { color: var(--faint); font-weight: 400; } .stat .label { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .models { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; } .model-row { display: grid; gap: 7px; } .model-head { display: flex; justify-content: space-between; align-items: baseline; } .model-name { font-family: var(--mono); font-weight: 600; color: var(--text); } .model-pct { font-family: var(--mono); color: var(--muted); } .bar { height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .bar span { display: block; height: 100%; border-radius: 6px; } .model-io { font-family: var(--mono); font-size: 0.82rem; color: var(--faint); } .proof-grid { display: grid; gap: 24px; margin-top: 12px; } .proof { margin: 0; } .proof img { width: 100%; height: auto; display: block; background: #000; border: 1px solid var(--border); border-radius: 12px; } .proof figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--faint); text-align: center; } @media (max-width: 620px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* comparison table */ .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 18px; } /* the measured table outgrows the 1080px container: bleed its wrap to the viewport edges so wide screens show all twelve columns without scrolling; the overflow-x scroll above stays as the fallback on narrow screens */ .cmp-bleed { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 24px; } /* shown only on small screens, above the measured table */ .scroll-hint { display: none; margin: 0 0 8px; color: var(--faint); font-size: 0.8rem; } .cmp { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .cmp th, .cmp td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .cmp th { color: var(--muted); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; } .cmp td { color: var(--text); } .cmp tbody tr:hover { background: var(--surface); } .cmp-self { background: rgba(167, 139, 250, 0.08); } .cmp-self td { color: var(--violet-2); font-weight: 600; } .cmp-sub { display: block; font-size: 0.8rem; color: var(--faint); font-weight: 400; white-space: normal; } /* the home-page field table holds prose, so let its cells wrap */ #field .cmp th, #field .cmp td { white-space: normal; } #field .cmp td { vertical-align: top; } /* the measured head-to-head table: numeric cells right-aligned, no wrap */ #field .cmp-q td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } #field .cmp-q th { white-space: nowrap; } #field .cmp-q sup { font-size: 0.68em; color: var(--faint); margin-left: 1px; } #field h3 { margin: 34px 0 10px; font-size: 1.1rem; } /* numbered footnotes under the measured table */ #field .fn { margin: 4px 0 18px; padding-left: 22px; color: var(--muted); font-size: 0.85rem; line-height: 1.6; } #field .fn li { margin-bottom: 4px; } /* per-row ranking tints: fastest / middle / slowest measured / did not compete */ #field .cmp-q { --tint-win: rgba(74, 222, 128, 0.10); --tint-mid: rgba(250, 204, 21, 0.08); --tint-low: rgba(251, 146, 60, 0.10); --tint-out: rgba(248, 113, 113, 0.07); } #field .cmp-q td.c-win { background: var(--tint-win); color: #6ee7a0; } #field .cmp-q td.c-mid { background: var(--tint-mid); color: #e8d06a; } #field .cmp-q td.c-low { background: var(--tint-low); color: #f0a36a; } #field .cmp-q td.c-out { background: var(--tint-out); color: #c98a8a; } .legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: 0.82rem; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .legend .l-win { background: rgba(74, 222, 128, 0.55); } .legend .l-mid { background: rgba(250, 204, 21, 0.50); } .legend .l-low { background: rgba(251, 146, 60, 0.55); } .legend .l-out { background: rgba(248, 113, 113, 0.45); } /* multiplier calc + callout */ .calc { margin: 8px 0 26px; padding-left: 20px; color: var(--muted); font-size: 1rem; line-height: 1.75; } .calc li { margin-bottom: 6px; } .calc strong { color: var(--text); } .multiplier { text-align: center; padding: 30px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .mx-num { display: block; font-family: var(--mono); font-weight: 600; font-size: clamp(2.4rem, 7vw, 3.6rem); letter-spacing: -0.02em; } .mx-label { display: block; margin-top: 8px; color: var(--muted); font-size: 0.9rem; } /* developer's note */ .dev-note { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; } .dev-note .eyebrow { margin: 0 0 12px; text-align: center; color: var(--muted); } .eyebrow .sc { font-size: 0.8em; } .dev-note p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin: 0 0 14px; } .dev-note p:last-child { margin-bottom: 0; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 40px 0; background: var(--bg); } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; } .footer-links { display: flex; gap: 22px; } .footer-links a { color: var(--muted); font-size: 0.9rem; } .footer-links a:hover { color: var(--text); } .footer-note { color: var(--faint); font-size: 0.85rem; margin: 0; width: 100%; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; } .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { /* header: keep every link; wrap to a second row instead of hiding. Static (not sticky) so the taller header doesn't eat the viewport. */ .site-header { position: static; flex-wrap: wrap; justify-content: center; row-gap: 10px; padding: 12px 16px; } .site-nav { flex-wrap: wrap; justify-content: center; gap: 8px 16px; } .site-nav a { font-size: 0.86rem; } .site-nav .nav-gh { padding: 4px 11px; } .grid { grid-template-columns: 1fr; } section { padding: 52px 0; } .footer-inner { flex-direction: column; align-items: flex-start; } } /* the measured table on small screens: tighter type, and the task + Vaelii columns stay pinned while the engine columns scroll under them. The task column gets a FIXED width (--taskw) so the Vaelii column's sticky offset can match it exactly. */ @media (max-width: 700px) { #field .cmp-q { font-size: 0.78rem; --taskw: clamp(116px, 34vw, 160px); } #field .cmp-q th, #field .cmp-q td { padding: 8px 9px; } #field .cmp-q th:first-child, #field .cmp-q td:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg); width: var(--taskw); min-width: var(--taskw); max-width: var(--taskw); white-space: normal; box-shadow: 1px 0 0 var(--border); } #field .cmp-q th:nth-child(2), #field .cmp-q td:nth-child(2) { position: sticky; left: var(--taskw); z-index: 2; background: var(--bg); box-shadow: 1px 0 0 var(--border); } /* sticky cells must paint opaquely or the scrolling cells show through: same tint vars as above, layered over an opaque --bg */ #field .cmp-q td.c-win:nth-child(2) { background: linear-gradient(var(--tint-win), var(--tint-win)) var(--bg); } #field .cmp-q td.c-mid:nth-child(2) { background: linear-gradient(var(--tint-mid), var(--tint-mid)) var(--bg); } #field .cmp-q td.c-low:nth-child(2) { background: linear-gradient(var(--tint-low), var(--tint-low)) var(--bg); } #field .cmp-q td.c-out:nth-child(2) { background: linear-gradient(var(--tint-out), var(--tint-out)) var(--bg); } .scroll-hint { display: block; } }