/* ===================================================================== LeafDock / Beacon — App styles --------------------------------------------------------------------- Loaded AFTER css/styles.css, so it reuses all the brand tokens (:root), base typography, buttons, badges and cards. This file adds the app shell (top header), the auth screens, forms, and shared app components. Same techy+organic vibe: white canvas, mint washes, signature gradient accents, Fraunces headings / Inter body, soft rounded cards. ===================================================================== */ /* App pages don't snap or lock height — normal document scroll */ body.app { background: var(--surface); } /* --------------------------------------------------------------------- APP TOP HEADER (Dashboard · Generate · Account · Log out + plan badge) --------------------------------------------------------------------- */ .app-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .app-header__inner { height: var(--header-h); display: flex; align-items: center; gap: var(--space-5); justify-content: space-between; } .app-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; } .app-brand__mark { width: 26px; height: 26px; flex: none; } .app-brand__leaf { color: var(--primary); } .app-brand__beacon { color: var(--button); font-weight: 600; font-size: 0.95rem; padding-left: 0.5rem; margin-left: 0.4rem; border-left: 1px solid var(--line); font-family: var(--font-body); letter-spacing: 0.02em; } .app-nav { display: flex; align-items: center; gap: var(--space-2); } .app-nav a { color: var(--ink-soft); font-weight: 500; font-size: var(--fs-sm); padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .app-nav a:hover { color: var(--primary); background: var(--surface); } .app-nav a.is-active { color: var(--primary); background: var(--surface-2); font-weight: 600; } .app-header__right { display: flex; align-items: center; gap: var(--space-4); } .plan-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); background: var(--mint); border-radius: var(--radius-pill); padding: 0.35em 0.8em; } .app-logout { color: var(--ink-soft); font-weight: 600; font-size: var(--fs-sm); background: none; border: none; cursor: pointer; font-family: var(--font-body); } .app-logout:hover { color: var(--primary); } /* Mobile app nav toggle */ .app-nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; } .app-nav-toggle span, .app-nav-toggle span::before, .app-nav-toggle span::after { content: ""; display: block; width: 16px; height: 2px; background: var(--primary); border-radius: 2px; } .app-nav-toggle span::before { transform: translateY(-5px); } .app-nav-toggle span::after { transform: translateY(3px); } /* --------------------------------------------------------------------- APP MAIN / PAGE SCAFFOLD --------------------------------------------------------------------- */ .app-main { padding-block: var(--space-7) var(--space-9); min-height: calc(100vh - var(--header-h)); } .page-head { margin-bottom: var(--space-6); } .page-head__eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink-faint); margin-bottom: var(--space-2); } .page-head h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: var(--space-2); } .page-head p { color: var(--ink-soft); margin: 0; max-width: 60ch; } .page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .app-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } /* Score color helper (applied by JS via scoreClass) */ .score-good { color: var(--good); } .score-warn { color: var(--warn); } .score-bad { color: var(--bad); } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .dot-good { background: var(--good); } .dot-warn { background: var(--warn); } .dot-bad { background: var(--bad); } /* Small button size (used on dashboard cards/rows) */ .btn-sm { padding: 0.55em 1em; font-size: var(--fs-sm); } .loading { color: var(--ink-faint); padding: var(--space-6) 0; } /* --------------------------------------------------------------------- DASHBOARD --------------------------------------------------------------------- */ /* 2) Summary stat row */ .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-bottom: var(--space-6); } .stat-card { padding: var(--space-5) var(--space-6); } .stat-card__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--ink-faint); margin: 0 0 var(--space-2); } .stat-card__value { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--primary); margin: 0; line-height: 1.1; } .stat-card__meta { font-size: var(--fs-sm); color: var(--ink-soft); margin: var(--space-2) 0 0; } .usage-bar { height: 7px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; margin-top: var(--space-3); } .usage-bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--grad-signature); transition: width 1.1s var(--ease); } /* Count-up numbers: tabular figures so width doesn't jitter as digits change */ .count-num { font-variant-numeric: tabular-nums lining-nums; } /* 3) Generate CTA */ .generate-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; background: var(--wash-mint); border-color: transparent; margin-bottom: var(--space-7); } .generate-cta__text h2 { margin: 0 0 var(--space-1); font-size: 1.4rem; } .generate-cta__text p { margin: 0; color: var(--ink-soft); } /* Section heading rows */ .dash-section { margin-bottom: var(--space-7); } .dash-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .dash-section__head h2 { margin: 0; font-size: 1.35rem; } /* 4) Your websites */ .site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); } .site-card { display: flex; flex-direction: column; gap: var(--space-4); } .site-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .site-card__head h3 { margin: 0 0 2px; font-size: 1.1rem; } .site-card__url { margin: 0; font-size: var(--fs-sm); color: var(--ink-faint); } .site-card__score { font-family: var(--font-head); font-size: 2.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums lining-nums; } .site-bar { height: 7px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; } .site-bar__fill { height: 100%; border-radius: var(--radius-pill); transition: width 1.1s var(--ease); } .site-bar__fill.is-good { background: var(--good); } .site-bar__fill.is-warn { background: var(--warn); } .site-bar__fill.is-bad { background: var(--bad); } .site-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink-soft); } .trend-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; font-size: 0.78rem; color: var(--good); background: var(--surface-2); border-radius: var(--radius-pill); padding: 0.2em 0.6em; } .trend-chip--improved { color: var(--good); } .trend-chip--declined { color: var(--bad); } .trend-chip--stable { color: var(--ink-faint); } .site-card__actions { display: flex; gap: var(--space-3); margin-top: auto; } .site-card__actions .btn { flex: 1; } /* 5) Recent reports table */ .table-card { padding: 0; overflow: hidden; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .data-table th, .data-table td { padding: var(--space-4) var(--space-5); text-align: left; } .data-table thead th { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 600; border-bottom: 1px solid var(--line); } .data-table th.num, .data-table td.num { text-align: right; } .data-row { border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast) var(--ease); } .data-table tbody tr:last-child { border-bottom: none; } .data-row:hover { background: var(--surface); } .data-row__site { display: block; font-weight: 600; color: var(--primary); } .data-row__site:hover { color: var(--button); } .data-row__url { font-size: 0.8rem; color: var(--ink-faint); } .data-row__score { font-weight: 700; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- GENERATE REPORT (form + processing screen) --------------------------------------------------------------------- */ .generate-form { display: grid; gap: var(--space-2); } .generate-form .btn { margin-top: var(--space-3); } /* friendly report-type → real /geo command chip */ .gen-cmd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82em; color: var(--primary); background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.1em 0.45em; } /* Processing screen */ .gen-url-chip { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--button); } .proc-list { list-style: none; margin: 0; padding: var(--space-2); display: grid; gap: var(--space-1); background: var(--wash-mint); border-color: transparent; } .proc-step { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); color: var(--ink-faint); border-radius: var(--radius); transition: color var(--t) var(--ease), background var(--t) var(--ease); } .proc-step__icon { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; position: relative; } .proc-step__label { font-size: var(--fs-body); } /* active: brand text + spinner ring */ .proc-step.is-active { color: var(--primary); font-weight: 600; background: rgba(255, 255, 255, 0.6); } .proc-step.is-active .proc-step__icon { border-color: var(--leaf); } .proc-step.is-active .proc-step__icon::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--leaf); border-top-color: transparent; animation: spin 0.7s linear infinite; } /* done: filled green check */ .proc-step.is-done { color: var(--ink); } .proc-step.is-done .proc-step__icon { border-color: var(--good); background: var(--good); } .proc-step.is-done .proc-step__icon::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; } /* Live status line above the processing list + confirm/error states */ .proc-status { font-weight: 600; color: var(--primary); margin: 0 0 var(--space-4); } .gen-confirm__lead { font-size: 1.1rem; margin: 0 0 var(--space-2); } .gen-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .gen-error { border-color: var(--line); } /* Calm "you can leave" reassurance on the generating screen (soft, not a banner) */ .gen-reassure { margin-top: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); background: var(--wash-mint); border-color: transparent; } .gen-reassure__icon { font-size: 1.2rem; line-height: 1.4; flex: none; } .gen-reassure__text { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); } .gen-reassure__text strong { color: var(--ink); } /* --------------------------------------------------------------------- REPORT VIEWER (report.html) Gauge (.ring-*, .gauge, .cap) and bars (.cat, .bar-*) come from styles.css. --------------------------------------------------------------------- */ .report-head { margin-bottom: var(--space-6); } .back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: var(--space-4); transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease); } .back-link:hover { color: var(--primary); gap: 0.5rem; } .report-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .report-title { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: var(--space-1) 0; word-break: break-word; } .report-meta { color: var(--ink-soft); margin: 0; font-size: var(--fs-sm); } .report-head__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .pdf-note { font-size: var(--fs-sm); color: var(--ink-faint); } .report-section-title { font-size: 1.25rem; margin: 0 0 var(--space-1); } .report-section-sub { margin: 0 0 var(--space-5); font-size: var(--fs-sm); } /* Score + categories two-up */ .report-grid { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: var(--space-5); margin-bottom: var(--space-7); align-items: start; } .score-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--wash-mint); border-color: transparent; } .score-verdict { margin: var(--space-2) 0 0; font-weight: 700; font-size: 1.05rem; } .cat { margin-bottom: var(--space-5); } .cat:last-child { margin-bottom: 0; } .cat-weight { color: var(--ink-faint); font-weight: 500; } /* Platform readiness */ .platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); } .platform { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--line); } .platform__name { font-weight: 600; color: var(--primary); font-size: var(--fs-sm); } .platform__status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 600; } .status-good { color: var(--good); } .status-warn { color: var(--warn); } .status-bad { color: var(--bad); } /* Quick wins callout */ .quickwins { margin-bottom: var(--space-7); border: 1px solid var(--mint); background: var(--surface); } .quickwins .leaf-list { margin-top: var(--space-2); } /* Derived-platform note (real reports estimate per-engine readiness from the score) */ .platforms-note { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--ink-faint); font-style: italic; } /* Full report — rendered (sanitized) audit markdown */ .report-md { font-family: var(--font-body); color: var(--ink-soft); line-height: 1.65; overflow-wrap: break-word; } .report-md > :first-child { margin-top: 0; } .report-md h1, .report-md h2, .report-md h3, .report-md h4 { font-family: var(--font-head); color: var(--primary); line-height: 1.25; margin: var(--space-6) 0 var(--space-3); } .report-md h1 { font-size: 1.5rem; } .report-md h2 { font-size: 1.25rem; } .report-md h3 { font-size: 1.1rem; } .report-md h4 { font-size: 1rem; } .report-md p, .report-md ul, .report-md ol, .report-md blockquote, .report-md table, .report-md pre { margin: 0 0 var(--space-4); } .report-md ul, .report-md ol { padding-left: 1.4em; } .report-md li { margin-bottom: var(--space-2); } .report-md a { color: var(--button); text-decoration: underline; } .report-md strong { color: var(--ink); } .report-md code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.1em 0.4em; } .report-md pre { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-4); overflow-x: auto; } .report-md pre code { background: none; padding: 0; } .report-md blockquote { border-left: 3px solid var(--mint); padding-left: var(--space-4); color: var(--ink-faint); } .report-md table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .report-md th, .report-md td { border: 1px solid var(--line); padding: var(--space-3) var(--space-4); text-align: left; } .report-md th { background: var(--surface-2); font-weight: 700; color: var(--ink); } .report-md hr { border: none; border-top: 1px solid var(--line); margin: var(--space-6) 0; } .report-md__raw { white-space: pre-wrap; word-break: break-word; } @media (max-width: 760px) { .report-grid { grid-template-columns: 1fr; } .report-head__actions { width: 100%; } } /* --------------------------------------------------------------------- HISTORY (history.html) — site selector, progress chart, summary --------------------------------------------------------------------- */ .hist-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; } .hist-toolbar__label { font-weight: 600; color: var(--primary); font-size: var(--fs-sm); } .hist-toolbar select { font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 0.6em 2.4em 0.6em 1em; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; appearance: none; -webkit-appearance: none; min-width: 240px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F4D3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; } .hist-toolbar select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(61,191,115,0.18); } .hist-chart-card { margin-bottom: var(--space-7); } .hist-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); } .hist-chart-wrap { position: relative; height: clamp(220px, 34vh, 320px); } /* Time-range segmented control */ .range-control { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-pill); } .range-btn { border: none; background: transparent; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); padding: 0.35em 0.85em; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .range-btn:hover { color: var(--primary); } .range-btn.is-active { background: var(--bg); color: var(--primary); box-shadow: var(--shadow-sm); } .hist-summary { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-4); } .hist-stat { display: flex; align-items: baseline; gap: var(--space-2); } .hist-stat__num { font-family: var(--font-head); font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums lining-nums; } .hist-stat__lbl { font-size: var(--fs-sm); color: var(--ink-faint); } .hist-change { font-size: var(--fs-sm); font-weight: 600; } .hist-change.up, .hist-change--improved { color: var(--good); } .hist-change.down, .hist-change--declined { color: var(--bad); } .hist-change--stable { color: var(--ink-faint); } @media (max-width: 560px) { .hist-toolbar select { min-width: 0; width: 100%; } .hist-chart-head { flex-direction: column; } } /* --------------------------------------------------------------------- ACCOUNT & BILLING (account.html) --------------------------------------------------------------------- */ /* Account banner (checkout success / cancel / info) + free-tier generate gate */ .acct-banner { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); font-weight: 600; font-size: var(--fs-sm); border: 1px solid var(--line); } .acct-banner--success { background: var(--wash-mint); border-color: var(--mint); color: var(--primary); } .acct-banner--cancel, .acct-banner--info { background: var(--surface-2); color: var(--ink-soft); } .gen-gate { display: grid; gap: var(--space-3); justify-items: start; } .gen-gate__lead { font-size: 1.1rem; margin: 0; color: var(--ink); } .gen-gate .btn { margin-top: var(--space-2); } .acct-summary { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-6); align-items: start; margin-bottom: var(--space-7); } .acct-plan-name { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--primary); margin: var(--space-1) 0; } .acct-plan-price { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink-soft); } .acct-summary__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .acct-metric__val { font-size: 1.25rem; color: var(--primary); margin: var(--space-1) 0 0; font-variant-numeric: tabular-nums; } .acct-metric__val strong { font-weight: 700; } /* Change-plan cards */ .acct-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .acct-plan-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); } .acct-plan-card.is-current { border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf), var(--shadow-sm); } .acct-plan-card__tag { position: absolute; top: -11px; right: var(--space-5); } .acct-plan-card__name { font-size: 1.15rem; margin: 0; } .acct-plan-card__price { font-family: var(--font-body); font-size: 1.8rem; font-weight: 700; color: var(--primary); margin: 0; font-variant-numeric: tabular-nums lining-nums; } .acct-plan-card__per { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-faint); } .acct-plan-card .leaf-list { margin: var(--space-3) 0 var(--space-5); font-size: var(--fs-sm); } .acct-plan-card .btn { margin-top: auto; } /* Payment method */ .acct-payment { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .acct-card-on-file { display: flex; align-items: center; gap: var(--space-4); color: var(--primary); } .acct-card-brand { font-weight: 600; margin: 0; } .acct-payment__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } /* Billing history */ .acct-inv-id { font-weight: 600; color: var(--primary); } .acct-inv-dl { font-weight: 600; font-size: var(--fs-sm); } @media (max-width: 760px) { .acct-summary { grid-template-columns: 1fr; } .acct-summary__metrics { grid-template-columns: 1fr 1fr; } .acct-plans { grid-template-columns: 1fr; max-width: 420px; } } /* --------------------------------------------------------------------- AUTH SCREENS (login / signup) --------------------------------------------------------------------- */ body.auth { background: var(--wash-mint); min-height: 100vh; } /* Center the card when it fits; let the PAGE scroll when the card is taller than the viewport (short laptops). flex-column + justify-content:center grows with content — unlike grid place-items:center, which clipped the top/bottom. KEY: min-height (not height), vertical padding, no overflow:hidden. */ .auth-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-block: var(--space-6); padding-inline: var(--space-5); } .auth-card { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } /* Left brand panel (dark, with signature glow) */ .auth-aside { position: relative; background: var(--surface-dark); color: var(--on-dark); padding: var(--space-8); overflow: hidden; display: flex; flex-direction: column; } .auth-aside::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(48,198,124,0.35), transparent 65%); } .auth-aside > * { position: relative; z-index: 1; } .auth-aside .logo__word--leaf { color: #fff; } .auth-aside .logo__word--dock { color: var(--tech); } .auth-aside h2 { color: #fff; font-size: 1.7rem; margin-top: var(--space-7); } .auth-aside p { color: var(--on-dark-soft); } .auth-aside .leaf-list { margin-top: var(--space-5); } .auth-aside .leaf-list li { color: var(--on-dark); } .auth-aside .leaf-list li::before { background: var(--tech); } .auth-aside__foot { margin-top: auto; padding-top: var(--space-6); font-size: var(--fs-sm); color: var(--on-dark-soft); } /* Right form panel */ .auth-form { padding: var(--space-8); } .auth-form h1 { font-size: 1.8rem; margin-bottom: var(--space-2); } .auth-form__sub { color: var(--ink-soft); margin-bottom: var(--space-6); } .auth-form__alt { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; } /* Make the way home obvious on the focused auth screens. 1) Clear hover on the brand-panel logo (visible color shift + pointer). */ .auth-aside .logo { cursor: pointer; transition: opacity var(--t-fast) var(--ease); } .auth-aside .logo:hover { opacity: 0.85; } .auth-aside .logo:hover .logo__word--dock { color: #7FF3DD; } /* brighter teal on hover */ /* 2) Small, quiet "← Back to home" link at the top of the form panel. Subtle brand colors so it never competes with the primary CTA. Also the only way home on mobile, where the brand panel (and its logo) is hidden. */ .back-home { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: var(--space-6); transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease); } .back-home:hover { color: var(--primary); gap: 0.55rem; } .back-home .arrow { transition: transform var(--t-fast) var(--ease); } .back-home:hover .arrow { transform: translateX(-2px); } /* ---- Forms ---- */ .field { margin-bottom: var(--space-4); } .field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); margin-bottom: var(--space-2); } .field input, .field select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); padding: 0.8em 1em; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .field input::placeholder { color: var(--ink-faint); } .field input:focus, .field select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(61,191,115,0.18); } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F4D3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.6em; } .field__hint { font-size: var(--fs-sm); color: var(--ink-faint); margin-top: var(--space-2); } /* Inline form validation (format/presence only) — brand --bad red */ .field-error { color: var(--bad); font-size: var(--fs-sm); font-weight: 500; margin: var(--space-2) 0 0; } .field-error:empty { display: none; } /* Form-level error (real auth failures, e.g. wrong password / email taken) */ .form-error { color: var(--bad); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.25); border-radius: var(--radius); } .form-error:empty { display: none; } /* Form-level notice (neutral — e.g. "check your email to confirm") */ .form-notice { color: var(--primary); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-2); border: 1px solid var(--mint); border-radius: var(--radius); } .form-notice:empty { display: none; } .field input.is-invalid, .field select.is-invalid { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14); } .field input.is-invalid:focus, .field select.is-invalid:focus { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.20); } /* The reused Monthly/Annual toggle is a