/* ============================================
Mosaica — Shared Design System
============================================ */
/* Fonts (Montserrat / Fraunces / JetBrains Mono) load from local vendored
woff2 files via /vendor/fonts/mosaica-fonts.css in each HTML file's .
Migrated off Google Fonts CDN by PR #751 (2026-08-14); index.html's last
CDN holdover was retired by the "Unify interactive-element styles"
task's hygiene cleanup. Local files load in parallel with shared.css. */
:root {
--bg: #fff;
--surface: #fff;
--ink: #1a1a1a;
--ink-2: #4a4a4a;
--ink-3: #8a8683;
--line: #eceae5;
--line-2: #e2dfd8;
--chip: #f3f1ec;
--field: #f2f0ed;
--accent: #c4553a; /* Terracotta. Restored 2026-09-07 on the founder's
instruction ("change the green color and all its shades back to
terracotta like it was originally"), reverting the C5 (2026-08-07)
swap to the DR1 dark-green ramp. This is the exact pre-DR1 value from
`git show 15a5679^:shared.css`, not a re-picked approximation. */
--ok: #2f7d4f;
--ok-bg: #e6f4ec;
--warn: #c47a2a;
--warn-bg: #fef3e2;
--shadow-sm: 0 1px 2px rgba(20,18,15,.04), 0 2px 6px rgba(20,18,15,.04);
--shadow-md: 0 4px 12px rgba(20,18,15,.06), 0 12px 32px rgba(20,18,15,.08);
--shadow-lg: 0 18px 48px rgba(20,18,15,.14);
--r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
/* FOUNDER BATCH V3 (2026-07-28, founder-found): wide-screen content cap.
Applied to nav/filter-bar/hero/main-content INNER wrappers so their
background-bearing OUTER elements stay full-bleed while readable
content centers with symmetric margins beyond this width. */
--max-content-width: 1400px;
--serif: "Fraunces", Georgia, serif;
--sans: "Montserrat", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
/* DR1 (2026-08-03, FOUNDER BATCH V3, APPROVED — see TASKS.md DR1) —
font-family, resolved: this PR originally proposed "Playfair Display"
per DR1's own literal text, while leaving --serif itself untouched
(still Fraunces) since flipping it would be an instant project-wide
re-render. Founder verdict on PR #640: "use Fraunces everywhere ...
it is what actually renders today; make config match reality." No
font swap happens anywhere — --serif stays Fraunces, and the type
ramp below uses it as-is. DR2 applies these sizes/weights project-wide
with the existing --serif token, no Google Fonts changes needed.
TYPE RAMP proper. Exactly 6 size/weight combinations, chosen
by consolidating the app's own existing (inconsistent) serif-heading sizes
— grep across home.html/shared.css/index.html today finds --serif headings
at 20/22/32/36/38/48/58px with no shared discipline. This ramp is the
deliberate 6-value replacement DR2 will apply project-wide; values are not
estimated, each is picked from (or immediately adjacent to) an already-
rendered size in the app today:
- --type-display: 48px/500 — hero/marketing headlines (home.html's own
.hero-title uses --serif at this weight, just inconsistently at 58px
desktop/40px mobile; 48px is the disciplined middle DR2 will apply).
- --type-h1: 32px/500 — page/section headings, listing titles, prices
(matches shared.css's existing .stat-num verbatim: font-size 32px,
font-weight 500).
- --type-h2: 20px/600 — card/subsection headings, modal titles (matches
shared.css's existing modal-heading precedent verbatim: 20px/600).
- --type-body: 15px/400 — body copy (matches shared.css body{} verbatim:
font-size 15px, default weight 400).
- --type-label: 13px/500 — UI labels, buttons, nav, pills (13px/500 is
the single most common sans UI size across shared.css: .pill, footer
links, nav chips all already render at 13px/500).
- --type-data: 12px/500 — mono data labels (12px is the most frequent
existing var(--mono) usage — index.html .card-price .psf, home.html
.dc-count, buyer-dashboard.html .wl-count/.addon-row-meta family all
render at 12px; 500 weight matches the one place a mono weight is
already set explicitly, 404.html's .nf-code).
Each token is a single shorthand-free pair (-size/-weight) so DR2 can
apply `font: var(--type-h1-weight) var(--type-h1-size)/1.2 var(--serif)`
style declarations without inventing new numbers.
DR2 (2026-08-03) applied these tokens to every shared.css rule whose
literal size/weight pair exactly matched a ramp entry (.section-title →
--type-h1, .nav-links a/.chip/.stat-label/.pill → --type-label,
.footer-logo → --type-h2) — zero rendering change, same computed
pixels. Near-matches that would require an actual value change
(.logo 22px/600, .stat-val 36px/500, .section-subtitle 16px, etc.) were
left as literals rather than forced onto the ramp, since changing them
IS a real visual change needing founder/visual-checker sign-off — filed
as DR2-followup, along with the much larger index.html token
application (index.html has its own separate inline token system per
CLAUDE.md's "two systems side by side" note) and the two named visual-
redesign sub-items (filters modal H1, wizard header H4). */
--type-display-size: 48px; --type-display-weight: 500; /* Fraunces */
--type-h1-size: 32px; --type-h1-weight: 500; /* Fraunces */
--type-h2-size: 20px; --type-h2-weight: 600; /* Fraunces */
--type-body-size: 15px; --type-body-weight: 400; /* Montserrat */
--type-label-size: 13px; --type-label-weight: 500; /* Montserrat */
--type-data-size: 12px; --type-data-weight: 500; /* JetBrains Mono */
/* DR1 — SPACING SCALE. An 8 step scale; every value except --space-8
already appeared verbatim as a padding/margin/gap literal in shared.css
(4px .stat gap, 8px many gaps, 12px .row2/.row3 gaps rounded from 14px,
16px .field gap, 24px .site-nav-inner/.footer-bottom gaps, 32px
.footer-grid gap/.divider margin, 48px .site-footer padding) —
--space-8 (64px) is the clean 2x step toward the one outlier value in
the file (.site-footer's 80px margin-top, a deliberate one-off DR2 left
unchanged rather than force into the scale). DR2 (2026-08-03) applied
these tokens to every shared.css rule whose literal value exactly
matched a step — zero rendering change, same computed pixels — see the
rules themselves for the `var(--space-N)` references. Values with no
exact match (11px/14px/28px/30px/40px/80px etc.) were left as literals
rather than forced to the nearest step, which would be a real visual
change requiring founder/visual-checker sign-off — filed as DR2-followup. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* TERRACOTTA ACCENT RAMP — restored 2026-09-07 (founder instruction).
Was the DR1 dark-green ramp; the three tokens keep their ROLES and
revert to the terracotta values this project shipped before DR1:
--accent-2 base #c4553a (pre-DR1 --accent, shared.css)
--accent-2-ink dark #8a3422 (pre-DR1 --accent-ink, index.html)
--accent-2-bg tint #fde8e2 (pre-DR1 .pill-accent background)
Every value is taken from the pre-DR1 tree, not invented to fit.
Contrast, measured with the WCAG relative-luminance formula (not
estimated), so the trade-off is on the record rather than discovered
later:
--accent-2 (#c4553a) vs white text: 4.46:1
--accent-2-ink (#8a3422) vs white text: 8.09:1
--accent-2 as TEXT on --accent-2-bg (#fde8e2): 3.78:1
--accent-2-ink as TEXT on --accent-2-bg: 6.87:1
The green ramp measured 11.08 / 14.75 / 9.49 on those first three, so
this is a real reduction: 4.46:1 sits just under the 4.5:1 AA
threshold for normal text, and accent-as-text-on-tint at 3.78:1 is
well under it. Both were equally true of the pre-DR1 design this
restores — DR1 did not invent a problem, it fixed one — and the
founder asked for the original look back knowing the numbers.
If the contrast matters more than the exact original hue later, the
one-token change is to use --accent-2-ink for text-on-tint (6.87:1)
while fills keep the brand --accent-2. */
--accent-2: #c4553a;
--accent-2-ink: #8a3422;
--accent-2-bg: #fde8e2;
}
/* DR1 — preview-mode banner note, RESOLVED (founder verdict on PR #640:
"Preview banner stays amber"). The founder-preview banner across
dashboard.html/buyer-dashboard.html/timeline.html/negotiation.html/
recap.html already conditions its own background on `previewActive ?
'var(--warn-bg)' : 'var(--chip)'` (amber var(--warn) family) — it never
used var(--accent) in the first place, so this was already the live
behavior at zero cost. Stays visually distinct from the new green CTA
color once DR2 lands, preserving the banner's own warning signal. No
code change needed here. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--sans); background: var(--bg); color: var(--ink);
font-size: var(--type-body-size); line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
/* ---- NAV ---- */
.site-nav {
position: sticky; top: 0; z-index: 60;
background: rgba(255,255,255,.88);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--line);
}
.site-nav-inner {
padding: 14px clamp(24px, 3vw, 48px);
display: flex; align-items: center; gap: var(--space-5);
max-width: var(--max-content-width); margin-left: auto; margin-right: auto;
}
.logo {
font-family: var(--serif); font-weight: 600; font-size: 22px;
letter-spacing: -0.02em; display: flex; align-items: center; gap: var(--space-2);
}
.logo-mark { width: 22px; height: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.logo-mark i { background: var(--ink); border-radius: 2px; }
.logo-mark i:nth-child(1), .logo-mark i:nth-child(4) { background: var(--accent); }
.logo-mark i:nth-child(4) { opacity: .5; }
.nav-links { display: flex; gap: var(--space-1); margin-left: var(--space-4); }
.nav-links a {
padding: var(--space-2) 14px; border-radius: 999px;
font-size: var(--type-label-size); font-weight: var(--type-label-weight); color: var(--ink-2);
transition: background .15s;
}
.nav-links a:hover { background: var(--chip); color: var(--ink); }
.nav-links a.active { background: var(--ink); color: #fff; }
.nav-right { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.avatar {
width: 36px; height: 36px; border-radius: 999px;
background: linear-gradient(135deg, #d8b894, #a87850);
color: #fff; font-weight: 600; font-size: 13px;
display: grid; place-items: center; border: 1px solid var(--line-2);
}
/* ---- BUTTONS ---- */
.btn {
padding: 11px 20px; border-radius: 999px;
font-size: 13px; font-weight: 600; line-height: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
transition: all .15s ease; border: 1px solid transparent;
white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { opacity: .4; transform: none; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #a8422a; }
.btn-sm { padding: var(--space-2) 14px; font-size: 12px; }
/* SWEEP #24 — a de-emphasised action (rejecting an offer) that must still read
as actionable: muted ink, no frame, underlined. Both dashboards had this as
the same four-property inline style on their "Odrzuć" button; a class so the
stacked-layout rule below can reframe it, which an inline style would win
against. */
.btn-quiet { background: transparent; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.btn-quiet:hover { color: var(--ink); }
.btn-lg { padding: 14px 28px; font-size: 14px; }
/* ---- FORM ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.field input, .field select, .field textarea {
padding: 13px var(--space-4); border-radius: 12px;
border: 1.5px solid var(--line-2); background: #fff;
font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(26,26,26,.07);
}
.field textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center;
padding-right: 40px;
}
.field-prefix { position: relative; }
.field-prefix .pfx {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
font-size: 14px; color: var(--ink-3); pointer-events: none;
}
.field-prefix input { padding-left: 30px; }
/* ---- BADGE ---- */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: var(--space-1) 10px; border-radius: 999px;
font-size: 11px; font-weight: 600;
background: #fff; box-shadow: var(--shadow-sm);
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-ink { background: var(--ink); color: #fff; }
.badge-chip { background: var(--chip); color: var(--ink-2); }
/* ---- CARD ---- */
.list-card {
background: #fff; border-radius: var(--r-lg);
border: 1px solid var(--line); overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
.list-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* ---- PROGRESS BAR ---- */
.progress-bar { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--ink); border-radius: 999px; transition: width .4s cubic-bezier(.22,.61,.36,1); }
/* ---- SECTION HEADINGS ---- */
.section-title {
font-family: var(--serif); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight);
letter-spacing: -0.02em; line-height: 1.15;
}
.section-subtitle { font-size: 16px; color: var(--ink-2); margin-top: var(--space-2); }
/* ---- CHIP / TAG ---- */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: var(--space-2) var(--space-4); border-radius: 999px;
background: var(--chip); font-size: var(--type-label-size); font-weight: var(--type-label-weight);
border: 1px solid transparent; transition: all .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.selected { background: var(--ink); color: #fff; }
/* ---- DIVIDER ---- */
.divider { height: 1px; background: var(--line); margin: var(--space-6) 0; }
/* ---- MODAL ---- */
.modal-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(10,10,10,.45);
display: grid; place-items: center; padding: 20px;
}
.modal {
background: var(--bg); border-radius: 22px;
box-shadow: var(--shadow-lg); overflow: hidden;
max-height: 90vh; overflow-y: auto;
}
/* ---- STAT ---- */
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-val {
font-family: var(--serif); font-size: 36px; font-weight: 500;
letter-spacing: -0.025em; line-height: 1;
}
.stat-label { font-size: var(--type-label-size); color: var(--ink-3); font-weight: var(--type-label-weight); }
.stat-delta { font-size: 12px; font-weight: 600; }
.stat-delta.up { color: var(--ok); }
.stat-delta.down { color: var(--accent); }
/* ---- MISC ---- */
.pill { padding: 6px 14px; border-radius: 999px; font-size: var(--type-label-size); font-weight: var(--type-label-weight); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-accent { background: var(--accent-2-bg); color: var(--accent); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* ---- FOOTER ---- */
.site-footer {
background: var(--ink); color: rgba(255,255,255,.7);
padding: var(--space-7) 0; margin-top: 80px;
}
.site-footer-inner {
/* FOUNDER BATCH V3 (2026-07-28): .site-footer keeps its full-bleed --ink
background; this inner wrapper centers content within it. Same shared
component as .site-nav/.site-nav-inner (already capped above) — fixing
both keeps every page using this shared footer/nav pair consistent,
not just the 5 pages V3's acceptance text names explicitly. Round-2
visual-checker found padding must live on this SAME element (not the
outer .site-footer) to match .section's composition — see home.html's
.hero-inner comment for the full reasoning. */
padding: 0 clamp(24px, 3vw, 48px);
max-width: var(--max-content-width); margin-left: auto; margin-right: auto;
}
.footer-logo { font-family: var(--serif); color: #fff; font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); margin-bottom: var(--space-5); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.footer-col h4 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-3); }
.footer-col a { display: block; font-size: 13px; margin-bottom: var(--space-2); color: rgba(255,255,255,.6); transition: color .15s; }
.footer-col a:hover { color: #fff; }
/* FOUNDER BATCH LAUNCH HARDENING v2, F1 — "Zgłoś uwagę" is a