/* ============================================================ Drift — shared stylesheet Imported by all pages via: ============================================================ */ /* Google Fonts are loaded in each HTML file's . Fonts used: Playfair Display 700, Inter 400 500 */ /* ---- Reset ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- Brand tokens ----------------------------------------- */ :root { --bg: #FFFBEE; --text: #1C1C1E; --text-muted: #1C1C1E88; --accent: #C4786A; --accent-dark: #ae6459; --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #1C1C1E; --text: #FFFBEE; --text-muted: #FFFBEE88; } } /* ---- Base ------------------------------------------------- */ html { background: var(--bg); } body { background: var(--bg); font-family: var(--font-body); color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Container -------------------------------------------- */ .container { max-width: 640px; margin: 0 auto; padding: 60px 24px; } @media (max-width: 480px) { .container { padding: 24px 16px; } } /* ---- Headings --------------------------------------------- */ h1, h2, h3 { font-family: var(--font-heading); color: var(--text); line-height: 1.25; } h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; margin-bottom: 1rem; } h2 { font-size: clamp(1.35rem, 3.5vw, 1.75rem); font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.6rem; } h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.4rem; } /* ---- Body copy -------------------------------------------- */ p { margin-bottom: 1rem; color: var(--text); } ul, ol { padding-left: 1.4rem; margin-bottom: 1rem; } li { margin-bottom: 0.35rem; } /* ---- Links ------------------------------------------------ */ a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--accent-dark); } /* ---- Logo header ------------------------------------------ */ .logo-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 3rem; gap: 10px; } .logo-header__mark { display: block; width: 44px; height: 44px; } .logo-header__name { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; line-height: 1; } /* ---- Footer ----------------------------------------------- */ .footer { margin-top: 4rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; } .footer a { color: var(--text-muted); } .footer a:hover { color: var(--accent); } /* ---- App Store badge -------------------------------------- */ .badge { display: block; margin: 2rem auto 0; max-width: 160px; } .badge img { width: 100%; height: auto; display: block; } /* ---- Accent button ---------------------------------------- */ .btn-accent { display: inline-block; background: var(--accent); color: #fff; padding: 12px 28px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: background 0.15s ease; } .btn-accent:hover { background: var(--accent-dark); color: #fff; }