/* KarmaLens defaults to dark. Toggle via [data-theme="light"] on . The light variants below override the dark base when the user picks light from the header toggle (persisted to localStorage key `karmalens-theme`). */ :root { color-scheme: dark; /* Surface + brand */ --page-bg: #0a0f1c; --surface: #131c2f; --surface-soft: #0f1727; --surface-sunken: #07101f; --text: #ecf2ff; --strong: #f8fbff; --muted: #aebbd3; --muted-strong: #c4d0e6; --border: #283651; --border-soft: #1c2841; --border-strong: #3a4a6b; --accent: #8097ff; --accent-dark: #a8b7ff; --accent-soft: rgba(128, 151, 255, 0.16); --accent-ghost: rgba(128, 151, 255, 0.10); --gold: #e0bd71; --gold-soft: rgba(224, 189, 113, 0.16); /* Elevation — deep, true to a dark canvas */ --shadow: 0 18px 45px rgba(0, 0, 0, 0.42); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.24); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.48), 0 8px 20px rgba(0, 0, 0, 0.28); --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.56), 0 16px 32px rgba(0, 0, 0, 0.32); --shadow-accent: 0 16px 40px rgba(128, 151, 255, 0.28), 0 4px 12px rgba(128, 151, 255, 0.16); --shadow-accent-soft: 0 8px 24px rgba(128, 151, 255, 0.18), 0 2px 6px rgba(128, 151, 255, 0.10); --shadow-gold: 0 16px 40px rgba(224, 189, 113, 0.22), 0 4px 12px rgba(224, 189, 113, 0.10); /* State colors */ --success: #5ad394; --success-bg: rgba(28, 138, 92, 0.18); --success-border: rgba(90, 211, 148, 0.36); --warning: #e9c987; --warning-bg: rgba(184, 142, 45, 0.16); --warning-border: rgba(233, 201, 135, 0.36); --danger: #ff9494; --danger-bg: rgba(220, 80, 80, 0.16); --danger-border: rgba(255, 148, 148, 0.36); --info: #a8b7ff; --info-bg: rgba(72, 90, 220, 0.20); --info-border: rgba(168, 183, 255, 0.36); /* Verdict colors */ --verdict-positive: #6ed8a0; --verdict-mixed: #e9c987; --verdict-negative: #ff9494; --verdict-neutral: #a8b9e8; /* Typography scale */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --text-display-sm: clamp(32px, 4vw, 44px); --text-display-md: clamp(40px, 5vw, 56px); --text-display-lg: clamp(48px, 6vw, 72px); --text-display-xl: clamp(56px, 7vw, 88px); --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-eyebrow: 0.12em; /* Spacing rhythm */ --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; /* Radius scale */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* Motion */ --ease-snap: cubic-bezier(0.4, 0, 0.2, 1); --ease-soft: cubic-bezier(0.4, 0, 0.6, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 120ms var(--ease-snap); --transition-base: 180ms var(--ease-snap); --transition-slow: 280ms var(--ease-soft); --transition-bounce: 320ms var(--ease-spring); } /* Light theme — only applies when the user toggles via the header switch (which sets ). Dark is the unconditional default. */ :root[data-theme="light"] { color-scheme: light; --page-bg: #f4f6fb; --surface: #ffffff; --surface-soft: #f8faff; --surface-sunken: #eef1f8; --text: #172033; --strong: #101827; --muted: #55627d; --muted-strong: #36425a; --border: #e1e7f3; --border-soft: #eef1f8; --border-strong: #cdd5e6; --accent: #4d5bd7; --accent-dark: #303aa4; --accent-soft: #e6e9fb; --accent-ghost: rgba(77, 91, 215, 0.08); --gold: #a9822d; --gold-soft: #f6ecd1; --shadow: 0 18px 45px rgba(22, 32, 55, 0.08); --shadow-xs: 0 1px 2px rgba(20, 24, 40, 0.04); --shadow-sm: 0 2px 6px rgba(20, 24, 40, 0.06), 0 1px 2px rgba(20, 24, 40, 0.04); --shadow-md: 0 8px 20px rgba(20, 24, 40, 0.07), 0 2px 6px rgba(20, 24, 40, 0.04); --shadow-lg: 0 24px 56px rgba(20, 24, 40, 0.12), 0 8px 20px rgba(20, 24, 40, 0.06); --shadow-xl: 0 40px 80px rgba(20, 24, 40, 0.16), 0 16px 32px rgba(20, 24, 40, 0.08); --shadow-accent: 0 16px 40px rgba(77, 91, 215, 0.18), 0 4px 12px rgba(77, 91, 215, 0.08); --shadow-accent-soft: 0 8px 24px rgba(77, 91, 215, 0.10), 0 2px 6px rgba(77, 91, 215, 0.06); --shadow-gold: 0 16px 40px rgba(169, 130, 45, 0.14), 0 4px 12px rgba(169, 130, 45, 0.06); --success: #1c8a5c; --success-bg: #e8f5ed; --success-border: #b6dfc6; --warning: #b88e2d; --warning-bg: #fdf6e3; --warning-border: #eed9a8; --danger: #a3262f; --danger-bg: #fbeaea; --danger-border: #f0bcbc; --info: #303aa4; --info-bg: #eef0fa; --info-border: #c8cff2; --verdict-positive: #2f9e65; --verdict-mixed: #b88e2d; --verdict-negative: #c85b5b; --verdict-neutral: #7a8bb7; } :root[data-theme="light"] body { background: radial-gradient(900px 600px at 8% 0%, rgba(77, 91, 215, 0.10), transparent 60%), radial-gradient(700px 500px at 92% 20%, rgba(169, 130, 45, 0.06), transparent 60%), var(--page-bg); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: radial-gradient(1100px 700px at 6% -10%, rgba(128, 151, 255, 0.14), transparent 60%), radial-gradient(900px 600px at 96% 10%, rgba(224, 189, 113, 0.08), transparent 60%), radial-gradient(1200px 800px at 50% 110%, rgba(128, 151, 255, 0.06), transparent 70%), var(--page-bg); background-attachment: fixed; color: var(--text); line-height: var(--leading-normal); font-size: var(--text-base); } a { color: inherit; } .site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--page-bg) 88%, transparent); border-bottom: 1px solid var(--border); } .nav-shell, .site-footer, .hero, .section, .page-hero, .faq-list { width: min(1120px, calc(100% - 32px)); margin-left: auto; margin-right: auto; } .nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; } .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: 800; font-size: var(--text-base); letter-spacing: -0.01em; color: var(--strong); } .brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, var(--accent), var(--gold)); color: #fff; } .nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; /* PR 64 — tuned down from --text-lg (18px) to --text-base (16px). The 18px read too loud relative to the rest of the chrome; 16px sits one step below the hero copy and matches body text. */ gap: var(--space-4); color: var(--muted); font-weight: 600; font-size: var(--text-base); letter-spacing: -0.005em; } .nav-links a { text-decoration: none; position: relative; transition: color var(--transition-fast); } .nav-links a:hover { color: var(--strong); } .nav-signup { color: #fff !important; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); box-shadow: var(--shadow-accent-soft); transition: box-shadow var(--transition-base), transform var(--transition-base); } .nav-signup:hover { color: #fff !important; box-shadow: var(--shadow-accent); transform: translateY(-1px); } .nav-logout { margin: 0; } .nav-logout button { appearance: none; border: 0; padding: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; } .nav-logout button:hover { color: var(--strong); } /* iOS Safari zooms the page when a focused field's text is < 16px. 99.9% of our traffic is mobile, so force every form control to 16px on small screens. ``!important`` intentionally beats per-field font rules — this is a global anti-zoom guard, not a per-field style choice. */ @media (max-width: 640px) { input, textarea, select { font-size: 16px !important; } } /* Mobile nav drawer toggle — hidden on desktop, hamburger on small screens. */ .nav-toggle { display: none; appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; width: 44px; height: 44px; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle-bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--strong); transition: transform var(--transition-fast), opacity var(--transition-fast); } .nav-shell[data-nav-open] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-shell[data-nav-open] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-shell[data-nav-open] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 820px) { .nav-shell { position: relative; } .nav-toggle { display: inline-flex; } .nav-links { display: none; position: absolute; top: calc(100% + 8px); right: 0; left: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); z-index: 30; } .nav-shell[data-nav-open] .nav-links { display: flex; } /* Full-width, large tap targets inside the drawer. */ .nav-links a, .nav-links .theme-toggle, .nav-links .nav-logout button { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; } .nav-links a:hover, .nav-links .nav-logout button:hover { background: var(--accent-ghost); } .nav-links .nav-logout { width: 100%; } .nav-signup { justify-content: center; } } .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 28px; align-items: center; padding: 76px 0 42px; } .hero h1, .page-hero h1 { margin: 0; font-size: var(--text-display-lg); line-height: var(--leading-tight); letter-spacing: -0.045em; color: var(--strong); font-weight: 800; } .hero-text, .page-hero p, .section p, .faq-item p { color: var(--muted-strong); font-size: var(--text-lg); line-height: var(--leading-normal); } .hero-text { max-width: 640px; margin: var(--space-5) 0 0; } .eyebrow { margin: 0 0 var(--space-3); color: var(--gold); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; } .hero-actions, .faq-teaser { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-pill); padding: 12px 22px; text-decoration: none; font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.005em; border: 1px solid var(--border); background: transparent; color: var(--strong); cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); will-change: transform; } .button:focus-visible { outline: 3px solid var(--accent-ghost); outline-offset: 2px; } .button:active { transform: translateY(1px); } .button.primary { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; border-color: transparent; box-shadow: var(--shadow-accent-soft); } .button.primary:hover { box-shadow: var(--shadow-accent); transform: translateY(-1px); } .button.primary:active { box-shadow: var(--shadow-accent-soft); transform: translateY(0); } .button.secondary { background: var(--surface); color: var(--strong); border-color: var(--border); box-shadow: var(--shadow-xs); } .button.secondary:hover { border-color: var(--border-strong); background: var(--surface-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .button.secondary:active { transform: translateY(0); box-shadow: var(--shadow-xs); } .preview-card, .info-card, .note-card, .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-slow), border-color var(--transition-base), transform var(--transition-base); } .info-card:hover, .note-card:hover, .faq-item:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .preview-card { box-shadow: var(--shadow-lg); border-radius: var(--radius-2xl); } .preview-card { padding: 24px; } .preview-label { display: inline-block; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--gold); padding: 5px 9px; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; } .preview-card h2 { margin: 18px 0 8px; color: var(--strong); font-size: 30px; letter-spacing: -0.03em; } .preview-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin-top: 18px; padding: 14px; background: var(--surface-soft); border-radius: 16px; } .preview-grid span { color: var(--muted); } .preview-grid strong { color: var(--strong); } .preview-fulllink { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--accent); text-decoration: none; transition: color var(--transition-fast); } .preview-fulllink:hover { color: var(--accent-dark); } .section { padding: 34px 0; } .three-grid, .split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .split { grid-template-columns: 1fr 1fr; align-items: start; } .section h2, .faq-teaser h2 { margin: 0; color: var(--strong); font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.04em; } .info-card, .note-card, .faq-item { padding: 22px; } .info-card h2, .note-card h3, .faq-item h2 { margin: 0 0 8px; color: var(--strong); font-size: 20px; letter-spacing: -0.02em; } .faq-teaser { justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 26px; box-shadow: var(--shadow); } .page-hero { padding: 72px 0 24px; } .page-hero.narrow { max-width: 820px; } /* PR 60g — About page section pattern */ .about-section { padding-block: var(--space-9); } .about-section + .about-section { border-top: 1px solid var(--border); } .about-section h2 { margin: var(--space-3) 0 var(--space-5); font-size: var(--text-display-sm); letter-spacing: -0.01em; line-height: 1.15; } .about-section > p { font-size: var(--text-lg); line-height: 1.6; color: var(--strong); max-width: 70ch; margin: 0 0 var(--space-4); } .about-belief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); } .about-belief-card { padding: var(--space-6) var(--space-6); background: var(--surface-soft, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-base) var(--ease-soft), transform var(--transition-base) var(--ease-soft); } .about-belief-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); } .about-belief-card h3 { margin: 0 0 var(--space-3); font-size: var(--text-lg); letter-spacing: -0.005em; color: var(--strong); } .about-belief-card p { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: 1.55; } .about-capability-list, .about-boundary-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); } .about-capability-list li, .about-boundary-list li { position: relative; padding-left: var(--space-7); color: var(--strong); font-size: var(--text-base); line-height: 1.55; } .about-capability-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: var(--space-4); height: 2px; background: linear-gradient(90deg, var(--gold), var(--accent)); border-radius: var(--radius-pill); } .about-boundary-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--danger, var(--accent)); font-weight: 700; } .about-capability-list li strong, .about-boundary-list li strong { color: var(--strong); font-weight: 600; } .about-section-builder p { font-size: var(--text-base); } @media (max-width: 720px) { .about-belief-grid { grid-template-columns: 1fr; } .about-section h2 { font-size: var(--text-2xl); } } .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: var(--space-5) 0 var(--space-7); } /* PR 60h — FAQ group banding */ .faq-group-heading { width: min(1120px, calc(100% - 32px)); margin: var(--space-7) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--border); } .faq-group-heading:first-of-type { margin-top: var(--space-7); } .faq-group-title { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-strong); } .auth-page { width: min(100% - 32px, 1120px); margin: 0 auto; padding: 70px 0 42px; display: grid; place-items: center; } .auth-card { width: min(100%, 520px); background: var(--surface); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); padding: 30px; } .auth-card::before { content: ""; display: block; width: 64px; height: 4px; border-radius: 999px; margin-bottom: 18px; background: linear-gradient(90deg, var(--accent), var(--gold)); } .auth-card h1 { margin: 0; color: var(--strong); font-size: clamp(32px, 5vw, 48px); line-height: 1.02; letter-spacing: -0.045em; } .auth-intro, .auth-switch, .field-help { color: var(--muted); } .auth-intro { margin: 14px 0 22px; font-size: 16px; } .auth-form { display: grid; gap: 15px; } .auth-google.google-auth-block, .google-auth-block { display: block; width: 100%; max-width: 100%; margin: 4px 0 0; } /* Scope under .auth-card so global `a` / UA defaults cannot read as a plain underlined link. */ .auth-card a.google-auth-button, .auth-card .google-auth-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 16px; border-radius: 14px; border: 1px solid #dadce0; background: #ffffff; color: #3c4043; font: inherit; font-size: 15px; font-weight: 650; letter-spacing: 0.01em; text-decoration: none; text-decoration-line: none; -webkit-text-decoration-skip: objects; cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .auth-card a.google-auth-button:link, .auth-card a.google-auth-button:visited, .auth-card a.google-auth-button:hover, .auth-card a.google-auth-button:active, .auth-card a.google-auth-button:focus, .auth-card a.google-auth-button:focus-visible { text-decoration: none; text-decoration-line: none; color: #3c4043; } .auth-card a.google-auth-button:hover { box-shadow: 0 1px 3px rgba(60, 64, 67, 0.22), 0 1px 1px rgba(60, 64, 67, 0.12); border-color: #c6cacf; } .auth-card a.google-auth-button:focus { outline: none; } .auth-card a.google-auth-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } .auth-card a.google-auth-button:active { background: #f8f9fa; box-shadow: 0 1px 1px rgba(60, 64, 67, 0.12); } .auth-card .google-auth-button__lead { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; } .auth-card .google-auth-icon { display: block; } .auth-card .google-auth-button__label { line-height: 1.25; } .auth-card .google-auth-button.google-auth-button--disabled { pointer-events: none; cursor: not-allowed; opacity: 0.62; box-shadow: none; text-decoration: none; text-decoration-line: none; } .auth-card .google-auth-button.google-auth-button--disabled:hover { border-color: #dadce0; box-shadow: none; background: #ffffff; text-decoration: none; } .auth-card .google-auth-button__offline-hint { margin: 8px 0 0; font-size: 13px; font-weight: 650; text-align: center; color: var(--muted); line-height: 1.4; } @media (prefers-color-scheme: dark) { .auth-card a.google-auth-button, .auth-card .google-auth-button { background: #ffffff; color: #3c4043; border-color: #dadce0; } .auth-card a.google-auth-button:active { background: #f1f3f4; } .auth-card .google-auth-button.google-auth-button--disabled { opacity: 0.55; } } .auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 18px 0; color: var(--muted); font-size: 13px; font-weight: 800; } .auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--border); } .form-field { display: grid; gap: 7px; } .form-field label { color: var(--strong); font-weight: 800; } .form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); color: var(--text); padding: 12px 13px; font: inherit; } .form-field textarea { resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); } .field-help { margin: 0; font-size: 13px; } .form-errors, .field-errors { color: #9f1d1d; background: #fff5f5; border: 1px solid #f0c7c7; border-radius: 12px; padding: 9px 11px; font-size: 14px; } @media (prefers-color-scheme: dark) { .form-errors, .field-errors { color: #ffd6d6; background: #2b171b; border-color: #6f3039; } } .form-errors ul, .field-errors ul { margin: 0 0 0 18px; padding: 0; } .auth-submit { width: 100%; margin-top: 4px; } .auth-switch { margin: 18px 0 0; } .auth-switch a { color: var(--strong); font-weight: 800; } .debug-token { margin: 16px 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft); padding: 12px; color: var(--muted); overflow-wrap: anywhere; font-size: 13px; } .history-list { display: grid; gap: 14px; margin-top: 22px; } .history-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); padding: 20px; } .history-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; } .history-card h2 { margin: 10px 0 8px; color: var(--strong); font-size: 22px; letter-spacing: -0.02em; } .history-preview { color: var(--muted); margin: 0 0 12px; } .history-badges { display: flex; flex-wrap: wrap; gap: 8px; } .history-badge { border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--strong); padding: 5px 9px; font-size: 12px; font-weight: 850; } .history-badge.neutral { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); } /* PR 61 — Landing gallery teaser cards (3-up grid → "Open the gallery" CTA) */ .landing-gallery-teaser-head { margin-bottom: var(--space-6); max-width: 70ch; } .landing-gallery-teaser-head h2 { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-3xl); letter-spacing: -0.005em; line-height: 1.2; } .landing-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); } .landing-gallery-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-base) var(--ease-soft), transform var(--transition-base) var(--ease-soft), border-color var(--transition-base) var(--ease-soft); position: relative; overflow: hidden; } .landing-gallery-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--accent)); opacity: 0.75; } .landing-gallery-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); } .landing-gallery-card-theme { align-self: flex-start; padding: var(--space-1) var(--space-3); background: var(--accent-ghost); border: 1px solid var(--accent-soft); border-radius: var(--radius-pill); color: var(--accent-dark); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .landing-gallery-card-dilemma { margin: 0; font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--strong); letter-spacing: -0.008em; } .landing-gallery-card-verdict { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.4; color: var(--strong); letter-spacing: -0.005em; } .landing-gallery-card-quote { margin: 0; font-size: var(--text-sm); color: var(--muted-strong); line-height: 1.5; font-style: italic; padding-top: var(--space-2); border-top: 1px solid var(--border-soft); } .landing-gallery-cta { margin-top: var(--space-6); display: flex; justify-content: center; } .landing-gallery-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-6); background: var(--surface-soft); border: 1px dashed var(--border); border-radius: var(--radius-lg); } @media (max-width: 820px) { .landing-gallery-grid { grid-template-columns: 1fr; } } /* PR 61 — Account-deletion danger zone + dedicated confirm page */ .settings-danger-zone { margin-top: var(--space-9); padding: var(--space-7) var(--space-7); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .settings-danger-zone h2 { margin: var(--space-3) 0 var(--space-3); font-size: var(--text-2xl); color: var(--danger); letter-spacing: -0.005em; } .settings-danger-zone p { margin: 0 0 var(--space-5); color: var(--strong); line-height: 1.55; } .danger-eyebrow { color: var(--danger); } .button.danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); font-weight: 700; transition: background var(--transition-fast), box-shadow var(--transition-fast); } .button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, black); box-shadow: 0 6px 20px color-mix(in srgb, var(--danger) 40%, transparent); } .button.danger:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } :root[data-theme="light"] .button.danger { color: #ffffff; } .danger-card { padding: var(--space-8) var(--space-8); background: var(--surface); border: 1px solid var(--danger-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .danger-card-title { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-xl); color: var(--strong); letter-spacing: -0.005em; } .danger-card-title:first-child { margin-top: 0; } .danger-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .danger-list li { position: relative; padding-left: var(--space-5); color: var(--strong); line-height: 1.5; } .danger-list li::before { content: "×"; position: absolute; left: 0; color: var(--danger); font-weight: 800; } .danger-note { padding: var(--space-4) var(--space-5); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-md); color: var(--strong); font-weight: 500; } .danger-form { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .danger-confirm-input { width: 100%; padding: var(--space-3) var(--space-4); background: var(--surface-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--strong); font-size: var(--text-lg); font-weight: 700; letter-spacing: 0.08em; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .danger-confirm-input:focus { outline: none; border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); } .form-field-label { display: block; color: var(--strong); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-2); } .danger-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); } @media (max-width: 600px) { .danger-actions { flex-direction: column-reverse; } .danger-actions .button { width: 100%; } } /* PR 62 — Founder sub-nav strip. Renders at the top of every /founder/* page via founder/_nav.html so internal moderation surfaces stay discoverable without manual URL editing. */ .founder-subnav-wrap { margin-top: var(--space-7); margin-bottom: var(--space-5); } .founder-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-soft); } .founder-subnav-link { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--muted-strong); text-decoration: none; border: 1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .founder-subnav-link:hover { color: var(--strong); background: var(--accent-ghost); } .founder-subnav-link--active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); } .founder-subnav-link--quiet { margin-left: auto; color: var(--muted); } .founder-subnav-divider { flex: 1; } @media (max-width: 540px) { .founder-subnav { flex-direction: column; align-items: stretch; } .founder-subnav-link--quiet { margin-left: 0; } } /* PR 62 follow-up — INR/USD segmented toggle at the top of /founder/. */ .founder-currency-toggle { display: inline-flex; margin-top: var(--space-3); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-0-5); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; } .founder-currency-toggle-btn { padding: var(--space-2) var(--space-4); color: var(--muted-strong); text-decoration: none; border-radius: var(--radius-pill); transition: background var(--transition-fast), color var(--transition-fast); } .founder-currency-toggle-btn:hover { color: var(--strong); } .founder-currency-toggle-btn--active { background: linear-gradient(135deg, var(--gold), var(--accent)); color: #0a0f1c; } :root[data-theme="light"] .founder-currency-toggle-btn--active { color: #ffffff; } .section.narrow { max-width: 820px; margin: 0 auto; padding-left: 0; padding-right: 0; } .site-messages { max-width: 1120px; margin: 0 auto; padding: 16px 20px 0; } .site-message { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--strong); font-weight: 700; font-size: 14px; } .dashboard-hero-actions { flex-wrap: wrap; align-items: center; } .dashboard-cta { min-width: 200px; text-align: center; } .button.ghost-quiet { background: transparent; color: var(--strong); border: 1px dashed var(--border); box-shadow: none; } .button.ghost-quiet:hover { color: var(--strong); border-color: var(--muted); background: var(--surface-soft); } @media (prefers-color-scheme: dark) { .button.ghost-quiet { color: var(--strong); border-color: rgba(255, 255, 255, 0.16); } .button.ghost-quiet:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.28); } } .dashboard-empty { display: grid; gap: 18px; align-items: center; } @media (min-width: 640px) { .dashboard-empty { grid-template-columns: 1fr auto; } } .muted-lead { color: var(--muted); margin: 10px 0 0; line-height: 1.55; } .history-card-top { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; } @media (max-width: 560px) { .history-card-top { grid-template-columns: 1fr; } } .history-card-main { text-decoration: none; color: inherit; display: block; } .history-card-main:hover h2 { text-decoration: underline; text-underline-offset: 3px; } .history-delete-form { margin: 0; } .history-card-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .text-link { font-weight: 700; color: var(--accent-dark); text-decoration: none; font-size: var(--text-sm); background-image: linear-gradient(to right, currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1.5px; transition: background-size var(--transition-base), color var(--transition-fast); } .text-link:hover { background-size: 100% 1.5px; color: var(--accent); } @media (prefers-color-scheme: dark) { .text-link { color: var(--accent); } .text-link:hover { color: var(--accent-dark); } } .button.danger { background: #b91c1c; border: none; } .button.danger:hover { background: #991b1b; } .button.danger-quiet { background: #fff7f7; color: #991b1b; border: 1px solid #fecdd3; box-shadow: none; } .button.danger-quiet:hover { background: #ffe4e6; } @media (prefers-color-scheme: dark) { .button.danger-quiet { background: rgba(220, 80, 80, 0.10); color: #ffb3b3; border-color: rgba(220, 80, 80, 0.32); } .button.danger-quiet:hover { background: rgba(220, 80, 80, 0.18); color: #ffd0d0; border-color: rgba(220, 80, 80, 0.50); } } .inline-form { display: inline; margin: 0; } .hero-actions .inline-form button { margin-top: 0; } .history-detail-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); } .history-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .history-detail-verdict { margin: 0 0 18px; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; color: var(--strong); } .history-detail-block { margin-top: 14px; } .history-detail-block h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .history-detail-dilemma { margin: 0; white-space: pre-wrap; line-height: 1.55; color: var(--strong); } .history-detail-block.subtle { padding: 12px 14px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--border); } .history-detail-actions { margin-top: 18px; } .settings-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); } .settings-readonly { display: grid; gap: 14px; margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--border); } .settings-readonly dt { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .settings-readonly dd { margin: 4px 0 0; font-weight: 700; color: var(--strong); } .settings-form { margin-top: 8px; } .subtle-copy { color: var(--muted); font-size: 14px; } .page-hero.narrow .eyebrow a { color: inherit; text-decoration: none; } .page-hero.narrow .eyebrow a:hover { text-decoration: underline; } .site-footer { margin-top: var(--space-11); padding: var(--space-10) 0 var(--space-9); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); } .site-footer strong { color: var(--strong); } .site-footer-inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--space-10); max-width: 1120px; margin: 0 auto; padding: 0 var(--space-7); } .site-footer-brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 360px; } .site-footer-brand-link { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--strong); font-weight: 700; } .site-footer-brand-name { font-size: var(--text-lg); letter-spacing: -0.005em; } .site-footer-tagline { margin: 0; color: var(--strong); font-size: var(--text-base); font-weight: 500; line-height: 1.45; } .site-footer-disclaimer { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; } .site-footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .site-footer-column-title { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--strong); } .site-footer-column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .site-footer-column a { font-size: var(--text-sm); } .site-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 1120px; margin: var(--space-9) auto 0; padding: var(--space-6) var(--space-7) 0; border-top: 1px solid var(--border); font-size: var(--text-xs); } .site-footer-copyright { color: var(--muted); } .site-footer-legal { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); } @media (max-width: 820px) { .site-footer-inner { grid-template-columns: 1fr; gap: var(--space-7); } .site-footer-columns { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .site-footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .site-footer-columns { grid-template-columns: 1fr; } } @media (max-width: 820px) { .nav-shell { align-items: flex-start; flex-direction: column; } .nav-links { justify-content: flex-start; } .hero, .three-grid, .split, .faq-list { grid-template-columns: 1fr; } .hero { padding-top: 48px; } } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; width: 100%; } .plan-pricing-grid { align-items: stretch; } .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 20px 22px; box-shadow: var(--shadow); min-width: 0; } .plan-pricing-card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; } .plan-pricing-quota { flex: 1 1 auto; } .plan-card-cta-wrap { margin-top: auto; padding-top: 12px; } .plan-card-cta-wrap form { margin: 0; width: 100%; max-width: 280px; } .billing-plan-action, .plan-card-cta { width: 100%; max-width: 280px; } .plan-pricing-faq { margin-top: 10px; } .plan-pricing-faq-list { margin: 0; } .plan-pricing-faq-list dt { font-weight: 700; color: var(--strong); margin-top: 16px; } .plan-pricing-faq-list dt:first-of-type { margin-top: 0; } .plan-pricing-faq-list dd { margin: 6px 0 0; color: var(--muted); max-width: 62ch; line-height: 1.45; } .plan-extra-requests-note { margin-top: 16px; } .pricing-hero-actions { margin-top: 24px; } .billing-back-link { margin-top: 16px; } .pricing-card h2, .pricing-card h3, .plan-pricing-card-title { margin: 0 0 8px; font-size: 22px; color: var(--strong); } .pricing-price { font-size: 20px; font-weight: 800; color: var(--accent-dark); margin: 0 0 10px; } .pricing-card-disabled { opacity: 0.58; } /* PR 60h — Most-popular badge + perks list */ .pricing-card { position: relative; display: flex; flex-direction: column; } .pricing-card-popular { border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--border)); box-shadow: var(--shadow-gold); transform: translateY(-4px); } .pricing-card-popular .pricing-price { color: var(--gold); } .pricing-card-badge { position: absolute; top: calc(-1 * var(--space-3)); right: var(--space-5); padding: var(--space-1) var(--space-3); background: linear-gradient(135deg, var(--gold), var(--accent)); color: #0a0f1c; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } :root[data-theme="light"] .pricing-card-badge { color: #ffffff; } /* phase-67 — plan discount: promo badge + strikethrough + discounted price */ .pricing-card-badge--promo { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #ffffff; } .pricing-card-discounted { border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px var(--accent-soft); } .pricing-price--discounted { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-1); } .pricing-price-original { font-size: var(--text-sm); font-weight: 600; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; } .pricing-price-now { font-size: 22px; font-weight: 800; color: var(--accent-dark); } .pricing-discount-note { display: inline-block; margin: 0 0 10px; padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--radius-pill); } .pricing-card-perks { list-style: none; margin: var(--space-4) 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .pricing-card-perks li { position: relative; padding-left: var(--space-5); color: var(--strong); font-size: var(--text-sm); line-height: 1.45; } .pricing-card-perks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; } .pricing-card-popular .pricing-card-perks li::before { color: var(--accent); } .section-title { margin: 0 0 14px; font-size: 22px; color: var(--strong); } .dashboard-usage { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); } .billing-usage-card { max-width: 640px; } /* PR 61 — Billing page premium pass. Token-driven card with gold rule across the top, accent ring on current plan, and state-colored status pills via the design tokens. */ .billing-summary-card { max-width: 720px; padding: var(--space-7) var(--space-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .billing-summary-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--accent)); } .billing-current-plan-title { margin: 0 0 var(--space-3); font-size: var(--text-3xl); color: var(--strong); letter-spacing: -0.01em; line-height: 1.15; } .billing-status-row { margin: 0 0 var(--space-3); } .billing-status-pill { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-soft); color: var(--muted-strong); } .billing-status-pill--free, .billing-status-pill--on-plan { background: var(--accent-ghost); border-color: var(--accent-soft); color: var(--accent-dark); } .billing-status-pill--active-paid { background: var(--success-bg); border-color: var(--success-border); color: var(--success); } .billing-status-pill--payment-pending { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); } .billing-status-pill--inactive { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); } .billing-payment-note { margin: 0 0 var(--space-4); max-width: 52ch; } .billing-usage-line { margin: 0 0 var(--space-2); font-size: var(--text-base); color: var(--strong); } .billing-usage-line strong { color: var(--gold); font-weight: 700; } .billing-progress { margin-top: var(--space-3); height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-soft); overflow: hidden; } .billing-progress-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), var(--accent)); min-width: 0; transition: width var(--transition-slow) var(--ease-soft); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 30%, transparent); } .billing-period-reset { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); font-size: var(--text-sm); } .billing-back-link { margin-top: var(--space-3); font-size: var(--text-sm); } /* Premium gold-accent ring on the current plan card in the picker grid */ .billing-plan-current { border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--border)); box-shadow: var(--shadow-gold); position: relative; } .billing-plan-current::after { content: "Current"; position: absolute; top: calc(-1 * var(--space-3)); left: 50%; transform: translateX(-50%); padding: var(--space-1) var(--space-3); background: linear-gradient(135deg, var(--gold), var(--accent)); color: #0a0f1c; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } :root[data-theme="light"] .billing-plan-current::after { color: #ffffff; } @media (max-width: 520px) { .nav-shell, .site-footer, .hero, .section, .page-hero, .faq-list { width: min(100% - 24px, 1120px); } .nav-links { gap: 10px; font-size: 13px; } .hero h1, .page-hero h1 { font-size: 42px; } .preview-grid { grid-template-columns: 1fr; } .auth-page { width: min(100% - 24px, 1120px); padding-top: 42px; } .auth-card { padding: 22px; border-radius: 22px; } } .founder-metric-grid .pricing-price { font-size: 28px; } .founder-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); } .founder-table { width: 100%; border-collapse: collapse; font-size: 14px; } .founder-table th, .founder-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); } .founder-table th { color: var(--strong); font-weight: 800; background: var(--surface-soft); } .founder-table tr:last-child td { border-bottom: none; } .founder-grant-form { max-width: 420px; display: grid; gap: 14px; } .founder-grant-form .button.primary { justify-self: start; } .founder-filters { display: grid; gap: 12px; margin-bottom: 16px; } .founder-filters-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: end; } .founder-filter-row { display: flex; flex-direction: column; gap: 6px; } .founder-filter-row label { font-size: 12px; font-weight: 700; color: var(--muted); } .founder-filter-actions { grid-column: 1 / -1; } .founder-export-link { font-weight: 700; } .founder-pagination { margin-top: 12px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .founder-charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .founder-chart-card { border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow); } .founder-chart-card h3 { margin: 0 0 10px; font-size: 15px; } .founder-bar-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; } .founder-bar-row { display: grid; grid-template-columns: 56px 1fr 36px; gap: 8px; align-items: center; font-size: 12px; } .founder-bar-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .founder-bar-track { height: 8px; background: var(--surface-soft); border-radius: 6px; overflow: hidden; } .founder-bar-fill { display: block; height: 100%; background: var(--accent, #4a6fa5); border-radius: 6px; min-width: 2px; } .founder-bar-fill-cost { background: #2d6a4f; } .founder-bar-fill-warn { background: #bc6c25; } .founder-bar-num { text-align: right; font-variant-numeric: tabular-nums; } .founder-table th a { color: inherit; text-decoration: underline; } .founder-admin-crosslink { margin-top: 8px; } /* ============ PR 60b: form required markers ============ */ /* * Required-field indicator: a small accent asterisk that sits next to the * label text. Sized down and shifted up so it reads as a typographic * detail rather than punctuation, and tuned to land legibly on both light * and dark backgrounds via --danger. */ .required-marker { display: inline-block; margin-left: var(--space-1); color: var(--danger); font-size: var(--text-xs); font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: super; /* Optical alignment: nudge the glyph so the asterisk sits between ascender and cap height rather than floating off the cap line. */ transform: translateY(-1px); user-select: none; pointer-events: none; } /* * Input polish: refine the focus state to a real 3-px ring (using the * pre-defined --accent-ghost token) instead of a flat 2-px outline, add a * gentle border-color transition, and ensure placeholders fall back to the * established --muted token across all themes. Scoped to .form-field so we * never collide with founder/admin tables, .founder-filters, or other * higher-density inputs. */ .form-field input, .form-field select, .form-field textarea { transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); opacity: 1; } .form-field input:hover:not(:focus):not(:disabled), .form-field select:hover:not(:focus):not(:disabled), .form-field textarea:hover:not(:focus):not(:disabled) { border-color: var(--muted-strong); } .form-field input:focus, .form-field input:focus-visible, .form-field select:focus, .form-field select:focus-visible, .form-field textarea:focus, .form-field textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ghost); } /* ============ PR 60b: theme toggle (header switch) ============ */ /* Pill-shaped toggle showing the icon of the OPPOSITE theme — i.e., in dark mode you see the sun (click to go light) and in light mode you see the moon (click to go dark). Subtle, intentional, sized to sit between nav links without disrupting the rhythm. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-soft); color: var(--muted-strong); cursor: pointer; padding: 0; font-size: 16px; line-height: 1; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .theme-toggle:hover { color: var(--strong); border-color: var(--border-strong); background: var(--surface); transform: translateY(-1px); box-shadow: var(--shadow-xs); } .theme-toggle:focus-visible { outline: 3px solid var(--accent-ghost); outline-offset: 2px; } .theme-toggle-icon { display: none; line-height: 1; } /* Dark default — show the SUN (clicking goes to light) */ .theme-toggle-icon-sun { display: inline-block; } /* Light mode — flip: show the MOON */ :root[data-theme="light"] .theme-toggle-icon-sun { display: none; } :root[data-theme="light"] .theme-toggle-icon-moon { display: inline-block; } /* ============ PR 60b: inline-style purge ============ */ /* * All classes in this block were created to replace inline style="..." * attributes across 6 templates (dashboard, preferences, how_to_read, * contact, 404, 500). They consume design tokens only — no raw * px/hex/rgba beyond opacity tweaks the token system cannot express. * Read as one block; everything below ties back to that purge. */ /* --- Utility: vertical rhythm ----------------------------------- */ .stack-block-md { margin-top: var(--space-4); } /* --- Dashboard: usage strip on top of history ------------------- */ .dashboard-usage-strip { margin-bottom: var(--space-6); } .dashboard-usage-title { margin: 0 0 var(--space-1); font-size: var(--text-xl); color: var(--strong); letter-spacing: var(--tracking-tight); } .dashboard-usage-line { margin: 0; } /* --- Founder dashboard payment section (lines 31-164) ----------- */ /* Intentionally dense + analytical: tight rows, sticky header, * subtle hover, accent-soft elevation. Will be relocated later. */ .founder-payment-intro { margin-bottom: var(--space-4); } .founder-payment-links { margin-bottom: var(--space-4); } .founder-payment-block { margin-bottom: var(--space-5); } .founder-payment-bullets { margin: 0; padding-left: var(--space-5); } .founder-payment-subhead { margin-top: var(--space-3); } .founder-revenue-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-xs); } .founder-table-wrap-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-accent-soft); margin-bottom: var(--space-6); } .founder-table-dense { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .founder-table-dense thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft); color: var(--strong); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-xs); text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); } .founder-table-dense th.num, .founder-table-dense td.num { text-align: right; font-variant-numeric: tabular-nums; } .founder-table-dense tbody td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: top; } .founder-table-dense tbody tr:last-child td { border-bottom: none; } .founder-table-dense tbody tr { transition: background var(--transition-fast); } .founder-table-dense tbody tr:hover { background: var(--accent-ghost); } .founder-table-empty { padding: var(--space-3); color: var(--muted); } /* --- Notifications: preferences form --------------------------- */ .preferences-form { margin-top: var(--space-6); max-width: 520px; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .preference-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-1); border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: color var(--transition-fast); } .preference-row:last-of-type { border-bottom: none; } .preference-row:hover { color: var(--strong); } .preference-row-label { font-size: var(--text-base); line-height: var(--leading-snug); color: var(--text); } /* Custom checkbox using appearance:none. The :checked state pulls * the accent token so the form feels intentional, not browser-default. */ .preference-checkbox { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: 0 0 20px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface); cursor: pointer; position: relative; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .preference-checkbox:hover { border-color: var(--accent); } .preference-checkbox:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); } .preference-checkbox:checked { background: var(--accent); border-color: var(--accent); } .preference-checkbox:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border-right: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: rotate(45deg); } .preference-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); } /* --- Contact: trustworthy form card ----------------------------- */ .contact-form-card { width: 100%; max-width: 820px; padding: var(--space-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .contact-form-title { margin: 0 0 var(--space-5); color: var(--strong); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); } /* --- 404 / 500 error pages: gracious, not apologetic ----------- */ .page-error-actions { margin-top: var(--space-5); } .page-error-links { border-left: 3px solid var(--accent-soft); padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .page-error-links p { margin: 0; } /* Cookie consent banner — fixed to the viewport bottom, above all chrome. */ .cookie-banner { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 60; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-5); } .cookie-banner[hidden] { display: none; } .cookie-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); max-width: 1080px; margin: 0 auto; } .cookie-banner-text { margin: 0; flex: 1 1 320px; color: var(--muted-strong); font-size: var(--text-sm); line-height: 1.55; } .cookie-banner-actions { display: flex; gap: var(--space-3); flex: 0 0 auto; } @media (max-width: 560px) { .cookie-banner { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); padding: var(--space-4); } .cookie-banner-actions { width: 100%; } .cookie-banner-actions .button { flex: 1 1 0; } }