/* ========================================================================= home.css — the KDCube homepage (index.html). Self-contained: index.html is a standalone landing page and deliberately does NOT load styles.css or script.js (no shared header/nav). Every class here is `hv-` prefixed so this file can never collide with the site-wide stylesheet if the two are ever loaded together. Theming: the pre-paint script in index.html always stamps an explicit data-theme (saved pref -> OS pref -> light), so light is the base palette and [data-theme="dark"] overrides it. ========================================================================= */ :root { /* Colours and fonts come from the site stylesheet (styles.css), so the homepage reads as the same product as every other page and themes with it via [data-theme]. The --hv-* names are kept only as thin aliases onto the shared tokens; nothing here defines its own palette. Only tokens the site doesn't provide (the fixed terminal code block, the dark-mode logo plate, scrim/shadow) stay local. */ --hv-bg: var(--bg); --hv-surface: var(--card-bg); --hv-surface-alt: var(--bg-alt); --hv-border: var(--card-border); --hv-text: var(--text); --hv-text-dim: var(--text-dim); --hv-text-muted: var(--text-muted); --hv-accent: var(--accent); --hv-accent-text: var(--accent); --hv-accent-solid: var(--accent); --hv-accent-dim: rgba(var(--accent-rgb), 0.10); --hv-accent-line: rgba(var(--accent-rgb), 0.32); --hv-accent-contrast: #FFFFFF; --hv-warn: var(--color-warn); /* The code block reads as a terminal: fixed dark in both themes. */ --hv-code-bg: #0E172B; --hv-code-border: #1E293B; --hv-code-text: #F9FAFC; --hv-code-dim: #94A3B8; --hv-scrim: rgba(13, 20, 36, 0.5); --hv-shadow: 0 24px 48px rgba(13, 30, 44, 0.12); /* Partner logos sit directly on the page in light mode. */ --hv-logo-plate: transparent; --hv-logo-plate-pad: 0; --hv-font: var(--font); --hv-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* Dark mode: the colour tokens above already flip through the site stylesheet. Only the homepage-specific bits the site doesn't carry are overridden here — a dark ground for white button text, a heavier scrim/shadow, and the light plate that keeps the five partner logos legible on a dark background. */ [data-theme="dark"] { --hv-accent-contrast: #06101E; --hv-scrim: rgba(6, 16, 30, 0.65); --hv-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); --hv-logo-plate: #FFFFFF; --hv-logo-plate-pad: 6px 10px; } * { margin: 0; padding: 0; box-sizing: border-box; } body.hv-home { background: var(--hv-bg); color: var(--hv-text); font-family: var(--hv-font); font-size: 15px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; /* styles.css makes a sticky-footer flex column; the homepage keeps its own block layout, so opt back out of that here. */ display: block; /* full-bleed bands use 50vw (which counts the scrollbar); clip the few px of horizontal overshoot so it never shows a horizontal scrollbar. */ overflow-x: hidden; } .hv-home :focus-visible { outline: 2px solid var(--hv-accent-text); outline-offset: 2px; border-radius: 4px; } .hv-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--hv-accent-solid); color: var(--hv-accent-contrast); padding: 10px 16px; border-radius: 0 0 6px 0; font-size: 14px; font-weight: 600; text-decoration: none; } .hv-skip-link:focus { left: 0; } .hv-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* === LAYOUT === */ .hv-page { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; min-height: 100vh; max-width: 1400px; margin: 0 auto; } .hv-sidebar-left, .hv-sidebar-right { padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hv-border) transparent; } .hv-main { padding: 32px 40px; border-left: 1px solid var(--hv-border); border-right: 1px solid var(--hv-border); min-height: 100vh; min-width: 0; } /* === LEFT SIDEBAR CARDS === */ .hv-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--hv-surface); border: 1px solid var(--hv-border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.2s; } .hv-card:hover { border-color: var(--hv-text-muted); } .hv-card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; } .hv-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-accent-text); } .hv-card-toggle { color: var(--hv-text-dim); font-size: 18px; line-height: 1; transition: transform 0.2s; } .hv-card[aria-expanded="true"] .hv-card-toggle { transform: rotate(45deg); } /* The cards are