/* Noc: the app's own look, rounded type and one amber pad glowing. Light or dark follows the system unless the visitor picks one with the header's toggle (see theme.js), which sets data-theme on . The watch itself stays black in both. */ :root { color-scheme: light; --bg: #f5f5f7; --fg: #1d1d1f; --muted: #5e5e66; --line: rgba(0, 0, 0, 0.1); --surface: #fff; --card-top: #fff; --card-bottom: #fbfbfc; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04); --glow: rgba(255, 159, 10, 0.16); --accent: #ff9f0a; --accent-ink: #1a1000; --accent-text: #a85a00; --accent-shadow: 0 8px 24px rgba(255, 140, 0, 0.25); --headline-glow: none; --pad-light: linear-gradient(180deg, #f2f2f2, #d9d9d9); --pad-dark: linear-gradient(180deg, #474747, #333); --font-display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 22px; --band: #d4d4d9; --case-shadow: 0 30px 60px rgba(0, 0, 0, 0.22); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #050505; --fg: #f5f5f7; --muted: #a1a1a6; --line: rgba(255, 255, 255, 0.1); --surface: #141414; --card-top: #171717; --card-bottom: #0e0e0e; --card-shadow: none; --glow: rgba(255, 159, 10, 0.13); --accent-text: #ffb340; --accent-shadow: 0 8px 30px rgba(255, 159, 10, 0.3); --headline-glow: 0 0 40px rgba(255, 159, 10, 0.45); --band: #1b1b1c; --case-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #050505; --fg: #f5f5f7; --muted: #a1a1a6; --line: rgba(255, 255, 255, 0.1); --surface: #141414; --card-top: #171717; --card-bottom: #0e0e0e; --card-shadow: none; --glow: rgba(255, 159, 10, 0.13); --accent-text: #ffb340; --accent-shadow: 0 8px 30px rgba(255, 159, 10, 0.3); --headline-glow: 0 0 40px rgba(255, 159, 10, 0.45); --band: #1b1b1c; --case-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); } body { background: radial-gradient(60rem 40rem at 78% 8%, var(--glow), transparent 60%), var(--bg); background-repeat: no-repeat; } .hero h1 { font-weight: 800; } .hero h1 em { font-style: normal; color: var(--accent-text); text-shadow: var(--headline-glow); } .store { background: var(--accent); color: var(--accent-ink); box-shadow: var(--accent-shadow); } .watch-body::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 159, 10, 0.25), transparent 70%); filter: blur(30px); z-index: -2; } .card, .steps li, .promise, .contact { border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); box-shadow: var(--card-shadow); } .card:hover { border-color: rgba(255, 159, 10, 0.35); } .steps li::before { box-shadow: 0 0 20px rgba(255, 159, 10, 0.5); } .promise { background: radial-gradient(30rem 16rem at 0% 0%, var(--glow), transparent 70%), var(--card-bottom); } /* Increased contrast: secondary text and hairlines closer to the text colour. */ @media (prefers-contrast: more) { :root { --muted: #2c2c30; --line: rgba(0, 0, 0, 0.45); --accent-text: #7a4100; } :root[data-theme="dark"] { --muted: #d8d8dc; --line: rgba(255, 255, 255, 0.45); --accent-text: #ffc266; } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muted: #d8d8dc; --line: rgba(255, 255, 255, 0.45); --accent-text: #ffc266; } }