/* ======================================== STILETTO FURNITURE — theme.css v5 "Editorial Dark" layer (trionn-inspired) Loaded AFTER site.css, only on pages with . All selectors scoped .v5 (or html-state classes set by motion.js). Colors only via var(--...) per repo rule. ======================================== */ /* ============ 1. Band system ============ */ .v5 .band { --band-bg: var(--canvas-100); --band-fg: var(--ink-900); --band-fg-muted: var(--ink-500); --band-accent: var(--earth-500); --band-line: var(--ink-border); background: var(--band-bg); color: var(--band-fg); } .v5 .band--dark { --band-bg: var(--night-950); --band-fg: var(--paper-100); --band-fg-muted: var(--paper-300); --band-accent: var(--earth-300); --band-line: var(--line-on-dark); } .v5 .band h2 { color: var(--band-fg); } .v5 .band a { color: inherit; } .v5 .v5-section { padding: var(--space-10) 0; } /* ============ 2. Editorial type ============ */ .v5 .mega-title { font-family: var(--font-display); font-size: var(--text-mega); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; color: var(--band-fg); margin: 0; max-width: none; /* site.css caps h1/h2 width in hero/dark bands — mega titles manage their own */ } .v5 .mega-title .accent-serif, .v5 .statement .accent-serif { font-family: var(--font-body-serif); font-style: italic; font-weight: 300; color: var(--band-accent); } .v5 .statement { font-family: var(--font-display); font-size: var(--text-statement); font-weight: 500; line-height: 1.22; letter-spacing: -0.01em; color: var(--band-fg); max-width: 21em; } .v5 .mono-label { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-fg-muted); display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-6); } .v5 .mono-label::before { content: '\2726'; /* ✦ */ color: var(--band-accent); font-size: 0.9em; } /* ============ 3. Header skin ============ */ .v5 .header-cta .btn, .v5 .btn--pill { border-radius: 999px; /* documented v5 exception to near-sharp radius rule */ } .v5 .primary-nav a { overflow: hidden; } .v5 .link-roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; } .v5 .link-roll__inner { display: block; transition: transform 0.55s var(--ease-expo); } .v5 .link-roll__inner--dup { position: absolute; top: 100%; left: 0; } .v5 a:hover .link-roll__inner, .v5 .btn:hover .link-roll__inner { transform: translateY(-100%); } /* ============ 4. Preloader + page transition ============ */ .v5 .v5-preloader { position: fixed; inset: 0; z-index: 9999; background: var(--night-950); display: none; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-4); } html.is-loading .v5 .v5-preloader { display: flex; } /* pure-CSS failsafe: if motion.js never runs, preloader fades itself out */ html.is-loading .v5 .v5-preloader { animation: v5-preloader-failsafe 0.5s var(--ease-out) 3.2s forwards; } @keyframes v5-preloader-failsafe { to { opacity: 0; visibility: hidden; } } .v5 .v5-preloader__logo img { height: 64px; width: auto; } .v5 .v5-preloader__word { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper-300); display: inline-flex; overflow: hidden; } .v5 .v5-preloader__word span { display: inline-block; } .v5 .page-transition { position: fixed; inset: 0; z-index: 9998; background: var(--night-950); transform: scaleY(0); transform-origin: bottom center; pointer-events: none; } /* ============ 5. Motion-gated initial states ============ */ /* Content is hidden ONLY when motion.js has actually booted (html.has-motion). No JS / blocked CDN / reduced motion -> everything stays visible. */ html.has-motion .v5 [data-split] { visibility: hidden; } html.has-motion .v5 [data-split].split-ready { visibility: visible; } html.has-motion .v5 [data-reveal] { opacity: 0; transform: translateY(28px); } /* ============ 6. Marquee ============ */ .v5 .v5-marquee { overflow: hidden; padding: var(--space-6) 0; border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); white-space: nowrap; } .v5 .v5-marquee__track { display: inline-flex; will-change: transform; backface-visibility: hidden; animation: v5-marquee-loop 70s linear infinite; } /* motion.js drives marquees with GSAP (smooth velocity modulation) — CSS keyframes stay only as no-JS fallback */ html.has-motion .v5 .v5-marquee__track { animation: none; } .v5 .v5-marquee__group { display: inline-flex; align-items: center; gap: var(--space-7); padding-right: var(--space-7); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: 0.02em; color: var(--band-fg-muted); text-transform: uppercase; } .v5 .v5-marquee__group .sep { color: var(--band-accent); font-size: 0.7em; } @keyframes v5-marquee-loop { to { transform: translateX(-50%); } } .v5 .v5-marquee--slow .v5-marquee__track { animation-duration: 110s; } /* ============ 7. Hero ============ */ .v5 .v5-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; padding: 140px 0 100px; } .v5 .v5-hero .wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; } .v5 .v5-hero__copy { max-width: 640px; } .v5 .v5-hero .mega-title { font-size: clamp(2.75rem, 5.2vw, 5.25rem); } .v5 .v5-hero__copy .mono-label { margin-bottom: var(--space-5); } .v5 .v5-hero__copy p { font-family: var(--font-body-serif); font-size: var(--text-body-serif); line-height: 1.65; color: var(--band-fg-muted); max-width: 34em; margin: var(--space-6) 0 var(--space-7); } .v5 .v5-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; } .v5 .v5-hero__visual::before { /* soft warm halo behind the cutout so it reads on near-black */ content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(178, 95, 50, 0.22), transparent 72%); } .v5 .v5-hero__visual img { position: relative; width: min(100%, 520px); height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45)); } .v5 .v5-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; } .v5 .v5-hero__actions .btn { border-radius: 999px; padding: 15px 34px; } .v5 .v5-hero .scroll-cue { color: var(--paper-500); } /* mono meta row pinned at hero bottom */ .v5 .v5-hero__meta { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2; } .v5 .v5-hero__meta .wrap { display: flex; justify-content: space-between; gap: var(--space-5); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-500); } .v5 .v5-hero__meta span { white-space: nowrap; } /* ============ 8. Statement band ============ */ .v5 .v5-statement .statement { max-width: 18em; } .v5 .v5-statement .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-7); align-items: start; } /* ============ 9. Key facts / counters ============ */ .v5 .v5-facts { padding-top: 0; } .v5 .v5-facts .facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--band-line); } .v5 .v5-facts .fact { padding: var(--space-7) var(--space-6) var(--space-7) 0; border-right: 1px solid var(--band-line); } .v5 .v5-facts .fact:not(:first-child) { padding-left: var(--space-6); } .v5 .v5-facts .fact:last-child { border-right: none; } .v5 .counter-value { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; line-height: 1; color: var(--band-fg); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; } .v5 .counter-value .suffix { color: var(--band-accent); } .v5 .fact .fact-caption { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--band-fg-muted); line-height: 1.6; } /* ============ 10. Showcase — pinned horizontal product story ============ */ .v5 .section-head { margin-bottom: var(--space-7); } .v5 .section-head h2 { font-family: var(--font-display); font-size: var(--text-statement); font-weight: 500; letter-spacing: -0.01em; } .v5 .v5-showcase { padding-bottom: var(--space-9); } .v5 .v5-showcase .showcase-head { padding-top: var(--space-10); } .v5 .showcase-pin { overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; } .v5 .showcase-track { display: flex; gap: var(--space-6); padding: var(--space-7) 40px; width: max-content; will-change: transform; } .v5 .showcase-card { display: block; text-decoration: none; width: auto; flex: none; } /* card height follows the viewer's screen — near-fullscreen on a 32" monitor, proportionally smaller on a laptop; width derives from the 4:3 aspect */ .v5 .showcase-card .card-frame { position: relative; height: min(68vh, 900px); min-height: 360px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--canvas-200); border-radius: var(--radius-sm); } .v5 .showcase-card .card-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-expo); will-change: transform; } .v5 .showcase-card:hover .card-frame img { transform: scale(1.04); } .v5 .showcase-card .card-info { display: flex; align-items: baseline; gap: var(--space-4); margin-top: var(--space-4); } .v5 .showcase-card .card-num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; color: var(--band-accent); } .v5 .showcase-card .card-name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--band-fg); } .v5 .showcase-card .card-meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-fg-muted); white-space: nowrap; } .v5 .showcase-cta { margin-top: var(--space-8); display: flex; justify-content: center; } .v5 .showcase-cta .btn { border-radius: 999px; } /* reference accordion: taller frames, milder expansion than site.css flex:4 */ .v5 .projects-accordion { height: min(64vh, 640px); } .v5 .projects-accordion .panel:hover, .v5 .projects-accordion .panel.expanded { flex: 2.2; } /* ============ 11. Category index rows (radionica) ============ */ .v5 .index-rows { border-top: 1px solid var(--band-line); display: flex; flex-direction: column; } .v5 .index-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 32px; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-3); border-bottom: 1px solid var(--band-line); text-decoration: none; position: relative; overflow: hidden; transition: color 0.45s var(--ease-expo); } .v5 .index-row::before { content: ''; position: absolute; inset: 0; background: var(--charcoal-900); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.45s var(--ease-expo); z-index: 0; } .v5 .index-row:hover::before { transform: scaleY(1); } .v5 .index-row > * { position: relative; z-index: 1; } .v5 .index-row .row-num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; color: var(--band-fg-muted); transition: color 0.45s var(--ease-expo); } .v5 .index-row .row-name { font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 500; color: var(--band-fg); transition: color 0.45s var(--ease-expo); } .v5 .index-row .row-meta { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--band-fg-muted); transition: color 0.45s var(--ease-expo); } .v5 .index-row .row-arrow { font-size: 1.25rem; color: var(--band-accent); transform: translateX(-6px); opacity: 0; transition: transform 0.45s var(--ease-expo), opacity 0.45s var(--ease-expo); } .v5 .index-row:hover .row-num, .v5 .index-row:hover .row-meta { color: var(--walnut-300); } .v5 .index-row:hover .row-name { color: var(--canvas-50); } .v5 .index-row:hover .row-arrow { transform: translateX(0); opacity: 1; } /* ============ 12. Reference band ============ */ .v5 #reference { padding: var(--space-10) 0; } .v5 #reference h2 { font-family: var(--font-display); font-size: var(--text-statement); font-weight: 500; max-width: 24em; margin-bottom: var(--space-8); } .v5 #reference .band-cta { margin-top: var(--space-7); } .v5 #reference .btn-ghost { border-radius: 999px; } /* ============ 13. Klijenti — logo marquee ============ */ .v5 .v5-logos { padding: var(--space-8) 0; border-top: 1px solid var(--band-line); } .v5 .v5-logos .band-label { text-align: center; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-fg-muted); margin-bottom: var(--space-6); } .v5 .v5-logos .v5-marquee { border: none; padding: 0; } .v5 .v5-logos .v5-marquee__group { gap: var(--space-8); padding-right: var(--space-8); } .v5 .v5-logos img { height: 48px; width: auto; /* static filter, no transition — filter transitions on a moving marquee force constant repaints (the lag the user reported) */ filter: grayscale(1) opacity(0.6); } /* ============ 14. Footer CTA mega block ============ */ .v5 .footer-cta { padding: var(--space-10) 0 var(--space-8); position: relative; overflow: hidden; } .v5 .footer-cta .mega-title { margin: var(--space-5) 0 var(--space-8); } .v5 .footer-cta__actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-9); } .v5 .footer-cta__actions .btn { border-radius: 999px; padding: 22px 52px; font-size: 15px; } .v5 .footer-cta__contact { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; } .v5 .footer-cta__contact a { color: var(--band-fg-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .v5 .footer-cta__contact a:hover { color: var(--band-accent); } .v5 .footer-cta .v5-marquee { border-bottom: none; margin-top: var(--space-6); padding-bottom: 0; } .v5 .footer-cta .v5-marquee__group { font-size: clamp(3rem, 8vw, 7rem); color: var(--night-800); -webkit-text-stroke: 1px var(--paper-500); color: transparent; } .v5 .footer-cta .v5-marquee__group .sep { color: var(--band-accent); -webkit-text-stroke: 0; } /* footer proper sits flush under the dark CTA */ .v5 footer.site-footer { border-top: 1px solid var(--line-on-dark); } /* ============ 15. Custom cursor ============ */ .v5 .v5-cursor-dot, .v5 .v5-cursor-ring { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; border-radius: 50%; opacity: 0; mix-blend-mode: difference; } html.has-cursor .v5 .v5-cursor-dot, html.has-cursor .v5 .v5-cursor-ring { opacity: 1; } .v5 .v5-cursor-dot { width: 8px; height: 8px; background: var(--canvas-50); margin: -4px 0 0 -4px; } .v5 .v5-cursor-ring { width: 36px; height: 36px; border: 1px solid var(--canvas-50); margin: -18px 0 0 -18px; transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out); } html.has-cursor .v5 .v5-cursor-ring.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; } /* ============ 16. Misc v5 overrides ============ */ .v5 .overline { font-family: var(--font-mono); } /* progress rail: larger, dots joined by a hairline, labels always readable */ .v5 .progress-rail { gap: 22px; } .v5 .progress-rail::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--ink-border); } .v5 .progress-rail.rail-on-dark::before { background: var(--line-on-dark); } .v5 .progress-rail a { position: relative; } .v5 .progress-rail .rail-dot { width: 11px; height: 11px; border: 2px solid var(--canvas-100); box-sizing: border-box; } .v5 .progress-rail.rail-on-dark .rail-dot { border-color: var(--night-950); } .v5 .progress-rail .rail-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; opacity: 0.55; transform: none; } .v5 .progress-rail a.active .rail-label { opacity: 1; } /* blueprint backdrop for the category index band — faint technical grid */ .v5 #radionica { background-image: linear-gradient(color-mix(in srgb, var(--ink-900) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink-900) 5%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--walnut-700) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--walnut-700) 10%, transparent) 1px, transparent 1px); background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px; } .v5 #radionica .index-rows { background: color-mix(in srgb, var(--canvas-100) 55%, transparent); } /* ============ 16b. Category page hero (trionn services style) ============ */ .v5 .cat-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-fg-muted); text-decoration: none; margin-bottom: var(--space-5); transition: color var(--duration-fast) var(--ease-out); } .v5 .cat-back:hover { color: var(--band-accent); } .v5 .cat-hero { min-height: 74vh; display: flex; align-items: center; padding: 150px 0 var(--space-8); } .v5 .cat-hero .wrap { width: 100%; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; } .v5 .cat-hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; color: var(--band-fg); max-width: none; margin: 0 0 var(--space-5); } .v5 .cat-hero .lede { font-family: var(--font-body-serif); font-size: var(--text-body-serif); line-height: 1.65; color: var(--band-fg-muted); max-width: 30em; } .v5 .cat-hero__visual { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--night-900); } .v5 .cat-hero__visual img { width: 100%; height: 100%; object-fit: cover; } .v5 .cat-section { padding: var(--space-9) 0; } .v5 .cat-section .seo-copy { max-width: 62ch; } .v5 .cat-section .seo-copy h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; margin-bottom: var(--space-4); } .v5 .cat-gallery { margin-top: var(--space-7); } /* Lenis requirements */ 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; } /* ============ 16c. v5.1 Buttons & CTA band (Japandi) ============ */ /* Every CTA on v5 pages uses the earth accent — no more dark-on-dark. */ .v5 .btn { font-size: 14px; padding: 16px 36px; border-radius: 999px; letter-spacing: 0.02em; } .v5 .btn-primary, .v5 .btn-charcoal { background: var(--earth-500); color: var(--canvas-50); } .v5 .btn-primary:hover, .v5 .btn-charcoal:hover { background: var(--earth-600); transform: translateY(-1px); } .v5 .btn-ghost, .v5 .btn-outline { background: transparent; color: inherit; border: 1.5px solid currentColor; } .v5 .btn-ghost:hover, .v5 .btn-outline:hover { border-color: var(--band-accent, var(--earth-500)); color: var(--band-accent, var(--earth-500)); } .v5 .btn .arr { display: inline-block; margin-left: 8px; transition: transform 0.4s var(--ease-expo); } .v5 .btn:hover .arr { transform: translateX(5px); } /* cta-band: walnut-orange block -> dark Japandi statement band */ .v5 .cta-band { background: var(--night-950); color: var(--paper-100); padding: var(--space-9) 0; } .v5 .cta-band .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); } .v5 .cta-band h2 { font-family: var(--font-display); font-size: var(--text-statement); font-weight: 500; line-height: 1.2; max-width: 18em; color: var(--paper-100); } /* ============ 16d. Header nav dropdown (JS-built) ============ */ .v5 .nav-drop-holder { position: relative; } .v5 .nav-drop { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); min-width: 260px; background: var(--canvas-50); border: 1px solid var(--canvas-300); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s; z-index: 200; } .v5 .nav-drop.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .v5 .nav-drop a { display: flex; align-items: baseline; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-900); font-size: 14px; font-weight: 500; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out); } .v5 .nav-drop a:hover { background: var(--canvas-200); color: var(--earth-600); } .v5 .nav-drop a .num { font-family: var(--font-mono); font-size: var(--text-label); color: var(--earth-500); } .v5 .nav-drop a.all { margin-top: 6px; border-top: 1px solid var(--canvas-300); border-radius: 0; color: var(--earth-600); font-weight: 700; } /* keep white-over-hero nav readable when dropdown opens on index */ body[data-page="index"].v5 .site-header:not(.scrolled) .nav-drop a { color: var(--ink-900); } .v5 .mobile-nav .m-sub { padding-left: 22px; font-size: 14px; opacity: 0.85; } /* ============ 16e. Products journey (trionn /services) ============ */ .v5 .journey-beat { position: relative; height: 100vh; height: 100dvh; overflow: hidden; } .v5 .journey-beat__img { position: absolute; inset: 0; } .v5 .journey-beat__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .v5 .journey-beat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 50, 43, 0.72) 0%, rgba(58, 50, 43, 0.12) 45%, transparent 70%); pointer-events: none; } .v5 .journey-beat__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--space-5); padding: var(--space-7) 48px; text-decoration: none; color: var(--paper-100); } .v5 .journey-beat__caption .beat-num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; color: var(--earth-300); } .v5 .journey-beat__caption .beat-name { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.25rem); font-weight: 500; line-height: 1; } .v5 .journey-beat__caption .beat-meta { grid-column: 1 / 3; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-300); } .v5 .journey-beat__caption .beat-link { grid-row: 1; grid-column: 3; font-family: var(--font-ui); font-size: 14px; font-weight: 500; border: 1.5px solid currentColor; border-radius: 999px; padding: 12px 28px; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out); } .v5 .journey-beat__caption:hover .beat-link { background: var(--earth-500); border-color: var(--earth-500); color: var(--canvas-50); } .v5 .journey-beat__caption .beat-link .arr { display: inline-block; transition: transform 0.4s var(--ease-expo); } .v5 .journey-beat__caption:hover .beat-link .arr { transform: translateX(5px); } /* ============ 16f. PDP "Hiroshima" layout ============ */ .v5 .pdp-hiro { display: block; /* site.css .pdp is a 3-col grid — neutralize */ min-height: 100vh; padding: 130px 0 var(--space-8); background: radial-gradient(ellipse 70% 38% at 32% 78%, rgba(58, 50, 43, 0.08), transparent 70%), var(--canvas-100); } .v5 .pdp-hiro .pdp-gallery { padding: 0; background: none; border-right: none; } .v5 .pdp-hiro .gallery-main { aspect-ratio: auto; background: none; overflow: visible; border-radius: 0; } .v5 .pdp-hiro .gallery-main img { height: auto; } .v5 .pdp-hiro .wrap { position: relative; /* anchor __pagination */ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; } .v5 .pdp-hiro__stage { position: relative; } .v5 .pdp-hiro__main { position: relative; display: block; width: 100%; border: none; background: none; padding: 0; cursor: zoom-in; } .v5 .pdp-hiro__main img { width: 100%; max-width: 100%; max-height: 66vh; object-fit: contain; filter: drop-shadow(0 34px 44px rgba(58, 50, 43, 0.28)); transition: opacity 0.25s var(--ease-out); } .v5 .pdp-hiro__thumbs { display: flex; gap: 10px; margin-top: var(--space-5); justify-content: center; } .v5 .pdp-hiro__thumbs button { width: 72px; height: 58px; border: 1px solid var(--canvas-300); border-radius: var(--radius-sm); background: var(--canvas-50); padding: 4px; cursor: pointer; transition: border-color 0.2s var(--ease-out); } .v5 .pdp-hiro__thumbs button img { width: 100%; height: 100%; object-fit: contain; } .v5 .pdp-hiro__thumbs button.active, .v5 .pdp-hiro__thumbs button:hover { border-color: var(--earth-500); } .v5 .pdp-hiro__pagination { position: absolute; top: 0; right: 0; font-family: var(--font-mono); font-size: 0.9375rem; color: var(--ink-500); display: flex; align-items: center; gap: var(--space-4); } .v5 .pdp-hiro__pagination .current { color: var(--ink-900); font-size: 1.375rem; } .v5 .pdp-hiro__pagination a { text-decoration: none; color: var(--ink-500); font-size: 1.1rem; transition: color 0.2s var(--ease-out); } .v5 .pdp-hiro__pagination a:hover { color: var(--earth-600); } .v5 .pdp-hiro__info .pdp-back { margin-bottom: 6px; } .v5 .pdp-hiro__info .overline { margin-bottom: var(--space-5); } .v5 .pdp-hiro__name { font-family: var(--font-display); font-size: clamp(2.25rem, 3.6vw, 3.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 var(--space-5); max-width: none; } .v5 .pdp-hiro__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-5); } .v5 .pdp-hiro__meta .m-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 3px; } .v5 .pdp-hiro__meta .m-value { font-size: 0.9375rem; color: var(--ink-900); } .v5 .pdp-hiro__desc { font-family: var(--font-body-serif); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-700); margin-bottom: var(--space-5); } .v5 .pdp-hiro__dims { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.9; color: var(--ink-700); border-top: 1px solid var(--canvas-300); border-bottom: 1px solid var(--canvas-300); padding: var(--space-4) 0; margin-bottom: var(--space-5); } .v5 .pdp-hiro__dims strong { color: var(--ink-900); font-weight: 500; } .v5 .pdp-hiro__variants { margin-bottom: var(--space-6); } .v5 .pdp-hiro__variants .v-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 10px; } .v5 .pdp-hiro__cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } /* hotspot dots on the stage (reuses site.js dot-tag toggle) */ .v5 .pdp-hiro .dot-tag { position: absolute; z-index: 3; } .v5 .pdp-hiro .dot-tag button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ink-400); background: rgba(247, 243, 236, 0.85); cursor: pointer; position: relative; } .v5 .pdp-hiro .dot-tag button::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--earth-500); } .v5 .pdp-hiro .dot-tag .tag-label { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-700); background: rgba(247, 243, 236, 0.9); padding: 5px 10px; border-radius: var(--radius-sm); opacity: 0; transition: opacity 0.25s var(--ease-out); pointer-events: none; } .v5 .pdp-hiro .dot-tag:hover .tag-label, .v5 .pdp-hiro .dot-tag.active .tag-label { opacity: 1; } /* ============ 17. Responsive ============ */ @media (max-width: 1100px) { .v5 .v5-hero .wrap { grid-template-columns: 1fr; gap: var(--space-6); } .v5 .v5-hero__visual { order: -1; min-height: 220px; } .v5 .v5-hero__visual img { width: min(70%, 380px); } .v5 .v5-facts .facts-grid { grid-template-columns: repeat(2, 1fr); } .v5 .v5-facts .fact:nth-child(2) { border-right: none; } .v5 .v5-facts .fact:nth-child(n+3) { border-top: 1px solid var(--band-line); } } @media (max-width: 900px) { .v5 .v5-statement .wrap { grid-template-columns: 1fr; } .v5 .v5-hero { padding: 120px 0 90px; } .v5 .v5-hero__meta { display: none; } /* showcase: no pin on mobile — native horizontal swipe with snap */ .v5 .showcase-pin { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; min-height: 0; display: block; } .v5 .showcase-track { padding: var(--space-5) 24px; } .v5 .showcase-card { width: 78vw; scroll-snap-align: center; } .v5 .showcase-card .card-frame { height: auto; min-height: 0; } .v5 .cat-hero { min-height: 0; padding: 120px 0 var(--space-7); } .v5 .cat-hero .wrap { grid-template-columns: 1fr; gap: var(--space-6); } .v5 .journey-beat { height: 72vh; } .v5 .journey-beat__caption { padding: var(--space-6) 24px; grid-template-columns: auto 1fr; } .v5 .journey-beat__caption .beat-link { grid-row: auto; grid-column: 1 / 3; justify-self: start; } .v5 .pdp-hiro { padding-top: 110px; overflow-x: clip; } .v5 .pdp-hiro .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .v5 .pdp-hiro__pagination { position: static; margin-bottom: var(--space-4); } .v5 .pdp-hiro__thumbs { flex-wrap: wrap; } .v5 .pdp-hiro .dot-tag .tag-label { white-space: normal; max-width: 38vw; } } @media (max-width: 768px) { .v5 .index-row { grid-template-columns: 44px minmax(0, 1fr) 24px; } .v5 .index-row .row-meta { display: none; } .v5 .v5-section { padding: var(--space-9) 0; } } @media (max-width: 560px) { .v5 .v5-facts .facts-grid { grid-template-columns: 1fr; } .v5 .v5-facts .fact { border-right: none; padding-left: 0; } .v5 .v5-facts .fact:not(:first-child) { padding-left: 0; border-top: 1px solid var(--band-line); } .v5 .footer-cta__actions .btn { width: 100%; justify-content: center; } } /* ============ 18. Reduced motion ============ */ @media (prefers-reduced-motion: reduce) { html.has-motion .v5 [data-split], html.has-motion .v5 [data-reveal] { visibility: visible; opacity: 1; transform: none; } .v5 .v5-marquee__track { animation: none; } .v5 .v5-cursor-dot, .v5 .v5-cursor-ring { display: none; } .v5 .v5-preloader { display: none !important; } .v5 .showcase-card .card-frame img, .v5 .showcase-grid .g-frame img { transition: none; } /* no pin under reduced motion — plain horizontal scroll */ .v5 .showcase-pin { overflow-x: auto; } } /* Product cards with descriptions (klub-stolovi, ploce-za-stolove, stolovi) */ .v5 .chair-card .product-desc { font-family: var(--font-body-serif); font-size: 0.9rem; line-height: 1.6; color: var(--ink-500); max-width: 36em; margin: 10px auto 0; text-align: center; }