/* Fair Vintage — design system styles */
/* Fonts loaded via in each page's — not @import */
:root {
/* Bone & Ink (default) */
--paper: #F4EFE6;
--paper-2: #EBE4D6;
--ink: #1C1A17;
--ink-2: #46413A;
--ink-3: #76705F;
--rule: #D9D0BE;
--rule-2: #BFB39A;
--accent: #A8824B;
--accent-deep: #6B4F26;
--paper-card: #FBF8F1;
--shadow: 0 1px 0 rgba(28,26,23,.04), 0 24px 60px -28px rgba(28,26,23,.18);
}
[data-palette="forest"] {
--paper: #F4EFE6;
--paper-2: #E8E2D2;
--ink: #1F2A24;
--ink-2: #34423B;
--ink-3: #6F7A72;
--rule: #CDD3CA;
--rule-2: #A6AFA3;
--accent: #A8824B;
--accent-deep: #5C4422;
--paper-card: #FBF8F1;
}
[data-palette="oxblood"] {
--paper: #F4EFE6;
--paper-2: #ECE0D8;
--ink: #3A1518;
--ink-2: #5A2A2D;
--ink-3: #8A6669;
--rule: #DCCCC8;
--rule-2: #B89A95;
--accent: #1C1A17;
--accent-deep: #1C1A17;
--paper-card: #FBF8F1;
}
[data-palette="midnight"] {
--paper: #14130F;
--paper-2: #1C1A15;
--ink: #F4EFE6;
--ink-2: #C8C0AE;
--ink-3: #847E6E;
--rule: #2E2A22;
--rule-2: #4A4337;
--accent: #C9A062;
--accent-deep: #E8C58A;
--paper-card: #1A1814;
--shadow: 0 1px 0 rgba(255,255,255,.02), 0 24px 60px -28px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--paper);
color: var(--ink);
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.serif-display { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; }
/* Add breathing room under tight display headlines so italic descenders (p, y, g)
don't overlap whatever's beneath. Apply to any h1/h2/h3 inside .serif-display
contexts. */
h1.serif-display, h2.serif-display, h3.serif-display { padding-bottom: 0.08em; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.eyebrow {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 500;
}
.smallcaps {
font-variant-caps: all-small-caps;
letter-spacing: 0.1em;
}
a { color: inherit; text-decoration: none; }
/* ── Buttons ───────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--paper);
cursor: pointer;
transition: all .2s ease;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-arrow::after {
content: "→";
font-family: 'EB Garamond', Georgia, serif;
font-size: 16px;
letter-spacing: 0;
transition: transform .2s ease;
}
.btn:hover .btn-arrow-inner, .btn-arrow:hover::after { transform: translateX(3px); }
/* ── Layout ───────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.rule { height: 1px; background: var(--rule); border: 0; }
.rule-thick { height: 1px; background: var(--ink); border: 0; }
/* ── Nav ──────────────────────────────── */
.nav {
position: sticky; top: 0; z-index: 50;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.nav-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 18px 48px;
}
.nav-links { display: flex; gap: 28px; }
.nav-link {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
cursor: pointer;
position: relative;
padding: 4px 0;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -22px;
height: 2px; background: var(--ink);
}
.nav-right { display: flex; gap: 16px; align-items: center; justify-content: flex-end; }
/* ── Wordmark ─────────────────────────── */
.wordmark {
display: inline-flex; flex-direction: column; align-items: center;
line-height: 0.95;
font-family: 'Cormorant Garamond', Georgia, serif;
letter-spacing: 0.18em;
cursor: pointer;
}
.wordmark .top { font-size: 18px; font-weight: 500; }
.wordmark .rule { width: 100%; height: 1px; background: var(--ink); margin: 4px 0; }
.wordmark .bot { font-size: 18px; font-weight: 500; }
.wordmark .est {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 8px; letter-spacing: 0.2em; margin-top: 4px; color: var(--ink-3);
}
/* ── Placeholder imagery ─────────────── */
.ph {
position: relative;
background: var(--paper-2);
background-image:
repeating-linear-gradient(135deg, rgba(28,26,23,.04) 0 1px, transparent 1px 8px);
display: flex; flex-direction: column; justify-content: flex-end;
overflow: hidden;
}
.ph::before {
content: "";
position: absolute; inset: 12px;
border: 1px solid var(--rule-2);
pointer-events: none;
}
.ph-label {
position: absolute; left: 24px; bottom: 24px;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
background: var(--paper-card);
padding: 6px 10px;
border: 1px solid var(--rule);
}
.ph-corner {
position: absolute; top: 14px; right: 14px;
width: 18px; height: 18px;
border-top: 1px solid var(--rule-2);
border-right: 1px solid var(--rule-2);
}
/* ── Cards ────────────────────────────── */
.card {
background: var(--paper-card);
border: 1px solid var(--rule);
}
/* ── Forms ─────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
}
.field input, .field select, .field textarea {
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule-2);
padding: 10px 0;
font-family: 'EB Garamond', Georgia, serif;
font-size: 18px;
color: var(--ink);
outline: none;
transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--ink);
}
/* ── Misc ──────────────────────────────── */
.tag {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
border: 1px solid var(--rule);
padding: 5px 10px;
background: var(--paper-card);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.numerals { font-variant-numeric: tabular-nums lining-nums; }
/* Subtle reveal */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .5s ease both; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
100% { opacity: 1; transform: scale(1); }
}
::selection { background: var(--ink); color: var(--paper); }
/* ── Blog HTML body (rich posts with tables, lists etc.) ─────────────────── */
.blog-html-body { font-size: 19px; line-height: 1.8; color: var(--ink); }
.blog-html-body h2 { font-family: 'EB Garamond', Georgia, serif; font-size: 32px; font-weight: 500; margin: 48px 0 20px; line-height: 1.2; }
.blog-html-body h3 { font-family: 'EB Garamond', Georgia, serif; font-size: 24px; font-weight: 500; margin: 36px 0 16px; }
.blog-html-body p { margin: 0 0 24px; }
.blog-html-body ul { margin: 0 0 28px; padding-left: 24px; }
.blog-html-body li { margin-bottom: 10px; }
.blog-html-body table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 16px; }
.blog-html-body th { background: var(--ink); color: var(--paper); padding: 14px 16px; text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--rule-2); }
.blog-html-body td { padding: 13px 16px; border: 1px solid var(--rule); vertical-align: top; }
.blog-html-body tr:nth-child(even) td { background: var(--paper-2); }
.blog-html-body div[style*="background:#f5f5f5"] { background: var(--paper-card) !important; border: 1px solid var(--rule); border-radius: 0 !important; padding: 32px !important; margin-top: 40px; }
.blog-html-body div[style*="background:#f5f5f5"] h3 { margin-top: 0; }
/* ── Image-slot integration ─────────────────────────────
is a web component letting the user drag-and-drop a photo
onto a card to fill it. Styled via ::part() to match Fair Vintage. */
image-slot {
font-family: 'EB Garamond', Georgia, serif;
display: block;
}
image-slot::part(frame) {
background: var(--paper-2);
background-image:
repeating-linear-gradient(135deg, rgba(28,26,23,.04) 0 1px, transparent 1px 8px);
}
image-slot::part(ring) {
border: 1px solid var(--rule-2);
border-radius: 0;
inset: 12px;
}
image-slot::part(empty) {
color: var(--ink-3);
}
image-slot[data-over]::part(ring) {
border-color: var(--accent);
border-style: dashed;
}
/* When filled, hide our overlay label and corner mark */
.ph-wrap.is-filled .ph-label,
.ph-wrap.is-filled .ph-corner { display: none; }
/* ── Mobile hamburger (hidden by default on desktop) ────────────────────────── */
.nav-hamburger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
background: transparent; border: 0; padding: 8px 4px; cursor: pointer; flex-shrink: 0;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 1px; transition: all .2s; }
/* ── Responsive — 860 px breakpoint ─────────────────────────────────────────── */
/* Prevent horizontal overflow globally on mobile */
@media (max-width: 860px) {
html, body { overflow-x: hidden; }
main { overflow-x: hidden; }
}
@media (max-width: 860px) {
/* Container — override ALL inline padding on .container divs */
.container { padding-left: 20px !important; padding-right: 20px !important; }
/* Nav: collapse to logo + hamburger */
.nav-inner {
grid-template-columns: 1fr auto 1fr;
padding: 12px 20px;
gap: 0;
}
.nav-links { display: none; }
.nav-right .nav-link { display: none; }
.nav-right .btn { display: none; }
.nav-hamburger { display: flex; }
/* Reduce all section vertical padding */
section { padding-top: 56px !important; padding-bottom: 56px !important; }
/* ─ Grid utility classes ─ */
.fv-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
.fv-2col-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
.fv-3col-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
.fv-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.fv-steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
.fv-blog-grid { grid-template-columns: 1fr !important; gap: 40px !important; row-gap: 40px !important; }
.fv-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
/* Trust strip — horizontal scroll */
.fv-trust-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fv-trust-grid { min-width: 580px; }
/* Ledger / recent valuations rows */
.fv-ledger-row { grid-template-columns: 1fr 90px !important; gap: 12px !important; }
.fv-ledger-hide { display: none !important; }
/* How it works step rows — hide photo column */
.fv-step-row { grid-template-columns: 70px 1fr !important; }
.fv-step-img { display: none !important; }
/* Hero right column (absolute-positioned imagery) — hide on mobile */
.fv-hero-right { display: none !important; }
/* Full-bleed hero — reduce height */
.fv-hero-fullbleed { height: 420px !important; }
/* Category card (categories page) — stack */
.fv-cat-card { grid-template-columns: 1fr !important; }
.fv-cat-card-text { padding: 40px 0 0 !important; }
.fv-cat-card-img { border-left: 0 !important; padding: 0 !important; }
/* How it works banner — hide on mobile (saves space) */
.fv-how-banner { display: none; }
/* Section head headline */
.fv-section-head-h2 { font-size: clamp(28px, 7vw, 56px) !important; }
/* Blog HTML body: make table scroll */
.blog-html-body { overflow-x: auto; display: block; }
.blog-html-body table { min-width: 480px; }
.blog-html-body h2 { font-size: 24px; }
/* Buttons row — wrap and stretch */
.fv-btn-row { flex-wrap: wrap !important; }
.fv-btn-row .btn { flex: 1 1 auto; justify-content: center; min-width: 140px; }
/* Comparison table — horizontal scroll */
.fv-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fv-compare-table { min-width: 640px; }
/* About: 5-promises strip — horizontal scroll */
.fv-5strip-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fv-5strip { min-width: 600px; }
/* Pack form: collapse sidebar below form */
.fv-pack-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
.fv-pack-aside { position: static !important; }
/* Pack form address fields */
.fv-form-2col { grid-template-columns: 1fr !important; gap: 20px !important; }
/* Override span-2 on form fields when grid collapses */
.fv-form-2col > * { grid-column: span 1 !important; }
/* PayoutGuarantee huge "72" number */
.fv-payout-num { font-size: clamp(80px, 22vw, 200px) !important; }
/* Live unpacking YouTube mock — hide chat panel, show video full width */
.fv-yt-chat { display: none !important; }
.fv-yt-video { grid-template-columns: 1fr !important; }
/* How hero text grid */
.fv-how-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
/* Contact methods 3-col — border cleanup on mobile */
.fv-contact-methods { grid-template-columns: 1fr !important; }
.fv-contact-methods > div { border-right: 0 !important; border-bottom: 1px solid var(--ink); }
.fv-contact-methods > div:last-child { border-bottom: 0 !important; }
/* Dark CTA block inside compare */
.fv-dark-cta { grid-template-columns: 1fr !important; padding: 32px 24px !important; gap: 32px !important; }
/* Footer bottom row */
footer .fv-footer-bottom { flex-direction: column !important; gap: 12px !important; }
/* Ensure all flex rows that might overflow wrap */
.fv-flex-wrap { flex-wrap: wrap !important; }
}