/* ==========================================================================
J&H Cars — "Tmavá noc" design system. See ../DESIGN.md.
Dark Night #061726 ground, Crimson Bold #D73139 as a DELIBERATELY SMALL
accent, everything between them neutral cool grey. The site is meant to read
near-monochrome and technical — thin rules, small type, flat surfaces — not
decorative. Radii are near-square, there is no glow, and colour is rationed.
========================================================================== */
:root {
/* ground — Dark Night and four steps lightened toward slate */
--ink-950: #061726;
--ink-900: #0A1F31;
--ink-800: #0F2839;
--ink-700: #163243;
--line: #1E4053;
--hairline: rgba(234, 240, 245, .13);
/* text — neutral cool greys, no hue of their own */
--paper: #EAF0F5; /* 15.78:1 on --ink-950 */
--soft: #B4C2CE; /* 9.97:1 — body copy */
--muted: #7E8F9E; /* 5.45:1 — captions, labels */
--dim: #46586A; /* 2.47:1 — decorative only, NEVER text */
/* action — Crimson Bold, rationed. Only ~5% of the page should carry it:
the primary CTA fill, the nav underline, and a handful of 1px marks.
CONTRAST TRAP: crimson on the ground is only 3.79:1 — fine for fills, rules
and icons (3:1 threshold for non-text) but it FAILS as small body text.
And unlike the last two themes, this fill needs WHITE text (4.79:1);
dark text on crimson is 3.79:1 and fails. */
--crimson: #D73139;
--crimson-deep: #B3232B; /* hover / pressed on filled controls */
/* form error state — lifted off the accent so a warning never looks clickable,
and light enough to pass as small text (5.83:1) where crimson would not. */
--error: #F2645C;
/* THIRD COLOUR — amber. Added because crimson is only 3.79:1 on the ground, which
bars it from small text and left the "meta" layer (eyebrows, labels, step numbers)
stuck on grey and looking flat. Amber is 8.41:1, so it CAN carry small text, and it
sits between the cool ground and the warm crimson rather than fighting either.
Division of labour: crimson = act on this. Amber = notice this. Grey = read this. */
--amber: #E8A33D;
--amber-dim: rgba(232, 163, 61, .16); /* hairlines and quiet fills */
/* state — verified reads amber, not crimson: crimson is reserved for actions */
--verified: #E8A33D;
--star: #E8A33D;
/* type — Inter Tight for headings (narrow, modern, technical — replaced
Cormorant Garamond, whose decorative serif was the single biggest thing
separating this site from the reference designs) over Plus Jakarta Sans for
body. Both ship latin-ext, so Slovak carons (ť ľ ď ĺ ŕ) render — verified
against the Google Fonts unicode-ranges before switching. */
/* ONE type scale. Every size on the site comes from these eight steps — added after
the cocoonblanket.com reference pass, where the whole page runs on a handful of
type roles and nothing is sized ad hoc. Do not introduce a ninth step or an
inline font-size; if something needs to be bigger, it is a --fs-header. */
--fs-display: clamp(2rem, 5.6vw, 3.5rem);
--fs-header: clamp(1.9rem, 4vw, 2.7rem);
--fs-title: clamp(1.5rem, 2.8vw, 2.05rem);
--fs-quote: clamp(1.18rem, 2vw, 1.5rem); /* pull quote + the big footer contact links */
--fs-sub: 1.14rem;
--fs-lead: 1.02rem;
--fs-body: .95rem;
--fs-micro: .86rem;
--fs-label: .69rem;
--font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-label: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
/* layout — near-square corners; the old 16px pill-like radii read as "app UI",
which is the opposite of the reference direction */
--container: min(1320px, 100% - clamp(28px, 6vw, 72px));
--radius: 4px;
--radius-sm: 2px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--shadow-md: 0 16px 40px rgba(0, 0, 0, .5);
--header-h: 76px;
}
/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* clip on BOTH html and body — clipping only body still lets the root element form the
scroll container and report the 100vw overspill of full-bleed sections */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
html, body { height: 100%; }
body {
font-family: var(--font-body);
background: var(--ink-950);
color: var(--soft);
font-size: 16px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
/* clip, not hidden: full-bleed elements use 100vw, which INCLUDES the scrollbar, so
they sit ~8px wider than the content box. overflow-x:hidden would still form a scroll
container and report the overflow; clip does not, so nothing can be scrolled to. */
overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
/* Icons are with no intrinsic size. Without a base
size they fall back to the replaced-element default of 300×150 and blow up the
layout. Specificity is (0,0,1) so every component rule below still wins. */
svg { width: 18px; height: 18px; flex: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* ol included: the stepper is an , and the UA's 40px padding-inline-start was
pushing the number circles off the drawn track's centre line */
ul, ol { list-style: none; padding: 0; }
/* Inter Tight has a normal x-height, so the +15% bump Cormorant needed is reversed and
the scale steps back down. A narrow sans also wants negative tracking at display
sizes, which the serif did not. */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--paper);
line-height: 1.06;
font-weight: 600;
letter-spacing: -.022em;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 200;
background: var(--crimson); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm);
font-family: var(--font-label); font-size: 14px; transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 3px; }
/* ============ LAYOUT ============ */
.container { width: var(--container); margin-inline: auto; }
/* Sections were asked to breathe more, so the whole rhythm stepped up a notch. */
.section { padding-block: clamp(76px, 10.5vw, 140px); }
.section--tight { padding-block: clamp(54px, 7vw, 86px); }
.section-head { max-width: 760px; margin-bottom: clamp(38px, 5.6vw, 68px); }
.section-title { font-size: var(--fs-title); }
.section-title--xl { font-size: var(--fs-header); }
/* a shorter measure than the old 64ch: the reference keeps every paragraph to about
two short lines, which is also what forces the copy to stay edited */
.section-sub { margin-top: 14px; font-size: var(--fs-lead); color: var(--soft); max-width: 46ch; }
/* ONE label role for the whole site. The numbered section badges (.num-row /
.num-badge, 02 · 03 · 04 …) were removed: the numbers were decoration, not a real
sequence, which the owner's own rulebook (section 2.5) rules out — and the reference
site labels its sections with nothing but a small grey line of text. The classes are
gone from the markup; do not bring them back. */
.eyebrow {
font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: .15em;
text-transform: uppercase; color: var(--muted); display: inline-flex;
align-items: center; gap: 10px; margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--crimson); }
/* hairline + proof row */
.hair { height: 1px; width: 100%; background: var(--hairline); }
.proof-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); margin-top: 14px;
max-width: none; /* it's a
, so it would otherwise inherit the 66ch measure */
}
/* separated by whitespace alone — the little round .pdot separators were removed on
request, so the gap has to carry the separation instead */
.proof-row { gap: 10px clamp(22px, 4vw, 40px); }
/* ============ TYPOGRAPHY ============ */
h1 { font-size: var(--fs-display); line-height: 1.04; }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.012em; }
h4 { font-weight: 700; }
p { max-width: 66ch; }
strong { color: var(--paper); font-weight: 600; }
/* ============ BUTTONS ============ */
.btn {
/* buttons stay in the sans (UI face) — a serif CTA reads as decorative, not actionable */
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); letter-spacing: -.005em;
padding: 15px 26px; border: 1.5px solid transparent; border-radius: var(--radius-sm);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
border-color .18s ease, color .18s ease;
white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .22s ease; }
.btn:hover svg { transform: translateX(3px); }
/* WHITE text, not dark — this palette inverts the last two. White on crimson is
4.79:1 (passes); --ink-950 on crimson is only 3.79:1 and fails for button text.
No glow: the accent carries the emphasis on its own. */
.btn--primary { background: var(--crimson); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--crimson-deep); }
.btn--primary:active { transform: translateY(1px); transition-duration: .08s; }
.btn--ghost { background: transparent; color: var(--paper); border-color: var(--line); }
/* border only — crimson as small link text would be 3.79:1 and fail */
.btn--ghost:hover { border-color: var(--crimson); color: var(--paper); }
.btn--ghost:active { transform: translateY(1px); transition-duration: .08s; }
.btn--quiet {
/* underline appears on interaction only — a permanent one next to the hero's own
hairline read as two redundant rules stacked close together */
background: transparent; color: var(--muted); font-family: var(--font-label);
font-weight: 500; font-size: var(--fs-micro); padding: 15px 4px;
border-bottom: 1px solid transparent; border-radius: 0;
transition: color .18s ease, border-color .18s ease;
}
.btn--quiet:hover, .btn--quiet:focus-visible { color: var(--paper); border-bottom-color: var(--paper); }
.btn--quiet:hover svg { transform: translateX(3px); }
.btn--sm { padding: 11px 18px; font-size: var(--fs-micro); }
.btn--lg { padding: 18px 32px; font-size: var(--fs-lead); }
/* The "bitten corner" notch is retired. It came from an early reference and was the
most decorative thing on the page — the opposite of the direction chosen here.
The class is kept as a no-op so the existing markup doesn't need touching. */
.btn--bitten { border-radius: var(--radius-sm); }
/* ============ HEADER ============ */
.site-header {
position: sticky; top: 0; z-index: 100; background: rgba(6, 23, 38, .88);
backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand { display: flex; align-items: center; min-height: 44px; }
/* The client's real logo is a near-square emblem (car + swoosh + wordmark stacked),
not the old wide lockup — it needs more height to keep the "J & H CARS" line legible. */
.brand img { height: 52px; width: auto; }
/* ============ NAV — sliding tab bar ============
Vanilla port of the Vercel-style tabs the owner supplied as a React component:
a rounded highlight that slides to whichever item is hovered, plus a 2px bar
under the current page. Both are single elements measured and positioned in
js/main.js, so the motion is one transition rather than per-item states.
Because this is a multi-page site, the "active tab" is the current page and
does not move on click — the browser navigates instead. */
.vtabs { position: relative; }
.vtabs-hover, .vtabs-active {
position: absolute; pointer-events: none;
transition: left .3s ease, width .3s ease, opacity .3s ease;
}
.vtabs-hover {
top: 50%; height: 30px; margin-top: -15px;
background: rgba(234, 240, 245, .10); border-radius: 6px; opacity: 0;
}
.vtabs-active { bottom: -6px; height: 2px; background: var(--crimson); border-radius: 2px; }
/* nothing to slide before JS measures, and no flash of a mis-placed bar */
.js .vtabs-active { opacity: 0; }
.js .vtabs-active.is-ready { opacity: 1; }
/* deliberately NOT position:relative — the links' offsetParent has to be .vtabs, which
is what the highlight and underline are positioned against. If .nav-list becomes a
containing block the two coordinate systems can drift apart. */
.nav-list { display: flex; align-items: center; gap: 6px; }
.nav-link {
/* positioned so it paints ABOVE .vtabs-hover. Both highlights are absolutely
positioned and sit earlier in the DOM, so without this the hover pill renders on
top of the link text and washes it out. Making the link itself relative does not
change its own offsetParent, so the JS measurements stay anchored to .vtabs. */
position: relative;
display: flex; align-items: center; height: 30px; padding: 0 12px;
font-size: var(--fs-body); font-weight: 500; color: var(--muted);
white-space: nowrap; transition: color .3s ease;
}
.nav-link:hover { color: var(--paper); }
.nav-link[aria-current="page"] { color: var(--paper); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.vtabs-hover, .vtabs-active { transition: none; }
}
.header-cta { display: flex; align-items: center; gap: 12px; }
.tel-chip {
display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label);
font-size: var(--fs-micro); color: var(--paper); background: var(--ink-800);
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px;
transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.tel-chip svg { width: 16px; height: 16px; color: var(--muted); transition: transform .3s ease; }
.tel-chip:hover { border-color: var(--crimson); transform: translateY(-1px); background: var(--ink-700); }
.tel-chip:hover svg { transform: rotate(-10deg) scale(1.1); }
.tel-chip:active { transform: translateY(0) scale(.97); }
.nav-toggle {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-800);
transition: border-color .18s ease, transform .12s ease;
}
.nav-toggle:hover { border-color: var(--crimson); }
.nav-toggle:active { transform: scale(.93); }
.nav-toggle span { width: 18px; height: 2px; background: var(--paper); margin-inline: auto; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-panel[hidden] { display: none; }
@media (max-width: 880px) {
.nav, .header-cta .tel-chip, .header-cta .btn { display: none; }
.nav-toggle { display: flex; }
.nav-panel:not([hidden]) {
display: block; position: fixed; inset: var(--header-h) 0 0 0; background: var(--ink-950);
z-index: 99; padding: 28px clamp(20px, 6vw, 40px); overflow-y: auto;
animation: nav-panel-in .22s ease both;
}
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.nav-panel ul { display: flex; flex-direction: column; gap: 2px; margin-bottom: 26px; }
/* height:auto is load-bearing: the desktop .nav-link is a 30px-tall flex row, and with
the global box-sizing:border-box that 30px is the WHOLE box. Here the padding alone
is 15+15, so the content box collapsed to zero, the text spilled 10px past the
bottom border and the hairline struck straight through the words. */
.nav-panel .nav-link {
display: block; height: auto; padding: 15px 4px;
font-size: var(--fs-sub); border-bottom: 1px solid var(--line);
transition: color .15s ease, padding-left .15s ease;
}
.nav-panel .nav-link:hover, .nav-panel .nav-link:focus-visible { color: var(--paper); padding-left: 10px; }
.nav-panel .btn { width: 100%; justify-content: center; margin-top: 12px; }
.nav-panel .tel-chip { width: 100%; justify-content: center; }
}
/* ============ HERO — centred lockup ============ */
.hero {
position: relative;
min-height: min(88svh, 780px);
display: flex; flex-direction: column;
padding-block: clamp(40px, 8vh, 90px) clamp(24px, 4vh, 40px);
overflow: hidden;
}
.hero-backdrop { position: absolute; inset: 0; z-index: 0; background: var(--ink-900); }
.hero-backdrop img {
width: 100%; height: 114%; object-fit: cover; object-position: 62% 46%;
position: absolute; left: 0; top: -7%; opacity: .62;
}
/* Two scrims. The vertical one seats the hero into the page; the radial one keeps the
middle of the frame dark enough for centred copy no matter how bright the car is
behind it — the photo is a white car, so a weak scrim renders white-on-white.
(Was a left-weighted 90deg gradient back when the copy sat in a left column.) */
.hero-backdrop::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(115% 85% at 50% 50%, rgba(6, 23, 38,.44) 0%, rgba(6, 23, 38,.60) 55%, rgba(6, 23, 38,.78) 100%),
linear-gradient(180deg, rgba(6, 23, 38,.62) 0%, rgba(6, 23, 38,.24) 26%, rgba(6, 23, 38,.72) 74%, var(--ink-950) 100%);
}
@media (max-width: 899px) {
.hero-backdrop::after {
background:
linear-gradient(180deg, rgba(6, 23, 38,.68) 0%, rgba(6, 23, 38,.6) 22%, rgba(6, 23, 38,.93) 66%, var(--ink-950) 100%);
}
.hero-backdrop img { opacity: .3; }
}
/* Copy is centred in the frame — vertically (auto margins top and bottom) and
horizontally (each child capped by its own measure, then margin-inline:auto). */
.hero-inner { position: relative; z-index: 1; margin-block: auto; }
.hero-copy { text-align: center; }
.hero-title {
font-size: var(--fs-display);
margin-bottom: 18px; max-width: 19ch; margin-inline: auto;
}
.hero-title em { font-style: normal; color: var(--crimson); }
.hero-sub {
font-size: var(--fs-lead); max-width: 46ch; margin-bottom: 30px;
margin-inline: auto; color: var(--soft);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.hero-foot { position: relative; z-index: 1; margin-top: clamp(36px, 7vh, 72px); }
.hero-foot .proof-row { justify-content: center; }
@media (min-width: 900px) {
.hero-sub { margin-bottom: 34px; }
}
/* ============ IMPORT STEPPER ============
Was a diagram: a line drawn down the CENTRE of the section, icon circles sitting on
it, and the five step texts alternating to its left and right. The owner's words —
it is scattered, the icon principle is not nice, and the text is hard to find. Same
failure as the staged headline it sat under: no common left edge, so reading it meant
jumping across the page and back.
It is a list now. One left edge, one hairline between rows, the icon inline at the
start of its row instead of floating in a circle on a track. The icons keep their
self-drawing entrance (see the pathLength note in CLAUDE.md) — it just happens in
place rather than along a line. */
.stepper { position: relative; }
.stepper-list { display: grid; gap: 0; }
.stepper-item {
display: grid; grid-template-columns: 34px 1fr; gap: clamp(16px, 2vw, 26px);
align-items: start;
padding-block: clamp(22px, 3vw, 34px);
border-top: 1px solid var(--hairline);
}
.stepper-item:first-child { border-top: 0; padding-top: 0; }
/* no circle, no fill, no border — the icon is a mark in the text, not an object */
.stepper-num { display: flex; align-items: flex-start; justify-content: flex-start; padding-top: 2px; }
.stepper-num svg { width: 26px; height: 26px; color: var(--muted); transition: color .35s ease; }
.stepper-item.is-done .stepper-num svg { color: var(--amber); }
/* ---- the step icons draw themselves ----
Every shape in the symbols carries pathLength="1", so one dash pair draws all of them
at once, and because stroke-dasharray / stroke-dashoffset are inherited SVG properties
setting them on the