*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ═══════════════════════════════════════════════════════════════════════════ Theme tokens. LIGHT is the default (iOS / Discovery / FNB inspired): soft grey canvas, white grouped cards, hairline borders, soft shadows, the native system font (SF Pro on Apple devices). Dark + System are opt-in via . ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* Canvas + surfaces */ --bg: #F2F2F7; /* iOS system grouped background */ --surface: #FFFFFF; /* cards */ --surface-2: #F2F2F7; --surface-3: #E5E5EA; --card: #FFFFFF; /* Text */ --text: #1C1C1E; /* iOS label */ --soft: #6E6E73; /* secondary label */ --muted: #8E8E93; /* tertiary label */ /* Brand + accents (sunrise palette kept) */ --orange: #F2762B; /* slightly deepened for contrast on white */ --accent: #F2762B; --accent-press: #DA5F18; --gold: #E0961A; --ember: #E03020; --green: #0E9E73; --blue: #2F6FE0; --purple: #7C5CBF; /* Lines + glass (frosted white — very iOS/macOS) */ --border: rgba(60, 60, 67, 0.12); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.06); --glass-highlight: rgba(255, 255, 255, 0.85); --glass-blur: 22px; /* Soft layered shadows (depth without harsh borders) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 2px 8px rgba(0,0,0,0.05), 0 14px 30px rgba(0,0,0,0.06); --radius: 12px; --radius-lg: 18px; --bnav-h: 68px; /* ── Type scale — ONE modular scale, base 16px stepped by ~1.25 ─────────── Use these tokens instead of one-off rem values. Micro UI chrome (badges, mono labels) may use --fs-2xs, but never prose body text. */ --fs-2xs: 0.6875rem; /* 11px — mono micro-labels, badges (chrome only) */ --fs-xs: 0.75rem; /* 12px — captions, meta */ --fs-sm: 0.875rem; /* 14px — secondary text */ --fs-base: 1rem; /* 16px — body / prose (floor, incl. mobile) */ --fs-md: 1.125rem; /* 18px — lead paragraph */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5625rem; /* 25px — section headings */ --fs-2xl: 1.9375rem; /* 31px — page titles */ --fs-3xl: 2.4375rem; /* 39px — display / hero */ /* ── Spacing scale — 8px base. Replaces ad-hoc margins/paddings ──────────*/ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ── Reading measure + line heights ──────────────────────────────────────*/ --measure: 65ch; /* optimal 50–75 chars/line for prose */ --lh-body: 1.5; --lh-heading: 1.2; /* System font first → real SF Pro on the user's Mac/iPhone */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "DM Sans", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "DM Sans", sans-serif; --font-mono: "SF Mono", ui-monospace, "DM Mono", Menlo, monospace; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); } /* ── Dark theme (opt-in) ───────────────────────────────────────────────────*/ :root[data-theme="dark"] { /* Kamoso Luxe — obsidian base · ivory/champagne neutrals · brushed-gold metallic accent (gold-primary) · deep emerald brand accent. */ color-scheme: dark; /* Lifted off pure black to ~#121212 to avoid ivory-on-black halation. Elevation is expressed with progressively lighter grays, not heavy shadows. Warm-tinted to keep the obsidian Luxe feel. */ --bg: #121214; /* obsidian, lifted (was #08080A pure-black) */ --surface: #1C1C20; /* graphite — elevation via lighter gray */ --surface-2: #26262C; --surface-3: #323239; --card: #1C1C20; --text: #E8E2D4; /* warm ivory, slightly dimmed to ease glow */ --soft: #C5B89D; /* champagne — secondary */ --muted: #8A8373; /* warm muted — tertiary */ --orange: #D2AC57; /* gold accent, nudged lighter for contrast */ --accent: #D2AC57; /* brushed gold — primary actions */ --accent-press: #B0863A; --gold: #D2AC57; /* unified metallic */ --emerald: #103D2E; /* brand accent — deep panels, verified, hero */ --border: rgba(210, 172, 87, 0.16); /* faint gold hairline */ --glass-bg: rgba(28, 28, 32, 0.72); --glass-border: rgba(210, 172, 87, 0.12); --glass-highlight: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 6px 22px rgba(0,0,0,0.4); } /* ── System theme → follow the device when explicitly chosen ───────────────*/ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --bg: #121214; --surface: #1C1C20; --surface-2: #26262C; --surface-3: #323239; --card: #1C1C20; --text: #E8E2D4; --soft: #C5B89D; --muted: #8A8373; --orange: #D2AC57; --accent: #D2AC57; --accent-press: #B0863A; --gold: #D2AC57; --emerald: #103D2E; --border: rgba(210, 172, 87, 0.16); --glass-bg: rgba(28, 28, 32, 0.72); --glass-border: rgba(210, 172, 87, 0.12); --glass-highlight: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 6px 22px rgba(0,0,0,0.4); } } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); /* 16px — readable prose floor */ line-height: var(--lh-body); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth); } a { color: var(--orange); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Navbar ─────────────────────────────── */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 58px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--text) !important; text-decoration: none !important; } .brand-accent { color: var(--orange); } .nav-right { display: flex; align-items: center; gap: 1.25rem; } .nav-links { display: flex; align-items: center; gap: 0.25rem; } /* Clear, high-contrast nav links with pill hover + active state */ .nav-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--soft); text-decoration: none !important; padding: 0.4rem 0.7rem; border-radius: 9px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .nav-link.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; } /* Account / logout cluster, divided from the main links */ .nav-account { display: flex; align-items: center; gap: 0.25rem; padding-left: 1rem; border-left: 1px solid var(--border); } .nav-user { font-size: 0.9rem; font-weight: 500; } .nav-logout { color: var(--muted); } .nav-logout:hover { color: var(--text); } /* The top bar is desktop-only; mobile uses the bottom-nav */ @media (max-width: 767px) { .nav-right { display: none; } } /* ── Main container ─────────────────────── */ .main { max-width: none; margin-inline: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; } @media (max-width: 767px) { .main { padding-bottom: calc(var(--bnav-h) + 1.5rem + env(safe-area-inset-bottom, 0px)); } } /* ── Flash ──────────────────────────────── */ .flash { /* Default = success/positive (green). Real errors override to red below. */ background: #0F1A13; border: 1px solid #21402E; border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.875rem; color: #86E0AD; margin-bottom: 1rem; } .flash-error, .flash-warning, .flash-danger { background: #1E1010; border-color: #3D1A1A; color: #E89090; } /* ── Legal pages (Terms / Privacy / POPIA) ─────────────────────────────────*/ .legal { max-width: 780px; margin: 0 auto; } .legal-logo { height: 32px; width: auto; display: block; margin-bottom: 1.5rem; } :root[data-theme="dark"] .legal-logo { filter: brightness(0) invert(1); } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .legal-logo { filter: brightness(0) invert(1); } } .legal h1 { font-size: 1.9rem; margin: 0 0 0.3rem; color: var(--text); } .legal h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; color: var(--text); } .legal .legal-meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.75rem; } .legal .legal-lead { color: var(--text); font-size: 1.02rem; line-height: 1.6; } .legal p, .legal li { color: var(--soft); line-height: 1.65; } .legal ul, .legal ol { padding-left: 1.2rem; margin: 0.5rem 0 1rem; } .legal li { margin: 0.3rem 0; } .legal a { color: var(--accent); } .legal .legal-note { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; margin: 1.1rem 0; font-size: 0.9rem; line-height: 1.6; } .legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; } .legal th, .legal td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--soft); vertical-align: top; } .legal th { color: var(--text); } /* ── Site footer ───────────────────────────────────────────────────────────*/ .site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.5rem clamp(1rem, 4vw, 3rem); } .site-footer-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: space-between; } .site-footer-copy { color: var(--muted); font-size: 0.82rem; } .site-footer-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; } .site-footer-nav a { color: var(--soft); font-size: 0.82rem; text-decoration: none; } .site-footer-nav a:hover { color: var(--accent); } @media (max-width: 767px) { .site-footer { margin-bottom: calc(var(--bnav-h, 0px) + env(safe-area-inset-bottom, 0px)); } } /* ── Auth ───────────────────────────────── */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: var(--bg); } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; width: 100%; max-width: 380px; } .auth-wordmark { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.04em; color: var(--text); line-height: 1; margin-bottom: 0.2rem; } .auth-tagline { font-size: 0.8125rem; color: var(--muted); margin-bottom: 1.75rem; } .auth-link { text-align: center; margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted); } /* ── Forms ──────────────────────────────── */ .form-group { margin-bottom: 1rem; } label { display: block; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.375rem; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], textarea, select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: 0.9375rem; padding: 0.65rem 0.875rem; outline: none; transition: border-color 0.15s; appearance: none; -webkit-appearance: none; } /* Native date/time pickers follow the active theme automatically (no hardcode) */ /* Remove number input spinners — we handle increment via keyboard/mouse */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } input:focus, textarea:focus, select:focus { border-color: var(--orange); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.55; } textarea { resize: vertical; min-height: 100px; line-height: 1.5; } .checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; } .checkbox-row input[type="checkbox"] { width: auto; accent-color: var(--orange); } .checkbox-row label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.875rem; color: var(--muted); } /* ── Buttons ────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.625rem 1.25rem; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; cursor: pointer; border: none; text-decoration: none !important; transition: opacity 0.12s; white-space: nowrap; line-height: 1; } .btn:hover { opacity: 0.82; } .btn:active { opacity: 0.65; } .btn-primary { background: var(--orange); color: #0A0808; } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); } .btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8125rem; } .btn-xs { padding: 0.25rem 0.625rem; font-size: 0.75rem; } .btn-full { width: 100%; margin-top: 0.5rem; } /* ── Greeting ───────────────────────────── */ .greeting { margin-bottom: 1.5rem; } .greeting-time { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.2rem; } .greeting-name { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 0.03em; color: var(--text); line-height: 1; } /* ── Page header ────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; } .page-title { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.03em; color: var(--text); } /* ── Stats grid ─────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; margin-bottom: 1.75rem; } @media (min-width: 480px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1rem 0.875rem; position: relative; overflow: hidden; } /* gold accent on active card */ .stat-card--active { border-color: rgba(255, 184, 51, 0.25); } .stat-card--active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); border-radius: 2px 0 0 2px; } .stat-value { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--text); margin-bottom: 0.3rem; } .stat-card--active .stat-value { color: var(--gold); } .stat-label { font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } /* ── Section label ──────────────────────── */ .section-label { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.625rem; } /* ── Jobs list — transaction style ─────── */ .jobs-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .job-card { background: var(--surface); padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.875rem; border-bottom: 1px solid var(--border); transition: background 0.1s; } .job-card:last-child { border-bottom: none; } .job-card:hover { background: var(--surface-2); } /* status dot */ .job-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .job-dot--pending { background: #44446A; box-shadow: 0 0 0 3px #1A1A2A; } .job-dot--active { background: var(--gold); box-shadow: 0 0 0 3px rgba(255,184,51,0.15); } .job-dot--done { background: #50C080; box-shadow: 0 0 0 3px rgba(80,192,128,0.12); } .job-body { flex: 1; min-width: 0; } .job-client { font-weight: 500; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .job-desc { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; } .job-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex-shrink: 0; } .job-date { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .job-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--orange); letter-spacing: 0.04em; font-weight: 500; } /* ── Status badges ──────────────────────── */ .badge { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border-radius: 99px; white-space: nowrap; } .badge-pending { background: #14141E; color: #7878A0; border: 1px solid #24243A; } .badge-active { background: #181408; color: var(--gold); border: 1px solid #302810; } .badge-done { background: #081810; color: #50C080; border: 1px solid #143020; } /* ── Empty state ────────────────────────── */ .empty-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem 1.5rem; text-align: center; } .empty-state p { color: var(--muted); font-size: 0.9375rem; margin-bottom: 1.25rem; } /* ── Job detail ─────────────────────────── */ .detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .back-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; color: var(--orange); text-decoration: none !important; } .back-link:hover { opacity: 0.8; } .detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1rem; margin-bottom: 1.75rem; } .detail-client { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.03em; line-height: 1.1; margin-bottom: 0.5rem; } .detail-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.25rem; } .detail-desc { font-size: 0.9rem; color: var(--muted); margin-top: 0.75rem; line-height: 1.5; } /* ── Section header with total ──────────── */ .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.625rem; } .section-total { font-family: var(--font-display); font-size: 1.5rem; color: var(--orange); letter-spacing: 0.03em; } .no-costs { color: var(--muted); font-size: 0.875rem; margin-bottom: 1rem; } /* ── Cost amount on card ────────────────── */ .cost-amount { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text); font-weight: 500; } .btn-delete { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.75rem; padding: 0.2rem 0.3rem; line-height: 1; transition: color 0.12s; } .btn-delete:hover { color: var(--ember); } /* ── Add cost section ───────────────────── */ .cost-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.125rem 1.25rem 1.25rem; margin-bottom: 0.75rem; } .cost-section-title { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.875rem; } .cost-section-hint { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.875rem; } .cost-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* ── Scan receipt UI ────────────────────── */ .scan-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .scan-file-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; color: var(--muted); cursor: pointer; transition: border-color 0.15s; white-space: nowrap; overflow: hidden; max-width: 240px; } .scan-file-label:hover { border-color: var(--orange); color: var(--text); } .scan-file-label input[type="file"] { display: none; } /* ── Scanned items preview ──────────────── */ .scanned-items { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.125rem; margin-bottom: 0.5rem; } .scanned-item { display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; } .scanned-item:last-child { border-bottom: none; } .scanned-item-name { color: var(--text); } .scanned-item-amount { color: var(--orange); font-family: var(--font-mono); font-size: 0.8125rem; } /* ── Clickable job body on dashboard ───── */ .job-body-link { flex: 1; min-width: 0; text-decoration: none !important; } .job-body-link:hover .job-client { color: var(--orange); } .job-body-link .job-client { transition: color 0.12s; } /* ── Bottom nav (mobile only) ───────────── */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0px); } .bottom-nav-inner { display: flex; align-items: center; justify-content: space-around; height: var(--bnav-h); max-width: 480px; margin: 0 auto; padding: 0 0.5rem; } .bnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: var(--muted); text-decoration: none !important; flex: 1; padding: 0.5rem 0; transition: color 0.12s; } .bnav-item span { font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.01em; } .bnav-item.active { color: var(--accent); } .bnav-item.active svg { animation: bob 0.4s var(--ease-spring); } .bnav-item:hover { color: var(--text); text-decoration: none !important; } .bnav-item:active { transform: scale(0.92); } /* centre FAB */ .bnav-fab { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--accent); border-radius: 50%; color: #fff; text-decoration: none !important; flex-shrink: 0; margin-top: -22px; box-shadow: 0 6px 18px rgba(255, 140, 66, 0.45), 0 0 0 5px var(--bg); transition: transform 0.18s var(--ease-spring); } .bnav-fab svg { stroke: #fff; } .bnav-fab:hover { transform: translateY(-2px); text-decoration: none !important; } .bnav-fab:active { transform: scale(0.92); } @media (max-width: 767px) { .bottom-nav { display: block; } } /* ── Account / settings page ────────────── */ /* Two-column layout: sticky section nav + content (desktop only) */ .settings-layout { display: block; } .settings-nav { display: none; } .settings-body { min-width: 0; } @media (min-width: 900px) { .settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2rem; align-items: start; } .settings-nav { display: flex; flex-direction: column; gap: 0.15rem; position: sticky; top: 74px; } .settings-nav a { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: 9px; font-size: 0.875rem; font-weight: 500; color: var(--soft); text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease; } .settings-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); } .settings-nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; } .settings-nav a .ic { opacity: 0.85; } /* offset anchored sections so the sticky top bar doesn't cover the heading */ .settings-section[id] { scroll-margin-top: 74px; } } .settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 0.5rem; margin-bottom: 1rem; } /* Toggle row (label + iOS-style switch) */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0 1rem; cursor: pointer; } .toggle-text { display: flex; flex-direction: column; gap: 0.2rem; } .toggle-text strong { color: var(--text); font-size: 0.95rem; font-weight: 600; } .toggle-text span { color: var(--soft); font-size: 0.82rem; line-height: 1.45; } .switch { position: relative; flex: 0 0 auto; width: 46px; height: 28px; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch-track { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 22%, transparent); transition: background 0.2s ease; } .switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s var(--ease-spring); } .switch input:checked + .switch-track { background: var(--accent); } .switch input:checked + .switch-track::after { transform: translateX(18px); } .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } /* Danger zone */ .danger-section { border-color: #5a2222; } .settings-nav a.nav-danger { color: #E05050; } .settings-nav a.nav-danger:hover { background: rgba(224,80,80,0.1); } .danger-details summary { display: inline-flex; list-style: none; cursor: pointer; margin-bottom: 0.5rem; } .danger-details summary::-webkit-details-marker { display: none; } .danger-confirm { margin-top: 0.5rem; max-width: 360px; } .btn-danger { background: #C0392B; color: #fff !important; border: 1px solid #C0392B; } .btn-danger:hover { background: #A93226; border-color: #A93226; } .btn-danger-outline { color: #E05050 !important; border: 1px solid #5a2222 !important; } .btn-danger-outline:hover { background: rgba(224,80,80,0.1); } .settings-section-title { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 1rem; } /* ── Profit strip on job detail ─────────── */ .profit-strip { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.25rem; } .profit-stat { flex: 1; padding: 0.875rem 1rem; text-align: center; } .profit-divider { width: 1px; background: var(--border); flex-shrink: 0; } .profit-label { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.3rem; } .profit-value { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.02em; color: var(--text); } .profit-positive { color: #50C080; } .profit-negative { color: var(--ember); } /* ── Dashboard toolbar (filter + search) ── */ .jobs-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .filter-tabs { display: flex; gap: 0.25rem; flex-shrink: 0; } .filter-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 99px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--muted); transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; } .filter-btn:hover { color: var(--text); border-color: var(--text); } .filter-btn.active { background: var(--orange); color: #0A0808; border-color: var(--orange); } .filter-count { font-family: var(--font-mono); font-size: 0.625rem; opacity: 0.8; } .job-search-input { flex: 1; min-width: 140px; max-width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; color: var(--text); font-family: var(--font-body); font-size: 0.875rem; padding: 0.3rem 0.875rem; outline: none; transition: border-color 0.15s; } .job-search-input:focus { border-color: var(--orange); } .job-search-input::placeholder { color: var(--muted); opacity: 0.55; } /* ── Trial banner ───────────────────────── */ .trial-banner { border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1.25rem; } .trial-banner--warning { background: #181408; border: 1px solid #302810; color: var(--gold); } .trial-banner--warning a { color: var(--gold); font-weight: 600; text-decoration: underline; } .trial-banner--expired { background: #1E1010; border: 1px solid #3D1A1A; color: #E89090; } .trial-banner--expired a { color: var(--orange); font-weight: 600; text-decoration: underline; } /* ── Subscribe page ─────────────────────── */ .subscribe-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; } .subscribe-plan-name { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.75rem; } .subscribe-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 1.5rem; } .subscribe-currency { font-family: var(--font-display); font-size: 1.5rem; color: var(--muted); } .subscribe-amount { font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--text); letter-spacing: -0.02em; } .subscribe-period { font-size: 0.875rem; color: var(--muted); margin-left: 0.125rem; } .subscribe-features { list-style: none; margin-bottom: 1.75rem; display: flex; flex-direction: column; gap: 0.625rem; } .subscribe-features li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9rem; color: var(--muted); } .subscribe-features li svg { color: #50C080; flex-shrink: 0; } /* ── Quote builder ──────────────────────── */ .quote-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; } .line-items-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; } .line-items-table { width: 100%; border-collapse: collapse; min-width: 480px; } .line-items-table thead th { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0 0.5rem 0.625rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .line-items-table tbody td { padding: 0.4rem 0.5rem; vertical-align: middle; } .line-items-table tbody tr:last-child td { padding-bottom: 0; } /* inputs inside the table */ .line-items-table input[type="text"] { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: 0.875rem; padding: 0.45rem 0.65rem; outline: none; width: 100%; } .line-items-table input[type="number"] { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-mono); font-size: 0.875rem; padding: 0.45rem 0.65rem; outline: none; width: 100%; text-align: right; -moz-appearance: textfield; } .line-items-table input[type="number"]::-webkit-outer-spin-button, .line-items-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } .line-items-table input:focus { border-color: var(--orange); } .line-total { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); white-space: nowrap; } /* ── Quote totals block ──────────────────── */ .quote-totals { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; max-width: 340px; margin-left: auto; margin-top: 1rem; } .quote-totals--view { margin-top: 0.75rem; } .vat-toggle { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; cursor: pointer; font-family: var(--font-body); font-size: 0.875rem; color: var(--muted); } .vat-toggle input[type="checkbox"] { width: auto; accent-color: var(--orange); cursor: pointer; } .totals-rows { display: flex; flex-direction: column; gap: 0; } .totals-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; color: var(--muted); } .totals-row:last-child { border-bottom: none; } .totals-row span:last-child { font-family: var(--font-mono); font-size: 0.875rem; } .totals-total { color: var(--text); font-weight: 600; font-size: 1rem !important; padding-top: 0.625rem !important; } .totals-total span:last-child { color: var(--orange); font-size: 1.125rem !important; } /* ── Quote view table ────────────────────── */ .quote-view-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); } .quote-view-table { width: 100%; border-collapse: collapse; min-width: 400px; } .quote-view-table thead th { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0.625rem 1rem; text-align: left; background: var(--surface); border-bottom: 1px solid var(--border); } .quote-view-table tbody td { padding: 0.75rem 1rem; font-size: 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; background: var(--bg); } .quote-view-table tbody tr:last-child td { border-bottom: none; } /* ── Quote/invoice status badges ─────────── */ .badge-draft { background: #14141E; color: #7878A0; border: 1px solid #24243A; } .badge-sent { background: #0A1628; color: #6090D0; border: 1px solid #1A3060; } .badge-accepted { background: #081810; color: #50C080; border: 1px solid #143020; } .badge-rejected { background: #1E1010; color: #E05050; border: 1px solid #3D1A1A; } .badge-unpaid { background: #181408; color: var(--gold); border: 1px solid #302810; } .badge-paid { background: #081810; color: #50C080; border: 1px solid #143020; } .badge-overdue { background: #1E1010; color: var(--ember); border: 1px solid #3D1A1A; } /* ═══════════════════════════════════════════════════════════════════════════ ServiceHub design layer — "Liquid Glass" (iOS 26 / macOS Tahoe inspired) Glassmorphism, spring micro-interactions, animated icons. Vanilla CSS only. ═══════════════════════════════════════════════════════════════════════════ */ /* (Theme tokens, glass + easing now live in the themed :root blocks at the top of this file so light/dark/system all resolve correctly.) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ── Glass surfaces ────────────────────────────────────────────────────────*/ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 0 var(--glass-highlight), 0 8px 30px rgba(0, 0, 0, 0.35); } /* Frosted top nav (macOS menubar / iOS vibrancy) */ .navbar { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-bottom: 1px solid var(--glass-border); } /* Frosted bottom nav (iOS tab bar) */ .bottom-nav { background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-top: 1px solid var(--glass-border); } /* ── Spring entrance for content ───────────────────────────────────────────*/ .main > * { animation: rise-in 0.45s var(--ease-out) both; } @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .provider-grid > *, .service-list > *, .stats-grid > *, .checklist > * { animation: rise-in 0.45s var(--ease-out) both; } .provider-grid > *:nth-child(2), .service-list > *:nth-child(2) { animation-delay: 0.04s; } .provider-grid > *:nth-child(3), .service-list > *:nth-child(3) { animation-delay: 0.08s; } .provider-grid > *:nth-child(4), .service-list > *:nth-child(4) { animation-delay: 0.12s; } .provider-grid > *:nth-child(5), .service-list > *:nth-child(5) { animation-delay: 0.16s; } .provider-grid > *:nth-child(6), .service-list > *:nth-child(6) { animation-delay: 0.20s; } /* ── Buttons: tactile spring press ─────────────────────────────────────────*/ .btn { transition: transform 0.18s var(--ease-spring), box-shadow 0.18s var(--ease-out), background 0.18s var(--ease-smooth), filter 0.18s var(--ease-smooth); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px) scale(0.98); } .btn-primary { box-shadow: 0 4px 14px rgba(255, 140, 66, 0.28); } .btn-primary:hover { box-shadow: 0 6px 20px rgba(255, 140, 66, 0.40); filter: brightness(1.05); } /* ── Cards: lift on hover (macOS) ──────────────────────────────────────────*/ .provider-card, .stat-card, .job-card, .settings-section { transition: transform 0.22s var(--ease-spring), border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out); } .provider-card:hover, .job-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* ── Animated icons (pure CSS / SVG) ───────────────────────────────────────*/ .spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .check-anim { width: 48px; height: 48px; } .check-anim circle { stroke: var(--green); stroke-width: 2; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: draw 0.5s var(--ease-out) forwards; } .check-anim path { stroke: var(--green); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 0.35s var(--ease-out) 0.4s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .pulse { animation: pulse 1.4s var(--ease-smooth) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 48, 32, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(224, 48, 32, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 48, 32, 0); } } .bnav-item.active svg { animation: bob 0.4s var(--ease-spring); color: var(--accent); } @keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(-3px) scale(1.08); } 100% { transform: translateY(0); } } .skeleton { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 200% 100%; animation: shimmer 1.3s var(--ease-smooth) infinite; border-radius: var(--radius); } @keyframes shimmer { to { background-position: -200% 0; } } /* ── Desktop: macOS-style roomier layout ───────────────────────────────────*/ @media (min-width: 1024px) { .main { max-width: 1080px; padding: 2rem 1.5rem 3rem; } .provider-grid { grid-template-columns: 1fr 1fr 1fr !important; } } /* ── Focus rings (accessibility, Apple-style) ──────────────────────────────*/ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ── Floating "Ask AI" button (desktop, every page) ────────────────────────*/ .ai-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 70; display: inline-flex; align-items: center; gap: 0; height: 56px; padding: 0 16px; border-radius: 28px; background: var(--accent); color: #fff !important; box-shadow: 0 6px 20px rgba(255,140,66,0.45); text-decoration: none !important; transition: transform 0.18s var(--ease-spring), gap 0.18s var(--ease-out), padding 0.18s var(--ease-out); overflow: hidden; } .ai-fab svg { stroke: #fff; flex: 0 0 auto; } .ai-fab-label { max-width: 0; opacity: 0; white-space: nowrap; font-weight: 600; transition: max-width 0.22s var(--ease-out), opacity 0.18s var(--ease-out); } .ai-fab:hover { transform: translateY(-2px); gap: 8px; } .ai-fab:hover .ai-fab-label { max-width: 120px; opacity: 1; } .ai-fab:active { transform: scale(0.94); } /* Hide on mobile — the bottom-nav already has the AI centre FAB there. */ @media (max-width: 767px) { .ai-fab { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ Apple / Discovery / FNB polish layer (overrides for the system-font, light UI) Loaded last so it wins. Headings are now system-font, so they need weight + tight tracking (not the wide tracking the old Bebas display font used). ═══════════════════════════════════════════════════════════════════════════ */ /* Headings: bold, tight, large — SF-Pro-Display feel */ .page-title { font-weight: 700; font-size: 1.65rem; letter-spacing: -0.02em; } .greeting-name { font-weight: 700; letter-spacing: -0.02em; } .brand { font-weight: 700; letter-spacing: -0.02em; } .hero-title { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .stat-value { font-weight: 700; letter-spacing: -0.02em; } .unlock-amount, .payout-value { font-weight: 700; letter-spacing: -0.02em; } h1, h2, h3 { letter-spacing: -0.01em; } /* Section labels: cleaner sentence-case feel, less "terminal" */ .section-label, .settings-section-title { font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--muted) !important; } /* Field labels: keep tidy but drop the uppercase mono "code" look */ label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 500; color: var(--soft); } /* Cards: soft shadow + hairline (iOS grouped cards), not heavy borders */ .settings-section, .stat-card, .provider-card, .job-card, .booking-card, .review-item, .payout-item { border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .provider-card:hover, .job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Inputs: white fields, hairline, accent focus ring (iOS form feel) */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], textarea, select, .job-search-input { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } input:focus, textarea:focus, select:focus, .job-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* Buttons: rounded, confident, Apple-blue-style accent (but our orange) */ .btn { border-radius: 12px; font-weight: 600; } .btn-primary { background: var(--accent); color: #fff; border: none; } .btn-primary:hover { background: var(--accent); filter: brightness(1.04); } .btn-primary:active { background: var(--accent-press); } .btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); } /* Links use the accent consistently */ a { color: var(--accent); } /* Hero: soft tinted glass card on light bg */ .hero { background-image: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); box-shadow: var(--shadow-md); } /* Bottom nav + navbar: cleaner hairline on light */ .navbar { border-bottom: 1px solid var(--glass-border); } .bottom-nav { border-top: 1px solid var(--glass-border); } /* Provider rating + stars stay gold; ensure readable on white */ .provider-rating, .review-stars { color: var(--gold); } /* ── Theme switcher control (in Account settings) ──────────────────────────*/ .theme-switch { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; } .theme-switch button { border: none; background: transparent; color: var(--soft); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 8px; cursor: pointer; transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out); } .theme-switch button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } /* ═══════════════════════════════════════════════════════════════════════════ Typography & decluttering pass — loaded last so it wins. Goals (in priority order): cap line length, tune line-height + heading rhythm, snap headings to the modular scale, keep mobile body ≥16px, and remove pure-white-on-near-black halation in the dark Luxe theme. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Cap line length on prose (the single biggest declutter) ──────────── ~65ch keeps lines in the 50–75 char comfort zone. Card-bound paragraphs are already narrower; this only bites on full-width prose, where it left-aligns the text block instead of letting it run the full 880–960px container. */ .main p, .detail-desc, .detail-meta, .empty-state p, .cost-section-hint, .no-costs, .trial-banner, .subscribe-features li, .toggle-text span, .auth-tagline, .auth-link, .finder-msg, .provider-blurb, .hero-sub, .lede { max-width: var(--measure); } /* Centered prose (heroes) keeps its measure but stays centered */ .hero[style*="center"] .hero-sub, .empty-state p { margin-left: auto; margin-right: auto; } /* ── 2. Line-height + heading rhythm (more space ABOVE than below) ─────────*/ body { line-height: var(--lh-body); } h1, h2, h3, h4, h5, h6, .page-title, .greeting-name, .detail-client, .hero-title, .section-total, .stat-value { line-height: var(--lh-heading); } /* Display numerals can stay optically tight */ .stat-value, .greeting-name, .subscribe-amount { line-height: 1.05; } /* Space above a heading > space below it. :not(:first-child) avoids a gap at the top of a card/section. */ .section-label:not(:first-child), .section-header:not(:first-child), .cost-section-title:not(:first-child), .settings-section-title:not(:first-child) { margin-top: var(--space-6); } .page-header { margin-bottom: var(--space-4); } .page-header + *, .section-label + *, .section-header + * { margin-top: 0; } /* ── 3. Snap key headings/prose to the modular type scale ──────────────────*/ .page-title { font-size: var(--fs-2xl); } .greeting-name { font-size: var(--fs-3xl); } .detail-client { font-size: var(--fs-2xl); } .section-total { font-size: var(--fs-xl); } .stat-value { font-size: var(--fs-2xl); } /* Readable body prose at the 16px floor (these were 14–15px before) */ .detail-desc, .empty-state p, .subscribe-features li, .cost-section-hint, .trial-banner { font-size: var(--fs-base); } .detail-meta, .toggle-text span, .auth-link { font-size: var(--fs-sm); } /* ── 4. Mobile: never shrink body prose below 16px ─────────────────────────*/ @media (max-width: 767px) { body { font-size: var(--fs-base); } .detail-desc, .empty-state p, .subscribe-features li, .job-client { font-size: var(--fs-base); } } /* ── 5. Section breathing room (whitespace between blocks) ─────────────────*/ .settings-section, .cost-section, .quote-section, .detail-card, .jobs-list { margin-bottom: var(--space-5); } /* ── 6. Dark-theme halation fixes ────────────────────────────────────────── On gold (--accent) the foreground must be dark, not white, for legible contrast and to kill the white glow on near-black. */ :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .bnav-fab, :root[data-theme="dark"] .ai-fab, :root[data-theme="dark"] .fr-rank { color: #1A150A !important; } :root[data-theme="dark"] .bnav-fab svg, :root[data-theme="dark"] .ai-fab svg { stroke: #1A150A; } /* Toggle knob: off-white instead of pure #FFF to avoid a hot dot */ :root[data-theme="dark"] .switch-track::after { background: #E8E2D4; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .btn-primary, :root[data-theme="system"] .bnav-fab, :root[data-theme="system"] .ai-fab, :root[data-theme="system"] .fr-rank { color: #1A150A !important; } :root[data-theme="system"] .bnav-fab svg, :root[data-theme="system"] .ai-fab svg { stroke: #1A150A; } :root[data-theme="system"] .switch-track::after { background: #E8E2D4; } }