/* Theme variables Default theme: "blue-old" (restores old colour scheme). Development switch: add class "theme-purple" to to preview the purple theme e.g. . For deploy, keep the values you want as the defaults below. */ :root { color-scheme: light dark; /* blue-old (default) */ --bg: #f7f5ff; --bg-dark: #131321; --text: #14121f; --text-muted: #4c4763; --accent: #6b4efc; --accent-strong: #5738f0; --accent-soft: rgba(107, 78, 252, 0.12); --success: #2eaf6d; --danger: #e85c5c; --surface: rgba(255, 255, 255, 0.75); --surface-dark: rgba(24, 22, 45, 0.65); --border: rgba(84, 73, 129, 0.2); --font-body: "Inter", "Segoe UI", "SF Pro Text", system-ui, -apple-system, sans-serif; --shadow: 0 20px 60px rgba(40, 24, 120, 0.18); --radius-large: 28px; --radius-medium: 18px; --radius-small: 10px; --transition: 200ms ease; } /* purple theme (original current design). Toggle this in dev by adding the class to */ html.theme-purple { --bg: #f8f3ff; --bg-dark: #1a1026; --text: #1b1430; --text-muted: #5b4a78; --accent: #8b3deb; --accent-strong: #6b1fd1; --accent-soft: rgba(139, 61, 235, 0.16); --success: #2eaf6d; --danger: #e85c5c; --surface: rgba(255, 255, 255, 0.78); --surface-dark: rgba(28, 16, 52, 0.68); --border: rgba(116, 70, 178, 0.24); --shadow: 0 20px 60px rgba(76, 29, 149, 0.2); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); background: radial-gradient(circle at top, var(--accent-soft), transparent 60%), var(--bg); color: var(--text); display: flex; flex-direction: column; align-items: stretch; padding-bottom: clamp(80px, 12vw, 140px); } @media (prefers-color-scheme: dark) { :root { /* blue-old dark */ --bg: #0f0f18; --text: #f9f7ff; --text-muted: #c1bdd8; --border: rgba(179, 166, 255, 0.18); --surface: rgba(18, 18, 30, 0.65); --shadow: 0 12px 50px rgba(0, 0, 0, 0.45); } body { background: radial-gradient(circle at top, rgba(107, 78, 252, 0.2), transparent 65%), var(--bg); } } main.shell { width: min(720px, 92vw); margin: clamp(24px, 6vw, 80px) auto; background: var(--surface); backdrop-filter: blur(18px); border-radius: var(--radius-large); padding: clamp(32px, 6vw, 56px); box-shadow: var(--shadow); } .hero { text-align: center; margin-bottom: clamp(28px, 5vw, 48px); } .hero .eyebrow { text-transform: uppercase; letter-spacing: 0.28rem; color: var(--accent); font-size: 0.78rem; margin: 0 0 12px; } .hero h1 { font-size: clamp(2rem, 4vw, 3rem); padding: clamp(28px, 6vw, 40px); line-height: 1.05; } .hero .lede { font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--text-muted); margin: 0; } .hero .actions { margin-top: clamp(20px, 5vw, 36px); } .status-panel { margin: 0; padding: clamp(16px, 4vw, 24px); border-radius: var(--radius-medium); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); display: grid; gap: 10px; text-align: center; } .status-indicator { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-strong); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .status-indicator[data-state="active"] { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); } .status-indicator[data-state="error"] { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); } .status-panel p { margin: 0; font-size: 0.95rem; color: var(--text-muted); } .status-note { font-size: 0.85rem; color: var(--accent-strong); } .install-banner { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + clamp(12px, 5vw, 28px)); transform: translateX(-50%); z-index: 10; width: min(440px, calc(100vw - 24px)); padding: clamp(14px, 4vw, 20px) clamp(16px, 5vw, 22px); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: var(--shadow); display: grid; gap: 10px; text-align: center; } .install-banner.is-dismissed { display: none !important; } @supports (backdrop-filter: blur(12px)) { .install-banner { backdrop-filter: blur(12px); background: color-mix(in srgb, var(--surface) 76%, transparent); } } .install-banner__cta { width: 100%; } .install-banner__dismiss { background: none; border: none; color: var(--accent-strong); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 0 0 2px; border-radius: 999px; } .install-banner__dismiss:hover { color: color-mix(in srgb, var(--accent-strong) 70%, white 30%); } .install-banner__dismiss:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, white 55%); outline-offset: 2px; border-radius: 4px; } .install-ios-hint { margin-top: 12px; font-size: 0.9rem; color: var(--accent-strong); } .install-ios-hint strong { font-weight: 600; } .countdown { margin: clamp(28px, 6vw, 48px) 0; padding: clamp(24px, 5vw, 32px); border-radius: var(--radius-medium); background: linear-gradient(145deg, rgba(107, 78, 252, 0.12), rgba(51, 35, 140, 0.18)); display: grid; gap: clamp(18px, 4vw, 24px); } .countdown-card { background: color-mix(in srgb, var(--surface) 94%, transparent); border-radius: var(--radius-medium); padding: clamp(20px, 4vw, 28px); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); text-align: center; display: grid; gap: 10px; } .countdown-card h2 { margin: 0; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--text-muted) 80%, transparent); } .timer { font-variant-numeric: tabular-nums; font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 700; letter-spacing: 0.06em; margin: 0 auto; } .next-time { margin: 0; font-size: 0.95rem; color: var(--text-muted); } @media (min-width: 620px) { .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .actions .primary { min-width: 170px; } .primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 14px 24px; font-size: 1rem; font-weight: 600; border-radius: 999px; border: none; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: white; box-shadow: 0 14px 28px rgba(87, 56, 240, 0.28); text-decoration: none; } .primary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, white 60%); outline-offset: 2px; } .primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(87, 56, 240, 0.3); } .primary:disabled { cursor: progress; opacity: 0.65; transform: none; box-shadow: none; } .preview-copy { margin: 0; font-size: 0.95rem; color: var(--text-muted); } .preview-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent-strong); text-decoration: underline; cursor: pointer; } .preview-link:hover { color: color-mix(in srgb, var(--accent-strong) 70%, white 30%); } .preview-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, white 50%); outline-offset: 4px; border-radius: 6px; } .tips { margin-top: clamp(32px, 6vw, 48px); padding: clamp(20px, 5vw, 28px); border-radius: var(--radius-medium); border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--surface) 85%, transparent); } .tips h2 { margin: 0 0 12px; font-size: 1.05rem; } .tips ul { margin: 0; padding-left: 20px; color: var(--text-muted); display: grid; gap: 8px; } .tips li { line-height: 1.5; } .footer { margin: 0 auto clamp(24px, 6vw, 48px); text-align: center; color: var(--text-muted); font-size: 0.85rem; } @media (max-width: 640px) { main.shell { width: min(94vw, 520px); padding: clamp(24px, 5vw, 36px); border-radius: var(--radius-medium); } .actions { width: 100%; } .actions .primary { width: 100%; } } @media (max-width: 560px) { main.shell { width: 100vw; margin: 0; border-radius: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }