html, body { max-width: 100%; overflow-x: hidden; }
/* ============================================================
RENNEN MOTORSPORT — GLOBAL STYLESHEET v1.0
Retromotive editorial direction
Bebas Neue / Barlow / Barlow Condensed
Black ink on white. 1px grid rules. Zero radius. Zero gradients.
Red as accent only — never background, never large blocks.
============================================================ */
/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Barlow', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.65;
color: #0a0a0a;
background: var(--rennen-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* ── BRAND COLOUR TOKENS ── */
:root {
--rennen-black: #111111;
--rennen-white: #FFFFFF;
--rennen-offwhite: #FAFAFA;
--rennen-warm-grey: #F0EFED;
--rennen-mid-grey: #888888;
--rennen-red: #A30D16;
/* Derived / utility */
--rule: rgba(17,17,17,0.11);
--rule-strong: rgba(17,17,17,0.20);
--wht-10: rgba(255,255,255,0.10);
--wht-30: rgba(255,255,255,0.30);
--wht-50: rgba(255,255,255,0.50);
--wht-60: rgba(255,255,255,0.60);
--blk-20: rgba(17,17,17,0.20);
}
/* ── UTILITY CLASSES ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.bebas { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; }
.cond { font-family: 'Barlow Condensed', sans-serif; }
.lbl {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rennen-mid-grey);
}
.red-rule {
display: block;
width: 32px;
height: 2px;
background: var(--rennen-red);
margin-bottom: 14px;
}
/* ── FONTS (loaded in ) ── */
/* Bebas Neue, Barlow 300/400/500, Barlow Condensed 300/400/500/600 */
/* ── BUTTONS ── */
.btn-primary {
background: var(--rennen-black);
color: var(--rennen-white);
padding: 13px 28px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background 0.18s, color 0.18s;
-webkit-tap-highlight-color: transparent;
}
.btn-primary:hover { background: var(--rennen-red); color: var(--rennen-white); }
.btn-ghost {
background: transparent;
color: var(--rennen-black);
padding: 12px 28px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
border: 1.5px solid var(--rule-strong);
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: border-color 0.18s, color 0.18s;
}
.btn-ghost:hover { border-color: var(--rennen-red); color: var(--rennen-red); }
.btn-white {
background: var(--rennen-white);
color: var(--rennen-black);
padding: 13px 28px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
border: none;
text-decoration: none;
display: inline-block;
transition: opacity 0.18s;
}
.btn-white:hover { opacity: 0.88; }
.btn-ghost-white {
background: transparent;
color: var(--rennen-white);
padding: 12px 28px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
border: 1.5px solid rgba(255,255,255,0.30);
text-decoration: none;
display: inline-block;
transition: border-color 0.18s;
}
.btn-ghost-white:hover { border-color: var(--rennen-white); }
.btn-red {
background: var(--rennen-red);
color: var(--rennen-white);
padding: 13px 28px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: opacity 0.18s;
}
.btn-red:hover { opacity: 0.88; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* ── NAVIGATION ── */
nav.sitenav {
position: sticky;
top: 0;
z-index: 100;
background: var(--rennen-white);
border-bottom: 1px solid var(--rule-strong);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
height: 56px;
}
.n-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 27px;
letter-spacing: 0.07em;
color: var(--rennen-black);
text-decoration: none;
line-height: 1;
flex-shrink: 0;
}
.n-logo small {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rennen-mid-grey);
margin-top: -3px;
font-weight: 400;
}
.n-links {
display: flex;
gap: 22px;
list-style: none;
align-items: center;
}
.n-links a {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rennen-black);
text-decoration: none;
font-weight: 500;
white-space: nowrap;
position: relative;
padding-bottom: 2px;
}
.n-links a:hover { color: var(--rennen-mid-grey); }
.n-links a.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--rennen-red);
}
.n-links .n-cta {
background: var(--rennen-red);
color: var(--rennen-white);
padding: 8px 18px;
transition: background 0.18s;
}
.n-links .n-cta:hover { background: #8a0b12; color: var(--rennen-white); }
.n-links .n-cta::after { display: none; }
.n-links .n-ph {
border: 1px solid var(--rule-strong);
padding: 7px 14px;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--rennen-black); }
.m-menu {
display: none;
position: fixed;
top: 56px;
left: 0;
right: 0;
background: var(--rennen-white);
border-bottom: 2px solid var(--rennen-black);
z-index: 99;
}
.m-menu.open { display: block; }
.m-menu ul { list-style: none; }
.m-menu li { border-bottom: 1px solid var(--rule); }
.m-menu a {
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rennen-black);
text-decoration: none;
font-weight: 500;
display: block;
padding: 14px 20px;
}
.m-menu .m-call { background: var(--rennen-black); color: var(--rennen-white); text-align: center; font-weight: 600; font-size: 14px; }
.m-menu .m-book { background: var(--rennen-red); color: var(--rennen-white); text-align: center; font-weight: 600; font-size: 14px; }
.m-menu .m-dir { background: var(--rennen-offwhite); color: var(--rennen-black); text-align: center; font-weight: 500; }
/* ── MOBILE STICKY CTA BAR ── */
.mob-cta { display: none; }
/* ── TICKER ── */
.ticker-wrap { max-width: 100vw; overflow: hidden; }
.ticker {
background: var(--rennen-black);
overflow: hidden;
max-width: 100vw;
contain: layout style;
max-width: 100vw;
height: 36px;
display: flex;
align-items: center;
}
.ticker-inner {
display: flex;
animation: ticker-scroll 55s linear infinite;
white-space: nowrap;
}
.ticker-inner:hover { animation-play-state: paused; }
.t-item {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.70);
padding: 0 28px;
flex-shrink: 0;
}
.t-item em { color: rgba(255,255,255,0.22); font-style: normal; margin-right: 6px; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── SECTION HEADER ── */
.sh {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 20px 40px 18px;
border-bottom: 1px solid var(--rule-strong);
}
.sh .st {
font-family: 'Bebas Neue', sans-serif;
font-size: 32px;
letter-spacing: 0.04em;
position: relative;
}
.sh .st::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 28px;
height: 2px;
background: var(--rennen-red);
}
.sh .sl {
font-family: 'Barlow Condensed', sans-serif;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rennen-mid-grey);
text-decoration: none;
}
.sh .sl:hover { color: var(--rennen-black); }
/* ── BREADCRUMB ── */
.crumb {
padding: 11px 40px;
border-bottom: 1px solid var(--rule);
background: var(--rennen-offwhite);
}
.crumb-inner {
display: flex;
gap: 8px;
align-items: center;
font-family: 'Barlow Condensed', sans-serif;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rennen-mid-grey);
}
.crumb-inner a { color: var(--rennen-mid-grey); text-decoration: none; }
.crumb-inner a:hover { color: var(--rennen-black); }
.crumb-inner span { color: #ccc; }
/* ── PAGE HERO (inner pages) ── */
.page-hero {
padding: 56px 40px;
border-bottom: 1px solid var(--rule-strong);
display: grid;
grid-template-columns: 3fr 2fr;
gap: 48px;
align-items: end;
}
.page-eyebrow { margin-bottom: 10px; }
.page-h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: 78px;
line-height: 0.87;
letter-spacing: 0.01em;
margin-bottom: 18px;
}
.page-sub {
font-size: 17px;
font-weight: 400;
color: #111;
line-height: 1.8;
max-width: 520px;
margin-bottom: 28px;
}
.hero-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--rule-strong);
border: 1px solid var(--rule-strong);
}
.hs { background: var(--rennen-white); padding: 16px 18px; }
.hs-n { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 0.02em; line-height: 1; }
.hs-l { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rennen-mid-grey); margin-top: 3px; }
.nap-hero {
background: var(--rennen-warm-grey);
border: 1px solid var(--rule-strong);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 10px;
}
.nap-row {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--rennen-black);
}
.nap-row a { color: var(--rennen-black); text-decoration: none; font-weight: 500; }
.nap-row a:hover { color: var(--rennen-red); }
.nap-icon { font-size: 13px; width: 16px; flex-shrink: 0; }
/* ── WARRANTY BAND ── */
.wband {
background: var(--rennen-black);
color: var(--rennen-white);
padding: 18px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid var(--rule-strong);
}
.wband-txt strong {
font-family: 'Barlow Condensed', sans-serif;
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
display: block;
margin-bottom: 3px;
}
.wband-txt p {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.70);
line-height: 1.6;
}
.wband a {
color: var(--rennen-white);
border: 1px solid rgba(255,255,255,0.30);
padding: 9px 18px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
flex-shrink: 0;
white-space: nowrap;
transition: border-color 0.18s, color 0.18s;
}
.wband a:hover { border-color: var(--rennen-red); color: var(--rennen-red); }
/* ── TRUST BAR ── */
.tbar { display: grid; grid-template-columns: repeat(6,1fr); border-bottom: 1px solid var(--rule-strong); }
.ti2 { padding: 16px 18px; border-right: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 4px; }
.ti2:last-child { border-right: none; }
.tv { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.04em; line-height: 1; }
.tl { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rennen-mid-grey); }
/* ── SERVICE NUMBER ACCENT ── */
.svc-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.14em;
color: var(--rennen-red);
margin-bottom: 8px;
font-weight: 500;
}
/* ── SERVICE GRID ── */
.svc-grid { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--rule-strong); align-items: stretch; }
.svc { padding: 28px 22px; border-right: 1px solid var(--rule-strong); display: flex; flex-direction: column; min-height: 200px; }
.svc:last-child { border-right: none; }
.svc-t { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.03em; line-height: 1; margin-bottom: 10px; }
.svc-b { font-size: 13px; font-weight: 300; color: #1a1a1a; line-height: 1.75; flex: 1; }
.svc-p {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rennen-black);
font-weight: 600;
padding-top: 12px;
border-top: 1px solid var(--rule);
text-decoration: none;
display: block;
margin-top: 14px;
transition: color 0.15s;
}
.svc-p:hover { color: var(--rennen-red); }
/* ── MODELS STRIP ── */
.mstrip { display: grid; grid-template-columns: repeat(8,1fr); border-bottom: 1px solid var(--rule-strong); }
.mc {
padding: 15px 8px;
border-right: 1px solid var(--rule-strong);
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 3px;
transition: background 0.15s;
}
.mc:last-child { border-right: none; }
.mc:hover, .mc.active { background: var(--rennen-warm-grey); }
.mc.active .mn { color: var(--rennen-red); }
.mn { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.04em; color: var(--rennen-black); }
.ms { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rennen-mid-grey); }
/* ── ALSO-SERVICE STRIP ── */
.also-strip { border-bottom: 1px solid var(--rule-strong); }
.also-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.also-cell {
padding: 14px 8px;
border-right: 1px solid var(--rule-strong);
text-align: center;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 3px;
transition: background 0.15s;
}
.also-cell:last-child { border-right: none; }
.also-cell:hover { background: var(--rennen-warm-grey); }
.also-n { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 0.04em; color: var(--rennen-black); }
.also-s { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rennen-mid-grey); }
/* ── GRID LAYOUTS ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule-strong); }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--rule-strong); }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--rule-strong); }
.g-asym { display: grid; grid-template-columns: 2fr 1fr; border-bottom: 1px solid var(--rule-strong); }
.g-asym2 { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--rule-strong); }
.gcol { padding: 36px 32px; border-right: 1px solid var(--rule-strong); }
.gcol:last-child { border-right: none; }
.gcol-sm { padding: 26px 22px; border-right: 1px solid var(--rule-strong); }
.gcol-sm:last-child { border-right: none; }
.gcol-h { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.03em; margin-bottom: 10px; }
.gcol-body { font-size: 13px; font-weight: 300; color: #111; line-height: 1.8; }
.gcol-price {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rennen-black);
font-weight: 600;
padding-top: 12px;
border-top: 1px solid var(--rule);
text-decoration: none;
display: block;
margin-top: 14px;
transition: color 0.15s;
}
.gcol-price:hover { color: var(--rennen-red); }
/* ── BLACK BAND ── */
.band { background: var(--rennen-black); color: var(--rennen-white); padding: 56px 40px; border-bottom: 1px solid var(--rule-strong); }
.band-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 14px; }
.band-h { font-family: 'Bebas Neue', sans-serif; font-size: 62px; line-height: 0.88; letter-spacing: 0.01em; margin-bottom: 16px; }
.band-body { font-size: 17px; font-weight: 400; color: rgba(255,255,255,0.90); line-height: 1.8; max-width: 600px; margin-bottom: 26px; }
.band-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: center; }
/* ── CONQUEST BAND ── */
.cq { background: #181816; color: var(--rennen-white); display: grid; grid-template-columns: 2fr 1fr; border-bottom: 1px solid var(--rule-strong); }
.cq-l { padding: 56px 48px; border-right: 1px solid rgba(255,255,255,0.07); }
.cq-ey { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 14px; }
.cq-h { font-family: 'Bebas Neue', sans-serif; font-size: 62px; line-height: 0.88; letter-spacing: 0.01em; margin-bottom: 18px; }
.cq-b { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.8; max-width: 460px; margin-bottom: 26px; }
.cq-r { padding: 56px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.cq-models { display: flex; flex-direction: column; gap: 1px; }
.cq-m { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: rgba(255,255,255,0.04); }
.cq-mn { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--rennen-white); font-weight: 500; }
.cq-mc { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.32); }
.cq-ml { font-size: 10px; color: rgba(255,255,255,0.28); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.10em; text-transform: uppercase; transition: color 0.15s; }
.cq-ml:hover { color: var(--rennen-red); }
/* ── PPN SECTION ── */
.ppn { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--rule-strong); }
.ppn-l { background: var(--rennen-black); color: var(--rennen-white); padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ppn-h { font-family: 'Bebas Neue', sans-serif; font-size: 46px; line-height: 0.9; letter-spacing: 0.02em; }
.ppn-sub { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.48); line-height: 1.75; max-width: 260px; }
.ppn-r { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ppn-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.ppn-i { background: var(--rennen-white); padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.ppn-it { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 600; }
.ppn-ib { font-size: 12px; font-weight: 300; color: #1a1a1a; line-height: 1.6; }
/* ── NAP BLOCK ── */
.nap-block { display: flex; flex-direction: column; gap: 12px; }
.nap-line { display: flex; align-items: flex-start; gap: 12px; }
.nap-ico { font-size: 14px; flex-shrink: 0; margin-top: 1px; width: 18px; text-align: center; }
.nap-content { display: flex; flex-direction: column; gap: 2px; }
.nap-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rennen-mid-grey); }
.nap-value { font-size: 13px; font-weight: 400; line-height: 1.5; }
.nap-value a { color: var(--rennen-black); text-decoration: none; font-weight: 500; }
.nap-value a:hover { color: var(--rennen-red); }
/* ── MAP ── */
.map-wrap { position: relative; height: 320px; background: var(--rennen-warm-grey); overflow: hidden; }
.map-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.map-placeholder {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
background: var(--rennen-warm-grey);
}
.map-pin { font-size: 32px; color: var(--rennen-red); }
/* ── REVIEWS ── */
.revs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--rule-strong); }
.rev { padding: 28px; border-right: 1px solid var(--rule-strong); display: flex; flex-direction: column; }
.rev:last-child { border-right: none; }
.rev-s { font-size: 13px; letter-spacing: 3px; margin-bottom: 10px; color: var(--rennen-black); }
.rev-t { font-size: 15px; font-weight: 400; font-style: italic; color: #111; line-height: 1.75; flex: 1; margin-bottom: 14px; }
.rev-by { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.rev-by span { color: var(--rennen-mid-grey); font-weight: 400; }
/* ── FAQ ── */
.faq-sec { padding: 48px 40px; border-bottom: 1px solid var(--rule-strong); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 52px; margin-top: 24px; }
.fq { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.fq-q { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; margin-bottom: 7px; line-height: 1.4; }
.fq-a { font-size: 13px; font-weight: 300; color: #1a1a1a; line-height: 1.7; }
/* ── SUBURB CHIPS ── */
.suburb-sec { padding: 32px 40px; border-bottom: 1px solid var(--rule-strong); }
.suburb-intro { font-size: 13px; font-weight: 300; color: #1a1a1a; line-height: 1.7; max-width: 640px; margin: 10px 0 16px; }
.suburb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
font-family: 'Barlow Condensed', sans-serif;
font-size: 10px;
letter-spacing: 0.13em;
text-transform: uppercase;
padding: 6px 13px;
border: 1px solid var(--rule-strong);
color: var(--rennen-black);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.chip:hover { background: var(--rennen-warm-grey); border-color: var(--rennen-red); }
/* ── CTA BAND ── */
.cta-band {
background: var(--rennen-warm-grey);
padding: 48px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
border-bottom: 1px solid var(--rule-strong);
}
.cta-band h3 { font-family: 'Bebas Neue', sans-serif; font-size: 40px; letter-spacing: 0.02em; margin-bottom: 6px; }
.cta-band p { font-size: 14px; font-weight: 300; color: #1a1a1a; max-width: 460px; line-height: 1.7; }
/* ── PRESS BAR ── */
.press { display: grid; grid-template-columns: repeat(5,1fr); border-bottom: 1px solid var(--rule-strong); }
.pr { padding: 22px 16px; border-right: 1px solid var(--rule-strong); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pr:last-child { border-right: none; }
.pr-s { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 0.04em; }
.pr-c { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rennen-mid-grey); }
.pr-q { font-size: 11px; font-style: italic; color: #666; line-height: 1.6; max-width: 160px; }
/* ── RENNEN PLUS BRANDS ── */
.brands { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.brand { background: var(--rennen-white); padding: 20px 16px; display: flex; flex-direction: column; gap: 5px; }
.brand-n { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.04em; }
.brand-o { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rennen-mid-grey); }
.brand-d { font-size: 12px; font-weight: 300; color: #1a1a1a; line-height: 1.6; }
/* ── QUOTE BANNER ── */
.qbanner { background: var(--rennen-black); padding: 48px 80px; text-align: center; border-bottom: 1px solid var(--rule-strong); }
.qbanner blockquote {
font-size: 17px; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.82);
line-height: 1.85; max-width: 680px; margin: 0 auto 16px;
position: relative;
border-left: 3px solid var(--rennen-red);
padding-left: 24px;
text-align: left;
}
.qbanner cite { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.28); font-style: normal; }
/* ── VIDEO SECTION ── */
.vid-wrap { position: relative; padding-bottom: 56.25%; background: var(--rennen-warm-grey); }
.vid-wrap iframe, .vid-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.vid-ph {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: var(--rennen-warm-grey);
}
.vid-pb {
width: 68px; height: 68px;
border: 2px solid var(--rennen-black);
display: flex; align-items: center; justify-content: center;
cursor: pointer; background: none;
transition: background 0.2s, border-color 0.2s;
}
.vid-pb:hover { background: var(--rennen-red); border-color: var(--rennen-red); }
.vid-pb svg { width: 24px; height: 24px; margin-left: 4px; }
.vid-pb:hover svg path { fill: var(--rennen-white); }
.vid-cap { padding: 14px 40px; border-top: 1px solid var(--rule-strong); display: flex; align-items: center; justify-content: space-between; }
.vid-ct { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rennen-mid-grey); }
/* ── EMAIL CAPTURE ── */
.email-box { background: var(--rennen-warm-grey); border: 1px solid var(--rule-strong); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.email-box h3 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.03em; }
.email-box p { font-size: 13px; font-weight: 300; color: #1a1a1a; line-height: 1.6; }
.iform { display: flex; margin-top: 4px; }
.iform input {
flex: 1; padding: 12px 14px;
border: 1.5px solid var(--rule-strong); border-right: none;
font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 300;
background: var(--rennen-white); outline: none; -webkit-appearance: none;
}
.iform input:focus { border-color: var(--rennen-red); }
.iform button {
background: var(--rennen-black); color: var(--rennen-white);
padding: 12px 18px;
font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
border: none; cursor: pointer; white-space: nowrap; transition: background 0.18s;
}
.iform button:hover { background: var(--rennen-red); }
/* ── BOOKING FORM ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--rennen-mid-grey); font-weight: 500;
}
.form-input, .form-select, .form-textarea {
padding: 11px 13px;
border: 1.5px solid var(--rule-strong);
font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 300;
background: var(--rennen-white); outline: none; color: var(--rennen-black);
-webkit-appearance: none; border-radius: 0;
transition: border-color 0.18s;
width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--rennen-red); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
.form-disclaimer { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rennen-mid-grey); margin-top: 6px; }
/* ── CONSIGNMENT ── */
.cons { display: grid; grid-template-columns: 2fr 1fr; border-bottom: 1px solid var(--rule-strong); }
.cn-l { padding: 48px 40px; border-right: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.cn-h { font-family: 'Bebas Neue', sans-serif; font-size: 52px; line-height: 0.88; letter-spacing: 0.01em; }
.cn-b { font-size: 14px; font-weight: 300; color: #1a1a1a; line-height: 1.75; max-width: 460px; }
.cn-r { background: var(--rennen-warm-grey); padding: 48px 40px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.steps { display: flex; flex-direction: column; gap: 15px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-n { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--rennen-red); opacity: 0.3; line-height: 1; flex-shrink: 0; width: 28px; }
.step-t { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.step-p { font-size: 12px; font-weight: 300; color: #1a1a1a; line-height: 1.5; }
/* ── GENTLEMAN RACER ── */
.gent { background: var(--rennen-black); color: var(--rennen-white); padding: 64px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; border-bottom: 1px solid var(--rule-strong); }
.gent-h { font-family: 'Bebas Neue', sans-serif; font-size: 60px; line-height: 0.88; letter-spacing: 0.01em; margin-bottom: 14px; }
.gent-b { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.58); line-height: 1.8; max-width: 420px; margin-bottom: 20px; }
.gfacts { display: flex; flex-direction: column; gap: 1px; }
.gf { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05); }
.gf:hover { background: rgba(255,255,255,0.07); }
.gf-l { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.gf-v { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--rennen-white); font-weight: 500; }
/* ── RENNEN FAMILY ── */
.family-grid { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--rule-strong); }
.family-card { padding: 28px 24px; border-right: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 10px; }
.family-card:last-child { border-right: none; }
.family-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rennen-red); font-weight: 600; }
.family-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.04em; }
.family-body { font-size: 12px; font-weight: 300; color: #1a1a1a; line-height: 1.7; flex: 1; }
/* ── OWNER CIRCLE ── */
.owner-circle { background: var(--rennen-offwhite); padding: 56px 40px; border-bottom: 1px solid var(--rule-strong); }
.oc-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.oc-left { display: flex; flex-direction: column; gap: 16px; }
.oc-h { font-family: 'Bebas Neue', sans-serif; font-size: 48px; line-height: 0.9; letter-spacing: 0.02em; }
.oc-body { font-size: 14px; font-weight: 300; color: #111; line-height: 1.8; max-width: 400px; }
.oc-perks { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.oc-perk { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 300; color: #111; line-height: 1.5; }
.oc-perk::before { content: '—'; font-size: 11px; color: var(--rennen-red); flex-shrink: 0; margin-top: 2px; }
/* ── FOOTER ── */
footer { background: var(--rennen-black); }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px; padding: 48px 40px 36px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ft-wm { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.07em; color: var(--rennen-white); margin-bottom: 2px; }
.ft-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.20); margin-bottom: 10px; }
.ft-nap { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.75); line-height: 1.8; margin-bottom: 14px; }
.ft-nap a { color: rgba(255,255,255,0.38); text-decoration: none; }
.ft-nap a:hover { color: var(--rennen-white); }
.ft-soc { display: flex; gap: 12px; flex-wrap: wrap; }
.ft-soc a { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.28); text-decoration: none; }
.ft-soc a:hover { color: var(--rennen-white); }
.ft-ch { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.32); margin-bottom: 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,0.09); }
.ft-ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ft-ul a { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.75); text-decoration: none; }
.ft-ul a:hover { color: var(--rennen-white); }
.ft-bot { padding: 14px 40px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ft-legal { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.14); line-height: 1.7; max-width: 700px; }
/* ── MOBILE ── */
@media (max-width: 960px) {
nav.sitenav { padding: 0 20px; }
.n-links { display: none; }
.hamburger { display: flex; }
.mob-cta {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 90;
border-top: 2px solid var(--rennen-black);
}
.mob-cta a {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 14px 8px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
text-decoration: none; text-align: center;
-webkit-tap-highlight-color: transparent;
}
.mob-cta .mc-call { background: var(--rennen-black); color: var(--rennen-white); }
.mob-cta .mc-book { background: var(--rennen-red); color: var(--rennen-white); }
.mob-cta .mc-dir { background: var(--rennen-warm-grey); color: var(--rennen-black); border-right: 1px solid var(--rule-strong); }
body { padding-bottom: 56px; }
.page-hero { grid-template-columns: 1fr; padding: 32px 20px; gap: 20px; }
.page-h1 { font-size: 52px; }
.hero-stats, .nap-hero { display: none; }
.sh { padding: 16px 20px 14px; }
.crumb { padding: 10px 20px; }
.wband { padding: 14px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
.tbar { grid-template-columns: repeat(3,1fr); }
.ti2:nth-child(3n) { border-right: none; }
.ti2:nth-child(n+4) { border-top: 1px solid var(--rule-strong); }
.g2,.g3,.g4,.g-asym,.g-asym2 { grid-template-columns: 1fr; }
.gcol,.gcol-sm { border-right: none; border-bottom: 1px solid var(--rule-strong); }
.gcol:last-child,.gcol-sm:last-child { border-bottom: none; }
.svc-grid { grid-template-columns: 1fr 1fr; }
.svc:nth-child(2n) { border-right: none; }
.svc:nth-child(n+3) { border-top: 1px solid var(--rule-strong); }
.mstrip { grid-template-columns: repeat(4,1fr); }
.mc:nth-child(4n) { border-right: none; }
.mc:nth-child(n+5) { border-top: 1px solid var(--rule-strong); }
.also-grid { grid-template-columns: repeat(4,1fr); }
.also-cell:nth-child(4n) { border-right: none; }
.also-cell:nth-child(n+5) { border-top: 1px solid var(--rule-strong); }
.band { padding: 36px 20px; }
.band-h { font-size: 40px; }
.band-2col { grid-template-columns: 1fr; }
.cq { grid-template-columns: 1fr; }
.cq-l { padding: 36px 20px; }
.cq-h { font-size: 46px; }
.cq-r { padding: 28px 20px; }
.ppn { grid-template-columns: 1fr; }
.ppn-l,.ppn-r { padding: 32px 20px; }
.ppn-items { grid-template-columns: 1fr; }
.press { grid-template-columns: repeat(2,1fr); }
.pr:nth-child(2n) { border-right: none; }
.pr:nth-child(n+3) { border-top: 1px solid var(--rule-strong); }
.revs { grid-template-columns: 1fr; }
.rev { border-right: none; border-bottom: 1px solid var(--rule-strong); }
.rev:last-child { border-bottom: none; }
.gent { grid-template-columns: 1fr; padding: 40px 20px; gap: 28px; }
.gent-h { font-size: 46px; }
.cons { grid-template-columns: 1fr; }
.cn-l { padding: 32px 20px; border-right: none; border-bottom: 1px solid var(--rule-strong); }
.cn-r { padding: 28px 20px; }
.cta-band { padding: 32px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
.qbanner { padding: 36px 20px; }
.faq-sec { padding: 32px 20px; }
.faq-grid { grid-template-columns: 1fr; }
.suburb-sec { padding: 24px 20px; }
.family-grid { grid-template-columns: 1fr 1fr; }
.family-card:nth-child(2n) { border-right: none; }
.family-card:nth-child(n+3) { border-top: 1px solid var(--rule-strong); }
.owner-circle { padding: 36px 20px; }
.oc-inner { grid-template-columns: 1fr; gap: 32px; }
.map-wrap { height: 240px; }
.form-grid { grid-template-columns: 1fr; }
.form-field.full { grid-column: 1; }
footer .ft-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 20px 24px; }
.ft-bot { padding: 12px 20px; }
.vid-cap { padding: 12px 20px; }
}
/* ── VISUAL QA LEGIBILITY PATCH — 2026-06-08 ──
Purpose: make all service boxes, dark bands, footer content, image/video captions,
and mobile grids production-safe without changing the RENNEN brand direction.
Brand tokens retained: black #111111, white #FFFFFF, red #A30D16.
*/
/* Safer wrapping for premium editorial blocks. Prevents narrow cards/CTAs from clipping. */
.svc, .gcol, .gcol-sm, .ti2, .mc, .also-cell, .ppn-i, .brand, .rev, .family-card,
.pr, .fq, .chip, .nap-row, .nap-line, .cta-band, .email-box, .cq-m, .gf, .form-field,
.btns a, .btns span, .btns button, .mob-cta a, .n-links a {
min-width: 0;
overflow-wrap: break-word;
word-break: normal;
}
/* Minimum readable text sizes in card/body contexts while preserving Bebas headlines. */
.svc-b, .gcol-body, .gcol-price, .svc-p, .fq-a, .brand-d, .family-body, .ppn-ib,
.suburb-intro, .rev-t, .cn-b, .step-p, .oc-body, .oc-perk, .email-box p, .cta-band p {
font-size: clamp(14px, 1.05vw, 16px) !important;
line-height: 1.72 !important;
}
/* Dark backgrounds: force readable text contrast after previous inline font-size patches. */
.band p, .cq p, .gent p, footer p,
[style*="background:var(--rennen-black)"] p,
[style*="background:#181816"] p,
[style*="background: #181816"] p,
[style*="background:var(--rennen-black)"] li,
[style*="background:#181816"] li,
[style*="background: #181816"] li {
color: rgba(255,255,255,0.86) !important;
}
.band .band-body, .cq .cq-b, .gent .gent-b, .ppn-sub,
[style*="background:var(--rennen-black)"] .band-body,
[style*="background:var(--rennen-black)"] .cq-b,
[style*="background:var(--rennen-black)"] .gent-b {
color: rgba(255,255,255,0.88) !important;
}
.band-lbl, .cq-ey, footer .ft-tag, footer .ft-ch, footer .ft-soc a, footer .ft-legal,
[style*="background:var(--rennen-black)"] .lbl,
[style*="background:#181816"] .lbl,
[style*="background: #181816"] .lbl {
color: rgba(255,255,255,0.68) !important;
}
footer .ft-nap, footer .ft-ul a, footer .ft-nap a {
color: rgba(255,255,255,0.78) !important;
}
footer .ft-ul a:hover, footer .ft-nap a:hover, footer .ft-soc a:hover {
color: #fff !important;
}
/* Dark card interiors: captions and descriptions should never sink below readable contrast. */
[style*="rgba(255,255,255,0.06)"] p,
[style*="rgba(255,255,255,0.04)"] p,
[style*="background:rgba(255,255,255,0.06)"] p,
[style*="background:rgba(255,255,255,0.04)"] p {
color: rgba(255,255,255,0.86) !important;
}
/* Video/image captions: improve overlay readability without adding heavy visual clutter. */
[style*="position:absolute"][style*="bottom:14px"],
[style*="position:absolute"][style*="bottom:16px"] {
color: rgba(255,255,255,0.88) !important;
text-shadow: 0 1px 8px rgba(0,0,0,0.75);
}
/* CTA buttons: keep premium letter-spacing but improve small-screen legibility. */
.btn-primary, .btn-ghost, .btn-white, .btn-ghost-white, .btn-red,
.n-links .n-cta, .n-links .n-ph, .mob-cta a, .m-menu a {
line-height: 1.25;
}
/* Large headings: avoid clipping/overlap in tight viewports. */
.page-h1, .band-h, .cq-h, .gent-h, .cn-h, .oc-h, #hero-h1 {
overflow-wrap: normal;
max-width: 100%;
}
/* Tablet navigation safety: prevents the full desktop nav from crowding the logo. */
@media (min-width: 961px) and (max-width: 1180px) {
nav.sitenav { padding: 0 18px; }
.n-links { gap: 12px; }
.n-links a { font-size: 10px !important; letter-spacing: 0.10em !important; }
.n-logo img { height: 38px !important; max-width: 155px; }
}
@media (max-width: 960px) {
body { padding-bottom: 62px; }
/* Homepage hero: keep image/video first but stop bottom statistic boxes becoming too narrow. */
section[aria-labelledby="hero-h1"] > div:last-child > div:last-child {
grid-template-columns: repeat(2, 1fr) !important;
}
section[aria-labelledby="hero-h1"] > div:last-child > div:last-child > div {
padding: 14px 12px !important;
}
/* Homepage PPN block has inline grid styles; override them safely for mobile. */
section[aria-labelledby="ppn-heading"] > div:nth-child(2),
section[aria-labelledby="ppn-heading"] > div:nth-child(2) > div:last-child {
grid-template-columns: 1fr !important;
}
section[aria-labelledby="ppn-heading"] > div:nth-child(2) > div:first-child {
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
section[aria-labelledby="ppn-heading"] h2 {
font-size: 42px !important;
}
/* Prevent service, model and suburb boxes from feeling cramped. */
.svc-grid { grid-template-columns: 1fr !important; }
.svc { border-right: none !important; border-top: 1px solid var(--rule-strong); min-height: auto; }
.svc:first-child { border-top: none; }
.mstrip, .also-grid { grid-template-columns: repeat(2, 1fr) !important; }
.also-cell:nth-child(n), .mc:nth-child(n) { border-right: 1px solid var(--rule-strong); }
.also-cell:nth-child(2n), .mc:nth-child(2n) { border-right: none; }
.page-h1 { font-size: clamp(42px, 14vw, 54px) !important; line-height: 0.92 !important; }
.page-sub { font-size: 16px !important; line-height: 1.72 !important; }
.btns { width: 100%; }
.btns a, .btns span, .btns button { width: 100%; text-align: center; }
footer .ft-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) {
nav.sitenav { padding: 0 14px; }
.n-logo img { height: 34px !important; max-width: 148px; }
#hero-h1 { font-size: 42px !important; }
.band-h, .cq-h, .gent-h, .cn-h { font-size: 38px !important; line-height: 0.95 !important; }
.tbar { grid-template-columns: repeat(2, 1fr) !important; }
.press, .family-grid { grid-template-columns: 1fr !important; }
.form-input, .form-select, .form-textarea { font-size: 16px; } /* prevents iOS zoom */
}
/* ── VISUAL QA PATCH: booking page responsive safety ── */
@media (max-width: 960px) {
.booking-layout {
grid-template-columns: 1fr !important;
min-height: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
}
.booking-form-panel,
.booking-info-panel {
padding: 32px 20px !important;
border-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.booking-form-panel {
border-bottom: 1px solid var(--rule-strong) !important;
}
.booking-info-panel .btns,
.booking-form-panel .btns {
width: 100% !important;
}
.booking-info-panel .btns a,
.booking-form-panel .btn-primary {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
#book-h1 {
font-size: 54px !important;
line-height: 0.9 !important;
}
}
@media (max-width: 420px) {
.booking-form-panel,
.booking-info-panel {
padding: 28px 20px !important;
}
#book-h1 {
font-size: 50px !important;
}
}
/* ── TRIPLE-CHECK PATCH: Rennen Plus responsive brand partner layout ──
Fixes mobile sidebar compression where partner names/descriptions rendered
letter-by-letter on narrow viewports. Desktop layout remains unchanged. */
@media (max-width: 960px) {
section[aria-labelledby="rp-h1"] {
display: block !important;
grid-template-columns: 1fr !important;
}
section[aria-labelledby="rp-h1"] > div {
width: 100% !important;
max-width: 100% !important;
padding: 34px 22px !important;
border-right: 0 !important;
box-sizing: border-box !important;
}
section[aria-labelledby="rp-h1"] > div:first-child {
border-bottom: 1px solid var(--rule-strong) !important;
}
section[aria-labelledby="rp-h1"] .brands {
grid-template-columns: 1fr !important;
width: 100% !important;
}
section[aria-labelledby="rp-h1"] .brand {
min-width: 0 !important;
width: 100% !important;
padding: 18px 16px !important;
}
section[aria-labelledby="rp-h1"] .brand-n {
font-size: 24px !important;
line-height: 1.05 !important;
letter-spacing: 0.04em !important;
}
section[aria-labelledby="rp-h1"] .brand-o {
line-height: 1.35 !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
section[aria-labelledby="rp-h1"] .brand-d {
font-size: 15px !important;
line-height: 1.65 !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
}
/* ── FINAL VISUAL QA CONTRAST SAFEGUARDS ──
Prevent page-level copy-size overrides from making text disappear on dark bands,
image overlays, CTA panels or mobile warning sections. */
.wband,
.band,
.dark,
.cta-band,
.footer,
.site-footer,
.mob-cta,
[class*="dark"],
section[style*="background:#0b0b0b"],
section[style*="background: #0b0b0b"],
section[style*="background:var(--rennen-black)"],
section[style*="background: var(--rennen-black)"] {
color: var(--rennen-white);
}
.wband p,
.wband .wband-txt p,
.band p,
.band .page-sub,
.band .gcol-body,
.dark p,
.dark .page-sub,
.cta-band p,
.footer p,
.site-footer p,
section[style*="background:#0b0b0b"] p,
section[style*="background: #0b0b0b"] p,
section[style*="background:var(--rennen-black)"] p,
section[style*="background: var(--rennen-black)"] p {
color: rgba(255,255,255,0.78) !important;
}
.wband strong,
.band h1,
.band h2,
.band h3,
.dark h1,
.dark h2,
.dark h3,
.cta-band h1,
.cta-band h2,
.cta-band h3,
.footer h1,
.footer h2,
.footer h3,
.site-footer h1,
.site-footer h2,
.site-footer h3,
section[style*="background:#0b0b0b"] h1,
section[style*="background:#0b0b0b"] h2,
section[style*="background:#0b0b0b"] h3,
section[style*="background: #0b0b0b"] h1,
section[style*="background: #0b0b0b"] h2,
section[style*="background: #0b0b0b"] h3,
section[style*="background:var(--rennen-black)"] h1,
section[style*="background:var(--rennen-black)"] h2,
section[style*="background:var(--rennen-black)"] h3,
section[style*="background: var(--rennen-black)"] h1,
section[style*="background: var(--rennen-black)"] h2,
section[style*="background: var(--rennen-black)"] h3 {
color: var(--rennen-white) !important;
}
@media (max-width: 900px) {
.brand-grid,
.partner-grid,
.brand-partner-grid,
.brands-grid {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
}
.brand-card,
.partner-card,
.brand-partner-card,
.brands-grid > *,
.brand-grid > *,
.partner-grid > *,
.brand-partner-grid > * {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-wrap: anywhere;
}
}
/* ── V14 CONTACT PAGE RESPONSIVE SAFETY PATCH — 2026-06-08 ──
Fixes mobile horizontal overflow caused by inline two-column contact layout
and long NAP/social strings. Desktop remains unchanged. */
@media (max-width: 960px) {
section[aria-labelledby="contact-h1"] {
display: block !important;
grid-template-columns: 1fr !important;
min-height: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
section[aria-labelledby="contact-h1"] > div {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 32px 20px !important;
border-right: 0 !important;
}
section[aria-labelledby="contact-h1"] > div:first-child {
border-bottom: 1px solid var(--rule-strong) !important;
}
#contact-h1 {
font-size: 54px !important;
line-height: 0.9 !important;
}
section[aria-labelledby="contact-h1"] .nap-block,
section[aria-labelledby="contact-h1"] .nap-line,
section[aria-labelledby="contact-h1"] .nap-content,
section[aria-labelledby="contact-h1"] .nap-value,
section[aria-labelledby="contact-h1"] .form-grid,
section[aria-labelledby="contact-h1"] .form-field,
section[aria-labelledby="contact-h1"] form,
section[aria-labelledby="contact-h1"] .btns {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
section[aria-labelledby="contact-h1"] .nap-value,
section[aria-labelledby="contact-h1"] .nap-value a {
overflow-wrap: anywhere !important;
word-break: normal !important;
}
section[aria-labelledby="contact-h1"] .btns a,
section[aria-labelledby="contact-h1"] button.btn-primary {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
}
@media (max-width: 420px) {
section[aria-labelledby="contact-h1"] > div {
padding: 28px 20px !important;
}
#contact-h1 {
font-size: 50px !important;
}
}
/* ── FINAL LAUNCH PATCH: Owner Circle + Retromotive mobile safety — 2026-06-08 ──
Fixes launch-audit mobile overflow on Owner Circle and oversized Retromotive
mobile hero headline. Desktop/tablet presentation is intentionally unchanged. */
@media (max-width: 960px) {
section[aria-labelledby="oc-h1"],
section[aria-labelledby="rt-h1"] {
display: block !important;
grid-template-columns: 1fr !important;
min-height: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
section[aria-labelledby="oc-h1"] > div,
section[aria-labelledby="rt-h1"] > div {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 34px 22px !important;
border-right: 0 !important;
}
section[aria-labelledby="oc-h1"] > div:first-child,
section[aria-labelledby="rt-h1"] > div:first-child {
border-bottom: 1px solid var(--rule-strong) !important;
}
#oc-h1 {
font-size: clamp(48px, 15vw, 58px) !important;
line-height: 0.9 !important;
}
#rt-h1 {
font-size: clamp(50px, 16vw, 64px) !important;
line-height: 0.9 !important;
letter-spacing: 0.015em !important;
overflow-wrap: normal !important;
}
section[aria-labelledby="oc-h1"] form,
section[aria-labelledby="oc-h1"] .form-grid,
section[aria-labelledby="oc-h1"] .form-field,
section[aria-labelledby="oc-h1"] .form-input,
section[aria-labelledby="oc-h1"] .form-select,
section[aria-labelledby="oc-h1"] .form-textarea,
section[aria-labelledby="oc-h1"] .oc-perks,
section[aria-labelledby="oc-h1"] .oc-perk,
section[aria-labelledby="oc-h1"] #oc-success,
section[aria-labelledby="rt-h1"] .family-grid,
section[aria-labelledby="rt-h1"] .family-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
section[aria-labelledby="oc-h1"] .form-grid,
section[aria-labelledby="rt-h1"] .family-grid {
grid-template-columns: 1fr !important;
}
section[aria-labelledby="oc-h1"] label,
section[aria-labelledby="oc-h1"] .form-disclaimer,
section[aria-labelledby="oc-h1"] #oc-success p,
section[aria-labelledby="rt-h1"] p,
section[aria-labelledby="rt-h1"] a {
overflow-wrap: anywhere !important;
word-break: normal !important;
}
section[aria-labelledby="oc-h1"] button.btn-primary,
section[aria-labelledby="rt-h1"] .btns a,
section[aria-labelledby="rt-h1"] .btn-ghost,
section[aria-labelledby="rt-h1"] .btn-primary,
section[aria-labelledby="rt-h1"] .btn-red {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
}
@media (max-width: 420px) {
section[aria-labelledby="oc-h1"] > div,
section[aria-labelledby="rt-h1"] > div {
padding: 30px 20px !important;
}
#oc-h1 {
font-size: 50px !important;
}
#rt-h1 {
font-size: 56px !important;
}
}
/* ── MOBILE ISSUE FIXES — 2026-06-09 ── */
/* Fix 1: Reviews grid — override inline style on mobile */
@media (max-width: 767px) {
.revs[style] {
grid-template-columns: 1fr !important;
}
.rev-t {
font-size: 14px !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
}
}
/* Fix 2: Dealer-Level / Positioning section — stack on mobile */
@media (max-width: 767px) {
section[aria-labelledby="pos-h"] {
grid-template-columns: 1fr !important;
}
section[aria-labelledby="pos-h"] > div:first-child {
padding: 32px 24px 16px !important;
border-right: none !important;
border-bottom: 1px solid var(--rule-strong) !important;
}
section[aria-labelledby="pos-h"] > div:last-child {
padding: 24px 24px 32px !important;
}
#pos-h {
font-size: 40px !important;
}
}
/* Fix 3: Mobile menu — hide duplicate CTA buttons inside m-menu,
keep only the mob-cta bar at bottom */
@media (max-width: 767px) {
.m-menu .btns,
.m-menu .btn-red,
.m-menu .btn-ghost,
.m-menu .n-cta {
display: none !important;
}
}
/* ── MOBILE HTML FIX PATCH — 2026-06-09 ── */
/* Positioning / Dealer-Level section — desktop */
.pos-section {
display: grid;
grid-template-columns: 1fr 2fr;
border-bottom: 1px solid var(--rule-strong);
}
.pos-left {
padding: 56px 40px;
border-right: 1px solid var(--rule-strong);
display: flex;
align-items: center;
}
.pos-right {
padding: 56px 40px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
/* Positioning section — mobile stack */
@media (max-width: 767px) {
.pos-section {
grid-template-columns: 1fr;
}
.pos-left {
padding: 32px 20px 20px;
border-right: none;
border-bottom: 1px solid var(--rule-strong);
}
.pos-right {
padding: 24px 20px 32px;
}
#pos-h {
font-size: 38px !important;
line-height: 0.9 !important;
}
}
/* Reviews — mobile single column (now no inline style to fight) */
@media (max-width: 767px) {
.revs {
grid-template-columns: 1fr !important;
}
.rev {
border-right: none !important;
border-bottom: 1px solid var(--rule-strong);
}
.rev:last-child {
border-bottom: none;
}
.rev-t {
font-size: 14px !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
}