/* ========================================================================== Self+ marketing site, shared stylesheet. Tokens copied from docs/design/STYLEGUIDE.md and src/index.css. This file is hand-maintained, not generated: keep it readable by a non-technical founder, no build step, no preprocessor. ========================================================================== */ /* ------------------------------------------------------------------------ 1. Design tokens Theme is Mascu+ (dark) or Femi+ (light), switched via the root [data-theme] attribute on . Persona and theme are the same axis on this site today (Mascu+ always dark, Femi+ always light), matching the live app per STYLEGUIDE 2.1. ------------------------------------------------------------------------ */ :root { --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --transition-theme: 380ms cubic-bezier(0.4, 0, 0.2, 1); --radius-card: 20px; --radius-card-lg: 24px; --radius-tile: 16px; --radius-control: 12px; --radius-pill: 9999px; --space-page-x: 20px; --duration-base: 260ms; --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); } /* Mascu+ / dark (default) */ :root, [data-theme='mascu'] { --background: hsl(0 0% 7%); --foreground: hsl(33 53% 94%); --muted-foreground: hsl(33 11% 52%); --muted-faint: hsl(30 15% 49%); --primary: hsl(22 49% 48%); --primary-glow: hsl(22 60% 62%); --border: hsl(27 60% 57% / 0.10); --border-hi: hsl(27 60% 57% / 0.22); --success: hsl(142 50% 60%); --flame: hsl(18 100% 62%); --card-fill: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.08); --card-selected-fill: hsl(22 49% 48% / 0.08); --shadow-glow: 0 20px 60px -20px hsl(27 64% 57% / 0.45); --shadow-card: 0 10px 40px -16px hsl(0 0% 0% / 0.60); --glow-a: radial-gradient(65% 70% at 15% 15%, hsl(27 64% 57% / 0.22) 0%, transparent 70%); --glow-b: radial-gradient(50% 55% at 85% 55%, hsl(18 80% 58% / 0.14) 0%, transparent 70%); --glow-c: radial-gradient(40% 50% at 50% 105%, hsl(25 84% 67% / 0.12) 0%, transparent 70%); --glow-d: radial-gradient(45% 50% at 95% 10%, hsl(27 64% 57% / 0.07) 0%, transparent 70%); color-scheme: dark; } /* Femi+ / light */ [data-theme='femi'] { --background: hsl(27 100% 96%); --foreground: hsl(25 30% 14%); --muted-foreground: hsl(25 22% 36%); --muted-faint: hsl(25 10% 40%); --primary: hsl(22 49% 48%); --primary-glow: hsl(22 60% 52%); --border: hsl(27 60% 47% / 0.18); --border-hi: hsl(27 60% 47% / 0.32); --success: hsl(142 50% 28%); --flame: hsl(14 90% 50%); --card-fill: rgba(255, 255, 255, 0.60); --card-border: hsl(22 49% 48% / 0.15); --card-selected-fill: hsl(22 49% 48% / 0.08); --shadow-glow: 0 20px 60px -20px hsl(27 64% 47% / 0.28); --shadow-card: inset 0 1px 0 hsl(0 0% 100% / 0.7), 0 1px 3px hsl(30 45% 24% / 0.04), 0 26px 52px -30px hsl(30 45% 24% / 0.18); --glow-a: radial-gradient(65% 70% at 15% 15%, hsl(27 64% 47% / 0.26) 0%, transparent 70%); --glow-b: radial-gradient(50% 55% at 85% 55%, hsl(14 75% 38% / 0.16) 0%, transparent 70%); --glow-c: radial-gradient(40% 50% at 50% 105%, hsl(25 80% 55% / 0.13) 0%, transparent 70%); --glow-d: radial-gradient(45% 50% at 95% 10%, hsl(27 64% 47% / 0.08) 0%, transparent 70%); color-scheme: light; } /* ------------------------------------------------------------------------ 2. Reset + base ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--background); color: var(--foreground); min-height: 100svh; overflow-x: hidden; } @media (prefers-reduced-motion: no-preference) { body { transition: background-color var(--transition-theme), color var(--transition-theme); } } img { max-width: 100%; display: block; } a { color: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------ 3. Background glow ------------------------------------------------------------------------ */ .glow-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--glow-a), var(--glow-b), var(--glow-c), var(--glow-d); } @media (prefers-reduced-motion: no-preference) { .glow-layer { transition: background-image var(--transition-theme); } } .page { position: relative; z-index: 1; } .wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--space-page-x); } .wrap--narrow { max-width: 720px; } .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-hi), transparent); border: none; } /* ------------------------------------------------------------------------ 4. Typography ------------------------------------------------------------------------ */ h1, h2, h3, h4, p { text-wrap: pretty; } .text-h1-hero { font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; } .text-h2 { font-size: 18px; line-height: 1.3; font-weight: 700; } .text-h3 { font-size: 15px; line-height: 1.4; font-weight: 600; } .text-body { font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--muted-foreground); } .text-body-lg { font-size: 18px; line-height: 1.55; font-weight: 400; color: var(--muted-foreground); } .text-caption { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--muted-faint); } .text-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); } @media (min-width: 720px) { .text-h1-hero { font-size: 56px; } } /* ------------------------------------------------------------------------ 5. Glass card ------------------------------------------------------------------------ */ .card-standard { background: var(--card-fill); border: 1px solid var(--card-border); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .card-selected { background: var(--card-selected-fill); border: 1px solid var(--border-hi); } .glass-thin { background: var(--card-fill); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } /* ------------------------------------------------------------------------ 6. Buttons ------------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 180ms var(--ease-entrance), background-color 180ms, border-color 180ms; } .btn:active { transform: scale(0.98); } .btn-primary { background: hsl(22 49% 48% / 0.20); border-color: hsl(22 49% 48% / 0.40); color: var(--foreground); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn-secondary { background: var(--card-fill); border-color: var(--card-border); color: var(--foreground); } .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-control); } /* Icon-only button (nav menu toggle, theme toggle) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--card-border); color: var(--foreground); cursor: pointer; } .icon-btn:hover { border-color: var(--border-hi); } /* ------------------------------------------------------------------------ 7. Nav ------------------------------------------------------------------------ */ .site-nav { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: var(--card-fill); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; } .nav-logo { display: inline-flex; align-items: center; min-height: 44px; } .nav-logo img { height: 24px; width: auto; } .nav-links { display: none; align-items: center; gap: 28px; } .nav-links a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--muted-foreground); min-height: 44px; display: inline-flex; align-items: center; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--foreground); } .nav-actions { display: flex; align-items: center; gap: 8px; } .nav-cta { padding: 0 18px; } .theme-toggle-track { position: relative; width: 52px; height: 30px; border-radius: var(--radius-pill); border: 1px solid var(--card-border); background: var(--card-fill); cursor: pointer; padding: 0; } /* Expands the tap target to >= 44x44px without changing the track's visual size: a transparent, invisible pseudo-element that is still part of the button's own hit-testing box. */ .theme-toggle-track::before { content: ''; position: absolute; inset: -7px 0; } .theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); transition: transform var(--duration-base) var(--ease-entrance); } [data-theme='femi'] .theme-toggle-thumb { transform: translateX(22px); } @media (prefers-reduced-motion: reduce) { .theme-toggle-thumb { transition: none; } } .nav-menu-toggle { display: inline-flex; } .nav-panel { border-top: 1px solid var(--border); padding: 12px var(--space-page-x) 20px; display: flex; flex-direction: column; gap: 4px; } .nav-panel a { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--foreground); min-height: 44px; display: flex; align-items: center; } .nav-panel[hidden] { display: none; } @media (min-width: 720px) { .nav-links { display: flex; } .nav-menu-toggle { display: none; } .nav-panel { display: none !important; } } /* Theme-swapped images: [data-show] elements toggle by [data-theme] on */ [data-theme='mascu'] [data-show='femi'] { display: none; } [data-theme='femi'] [data-show='mascu'] { display: none; } /* ------------------------------------------------------------------------ 8. Footer ------------------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--border); background: var(--card-fill); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); padding: 40px 0; margin-top: 64px; } .footer-inner { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } .footer-logo img { height: 22px; width: auto; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; } .footer-links a { font-size: 14px; font-weight: 500; color: var(--muted-foreground); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .footer-links a:hover, .footer-links a:focus-visible { color: var(--foreground); } .footer-meta { font-size: 12px; color: var(--muted-faint); } @media (min-width: 720px) { .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } } /* ------------------------------------------------------------------------ 9. Sections (shared spacing rhythm) ------------------------------------------------------------------------ */ .section { padding: 56px 0; } .section-header { max-width: 640px; margin: 0 0 32px; } .section-header .text-h2 { margin-bottom: 8px; } .section-header--center { text-align: center; margin-left: auto; margin-right: auto; } @media (min-width: 720px) { .section { padding: 88px 0; } } /* ------------------------------------------------------------------------ 10. Hero ------------------------------------------------------------------------ */ .hero { padding: 48px 0 32px; } .hero-inner { display: flex; flex-direction: column; gap: 40px; align-items: center; text-align: center; } .hero-copy { max-width: 620px; } .hero-copy .text-h1-hero { margin-bottom: 20px; } .hero-copy .text-body-lg { margin-bottom: 32px; } .hero-frame-wrap { width: 100%; max-width: 320px; margin: 0 auto; } .device-frame { border-radius: var(--radius-card-lg); overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow-glow), var(--shadow-card); background: var(--card-fill); } .device-frame img { width: 100%; height: auto; display: block; } @media (min-width: 960px) { .hero-inner { flex-direction: row; text-align: left; align-items: center; gap: 64px; } .hero-copy { flex: 1; } .hero-frame-wrap { flex: 0 0 380px; max-width: 380px; margin: 0; } } /* ------------------------------------------------------------------------ 11. Store CTAs ------------------------------------------------------------------------ */ .store-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: center; } @media (min-width: 960px) { .store-ctas { justify-content: flex-start; } } .store-btn-apple { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; border-radius: var(--radius-control); } .store-btn-apple img, .store-btn-apple svg { height: 40px; width: auto; display: block; } /* Same glass pill treatment as .btn-primary (bg-primary/20, border-primary/40, backdrop blur) rather than the neutral .btn-secondary fill, per plan ยง4's GlassCTA spec for the Android CTA. */ .store-btn-android { min-width: 44px; background: hsl(22 49% 48% / 0.20); border-color: hsl(22 49% 48% / 0.40); color: var(--foreground); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ------------------------------------------------------------------------ 12. Weekly chart (illustrative, Home) ------------------------------------------------------------------------ */ .chart-section { text-align: center; } .chart-card { max-width: 340px; margin: 0 auto; padding: 24px 20px 20px; } @media (min-width: 720px) { .chart-card { max-width: 480px; padding: 28px 28px 24px; } } .chart-eyebrow { text-align: left; margin-bottom: 4px; } .chart-svg { width: 100%; height: auto; display: block; } .chart-note { text-align: left; margin-top: 8px; } .chart-bar { fill: var(--primary); transform-box: fill-box; transform-origin: bottom; transform: scaleY(1); opacity: 1; transition: transform 700ms var(--ease-entrance), opacity 700ms var(--ease-entrance); } .chart-bar:nth-of-type(1) { transition-delay: 0ms; } .chart-bar:nth-of-type(2) { transition-delay: 70ms; } .chart-bar:nth-of-type(3) { transition-delay: 140ms; } .chart-bar:nth-of-type(4) { transition-delay: 210ms; } .chart-bar:nth-of-type(5) { transition-delay: 280ms; } .chart-bar:nth-of-type(6) { transition-delay: 350ms; } .chart-bar:nth-of-type(7) { transition-delay: 420ms; } .chart-day-label { fill: var(--muted-foreground); font-size: 11px; font-weight: 600; } /* Only ever applied by JS, so with JS disabled bars render at final height. */ [data-chart].chart-pending .chart-bar { transform: scaleY(0); opacity: 0; } @media (prefers-reduced-motion: reduce) { .chart-bar { transition: none; } } /* ------------------------------------------------------------------------ 13. Hub-teaser cards ------------------------------------------------------------------------ */ .hub-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .hub-grid { grid-template-columns: repeat(5, 1fr); } } .hub-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; text-decoration: none; color: inherit; transition: border-color 180ms, transform 180ms var(--ease-entrance); } .hub-card:hover, .hub-card:focus-visible { border-color: var(--border-hi); } .hub-card:active { transform: scale(0.99); } .hub-card-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--foreground); } .hub-card-intro { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); flex: 1; } .hub-card-link { font-size: 13px; font-weight: 600; color: var(--foreground); } /* ------------------------------------------------------------------------ 14. Persona switch (Home) Two cards, one theme axis: clicking a card calls the same setTheme() the nav toggle uses. card-selected marks the active card; every colour here comes from the existing card-standard/card-selected tokens. ------------------------------------------------------------------------ */ .persona-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } } .persona-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; min-height: 44px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 180ms, background-color 180ms, transform 180ms var(--ease-entrance); } .persona-card:hover, .persona-card:focus-visible { border-color: var(--border-hi); } .persona-card:active { transform: scale(0.99); } .persona-card-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--foreground); } .persona-card-tagline { font-size: 15px; font-weight: 600; color: var(--foreground); } .persona-card-desc { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); } /* ------------------------------------------------------------------------ 15. Features page (hub sections, sub-nav, device gallery) ------------------------------------------------------------------------ */ .features-intro { padding-bottom: 24px; } .text-h1-page { font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; } .hub-subnav { position: sticky; top: 64px; z-index: 30; display: flex; gap: 4px; overflow-x: auto; padding: 12px var(--space-page-x); border-bottom: 1px solid var(--border); background: var(--card-fill); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); scrollbar-width: none; } .hub-subnav::-webkit-scrollbar { display: none; } .hub-subnav a { flex: none; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--muted-foreground); padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); border: 1px solid transparent; } .hub-subnav a:hover, .hub-subnav a:focus-visible { color: var(--foreground); border-color: var(--card-border); } .hub-section { padding: 56px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 108px; } .hub-section:last-of-type { border-bottom: none; } @media (min-width: 720px) { .hub-section { padding: 88px 0; } } .hub-section-inner { display: flex; flex-direction: column; gap: 32px; align-items: center; } .hub-section-copy { max-width: 480px; text-align: center; } .hub-section-copy .text-section-label { margin-bottom: 8px; } .hub-section-copy .text-h2 { font-size: 24px; margin-bottom: 12px; } .hub-section-copy .text-body-lg { margin-bottom: 20px; } .hub-bullets { text-align: left; display: flex; flex-direction: column; gap: 10px; list-style: none; } .hub-bullets li { font-size: 15px; line-height: 1.55; color: var(--muted-foreground); padding-left: 22px; position: relative; } .hub-bullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .hub-section-frame { width: 100%; max-width: 260px; } @media (min-width: 900px) { .hub-section-inner { flex-direction: row; text-align: left; align-items: center; gap: 56px; } .hub-section:nth-of-type(even) .hub-section-inner { flex-direction: row-reverse; } .hub-section-copy { text-align: left; max-width: 420px; } .hub-section-frame { flex: 0 0 260px; } } /* ------------------------------------------------------------------------ 16. Legal & support content (doc pages: support, terms-of-service) Class names here are already used verbatim by the restyled legal pages (doc, meta, contact-card, contact-email, faq-item) so their markup did not need to change, only the chrome around it. ------------------------------------------------------------------------ */ .doc { padding: 32px 0 72px; } .doc h1 { font-size: clamp(28px, 5vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 8px; color: var(--foreground); } .doc .meta { font-size: 13px; color: var(--muted-foreground); } .doc .meta strong { color: var(--foreground); font-weight: 600; } .doc h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 12px; color: var(--foreground); } .doc p { font-size: 15px; line-height: 1.7; color: var(--foreground); margin: 0 0 14px; } .doc ul { margin: 0 0 14px 22px; } .doc li { font-size: 15px; line-height: 1.7; color: var(--foreground); margin: 0 0 8px; } .doc strong { font-weight: 700; } .doc a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; } .doc a:hover, .doc a:focus-visible { text-decoration-thickness: 2px; } .contact-card { margin: 8px 0 16px; padding: 20px; } .contact-card p { margin: 0 0 8px; } /* ------------------------------------------------------------------------ 17. Invite page (/invite) ------------------------------------------------------------------------ */ .invite-section { padding: 64px 0 96px; display: flex; justify-content: center; } .invite-card { max-width: 560px; width: 100%; padding: 40px 32px; text-align: center; } .invite-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 12px; } .invite-headline { margin-bottom: 16px; } .invite-card .text-body-lg { margin: 0 0 32px; } .invite-ctas { justify-content: center; } .contact-card p:last-child { margin-bottom: 0; } .contact-email { font-size: 17px; font-weight: 700; color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; } .faq-item { margin: 0 0 10px; padding: 4px 20px; } .faq-item[open] { border-color: var(--border-hi); } .faq-item summary { font-size: 15px; font-weight: 600; color: var(--foreground); cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; margin-left: auto; font-weight: 400; color: var(--muted-foreground); } .faq-item[open] summary::after { content: '\2212'; } .faq-item p { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--muted-foreground); }