/* Weather Studio — modern, minimal shared design system. Loaded by every Weather Studio page. Owns brand tokens (extracted from the Weather Studio app), base document styling, a slim blurred header, the page title block, shared content typography, a polished centered footer, responsive conventions, dark mode, and reduced-motion handling. Pages opt in with and add a page-specific stylesheet. Direction: a calm, modern product/legal page — strong but restrained type, generous whitespace, subtle accent color, hairline separators, no pills, badges, or decorative clutter. */ :root { color-scheme: light dark; /* Brand accent — Weather Studio indigo (from App AccentColor) */ --ws-blue: #5447D1; --ws-blue-hover: #3E31BC; /* Minimal surfaces */ --ws-bg: #FFFFFF; --ws-bg-top: #F4F6FC; --ws-header-bg: rgba(255, 255, 255, 0.72); --ws-footer-bg: rgba(20, 22, 40, 0.028); --ws-callout-bg: rgba(23, 26, 46, 0.04); --ws-callout-border: rgba(23, 26, 46, 0.08); --ws-text: #1D1D1F; --ws-text-secondary: #6E6E73; --ws-divider: rgba(23, 26, 46, 0.12); } @media (prefers-color-scheme: dark) { :root { --ws-blue: #9A8CFF; --ws-blue-hover: #B4A9FF; --ws-bg: #0B0C10; --ws-bg-top: #12141C; --ws-header-bg: rgba(11, 12, 16, 0.7); --ws-footer-bg: rgba(255, 255, 255, 0.03); --ws-callout-bg: rgba(255, 255, 255, 0.05); --ws-callout-border: rgba(255, 255, 255, 0.08); --ws-text: #F5F5F7; --ws-text-secondary: #9B9BA4; --ws-divider: rgba(255, 255, 255, 0.14); } } /* MARK: Base document */ html { scroll-behavior: smooth; } body.ws { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; background: var(--ws-bg); background-image: linear-gradient(180deg, var(--ws-bg-top) 0%, var(--ws-bg) 260px); background-repeat: no-repeat; color: var(--ws-text); text-align: left; margin: 0; padding: 0; min-height: 100vh; display: block; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.ws a { color: var(--ws-blue); text-decoration: none; transition: color 0.2s ease; } body.ws a:hover { color: var(--ws-blue-hover); text-decoration: underline; } body.ws a:focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 2px; border-radius: 4px; } /* MARK: Skip link */ .ws-skip { position: absolute; left: -9999px; top: 0; padding: 8px 14px; background: var(--ws-text); color: var(--ws-bg); font-size: 14px; font-weight: 600; border-radius: 0 0 8px 0; z-index: 100; } .ws-skip:focus { left: 0; } /* MARK: Slim header */ .ws-header { position: sticky; top: 0; z-index: 50; background: var(--ws-header-bg); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); border-bottom: 1px solid var(--ws-divider); } .ws-header-inner { max-width: 800px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .ws-brand { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; color: var(--ws-text); } .ws-brand:hover { color: var(--ws-blue); text-decoration: none; } .ws-header-nav { display: flex; align-items: center; gap: 22px; } .ws-header-nav a { font-size: 14px; font-weight: 500; color: var(--ws-text-secondary); } .ws-header-nav a:hover { color: var(--ws-blue); text-decoration: none; } /* MARK: Main column */ .ws-main { max-width: 800px; margin: 0 auto; padding: 48px 24px 72px; } /* MARK: Page title block */ .ws-page-header { padding-bottom: 28px; border-bottom: 1px solid var(--ws-divider); } .ws-title { margin: 0 0 18px; font-size: clamp(34px, 4.5vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--ws-text); text-wrap: balance; } .ws-statement { margin: 0 0 10px; font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--ws-text); } .ws-intro { margin: 0 0 16px; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--ws-text-secondary); } .ws-meta { margin: 0; font-size: 13px; color: var(--ws-text-secondary); } /* MARK: Content typography */ .ws-content h2 { margin: 44px 0 12px; font-size: 23px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; color: var(--ws-text); } .ws-content h2:first-of-type { margin-top: 36px; } .ws-content h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 650; line-height: 1.3; color: var(--ws-text); } .ws-content p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: var(--ws-text); } .ws-content p:last-child { margin-bottom: 0; } .ws-content ul { margin: 0 0 16px; padding-left: 24px; font-size: 17px; line-height: 1.65; color: var(--ws-text); } .ws-content li { margin-bottom: 8px; } .ws-content li:last-child { margin-bottom: 0; } /* MARK: Footer */ .ws-footer { margin-top: 48px; border-top: 1px solid var(--ws-divider); background: var(--ws-footer-bg); } .ws-footer-inner { max-width: 800px; margin: 0 auto; padding: 40px 24px 44px; text-align: center; } .ws-footer-brand { display: block; margin: 0 0 14px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; color: var(--ws-text); } .ws-footer-brand:hover { color: var(--ws-blue); text-decoration: none; } .ws-footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .ws-footer-nav a { font-size: 14px; font-weight: 500; color: var(--ws-text-secondary); } .ws-footer-nav a:hover { color: var(--ws-blue); text-decoration: none; } .ws-footer-nav a + a { margin-left: 12px; } .ws-footer-nav a + a::before { content: "·"; margin-right: 12px; color: var(--ws-text-secondary); } .ws-footer-copy { margin: 14px 0 0; font-size: 13px; color: var(--ws-text-secondary); } /* MARK: Responsive */ @media (max-width: 480px) { .ws-header-inner { padding: 12px 16px; } .ws-header-nav { gap: 16px; } .ws-header-nav a { font-size: 13px; } .ws-main { padding: 32px 20px 56px; } .ws-page-header { padding-bottom: 24px; } .ws-footer-inner { padding: 32px 20px 36px; } } /* MARK: Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } body.ws *, body.ws *::before, body.ws *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }