/* DesignJK — j/J v štýle znaku (hranatý ohnutý spodok); použije sa len pre U+004A a U+006A, zvyšok textu ostáva vo Fraunces */ @font-face{font-family:"DesignJK Serif J";font-style:normal;font-weight:300 500;font-display:swap;unicode-range:U+004A,U+006A;src:url(data:font/woff2;base64,d09GMgABAAAAAAKsAAoAAAAABLAAAAJgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAARAqCJIITATYCJAMQCwoABCAFgncHKhvhAyA+DdBj2E+pgoKQcXIiHIRKeuzDZaRt5bdU+koZuN/rJfkIyStQCkDkACXYGgWKQJExrYZtejzwf7i/jemBdAJNF0g0tk7qRBRIcb4G1Z+6jXrgkJtnmMYQwjMpBUCPPeDCvVlzXJGnw9zqnCUQHWGr9a0iywhK4ObJDS+XmLfGU6dq3nKxcHgRxjS2Z8fCWNcCzNW3cHVPsQK13Ku1q0biIbWFnV1F4XWPmzVY5E9kIUHoBMj+KgDSWIon0BdoLwAAwB6JAiQAoAAG4BgC4FRiADo6FCCVGQuhw4KhYCACUfldB2CAccCiEuAkRfIytIEqOTg9PTzcA0v0isIbOBfCmF2dKyDelUDWc4HBLi4UyKXK3V0JU4IKJYDzEO4Ku4maQKMxOTk48F6qfHz0Li7NdauimDiHaAghVly90cAMqSdc4Vnya7ZKFD2uDd/rd4rcpn5Xe8jI8ev74jPN7U9//ns4Ri+XN+k7Qx/d55bLzpbUHitJfO905EgfqDb7i6RBxwv2J3jmCj/t3Nx2KTfwYcbe//dVvRUAAAIgMJNcvduaf+mY9gPg62s2hJ/Y2IuIoQyF/UqDfhJgtQkIWaaK/IU0gJxJWPSKBZU8J5MphILJqasSYYMuTmnZcMbJJa6i4WpGYbc1FIkYEteDkMqBUxbjOBNkNa4CrqY4K2pEOD9JUmXlv3kgGh2SZV/kkjVC9MvSrwnpPT4hNiqGYEWavYQCg+aNGjalTDmpfhDMoUPkX+oMGrZoQi8DJV1QJl2cGHGSNCl4KpievhQrSox5r8ip+qDEUK18tlIkAAAA) format("woff2")} .serif-italic{font-family:"Fraunces","Times New Roman",serif} /* ============================================================================ DESIGN JK — DESIGN SYSTEM Bespoke Interior Manufacturer · Architectural Joinery ---------------------------------------------------------------------------- A single, disciplined system. Earthy, timeless, quiet. Palette: Charcoal · Warm White · Sand · Natural Oak · Dark Walnut · Concrete Type: Fraunces (editorial display) · Instrument Sans (grotesque UI) Principle: Every value is a decision. Nothing is decorative by accident. ========================================================================== */ /* -------------------------------------------------------------------------- */ /* 1 · DESIGN TOKENS */ /* -------------------------------------------------------------------------- */ :root { /* — Colour ————————————————————————————————————————————————— */ /* Paleta značky DesignJK — atrament / kosť / dubová jantárová / oliva */ --ink: #1a1a18; /* graphite — primary text, dark sections */ --ink-2: #232320; /* raised dark surface */ --charcoal: #2c2c2a; /* charcoal panels */ --paper: #f4f0e7; /* cool white — primary background */ --paper-2: #eae3d5; /* deeper paper — alternating sections */ --sand: #dfd6c4; /* cool light grey panel (was sand) */ --sand-2: #cfc3ac; /* deeper cool grey */ --oak: #c1852f; /* deep sage green — the single accent */ --oak-soft: #d9a251; --walnut: #4a5138; /* deep forest green — CTA sections */ --walnut-2: #3b4130; --concrete: #9c968a; /* concrete grey — muted UI */ --text: #1a1a18; --text-soft: #57534a; /* secondary copy on paper */ --text-faint: #857f73; /* tertiary / captions */ --on-dark: #efe7d9; /* primary text on dark */ --on-dark-soft: #ada697; /* secondary on dark */ --line: rgba(26, 26, 24, 0.16); --line-soft: rgba(26, 26, 24, 0.09); --line-dark: rgba(239, 231, 217, 0.16); /* — Type ——————————————————————————————————————————————————— */ --font-display: "DesignJK Serif J", "Fraunces", "Times New Roman", serif; --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-hero: clamp(2.9rem, 8.5vw, 8.25rem); --fs-display: clamp(2.3rem, 6vw, 4.75rem); --fs-h2: clamp(1.9rem, 4.2vw, 3.35rem); --fs-h3: clamp(1.35rem, 2.4vw, 1.95rem); --fs-h4: clamp(1.15rem, 1.6vw, 1.4rem); --fs-lead: clamp(1.12rem, 1.55vw, 1.5rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-eyebrow: 0.75rem; --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.6; --tr-eyebrow: 0.18em; --tr-tight: -0.02em; --tr-tighter: -0.035em; /* — Spacing ————————————————————————————————————————————————— */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; --sp-section: clamp(3rem, 5.2vw, 6rem); /* — Layout ————————————————————————————————————————————————— */ --container: 1360px; --container-narrow: 940px; --gutter: clamp(1.25rem, 5vw, 5rem); --radius: 2px; /* almost none — architectural, not soft */ --radius-lg: 4px; /* — Motion ————————————————————————————————————————————————— */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.7s; --dur-fast: 0.35s; --z-nav: 100; --z-cursor: 9999; --z-overlay: 200; } /* -------------------------------------------------------------------------- */ /* 2 · RESET & BASE */ /* -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--oak); color: var(--paper); } :focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; } .skip-link { position: absolute; left: 1rem; top: -100px; background: var(--ink); color: var(--on-dark); padding: 0.75rem 1.25rem; z-index: 1000; border-radius: var(--radius); transition: top 0.2s var(--ease); } .skip-link:focus { top: 1rem; } /* -------------------------------------------------------------------------- */ /* 3 · TYPOGRAPHY */ /* -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 380; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--text); font-optical-sizing: auto; } .display, .h-hero { font-family: var(--font-display); font-weight: 350; line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); } .h-hero { font-size: var(--fs-hero); } .display { font-size: var(--fs-display); } h1 { font-size: var(--fs-display); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } .serif-italic { font-style: italic; font-weight: 340; } p { max-width: 68ch; } .lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--text-soft); letter-spacing: -0.01em; max-width: 42ch; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.75em; } .eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--oak); display: inline-block; } .eyebrow--plain::before { display: none; } .on-dark .eyebrow, .eyebrow.on-dark { color: var(--on-dark-soft); } .num { font-family: var(--font-display); font-feature-settings: "tnum" 1; font-weight: 340; letter-spacing: -0.03em; } /* Dark context inversion */ .on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); } .on-dark .lead { color: var(--on-dark-soft); } .on-dark p { color: var(--on-dark-soft); } /* -------------------------------------------------------------------------- */ /* 4 · LAYOUT */ /* -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--sp-section); position: relative; } .section--tight { padding-block: clamp(2.25rem, 3.6vw, 3.75rem); } .section--paper2 { background: var(--paper-2); } .section--sand { background: var(--sand); } .section--ink { background: var(--ink); color: var(--on-dark); } .section--walnut { background: var(--walnut); color: var(--on-dark); } .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-12 { grid-template-columns: repeat(12, 1fr); } .section-head { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: clamp(1.75rem, 3.4vw, 3.25rem); max-width: 60rem; } .section-head--split { grid-template-columns: 1fr 1fr; align-items: end; max-width: none; gap: var(--sp-5); } .section-head--split .section-head__aside { justify-self: end; text-align: right; max-width: 34ch; } .stack-1 > * + * { margin-top: var(--sp-1); } .stack-2 > * + * { margin-top: var(--sp-2); } .stack-3 > * + * { margin-top: var(--sp-3); } .stack-4 > * + * { margin-top: var(--sp-4); } /* -------------------------------------------------------------------------- */ /* 5 · BUTTONS & LINKS */ /* -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--ink); --btn-fg: var(--paper); display: inline-flex; align-items: center; gap: 0.7em; padding: 1.05rem 1.9rem; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; color: var(--btn-fg); background: var(--btn-bg); border-radius: var(--radius); position: relative; overflow: hidden; isolation: isolate; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); will-change: transform; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--oak); transform: translateY(101%); transition: transform 0.5s var(--ease); } .btn:hover::after { transform: translateY(0); } .btn:hover { color: var(--ink); } .btn .btn__arrow { transition: transform 0.4s var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border: 1px solid var(--line); } .btn--ghost:hover { color: var(--paper); } .btn--ghost::after { background: var(--ink); } .btn--on-dark { --btn-bg: var(--paper); --btn-fg: var(--ink); } .btn--on-dark:hover { color: var(--ink); } .btn--on-dark::after { background: var(--oak); } .btn--ghost-dark { --btn-bg: transparent; --btn-fg: var(--on-dark); border: 1px solid var(--line-dark); } .btn--ghost-dark:hover { color: var(--ink); } .btn--ghost-dark::after { background: var(--paper); } /* Arrow / text link */ .link-arrow { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.005em; color: var(--ink); position: relative; padding-bottom: 3px; } .link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); } .link-arrow:hover::after { transform: scaleX(1); } .link-arrow svg, .link-arrow .arr { transition: transform 0.4s var(--ease); } .link-arrow:hover .arr { transform: translateX(5px); } .on-dark .link-arrow, .link-arrow.on-dark { color: var(--on-dark); } /* -------------------------------------------------------------------------- */ /* 6 · NAVIGATION */ /* -------------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: 1.4rem var(--gutter); transition: background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); color: var(--on-dark); mix-blend-mode: normal; } .nav.is-solid { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); color: var(--ink); padding-block: 1rem; box-shadow: 0 1px 0 var(--line-soft); } .nav.is-hidden { transform: translateY(-100%); } .nav__brand { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 0.05em; z-index: 2; } .nav__brand b { font-weight: 400; } .nav__brand .mark { font-weight: 600; } .nav__links { display: flex; gap: 2.25rem; align-items: center; } .nav__links a { font-size: 0.9rem; font-weight: 450; letter-spacing: 0.005em; position: relative; padding: 0.4rem 0; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav__cta { display: flex; align-items: center; gap: 1.5rem; } .nav__phone { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } .nav__toggle { display: none; width: 30px; height: 18px; position: relative; z-index: 2; } .nav__toggle span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); } .nav__toggle span:nth-child(1) { top: 0; } .nav__toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); } .nav__toggle span:nth-child(3) { bottom: 0; } body.menu-open .nav__toggle span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; } body.menu-open .nav__toggle span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); } /* Mobile menu overlay */ .nav-overlay { position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--on-dark); display: flex; flex-direction: column; justify-content: flex-start; gap: 0.15rem; padding: clamp(5.5rem, 11vh, 7.5rem) var(--gutter) 2.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--ease); pointer-events: none; } /* keep the whole menu tidy on short viewports (landscape tablet, small windows) */ @media (max-height: 720px) { body .nav-overlay a { font-size: clamp(1.5rem, 5.2vh, 2.4rem); line-height: 1.12; } .nav-overlay__lang { margin-top: 1.25rem; } .nav-overlay__foot { margin-top: 1.5rem; } } body.menu-open .nav-overlay { clip-path: inset(0 0 0 0); pointer-events: auto; } .nav-overlay a { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 350; line-height: 1.25; opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } body.menu-open .nav-overlay a { opacity: 1; transform: none; } body.menu-open .nav-overlay a:nth-child(1){ transition-delay: .12s; } body.menu-open .nav-overlay a:nth-child(2){ transition-delay: .18s; } body.menu-open .nav-overlay a:nth-child(3){ transition-delay: .24s; } body.menu-open .nav-overlay a:nth-child(4){ transition-delay: .30s; } body.menu-open .nav-overlay a:nth-child(5){ transition-delay: .36s; } body.menu-open .nav-overlay a:nth-child(6){ transition-delay: .42s; } body.menu-open .nav-overlay a:nth-child(7){ transition-delay: .48s; } .nav-overlay__foot { margin-top: var(--sp-6); color: var(--on-dark-soft); font-size: 0.9rem; display: flex; gap: 2rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- */ /* 7 · MEDIA / IMAGE FRAMES */ /* -------------------------------------------------------------------------- */ .media { position: relative; overflow: hidden; background: var(--sand-2); border-radius: var(--radius); } .media img { width: 100%; height: 100%; object-fit: cover; } .media--parallax img { will-change: transform; } .ratio-16-9 { aspect-ratio: 16 / 9; } .ratio-4-5 { aspect-ratio: 4 / 5; } .ratio-3-2 { aspect-ratio: 3 / 2; } .ratio-1-1 { aspect-ratio: 1 / 1; } .ratio-3-4 { aspect-ratio: 3 / 4; } /* Image reveal mask */ .reveal-img { position: relative; } .reveal-img::after { content: ""; position: absolute; inset: 0; background: var(--paper-2); transform: scaleY(1); transform-origin: bottom; transition: transform 0.9s var(--ease); } .reveal-img.is-in::after { transform: scaleY(0); } .reveal-img img { transform: scale(1.12); transition: transform 1.4s var(--ease); } .reveal-img.is-in img { transform: scale(1); } /* Zoom-on-hover */ .zoom img { transition: transform 0.9s var(--ease); } .zoom:hover img { transform: scale(1.05); } /* Wood-grain fallback (used if a photo is missing) */ .woodfill { background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px), linear-gradient(120deg, var(--oak-soft), var(--walnut)); } /* -------------------------------------------------------------------------- */ /* 8 · CARDS */ /* -------------------------------------------------------------------------- */ /* Project card */ .project-card { display: block; position: relative; } .project-card .media { aspect-ratio: 4 / 5; } .project-card__meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.1rem; gap: 1rem; } .project-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 380; } .project-card__tag { font-size: 0.82rem; color: var(--text-faint); letter-spacing: 0.02em; } .project-card__loc { font-size: 0.82rem; color: var(--text-faint); } .project-card:hover .project-card__title { color: var(--walnut); } /* Service card */ .service-card { display: flex; flex-direction: column; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); min-height: 320px; position: relative; overflow: hidden; transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease); } .service-card__idx { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-faint); } .service-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 360; margin-top: auto; } .service-card__desc { color: var(--text-soft); font-size: var(--fs-small); margin-top: 0.6rem; } .service-card .link-arrow { margin-top: 1.4rem; } .service-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ink); transform: translateY(100%); transition: transform 0.55s var(--ease); } .service-card:hover::after { transform: translateY(0); } .service-card:hover { border-color: var(--ink); } .service-card > * { position: relative; z-index: 1; transition: color 0.4s var(--ease); } .service-card:hover .service-card__idx { color: var(--on-dark-soft); } .service-card:hover .service-card__title { color: var(--on-dark); } .service-card:hover .service-card__desc { color: var(--on-dark-soft); } .service-card:hover .link-arrow { color: var(--on-dark); } /* Stat / number */ .stat { border-top: 1px solid var(--line-dark); padding-top: 1.5rem; } .stat__num { font-family: var(--font-display); font-weight: 340; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.03em; color: var(--on-dark); } .stat__num .unit { font-size: 0.4em; vertical-align: super; margin-left: 0.05em; } .stat__label { margin-top: 0.9rem; color: var(--on-dark-soft); font-size: 0.92rem; max-width: 24ch; } /* Feature (Why) row */ .feature { padding: var(--sp-4) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); } .feature__idx { font-family: var(--font-display); color: var(--oak); font-size: 1rem; } .feature__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 360; margin-bottom: 0.5rem; } .feature__desc { color: var(--text-soft); max-width: 52ch; } /* -------------------------------------------------------------------------- */ /* 9 · MARQUEE (Trusted by) */ /* -------------------------------------------------------------------------- */ .marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; gap: 4.5rem; width: max-content; animation: marquee 38s linear infinite; } .marquee__track:hover { animation-play-state: paused; } .marquee__item { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 360; color: var(--text-faint); letter-spacing: 0.01em; white-space: nowrap; } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } } /* -------------------------------------------------------------------------- */ /* 10 · ACCORDION */ /* -------------------------------------------------------------------------- */ .accordion__item { border-top: 1px solid var(--line); } .accordion__item:last-child { border-bottom: 1px solid var(--line); } .accordion__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.6rem 0; text-align: left; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 380; color: var(--text); } .accordion__icon { position: relative; width: 16px; height: 16px; flex: none; } .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: var(--ink); transition: transform 0.4s var(--ease); } .accordion__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); } .accordion__icon::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); } .accordion__item.is-open .accordion__icon::after { transform: translateX(-50%) scaleY(0); } .accordion__panel { overflow: hidden; height: 0; transition: height 0.5s var(--ease); } .accordion__panel-inner { padding-bottom: 1.8rem; color: var(--text-soft); max-width: 66ch; } /* -------------------------------------------------------------------------- */ /* 11 · FORMS */ /* -------------------------------------------------------------------------- */ .field { position: relative; margin-bottom: var(--sp-4); } .field label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.7rem; font-weight: 500; } .field input, .field textarea, .field select { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 0.7rem 0; font-size: 1.05rem; color: var(--text); transition: border-color 0.4s var(--ease); } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--oak); } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip { border: 1px solid var(--line); border-radius: 100px; padding: 0.55rem 1.1rem; font-size: 0.88rem; color: var(--text-soft); cursor: pointer; transition: all 0.3s var(--ease); user-select: none; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip:has(input:checked), .chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* -------------------------------------------------------------------------- */ /* 12 · FOOTER */ /* -------------------------------------------------------------------------- */ .footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(3rem, 6vw, 5rem); } .footer a { color: var(--on-dark-soft); transition: color 0.3s var(--ease); } .footer a:hover { color: var(--on-dark); } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-5); padding-bottom: var(--sp-6); } .footer__brand { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 350; line-height: 1.05; color: var(--on-dark); max-width: 16ch; } .footer__col h5 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint); margin-bottom: 1.2rem; font-family: var(--font-sans); font-weight: 500; } .footer__col a { display: block; padding: 0.35rem 0; font-size: 0.95rem; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 2rem 0; border-top: 1px solid var(--line-dark); font-size: 0.85rem; color: var(--text-faint); } /* -------------------------------------------------------------------------- */ /* 13 · CUSTOM CURSOR */ /* -------------------------------------------------------------------------- */ .cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--oak); pointer-events: none; z-index: var(--z-cursor); transform: translate(-50%, -50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease); mix-blend-mode: difference; } .cursor--ring { width: 40px; height: 40px; background: transparent; border: 1px solid var(--concrete); mix-blend-mode: normal; transition: transform .18s var(--ease-out), width .35s var(--ease), height .35s var(--ease), opacity .3s; opacity: .6; } body.cursor-hover .cursor { width: 4px; height: 4px; } body.cursor-hover .cursor--ring { width: 68px; height: 68px; opacity: 1; border-color: var(--oak); } .cursor--label { display:none; } @media (hover: none), (pointer: coarse) { .cursor { display: none !important; } } /* -------------------------------------------------------------------------- */ /* 14 · REVEAL ANIMATIONS */ /* -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--reveal-delay, 0s); } [data-reveal="fade"] { transform: none; } [data-reveal].is-in { opacity: 1; transform: none; } /* line-by-line text reveal */ .reveal-lines .line { display: block; overflow: hidden; } .reveal-lines .line > span { display: block; transform: translateY(105%); transition: transform 0.9s var(--ease); transition-delay: var(--line-delay, 0s); } .reveal-lines.is-in .line > span { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal], .reveal-lines .line > span, .reveal-img img { transition: none !important; opacity: 1 !important; transform: none !important; } .reveal-img::after { display: none; } } /* -------------------------------------------------------------------------- */ /* 15 · UTILITIES */ /* -------------------------------------------------------------------------- */ .u-center { text-align: center; } .u-max-40 { max-width: 40ch; } .u-max-46 { max-width: 46ch; } .u-max-54 { max-width: 54ch; } .u-mt-2 { margin-top: var(--sp-2); } .u-mt-3 { margin-top: var(--sp-3); } .u-mt-4 { margin-top: var(--sp-4); } .u-mt-5 { margin-top: var(--sp-5); } .u-mt-6 { margin-top: var(--sp-6); } .u-hairline { height: 1px; background: var(--line); border: 0; } .u-hairline-dark { height: 1px; background: var(--line-dark); border: 0; } .u-oak { color: var(--oak); } .u-mono-idx { font-family: var(--font-display); color: var(--text-faint); font-size: 0.9rem; } .only-desktop { } .only-mobile { display: none; } /* Sticky side rail / progress */ .scrollbar-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--oak); z-index: var(--z-nav); } /* Sticky contact bar (mobile) */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; gap: 1px; background: var(--line); transform: translateY(110%); transition: transform 0.5s var(--ease); } .sticky-cta.is-shown { transform: translateY(0); } .sticky-cta a { flex: 1; text-align: center; padding: 1.05rem; font-weight: 500; font-size: 0.95rem; background: var(--paper); } .sticky-cta a.primary { background: var(--ink); color: var(--paper); } /* -------------------------------------------------------------------------- */ /* 16 · RESPONSIVE */ /* -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); } .footer__brand { grid-column: 1 / -1; } .section-head--split { grid-template-columns: 1fr; align-items: start; } .section-head--split .section-head__aside { justify-self: start; text-align: left; } } /* Collapse the top nav to a clean hamburger from tablet width down — avoids the cramped/wrapping inline menu at intermediate widths */ @media (max-width: 1100px) { .nav__links, .nav__phone, .nav__lang { display: none; } .nav__toggle { display: block; } .nav__cta { margin-left: auto; margin-right: 1.5rem; } } @media (max-width: 420px) { .nav__cta .btn { display: none; } /* very narrow: logo + hamburger only */ } @media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .feature { grid-template-columns: 1fr; gap: var(--sp-2); } .only-mobile { display: block; } .sticky-cta { display: flex; } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } :root { --sp-section: clamp(2.75rem, 9vw, 3.5rem); } } /* ========================================================================== 17 · PAGE COMPOSITIONS — HOMEPAGE ========================================================================== */ /* Hero */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--on-dark); overflow: hidden; padding-top: clamp(6rem, 12vh, 9rem); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(14,17,19,.72) 0%, rgba(14,17,19,.42) 34%, rgba(14,17,19,.08) 64%, rgba(14,17,19,0) 82%), linear-gradient(180deg, rgba(14,17,19,.42) 0%, rgba(14,17,19,.14) 38%, rgba(14,17,19,.72) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2.5rem, 6vw, 5rem); } .hero__eyebrow { color: rgba(255,255,255,.9); margin-bottom: 1.6rem; text-shadow: 0 1px 24px rgba(0,0,0,.45); } .hero .h-hero { color: var(--paper); margin-bottom: 2.5rem; max-width: 15ch; } .hero .h-hero em { color: var(--sand); } .hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 3rem; flex-wrap: wrap; } .hero__lead { max-width: 33ch; color: #f7f3ea; font-size: var(--fs-lead); line-height: 1.45; text-shadow: 0 1px 28px rgba(0,0,0,.5); } .hero__actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; } .hero__cue { position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 6vw, 5rem); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: rgba(255,255,255,.8); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; } .hero__cue span { writing-mode: vertical-rl; } .hero__cue i { width: 1px; height: 54px; background: var(--line-dark); position: relative; overflow: hidden; } .hero__cue i::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--sand); animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0% { top: -100%; } 60%,100% { top: 100%; } } @media (prefers-reduced-motion: reduce) { .hero__cue i::after { animation: none; top: 0; } } /* Trusted */ .trusted__row { display: flex; justify-content: center; align-items: center; gap: clamp(2rem, 6vw, 5.5rem); flex-wrap: wrap; margin: 2.5rem 0 1.75rem; } .trusted__row span { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2.05rem); font-weight: 390; color: var(--text); letter-spacing: -.01em; opacity: .82; } /* Client logo wall — monochrome, uniform optical height, greyscale → colour on hover */ .logos { list-style: none; margin: 2.75rem 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.75rem, 4.5vw, 4rem); } .logos li { display: flex; align-items: center; } .logos img { height: clamp(20px, 2.4vw, 30px); width: auto; display: block; filter: grayscale(1); opacity: .5; transition: opacity .35s var(--ease), filter .35s var(--ease); } .logos li.is-tall img { height: clamp(34px, 4.2vw, 52px); } .logos li:hover img, .logos img:focus-visible { filter: grayscale(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .logos img { transition: none; } } .trusted__note { color: var(--text-faint); max-width: 54ch; margin-inline: auto; font-size: .95rem; } /* Featured scroller */ .featured__scroller { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 29rem); gap: clamp(1rem, 2.5vw, 2rem); overflow-x: auto; padding: 1rem var(--gutter) 1.5rem; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; } .featured__scroller::-webkit-scrollbar { display: none; } .featured__scroller.is-dragging { cursor: grabbing; } .featured__item { scroll-snap-align: start; } /* About */ .about__grid { align-items: center; gap: clamp(2rem, 5vw, 5rem); } .about__text { grid-column: span 6; } .about__figure { grid-column: span 6; aspect-ratio: 4 / 5; } .about__statement { max-width: 22ch; margin: 1.6rem 0 2rem; } .about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; color: var(--text-soft); } .about__cols p { max-width: none; } /* Manufacturing */ .manufacturing__grid { align-items: center; gap: clamp(2rem, 5vw, 5rem); } .manufacturing__media { grid-column: span 6; aspect-ratio: 4 / 5; } .manufacturing__text { grid-column: span 6; } .manufacturing__list { margin-top: 2.5rem; } .manufacturing__list li { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--line-dark); } .manufacturing__list li span:first-child { font-family: var(--font-display); color: var(--on-dark); font-size: 1.15rem; font-weight: 380; } .manufacturing__list li span:last-child { color: var(--on-dark-soft); font-size: .95rem; } /* Process — uses .feature */ .process__list { max-width: 62rem; } /* Why */ .why__grid { gap: clamp(2rem, 5vw, 4rem); align-items: start; } .why__head { grid-column: span 5; position: sticky; top: 7.5rem; } .why__head .display { max-width: 12ch; margin-top: 1.2rem; } .why__list { grid-column: span 7; } .why .feature__idx { color: var(--walnut); } /* Numbers */ .numbers__grid { gap: clamp(2rem, 4vw, 3rem); } /* Testimonials */ .testimonials__grid { gap: clamp(2rem, 4vw, 3.5rem); } .quote { border-top: 1px solid var(--line); padding-top: 1.75rem; } .quote p { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 370; line-height: 1.38; color: var(--text); max-width: none; } .quote cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: .84rem; letter-spacing: .03em; color: var(--text-faint); } /* Instagram */ .instagram__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; } .instagram__grid .ig { aspect-ratio: 1 / 1; } /* CTA */ .cta__inner { max-width: 46rem; margin-inline: auto; } .cta__title { margin: 1.5rem 0; color: var(--paper); } .cta__lead { margin-inline: auto; max-width: 40ch; color: var(--sand); } .cta__actions { display: flex; gap: 1.75rem; justify-content: center; align-items: center; margin-top: 2.5rem; flex-wrap: wrap; } .section--walnut .link-arrow { color: var(--on-dark); } @media (max-width: 860px) { .about__text, .about__figure, .manufacturing__media, .manufacturing__text, .why__head, .why__list { grid-column: 1 / -1; } .why__head { position: static; } .manufacturing__media { order: 2; } .about__cols { grid-template-columns: 1fr; gap: 1rem; } .instagram__grid { grid-template-columns: repeat(3, 1fr); } .numbers__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hero__cue { display: none; } .manufacturing__list li { grid-template-columns: 1fr; gap: .3rem; } .instagram__grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== 18 · PAGE COMPOSITIONS — INNER PAGES ========================================================================== */ /* On light inner pages the nav must read dark from the top */ .page-inner .nav:not(.is-solid) { color: var(--ink); } .page-hero { padding-top: clamp(8.5rem, 15vh, 12.5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); } .page-hero--media { padding-bottom: 0; } .breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var(--text-faint); margin-bottom: 2.2rem; letter-spacing: .01em; } .breadcrumb a { color: var(--text-faint); } .breadcrumb a:hover { color: var(--text); } .breadcrumb span { color: var(--line); } .page-hero h1 { max-width: 18ch; } .page-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; } .page-hero__lead { margin-top: 1.6rem; } @media (max-width: 860px) { .page-hero__grid { grid-template-columns: 1fr; align-items: start; } } /* Prose */ .prose { max-width: 68rem; } .prose p { color: var(--text-soft); margin-bottom: 1.25rem; max-width: 66ch; } .prose h2 { margin: 3rem 0 1.1rem; } .prose h3 { margin: 2.2rem 0 .8rem; } .prose ul.marks { margin: 1.2rem 0; } .prose ul.marks li { position: relative; padding-left: 1.6rem; margin-bottom: .8rem; color: var(--text-soft); max-width: 62ch; } .prose ul.marks li::before { content: ""; position: absolute; left: 0; top: .7em; width: .6rem; height: 1px; background: var(--oak); } /* Definition / spec lists */ .speclist { border-top: 1px solid var(--line); } .speclist div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .speclist dt { color: var(--text-faint); font-size: .9rem; letter-spacing: .02em; } .speclist dd { color: var(--text); font-size: 1rem; } .on-dark .speclist { border-color: var(--line-dark); } .on-dark .speclist div { border-color: var(--line-dark); } .on-dark .speclist dt { color: var(--on-dark-soft); } .on-dark .speclist dd { color: var(--on-dark); } /* Full-bleed media band */ .fullbleed { width: 100%; height: clamp(340px, 68vh, 760px); overflow: hidden; position: relative; } .fullbleed img { width: 100%; height: 100%; object-fit: cover; } /* Two-up gallery */ .gallery-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.5rem); } .gallery-2 .media { aspect-ratio: 4 / 5; } .gallery-2 .media.wide { aspect-ratio: 16 / 10; grid-column: 1 / -1; } @media (max-width: 700px) { .gallery-2 { grid-template-columns: 1fr; } } /* Value / info cards row */ .info-card { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); } .info-card h3 { font-size: var(--fs-h4); margin-bottom: .6rem; } .info-card p { color: var(--text-soft); font-size: var(--fs-small); } .info-card .idx { font-family: var(--font-display); color: var(--oak); font-size: .95rem; display: block; margin-bottom: 1.5rem; } /* Service detail hero split */ .svc-hero__media { aspect-ratio: 16 / 10; } .svc-list { columns: 2; column-gap: 3rem; } .svc-list li { break-inside: avoid; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--text-soft); } @media (max-width: 640px) { .svc-list { columns: 1; } } /* Pricing/scope note strip */ .note-strip { display: flex; gap: 1.5rem; align-items: center; padding: 1.4rem 1.6rem; background: var(--paper-2); border-radius: var(--radius); border: 1px solid var(--line); } .note-strip .k { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); } /* Contact layout */ .contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .contact__aside dl.speclist div { grid-template-columns: 1fr; gap: .2rem; } @media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } .form-success { padding: 3rem 0; animation: form-success-in .4s var(--ease) both; } @keyframes form-success-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .form-success { animation: none; opacity: 1; transform: none; } } /* Related projects */ .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); } @media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } } /* Index list of projects */ .proj-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 2.5vw, 2rem); } .proj-index .project-card .media { aspect-ratio: 4 / 3; } .proj-index .project-card:nth-child(4n+1) .media, .proj-index .project-card:nth-child(4n+4) .media { aspect-ratio: 4 / 5; } @media (max-width: 700px) { .proj-index { grid-template-columns: 1fr; } } /* CTA compact */ .cta-band { text-align: center; } .cta-band h2 { max-width: 20ch; margin: 0 auto 1.5rem; } /* ========================================================================== 19 · LANGUAGE SWITCH + JOURNAL ========================================================================== */ .nav__lang { display: inline-flex; gap: .35rem; align-items: center; font-size: .82rem; font-weight: 500; letter-spacing: .04em; } .nav__lang a { opacity: .55; transition: opacity .3s var(--ease); } .nav__lang a:hover { opacity: 1; } .nav__lang a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .nav__lang span { opacity: .3; } .nav-overlay__lang { margin-top: 2rem; display: flex; gap: 1rem; font-size: 1rem; } .nav-overlay__lang a[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; } /* Journal / blog */ .journal-list { border-top: 1px solid var(--line); } .journal-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; padding: 2.2rem 0; border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease); } .journal-item:hover { padding-left: 1rem; } .journal-item__cat { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oak); margin-bottom: .6rem; } .journal-item__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 370; color: var(--text); max-width: 28ch; } .journal-item:hover .journal-item__title { color: var(--walnut); } .journal-item__meta { font-size: .84rem; color: var(--text-faint); white-space: nowrap; } .journal-item__arrow { font-family: var(--font-display); color: var(--text-faint); font-size: 1.2rem; } @media (max-width: 600px) { .journal-item { grid-template-columns: 1fr; } .journal-item__meta { white-space: normal; } } /* Article body */ .article { max-width: 46rem; margin-inline: auto; } .article p { color: var(--text-soft); margin-bottom: 1.3rem; font-size: 1.09rem; line-height: 1.7; } .article h2 { margin: 2.8rem 0 1rem; } .article h3 { margin: 2rem 0 .7rem; font-size: var(--fs-h4); } .article ul.marks { margin: 1.3rem 0; } .article ul.marks li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; color: var(--text-soft); } .article ul.marks li::before { content: ""; position: absolute; left: 0; top: .8em; width: .6rem; height: 1px; background: var(--oak); } .article blockquote { border-left: 2px solid var(--oak); padding-left: 1.5rem; margin: 2rem 0; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text); } .article__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-faint); margin-top: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); } @media (max-width: 1080px) { .nav__lang { display: none; } } /* ========================================================================== 20 · MOTION UPGRADE — senior pass (cinematic, restrained) ========================================================================== */ /* Hero cinematic entrance on load */ .hero__media { transform: scale(1.06); transition: transform 1.9s var(--ease-out); } body.is-loaded .hero__media { transform: scale(1); } .hero__eyebrow, .hero__lead, .hero__actions { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .hero.hero-in .hero__eyebrow { opacity: 1; transform: none; transition-delay: .15s; } .hero.hero-in .hero__lead { opacity: 1; transform: none; transition-delay: .55s; } .hero.hero-in .hero__actions { opacity: 1; transform: none; transition-delay: .68s; } .hero .reveal-lines .line:nth-child(1) > span { transition-delay: .28s; } .hero .reveal-lines .line:nth-child(2) > span { transition-delay: .40s; } .hero__cue { opacity: 0; transition: opacity 1s var(--ease) 1s; } .hero.hero-in .hero__cue { opacity: 1; } /* Editorial heading — text rises from behind a mask */ .rise { overflow: hidden; } .rise > .rise__i { display: block; transform: translateY(112%); opacity: 0; transition: transform 1s var(--ease), opacity 1s var(--ease); } .rise.is-in > .rise__i { transform: none; opacity: 1; } /* Project card — subtle lift with the existing image zoom */ .project-card { transition: transform .55s var(--ease); } .project-card:hover { transform: translateY(-5px); } /* Nav — richer translucent material when solid */ .nav.is-solid { backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); } @media (prefers-reduced-motion: reduce) { .hero__media { transform: none !important; transition: none; } .hero__eyebrow, .hero__lead, .hero__actions, .hero__cue { opacity: 1 !important; transform: none !important; } .rise > .rise__i { transform: none !important; opacity: 1 !important; transition: none; } .project-card:hover { transform: none; } } /* ========================================================================== 21 · STORY — "Z tabule vzniká kus" (scroll-driven pinned sequence) ========================================================================== */ .story { position: relative; height: 330vh; background: var(--ink); color: var(--on-dark); } .story__pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(2rem, 5vw, 5rem); max-width: var(--container); margin-inline: auto; height: 100svh; padding: clamp(5rem, 11vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3.5rem); } .story__stage { position: relative; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); } .story__layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease), transform 1.2s var(--ease); } .story__layer.is-active { opacity: 1; transform: scale(1); } .story__layer img { width: 100%; height: 100%; object-fit: cover; } .story__num { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 3; font-family: var(--font-display); font-size: 1rem; color: var(--on-dark); letter-spacing: .04em; mix-blend-mode: difference; } .story__wire { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink-2); } .story__wire svg { width: 66%; height: auto; } .story__wire path, .story__wire line, .story__wire rect { stroke: var(--oak-soft); stroke-width: 1.3; fill: none; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.4s var(--ease); } .story__layer.is-active .story__wire path, .story__layer.is-active .story__wire line, .story__layer.is-active .story__wire rect { stroke-dashoffset: 0; } .story__side { position: relative; align-self: center; } .story__side .eyebrow { color: var(--on-dark-soft); } .story__side .eyebrow::before { background: var(--oak); } .story__lead { color: var(--on-dark-soft); margin-top: .75rem; max-width: 44ch; } .story__steps { margin-top: clamp(1.25rem, 2.5vh, 2rem); display: grid; gap: 0; } .story__step { padding: .7rem 0 .7rem 1.25rem; border-left: 2px solid var(--line-dark); opacity: .32; transition: opacity .5s var(--ease), border-color .5s var(--ease); } .story__step.is-active { opacity: 1; border-color: var(--oak); } .story__step .n { font-family: var(--font-display); color: var(--oak); font-size: .9rem; } .story__step h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 360; color: var(--on-dark); margin: .2rem 0 0; } .story__step p { color: var(--on-dark-soft); font-size: var(--fs-small); margin-top: .5rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); } .story__step.is-active p { max-height: 9rem; opacity: 1; } .story__bar { position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: transparent; } @media (max-width: 900px) { .story__pin { grid-template-columns: 1fr; gap: 1.5rem; padding: 4.5rem var(--gutter); } .story__stage { aspect-ratio: 3/2; } } @media (prefers-reduced-motion: reduce) { .story__layer { transition: opacity .3s ease; transform: none; } .story__wire path, .story__wire line, .story__wire rect { transition: none; stroke-dashoffset: 0; } } /* ========================================================================== 22 · FLUIDITY PASS (Apple) — press feedback + material edge ========================================================================== */ @media (hover: hover) and (pointer: fine) { .chip, .opt, .sw { transition: transform .18s var(--ease-out), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .chip:active, .opt:active { transform: scale(.95); } .sw:active { transform: scale(.92); } .service-card:active { transform: scale(.99); } .project-card:active { transform: translateY(-5px) scale(.99); } .link-arrow:active { opacity: .6; } } /* Nav — soft scroll-edge material instead of a hard divider (§12) */ .nav.is-solid { box-shadow: none; } .nav.is-solid::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; background: linear-gradient(var(--paper), transparent); opacity: .5; pointer-events: none; } .page-inner .nav.is-solid::after { background: linear-gradient(var(--paper), transparent); } /* Grab affordance on draggable galleries */ .featured__scroller { cursor: grab; } .featured__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; } @media (prefers-reduced-motion: reduce) { .chip:active, .opt:active, .sw:active, .service-card:active, .project-card:active { transform: none; } } /* ——— DesignJK · značka ——————————————————————————————————— */ .brand-lockup { height: 1.6rem; width: auto; display: block; color: currentColor; } .nav__brand { display: inline-flex; align-items: center; gap: 0; line-height: 0; } .brand-lockup--ft { height: 2.4rem; margin-bottom: 1.4rem; color: var(--on-dark); } .footer__brand { display: block; } .footer__claim { display: block; } @media (max-width: 640px) { .brand-lockup { height: 1.35rem; } } /* opravа: dotiahnuté dolné dotiahy (p, j, Ž) v maskovaných nadpisoch */ .display, .h-hero { overflow: clip; overflow-clip-margin: .18em; } /* oprava: nadpis v sekcii "Z tabule vzniká kus" bol tmavý na tmavom */ .story__side .display, .story__side h2 { color: var(--on-dark); } .manufacturing__text .display + .lead { margin-top: 1.15rem; } /* ——— Karty služieb s fotkou ——————————————————————————————— */ .service-card--media { min-height: 0; } .service-card__media { display: block; margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3); aspect-ratio: 16 / 11; overflow: hidden; background: var(--sand); } .service-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); } .service-card--media:hover .service-card__media img { transform: scale(1.045); } .service-card--media .service-card__title { margin-top: .55rem; } @media (prefers-reduced-motion: reduce) { .service-card__media img { transition: none; } } /* ——— HERO · dôveryhodnostné prvky ——————————————————————— */ .hero__trust { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; } .hero__trust li { font-family: var(--font-sans); font-size: .8rem; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.86); display: inline-flex; align-items: center; gap: .55rem; text-shadow: 0 1px 18px rgba(0,0,0,.45); } .hero__trust li::before { content: ""; width: 14px; height: 1.5px; background: var(--oak); flex: none; } .hero__phone { margin-top: 1.1rem; display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; font-family: var(--font-sans); text-shadow: 0 1px 18px rgba(0,0,0,.45); } .hero__phone a { color: #fff; text-decoration: none; font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; border-bottom: 1.5px solid var(--oak); } .hero__phone span { font-size: .78rem; color: rgba(255,255,255,.72); letter-spacing: .06em; } @media (max-width: 720px) { .hero__trust li:nth-child(n+3) { display: none; } .hero__lead { max-width: 30ch; } } /* ——— ŠTÚDIO ——————————————————————————————————————————— */ .about__figure { position: relative; } .about__cap { position: absolute; left: 1rem; bottom: 1rem; font-family: var(--font-sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(26,26,24,.55); backdrop-filter: blur(6px); padding: .45rem .75rem; border-radius: 2px; } /* ——— PREČO · jantárová čiarka ————————————————————————— */ .feature__idx--saw { display: inline-block; width: 1.75rem; height: 1.5px; margin-top: .7em; background: var(--oak); } /* ——— CENY ———————————————————————————————————————————— */ .pricing__grid { margin-top: clamp(2rem, 4vw, 3rem); } .price { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); display: flex; flex-direction: column; gap: .5rem; } .price__idx { font-family: var(--font-display); font-size: .95rem; color: var(--text-faint); } .price__title { font-family: var(--font-display); font-weight: 360; font-size: var(--fs-h3); letter-spacing: var(--tr-tight); margin-top: 1.2rem; } .price__num { font-family: var(--font-display); font-weight: 340; font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.03em; line-height: 1; color: var(--oak); margin: .4rem 0 .6rem; font-variant-numeric: tabular-nums; } .price__num small { font-size: .42em; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-right: .5em; vertical-align: .55em; font-family: var(--font-sans); font-weight: 500; } .price__desc { color: var(--text-soft); font-size: var(--fs-small); } .pricing__factors { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); padding-top: 1.6rem; } .pricing__factors-head { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1rem; } .pricing__factors ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .pricing__factors li { background: var(--paper); padding: 1rem 1.2rem; display: grid; gap: .25rem; } .pricing__factors b { font-family: var(--font-sans); font-weight: 600; font-size: .92rem; } .pricing__factors span { font-size: .88rem; color: var(--text-soft); } .pricing__cta { margin-top: clamp(2rem, 4vw, 3rem); display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; } .pricing__cta p { margin: 0; color: var(--text-soft); font-size: var(--fs-small); max-width: 46ch; } /* ——— FAQ ————————————————————————————————————————————— */ .faq__grid { align-items: start; } .faq__head { grid-column: 1 / span 5; position: sticky; top: 6rem; } .faq__head .lead { margin-top: 1.4rem; max-width: 34ch; } .faq__head .lead a { color: var(--oak); text-decoration: none; border-bottom: 1px solid currentColor; } .faq__list { grid-column: 7 / -1; border-top: 1px solid var(--line); } @media (max-width: 900px) { .faq__head, .faq__list { grid-column: 1 / -1; position: static; } .faq__list { margin-top: 2rem; } } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 400; letter-spacing: var(--tr-tight); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:focus-visible { outline: 2px solid var(--oak); outline-offset: 4px; } .faq__plus { position: relative; width: 14px; height: 14px; flex: none; } .faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: var(--oak); inset: 6px 0; transition: transform .35s var(--ease); } .faq__plus::after { inset: 0 6px; } .faq__item[open] .faq__plus::after { transform: scaleY(0); } .faq__a { padding: 0 0 1.4rem; max-width: 60ch; color: var(--text-soft); } .faq__a p { margin: 0; } /* ——— DOPYT · formulár ———————————————————————————————— */ .cta__grid { align-items: start; text-align: left; } .cta__text { grid-column: 1 / span 5; } .lead-form { grid-column: 7 / -1; } @media (max-width: 900px) { .cta__text, .lead-form { grid-column: 1 / -1; } .lead-form { margin-top: 2.5rem; } } .cta__title { margin: 1.2rem 0 1rem; } .cta__lead { max-width: 40ch; } .cta__contact { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid rgba(239,231,217,.18); } .cta__contact li { display: grid; grid-template-columns: 82px 1fr; gap: .4rem 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid rgba(239,231,217,.18); } .cta__contact .k { font-family: var(--font-sans); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); } .cta__contact a { color: var(--on-dark); text-decoration: none; font-size: 1.08rem; border-bottom: 1px solid rgba(193,133,47,.55); } .cta__contact a:hover { color: #fff; border-color: var(--oak-soft); } .cta__contact .s { grid-column: 2; font-family: var(--font-sans); font-size: .78rem; color: var(--on-dark-soft); letter-spacing: .04em; } .lf__row--2 { display: grid; gap: 1.2rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .lf__row--2 { grid-template-columns: 1fr 1fr; } } .lf__field { display: grid; gap: .45rem; margin-bottom: 1.2rem; } .lf__field > span { font-family: var(--font-sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); } .lf__field em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; } .lf__field input, .lf__field select, .lf__field textarea { width: 100%; background: rgba(0,0,0,.18); border: 1px solid rgba(239,231,217,.22); border-radius: var(--radius); color: var(--on-dark); font-family: var(--font-sans); font-size: 1rem; padding: .85rem .95rem; transition: border-color .2s var(--ease), background .2s var(--ease); } .lf__field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c1852f' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95rem center; padding-right: 2.4rem; } .lf__field select option { color: var(--ink); } .lf__field textarea { resize: vertical; min-height: 110px; } .lf__field input:focus, .lf__field select:focus, .lf__field textarea:focus { outline: none; border-color: var(--oak); background: rgba(0,0,0,.26); } .lf__field input::placeholder, .lf__field textarea::placeholder { color: rgba(239,231,217,.42); } .lf__file { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; align-items: center; cursor: pointer; border: 1px dashed rgba(239,231,217,.35); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.2rem; transition: border-color .2s var(--ease), background .2s var(--ease); } .lf__file:hover, .lf__file.is-drag { border-color: var(--oak); background: rgba(0,0,0,.14); } .lf__file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .lf__file-ico { width: 34px; height: 34px; border: 1.5px solid var(--oak); border-radius: 50%; position: relative; } .lf__file-ico::before, .lf__file-ico::after { content: ""; position: absolute; background: var(--oak); left: 50%; top: 50%; transform: translate(-50%,-50%); } .lf__file-ico::before { width: 14px; height: 1.5px; } .lf__file-ico::after { width: 1.5px; height: 14px; } .lf__file-txt { display: grid; gap: .15rem; } .lf__file-txt b { font-family: var(--font-sans); font-weight: 600; font-size: .95rem; color: var(--on-dark); } .lf__file-txt small { font-family: var(--font-sans); font-size: .76rem; color: var(--on-dark-soft); } .lf__file-list { grid-column: 1 / -1; font-family: var(--font-sans); font-size: .78rem; color: var(--oak-soft); } .lf__file-list:empty { display: none; } .lf__check { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--on-dark-soft); margin-bottom: 1.6rem; cursor: pointer; } .lf__check input { margin-top: .3em; accent-color: var(--oak); width: 16px; height: 16px; flex: none; } .lf__check a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid rgba(193,133,47,.55); } .lf__submit { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .lf__submit .btn { border: 0; cursor: pointer; } .lf__note { font-family: var(--font-sans); font-size: .8rem; color: var(--on-dark-soft); } .lf__msg { margin: 1.1rem 0 0; font-family: var(--font-sans); font-size: .92rem; color: var(--on-dark); display: none; } .lf__msg.is-on { display: block; } .lf__msg.is-err { color: #F0B9A8; } .lf__msg.is-ok { color: #D9E4C6; } .lead-form.is-sending { opacity: .6; pointer-events: none; } .lead-form.is-done > *:not(.lf__msg) { display: none; } .lead-form.is-done .lf__msg { display: block; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--on-dark); line-height: 1.25; } /* ---- galéria realizácií ---- */ .gal-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem} .gal-filters button{font-family:var(--font-sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.6rem 1rem;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;border-radius:999px;transition:background .2s,color .2s,border-color .2s} .gal-filters button.is-active,.gal-filters button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media (min-width:720px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:16px}} @media (min-width:1100px){.gal-grid{grid-template-columns:repeat(4,1fr)}} .gal-item{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius,6px);background:var(--paper2)} .gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .gal-item:hover img{transform:scale(1.04)} .gal-item span{position:absolute;left:0;right:0;bottom:0;padding:.75rem .9rem;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .3s} .gal-item:hover span{opacity:1} .gal-item[hidden]{display:none} .gal-count{font-size:.85rem;color:var(--text-faint);margin-top:1rem} /* lightbox */ .lb{position:fixed;inset:0;background:rgba(20,20,18,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:16px} .lb.is-open{display:flex} .lb img{max-width:min(96vw,1400px);max-height:84vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)} .lb figcaption{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#EFE7D9;font-size:.9rem;padding:0 60px} .lb button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#EFE7D9;font-size:2.4rem;cursor:pointer;padding:16px;line-height:1} .lb .lb-prev{left:6px}.lb .lb-next{right:6px} .lb .lb-close{top:12px;right:12px;transform:none;font-size:1.8rem} /* návrh -> realizácia */ .ba{margin-top:clamp(40px,6vw,72px)} .ba__grid{display:grid;gap:18px;grid-template-columns:1fr} @media (min-width:860px){.ba__grid{grid-template-columns:1fr 1fr}} .ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ba__pair figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius,6px);background:var(--paper2)} .ba__pair img{width:100%;height:100%;object-fit:cover;display:block} .ba__pair figcaption{position:absolute;left:10px;top:10px;font-family:var(--font-sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .6rem;background:rgba(26,26,24,.82);color:#EFE7D9;border-radius:3px} .ba__title{margin-top:.75rem;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:380} /* stránka kontakt / gdpr */ .page-head{padding-top:clamp(120px,16vw,180px)} .prose{max-width:68ch} .prose h2{margin-top:2.2rem;font-size:var(--fs-h3)} .prose p,.prose li{color:var(--text-soft);line-height:1.6} .prose ul{padding-left:1.2rem} .contact-grid{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr} @media (min-width:900px){.contact-grid{grid-template-columns:1fr 1.2fr}} .contact-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1rem} .contact-list li{display:grid;gap:.15rem} .contact-list .k{font-family:var(--font-sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)} .contact-list a{color:var(--text);text-decoration:none;font-size:1.15rem} .contact-list a:hover{color:var(--oak)} /* ---- vizualizácie ---- */ .viz{margin-top:clamp(2.5rem,5vw,4rem)} .viz__grid{display:grid;gap:clamp(10px,2vw,18px);grid-template-columns:1fr;margin-top:1.25rem} @media(min-width:620px){.viz__grid{grid-template-columns:repeat(3,1fr)}} .viz figure{margin:0} .viz__shot{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius,2px);background:var(--paper2)} .viz__shot img{width:100%;height:100%;object-fit:cover;display:block} .viz__tag{position:absolute;left:10px;top:10px;font-family:var(--font-sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .55rem;background:rgba(26,26,24,.82);color:#EFE7D9;border-radius:2px} .viz figcaption{margin-top:.55rem;font-size:.92rem;color:var(--text-soft)} .story__h2{font-family:var(--font-display);font-weight:350;font-size:var(--fs-h2);line-height:1.12;letter-spacing:var(--tr-tighter);color:var(--on-dark)} /* ---- story: bez pinovania, päť čitateľných blokov na každom zariadení ---- */ .story{height:auto} .story__pin{display:none} .story__flow{display:block;max-width:var(--container);margin-inline:auto; padding:var(--sp-section) var(--gutter)} .story__flow-head{max-width:46ch;margin-bottom:clamp(1.5rem,3vw,2.5rem)} .story__flow .story__lead{color:var(--on-dark-soft);margin-top:.9rem} .sf{display:grid;gap:1.1rem;padding:clamp(1.5rem,3.2vw,2.6rem) 0;border-top:1px solid rgba(239,231,217,.14);align-items:center} .sf figure{margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius,2px);background:rgba(255,255,255,.05)} .sf img{width:100%;height:100%;object-fit:cover;display:block} .sf .n{font-family:var(--font-display);color:var(--oak);font-size:.95rem;letter-spacing:.04em} .sf h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:360;color:var(--on-dark);margin:.25rem 0 .5rem;line-height:1.15} .sf p{color:var(--on-dark-soft);font-size:var(--fs-small);line-height:1.62;margin:0;max-width:56ch} @media (min-width:820px){ .sf{grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem)} .sf--flip figure{order:2} .sf--flip .sf__text{order:1} } /* ---- mobil a tablet: drobnosti ---- */ @media (max-width:900px){ .section-head--split{gap:.85rem} .hero__foot{gap:1.1rem 2rem} .ba__grid{gap:22px} } @media (max-width:620px){ .gal-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);padding-block:.15rem} .gal-filters::-webkit-scrollbar{display:none} .gal-filters button{flex:0 0 auto} .gal-grid{gap:8px} .lb button{font-size:2rem;padding:12px} .lb figcaption{font-size:.8rem;padding:0 44px;bottom:12px} .contact-list a{font-size:1.05rem} } @media (max-width:330px){.gal-grid{grid-template-columns:1fr}} /* ---- fakty pri Vybraných realizáciách (vyplnia prázdne miesto vpravo) ---- */ .feat-facts{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem} .feat-facts li{display:flex;align-items:baseline;gap:.6rem;justify-content:flex-end} .feat-facts b{font-family:var(--font-display);font-weight:380;font-size:1.5rem;color:var(--text);line-height:1} .feat-facts span{font-size:.86rem;color:var(--text-faint)} @media (max-width:900px){.feat-facts li{justify-content:flex-start}} /* ---- štúdio: jeden plynulý text ---- */ .about__cols{grid-template-columns:1fr !important;gap:1.1rem !important;max-width:64ch} .about__cols p{line-height:1.68} /* ---- hero: tri benefity aj na mobile ---- */ @media (max-width:720px){.hero__trust li:nth-child(n+3){display:flex}} /* ---- Čo hýbe cenou: vzorkovník pod každým stĺpcom ---- */ .pricing__factors li{padding:0 0 1rem} .pf-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper2)} .pf-img img{width:100%;height:100%;object-fit:cover;display:block} .pricing__factors ul b{padding:.9rem 1.1rem 0} .pricing__note b{padding:0;font-weight:600;color:var(--text)} .pricing__factors ul li>span:not(.pf-img){padding:0 1.1rem} .pricing__note{margin-top:1.25rem;font-size:.94rem;line-height:1.6;color:var(--text-soft);max-width:72ch} /* ---- FAQ: telefónne číslo sa nesmie zalomiť ---- */ .faq__head .lead a[href^="tel:"],.hero__phone a,.contact-list a[href^="tel:"]{white-space:nowrap} /* ---- recenzie ---- */ .rev-intro{max-width:64ch;margin:.75rem 0 2.25rem;color:var(--text-soft);line-height:1.65} .quote .stars{display:block;color:var(--oak);letter-spacing:.18em;font-size:.9rem;margin-bottom:.9rem} .rev-more{margin-top:2rem} /* ---- rozbaľovacie menu Služby ---- */ .nav__item{position:relative;display:inline-flex;align-items:center} .nav__item>a{display:inline-flex;align-items:center;gap:.4em} .nav__caret{width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease)} .nav__item:hover .nav__caret{transform:rotate(225deg) translateY(-2px)} .nav__item::after{content:"";position:absolute;left:-1rem;right:-1rem;top:100%;height:16px} .nav__sub{position:absolute;top:calc(100% + 14px);left:-1.1rem;min-width:16.5rem;display:grid;gap:1px; background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:.45rem; box-shadow:0 20px 44px rgba(26,26,24,.16);opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;z-index:5} .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:none} .nav__sub a{display:block;padding:.62rem .85rem;font-size:.9rem;font-weight:450;color:var(--ink);border-radius:2px;white-space:nowrap} .nav__sub a::after{display:none} .nav__sub a:hover{background:var(--paper-2);color:var(--ink)} @media (max-width:1300px){.nav__links{gap:1.5rem}} /* mobilné menu: služby ako odsadený zoznam */ .nav-overlay__sub{font-size:clamp(1rem,3.6vw,1.35rem)!important;padding-left:1.25rem;opacity:.8} body.menu-open .nav-overlay__sub{opacity:.85} /* breadcrumbs a spoločné bloky podstránok */ .sub-hero{padding-top:clamp(8.5rem,15vh,12rem);padding-bottom:clamp(2rem,4vw,3.5rem)} .sub-hero h1{max-width:18ch;margin-top:.8rem} .sub-hero .lead{margin-top:1.2rem;max-width:56ch} .sub-facts{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} @media (min-width:700px){.sub-facts{grid-template-columns:repeat(3,1fr)}} .sub-facts li{background:var(--paper);padding:1.1rem 1.3rem;display:grid;gap:.2rem} .sub-facts b{font-family:var(--font-display);font-weight:380;font-size:1.35rem} .sub-facts span{font-size:.86rem;color:var(--text-faint)} .sub-media{margin-top:clamp(2rem,4vw,3rem);aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)} .sub-media img{width:100%;height:100%;object-fit:cover;display:block} .sub-body{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr} @media (min-width:960px){.sub-body{grid-template-columns:minmax(0,1fr) 19rem}} .sub-body h2{font-size:var(--fs-h2);margin:0 0 .9rem;max-width:20ch} .sub-body h3{font-size:var(--fs-h4);margin:1.8rem 0 .5rem} .sub-body p{color:var(--text-soft);line-height:1.68;margin-bottom:1rem;max-width:68ch} .sub-sec{padding-block:clamp(1.75rem,3.5vw,3rem);border-top:1px solid var(--line)} .sub-sec:first-child{border-top:0;padding-top:0} .sub-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} @media (min-width:640px){.sub-list{grid-template-columns:1fr 1fr}} .sub-list li{background:var(--paper);padding:1.15rem 1.3rem;display:grid;gap:.3rem} .sub-list b{font-family:var(--font-sans);font-weight:600;font-size:.95rem} .sub-list span{font-size:.9rem;color:var(--text-soft);line-height:1.55} .sub-aside{align-self:start;position:sticky;top:7rem;display:grid;gap:1.25rem; background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem} @media (max-width:959px){.sub-aside{position:static}} .sub-aside h3{font-family:var(--font-display);font-size:1.25rem;font-weight:380;margin:0} .sub-aside p{font-size:.92rem;color:var(--text-soft);margin:0;line-height:1.6} .sub-aside .btn{width:100%;justify-content:center} .sub-aside dl{display:grid;gap:.7rem;margin:0} .sub-aside dl>div{display:grid;gap:.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)} .sub-aside dl>div:last-child{border-bottom:0;padding-bottom:0} .sub-aside dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)} .sub-aside dd{margin:0;font-size:.95rem} .sub-price{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .sub-price li{background:var(--paper);padding:1.05rem 1.3rem;display:grid;gap:.25rem;grid-template-columns:1fr auto;align-items:baseline} .sub-price b{font-family:var(--font-sans);font-weight:600;font-size:.95rem} .sub-price .p{font-family:var(--font-display);font-size:1.25rem;color:var(--oak);white-space:nowrap} .sub-price span.d{grid-column:1/-1;font-size:.88rem;color:var(--text-soft)} .sub-gal{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:1.25rem} @media (min-width:760px){.sub-gal{grid-template-columns:repeat(3,1fr);gap:14px}} .sub-steps{list-style:none;margin:1rem 0 0;padding:0;counter-reset:s} .sub-steps li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.1rem 0;border-top:1px solid var(--line)} .sub-steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-display);color:var(--oak);font-size:.95rem} .sub-steps b{display:block;font-family:var(--font-display);font-weight:380;font-size:1.2rem;margin-bottom:.25rem} .sub-steps span{color:var(--text-soft);font-size:.94rem;line-height:1.6} .sub-related{display:grid;gap:12px;grid-template-columns:1fr;margin-top:1.25rem} @media (min-width:700px){.sub-related{grid-template-columns:repeat(3,1fr)}} .sub-related a{display:block;padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);transition:background .3s var(--ease),border-color .3s var(--ease)} .sub-related a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} .sub-related b{display:block;font-family:var(--font-display);font-weight:380;font-size:1.1rem;margin-bottom:.25rem} .sub-related span{font-size:.88rem;color:var(--text-faint)} .sub-related a:hover span{color:var(--on-dark-soft)} .crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.82rem;color:var(--text-faint)} .crumbs a:hover{color:var(--text)} .crumbs i{font-style:normal;opacity:.5} /* ---- pasca na roboty vo formulári (nesmie byť vidieť ani čítať odčítačom) ---- */ .lf__trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* ---- Vybrané realizácie: posúvanie do strany na dotykových zariadeniach ---- */ @media (max-width:860px){ .featured__scroller{ grid-auto-columns:min(86vw,22rem); gap:12px; padding:.5rem var(--gutter) 1.25rem; scroll-snap-type:x mandatory; scroll-padding-inline-start:var(--gutter); overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; cursor:default; } .featured__item{scroll-snap-align:start;scroll-snap-stop:always} .featured__scroller.is-dragging{cursor:default} .project-card__meta{margin-top:.9rem} .project-card__loc{margin-top:.35rem} } @media (max-width:520px){ .featured__scroller{grid-auto-columns:min(88vw,20rem)} } /* ---- článok v žurnáli: pohodlnejšia dĺžka riadku ---- */ .sub-body.is-article{max-width:46rem;margin-inline:auto} .sub-body.is-article h2{font-size:var(--fs-h3);margin-top:2.4rem} .sub-body.is-article p{font-size:1.06rem;line-height:1.72;max-width:none} /* ---- pätička: kde pôsobíme ---- */ .footer__areas{padding:1.75rem 0;border-top:1px solid var(--line-dark)} .footer__areas h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint);margin-bottom:.9rem;font-family:var(--font-sans);font-weight:500} .footer__areas-row{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline} .footer__areas-row a{font-size:.95rem} .footer__areas-row span{font-size:.9rem;color:var(--text-faint)} .logos li.is-mid img{height:clamp(28px,3.6vw,44px)} .trusted__note{max-width:72ch} /* ---- pomery strán podľa dodaných fotiek ---- */ .featured__item.project-card .media{aspect-ratio:16/9} .viz__shot{aspect-ratio:16/9} .about__figure{aspect-ratio:4/3} .manufacturing__media{aspect-ratio:4/3} .sf figure{aspect-ratio:auto;display:flex;justify-content:center;align-items:center} .sf img{height:auto;width:auto;max-width:100%} @media (max-width:819px){.sf img{max-height:68svh}} @media (min-width:820px){.sf figure{max-height:min(60vh,470px)}.sf img{max-height:min(60vh,470px)}} .pf-img{aspect-ratio:3/4} @media (min-width:520px){.numbers__grid{grid-template-columns:repeat(3,1fr)}} .footer__bottom a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(239,231,217,.28)} .footer__bottom a:hover{color:var(--on-dark)} /* ---------- lišta so súhlasom s cookies ---------- */ .ck{position:fixed;left:0;right:0;bottom:0;z-index:2100;padding:0 12px 12px; transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.8,.25,1)} .ck[hidden]{display:none} .ck.is-on{transform:none} @media(prefers-reduced-motion:reduce){.ck{transition:none}} .ck__in{max-width:1100px;margin:0 auto;background:var(--ink);color:var(--on-dark); border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:1.1rem 1.2rem; display:grid;gap:.9rem;box-shadow:0 18px 50px rgba(0,0,0,.35)} @media(min-width:820px){.ck__in{grid-template-columns:1fr auto;align-items:center;gap:1.8rem;padding:1.1rem 1.6rem}} .ck__t{margin:0;font-family:var(--font-sans);font-size:.84rem;line-height:1.55;color:var(--on-dark-soft)} .ck__t b{color:var(--on-dark);font-weight:600} .ck__t a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid rgba(193,133,47,.55)} .ck__btns{display:flex;gap:.6rem;flex-wrap:wrap} .ck__b{font-family:var(--font-sans);font-size:.82rem;font-weight:600;letter-spacing:.02em; padding:.7rem 1.3rem;border-radius:var(--radius);cursor:pointer;white-space:nowrap; background:var(--on-dark);color:var(--ink);border:1px solid var(--on-dark);transition:opacity .2s} .ck__b:hover{opacity:.85} .ck__b--ghost{background:none;color:var(--on-dark-soft);border-color:var(--line-dark)} .ck__b--ghost:hover{color:var(--on-dark);border-color:var(--oak);opacity:1} @media(max-width:819px){.ck__b{flex:1 1 auto;text-align:center}} body.dm-open .ck{display:none} /* ---------- DOPYT: vyskakovacie okno ---------- */ .dm{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center; padding:max(2vh,12px) 12px;overflow-y:auto;overscroll-behavior:contain} .dm[hidden]{display:none} .dm__backdrop{position:fixed;inset:0;background:rgba(10,10,9,.72);backdrop-filter:blur(3px); opacity:0;transition:opacity .28s ease} .dm.is-open .dm__backdrop{opacity:1} .dm__panel{position:relative;z-index:1;width:100%;max-width:640px;margin:auto;background:var(--ink); color:var(--on-dark);border:1px solid var(--line-dark);border-radius:var(--radius-lg); padding:2.4rem 1.6rem 2rem;opacity:0;transform:translateY(14px) scale(.985); transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.25,1)} @media(min-width:640px){.dm__panel{padding:2.8rem 2.6rem 2.4rem}} .dm.is-open .dm__panel{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.dm__panel,.dm__backdrop{transition:none}} .dm__x{position:absolute;top:.7rem;right:.7rem;width:42px;height:42px;display:grid;place-items:center; background:none;border:1px solid var(--line-dark);border-radius:50%;color:var(--on-dark-soft); font-size:1.5rem;line-height:1;cursor:pointer;transition:color .2s,border-color .2s} .dm__x:hover{color:var(--on-dark);border-color:var(--oak)} .dm__head{margin-bottom:1.8rem;max-width:34ch} .dm__head .eyebrow{color:var(--oak);margin:0 0 .5rem} .dm__head h2{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.15;margin:0 0 .7rem;color:var(--on-dark)} .dm__dek{font-family:var(--font-sans);font-size:.92rem;line-height:1.6;color:var(--on-dark-soft);margin:0} .dm__dek a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid rgba(193,133,47,.55);white-space:nowrap} .lead-form--dm{grid-column:auto!important;margin-top:0!important} .lead-form--dm .lf__field{margin-bottom:1rem} body.dm-open{overflow:hidden}