/* ============================================================ app.css — shared styles for admin + client dashboards, auth pages, and light funnel polish. Colour palette uses CSS custom properties for easy adjustment. No external frameworks — plain CSS only (PRD Section 0). Dark mode: auto via prefers-color-scheme, manual via data-theme="dark" on , persisted in localStorage. ============================================================ */ /* ----- Light palette (default) ----- */ :root { --c-primary: #0f766e; --c-primary-dark: #115e59; --c-primary-light: #ccfbf1; --c-primary-hover: #0d9488; --c-accent: #2563eb; --c-accent-light: #dbeafe; --c-success: #16a34a; --c-success-bg: #dcfce7; --c-success-border: #86efac; --c-warning: #d97706; --c-warning-bg: #fef3c7; --c-warning-border: #fcd34d; --c-danger: #dc2626; --c-danger-bg: #fee2e2; --c-danger-border: #fca5a5; --c-text: #1e293b; --c-text-secondary: #64748b; --c-text-muted: #94a3b8; --c-bg: #f8fafc; --c-bg-card: #ffffff; --c-border: #e2e8f0; --c-border-light: #f1f5f9; --c-header-bg: #115e59; --c-header-text: #ffffff; --c-input-bg: #ffffff; --c-code-bg: #1e293b; --c-code-text: #e2e8f0; --c-code-border: #334155; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04); --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, monospace; color-scheme: light dark; } /* ----- Dark palette ----- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-primary: #2dd4bf; --c-primary-dark: #14b8a6; --c-primary-light: rgba(45,212,191,.12); --c-primary-hover: #5eead4; --c-accent: #60a5fa; --c-accent-light: rgba(96,165,250,.15); --c-success: #4ade80; --c-success-bg: rgba(74,222,128,.12); --c-success-border: rgba(74,222,128,.25); --c-warning: #fbbf24; --c-warning-bg: rgba(251,191,36,.12); --c-warning-border: rgba(251,191,36,.25); --c-danger: #f87171; --c-danger-bg: rgba(248,113,113,.12); --c-danger-border: rgba(248,113,113,.25); --c-text: #e2e8f0; --c-text-secondary: #94a3b8; --c-text-muted: #64748b; --c-bg: #0f172a; --c-bg-card: #1e293b; --c-border: #334155; --c-border-light: #1e293b; --c-header-bg: #0c1322; --c-header-text: #e2e8f0; --c-input-bg: #1e293b; --c-code-bg: #0f172a; --c-code-text: #e2e8f0; --c-code-border: #334155; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4); } } [data-theme="dark"] { --c-primary: #2dd4bf; --c-primary-dark: #14b8a6; --c-primary-light: rgba(45,212,191,.12); --c-primary-hover: #5eead4; --c-accent: #60a5fa; --c-accent-light: rgba(96,165,250,.15); --c-success: #4ade80; --c-success-bg: rgba(74,222,128,.12); --c-success-border: rgba(74,222,128,.25); --c-warning: #fbbf24; --c-warning-bg: rgba(251,191,36,.12); --c-warning-border: rgba(251,191,36,.25); --c-danger: #f87171; --c-danger-bg: rgba(248,113,113,.12); --c-danger-border: rgba(248,113,113,.25); --c-text: #e2e8f0; --c-text-secondary: #94a3b8; --c-text-muted: #64748b; --c-bg: #0f172a; --c-bg-card: #1e293b; --c-border: #334155; --c-border-light: #1e293b; --c-header-bg: #0c1322; --c-header-text: #e2e8f0; --c-input-bg: #1e293b; --c-code-bg: #0f172a; --c-code-text: #e2e8f0; --c-code-border: #334155; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4); } /* ----- Reset / base ----- */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-sans); margin: 0; min-height: 100vh; background: var(--c-bg); color: var(--c-text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--c-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } /* ----- Dashboard header / nav bar ----- */ .app-header { background: var(--c-header-bg); color: var(--c-header-text); padding: 0 1rem; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-md); } .app-header .inner { max-width: 76rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; min-height: 3.25rem; } .app-header .brand { font-size: 1rem; font-weight: 700; margin: 0; color: var(--c-header-text); letter-spacing: -.01em; white-space: nowrap; } .app-header .brand small { font-weight: 400; font-size: .75rem; opacity: .7; margin-left: .4rem; text-transform: uppercase; letter-spacing: .04em; } .app-header nav { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; margin-left: auto; } .app-header nav a, .app-header nav button { display: flex; align-items: center; padding: .7rem .75rem; font-size: .8125rem; font-weight: 500; color: rgba(255,255,255,.75); text-decoration: none; border: none; background: transparent; cursor: pointer; transition: color .15s, background .15s; white-space: nowrap; font-family: var(--font-sans); } .app-header nav a:hover, .app-header nav button:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; } .app-header nav a.active { color: #fff; background: rgba(255,255,255,.15); box-shadow: inset 0 -2px 0 0 rgba(255,255,255,.6); font-weight: 600; } .app-header .logout-form { display: inline; } /* Theme toggle button in nav */ .theme-toggle { display: flex; align-items: center; padding: .5rem .6rem; background: transparent; border: none; cursor: pointer; color: rgba(255,255,255,.65); font-size: 1.1rem; line-height: 1; transition: color .15s; font-family: var(--font-sans); } .theme-toggle:hover { color: #fff; } /* ----- Main content ----- */ .app-main { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; } /* ----- Cards ----- */ .card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); } .card h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; color: var(--c-text); } .card h3 { font-size: .95rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: var(--c-text); } .card + .card { margin-top: 0; } /* ----- KPI stat cards ----- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .85rem; } .stat { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1rem; text-align: center; transition: box-shadow .15s, border-color .15s; } .stat:hover { box-shadow: var(--shadow-md); border-color: var(--c-primary); } .stat .num { font-size: 1.75rem; font-weight: 800; color: var(--c-primary); line-height: 1.2; } .stat .lbl { font-size: .75rem; font-weight: 500; color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; } /* coloured stat variants */ .stat-success { border-left: 3px solid var(--c-success); } .stat-warning { border-left: 3px solid var(--c-warning); } .stat-danger { border-left: 3px solid var(--c-danger); } .stat-accent { border-left: 3px solid var(--c-accent); } /* ----- Tables ----- */ table { width: 100%; border-collapse: collapse; font-size: .875rem; } th, td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--c-border); vertical-align: top; } th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-secondary); background: var(--c-bg); position: sticky; top: 3.25rem; } tbody tr { transition: background .1s; } tbody tr:hover { background: var(--c-border-light); } tbody tr:nth-child(even) { background: rgba(148,163,184,.04); } tbody tr:nth-child(even):hover { background: var(--c-border-light); } /* ----- Badges ----- */ .badge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--c-border-light); color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: .35rem; background: currentColor; } .badge-active { background: var(--c-success-bg); color: var(--c-success); } .badge-pending, .badge-pending_payment { background: var(--c-warning-bg); color: var(--c-warning); } .badge-past_due { background: var(--c-danger-bg); color: var(--c-danger); } .badge-canceled { background: var(--c-border-light); color: var(--c-text-muted); } .badge-new { background: var(--c-accent-light); color: var(--c-accent); } .badge-read { background: var(--c-warning-bg); color: var(--c-warning); } .badge-resolved { background: var(--c-success-bg); color: var(--c-success); } .badge-shipped { background: var(--c-success-bg); color: var(--c-success); } .badge-inventory { background: var(--c-border-light); color: var(--c-text-secondary); } .badge-inactive { background: var(--c-border-light); color: var(--c-text-muted); } .badge-nfc { background: var(--c-accent-light); color: var(--c-accent); } .badge-virtual { background: var(--c-primary-light); color: var(--c-primary); } .badge-signup, .badge-extra_card { background: var(--c-warning-bg); color: var(--c-warning); } /* ----- Buttons ----- */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-card); color: var(--c-text); font-size: .875rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .15s; line-height: 1.4; font-family: var(--font-sans); } button:hover, .btn:hover { border-color: var(--c-text-muted); background: var(--c-bg); text-decoration: none; } .btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); } .btn-danger { color: var(--c-danger); border-color: var(--c-danger-border); background: var(--c-danger-bg); } .btn-danger:hover { background: var(--c-danger-border); border-color: var(--c-danger); } .btn-sm { padding: .3rem .6rem; font-size: .8125rem; } .btn-ghost { border: none; background: transparent; color: var(--c-text-secondary); padding: .3rem .5rem; } .btn-ghost:hover { background: var(--c-border-light); color: var(--c-text); } /* ----- Forms ----- */ label { display: block; font-size: .8125rem; font-weight: 500; color: var(--c-text-secondary); margin: .75rem 0 .3rem; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], input[type="date"], input[type="number"], select, textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: .9375rem; font-family: var(--font-sans); background: var(--c-input-bg); color: var(--c-text); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(15,118,110,.12); } textarea { min-height: 5rem; resize: vertical; } input[type="file"] { font-size: .875rem; color: var(--c-text); } input[type="checkbox"], input[type="radio"] { width: auto; } .field-error { color: var(--c-danger); font-size: .8rem; margin: .2rem 0 0; } /* Google Places Autocomplete (gmp-place-autocomplete web component) */ .places-search-host { display: block; width: 100%; } .places-search-host gmp-place-autocomplete { width: 100%; color-scheme: light dark; } /* ----- Filters bar ----- */ .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; align-items: end; margin-bottom: 1.25rem; padding: 1rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); } /* ----- Notices / flash messages ----- */ .notice { background: var(--c-success-bg); border: 1px solid var(--c-success-border); border-left: 4px solid var(--c-success); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; color: var(--c-success); } .error-msg { background: var(--c-danger-bg); border: 1px solid var(--c-danger-border); border-left: 4px solid var(--c-danger); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; color: var(--c-danger); } .warning-banner { background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); border-left: 4px solid var(--c-warning); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; color: var(--c-warning); } .warning-banner.critical { background: var(--c-danger-bg); border-color: var(--c-danger-border); border-left-color: var(--c-danger); color: var(--c-danger); } /* ----- Utility classes ----- */ .muted { color: var(--c-text-secondary); font-size: .8125rem; } .mono { font-family: var(--font-mono); font-size: .8rem; word-break: break-all; } .hint { color: var(--c-text-secondary); font-size: .8125rem; margin: .25rem 0 0; } .actions { display: flex; flex-wrap: wrap; gap: .4rem; } .inline-form { display: inline; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: .5rem; } /* ----- Payload / code display ----- */ .payload { background: var(--c-code-bg); color: var(--c-code-text); border: 1px solid var(--c-code-border); border-radius: var(--radius-md); padding: 1rem; font-family: var(--font-mono); font-size: .75rem; white-space: pre-wrap; word-break: break-word; max-height: 28rem; overflow: auto; line-height: 1.5; } /* ----- Contact flag (feedback inbox) ----- */ .contact-flag { background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: .8125rem; margin-top: .5rem; } /* ----- Feedback article items ----- */ .feedback-item { border-top: 1px solid var(--c-border); padding-top: 1.25rem; margin-top: 1.25rem; } .feedback-item:first-child { border-top: none; margin-top: 0; padding-top: 0; } /* ----- Quick-links grid ----- */ .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; } .quick-links .btn { justify-content: center; padding: .75rem 1rem; border-radius: var(--radius-md); } .quick-links .btn:hover { background: var(--c-primary-light); border-color: var(--c-primary); color: var(--c-primary); } /* ----- Auth page (login / forgot / reset) ----- */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #115e59 0%, #0f766e 50%, #134e4a 100%); } [data-theme="dark"] .auth-page, .auth-page-dark { background: linear-gradient(135deg, #0c1322 0%, #0f172a 50%, #1e293b 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-page { background: linear-gradient(135deg, #0c1322 0%, #0f172a 50%, #1e293b 100%); } } .auth-card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; width: 100%; max-width: 24rem; box-shadow: var(--shadow-lg); } .auth-card h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .25rem; color: var(--c-text); } .auth-card .auth-subtitle { font-size: .875rem; color: var(--c-text-secondary); margin: 0 0 1.5rem; } .auth-card .auth-error { background: var(--c-danger-bg); color: var(--c-danger); border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: .875rem; margin-bottom: .75rem; border-left: 3px solid var(--c-danger); } .auth-card .auth-ok { background: var(--c-success-bg); color: var(--c-success); border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: .875rem; margin-bottom: .75rem; border-left: 3px solid var(--c-success); } .auth-card button[type="submit"] { margin-top: 1.5rem; width: 100%; padding: .7rem; border: 0; border-radius: var(--radius-sm); background: var(--c-primary); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s; } .auth-card button[type="submit"]:hover { background: var(--c-primary-dark); } .auth-card .aux { margin: 1.25rem 0 0; font-size: .875rem; text-align: center; color: var(--c-text-secondary); } .auth-card .aux a { color: var(--c-primary); } .auth-card label { margin: .85rem 0 .3rem; } /* ----- Responsive ----- */ @media (max-width: 768px) { .app-header .inner { gap: .25rem .5rem; } .app-header nav a, .app-header nav button { padding: .55rem .5rem; font-size: .75rem; } .app-main { padding: 1rem .75rem 2rem; } .card { padding: 1rem; } .stats { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; } .stat .num { font-size: 1.4rem; } table { font-size: .8125rem; } th, td { padding: .5rem .35rem; } .hide-mobile { display: none; } .filters { grid-template-columns: 1fr; } .auth-card { margin: 1rem; padding: 2rem 1.25rem; } } @media (max-width: 480px) { .app-header nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .stats { grid-template-columns: 1fr 1fr; } } /* ----- Landing page (Phase 7) ----- */ .landing-page { background: var(--c-bg); } .landing-container { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } .landing-container-narrow { max-width: 42rem; } .landing-header { background: var(--c-header-bg); color: var(--c-header-text); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-md); } .landing-header-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; gap: 1rem; } .landing-logo { font-size: 1.05rem; font-weight: 700; color: var(--c-header-text); text-decoration: none; letter-spacing: -.01em; } .landing-logo:hover { text-decoration: none; opacity: .9; } .landing-nav { display: flex; align-items: center; gap: .75rem; } .landing-nav a { color: rgba(255,255,255,.85); font-size: .875rem; font-weight: 500; text-decoration: none; } .landing-nav a:hover { color: #fff; text-decoration: none; } .landing-nav .theme-toggle { color: rgba(255,255,255,.65); padding: .35rem .5rem; font-size: 1.1rem; } .landing-nav .theme-toggle:hover { color: #fff; } .landing-nav .btn-primary { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; } .landing-nav .btn-primary:hover { background: var(--c-primary); border-color: var(--c-primary); } .landing-hero { background: linear-gradient(160deg, #115e59 0%, #0f766e 45%, #134e4a 100%); color: #fff; padding: 4rem 0 4.5rem; text-align: center; } [data-theme="dark"] .landing-hero, .landing-page-dark .landing-hero { background: linear-gradient(160deg, #0c1322 0%, #0f766e 40%, #134e4a 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .landing-hero { background: linear-gradient(160deg, #0c1322 0%, #0f766e 40%, #134e4a 100%); } } .landing-hero h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; line-height: 1.15; margin: 0 0 1rem; letter-spacing: -.02em; max-width: 20ch; margin-left: auto; margin-right: auto; } .landing-lead { font-size: clamp(1rem, 2.5vw, 1.2rem); line-height: 1.6; opacity: .92; max-width: 42rem; margin: 0 auto 1.75rem; } .landing-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 1.25rem; } .landing-hero .btn-lg { padding: .75rem 1.5rem; font-size: 1rem; font-weight: 600; } .landing-hero .btn-primary { background: #fff; color: var(--c-primary-dark); border-color: #fff; } .landing-hero .btn-primary:hover { background: var(--c-primary-light); border-color: var(--c-primary-light); color: var(--c-primary-dark); } .landing-hero .btn:not(.btn-primary) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); } .landing-hero .btn:not(.btn-primary):hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); color: #fff; } .landing-note { opacity: .75; font-size: .8125rem; margin: 0; } .landing-section { padding: 3.5rem 0; } .landing-section-alt { background: var(--c-bg-card); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .landing-section h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; margin: 0 0 .75rem; text-align: center; letter-spacing: -.02em; } .landing-section-intro { text-align: center; color: var(--c-text-secondary); max-width: 38rem; margin: 0 auto 2.5rem; font-size: 1.05rem; line-height: 1.6; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; } .feature-card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; } .feature-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); } .feature-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; color: var(--c-primary); } .feature-card p { margin: 0; font-size: .9375rem; color: var(--c-text-secondary); line-height: 1.55; } .steps-list { list-style: none; margin: 0; padding: 0; max-width: 40rem; margin-left: auto; margin-right: auto; } .steps-list li { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem 0; border-bottom: 1px solid var(--c-border); } .steps-list li:last-child { border-bottom: none; padding-bottom: 0; } .step-num { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: var(--c-primary); color: #fff; font-weight: 800; font-size: 1.1rem; border-radius: 50%; } .steps-list h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; } .steps-list p { margin: 0; color: var(--c-text-secondary); font-size: .9375rem; line-height: 1.55; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-bottom: .5rem; } .pricing-card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-sm); } .pricing-card-featured { border-color: var(--c-primary); box-shadow: var(--shadow-md); position: relative; } .pricing-card h3 { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-secondary); margin: 0 0 .75rem; } .pricing-amount { margin: 0 0 .25rem; } .pricing-price { font-size: 2rem; font-weight: 800; color: var(--c-primary); line-height: 1.1; } .pricing-period { font-size: .9375rem; color: var(--c-text-secondary); font-weight: 500; } .pricing-alt { font-size: .875rem; color: var(--c-text-secondary); margin: 0 0 1.25rem; } .pricing-includes { margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--c-text-secondary); } .pricing-includes li { padding: .35rem 0 .35rem 1.25rem; position: relative; } .pricing-includes li::before { content: '✓'; position: absolute; left: 0; color: var(--c-success); font-weight: 700; } .faq-list { margin-top: 1.5rem; } .faq-item { border: 1px solid var(--c-border); border-radius: var(--radius-md); margin-bottom: .6rem; background: var(--c-bg-card); overflow: hidden; } .faq-item summary { padding: 1rem 1.25rem; font-weight: 600; font-size: .9375rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--c-primary); flex-shrink: 0; } .faq-item[open] summary::after { content: '−'; } .faq-item summary:hover { background: var(--c-border-light); } .faq-item p { margin: 0; padding: 0 1.25rem 1rem; font-size: .9375rem; color: var(--c-text-secondary); line-height: 1.6; } .landing-cta { background: var(--c-primary-light); padding: 3.5rem 0; text-align: center; } .landing-cta h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; margin: 0 0 .75rem; } .landing-cta .landing-lead { color: var(--c-text-secondary); margin-bottom: 1.5rem; } .btn-lg { padding: .7rem 1.4rem; font-size: 1rem; font-weight: 600; } .landing-footer { border-top: 1px solid var(--c-border); padding: 1.5rem 0 2rem; } .landing-footer-inner { text-align: center; } .landing-footer p { margin: 0; font-size: .8125rem; } .landing-footer a { color: var(--c-text-secondary); } .landing-footer a:hover { color: var(--c-primary); } /* ----- Legal / policy pages (Phase 7) ----- */ .legal-page { background: var(--c-bg); color: var(--c-text); } .legal-main { padding: 2rem 0 3rem; } .legal-main h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; margin: 0 0 .35rem; line-height: 1.2; } .legal-meta { font-size: .8125rem; margin: 0 0 1.5rem; } .legal-notice { font-size: .8125rem; color: var(--c-text-secondary); background: var(--c-border-light); border: 1px solid var(--c-border); border-left: 3px solid var(--c-primary); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 0 0 1.5rem; line-height: 1.5; } .legal-body { font-size: .9375rem; line-height: 1.65; color: var(--c-text-secondary); } .legal-body h2 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin: 2rem 0 .65rem; } .legal-body h3 { font-size: 1rem; font-weight: 600; color: var(--c-text); margin: 1.25rem 0 .5rem; } .legal-body p { margin: 0 0 .85rem; } .legal-body ul { margin: 0 0 1rem; padding-left: 1.35rem; } .legal-body li { margin-bottom: .35rem; } .legal-body a { color: var(--c-primary); } .legal-body code { font-family: var(--font-mono); font-size: .85em; background: var(--c-border-light); padding: .1rem .35rem; border-radius: 4px; } /* ----- Signup terms consent checkbox ----- */ .consent-row { margin: 1.25rem 0 0; padding: .85rem .9rem; background: var(--c-border-light); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .consent-row-error { border-color: var(--c-danger-border); background: var(--c-danger-bg); } .consent-label { display: flex; align-items: flex-start; gap: .6rem; margin: 0 !important; font-size: .875rem; font-weight: 400; line-height: 1.45; color: var(--c-text-secondary); cursor: pointer; } .consent-label input[type="checkbox"] { margin-top: .2rem; flex-shrink: 0; width: 1rem; height: 1rem; accent-color: var(--c-primary); } .consent-label a { color: var(--c-primary); font-weight: 500; } .consent-row .field-error { margin-top: .5rem; } /* ----- Client dashboard footer links ----- */ .dashboard-footer { text-align: center; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--c-border); margin-top: auto; } .dashboard-footer p { margin: 0; font-size: .75rem; } .dashboard-footer a { color: var(--c-text-muted); } .dashboard-footer a:hover { color: var(--c-primary); } @media (max-width: 768px) { .landing-hero { padding: 2.5rem 0 3rem; } .landing-section { padding: 2.5rem 0; } .landing-nav a:not(.btn) { display: none; } .landing-nav .theme-toggle { margin-right: .25rem; } .steps-list li { flex-direction: column; gap: .75rem; } } /* ----- Error pages (404 / 500, Phase 7) ----- */ .error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--c-bg); padding: 1.5rem; } .error-card { background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; max-width: 26rem; width: 100%; text-align: center; box-shadow: var(--shadow-lg); } .error-code { font-size: 3rem; font-weight: 800; color: var(--c-primary); margin: 0 0 .5rem; line-height: 1; opacity: .85; } .error-card h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .75rem; } .error-message { color: var(--c-text-secondary); font-size: .9375rem; margin: 0 0 1.5rem; line-height: 1.55; } .error-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0; }