/* home.html only — the marketing/info page at pithos.site and www.pithos.site.
Reuses css/tokens.css's real palette and css/components.css's real .card/
.grid markup for the product preview (same classes the actual app renders
with, so it can never drift out of sync with what the product looks like).
The page reads as a dark gallery wall — the same Charred Pithos Earth
gradient the app's own header/sign-in screens already use — with content
presented as lit display cases (the existing light .card/.home-step
surfaces) or placards lettered straight onto the wall (the hero and
feature text, light-on-dark). The three moving gold trims between
sections are a Greek key / meander border, the same motif already
drawn into the vase mark's own base — architectural trim, not decoration
borrowed from nowhere. */
:root {
--gold: #d4af37;
--gold-dim: rgba(212, 175, 55, .14);
--ink: #f1f5f9;
--ink2: #cbb6ae;
--ink3: #a8938c;
/* The middle stop of --dark-grad (the app's own header/sign-in gradient)
used flat here instead of as a gradient — --dark-grad is a short,
3-stop fade tuned for an ~80px header; stretched across a whole long
page it fades almost to black well before the page ends. One flat
tone from the same family reads as a consistent gallery wall instead. */
--gallery: #3b2620;
}
body { background: var(--gallery); }
.home-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
/* ── Nav ─────────────────────────────────────────────────────────────────── */
.home-nav { padding: 22px 0; }
.home-nav-inner { display: flex; align-items: center; gap: 12px; }
.home-nav-logo {
width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; background: var(--accent);
}
.home-nav-logo img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.65); }
.home-nav-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.home-nav-cta { margin-left: auto; }
/* ── Hero ────────────────────────────────────────────────────────────────── */
.home-hero {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
padding: 48px 0 76px;
}
.home-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--gold); background: var(--gold-dim);
padding: 6px 12px; border-radius: 99px;
}
.home-h1 {
font-size: 2.9rem; line-height: 1.06; font-weight: 800; letter-spacing: -.03em;
margin-top: 18px; text-wrap: balance; color: var(--ink);
}
.home-h1 em { color: var(--gold); font-style: normal; }
.home-lede {
font-size: 1.1rem; line-height: 1.6; color: var(--ink2);
margin-top: 20px; max-width: 48ch;
}
.home-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.home-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: .95rem;
text-decoration: none; transition: background .15s, transform .1s, border-color .15s;
}
.home-btn:active { transform: scale(.98); }
.home-btn-primary { background: var(--accent); color: #fff; }
.home-btn-primary:hover { background: var(--accent-hover); }
.home-btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(255, 255, 255, .22); }
.home-btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.home-trust { margin-top: 22px; font-size: .82rem; color: var(--ink3); }
/* The product preview — a framed window holding the REAL .grid/.card markup
from components.css, populated with genuine seeded data, not stock imagery.
Left as a light surface deliberately — a lit screen in a dark room. */
.home-preview {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .3);
overflow: hidden; transform: rotate(1.2deg);
}
.home-preview-bar {
display: flex; align-items: center; gap: 6px; padding: 12px 16px;
background: var(--surface2); border-bottom: 1px solid var(--border);
}
.home-preview-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border2); }
.home-preview-url {
margin-left: 10px; font-size: .74rem; color: var(--text3); font-family: monospace;
background: var(--bg); border-radius: 6px; padding: 3px 10px;
}
.home-preview-body { padding: 18px; }
.home-preview-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.home-preview-body .card { cursor: default; }
.home-preview-body .card:hover { transform: none; box-shadow: var(--sh); }
.home-preview-body .card-img { height: 132px; }
.home-preview-body .card-ph-i { font-size: 1.5rem; }
.home-preview-body .card-ph-l { font-size: .62rem; }
.home-preview-body .card-body { padding: 9px 11px 11px; }
.home-preview-body .card-name { font-size: .82rem; }
/* ── Wave trim ───────────────────────────────────────────────────────────── */
/* The running-wave frieze from the vase mark's own base, traced from
logo.png rather than a generic classical border — the same curling wave
that sits under the shell on the vase, repeated as trim instead of
staying confined to a 256px icon. home.html draws the unit path ONCE
(a in a hidden defs block) and every trim reuses it twice via