/* ==========================================================================
CERES DESIGN SYSTEM
Shared visual language for ceres.apex-group.pl and the Ceres configurator.
Load this file on every page, before any page-specific stylesheet.
See DESIGN-SYSTEM.md for the rationale behind these decisions.
========================================================================== */
/* -------------------------------------------------------------------------
1. FONTS
Load once, in , before this file:
-------------------------------------------------------------------------- */
:root {
--font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; /* headlines, big numerals */
--font-body: 'Barlow', -apple-system, sans-serif; /* running text, UI labels */
--font-mono: 'IBM Plex Mono', 'SF Mono', monospace; /* prices, specs, codes, eyebrows */
/* ------------------------------------------------------------------
2. COLOR — monochrome premium ground, one disciplined accent.
Color itself is carried by photography; UI stays near-neutral.
------------------------------------------------------------------ */
--black: #070707; /* page background */
--dark: #0f0f0f; /* alternate section background */
--card: #151515; /* raised surface */
--card-2: #1b1b1b; /* raised surface, hover / nested */
--border: rgba(255,255,255,0.08);
--border-2:rgba(255,255,255,0.16);
--ink: #f6f6f1; /* primary text (warm off-white) */
--ink-70: rgba(246,246,241,0.70);
--ink-46: rgba(246,246,241,0.46);
--ink-28: rgba(246,246,241,0.28);
/* the one accent — deep, dulled amber/copper. never safety-orange. */
--accent: #c8a96e;
--accent-hi: #e6c890; /* hover / lit state */
--accent-dim: rgba(200,169,110,0.14); /* accent wash for selected surfaces */
--accent-ink: #1a1305; /* text placed on top of solid accent fill */
/* aluminium — reserved for the spec "plate" motif only (see components) */
--plate-1: #eeece5;
--plate-2: #d9d5c9;
--plate-ink: #17181a;
--plate-line: #b9b4a6;
/* -------------------------------------------------------------
3. RADIUS — sharp on structure, soft on interactive controls.
Large blocks (cards, images, sections) stay cut-metal square;
things a hand clicks (buttons, inputs, chips, swatches) get a
small radius so they read as touchable.
------------------------------------------------------------- */
--r-structure: 0px;
--r-control: 4px;
--r-pill: 999px;
/* -------------------------------------------------------------
4. SPACING — 4px grid, matches existing section rhythm.
------------------------------------------------------------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 120px; --sp-11: 160px;
--gutter: 48px; /* section side padding, desktop */
--gutter-m: 22px; /* section side padding, mobile */
--section-y: var(--sp-10);
--section-y-m: 72px;
--shadow-lift: 0 18px 44px rgba(0,0,0,.45);
--ease: cubic-bezier(.4,0,.2,1);
}
/* -------------------------------------------------------------------------
5. BASE
-------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
background:var(--black); color:var(--ink);
font-family:var(--font-body); font-weight:300; font-size:15px; line-height:1.6;
overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; }
/* -------------------------------------------------------------------------
6. TYPE SCALE
-------------------------------------------------------------------------- */
.cs-eyebrow, .eyebrow {
font-family:var(--font-mono); font-size:11px; font-weight:500;
letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
}
.cs-eyebrow.on-dark, .eyebrow.muted { color:var(--ink-46); }
.cs-display-1 { font-family:var(--font-display); font-size:clamp(52px,9vw,140px); line-height:.88; letter-spacing:1px; }
.cs-display-2 { font-family:var(--font-display); font-size:clamp(38px,5.2vw,72px); line-height:.98; letter-spacing:.5px; }
.cs-display-3 { font-family:var(--font-display); font-size:clamp(26px,3.2vw,40px); line-height:1.02; letter-spacing:.3px; }
.cs-display-1 em, .cs-display-2 em, .cs-display-3 em { font-style:normal; color:var(--accent); }
.cs-body-lg { font-size:17px; font-weight:300; line-height:1.75; color:var(--ink-70); }
.cs-body { font-size:15px; font-weight:300; line-height:1.8; color:var(--ink-70); }
.cs-small { font-size:13px; line-height:1.6; color:var(--ink-46); }
.cs-mono-lg { font-family:var(--font-mono); font-weight:600; font-size:28px; letter-spacing:-.01em; }
.cs-mono { font-family:var(--font-mono); font-size:14px; }
.cs-mono-sm { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-46); }
/* -------------------------------------------------------------------------
7. LAYOUT SHELL
-------------------------------------------------------------------------- */
.cs-section { padding:var(--section-y) var(--gutter); }
.cs-section.on-dark { background:var(--dark); }
@media (max-width:900px){ .cs-section { padding:var(--section-y-m) var(--gutter-m); } }
/* -------------------------------------------------------------------------
8. BUTTONS
-------------------------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-mono {
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--font-body); font-size:11px; font-weight:600;
letter-spacing:2.5px; text-transform:uppercase; text-decoration:none;
padding:17px 38px; border-radius:var(--r-control); cursor:pointer;
transition:all .25s var(--ease); border:1px solid transparent;
}
.btn-primary { background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background:var(--accent-hi); transform:translateY(-2px); }
.btn-secondary { background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn-secondary:hover { border-color:var(--ink); transform:translateY(-2px); }
.btn-mono {
font-family:var(--font-mono); letter-spacing:.14em; font-weight:600;
background:var(--ink); color:var(--black); padding:14px 24px;
}
.btn-mono:hover { opacity:.88; }
.btn-mono.outline { background:transparent; color:var(--ink); border-color:var(--border-2); }
button:disabled, .btn-primary:disabled, .btn-mono:disabled { opacity:.3; cursor:not-allowed; transform:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* -------------------------------------------------------------------------
9. CARDS
-------------------------------------------------------------------------- */
.cs-card {
background:var(--card); border:1px solid var(--border); border-radius:var(--r-structure);
padding:var(--sp-6); transition:background .25s var(--ease), border-color .25s var(--ease);
}
.cs-card:hover { background:var(--card-2); }
.cs-card.selectable { cursor:pointer; }
.cs-card.selectable.is-on { border-color:var(--accent); background:var(--accent-dim); }
/* product / model / package card — used on site (.model) and configurator (.mcard/.pkg) */
.cs-product-card {
position:relative; background:var(--card); border:1px solid var(--border-2);
border-radius:var(--r-structure); padding:var(--sp-6); cursor:pointer;
transition:background .25s var(--ease), border-color .25s var(--ease);
overflow:hidden;
}
.cs-product-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.cs-product-card:hover { border-color:var(--ink-28); }
.cs-product-card:hover::before { transform:scaleX(1); }
.cs-product-card.is-on { border-color:var(--accent); background:var(--accent-dim); }
.cs-product-card.is-on::before { transform:scaleX(1); }
.cs-product-card .name { font-family:var(--font-display); font-size:44px; letter-spacing:1px; line-height:1; }
.cs-product-card .price { font-family:var(--font-mono); font-size:15px; color:var(--accent); margin-top:10px; }
.cs-product-card .price-sub { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-46); letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.cs-product-card ul { list-style:none; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.cs-product-card li { font-size:13px; color:var(--ink-70); display:flex; gap:10px; line-height:1.5; }
.cs-product-card li::before { content:'—'; color:var(--accent); flex-shrink:0; }
/* badge, e.g. "Most Popular" */
.cs-badge {
position:absolute; top:var(--sp-6); right:var(--sp-6);
font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--accent-ink); background:var(--accent);
padding:6px 12px; border-radius:var(--r-control);
}
/* -------------------------------------------------------------------------
10. STAT / SPEC CALLOUTS — big numeric parameters (hero, specs, configurator plate)
-------------------------------------------------------------------------- */
.cs-stat { text-align:left; }
.cs-stat .val { font-family:var(--font-display); font-size:clamp(34px,4.4vw,52px); color:var(--accent); line-height:1; }
.cs-stat .val span { font-family:var(--font-mono); font-size:14px; color:var(--ink-46); margin-left:2px; }
.cs-stat .label { font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-46); margin-top:8px; }
/* feature icon row — compact icon + label, used in hero and trust strip */
.cs-icon-row { display:flex; flex-wrap:wrap; gap:var(--sp-6); }
.cs-icon-item { display:flex; align-items:center; gap:12px; }
.cs-icon-item .ico { width:22px; height:22px; flex-shrink:0; color:var(--accent); }
.cs-icon-item .tx { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-70); }
.cs-icon-item .tx b { color:var(--ink); font-weight:600; }
/* numbered feature grid (01–06) */
.cs-feat-no { font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.06em; margin-bottom:22px; }
/* -------------------------------------------------------------------------
11. FORM CONTROLS — shared by lead form and configurator quote form
-------------------------------------------------------------------------- */
.cs-field { margin-bottom:16px; }
.cs-field label {
display:block; font-family:var(--font-mono); font-size:10px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-46); margin-bottom:8px;
}
.cs-input, .cs-select {
width:100%; background:var(--card); border:1px solid var(--border-2); border-radius:var(--r-control);
color:var(--ink); font-family:var(--font-body); font-size:14px; font-weight:300;
padding:14px 16px; outline:none; transition:border-color .2s var(--ease); -webkit-appearance:none;
}
.cs-input:focus, .cs-select:focus { border-color:var(--accent); }
.cs-input::placeholder { color:var(--ink-46); }
.cs-select option { background:var(--dark); }
/* -------------------------------------------------------------------------
12. CONFIGURATOR-SPECIFIC COMPONENTS
-------------------------------------------------------------------------- */
/* option row (checkbox-style) */
.cs-opt {
border:1px solid var(--border); border-radius:var(--r-control); background:var(--card);
margin-bottom:10px; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.cs-opt.is-on { border-color:var(--accent); background:var(--accent-dim); }
.cs-opt-head { display:flex; gap:13px; align-items:flex-start; padding:14px; cursor:pointer; }
.cs-box {
width:18px; height:18px; border:1px solid var(--border-2); border-radius:4px; flex-shrink:0;
display:grid; place-items:center; margin-top:1px; transition:.15s var(--ease);
}
.cs-opt.is-on .cs-box { background:var(--accent); border-color:var(--accent); }
.cs-box svg { width:11px; height:11px; opacity:0; }
.cs-opt.is-on .cs-box svg { opacity:1; }
.cs-opt-name { font-size:14.5px; font-weight:500; }
.cs-opt-code { font-family:var(--font-mono); font-size:10px; color:var(--ink-46); margin-left:8px; }
.cs-opt-price { font-family:var(--font-mono); font-size:13px; color:var(--ink-46); white-space:nowrap; }
.cs-opt-desc { font-size:12.5px; color:var(--ink-46); margin-top:5px; line-height:1.6; }
/* RAL swatches */
.cs-swatch { cursor:pointer; text-align:center; width:60px; }
.cs-swatch .chip { width:60px; height:38px; border-radius:var(--r-control); border:1px solid rgba(255,255,255,.14); }
.cs-swatch.is-on .chip { outline:2px solid var(--accent); outline-offset:2px; }
.cs-swatch .lb { font-family:var(--font-mono); font-size:8.5px; color:var(--ink-46); margin-top:5px; line-height:1.3; }
.cs-swatch.is-on .lb { color:var(--ink); }
/* package card */
.cs-pkg { border:1px solid var(--border-2); border-radius:var(--r-control); background:var(--card); margin-bottom:12px; overflow:hidden; }
.cs-pkg.is-on { border-color:var(--accent); }
.cs-pkg-head { display:flex; justify-content:space-between; gap:12px; padding:17px 17px 13px; cursor:pointer; }
.cs-pkg-title { font-family:var(--font-display); font-size:26px; letter-spacing:.5px; }
.cs-pkg-tag { font-size:12px; color:var(--ink-46); margin-top:2px; }
.cs-pkg-total { font-family:var(--font-mono); font-weight:600; font-size:17px; text-align:right; }
.cs-pkg-save { font-family:var(--font-mono); font-size:10px; color:var(--accent); letter-spacing:.04em; margin-top:2px; text-align:right; }
/* spec plate — the engraved aluminium summary card. Deliberate material
contrast: the trailer is aluminium, so the plate reads as a literal
spec plate riveted to the build summary. Accent used only on rules. */
.cs-plate {
position:relative; background:linear-gradient(148deg,var(--plate-1),var(--plate-2) 46%,var(--plate-1));
color:var(--plate-ink); border-radius:var(--r-control); padding:22px 22px 18px;
box-shadow:0 1px 0 #fff inset, var(--shadow-lift); border:1px solid var(--plate-line);
}
.cs-plate .rivet { position:absolute; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#b7b2a6 55%,#8a8579); box-shadow:0 1px 1px rgba(0,0,0,.4); }
.cs-plate .rivet.tl{top:9px;left:9px} .cs-plate .rivet.tr{top:9px;right:9px}
.cs-plate .rivet.bl{bottom:9px;left:9px} .cs-plate .rivet.br{bottom:9px;right:9px}
.cs-plate-head { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--accent); padding-bottom:9px; margin:0 6px 12px; }
.cs-plate-brand { font-family:var(--font-display); font-size:26px; letter-spacing:.5px; }
.cs-plate-tag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-align:right; color:#55524b; text-transform:uppercase; line-height:1.4; }
.cs-plate-row { display:flex; justify-content:space-between; gap:10px; padding:5px 6px; border-bottom:1px dotted var(--plate-line); }
.cs-plate-row .k { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:#55524b; }
.cs-plate-row .v { font-family:var(--font-mono); font-size:12.5px; }
/* progress stepper */
.cs-progress { display:flex; gap:5px; }
.cs-pstep { flex:1; height:2px; background:var(--border-2); border-radius:2px; }
.cs-pstep.is-done { background:var(--accent); }
.cs-pstep.is-cur { background:linear-gradient(90deg,var(--accent) 50%,var(--border-2) 50%); }
/* sticky bottom nav bar (configurator) */
.cs-stickybar { position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(7,7,7,.92); backdrop-filter:blur(10px); border-top:1px solid var(--border); padding:14px 0; }
@media (max-width:900px) {
.btn-primary, .btn-secondary { padding:15px 28px; font-size:10.5px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }