/* ============================================================ iTag Hub — website design tokens. Ported 1:1 from the app's lib/ui/theme.dart (single source of truth). Light = "warm cream", Dark = "warm black". Default follows the OS via prefers-color-scheme; an explicit choice is stored on . ============================================================ */ :root { /* Brand */ --primary: #6B64D6; /* light-mode primary (primaryDeep) */ --primary-strong: #514AC0; --primary-soft-bg: #ECEAFC; --on-primary: #ffffff; /* Neutrals — warm cream (light) */ --bg: #FAF8F5; --surface: #F2F1EC; --card: #FFFFFF; --ink: #1A1613; --subtle: #635C50; --muted: #8A8378; --border: #E0DACF; /* Semantic */ --success: #1C9C78; --success-bg: #E6F7F1; --alert: #E8622E; --alert-bg: #FDECE4; --warning: #D99A2B; --warning-bg: #FDF4E6; /* App-preview swap (light shown by default) */ --preview-light: block; --preview-dark: none; /* Shape */ --r-card: 20px; --r-btn: 16px; --shadow: none; --font-head: 'Nunito', 'Segoe UI', system-ui, sans-serif; --font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif; } /* Dark values, shared by (a) OS dark when no explicit choice and (b) an explicit data-theme="dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --primary: #9B95E8; /* dark-mode primary */ --primary-strong: #C9C3F5; --primary-soft-bg: #2A2540; --bg: #161310; --surface: #1F1B17; --card: #262119; --ink: #E9E7E1; --subtle: #C3BBAD; --muted: #A39A8C; --border: #3A342C; --preview-light: none; --preview-dark: block; } } :root[data-theme="dark"] { --primary: #9B95E8; --primary-strong: #C9C3F5; --primary-soft-bg: #2A2540; --bg: #161310; --surface: #1F1B17; --card: #262119; --ink: #E9E7E1; --subtle: #C3BBAD; --muted: #A39A8C; --border: #3A342C; --preview-light: none; --preview-dark: block; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.15; margin: 0; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; gap: 16px; height: 66px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand img { width: 30px; height: 30px; } .nav .brand img { width: 37px; height: 37px; } .nav-spacer { flex: 1; } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-links a { color: var(--subtle); font-weight: 600; } .nav-links a:hover { color: var(--primary); text-decoration: none; } .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .theme-toggle:hover { border-color: var(--primary); transform: translateY(-1px); } .theme-toggle svg { width: 20px; height: 20px; } .icon-sun { display: none; } .icon-moon { display: block; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .icon-sun { display: block; } :root:not([data-theme]) .icon-moon { display: none; } } /* ---------- hero ---------- */ .hero { padding: 64px 0 40px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; } .hero h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.5px; } .hero h1 .accent { color: var(--primary); } .hero p.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--subtle); margin: 20px 0 8px; max-width: 34ch; } .hero-art { display: flex; justify-content: center; } .app-preview { width: min(300px, 78vw); filter: drop-shadow(0 24px 48px rgba(26,22,19,0.18)); } .app-preview .preview-light { display: var(--preview-light); } .app-preview .preview-dark { display: var(--preview-dark); } /* ---------- store buttons ---------- */ .stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .store-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: 190px; padding: 11px 20px; border-radius: 14px; background: #16130F; /* fixed dark pill in BOTH themes (like the official badges) */ color: #fff; border: 1px solid #16130F; transition: transform .15s ease, box-shadow .15s ease; } .store-btn:hover { text-decoration: none; } a.store-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26,22,19,0.22); } .store-btn img { width: 26px; height: 26px; } .store-text { display: flex; flex-direction: column; line-height: 1.1; } .store-text small { font-family: var(--font-body); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; opacity: .8; } .store-text strong { font-family: var(--font-head); font-weight: 800; font-size: 17px; } /* Lift the dark pill off the near-black page background in dark mode. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .store-btn { border-color: #4A443B; } } :root[data-theme="dark"] .store-btn { border-color: #4A443B; } .store-btn.is-locked { opacity: .7; cursor: not-allowed; } .store-btn.is-locked .store-text small { color: #C9C3F5; opacity: 1; } .lock-badge { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 999px; background: var(--primary); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg); } .lock-badge svg { width: 12px; height: 12px; } /* ---------- sections ---------- */ section { padding: 56px 0; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-head h2 { font-size: clamp(26px, 3.4vw, 34px); } .section-head p { color: var(--subtle); margin-top: 12px; } /* ---------- feature cards ---------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 26px; transition: transform .15s ease, border-color .15s ease; } .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); } .ic-wrap { width: 52px; height: 52px; border-radius: 999px; background: var(--primary-soft-bg); display: grid; place-items: center; margin-bottom: 18px; } .ic-wrap img { width: 26px; height: 26px; } .card h3 { font-size: 19px; margin-bottom: 8px; } .card p { margin: 0; color: var(--subtle); font-size: 15.5px; } /* ---------- honesty callout ---------- */ .callout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 32px; display: flex; gap: 20px; align-items: flex-start; } .callout .dot { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--warning-bg); display: grid; place-items: center; } .callout .dot svg { width: 24px; height: 24px; } .callout h3 { font-size: 20px; margin-bottom: 6px; } .callout p { margin: 0; color: var(--subtle); } /* ---------- final cta ---------- */ .cta { text-align: center; } .cta-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 48px 28px; } .cta-card h2 { font-size: clamp(26px, 3.4vw, 34px); } .cta-card p { color: var(--subtle); margin: 12px auto 26px; max-width: 42ch; } .cta-card .stores { justify-content: center; } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--border); padding: 40px 0; margin-top: 24px; } .footer-inner { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; } .footer .brand { font-size: 18px; } .footer-links { display: flex; flex-wrap: wrap; gap: 22px; } .footer-links a { color: var(--subtle); font-weight: 600; } .footer small { display: block; color: var(--muted); font-size: 13px; margin-top: 18px; line-height: 1.6; } /* ---------- legal / privacy page ---------- */ .legal { max-width: 760px; margin: 0 auto; padding: 56px 0; } .legal h1 { font-size: clamp(30px, 4vw, 40px); } .legal .updated { color: var(--muted); margin-top: 8px; font-size: 14px; } .legal h2 { font-size: 22px; margin: 40px 0 10px; } .legal h3 { font-size: 17px; margin: 24px 0 6px; } .legal p, .legal li { color: var(--subtle); } .legal ul { padding-left: 22px; } .legal li { margin: 6px 0; } .legal .lead { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px 24px; color: var(--ink); margin-top: 24px; } .legal a { font-weight: 600; } /* ---------- responsive ---------- */ @media (max-width: 860px) { .hero { padding: 40px 0 24px; } .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; } .hero p.lede { margin-left: auto; margin-right: auto; } .hero-art { order: -1; } .stores { justify-content: center; } .features { grid-template-columns: 1fr; } .nav-links .hide-sm { display: none; } } @media (max-width: 560px) { body { font-size: 16px; } .callout { flex-direction: column; } .footer-inner { flex-direction: column; align-items: flex-start; } }