/* ============================================================
BIGG BOSS — Secure in Style
Design system: brushed-brass on ink, engineering precision
============================================================ */
/* For production, prefer loading these via +
in the HTML instead of @import — it lets
the browser discover and fetch the fonts earlier. Kept as @import here
so this file stays fully self-contained. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Work+Sans:wght@300;400;500;600;700&display=swap');
:root{
/* Palette */
--ink: #14120f;
--ink-soft: #211e19;
--paper: #f3efe6;
--paper-dim: #ece5d4;
--white: #ffffff;
--brass: #b6893f;
--brass-light: #d9b876;
--brass-dark: #8f6a2c;
--steel: #6d6b64;
--steel-light: #9a978d;
--line: #e4ddcc;
--line-dark: #3a362e;
--red: #a33b2f;
/* Type */
--f-display: 'Fraunces', Georgia, serif;
--f-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
/* Scale */
--step-1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
--step0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
--step1: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
--step2: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
--step3: clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
--step4: clamp(2.6rem, 2rem + 2.6vw, 4.2rem);
--radius: 2px;
--container: 1240px;
--header-h: 92px;
/* Spacing */
--space-1: 8px;
--space-2: 12px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
/* Motion */
--transition-fast: 0.18s ease;
--transition-base: 0.22s ease;
--transition-slow: 0.3s ease;
color-scheme: light;
}
@media (max-width: 900px){
:root{ --header-h: 76px; }
}
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
font-family: var(--f-body);
color: var(--ink);
background: var(--white);
font-size: var(--step0);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; }
/* Scoped nav/UI list reset — keeps bullets intact for CMS/content lists */
.site-header ul,
.main-nav ul,
.dropdown,
.submenu,
.side-nav ul,
.footer-col ul,
.social-row,
.cat-filter-list,
.pd-thumbs,
.pagination,
.pd-trust,
.hero-actions,
.carousel-dots{
list-style:none;
margin:0;
padding:0;
}
h1,h2,h3,h4{
font-family: var(--f-display);
font-weight: 500;
line-height: 1.12;
margin: 0 0 0.5em;
letter-spacing: -0.01em;
color: var(--ink);
}
h1{ font-size: var(--step4); font-weight: 500; }
h2{ font-size: var(--step3); }
h3{ font-size: var(--step2); }
h4{ font-size: var(--step1); font-family: var(--f-body); font-weight: 600; }
p{ margin: 0 0 1em; color: var(--steel); max-width: 62ch; }
.lede{ font-size: var(--step1); color: var(--ink-soft); max-width: 46ch; }
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; }
.container{
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
/* Prevents long unbreakable content from forcing grid/flex tracks wider than intended. */
.hero-copy,
.split > *,
.subpage-layout > *,
.footer-top > *,
.pd-grid > *{
min-width: 0;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:10px;
padding: 15px 30px;
font-family: var(--f-body);
font-weight: 600;
font-size: 0.95rem;
border-radius: var(--radius);
border: 1px solid transparent;
cursor:pointer;
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
white-space: nowrap;
}
.btn-brass{ background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn-brass:hover{ background: var(--brass-dark); border-color: var(--brass-dark); color: var(--white); }
.btn-line{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover{ background: var(--ink); color: var(--white); }
.btn-line-light{ background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-line-light:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-sm{ padding: 11px 22px; font-size: 0.85rem; }
.btn:disabled,
.btn[aria-disabled="true"]{
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ---------- Header ---------- */
.site-header{
position: sticky;
top:0;
z-index: 500;
background: var(--white);
border-bottom: 1px solid var(--line);
height: var(--header-h);
}
.site-header .container{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height: 52px; width:auto; }
.main-nav{ display:flex; height:100%; }
.main-nav > ul{ display:flex; height:100%; }
.main-nav > ul > li{ position:relative; height:100%; display:flex; align-items:center; }
.main-nav > ul > li > a{
display:flex;
align-items:center;
height:100%;
padding: 0 20px;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink-soft);
border-bottom: 2px solid transparent;
transition: color 0.18s ease, border-color 0.18s ease;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a{
color: var(--ink);
border-bottom-color: var(--brass);
}
.main-nav > ul > li.has-dropdown > a::after{
content:'';
display:inline-block;
width:7px; height:7px;
margin-left:7px;
border-right: 1.5px solid var(--steel-light);
border-bottom: 1.5px solid var(--steel-light);
transform: rotate(45deg) translateY(-2px);
transition: transform 0.2s ease;
}
.main-nav > ul > li.has-dropdown:hover > a::after{ transform: rotate(225deg) translateY(2px); }
.dropdown{
position:absolute;
top:100%;
left:0;
min-width: 300px;
background: var(--ink);
border-top: 2px solid var(--brass);
padding: 10px 0;
opacity:0;
visibility:hidden;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.main-nav > ul > li.has-dropdown:hover .dropdown,
.main-nav > ul > li.has-dropdown:focus-within .dropdown,
.main-nav > ul > li.has-dropdown.is-open .dropdown{
opacity:1; visibility:visible; transform: translateY(0);
}
.dropdown li{ position:relative; }
.dropdown li > a{
display:flex;
align-items:center;
justify-content:space-between;
padding: 13px 26px;
font-size: 0.9rem;
color: rgba(255,255,255,0.82);
transition: background 0.15s ease, color 0.15s ease;
}
.dropdown li > a:hover{ background: rgba(255,255,255,0.06); color: var(--brass-light); }
.dropdown .has-submenu > a::after{
content:'';
width:6px; height:6px;
border-right: 1.5px solid rgba(255,255,255,0.5);
border-top: 1.5px solid rgba(255,255,255,0.5);
transform: rotate(45deg);
}
.submenu{
position:absolute;
top:-2px;
left:100%;
min-width: 260px;
background: var(--ink-soft);
border-top: 2px solid var(--brass);
padding: 10px 0;
opacity:0; visibility:hidden;
transform: translateX(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.dropdown li.has-submenu:hover .submenu,
.dropdown li.has-submenu:focus-within .submenu,
.dropdown li.has-submenu.is-open .submenu{
opacity:1; visibility:visible; transform: translateX(0);
}
.header-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.header-cta .btn{ padding: 12px 24px; }
.nav-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding: 8px;
}
.nav-toggle span{ width:24px; height:2px; background: var(--ink); transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
/* ---------- Breadcrumb / page header ---------- */
.page-hero{
background: var(--ink);
color: var(--white);
padding: 72px 0 56px;
position:relative;
overflow:hidden;
}
.page-hero .eyebrow{ color: var(--brass-light); }
.page-hero h1{ color: var(--white); max-width: 18ch; }
.page-hero p{ color: rgba(255,255,255,0.7); }
.breadcrumb{
display:flex; flex-wrap:wrap; gap:8px;
font-size: 0.85rem;
color: rgba(255,255,255,0.5);
margin-bottom: 22px;
}
.breadcrumb a{ color: rgba(255,255,255,0.75); }
.breadcrumb a:hover{ color: var(--brass-light); }
.breadcrumb span{ color: rgba(255,255,255,0.35); }
.eyebrow{
display:inline-block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--brass-dark);
margin-bottom: 14px;
}
/* ---------- Sections ---------- */
.section{ padding: 96px 0; }
.section-tight{ padding: 64px 0; }
.section-paper{ background: var(--paper); }
.section-ink{ background: var(--ink); color: var(--white); }
.section-ink h2, .section-ink h3, .section-ink h4{ color: var(--white); }
.section-ink p{ color: rgba(255,255,255,0.68); }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
hr.rule{ border:none; border-top:1px solid var(--line); margin: 0; }
/* ---------- Hero (home) — full-width horizontal banner ---------- */
.hero{
position: relative;
background: var(--ink);
color: var(--white);
display:flex;
align-items:center;
min-height: 640px;
overflow: hidden;
isolation: isolate;
}
.hero-art{
position:absolute;
inset: 0;
z-index: -2;
padding: 0;
border-left: none;
background: linear-gradient(155deg, #1c1912 0%, #0c0b09 100%);
display:block;
}
.hero::before{
content:"";
position:absolute;
inset:0;
z-index: -1;
background: linear-gradient(90deg, rgba(10,9,7,0.88) 0%, rgba(10,9,7,0.55) 42%, rgba(10,9,7,0.15) 75%);
}
.hero-copy{
position: relative;
z-index: 1;
display:flex;
flex-direction:column;
justify-content:center;
padding: 60px 5vw 60px 5vw;
max-width: 620px;
}
.hero-copy h1{ color: var(--white); font-size: var(--step4); }
.hero-copy p{ color: rgba(255,255,255,0.68); font-size: var(--step1); max-width: 40ch; }
.hero-actions{ display:flex; gap:16px; margin-top: 12px; flex-wrap:wrap; }
.hero-art svg{ width: 100%; max-width: 420px; height:auto; }
/* ---------- Stat strip ---------- */
.stat-strip{
display:grid;
grid-template-columns: repeat(4, 1fr);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.stat-strip div{
padding: 34px 28px;
border-left: 1px solid var(--line);
text-align:left;
}
.stat-strip div:first-child{ border-left:none; }
.stat-num{
font-family: var(--f-display);
font-size: var(--step3);
color: var(--ink);
display:block;
margin-bottom: 4px;
}
.stat-label{ font-size: 0.88rem; color: var(--steel); }
/* ---------- Grids & cards ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.tile{
background: var(--white);
border: 1px solid var(--line);
padding: 40px 32px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.tile:hover{ border-color: var(--brass); }
.tile-icon{ width:44px; height:44px; margin-bottom: 22px; color: var(--brass); }
.tile h3, .tile h4{ margin-bottom: 10px; }
.tile p{ margin-bottom: 18px; font-size: 0.95rem; }
.tile-link{ font-weight:600; font-size: 0.9rem; color: var(--ink); border-bottom:1px solid var(--brass); padding-bottom:2px; }
.tile-link:hover{ color: var(--brass-dark); }
.product-card{
position:relative;
border:1px solid var(--line);
background: var(--white);
overflow:hidden;
}
.product-card .thumb{
aspect-ratio: 4/3;
background: var(--paper);
display:flex; align-items:center; justify-content:center;
border-bottom: 1px solid var(--line);
overflow:hidden;
}
.product-card .thumb img{ width:100%; height:100%; object-fit:contain; padding:12px; }
.product-card .thumb svg{ width:46%; height:46%; color: var(--brass); }
.product-card .body{ padding: 26px 26px 30px; display:flex; flex-direction:column; }
.product-card h3{ font-size: var(--step1); margin-bottom:8px; }
.product-card p{ font-size:0.92rem; margin-bottom:16px; }
.product-card .model-no{ font-size:0.78rem; color: var(--steel-light); margin-bottom:6px; display:block; }
.product-card .badge-inactive{ position:absolute; top:12px; left:12px; }
/* ---------- Split feature ---------- */
.split{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media{
aspect-ratio: 4/3;
background: var(--paper-dim);
border:1px solid var(--line);
display:flex; align-items:center; justify-content:center;
}
.split-media svg{ width:52%; }
/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:48px; counter-reset: step; }
.step{ border-top: 1px solid var(--line-dark); padding-top: 24px; }
.section-paper .step{ border-top-color: var(--line); }
.step-num{
font-family: var(--f-display);
font-size: 1.6rem;
color: var(--brass);
display:block;
margin-bottom: 14px;
}
/* ---------- Quote / reference ---------- */
.quote-panel{
background: var(--ink);
color: var(--white);
padding: 80px 5vw;
text-align:center;
}
.quote-panel blockquote{
font-family: var(--f-display);
font-style: italic;
font-size: var(--step2);
max-width: 820px;
margin: 0 auto 26px;
line-height:1.35;
color: var(--white);
}
.quote-cite{ color: var(--brass-light); font-size:0.9rem; font-style:normal; }
/* ---------- News cards ---------- */
.news-card{ border:1px solid var(--line); background:var(--white); }
.news-date{ font-size:0.82rem; color: var(--brass-dark); font-weight:600; margin-bottom:10px; display:block; }
.news-card .body{ padding: 26px; }
.news-card .thumb{ aspect-ratio: 16/10; background: var(--paper); border-bottom:1px solid var(--line); }
/* ---------- CTA band ---------- */
.cta-band{
background: var(--brass);
color: var(--ink);
padding: 56px 0;
}
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cta-band h2{ margin:0; font-size: var(--step2); }
.cta-band .btn-line{ border-color: var(--ink); }
/* ---------- Sidebar / subpage layout ---------- */
.subpage-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 64px; align-items:start; }
.side-nav{ border-top: 2px solid var(--ink); padding-top: 8px; position:sticky; top: calc(var(--header-h) + 32px); }
.side-nav .side-title{ font-family: var(--f-body); font-weight:700; font-size:0.78rem; letter-spacing:0.05em; color:var(--steel); padding: 14px 0 10px; }
.side-nav li a{
display:block;
padding: 12px 4px;
font-size:0.93rem;
color: var(--ink-soft);
border-bottom: 1px solid var(--line);
}
.side-nav li a:hover{ color: var(--brass-dark); }
.side-nav li.current a{ color: var(--brass-dark); font-weight:600; }
/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-grid .full{ grid-column: 1 / -1; }
.field label{ display:block; font-size:0.86rem; font-weight:600; color: var(--ink-soft); margin-bottom:8px; }
.field input, .field select, .field textarea{
width:100%;
appearance: none;
border: 1px solid var(--line);
background: var(--white);
padding: 13px 15px;
font-family: var(--f-body);
font-size: 0.95rem;
color: var(--ink);
border-radius: var(--radius);
transition: border-color 0.18s ease, background 0.18s ease;
}
.field select{
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236d6b64' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brass); outline:none; }
.field input::placeholder, .field textarea::placeholder{ color: var(--steel-light); opacity: 1; }
.field textarea{ resize: vertical; min-height: 130px; }
.field input:invalid:not(:placeholder-shown),
.field select:invalid,
.field textarea:invalid:not(:placeholder-shown),
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
border-color: var(--red);
}
.field-hint{ font-size:0.8rem; color: var(--steel-light); margin-top:6px; }
.form-note{ font-size:0.85rem; color: var(--steel); margin-top: 18px; }
.section-ink .field input,
.section-ink .field select,
.section-ink .field textarea {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
color: var(--white);
}
.section-ink .field input:focus,
.section-ink .field select:focus,
.section-ink .field textarea:focus {
border-color: var(--brass-light);
background: rgba(255, 255, 255, 0.08);
}
.section-ink .field select{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d9b876' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.alert{ padding: 16px 20px; border-radius: var(--radius); font-size:0.92rem; margin-bottom: 28px; }
.alert-success{ background:#eef4ea; border:1px solid #bcd6a9; color:#3c6b2c; }
.alert-error{ background:#f8ecea; border:1px solid #e3b8b0; color:#8a3226; }
/* ---------- Download / doc list (service center) ---------- */
.doc-list{ border-top: 1px solid var(--line); }
.doc-row{
display:flex; align-items:center; justify-content:space-between; gap:20px;
padding: 22px 4px;
border-bottom: 1px solid var(--line);
}
.doc-row .doc-name{ font-weight:600; color: var(--ink); }
.doc-row .doc-meta{ font-size:0.82rem; color: var(--steel-light); margin-top:4px; }
.doc-row .doc-icon{ width:34px; height:34px; flex-shrink:0; color: var(--brass); }
.doc-row .doc-left{ display:flex; align-items:center; gap:18px; }
/* ---------- Timeline (history) ---------- */
.timeline{ position:relative; padding-left: 36px; border-left: 1px solid var(--line-dark); }
.section-paper .timeline{ border-left-color: var(--line); }
.timeline-item{ position:relative; padding-bottom: 48px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
content:'';
position:absolute;
left:-41px; top:4px;
width:9px; height:9px;
border-radius:50%;
background: var(--brass);
}
.timeline-year{ font-family: var(--f-display); font-size:1.4rem; color: var(--brass); margin-bottom:6px; display:block; }
/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,0.65); padding-top: 80px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 56px; }
.footer-brand img{ height:44px; margin-bottom: 18px; }
.footer-brand p{ color: rgba(255,255,255,0.55); font-size:0.9rem; max-width:32ch; }
.footer-col h5{ color: var(--white); font-size:0.85rem; font-weight:600; letter-spacing:0.03em; margin-bottom:18px; }
.footer-col li{ margin-bottom: 11px; }
.footer-col a{ font-size: 0.88rem; color: rgba(255,255,255,0.6); }
.footer-col a:hover{ color: var(--brass-light); }
.footer-bottom{
border-top: 1px solid rgba(255,255,255,0.1);
padding: 24px 0 28px;
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
font-size:0.82rem;
color: rgba(255,255,255,0.4);
}
.footer-bottom a{ color: rgba(255,255,255,0.55); }
.footer-legal a{ margin-left:20px; }
.social-row{ display:flex; gap:14px; margin-top:20px; }
.social-row a{
width:44px; height:44px; border:1px solid rgba(255,255,255,0.2);
display:flex; align-items:center; justify-content:center; border-radius:50%;
transition: border-color 0.2s ease, background 0.2s ease;
}
.social-row a:hover{ border-color: var(--brass); background: rgba(182,137,63,0.12); }
.social-row svg{ width:16px; height:16px; }
/* ---------- Utilities ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.center-col{ max-width: 720px; margin:0 auto; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1080px){
.footer-top{ grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; }
.subpage-layout{ grid-template-columns: 220px 1fr; gap:40px; }
.stat-strip{ grid-template-columns: repeat(2,1fr); }
.stat-strip div:nth-child(3){ border-left:none; }
}
@media (max-width: 900px){
.main-nav{
position: fixed;
top: var(--header-h);
left:0; right:0; bottom:0;
background: var(--ink);
display:block;
height: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y:auto;
padding: 12px 0 40px;
}
.main-nav.is-open{ transform: translateX(0); }
.main-nav > ul{ display:block; height:auto; }
.main-nav > ul > li{ display:block; height:auto; border-bottom: 1px solid rgba(255,255,255,0.08); }
.main-nav > ul > li > a{
height:auto; padding: 18px 24px; color: rgba(255,255,255,0.88);
border-bottom:none; justify-content:space-between; width:100%;
}
.main-nav > ul > li.has-dropdown > a::after{ border-color: rgba(255,255,255,0.5); }
.dropdown{
position:static; opacity:1; visibility:visible; transform:none;
display:none; border-top:none; background: rgba(255,255,255,0.03);
min-width:0; padding:0;
}
.main-nav > ul > li.is-expanded .dropdown{ display:block; }
.submenu{
position:static; opacity:1; visibility:visible; transform:none;
display:none; background: rgba(255,255,255,0.04); border-top:none; padding:0;
}
.dropdown li.is-expanded .submenu{ display:block; }
.dropdown li > a{ padding: 14px 24px 14px 40px; }
.submenu li > a{ padding-left: 56px; }
.header-cta .btn-line{ display:none; }
.nav-toggle{ display:flex; }
.brand img{ height: 40px; }
.hero{ min-height: 480px; }
.hero::before{ background: linear-gradient(180deg, rgba(10,9,7,0.35) 0%, rgba(10,9,7,0.85) 75%); }
.hero-copy{ padding: 44px 24px 52px; max-width:none; }
.split{ grid-template-columns:1fr; gap:36px; }
.split.reverse .split-media{ order:0; }
.grid-3, .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2, .steps{ grid-template-columns: 1fr; }
.stat-strip{ grid-template-columns: 1fr 1fr; }
.subpage-layout{ grid-template-columns: 1fr; }
.side-nav{ position:static; margin-bottom: 40px; }
.footer-top{ grid-template-columns: 1fr 1fr; }
.form-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
.container{ padding: 0 20px; }
.section{ padding: 64px 0; }
h1{ font-size: var(--step3); }
.cta-band .container{ flex-direction:column; align-items:flex-start; }
.footer-top{ grid-template-columns: 1fr; }
.grid-3, .grid-4{ grid-template-columns: 1fr; }
.stat-strip{ grid-template-columns: 1fr; }
.stat-strip div{ border-left:none; border-top:1px solid var(--line); }
.stat-strip div:first-child{ border-top:none; }
.quote-panel blockquote{ font-size: var(--step1); }
}
/* ============================================================
HERO CAROUSEL / SLIDESHOW
============================================================ */
.hero-carousel {
position: relative;
overflow: hidden;
background: var(--ink);
}
.hero-slides {
display: flex;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
width: 100%;
}
/* flex-basis (not a percentage of slide count) — works for any number of slides;
JS should translateX(-N * 100%) for slide N */
.hero-slide {
flex: 0 0 100%;
min-width: 100%;
}
.hero-art img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
border-radius: 0;
display: block;
}
.carousel-controls {
position: absolute;
bottom: 24px;
right: 5vw;
display: flex;
align-items: center;
gap: 16px;
z-index: 10;
}
.carousel-arrow {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: var(--radius);
transition: background 0.2s ease, border-color 0.2s ease;
}
.carousel-arrow:hover {
background: var(--brass);
border-color: var(--brass);
color: var(--ink);
}
.carousel-dots {
display: flex;
gap: 8px;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
border: none;
padding: 0;
transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active {
background: var(--brass);
transform: scale(1.2);
}
@media (max-width: 900px) {
.carousel-controls {
bottom: 16px;
left: 24px;
right: auto;
}
}
.carousel-arrow:focus-visible,
.carousel-dot:focus-visible,
.pd-thumb:focus-visible,
.social-row a:focus-visible{
outline: 2px solid var(--brass-light);
outline-offset: 3px;
}
/* ============================================================
PRODUCT CATALOG & PRODUCT DETAIL (FIXED CONTAINMENT)
============================================================ */
.cat-filter-list li a { display:flex; justify-content:space-between; align-items:center; }
.cat-filter-list .count { font-size:0.78rem; color: var(--steel-light); }
.catalog-search { margin-bottom: 28px; }
.catalog-search form { display:flex; gap:10px; }
.catalog-search input[type="text"] {
flex:1; border:1px solid var(--line); padding:12px 14px; border-radius:var(--radius); font-family:var(--f-body); font-size:0.92rem;
}
.catalog-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.catalog-toolbar .result-count { font-size:0.88rem; color:var(--steel); }
.pagination { display:flex; gap:6px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.pagination a, .pagination span {
min-width:40px; height:40px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); font-size:0.88rem; color:var(--ink-soft); border-radius:var(--radius);
}
.pagination a:hover { border-color:var(--brass); color:var(--brass-dark); }
.pagination .active { background:var(--ink); color:var(--white); border-color:var(--ink); }
.pagination .disabled { opacity:0.4; pointer-events:none; }
/* ---------- Product detail gallery fix ---------- */
.pd-grid {
display: grid;
grid-template-columns: minmax(0, 480px) 1fr;
gap: 56px;
align-items: start;
}
@media (max-width: 860px) {
.pd-grid { grid-template-columns: 1fr; gap: 32px; }
}
.pd-gallery {
position: sticky;
top: calc(var(--header-h) + 32px);
width: 100%;
max-width: 480px;
min-width: 0;
flex-shrink: 0;
}
@media (max-width: 860px) {
.pd-gallery { position: static; max-width: 100%; }
}
.pd-main-frame {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
width: 100%;
max-width: 480px;
aspect-ratio: 1;
overflow: hidden;
box-sizing: border-box;
}
.pd-main-frame img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 24px;
box-sizing: border-box;
}
.pd-badge {
position: absolute;
top: 16px;
left: 16px;
background: var(--ink);
color: var(--brass-light);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
border: 1px solid var(--brass);
z-index: 2;
}
.pd-thumbs { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.pd-thumb {
width:76px; height:76px; border:1px solid var(--line); cursor:pointer; padding:5px; background:var(--white);
}
.pd-thumb img { width:100%; height:100%; object-fit:contain; }
.pd-thumb.active, .pd-thumb:hover { border-color: var(--brass); }
.pd-thumb.is-video { display:flex; align-items:center; justify-content:center; background:var(--ink); }
.pd-thumb.is-video span { color: var(--brass-light); font-size:1.3rem; }
.pd-video-frame {
display: none;
position: relative;
width: 100%;
aspect-ratio: 1;
height: auto;
background: #000;
border: 1px solid var(--line);
overflow: hidden;
}
.pd-video-frame.active { display: block; }
.pd-video-frame video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.pd-model { font-size:0.88rem; color:var(--steel); margin-bottom:20px; }
.pd-model strong { color:var(--ink); }
.pd-trust { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.pd-trust-item { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--ink-soft); }
.pd-trust-item .dot { width:6px; height:6px; border-radius:50%; background:var(--brass); flex:none; }
.pd-spec-table { width:100%; border-collapse:collapse; margin: 20px 0 30px; }
.pd-spec-table tr { border-bottom:1px solid var(--line); }
.pd-spec-table th, .pd-spec-table td { text-align:left; padding:12px 4px; font-size:0.9rem; }
.pd-spec-table th { color:var(--steel); font-weight:500; width:42%; }
.pd-spec-table td { color:var(--ink); font-weight:500; }
/* ============================================================
PAGE HERO WITH BANNER IMAGE (used on Service Center)
Usage: with a
.page-hero-bg > picture > img as the first child.
============================================================ */
.page-hero--banner{
display: flex;
align-items: center;
min-height: clamp(420px, 34vw, 580px);
padding: 64px 0;
isolation: isolate;
}
.page-hero-bg{
position: absolute;
inset: 0;
z-index: -2;
}
.page-hero-bg picture,
.page-hero-bg img{
display: block;
width: 100%;
height: 100%;
}
.page-hero-bg img{
object-fit: cover;
object-position: 75% 30%;
max-width: none;
}
/* Dark fade on the left keeps the text readable and lets the lock show on the right */
.page-hero--banner::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg,
rgba(20,18,15,0.94) 0%,
rgba(20,18,15,0.84) 30%,
rgba(20,18,15,0.40) 52%,
rgba(20,18,15,0) 70%);
}
.page-hero--banner .container{ position: relative; }
.page-hero--banner h1{
max-width: 16ch;
font-size: clamp(2.2rem, 1.6rem + 2vw, 3.5rem);
}
.page-hero--banner .lede{
max-width: 34ch;
color: rgba(255,255,255,0.82);
}
/* Phones: image on top, text underneath (nothing sits on the lock) */
@media (max-width: 720px){
.page-hero--banner{
display: block;
min-height: 0;
padding: 0;
}
.page-hero--banner::before{ display: none; }
.page-hero-bg{
position: relative;
inset: auto;
z-index: auto;
height: 250px;
}
.page-hero-bg img{ object-position: 88% 40%; }
.page-hero-bg::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 90px;
background: linear-gradient(180deg, rgba(20,18,15,0), var(--ink));
}
.page-hero--banner .container{ padding-top: 24px; padding-bottom: 48px; }
.page-hero--banner h1{ max-width: 100%; }
}
/* ---------- Language switcher (DE | EN) ---------- */
.lang-switch{
display:inline-flex;
align-items:center;
border:1px solid var(--line);
border-radius: 999px;
padding: 2px;
font-family: var(--f-body);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1;
}
.lang-switch a{
display:inline-block;
padding: 7px 11px;
border-radius: 999px;
color: var(--steel);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.lang-switch a:hover{ color: var(--ink); }
.lang-switch a.is-active{ background: var(--ink); color: var(--white); }
@media (max-width: 900px){
.header-cta{ gap: 10px; }
.lang-switch a{ padding: 6px 9px; }
}
@media (max-width: 480px){
.header-cta .btn{ display:none; } /* keep the switcher + menu button on very small phones */
}