/* ==========================================================================
Earnee Bikes — redesign
Manrope for text, Unbounded for numerals (odometer/technical feel).
========================================================================== */
/* Fonts load via in — @import here would block rendering. */
:root {
--canvas: #ECEDEF;
--surface: #FFFFFF;
--surface-2: #F5F6F7;
--ink: #0F1012;
--ink-2: #5A5D63;
--ink-3: #92969D;
--line: #E4E6E9;
--line-2: #EFF0F2;
--brand: #A10000;
--brand-hi: #C21818;
--brand-tint: #FBEDED;
--brand-deep: #6E0000;
--night: #0F1012;
--night-2: #191B1F;
--r-xl: 32px;
--r-lg: 24px;
--r-md: 16px;
--r-sm: 10px;
--shadow-sm: 0 1px 2px rgba(15,16,18,.05), 0 4px 12px rgba(15,16,18,.04);
--shadow-md: 0 2px 4px rgba(15,16,18,.05), 0 12px 32px rgba(15,16,18,.07);
--shadow-lg: 0 8px 24px rgba(15,16,18,.09), 0 32px 64px rgba(15,16,18,.10);
--pad: clamp(20px, 4vw, 56px);
--maxw: 1320px;
--num: 'Unbounded', 'Manrope', sans-serif;
/* the interface's signature curve — fast start, soft landing */
--ease: cubic-bezier(.22,1,.36,1);
/* film-grain tile for dark surfaces; SVG turbulence, no external asset */
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
/* a breath of light at the top of the canvas so the page isn't one flat grey */
background-color: var(--canvas);
background-image: linear-gradient(180deg, #F2F3F5 0%, var(--canvas) 460px);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
/* width/height attrs are presentational hints and would beat aspect-ratio.
:where() keeps this at zero specificity so component rules still win — a
plain `img[width][height]` selector silently zeroed out the logo. */
:where(img[width][height]) { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul, ol { padding: 0; margin: 0; list-style: none; } /* .steps is an — kill the default 40px marker inset */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
/* the brand ring vanishes on night surfaces — swap it for white there */
:is(.hero__box, .trust, .calc, .cta, .footer) :focus-visible { outline-color: #fff; }
input { accent-color: var(--brand); }
::selection { background: var(--brand); color: #fff; }
/* ---------- type scale ---------- */
.display {
font-size: clamp(32px, 4.1vw, 54px);
line-height: 1.07;
font-weight: 800;
letter-spacing: -.03em;
text-wrap: balance;
overflow-wrap: break-word; /* last-resort guard on the 390px viewport */
}
.h2 {
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -.032em;
text-wrap: balance;
overflow-wrap: break-word; /* long UA words (електровелосипеда) on 320px */
}
.h3 {
font-size: clamp(20px, 2vw, 26px);
line-height: 1.2;
font-weight: 700;
letter-spacing: -.022em;
overflow-wrap: break-word;
}
.eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brand);
}
.lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ink-2); font-weight: 500; }
.lead, .prop p, .step p, .faq__a p, .cta p { text-wrap: pretty; }
.muted { color: var(--ink-2); }
.num { font-family: var(--num); font-weight: 500; letter-spacing: -.02em; font-feature-settings: 'tnum'; }
/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 112px); }
.section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head p { margin-top: 16px; }
.stack-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 52px; padding-inline: 28px;
border-radius: 999px;
font-weight: 700; font-size: 15px; letter-spacing: -.01em;
white-space: nowrap;
transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { position: relative; overflow: hidden; background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hi); box-shadow: 0 10px 24px rgba(161,0,0,.26); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(161,0,0,.22); }
/* one quiet sheen across the primary action — never loops, never on reduced motion */
.btn--primary::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
transform: translateX(-135%);
}
@media (prefers-reduced-motion: no-preference) {
.btn--primary:hover::after { transform: translateX(135%); transition: transform .65s ease; }
}
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #26282D; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,16,18,.18); }
.btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { border: 1.5px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(15,16,18,.03); }
.btn--onnight { border: 1.5px solid rgba(255,255,255,.25); color: #fff; }
.btn--onnight:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--sm { height: 42px; padding-inline: 20px; font-size: 14px; }
.btn--block { width: 100%; }
.btn .arw { transition: transform .2s ease; }
.btn:hover .arw { transform: translateX(3px); }
/* pill / chip */
.pill {
display: inline-flex; align-items: center; gap: 7px;
height: 30px; padding-inline: 13px;
border-radius: 999px;
background: var(--brand-tint); color: var(--brand);
font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
}
.pill--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.pill--night { background: rgba(255,255,255,.1); color: #fff; }
/* ==========================================================================
Nav
========================================================================== */
.nav-shell { position: sticky; top: 0; z-index: 80; padding-top: 14px; }
.nav {
display: flex; align-items: center; gap: 12px;
height: 66px; padding: 0 10px 0 22px;
background: rgba(255,255,255,.82);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.7);
border-radius: 999px;
box-shadow: var(--shadow-md);
transition: box-shadow .3s ease, background .3s ease;
}
/* once the page moves, the pill presses a little harder on the canvas */
.nav-shell.is-scrolled .nav {
background: rgba(255,255,255,.9);
box-shadow: 0 2px 6px rgba(15,16,18,.06), 0 16px 40px rgba(15,16,18,.13);
}
.nav__logo { flex: none; }
.nav__logo img { height: 26px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav__menu > a {
padding: 9px 15px; border-radius: 999px;
font-size: 14.5px; font-weight: 600; color: var(--ink-2);
transition: background .16s ease, color .16s ease;
}
.nav__menu > a:hover { background: var(--surface-2); color: var(--ink); }
.nav__menu > a.is-active { background: var(--ink); color: #fff; }
.nav__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__tel {
display: flex; align-items: center; gap: 8px;
height: 38px; padding-inline: 12px; border-radius: 999px;
font-weight: 700; font-size: 14px; letter-spacing: -.01em; white-space: nowrap;
transition: background .16s ease, color .16s ease;
}
.nav__tel:hover { background: var(--brand-tint); color: var(--brand); }
.nav__tel svg { flex: none; }
/* number collapses to just the icon when the pill gets tight */
@media (max-width: 1279px) { .nav__tel span { display: none; } .nav__tel { padding-inline: 10px; } }
/* Segmented switch for the two product lines (bikes / cars).
Replaces a top-level menu item and makes the split explicit. */
.seg {
display: flex; gap: 2px; flex: none;
padding: 3px; border-radius: 999px; background: var(--surface-2);
}
.seg__i {
padding: 7px 15px; border-radius: 999px;
font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.seg__i:hover { color: var(--ink); }
.seg__i.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
/* Generic dropdown — used by the "Умови" group and the language picker */
.drop { position: relative; }
.drop__btn {
display: flex; align-items: center; gap: 6px;
padding: 9px 15px; border-radius: 999px;
font-size: 14.5px; font-weight: 600; color: var(--ink-2);
transition: background .16s ease, color .16s ease;
}
.drop__btn:hover { background: var(--surface-2); color: var(--ink); }
.drop__btn svg { transition: transform .2s ease; }
.drop.is-open > .drop__btn { background: var(--surface-2); color: var(--ink); }
.drop.is-open > .drop__btn svg { transform: rotate(180deg); }
.drop__btn--box {
height: 38px; padding-inline: 13px;
border: 1px solid var(--line); border-radius: 999px;
font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.drop__btn--box:hover { border-color: var(--ink); background: none; }
.drop__list {
position: absolute; top: calc(100% + 8px); left: 0;
min-width: 190px; padding: 6px; z-index: 10;
background: #fff; border: 1px solid var(--line);
border-radius: var(--r-md); box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.drop__list--right { left: auto; right: 0; min-width: 156px; }
.drop.is-open .drop__list { opacity: 1; visibility: visible; transform: none; }
.drop__list a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.drop__list a:hover { background: var(--surface-2); color: var(--ink); }
.drop__list a.is-active { color: var(--brand); }
/* --- mega dropdown: condition links + a graphic car promo banner --- */
.drop__promo {
position: relative; overflow: hidden; border-radius: 12px;
min-height: 172px; display: flex; align-items: flex-end;
background: #F4F5F7; border: 1px solid var(--line-2); isolation: isolate;
}
.drop__promo:hover { background: #F4F5F7; }
.drop__promo-media { position: absolute; inset: 0; z-index: 0; }
.drop__promo-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transform: scale(1.02); transition: transform .5s var(--ease);
}
.drop__promo:hover .drop__promo-media img { transform: scale(1.06); }
/* light wash on the left keeps the dark text crisp over the bright photo */
.drop__promo-glow {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(100deg, rgba(244,245,247,.96) 14%, rgba(244,245,247,.5) 46%, transparent 70%);
}
.drop__promo-txt { position: relative; z-index: 2; padding: 15px 16px; display: grid; gap: 3px; max-width: 74%; }
.drop__promo-txt small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.drop__promo-txt b { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.12; white-space: nowrap; }
.drop__promo-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--brand); }
.drop__promo-cta svg { transition: transform .25s var(--ease); }
.drop__promo:hover .drop__promo-cta svg { transform: translateX(3px); }
/* mega-panel link column */
.mega__eyebrow {
display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-3); margin: 2px 0 12px 4px;
}
.mega__links { display: grid; gap: 8px; }
.mega__link {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 13px 15px; border-radius: 14px;
background: rgba(255,255,255,.66); border: 1px solid rgba(15,16,18,.06);
transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mega__link:hover { background: #fff; border-color: var(--line); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mega__link-txt { display: grid; gap: 2px; min-width: 0; }
.mega__link-txt b { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.mega__link-txt small { font-size: 12px; color: var(--ink-3); font-weight: 500; line-height: 1.3; }
.mega__link-arw { flex: none; color: var(--ink-3); opacity: 0; transform: translateX(-5px); transition: opacity .18s ease, transform .18s ease, color .18s ease; }
.mega__link-arw svg { width: 16px; height: 16px; display: block; }
.mega__link:hover .mega__link-arw { opacity: 1; transform: none; color: var(--brand); }
/* full-width frosted-glass mega panel, aligned to the nav pill */
@media (min-width: 1024px) {
.nav--has-mega { position: relative; }
.drop--mega { position: static; }
.drop--mega .drop__list {
position: absolute; top: calc(100% + 12px); left: 0; right: 0; width: auto; min-width: 0;
display: grid; grid-template-columns: 1.02fr 1fr; gap: 20px;
padding: 20px; border-radius: 26px;
background:
linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.1) 55%),
rgba(255,255,255,.93);
-webkit-backdrop-filter: blur(30px) saturate(180%);
backdrop-filter: blur(30px) saturate(180%);
border: 1px solid rgba(255,255,255,.9);
box-shadow: 0 2px 8px rgba(15,16,18,.05), 0 28px 64px rgba(15,16,18,.17);
transform-origin: top center;
}
.drop--mega .mega__links { grid-template-columns: 1fr 1fr; }
.drop--mega .drop__promo { min-height: 100%; }
}
@media (max-width: 1023px) {
/* drawer: flatten to a stacked list like the other nav items */
.mega__eyebrow { margin: 6px 0 6px 14px; }
.mega__link { background: none; border: none; padding: 12px 14px; border-radius: var(--r-sm); }
.mega__link:hover { background: var(--surface-2); transform: none; }
.mega__link-arw { display: none; }
.drop__promo { min-height: 128px; margin-top: 8px; }
.drop__promo-txt { padding: 13px 14px; }
}
/* JS clones the switch, CTA and phone into .nav__menu for the mobile drawer —
on desktop the originals are in the pill, so the clones stay hidden. */
@media (min-width: 1024px) {
.nav__menu > .seg,
.nav__menu > .btn,
.nav__menu > .nav__menu-tel { display: none; }
}
.burger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); }
.burger span { display: block; width: 17px; height: 1.8px; background: var(--ink); margin: 3.5px auto; border-radius: 2px; transition: .2s; }
/* ==========================================================================
Hero
========================================================================== */
.hero { padding-top: 18px; }
.hero__box {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--night);
min-height: min(78vh, 700px);
display: flex; align-items: flex-end;
isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__box::after {
content: ''; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(46% 42% at 12% 100%, rgba(193,24,24,.20), transparent 72%),
linear-gradient(180deg, rgba(15,16,18,.72) 0%, rgba(15,16,18,.30) 38%, rgba(15,16,18,.86) 100%),
linear-gradient(96deg, rgba(15,16,18,.86) 8%, rgba(15,16,18,.12) 62%);
}
/* film grain on every night surface — texture, not decoration */
.hero__box::before, .calc::before, .cta::after, .footer::after, .about__media::after {
content: ''; position: absolute; inset: 0; z-index: 3;
border-radius: inherit;
background-image: var(--noise); background-size: 140px;
opacity: .05; mix-blend-mode: overlay;
pointer-events: none;
}
.hero__box::before { z-index: 0; }
.hero__inner {
position: relative; width: 100%;
display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 40px; align-items: end;
padding: clamp(28px, 4vw, 52px);
}
.hero__copy { color: #fff; max-width: 700px; padding-bottom: 6px; }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 9px;
font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,255,255,.72); margin-bottom: 22px;
}
.hero__eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--brand-hi); }
.hero__copy h1 { color: #fff; margin-bottom: 22px; }
.hero__copy h1 em { font-style: normal; color: #FF6B6B; }
.hero__copy p { color: rgba(255,255,255,.78); font-size: clamp(15px,1.25vw,17.5px); max-width: 480px; font-weight: 500; }
.hero__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero__meta { display: flex; gap: 34px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.hero__meta div span { display: block; font-family: var(--num); font-size: clamp(20px,2.2vw,27px); font-weight: 600; color: #fff; letter-spacing: -.02em; }
.hero__meta div small { font-size: 12.5px; color: rgba(255,255,255,.55); font-weight: 600; }
/* floating bike card */
.hero__card {
background: #fff; border-radius: var(--r-lg); padding: 20px;
box-shadow: var(--shadow-lg);
animation: floatIn .7s var(--ease) both;
}
@keyframes floatIn { from { opacity: 0; transform: translateY(22px); } }
/* directional slide when the slider moves — JS picks the side */
@keyframes cardSwapR { from { opacity: 0; transform: translateX(28px); } }
@keyframes cardSwapL { from { opacity: 0; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .hero__card { animation: none !important; } }
.hero__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero__card-top h3 { font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.hero__card-top p { font-size: 13px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.hero__card figure { margin: 6px 0 4px; background: var(--surface-2); border-radius: var(--r-md); overflow: hidden; }
.hero__card figure img { width: 100%; height: auto; aspect-ratio: 16/11; object-fit: contain; mix-blend-mode: multiply; }
.hero__card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 14px; }
.hero__card-price b { font-family: var(--num); font-size: 26px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.hero__card-price b.is-from { font-size: 21px; }
.hero__card-price small { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.hero__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.hero__count { font-family: var(--num); font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; }
.hero__count b { color: #fff; }
.hero__arrows { display: flex; gap: 8px; }
.hero__arrows button {
width: 42px; height: 42px; border-radius: 999px;
border: 1.5px solid rgba(255,255,255,.28); color: #fff;
display: grid; place-items: center; transition: .18s;
}
.hero__arrows button:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero__arrows button:active { transform: scale(.92); }
/* ==========================================================================
Spec strip — shared by every bike card
========================================================================== */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.specs div { padding: 13px 6px 3px; text-align: center; }
.specs div + div { border-left: 1px solid var(--line-2); }
.specs b { display: block; font-family: var(--num); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.specs small { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .01em; }
/* ==========================================================================
Trust marquee
========================================================================== */
/* light partner strip — chips scroll across a soft grey band */
.trust { position: relative; background: var(--surface-2); border-block: 1px solid var(--line-2); padding-block: 16px; overflow: hidden; }
.trust::before, .trust::after {
content: ''; position: absolute; top: 0; bottom: 0; width: clamp(36px, 8vw, 130px);
z-index: 2; pointer-events: none;
}
.trust::before { left: 0; background: linear-gradient(90deg, var(--surface-2), transparent); }
.trust::after { right: 0; background: linear-gradient(270deg, var(--surface-2), transparent); }
.trust__track { display: flex; align-items: center; gap: 14px; width: max-content; animation: slide 40s linear infinite; }
@media (prefers-reduced-motion: reduce) { .trust__track { animation: none; } }
.trust:hover .trust__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.trust__item { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
/* partner chips — real logos where available, clean wordmarks otherwise */
.pmark {
display: inline-flex; align-items: center; gap: 7px;
height: 42px; padding-inline: 18px; border-radius: 999px;
background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
white-space: nowrap;
}
.pmark__logo { height: 20px; width: auto; display: block; }
.pmark__word { font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.pmark__word em { font-style: normal; font-weight: 600; color: var(--ink-3); }
.trust__label { color: var(--ink-3); font-weight: 600; font-size: 13.5px; }
/* ==========================================================================
Value props
========================================================================== */
.props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prop {
background: var(--surface); border-radius: var(--r-lg); padding: 30px;
border: 1px solid var(--line-2);
transition: transform .22s ease, box-shadow .22s ease;
}
.prop:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prop__ico {
width: 50px; height: 50px; border-radius: var(--r-md);
background: var(--brand-tint); color: var(--brand);
display: grid; place-items: center; margin-bottom: 20px;
transition: transform .3s var(--ease);
}
.prop:hover .prop__ico { transform: scale(1.07) rotate(-3deg); }
.prop h3 { font-size: 18.5px; font-weight: 800; letter-spacing: -.022em; margin-bottom: 9px; }
.prop p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
/* ==========================================================================
Catalog
========================================================================== */
.cat__toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
height: 40px; padding-inline: 18px; border-radius: 999px;
border: 1.5px solid var(--line); background: #fff;
font-size: 14px; font-weight: 700; color: var(--ink-2);
transition: .16s;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip:active, .fchip:active { transform: scale(.96); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat__count { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.cat__count b { font-family: var(--num); color: var(--ink); }
/* dense flow so an expanded (full-row) card doesn't leave holes — later
cards backfill the gaps, like tiles sliding into place. */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; grid-auto-flow: row dense; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
position: relative; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-lg); padding: 16px;
transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, border-color .24s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__title { min-width: 0; }
.card__title h3 { font-size: 19px; font-weight: 800; letter-spacing: -.026em; }
/* one line keeps every card in a row the same height without a tall gap */
.card__title p {
font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 1px;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; min-height: 1.5em;
}
.card__price { text-align: right; flex: none; }
.card__price b { display: block; font-family: var(--num); font-size: 19px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.card__price s { font-size: 12.5px; color: var(--ink-3); text-decoration-thickness: 1px; }
.card__media {
position: relative; margin: 4px 0 2px;
border-radius: var(--r-md); overflow: hidden;
background: #fff; /* white so the studio photo blends into the card */
}
/* Renders are cropped to their content bbox, so a 4:3 box keeps the bike
large while cutting ~17% of card height versus the old 10:9. */
.card__media img {
width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain;
mix-blend-mode: multiply;
transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.card:hover .card__media img { transform: scale(1.045); }
/* Card-wide click target lives on the title link's ::after, so the footer
buttons remain separate targets. An overlay used to swallow them. */
.card__title-link { color: inherit; }
.card__title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card__title-link:hover { color: var(--brand); }
.card:focus-within { box-shadow: var(--shadow-md); }
.card__title-link:focus-visible { outline: none; }
.card:has(.card__title-link:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.card__foot { position: relative; z-index: 2; }
.card__weekly, .card__badge { z-index: 2; }
.card__badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
height: 27px; padding-inline: 12px; border-radius: 999px;
background: var(--brand); color: #fff;
font-size: 11px; font-weight: 800; letter-spacing: .09em;
display: inline-flex; align-items: center;
pointer-events: none; /* a label, not a target — the card link works beneath it */
}
.card__weekly {
position: absolute; right: 12px; bottom: 12px; z-index: 2;
height: 32px; padding-inline: 13px; border-radius: 999px;
background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
display: inline-flex; align-items: center; gap: 5px;
font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s ease;
pointer-events: none; /* same: price label must not shadow the card link */
}
.card:hover .card__weekly { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__weekly b { font-family: var(--num); font-weight: 600; }
/* monthly payment — the accent of a car card: bigger, brand-red, own the eye */
.card__weekly--from {
height: 40px; padding-inline: 16px; gap: 7px;
background: #fff; box-shadow: var(--shadow-md), 0 0 0 1.5px rgba(161,0,0,.14) inset;
font-size: 12.5px; color: var(--ink-3);
}
.card__weekly--from svg { color: var(--brand); width: 15px; height: 15px; }
.card__weekly--from b { font-size: 17px; color: var(--brand); letter-spacing: -.02em; }
.card__foot { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.card__foot .btn { flex: 1; }
/* ---- click-to-expand: a card opens in place with more info + glowing CTA ---- */
.card__more { display: none; }
.card__head, .card__media { cursor: pointer; }
.card--open {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
grid-template-areas: "media head" "media more" "media foot";
grid-template-rows: auto 1fr auto;
column-gap: clamp(20px, 3vw, 40px);
box-shadow: var(--shadow-lg); border-color: transparent;
}
.card--open .card__head { grid-area: head; }
.card--open .card__media { grid-area: media; align-self: center; margin: 0; }
.card--open .specrow { display: none; }
.card--open .card__more { grid-area: more; display: block; align-self: start; }
.card--open .card__foot { grid-area: foot; }
.card--open .card__title h3 { font-size: 22px; }
.card--open .card__media img { transform: none; }
.card__more-sum { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 4px 0 14px; }
/* minmax(0,…) so a long value ("podwójny akumulator") cannot push the track
past the card; the rows shrink and wrap instead of overflowing. */
.card__more-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; }
.card__more-specs > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
.card__more-specs dt { font-size: 13px; color: var(--ink-3); font-weight: 600; min-width: 0; }
.card__more-specs dd { font-size: 13.5px; font-weight: 700; color: var(--ink); font-family: var(--num); min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* CTA lights up while expanded so the next step is obvious */
.card--open .card__foot .btn--primary { animation: ctaPulse 1.5s ease-in-out infinite; }
.card--open .card__foot .btn--ghost { border-color: var(--ink); color: var(--ink); }
@keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(161,0,0,.34); } 50% { box-shadow: 0 0 0 7px rgba(161,0,0,0); } }
@media (prefers-reduced-motion: reduce) { .card--open .card__foot .btn--primary { animation: none; box-shadow: 0 0 0 3px rgba(161,0,0,.22); } }
@media (max-width: 640px) {
.card--open { grid-template-columns: 1fr; grid-template-areas: "head" "media" "more" "foot"; grid-template-rows: none; }
.card--open .card__media { align-self: stretch; }
.card--open .card__more-specs { grid-template-columns: 1fr; }
}
/* featured — tilted, gradient, like the CARZONE hero card */
.card--featured {
grid-column: span 2;
background: linear-gradient(150deg, #FFE9E9 0%, #F7F1F1 52%, #F1F2F4 100%);
border-color: transparent;
box-shadow: var(--shadow-lg);
}
.card--featured .card__media { background: none; }
.card--featured .card__media img { height: auto; aspect-ratio: 16/9; object-fit: contain; }
.card--featured .card__title h3 { font-size: 24px; }
.card--featured .card__price b { font-size: 23px; }
.card--featured .specs b { font-size: 17px; }
/* Featured card goes horizontal so it matches the height of the normal cards
beside it — a taller card left an empty well in its neighbour. */
@media (min-width: 981px) {
.card--featured {
display: grid;
grid-template-columns: 1.06fr .94fr;
grid-template-rows: auto 1fr auto;
column-gap: 24px;
transform: rotate(-1.1deg);
}
.card--featured:hover { transform: rotate(-1.1deg) translateY(-4px); }
.card--featured .card__media { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0; }
.card--featured .card__media img { aspect-ratio: 4/3; }
.card--featured .card__head { grid-column: 2; grid-row: 1; padding-top: 4px; }
.card--featured .specs { grid-column: 2; grid-row: 2; align-self: center; border-top: none; }
.card--featured .card__foot { grid-column: 2; grid-row: 3; padding-top: 0; }
.card--featured .card__title p { -webkit-line-clamp: 2; min-height: 0; font-size: 13.5px; }
}
/* ==========================================================================
Filter sidebar (catalog page)
========================================================================== */
.shop { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 26px; align-items: start; }
.filters {
position: sticky; top: 96px;
background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-lg); padding: 24px;
box-shadow: var(--shadow-sm); /* sticky panels float above the scroll */
}
.filters__head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.filters__head h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.fgroup + .fgroup { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.fgroup__t { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.fgroup__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fchip {
height: 34px; padding-inline: 14px; border-radius: 999px;
border: 1.5px solid var(--line); background: #fff;
font-size: 13.5px; font-weight: 700; color: var(--ink-2); transition: .16s;
}
.fchip:hover { border-color: var(--ink-3); }
.fchip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.check { display: flex; align-items: center; gap: 11px; padding: 7px 0; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line);
display: grid; place-items: center; flex: none; transition: .16s;
}
.check__box svg { opacity: 0; transform: scale(.6); transition: .16s; color: #fff; }
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .check__box svg { opacity: 1; transform: none; }
.check:hover { color: var(--ink); }
.check input:focus-visible + .check__box { outline: 2px solid var(--brand); outline-offset: 2px; }
.range__vals { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.range__vals span {
flex: 1; height: 40px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
display: grid; place-items: center; font-family: var(--num); font-size: 13.5px; font-weight: 500;
}
.range__vals i { color: var(--ink-3); font-style: normal; }
input[type=range] { width: 100%; accent-color: var(--brand); margin-top: 4px; }
.hist { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-bottom: 6px; }
.hist span { flex: 1; background: var(--line); border-radius: 7px 7px 4px 4px; transition: background .2s; }
.hist span.is-on { background: var(--ink); }
/* ==========================================================================
Steps
========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step {
position: relative; background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-lg); padding: 28px 24px 26px;
}
.step__n {
font-family: var(--num); font-size: 13px; font-weight: 600;
color: var(--brand); margin-bottom: 18px; display: block;
}
.step h3 { font-size: 17.5px; font-weight: 800; letter-spacing: -.022em; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.step::after {
content: ''; position: absolute; top: 42px; right: -12px; z-index: 2;
width: 8px; height: 8px; border-top: 1.5px solid var(--line); border-right: 1.5px solid var(--line);
rotate: 45deg;
}
.step:last-child::after { display: none; }
/* ==========================================================================
About
========================================================================== */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; align-items: stretch; }
/* city backdrop + courier cut-out, layered the way the original composition was built */
.about__media { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--night); min-height: 440px; }
.about__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.about__person {
position: absolute; left: 50%; bottom: -2%; translate: -50% 0;
height: 92%; width: auto; max-width: none;
filter: drop-shadow(0 24px 48px rgba(15,16,18,.28));
}
.about__panel {
background: var(--surface); border-radius: var(--r-xl);
padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: center;
}
.about__panel h2 { margin-block: 14px 18px; }
.about__list { margin-top: 26px; display: grid; gap: 2px; }
.about__list li { display: flex; gap: 13px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15px; font-weight: 600; }
.about__list svg { color: var(--brand); flex: none; margin-top: 3px; }
/* ==========================================================================
Partners
========================================================================== */
.partners { display: flex; flex-wrap: wrap; gap: 10px; }
.partner {
height: 52px; padding-inline: 24px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--line-2);
display: inline-flex; align-items: center;
font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-2);
transition: .2s;
}
.partner:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-2px); }
/* ==========================================================================
Calculator
========================================================================== */
.calc {
position: relative; overflow: hidden;
background:
linear-gradient(90deg, rgba(12,13,15,.95) 0%, rgba(12,13,15,.7) 44%, rgba(12,13,15,.42) 100%),
radial-gradient(56% 72% at 88% 0%, rgba(193,24,24,.18), transparent 62%),
url('../img/bg/calc.webp') center/cover no-repeat,
var(--night);
color: #fff; border-radius: var(--r-xl);
padding: clamp(28px, 3.6vw, 52px);
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center;
}
.calc h2 { color: #fff; }
.calc p { color: rgba(255,255,255,.66); margin-top: 14px; font-size: 15.5px; }
.calc__panel {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
-webkit-backdrop-filter: blur(18px) saturate(130%);
backdrop-filter: blur(18px) saturate(130%);
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--r-lg); padding: 26px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.4);
}
.calc__row { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.calc__row:last-of-type { border: none; }
.calc__row span { font-size: 14.5px; color: rgba(255,255,255,.66); font-weight: 600; }
.calc__row b { font-family: var(--num); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.calc__total { margin-top: 18px; padding-top: 20px; border-top: 1.5px solid rgba(255,255,255,.2); display: flex; align-items: baseline; justify-content: space-between; }
.calc__total span { font-size: 15px; font-weight: 700; }
.calc__total b { font-family: var(--num); font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: #FF6B6B; }
.calc select {
width: 100%; height: 50px; padding-inline: 16px; margin-bottom: 18px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
border-radius: var(--r-sm); color: #fff; font-weight: 700; font-size: 15px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
transition: border-color .16s ease, background-color .16s ease;
}
.calc select:hover { border-color: rgba(255,255,255,.32); }
.calc select option { color: var(--ink); }
/* ==========================================================================
FAQ
========================================================================== */
.faq { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items: start; }
.faq__list { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.faq__item + .faq__item { border-top: 1px solid var(--line-2); }
.faq__q {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 22px 26px; text-align: left;
font-size: 16.5px; font-weight: 700; letter-spacing: -.018em;
transition: color .16s;
}
.faq__q:hover { color: var(--brand); }
.faq__ico { position: relative; flex: none; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--line); display: grid; place-items: center; transition: .22s; }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; background: var(--ink); border-radius: 2px; }
.faq__ico::before { width: 11px; height: 1.6px; }
.faq__ico::after { width: 1.6px; height: 11px; transition: transform .22s ease; }
.faq__item.is-open .faq__ico { background: var(--ink); border-color: var(--ink); }
.faq__item.is-open .faq__ico::before, .faq__item.is-open .faq__ico::after { background: #fff; }
.faq__item.is-open .faq__ico::after { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 26px 24px; font-size: 15px; color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
/* text settles in a beat after the panel opens */
@media (prefers-reduced-motion: no-preference) {
.faq__a p { opacity: 0; translate: 0 4px; transition: opacity .28s ease, translate .28s var(--ease); }
.faq__item.is-open .faq__a p { opacity: 1; translate: none; transition-delay: .08s; }
}
/* ==========================================================================
CTA
========================================================================== */
.cta {
position: relative; overflow: hidden;
background:
radial-gradient(90% 130% at 50% -30%, rgba(255,255,255,.17), transparent 55%),
radial-gradient(120% 150% at 50% -20%, var(--brand-hi) 0%, var(--brand) 52%, #870000 100%);
color: #fff; border-radius: var(--r-xl);
padding: clamp(36px, 5vw, 72px);
text-align: center;
}
/* ghost wordmark peeking over the bottom edge — the watermark language the
product cards speak, kept quiet enough not to fight the headline */
.cta::before {
content: 'EARNEE'; position: absolute; left: 50%; bottom: -.22em; translate: -50% 0;
font-family: var(--num); font-weight: 600;
font-size: clamp(80px, 13vw, 180px); letter-spacing: -.02em; line-height: 1;
color: rgba(255,255,255,.045); white-space: nowrap;
pointer-events: none; user-select: none;
}
.cta h2 { color: #fff; position: relative; }
.cta p { color: rgba(255,255,255,.8); margin: 16px auto 30px; max-width: 520px; position: relative; font-size: 16.5px; }
.cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
/* ==========================================================================
Footer
========================================================================== */
.footer {
position: relative;
background: radial-gradient(90% 420px at 50% 0%, #16181C, var(--night) 82%);
color: #fff; margin-top: clamp(40px,6vw,80px);
}
.footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(44px,5vw,68px); }
.footer__logo img { height: 26px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer__top p { color: rgba(255,255,255,.5); font-size: 14px; max-width: 300px; line-height: 1.6; }
.footer__phone { display: inline-block; margin-top: 20px; font-family: var(--num); font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.footer__phone:hover { color: #FF6B6B; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.14); transition: .18s;
}
.footer__social a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.footer h4 { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 18px; }
.footer__col a { display: block; padding: 6px 0; font-size: 14.5px; color: rgba(255,255,255,.7); font-weight: 500; transition: color .16s, translate .22s var(--ease); }
.footer__col a:hover { color: #fff; translate: 3px 0; }
.footer__form { display: flex; gap: 8px; margin-top: 16px; }
.footer__form input {
flex: 1; height: 48px; padding-inline: 16px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
border-radius: 999px; color: #fff; font-size: 14.5px; font-weight: 500;
}
.footer__form input::placeholder { color: rgba(255,255,255,.4); }
.footer__form input:focus { outline: none; border-color: rgba(255,255,255,.4); }
.footer__bottom {
display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
padding-block: 26px; border-top: 1px solid rgba(255,255,255,.1);
font-size: 13.5px; color: rgba(255,255,255,.45);
}
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
/* ==========================================================================
Product page
========================================================================== */
.bike { display: grid; grid-template-columns: minmax(0,1.15fr) 400px; gap: 26px; align-items: start; }
.bike__media {
/* lit from above-centre so the render sits in a soft pool of light */
background: radial-gradient(78% 64% at 50% 40%, #FAFBFC 0%, #F1F2F4 56%, #E7E8EA 100%);
border-radius: var(--r-xl);
padding: 30px; position: relative; overflow: hidden;
}
.bike__media img { width: 100%; height: auto; aspect-ratio: 1/.78; object-fit: contain; mix-blend-mode: multiply; position: relative; }
.bike__wm {
position: absolute; left: 50%; top: 50%; translate: -50% -50%;
font-family: var(--num); font-size: clamp(72px,12vw,190px); font-weight: 600;
color: rgba(15,16,18,.04); letter-spacing: -.055em; white-space: nowrap; user-select: none;
}
.bike__buy { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 30px; position: sticky; top: 96px; box-shadow: var(--shadow-sm); }
.bike__buy h1 { font-size: clamp(26px,3vw,34px); font-weight: 800; letter-spacing: -.032em; line-height: 1.08; }
.bike__buy > p { color: var(--ink-2); font-size: 15px; margin-top: 10px; }
.bike__weekly { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 6px; }
.bike__weekly b { font-family: var(--num); font-size: 44px; font-weight: 600; letter-spacing: -.04em; }
.bike__weekly span { font-size: 15px; color: var(--ink-2); font-weight: 700; }
.bike__tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 22px 0; }
.bike__tile { background: var(--surface-2); border-radius: var(--r-md); padding: 14px 12px; text-align: center; }
.bike__tile b { display: block; font-family: var(--num); font-size: 15.5px; font-weight: 600; letter-spacing: -.025em; }
.bike__tile small { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.bike__sep { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.bike__sep::before, .bike__sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.bike__full { display: flex; align-items: baseline; gap: 10px; justify-content: center; margin-bottom: 16px; }
.bike__full b { font-family: var(--num); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.bike__full s { color: var(--ink-3); font-size: 14px; }
.bike__note { margin-top: 18px; padding: 14px 16px; background: var(--brand-tint); border-radius: var(--r-md); font-size: 13px; color: var(--brand-deep); font-weight: 600; line-height: 1.5; }
.spectable { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.spectable__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 15px 24px; font-size: 14.5px; transition: background .16s ease; }
.spectable__row:hover { background: var(--surface-2); }
.spectable__row + .spectable__row { border-top: 1px solid var(--line-2); }
.spectable__row dt { color: var(--ink-2); font-weight: 600; }
.spectable__row dd { margin: 0; font-weight: 700; text-align: right; }
/* ==========================================================================
Forms — order page
========================================================================== */
.order { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 26px; align-items: start; }
.form-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(24px,3vw,40px); }
.fieldset + .fieldset { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line-2); }
.fieldset__t { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fgrid--1 { grid-template-columns: 1fr; }
.field { display: block; }
.field > span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.field input, .field select {
width: 100%; height: 52px; padding-inline: 16px;
background: var(--surface-2); border: 1.5px solid transparent; border-radius: var(--r-sm);
font-size: 15px; font-weight: 600; color: var(--ink);
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field input::placeholder { color: var(--ink-3); font-weight: 500; }
.field input:hover, .field select:hover { background: #F0F1F3; }
.field input:focus, .field select:focus {
outline: none; background: #fff; border-color: var(--ink);
box-shadow: 0 0 0 4px rgba(15,16,18,.06);
}
.field select {
appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230F1012' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
}
.field--phone { position: relative; }
.field--phone .pre {
position: absolute; left: 16px; bottom: 0; height: 52px;
display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--ink-2);
pointer-events: none;
}
.field--phone input { padding-left: 58px; }
.field--err input, .field--err select { border-color: var(--brand); background: #fff; }
.field__msg { display: none; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand); }
.field--err .field__msg { display: block; }
/* a short physical "no" when a field fails validation */
@media (prefers-reduced-motion: no-preference) {
.field--err { animation: fieldShake .32s ease; }
}
@keyframes fieldShake {
20% { transform: translateX(-5px); }
50% { transform: translateX(4px); }
80% { transform: translateX(-2px); }
}
.consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin-top: 6px; }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent .check__box { margin-top: 2px; }
.consent span { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); font-weight: 500; }
.consent input:focus-visible + .check__box { outline: 2px solid var(--brand); outline-offset: 2px; }
/* sticky order summary */
.summary { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 24px; position: sticky; top: 96px; box-shadow: var(--shadow-sm); }
.summary__bike { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.summary__bike img { width: 84px; height: 76px; object-fit: contain; mix-blend-mode: multiply; background: var(--surface-2); border-radius: var(--r-sm); flex: none; }
.summary__bike h3 { font-size: 17px; font-weight: 800; letter-spacing: -.024em; }
.summary__bike p { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; font-size: 14px; }
.summary__row + .summary__row { border-top: 1px solid var(--line-2); }
.summary__row span { color: var(--ink-2); font-weight: 600; }
.summary__row b { font-family: var(--num); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 16px; padding-top: 18px; border-top: 1.5px solid var(--line); }
.summary__total span { font-size: 14px; font-weight: 700; }
.summary__total b { font-family: var(--num); font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--brand); }
.summary__note { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; line-height: 1.5; }
/* success screen */
.done { max-width: 620px; margin-inline: auto; text-align: center; padding-block: clamp(40px,7vw,90px); }
.done__ico { width: 84px; height: 84px; margin: 0 auto 28px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
@media (prefers-reduced-motion: no-preference) {
.done__ico { animation: donePop .6s var(--ease) .08s backwards; }
}
@keyframes donePop { from { opacity: 0; transform: scale(.55); } }
.done p { margin: 16px auto 30px; max-width: 460px; }
.done__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ==========================================================================
Reveal on scroll
========================================================================== */
/* Scoped to .js so content stays visible if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Grids don't fade as one slab — the children cascade in.
Animation (not transition) so card hover transforms stay untouched;
`backwards` fill so nothing pins a transform after it ends. */
.js :is(.grid, .props, .steps).reveal { opacity: 1; transform: none; transition: none; }
.js :is(.grid, .props, .steps).reveal:not(.is-in) > * { opacity: 0; }
.js :is(.grid, .props, .steps).reveal.is-in > * { animation: cardIn .65s var(--ease) backwards; }
.js :is(.grid, .props, .steps).reveal.is-in > :nth-child(2) { animation-delay: .07s; }
.js :is(.grid, .props, .steps).reveal.is-in > :nth-child(3) { animation-delay: .14s; }
.js :is(.grid, .props, .steps).reveal.is-in > :nth-child(4) { animation-delay: .21s; }
.js :is(.grid, .props, .steps).reveal.is-in > :nth-child(5) { animation-delay: .28s; }
.js :is(.grid, .props, .steps).reveal.is-in > :nth-child(6) { animation-delay: .34s; }
.js :is(.grid, .props, .steps).reveal.is-in > :nth-child(n+7) { animation-delay: .4s; }
}
@keyframes cardIn { from { opacity: 0; transform: translateY(24px); } }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1180px) {
.hero__inner { grid-template-columns: minmax(0,1fr) 320px; }
.footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
.footer__news { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
.nav { position: relative; }
/* hide the pill's own copies only — the drawer clones must survive */
.nav__right .nav__tel, .nav > .seg { display: none; }
.burger { display: block; }
/* menu becomes a drawer under the pill; the switch, CTA and phone
are cloned in by JS so nothing is lost when the pill sheds them */
.nav__menu {
position: absolute; top: calc(100% + 10px); left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 2px;
margin: 0; padding: 10px;
background: #fff; border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu > a, .nav__menu .drop__btn {
padding: 12px 14px; font-size: 15.5px; font-weight: 600; border-radius: var(--r-sm); width: 100%;
}
.nav__menu > a:active { background: var(--surface-2); }
/* dropdown flattens into the list on mobile */
.nav__menu .drop { position: static; }
.nav__menu .drop__btn { display: none; }
.nav__menu .drop__list {
/* inherit the drawer's visibility — forcing 'visible' un-hid the closed
drawer's links, which then captured taps over the page content */
position: static; opacity: 1; visibility: inherit; transform: none;
border: none; box-shadow: none; padding: 0; min-width: 0; background: none;
}
.nav__menu .drop__list a { padding: 12px 14px; font-size: 15.5px; font-weight: 600; border-radius: var(--r-sm); }
/* product-line switch: full-width segmented control at the top of the drawer */
.nav__menu .seg { margin: 2px 0 8px; padding: 4px; background: var(--surface-2); }
.nav__menu .seg__i { flex: 1; justify-content: center; padding: 12px 15px; font-size: 15px; }
/* CTA — one clear primary action. Override the menu-link colour that would
otherwise tint the button text grey (same specificity, declared earlier). */
.nav__menu > .btn--primary { margin-top: 8px; height: 50px; font-size: 15.5px; color: #fff; }
.nav__menu > .btn--ghost, .nav__menu > .btn--light { margin-top: 8px; height: 50px; font-size: 15.5px; }
/* phone row — icon + full number, tappable, its own quiet row */
.nav__menu .nav__menu-tel {
display: flex; align-items: center; gap: 10px;
margin-top: 8px; padding: 14px 14px 4px;
border-top: 1px solid var(--line-2);
color: var(--brand); font-weight: 700; font-size: 16px; letter-spacing: -.01em;
justify-content: flex-start;
}
.nav__menu .nav__menu-tel span { display: inline !important; } /* the pill hides the number; the drawer shows it */
.nav__menu .nav__menu-tel svg { flex: none; }
.nav.is-open .burger span:nth-child(1) { transform: translateY(5.3px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { opacity: 0; }
.nav.is-open .burger span:nth-child(3) { transform: translateY(-5.3px) rotate(-45deg); }
.hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero__card { max-width: 420px; }
.grid, .grid--2, .props, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card--featured { grid-column: span 2; }
.about, .calc, .faq { grid-template-columns: minmax(0, 1fr); }
.shop { grid-template-columns: minmax(0, 1fr); }
.filters { position: static; }
.order { grid-template-columns: minmax(0, 1fr); }
.summary { position: static; order: -1; }
.bike { grid-template-columns: minmax(0, 1fr); }
.bike__buy { position: static; }
.step::after { display: none; }
}
@media (max-width: 620px) {
/* the pill runs out of room — the CTA lives in the drawer instead */
.nav { padding-left: 16px; }
.nav__right .btn--primary { display: none; }
.nav__logo img { height: 23px; }
}
@media (max-width: 640px) {
.grid, .grid--2, .props, .steps, .fgrid { grid-template-columns: minmax(0, 1fr); }
.card--featured { grid-column: span 1; }
.footer__top { grid-template-columns: 1fr; gap: 32px; }
.hero__meta { gap: 20px; flex-wrap: wrap; }
.bike__tiles { grid-template-columns: 1fr; }
.spectable__row { grid-template-columns: 1fr; gap: 4px; }
.spectable__row dd { text-align: left; }
}
/* ==========================================================================
Partner landing
========================================================================== */
.hero__inner--partner { align-items: center; }
.hero__box--partner { min-height: min(70vh, 620px); }
.subsidy {
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-radius: var(--r-lg); padding: 28px; color: #fff;
}
.subsidy b {
display: block; margin-top: 18px;
font-size: clamp(44px, 6vw, 68px); font-weight: 600;
letter-spacing: -.04em; line-height: 1; color: #FF6B6B;
}
.subsidy > span:not(.pill) { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.7); }
.subsidy p { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); }
.subsidy--promo h3 { margin-top: 16px; font-size: 21px; font-weight: 800; letter-spacing: -.026em; }
.subsidy--promo p { border: none; padding-top: 0; margin-top: 10px; }
.subsidy__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 700; color: #FF6B6B; }
.subsidy__link:hover { color: #fff; }
/* weekly pill showing the partner subsidy applied */
.card__weekly--sub s { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.card__weekly--sub b { color: var(--brand); }
/* ==========================================================================
Skip link
========================================================================== */
.skip {
position: absolute; left: 16px; top: -100px; z-index: 200;
padding: 12px 20px; border-radius: 999px;
background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
transition: top .18s ease;
}
.skip:focus { top: 16px; }
main:focus { outline: none; }
/* ==========================================================================
Cookie banner — required in the EU, and the original site had one
========================================================================== */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: 16px; }
.cookie[hidden] { display: none; }
.cookie__box {
max-width: 900px; margin-inline: auto;
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: 20px 24px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
animation: cookieUp .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cookieUp { from { opacity: 0; transform: translateY(14px); } }
.cookie h3 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 5px; }
.cookie p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
.cookie p a { color: var(--brand); font-weight: 700; text-decoration: underline; }
.cookie__btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* .btn sets display, which would otherwise defeat the [hidden] attribute */
.btn[hidden] { display: none !important; }
/* per-category consent toggles, revealed by "Налаштувати" */
.cookie__opts { display: flex; gap: 20px; flex-wrap: wrap; width: 100%; margin: 12px 0 2px; }
.cookie__opts[hidden] { display: none; }
.cookie__opt { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cookie__opt input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cookie__box { animation: none; } }
/* ==========================================================================
Empty / error state
========================================================================== */
.blank { grid-column: 1 / -1; padding: 56px 24px; text-align: center; }
.blank h3 { font-size: 19px; font-weight: 800; letter-spacing: -.024em; margin-bottom: 8px; }
.blank p { color: var(--ink-2); font-size: 15px; max-width: 42ch; margin: 0 auto 20px; }
/* note under the spec table when the source has no data */
.spec-note {
margin-top: 14px; padding: 14px 18px;
background: var(--brand-tint); color: var(--brand-deep);
border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.spec-note[hidden] { display: none; }
/* ==========================================================================
Icons
========================================================================== */
.ico { flex: none; display: block; }
/* compact one-row spec strip for cards */
.specrow {
display: flex; align-items: center; gap: 6px;
padding: 11px 2px 3px; border-top: 1px solid var(--line-2);
}
.specrow span {
display: inline-flex; align-items: center; gap: 5px;
flex: 1; min-width: 0;
color: var(--ink-3);
}
.specrow span + span { border-left: 1px solid var(--line-2); padding-left: 8px; }
.specrow b {
font-family: var(--num); font-size: 13px; font-weight: 600;
letter-spacing: -.02em; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.specrow .ico { color: var(--ink-3); }
/* icons inside the product-line switch */
.seg__i { display: inline-flex; align-items: center; gap: 7px; }
.seg__i .ico { opacity: .5; transition: opacity .16s ease, color .16s ease; }
.seg__i.is-on .ico { opacity: 1; color: var(--brand); }
.seg__i:hover .ico { opacity: .85; }
/* ==========================================================================
Steps — icon, ring and connecting track
========================================================================== */
.steps { counter-reset: none; }
.step {
position: relative; overflow: hidden;
background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-lg); padding: 26px 24px 24px;
transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.step__mark { position: relative; width: 60px; height: 60px; margin-bottom: 22px; }
.step__ring {
position: absolute; inset: 0; border-radius: 999px;
border: 1.5px dashed var(--line);
transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .28s ease;
}
.step:hover .step__ring { transform: rotate(120deg); border-color: var(--brand); }
.step__ico {
position: absolute; inset: 7px; border-radius: 999px;
background: var(--brand-tint); color: var(--brand);
display: grid; place-items: center;
transition: background .28s ease, color .28s ease;
}
.step:hover .step__ico { background: var(--brand); color: #fff; }
.step__n {
position: absolute; right: -6px; top: -4px;
min-width: 24px; height: 24px; padding-inline: 6px;
border-radius: 999px; background: var(--ink); color: #fff;
display: grid; place-items: center;
font-family: var(--num); font-size: 11px; font-weight: 600; letter-spacing: 0;
}
.step h3 { font-size: 17.5px; font-weight: 800; letter-spacing: -.022em; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
/* One dotted rail behind the whole row — the opaque cards mask it, so it
only shows through the gaps. Drawing it per-card got clipped by overflow. */
.steps { position: relative; }
.steps::before {
/* inset to the first and last mark centres so it doesn't trail off the row */
content: ''; position: absolute; left: 12%; right: 12%; top: 56px; height: 2px; z-index: 0;
background-image: radial-gradient(circle, var(--ink-3) 1.3px, transparent 1.3px);
background-size: 8px 2px; background-repeat: repeat-x;
opacity: .45;
}
.step { z-index: 1; }
.step::after { content: none; }
@media (max-width: 1023px) { .steps::before { display: none; } }
/* a faint oversized glyph in the corner gives the card some weight */
.step__ghost {
position: absolute; right: -14px; bottom: -22px;
font-family: var(--num); font-size: 88px; font-weight: 600;
color: var(--ink); opacity: .035; letter-spacing: -.05em;
pointer-events: none; user-select: none;
transition: opacity .28s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.step:hover .step__ghost { opacity: .06; transform: translateY(-4px); }
/* ==========================================================================
Preloader — counter in the numeral face, then a curtain lift
========================================================================== */
.preloader {
position: fixed; inset: 0; z-index: 300;
background: var(--canvas);
display: grid; place-items: center;
transition: transform .9s cubic-bezier(.76,0,.24,1);
will-change: transform;
}
.preloader[hidden] { display: none; }
/* no JS — no curtain: without the script nothing would ever lift it */
html:not(.js) .preloader { display: none; }
.preloader.is-done { transform: translateY(-101%); }
.preloader__inner { display: grid; justify-items: center; gap: 26px; padding: 24px; }
.preloader__logo img { height: 30px; width: auto; }
.preloader__logo {
opacity: 0; transform: translateY(10px);
animation: preIn .7s cubic-bezier(.22,1,.36,1) .05s forwards;
}
.preloader__num {
font-family: var(--num); font-weight: 600;
font-size: clamp(56px, 12vw, 104px); line-height: 1;
letter-spacing: -.05em; color: var(--ink);
font-variant-numeric: tabular-nums;
opacity: 0; transform: translateY(10px);
animation: preIn .7s cubic-bezier(.22,1,.36,1) .12s forwards;
}
.preloader__num sup { font-size: .3em; vertical-align: super; color: var(--ink-3); margin-left: .12em; }
.preloader__bar {
width: min(240px, 60vw); height: 2px; border-radius: 2px;
background: var(--line); overflow: hidden;
opacity: 0; animation: preIn .7s cubic-bezier(.22,1,.36,1) .2s forwards;
}
.preloader__bar i {
display: block; height: 100%; width: 0;
background: var(--brand); border-radius: inherit;
transition: width .3s cubic-bezier(.22,1,.36,1);
}
.preloader__cap {
font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-3);
opacity: 0; animation: preIn .7s cubic-bezier(.22,1,.36,1) .28s forwards;
}
@keyframes preIn { to { opacity: 1; transform: none; } }
/* page entrance — staggered, fires once the curtain starts lifting */
@media (prefers-reduced-motion: no-preference) {
/* a touch of focus-pull: elements arrive from a shallow depth of field */
.js .lift { opacity: 0; transform: translateY(26px); filter: blur(7px); }
.js body.is-ready .lift,
body.is-ready .lift {
animation: liftIn .85s cubic-bezier(.22,1,.36,1) forwards;
animation-delay: var(--d, 0s);
}
}
@keyframes liftIn { to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
.preloader { display: none !important; }
.lift { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* ==========================================================================
Cars — configurator
========================================================================== */
.card__badge--dark { background: var(--ink); }
.applogos { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.applogos img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.cfg { margin-top: 24px; display: grid; gap: 22px; }
.cfg__g { display: grid; gap: 10px; }
.cfg__t {
font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
color: var(--ink-3); display: flex; gap: 8px; align-items: baseline;
}
.cfg__t i { font-style: normal; letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.cfg__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cfg__apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.appbtn {
position: relative; display: grid; justify-items: center; gap: 10px;
padding: 16px 8px 12px; border-radius: var(--r-md);
border: 1.5px solid var(--line-2); background: #fff; cursor: pointer;
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.appbtn img { height: 46px; width: 46px; border-radius: 13px; display: block; } /* big, full-colour app tiles */
.appbtn span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.2; }
.appbtn:hover { border-color: var(--line); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.appbtn.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.appbtn.is-on span { color: var(--ink); }
.appbtn.is-on::after { /* red check badge on the selected tile */
content: ''; position: absolute; top: -8px; left: -8px; width: 22px; height: 22px;
background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath d='M1 4.5 4.5 8 11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
border-radius: 999px; box-shadow: 0 2px 7px rgba(161,0,0,.4);
}
.cfg__sum { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.cfg__sum .summary__total b { font-size: 24px; }
@media (max-width: 480px) { .cfg__apps { grid-template-columns: repeat(2, 1fr); } }
/* two chip groups stop fitting on one line before the tablet breakpoint */
@media (max-width: 1140px) {
#carFuelChips { margin-left: 0 !important; }
.cat__toolbar { row-gap: 10px; }
}
/* ==========================================================================
Car gallery — sticky, with colour thumbnails
========================================================================== */
.bike__media--gal { padding: 0; background: none; overflow: visible; position: sticky; top: 92px; }
.gal { display: grid; gap: 12px; }
.gal__stage {
position: relative; overflow: hidden;
border-radius: var(--r-xl);
background: radial-gradient(78% 64% at 50% 40%, #FAFBFC 0%, #F1F2F4 56%, #E7E8EA 100%);
padding: 28px 24px;
display: grid; place-items: center;
min-height: clamp(300px, 34vw, 460px);
}
.gal__stage img {
position: relative; z-index: 1;
width: 100%; height: auto; max-height: clamp(260px, 30vw, 400px);
object-fit: contain; mix-blend-mode: multiply;
transition: transform .35s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
/* each colour swap re-renders the stage — fade the new paint in */
@media (prefers-reduced-motion: no-preference) {
.gal__stage img { animation: galIn .38s ease; }
}
@keyframes galIn { from { opacity: 0; } }
.gal__hint {
position: absolute; z-index: 2; left: 50%; bottom: 14px; translate: -50% 0;
display: inline-flex; align-items: center; gap: 7px;
height: 30px; padding-inline: 13px; border-radius: 999px;
background: rgba(255,255,255,.86); backdrop-filter: blur(8px);
font-size: 12px; font-weight: 700; color: var(--ink-2);
box-shadow: var(--shadow-sm);
opacity: 0; transition: opacity .25s ease;
}
.gal__stage:hover .gal__hint { opacity: 1; }
.gal__thumbs {
display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
scrollbar-width: thin;
}
.gal__t {
flex: none; width: 96px; padding: 6px;
border-radius: var(--r-md); border: 1.5px solid var(--line);
background: var(--surface);
transition: border-color .16s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.gal__t img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; mix-blend-mode: multiply; }
.gal__t:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.gal__t:active { transform: scale(.96); }
.gal__t.is-on { border-color: var(--ink); background: var(--surface-2); }
/* colour swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
width: 34px; height: 34px; padding: 3px; border-radius: 999px;
border: 1.5px solid var(--line); background: #fff;
transition: border-color .16s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.swatch span { display: block; width: 100%; height: 100%; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(15,16,18,.10); }
.swatch:hover { transform: translateY(-2px); border-color: var(--ink-3); }
.swatch.is-on { border-color: var(--ink); border-width: 2px; padding: 2px; }
.swatch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 1023px) {
.bike__media--gal { position: static; }
}
@media (prefers-reduced-motion: reduce) {
.gal__stage img { transition: none; }
}
/* partner-app logos inside the cars hero card */
.hero__apps {
display: flex; align-items: center; gap: 16px;
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.hero__apps img { height: 16px; width: auto; opacity: .8; }
/* ==========================================================================
Car configurator — live payment
========================================================================== */
/* light, legible payment card (weekly is the hero, monthly secondary) */
.cfg__pay {
margin-top: 16px; padding: 16px 20px 18px; border-radius: var(--r-lg);
background: var(--surface-2); border: 1px solid var(--line-2);
}
.cfg__pay-tag {
display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.cfg__pay-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.cfg__pay-w b { font-family: var(--num); font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.cfg__pay-w > span { font-size: 14.5px; color: var(--ink-3); font-weight: 600; margin-left: 6px; }
.cfg__pay-mo { font-family: var(--num); font-size: 18px; font-weight: 600; color: var(--ink-2); letter-spacing: -.02em; white-space: nowrap; }
.cfg__pay-mo small { font-size: 12.5px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
/* ==========================================================================
Car equipment list (inside the specs accordion)
========================================================================== */
.speclist { columns: 2; column-gap: 40px; padding: 0 26px 24px; }
.speclist li {
break-inside: avoid; padding: 7px 0 7px 22px; position: relative;
font-size: 14px; line-height: 1.45; color: var(--ink-2);
border-top: 1px solid var(--line-2);
}
.speclist li::before {
content: ''; position: absolute; left: 2px; top: 14px;
width: 6px; height: 6px; border-radius: 999px; background: var(--brand);
}
@media (max-width: 640px) { .speclist { columns: 1; } }
/* ==========================================================================
Cinema & choreography — additive polish layer (v4)
Every motion here is gated behind prefers-reduced-motion.
========================================================================== */
/* --- hero: the city breathes. An imperceptible drift keeps the night box
alive without ever competing with the copy. --- */
@media (prefers-reduced-motion: no-preference) {
.hero__bg img {
animation: heroDrift 30s ease-in-out infinite alternate;
will-change: transform;
}
}
@keyframes heroDrift {
from { transform: scale(1.02); }
to { transform: scale(1.09) translateX(-1.4%); }
}
/* --- hero: cursor-reactive warm glow. JS appends it only on fine pointers
with motion allowed; it sits under the content, over the photo. --- */
.hero__glow {
position: absolute; left: 0; top: 0; z-index: 0;
width: 620px; height: 620px; border-radius: 999px;
background: radial-gradient(circle, rgba(216,52,44,.24), transparent 62%);
mix-blend-mode: screen;
opacity: 0; transition: opacity .6s ease;
pointer-events: none; will-change: transform;
}
/* --- cards: one quiet light sweep across the product photo on hover —
the same sheen language the primary button already speaks. --- */
.card__media::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
transform: translateX(-135%);
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.card:hover .card__media::after {
opacity: 1; transform: translateX(135%);
transition: transform .7s ease, opacity .25s ease;
}
}
/* --- car cards come alive on hover: headlights ignite, body wakes,
the car settles onto a deeper ground shadow. Every catalog render is
a front-3/4 shot facing right, so the lamp bloom lands on the light
cluster for all of them. --- */
.card--car .card__media img {
transition: transform .4s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
.card--car:hover .card__media img { filter: brightness(1.045) saturate(1.06) contrast(1.015); }
/* video cards (Higgsfield "headlights ignite" clip) — plays on hover */
.card__vid {
width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
display: block; background: #fff; mix-blend-mode: multiply;
}
/* the ::after light sweep and ::before ground pool still apply and read well */
/* cool LED bloom over the front-right headlight zone */
.card__beam {
position: absolute; z-index: 1; pointer-events: none;
right: 24%; top: 44%; width: 30%; height: 26%;
background: radial-gradient(closest-side,
rgba(226,240,255,.95), rgba(188,218,255,.42) 46%, transparent 72%);
filter: blur(2.5px); mix-blend-mode: screen;
opacity: 0; transform: scale(.7); transform-origin: center;
}
/* deeper ground pool — the car "settles" as it powers up */
.card--car .card__media::before {
content: ''; position: absolute; z-index: 1; pointer-events: none;
left: 50%; bottom: -4%; translate: -50% 0; width: 72%; height: 32%;
background: radial-gradient(58% 100% at 50% 100%, rgba(15,16,18,.11), transparent 70%);
opacity: 0; transition: opacity .45s ease;
}
.card--car:hover .card__media::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.card--car:hover .card__beam { animation: carIgnite .55s cubic-bezier(.22,1,.36,1) forwards; }
}
@media (prefers-reduced-motion: reduce) {
.card--car:hover .card__beam { opacity: .85; transform: scale(1); transition: opacity .3s ease; }
}
@keyframes carIgnite {
0% { opacity: 0; transform: scale(.7); }
38% { opacity: .6; }
52% { opacity: .22; } /* brief flicker, like a real ignition */
100% { opacity: .92; transform: scale(1); }
}
/* --- steps: the dotted rail draws itself left-to-right as the row reveals —
one scroll "moment", scoped to the same .reveal machinery. --- */
@media (prefers-reduced-motion: no-preference) {
.js .steps.reveal::before {
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 1.1s var(--ease) .3s;
}
.js .steps.reveal.is-in::before { transform: scaleX(1); }
}
/* --- section eyebrows pick up the hero's brand dash: one voice for every
overline on the site. ::before keeps the inline span's layout intact. --- */
.section-head .eyebrow::before {
content: ''; display: inline-block; vertical-align: middle;
width: 26px; height: 1.5px; margin-right: 9px;
background: currentColor; opacity: .9;
transform: translateY(-1px);
}
/* ==========================================================================
Phone polish
Findings from a 360–430px sweep: the consent bar ate the hero CTA, the
about portrait overflowed the frame, and a handful of labels and links
fell under the 12px / 44px comfort floor.
========================================================================== */
@media (max-width: 640px) {
/* Consent bar: compact enough to leave the hero buttons usable. */
.cookie { padding: 10px; }
.cookie__box { gap: 12px; padding: 14px 16px; border-radius: var(--r-md); }
.cookie h3 { font-size: 15px; }
.cookie p { font-size: 12.5px; line-height: 1.45; }
.cookie__btns { width: 100%; gap: 8px; }
.cookie__btns .btn { flex: 1 1 0; min-height: 44px; }
/* The portrait is sized off the frame height, so it grew past the edges. */
.about__media { min-height: 340px; }
.about__person { height: auto; width: 100%; max-width: 100%; object-fit: contain; }
/* Comfortable touch targets for the drawer and footer link lists. */
.drop__list a,
.footer__col a,
.footer__phone { display: block; min-height: 44px; line-height: 44px; }
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
.drop__btn { min-height: 44px; }
/* Filter chips were a touch under the comfortable floor. */
.fchip { min-height: 40px; }
/* Nothing below 12px on a phone. */
.card__badge,
.step__n,
.mega__eyebrow,
.specs small,
.bike__tile small,
.hero__card-spec small,
.fgroup__t,
.cfg__t,
.cfg__pay-tag,
.seg small,
.footer__col h4,
.mega__col h4,
.fieldset__t,
.drop__promo-txt small { font-size: 12px; }
}