/* ===================================================================
BIRAČ SISTEM — Premium homepage stylesheet
Inspired by Wallnut.pt visual rhythm. Original implementation.
=================================================================== */
/* ---------- 1. Tokens & resets ---------- */
:root {
/* Brand palette derived from the Birač Sistem logo */
--c-brand-slate: #364D5F; /* deep slate blue */
--c-brand-mid: #5A6D7C; /* medium desaturated blue-gray */
--c-brand-deep: #2F4454; /* dark blue-gray */
--c-brand-bronze: #C8A27D; /* warm bronze (logo BS badge) */
--c-brand-bronze-dim: #A88560;
--c-brand-cream: #E8D6C4; /* light beige */
/* Surfaces */
--c-dark: #1A2A33;
--c-dark-2: #122029;
--c-dark-3: #0D1A22;
--c-light: #F4F1EB;
--c-light-2: #ECE8DF;
--c-text: #1B2A35;
--c-text-muted: #6F8290;
--c-text-soft: #93A4B0;
--c-white: #FFFFFF;
/* Accent system (replaces the previous yellow) */
--c-accent: var(--c-brand-bronze);
--c-accent-dim: var(--c-brand-bronze-dim);
/* Legacy aliases — keep working but now point to bronze accent */
--c-yellow: var(--c-accent);
--c-yellow-dim: var(--c-accent-dim);
--c-blue-grey: var(--c-brand-mid);
--line-light: rgba(27, 42, 53, 0.08); /* dividers on cream */
--line-light-2: rgba(27, 42, 53, 0.16); /* stronger lines on cream */
--line-dark: rgba(255, 255, 255, 0.09); /* dividers on dark */
--line-dark-2: rgba(255, 255, 255, 0.20); /* stronger lines on dark */
--radius-pill: 999px;
--pad-x: clamp(18px, 4vw, 64px);
--max-w: 1600px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* Section eyebrow label size — shared component across all pages.
Matches the homepage "O kompaniji" baseline. Kept as a variable so it
can be tuned in one place, but the value is the canonical 13px. */
--eyebrow-size: 13px;
--font-base: "Inter", "Inter Tight", "Manrope", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
--font-display: "Inter Tight", "Inter", "Manrope", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: auto; /* Lenis handles smooth scroll */
/* Hard guarantee against any fixed/transformed children that visually
escape the viewport on mobile. `overflow-x: clip` does not affect
sticky positioning the way `hidden` can. */
overflow-x: clip;
}
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
body {
font-family: var(--font-base);
font-size: clamp(15px, 1vw, 17px);
line-height: 1.55;
color: var(--c-text);
background: var(--c-light);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
/* ---------- Subtle global grain overlay ----------
Adds barely-perceptible texture across the page so flat dark and cream
sections feel filmic instead of digital. SVG fractal noise as a data URL,
tiled at 220px, blended with overlay so it nudges both highlights and
shadows without harming readability. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9998; /* above content, below preloader (10000) */
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.045;
mix-blend-mode: overlay;
will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
body::before { opacity: 0.025; }
}
img, svg, video { max-width: 100%; display: block; }
a {
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
button {
font: inherit;
background: none;
border: 0;
color: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
ul { list-style: none; }
::selection {
background: var(--c-yellow);
color: var(--c-dark);
}
/* ---------- Custom scrollbar ---------- */
/* Firefox */
html {
scrollbar-width: thin;
scrollbar-color: var(--c-brand-mid) #0E1A21;
}
/* WebKit / Chromium-based browsers */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #0E1A21;
}
::-webkit-scrollbar-thumb {
background: var(--c-brand-mid);
border: 2px solid #0E1A21;
border-radius: 999px;
transition: background 0.3s var(--ease-out);
}
::-webkit-scrollbar-thumb:hover {
background: var(--c-accent);
}
::-webkit-scrollbar-thumb:active {
background: var(--c-accent-dim);
}
::-webkit-scrollbar-corner { background: #0E1A21; }
/* ---------- 2. Layout helpers ---------- */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
position: relative;
}
.section-light {
background: var(--c-light);
color: var(--c-text);
padding: clamp(80px, 10vw, 160px) 0;
position: relative;
}
.section-dark {
background: var(--c-dark);
color: var(--c-white);
padding: clamp(80px, 10vw, 160px) 0;
position: relative;
}
/* ---------- 3. Section labels & rules ---------- */
.section-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--c-text);
margin-bottom: 28px;
}
.section-label .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
transform: scale(0);
transform-origin: center;
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.10);
flex-shrink: 0;
}
.section-label--light { color: var(--c-white); }
.section-rule {
height: 1px;
background: var(--line-light-2);
width: 100%;
transform-origin: left center;
transform: scaleX(0);
margin-bottom: clamp(48px, 6vw, 88px);
}
.section-rule--light { background: var(--line-dark-2); }
/* ---------------------------------------------------------------
Krovni + Zidni pages — canonical eyebrow → heading spacing
----------------------------------------------------------------
Mirrors the hero's "● LABEL" pattern across every section on
krovni-sendvic-paneli.html and zidni-sendvic-paneli.html: dot
always visible (the GSAP scroll reveal is unreliable for sections
that paint above the first trigger), section-rule hidden, h2
margin-top zeroed, eyebrow margin-bottom matches the hero's
14px. The zidni page reuses the same .krovni-intro / .krovni-
gallery class hooks as style anchors. The standing rule (no
large empty band between eyebrow and heading) is in CLAUDE.md.
--------------------------------------------------------------- */
body.page-category--krovni .section-label,
body.page-category--zidni .section-label,
body.page-category--srafovska .section-label,
body.page-category--ostala .section-label {
margin-bottom: 14px;
}
body.page-category--krovni .section-label .dot,
body.page-category--zidni .section-label .dot,
body.page-category--srafovska .section-label .dot,
body.page-category--ostala .section-label .dot {
transform: scale(1);
}
body.page-category--krovni .section-rule,
body.page-category--zidni .section-rule,
body.page-category--srafovska .section-rule,
body.page-category--ostala .section-rule {
display: none;
}
body.page-category--krovni .section-heading,
body.page-category--zidni .section-heading,
body.page-category--srafovska .section-heading,
body.page-category--ostala .section-heading {
margin-top: 0;
}
/* Collapse the inner-wrapper margins that the original design used to
pad away from the now-hidden section-rule. Without them zeroed, the
14px eyebrow margin would still be followed by 24–32px of wrapper
space before the heading. */
body.page-category--krovni .krovni-intro-grid,
body.page-category--krovni .krovni-gallery-head,
body.page-category--krovni .category-products-head,
body.page-category--zidni .krovni-intro-grid,
body.page-category--zidni .krovni-gallery-head,
body.page-category--zidni .category-products-head,
body.page-category--srafovska .krovni-intro-grid,
body.page-category--srafovska .krovni-gallery-head,
body.page-category--srafovska .category-products-head,
body.page-category--ostala .krovni-intro-grid,
body.page-category--ostala .krovni-gallery-head,
body.page-category--ostala .category-products-head {
margin-top: 0;
}
/* ---------------------------------------------------------------
Category-page section padding — tighten the inter-section gaps
----------------------------------------------------------------
The base sections (.krovni-intro, .krovni-gallery, .category-
products, .final-cta) were authored at ~64–96px top + bottom
for spacious standalone use. On category pages where 4–5 of
these sections stack, that produces huge empty bands. Reduce
by ~30% inside the .page-category--* scope so sections breathe
without dominating the page. The standing rule (no large empty
band between sections on category pages) is in CLAUDE.md.
Old values (preserved outside this scope for other pages):
.krovni-intro → 56px 0 80px → 36px 0 52px
.krovni-gallery → 80px 0 → 52px 0
.category-products → 64px 0 96px → 40px 0 60px
.final-cta → clamp(80,12vh,160) → clamp(56,9vh,110)
--------------------------------------------------------------- */
body.page-category--krovni .krovni-intro,
body.page-category--zidni .krovni-intro,
body.page-category--srafovska .krovni-intro,
body.page-category--ostala .krovni-intro {
padding: 36px 0 52px;
}
body.page-category--krovni .krovni-gallery,
body.page-category--zidni .krovni-gallery,
body.page-category--srafovska .krovni-gallery,
body.page-category--ostala .krovni-gallery {
padding: 52px 0;
}
body.page-category--krovni .category-products,
body.page-category--zidni .category-products,
body.page-category--srafovska .category-products,
body.page-category--ostala .category-products {
padding: 40px 0 60px;
}
body.page-category--krovni .final-cta,
body.page-category--zidni .final-cta,
body.page-category--srafovska .final-cta,
body.page-category--ostala .final-cta {
padding: clamp(56px, 9vh, 110px) 0;
}
/* ---------------------------------------------------------------
Šrafovska — single-card layout
----------------------------------------------------------------
One product card paired with an info aside ("Treba vam konkretan
šraf? Pošaljite dimenzije..."). Card sits left at a sensible
max-width; the aside fills the right column with copy + direct
contact. Stacks on mobile.
--------------------------------------------------------------- */
.srafovska-single-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px;
align-items: stretch;
}
.srafovska-single-card {
margin: 0;
max-width: 520px;
}
.srafovska-single-info {
background: #fff;
border-radius: 14px;
padding: 36px;
display: flex;
flex-direction: column;
gap: 28px;
border: 1px solid rgba(26, 42, 51, 0.08);
}
.srafovska-single-info-eyebrow {
display: block;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-accent, #C8A27D);
font-weight: 700;
margin-bottom: 12px;
}
.srafovska-single-info-title {
font-family: var(--font-display, inherit);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 700;
line-height: 1.2;
color: var(--c-dark, #1A2A33);
margin: 0 0 12px;
}
.srafovska-single-info-block p {
color: rgba(26, 42, 51, 0.78);
line-height: 1.55;
margin: 0 0 16px;
}
.srafovska-single-info-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.srafovska-single-info-list li {
position: relative;
padding-left: 22px;
color: var(--c-dark, #1A2A33);
font-size: 0.95rem;
line-height: 1.45;
}
.srafovska-single-info-dot {
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent, #C8A27D);
}
.srafovska-single-info-contact {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 24px;
border-top: 1px solid rgba(26, 42, 51, 0.08);
}
.srafovska-single-info-contact-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.55);
font-weight: 700;
margin-bottom: 4px;
}
.srafovska-single-info-contact-link {
color: var(--c-dark, #1A2A33);
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
transition: color .22s var(--ease-out, ease-out);
}
.srafovska-single-info-contact-link:hover {
color: var(--c-accent, #C8A27D);
}
.srafovska-single-info-contact-link--alt {
font-size: 0.95rem;
font-weight: 500;
}
.srafovska-single-info-contact-note {
font-size: 0.85rem;
color: rgba(26, 42, 51, 0.6);
margin: 6px 0 0;
}
@media (max-width: 880px) {
.srafovska-single-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.srafovska-single-card {
max-width: none;
}
.srafovska-single-info {
padding: 28px 24px;
}
}
.section-heading {
font-family: var(--font-display);
font-size: clamp(36px, 5.4vw, 84px);
line-height: 1.04;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--c-text);
max-width: 18ch;
margin-bottom: clamp(48px, 6vw, 88px);
}
.section-heading--light { color: var(--c-white); }
.big-paragraph {
font-size: clamp(22px, 2.6vw, 42px);
line-height: 1.22;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--c-text);
max-width: 22ch;
}
.hl-yellow {
color: var(--c-yellow);
font-weight: 500;
}
/* line-reveal mask wrapper used by JS split */
.split-line {
display: block;
overflow: hidden;
padding-bottom: 0.05em;
}
.split-line > span {
display: block;
transform: translateY(110%);
will-change: transform;
}
/* ---------- 4. Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
font-family: inherit;
font-weight: 500;
text-decoration: none;
transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn-pill {
padding: 14px 18px 14px 26px;
border-radius: var(--radius-pill);
font-size: 15px;
border: 1px solid transparent;
line-height: 1;
position: relative;
}
.btn-pill > span:first-child { white-space: nowrap; }
.btn-arrow {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid currentColor;
transition:
background 0.4s var(--ease-out),
color 0.4s var(--ease-out),
transform 0.4s var(--ease-out),
border-color 0.4s var(--ease-out);
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.btn-arrow svg {
transition: transform 0.45s var(--ease-out);
will-change: transform;
}
.btn-pill:hover .btn-arrow {
background: currentColor;
}
.btn-pill:hover .btn-arrow svg {
color: var(--btn-arrow-hover, var(--c-dark));
transform: translateX(3px);
}
/* solid yellow */
.btn-pill--solid {
background: var(--c-yellow);
color: var(--c-dark);
border-color: var(--c-yellow);
--btn-arrow-hover: var(--c-yellow);
}
.btn-pill--solid:hover { background: var(--c-dark); color: var(--c-yellow); border-color: var(--c-dark); }
.btn-pill--solid:hover .btn-arrow { background: var(--c-yellow); }
.btn-pill--solid:hover .btn-arrow svg { color: var(--c-dark); }
/* ghost light = on dark backgrounds (white text/border) */
.btn-pill--ghost-light {
color: var(--c-white);
border-color: var(--line-dark-2);
background: transparent;
--btn-arrow-hover: var(--c-dark);
}
.btn-pill--ghost-light:hover { background: var(--c-white); color: var(--c-dark); border-color: var(--c-white); }
.btn-pill--ghost-light:hover .btn-arrow { background: var(--c-dark); border-color: var(--c-dark); }
.btn-pill--ghost-light:hover .btn-arrow svg { color: var(--c-white); }
/* ghost dark = on light backgrounds (dark text/border) */
.btn-pill--ghost-dark {
color: var(--c-dark);
border-color: var(--line-light-2);
background: transparent;
--btn-arrow-hover: var(--c-white);
}
.btn-pill--ghost-dark:hover { background: var(--c-dark); color: var(--c-white); border-color: var(--c-dark); }
.btn-pill--ghost-dark:hover .btn-arrow { background: var(--c-white); border-color: var(--c-white); }
.btn-pill--ghost-dark:hover .btn-arrow svg { color: var(--c-dark); }
/* ghost (header on hero) */
.btn-pill--ghost {
color: var(--c-white);
border-color: rgba(255,255,255,0.4);
background: transparent;
--btn-arrow-hover: var(--c-dark);
}
.btn-pill--ghost:hover { background: var(--c-yellow); color: var(--c-dark); border-color: var(--c-yellow); }
.btn-pill--ghost:hover .btn-arrow { background: var(--c-dark); border-color: var(--c-dark); }
.btn-pill--ghost:hover .btn-arrow svg { color: var(--c-yellow); }
/* ---------- 5. Header ---------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
/* Use logical-side padding so iOS notch / safe area is respected on the right edge */
padding: 18px var(--pad-x);
padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px));
padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px));
transition: padding 0.45s var(--ease-out);
background: linear-gradient(180deg, rgba(13,26,34,0.55) 0%, rgba(13,26,34,0) 100%);
isolation: isolate;
}
/* Background plate that slides down from above when scrolled — gives the
"sticky bar arriving from the top" feel */
.site-header-bg {
position: absolute;
inset: 0;
background: rgba(18, 32, 41, 0.92);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--line-dark);
transform: translateY(-100%);
transition: transform 0.6s var(--ease-out);
z-index: -1;
will-change: transform;
}
.site-header[data-state="scrolled"] {
padding: 12px var(--pad-x);
background: transparent;
}
.site-header[data-state="scrolled"] .site-header-bg {
transform: translateY(0);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
max-width: var(--max-w);
margin: 0 auto;
}
.header-actions {
display: inline-flex;
align-items: center;
gap: 14px;
}
/* Cart button */
.cart-button {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--c-white);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
flex-shrink: 0;
}
.cart-button:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
transform: translateY(-1px);
}
.cart-count {
position: absolute;
top: -3px;
right: -3px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--c-accent);
color: var(--c-dark);
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
letter-spacing: 0;
pointer-events: none;
box-shadow: 0 0 0 2px rgba(18, 32, 41, 0.92);
}
.brand {
display: inline-flex;
align-items: center;
color: var(--c-white);
line-height: 1;
flex-shrink: 0;
}
.brand img {
width: clamp(118px, 11vw, 170px);
height: auto;
display: block;
/* original logo colors preserved */
transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
/* subtle brightness lift so the dark logo art reads cleanly over dark hero */
filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.35));
}
.brand:hover img { opacity: 0.88; }
/* Legacy text-mark fallbacks (still used in some specific spots if no img) */
.brand-mark {
font-weight: 800;
font-size: 20px;
letter-spacing: 0.06em;
font-family: var(--font-display);
}
.brand-mark-accent { color: var(--c-yellow); font-weight: 800; }
.brand-sub {
margin-top: 6px;
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
.primary-nav { transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out); }
.primary-nav ul {
display: flex;
align-items: center;
gap: 36px;
}
.nav-link {
position: relative;
color: var(--c-white);
font-size: 15px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 0;
transition: color 0.25s var(--ease-out);
}
.nav-link:hover { color: var(--c-yellow); }
.nav-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-yellow);
display: inline-block;
opacity: 0;
transform: scale(0);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.nav-link.is-active .nav-dot { opacity: 1; transform: scale(1); }
.header-cta {
transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}
.menu-toggle {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--c-white);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-pill);
padding: 11px 18px 11px 20px;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
flex-shrink: 0;
}
.menu-toggle:hover { background: var(--c-accent); color: var(--c-dark); border-color: var(--c-accent); }
.menu-toggle-icon {
width: 22px; height: 18px;
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.menu-toggle-icon span {
height: 1.5px;
background: currentColor;
transition: transform 0.35s var(--ease-out), width 0.3s var(--ease-out);
width: 22px;
display: block;
}
.menu-toggle-icon span:last-child { width: 14px; align-self: flex-end; }
.menu-toggle:hover .menu-toggle-icon span:last-child { width: 22px; }
/* Nav links keep visible across all scroll states on desktop */
/* ---------- 6. Hero (fullscreen slider) ---------- */
.hero {
position: relative;
height: 100vh; /* legacy fallback */
height: 100svh; /* small viewport (excludes mobile UI) */
width: 100%;
overflow: hidden;
color: var(--c-white);
background: #0B1418;
isolation: isolate;
}
@supports (height: 100dvh) {
.hero { height: 100dvh; } /* dynamic viewport for modern mobile browsers */
}
.hero-slider {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slide {
position: absolute;
inset: 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
will-change: opacity;
overflow: hidden;
}
.hero-slide.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.hero-slide-image {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
background-color: #0B1418;
filter: saturate(0.9) contrast(1.05) brightness(0.92);
transform: scale(1.05);
transform-origin: center center;
will-change: transform, clip-path;
clip-path: inset(0 0 0 0);
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
/* Per-slide subject framing — all three new images crop best at
center center on both desktop and mobile portrait. Slide 1 keeps
the Birač Sistem signage centered; slide 2 keeps the modern
facade in frame; slide 3 keeps the wall-panel seam centered. */
.hero-slide[data-index="0"] .hero-slide-image { object-position: center center; }
.hero-slide[data-index="1"] .hero-slide-image { object-position: center center; }
.hero-slide[data-index="2"] .hero-slide-image { object-position: center center; }
.hero-slide-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(11,20,24,0.66) 0%, rgba(11,20,24,0.40) 30%, rgba(11,20,24,0.58) 65%, rgba(11,20,24,0.94) 100%),
linear-gradient(90deg, rgba(11,20,24,0.58) 0%, rgba(11,20,24,0.16) 45%, rgba(11,20,24,0.48) 100%);
z-index: 1;
}
/* Prev/Next arrows — visible only on hover */
.hero-arrow {
position: absolute;
top: 50%;
z-index: 5;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(13, 26, 34, 0.28);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.82);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: translateY(-50%) scale(0.92);
pointer-events: none;
transition:
opacity 0.5s var(--ease-out),
transform 0.5s var(--ease-out),
background 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
color 0.35s var(--ease-out);
}
.hero-arrow svg { transition: transform 0.45s var(--ease-out); }
.hero-arrow--prev { left: clamp(14px, 2.2vw, 36px); }
.hero-arrow--next { right: clamp(14px, 2.2vw, 36px); }
@media (hover: hover) {
.hero:hover .hero-arrow {
opacity: 1;
transform: translateY(-50%) scale(1);
pointer-events: auto;
}
}
@media (hover: none) {
.hero-arrow { display: none; }
}
.hero-arrow:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
}
.hero-arrow--prev:hover svg { transform: translateX(-2px); }
.hero-arrow--next:hover svg { transform: translateX(2px); }
.hero-arrow:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
}
/* Pagination */
.hero-pagination {
position: absolute;
z-index: 4;
bottom: 36px;
left: var(--pad-x);
display: inline-flex;
align-items: center;
gap: 18px;
}
.hero-pagination .hero-dot { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.hero-pagination .hero-dot { opacity: 1; }
}
.hero-dot {
width: 56px;
height: 1px;
background: rgba(255,255,255,0.22);
border: 0;
padding: 0;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background 0.35s var(--ease-out), width 0.4s var(--ease-out);
}
.hero-dot:hover { background: rgba(255,255,255,0.45); }
.hero-dot.is-active { width: 72px; background: rgba(255,255,255,0.18); }
.hero-dot-progress {
position: absolute;
inset: 0;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: left center;
pointer-events: none;
will-change: transform;
}
.hero-dot.is-active .hero-dot-progress {
transform: scaleX(1);
transform-origin: left center;
}
/* grid lines — architectural blueprint feel, very low contrast */
.grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.grid-lines .grid-v,
.grid-lines .grid-h {
position: absolute;
background: rgba(255,255,255,0.06);
transform-origin: top center;
}
.grid-lines .grid-v {
width: 1px;
top: 0; bottom: 0;
transform: scaleY(0);
}
.grid-lines .grid-h {
height: 1px;
left: 0; right: 0;
transform: scaleX(0);
transform-origin: left center;
}
.hero-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
z-index: 3;
pointer-events: none; /* let slider images receive clicks; children re-enable */
}
.hero-content > * { pointer-events: auto; }
/* Main headline — single h1 sentence visually broken into 3 lines.
Crucially: position:absolute keeps it sized to the hero so that any
transform applied (parallax) doesn't collapse the containing block
and stack all the lines at top:0. */
.hero-title {
position: absolute;
inset: 0;
pointer-events: none;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.92;
color: var(--c-white);
text-shadow: 0 2px 32px rgba(0, 0, 0, 0.32);
margin: 0;
}
.hero-line {
position: absolute;
display: block;
overflow: hidden;
padding: 0.06em 0;
pointer-events: auto;
}
.hero-line-inner {
display: block;
will-change: transform;
/* initial translate set via GSAP so the title still renders if JS fails */
}
/* Wallnut-style staircase — distributed across the hero with breathing
room from the navbar at top and the CTAs at the bottom. */
.hero-line--1 {
top: 25%;
left: var(--pad-x);
font-size: clamp(44px, 5.8vw, 88px);
}
.hero-line--2 {
top: 47%;
right: var(--pad-x);
text-align: right;
font-size: clamp(48px, 6.4vw, 96px);
}
.hero-line--3 {
top: 69%;
left: var(--pad-x);
font-size: clamp(44px, 5.8vw, 88px);
}
/* Small companion phrases — architectural annotations sitting on the grid */
.hero-sub {
position: absolute;
display: inline-flex;
align-items: center;
gap: 12px;
font-size: clamp(11px, 0.85vw, 13px);
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
will-change: opacity, transform;
}
.hero-sub-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.10);
flex-shrink: 0;
}
/* Row 1 small: center-top, sitting just above the first big line */
.hero-sub--1 { top: 21%; left: 46%; }
/* Row 2 small: center-left, sitting just above the right-aligned big line */
.hero-sub--2 { top: 43%; left: calc(var(--pad-x) + 4%); }
/* Row 3 small: lower-right, sitting just above the bottom big line */
.hero-sub--3 { top: 65%; right: calc(var(--pad-x) + 2%); }
.hero-actions {
position: absolute;
bottom: clamp(72px, 9vh, 110px);
left: var(--pad-x);
display: flex;
flex-wrap: wrap;
gap: 14px;
z-index: 4;
}
.hero-scroll {
position: absolute;
bottom: 36px;
right: var(--pad-x);
z-index: 4;
display: inline-flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,0.6);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0;
}
.hero-scroll-line {
width: 60px;
height: 1px;
background: rgba(255,255,255,0.4);
position: relative;
overflow: hidden;
}
.hero-scroll-line::after {
content: "";
position: absolute;
inset: 0;
background: var(--c-yellow);
transform: translateX(-100%);
animation: hero-scroll-anim 2.6s var(--ease-in-out) infinite;
}
@keyframes hero-scroll-anim {
0% { transform: translateX(-100%); }
50% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
/* ---------- 7. Zones section ---------- */
.zones {
padding: clamp(80px, 10vw, 160px) 0 clamp(36px, 4.5vw, 70px);
}
/* Tighten the boundary into the next (.products) section — roughly half
of the original combined whitespace between the two blocks. */
.zones + .products.section-light {
padding-top: clamp(44px, 5.5vw, 80px);
}
/* Tighter divider gap inside this section so the editorial block sits
closer to the top label/line — roughly half the previous whitespace. */
.zones .section-rule {
margin-bottom: clamp(20px, 3vw, 56px);
}
.zones .zones-intro {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(40px, 6vw, 100px);
padding: clamp(24px, 3vw, 56px) 0 clamp(56px, 8vw, 110px);
border-bottom: 1px solid var(--line-light);
}
/* Editorial paragraph — wider so it breaks onto only ~3-4 lines */
.zones .big-paragraph {
max-width: 920px;
flex: 1 1 auto;
font-size: clamp(24px, 2.9vw, 44px);
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.018em;
color: var(--c-text);
}
.zones-cta {
align-self: end;
flex-shrink: 0;
}
.zones-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: clamp(48px, 7vw, 100px);
}
.zone-card {
padding: clamp(8px, 1vw, 20px) clamp(20px, 2.4vw, 48px) clamp(20px, 3vw, 40px);
border-left: 1px solid var(--line-light);
position: relative;
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.zone-card:first-child { border-left: 0; padding-left: 0; }
.zone-card:last-child { padding-right: 0; }
.zone-num {
color: var(--c-accent);
font-weight: 600;
font-size: 15px;
display: inline-block;
margin-bottom: clamp(28px, 4vw, 48px);
letter-spacing: 0.04em;
}
.zone-title {
font-family: var(--font-display);
font-size: clamp(22px, 2vw, 30px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.012em;
margin-bottom: clamp(20px, 2.4vw, 28px);
color: var(--c-text);
}
.zone-desc {
color: var(--c-text-muted);
font-size: clamp(14px, 1vw, 16px);
line-height: 1.62;
max-width: 32ch;
}
/* Image under each zone block — uniform height, premium curtain-sweep hover */
.zone-image {
position: relative;
margin-top: clamp(28px, 3vw, 48px);
height: clamp(220px, 24vw, 320px);
overflow: hidden;
background: #1A2A33;
isolation: isolate;
box-shadow: 0 1px 0 rgba(13, 24, 32, 0.04);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s var(--ease-out);
will-change: transform;
}
.zone-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.01);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.6s var(--ease-out);
will-change: transform;
}
/* Curtain sweep: brand-tinted panel wiping from left to right */
.zone-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(26, 42, 51, 0) 0%,
rgba(26, 42, 51, 0.20) 35%,
rgba(200, 162, 125, 0.28) 50%,
rgba(26, 42, 51, 0.20) 65%,
rgba(26, 42, 51, 0) 100%
);
transform: translateX(-101%);
transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
z-index: 2;
will-change: transform;
}
.zone-image-overlay {
position: absolute;
inset: 0;
background: rgba(13, 24, 32, 0);
transition: background 0.55s var(--ease-out);
pointer-events: none;
z-index: 1;
}
.zone-image-arrow {
position: absolute;
bottom: clamp(14px, 1.6vw, 22px);
right: clamp(14px, 1.6vw, 22px);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-accent);
color: var(--c-dark);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translate(-10px, 12px) scale(0.9);
transition: opacity 0.45s var(--ease-out) 0.15s,
transform 0.5s var(--ease-out) 0.15s;
pointer-events: none;
z-index: 3;
}
/* Hover state — curtain sweep + image zoom + subtle lift */
.zone-card:hover .zone-image {
transform: translateY(-4px);
box-shadow: 0 18px 40px -22px rgba(13, 24, 32, 0.45);
}
.zone-card:hover .zone-image::before {
transform: translateX(101%);
}
.zone-card:hover .zone-image img {
transform: scale(1.05);
filter: saturate(1.06) contrast(1.03);
}
.zone-card:hover .zone-image-overlay {
background: rgba(13, 24, 32, 0.14);
}
.zone-card:hover .zone-image-arrow {
opacity: 1;
transform: translate(0, 0) scale(1);
}
/* Touch devices: graceful no-hover state, arrow subtly visible */
@media (hover: none) {
.zone-image-arrow {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.zone-image::before { display: none; }
}
/* Tablet — slightly reduced height */
@media (max-width: 1100px) {
.zone-image { height: clamp(220px, 30vw, 280px); }
}
/* Mobile — uniform but smaller */
@media (max-width: 640px) {
.zone-image { height: 240px; }
}
/* ---------- 8. Products ---------- */
.products .section-heading { max-width: 22ch; }
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 2vw, 36px);
}
.product-card {
display: flex;
flex-direction: column;
color: var(--c-text);
cursor: pointer;
isolation: isolate;
}
.product-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 0;
background: #1A2A33;
margin-bottom: 22px;
isolation: isolate;
box-shadow: 0 1px 0 rgba(13, 24, 32, 0.04);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s var(--ease-out);
will-change: transform;
}
.product-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.01);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.6s var(--ease-out);
will-change: transform;
}
/* Curtain sweep — brand-tinted panel wiping from left to right */
.product-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(26, 42, 51, 0) 0%,
rgba(26, 42, 51, 0.20) 35%,
rgba(200, 162, 125, 0.28) 50%,
rgba(26, 42, 51, 0.20) 65%,
rgba(26, 42, 51, 0) 100%
);
transform: translateX(-101%);
transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
z-index: 2;
will-change: transform;
}
.product-media-overlay {
position: absolute;
inset: 0;
background: rgba(13, 24, 32, 0);
transition: background 0.55s var(--ease-out);
pointer-events: none;
z-index: 1;
}
/* Hover state — curtain sweep + image zoom + subtle lift */
.product-card:hover .product-media {
transform: translateY(-4px);
box-shadow: 0 18px 40px -22px rgba(13, 24, 32, 0.45);
}
.product-card:hover .product-media::before {
transform: translateX(101%);
}
.product-card:hover .product-media img {
transform: scale(1.05);
filter: saturate(1.06) contrast(1.03);
}
.product-card:hover .product-media-overlay {
background: rgba(13, 24, 32, 0.14);
}
/* Touch devices: drop curtain to keep things calm */
@media (hover: none) {
.product-media::before { display: none; }
}
.product-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-num {
color: var(--c-yellow);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
}
.product-title {
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
.product-desc {
color: var(--c-text-muted);
font-size: 14px;
line-height: 1.55;
margin-bottom: 8px;
}
.product-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--c-text);
transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.product-link svg { transition: transform 0.3s var(--ease-out); }
.product-card:hover .product-link { color: var(--c-yellow); gap: 12px; }
.product-card:hover .product-link svg { transform: translateX(3px); }
/* ---------- 9. Big transition — cinematic transition section (no pin) ---------- */
.big-transition {
position: relative;
min-height: 100vh; /* one viewport tall, no pinned spacer */
background: var(--c-dark);
color: var(--c-white);
overflow: hidden; /* contain bg image overflow */
display: grid;
grid-template-rows: auto 1fr auto;
padding:
clamp(72px, 9vh, 116px)
clamp(28px, 5vw, 80px)
clamp(56px, 7vh, 96px);
isolation: isolate;
}
/* Inner wrapper is now a flow pass-through — no sticky, no pin, no extra height */
.big-transition-sticky {
display: contents;
}
.big-transition-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.big-transition-image {
position: absolute;
inset: -6%;
background-size: cover;
background-position: center;
transform: scale(1.06);
will-change: transform;
filter: brightness(0.46) saturate(0.85) contrast(1.05);
}
.big-transition-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(11,20,24,0.55) 0%, rgba(11,20,24,0.28) 38%, rgba(11,20,24,0.78) 100%),
radial-gradient(ellipse at 50% 50%, rgba(11,20,24,0) 0%, rgba(11,20,24,0.45) 80%);
}
/* Soft inner vignette — keeps the title legible against busy bg */
.big-transition-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
mix-blend-mode: multiply;
pointer-events: none;
}
/* Bronze accent stripe on the left edge — brand marker, scrubs vertically */
.big-transition-accent {
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%) scaleY(1);
width: 6px;
height: clamp(120px, 28vh, 240px);
background: var(--c-accent);
z-index: 7;
transform-origin: top center;
box-shadow: 0 0 24px rgba(200,162,125,0.35);
}
/* Technical grid overlay — architectural blueprint feel behind the panels */
.scene-grid {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.scene-grid-v,
.scene-grid-h {
position: absolute;
background: rgba(255, 255, 255, 0.06);
will-change: transform, opacity;
}
.scene-grid-v {
top: 0;
width: 1px;
height: 100%;
transform: scaleY(0);
transform-origin: top center;
}
.scene-grid-h {
left: 0;
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: left center;
}
.scene-grid-tick {
position: absolute;
width: 18px;
height: 18px;
border: 1px solid rgba(200, 162, 125, 0.35);
will-change: transform, opacity;
opacity: 0;
}
.scene-grid-tick--tl { top: 6vh; left: 6vw; border-right: 0; border-bottom: 0; }
.scene-grid-tick--tr { top: 6vh; right: 6vw; border-left: 0; border-bottom: 0; }
.scene-grid-tick--bl { bottom: 6vh; left: 6vw; border-right: 0; border-top: 0; }
.scene-grid-tick--br { bottom: 6vh; right: 6vw; border-left: 0; border-top: 0; }
/* Panel stage — 3D layered sandwich-panel slabs that assemble during scroll */
.panel-stage {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
pointer-events: none;
transform-style: preserve-3d;
will-change: transform;
}
.panel-stack {
position: relative;
width: clamp(380px, 56vw, 880px);
height: clamp(220px, 32vh, 360px);
transform-style: preserve-3d;
will-change: transform;
}
.panel-slab {
position: absolute;
left: 0;
width: 100%;
height: 33.33%;
box-shadow:
0 18px 40px -18px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.35);
transform-style: preserve-3d;
backface-visibility: hidden;
overflow: hidden;
will-change: transform, opacity, filter;
}
.panel-slab--top {
top: 0;
background:
linear-gradient(180deg, #3D464C 0%, #2A3137 55%, #20262B 100%);
border-top: 1px solid rgba(255,255,255,0.10);
}
.panel-slab--core {
top: 33.33%;
background:
linear-gradient(180deg, #D4AB85 0%, #BD9269 55%, #A07B53 100%);
}
.panel-slab--bottom {
top: 66.66%;
background:
linear-gradient(180deg, #20262B 0%, #2A3137 45%, #3D464C 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* 4th layer — thin foreground "spec plate" that glides across with depth */
.panel-slab--front {
top: auto;
bottom: -22%;
left: -8%;
width: 32%;
height: 18%;
background: linear-gradient(180deg, rgba(20,28,33,0.88) 0%, rgba(12,18,22,0.94) 100%);
border: 1px solid rgba(200, 162, 125, 0.30);
box-shadow:
0 24px 50px -22px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(200,162,125,0.18);
z-index: 3;
}
.panel-slab-edge {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.22) 50%,
rgba(255,255,255,0) 100%
);
opacity: 0;
will-change: opacity;
}
.panel-slab-edge--bronze {
background: linear-gradient(
90deg,
rgba(200,162,125,0) 0%,
rgba(232,196,155,0.65) 50%,
rgba(200,162,125,0) 100%
);
}
/* Edge highlight scan — sweeps across each slab during assembly */
.panel-slab-shine {
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(255,255,255,0) 30%,
rgba(255,255,255,0.18) 50%,
rgba(255,255,255,0) 70%
);
transform: translateX(-110%);
pointer-events: none;
will-change: transform;
}
.panel-slab-spec {
position: absolute;
left: 14px;
bottom: 8px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(200, 162, 125, 0.85);
pointer-events: none;
}
/* Curtain sweep — left-to-right reveal layer at the climax */
.scene-curtain {
position: absolute;
inset: -10% -5%;
z-index: 5;
background:
linear-gradient(
105deg,
rgba(13, 24, 32, 0) 0%,
rgba(13, 24, 32, 0.35) 30%,
rgba(200, 162, 125, 0.42) 50%,
rgba(13, 24, 32, 0.35) 70%,
rgba(13, 24, 32, 0) 100%
);
transform: translateX(-110%) skewX(-8deg);
pointer-events: none;
will-change: transform;
mix-blend-mode: screen;
opacity: 0.85;
}
/* Top row — label (left) + chapter (right) */
.big-transition-top {
position: relative;
z-index: 6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.big-transition-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.big-transition-label-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.12);
flex-shrink: 0;
}
.big-transition-chapter {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
font-feature-settings: 'tnum' 1;
}
.big-transition-chapter-num {
color: var(--c-accent);
font-weight: 600;
}
.big-transition-chapter-rule {
width: 36px;
height: 1px;
background: rgba(255, 255, 255, 0.32);
}
/* Middle row — title + sub, vertically centered, anchored left */
.big-transition-content {
position: relative;
z-index: 6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: clamp(20px, 4vh, 48px) 0;
min-width: 0;
}
.big-text {
font-weight: 700;
color: var(--c-white);
font-size: clamp(44px, 7.4vw, 124px);
line-height: 0.96;
letter-spacing: -0.024em;
white-space: nowrap;
text-shadow: 0 4px 30px rgba(0,0,0,0.35);
will-change: transform;
margin: 0;
}
.big-text-line {
display: block;
overflow: hidden;
will-change: transform;
}
.big-text-line span {
display: inline-block;
will-change: transform;
}
.big-transition-sub {
margin: clamp(24px, 3.5vw, 40px) 0 0;
color: rgba(255,255,255,0.85);
max-width: 46ch;
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.6;
text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
/* Bottom row — process flow, scrubs active state with scroll */
.big-transition-steps {
position: relative;
z-index: 6;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.big-transition-step {
position: relative;
padding: 18px 24px 4px 0;
display: flex;
flex-direction: column;
gap: 6px;
color: rgba(255,255,255,0.62);
transition: color 0.4s var(--ease-out);
}
.big-transition-step + .big-transition-step {
padding-left: 24px;
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.big-transition-step-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(255,255,255,0.45);
transition: color 0.4s var(--ease-out);
}
.big-transition-step-label {
font-size: clamp(13px, 1vw, 15px);
font-weight: 500;
letter-spacing: 0.01em;
}
.big-transition-step-bar {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s var(--ease-out);
}
.big-transition-step.is-active {
color: rgba(255,255,255,0.95);
}
.big-transition-step.is-active .big-transition-step-num {
color: var(--c-accent);
}
.big-transition-step.is-active .big-transition-step-bar {
transform: scaleX(1);
}
/* Process flow tracker — sits at the bottom of the pinned scene */
.process-flow {
position: absolute;
left: var(--pad-x);
right: var(--pad-x);
bottom: clamp(28px, 4vh, 56px);
z-index: 8;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.process-flow-step {
padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 24px) 0 0;
border-right: 1px solid rgba(255, 255, 255, 0.10);
display: flex;
align-items: center;
gap: 14px;
color: rgba(255, 255, 255, 0.42);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
transition: color 0.5s var(--ease-out);
position: relative;
}
.process-flow-step:last-child { border-right: 0; padding-right: 0; }
.process-flow-step::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 0%;
height: 1px;
background: var(--c-accent);
transition: width 0.6s var(--ease-out);
}
.process-flow-step.is-reached::before { width: 100%; }
.process-flow-step.is-active {
color: var(--c-white);
}
.process-flow-step.is-active .process-flow-num { color: var(--c-accent); }
.process-flow-num {
font-weight: 600;
color: rgba(255, 255, 255, 0.40);
transition: color 0.5s var(--ease-out);
}
.process-flow-label {
font-weight: 500;
}
@media (max-width: 720px) {
.process-flow { grid-template-columns: repeat(2, 1fr); }
.process-flow-step:nth-child(2) { border-right: 0; padding-right: 0; }
.process-flow-step:nth-child(3),
.process-flow-step:nth-child(4) {
border-top: 1px solid rgba(255, 255, 255, 0.10);
margin-top: 0;
}
.process-flow-step { padding: 14px 14px 0 0; }
}
/* ---------- 10. Projects ---------- */
.projects-slider {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: stretch;
}
.projects-media {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--c-dark-2);
isolation: isolate;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s var(--ease-out);
will-change: transform;
}
.projects-image {
position: absolute;
inset: 0;
overflow: hidden;
opacity: 0;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.9s var(--ease-out), opacity 0.6s var(--ease-out);
}
.projects-image.is-active { opacity: 1; clip-path: inset(0 0 0 0); }
.projects-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.01);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.6s var(--ease-out);
will-change: transform;
}
/* Curtain sweep — same brand-tinted left → right wipe used elsewhere */
.projects-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(26, 42, 51, 0) 0%,
rgba(26, 42, 51, 0.20) 35%,
rgba(200, 162, 125, 0.28) 50%,
rgba(26, 42, 51, 0.20) 65%,
rgba(26, 42, 51, 0) 100%
);
transform: translateX(-101%);
transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
z-index: 3;
will-change: transform;
}
.projects-media-overlay {
position: absolute;
inset: 0;
background: rgba(13, 24, 32, 0);
transition: background 0.55s var(--ease-out);
pointer-events: none;
z-index: 2;
}
/* Hover state — applies only to the active visible slide */
.projects-media:hover {
box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.55);
}
.projects-media:hover::before {
transform: translateX(101%);
}
.projects-media:hover .projects-image.is-active img {
transform: scale(1.05);
filter: saturate(1.06) contrast(1.03);
}
.projects-media:hover .projects-media-overlay {
background: rgba(13, 24, 32, 0.14);
}
/* Touch devices: drop curtain to keep things calm */
@media (hover: none) {
.projects-media::before { display: none; }
}
/* Multi-band curtain overlay used for slide transitions */
.projects-curtain {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
display: flex;
flex-direction: column;
overflow: hidden;
}
.projects-curtain-band {
flex: 1 1 25%;
background: linear-gradient(90deg, #1A2A33 0%, #0F1B23 50%, #1A2A33 100%);
position: relative;
will-change: transform;
}
.projects-curtain-band:nth-child(2) { background: linear-gradient(90deg, #15232C 0%, #0B1418 50%, #15232C 100%); }
.projects-curtain-band:nth-child(3) { background: linear-gradient(90deg, #1A2A33 0%, #0F1B23 50%, #1A2A33 100%); }
.projects-curtain-band:nth-child(4) { background: linear-gradient(90deg, #15232C 0%, #0B1418 50%, #15232C 100%); }
/* Subtle bronze hairline on each band edge */
.projects-curtain-band::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(200, 162, 125, 0.18);
}
.projects-curtain-band:last-child::after { display: none; }
.projects-info {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(20px, 3vw, 60px) 0;
color: var(--c-white);
}
.projects-data { position: relative; min-height: 220px; }
.project-item {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.project-item.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.project-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--c-accent);
margin-bottom: 14px;
text-transform: uppercase;
}
.project-title {
/* Was clamp(28px, 3vw, 48px) — too large/editorial for the reduced
direction. Now the image is the hero of the section. */
font-size: clamp(22px, 2vw, 30px);
font-weight: 700;
letter-spacing: -0.012em;
line-height: 1.18;
margin-bottom: 12px;
}
.project-meta {
color: rgba(255, 255, 255, 0.7);
font-size: 14.5px;
line-height: 1.5;
}
.projects-controls {
display: inline-flex;
align-items: center;
gap: 16px;
margin: 28px 0;
}
.proj-arrow {
width: 52px; height: 52px;
border-radius: 50%;
border: 1px solid var(--line-dark-2);
color: var(--c-white);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.proj-arrow:hover {
background: var(--c-yellow);
color: var(--c-dark);
border-color: var(--c-yellow);
}
.projects-cta { align-self: flex-start; }
/* ---------- 11. Process ---------- */
/* Tighten the boundary into the next (.about) section by ~50% — both
sections inherit .section-light's generous 160px padding, total 320px;
this scoped pair brings the combined gap down to ~160px at max viewport. */
.process.section-light {
padding-bottom: clamp(40px, 5vw, 80px);
}
.process + .about.section-light {
padding-top: clamp(44px, 5.5vw, 80px);
}
.process-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: end;
padding-bottom: clamp(40px, 5vw, 80px);
border-bottom: 1px solid var(--line-light);
}
.process-heading {
font-size: clamp(48px, 6.5vw, 110px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 0.98;
}
.process-paragraph {
color: var(--c-text-muted);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
max-width: 44ch;
justify-self: end;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 2vw, 40px);
margin-top: clamp(40px, 5vw, 80px);
}
.process-card {
display: flex;
flex-direction: column;
gap: 12px;
}
.process-media {
position: relative;
aspect-ratio: 5 / 4;
margin-bottom: 16px;
background: #1A2A33;
overflow: hidden;
isolation: isolate;
box-shadow: 0 1px 0 rgba(13, 24, 32, 0.04);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.6s var(--ease-out);
will-change: transform;
}
.process-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.01);
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.6s var(--ease-out);
will-change: transform;
}
/* Curtain sweep — same brand-tinted left → right wipe used elsewhere */
.process-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(26, 42, 51, 0) 0%,
rgba(26, 42, 51, 0.20) 35%,
rgba(200, 162, 125, 0.28) 50%,
rgba(26, 42, 51, 0.20) 65%,
rgba(26, 42, 51, 0) 100%
);
transform: translateX(-101%);
transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
z-index: 2;
will-change: transform;
}
.process-media-overlay {
position: absolute;
inset: 0;
background: rgba(13, 24, 32, 0);
transition: background 0.55s var(--ease-out);
pointer-events: none;
z-index: 1;
}
/* Hover state — curtain sweep + image zoom + subtle lift */
.process-card:hover .process-media {
transform: translateY(-4px);
box-shadow: 0 18px 40px -22px rgba(13, 24, 32, 0.45);
}
.process-card:hover .process-media::before {
transform: translateX(101%);
}
.process-card:hover .process-media img {
transform: scale(1.05);
filter: saturate(1.06) contrast(1.03);
}
.process-card:hover .process-media-overlay {
background: rgba(13, 24, 32, 0.14);
}
/* Touch devices: drop curtain to keep things calm */
@media (hover: none) {
.process-media::before { display: none; }
}
.process-num {
color: var(--c-yellow);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
}
.process-title {
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 700;
line-height: 1.2;
}
.process-desc {
color: var(--c-text-muted);
font-size: 14px;
line-height: 1.55;
}
/* ---------- 12. About ---------- */
.about-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(40px, 6vw, 100px);
padding-bottom: clamp(48px, 6vw, 96px);
border-bottom: 1px solid var(--line-light);
}
.about .big-paragraph {
max-width: 1100px;
flex: 1 1 auto;
font-size: clamp(24px, 2.9vw, 44px);
}
.about-cta { flex: 0 0 auto; }
.about-image {
margin-top: clamp(40px, 5vw, 80px);
aspect-ratio: 21 / 9;
overflow: hidden;
position: relative;
clip-path: inset(0 0 100% 0);
will-change: clip-path;
}
.about-image-inner {
position: absolute;
inset: -5%;
will-change: transform;
}
.about-image-inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: grayscale(0.15) contrast(1.04);
transform: scale(1.01);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
.about-image:hover .about-image-inner img { transform: scale(1.05); }
}
.about-image-caption {
position: absolute;
bottom: 18px;
left: 18px;
background: rgba(11,20,24,0.6);
color: rgba(255,255,255,0.85);
padding: 8px 14px;
font-size: 12px;
letter-spacing: 0.06em;
z-index: 2;
}
@media (max-width: 900px) {
.about-image { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
.about-image { aspect-ratio: 4 / 3; }
}
/* ---------- 13. Final CTA ---------- */
/* NOTE: full styling lives later in the homepage section (~line 11185).
The legacy ::before / ::after layers were removed because they stacked a
duplicate background image + a 78–88% dark overlay on top of the newer
.final-cta-bg system, producing a muddy / underexposed section. The
newer rules already render the image + a single 70–78% overlay. */
.final-cta {
background: var(--c-blue-grey); /* fallback while image loads */
color: var(--c-white);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* ---------- 14. Footer ---------- */
/* Premium pass: bronze hairline at top, equalised column typography,
generous vertical rhythm, restrained accents, tabular phone numbers.
See TASK 3A / 3B in changelog. */
.site-footer {
background: var(--c-dark);
color: var(--c-white);
padding: clamp(90px, 9vw, 130px) 0 0;
border-top: 1px solid var(--line-dark);
position: relative;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg,
rgba(200, 162, 125, 0) 0%,
rgba(200, 162, 125, 0.42) 20%,
rgba(200, 162, 125, 0.42) 80%,
rgba(200, 162, 125, 0) 100%);
pointer-events: none;
}
/* TOP AREA — nav (left) | categories (middle) | contact + locations + CTA (right)
Premium pass: column eyebrow labels, vertical hairline dividers between columns,
smaller refined typography, lucide-style SVG icons before contact info. */
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
gap: clamp(40px, 5vw, 80px);
padding-bottom: clamp(50px, 6vw, 80px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
}
/* Vertical hairline dividers between columns (visible only on >=900px) */
@media (min-width: 901px) {
.footer-grid::before,
.footer-grid::after {
content: "";
position: absolute;
top: 0;
bottom: clamp(50px, 6vw, 80px);
width: 1px;
background: rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.footer-grid::before { left: calc(1 / 3.4 * 100%); }
.footer-grid::after { left: calc(2 / 3.4 * 100%); }
}
/* Unified column eyebrow used by all 3 columns (replaces .footer-categories-label).
Small uppercase tag, restrained spacing, muted gray. */
.footer-col-eyebrow {
display: inline-flex;
align-items: center;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
font-weight: 600;
margin: 0 0 22px;
line-height: 1.2;
}
/* Inline SVG icon used in contact rows + location labels. Sits in muted gray,
inherits parent hover to bronze. 1.5px stroke for refined feel. */
.footer-ico {
flex-shrink: 0;
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.50);
transition: color 0.25s var(--ease-out);
}
.footer-phone:hover .footer-ico,
.footer-email:hover .footer-ico,
.footer-loc-label:hover .footer-ico { color: var(--c-accent); }
/* ----- LEFT: vertical navigation (refined, smaller, breathable) ----- */
.footer-nav {
display: flex;
flex-direction: column;
gap: 0;
}
.footer-nav-link {
font-size: clamp(16px, 1.15vw, 18px);
font-weight: 500;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.78);
transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
display: inline-flex;
align-items: center;
gap: 12px;
width: fit-content;
line-height: 1.7;
padding: 4px 0;
position: relative;
}
.footer-nav-link:hover {
color: var(--c-accent);
transform: translateX(4px);
}
.footer-nav-link.is-active { color: var(--c-white); font-weight: 600; }
.footer-nav-link .nav-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-accent);
opacity: 0;
transform: scale(0);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.10);
}
.footer-nav-link.is-active .nav-dot { opacity: 1; transform: scale(1); }
/* ----- MIDDLE: product categories (matches nav rhythm) ----- */
.footer-categories {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.footer-categories-link {
font-size: clamp(16px, 1.15vw, 18px);
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
line-height: 1.7;
padding: 4px 0;
transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
width: fit-content;
}
.footer-categories-link:hover {
color: var(--c-accent);
transform: translateX(4px);
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ----- RIGHT column wrapper ----- */
.footer-contact {
display: flex;
flex-direction: column;
gap: clamp(22px, 2.6vw, 36px);
color: rgba(255,255,255,0.85);
min-width: 0;
}
/* Top row inside right column: contact lines (left) + social (right) */
.footer-contact-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(20px, 3vw, 60px);
flex-wrap: wrap;
}
.footer-contact-lines {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.footer-phone, .footer-email {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: clamp(16px, 1.15vw, 18px);
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
transition: color 0.25s var(--ease-out);
width: fit-content;
letter-spacing: 0;
line-height: 1.4;
}
.footer-phone {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.footer-phone:hover, .footer-email:hover { color: var(--c-accent); }
.footer-social {
display: inline-flex;
flex-direction: row;
gap: 14px;
align-items: center;
flex-shrink: 0;
margin-top: 4px;
}
.footer-social-link {
width: 38px; height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.78);
transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.footer-social-link:hover { color: var(--c-accent); transform: translateY(-2px); }
.footer-social-link svg { width: 22px; height: 22px; }
/* Two location info blocks side by side */
.footer-locations {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 48px);
padding-top: clamp(20px, 2.5vw, 36px);
border-top: 1px solid var(--line-dark);
}
.footer-loc-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 12px;
font-weight: 600;
}
.footer-locations p {
color: rgba(255, 255, 255, 0.92);
font-size: clamp(14px, 1vw, 16px);
line-height: 1.55;
}
/* CTA pinned to the right of the right column — bronze fill for prominence */
.footer-cta {
width: fit-content;
align-self: flex-end;
margin-top: clamp(8px, 1.5vw, 24px);
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
box-shadow: 0 8px 24px -10px rgba(200, 162, 125, 0.45);
}
.footer-cta:hover {
background: rgba(200, 162, 125, 0.92);
border-color: rgba(200, 162, 125, 0.92);
color: var(--c-dark);
transform: translateY(-1px);
}
/* BOTTOM BAR: brand, copyright, policies, by */
.footer-bottom {
padding: clamp(20px, 2vw, 32px) 0;
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: clamp(20px, 3vw, 48px);
align-items: center;
border-bottom: 1px solid var(--line-dark);
}
.footer-brand {
display: inline-flex;
align-items: center;
}
.footer-brand img {
height: clamp(28px, 2.4vw, 38px);
width: auto;
display: block;
transition: opacity 0.3s var(--ease-out);
}
.footer-brand:hover img { opacity: 0.85; }
.footer-copy {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.62);
font-size: 13px;
justify-self: start;
text-align: left;
}
.footer-copy-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
font-size: 10px;
color: rgba(255, 255, 255, 0.7);
}
.footer-policies {
display: inline-flex;
gap: clamp(16px, 2vw, 32px);
justify-self: end;
font-size: 13px;
}
.footer-policies a {
color: rgba(255, 255, 255, 0.78);
transition: color 0.3s var(--ease-out);
}
.footer-policies a:hover { color: var(--c-accent); }
.footer-by {
color: rgba(255, 255, 255, 0.50);
font-size: 13px;
justify-self: end;
letter-spacing: 0.01em;
}
.footer-by a {
color: rgba(255, 255, 255, 0.82);
transition: color 0.3s var(--ease-out);
position: relative;
}
.footer-by a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.45s var(--ease-out);
}
.footer-by a:hover { color: var(--c-accent); }
.footer-by a:hover::after { transform: scaleX(1); transform-origin: left center; }
/* Partner / certification logo strip — placeholder, hidden when empty */
.footer-partners {
padding: clamp(22px, 2.5vw, 36px) 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: clamp(20px, 3vw, 48px);
flex-wrap: wrap;
}
.footer-partners:empty { display: none; }
.footer-partners img {
max-height: 40px;
width: auto;
opacity: 0.55;
filter: grayscale(1);
transition: opacity 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
.footer-partners img:hover { opacity: 0.9; filter: grayscale(0.4); }
/* ---------- 15. Menu overlay ---------- */
.menu-overlay {
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
/* fallback for browsers without dvh */
min-height: 100vh;
z-index: 9000;
color: var(--c-white);
pointer-events: none;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
background: #17252B; /* solid fallback so the overlay never appears empty */
transition:
opacity 0.25s ease,
visibility 0s linear 0.25s;
}
.menu-overlay.is-open {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition:
opacity 0.2s ease,
visibility 0s linear 0s;
}
.menu-overlay-bg {
position: absolute;
inset: 0;
/* solid premium dark — no transparency, no blur dependency */
background: linear-gradient(180deg, #17252B 0%, #122029 100%);
opacity: 0;
transition: opacity 0.2s ease;
will-change: opacity;
z-index: 0;
}
.menu-overlay.is-open .menu-overlay-bg { opacity: 1; }
.menu-overlay-header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px var(--pad-x);
border-bottom: 1px solid var(--line-dark);
opacity: 0;
flex-shrink: 0;
}
.brand--overlay { color: var(--c-white); }
.brand--overlay img {
width: clamp(140px, 12vw, 170px);
filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.4));
}
.menu-close {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--c-white);
background: transparent;
border: 1px solid var(--line-dark-2);
border-radius: var(--radius-pill);
padding: 12px 18px 12px 22px;
font-weight: 500;
font-size: 15px;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.menu-close:hover {
background: var(--c-yellow);
color: var(--c-dark);
border-color: var(--c-yellow);
}
.menu-close-icon {
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.4s var(--ease-out);
}
.menu-close:hover .menu-close-icon { transform: rotate(180deg); }
.menu-overlay-body {
position: relative;
z-index: 2;
padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(24px, 3vw, 48px);
display: grid;
grid-template-columns: 1.3fr 1fr; /* nav left, contact right */
gap: clamp(40px, 6vw, 100px);
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
border-bottom: 1px solid var(--line-dark);
}
/* vertical divider between the two columns on desktop */
@media (min-width: 901px) {
.menu-overlay-body::before {
content: "";
position: absolute;
top: clamp(20px, 3vw, 48px);
bottom: clamp(20px, 3vw, 48px);
left: calc(56.5%); /* sits right of the nav column */
width: 1px;
background: var(--line-dark);
pointer-events: none;
opacity: 0;
transform: scaleY(0);
transform-origin: top center;
transition: opacity 0.4s, transform 0.7s var(--ease-out);
}
.menu-overlay.is-open .menu-overlay-body::before {
opacity: 1;
transform: scaleY(1);
}
}
.menu-overlay-left,
.menu-overlay-right {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.5vw, 36px);
min-width: 0;
}
/* ----- LEFT: large vertical navigation ----- */
.overlay-nav {
display: flex;
flex-direction: column;
}
.overlay-nav-link {
/* Sized down from clamp(40px, 6vw, 92px) (original was clipping
"Kontakt"), then bumped from clamp(22px, 2.4vw, 30px) which read
too small. This middle range — ~38 px on a typical desktop — is
primary-tier without dwarfing the viewport; ~6 primary items +
4 sub-items still fit comfortably above the fold.
Mobile values are set in the @media (max-width: 800px) block. */
font-size: clamp(26px, 2.8vw, 38px);
font-weight: 700;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.50); /* muted by default, like reference */
line-height: 1.25;
padding: 8px 0;
overflow: hidden;
transition: color 0.3s var(--ease-out);
}
.overlay-nav-link:hover { color: var(--c-white); }
.overlay-nav-link.is-active { color: var(--c-white); }
.overlay-nav-inner {
display: inline-flex;
align-items: center;
gap: 18px;
will-change: transform;
/* GSAP owns the initial translate — no CSS transform here so the
links are still visible if JS ever fails. */
}
.overlay-nav-inner .nav-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--c-accent);
opacity: 0; transform: scale(0);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.overlay-nav-link.is-active .overlay-nav-inner .nav-dot {
opacity: 1; transform: scale(1);
}
/* ----- RIGHT: top contact row (lines + social on the same row) ----- */
.overlay-contact-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(20px, 3vw, 60px);
flex-wrap: wrap;
}
.overlay-contact-lines {
display: flex;
flex-direction: column;
gap: clamp(10px, 1vw, 18px);
min-width: 0;
}
.overlay-contact-line {
font-size: clamp(20px, 1.7vw, 28px);
font-weight: 500;
color: var(--c-white);
transition: color 0.3s var(--ease-out);
width: fit-content;
letter-spacing: -0.005em;
}
.overlay-contact-line:hover { color: var(--c-accent); }
.overlay-social {
display: inline-flex;
gap: 14px;
flex-shrink: 0;
margin-top: 4px;
}
.overlay-social a {
width: 38px; height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.78);
transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.overlay-social a:hover { color: var(--c-accent); transform: translateY(-2px); }
.overlay-social svg { width: 22px; height: 22px; }
/* ----- RIGHT: two location info blocks side by side ----- */
.overlay-locations {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 48px);
margin-top: clamp(8px, 1.5vw, 24px);
padding-top: clamp(20px, 2.5vw, 36px);
border-top: 1px solid var(--line-dark);
}
.overlay-loc-label {
display: block;
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 10px;
font-weight: 500;
}
.overlay-locations p {
color: rgba(255, 255, 255, 0.92);
font-size: clamp(14px, 1vw, 16px);
line-height: 1.55;
}
/* ----- RIGHT: CTA — anchored to the right side, modest top spacing ----- */
.overlay-cta {
width: fit-content;
align-self: flex-end;
margin-top: clamp(20px, 3vw, 48px);
}
/* ----- BOTTOM BAR: logo, copyright, policies, by ----- */
.menu-overlay-footer {
position: relative;
z-index: 2;
padding: clamp(18px, 1.6vw, 26px) var(--pad-x);
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: clamp(20px, 3vw, 48px);
align-items: center;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
flex-shrink: 0;
}
.menu-overlay-footer-brand {
display: inline-flex;
align-items: center;
}
.menu-overlay-footer-brand img {
height: clamp(28px, 2.4vw, 38px);
width: auto;
display: block;
transition: opacity 0.3s var(--ease-out);
}
.menu-overlay-footer-brand:hover img { opacity: 0.85; }
.menu-overlay-footer-copy {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.62);
justify-self: start;
}
.footer-copy-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
font-size: 10px;
color: rgba(255, 255, 255, 0.7);
}
.menu-overlay-footer-policies {
display: inline-flex;
gap: clamp(16px, 2vw, 32px);
justify-self: end;
}
.menu-overlay-footer-by {
color: rgba(255, 255, 255, 0.50);
justify-self: end;
letter-spacing: 0.01em;
}
.menu-overlay-footer a {
color: rgba(255, 255, 255, 0.82);
transition: color 0.3s var(--ease-out);
}
.menu-overlay-footer a:hover { color: var(--c-accent); }
.menu-overlay-footer-by a {
position: relative;
}
.menu-overlay-footer-by a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.45s var(--ease-out);
}
.menu-overlay-footer-by a:hover::after { transform: scaleX(1); transform-origin: left center; }
/* ----- PARTNER / CERTIFICATION strip — placeholder, hidden when empty ----- */
.menu-overlay-partners {
position: relative;
z-index: 2;
padding: 24px var(--pad-x);
display: flex;
align-items: center;
justify-content: space-around;
gap: clamp(20px, 3vw, 48px);
flex-wrap: wrap;
border-top: 1px solid var(--line-dark);
flex-shrink: 0;
}
.menu-overlay-partners:empty { display: none; }
.menu-overlay-partners img {
max-height: 36px;
width: auto;
opacity: 0.55;
filter: grayscale(1);
transition: opacity 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
.menu-overlay-partners img:hover { opacity: 0.9; filter: grayscale(0.4); }
/* ---------- 16. Reveal initial states ---------- */
.js-reveal-label-block .dot { transform: scale(0); }
.js-reveal-label-block .label-text { opacity: 0; transform: translateX(-10px); }
/* ---------- 17. Responsive ---------- */
@media (max-width: 1100px) {
.primary-nav { display: none; }
.menu-toggle { display: inline-flex; }
.brand img { width: clamp(130px, 16vw, 160px); }
.products-grid { grid-template-columns: repeat(3, 1fr); }
.process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.zones-grid { grid-template-columns: 1fr; }
.zone-card { border-left: 0; border-top: 1px solid var(--line-light); padding: 36px 0; }
.zone-card:first-child { border-top: 0; }
.zones .zones-intro {
grid-template-columns: 1fr;
align-items: start;
row-gap: 28px;
}
.zones .big-paragraph {
font-size: clamp(22px, 4.4vw, 32px);
max-width: 22em;
}
.zones-cta { justify-self: start; align-self: start; }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.projects-slider { grid-template-columns: 1fr; }
.projects-info { padding: 24px 0 0; }
.process-head { grid-template-columns: 1fr; gap: 24px; }
.process-paragraph { justify-self: start; }
.about-head { flex-direction: column; align-items: flex-start; gap: 28px; }
.about-cta { align-self: flex-start; }
.about .big-paragraph { font-size: clamp(22px, 5vw, 32px); }
.footer-grid { grid-template-columns: 1fr; }
.footer-contact-top { flex-direction: column; gap: 24px; }
.footer-cta { align-self: flex-start; }
.footer-bottom { grid-template-columns: 1fr; gap: 14px; text-align: left; }
.footer-copy,
.footer-policies,
.footer-by { justify-self: start; }
.footer-locations { grid-template-columns: 1fr 1fr; }
.menu-overlay-body { grid-template-columns: 1fr; gap: 40px; }
.overlay-locations { grid-template-columns: 1fr; }
.overlay-contact-top { flex-direction: column; gap: 24px; }
.overlay-cta { align-self: flex-start; }
}
@media (max-width: 900px) {
/* Mobile/tablet: title vertically centered, CTAs at bottom. */
.hero-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: none;
margin: 0;
padding: 0;
pointer-events: none;
}
/* Use specific edge properties (not the `inset` shorthand) to avoid
any later `inset` resetting top:50% back to 0. */
.hero-title {
position: absolute;
top: 50%;
right: 0;
bottom: auto;
left: 0;
transform: translateY(-50%);
padding: 0 var(--pad-x);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
pointer-events: auto;
}
.hero-line {
position: static;
font-size: clamp(34px, 8vw, 54px);
text-align: left;
padding: 0.03em 0;
line-height: 1.0;
}
.hero-line--1, .hero-line--2, .hero-line--3 {
position: static;
text-align: left;
}
/* Hide the desktop floating subs on mobile — too noisy for small screens */
.hero-sub { display: none; }
/* Equal-width CTAs anchored bottom-left. Container is constrained so
both buttons stretch to the same width. */
.hero-actions {
bottom: clamp(80px, 12vh, 120px);
left: var(--pad-x);
right: auto;
width: min(320px, calc(100vw - 2 * var(--pad-x)));
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.hero-actions .btn-pill {
width: 100%;
max-width: none;
min-width: 0;
height: 54px;
padding: 0 22px;
justify-content: space-between;
gap: 14px;
}
.hero-actions .btn-arrow {
width: 34px;
height: 34px;
flex-shrink: 0;
}
}
@media (max-width: 720px) {
.brand-sub { display: none; }
.brand-mark { font-size: 18px; }
/* Mobile header — tighten the action cluster so the Menu pill never clips */
.site-header { padding-top: 14px; padding-bottom: 14px; }
.header-inner { gap: 12px; }
.header-actions { gap: 8px; }
.brand img { width: clamp(110px, 32vw, 130px); }
.cart-button { width: 38px; height: 38px; }
.menu-toggle { padding: 9px 14px 9px 16px; font-size: 13px; gap: 10px; }
.menu-toggle-icon { width: 20px; }
.menu-toggle-icon span:last-child { width: 12px; }
.hero-title {
gap: 2px;
}
.hero-line {
font-size: clamp(34px, 9.6vw, 48px);
letter-spacing: -0.025em;
}
.hero-scroll { display: none; }
.hero-pagination { bottom: 22px; }
.hero-dot { width: 32px; }
.hero-arrow { display: none; }
.menu-overlay-footer {
grid-template-columns: 1fr;
gap: 14px;
text-align: left;
}
.menu-overlay-footer-copy,
.menu-overlay-footer-policies,
.menu-overlay-footer-by { justify-self: start; }
/* Page footer: stack locations and tighten policies on small mobile */
.footer-locations { grid-template-columns: 1fr; gap: 20px; }
.footer-policies { gap: 18px; flex-wrap: wrap; }
.menu-overlay-partners { padding: 18px var(--pad-x); }
.products-grid { grid-template-columns: 1fr; }
.process-grid { grid-template-columns: 1fr; }
.grid-lines .grid-v[style*="25"], .grid-lines .grid-v[style*="75"] { display: none; }
/* Mobile: collapse the pinned scene into a clean static block */
.big-transition { height: auto; padding: 0; }
.big-transition-sticky {
position: relative;
top: auto;
height: auto;
min-height: 80vh;
display: flex;
flex-direction: column;
gap: 40px;
padding: 64px var(--pad-x) 56px;
}
.big-transition-top {
order: 0;
}
.big-transition-content {
order: 1;
padding: 28px 0 8px;
}
.big-transition-steps {
order: 2;
grid-template-columns: 1fr 1fr;
}
.big-transition-step + .big-transition-step:nth-child(3) {
border-left: 0;
padding-left: 0;
}
.big-transition-step:nth-child(3),
.big-transition-step:nth-child(4) {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 16px;
margin-top: 4px;
}
.big-text {
white-space: normal;
line-height: 0.96;
font-size: clamp(40px, 11vw, 72px);
}
.big-transition-accent {
top: clamp(56px, 8vh, 96px);
transform: none;
height: 64px;
}
.big-transition-vignette { display: none; }
.panel-stage { position: absolute; inset: 0; opacity: 0.55; }
.panel-stack {
width: 88vw;
height: clamp(180px, 36vh, 280px);
}
/* Mobile: drop the heavy decorative layers — keep only the 3 main slabs */
.scene-grid,
.scene-curtain,
.panel-slab--front,
.panel-slab-shine { display: none; }
.panel-slab-edge { opacity: 1; }
.final-cta-actions { flex-direction: column; }
.final-cta-actions .btn-pill { justify-content: space-between; }
/* Mobile primary nav — was clamp(36px, 11vw, 64px) which dwarfed
the phone viewport. Dropped to a compact-but-legible primary tier
so the full 6-item list plus the Proizvodi sub-links fit inside
the phone viewport without scrolling away from the title. */
.overlay-nav-link,
.menu-overlay-link.menu-overlay-toggle,
.menu-overlay-subitem > button.menu-overlay-toggle {
font-size: clamp(20px, 5.2vw, 26px);
padding: 6px 0;
line-height: 1.25;
}
.menu-overlay-subitem > a,
.menu-overlay-subitem > button {
font-size: 15px;
padding: 6px 0;
}
.overlay-contact-line { font-size: 20px; }
}
/* ---------- Preloader — premium curtain reveal ---------- */
.preloader {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: auto;
background: transparent;
}
.preloader-curtain {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 45%, #1A2A33 0%, #0F1B23 60%, #0A1418 100%);
transform-origin: right center;
/* GSAP animates scaleX 1 → 0 (curtain pulled to the right). */
transform: scaleX(1);
will-change: transform;
}
/* Subtle film grain on the curtain itself for filmic depth */
.preloader-curtain::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
}
.preloader-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(22px, 2.5vw, 34px);
color: var(--c-white);
text-align: center;
will-change: opacity, transform;
}
.preloader-logo {
width: clamp(170px, 20vw, 240px);
height: auto;
filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.45));
will-change: transform, opacity;
/* Pure-CSS intro reveal. opacity starts at 0 so there is no flash of
the logo at full opacity on first paint, then the @keyframes lands
it gently. No JS dependency — eliminates any fallback-letter race. */
opacity: 0;
transform: translateY(14px) scale(0.96);
animation: bs-preloader-logo-in 0.9s var(--ease-out) 0.05s forwards;
/* Suppress the broken-image alt placeholder while the PNG is loading
— keeps the curtain looking clean even on slow connections. */
color: transparent;
font-size: 0;
}
@keyframes bs-preloader-logo-in {
0% { opacity: 0; transform: translateY(14px) scale(0.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.preloader-logo[src]:not([src=""]) {
/* No-op selector reserved for future overrides — kept so we can target
the loaded state without rules above leaking out. */
}
/* Reveal the logo immediately when JS is disabled or absent so the
no-script fallback still shows a brand mark instead of an empty curtain. */
html.no-js .preloader-logo,
.preloader.is-no-js .preloader-logo { opacity: 1; animation: none; transform: none; }
/* Thin progress line — wider, more elegant, with a premium bronze fill */
.preloader-line {
display: block;
width: clamp(160px, 20vw, 240px);
height: 1px;
background: rgba(255, 255, 255, 0.10);
overflow: hidden;
position: relative;
}
.preloader-line-fill {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(
90deg,
rgba(200, 162, 125, 0) 0%,
var(--c-accent) 30%,
var(--c-accent) 70%,
rgba(200, 162, 125, 0) 100%
);
box-shadow: 0 0 12px rgba(200, 162, 125, 0.35);
animation: bs-preloader-line-in 1.8s var(--ease-out) 0.2s forwards;
}
@keyframes bs-preloader-line-in {
0% { width: 0%; }
100% { width: 70%; }
}
.preloader-meta {
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
opacity: 0;
transform: translateY(8px);
animation: bs-preloader-meta-in 0.7s var(--ease-out) 0.25s forwards;
}
@keyframes bs-preloader-meta-in {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
.preloader.is-done {
pointer-events: none;
}
/* Exit state — JS adds .preloader-hidden on window.load; CSS handles
the curtain wipe + content fade. No GSAP, no inline styles. */
.preloader-hidden {
pointer-events: none;
}
.preloader-hidden .preloader-curtain {
transform: scaleX(0);
transition: transform 1.15s cubic-bezier(0.83, 0, 0.17, 1);
}
.preloader-hidden .preloader-content {
opacity: 0;
transform: translateY(-12px);
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.preloader-hidden .preloader-line-fill {
animation: none;
width: 100%;
transition: width 0.55s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.preloader-curtain { transform: scaleX(0); }
.preloader { display: none; }
}
/* While preloader is visible, prevent body scroll */
body.is-loading { overflow: hidden; }
/* Safety fallback — if JS fails for any reason, auto-hide the preloader */
body.is-loading { animation: bs-loading-fallback 0s 5s forwards; }
@keyframes bs-loading-fallback { to { overflow: auto; } }
.preloader {
animation: bs-preloader-fallback 0.6s 4.4s forwards;
}
@keyframes bs-preloader-fallback {
to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.preloader.is-done { animation: none; }
/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero-line-inner,
.overlay-nav-inner,
.split-line > span { transform: translateY(0) !important; }
.hero-sub,
.hero-scroll { opacity: 1 !important; transform: none !important; }
.hero-slide.is-active .hero-slide-image { transform: scale(1.02) !important; }
.grid-lines .grid-v { transform: scaleY(1) !important; }
.grid-lines .grid-h { transform: scaleX(1) !important; }
.section-rule { transform: scaleX(1) !important; }
.section-label .dot,
.nav-dot { transform: scale(1) !important; opacity: 1 !important; }
.js-reveal-label-block .label-text { opacity: 1 !important; transform: none !important; }
.about-image { clip-path: inset(0 0 0 0) !important; }
.lager-image { clip-path: inset(0 0 0 0) !important; }
}
/* ============================================================
---------- 19. Priority 2 — additional sections ----------
============================================================ */
/* ---------- Comparison (PIR / PUR / Kamena vuna) ---------- */
.comparison-head {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: end;
padding-bottom: clamp(40px, 5vw, 80px);
border-bottom: 1px solid var(--line-light);
}
.comparison-intro {
color: var(--c-text-muted);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.65;
max-width: 46ch;
justify-self: start;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: clamp(40px, 6vw, 80px);
}
.comparison-card {
padding: clamp(28px, 3vw, 48px);
border-left: 1px solid var(--line-light);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.comparison-card:first-child { border-left: 0; padding-left: 0; }
.comparison-card:last-child { padding-right: 0; }
.comparison-num {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--c-accent);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.comparison-num::before {
content: "";
width: 18px;
height: 1px;
background: var(--c-accent);
}
.comparison-title {
font-family: var(--font-display);
font-size: clamp(22px, 2vw, 32px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.012em;
color: var(--c-text);
}
.comparison-lead {
color: var(--c-text-muted);
font-size: clamp(14px, 1vw, 16px);
line-height: 1.6;
max-width: 36ch;
}
.comparison-list {
list-style: none;
padding: 0;
margin: 4px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--line-light);
padding-top: 18px;
}
.comparison-list li {
color: var(--c-text);
font-size: 14px;
line-height: 1.5;
padding-left: 18px;
position: relative;
}
.comparison-list li::before {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 9px;
height: 1px;
background: var(--c-accent);
}
.comparison-tag {
margin-top: auto;
padding-top: 14px;
color: rgba(27, 42, 53, 0.55);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.comparison-cta-row {
margin-top: clamp(48px, 6vw, 88px);
padding-top: clamp(28px, 3vw, 44px);
border-top: 1px solid var(--line-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 4vw, 60px);
flex-wrap: wrap;
}
.comparison-cta-note {
color: var(--c-text-muted);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.55;
max-width: 56ch;
margin: 0;
}
/* ---------- Tech specs (dark, 8-card grid) ---------- */
.tech-specs-head {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: end;
padding-bottom: clamp(40px, 5vw, 80px);
border-bottom: 1px solid var(--line-dark);
}
.tech-specs-intro {
color: rgba(255, 255, 255, 0.72);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.65;
max-width: 46ch;
justify-self: start;
}
.tech-specs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: clamp(40px, 6vw, 80px);
border-top: 1px solid var(--line-dark);
border-left: 1px solid var(--line-dark);
}
.spec-card {
padding: clamp(24px, 2.6vw, 40px);
border-right: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
display: flex;
flex-direction: column;
gap: 14px;
background: transparent;
transition: background 0.5s var(--ease-out);
position: relative;
}
.spec-card:hover { background: rgba(255, 255, 255, 0.025); }
.spec-num {
color: var(--c-accent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.20em;
}
.spec-title {
font-family: var(--font-display);
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.005em;
color: var(--c-white);
}
.spec-desc {
color: rgba(255, 255, 255, 0.68);
font-size: 14px;
line-height: 1.55;
max-width: 30ch;
}
/* ---------- Lager Dobanovci ---------- */
.lager-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
margin-top: clamp(40px, 5vw, 80px);
}
.lager-content {
display: flex;
flex-direction: column;
gap: clamp(24px, 3vw, 40px);
}
.lager-intro {
max-width: 38ch;
}
.lager-points {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--line-light);
}
.lager-points li {
padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 32px) 0;
border-bottom: 1px solid var(--line-light);
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.lager-points li:nth-child(odd) { padding-right: clamp(24px, 3vw, 40px); }
.lager-points li:nth-child(even) {
padding-left: clamp(20px, 2vw, 32px);
border-left: 1px solid var(--line-light);
}
.lager-point-num {
color: var(--c-accent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
}
.lager-point-title {
font-family: var(--font-display);
font-size: clamp(17px, 1.2vw, 20px);
font-weight: 700;
color: var(--c-text);
line-height: 1.2;
}
.lager-point-desc {
color: var(--c-text-muted);
font-size: 14px;
line-height: 1.55;
}
.lager-cta { align-self: flex-start; }
.lager-media { position: sticky; top: 100px; }
.lager-image {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #1A2A33;
isolation: isolate;
}
.lager-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.03);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.lager-image:hover img { transform: scale(1.06); }
.lager-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(11,20,24,0) 0%, rgba(11,20,24,0) 60%, rgba(11,20,24,0.55) 100%);
pointer-events: none;
z-index: 1;
}
.lager-image-tag {
position: absolute;
bottom: clamp(16px, 1.8vw, 24px);
left: clamp(16px, 1.8vw, 24px);
color: rgba(255,255,255,0.92);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
z-index: 2;
}
/* ---------- Quick inquiry form ---------- */
.inquiry-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 6vw, 100px);
margin-top: clamp(40px, 5vw, 80px);
}
.inquiry-intro {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.5vw, 36px);
}
.inquiry-lead {
color: var(--c-text-muted);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.65;
max-width: 36ch;
}
.inquiry-bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid var(--line-light);
padding-top: clamp(20px, 2.4vw, 32px);
}
.inquiry-bullets li {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--c-text);
font-size: 14px;
line-height: 1.5;
}
.inquiry-bullets .bullet-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.10);
flex-shrink: 0;
}
/* Form */
.inquiry-form {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.4vw, 22px);
padding: clamp(28px, 3vw, 48px);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--line-light);
}
.inquiry-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(14px, 1.4vw, 22px);
}
.inquiry-field {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.inquiry-field--full { grid-column: 1 / -1; }
.inquiry-label {
font-size: 12px;
letter-spacing: 0.10em;
color: rgba(27, 42, 53, 0.65);
font-weight: 500;
text-transform: uppercase;
}
.inquiry-input {
width: 100%;
height: 48px;
padding: 0 16px;
background: var(--c-white);
border: 1px solid var(--line-light-2);
color: var(--c-text);
font-family: inherit;
font-size: 15px;
line-height: 1.4;
transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
border-radius: 0;
appearance: none;
-webkit-appearance: none;
}
.inquiry-input::placeholder {
color: rgba(27, 42, 53, 0.35);
}
.inquiry-input:hover { border-color: rgba(27, 42, 53, 0.30); }
.inquiry-input:focus,
.inquiry-input:focus-visible {
outline: none;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.18);
}
.inquiry-input.is-invalid {
border-color: rgba(181, 61, 61, 0.65);
background: rgba(181, 61, 61, 0.04);
}
.inquiry-input.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(181, 61, 61, 0.16);
}
.inquiry-submit.is-loading { opacity: 0.7; pointer-events: none; }
select.inquiry-input {
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px 16px;
padding-right: 44px;
}
.inquiry-textarea {
height: auto;
min-height: 120px;
padding: 14px 16px;
line-height: 1.55;
resize: vertical;
}
.inquiry-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 2vw, 32px);
flex-wrap: wrap;
padding-top: clamp(8px, 1vw, 16px);
}
.inquiry-privacy {
color: var(--c-text-muted);
font-size: 12px;
margin: 0;
letter-spacing: 0.02em;
}
.inquiry-privacy a {
color: var(--c-text);
border-bottom: 1px solid var(--line-light-2);
transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.inquiry-privacy a:hover {
color: var(--c-accent);
border-color: var(--c-accent);
}
.inquiry-status {
margin: 0;
padding-top: 8px;
font-size: 13px;
color: var(--c-text-muted);
letter-spacing: 0.02em;
}
.inquiry-status[data-state="success"] { color: #2C6F4A; }
.inquiry-status[data-state="error"] { color: #B53D3D; }
/* ---------- Sticky side CTA ---------- */
.side-cta {
position: fixed;
right: 0;
top: 50%;
transform: translate(110%, -50%); /* fully off-canvas by default */
z-index: 850; /* below header (1000) and menu overlay (9000) */
display: flex;
align-items: stretch;
gap: 0;
pointer-events: none;
opacity: 0;
visibility: hidden;
max-width: 320px;
transition:
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.45s var(--ease-out),
visibility 0s linear 0.45s;
}
.side-cta.is-visible {
transform: translate(0, -50%);
opacity: 1;
visibility: visible;
transition:
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.5s var(--ease-out),
visibility 0s linear 0s;
}
.side-cta > * { pointer-events: auto; }
.side-cta-toggle {
background: var(--c-dark);
color: var(--c-white);
border: 1px solid rgba(255, 255, 255, 0.12);
border-right: 0;
padding: 14px 14px;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 12px;
cursor: pointer;
transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
box-shadow: -4px 0 24px -10px rgba(0, 0, 0, 0.4);
}
.side-cta-toggle:hover {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
}
.side-cta-toggle-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.side-cta-toggle-icon {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.4s var(--ease-out);
}
.side-cta-toggle-icon svg {
transform: rotate(-90deg);
}
.side-cta.is-open .side-cta-toggle-icon { transform: rotate(180deg); }
/* Expanded panel slides in from the right */
.side-cta-panel {
position: relative;
width: 0;
background: var(--c-dark);
border: 1px solid rgba(255, 255, 255, 0.12);
border-right: 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: -8px 0 30px -12px rgba(0, 0, 0, 0.45);
}
.side-cta.is-open .side-cta-panel { width: 240px; }
.side-cta-action {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
white-space: nowrap;
flex-shrink: 0;
}
.side-cta-action:last-child { border-bottom: 0; }
.side-cta-action:hover {
color: var(--c-accent);
background: rgba(255, 255, 255, 0.025);
}
.side-cta-action--primary { color: var(--c-accent); }
.side-cta-action--primary:hover { color: var(--c-white); background: var(--c-accent); }
.side-cta-action-icon {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ---------- Priority 2 — responsive collapses ---------- */
@media (max-width: 1100px) {
.comparison-grid { grid-template-columns: 1fr; }
.comparison-card { border-left: 0; border-top: 1px solid var(--line-light); padding: 28px 0; }
.comparison-card:first-child { border-top: 0; padding-top: 0; }
.comparison-card:last-child { padding-bottom: 0; }
.comparison-head,
.tech-specs-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.comparison-cta-row { flex-direction: column; align-items: flex-start; }
.tech-specs-grid { grid-template-columns: repeat(2, 1fr); }
.lager-grid { grid-template-columns: 1fr; }
.lager-media { position: relative; top: auto; }
.lager-image { aspect-ratio: 16 / 10; }
.inquiry-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.tech-specs-grid { grid-template-columns: 1fr; }
.lager-points { grid-template-columns: 1fr; }
.lager-points li:nth-child(even) { padding-left: 0; border-left: 0; }
.lager-points li:nth-child(odd) { padding-right: 0; }
.inquiry-row { grid-template-columns: 1fr; }
.inquiry-form { padding: 24px; }
.inquiry-actions { flex-direction: column; align-items: flex-start; }
.inquiry-submit { width: 100%; justify-content: space-between; }
}
/* Scoped boundary tightenings — avoid double-padding between adjacent
homogeneous sections so the homepage rhythm stays editorial. */
.products + .comparison.section-light {
padding-top: clamp(40px, 5vw, 80px);
}
.products.section-light:has(+ .comparison) {
padding-bottom: clamp(40px, 5vw, 80px);
}
.comparison.section-light + .tech-specs.section-dark {
/* Light → dark hard boundary reads cleaner with normal padding above */
padding-top: clamp(60px, 8vw, 120px);
}
/* About → Lager: cut the cumulative ~320px gap roughly in half */
.about.section-light:has(+ .lager) {
padding-bottom: clamp(40px, 5vw, 80px);
}
.about + .lager.section-light {
padding-top: clamp(40px, 5vw, 80px);
}
.lager.section-light + .inquiry.section-light {
padding-top: clamp(40px, 5vw, 80px);
}
.lager.section-light:has(+ .inquiry) {
padding-bottom: clamp(40px, 5vw, 80px);
}
/* ---------- Hover technical labels (premium image annotations) ----------
Anchored to image corners with a thin connector line and a small
bronze dot. Hidden by default; fade + slide in when the image's
parent (.zone-card / .lager-image / etc.) is hovered. */
.image-tags {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}
.image-tag {
position: absolute;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 12px;
background: rgba(13, 24, 32, 0.72);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.92);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.10);
opacity: 0;
transition:
opacity 0.45s var(--ease-out),
transform 0.55s var(--ease-out);
}
.image-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.18);
flex-shrink: 0;
}
/* Corner placements + tiny offsets for "anchored" feel */
.image-tag--tl { top: 14px; left: 14px; transform: translate(-6px, -6px); }
.image-tag--tr { top: 14px; right: 14px; transform: translate(6px, -6px); }
.image-tag--bl { bottom: 14px; left: 14px; transform: translate(-6px, 6px); }
.image-tag--br { bottom: 14px; right: 14px; transform: translate(6px, 6px); }
/* Reveal on parent hover — works for .zone-card, .lager-image, .projects-media, .product-media */
.zone-card:hover .image-tag,
.lager-image:hover .image-tag,
.projects-media:hover .image-tag,
.product-card:hover .image-tag {
opacity: 1;
transform: translate(0, 0);
transition-delay: 0.12s;
}
/* Stagger the second tag slightly for a more refined feel */
.zone-card:hover .image-tag--br,
.zone-card:hover .image-tag--bl,
.lager-image:hover .image-tag--bl,
.product-card:hover .image-tag--br,
.product-card:hover .image-tag--bl {
transition-delay: 0.22s;
}
/* Touch devices: keep tags subtly visible always */
@media (hover: none) {
.image-tag {
opacity: 1;
transform: translate(0, 0);
background: rgba(13, 24, 32, 0.55);
}
}
/* On mobile the image area is small — show only the top tag, hide the bottom one */
@media (max-width: 720px) {
.image-tag--bl,
.image-tag--br { display: none; }
.image-tag {
font-size: 10px;
padding: 6px 10px;
letter-spacing: 0.12em;
}
}
/* ---------- Scroll progress / chapter marker (desktop only) ---------- */
.scroll-progress {
position: fixed;
left: clamp(14px, 1.6vw, 26px);
top: 50%;
transform: translateY(-50%);
z-index: 800; /* below header / overlays / preloader / grain */
display: flex;
align-items: center;
gap: 16px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity 0.5s var(--ease-out),
visibility 0s linear 0.5s;
}
.scroll-progress.is-visible {
opacity: 1;
visibility: visible;
transition:
opacity 0.5s var(--ease-out),
visibility 0s linear 0s;
}
.scroll-progress > * { pointer-events: auto; }
.scroll-progress-bar {
position: relative;
width: 1px;
height: 220px;
background: rgba(255, 255, 255, 0.12);
}
.scroll-progress-bar-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: var(--c-accent);
will-change: height;
transition: height 0.25s linear;
}
.scroll-progress-chapters {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.scroll-progress-chapter {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: rgba(255, 255, 255, 0.45);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
transition:
color 0.4s var(--ease-out),
gap 0.4s var(--ease-out);
}
.scroll-progress-chapter:hover { color: rgba(255, 255, 255, 0.85); gap: 12px; }
.scroll-progress-chapter.is-active { color: var(--c-white); gap: 14px; }
.scroll-progress-num {
font-weight: 600;
font-size: 11px;
color: rgba(255, 255, 255, 0.50);
transition: color 0.4s var(--ease-out);
letter-spacing: 0.06em;
}
.scroll-progress-chapter.is-active .scroll-progress-num { color: var(--c-accent); }
.scroll-progress-label {
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.scroll-progress-chapter:hover .scroll-progress-label,
.scroll-progress-chapter.is-active .scroll-progress-label {
opacity: 1;
transform: translateX(0);
}
/* Switch label tone when the marker sits over a light section */
.scroll-progress[data-tone="light"] .scroll-progress-bar { background: rgba(27, 42, 53, 0.16); }
.scroll-progress[data-tone="light"] .scroll-progress-chapter { color: rgba(27, 42, 53, 0.45); }
.scroll-progress[data-tone="light"] .scroll-progress-num { color: rgba(27, 42, 53, 0.50); }
.scroll-progress[data-tone="light"] .scroll-progress-chapter:hover { color: var(--c-text); }
.scroll-progress[data-tone="light"] .scroll-progress-chapter.is-active { color: var(--c-text); }
.scroll-progress[data-tone="light"] .scroll-progress-chapter.is-active .scroll-progress-num { color: var(--c-accent); }
@media (max-width: 1100px) {
.scroll-progress { display: none; }
}
/* Sticky side CTA — desktop/tablet only.
On mobile the hero CTAs, inquiry form, and final CTA already give enough
conversion paths; a fixed bottom bar would compete with the hero buttons. */
@media (max-width: 900px) {
.side-cta { display: none; }
}
/* ---------- Back-to-top — premium circular button (bottom-right) ---------- */
.back-to-top {
position: fixed;
right: clamp(18px, 2vw, 32px);
bottom: clamp(18px, 2vw, 32px);
z-index: 860; /* above side-cta (850), below header (1000) */
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(13, 26, 34, 0.78);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
color: var(--c-white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(0.92);
pointer-events: none;
transition:
opacity 0.45s var(--ease-out),
transform 0.5s var(--ease-out),
background 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
color 0.4s var(--ease-out),
visibility 0s linear 0.45s;
box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
transition:
opacity 0.5s var(--ease-out),
transform 0.6s var(--ease-out),
background 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
color 0.4s var(--ease-out),
visibility 0s linear 0s;
}
.back-to-top:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
transform: translateY(-3px) scale(1);
box-shadow: 0 14px 30px -10px rgba(200, 162, 125, 0.45);
}
.back-to-top:hover .back-to-top-icon { transform: translateY(-2px); }
.back-to-top-icon {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.4s var(--ease-out);
}
.back-to-top:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
}
/* When the side-CTA is open and visible, sit the back-to-top a little inward
so the two don't touch */
.side-cta.is-open ~ .back-to-top {
right: clamp(280px, calc(2vw + 264px), 296px);
}
@media (max-width: 900px) {
.back-to-top {
width: 42px;
height: 42px;
right: 14px;
bottom: 14px;
}
/* Side CTA is hidden on mobile; back-to-top sits at the corner alone */
.side-cta.is-open ~ .back-to-top { right: 14px; }
}
/* =====================================================================
PROIZVODI PAGE — editorial intro + masonry product category grid
===================================================================== */
/* The body class scopes preloader meta if needed; the grain/sticky
subsystems are shared with the homepage. */
.page-proizvodi { background: var(--c-dark); }
/* Push content below the fixed header so the editorial top doesn't
sit underneath it. The header fades into a solid state on scroll, so
a generous top offset reads as intentional editorial breathing room. */
.proizvodi-hero {
position: relative;
background: var(--c-dark);
color: var(--c-white);
/* Full-screen catalogue hero — sits flush above the sticky category nav. */
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
/* Top padding > bottom to optically compensate for the fixed navbar.
Vertical flex-centering does the rest. */
padding: clamp(120px, 14vh, 180px) 0 clamp(96px, 11vh, 140px);
overflow: hidden;
isolation: isolate;
}
@supports (height: 100dvh) {
.proizvodi-hero { min-height: 100dvh; }
}
/* Background image layer — sits behind grid-lines + content. Subtle fade-in
on first paint, then a slow breathing pulse (opacity + tiny scale) so the
hero feels alive without being distracting. Mirrors the homepage hero feel. */
.proizvodi-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.proizvodi-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(0.92) contrast(1.04);
transform-origin: center center;
will-change: transform, opacity;
animation:
proizvodi-hero-fadein 1.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both,
proizvodi-hero-breathe 14s ease-in-out 1.4s infinite;
}
.proizvodi-hero-overlay {
position: absolute;
inset: 0;
/* Tuned for the bright snow / blue-sky industrial image: stronger
darkness on the left/top where the H1 sits so white text reads
cleanly, lighter on the right so the hala stays visible. */
background:
linear-gradient(180deg, rgba(13, 24, 32, 0.45) 0%, rgba(13, 24, 32, 0.72) 100%),
linear-gradient(90deg, rgba(13, 24, 32, 0.78) 0%, rgba(13, 24, 32, 0.58) 48%, rgba(13, 24, 32, 0.35) 100%);
}
@keyframes proizvodi-hero-fadein {
from { opacity: 0; transform: scale(1.06); }
to { opacity: 0.95; transform: scale(1.02); }
}
@keyframes proizvodi-hero-breathe {
0% { opacity: 0.92; transform: scale(1.02); }
50% { opacity: 1.00; transform: scale(1.05); }
100% { opacity: 0.92; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
.proizvodi-hero-bg img {
animation: none;
opacity: 0.95;
transform: none;
}
}
.proizvodi-hero .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.proizvodi-hero .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.07);
transform-origin: top center;
}
.proizvodi-hero-inner {
position: relative;
z-index: 2;
width: 100%;
}
/* Top row: small label + chapter meta */
.proizvodi-hero-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-bottom: clamp(32px, 5vh, 56px);
}
.proizvodi-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.proizvodi-hero-eyebrow .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.10);
}
.proizvodi-hero-meta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.proizvodi-hero-meta-line {
width: 36px;
height: 1px;
background: rgba(255, 255, 255, 0.32);
}
/* Headline — large, editorial */
.proizvodi-hero-title {
font-family: var(--font-display);
font-weight: 700;
color: var(--c-white);
font-size: clamp(52px, 8.6vw, 144px);
line-height: 0.96;
letter-spacing: -0.028em;
margin: 0 0 clamp(56px, 9vh, 110px);
max-width: 14ch;
}
/* Lower row: features (left) + editorial paragraph (right) */
.proizvodi-hero-grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(48px, 6vw, 96px);
align-items: end;
}
.proizvodi-hero-features {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 48px);
align-self: end;
}
.proizvodi-hero-feature {
display: flex;
flex-direction: column;
gap: 8px;
color: rgba(255, 255, 255, 0.78);
max-width: 26ch;
}
.proizvodi-hero-feature-mark {
color: var(--c-accent);
font-weight: 500;
font-size: 16px;
line-height: 1;
margin-bottom: 8px;
}
.proizvodi-hero-feature-title {
color: var(--c-white);
font-weight: 600;
font-size: 15px;
line-height: 1.35;
letter-spacing: -0.005em;
}
.proizvodi-hero-feature-text {
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
line-height: 1.55;
}
.proizvodi-hero-copy {
font-size: clamp(20px, 2.2vw, 34px);
line-height: 1.28;
letter-spacing: -0.012em;
font-weight: 500;
max-width: 32ch;
margin: 0;
}
.proizvodi-hero-copy-mute {
color: rgba(255, 255, 255, 0.42);
}
.proizvodi-hero-copy-strong {
color: var(--c-white);
}
/* ---------- Sticky category nav ---------- */
/* Sits below the fixed site-header. Header is ~74px tall in its scrolled state
(padding 12+12 + ~50px content), so we anchor at 76px to clear it cleanly. */
.proizvodi-sticky-nav {
position: sticky;
top: 76px;
z-index: 900;
background: rgba(13, 24, 32, 0.92);
-webkit-backdrop-filter: saturate(140%) blur(10px);
backdrop-filter: saturate(140%) blur(10px);
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
transition: background 0.35s var(--ease-out);
}
.proizvodi-sticky-nav-inner {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
padding-top: 14px;
padding-bottom: 14px;
min-height: 60px;
}
.proizvodi-sticky-nav-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
flex-shrink: 0;
}
.proizvodi-sticky-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
gap: clamp(4px, 0.6vw, 10px);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
}
.proizvodi-sticky-nav-list::-webkit-scrollbar { display: none; }
.proizvodi-sticky-nav-link {
position: relative;
display: inline-flex;
align-items: center;
padding: 9px 16px;
color: rgba(255, 255, 255, 0.62);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
border-radius: var(--radius-pill);
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s var(--ease-out),
background 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.proizvodi-sticky-nav-link:hover {
color: var(--c-white);
border-color: var(--line-dark-2);
}
.proizvodi-sticky-nav-link.is-active {
color: var(--c-dark);
background: var(--c-accent);
border-color: var(--c-accent);
}
/* ---------- Product category masonry grid ---------- */
.proizvodi-grid {
padding: clamp(56px, 8vh, 120px) 0 clamp(80px, 10vh, 160px);
position: relative;
overflow: hidden;
}
.proizvodi-grid .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.proizvodi-grid .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.05);
}
.proizvodi-grid .container { position: relative; z-index: 1; }
.proizvodi-masonry {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 96px);
align-items: start;
}
.proizvodi-col {
display: flex;
flex-direction: column;
gap: clamp(64px, 10vh, 140px);
}
/* Right column starts visually lower for the editorial offset */
.proizvodi-col--b {
margin-top: clamp(72px, 14vh, 200px);
}
.proizvodi-card {
position: relative;
display: block;
transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.proizvodi-card.is-filtered-out {
opacity: 0.18;
pointer-events: none;
filter: grayscale(0.4);
}
.proizvodi-card-link {
display: block;
color: inherit;
text-decoration: none;
isolation: isolate;
}
.proizvodi-card-media {
position: relative;
aspect-ratio: 16 / 11;
overflow: hidden;
background: var(--c-dark-2);
margin-bottom: clamp(20px, 2.4vh, 32px);
isolation: isolate;
}
.proizvodi-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.02);
transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.6s var(--ease-out);
will-change: transform;
}
.proizvodi-card-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(13, 24, 32, 0);
transition: background 0.55s var(--ease-out);
pointer-events: none;
}
/* Curtain sweep — bronze-tinted wipe left to right on hover */
.proizvodi-card-curtain {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
100deg,
rgba(13, 24, 32, 0) 0%,
rgba(13, 24, 32, 0.25) 32%,
rgba(200, 162, 125, 0.32) 50%,
rgba(13, 24, 32, 0.25) 68%,
rgba(13, 24, 32, 0) 100%
);
transform: translateX(-101%);
transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
will-change: transform;
}
.proizvodi-card-arrow {
position: absolute;
right: clamp(14px, 2vw, 22px);
bottom: clamp(14px, 2vw, 22px);
z-index: 3;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-white);
color: var(--c-dark);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translate(8px, 8px);
transition: opacity 0.45s var(--ease-out),
transform 0.55s var(--ease-out),
background 0.35s var(--ease-out),
color 0.35s var(--ease-out);
}
.proizvodi-card-arrow svg { transition: transform 0.45s var(--ease-out); }
/* Hover state — image zoom, curtain sweep, arrow reveal, lift */
.proizvodi-card:hover .proizvodi-card-media img {
transform: scale(1.06);
filter: saturate(1.05) contrast(1.03);
}
.proizvodi-card:hover .proizvodi-card-curtain {
transform: translateX(101%);
}
.proizvodi-card:hover .proizvodi-card-overlay {
background: rgba(13, 24, 32, 0.18);
}
.proizvodi-card:hover .proizvodi-card-arrow {
opacity: 1;
transform: translate(0, 0);
}
.proizvodi-card:hover .proizvodi-card-arrow svg {
transform: translateX(2px);
}
/* Touch devices: keep the arrow visible (no hover) and skip curtain */
@media (hover: none) {
.proizvodi-card-curtain { display: none; }
.proizvodi-card-arrow { opacity: 1; transform: none; }
}
.proizvodi-card-info {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
color: var(--c-white);
}
.proizvodi-card-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.85);
margin-right: 4px;
}
.proizvodi-card-title {
font-family: var(--font-display);
font-size: clamp(20px, 1.7vw, 26px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
color: var(--c-white);
}
.proizvodi-card-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
align-self: center;
flex-shrink: 0;
margin: 0 4px;
}
.proizvodi-card-type {
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
letter-spacing: 0.005em;
line-height: 1.3;
}
.proizvodi-card-desc {
margin: 14px 0 0;
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
line-height: 1.6;
max-width: 44ch;
}
/* ---------- Split CTA before footer ---------- */
.split-cta {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--c-dark);
}
.split-cta-block {
padding: clamp(64px, 9vh, 128px) clamp(32px, 5vw, 96px);
display: flex;
align-items: stretch;
min-height: clamp(360px, 48vh, 520px);
position: relative;
overflow: hidden;
}
.split-cta-block--slate {
background: var(--c-brand-mid);
color: var(--c-white);
}
.split-cta-block--bronze {
background: var(--c-accent);
color: var(--c-dark);
}
.split-cta-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(24px, 3vh, 40px);
width: 100%;
max-width: 540px;
}
.split-cta-heading {
font-family: var(--font-display);
font-size: clamp(34px, 3.6vw, 56px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.022em;
margin: 0;
color: inherit;
}
.split-cta-text {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.55;
margin: 0;
color: inherit;
opacity: 0.82;
max-width: 36ch;
}
.split-cta-btn { align-self: flex-start; }
/* Bronze block uses solid pill but rendered against bronze — flip variants */
.split-cta-block--bronze .btn-pill--solid {
background: var(--c-white);
color: var(--c-dark);
border-color: var(--c-white);
--btn-arrow-hover: var(--c-white);
}
.split-cta-block--bronze .btn-pill--solid .btn-arrow {
border-color: var(--c-dark);
}
.split-cta-block--bronze .btn-pill--solid:hover {
background: var(--c-dark);
color: var(--c-white);
border-color: var(--c-dark);
}
.split-cta-block--bronze .btn-pill--solid:hover .btn-arrow {
background: var(--c-white);
border-color: var(--c-white);
}
.split-cta-block--bronze .btn-pill--solid:hover .btn-arrow svg {
color: var(--c-dark);
}
/* ---------- Tablet / mobile adjustments ---------- */
@media (max-width: 1024px) {
.proizvodi-hero-grid {
grid-template-columns: 1fr;
gap: clamp(40px, 6vh, 72px);
align-items: start;
}
.proizvodi-hero-features { align-self: start; }
.proizvodi-masonry {
gap: clamp(28px, 4vw, 64px);
}
.proizvodi-col { gap: clamp(48px, 8vh, 96px); }
.proizvodi-col--b { margin-top: clamp(48px, 8vh, 120px); }
}
@media (max-width: 720px) {
.proizvodi-hero {
padding: clamp(110px, 14vh, 150px) 0 clamp(64px, 8vh, 96px);
}
.proizvodi-hero-top {
flex-direction: row;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.proizvodi-hero-meta { display: none; }
.proizvodi-hero-title {
font-size: clamp(40px, 11vw, 64px);
max-width: none;
margin-bottom: 36px;
}
.proizvodi-hero-grid {
gap: 36px;
}
/* Reorder: paragraph first, features below */
.proizvodi-hero-features { order: 2; }
.proizvodi-hero-copy { order: 1; }
.proizvodi-hero-features {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.proizvodi-hero-feature { max-width: none; }
.proizvodi-hero-copy {
font-size: clamp(18px, 5vw, 22px);
max-width: none;
}
.proizvodi-sticky-nav { top: 60px; }
.proizvodi-sticky-nav-inner {
padding-top: 10px;
padding-bottom: 10px;
gap: 14px;
min-height: 52px;
}
.proizvodi-sticky-nav-label { display: none; }
.proizvodi-sticky-nav-link {
padding: 7px 14px;
font-size: 12px;
flex-shrink: 0;
}
.proizvodi-grid {
padding: 48px 0 80px;
}
/* On mobile, dissolve the two columns and interleave cards in natural
numeric order (1, 2, 3, 4, 5, 6, 7, 8) using flex order. */
.proizvodi-masonry {
display: flex;
flex-direction: column;
gap: 56px;
}
.proizvodi-col {
display: contents;
}
.proizvodi-col--b { margin-top: 0; }
.proizvodi-col--a .proizvodi-card:nth-child(1) { order: 1; }
.proizvodi-col--b .proizvodi-card:nth-child(1) { order: 2; }
.proizvodi-col--a .proizvodi-card:nth-child(2) { order: 3; }
.proizvodi-col--b .proizvodi-card:nth-child(2) { order: 4; }
.proizvodi-col--a .proizvodi-card:nth-child(3) { order: 5; }
.proizvodi-col--b .proizvodi-card:nth-child(3) { order: 6; }
.proizvodi-col--a .proizvodi-card:nth-child(4) { order: 7; }
.proizvodi-col--b .proizvodi-card:nth-child(4) { order: 8; }
.proizvodi-card-arrow {
width: 38px;
height: 38px;
right: 12px;
bottom: 12px;
opacity: 1;
transform: none;
}
.split-cta {
grid-template-columns: 1fr;
}
.split-cta-block {
min-height: auto;
padding: 56px var(--pad-x);
}
}
/* =====================================================================
PROIZVODI PAGE — premium upgrades
- hover technical labels overlaid on product images
- small spec badges below each card description
- "Find your panel" interactive recommendation block
- PIR / PUR / kamena vuna comparison cards
===================================================================== */
/* ---------- Hover technical labels on product images ---------- */
.proizvodi-card-labels {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
overflow: hidden;
}
.proizvodi-card-label {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(13, 24, 32, 0.78);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s var(--ease-out),
transform 0.55s var(--ease-out);
}
.proizvodi-card-label-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.18);
flex-shrink: 0;
}
/* Four position presets — labels spread across the image */
.proizvodi-card-label--1 { top: 12%; left: 6%; }
.proizvodi-card-label--2 { top: 16%; right: 6%; }
.proizvodi-card-label--3 { bottom: 22%; left: 8%; }
.proizvodi-card-label--4 { bottom: 14%; right: 22%; }
/* Reveal labels with stagger when card is hovered */
.proizvodi-card:hover .proizvodi-card-label {
opacity: 1;
transform: translateY(0);
}
.proizvodi-card:hover .proizvodi-card-label--1 { transition-delay: 0.10s; }
.proizvodi-card:hover .proizvodi-card-label--2 { transition-delay: 0.18s; }
.proizvodi-card:hover .proizvodi-card-label--3 { transition-delay: 0.26s; }
.proizvodi-card:hover .proizvodi-card-label--4 { transition-delay: 0.34s; }
/* On touch devices we replace the hover labels with a small static badge row
that appears under the image (rendered via the existing badge list below
the description). The hover labels stay hidden. */
@media (hover: none) {
.proizvodi-card-labels { display: none; }
}
/* ---------- Spec badges below card description ---------- */
.proizvodi-card-badges {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.proizvodi-card-badge {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-pill);
background: transparent;
color: rgba(255, 255, 255, 0.65);
font-size: 12px;
letter-spacing: 0.005em;
line-height: 1.2;
transition: color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
background 0.35s var(--ease-out);
}
.proizvodi-card:hover .proizvodi-card-badge {
color: rgba(255, 255, 255, 0.88);
border-color: rgba(200, 162, 125, 0.36);
}
/* ---------- "Find your panel" interactive block ---------- */
.panel-finder {
padding: clamp(80px, 11vh, 160px) 0;
}
.panel-finder-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(48px, 7vh, 88px);
}
.panel-finder-head .section-heading {
margin-bottom: 0;
max-width: 16ch;
}
.panel-finder-sub {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
color: var(--c-text-muted);
max-width: 42ch;
}
.panel-finder-grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(32px, 4vw, 72px);
align-items: start;
border-top: 1px solid var(--line-light-2);
padding-top: clamp(32px, 4vh, 56px);
}
/* Left: option list */
.panel-finder-options {
display: flex;
flex-direction: column;
}
.panel-finder-option {
appearance: none;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line-light);
padding: clamp(20px, 2.6vh, 30px) 0;
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 28px);
cursor: pointer;
text-align: left;
color: var(--c-text);
font-family: inherit;
transition: color 0.35s var(--ease-out);
position: relative;
}
.panel-finder-option:first-child { border-top: 1px solid var(--line-light); }
.panel-finder-option-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--c-text-muted);
flex-shrink: 0;
transition: color 0.35s var(--ease-out);
}
.panel-finder-option-name {
font-family: var(--font-display);
font-size: clamp(20px, 1.8vw, 28px);
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.1;
flex: 1;
transition: transform 0.45s var(--ease-out);
}
.panel-finder-option-arrow {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--line-light-2);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-text);
flex-shrink: 0;
opacity: 0.55;
transform: translateX(-4px);
transition: opacity 0.4s var(--ease-out),
transform 0.45s var(--ease-out),
background 0.35s var(--ease-out),
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out);
}
.panel-finder-option:hover .panel-finder-option-arrow,
.panel-finder-option.is-active .panel-finder-option-arrow {
opacity: 1;
transform: translateX(0);
}
.panel-finder-option.is-active {
color: var(--c-text);
}
.panel-finder-option.is-active .panel-finder-option-num {
color: var(--c-accent);
}
.panel-finder-option.is-active .panel-finder-option-arrow {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
}
.panel-finder-option:hover .panel-finder-option-name {
transform: translateX(6px);
}
/* Right: recommendation card */
.panel-finder-card {
background: var(--c-light-2);
border: 1px solid var(--line-light);
padding: clamp(28px, 3.5vw, 48px);
display: flex;
flex-direction: column;
gap: clamp(18px, 2.4vw, 28px);
min-height: clamp(360px, 50vh, 480px);
transition: opacity 0.35s var(--ease-out);
position: relative;
}
.panel-finder-card.is-swapping {
opacity: 0;
}
.panel-finder-card-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.panel-finder-card-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-accent);
flex-shrink: 0;
}
.panel-finder-card-title {
font-family: var(--font-display);
font-size: clamp(26px, 2.6vw, 38px);
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.1;
margin: 0;
color: var(--c-text);
}
.panel-finder-card-text {
font-size: clamp(14.5px, 1vw, 16px);
line-height: 1.62;
color: var(--c-text-muted);
max-width: 50ch;
margin: 0;
}
.panel-finder-card-products {
border-top: 1px solid var(--line-light);
padding-top: clamp(18px, 2vh, 24px);
display: flex;
flex-direction: column;
gap: 12px;
}
.panel-finder-card-products-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.panel-finder-card-products-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.panel-finder-card-products-list li {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border: 1px solid var(--line-light-2);
border-radius: var(--radius-pill);
background: var(--c-white);
color: var(--c-text);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.005em;
}
.panel-finder-card-cta {
align-self: flex-start;
margin-top: auto;
}
/* ---------- Material comparison: PIR / PUR / Kamena vuna ---------- */
.material-compare {
padding: clamp(80px, 11vh, 160px) 0;
}
.material-compare-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(48px, 7vh, 88px);
}
.material-compare-head .section-heading {
margin-bottom: 0;
max-width: 16ch;
}
.material-compare-sub {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
max-width: 44ch;
}
.material-compare-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 36px);
}
.material-card {
display: flex;
flex-direction: column;
gap: clamp(16px, 2vh, 24px);
padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(32px, 3.5vw, 48px);
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--line-dark);
color: var(--c-white);
transition: background 0.45s var(--ease-out),
border-color 0.45s var(--ease-out),
transform 0.55s var(--ease-out);
position: relative;
isolation: isolate;
}
.material-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 1px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s var(--ease-out);
}
.material-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: var(--line-dark-2);
transform: translateY(-4px);
}
.material-card:hover::before {
transform: scaleX(1);
}
.material-card-top {
display: flex;
align-items: center;
gap: 16px;
}
.material-card-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.22em;
color: var(--c-accent);
}
.material-card-line {
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.14);
}
.material-card-title {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.05;
margin: 0;
color: var(--c-white);
}
.material-card-sub {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.42;
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
.material-card-best {
border-top: 1px solid var(--line-dark);
padding-top: clamp(14px, 1.6vh, 20px);
display: flex;
flex-direction: column;
gap: 6px;
}
.material-card-best-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.material-card-best-text {
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
.material-card-benefits {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.material-card-benefits li {
display: flex;
gap: 12px;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
line-height: 1.45;
}
.material-card-benefit-mark {
color: var(--c-accent);
font-weight: 500;
line-height: 1.45;
flex-shrink: 0;
}
.material-card-cta {
align-self: flex-start;
margin-top: 8px;
}
/* ---------- Tablet adjustments ---------- */
@media (max-width: 1024px) {
.panel-finder-head,
.material-compare-head {
grid-template-columns: 1fr;
gap: clamp(20px, 3vh, 36px);
align-items: start;
}
.panel-finder-grid {
grid-template-columns: 1fr;
gap: clamp(28px, 4vh, 48px);
}
.material-compare-grid {
grid-template-columns: 1fr 1fr;
}
.proizvodi-card-label--2 { top: 14%; right: 4%; }
.proizvodi-card-label--4 { bottom: 12%; right: 4%; }
}
/* ---------- Mobile adjustments ---------- */
@media (max-width: 720px) {
.panel-finder { padding: 64px 0 72px; }
.panel-finder-head { margin-bottom: 32px; }
.panel-finder-grid { padding-top: 28px; gap: 32px; }
.panel-finder-option {
padding: 18px 0;
gap: 14px;
}
.panel-finder-option-name {
font-size: clamp(18px, 5vw, 22px);
}
.panel-finder-option:hover .panel-finder-option-name {
transform: none;
}
.panel-finder-card {
padding: 24px;
min-height: auto;
}
.material-compare { padding: 64px 0 80px; }
.material-compare-head { margin-bottom: 32px; }
.material-compare-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.material-card {
padding: 24px 22px 28px;
}
/* Mobile: skip the hover labels (already hidden via @media (hover: none) on
most touch devices, but enforce here for narrow viewports too) */
.proizvodi-card-labels { display: none; }
.proizvodi-card-badges { gap: 6px; margin-top: 12px; }
.proizvodi-card-badge { font-size: 11px; padding: 4px 10px; }
}
/* =====================================================================
PROIZVODI PAGE — phase 3 upgrades
1) MATERIAL LAYERS — sandwich panel structure scroll-triggered visual
2) PRODUCT PREVIEW SIDE PANEL / BOTTOM SHEET
3) PREMIUM PAGE TRANSITION (curtain wipe)
===================================================================== */
/* ---------- 1. MATERIAL LAYERS ---------- */
.material-layers {
padding: clamp(80px, 11vh, 160px) 0;
position: relative;
overflow: hidden;
}
.material-layers .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.material-layers .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.05);
}
.material-layers .container {
position: relative;
z-index: 1;
}
.material-layers-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
.material-layers-text {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
align-items: flex-start;
}
.material-layers-text .section-heading {
margin-bottom: 0;
max-width: 14ch;
}
.material-layers-copy {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.65;
color: rgba(255, 255, 255, 0.74);
max-width: 46ch;
margin: 0;
}
.material-layers-copy .hl-yellow {
color: var(--c-white);
font-weight: 500;
}
.material-layers-cta { margin-top: clamp(8px, 1.2vh, 16px); }
/* The 3D stage holds the layered panel illustration */
.material-layers-stage {
position: relative;
height: clamp(360px, 56vh, 580px);
perspective: 1400px;
perspective-origin: 55% 45%;
}
.material-layers-board {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: rotateX(-18deg) rotateY(-22deg);
will-change: transform;
}
/* Each layer is an absolutely positioned plate with depth and metal sheen */
.material-layer {
position: absolute;
left: 8%;
right: 8%;
transform-style: preserve-3d;
will-change: transform, opacity;
transition: transform 0.55s var(--ease-out);
}
/* Outer top metal sheet — bright steel */
.material-layer--top {
top: 24%;
height: 14%;
background:
linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 100%),
linear-gradient(90deg, #C8CDD3 0%, #E8ECEF 30%, #C5CCD2 65%, #A4ABB2 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow:
0 12px 30px -18px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.32);
}
/* Insulation core — thicker, foam-like with soft tone */
.material-layer--core {
top: 38%;
height: 24%;
background:
linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,0.18) 100%),
repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, rgba(0,0,0,0.06) 2px 4px),
linear-gradient(90deg, #E1D2BD 0%, #EBDDC8 50%, #D4C4AE 100%);
border-top: 1px solid rgba(255, 255, 255, 0.10);
border-bottom: 1px solid rgba(0, 0, 0, 0.30);
box-shadow:
inset 0 12px 28px -16px rgba(0,0,0,0.30),
inset 0 -8px 18px -10px rgba(0,0,0,0.30);
}
/* Inner bottom metal sheet — slightly darker mirror to the top */
.material-layer--bottom {
top: 62%;
height: 14%;
background:
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, rgba(255,255,255,0.06) 100%),
linear-gradient(90deg, #B0B6BD 0%, #D6DADE 35%, #ADB4BB 65%, #8B9197 100%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 18px 36px -18px rgba(0,0,0,0.65),
inset 0 -1px 0 rgba(0,0,0,0.30);
}
/* Profile / finishing rib — bronze accent ridges layered below */
.material-layer--profile {
top: 78%;
height: 6%;
background:
linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.18) 100%),
repeating-linear-gradient(90deg,
rgba(200, 162, 125, 0.55) 0 14px,
rgba(168, 133, 96, 0.85) 14px 18px,
rgba(200, 162, 125, 0.55) 18px 32px,
rgba(80, 60, 40, 0.85) 32px 36px);
border-top: 1px solid rgba(255, 255, 255, 0.10);
border-bottom: 1px solid rgba(0, 0, 0, 0.42);
box-shadow: 0 14px 30px -18px rgba(0,0,0,0.55);
opacity: 0.85;
}
/* Technical labels — dark translucent pill anchored to each layer */
.material-layer-tag {
position: absolute;
top: 50%;
left: -14%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 12px;
pointer-events: none;
will-change: opacity, transform;
}
.material-layer-tag--right {
left: auto;
right: -14%;
flex-direction: row-reverse;
}
.material-layer-tag-line {
width: clamp(36px, 4vw, 64px);
height: 1px;
background: rgba(200, 162, 125, 0.55);
transform-origin: left center;
}
.material-layer-tag--right .material-layer-tag-line {
transform-origin: right center;
}
.material-layer-tag-text {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(13, 24, 32, 0.82);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.92);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
}
.material-layer-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.20);
flex-shrink: 0;
}
/* Tablet — collapse to single column, simpler stage, tags pulled inside */
@media (max-width: 1024px) {
.material-layers-grid {
grid-template-columns: 1fr;
gap: clamp(32px, 4vh, 56px);
}
.material-layers-stage {
height: clamp(320px, 48vh, 460px);
}
.material-layers-board {
transform: rotateX(-12deg) rotateY(-14deg);
}
/* Bring tags inside the stage so they don't get clipped by overflow:hidden */
.material-layer-tag { left: 2%; }
.material-layer-tag--right { left: auto; right: 2%; }
.material-layer-tag-line { width: 24px; }
}
/* Mobile — flatten the 3D, stack layers cleanly with no rotation */
@media (max-width: 720px) {
.material-layers { padding: 64px 0 80px; }
.material-layers-stage {
height: auto;
perspective: none;
padding: 8px 0;
}
.material-layers-board {
position: relative;
inset: auto;
transform: none;
transform-style: flat;
display: flex;
flex-direction: column;
gap: 18px;
}
.material-layer {
position: relative;
top: auto;
left: 0;
right: 0;
height: auto;
padding: 14px 18px;
min-height: 60px;
display: flex;
align-items: center;
}
.material-layer--top,
.material-layer--bottom { min-height: 48px; }
.material-layer--core { min-height: 80px; }
.material-layer--profile { min-height: 36px; opacity: 1; }
.material-layer-tag,
.material-layer-tag--right {
position: relative;
top: auto;
left: auto;
right: auto;
transform: none;
flex-direction: row;
}
.material-layer-tag-line { display: none; }
}
/* ---------- 2. PRODUCT PREVIEW PANEL ---------- */
/* Small "Brzi pregled" trigger appended below each card */
.proizvodi-card-preview-btn {
appearance: none;
background: transparent;
border: 0;
padding: 0;
margin-top: clamp(14px, 1.6vh, 20px);
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.80);
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.proizvodi-card-preview-btn:hover {
color: var(--c-accent);
gap: 14px;
}
.proizvodi-card-preview-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.24);
transition: background 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
color 0.3s var(--ease-out);
color: rgba(255, 255, 255, 0.85);
}
.proizvodi-card-preview-btn:hover .proizvodi-card-preview-btn-icon {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
}
/* The panel itself: fixed, slides from right on desktop, bottom sheet on mobile.
z-index 9100 — above the menu overlay (9000), below the grain (9998) and
the page transition (9700) and preloader (10000). */
.product-preview {
position: fixed;
inset: 0;
z-index: 9100;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear 0.55s;
}
.product-preview.is-open {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.product-preview-overlay {
position: absolute;
inset: 0;
background: rgba(8, 16, 22, 0.62);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.45s var(--ease-out);
cursor: pointer;
}
.product-preview.is-open .product-preview-overlay {
opacity: 1;
}
.product-preview-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: clamp(440px, 38vw, 560px);
background: var(--c-dark);
color: var(--c-white);
border-left: 1px solid var(--line-dark);
transform: translateX(100%);
transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
overflow-y: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: clamp(20px, 2.6vh, 32px);
padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(24px, 3vh, 36px);
}
.product-preview.is-open .product-preview-panel {
transform: translateX(0);
}
.product-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.product-preview-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.product-preview-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.18);
}
.product-preview-close {
appearance: none;
background: transparent;
border: 1px solid var(--line-dark-2);
border-radius: var(--radius-pill);
padding: 8px 14px 8px 16px;
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--c-white);
font-family: inherit;
font-size: 12px;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.product-preview-close:hover {
background: var(--c-white);
color: var(--c-dark);
border-color: var(--c-white);
}
.product-preview-close-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid currentColor;
}
.product-preview-image {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--c-dark-2);
border: 1px solid var(--line-dark);
}
.product-preview-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-preview-body {
display: flex;
flex-direction: column;
gap: clamp(16px, 2vh, 22px);
}
.product-preview-title {
font-family: var(--font-display);
font-size: clamp(26px, 2.2vw, 36px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.08;
margin: 0;
color: var(--c-white);
}
.product-preview-desc {
font-size: clamp(14.5px, 1.05vw, 16px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
.product-preview-section {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--line-dark);
padding-top: clamp(14px, 1.8vh, 20px);
}
.product-preview-section-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.product-preview-use {
font-size: 14.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.82);
margin: 0;
}
.product-preview-points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.product-preview-points li {
position: relative;
padding-left: 18px;
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
line-height: 1.5;
}
.product-preview-points li::before {
content: '+';
position: absolute;
left: 0;
color: var(--c-accent);
font-weight: 500;
}
.product-preview-badges {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.product-preview-badges li {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-pill);
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
letter-spacing: 0.005em;
}
.product-preview-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: clamp(16px, 2vh, 24px);
border-top: 1px solid var(--line-dark);
}
.product-preview-actions .btn-pill {
justify-content: space-between;
width: 100%;
}
/* Body scroll lock when preview is open (lenis is also stopped via JS) */
body.is-preview-open { overflow: hidden; }
/* Tablet — wider panel */
@media (max-width: 1024px) {
.product-preview-panel { width: clamp(420px, 60vw, 540px); }
}
/* Mobile — bottom sheet variant */
@media (max-width: 720px) {
.product-preview-panel {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: auto;
max-height: 88vh;
transform: translateY(100%);
border-left: 0;
border-top: 1px solid var(--line-dark);
border-radius: 14px 14px 0 0;
padding: 22px 22px 28px;
}
.product-preview.is-open .product-preview-panel {
transform: translateY(0);
}
/* Subtle drag handle hint at the top of the sheet */
.product-preview-panel::before {
content: '';
display: block;
width: 44px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.18);
margin: 0 auto 14px;
}
.product-preview-image { aspect-ratio: 16/9; }
}
/* ---------- 3. PAGE TRANSITION (curtain wipe) ---------- */
/* z-index 9700: above content, header, menu (9000), below grain (9998) + preloader (10000). */
.page-transition {
position: fixed;
inset: 0;
z-index: 9700;
pointer-events: none;
overflow: hidden;
visibility: hidden;
}
.page-transition.is-active {
pointer-events: auto;
visibility: visible;
}
/* Dark slate curtain — sweeps in from the left */
.page-transition-curtain {
position: absolute;
inset: 0;
background: var(--c-dark-2);
transform: translateX(-101%);
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;
}
.page-transition.is-active .page-transition-curtain {
transform: translateX(0);
}
/* Bronze leading edge — thin accent line that arrives just ahead of the curtain */
.page-transition-edge {
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: var(--c-accent);
transform: translateX(-101vw);
transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1) -0.02s;
will-change: transform;
box-shadow: 0 0 24px rgba(200, 162, 125, 0.55);
}
.page-transition.is-active .page-transition-edge {
transform: translateX(0);
}
/* Birač Sistem logo mark — centered, fades in mid-transition.
Uses the real PNG (no fallback letter) so navigation matches brand. */
.page-transition-mark {
position: absolute;
top: 50%;
left: 50%;
width: clamp(140px, 14vw, 200px);
height: auto;
transform: translate(-50%, -50%) scale(0.94);
opacity: 0;
filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.4));
transition: opacity 0.32s var(--ease-out),
transform 0.6s var(--ease-out);
pointer-events: none;
user-select: none;
}
.page-transition.is-active .page-transition-mark {
opacity: 0.85;
transform: translate(-50%, -50%) scale(1);
transition-delay: 0.22s;
}
@media (prefers-reduced-motion: reduce) {
.page-transition-curtain,
.page-transition-edge,
.page-transition-mark { transition: none; }
}
/* =====================================================================
BIRAČ SISTEM CHATBOT — bottom-left floating assistant widget
- compact circular trigger anchored bottom-left (mirrors back-to-top
button on the right)
- floating panel that opens ABOVE the trigger (popover, not full
left rail) so it never covers page content
- prominent close (X) in panel header, always above content
- typing-indicator + delayed bot response → AI-like UX
- z-index 1050 (whole widget) — sits ABOVE the proizvodi sticky
category nav (900) and the site header (1000), BELOW the menu
overlay (9000), product preview (9100), page transition (9700),
grain (9998) and preloader (10000). The widget itself is a single
stacking context, so internal z-index values (panel 1100, trigger
870, close 5) only need to be sensible relative to each other.
===================================================================== */
.birac-chatbot {
position: fixed;
left: clamp(16px, 2.4vw, 28px);
bottom: clamp(16px, 2.4vh, 28px);
z-index: 1050;
font-family: var(--font-base);
pointer-events: none; /* let children opt-in */
}
.birac-chatbot > * { pointer-events: auto; }
/* ---------- Trigger (closed-state, compact circular button) ---------- */
.birac-chatbot__trigger {
appearance: none;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--c-dark);
color: var(--c-white);
border: 1px solid var(--line-dark-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: inherit;
box-shadow: 0 10px 24px -10px rgba(0,0,0,0.55),
0 2px 6px -2px rgba(0,0,0,0.35);
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
transform 0.4s var(--ease-out),
box-shadow 0.35s var(--ease-out),
opacity 0.3s var(--ease-out);
position: relative;
overflow: visible;
}
.birac-chatbot__trigger:hover {
transform: translateY(-2px);
background: var(--c-dark-2);
border-color: var(--c-accent);
box-shadow: 0 14px 32px -12px rgba(0,0,0,0.65),
0 0 0 4px rgba(200,162,125,0.10);
}
.birac-chatbot__trigger:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 4px;
}
.birac-chatbot__trigger-icon {
display: inline-flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
color: var(--c-accent);
transition: transform 0.4s var(--ease-out);
}
.birac-chatbot__trigger:hover .birac-chatbot__trigger-icon {
transform: scale(1.06);
}
/* Small pulsing accent dot — subtle "I'm here" cue */
.birac-chatbot__trigger-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px var(--c-dark);
pointer-events: none;
}
.birac-chatbot__trigger-dot::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 1.5px solid var(--c-accent);
opacity: 0.6;
animation: bs-cb-pulse 2.4s var(--ease-out) infinite;
}
@keyframes bs-cb-pulse {
0% { transform: scale(1); opacity: 0.55; }
70% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
/* Tooltip — appears on hover, points right */
.birac-chatbot__trigger-tip {
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(-4px);
background: var(--c-dark);
color: var(--c-white);
border: 1px solid var(--line-dark-2);
padding: 7px 12px;
border-radius: var(--radius-pill);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s var(--ease-out),
transform 0.35s var(--ease-out);
}
.birac-chatbot__trigger:hover .birac-chatbot__trigger-tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* When chatbot is open, hide the trigger (panel takes its place visually) */
.birac-chatbot.is-open .birac-chatbot__trigger {
opacity: 0;
pointer-events: none;
transform: translateY(8px) scale(0.92);
}
/* ---------- Panel (open state — floating popover above trigger) ---------- */
.birac-chatbot__panel {
position: absolute;
bottom: 0;
left: 0;
width: clamp(340px, 28vw, 400px);
max-height: min(74vh, 680px);
background: var(--c-dark);
color: var(--c-white);
border: 1px solid var(--line-dark-2);
border-radius: 18px;
z-index: 1100;
display: flex;
flex-direction: column;
overflow: hidden;
/* Premium shadow: soft outer + bronze hint glow */
box-shadow:
0 24px 60px -20px rgba(0,0,0,0.65),
0 8px 24px -10px rgba(0,0,0,0.45),
0 0 0 1px rgba(255,255,255,0.02);
opacity: 0;
transform: translateY(14px) scale(0.98);
transform-origin: bottom left;
pointer-events: none;
visibility: hidden;
transition: opacity 0.32s var(--ease-out),
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.4s;
isolation: isolate;
}
.birac-chatbot.is-open .birac-chatbot__panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
/* ---------- Header ---------- */
.birac-chatbot__header {
position: relative;
z-index: 2; /* keep close button above messages */
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 18px 18px 16px 22px;
border-bottom: 1px solid var(--line-dark);
background: var(--c-dark);
flex-shrink: 0;
}
.birac-chatbot__header-text {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.birac-chatbot__header-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
.birac-chatbot__header-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200,162,125,0.18);
flex-shrink: 0;
position: relative;
}
.birac-chatbot__header-dot::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 50%;
background: var(--c-accent);
opacity: 0.6;
animation: bs-cb-online 1.6s var(--ease-in-out) infinite;
}
@keyframes bs-cb-online {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 0; transform: scale(1.8); }
}
.birac-chatbot__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
margin: 0;
color: var(--c-white);
line-height: 1.2;
}
.birac-chatbot__subtitle {
font-size: 12px;
line-height: 1.45;
color: rgba(255,255,255,0.6);
margin: 0;
}
/* Close button — always clickable, top-right of panel */
.birac-chatbot__close {
appearance: none;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line-dark-2);
border-radius: 50%;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-white);
cursor: pointer;
flex-shrink: 0;
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
transform 0.3s var(--ease-out);
position: relative;
z-index: 5;
}
.birac-chatbot__close:hover {
background: var(--c-white);
color: var(--c-dark);
border-color: var(--c-white);
transform: rotate(90deg);
}
.birac-chatbot__close:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* ---------- Messages area (scrollable) ---------- */
.birac-chatbot__messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.18) transparent;
background:
radial-gradient(1200px 240px at 0% 0%, rgba(200,162,125,0.04), transparent 60%),
var(--c-dark);
}
.birac-chatbot__messages::-webkit-scrollbar { width: 6px; }
.birac-chatbot__messages::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.18);
border-radius: 3px;
}
.birac-chatbot__messages::-webkit-scrollbar-track { background: transparent; }
.birac-chatbot__message {
display: flex;
max-width: 86%;
opacity: 0;
transform: translateY(6px);
animation: bs-cb-msg-in 0.32s var(--ease-out) forwards;
}
.birac-chatbot__message--user { align-self: flex-end; }
.birac-chatbot__message--bot,
.birac-chatbot__message--welcome { align-self: flex-start; }
.birac-chatbot__message-bubble {
padding: 10px 13px;
font-size: 13.5px;
line-height: 1.55;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.birac-chatbot__message--user .birac-chatbot__message-bubble {
background: var(--c-accent);
color: var(--c-dark);
border-radius: 14px 14px 4px 14px;
font-weight: 500;
}
.birac-chatbot__message--bot .birac-chatbot__message-bubble,
.birac-chatbot__message--welcome .birac-chatbot__message-bubble {
background: rgba(255,255,255,0.05);
border: 1px solid var(--line-dark);
color: rgba(255,255,255,0.92);
border-radius: 14px 14px 14px 4px;
}
@keyframes bs-cb-msg-in {
to { opacity: 1; transform: translateY(0); }
}
/* Typing indicator — three dots in a bot-style bubble */
.birac-chatbot__typing {
display: flex;
align-self: flex-start;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--line-dark);
border-radius: 14px 14px 14px 4px;
color: rgba(255,255,255,0.7);
font-size: 11.5px;
letter-spacing: 0.04em;
max-width: 86%;
opacity: 0;
transform: translateY(6px);
animation: bs-cb-msg-in 0.28s var(--ease-out) forwards;
}
.birac-chatbot__typing-dots {
display: inline-flex;
align-items: center;
gap: 3px;
}
.birac-chatbot__typing-dots span {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
animation: bs-cb-typing 1.05s var(--ease-in-out) infinite;
}
.birac-chatbot__typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.birac-chatbot__typing-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes bs-cb-typing {
0%, 100% { transform: translateY(0); opacity: 0.55; }
40% { transform: translateY(-3px); opacity: 1; }
}
.birac-chatbot__typing-label {
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
/* ---------- Quick actions (predefined questions) ---------- */
.birac-chatbot__quick-actions {
border-top: 1px solid var(--line-dark);
padding: 12px 18px 10px;
flex-shrink: 0;
background: rgba(13, 26, 34, 0.6);
}
.birac-chatbot__quick-actions-label {
display: block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 8px;
}
.birac-chatbot__questions {
display: flex;
flex-direction: column;
gap: 5px;
max-height: 26vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.birac-chatbot__questions::-webkit-scrollbar { width: 6px; }
.birac-chatbot__questions::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.18);
border-radius: 3px;
}
.birac-chatbot__question {
appearance: none;
background: transparent;
border: 1px solid var(--line-dark-2);
border-radius: var(--radius-pill);
padding: 8px 14px;
color: rgba(255,255,255,0.85);
font-family: inherit;
font-size: 12.5px;
letter-spacing: 0.005em;
text-align: left;
cursor: pointer;
transition: border-color 0.3s var(--ease-out),
background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
transform 0.3s var(--ease-out);
opacity: 0;
transform: translateY(6px);
animation: bs-cb-msg-in 0.32s var(--ease-out) forwards;
}
.birac-chatbot__question:hover {
border-color: var(--c-accent);
color: var(--c-white);
background: rgba(200,162,125,0.08);
transform: translateX(2px);
}
.birac-chatbot__question:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.birac-chatbot__question:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* ---------- Footer CTAs ---------- */
.birac-chatbot__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px 18px 18px;
border-top: 1px solid var(--line-dark);
background: var(--c-dark);
flex-shrink: 0;
}
.birac-chatbot__footer-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 220px;
max-width: 100%;
padding: 9px 14px;
border-radius: var(--radius-pill);
background: var(--c-accent);
color: var(--c-dark);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.005em;
text-decoration: none;
border: 1px solid var(--c-accent);
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
gap 0.3s var(--ease-out);
}
.birac-chatbot__footer-cta:hover { gap: 12px; }
.birac-chatbot__footer-cta--ghost {
background: transparent;
color: var(--c-white);
border-color: var(--line-dark-2);
}
.birac-chatbot__footer-cta--ghost:hover {
background: var(--c-white);
color: var(--c-dark);
border-color: var(--c-white);
}
.birac-chatbot__footer-cta:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.birac-chatbot__footer-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
.birac-chatbot__panel { width: clamp(320px, 42vw, 380px); }
}
/* ---------- Mobile (<= 720px) — same bottom-left trigger, bottom-sheet panel ---------- */
@media (max-width: 720px) {
.birac-chatbot {
left: 14px;
bottom: 14px;
}
.birac-chatbot__trigger {
width: 50px;
height: 50px;
}
.birac-chatbot__trigger-tip { display: none; }
/* On mobile the floating popover becomes a near-full-width card centered
above the trigger. Keep the same fade+rise animation. */
.birac-chatbot__panel {
position: fixed;
left: 12px;
right: 12px;
bottom: 78px;
width: auto;
max-width: calc(100vw - 24px);
max-height: 78vh;
border-radius: 16px;
}
.birac-chatbot__header { padding: 14px 14px 12px 18px; }
.birac-chatbot__messages { padding: 14px 16px; }
.birac-chatbot__quick-actions { padding: 10px 16px 8px; }
.birac-chatbot__footer { padding: 10px 16px 14px; }
.birac-chatbot__close { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.birac-chatbot__panel,
.birac-chatbot__trigger,
.birac-chatbot__message,
.birac-chatbot__typing,
.birac-chatbot__question { transition: none; animation: none; }
.birac-chatbot__message,
.birac-chatbot__typing,
.birac-chatbot__question { opacity: 1; transform: none; }
.birac-chatbot__trigger-dot::after,
.birac-chatbot__header-dot::after,
.birac-chatbot__typing-dots span { animation: none; }
}
/* =====================================================================
PRODUCT DETAIL — LEGACY PAGE STYLES (dead, kept temporarily)
- hero with gallery + technical labels
- configurator panel (price, area, fill, thickness, purpose)
- tech specs list, applications grid, benefits list
- downloads block, FAQ accordion, related products
- cart toast (auto-injected globally)
===================================================================== */
/* ---------- 1. PRODUCT HERO ---------- */
.product-hero {
/* Full-screen premium product intro — fills the first viewport. */
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
/* Top padding > bottom to optically compensate for the fixed navbar
so the cluster reads as centered in the *visible* hero. */
padding: clamp(120px, 14vh, 170px) 0 clamp(72px, 9vh, 110px);
overflow: hidden;
position: relative;
isolation: isolate;
}
@supports (height: 100dvh) {
.product-hero { min-height: 100dvh; }
}
.product-hero .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.product-hero .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.05);
}
.product-hero-inner { position: relative; z-index: 1; }
/* Breadcrumb */
.product-breadcrumb { margin-bottom: clamp(28px, 4vh, 48px); }
.product-breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.5);
}
.product-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.product-breadcrumb li:not(:last-child)::after {
content: '/';
color: rgba(255, 255, 255, 0.3);
}
.product-breadcrumb a {
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
transition: color 0.3s var(--ease-out);
}
.product-breadcrumb a:hover { color: var(--c-accent); }
.product-breadcrumb [aria-current="page"] {
color: var(--c-white);
font-weight: 500;
}
/* Hero grid — vertically centered so text + gallery balance optically
inside the full-height hero. */
.product-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(40px, 5vw, 88px);
align-items: center;
}
/* Lift the right gallery ~50px on desktop — fixes the visual cut at the
bottom and gives the text side better optical balance. Mobile/tablet
fall back to natural flow without the offset. */
@media (min-width: 901px) {
.product-hero-grid .product-gallery { transform: translateY(-50px); }
}
.product-hero-text {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.6vw, 32px);
align-items: flex-start;
}
.product-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.product-hero-eyebrow .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.10);
}
.product-hero-title {
font-family: var(--font-display);
font-weight: 700;
color: var(--c-white);
font-size: clamp(40px, 5.6vw, 84px);
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0;
}
.product-hero-intro {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.74);
max-width: 48ch;
margin: 0;
}
.product-hero-badges {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.product-hero-badges li {
display: inline-flex;
align-items: center;
padding: 6px 13px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-pill);
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
letter-spacing: 0.005em;
}
.product-hero-actions {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.6vh, 22px);
margin-top: clamp(10px, 1.4vh, 20px);
}
.product-hero-actions-primary {
display: grid;
grid-template-columns: minmax(0, max-content) minmax(0, max-content);
gap: 12px;
align-items: stretch;
}
.product-hero-actions-primary > .btn-pill {
justify-content: space-between;
min-width: 220px;
}
/* Tertiary scroll-to-specs link — minimal, architectural */
.product-hero-spec-jump {
display: inline-flex;
align-items: center;
gap: 14px;
align-self: flex-start;
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 4px 0;
transition: color 0.35s var(--ease-out), gap 0.35s var(--ease-out);
}
.product-hero-spec-jump-rule {
width: 28px;
height: 1px;
background: rgba(255, 255, 255, 0.35);
transition: width 0.4s var(--ease-out), background 0.35s var(--ease-out);
flex-shrink: 0;
}
.product-hero-spec-jump-text { white-space: nowrap; }
.product-hero-spec-jump-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.25);
transition: border-color 0.35s var(--ease-out),
background 0.35s var(--ease-out),
transform 0.4s var(--ease-out);
color: rgba(255, 255, 255, 0.78);
}
.product-hero-spec-jump:hover { color: var(--c-accent); gap: 18px; }
.product-hero-spec-jump:hover .product-hero-spec-jump-rule {
width: 44px;
background: var(--c-accent);
}
.product-hero-spec-jump:hover .product-hero-spec-jump-icon {
border-color: var(--c-accent);
color: var(--c-accent);
transform: translateY(2px);
}
/* ---------- PRIMARY "Dodaj u korpu" — premium architectural hover ---------- */
.product-hero-add {
position: relative;
overflow: visible;
isolation: isolate;
}
/* Animated outer outline that traces in on hover */
.product-hero-add-line {
position: absolute;
inset: -5px;
border-radius: var(--radius-pill);
border: 1px solid var(--c-accent);
opacity: 0;
transform: scale(0.97);
transition: opacity 0.45s var(--ease-out),
transform 0.5s var(--ease-out);
pointer-events: none;
z-index: 0;
}
.product-hero-add:hover .product-hero-add-line {
opacity: 1;
transform: scale(1);
}
/* Architectural CAD-style corner brackets */
.product-hero-add-corners {
position: absolute;
inset: -10px;
pointer-events: none;
z-index: 0;
}
.product-hero-add-corners .corner {
position: absolute;
width: 12px;
height: 12px;
opacity: 0;
transition: opacity 0.4s var(--ease-out),
transform 0.5s var(--ease-out);
border-color: var(--c-accent);
}
.product-hero-add-corners .corner--tl {
top: 0;
left: 18px;
border-top: 1.4px solid var(--c-accent);
border-left: 1.4px solid var(--c-accent);
transform: translate(6px, 6px);
}
.product-hero-add-corners .corner--tr {
top: 0;
right: 18px;
border-top: 1.4px solid var(--c-accent);
border-right: 1.4px solid var(--c-accent);
transform: translate(-6px, 6px);
}
.product-hero-add-corners .corner--bl {
bottom: 0;
left: 18px;
border-bottom: 1.4px solid var(--c-accent);
border-left: 1.4px solid var(--c-accent);
transform: translate(6px, -6px);
}
.product-hero-add-corners .corner--br {
bottom: 0;
right: 18px;
border-bottom: 1.4px solid var(--c-accent);
border-right: 1.4px solid var(--c-accent);
transform: translate(-6px, -6px);
}
.product-hero-add:hover .corner {
opacity: 1;
transform: translate(0, 0);
}
.product-hero-add:hover .corner--tl { transition-delay: 0s; }
.product-hero-add:hover .corner--tr { transition-delay: 0.05s; }
.product-hero-add:hover .corner--br { transition-delay: 0.1s; }
.product-hero-add:hover .corner--bl { transition-delay: 0.15s; }
/* Keep label + arrow above the line trace */
.product-hero-add > span:not(.product-hero-add-line):not(.product-hero-add-corners) {
position: relative;
z-index: 1;
}
.product-hero-add .btn-arrow { position: relative; z-index: 1; }
@media (hover: none) {
.product-hero-add-line,
.product-hero-add-corners { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.product-hero-add-line,
.product-hero-add-corners .corner {
transition: none;
}
}
/* ---------- 2. PRODUCT GALLERY ---------- */
.product-gallery {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.8vh, 22px);
}
.product-gallery-frame {
position: relative;
aspect-ratio: 5 / 4;
overflow: hidden;
background: var(--c-dark-2);
border: 1px solid var(--line-dark);
isolation: isolate;
display: block;
text-decoration: none;
cursor: zoom-in;
}
.product-gallery-frame:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 4px;
}
/* Subtle zoom indicator that appears on hover */
.product-gallery-zoom {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px 7px 11px;
background: rgba(13, 24, 32, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
color: rgba(255, 255, 255, 0.92);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0;
transform: translate(-4px, -4px);
transition: opacity 0.4s var(--ease-out),
transform 0.4s var(--ease-out),
border-color 0.35s var(--ease-out);
pointer-events: none;
}
.product-gallery-frame:hover .product-gallery-zoom,
.product-gallery-frame:focus-visible .product-gallery-zoom {
opacity: 1;
transform: translate(0, 0);
border-color: rgba(200, 162, 125, 0.45);
}
.product-gallery-zoom svg { color: var(--c-accent); flex-shrink: 0; }
.product-gallery-zoom-label { line-height: 1; }
@media (hover: none) {
.product-gallery-zoom { opacity: 1; transform: none; }
}
.product-gallery-main {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: opacity 0.45s var(--ease-out),
transform 0.85s var(--ease-out);
will-change: opacity, transform;
}
.product-gallery.is-swapping .product-gallery-main { opacity: 0; }
.product-gallery-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(11,20,24,0) 60%, rgba(11,20,24,0.4) 100%);
pointer-events: none;
}
/* Technical annotation labels — same visual language as proizvodi cards */
.product-gallery-labels {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.product-gallery-label {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(13, 24, 32, 0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.92);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.55s var(--ease-out),
transform 0.6s var(--ease-out);
}
.product-gallery-label-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.20);
flex-shrink: 0;
}
.product-gallery-label--1 { top: 12%; left: 6%; }
.product-gallery-label--2 { top: 16%; right: 6%; }
.product-gallery-label--3 { bottom: 22%; left: 8%; }
.product-gallery-label--4 { bottom: 12%; right: 8%; }
/* Reveal labels with stagger when frame is hovered */
.product-gallery-frame:hover .product-gallery-label { opacity: 1; transform: translateY(0); }
.product-gallery-frame:hover .product-gallery-label--1 { transition-delay: 0.10s; }
.product-gallery-frame:hover .product-gallery-label--2 { transition-delay: 0.18s; }
.product-gallery-frame:hover .product-gallery-label--3 { transition-delay: 0.26s; }
.product-gallery-frame:hover .product-gallery-label--4 { transition-delay: 0.34s; }
@media (hover: none) {
.product-gallery-labels { display: none; }
}
.product-gallery-counter {
position: absolute;
bottom: 14px;
right: 14px;
z-index: 3;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.78);
background: rgba(13, 24, 32, 0.6);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding: 5px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--line-dark);
}
.product-gallery-counter-sep {
margin: 0 4px;
color: rgba(255, 255, 255, 0.4);
}
.product-gallery-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.product-gallery-thumb {
appearance: none;
border: 1px solid var(--line-dark);
background: var(--c-dark-2);
padding: 0;
aspect-ratio: 5 / 4;
overflow: hidden;
cursor: pointer;
position: relative;
transition: border-color 0.3s var(--ease-out),
transform 0.35s var(--ease-out);
}
.product-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02);
transition: transform 0.6s var(--ease-out),
filter 0.4s var(--ease-out);
filter: brightness(0.7) saturate(0.9);
}
.product-gallery-thumb:hover {
border-color: rgba(200, 162, 125, 0.6);
}
.product-gallery-thumb:hover img {
filter: brightness(0.9) saturate(1);
transform: scale(1.06);
}
.product-gallery-thumb.is-active {
border-color: var(--c-accent);
}
.product-gallery-thumb.is-active img {
filter: none;
}
.product-gallery-thumb.is-active::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid var(--c-accent);
pointer-events: none;
}
.product-gallery-thumb:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* ---------- 3. CONFIGURATOR PANEL ---------- */
.product-action {
padding: clamp(72px, 9vh, 120px) 0;
}
.product-action-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(40px, 5vw, 88px);
align-items: start;
}
.product-action-intro {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.2vh, 28px);
}
.product-action-intro .section-heading { max-width: 16ch; margin: 0; }
.product-action-copy {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.65;
color: var(--c-text-muted);
max-width: 50ch;
margin: 0;
}
.product-action-image {
margin-top: clamp(6px, 1vh, 12px);
border-color: var(--line-light);
box-shadow: 0 24px 48px -32px rgba(13, 24, 32, 0.16);
}
@media (max-width: 900px) {
.product-action-image { margin-top: 4px; aspect-ratio: 16 / 9; }
}
.product-action-card {
background: var(--c-white);
border: 1px solid var(--line-light-2);
padding: clamp(28px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 28px);
border-radius: 0;
box-shadow: 0 24px 48px -28px rgba(13, 24, 32, 0.18);
}
/* Price block */
.product-price {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: clamp(18px, 2vh, 24px);
border-bottom: 1px solid var(--line-light);
}
.product-price-eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.product-price-main {
font-family: var(--font-display);
font-size: clamp(28px, 2.8vw, 38px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--c-text);
line-height: 1.1;
}
.product-price-sub {
font-size: 13.5px;
line-height: 1.55;
color: var(--c-text-muted);
margin-top: 4px;
}
.product-price-meta {
margin-top: 6px;
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 4px 11px;
background: rgba(200, 162, 125, 0.12);
border: 1px solid rgba(200, 162, 125, 0.32);
border-radius: var(--radius-pill);
color: var(--c-accent-dim);
font-size: 11.5px;
letter-spacing: 0.04em;
font-weight: 500;
}
/* Option blocks */
.product-option {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-option-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.product-option-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.product-option-btn {
appearance: none;
background: transparent;
border: 1px solid var(--line-light-2);
border-radius: var(--radius-pill);
padding: 8px 14px;
color: var(--c-text);
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.005em;
cursor: pointer;
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.product-option-btn:hover {
border-color: var(--c-accent);
color: var(--c-accent-dim);
}
.product-option-btn.is-active {
background: var(--c-dark);
color: var(--c-white);
border-color: var(--c-dark);
}
.product-option-btn:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Area input */
.product-area-wrap {
display: flex;
align-items: center;
border: 1px solid var(--line-light-2);
border-radius: var(--radius-pill);
padding: 4px 16px 4px 18px;
transition: border-color 0.3s var(--ease-out);
}
.product-area-wrap:focus-within { border-color: var(--c-accent); }
.product-area-input {
appearance: none;
border: 0;
background: transparent;
color: var(--c-text);
font-family: inherit;
font-size: 16px;
font-weight: 500;
padding: 8px 0;
flex: 1;
min-width: 0;
width: 100%;
}
.product-area-input::placeholder { color: var(--c-text-muted); opacity: 0.7; }
.product-area-input:focus { outline: none; }
.product-area-input::-webkit-outer-spin-button,
.product-area-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product-area-input[type="number"] { -moz-appearance: textfield; }
.product-area-unit {
color: var(--c-text-muted);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
margin-left: 8px;
}
/* Quantity stepper — minus / number / plus */
.product-qty {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--line-light-2);
border-radius: var(--radius-pill);
overflow: hidden;
transition: border-color 0.3s var(--ease-out);
width: fit-content;
}
.product-qty:focus-within { border-color: var(--c-accent); }
.product-qty-btn {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--c-text);
cursor: pointer;
transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.product-qty-btn:hover { background: var(--c-dark); color: var(--c-white); }
.product-qty-input {
width: 56px;
text-align: center;
border: 0;
background: transparent;
font-family: inherit;
font-size: 16px;
font-weight: 600;
color: var(--c-text);
appearance: textfield;
-moz-appearance: textfield;
}
.product-qty-input:focus { outline: none; }
.product-qty-input::-webkit-outer-spin-button,
.product-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Note textarea */
.product-note-input {
width: 100%;
border: 1px solid var(--line-light-2);
border-radius: 14px;
padding: 12px 16px;
background: transparent;
color: var(--c-text);
font-family: inherit;
font-size: 14.5px;
line-height: 1.55;
resize: vertical;
min-height: 84px;
transition: border-color 0.3s var(--ease-out);
}
.product-note-input:focus { outline: none; border-color: var(--c-accent); }
.product-note-input::placeholder { color: var(--c-text-muted); opacity: 0.7; }
/* Related grid — 3-up variant for the simplified main-categories suggestion */
.product-related-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
.product-related-grid--3 { grid-template-columns: 1fr; }
}
/* Action buttons — narrower, equal width, centered for premium feel */
.product-action-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding-top: clamp(12px, 1.4vh, 18px);
border-top: 1px solid var(--line-light);
}
.product-action-buttons .btn-pill {
width: min(280px, 100%);
justify-content: space-between;
padding: 12px 18px;
font-size: 13.5px;
}
.product-action-buttons .btn-pill .btn-arrow {
width: 30px;
height: 30px;
}
.product-action-call {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--c-text-muted);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.005em;
text-decoration: none;
align-self: center;
padding: 6px 12px;
transition: color 0.3s var(--ease-out);
}
.product-action-call:hover { color: var(--c-accent-dim); }
/* Add-to-cart "just added" pulse */
.product-action-add.is-added,
.product-hero-add.is-added {
animation: bs-cart-pulse 0.6s var(--ease-out);
}
@keyframes bs-cart-pulse {
0% { transform: scale(1); }
35% { transform: scale(1.04); }
100% { transform: scale(1); }
}
/* ---------- 4. TECH SPECS ---------- */
.product-specs {
padding: clamp(80px, 11vh, 160px) 0;
position: relative;
overflow: hidden;
}
.product-specs .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.product-specs .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.05);
}
.product-specs .container { position: relative; z-index: 1; }
.product-specs-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(48px, 7vh, 88px);
}
.product-specs-head .section-heading { margin-bottom: 0; max-width: 14ch; }
.product-specs-sub {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
max-width: 44ch;
margin: 0;
}
.product-specs-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line-dark);
}
.product-specs-row {
display: grid;
grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.4fr);
gap: clamp(16px, 2vw, 32px);
padding: clamp(18px, 2.2vh, 28px) 0;
border-bottom: 1px solid var(--line-dark);
align-items: baseline;
color: var(--c-white);
position: relative;
transition: background 0.35s var(--ease-out);
}
.product-specs-row::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--c-accent);
transition: width 0.5s var(--ease-out);
}
.product-specs-row:hover {
background: rgba(255, 255, 255, 0.02);
}
.product-specs-row:hover::before {
width: 100%;
}
.product-specs-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--c-accent);
}
.product-specs-key {
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.005em;
}
.product-specs-val {
font-size: clamp(14px, 1vw, 16px);
color: rgba(255, 255, 255, 0.72);
line-height: 1.5;
}
/* ---------- 5. APPLICATIONS ---------- */
.product-applications {
padding: clamp(80px, 11vh, 160px) 0;
}
.product-applications-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(48px, 7vh, 88px);
}
.product-applications-head .section-heading { margin-bottom: 0; max-width: 14ch; }
.product-applications-sub {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
color: var(--c-text-muted);
max-width: 44ch;
margin: 0;
}
.product-applications-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
counter-reset: app;
}
.product-application {
display: flex;
flex-direction: column;
gap: 12px;
padding: clamp(24px, 2.8vw, 36px);
background: var(--c-white);
border: 1px solid var(--line-light);
transition: border-color 0.4s var(--ease-out),
transform 0.55s var(--ease-out),
box-shadow 0.55s var(--ease-out);
position: relative;
isolation: isolate;
}
.product-application::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.55s var(--ease-out);
}
.product-application:hover {
border-color: var(--line-light-2);
transform: translateY(-3px);
box-shadow: 0 18px 36px -22px rgba(13, 24, 32, 0.22);
}
.product-application:hover::before { transform: scaleX(1); }
.product-application-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.22em;
color: var(--c-accent);
}
.product-application-title {
font-family: var(--font-display);
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
color: var(--c-text);
line-height: 1.2;
}
.product-application-text {
font-size: 14px;
line-height: 1.55;
color: var(--c-text-muted);
margin: 0;
}
/* ---------- 6. BENEFITS ---------- */
.product-benefits {
padding: clamp(80px, 11vh, 160px) 0;
position: relative;
overflow: hidden;
}
.product-benefits .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.product-benefits .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.05);
}
.product-benefits .container { position: relative; z-index: 1; }
.product-benefits-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(48px, 7vh, 88px);
}
.product-benefits-head .section-heading { margin-bottom: 0; max-width: 14ch; }
.product-benefits-sub {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
max-width: 44ch;
margin: 0;
}
.product-benefits-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line-dark);
border-left: 1px solid var(--line-dark);
}
.product-benefit {
padding: clamp(24px, 2.8vw, 36px);
border-right: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
display: flex;
flex-direction: column;
gap: 12px;
color: var(--c-white);
transition: background 0.35s var(--ease-out);
}
.product-benefit:hover { background: rgba(255, 255, 255, 0.025); }
.product-benefit-num {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 36px);
font-weight: 700;
letter-spacing: -0.015em;
color: var(--c-accent);
line-height: 1;
}
.product-benefit-title {
font-family: var(--font-display);
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--c-white);
line-height: 1.2;
margin: 0;
}
.product-benefit-text {
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
/* ---------- 7. MATERIAL LAYERS (light variant for proizvod page) ---------- */
.material-layers.section-light .grid-lines .grid-v {
background: rgba(13, 24, 32, 0.06);
}
.material-layers.section-light .material-layers-copy { color: var(--c-text-muted); }
.material-layers-copy--light .hl-yellow { color: var(--c-text); font-weight: 500; }
/* ---------- 8. DOWNLOADS ---------- */
.product-downloads {
padding: clamp(72px, 10vh, 140px) 0;
}
.product-downloads-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(36px, 5vh, 56px);
}
.product-downloads-head .section-heading { margin-bottom: 0; max-width: 14ch; }
.product-downloads-sub {
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
max-width: 44ch;
margin: 0;
}
.product-downloads-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line-dark);
}
.product-downloads-item { border-bottom: 1px solid var(--line-dark); }
.product-downloads-link {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 28px);
padding: clamp(18px, 2.4vh, 28px) 0;
color: var(--c-white);
text-decoration: none;
transition: padding 0.4s var(--ease-out), color 0.3s var(--ease-out);
}
.product-downloads-link:hover {
color: var(--c-accent);
padding-left: 8px;
}
.product-downloads-link[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.product-downloads-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-dark-2);
color: var(--c-accent);
flex-shrink: 0;
transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.product-downloads-link:hover .product-downloads-icon {
border-color: var(--c-accent);
background: rgba(200, 162, 125, 0.08);
}
.product-downloads-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.product-downloads-title {
font-family: var(--font-display);
font-size: clamp(17px, 1.4vw, 22px);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.25;
}
.product-downloads-meta {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.product-downloads-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--line-dark-2);
color: var(--c-white);
flex-shrink: 0;
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
transform 0.4s var(--ease-out);
}
.product-downloads-link:hover .product-downloads-arrow {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
transform: translateX(4px);
}
/* ---------- 9. FAQ ---------- */
.product-faq {
padding: clamp(80px, 11vh, 160px) 0;
}
.product-faq-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(36px, 5vh, 56px);
}
.product-faq-head .section-heading { margin-bottom: 0; max-width: 14ch; }
.product-faq-sub {
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: var(--c-text-muted);
max-width: 44ch;
margin: 0;
}
.product-faq-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line-light);
}
.product-faq-item {
border-bottom: 1px solid var(--line-light);
}
.product-faq-q {
appearance: none;
background: transparent;
border: 0;
width: 100%;
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 24px);
padding: clamp(18px, 2.2vh, 26px) 0;
text-align: left;
color: var(--c-text);
font-family: inherit;
cursor: pointer;
transition: color 0.3s var(--ease-out);
}
.product-faq-q:hover { color: var(--c-accent-dim); }
.product-faq-q-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--c-text-muted);
flex-shrink: 0;
width: 28px;
}
.product-faq-q-text {
flex: 1;
font-family: var(--font-display);
font-size: clamp(17px, 1.35vw, 21px);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.3;
}
.product-faq-q-icon {
position: relative;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.product-faq-q-icon::before,
.product-faq-q-icon::after {
content: '';
position: absolute;
background: currentColor;
transition: transform 0.4s var(--ease-out);
}
.product-faq-q-icon::before {
top: 50%;
left: 0;
width: 14px;
height: 1.5px;
transform: translateY(-50%);
}
.product-faq-q-icon::after {
top: 0;
left: 50%;
width: 1.5px;
height: 14px;
transform: translateX(-50%);
}
.product-faq-item.is-open .product-faq-q-icon::after {
transform: translateX(-50%) scaleY(0);
}
.product-faq-item.is-open .product-faq-q-num { color: var(--c-accent); }
.product-faq-item.is-open .product-faq-q { color: var(--c-text); }
.product-faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.45s var(--ease-out);
}
.product-faq-a-inner {
overflow: hidden;
min-height: 0;
}
.product-faq-a-inner p {
font-size: 15px;
line-height: 1.65;
color: var(--c-text-muted);
max-width: 70ch;
margin: 0;
padding: 0 0 clamp(20px, 2.4vh, 28px) clamp(42px, 4vw, 52px);
}
.product-faq-item.is-open .product-faq-a {
grid-template-rows: 1fr;
}
/* ---------- 10. RELATED PRODUCTS ---------- */
.product-related {
padding: clamp(80px, 11vh, 160px) 0;
position: relative;
overflow: hidden;
}
.product-related .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.product-related .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.05);
}
.product-related .container { position: relative; z-index: 1; }
.product-related-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(40px, 6vh, 64px);
}
.product-related-head .section-heading { max-width: 18ch; margin: 0; }
.product-related-sub {
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.62);
max-width: 44ch;
margin: 0;
}
.product-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 36px);
}
.product-related-card {
color: var(--c-white);
transition: opacity 0.35s var(--ease-out);
}
.product-related-link {
display: flex;
flex-direction: column;
gap: 18px;
color: inherit;
text-decoration: none;
padding: 22px 22px 24px;
border: 1px solid var(--line-dark);
background: rgba(255, 255, 255, 0.012);
transition: border-color 0.45s var(--ease-out),
background 0.45s var(--ease-out),
transform 0.55s var(--ease-out);
}
.product-related-link:hover {
border-color: rgba(200, 162, 125, 0.45);
background: rgba(200, 162, 125, 0.045);
transform: translateY(-3px);
}
.product-related-link:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 4px;
}
.product-related-media {
position: relative;
aspect-ratio: 5 / 4;
overflow: hidden;
background: var(--c-dark-2);
isolation: isolate;
}
.product-related-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02);
transition: transform 0.85s var(--ease-out),
filter 0.45s var(--ease-out);
}
.product-related-curtain {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
100deg,
rgba(13, 24, 32, 0) 0%,
rgba(13, 24, 32, 0.25) 32%,
rgba(200, 162, 125, 0.32) 50%,
rgba(13, 24, 32, 0.25) 68%,
rgba(13, 24, 32, 0) 100%
);
transform: translateX(-101%);
transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
}
.product-related-card:hover .product-related-media img {
transform: scale(1.05);
filter: saturate(1.06);
}
.product-related-card:hover .product-related-curtain {
transform: translateX(101%);
}
/* Numbered eyebrow inside the image */
.product-related-num {
position: absolute;
top: 12px;
left: 14px;
z-index: 3;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.92);
background: rgba(13, 24, 32, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 5px 9px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
}
/* Diagonal arrow on image hover */
.product-related-arrow {
position: absolute;
top: 12px;
right: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--c-accent);
color: var(--c-dark);
opacity: 0;
transform: translate(-4px, 4px) scale(0.9);
transition: opacity 0.4s var(--ease-out),
transform 0.5s var(--ease-out);
}
.product-related-card:hover .product-related-arrow {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.product-related-info {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--c-white);
}
.product-related-title {
font-family: var(--font-display);
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
.product-related-type {
color: rgba(200, 162, 125, 0.85);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.product-related-desc {
color: rgba(255, 255, 255, 0.6);
font-size: 13.5px;
line-height: 1.55;
margin: 0;
}
/* Tag pills */
.product-related-tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.product-related-tags li {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-pill);
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
letter-spacing: 0.005em;
transition: border-color 0.4s var(--ease-out),
color 0.4s var(--ease-out);
}
.product-related-card:hover .product-related-tags li {
border-color: rgba(200, 162, 125, 0.35);
color: rgba(255, 255, 255, 0.88);
}
/* Bottom CTA */
.product-related-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color 0.35s var(--ease-out), gap 0.4s var(--ease-out);
}
.product-related-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
transition: border-color 0.35s var(--ease-out),
background 0.35s var(--ease-out),
color 0.35s var(--ease-out);
color: rgba(255, 255, 255, 0.78);
}
.product-related-card:hover .product-related-cta {
color: var(--c-accent);
gap: 14px;
}
.product-related-card:hover .product-related-cta-icon {
border-color: var(--c-accent);
background: var(--c-accent);
color: var(--c-dark);
}
@media (hover: none) {
.product-related-curtain { display: none; }
.product-related-arrow { opacity: 1; transform: none; }
}
/* ---------- TOAST (cart confirmation, auto-injected globally) ---------- */
.bs-toast {
position: fixed;
top: clamp(96px, 12vh, 130px);
left: 50%;
transform: translate(-50%, -16px);
z-index: 1200; /* above header (1000) and chatbot (1050) */
background: var(--c-dark);
color: var(--c-white);
border: 1px solid var(--line-dark-2);
border-radius: 14px;
padding: 12px 16px 12px 18px;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
display: flex;
align-items: center;
gap: 14px;
min-width: 280px;
max-width: calc(100vw - 24px);
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.35s var(--ease-out),
transform 0.4s var(--ease-out),
visibility 0s linear 0.4s;
}
.bs-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.bs-toast-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(200, 162, 125, 0.16);
color: var(--c-accent);
flex-shrink: 0;
}
.bs-toast-text {
flex: 1;
font-size: 13.5px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.92);
}
.bs-toast-action {
color: var(--c-accent);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-decoration: none;
padding: 6px 10px;
border-radius: var(--radius-pill);
border: 1px solid rgba(200, 162, 125, 0.40);
flex-shrink: 0;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.bs-toast-action:hover {
background: var(--c-accent);
color: var(--c-dark);
}
.bs-toast-close {
appearance: none;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: color 0.3s var(--ease-out);
}
.bs-toast-close:hover { color: var(--c-white); }
/* Cart counter "has items" highlight */
.cart-button .cart-count {
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out);
}
.cart-button[data-has-items="1"] .cart-count {
background: var(--c-accent);
color: var(--c-dark);
}
/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
.product-hero-grid { grid-template-columns: 1fr; gap: clamp(36px, 5vh, 56px); }
.product-action-grid { grid-template-columns: 1fr; gap: clamp(28px, 4vh, 48px); }
.product-specs-head,
.product-applications-head,
.product-benefits-head,
.product-downloads-head,
.product-faq-head,
.product-related-head { grid-template-columns: 1fr; gap: clamp(20px, 3vh, 32px); align-items: start; }
.product-applications-grid { grid-template-columns: 1fr 1fr; }
.product-benefits-list { grid-template-columns: 1fr 1fr; }
.product-related-grid { grid-template-columns: 1fr 1fr; }
.product-hero-actions-primary {
grid-template-columns: 1fr 1fr;
}
.product-hero-actions-primary > .btn-pill { min-width: 0; }
}
/* ---------- MOBILE ---------- */
@media (max-width: 720px) {
.product-hero { padding: clamp(96px, 13vh, 120px) 0 56px; }
.product-hero-title { font-size: clamp(34px, 9vw, 56px); }
.product-breadcrumb { font-size: 11px; }
.product-breadcrumb ol { gap: 6px; }
.product-hero-actions { width: 100%; }
.product-hero-actions-primary {
grid-template-columns: 1fr;
gap: 10px;
}
.product-hero-actions-primary > .btn-pill {
min-width: 0;
justify-content: space-between;
}
.product-hero-spec-jump { gap: 12px; align-self: stretch; }
.product-hero-spec-jump-rule { width: 18px; }
.product-hero-spec-jump:hover .product-hero-spec-jump-rule { width: 28px; }
.product-hero-add-corners { inset: -8px; }
.product-hero-add-corners .corner--tl,
.product-hero-add-corners .corner--bl { left: 14px; }
.product-hero-add-corners .corner--tr,
.product-hero-add-corners .corner--br { right: 14px; }
.product-gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.product-gallery-counter { font-size: 10.5px; padding: 4px 9px; }
.product-gallery-labels { display: none; }
.product-action { padding: 56px 0 64px; }
.product-action-card { padding: 22px; }
.product-price-main { font-size: 26px; }
.product-specs { padding: 56px 0 64px; }
.product-specs-row {
grid-template-columns: 40px 1fr;
gap: 12px;
padding: 14px 0;
}
.product-specs-val {
grid-column: 2 / -1;
margin-top: 4px;
}
.product-applications { padding: 56px 0 64px; }
.product-applications-grid { grid-template-columns: 1fr; gap: 14px; }
.product-application { padding: 22px; }
.product-benefits { padding: 56px 0 64px; }
.product-benefits-list { grid-template-columns: 1fr; }
.product-benefit { padding: 22px; }
.product-downloads { padding: 56px 0 64px; }
.product-downloads-link { gap: 14px; padding: 16px 0; }
.product-downloads-icon { width: 38px; height: 38px; }
.product-downloads-arrow { width: 32px; height: 32px; }
.product-faq { padding: 56px 0 64px; }
.product-faq-q { padding: 16px 0; gap: 12px; }
.product-faq-q-num { width: 22px; }
.product-faq-q-text { font-size: 16px; }
.product-faq-a-inner p { padding-left: 34px; }
.product-related { padding: 56px 0 64px; }
.product-related-grid { grid-template-columns: 1fr; gap: 14px; }
.product-related-link { padding: 18px 18px 22px; gap: 14px; }
.product-related-num { top: 10px; left: 12px; font-size: 10.5px; padding: 4px 8px; }
.product-action-buttons .btn-pill {
width: 100%;
max-width: 100%;
}
.bs-toast {
top: 78px;
min-width: 0;
width: calc(100vw - 24px);
flex-wrap: wrap;
gap: 10px;
}
.bs-toast-text { width: 100%; flex-basis: 100%; order: 1; }
.bs-toast-icon { order: 0; }
.bs-toast-close { order: 2; margin-left: auto; }
.bs-toast-action { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
.product-gallery-main,
.product-gallery-thumb img,
.product-gallery-label,
.product-application,
.product-benefit,
.product-downloads-link,
.product-faq-q-icon::before,
.product-faq-q-icon::after,
.product-faq-a,
.product-related-media img,
.product-related-curtain,
.bs-toast { transition: none; animation: none; }
}
/* =====================================================================
BIRAČ SISTEM — INQUIRY CART SYSTEM
Mini-cart dropdown, korpa.html 3-step inquiry flow
===================================================================== */
/* ---------- Cart button — pulse on add ---------- */
.cart-button {
position: relative;
}
.cart-button[data-has-items="1"] .cart-count {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
}
.cart-button.is-pulsing .cart-count {
animation: bs-cart-badge-pulse 0.7s var(--ease-out);
}
@keyframes bs-cart-badge-pulse {
0% { transform: scale(1); }
35% { transform: scale(1.35); }
65% { transform: scale(0.94); }
100% { transform: scale(1); }
}
/* ---------- Mini-cart dropdown ---------- */
.mini-cart {
position: fixed;
top: 90px;
right: 24px;
z-index: 1080; /* below preloader/menu, above sticky nav */
width: clamp(320px, 28vw, 420px);
max-height: min(78vh, 720px);
background: var(--c-dark);
color: var(--c-white);
border: 1px solid var(--line-dark-2);
border-radius: 18px;
box-shadow: 0 32px 80px -20px rgba(0,0,0,0.6),
0 8px 24px -10px rgba(0,0,0,0.4);
opacity: 0;
transform: translateY(-10px) scale(0.985);
transform-origin: top right;
transition: opacity 0.32s var(--ease-out),
transform 0.4s var(--ease-out),
visibility 0s linear 0.4s;
visibility: hidden;
pointer-events: none;
overflow: hidden;
display: flex;
flex-direction: column;
font-family: var(--font-base);
}
.mini-cart[data-state="open"] {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.mini-cart-arrow {
position: absolute;
top: -7px;
right: 22px;
width: 14px;
height: 14px;
background: var(--c-dark);
border-top: 1px solid var(--line-dark-2);
border-left: 1px solid var(--line-dark-2);
transform: rotate(45deg);
pointer-events: none;
}
/* Empty state */
.mini-cart-empty {
padding: 36px 28px 32px;
text-align: center;
}
.mini-cart-empty[hidden] { display: none; }
.mini-cart-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
margin-bottom: 16px;
background: rgba(200, 162, 125, 0.08);
border: 1px solid rgba(200, 162, 125, 0.25);
color: var(--c-accent);
}
.mini-cart-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.005em;
margin: 0 0 6px;
color: var(--c-white);
}
.mini-cart-text {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255,255,255,0.62);
margin: 0 0 22px;
max-width: 30ch;
margin-left: auto;
margin-right: auto;
}
.mini-cart-empty-cta {
width: 100%;
justify-content: space-between;
padding: 11px 16px;
}
/* Filled state */
.mini-cart-filled {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.mini-cart-filled[hidden] { display: none; }
.mini-cart-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--line-dark);
}
.mini-cart-eyebrow {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: 4px;
}
.mini-cart-subtitle {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--c-white);
}
.mini-cart-close {
background: transparent;
border: 1px solid var(--line-dark-2);
color: rgba(255,255,255,0.78);
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.mini-cart-close:hover {
border-color: var(--c-accent);
color: var(--c-accent);
}
.mini-cart-close:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Item list */
.mini-cart-list {
list-style: none;
margin: 0;
padding: 6px 14px 4px;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
min-height: 0;
}
.mini-cart-list::-webkit-scrollbar { width: 6px; }
.mini-cart-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 3px;
}
.mini-cart-list::-webkit-scrollbar-track { background: transparent; }
.mini-cart-item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 8px;
border-bottom: 1px solid var(--line-dark);
animation: bs-mini-cart-row-in 0.4s var(--ease-out) both;
}
.mini-cart-item:last-child { border-bottom: 0; }
@keyframes bs-mini-cart-row-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.mini-cart-item-thumb {
flex-shrink: 0;
width: 56px;
height: 56px;
overflow: hidden;
border-radius: 8px;
background: var(--c-dark-2);
border: 1px solid var(--line-dark);
display: block;
}
.mini-cart-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mini-cart-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.mini-cart-item-cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-accent);
}
.mini-cart-item-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--c-white);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-cart-item-meta {
font-size: 11.5px;
color: rgba(255,255,255,0.6);
line-height: 1.4;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mini-cart-item-area {
color: rgba(200, 162, 125, 0.95);
}
.mini-cart-item-price {
font-size: 11px;
color: rgba(255,255,255,0.5);
margin-top: 2px;
}
.mini-cart-item-remove {
background: transparent;
border: 1px solid var(--line-dark-2);
color: rgba(255,255,255,0.55);
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.mini-cart-item-remove:hover {
border-color: var(--c-accent);
color: var(--c-accent);
}
.mini-cart-item-remove:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.mini-cart-more {
padding: 10px 22px 0;
color: rgba(200, 162, 125, 0.92);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mini-cart-more[hidden] { display: none; }
.mini-cart-footer {
border-top: 1px solid var(--line-dark);
padding: 16px 22px 18px;
background: rgba(0,0,0,0.18);
}
.mini-cart-summary {
display: flex;
justify-content: space-between;
gap: 14px;
margin: 0 0 14px;
}
.mini-cart-summary > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.mini-cart-summary dt {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin: 0;
}
.mini-cart-summary dd {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--c-white);
margin: 0;
}
.mini-cart-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.mini-cart-action {
width: 100%;
justify-content: space-between;
padding: 11px 16px;
font-size: 13px;
}
.mini-cart-action .btn-arrow {
width: 28px;
height: 28px;
}
/* Mobile responsive: full-width floating panel under header */
@media (max-width: 720px) {
.mini-cart {
width: auto;
max-width: none;
border-radius: 14px;
}
.mini-cart-arrow { display: none; }
.mini-cart-empty { padding: 28px 22px 24px; }
.mini-cart-head { padding: 16px 18px 12px; }
.mini-cart-list { padding: 4px 10px; }
.mini-cart-footer { padding: 14px 18px 16px; }
.mini-cart-actions { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.mini-cart,
.mini-cart-item { transition: none; animation: none; }
}
/* ---------- Cart fly ghost animation ---------- */
.cart-fly-ghost {
position: fixed;
z-index: 1090;
pointer-events: none;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--c-accent);
background: var(--c-dark-2);
box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
transition: transform 0.78s cubic-bezier(0.55, 0.05, 0.35, 1),
opacity 0.78s ease-out;
will-change: transform, opacity;
}
.cart-fly-ghost img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cart-fly-ghost--blank {
background: var(--c-accent);
}
@media (prefers-reduced-motion: reduce) {
.cart-fly-ghost { display: none; }
}
/* =====================================================================
KORPA.HTML — Inquiry cart overview
===================================================================== */
.korpa-page { background: var(--c-light); color: var(--c-dark); }
.korpa-hero {
position: relative;
padding: clamp(120px, 16vh, 180px) 0 clamp(60px, 8vh, 96px);
background: var(--c-dark);
color: var(--c-white);
overflow: hidden;
}
.korpa-hero .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.korpa-hero .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255,255,255,0.05);
}
.korpa-hero .container { position: relative; z-index: 1; }
.korpa-hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(40px, 6vw, 96px);
align-items: end;
}
.korpa-hero-title {
font-family: var(--font-display);
font-size: clamp(40px, 5.5vw, 84px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.018em;
margin: 14px 0 0;
color: var(--c-white);
max-width: 16ch;
}
.korpa-hero-text {
color: rgba(255,255,255,0.68);
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
max-width: 48ch;
margin: 0;
}
.korpa-breadcrumb {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 32px;
}
.korpa-breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.korpa-breadcrumb li:not(:last-child)::after {
content: '/';
margin-left: 12px;
color: rgba(255,255,255,0.3);
}
.korpa-breadcrumb a {
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: color 0.3s var(--ease-out);
}
.korpa-breadcrumb a:hover { color: var(--c-accent); }
.korpa-breadcrumb [aria-current="page"] { color: var(--c-accent); }
/* Body */
.korpa-body {
padding: clamp(60px, 8vh, 100px) 0 clamp(80px, 12vh, 160px);
}
.korpa-body-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: clamp(28px, 3.4vw, 56px);
align-items: start;
}
/* Force [hidden] to win over .korpa-empty / .korpa-body-grid / .korpa-list
display: flex/grid. Without this, the empty state and the populated cart
render at the same time; or the list stays visible alongside the empty
block after a remove-all (since list + empty are siblings now). */
.korpa-empty[hidden],
.korpa-body-grid[hidden],
.korpa-list[hidden],
[data-cart-page-empty][hidden],
[data-cart-page-filled][hidden],
[data-cart-page-list][hidden] {
display: none !important;
}
.korpa-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
/* B2B inquiry cart item — simplified premium card.
Vertical flow: remove (absolute top-right) → top (thumb + head) →
meta chips → controls (area + qty) → note. No spec selects, no
calculator, no accessories, no recommendations. The cart is a review
surface — not a re-configurator. */
.korpa-item {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
background: var(--c-white);
border: 1px solid var(--line-light);
padding: 22px 22px 24px;
transition: opacity 0.32s var(--ease-out),
transform 0.32s var(--ease-out),
border-color 0.4s var(--ease-out);
}
.korpa-item:hover { border-color: rgba(200, 162, 125, 0.45); }
.korpa-item.is-removing {
opacity: 0;
transform: translateX(-12px);
}
.korpa-item-top {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 22px;
align-items: start;
padding-right: 44px; /* clear the remove button corner */
}
.korpa-item-thumb {
width: 140px;
aspect-ratio: 5 / 4;
overflow: hidden;
background: var(--c-light-2);
border: 1px solid var(--line-light);
}
.korpa-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.korpa-item-thumb-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--c-light-2) 0%, var(--c-light) 100%);
}
.korpa-item-head {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.korpa-item-cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.korpa-item-title {
font-family: var(--font-display);
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.22;
margin: 0;
color: var(--c-dark);
min-width: 0;
}
.korpa-item-price {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.16em;
color: rgba(26, 42, 51, 0.68);
margin-top: 2px;
}
/* Read-only spec chips (Ispuna / Debljina / Namena) — chosen at the
product page, displayed here for review. To re-configure, the user
goes back to the product detail. */
.korpa-item-meta {
list-style: none;
margin: 0;
padding: 14px 0;
border-top: 1px solid var(--line-light);
border-bottom: 1px solid var(--line-light);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px 18px;
}
.korpa-item-meta li {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.korpa-item-meta-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.55);
}
.korpa-item-meta-val {
font-family: var(--font-base);
font-size: 13.5px;
font-weight: 500;
color: var(--c-dark);
letter-spacing: 0.005em;
}
/* Type-aware configurator block on each cart item — mirrors the STEP 2
dialog (.bs-pc-* classes are inherited globally; this wrapper just
provides the vertical rhythm and section padding inside the cart row). */
.korpa-item-config {
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 0 6px;
}
.korpa-item-config .bs-pc-label {
/* Match the existing cart row's uppercase eyebrow vibe for visual
parity with .korpa-item-field-label (mono, tracked, uppercase). */
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.5);
font-weight: 500;
}
.korpa-item-config .bs-pc-input {
/* Slightly larger input than the dialog so the cart row feels editable. */
padding: 11px 13px;
}
/* Pieces note under "Ukupna kvadratura" — appears when srafovska items
exist so the m² total isn't mistaken for the whole cart. */
.korpa-summary-pieces-note {
display: block;
margin-top: 4px;
font-size: 11.5px;
letter-spacing: 0.04em;
color: rgba(244, 241, 235, 0.6);
font-weight: 500;
grid-column: 1 / -1; /* span both columns of the parent li grid if any */
}
.korpa-summary-pieces-note[hidden] { display: none; }
/* Controls row — Površina + Količina (legacy block, kept for backwards
compat with any caller still using .korpa-item-controls). The new
type-aware form uses .korpa-item-config above. */
.korpa-item-controls {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: end;
}
.korpa-item-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.korpa-item-field-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.62);
}
.korpa-item-field-input {
display: inline-flex;
align-items: center;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 0 14px 0 16px;
height: 42px;
transition: border-color 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out);
}
.korpa-item-field-input:focus-within {
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.12);
}
.korpa-item-field-input input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-family: var(--font-base);
font-size: 14.5px;
color: var(--c-dark);
appearance: textfield;
-moz-appearance: textfield;
min-width: 0;
}
.korpa-item-field-input input::-webkit-outer-spin-button,
.korpa-item-field-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.korpa-item-field-suffix {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: rgba(26, 42, 51, 0.6);
letter-spacing: 0.06em;
margin-left: 8px;
}
/* Note textarea — full-width row under the controls */
.korpa-item-note textarea {
width: 100%;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 10px 14px;
font-family: var(--font-base);
font-size: 13.5px;
color: var(--c-dark);
resize: vertical;
min-height: 60px;
line-height: 1.55;
transition: border-color 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out);
}
.korpa-item-note textarea:focus {
outline: 0;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.12);
}
/* ============================================================
Inline area calculator (per cart item)
Collapsible block. Closed by default — opens to
reveal mode pills, 5 inputs, result, and apply button.
============================================================ */
.korpa-acalc {
border: 1px solid var(--line-light);
background: var(--c-light);
transition: border-color 0.3s var(--ease-out);
}
.korpa-acalc[open] { border-color: rgba(200, 162, 125, 0.35); }
.korpa-acalc-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 13px 18px;
cursor: pointer;
list-style: none;
user-select: none;
color: var(--c-dark);
transition: color 0.3s var(--ease-out);
}
.korpa-acalc-toggle::-webkit-details-marker { display: none; }
.korpa-acalc-toggle::marker { content: ''; }
.korpa-acalc-toggle:hover { color: var(--c-accent); }
.korpa-acalc-toggle-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.korpa-acalc-toggle-icon {
color: var(--c-accent);
}
.korpa-acalc-toggle-chev {
display: inline-flex;
color: rgba(26, 42, 51, 0.5);
transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.korpa-acalc[open] .korpa-acalc-toggle-chev {
transform: rotate(180deg);
color: var(--c-accent);
}
.korpa-acalc-body {
padding: 18px 20px 22px;
border-top: 1px solid var(--line-light);
display: flex;
flex-direction: column;
gap: 16px;
background: var(--c-white);
}
.korpa-acalc-modes {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px;
border: 1px solid var(--line-light-2);
background: var(--c-light);
align-self: flex-start;
}
.korpa-acalc-mode {
appearance: none;
border: 0;
background: transparent;
padding: 7px 16px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.62);
cursor: pointer;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.korpa-acalc-mode:hover { color: var(--c-dark); }
.korpa-acalc-mode.is-active {
background: var(--c-dark);
color: var(--c-accent);
}
.korpa-acalc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px 14px;
}
.korpa-acalc-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
transition: opacity 0.3s var(--ease-out);
}
.korpa-acalc-field.is-disabled {
opacity: 0.4;
pointer-events: none;
}
.korpa-acalc-field-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.6);
}
.korpa-acalc-field input {
width: 100%;
height: 40px;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 0 12px;
font-family: var(--font-base);
font-size: 14px;
color: var(--c-dark);
appearance: textfield;
-moz-appearance: textfield;
transition: border-color 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out);
}
.korpa-acalc-field input::-webkit-outer-spin-button,
.korpa-acalc-field input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.korpa-acalc-field input:focus {
outline: 0;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.12);
}
.korpa-acalc-result {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: var(--c-light);
border: 1px solid var(--line-light-2);
border-left: 2px solid var(--c-accent);
}
.korpa-acalc-result-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.6);
flex: 1;
}
.korpa-acalc-result-value {
font-family: var(--font-display);
font-size: clamp(20px, 1.6vw, 26px);
font-weight: 700;
color: var(--c-dark);
letter-spacing: -0.005em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.korpa-acalc-result-unit {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--c-accent);
text-transform: lowercase;
}
.korpa-acalc-apply {
align-self: flex-start;
appearance: none;
border: 1px solid var(--c-dark);
background: var(--c-dark);
color: var(--c-white);
padding: 11px 22px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
gap 0.3s var(--ease-out),
opacity 0.3s var(--ease-out);
}
.korpa-acalc-apply:hover:not(:disabled) {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
gap: 16px;
}
.korpa-acalc-apply:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.korpa-acalc-apply.is-applied {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
}
.korpa-acalc-apply .btn-arrow {
display: inline-flex;
}
@media (max-width: 540px) {
.korpa-acalc-toggle { padding: 12px 14px; }
.korpa-acalc-body { padding: 16px 14px 18px; }
.korpa-acalc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.korpa-acalc-modes { width: 100%; }
.korpa-acalc-mode { flex: 1; padding: 7px 10px; text-align: center; }
.korpa-acalc-apply { width: 100%; justify-content: space-between; }
}
@media (max-width: 720px) {
.korpa-item { padding: 18px 18px 20px; }
.korpa-item-top {
grid-template-columns: 1fr;
padding-right: 40px;
}
.korpa-item-thumb {
width: 100%;
aspect-ratio: 16 / 10;
}
.korpa-item-controls { grid-template-columns: 1fr; gap: 14px; }
}
/* Field styling shared between cart page and checkout */
.korpa-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.korpa-field-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26,42,51,0.62);
}
.korpa-field-input {
display: inline-flex;
align-items: center;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 0 14px 0 16px;
height: 42px;
transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.korpa-field-input:focus-within {
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200,162,125,0.12);
}
.korpa-field-input input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-family: var(--font-base);
font-size: 14.5px;
color: var(--c-dark);
appearance: textfield;
-moz-appearance: textfield;
}
.korpa-field-input input::-webkit-outer-spin-button,
.korpa-field-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.korpa-field-suffix {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: rgba(26,42,51,0.6);
letter-spacing: 0.06em;
margin-left: 8px;
}
.korpa-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--line-light-2);
background: var(--c-white);
height: 42px;
}
.korpa-qty button {
background: transparent;
border: 0;
width: 36px;
height: 100%;
cursor: pointer;
color: var(--c-dark);
font-size: 16px;
transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.korpa-qty button:hover {
background: rgba(200,162,125,0.1);
color: var(--c-accent);
}
.korpa-qty span {
min-width: 36px;
text-align: center;
font-family: var(--font-base);
font-size: 14.5px;
font-weight: 500;
color: var(--c-dark);
}
.korpa-field--note textarea {
width: 100%;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 10px 14px;
font-family: var(--font-base);
font-size: 13.5px;
color: var(--c-dark);
resize: vertical;
min-height: 50px;
transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
line-height: 1.5;
}
.korpa-field--note textarea:focus {
outline: 0;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200,162,125,0.12);
}
.korpa-item-remove {
/* Float to the top-right corner of the card; the card is position:relative
so this never collides with the new flex-column flow. */
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
background: transparent;
border: 1px solid var(--line-light-2);
color: rgba(26, 42, 51, 0.6);
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.3s var(--ease-out),
color 0.3s var(--ease-out),
background 0.3s var(--ease-out);
}
.korpa-item-remove:hover {
border-color: var(--c-accent);
color: var(--c-accent);
background: rgba(200,162,125,0.06);
}
.korpa-item-remove:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Sticky summary panel (right column) */
.korpa-summary {
position: sticky;
top: 110px;
background: var(--c-dark);
color: var(--c-white);
padding: 28px 28px 30px;
border: 1px solid var(--line-dark-2);
display: flex;
flex-direction: column;
gap: 18px;
}
.korpa-summary-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.korpa-summary-title {
font-family: var(--font-display);
font-size: clamp(22px, 1.8vw, 28px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0;
color: var(--c-white);
}
.korpa-summary-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
}
.korpa-summary-list li {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--line-dark);
}
.korpa-summary-list li:last-child { border-bottom: 0; }
.korpa-summary-list span {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.korpa-summary-list strong {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--c-white);
}
.korpa-summary-note {
font-size: 12.5px;
line-height: 1.55;
color: rgba(255,255,255,0.55);
margin: 0;
}
.korpa-summary-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.korpa-summary-actions .btn-pill {
justify-content: space-between;
width: 100%;
}
/* Left column wrapper inside the always-visible body grid. Empty + list
are mutually exclusive children of this column; the grid keeps the
sidebar visible in the right column at all times. */
.korpa-list-col {
display: flex;
flex-direction: column;
min-width: 0;
}
/* "Nastavi sa upitom" disabled state — appears when cart is empty.
Visually intentional (not broken-looking): keeps the bronze pill but
dims it and shows a not-allowed cursor on hover. The aria-disabled +
title attrs convey the empty-cart reason for AT users. */
.korpa-summary-actions .btn-pill[disabled],
.korpa-summary-actions .btn-pill[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
/* Empty state */
.korpa-empty {
text-align: center;
padding: clamp(60px, 9vh, 110px) 24px;
border: 1px dashed var(--line-light-2);
background: var(--c-white);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.korpa-empty-icon {
display: inline-flex;
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(200, 162, 125, 0.08);
border: 1px solid rgba(200, 162, 125, 0.3);
color: var(--c-accent);
align-items: center;
justify-content: center;
}
.korpa-empty-title {
font-family: var(--font-display);
font-size: clamp(24px, 2.2vw, 32px);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: var(--c-dark);
}
.korpa-empty-text {
font-size: 14.5px;
line-height: 1.6;
color: rgba(26,42,51,0.62);
max-width: 44ch;
margin: 0;
}
.korpa-empty-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 6px;
}
/* =====================================================================
PORUCIVANJE.HTML — Request for quote
===================================================================== */
.porucivanje-page { background: var(--c-light); color: var(--c-dark); }
.porucivanje-hero {
position: relative;
padding: clamp(110px, 13vh, 150px) 0 clamp(48px, 6vh, 72px);
background: var(--c-dark);
color: var(--c-white);
overflow: hidden;
}
.porucivanje-hero .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.porucivanje-hero .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255,255,255,0.05);
}
.porucivanje-hero .container { position: relative; z-index: 1; }
.porucivanje-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 16px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-accent);
}
.porucivanje-hero-eyebrow .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
}
.porucivanje-hero-title {
font-family: var(--font-display);
font-size: clamp(34px, 4.4vw, 60px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.018em;
margin: 14px 0 0;
color: var(--c-white);
max-width: 18ch;
}
.porucivanje-hero-text {
color: rgba(255,255,255,0.68);
font-size: clamp(15px, 1.05vw, 16.5px);
line-height: 1.6;
max-width: 56ch;
margin: 16px 0 0;
}
.porucivanje-hero-note {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 14px 0 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
}
.porucivanje-hero-note::before {
content: '';
width: 18px;
height: 1px;
background: rgba(200, 162, 125, 0.65);
}
/* Step indicator */
.checkout-steps {
margin-top: clamp(36px, 5vh, 56px);
display: flex;
flex-wrap: wrap;
gap: 0;
padding: 0;
list-style: none;
}
.checkout-steps li {
flex: 1 1 0;
min-width: 180px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 16px 18px 0;
border-top: 1px solid var(--line-dark);
color: rgba(255,255,255,0.5);
transition: color 0.3s var(--ease-out);
position: relative;
}
.checkout-steps li::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 0;
height: 1px;
background: var(--c-accent);
transition: width 0.5s var(--ease-out);
}
.checkout-steps li.is-done::before,
.checkout-steps li.is-active::before { width: 100%; }
.checkout-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid currentColor;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.checkout-steps li.is-active {
color: var(--c-accent);
}
.checkout-steps li.is-active .checkout-step-num {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
}
.checkout-steps li.is-done {
color: rgba(255,255,255,0.85);
}
.checkout-steps li.is-done .checkout-step-num {
background: rgba(200,162,125,0.18);
color: var(--c-accent);
border-color: var(--c-accent);
}
.checkout-step-label {
font-family: var(--font-display);
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.005em;
}
/* Body */
.porucivanje-body {
padding: clamp(60px, 8vh, 100px) 0 clamp(80px, 12vh, 160px);
}
.porucivanje-body-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: clamp(28px, 3.4vw, 60px);
align-items: start;
}
/* Form */
.checkout-form {
display: flex;
flex-direction: column;
gap: clamp(36px, 5vh, 56px);
}
.checkout-section {
background: var(--c-white);
border: 1px solid var(--line-light);
padding: clamp(24px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: 22px;
}
.checkout-section-head {
display: flex;
align-items: baseline;
gap: 14px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line-light);
}
.checkout-section-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--c-accent);
}
.checkout-section-title {
font-family: var(--font-display);
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.2;
margin: 0;
color: var(--c-dark);
}
.checkout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 22px;
}
.checkout-grid--single { grid-template-columns: 1fr; }
.checkout-field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.checkout-field--full { grid-column: 1 / -1; }
.checkout-field-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26,42,51,0.62);
}
.checkout-field-label .checkout-required {
color: var(--c-accent);
margin-left: 4px;
}
.checkout-field input[type="text"],
.checkout-field input[type="email"],
.checkout-field input[type="tel"],
.checkout-field input[type="number"],
.checkout-field select,
.checkout-field textarea {
width: 100%;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 12px 14px;
font-family: var(--font-base);
font-size: 14.5px;
color: var(--c-dark);
line-height: 1.4;
transition: border-color 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out);
}
.checkout-field textarea {
min-height: 110px;
resize: vertical;
}
.checkout-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 11px;
padding-right: 36px;
}
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
outline: 0;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200,162,125,0.12);
}
.checkout-field.is-invalid input,
.checkout-field.is-invalid select,
.checkout-field.is-invalid textarea {
border-color: #C0392B;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
.checkout-field-err {
display: block;
font-size: 11.5px;
color: #C0392B;
line-height: 1.4;
min-height: 0;
}
.checkout-field.is-invalid .checkout-field-err {
min-height: 14px;
}
/* Checkbox row */
.checkout-checkbox {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
line-height: 1.5;
color: var(--c-dark);
font-size: 14px;
}
.checkout-checkbox input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid var(--line-light-2);
background: var(--c-white);
flex-shrink: 0;
cursor: pointer;
margin-top: 2px;
border-radius: 3px;
position: relative;
transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.checkout-checkbox input:checked {
background: var(--c-accent);
border-color: var(--c-accent);
}
.checkout-checkbox input:checked::after {
content: '';
position: absolute;
inset: 4px;
background:
linear-gradient(45deg, transparent 38%, var(--c-dark) 38%, var(--c-dark) 50%, transparent 50%) no-repeat,
linear-gradient(-45deg, transparent 50%, var(--c-dark) 50%, var(--c-dark) 62%, transparent 62%) no-repeat;
}
.checkout-checkbox input:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Submit button row */
.checkout-submit-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
padding-top: 12px;
}
.checkout-submit {
min-width: 240px;
justify-content: space-between;
}
.checkout-submit:disabled {
opacity: 0.65;
pointer-events: none;
}
.checkout-submit-meta {
font-size: 12.5px;
color: rgba(26,42,51,0.55);
line-height: 1.5;
flex: 1;
min-width: 240px;
}
/* Right-side summary panel */
.checkout-summary {
position: sticky;
top: 110px;
background: var(--c-dark);
color: var(--c-white);
padding: 30px 28px 28px;
border: 1px solid var(--line-dark-2);
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
isolation: isolate;
}
.checkout-summary::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 56px;
height: 1px;
background: var(--c-accent);
}
.checkout-summary-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.checkout-summary-title {
font-family: var(--font-display);
font-size: clamp(22px, 1.8vw, 28px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0;
color: var(--c-white);
}
.checkout-summary-list-label {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-top: 4px;
}
.checkout-summary-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line-dark);
max-height: 340px;
overflow-y: auto;
}
.checkout-summary-list::-webkit-scrollbar { width: 6px; }
.checkout-summary-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 3px;
}
.checkout-summary-list::-webkit-scrollbar-track { background: transparent; }
.checkout-summary-item {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--line-dark);
align-items: start;
}
.checkout-summary-item-thumb {
display: block;
width: 56px;
height: 56px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line-dark);
}
.checkout-summary-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.checkout-summary-item-thumb--empty {
background:
linear-gradient(135deg, rgba(200,162,125,0.10) 0%, rgba(200,162,125,0.02) 100%);
}
.checkout-summary-item-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.checkout-summary-item-cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.checkout-summary-item-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--c-white);
line-height: 1.3;
}
.checkout-summary-item-opts {
font-size: 12px;
color: rgba(255,255,255,0.6);
line-height: 1.45;
}
.checkout-summary-item-area {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(200,162,125,0.95);
}
.checkout-summary-item-note {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.5;
font-style: italic;
}
.checkout-summary-item-price {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
margin-top: 2px;
}
.checkout-summary-totals {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
}
.checkout-summary-totals li {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--line-dark);
}
.checkout-summary-totals li:last-child { border-bottom: 0; }
.checkout-summary-totals span {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.checkout-summary-totals strong {
font-family: var(--font-display);
font-size: 14.5px;
font-weight: 600;
color: var(--c-white);
}
.checkout-summary-note {
font-size: 12.5px;
line-height: 1.55;
color: rgba(255,255,255,0.55);
margin: 0;
}
.checkout-summary-edit {
align-self: flex-start;
color: var(--c-accent);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
display: inline-flex;
align-items: center;
gap: 8px;
}
.checkout-summary-edit:hover { gap: 12px; }
.checkout-summary-status {
color: var(--c-accent) !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 11.5px !important;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500 !important;
display: inline-flex;
align-items: center;
gap: 8px;
}
.checkout-summary-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.18);
animation: porucivanje-status-pulse 2.6s ease-in-out infinite;
}
@keyframes porucivanje-status-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(200, 162, 125, 0.18); }
50% { box-shadow: 0 0 0 6px rgba(200, 162, 125, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
.checkout-summary-status::before { animation: none; }
}
.checkout-summary-cta {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
.checkout-summary-cta .checkout-submit {
width: 100%;
min-width: 0;
justify-content: space-between;
}
.checkout-summary-secondary {
width: 100%;
justify-content: space-between;
}
/* Empty cart in checkout — compact so it does not create a huge empty page */
.checkout-empty {
grid-column: 1 / -1;
text-align: center;
padding: clamp(40px, 6vh, 72px) 24px;
border: 1px dashed var(--line-light-2);
background: var(--c-white);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.checkout-empty-icon {
display: inline-flex;
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(200, 162, 125, 0.08);
border: 1px solid rgba(200, 162, 125, 0.3);
color: var(--c-accent);
align-items: center;
justify-content: center;
}
.checkout-empty h2 {
font-family: var(--font-display);
font-size: clamp(24px, 2.2vw, 32px);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: var(--c-dark);
}
.checkout-empty p {
font-size: 14.5px;
line-height: 1.6;
color: rgba(26,42,51,0.62);
max-width: 44ch;
margin: 0;
}
.checkout-empty-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
/* Success modal */
.checkout-success {
position: fixed;
inset: 0;
z-index: 1300;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.checkout-success.is-visible {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.checkout-success-bg {
position: absolute;
inset: 0;
background: rgba(13, 24, 32, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.checkout-success-card {
position: relative;
background: var(--c-light);
color: var(--c-dark);
padding: clamp(36px, 5vh, 56px) clamp(28px, 4vw, 48px);
max-width: 540px;
width: 100%;
border: 1px solid var(--line-light-2);
text-align: center;
transform: translateY(8px);
transition: transform 0.45s var(--ease-out);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.checkout-success.is-visible .checkout-success-card {
transform: translateY(0);
}
.checkout-success-mark {
display: inline-flex;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(200,162,125,0.15);
border: 1px solid var(--c-accent);
color: var(--c-accent);
align-items: center;
justify-content: center;
}
.checkout-success-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,42,51,0.55);
}
.checkout-success h3 {
font-family: var(--font-display);
font-size: clamp(22px, 2vw, 28px);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: var(--c-dark);
}
.checkout-success p {
font-size: 14.5px;
line-height: 1.6;
color: rgba(26,42,51,0.66);
max-width: 42ch;
margin: 0;
}
.checkout-success-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 6px;
}
/* =====================================================================
Cart system — responsive (tablet + mobile)
===================================================================== */
@media (max-width: 1024px) {
.korpa-hero-inner { grid-template-columns: 1fr; gap: 28px; }
.korpa-body-grid,
.porucivanje-body-grid { grid-template-columns: 1fr; gap: 32px; }
.korpa-summary,
.checkout-summary { position: static; top: auto; }
}
@media (max-width: 720px) {
.korpa-hero,
.porucivanje-hero { padding: clamp(96px, 14vh, 120px) 0 48px; }
.korpa-hero-title,
.porucivanje-hero-title { font-size: clamp(34px, 9vw, 56px); }
.korpa-body { padding: 48px 0 64px; }
.korpa-item {
grid-template-columns: 1fr;
gap: 14px;
padding: 18px;
}
.korpa-item-thumb { width: 100%; max-width: 100%; }
.korpa-item-controls { grid-template-columns: 1fr; gap: 12px; }
.korpa-item-remove {
position: absolute;
top: 16px;
right: 16px;
}
.korpa-item { position: relative; }
.korpa-summary { padding: 22px 22px 24px; }
.korpa-summary-actions .btn-pill { padding: 12px 16px; font-size: 13.5px; }
.porucivanje-body { padding: 48px 0 64px; }
.checkout-section { padding: 22px; }
.checkout-grid { grid-template-columns: 1fr; }
.checkout-steps { flex-direction: column; }
.checkout-steps li { min-width: 0; padding: 14px 0; }
.checkout-summary { padding: 22px 22px 24px; }
.checkout-submit { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.mini-cart,
.mini-cart-item,
.cart-fly-ghost,
.checkout-success,
.checkout-success-card { transition: none; animation: none; }
}
/* =====================================================================
CART SYSTEM — POLISH PASS
- Toast: "Nastavi pregled" dismiss button + arrow on action
- Korpa: step indicator visible on dark hero, empty-area helper hint
- Porucivanje: request summary strip, "Šta se dešava nakon slanja?"
trust block (vertical timeline)
===================================================================== */
/* ---- Toast: action arrow + dismiss ---- */
.bs-toast-action {
display: inline-flex;
align-items: center;
gap: 8px;
}
.bs-toast-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid currentColor;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
color: var(--c-accent);
}
.bs-toast-action:hover .bs-toast-action-icon {
background: var(--c-accent);
color: var(--c-dark);
}
.bs-toast-dismiss {
background: transparent;
border: 0;
color: rgba(255,255,255,0.6);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
padding: 6px 10px;
transition: color 0.3s var(--ease-out);
flex-shrink: 0;
}
.bs-toast-dismiss:hover { color: var(--c-white); }
.bs-toast-dismiss:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Hide legacy close X if still rendered anywhere */
.bs-toast .bs-toast-close { display: none; }
@media (max-width: 720px) {
.bs-toast-action { width: 100%; justify-content: space-between; order: 3; }
.bs-toast-dismiss { width: 100%; text-align: center; order: 4; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,0.08); }
}
/* ---- Korpa: empty-area helper hint ---- */
.korpa-summary-hint {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 10px 12px;
background: rgba(200, 162, 125, 0.08);
border: 1px solid rgba(200, 162, 125, 0.32);
border-radius: 6px;
font-size: 12.5px;
line-height: 1.5;
color: rgba(255,255,255,0.82);
}
.korpa-summary-hint[hidden] { display: none; }
.korpa-summary-hint-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
margin-top: 5px;
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.16);
}
/* ---- Korpa hero: tighten step indicator on dark hero ---- */
.korpa-hero .checkout-steps {
margin-top: clamp(28px, 4vh, 44px);
}
/* =====================================================================
PORUCIVANJE — REQUEST SUMMARY STRIP
===================================================================== */
.checkout-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
padding: 14px 18px;
background: var(--c-white);
border: 1px solid var(--line-light);
border-left: 3px solid var(--c-accent);
}
.checkout-strip-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,42,51,0.62);
margin-right: 4px;
}
.checkout-strip-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.checkout-strip-badge {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 6px 14px;
border: 1px solid var(--line-light-2);
border-radius: 999px;
background: rgba(200, 162, 125, 0.06);
line-height: 1.2;
transition: border-color 0.3s var(--ease-out),
background 0.3s var(--ease-out);
}
.checkout-strip-badge:hover {
border-color: rgba(200, 162, 125, 0.5);
background: rgba(200, 162, 125, 0.12);
}
.checkout-strip-num {
font-family: var(--font-display);
font-size: 14.5px;
font-weight: 700;
color: var(--c-dark);
letter-spacing: -0.005em;
}
.checkout-strip-text {
font-size: 12px;
color: rgba(26,42,51,0.7);
letter-spacing: 0.005em;
}
.checkout-strip-badge--mute {
background: transparent;
border-color: var(--line-light);
}
.checkout-strip-badge--mute .checkout-strip-num {
color: var(--c-accent);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: lowercase;
}
/* =====================================================================
PORUCIVANJE — "ŠTA SE DEŠAVA NAKON SLANJA?" TRUST BLOCK
===================================================================== */
/* "Šta se dešava nakon slanja?" — sits full-width below the form/summary
grid as a compact 3-column premium card. Stacks on tablet/mobile. */
.checkout-trust {
margin-top: clamp(48px, 6vh, 88px);
background: var(--c-white);
border: 1px solid var(--line-light);
padding: clamp(28px, 3.2vw, 44px);
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
position: relative;
isolation: isolate;
}
.checkout-trust::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 56px;
height: 1px;
background: var(--c-accent);
}
.checkout-trust-head {
display: flex;
flex-direction: column;
gap: 6px;
}
.checkout-trust-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.checkout-trust-title {
font-family: var(--font-display);
font-size: clamp(22px, 1.8vw, 28px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
color: var(--c-dark);
max-width: 22ch;
}
.checkout-trust-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--line-light);
}
.checkout-trust-step {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
column-gap: 18px;
align-items: start;
position: relative;
padding: clamp(20px, 2.2vw, 26px) clamp(20px, 1.8vw, 28px);
border-right: 1px solid var(--line-light);
}
.checkout-trust-step:last-child { border-right: 0; }
.checkout-trust-num {
grid-column: 1;
grid-row: 1;
align-self: start;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(200, 162, 125, 0.45);
background: rgba(200, 162, 125, 0.08);
color: var(--c-accent);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.04em;
flex-shrink: 0;
transition: background 0.4s var(--ease-out),
color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out);
}
.checkout-trust-step:hover .checkout-trust-num {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
}
.checkout-trust-body {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.checkout-trust-step-title {
font-family: var(--font-display);
font-size: clamp(15px, 1.1vw, 17px);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--c-dark);
line-height: 1.3;
}
.checkout-trust-step-text {
font-size: 13px;
line-height: 1.55;
color: rgba(26, 42, 51, 0.6);
}
@media (max-width: 900px) {
.checkout-trust-list {
grid-template-columns: 1fr;
}
.checkout-trust-step {
border-right: 0;
border-bottom: 1px solid var(--line-light);
}
.checkout-trust-step:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
.checkout-strip { padding: 12px 14px; }
.checkout-strip-badge { padding: 5px 11px; }
.checkout-trust-step {
grid-template-columns: 36px 1fr;
column-gap: 16px;
}
.checkout-trust-num { width: 36px; height: 36px; font-size: 11px; }
.checkout-trust-line { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.checkout-strip-badge,
.checkout-trust-step,
.checkout-trust-num,
.korpa-summary-hint { transition: none; }
}
/* =====================================================================
ADVANCED CART/QUOTE SYSTEM — Specification, Calculator, Accessories,
Smart recommendation, Precision score
===================================================================== */
/* ---------- Korpa items: rebuilt for the dense spec/calculator layout ---------- */
.korpa-item {
grid-template-columns: 1fr;
gap: 22px;
padding: 28px;
position: relative;
}
.korpa-item-top {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 22px;
align-items: start;
}
.korpa-item-thumb { width: 140px; }
/* Block headers shared inside items (Specifikacija, Kalkulator, etc.) */
.korpa-block-head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
}
.korpa-block-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.korpa-block-title {
font-family: var(--font-display);
font-size: clamp(15px, 1.15vw, 18px);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.2;
margin: 0;
color: var(--c-dark);
}
.korpa-block-text {
font-size: 13px;
line-height: 1.55;
color: rgba(26,42,51,0.62);
margin: 0;
max-width: 64ch;
}
/* Specifikacija grid */
.korpa-spec {
border-top: 1px solid var(--line-light);
padding-top: 22px;
}
.korpa-spec-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 18px;
}
.korpa-spec-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.korpa-spec-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26,42,51,0.62);
}
.korpa-spec-select,
.korpa-spec-field input[type="number"],
.korpa-spec-field input[type="text"],
.korpa-spec-field textarea {
width: 100%;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 10px 14px;
font-family: var(--font-base);
font-size: 14px;
color: var(--c-dark);
line-height: 1.4;
transition: border-color 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out);
}
.korpa-spec-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 11px;
padding-right: 36px;
}
.korpa-spec-select:focus,
.korpa-spec-field input:focus,
.korpa-spec-field textarea:focus {
outline: 0;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200,162,125,0.12);
}
.korpa-spec-field textarea {
min-height: 60px;
resize: vertical;
line-height: 1.5;
}
.korpa-spec-field .korpa-field-input {
width: 100%;
}
/* Calculator block */
.korpa-calc {
border-top: 1px solid var(--line-light);
padding-top: 22px;
}
.korpa-calc-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px;
background: rgba(26,42,51,0.04);
border-radius: 999px;
width: max-content;
max-width: 100%;
margin-bottom: 18px;
}
.korpa-calc-tab {
background: transparent;
border: 0;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
font-family: var(--font-base);
font-size: 12.5px;
font-weight: 500;
color: rgba(26,42,51,0.7);
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out);
white-space: nowrap;
}
.korpa-calc-tab:hover { color: var(--c-dark); }
.korpa-calc-tab.is-active {
background: var(--c-dark);
color: var(--c-white);
}
.korpa-calc-tab:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.korpa-calc-subtabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
border-bottom: 1px solid var(--line-light);
margin-bottom: 18px;
}
.korpa-calc-subtab {
background: transparent;
border: 0;
padding: 10px 14px;
cursor: pointer;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26,42,51,0.55);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.korpa-calc-subtab:hover { color: var(--c-dark); }
.korpa-calc-subtab.is-active {
color: var(--c-accent);
border-bottom-color: var(--c-accent);
}
.korpa-calc-quick {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: end;
}
.korpa-calc-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.korpa-calc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 18px;
}
.korpa-calc-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.korpa-calc-field--full { grid-column: 1 / -1; }
.korpa-calc-field > span {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26,42,51,0.62);
}
.korpa-calc-field input,
.korpa-calc-field select,
.korpa-calc-field textarea {
width: 100%;
border: 1px solid var(--line-light-2);
background: var(--c-white);
padding: 10px 14px;
font-family: var(--font-base);
font-size: 14px;
color: var(--c-dark);
transition: border-color 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out);
}
.korpa-calc-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 11px;
padding-right: 36px;
}
.korpa-calc-field input:focus,
.korpa-calc-field select:focus,
.korpa-calc-field textarea:focus {
outline: 0;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(200,162,125,0.12);
}
.korpa-calc-pills {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.korpa-calc-pill {
background: transparent;
border: 1px solid var(--line-light-2);
padding: 8px 14px;
border-radius: 999px;
font-family: var(--font-base);
font-size: 12.5px;
font-weight: 500;
color: var(--c-dark);
cursor: pointer;
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.korpa-calc-pill:hover { border-color: var(--c-accent); color: var(--c-accent); }
.korpa-calc-pill.is-active {
background: var(--c-dark);
color: var(--c-white);
border-color: var(--c-dark);
}
.korpa-calc-result {
background: rgba(200, 162, 125, 0.06);
border: 1px solid rgba(200, 162, 125, 0.2);
border-radius: 6px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.korpa-calc-rows {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.korpa-calc-rows > div {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 8px 0;
border-bottom: 1px solid rgba(200, 162, 125, 0.18);
}
.korpa-calc-rows > div:last-child { border-bottom: 0; }
.korpa-calc-rows dt {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26,42,51,0.65);
margin: 0;
}
.korpa-calc-rows dd {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--c-dark);
margin: 0;
}
.korpa-calc-total dt { color: var(--c-dark); }
.korpa-calc-total dd {
color: var(--c-accent);
font-size: 17px;
}
.korpa-calc-apply {
align-self: flex-start;
padding: 11px 18px;
font-size: 13px;
}
.korpa-calc-apply:disabled {
opacity: 0.5;
pointer-events: none;
}
.korpa-calc-apply.is-saved {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
}
.korpa-calc-disclaimer {
font-size: 12px;
color: rgba(26,42,51,0.55);
line-height: 1.5;
margin: 0;
max-width: 70ch;
}
.korpa-calc-text {
font-size: 14px;
line-height: 1.6;
color: rgba(26,42,51,0.7);
margin: 0 0 14px;
max-width: 64ch;
}
.korpa-calc-tip {
background: rgba(26, 42, 51, 0.04);
border-left: 3px solid var(--c-accent);
padding: 10px 14px;
font-size: 12.5px;
color: var(--c-dark);
line-height: 1.5;
margin: 0;
}
.korpa-calc-tip--mute {
background: transparent;
border-left-color: rgba(26,42,51,0.2);
color: rgba(26,42,51,0.55);
padding-left: 12px;
}
/* Smart recommendation */
.korpa-reco {
border-top: 1px solid var(--line-light);
padding-top: 22px;
background: linear-gradient(135deg, rgba(200,162,125,0.06) 0%, transparent 100%);
padding-left: 22px;
padding-right: 22px;
padding-bottom: 22px;
border-radius: 6px;
border: 1px solid rgba(200,162,125,0.25);
}
.korpa-reco[hidden] { display: none; }
.korpa-reco-text {
font-size: 13.5px;
line-height: 1.6;
color: var(--c-dark);
margin: 0 0 14px;
max-width: 80ch;
}
.korpa-reco-apply {
padding: 10px 16px;
font-size: 13px;
}
.korpa-reco-apply.is-saved {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
}
/* Accessories grid */
.korpa-accessories {
border-top: 1px solid var(--line-light);
padding-top: 22px;
}
.korpa-accessory-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.korpa-accessory-card {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border: 1px solid var(--line-light-2);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.3s var(--ease-out),
background 0.3s var(--ease-out);
background: var(--c-white);
user-select: none;
}
.korpa-accessory-card:hover {
border-color: rgba(200, 162, 125, 0.5);
background: rgba(200, 162, 125, 0.04);
}
.korpa-accessory-card input { display: none; }
.korpa-accessory-mark {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid var(--line-light-2);
background: transparent;
color: transparent;
transition: background 0.3s var(--ease-out),
color 0.3s var(--ease-out),
border-color 0.3s var(--ease-out);
}
.korpa-accessory-card.is-checked {
border-color: var(--c-accent);
background: rgba(200, 162, 125, 0.08);
}
.korpa-accessory-card.is-checked .korpa-accessory-mark {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
}
.korpa-accessory-label {
font-size: 13px;
color: var(--c-dark);
line-height: 1.3;
}
/* Note */
.korpa-note {
border-top: 1px solid var(--line-light);
padding-top: 22px;
}
/* Item remove repositioned to top-right */
.korpa-item-remove {
position: absolute;
top: 16px;
right: 16px;
align-self: auto;
z-index: 2;
}
/* ---------- Korpa summary panel: precision score, missing, accessories ---------- */
.korpa-precision {
background: rgba(255,255,255,0.04);
border: 1px solid var(--line-dark);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
border-radius: 6px;
}
.korpa-precision-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.korpa-precision-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.korpa-precision-value {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--c-accent);
}
.korpa-precision-bar {
width: 100%;
height: 5px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.korpa-precision-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, rgba(200,162,125,0.6) 0%, var(--c-accent) 100%);
transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.korpa-precision-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.korpa-precision[data-precision-level="mid"] .korpa-precision-value { color: var(--c-accent); }
.korpa-precision[data-precision-level="high"] .korpa-precision-value { color: var(--c-accent); }
.korpa-precision[data-precision-level="high"] .korpa-precision-label { color: var(--c-accent); }
/* Summary panel — accessories pills */
.korpa-summary-accessories {
display: flex;
flex-direction: column;
gap: 8px;
}
.korpa-summary-accessories-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.korpa-summary-accessories-tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.korpa-summary-accessories-tags[hidden] { display: none; }
.korpa-summary-accessories-tags li {
display: inline-flex;
padding: 4px 10px;
border: 1px solid var(--line-dark-2);
border-radius: 999px;
font-size: 11.5px;
color: rgba(255,255,255,0.85);
background: rgba(200,162,125,0.06);
}
/* Summary panel — missing data */
.korpa-summary-missing {
list-style: none;
margin: 0;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(200, 162, 125, 0.06);
border: 1px solid rgba(200, 162, 125, 0.2);
border-radius: 6px;
}
.korpa-summary-missing[hidden] { display: none; }
.korpa-summary-missing li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px;
line-height: 1.5;
color: rgba(255,255,255,0.78);
}
.korpa-missing-dot {
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
margin-top: 6px;
}
/* ---------- Porucivanje extras ---------- */
.checkout-strip-badge--precision {
background: rgba(200, 162, 125, 0.1);
border-color: rgba(200, 162, 125, 0.4);
}
.checkout-strip-badge--precision .checkout-strip-num {
color: var(--c-accent);
font-family: var(--font-display);
font-size: 14.5px;
text-transform: none;
letter-spacing: -0.005em;
}
.checkout-section-text {
font-size: 13.5px;
line-height: 1.6;
color: rgba(26,42,51,0.65);
margin: 0 0 14px;
max-width: 64ch;
}
/* Smart recommendation block in checkout */
.checkout-reco {
background: linear-gradient(135deg, rgba(200,162,125,0.06) 0%, transparent 100%);
border: 1px solid rgba(200,162,125,0.25);
border-radius: 6px;
padding: 16px 18px;
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.checkout-reco[hidden] { display: none; }
.checkout-reco-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
}
.checkout-reco-text {
font-size: 13.5px;
line-height: 1.6;
color: var(--c-dark);
margin: 0;
max-width: 80ch;
}
/* Dropzone */
.checkout-dropzone {
margin-top: 14px;
border: 1.5px dashed var(--line-light-2);
border-radius: 8px;
padding: 22px;
background: rgba(26,42,51,0.02);
transition: border-color 0.3s var(--ease-out),
background 0.3s var(--ease-out);
text-align: center;
}
.checkout-dropzone.is-hover,
.checkout-dropzone.has-file {
border-color: var(--c-accent);
background: rgba(200, 162, 125, 0.06);
}
.checkout-dropzone-inner {
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
text-align: left;
}
.checkout-dropzone-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(200,162,125,0.1);
border: 1px solid rgba(200,162,125,0.3);
color: var(--c-accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.3s var(--ease-out);
}
.checkout-dropzone:hover .checkout-dropzone-icon,
.checkout-dropzone.has-file .checkout-dropzone-icon {
background: var(--c-accent);
color: var(--c-dark);
}
.checkout-dropzone-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.checkout-dropzone-text strong {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--c-dark);
letter-spacing: -0.005em;
}
.checkout-dropzone-text span {
font-size: 12px;
color: rgba(26,42,51,0.55);
letter-spacing: 0.02em;
}
.checkout-dropzone-action {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 1px solid var(--line-light-2);
border-radius: 999px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-dark);
transition: border-color 0.3s var(--ease-out),
color 0.3s var(--ease-out),
background 0.3s var(--ease-out);
}
.checkout-dropzone:hover .checkout-dropzone-action {
border-color: var(--c-accent);
color: var(--c-accent);
}
.checkout-dropzone-meta {
font-size: 12px;
color: rgba(26,42,51,0.55);
margin: 12px 0 0;
line-height: 1.5;
}
.checkout-dropzone-meta strong { color: var(--c-dark); }
.checkout-dropzone-meta em {
font-style: normal;
color: rgba(26,42,51,0.45);
}
.checkout-dropzone-meta-mark {
color: var(--c-accent);
margin-right: 4px;
}
/* Summary precision (right-side panel on dark) */
.korpa-precision--summary {
background: rgba(255,255,255,0.04);
border-color: var(--line-dark);
}
/* Right-summary actions group */
.checkout-summary-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.checkout-summary-edit--mute {
color: rgba(255,255,255,0.6);
}
.checkout-summary-edit--mute:hover { color: var(--c-accent); }
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.korpa-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.korpa-calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.korpa-accessory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.korpa-item { padding: 18px; }
.korpa-item-top { grid-template-columns: 1fr; }
.korpa-item-thumb { width: 100%; }
.korpa-spec-grid,
.korpa-calc-grid { grid-template-columns: 1fr; }
.korpa-accessory-grid { grid-template-columns: 1fr 1fr; }
.korpa-calc-quick { grid-template-columns: 1fr; }
.korpa-calc-tabs { width: 100%; flex-wrap: wrap; }
.korpa-calc-tab { flex: 1 1 30%; text-align: center; }
.korpa-calc-result { padding: 14px 16px; }
.korpa-calc-rows > div { flex-direction: column; gap: 2px; }
.korpa-calc-rows dd { font-size: 16px; }
.korpa-calc-total dd { font-size: 19px; }
.checkout-dropzone { padding: 16px; }
.checkout-dropzone-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.korpa-accessory-card,
.korpa-calc-pill,
.korpa-calc-tab,
.korpa-calc-subtab,
.korpa-precision-fill,
.checkout-dropzone,
.checkout-dropzone-icon,
.checkout-dropzone-action { transition: none; }
}
/* =====================================================================
GLOBAL DESIGN TUNING — REDUCE EDITORIAL SCALE, MORE B2B CATALOGUE
Applied as a final override layer so existing rules above remain intact
and the rest of the codebase keeps working. Scope:
1. Smaller, more practical type scale on hero/section headings
2. Tighter section padding (introduces --section-pad-* tokens)
3. Bumped navbar/footer/overlay/preloader logo size
4. Image-first utility classes (.image-card, .image-curtain, .media-grid …)
5. Card-friendly defaults so future pages can use the catalogue look
===================================================================== */
:root {
/* Section padding tokens — reusable from this point forward.
Existing per-section paddings stay; new sections should use these. */
--section-pad-lg: clamp(60px, 8vh, 120px);
--section-pad-md: clamp(48px, 6vh, 88px);
--section-pad-sm: clamp(32px, 4.5vh, 60px);
--section-pad-xs: clamp(24px, 3.5vh, 44px);
/* Type-scale tokens — referenced by overrides below */
--type-display: clamp(36px, 4.6vw, 64px);
--type-h1: clamp(34px, 4.2vw, 60px);
--type-h2: clamp(28px, 3.4vw, 48px);
--type-h3: clamp(20px, 1.6vw, 26px);
--type-h4: clamp(16px, 1.2vw, 19px);
--type-h1-mobile: clamp(34px, 9vw, 46px);
--type-h2-mobile: clamp(26px, 7vw, 36px);
}
/* ---------- 1. Heading type-scale reductions ---------- */
/* Generic section H2 across the site (was clamp 36–84) */
.section-heading,
.section-heading--light {
font-size: var(--type-h2);
line-height: 1.08;
letter-spacing: -0.018em;
}
/* Homepage hero stair-cased lines (were 44/48 → 88/96) — now ~30% smaller
and tighter so the hero no longer dominates the viewport */
.hero-line--1,
.hero-line--3 { font-size: clamp(34px, 4.4vw, 64px); }
.hero-line--2 { font-size: clamp(36px, 4.8vw, 70px); }
/* Big editorial sections — about, big-transition, split-cta, hero-other */
.about .big-paragraph,
.about-heading,
.about h2,
.split-cta-heading,
.big-transition-heading,
.bigt-heading {
font-size: clamp(30px, 3.8vw, 54px) !important;
line-height: 1.1;
letter-spacing: -0.018em;
}
/* Page hero titles — proizvodi, proizvod, korpa, porucivanje */
.proizvodi-hero-title,
.product-hero-title,
.korpa-hero-title,
.porucivanje-hero-title {
font-size: var(--type-display);
line-height: 1.04;
letter-spacing: -0.018em;
}
/* Mobile reductions */
@media (max-width: 720px) {
.section-heading,
.section-heading--light { font-size: var(--type-h2-mobile); }
.hero-line--1,
.hero-line--3 { font-size: clamp(30px, 8.5vw, 42px); }
.hero-line--2 { font-size: clamp(32px, 9vw, 46px); }
.proizvodi-hero-title,
.product-hero-title,
.korpa-hero-title,
.porucivanje-hero-title { font-size: var(--type-h1-mobile); }
.about .big-paragraph,
.about-heading,
.about h2,
.split-cta-heading,
.big-transition-heading { font-size: clamp(26px, 7.4vw, 36px) !important; }
}
/* ---------- 2. Section padding — trim the most generous blocks ---------- */
/* These sections currently use clamp(80–160px) padding; reduce ~30% */
.about,
.product-specs,
.product-applications,
.product-benefits,
.product-downloads,
.product-faq,
.product-related,
.material-layers,
.material-compare,
.proizvodi-grid,
.product-action {
padding-top: clamp(56px, 7vh, 100px);
padding-bottom: clamp(56px, 7vh, 100px);
}
@media (max-width: 720px) {
.about,
.product-specs,
.product-applications,
.product-benefits,
.product-downloads,
.product-faq,
.product-related,
.material-layers,
.material-compare,
.proizvodi-grid,
.product-action {
padding-top: 44px;
padding-bottom: 52px;
}
}
/* ---------- 3. Navbar logo — more prominent, calmer header ---------- */
.brand img {
/* Was clamp(118px, 11vw, 170px) — bump ~25% for stronger brand presence */
width: clamp(150px, 13.5vw, 210px);
}
@media (max-width: 720px) {
.brand img { width: 138px; }
}
/* Logo on the dark hero/preloader/overlay — keep size proportional */
.preloader-logo { width: clamp(180px, 16vw, 240px) !important; }
.brand--overlay img { width: clamp(150px, 13.5vw, 210px); }
.footer-brand img,
.menu-overlay-footer-brand img {
width: clamp(150px, 12vw, 200px);
max-width: 100%;
}
/* Slightly tighter header padding so the bigger logo doesn't bloat the bar */
.site-header { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 720px) {
.site-header { padding-top: 12px; padding-bottom: 12px; }
}
/* ---------- 4. Image-first utility classes ---------- */
.image-card {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--c-dark-2);
border: 1px solid var(--line-light);
aspect-ratio: 4 / 5;
display: block;
}
.image-card.section-dark,
.image-card[data-theme="dark"] { border-color: var(--line-dark); }
.image-card > img,
.image-card .image-card-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.02);
transition: transform 0.85s var(--ease-out),
filter 0.45s var(--ease-out);
will-change: transform;
}
.image-card:hover > img,
.image-card:hover .image-card-img {
transform: scale(1.06);
filter: saturate(1.06);
}
/* Aspect-ratio variants — products, categories, references */
.image-card--portrait { aspect-ratio: 4 / 5; }
.image-card--landscape { aspect-ratio: 16 / 10; }
.image-card--wide { aspect-ratio: 16 / 9; }
.image-card--square { aspect-ratio: 1 / 1; }
.image-card--product { aspect-ratio: 5 / 4; }
.image-card--category { aspect-ratio: 4 / 3; }
.product-image,
.category-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Curtain hover effect (re-usable) */
.image-curtain {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
100deg,
rgba(13, 24, 32, 0) 0%,
rgba(13, 24, 32, 0.25) 32%,
rgba(200, 162, 125, 0.32) 50%,
rgba(13, 24, 32, 0.25) 68%,
rgba(13, 24, 32, 0) 100%
);
transform: translateX(-101%);
transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
}
.image-card:hover .image-curtain { transform: translateX(101%); }
@media (hover: none) {
.image-curtain { display: none; }
}
/* Numbered eyebrow chip used inside image cards */
.image-card-num {
position: absolute;
top: 12px;
left: 14px;
z-index: 3;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.92);
background: rgba(13, 24, 32, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 5px 9px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
text-transform: uppercase;
}
/* Diagonal chevron chip on the top-right (appears on hover) */
.image-card-arrow {
position: absolute;
top: 12px;
right: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--c-accent);
color: var(--c-dark);
opacity: 0;
transform: translate(-4px, 4px) scale(0.9);
transition: opacity 0.4s var(--ease-out),
transform 0.5s var(--ease-out);
}
.image-card:hover .image-card-arrow {
opacity: 1;
transform: translate(0, 0) scale(1);
}
/* Responsive image grid — drop-in for catalogue layouts */
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: clamp(16px, 2vw, 28px);
}
.media-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
.media-grid--3,
.media-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.media-grid--2,
.media-grid--3,
.media-grid--4 { grid-template-columns: 1fr; }
}
/* Catalogue-style card — bordered with image + tight info block */
.catalogue-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 16px 18px;
background: var(--c-white);
border: 1px solid var(--line-light);
transition: border-color 0.45s var(--ease-out),
background 0.45s var(--ease-out),
transform 0.5s var(--ease-out);
text-decoration: none;
color: inherit;
}
.catalogue-card:hover {
border-color: rgba(200, 162, 125, 0.45);
transform: translateY(-3px);
}
.catalogue-card .image-card { border-color: transparent; }
.catalogue-card-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-accent);
}
.catalogue-card-title {
font-family: var(--font-display);
font-size: clamp(16px, 1.2vw, 20px);
font-weight: 600;
letter-spacing: -0.005em;
margin: 0;
color: var(--c-dark);
line-height: 1.25;
}
.catalogue-card-desc {
font-size: 13.5px;
line-height: 1.55;
color: rgba(26, 42, 51, 0.6);
margin: 0;
}
.catalogue-card-tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.catalogue-card-tags li {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border: 1px solid var(--line-light-2);
border-radius: 999px;
font-size: 11px;
color: rgba(26, 42, 51, 0.65);
}
/* Dark-themed catalogue card variant (for sections with dark bg) */
.catalogue-card--dark {
background: rgba(255, 255, 255, 0.012);
border-color: var(--line-dark);
color: var(--c-white);
}
.catalogue-card--dark:hover {
border-color: rgba(200, 162, 125, 0.45);
background: rgba(200, 162, 125, 0.045);
}
.catalogue-card--dark .catalogue-card-title { color: var(--c-white); }
.catalogue-card--dark .catalogue-card-desc { color: rgba(255, 255, 255, 0.6); }
.catalogue-card--dark .catalogue-card-tags li {
color: rgba(255, 255, 255, 0.7);
border-color: var(--line-dark-2);
}
/* ---------- 5. B2B microcopy buttons (utility) ---------- */
.btn-quote { /* alias for the bronze pill — use anywhere a "Dodaj u upit" CTA needs to live */ }
/* =====================================================================
HOMEPAGE — B2B CATALOGUE LAYOUT
New hero content + Glavne kategorije + Zašto Birač Sistem +
Primena + Kako funkcioniše upit + Final CTA
===================================================================== */
/* ---------- New hero content (replaces stair-cased editorial title) ---------- */
.hero-content--catalogue {
/* Fill the hero so we can vertically center the content cluster.
absolute + inset:0 + max-width + margin:auto centers horizontally
within --max-w on wide screens. */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: var(--max-w);
margin: 0 auto;
z-index: 4;
box-sizing: border-box;
/* Top padding > bottom padding to optically compensate for the fixed
navbar (~80px) so the cluster reads as centered in the *visible* hero.
Bottom padding reserves clearance for slider dots/arrows + scroll indicator. */
padding: clamp(120px, 14vh, 180px) var(--pad-x) clamp(96px, 11vh, 140px);
display: flex;
flex-direction: column;
justify-content: center; /* vertical centering */
/* explicit margins on each child below for precise rhythm; no flex gap */
gap: 0;
align-items: flex-start;
text-align: left;
pointer-events: none;
}
.hero-content--catalogue > * { pointer-events: auto; }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
padding: 6px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background: rgba(13, 24, 32, 0.32);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
margin: 0 0 clamp(22px, 2.6vh, 34px);
}
.hero-eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 4px rgba(200, 162, 125, 0.18);
}
.hero-headline {
font-family: var(--font-display);
/* ~50% larger than previous clamp(36px, 4.6vw, 64px) */
font-size: clamp(54px, 6.9vw, 96px);
line-height: 1.02;
letter-spacing: -0.02em;
font-weight: 700;
color: var(--c-white);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.32);
margin: 0;
max-width: 20ch;
text-align: left;
/* override base .hero-title position:absolute;inset:0 */
position: relative;
inset: auto;
}
.hero-headline .hero-line-inner {
display: inline-block;
will-change: transform;
}
.hero-lead {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
margin: clamp(22px, 2.6vh, 34px) 0 0;
max-width: 56ch;
}
.hero-badges {
list-style: none;
margin: clamp(24px, 3vh, 38px) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 10px;
max-width: 64ch;
}
.hero-badges li {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
color: rgba(255, 255, 255, 0.88);
font-size: 12.5px;
letter-spacing: 0.01em;
background: rgba(13, 24, 32, 0.26);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hero-content--catalogue .hero-actions {
margin-top: clamp(30px, 3.6vh, 46px);
display: flex;
flex-wrap: wrap;
gap: 14px;
/* override absolute positioning from base .hero-actions */
position: relative;
inset: auto;
bottom: auto;
left: auto;
right: auto;
width: auto;
}
/* The old absolute-positioned .hero-line / .hero-sub elements no longer
exist; the GSAP timeline that sets them is a no-op now. Keep the slider
selectors (.hero-slide, .hero-pagination, .hero-arrow, .hero-scroll). */
@media (max-width: 1024px) {
.hero-content--catalogue {
padding: clamp(110px, 13vh, 170px) var(--pad-x) clamp(96px, 12vh, 130px);
}
/* ~50% larger than previous clamp(32px, 5vw, 48px) */
.hero-headline { max-width: 22ch; font-size: clamp(48px, 7.5vw, 72px); }
}
/* Catalogue hero uses natural flow; nullify the global mobile .hero-actions
absolute-positioning rule so buttons sit directly below the lead text. */
@media (max-width: 900px) {
.hero-content--catalogue .hero-actions {
position: relative;
inset: auto;
bottom: auto;
left: auto;
right: auto;
flex-direction: row;
align-items: flex-start;
width: auto;
}
}
@media (max-width: 720px) {
.hero-content--catalogue {
/* Mobile: smaller navbar (~52px) → smaller top bias; bottom keeps
clearance for chatbot bubble (left), scroll text + dots (right). */
padding-top: clamp(96px, 13vh, 130px);
padding-bottom: clamp(110px, 14vh, 140px);
}
.hero-eyebrow {
font-size: 10px;
padding: 5px 10px;
margin-bottom: 22px;
}
/* ~25% larger again (was clamp(40px, 10.8vw, 56px)) for stronger
mobile impact. Tighter max-width keeps the line breaks balanced. */
.hero-headline {
font-size: clamp(50px, 13.5vw, 70px);
max-width: 13ch;
line-height: 1.02;
letter-spacing: -0.022em;
}
.hero-lead {
font-size: 14.5px;
line-height: 1.6;
margin-top: 20px;
}
/* Mobile: hide tag pills entirely to declutter the hero */
.hero-badges { display: none; }
.hero-content--catalogue .hero-actions {
margin-top: 28px;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: min(220px, calc(100vw - 2 * var(--pad-x)));
}
.hero-content--catalogue .hero-actions .btn-pill {
width: 100%;
max-width: none;
min-width: 0;
height: 46px;
padding: 0 16px;
font-size: 13px;
justify-content: space-between;
gap: 10px;
}
.hero-content--catalogue .hero-actions .btn-arrow {
width: 28px;
height: 28px;
flex-shrink: 0;
}
}
/* ---------- Homepage "O kompaniji" intro variant ----------
Reuses the global .about styling but trims the head divider (no image
below on the homepage) and collapses the seam with .categories so the
two cream blocks read as a continuous flow with one visual rule. */
.home-about .section-rule { margin-bottom: clamp(28px, 3.5vw, 56px); }
.home-about .about-head {
padding-bottom: 0;
border-bottom: 0;
align-items: center;
}
.home-about + .categories { padding-top: 0; }
/* Image now sits ABOVE the big text (was margin-top below). The base
.about-image already has the masked clip-path reveal + parallax via
initAboutImage() — we just flip the spacing direction here. */
.home-about .about-image {
margin-top: 0;
margin-bottom: clamp(40px, 6vh, 80px);
}
.home-about .about-image .image-curtain {
/* curtain swipes over the parallax-translated inner */
z-index: 4;
}
@media (hover: hover) {
.home-about .about-image:hover .image-curtain { transform: translateX(101%); }
}
@media (max-width: 900px) {
.home-about .about-head {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.home-about .about-cta { align-self: flex-start; }
}
@media (max-width: 720px) {
.home-about .about-cta .btn-pill {
width: min(260px, 100%);
justify-content: space-between;
height: 50px;
}
}
/* ---------- Glavne kategorije section ---------- */
.categories {
padding: clamp(60px, 8vh, 110px) 0;
}
.categories-head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(24px, 4vw, 56px);
align-items: end;
margin-bottom: clamp(36px, 5vh, 56px);
}
.categories-head .section-heading { max-width: 24ch; margin: 0; }
.categories-sub {
font-size: clamp(14.5px, 1.05vw, 17px);
line-height: 1.55;
color: rgba(26, 42, 51, 0.62);
max-width: 48ch;
margin: 0;
}
.categories-grid {
gap: clamp(18px, 2.4vw, 32px);
}
.categories-grid .catalogue-card {
gap: 16px;
padding: 18px 18px 22px;
}
.categories-grid .catalogue-card-title {
/* Stronger title since the description was removed for a more
image-led catalogue feel. */
font-size: clamp(22px, 1.8vw, 28px);
line-height: 1.18;
}
.categories-grid .catalogue-card-eyebrow {
font-size: 11px;
}
.categories-grid .image-card { border-color: var(--line-light); }
/* Slightly more dramatic image presence — taller crop on the category
cards while keeping the 2-column grid balance. */
.categories-grid .image-card--category { aspect-ratio: 5 / 4; }
/* Catalogue card CTA row (used on category and process cards) */
.catalogue-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--line-light);
color: var(--c-accent);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: gap 0.4s var(--ease-out);
}
.catalogue-card:hover .catalogue-card-cta { gap: 12px; }
@media (max-width: 1024px) {
.categories-head { grid-template-columns: 1fr; gap: 14px; }
}
/* ---------- Zašto Birač Sistem section ---------- */
.why-birac {
position: relative;
padding: clamp(60px, 8vh, 110px) 0;
overflow: hidden;
}
.why-birac .grid-lines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.why-birac .grid-lines .grid-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.05);
}
.why-birac .container { position: relative; z-index: 1; }
.why-birac-head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(24px, 4vw, 56px);
align-items: end;
margin-bottom: clamp(36px, 5vh, 56px);
}
.why-birac-head .section-heading { max-width: 22ch; margin: 0; }
.why-birac-sub {
font-size: clamp(14.5px, 1.05vw, 17px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.62);
max-width: 50ch;
margin: 0;
}
.why-birac-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--line-dark);
border-left: 1px solid var(--line-dark);
}
.why-birac-card {
border-right: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
padding: clamp(22px, 2.6vw, 32px);
display: flex;
flex-direction: column;
gap: 10px;
transition: background 0.45s var(--ease-out);
}
.why-birac-card:hover {
background: rgba(200, 162, 125, 0.05);
}
.why-birac-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--c-accent);
}
.why-birac-title {
font-family: var(--font-display);
font-size: clamp(16px, 1.2vw, 19px);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--c-white);
margin: 0;
line-height: 1.25;
}
.why-birac-text {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.62);
margin: 0;
max-width: 36ch;
}
@media (max-width: 1024px) {
.why-birac-head { grid-template-columns: 1fr; gap: 14px; }
.why-birac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.why-birac-grid { grid-template-columns: 1fr; }
}
/* ---------- Primena / Applications section ---------- */
.applications {
padding: clamp(60px, 8vh, 110px) 0;
}
.applications-head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(24px, 4vw, 56px);
align-items: end;
margin-bottom: clamp(36px, 5vh, 56px);
}
.applications-head .section-heading { max-width: 22ch; margin: 0; }
.applications-sub {
font-size: clamp(14.5px, 1.05vw, 17px);
line-height: 1.55;
color: rgba(26, 42, 51, 0.62);
max-width: 50ch;
margin: 0;
}
/* 2 + 2 layout — clean two-up grid with 4 wider landscape cards.
16/9 aspect ratio makes each frame breathe. Falls back to 1-col on mobile. */
.applications-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(20px, 2.6vw, 36px);
}
.applications-grid .image-card--landscape {
aspect-ratio: 16 / 9;
}
.applications-grid .image-card-num {
background: var(--c-accent);
color: var(--c-dark);
border-color: var(--c-accent);
font-size: 10.5px;
}
@media (max-width: 1024px) {
.applications-head { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
.applications-grid { grid-template-columns: 1fr; }
}
/* ---------- Kako funkcioniše upit (4-step process) ---------- */
.how-inquiry {
padding: clamp(60px, 8vh, 110px) 0;
}
.how-inquiry-head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(24px, 4vw, 56px);
align-items: end;
margin-bottom: clamp(36px, 5vh, 56px);
}
.how-inquiry-head .section-heading { max-width: 22ch; margin: 0; }
.how-inquiry-sub {
font-size: clamp(14.5px, 1.05vw, 17px);
line-height: 1.55;
color: rgba(26, 42, 51, 0.62);
max-width: 56ch;
margin: 0;
}
.how-inquiry-steps {
list-style: none;
margin: 0 0 clamp(32px, 4vh, 48px);
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.how-inquiry-step {
position: relative;
padding: 28px 22px 24px 0;
border-top: 1px solid var(--line-light);
display: flex;
flex-direction: column;
gap: 10px;
}
.how-inquiry-step::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 40px;
height: 1px;
background: var(--c-accent);
}
.how-inquiry-line {
display: none; /* horizontal accent rule handled by ::before */
}
.how-inquiry-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--c-accent);
}
.how-inquiry-title {
font-family: var(--font-display);
font-size: clamp(17px, 1.3vw, 21px);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--c-dark);
margin: 0;
line-height: 1.25;
max-width: 14ch;
}
.how-inquiry-text {
font-size: 13.5px;
line-height: 1.55;
color: rgba(26, 42, 51, 0.62);
margin: 0;
max-width: 32ch;
}
.how-inquiry-cta {
display: flex;
justify-content: flex-start;
}
@media (max-width: 1024px) {
.how-inquiry-head { grid-template-columns: 1fr; gap: 14px; }
.how-inquiry-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.how-inquiry-steps { grid-template-columns: 1fr; }
.how-inquiry-step { padding: 22px 0 18px; }
}
/* ---------- Final CTA (with image background) ---------- */
.final-cta {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(80px, 12vh, 160px) 0;
color: var(--c-white);
}
.final-cta-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.final-cta-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(0.96) contrast(1.02);
}
.final-cta-overlay {
position: absolute;
inset: 0;
/* Single, properly-tuned dark layer — slightly lighter top so the
industrial image breathes through, slightly heavier where the
text/CTAs sit for guaranteed readability.
Plus a soft left-to-right gradient that biases darkness to the
text side and lets the image show on the right. */
background:
linear-gradient(180deg, rgba(13, 24, 32, 0.62) 0%, rgba(13, 24, 32, 0.78) 80%),
linear-gradient(90deg, rgba(13, 24, 32, 0.36) 0%, rgba(13, 24, 32, 0.00) 60%);
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta-inner {
max-width: 720px;
display: flex;
flex-direction: column;
gap: clamp(18px, 2.4vh, 32px);
align-items: flex-start;
}
.final-cta-eyebrow {
color: var(--c-accent);
}
.final-cta-eyebrow .dot { background: var(--c-accent); }
.final-cta-title {
font-family: var(--font-display);
font-size: clamp(30px, 3.8vw, 54px) !important;
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.018em;
color: var(--c-white);
margin: 0;
max-width: 18ch;
}
.final-cta-sub {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
max-width: 56ch;
margin: 0;
}
.final-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
@media (max-width: 720px) {
.final-cta { padding: 64px 0; }
.final-cta-title { font-size: clamp(26px, 7.4vw, 36px) !important; }
}
/* ---------- Image-card numbered chip — light variant for cream sections ---------- */
.section-light .image-card-num {
/* keep the dark default; overrides per section if needed */
}
/* ============================================================
PROIZVODI page — simplified hero, 2x2 category grid,
"Podtipovi i namena" supporting block.
============================================================ */
/* Mobile padding tighten for the full-screen products hero. */
@media (max-width: 720px) {
.proizvodi-hero { padding: clamp(110px, 13vh, 150px) 0 clamp(80px, 11vh, 120px); }
}
/* ---------- Compact pre-footer CTA (no full-bleed image) ----------
Used on proizvodi.html. Keeps the same .final-cta-inner / title / sub /
actions rules but uses a solid dark band — no big image dead-zone. */
.final-cta--solid {
background: var(--c-blue-grey);
padding: clamp(56px, 8vh, 100px) 0;
}
/* ---------- Product detail page (legacy) — final-CTA bg fallback ----------
The homepage final-CTA renders the image via the inline ![]()
tag inside
.final-cta-bg. To make the visual rendering bulletproof on the legacy detail page
even if the ![]()
element fails to paint for any reason (cache miss, layout
shift before load, etc.), we ALSO declare the image as a CSS background on
.final-cta-bg itself. The two paths render the same picture, so there is no
visible double-up — but the section can never end up as a flat plain block
the way the screenshot showed. */
.page-proizvod .final-cta-bg {
background-image: url('../images/birac-sistem-poslovni-objekat-paneli.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Make sure nothing collapses the bg layer's height — defensive sizing. */
.page-proizvod .final-cta-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Same defensive fallback for proizvodi.html so the final CTA section
never renders flat if the ![]()
fails to paint. */
.page-proizvodi .final-cta-bg {
background-image: url('../images/birac-sistem-velika-industrijska-hala.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.page-proizvodi .final-cta-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ---------- 2x2 simple grid (replaces masonry offset) ---------- */
.proizvodi-masonry--simple {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(28px, 3.6vw, 56px);
align-items: stretch;
}
.proizvodi-masonry--simple .proizvodi-card { margin: 0; }
@media (max-width: 900px) {
.proizvodi-masonry--simple { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
}
/* Card CTA arrow row — visible footer of each category card */
.proizvodi-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: var(--c-accent);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: gap 0.4s var(--ease-out);
}
.proizvodi-card:hover .proizvodi-card-cta { gap: 12px; }
/* ============================================================
proizvodi.html — defensive title visibility overrides
Ensures every H1/H2/H3 on this page paints with the correct
color, full opacity, and stays above any overlay/animation
layer so titles are never invisible regardless of cascade,
GSAP timing, or browser quirks.
============================================================ */
/* Hero text sits over a dark overlay → must always be white,
visible, and above the bg/overlay layers. */
body.page-proizvodi .proizvodi-hero-inner,
body.page-proizvodi .proizvodi-hero-content,
body.page-proizvodi .proizvodi-hero-headline {
position: relative;
z-index: 2;
}
body.page-proizvodi .proizvodi-hero-title,
body.page-proizvodi .proizvodi-hero-eyebrow,
body.page-proizvodi .proizvodi-hero-copy,
body.page-proizvodi .proizvodi-hero-features {
opacity: 1;
visibility: visible;
}
body.page-proizvodi .proizvodi-hero-title {
color: #ffffff !important;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
/* H2 / section headings on dark sections */
body.page-proizvodi .section-dark .section-heading,
body.page-proizvodi .section-dark .section-heading--light,
body.page-proizvodi .section-dark h1,
body.page-proizvodi .section-dark h2,
body.page-proizvodi .section-dark h3 {
color: #ffffff !important;
opacity: 1;
visibility: visible;
}
/* H2 / section headings on light sections */
body.page-proizvodi .section-light .section-heading,
body.page-proizvodi .section-light h1,
body.page-proizvodi .section-light h2,
body.page-proizvodi .section-light h3 {
color: var(--c-dark) !important;
opacity: 1;
visibility: visible;
}
/* Final-CTA title sits over a dark overlay — must be white. */
body.page-proizvodi .final-cta-title {
color: #ffffff !important;
opacity: 1;
visibility: visible;
}
/* Panel-finder + material-compare headings — both live in .section-light
blocks. Belt-and-suspenders so they never read as muted gray. */
body.page-proizvodi .panel-finder-head .section-heading,
body.page-proizvodi .material-compare-head .section-heading {
opacity: 1;
visibility: visible;
}
body.page-proizvodi .panel-finder-head .section-heading {
color: var(--c-dark) !important;
}
body.page-proizvodi .material-compare-head .section-heading,
body.page-proizvodi .material-layers-head .section-heading {
color: #ffffff !important;
}
/* Make sure the .rv-word splitter never traps a word permanently
below its hidden mask — if GSAP fails to fire the reveal for
any reason, the word still paints in its final visible position
instead of staying offset by yPercent: 110. */
@media (prefers-reduced-motion: reduce) {
body.page-proizvodi .js-split-lines .rv-word { overflow: visible; }
body.page-proizvodi .js-split-lines .rv-word > span { transform: none !important; }
}
/* Mobile: stronger overlay so the hero H1 stays clearly readable
over the bright snow / sky portion of the new hero image. */
@media (max-width: 720px) {
.proizvodi-hero-overlay {
background:
linear-gradient(180deg, rgba(13, 24, 32, 0.55) 0%, rgba(13, 24, 32, 0.82) 100%),
linear-gradient(90deg, rgba(13, 24, 32, 0.74) 0%, rgba(13, 24, 32, 0.58) 60%, rgba(13, 24, 32, 0.46) 100%);
}
body.page-proizvodi .proizvodi-hero-bg img {
object-position: center center;
}
}
/* =====================================================================
PROIZVODI — SUB-FILTER ROW + PRODUCT LIST GRID
Added with the 19-card restructure (PUR / PIR / Kamena vuna).
Sub-filter row sits directly below the sticky category nav and is
shown only when "Krovni paneli" or "Zidni paneli" is the active
category. Visibility is toggled by the `hidden` attribute from JS.
===================================================================== */
.proizvodi-subfilter {
background: var(--c-light, #F4F1EB);
border-bottom: 1px solid rgba(26, 42, 51, 0.08);
padding: 12px 0;
position: relative;
z-index: 20;
}
.proizvodi-subfilter[hidden] { display: none; }
.proizvodi-subfilter-inner {
display: flex;
align-items: center;
gap: 14px;
}
.proizvodi-subfilter-label {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.55);
font-weight: 600;
flex-shrink: 0;
}
.proizvodi-subfilter-list {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.proizvodi-subfilter-list::-webkit-scrollbar { display: none; }
.proizvodi-subfilter-chip {
appearance: none;
border: 1px solid rgba(26, 42, 51, 0.18);
background: transparent;
color: var(--c-dark, #1A2A33);
font-size: 13px;
font-weight: 600;
padding: 7px 16px;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out);
font-family: inherit;
}
.proizvodi-subfilter-chip:hover {
border-color: var(--c-accent, #C8A27D);
color: var(--c-accent, #C8A27D);
}
.proizvodi-subfilter-chip.is-active {
background: var(--c-dark, #1A2A33);
border-color: var(--c-dark, #1A2A33);
color: #fff;
}
.proizvodi-subfilter-chip:focus-visible {
outline: 2px solid var(--c-accent, #C8A27D);
outline-offset: 2px;
}
@media (max-width: 768px) {
.proizvodi-subfilter-inner { gap: 10px; }
.proizvodi-subfilter-label { display: none; }
.proizvodi-subfilter-list {
flex-wrap: nowrap;
scroll-snap-type: x proximity;
}
.proizvodi-subfilter-chip { scroll-snap-align: start; }
}
/* ---------- Product list grid ---------- */
.proizvodi-list { padding: 64px 0 96px; }
.proizvodi-list-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 16px;
border-bottom: 1px solid rgba(244, 241, 235, 0.08);
margin-bottom: 28px;
}
.proizvodi-list-count {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 241, 235, 0.6);
font-weight: 600;
}
.proizvodi-list-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 980px) {
.proizvodi-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.proizvodi-list-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ---------- Individual product card ---------- */
.product-card {
background: rgba(244, 241, 235, 0.04);
border: 1px solid rgba(244, 241, 235, 0.09);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.product-card:hover {
border-color: rgba(200, 162, 125, 0.45);
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.product-card-media {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, rgba(26, 42, 51, 0.5), rgba(15, 27, 35, 0.85));
}
.product-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease-out);
}
.product-card:hover .product-card-media img {
transform: scale(1.045);
}
.product-card-cat-badge,
.product-card-fill-badge {
position: absolute;
top: 10px;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 5px 10px;
border-radius: 999px;
backdrop-filter: blur(8px);
z-index: 2;
line-height: 1;
}
.product-card-cat-badge {
left: 10px;
background: rgba(26, 42, 51, 0.78);
color: rgba(255, 255, 255, 0.92);
}
.product-card-fill-badge {
right: 10px;
background: rgba(200, 162, 125, 0.94);
color: #1A2A33;
}
.product-card-fill-badge--pir {
background: rgba(200, 162, 125, 0.94);
color: #1A2A33;
}
.product-card-fill-badge--pur {
background: rgba(244, 241, 235, 0.92);
color: #1A2A33;
}
.product-card-fill-badge--kv {
background: rgba(26, 42, 51, 0.88);
color: #F4F1EB;
border: 1px solid rgba(200, 162, 125, 0.4);
}
.product-card-body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.product-card-title {
font-family: inherit;
font-size: 17px;
font-weight: 700;
color: var(--c-light, #F4F1EB);
margin: 0;
line-height: 1.3;
letter-spacing: 0.01em;
}
.product-card-desc {
font-size: 13px;
line-height: 1.55;
color: rgba(244, 241, 235, 0.66);
margin: 0;
flex: 1;
}
.product-card-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.product-card-cta {
flex: 1;
justify-content: center;
font-size: 13px;
padding: 9px 18px;
}
.product-card-add {
appearance: none;
border: 1px solid rgba(244, 241, 235, 0.2);
background: transparent;
color: var(--c-light, #F4F1EB);
width: 40px;
height: 40px;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.22s var(--ease-out);
flex-shrink: 0;
}
.product-card-add:hover {
background: var(--c-accent, #C8A27D);
border-color: var(--c-accent, #C8A27D);
color: var(--c-dark, #1A2A33);
}
.product-card-add:focus-visible {
outline: 2px solid var(--c-accent, #C8A27D);
outline-offset: 2px;
}
.product-card-add.is-added {
background: var(--c-accent, #C8A27D);
border-color: var(--c-accent, #C8A27D);
color: var(--c-dark, #1A2A33);
transform: scale(1.05);
}
/* =====================================================================
3-LEVEL CATALOG ARCHITECTURE
- proizvodi.html landing (4 cards)
- {category}.html pages (hero + filter + product grid)
- shared product card with stacked actions ("Dodaj u korpu" + "Detalje")
===================================================================== */
/* ---------- Landing grid on proizvodi.html (4 large category cards) ---------- */
.proizvodi-landing {
padding: 88px 0 96px;
}
.proizvodi-landing-head {
max-width: 760px;
margin-bottom: 44px;
}
.proizvodi-landing-sub {
font-size: 15px;
line-height: 1.6;
color: rgba(244, 241, 235, 0.7);
margin-top: 14px;
}
.proizvodi-landing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1100px) {
.proizvodi-landing-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
.proizvodi-landing-grid { grid-template-columns: 1fr; gap: 18px; }
}
.category-landing-card {
display: flex;
flex-direction: column;
background: rgba(244, 241, 235, 0.04);
border: 1px solid rgba(244, 241, 235, 0.09);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.category-landing-card:hover {
border-color: rgba(200, 162, 125, 0.5);
transform: translateY(-4px);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}
.category-landing-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(135deg, rgba(26, 42, 51, 0.5), rgba(15, 27, 35, 0.85));
}
.category-landing-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease-out);
}
.category-landing-card:hover .category-landing-media img {
transform: scale(1.05);
}
.category-landing-curtain {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(26, 42, 51, 0) 50%, rgba(15, 27, 35, 0.5) 100%);
pointer-events: none;
}
.category-landing-count {
position: absolute;
top: 12px;
right: 12px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
background: rgba(200, 162, 125, 0.94);
color: #1A2A33;
z-index: 2;
}
.category-landing-body {
padding: 22px 22px 26px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.category-landing-num {
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(200, 162, 125, 0.85);
font-weight: 700;
}
.category-landing-title {
font-family: inherit;
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 700;
color: var(--c-light, #F4F1EB);
margin: 0;
line-height: 1.25;
}
.category-landing-desc {
font-size: 14px;
line-height: 1.55;
color: rgba(244, 241, 235, 0.66);
margin: 0;
flex: 1;
}
.category-landing-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--c-accent, #C8A27D);
margin-top: 6px;
transition: gap 0.22s var(--ease-out);
}
.category-landing-card:hover .category-landing-cta { gap: 12px; }
.category-landing-cta svg { transition: transform 0.22s var(--ease-out); }
.category-landing-card:hover .category-landing-cta svg { transform: translateX(2px); }
/* ---------- Category page hero (~50vh) ---------- */
.category-hero {
position: relative;
min-height: 50vh;
min-height: 50svh;
display: flex;
align-items: flex-end;
overflow: hidden;
padding-top: 110px;
padding-bottom: 48px;
}
@supports (min-height: 50dvh) { .category-hero { min-height: 50dvh; } }
.category-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.category-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.category-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(13, 24, 32, 0.42) 0%, rgba(13, 24, 32, 0.75) 100%),
linear-gradient(90deg, rgba(13, 24, 32, 0.78) 0%, rgba(13, 24, 32, 0.55) 55%, rgba(13, 24, 32, 0.35) 100%);
z-index: 1;
}
.category-hero-inner {
position: relative;
z-index: 2;
color: var(--c-light, #F4F1EB);
}
/* Breadcrumb */
.breadcrumb {
margin-bottom: 18px;
}
.breadcrumb ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
font-size: 12px;
letter-spacing: 0.04em;
}
.breadcrumb li {
color: rgba(244, 241, 235, 0.6);
display: inline-flex;
align-items: center;
gap: 8px;
}
.breadcrumb li + li::before {
content: "›";
color: rgba(244, 241, 235, 0.4);
margin-right: 4px;
}
.breadcrumb li a {
color: rgba(244, 241, 235, 0.78);
text-decoration: none;
transition: color 0.22s var(--ease-out);
}
.breadcrumb li a:hover {
color: var(--c-accent, #C8A27D);
}
.breadcrumb li[aria-current="page"] {
color: var(--c-light, #F4F1EB);
font-weight: 600;
}
.category-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 700;
color: rgba(244, 241, 235, 0.78);
margin-bottom: 14px;
}
.category-hero-eyebrow .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-accent, #C8A27D);
}
.category-hero-title {
font-family: inherit;
font-size: clamp(34px, 5vw, 56px);
font-weight: 800;
line-height: 1.05;
color: #ffffff;
margin: 0 0 16px;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
.category-hero-sub {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
color: rgba(244, 241, 235, 0.82);
max-width: 640px;
margin: 0;
}
/* ---------- Category filter row (sticky below sticky nav) ---------- */
.category-filter {
position: sticky;
top: 0;
z-index: 25;
background: var(--c-light, #F4F1EB);
border-bottom: 1px solid rgba(26, 42, 51, 0.08);
padding: 14px 0;
}
.category-filter-inner {
display: flex;
align-items: center;
gap: 14px;
}
.category-filter-label {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.55);
font-weight: 600;
flex-shrink: 0;
}
.category-filter-list {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.category-filter-list::-webkit-scrollbar { display: none; }
.category-filter-chip {
appearance: none;
border: 1px solid rgba(26, 42, 51, 0.18);
background: transparent;
color: var(--c-dark, #1A2A33);
font-size: 13px;
font-weight: 600;
padding: 7px 16px;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out);
font-family: inherit;
}
.category-filter-chip:hover {
border-color: var(--c-accent, #C8A27D);
color: var(--c-accent, #C8A27D);
}
.category-filter-chip.is-active {
background: var(--c-dark, #1A2A33);
border-color: var(--c-dark, #1A2A33);
color: #fff;
}
.category-filter-chip:focus-visible {
outline: 2px solid var(--c-accent, #C8A27D);
outline-offset: 2px;
}
@media (max-width: 768px) {
.category-filter-inner { gap: 10px; }
.category-filter-label { display: none; }
.category-filter-list {
flex-wrap: nowrap;
scroll-snap-type: x proximity;
}
.category-filter-chip { scroll-snap-align: start; }
}
/* ---------- Category products section ---------- */
.category-products {
padding: 64px 0 96px;
}
.category-products-meta {
padding: 0 0 16px;
border-bottom: 1px solid rgba(244, 241, 235, 0.08);
margin-bottom: 28px;
}
.category-products-count {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 241, 235, 0.6);
font-weight: 600;
}
.category-products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 980px) {
.category-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.category-products-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* Empty state (panel pages, when filter returns 0 cards) */
.category-products-empty {
margin-top: 28px;
padding: 56px 24px;
border: 1px dashed rgba(244, 241, 235, 0.15);
border-radius: 14px;
text-align: center;
}
.category-products-empty p {
font-size: 15px;
color: rgba(244, 241, 235, 0.66);
margin: 0;
letter-spacing: 0.02em;
}
/* ---------- Stacked product card actions (two buttons, full-width) ---------- */
.product-card-actions--stacked {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.product-card-add-btn,
.product-card-details-btn {
width: 100%;
justify-content: center;
font-size: 13px;
padding: 10px 18px;
}
/* ---------- Legacy detail page — "product not found" state ----------
Shown by initProductDetailPage when ?id= is missing or unknown.
All other product sections are display:none'd by the same JS. */
.product-not-found {
min-height: 70vh;
min-height: 70svh;
display: flex;
align-items: center;
padding: 140px 0 80px;
background:
radial-gradient(ellipse at 50% 35%, rgba(26, 42, 51, 0.92) 0%, #0F1B23 70%, #0A1418 100%);
}
@supports (min-height: 70dvh) { .product-not-found { min-height: 70dvh; } }
.product-not-found[hidden] { display: none; }
.product-not-found-inner {
max-width: 640px;
color: var(--c-light, #F4F1EB);
text-align: left;
}
.product-not-found-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 700;
color: rgba(244, 241, 235, 0.78);
margin-bottom: 18px;
}
.product-not-found-eyebrow .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-accent, #C8A27D);
}
.product-not-found-title {
font-family: inherit;
font-size: clamp(34px, 5vw, 56px);
font-weight: 800;
line-height: 1.08;
color: #ffffff;
margin: 0 0 16px;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
.product-not-found-text {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6;
color: rgba(244, 241, 235, 0.78);
margin: 0 0 32px;
}
.product-not-found-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* =====================================================================
CART FLOW POLISH (Prompt 5B)
- configurator type lock states
- korpa.html line item polish (config block, fill badge, note details)
- 3-step in-page nav (01 Korpa · 02 Podaci · 03 Slanje)
- client form + review screen + success state
===================================================================== */
/* ---------- Visually-hidden utility ---------- */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* ---------- Configurator locked states (legacy detail page) ---------- */
.product-option-btn.is-locked,
.product-option-btn:disabled {
cursor: default;
opacity: 0.82;
}
.product-option-btn.is-locked.is-active {
opacity: 1;
}
.product-option-btn.is-on-stock::after {
content: 'Lager';
display: inline-block;
margin-left: 8px;
font-size: 9px;
letter-spacing: 0.16em;
padding: 2px 7px;
border-radius: 999px;
background: rgba(200, 162, 125, 0.22);
color: var(--c-accent, #C8A27D);
text-transform: uppercase;
font-weight: 700;
vertical-align: middle;
}
.product-option-hint {
display: block;
margin-top: 8px;
font-size: 11px;
color: rgba(26, 42, 51, 0.55);
letter-spacing: 0.02em;
}
.product-option-hint[hidden] { display: none; }
.product-dimensions-input {
width: 100%;
border: 1px solid rgba(26, 42, 51, 0.18);
border-radius: 8px;
padding: 10px 14px;
font: inherit;
color: var(--c-dark, #1A2A33);
background: #fff;
transition: border-color 0.2s var(--ease-out);
}
.product-dimensions-input:focus {
outline: none;
border-color: var(--c-accent, #C8A27D);
}
[data-config-row][hidden] { display: none !important; }
/* ---------- Cart line item — badges + thumb link + note details ---------- */
.korpa-item-thumb {
display: block;
width: 120px;
height: 80px;
overflow: hidden;
border-radius: 8px;
flex-shrink: 0;
background: rgba(26, 42, 51, 0.04);
transition: opacity 0.2s var(--ease-out);
}
.korpa-item-thumb:hover { opacity: 0.85; }
.korpa-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.korpa-item-badges {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.korpa-item-cat {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: rgba(26, 42, 51, 0.62);
padding: 4px 9px;
border: 1px solid rgba(26, 42, 51, 0.14);
border-radius: 999px;
}
.korpa-item-fill-badge {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 4px 9px;
border-radius: 999px;
line-height: 1;
}
.korpa-item-fill-badge--pir { background: rgba(200, 162, 125, 0.94); color: #1A2A33; }
.korpa-item-fill-badge--pur { background: rgba(26, 42, 51, 0.08); color: #1A2A33; }
.korpa-item-fill-badge--kv { background: rgba(26, 42, 51, 0.92); color: #F4F1EB; }
.korpa-item-title {
margin: 0 0 4px;
font-size: 16px;
line-height: 1.3;
}
.korpa-item-title a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.korpa-item-title a:hover {
border-bottom-color: var(--c-accent, #C8A27D);
color: var(--c-accent, #C8A27D);
}
.korpa-item-note-details {
margin-top: 12px;
border-top: 1px solid rgba(26, 42, 51, 0.08);
padding-top: 10px;
}
.korpa-item-note-summary {
cursor: pointer;
font-size: 12px;
letter-spacing: 0.06em;
color: rgba(26, 42, 51, 0.65);
display: inline-flex;
align-items: center;
gap: 8px;
list-style: none;
user-select: none;
}
.korpa-item-note-summary::-webkit-details-marker { display: none; }
.korpa-item-note-summary::before {
content: '+';
font-size: 14px;
line-height: 1;
width: 14px;
text-align: center;
color: var(--c-accent, #C8A27D);
transition: transform 0.2s var(--ease-out);
}
.korpa-item-note-details[open] .korpa-item-note-summary::before {
content: '−';
}
/* ---------- Step navigation (top stepper as clickable buttons) ---------- */
.checkout-steps[data-cart-steps] {
display: flex;
gap: 14px;
list-style: none;
padding: 0;
margin: 24px 0 0;
flex-wrap: wrap;
}
.checkout-steps[data-cart-steps] > li {
flex: 0 1 auto;
}
.checkout-step-btn {
display: inline-flex;
align-items: center;
gap: 10px;
appearance: none;
background: transparent;
border: 1px solid rgba(244, 241, 235, 0.18);
color: rgba(244, 241, 235, 0.5);
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
font-family: inherit;
transition: all 0.22s var(--ease-out);
}
.checkout-step-btn:hover {
border-color: rgba(200, 162, 125, 0.55);
color: rgba(244, 241, 235, 0.82);
}
[data-step-item].is-active .checkout-step-btn {
border-color: var(--c-accent, #C8A27D);
background: rgba(200, 162, 125, 0.16);
color: #fff;
}
[data-step-item].is-done .checkout-step-btn {
color: var(--c-accent, #C8A27D);
border-color: rgba(200, 162, 125, 0.45);
}
.checkout-step-num {
font-size: 10px;
letter-spacing: 0.22em;
font-weight: 700;
}
.checkout-step-label {
font-size: 13px;
font-weight: 600;
}
/* ---------- Step blocks ---------- */
.korpa-step {
animation: korpa-step-fade-in 0.3s var(--ease-out);
}
.korpa-step[hidden] { display: none; }
@keyframes korpa-step-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.korpa-step-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
justify-content: space-between;
}
.korpa-step-actions[hidden] { display: none; }
.btn-arrow--back svg { transform: scaleX(1); }
/* ---------- Step 02 — Client form ---------- */
.korpa-clientform-wrap {
max-width: 820px;
}
.korpa-clientform-head {
margin-bottom: 28px;
}
.korpa-clientform-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 700;
color: rgba(26, 42, 51, 0.62);
margin-bottom: 14px;
}
.korpa-clientform-eyebrow .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c-accent, #C8A27D);
}
.korpa-clientform-title {
font-family: inherit;
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--c-dark, #1A2A33);
margin: 0 0 10px;
line-height: 1.2;
}
.korpa-clientform-sub {
font-size: 14px;
color: rgba(26, 42, 51, 0.66);
margin: 0;
line-height: 1.55;
}
.korpa-clientform-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 700px) {
.korpa-clientform-grid { grid-template-columns: 1fr; }
}
.korpa-clientform-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
}
.korpa-clientform-field--full { grid-column: 1 / -1; }
.korpa-clientform-field > span {
font-weight: 600;
color: var(--c-dark, #1A2A33);
}
.korpa-clientform-field > span em {
color: var(--c-accent, #C8A27D);
font-style: normal;
margin-left: 2px;
}
.korpa-clientform-field input,
.korpa-clientform-field textarea {
width: 100%;
border: 1px solid rgba(26, 42, 51, 0.18);
border-radius: 8px;
padding: 10px 14px;
font: inherit;
color: var(--c-dark, #1A2A33);
background: #fff;
transition: border-color 0.2s var(--ease-out);
}
.korpa-clientform-field textarea { resize: vertical; min-height: 80px; }
.korpa-clientform-field input:focus,
.korpa-clientform-field textarea:focus {
outline: none;
border-color: var(--c-accent, #C8A27D);
}
.korpa-clientform-field input.is-error,
.korpa-clientform-field textarea.is-error {
border-color: #C8443D;
}
.korpa-clientform-error {
font-size: 11px;
color: #C8443D;
margin-top: 2px;
}
.korpa-clientform-error[hidden] { display: none; }
/* ---------- Step 03 — Review + success ---------- */
.korpa-review {
max-width: 920px;
}
.korpa-review-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
margin-top: 24px;
}
@media (max-width: 780px) {
.korpa-review-grid { grid-template-columns: 1fr; }
}
.korpa-review-grid[hidden] { display: none; }
.korpa-review-block {
background: #fff;
border: 1px solid rgba(26, 42, 51, 0.08);
border-radius: 12px;
padding: 20px 22px;
}
.korpa-review-label {
display: block;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
color: rgba(26, 42, 51, 0.55);
margin-bottom: 14px;
}
.korpa-review-cart {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.korpa-review-line {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(26, 42, 51, 0.06);
}
.korpa-review-line:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.korpa-review-line-title {
font-weight: 700;
color: var(--c-dark, #1A2A33);
font-size: 14px;
}
.korpa-review-line-cat {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(26, 42, 51, 0.55);
}
.korpa-review-line-meta {
font-size: 13px;
color: rgba(26, 42, 51, 0.72);
line-height: 1.5;
}
.korpa-review-line-note {
font-size: 12px;
color: rgba(26, 42, 51, 0.6);
font-style: italic;
}
.korpa-review-client {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.korpa-review-client-row {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: baseline;
border-bottom: 1px solid rgba(26, 42, 51, 0.06);
padding-bottom: 8px;
}
.korpa-review-client-row:last-child { border-bottom: 0; padding-bottom: 0; }
.korpa-review-client-row dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(26, 42, 51, 0.55);
margin: 0;
flex-shrink: 0;
}
.korpa-review-client-row dd {
margin: 0;
text-align: right;
color: var(--c-dark, #1A2A33);
font-size: 13px;
font-weight: 500;
word-break: break-word;
}
.korpa-success {
margin-top: 32px;
text-align: center;
padding: 40px 24px;
background: rgba(200, 162, 125, 0.08);
border: 1px solid rgba(200, 162, 125, 0.32);
border-radius: 14px;
}
.korpa-success[hidden] { display: none; }
.korpa-success-mark {
display: inline-flex;
color: var(--c-accent, #C8A27D);
margin-bottom: 14px;
}
.korpa-success-title {
font-family: inherit;
font-size: 24px;
font-weight: 700;
color: var(--c-dark, #1A2A33);
margin: 0 0 8px;
}
.korpa-success-text {
font-size: 14px;
color: rgba(26, 42, 51, 0.7);
margin: 0 0 22px;
line-height: 1.55;
}
/* =====================================================================
STEP 02 — Two-column layout with sticky cart summary on the right
===================================================================== */
.korpa-step02-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
width: 100%;
/* max-width + horizontal padding come from the parent .container;
top spacing comes from .korpa-body padding-top so all three steps
start at the same vertical offset. */
padding: 0 0 80px;
box-sizing: border-box;
}
.korpa-step02-form-col {
min-width: 0;
}
/* Defeat the legacy .korpa-clientform-wrap max-width inside the grid cell */
.korpa-step02-form-col .korpa-clientform-wrap { max-width: none; }
.korpa-step02-summary {
position: sticky;
top: 120px;
max-height: calc(100vh - 160px);
overflow-y: auto;
background: var(--color-surface, var(--c-light, #f5efe5));
border-radius: 12px;
padding: 32px;
min-width: 0;
}
.korpa-step02-summary-inner {
background: transparent;
border: 0;
padding: 0;
}
.korpa-step02-summary-title {
font-family: var(--font-display, inherit);
font-size: clamp(18px, 1.5vw, 21px);
font-weight: 700;
color: var(--c-dark);
margin: 0 0 16px;
letter-spacing: -0.01em;
}
.korpa-step02-summary-list {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.korpa-step02-summary-item {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.korpa-step02-summary-item-thumb {
width: 64px !important;
height: 48px !important;
max-width: 64px;
max-height: 48px;
border-radius: 6px;
overflow: hidden;
background: var(--c-light);
display: block;
flex-shrink: 0;
object-fit: cover;
}
.korpa-step02-summary-item-thumb img {
width: 64px !important;
height: 48px !important;
max-width: 64px;
max-height: 48px;
object-fit: cover;
display: block;
}
.korpa-step02-summary-item-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.korpa-step02-summary-item-title {
font-size: 13.5px;
font-weight: 600;
color: var(--c-dark);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.korpa-step02-summary-item-sub {
font-size: 11.5px;
color: rgba(26, 42, 51, 0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.korpa-step02-summary-item-totals {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
font-size: 12px;
color: var(--c-dark);
text-align: right;
}
.korpa-step02-summary-item-qty {
font-weight: 600;
}
.korpa-step02-summary-item-area {
color: rgba(26, 42, 51, 0.6);
}
.korpa-step02-summary-sep {
height: 1px;
background: var(--line-light-2);
margin: 14px 0;
}
.korpa-step02-summary-totals {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.korpa-step02-summary-totals li {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
color: rgba(26, 42, 51, 0.7);
}
.korpa-step02-summary-totals strong {
color: var(--c-dark);
font-weight: 700;
}
.korpa-step02-summary-price {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: var(--c-light);
border-radius: 8px;
margin: 0 0 12px;
}
.korpa-step02-summary-price-label {
font-size: 12px;
color: rgba(26, 42, 51, 0.65);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.korpa-step02-summary-price-value {
font-weight: 700;
font-size: 14px;
color: var(--c-accent);
}
.korpa-step02-summary-note {
font-size: 12px;
line-height: 1.5;
color: rgba(26, 42, 51, 0.6);
margin: 0;
}
/* Mobile collapsible cart summary above the form */
.korpa-step02-mobilesummary {
display: none;
margin: 0 0 22px;
border: 1px solid var(--line-light-2);
border-radius: 10px;
background: var(--c-white);
}
.korpa-step02-mobilesummary > summary {
list-style: none;
cursor: pointer;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--c-dark);
font-size: 14px;
}
.korpa-step02-mobilesummary > summary::-webkit-details-marker { display: none; }
.korpa-step02-mobilesummary-count {
color: rgba(26, 42, 51, 0.55);
font-weight: 500;
}
.korpa-step02-mobilesummary-chev {
margin-left: auto;
transition: transform .2s var(--ease-out, ease);
color: var(--c-dark);
}
.korpa-step02-mobilesummary[open] .korpa-step02-mobilesummary-chev {
transform: rotate(180deg);
}
.korpa-step02-mobilesummary-body {
padding: 0 18px 16px;
border-top: 1px solid var(--line-light-2);
}
@media (max-width: 960px) {
.korpa-step02-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 0 64px;
}
.korpa-step02-summary {
display: none;
}
.korpa-step02-mobilesummary {
display: block;
}
}
/* =====================================================================
STEP 03 — Two-column grid + sticky action bar
===================================================================== */
.korpa-step03-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
width: 100%;
/* max-width + horizontal padding come from the parent .container;
top spacing comes from .korpa-body padding-top so all three steps
start at the same vertical offset. */
padding: 0 0 80px;
box-sizing: border-box;
}
.korpa-step03-heading {
grid-column: 1 / -1;
margin: 0 0 24px;
}
.korpa-step03-products,
.korpa-step03-client {
min-width: 0;
}
.korpa-step03-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
margin-top: 16px;
gap: 16px;
}
.korpa-step03-actions-hint {
margin: 0;
text-align: center;
font-size: 12.5px;
color: rgba(26, 42, 51, 0.55);
flex: 1;
}
@media (max-width: 960px) {
.korpa-step03-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 0 64px;
}
.korpa-step03-actions {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
}
/* Defeat .korpa-review's legacy max-width: 920px inside step 03 */
.korpa-step[data-step="03"] .korpa-review { max-width: none; }
/* =====================================================================
STEP 03 — Richer review cards with thumbnails
===================================================================== */
.korpa-review-block-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
}
.korpa-review-edit-link {
background: none;
border: none;
padding: 0;
font-size: 12px;
color: var(--c-accent);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
font-family: inherit;
}
.korpa-review-edit-link:hover {
color: var(--c-dark);
}
.korpa-review-cart {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.korpa-review-card {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) auto;
gap: 16px;
align-items: flex-start;
background: var(--c-white);
border: 1px solid var(--line-light-2);
border-radius: 10px;
padding: 14px;
}
.korpa-review-card-thumb {
width: 96px !important;
height: 72px !important;
max-width: 96px;
max-height: 72px;
border-radius: 8px;
overflow: hidden;
background: var(--c-light);
display: block;
flex-shrink: 0;
object-fit: cover;
}
.korpa-review-card-thumb img {
width: 96px !important;
height: 72px !important;
max-width: 96px;
max-height: 72px;
object-fit: cover;
display: block;
}
.korpa-review-card-thumb-empty {
display: block;
width: 100%;
height: 100%;
background: var(--c-light);
}
.korpa-review-card-body {
min-width: 0;
}
.korpa-review-card-head {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 6px;
align-items: center;
}
.korpa-review-card-cat {
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.6);
background: var(--c-light);
padding: 3px 8px;
border-radius: 999px;
}
.korpa-review-card-title {
font-family: var(--font-display, inherit);
font-size: clamp(15px, 1.25vw, 17px);
font-weight: 700;
color: var(--c-dark);
margin: 0 0 8px;
line-height: 1.25;
}
.korpa-review-card-title a {
color: inherit;
text-decoration: none;
}
.korpa-review-card-title a:hover {
color: var(--c-accent);
}
.korpa-review-card-specs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.korpa-review-card-specs li {
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
gap: 8px;
font-size: 12.5px;
line-height: 1.4;
}
.korpa-review-card-specs-label {
color: rgba(26, 42, 51, 0.55);
letter-spacing: 0.02em;
}
.korpa-review-card-specs-val {
color: var(--c-dark);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.korpa-review-card-totals {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
flex-shrink: 0;
min-width: 70px;
}
.korpa-review-card-qty {
font-weight: 700;
color: var(--c-dark);
font-size: 13.5px;
}
.korpa-review-card-area {
color: rgba(26, 42, 51, 0.6);
font-size: 12px;
}
/* Step 03 sticky action bar at bottom */
.korpa-step-actions--review {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
margin-top: 32px;
padding: 18px 0 0;
border-top: 1px solid var(--line-light-2);
}
.korpa-step-actions-hint {
margin: 0;
text-align: center;
font-size: 12.5px;
color: rgba(26, 42, 51, 0.55);
}
@media (max-width: 720px) {
.korpa-step02-summary-item {
grid-template-columns: 56px minmax(0, 1fr) auto;
}
.korpa-step02-summary-item-thumb {
width: 56px;
height: 42px;
}
.korpa-review-card {
grid-template-columns: 80px minmax(0, 1fr);
gap: 12px;
}
.korpa-review-card-thumb {
width: 80px;
height: 60px;
}
.korpa-review-card-totals {
grid-column: 1 / -1;
flex-direction: row;
justify-content: flex-end;
align-items: baseline;
gap: 12px;
padding-top: 6px;
border-top: 1px dashed var(--line-light-2);
}
.korpa-step-actions--review {
grid-template-columns: 1fr;
gap: 12px;
}
.korpa-step-actions-hint {
order: -1;
}
}
/* =====================================================================
Per-line kvadratura calculator — sits inside each cart row
===================================================================== */
.cart-item-kalkulator-wrap {
margin: 16px 0 8px;
}
.cart-item-kalkulator-eyebrow {
margin: 0 0 8px;
/* eyebrow visual style reuses .korpa-item-field-label, applied alongside */
}
.cart-item-kalkulator {
border: 1px solid var(--line-light-2);
border-radius: 8px;
background: var(--c-white);
}
.cart-item-kalkulator > summary {
list-style: none;
cursor: pointer;
padding: 12px 14px;
font-size: 13px;
color: var(--c-dark);
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
}
.cart-item-kalkulator > summary::-webkit-details-marker { display: none; }
.cart-item-kalkulator > summary::after {
content: "";
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: transform .2s var(--ease-out, ease);
}
.cart-item-kalkulator[open] > summary::after {
transform: rotate(-135deg) translateY(-1px);
}
.cart-item-kalkulator-body {
padding: 14px;
border-top: 1px solid var(--line-light-2);
display: grid;
grid-template-columns: repeat(3, 1fr) auto;
gap: 12px;
align-items: end;
}
.cart-item-kalkulator-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-item-kalkulator-field input {
padding: 8px 10px;
border: 1px solid var(--line-light-2);
border-radius: 6px;
font-size: 13px;
background: var(--c-white);
color: var(--c-dark);
font-family: inherit;
}
.cart-item-kalkulator-field input:focus {
outline: none;
border-color: var(--c-accent);
}
.kalk-compute,
.btn-secondary.kalk-compute {
padding: 10px 16px;
border: 1px solid var(--c-dark);
border-radius: 999px;
background: var(--c-dark);
color: var(--c-white);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background .18s var(--ease-out, ease), color .18s var(--ease-out, ease);
font-family: inherit;
}
.kalk-compute:hover,
.btn-secondary.kalk-compute:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
}
.cart-item-kalkulator-objarea {
margin: 10px 0 0;
font-size: 12.5px;
color: rgba(26, 42, 51, 0.65);
}
.cart-item-kalkulator-objarea[hidden] { display: none; }
@media (max-width: 720px) {
.cart-item-kalkulator-body {
grid-template-columns: 1fr 1fr;
}
.cart-item-kalkulator-body .kalk-compute {
grid-column: 1 / -1;
}
}
/* =====================================================================
NAVBAR ICONS — login / cart / lang / burger (shared .nav-icon base)
Derived from .cart-button so all four circular icons render identically.
The legacy .menu-toggle pill is overridden via .menu-toggle.nav-burger
to drop the "Menu" label slot and collapse to a 44×44 circle.
===================================================================== */
.nav-icon {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: transparent;
color: var(--c-white);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
padding: 0;
font-family: inherit;
transition: background 0.3s var(--ease-out),
border-color 0.3s var(--ease-out),
color 0.3s var(--ease-out),
transform 0.3s var(--ease-out);
}
.nav-icon:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
transform: translateY(-1px);
}
.nav-lang .lang-current {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
}
.nav-login-indicator {
position: absolute;
top: 1px;
right: 1px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--c-accent);
border: 2px solid rgba(18, 32, 41, 0.92);
}
.nav-login-indicator[hidden] { display: none; }
/* Collapse the legacy menu-toggle pill into the shared circular slot when
it carries .nav-burger. Resets padding / gap / font + width so the burger
icon sits centered in a 44px circle that matches the other icons. */
.menu-toggle.nav-burger {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
gap: 0;
}
.menu-toggle.nav-burger .menu-toggle-icon {
margin: 0;
}
/* Mini-cart anchor reuses .cart-button; .nav-cart is just an extra hook. */
/* =====================================================================
AUTH MODAL — login + register tabs (mock storage)
===================================================================== */
.bs-auth-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
overflow-y: auto;
}
.bs-auth-overlay[data-open="true"] { display: flex; }
.bs-auth-modal {
width: 100%;
max-width: 480px;
background: var(--c-light, #f5efe5);
color: var(--c-dark);
border-radius: 12px;
padding: 32px;
position: relative;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
font-family: inherit;
margin: auto;
}
.bs-auth-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(26, 42, 51, 0.55);
transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.bs-auth-close:hover {
color: var(--c-dark);
background: rgba(26, 42, 51, 0.08);
}
.bs-auth-tabs {
display: flex;
gap: 28px;
border-bottom: 1px solid rgba(26, 42, 51, 0.12);
margin: 4px 0 24px;
}
.bs-auth-tab {
background: transparent;
border: 0;
padding: 0 0 12px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: rgba(26, 42, 51, 0.55);
cursor: pointer;
position: relative;
letter-spacing: 0.01em;
}
.bs-auth-tab[aria-selected="true"] {
font-weight: 700;
color: var(--c-dark);
}
.bs-auth-tab[aria-selected="true"]::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--c-accent);
}
.bs-auth-form { display: flex; flex-direction: column; gap: 14px; }
.bs-auth-form[hidden] { display: none; }
.bs-auth-field { display: flex; flex-direction: column; gap: 6px; }
.bs-auth-field-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(26, 42, 51, 0.62);
}
.bs-auth-field input[type="text"],
.bs-auth-field input[type="email"],
.bs-auth-field input[type="password"] {
padding: 12px 14px;
border: 1px solid rgba(26, 42, 51, 0.18);
border-radius: 8px;
background: var(--c-white, #fff);
font-family: inherit;
font-size: 14px;
color: var(--c-dark);
transition: border-color .18s var(--ease-out);
}
.bs-auth-field input:focus {
outline: none;
border-color: var(--c-accent);
}
.bs-auth-field.has-error input {
border-color: #c0392b;
}
.bs-auth-field-error {
font-size: 12px;
color: #c0392b;
margin: 2px 0 0;
}
.bs-auth-field-error[hidden] { display: none; }
.bs-auth-terms {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: rgba(26, 42, 51, 0.75);
cursor: pointer;
line-height: 1.45;
}
.bs-auth-terms input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--c-accent);
flex-shrink: 0;
}
.bs-auth-submit {
margin-top: 8px;
padding: 14px 18px;
border-radius: 999px;
background: var(--c-dark);
color: var(--c-white);
font-weight: 600;
font-size: 14px;
border: 0;
cursor: pointer;
font-family: inherit;
transition: background .18s var(--ease-out), color .18s var(--ease-out);
width: 100%;
}
.bs-auth-submit:hover {
background: var(--c-accent);
color: var(--c-dark);
}
.bs-auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.bs-auth-swap {
margin: 16px 0 0;
text-align: center;
font-size: 13px;
color: rgba(26, 42, 51, 0.62);
}
.bs-auth-swap-btn {
background: transparent;
border: 0;
color: var(--c-dark);
font-weight: 600;
cursor: pointer;
font-family: inherit;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =====================================================================
AUTH DROPDOWN — anchored under .nav-login when logged in
===================================================================== */
/* Dropdown is a child of .header-actions (which is set position:relative
below), so it stays anchored to the navbar even on sticky scroll. The
right offset is set per-page in JS via --auth-dropdown-right-offset so
the dropdown's right edge lines up under .nav-login (not the navbar). */
.header-actions { position: relative; }
.bs-auth-dropdown {
position: absolute;
top: calc(100% + 8px);
right: var(--auth-dropdown-right-offset, 0px);
background: var(--c-dark);
color: var(--c-white);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 10px;
min-width: 220px;
z-index: 1900;
display: none;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
font-family: inherit;
}
.bs-auth-dropdown[data-open="true"] { display: block; }
.bs-auth-dropdown-greeting {
padding: 8px 10px 10px;
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin: 0 0 8px;
}
.bs-auth-dropdown-greeting strong {
color: var(--c-white);
font-weight: 600;
}
.bs-auth-dropdown a,
.bs-auth-dropdown button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px;
border: 0;
background: transparent;
text-align: left;
font-family: inherit;
font-size: 13.5px;
color: var(--c-white);
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background .18s var(--ease-out);
}
.bs-auth-dropdown a:hover,
.bs-auth-dropdown button:hover {
background: rgba(255, 255, 255, 0.06);
}
/* =====================================================================
TOAST — single-line bottom notification
===================================================================== */
.bs-toast {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
background: var(--c-dark);
color: var(--c-white);
padding: 14px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
z-index: 2100;
opacity: 0;
transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
pointer-events: none;
max-width: calc(100vw - 32px);
text-align: center;
}
.bs-toast[data-visible="true"] {
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
/* =====================================================================
Responsive — keep navbar tight at ≤768, modal full-width at ≤480
===================================================================== */
@media (max-width: 768px) {
.nav-icon { width: 38px; height: 38px; }
.menu-toggle.nav-burger { width: 38px; height: 38px; }
.nav-lang .lang-current { font-size: 12px; }
}
@media (max-width: 480px) {
.bs-auth-overlay {
padding: 16px;
align-items: flex-start;
}
.bs-auth-modal {
padding: 24px 18px;
margin-top: 48px;
}
}
/* =====================================================================
SUCCESS MODAL — confirmation dialog for register / logout
Separate from .bs-auth-overlay so it can layer over (z-index 2050) and
reuses the existing site palette / radii.
===================================================================== */
.bs-auth-success-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 2050;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
overflow-y: auto;
}
.bs-auth-success-overlay[data-open="true"] { display: flex; }
.bs-success-modal {
width: 100%;
max-width: 420px;
background: var(--c-light, #f5efe5);
color: var(--c-dark);
border-radius: 12px;
padding: 40px 32px;
text-align: center;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
font-family: inherit;
margin: auto;
}
.bs-success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
}
.bs-success-title {
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
color: var(--c-dark);
letter-spacing: -0.005em;
}
.bs-success-body {
margin: 0 0 24px;
font-size: 14px;
line-height: 1.55;
color: rgba(26, 42, 51, 0.7);
}
.bs-success-ok {
width: 100%;
padding: 14px 18px;
border: 0;
border-radius: 999px;
background: var(--c-dark);
color: var(--c-white, #fff);
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.bs-success-ok:hover {
background: var(--c-accent);
color: var(--c-dark);
}
/* Two-button variant used by showCartSuccessModal — primary + secondary side-by-side */
.bs-success-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: stretch;
margin-top: 4px;
}
.bs-success-actions .btn-pill {
flex: 1 1 0;
min-width: 150px;
justify-content: center;
}
@media (max-width: 480px) {
.bs-success-modal { padding: 32px 22px; }
.bs-success-actions { flex-direction: column; }
.bs-success-actions .btn-pill { width: 100%; }
}
/* =====================================================================
CATEGORY LISTING — LIGHT BODY THEME
Scoped to body.page-category (krovni-paneli / zidni-paneli /
srafovska-roba / ostala-roba). The hero stays dark with the new
per-category bg image; the product listing below switches to a
light cream surface with cards on white. No global selectors —
the IIFE-style scope keeps the legacy detail page and other pages untouched.
===================================================================== */
body.page-category .category-products.section-dark {
background: var(--c-light, #F4F1EB);
color: var(--c-dark, #1A2A33);
}
body.page-category .category-products-meta {
border-bottom-color: rgba(26, 42, 51, 0.10);
}
body.page-category .category-products-count {
color: rgba(26, 42, 51, 0.55);
}
body.page-category .category-products-empty p {
color: rgba(26, 42, 51, 0.62);
}
/* Cards become solid white with soft shadow + hairline border. */
body.page-category .product-card {
background: #fff;
border: 1px solid rgba(26, 42, 51, 0.08);
box-shadow: 0 2px 6px rgba(26, 42, 51, 0.04);
}
body.page-category .product-card:hover {
border-color: rgba(200, 162, 125, 0.55);
box-shadow: 0 18px 40px rgba(26, 42, 51, 0.10);
}
body.page-category .product-card-title {
color: var(--c-dark, #1A2A33);
}
body.page-category .product-card-desc {
color: rgba(26, 42, 51, 0.66);
}
/* Outline (+) add button gets a dark variant on white card. */
body.page-category .product-card-add {
border-color: rgba(26, 42, 51, 0.20);
color: var(--c-dark, #1A2A33);
}
body.page-category .product-card-add:hover {
border-color: var(--c-accent, #C8A27D);
color: var(--c-accent, #C8A27D);
}
/* Ghost CTA on white card — use the dark-ink ghost variant. */
body.page-category .product-card-details-btn.btn-pill--ghost-light {
color: var(--c-dark, #1A2A33);
border-color: rgba(26, 42, 51, 0.22);
background: transparent;
}
body.page-category .product-card-details-btn.btn-pill--ghost-light:hover {
color: var(--c-accent, #C8A27D);
border-color: var(--c-accent, #C8A27D);
}
/* Media stays dark gradient (looks great behind the product renders). */
/* Fill badges already legible on either theme — keep their existing palette. */
/* =====================================================================
PRODUCT HERO — per-product ambient bg layer
Mirrors .proizvodi-hero-bg pattern. Image source is set by JS from
CATEGORY_GALLERIES; overlay is darker than .proizvodi-hero-overlay
so the text + product render in the grid both read clearly.
===================================================================== */
.product-hero { position: relative; isolation: isolate; }
.product-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.product-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(0.9) contrast(1.04);
opacity: 0.85;
transform: scale(1.02);
will-change: transform, opacity;
}
.product-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(13, 24, 32, 0.55) 0%, rgba(13, 24, 32, 0.82) 100%),
linear-gradient(90deg, rgba(13, 24, 32, 0.78) 0%, rgba(13, 24, 32, 0.58) 50%, rgba(13, 24, 32, 0.40) 100%);
}
/* Render-on-white variant: srafovska + ostala use their own product image
as the hero bg. Since those images are renders on a light background,
we boost the overlay opacity so text stays legible. The image itself is
slightly desaturated + dimmed to push it behind the content layer. */
.product-hero-bg--render img {
opacity: 0.42;
filter: saturate(0.7) contrast(1.05) brightness(0.92);
}
.product-hero-bg--render .product-hero-overlay {
background:
linear-gradient(180deg, rgba(13, 24, 32, 0.72) 0%, rgba(13, 24, 32, 0.90) 100%),
linear-gradient(90deg, rgba(13, 24, 32, 0.88) 0%, rgba(13, 24, 32, 0.70) 60%, rgba(13, 24, 32, 0.50) 100%);
}
.product-hero .grid-lines,
.product-hero .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.product-hero-bg img { transform: none; opacity: 0.85; }
.product-hero-bg--render img { transform: none; opacity: 0.42; }
}
/* =====================================================================
NAV-LOGIN INITIALS — bronze avatar when logged in
Replaces the user icon SVG; .is-authed gives the button its own
filled background so the initials stay legible without the border ring.
===================================================================== */
.nav-login-initials {
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--c-dark);
line-height: 1;
text-transform: uppercase;
}
.nav-login.is-authed {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
}
.nav-login.is-authed:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-dark);
filter: brightness(0.92);
}
/* Submit button while the SHA-256 hash + storage write is in-flight.
The handler also sets [disabled] so clicks bail at the JS layer, but
the visual cue here makes the "wait" state legible to the user. */
.bs-auth-form button[type="submit"][data-loading="true"] {
opacity: 0.6;
cursor: wait;
pointer-events: none;
}
/* =====================================================================
PROIZVODI MEGA-MENU — hover dropdown + right flyout
Primary nav .nav-item--has-dropdown holds the Proizvodi link and
a primary panel. Two of the primary items (krovni/zidni) have a
nested flyout. JS adds .is-open on hover/click/keyboard.
===================================================================== */
.primary-nav .nav-item--has-dropdown { position: relative; }
/* Hide the orange "active page" dot unless the link is currently active. */
.primary-nav .nav-link:not(.is-active) > .nav-dot { display: none; }
/* Chevron on the parent link */
.nav-chevron {
margin-left: 6px;
transition: transform .2s var(--ease-out);
flex-shrink: 0;
color: currentColor;
}
.nav-item--has-dropdown .nav-link[aria-expanded="true"] .nav-chevron {
transform: rotate(180deg);
}
/* The dropdown panel itself (primary + flyout share most styles) */
.nav-dropdown {
position: absolute;
background: var(--c-light, #f4f1eb);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
padding: 8px 0;
min-width: 260px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility .15s;
z-index: 1500;
list-style: none;
}
.nav-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Primary panel anchored under the nav link */
.nav-dropdown--primary {
top: calc(100% + 8px);
left: 0;
}
/* Right flyout anchored to its parent .nav-dropdown-item */
.nav-dropdown--flyout {
top: -12px;
left: calc(100% + 4px);
min-width: 220px;
}
.nav-dropdown--flyout.flyout-left {
left: auto;
right: calc(100% + 4px);
}
/* List container — clean reset.
IMPORTANT: gap:0 explicitly resets the 36px gap inherited from
the descendant selector `.primary-nav ul` at line ~488. Without
this, a 36px void appears between every row. */
.nav-dropdown-list {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
min-width: 280px;
}
/* Row wrapper — no padding/margin of its own */
.nav-dropdown-item {
display: block;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
/* Row link — TASK 1 (final) spec. padding/font-size/line-height
carry !important to bulldoze any leftover scoped overrides
(e.g. `.nav-dropdown--primary .nav-dropdown-item > a` from
earlier iterations, or any `.primary-nav` cascade contamination).
→ row height ≈ 6 + 14*1.35 + 6 ≈ 31px. Hover bg reaches edges
because width:100% with zero horizontal margin. */
.nav-dropdown-item > a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 6px 18px !important;
margin: 0;
box-sizing: border-box;
white-space: nowrap;
font-size: 14px !important;
line-height: 1.35 !important;
color: var(--c-dark);
text-decoration: none;
transition: background .12s, color .12s;
}
.nav-dropdown-item > a:hover,
.nav-dropdown-item > a:focus,
.nav-dropdown-item:focus-within > a {
background: rgba(0, 0, 0, 0.05);
color: var(--c-accent);
outline: none;
}
/* Active page state */
.nav-dropdown-item.is-current > a {
font-weight: 600;
color: var(--c-accent);
}
/* Flyout mirror — the secondary flyout (.nav-dropdown--flyout) ships
with bare /- markup (no .nav-dropdown-list / .nav-dropdown-item
classes). Mirror TASK 3 rules onto the flyout's bare structure. */
.nav-dropdown--flyout > ul {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
min-width: 280px;
}
.nav-dropdown--flyout > ul > li {
display: block;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
.nav-dropdown--flyout > ul > li > a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 6px 18px;
margin: 0;
box-sizing: border-box;
white-space: nowrap;
font-size: 14px;
line-height: 1.35;
color: var(--c-dark);
text-decoration: none;
transition: background .12s, color .12s;
}
.nav-dropdown--flyout > ul > li > a:hover,
.nav-dropdown--flyout > ul > li > a:focus,
.nav-dropdown--flyout > ul > li:focus-within > a {
background: rgba(0, 0, 0, 0.05);
color: var(--c-accent);
outline: none;
}
.nav-dropdown--flyout > ul > li > a.is-current {
font-weight: 600;
color: var(--c-accent);
}
/* Flyout: "Sve {kategorija}" eyebrow link (first row, above divider).
font-size carries !important to override the 14px !important on
.nav-dropdown-item > a. */
.nav-dropdown-item--catlink > a,
.nav-dropdown--flyout > ul > li.nav-dropdown-item--catlink > a {
font-size: 11px !important;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.55);
}
.nav-dropdown-item--catlink > a:hover,
.nav-dropdown--flyout > ul > li.nav-dropdown-item--catlink > a:hover,
.nav-dropdown-item--catlink > a:focus,
.nav-dropdown--flyout > ul > li.nav-dropdown-item--catlink > a:focus,
.nav-dropdown-item--catlink:focus-within > a,
.nav-dropdown--flyout > ul > li.nav-dropdown-item--catlink:focus-within > a {
color: var(--c-accent);
}
.nav-dropdown-item--catlink > a.is-current,
.nav-dropdown--flyout > ul > li.nav-dropdown-item--catlink > a.is-current {
color: var(--c-accent);
}
/* Flyout: thin divider between "Sve {kat}" eyebrow and product list.
Higher specificity than the generic `.nav-dropdown--flyout > ul > li`
reset so the height + horizontal margin sticks. */
.nav-flyout-divider,
.nav-dropdown--flyout > ul > li.nav-flyout-divider {
height: 1px;
background: rgba(0, 0, 0, 0.08);
margin: 4px 16px;
padding: 0;
list-style: none;
}
/* Flyout arrow — HIDDEN by default. Only revealed on hover, keyboard
focus inside the item, or when the flyout is actually open. The chevron
next to the "Proizvodi" navbar link itself (.nav-chevron) is a separate
element and stays always visible — see rule above. */
.nav-flyout-arrow {
width: 14px;
height: 14px;
flex-shrink: 0;
margin-left: 12px;
opacity: 0;
transform: translateX(-4px);
transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.nav-dropdown-item[data-has-flyout]:hover > a .nav-flyout-arrow,
.nav-dropdown-item[data-has-flyout]:focus-within > a .nav-flyout-arrow,
.nav-dropdown-item[data-has-flyout].is-flyout-open > a .nav-flyout-arrow {
opacity: 1;
transform: translateX(0);
}
/* The header has a dark gradient bar near top — make dropdown panel always
readable by using a solid light background regardless of header state. */
.site-header[data-state="top"] .nav-dropdown {
color: var(--c-dark);
}
/* Mobile / touch — disable hover dropdowns below 1024px. Hamburger overlay
handles category navigation via the accordion injected by JS. */
@media (max-width: 1023px) {
.nav-dropdown,
.nav-chevron,
.nav-flyout-arrow {
display: none !important;
}
}
/* =====================================================================
MOBILE ACCORDION INSIDE menuOverlay
JS injects a .overlay-nav-sub list after the Proizvodi overlay link.
Animates max-height so it slides open without jank.
===================================================================== */
.overlay-nav-link[data-overlay-toggle] {
cursor: pointer;
user-select: none;
}
.overlay-nav-link[data-overlay-toggle] .overlay-nav-chev {
display: inline-block;
margin-left: 10px;
transition: transform .25s var(--ease-out);
}
.overlay-nav-link[data-overlay-toggle][aria-expanded="true"] .overlay-nav-chev {
transform: rotate(180deg);
}
.overlay-nav-sub {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
max-height: 0;
transition: max-height .3s var(--ease-out);
}
.overlay-nav-sub.is-expanded {
/* Tall enough to fit primary (4) + nested PUR/PIR/Kamena (3+3). */
max-height: 900px;
}
.overlay-nav-sub a,
.overlay-nav-sub button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: transparent;
border: 0;
padding: 14px 0 14px 22px;
color: var(--c-white, #fff);
text-decoration: none;
font-family: inherit;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
text-align: left;
}
.overlay-nav-sub a:hover,
.overlay-nav-sub button:hover {
color: var(--c-accent, #c8a27d);
}
.overlay-nav-sub .overlay-nav-sub {
/* Second-level (PUR/PIR/Kamena) — indent further */
padding-left: 22px;
}
.overlay-nav-sub .overlay-nav-sub a {
font-size: 16px;
font-weight: 400;
opacity: 0.85;
}
.overlay-nav-sub .overlay-nav-chev {
display: inline-block;
transition: transform .25s var(--ease-out);
}
.overlay-nav-sub button[aria-expanded="true"] .overlay-nav-chev {
transform: rotate(180deg);
}
/* =====================================================================
MENU OVERLAY ACCORDION — static markup variant
Replaces the dynamic .overlay-nav-sub injection from Prompt 8. The
Proizvodi item in #menuOverlay is now a real
- ...