/* Imbue site — calm, compact, themeable. Three palettes (Ocean = the app's theme, Dawn, Sage), each light + dark. Selected via data-palette / data-mode on (theme.js persists the pick). Fonts: Lora (headings) + Nunito Sans (body), matching the app. */ /* ---------- Theme tokens ---------- */ :root { /* Ocean · light (default, matches the app) */ --bg: #f2f6f7; --surface: #ffffff; --surface-soft: #e9f0f2; --primary: #3f6c80; --secondary: #88abb8; --accent: #e0a458; --text: #243239; --muted: #54707c; --border: rgba(63, 108, 128, 0.15); --shadow: 0 8px 24px rgba(36, 50, 57, 0.07); --glow: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--secondary) 30%, transparent), transparent 70%); } [data-mode="dark"] { --bg: #15232b; --surface: #1d2f38; --surface-soft: #22343e; --primary: #8fb4c2; --secondary: #6f97a4; --accent: #e6b06a; --text: #e7eef1; --muted: #a3b7c0; --border: rgba(136, 171, 184, 0.18); --shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } /* No system-scheme fallback on purpose: the default is always light Ocean (Matt's call). Dark is only ever an explicit choice via the toggle. */ [data-palette="dawn"] { --bg: #f7f4ef; --surface: #ffffff; --surface-soft: #f0eae1; --primary: #99664a; --secondary: #cbb69e; --accent: #557f80; --text: #332b24; --muted: #6e6154; --border: rgba(153, 102, 74, 0.16); --shadow: 0 8px 24px rgba(51, 43, 36, 0.07); } [data-palette="dawn"][data-mode="dark"] { --bg: #1e1813; --surface: #28211b; --surface-soft: #2e2620; --primary: #d8a87e; --secondary: #a08970; --accent: #8fb3b4; --text: #ede5db; --muted: #b2a392; --border: rgba(216, 168, 126, 0.18); --shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } [data-palette="sage"] { --bg: #f2f6f1; --surface: #ffffff; --surface-soft: #e9f0e8; --primary: #567a5e; --secondary: #a3bca8; --accent: #c99359; --text: #26302a; --muted: #5c6e60; --border: rgba(86, 122, 94, 0.16); --shadow: 0 8px 24px rgba(38, 48, 42, 0.07); } [data-palette="sage"][data-mode="dark"] { --bg: #171e19; --surface: #212b24; --surface-soft: #27332a; --primary: #a2c2a9; --secondary: #77947e; --accent: #dca96f; --text: #e6ede7; --muted: #a6b5a9; --border: rgba(162, 194, 169, 0.18); --shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.25s ease, color 0.25s ease; } h1, h2, h3 { font-family: "Lora", Georgia, serif; line-height: 1.25; font-weight: 600; margin: 0 0 0.4em; } a { color: var(--primary); } .container { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 22px; } .narrow { max-width: 760px; } section { padding: 34px 0; scroll-margin-top: 74px; } .section-title { font-size: clamp(24px, 3.4vw, 30px); text-align: center; margin-bottom: 22px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 18px; padding-top: 10px; padding-bottom: 10px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-right: auto; } .brand img { width: 32px; height: 32px; display: block; } .brand .wordmark { font-family: "Lora", Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: 0.2px; } .site-nav { display: flex; gap: 18px; align-items: center; } .site-nav a { text-decoration: none; color: var(--muted); font-weight: 700; font-size: 15px; } .site-nav a:hover { color: var(--primary); } /* Theme controls: three palette dots + a light/dark toggle. */ .theme-controls { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); } .palette-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 2px var(--surface); } .palette-dot[aria-pressed="true"] { border-color: var(--text); } .palette-dot.ocean { background: #3f6c80; } .palette-dot.dawn { background: #99664a; } .palette-dot.sage { background: #567a5e; } .mode-toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; } .mode-toggle:hover { color: var(--primary); } .mode-toggle svg { width: 17px; height: 17px; } /* Show the icon for what you'd switch TO. */ .mode-toggle .moon { display: block; } .mode-toggle .sun { display: none; } [data-mode="dark"] .mode-toggle .moon { display: none; } [data-mode="dark"] .mode-toggle .sun { display: block; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 44px 0 30px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 380px; background: var(--glow); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: center; } .hero h1 { font-size: clamp(36px, 5.5vw, 52px); margin-bottom: 6px; } .hero .tagline { font-size: clamp(19px, 2.6vw, 22px); color: var(--muted); margin: 0 0 12px; } .hero .lede { margin: 0 0 22px; max-width: 520px; } .hero-art { text-align: center; } .hero-art img { width: min(230px, 60vw); height: auto; border-radius: 22%; box-shadow: var(--shadow); } .hero-art .motto { font-family: "Lora", Georgia, serif; font-style: italic; color: var(--muted); margin: 14px 0 0; font-size: 17px; } /* Store badges */ .stores { display: flex; flex-wrap: wrap; gap: 12px; } .store-badge { display: flex; align-items: center; gap: 11px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); min-width: 178px; } .store-badge svg { flex-shrink: 0; opacity: 0.9; color: var(--primary); } .store-badge .small { font-size: 11px; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; } .store-badge .big { font-size: 17px; font-weight: 700; line-height: 1.15; } /* ---------- Bands & cards ---------- */ .band { text-align: center; padding: 26px 0; } .band p { color: var(--muted); max-width: 640px; margin: 0 auto; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow); } /* Principles: one tight row */ .principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 999px) { .principles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .principles { grid-template-columns: 1fr; } } .principle { background: var(--surface-soft); border-radius: 14px; padding: 16px 18px; } .principle h3 { font-size: 17px; margin-bottom: 3px; } .principle p { margin: 0; color: var(--muted); font-size: 15px; } /* Features: compact cards, icon inline with the title */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; } .feature .head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .feature .icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .feature .icon svg { width: 19px; height: 19px; } .feature h3 { font-size: 17px; margin: 0; } .feature p { margin: 0; color: var(--muted); font-size: 15px; } /* Two-up split (pathway + privacy) */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .split .card h2 { font-size: 21px; } .split .card p { color: var(--muted); font-size: 15.5px; margin: 0 0 10px; } .split .card p:last-child { margin-bottom: 0; } /* Contact */ .contact-card { text-align: center; max-width: 620px; margin: 0 auto; } .contact-card h2 { font-size: clamp(22px, 3vw, 27px); } .contact-card p { color: var(--muted); margin: 0 auto 18px; max-width: 480px; } .button { display: inline-flex; align-items: center; gap: 9px; background: var(--primary); color: var(--bg); text-decoration: none; font-weight: 700; font-size: 16px; padding: 12px 24px; border-radius: 999px; box-shadow: var(--shadow); } .button:hover { filter: brightness(1.06); } .button svg { width: 17px; height: 17px; } .contact-card .address { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); } .contact-card .address a { color: var(--muted); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 22px 0 30px; margin-top: 10px; color: var(--muted); font-size: 14px; } .site-footer .container { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--primary); } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .disclaimer { width: 100%; margin: 4px 0 0; font-size: 13px; opacity: 0.85; } /* ---------- Article (privacy / 404) ---------- */ .article { padding: 26px 0 50px; } .article h1 { font-size: clamp(28px, 4.4vw, 36px); } .article .updated { color: var(--muted); font-size: 15px; margin: 0 0 20px; } .article h2 { font-size: 21px; margin-top: 28px; } .article p { margin: 0 0 12px; } .article ul { margin: 0 0 14px; padding-left: 22px; } .article li { margin-bottom: 6px; } .article .summary-box { background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid var(--border); border-radius: 13px; padding: 16px 20px; margin-bottom: 6px; } .back-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; margin-top: 26px; } /* ---------- Small screens ---------- */ @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 26px; } .hero-art { order: -1; } .hero-art img { width: 130px; } .hero-art .motto { display: none; } .hero { text-align: center; padding-top: 30px; } .hero .lede { margin-inline: auto; } .stores { justify-content: center; } .site-nav { gap: 13px; } section { padding: 26px 0; } } @media (max-width: 520px) { .site-nav a.hide-mobile { display: none; } .brand .wordmark { font-size: 19px; } .site-header .container { gap: 10px; padding-left: 14px; padding-right: 14px; } .brand { gap: 7px; } .brand img { width: 28px; height: 28px; } .site-nav { gap: 10px; } .site-nav a { font-size: 14px; } .theme-controls { gap: 6px; padding-left: 8px; } .palette-dot { width: 17px; height: 17px; } .mode-toggle { width: 28px; height: 28px; } }