/* F46 - static home page: brand + Login/Contact nav, one hero (tag line + sub text), copyright footer. No framework, no build step; served by Caddy at the apex. F54 P3 (D9a): colours come from the generated /home-assets/tokens.css (linked before this file); follows the OS. This file declares no colour literal of its own - the short aliases below only re-export the semantic tier for legal.css and the rules that follow. */ /* Same typeface as the SPAs: Inter Variable (self-hosted copy of @fontsource-variable/inter). */ @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/home-assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/home-assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* No colour here: every colour is a tokens.css semantic name. Never alias one under a token's own name (--muted, --card, ...) - :root[data-theme] in tokens.css outranks a plain :root and the alias loses in dark. --brand stays untouched too: tokens.css reads it as the SPA hue-triple hook. */ --max: 1080px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 16px/1.6 "Inter Variable", system-ui, sans-serif; color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 1.1rem; } p { margin: 0; } .skip { position: absolute; left: -9999px; top: 0; background: var(--primary); color: var(--primary-foreground); padding: .5rem 1rem; border-radius: 0 0 8px 0; } .skip:focus { left: 0; z-index: 10; } .nav { width: 100%; max-width: var(--max); margin: 0 auto; padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--foreground); font-size: 1.1rem; } .brand img { height: 20px; width: auto; display: block; } .brand .brand-dark { display: none; } :root[data-theme="dark"] .brand .brand-light { display: none; } :root[data-theme="dark"] .brand .brand-dark { display: block; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .brand .brand-light { display: none; } :root[data-theme="system"] .brand .brand-dark { display: block; } } .nav nav { display: flex; align-items: center; gap: 16px; } @media (min-width: 768px) { .nav { padding: 1.25rem 2rem; } .nav nav { gap: 36px; } } /* Pill buttons: one size on every public page. The border is --primary so the brand hue carries it - the requested blue is that token's default value. */ .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: 40px; padding: 0 27px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; line-height: 1; border: 1px solid var(--primary); background-clip: padding-box; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { background: color-mix(in srgb, var(--primary) 80%, transparent); } .btn-outline { background: var(--background); color: var(--foreground); } .btn-outline:hover { background: var(--muted); } .btn:focus-visible, .brand:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); border-color: var(--ring); } main { flex: 1; display: flex; align-items: center; } .hero { width: 100%; max-width: 820px; margin: 0 auto; padding: 3rem 1.25rem 4rem; text-align: center; } .lead { color: var(--muted-foreground); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.65; } .cta { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; } /* The separator is CSS, not markup, so a screen reader never announces it between links. */ .footer nav { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-left: 1.25rem; } .footer nav a { color: var(--muted-foreground); text-decoration: none; } .footer nav a + a::before { content: "ยท"; margin: 0 .6rem; color: var(--muted-foreground); } .footer nav a:hover { color: var(--primary); } .footer { border-top: 1px solid var(--border); padding: 1.25rem; text-align: center; color: var(--muted-foreground); font-size: .9rem; }