/* Color tokens adapted from DESIGN-linear.app.md (single lavender accent + a surface ladder for hierarchy). Light is the default palette; dark is an override applied to the same tokens when #theme-toggle is checked. Pure CSS (checkbox-hack) — no JavaScript. */ :root { --color-primary: #4c56d6; --color-primary-hover: #3c46b8; --color-primary-focus: #4c56d6; --color-ink: #16171a; --color-ink-muted: #3f4147; --color-ink-subtle: #6b7280; --color-ink-tertiary: #9aa0aa; --color-canvas: #ffffff; --color-surface-1: #f7f8fa; --color-surface-2: #f0f1f5; --color-surface-3: #eceef3; --color-surface-4: #e6e8ef; --color-hairline: #e5e7eb; --color-hairline-strong: #d1d5db; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; --space-section: 80px; --space-section-mobile: 48px; --max-width: 1120px; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; } /* Dark mode override: cascades to every descendant via custom properties */ #theme-toggle:checked ~ .top-nav, #theme-toggle:checked ~ .hero, #theme-toggle:checked ~ main, #theme-toggle:checked ~ .site-footer { --color-primary: #5e6ad2; --color-primary-hover: #828fff; --color-primary-focus: #5e69d1; --color-ink: #f7f8f8; --color-ink-muted: #d0d6e0; --color-ink-subtle: #8a8f98; --color-ink-tertiary: #62666d; --color-canvas: #010102; --color-surface-1: #0f1011; --color-surface-2: #141516; --color-surface-3: #18191a; --color-surface-4: #191a1b; --color-hairline: #23252a; --color-hairline-strong: #34343a; } /* Safety net for short pages on tall viewports: keeps the raw background (outside the sibling-override chain above) from showing a light strip below the footer in dark mode. Harmlessly ignored by browsers without :has() support — light mode is still the default. */ body:has(#theme-toggle:checked) { background: #010102; } * { box-sizing: border-box; } .theme-toggle-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-toggle-label { display: inline-flex; align-items: center; cursor: pointer; flex: none; } .theme-toggle-track { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 52px; height: 28px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-hairline); } .theme-toggle-icon { position: relative; z-index: 1; color: var(--color-ink-subtle); } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--color-primary); transition: left 0.2s ease; } #theme-toggle:checked ~ .top-nav .theme-toggle-thumb { left: 26px; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-ink-muted); background: var(--color-canvas); } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* Top nav (pinned) */ .top-nav { position: sticky; top: 0; z-index: 10; background: var(--color-canvas); border-bottom: 1px solid var(--color-hairline); } .top-nav-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-primary); flex: none; } .brand-name { font-size: 18px; font-weight: 700; color: var(--color-ink); } .nav-links { display: flex; flex-wrap: wrap; gap: 6px 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .nav-links a { font-size: 15px; font-weight: 500; color: var(--color-ink-subtle); text-decoration: none; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--color-primary-hover); } .nav-links a.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } main section[id], .hero { scroll-margin-top: 72px; } /* Hero */ .hero { background: var(--color-canvas); padding: 64px 0 56px; } .hero-title { font-size: 40px; font-weight: 800; line-height: 1.2; color: var(--color-ink); margin: 0 0 16px; max-width: 720px; } .hero-title .accent { color: var(--color-primary); } .hero-tagline { font-size: 19px; font-weight: 600; color: var(--color-ink); margin: 0 0 10px; padding-bottom: 12px; border-bottom: 3px solid var(--color-primary); display: inline-block; } .hero-desc { font-size: 16px; line-height: 1.7; color: var(--color-ink-subtle); max-width: 640px; margin: 20px 0 0; } .hero-highlights { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 36px; } .highlight { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .highlight-label { font-size: 14px; color: var(--color-ink-subtle); } /* Icon tiles (shared) — single lavender accent, differentiated by surface lift */ .icon-tile { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); color: var(--color-primary); border: 1px solid var(--color-hairline); flex: none; } .icon-blue { background: var(--color-surface-1); } .icon-green { background: var(--color-surface-2); } .icon-orange { background: var(--color-surface-3); } .icon-purple { background: var(--color-surface-4); } /* Sections */ .section { padding: var(--space-section) 0; background: var(--color-canvas); } .section-alt { background: var(--color-surface-1); } .eyebrow { font-size: 14px; font-weight: 700; color: var(--color-primary); margin: 0 0 8px; } .section-title { font-size: 26px; font-weight: 800; line-height: 1.35; color: var(--color-ink); margin: 0 0 32px; max-width: 620px; } .about-copy p { font-size: 16px; line-height: 1.75; color: var(--color-ink-muted); max-width: 720px; margin: 0 0 16px; } .about-copy p:last-child { margin-bottom: 0; } /* Feature / principle cards */ .feature-grid, .principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .feature-card, .principle-card { background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 24px 20px; } .section-alt .feature-card { background: var(--color-surface-2); } .feature-card .icon-tile, .principle-card .icon-tile { margin-bottom: 16px; } .feature-card h3, .principle-card h3 { font-size: 16px; font-weight: 700; color: var(--color-ink); margin: 0 0 8px; } .feature-card p, .principle-card p { font-size: 14px; line-height: 1.6; color: var(--color-ink-subtle); margin: 0; } /* Process steps */ .process-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .process-card { position: relative; background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); padding: 24px 20px; } .process-card:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -14px; width: 20px; height: 20px; border-top: 2px solid var(--color-hairline-strong); border-right: 2px solid var(--color-hairline-strong); transform: rotate(45deg); } .process-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-surface-3); color: var(--color-primary); font-size: 15px; font-weight: 700; margin-bottom: 16px; } .process-card h3 { font-size: 16px; font-weight: 700; color: var(--color-ink); margin: 0 0 8px; } .process-card p { font-size: 14px; line-height: 1.6; color: var(--color-ink-subtle); margin: 0; } /* Contact */ .contact-list { max-width: 560px; } .contact-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-hairline); } .contact-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-primary); flex: none; } .contact-label { flex: 0 0 88px; color: var(--color-ink-subtle); font-size: 14px; } .contact-value { flex: 1; color: var(--color-ink); font-size: 16px; font-weight: 500; } /* Footer */ .site-footer { background: var(--color-canvas); border-top: 1px solid var(--color-hairline); padding: 32px 24px; text-align: center; color: var(--color-ink-subtle); font-size: 14px; line-height: 1.6; } .site-footer p { margin: 4px 0; } /* Responsive */ @media (max-width: 900px) { .feature-grid, .principle-grid, .process-grid { grid-template-columns: repeat(2, 1fr); } .process-card:not(:last-child)::after { display: none; } } @media (max-width: 700px) { .top-nav-inner { justify-content: flex-start; } .nav-links { width: 100%; gap: 4px 16px; } .hero-title { font-size: 30px; } } @media (max-width: 480px) { :root { --space-section: var(--space-section-mobile); } .brand-name { font-size: 15px; } .nav-links a { font-size: 14px; } .hero { padding: 40px 0 32px; } .hero-title { font-size: 24px; } .hero-tagline { font-size: 16px; } .hero-highlights { gap: 20px; } .feature-grid, .principle-grid, .process-grid { grid-template-columns: 1fr; } .contact-row { flex-wrap: wrap; } .contact-label { flex: 0 0 auto; } }