/* LexiTap marketing site — theme mirrors mobile/src/presentation/theme/tokens.ts Dark is canonical; light is the derived theme. Single brand accent: teal. */ :root { /* dark theme (default / canonical) */ --bg-base: #0E1112; --bg-surface: #171A1C; --bg-surface-raised: #1F2426; --bg-surface-sunken: #0A0C0D; --border-subtle: #262B2E; --border-strong: #3A4145; --text-primary: #F2F5F6; --text-secondary: #A9B2B6; --text-tertiary: #6E777B; --accent: #20B2AA; --accent-pressed: #1A938C; --accent-subtle: #13322F; --on-accent: #062826; --success: #4CAF50; --streak: #FF9A3D; /* type */ --font-display: "Playfair Display", Georgia, serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* 8pt grid */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; --gutter: 16px; --content-max: 600px; --wide-max: 960px; color-scheme: dark; } :root[data-theme="light"] { --bg-base: #FBFCFC; --bg-surface: #FFFFFF; --bg-surface-raised: #F7F9F9; --bg-surface-sunken: #F1F3F4; --border-subtle: #E6E9EA; --border-strong: #C4CBCE; --text-primary: #1A1D1E; --text-secondary: #52595C; --text-tertiary: #6B7378; --accent: #178F88; --accent-pressed: #0F6E68; --accent-subtle: #DCF0EE; --on-accent: #FFFFFF; --success: #2E7D32; --streak: #E07B2E; color-scheme: light; } /* follow system pref only when user hasn't chosen (no data-theme on ) */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-base: #FBFCFC; --bg-surface: #FFFFFF; --bg-surface-raised: #F7F9F9; --bg-surface-sunken: #F1F3F4; --border-subtle: #E6E9EA; --border-strong: #C4CBCE; --text-primary: #1A1D1E; --text-secondary: #52595C; --text-tertiary: #6B7378; --accent: #178F88; --accent-pressed: #0F6E68; --accent-subtle: #DCF0EE; --on-accent: #FFFFFF; --success: #2E7D32; --streak: #E07B2E; color-scheme: light; } } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } /* ---------- layout ---------- */ .wrap { max-width: var(--wide-max); margin: 0 auto; padding: 0 var(--gutter); } .prose { max-width: var(--content-max); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-pressed); text-decoration: underline; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg-base) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border-subtle); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-primary); letter-spacing: -0.01em; } .brand:hover { text-decoration: none; color: var(--text-primary); } .brand .dot { color: var(--accent); } .nav { display: flex; align-items: center; gap: var(--s4); } .nav a { color: var(--text-secondary); font-size: 14px; font-weight: 500; } .nav a:hover { color: var(--text-primary); text-decoration: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; font-size: 16px; transition: border-color .15s, color .15s; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); } /* ---------- hero ---------- */ .hero { padding: var(--s16) 0 var(--s12); text-align: center; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-subtle); padding: var(--s1) var(--s3); border-radius: var(--radius-full); margin-bottom: var(--s4); } .hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 7vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 auto var(--s4); max-width: 12ch; } .hero h1 em { color: var(--accent); font-style: normal; } .hero .lede { font-size: clamp(17px, 2.4vw, 20px); color: var(--text-secondary); max-width: 46ch; margin: 0 auto var(--s8); } .badges { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 14px; font-weight: 600; } .badge.coming { opacity: .7; } .badge small { display: block; font-size: 11px; font-weight: 500; color: var(--text-tertiary); } /* ---------- features ---------- */ .section { padding: var(--s12) 0; } .section h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.01em; text-align: center; margin-bottom: var(--s8); } .grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--s6); } .card .ico { font-size: 22px; margin-bottom: var(--s3); display: block; } .card h3 { font-size: 18px; font-weight: 700; margin-bottom: var(--s2); } .card p { color: var(--text-secondary); font-size: 15px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border-subtle); margin-top: var(--s12); padding: var(--s8) 0; color: var(--text-tertiary); font-size: 14px; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; } .site-footer .links { display: flex; gap: var(--s4); flex-wrap: wrap; } .site-footer a { color: var(--text-secondary); } .site-footer a:hover { color: var(--text-primary); text-decoration: none; } /* ---------- legal / doc pages ---------- */ .doc { padding: var(--s8) 0 var(--s12); } .doc h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.02em; margin-bottom: var(--s2); } .doc .updated { color: var(--text-tertiary); font-size: 14px; margin-bottom: var(--s8); } .doc h2 { font-size: 20px; font-weight: 700; margin: var(--s8) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--border-subtle); } .doc h3 { font-size: 16px; font-weight: 600; margin: var(--s6) 0 var(--s2); } .doc p, .doc li { color: var(--text-secondary); margin-bottom: var(--s3); } .doc ul, .doc ol { padding-left: var(--s6); margin-bottom: var(--s4); } .doc li { margin-bottom: var(--s2); } .doc strong { color: var(--text-primary); font-weight: 600; } .callout { background: var(--bg-surface-sunken); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--s4); margin: var(--s4) 0; font-size: 14px; } .callout p { color: var(--text-secondary); margin: 0; } .table-wrap { overflow-x: auto; margin: var(--s4) 0; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; } th { color: var(--text-primary); font-weight: 600; } td { color: var(--text-secondary); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent); padding: var(--s2) var(--s4); border-radius: var(--radius-sm); z-index: 100; } .skip-link:focus { left: var(--s4); top: var(--s4); }