/* ---- Theme tokens --------------------------------------------------------- Defaults are light. Dark values apply when either the OS prefers dark (and the user hasn't chosen) or [data-theme="dark"] is set on . The explicit data-theme attribute always wins over the media query. */ :root { --bg: #ffffff; --surface: #f7f8fa; --card: #ffffff; --fg: #111827; --muted: #5b6472; --accent: #1b75bb; /* Anodized brand blue */ --accent-strong: #15629c; --border: #e6e8eb; --shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06); --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(27, 117, 187, .14), transparent 70%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1220; --surface: #111827; --card: #131b2b; --fg: #f3f4f6; --muted: #9aa4b2; --accent: #4aa3e8; /* brand blue, brightened for dark */ --accent-strong: #6bb6ef; --border: #26303f; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(74, 163, 232, .20), transparent 70%); } } :root[data-theme="dark"] { --bg: #0b1220; --surface: #111827; --card: #131b2b; --fg: #f3f4f6; --muted: #9aa4b2; --accent: #4aa3e8; /* brand blue, brightened for dark */ --accent-strong: #6bb6ef; --border: #26303f; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); --hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(74, 163, 232, .20), transparent 70%); } /* ---- Base ----------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } .wrap { max-width: 960px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; width: 100%; } main { flex: 1 0 auto; } a { color: var(--accent-strong); } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; } /* ---- Utilities ------------------------------------------------------------ */ .visually-hidden { 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 { position: fixed; top: 1rem; right: 1rem; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; display: inline-grid; place-items: center; box-shadow: var(--shadow); transition: border-color .15s ease, background .15s ease; } .theme-toggle:hover { border-color: var(--accent); } /* Sun in light, moon in dark — drawn with a single element. */ .theme-toggle__icon { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 -11px 0 -8px var(--accent), 0 11px 0 -8px var(--accent), -11px 0 0 -8px var(--accent), 11px 0 0 -8px var(--accent), -8px -8px 0 -8px var(--accent), 8px 8px 0 -8px var(--accent), -8px 8px 0 -8px var(--accent), 8px -8px 0 -8px var(--accent); transition: box-shadow .2s ease; } :root[data-theme="dark"] .theme-toggle__icon, :root:not([data-theme="light"]) .theme-toggle__icon { background: transparent; box-shadow: inset -6px -3px 0 0 var(--accent); transform: rotate(-25deg); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle__icon { background: var(--accent); box-shadow: 0 -11px 0 -8px var(--accent), 0 11px 0 -8px var(--accent), -11px 0 0 -8px var(--accent), 11px 0 0 -8px var(--accent), -8px -8px 0 -8px var(--accent), 8px 8px 0 -8px var(--accent), -8px 8px 0 -8px var(--accent), 8px -8px 0 -8px var(--accent); transform: none; } } /* ---- Hero ----------------------------------------------------------------- */ .hero { text-align: center; padding-top: 3.5rem; padding-bottom: 3rem; background: var(--hero-glow); } .hero__title { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 800; margin: 0 0 .5rem; } /* Anodized wordmark — brand blue */ .anodize-text { color: var(--accent); } .hero__tagline { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 600; color: var(--fg); margin: 0 0 1.25rem; } .hero__lead { max-width: 42rem; margin: 0 auto; color: var(--muted); font-size: 1.075rem; } /* ---- Sections ------------------------------------------------------------- */ .section { padding-top: 3rem; padding-bottom: 1rem; } .section__title { text-align: center; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; margin: 0 0 2rem; } /* ---- Product list --------------------------------------------------------- */ .products { display: grid; gap: 1.25rem; max-width: 720px; margin: 0 auto; } .product { display: flex; align-items: center; gap: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .product:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .product__icon { width: 72px; height: 72px; border-radius: 16px; box-shadow: var(--shadow); flex: 0 0 auto; } .product__body { flex: 1 1 auto; min-width: 0; } .product__name { font-size: 1.3rem; font-weight: 700; margin: 0 0 .2rem; } .product__tagline { color: var(--accent-strong); font-weight: 600; font-size: .95rem; margin: 0 0 .4rem; } .product__desc { margin: 0; color: var(--muted); font-size: .98rem; } .product__arrow { flex: 0 0 auto; color: var(--muted); font-size: 1.4rem; transition: transform .15s ease, color .15s ease; } .product:hover .product__arrow { color: var(--accent); transform: translateX(3px); } @media (max-width: 520px) { .product { flex-wrap: wrap; } .product__arrow { display: none; } } /* ---- Footer --------------------------------------------------------------- */ .footer { flex-shrink: 0; border-top: 1px solid var(--border); margin-top: 3.5rem; padding-top: 2rem; padding-bottom: 3rem; text-align: center; } .footer__copy { color: var(--muted); font-size: .85rem; margin: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }