/* ============================================================ RESPONSIVE — Mobile & small-screen overrides Studio One · Last stylesheet on every page ── Breakpoint reference ─────────────────────────────────── Tablet: 768–1199px @media (max-width: 1199px) Mobile: ≤767px @media (max-width: 767px) Mobile small: ≤479px @media (max-width: 479px) ── Page targeting ───────────────────────────────────────── .page-home / .page-usluge / .page-radovi / .page-faq / .page-kontakt .lang-sr / .lang-en [data-dark-hero] ── Rules ────────────────────────────────────────────────── - Never duplicate breakpoints already in component files. - Only override; never reset component files entirely. - Input font-size ≥ 16px everywhere (iOS zoom prevention). ============================================================ */ /* ────────────────────────────────────────────────────────── GLOBAL FIXES (all screen sizes) ────────────────────────────────────────────────────────── */ /* The sticky service-nav on the usluge page had top:0, placing it directly behind the 64px fixed main nav. Fix: offset by nav height so it sticks below the nav. */ .svc-nav { top: 64px; } /* Prevent horizontal overflow caused by animated/clipped hero elements and wide inline elements on small screens. IMPORTANT: only body — NOT html. Setting overflow-x: hidden on the element makes it the overflow container for position: sticky elements, breaking the sticky scroll driver in the WwD section (and any other sticky layout on the page). Setting it only on propagates the overflow constraint to the viewport without creating a new scroll context that traps sticky. */ body { overflow-x: hidden; } /* ────────────────────────────────────────────────────────── TABLET 768–1199px ────────────────────────────────────────────────────────── */ @media (max-width: 1199px) { /* ── Global section spacing ──────────────── */ .cta-band { padding: clamp(72px,10vw,120px) var(--gutter); } /* ── Homepage hero ───────────────────────── */ /* hero__stats are already hidden via hero.css at 1199px */ .hero__headline { font-size: clamp(52px,9vw,110px); margin-bottom: clamp(36px,5vw,64px); } .hero__eyebrow { margin-bottom: clamp(22px,3.5vw,40px); } /* ── Packages intro ──────────────────────── */ /* packages__top already collapses at 900px via packages.css */ } /* ────────────────────────────────────────────────────────── MOBILE ≤767px ────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* ══ GLOBAL ══════════════════════════════════════════════ */ /* iOS input zoom prevention — all inputs must be ≥16px */ input, textarea, select { font-size: 16px !important; } /* Touch-friendly tap targets */ .btn-primary, .btn-accent, .btn-outline-light, .nav__cta, .pkg-sel__item, .filter__tab { min-height: 44px; } .btn-primary, .btn-accent, .btn-outline-light { padding: 14px 24px; } /* Pills: increase tap area via padding (inline elements can't use min-height) */ .kontakt-pill + label { display: inline-flex; align-items: center; min-height: 40px; } .pkg-cat { min-height: 44px; display: inline-flex; align-items: center; } /* Section vertical spacing — tighten for mobile */ .section { padding-top: clamp(56px,9vw,80px); padding-bottom: clamp(56px,9vw,80px); } /* ══ NAVIGATION ═════════════════════════════════════════ */ /* Reduce nav height slightly on mobile */ .nav { height: 56px; padding: 0 20px; } /* Mobile menu — premium left-aligned editorial layout */ /* nav.css defaults to align-items:center; justify-content:center. On mobile we switch to top-left layout: items read left-aligned from below the nav bar, CTA separated at the bottom. The bottom padding adds safe-area-inset so the CTA never sits under an iPhone home-indicator. */ .nav__mobile { align-items: flex-start; justify-content: flex-start; padding: 88px var(--gutter) calc(clamp(32px,7vw,56px) + env(safe-area-inset-bottom, 0px)); gap: clamp(8px,3vw,18px); font-size: clamp(28px,8vw,40px); } /* iOS Safari: `body { overflow: hidden }` alone does not prevent scroll-through on the background page when the overlay is open. `touch-action: none` on the open overlay blocks touch-scroll events from reaching the underlying document. */ .nav__mobile.is-open { touch-action: none; } .nav__mobile-cta { font-size: 16px; margin-top: 16px; letter-spacing: .01em; font-family: var(--font-sans); opacity: .75; } .nav__mobile-lang { margin-top: 8px; font-size: 10px; } /* ══ HOMEPAGE ═══════════════════════════════════════════ */ /* ── Hero ─────────────────────────────────── */ /* Rebalance the vertical padding for mobile: top buffer is already handled by hero.css (calc(64px + …)); here we also reduce the bottom padding so the headline sits with more intentional weight on short phones without crowding the marquee below. */ .hero { padding-top: calc(56px + clamp(24px,5vw,44px)); padding-bottom: clamp(48px,8vw,80px); } .hero__headline { font-size: clamp(40px,10vw,64px); margin-bottom: clamp(28px,5vw,48px); } .hero__eyebrow { margin-bottom: clamp(16px,3vw,28px); } .hero__sub { font-size: 15px; opacity: .7; } /* hero__bottom already 1col at 768px via hero.css */ .hero__actions { gap: 12px; } /* ── Marquee ──────────────────────────────── */ .marquee { padding: 11px 0; } .marquee__i { font-size: 10px; padding: 0 clamp(16px,4vw,32px); } /* ── Manifesto ────────────────────────────── */ /* Grid already 1col at 900px via base.css */ .manifesto__title { font-size: clamp(32px,9vw,52px); } .manifesto__body { font-size: 15px; } .manifesto__list li { font-size: 11px; padding: 12px 0; } /* ── Services cards (homepage) ────────────── */ /* Already 1col at 900px via services.css */ .svc-card { min-height: 0; } .svc-card__name { font-size: clamp(24px,7vw,36px); } /* ── WwD — horizontal swipe cards ────────── */ /* Replaces the wwd.css 960px stacked-blocks fallback with a horizontally scrollable snap-card rail at ≤767px. Desktop sticky experience (≥961px) is untouched. */ /* Release the overflow: hidden clip so the full-bleed rail works */ .wwd-sticky { overflow: visible; } /* Dots: horizontal tappable step row */ .wwd__dots { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; height: auto; margin-bottom: clamp(20px,4vw,32px); } .wwd__dots::-webkit-scrollbar { display: none; } /* Trailing spacer so the last step tab doesn't press hard against the scroll container edge (mirrors the panels ::after spacer). */ .wwd__dots::after { content: ''; flex-shrink: 0; width: clamp(16px,4vw,24px); } .wwd__dot { flex-shrink: 0; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; /* guarantee tap size on iOS */ gap: 5px; padding-right: clamp(18px,4vw,28px); font-size: 9px; cursor: pointer; } .wwd__dot:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; } .wwd__dot-line { width: 16px; transition: width 300ms var(--ease); } .wwd__dot.is-active .wwd__dot-line { width: 28px; } /* Panels rail: full-bleed horizontal snap-scroll container. Negative margin breaks out of the parent gutter; padding restores the left breathing room and the ::after spacer fixes the iOS WebKit padding-right drop at the trailing edge. */ .wwd__panels { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); gap: 12px; min-height: auto; } .wwd__panels::-webkit-scrollbar { display: none; } .wwd__panels::after { content: ''; flex-shrink: 0; width: var(--gutter); } /* Each panel = snap card */ .wwd__panel { flex-shrink: 0; width: 82vw; scroll-snap-align: start; position: relative !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; visibility: visible !important; z-index: 1 !important; padding: clamp(28px,5vw,40px) clamp(18px,4vw,24px) !important; border: 1px solid rgba(10,10,10,.1) !important; } /* Panel typography */ .wwd__panel-title { font-size: clamp(22px,6vw,32px); } .wwd__panel-body { font-size: 14px; max-width: 100%; margin-bottom: 20px; } .wwd__micro { grid-template-columns: 1fr 1fr; gap: 8px 12px; } .wwd__micro li { font-size: 10px; padding-top: 8px; } /* ── Packages ─────────────────────────────── */ /* Mobile pricing pattern: - Category tabs: horizontally scrollable (Web / Social / Ads) - Selector: vertical, stacked tier rows (NOT horizontal strip). Each row reads as a full editorial line — tier num, name, price aligned right, best-for line below. Active row gets a left accent rule + soft fill. - Detail panel: stacks below, full width, generous spacing. Layout stacking from 900px is handled in packages.css; the overrides here are mobile typography + tap-target polish. */ .packages__title { font-size: clamp(28px,8vw,48px); } /* Category tabs — horizontal scroll keeps room for longer SR labels */ .pkg-cats { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .pkg-cats::-webkit-scrollbar { display: none; } /* WebKit (iOS Safari) drops the right-side padding on scrollable flex containers. The ::after spacer restores the visual breathing room at the trailing edge when the user scrolls to the last item. */ .pkg-cats::after { content: ''; flex-shrink: 0; width: var(--gutter); } .pkg-cat { flex-shrink: 0; padding: 14px 18px; font-size: 11px; } /* Selector — vertical list of tier rows */ .pkg-sel { padding: 4px 0; } .pkg-sel__item { padding: 18px 18px 16px 20px; gap: 6px; min-height: 64px; } .pkg-sel__item::before { top: 10px; bottom: 10px; } .pkg-sel__item-name { font-size: clamp(17px, 5vw, 20px); } .pkg-sel__item-price { font-size: 11px; } .pkg-sel__item-tag { font-size: 12px; padding-left: 26px; } .pkg-sel__divider { margin: 6px 18px 4px 20px; } /* Detail panel */ .pkg-detail { padding: clamp(24px, 6vw, 40px) clamp(20px, 5vw, 32px); } .pkg-d__top { margin-bottom: 18px; } .pkg-d__name { font-size: clamp(24px,7vw,38px); } .pkg-d__tagline { font-size: 14px; margin-top: 10px; } .pkg-d__bestfor { margin-top: 14px; padding: 9px 12px; border-radius: 14px; } .pkg-d__bestfor-text { font-size: 12.5px; } .pkg-d__price { font-size: clamp(22px, 7vw, 32px); } .pkg-d__feature { font-size: 13.5px; padding: 11px 0; } .pkg-d__cta { width: 100%; justify-content: center; padding: 14px 22px; } /* Outro — stacks vertically, soft prompt full-width */ .pkg-outro { margin-top: 18px; } .pkg-help { width: 100%; } /* ── Process (homepage) ───────────────────── */ /* Already 2col at 900px, 1col at 500px via misc.css */ .process__n { font-size: clamp(36px,10vw,56px); } .process__title { font-size: clamp(15px,4vw,20px); } /* ── Clients ──────────────────────────────── */ /* Already 1col at 800px via misc.css */ .clients__title { font-size: clamp(22px,7vw,36px); } .stat-n { font-size: clamp(36px,9vw,56px); } /* ── ForWhom ──────────────────────────────── */ /* Already 1col at 700px via misc.css */ .forwhom__col { padding: clamp(24px,5vw,36px) 20px; } /* ── Addl (homepage) ──────────────────────── */ /* Already 2col at 900px, 1col at 500px via misc.css */ .addl__name { font-size: clamp(16px,5vw,22px); } /* ── FAQ preview (homepage) ───────────────── */ .faq__q h3 { font-size: clamp(15px,4vw,18px); } .faq__ico { width: 28px; height: 28px; font-size: 16px; flex-shrink: 0; } /* Use a fast ease-out transition so the accordion feels snappy even with a large max-height ceiling. Without this, the default 500ms ease (slow-start) causes visible "dead time" on close when max-height is set much higher than the actual content height. */ .faq__a { transition: max-height 280ms ease-out; } /* Increase max-height ceiling — prevents long answers from clipping */ .faq__item.is-open .faq__a { max-height: 800px; } /* ── CTA band ─────────────────────────────── */ .cta-band { padding: clamp(60px,10vw,100px) var(--gutter); } .cta-band__title { font-size: clamp(36px,9vw,60px); margin-bottom: clamp(24px,5vw,40px); } .cta-band__actions { flex-direction: column; align-items: center; gap: 14px; } .cta-band__meta { flex-direction: column; align-items: center; gap: 8px; } /* ══ FOOTER ═════════════════════════════════════════════ */ /* Already stacks at 900px (2col) and 560px (1col) via misc.css */ .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .footer__brand-desc { max-width: 100%; } /* ══ USLUGE PAGE ════════════════════════════════════════ */ /* ── Hero ─────────────────────────────────── */ .usluge-hero { padding-top: calc(56px + clamp(36px,7vw,56px)); padding-bottom: clamp(36px,6vw,56px); } .usluge-hero__title { font-size: clamp(40px,10vw,68px); margin-bottom: 20px; } .usluge-hero__sub { font-size: 15px; max-width: 100%; } /* ── Sticky service nav ──────────────────── */ .svc-nav { top: 56px; /* match reduced mobile nav height */ } .svc-nav__inner { height: 46px; gap: 16px; } /* WebKit scroll-container trailing-edge spacer */ .svc-nav__inner::after { content: ''; flex-shrink: 0; width: var(--gutter); } .svc-nav__item { font-size: 10px; letter-spacing: .12em; } /* ── Service sections ─────────────────────── */ /* Already 1col at 960px via usluge.css */ .svc-section { padding: clamp(56px,8vw,80px) var(--gutter); } .svc-section--primary { padding-top: clamp(64px,10vw,96px); padding-bottom: clamp(64px,10vw,96px); } .svc-text__title { font-size: clamp(28px,8vw,48px); margin-bottom: 18px; } .svc-text__title--secondary { font-size: clamp(24px,7vw,40px); } .svc-text__body { font-size: 15px; margin-bottom: 24px; } .svc-section__bg-n { display: none; /* Hide decorative number on mobile for clarity */ } /* Visual mockups — scale down on mobile */ .sv-web, .sv-ads { max-width: 100%; } .sv-social { max-width: 180px; } /* ── Additional services (usluge page) ─────── */ /* Already 2col at 960px, 1col at 600px via usluge.css */ .addl-svc { padding: clamp(56px,8vw,80px) var(--gutter); } .addl-svc__title { font-size: clamp(24px,7vw,36px); } /* ── Package teaser (usluge page) ─────────── */ /* Already 1col at 960px via usluge.css */ .pkg-teaser { padding: clamp(56px,8vw,80px) var(--gutter); } .pkg-teaser__title { font-size: clamp(28px,8vw,48px); margin-bottom: 32px; } .pkg-teaser__item { padding: clamp(20px,4vw,32px); } /* ── Usluge process ───────────────────────── */ /* Already 2col at 960px, 1col at 600px via usluge.css */ .usluge-process { padding: clamp(56px,8vw,80px) var(--gutter); } .usluge-process__title { font-size: clamp(24px,7vw,36px); } /* ══ RADOVI PAGE ════════════════════════════════════════ */ /* ── Hero ─────────────────────────────────── */ .radovi-hero { padding-top: calc(56px + clamp(36px,7vw,56px)); padding-bottom: clamp(36px,6vw,56px); } .radovi-hero__title { font-size: clamp(40px,10vw,68px); } .radovi-hero__lede { max-width: 100%; } .radovi-showcase { padding-bottom: clamp(72px, 10vw, 120px); } .radovi-showcase__intro { padding-top: clamp(22px, 4vw, 32px); padding-bottom: clamp(32px, 5vw, 52px); } .radovi-showcase__title { font-size: clamp(30px, 8vw, 50px); } .work-card + .work-card { margin-top: clamp(48px, 7vw, 72px); padding-top: clamp(48px, 7vw, 72px); } .work-card__title { font-size: clamp(32px, 9vw, 54px); } .work-card__description { font-size: 15px; } .work-card__browser-state { display: none; } /* ══ FAQ PAGE ═══════════════════════════════════════════ */ /* ── Hero ─────────────────────────────────── */ /* Already 1col at 900px via faq-page.css */ .faq-hero { padding-top: calc(56px + clamp(36px,6vw,52px)); padding-bottom: clamp(32px,5vw,52px); } .faq-hero__title { font-size: clamp(32px,9vw,56px); } .faq-hero__sub { font-size: 15px; } /* ── Intro ────────────────────────────────── */ /* Already 1col at 700px via faq-page.css */ .faq-intro { padding: clamp(40px,6vw,64px) var(--gutter); } .faq-intro__text { font-size: clamp(16px,4vw,20px); } /* ── Body ─────────────────────────────────── */ .faq-body { padding-bottom: clamp(60px,8vw,100px); } .faq-group { padding-top: clamp(44px,7vw,72px); margin-top: clamp(44px,7vw,72px); } .faq-group__n { font-size: clamp(40px,10vw,64px); } .faq-group__title { font-size: clamp(20px,6vw,30px); } .faq-group__intro { max-width: 100%; } /* ── Accordion tap zones ──────────────────── */ .faq-body .faq__q { padding: clamp(18px,3vw,24px) 0; gap: 16px; } .faq-body .faq__q h3 { font-size: clamp(15px,4vw,18px); } .faq-body .faq__ico { width: 30px; height: 30px; font-size: 16px; flex-shrink: 0; } /* Large ceiling so no answer clips (even multi-paragraph EN answers). The fast ease-out transition set on .faq__a above keeps it snappy. */ .faq-body .faq__item.is-open .faq__a { max-height: 1500px; } /* ── FAQ CTA ──────────────────────────────── */ .faq-cta { padding: clamp(60px,10vw,96px) var(--gutter); } .faq-cta__title { font-size: clamp(26px,8vw,44px); } .faq-cta__actions { flex-direction: column; align-items: center; gap: 14px; } /* ══ KONTAKT PAGE ═══════════════════════════════════════ */ /* ── Hero ─────────────────────────────────── */ /* kontakt.css and faq-page.css both hardcode calc(64px + ...) for top padding. On mobile the nav shrinks to 56px, so we correct here to avoid ~8px of extra dead space. */ .kontakt-hero { padding-top: calc(56px + clamp(36px,6vw,52px)); padding-bottom: clamp(36px,5vw,56px); } .kontakt-hero__title { font-size: clamp(32px,9vw,54px); } .kontakt-hero__sub { font-size: 15px; } /* Trust list stays visible on mobile (it's doing real conversion work). Tighten its internal rhythm. */ .kontakt-trust__label { margin-bottom: 14px; } .kontakt-trust li { padding: 12px 0; gap: 14px; } .kontakt-trust__t { font-size: 13px; } /* ── Main section ─────────────────────────── */ .kontakt-main { padding: clamp(52px,7vw,80px) var(--gutter); } /* Grid already 1col at 1000px via kontakt.css */ /* ── Form ─────────────────────────────────── */ .kontakt-formhead { font-size: 11px; letter-spacing: .18em; gap: 12px; margin: clamp(6px,1vw,14px) 0 clamp(18px,3vw,24px); } .kontakt-formhead__n { font-size: 18px; } .kontakt-field { margin-bottom: clamp(24px,5vw,36px); } .kontakt-field__label { font-size: 11px; /* match --t-xs token; 9px was unreadably small */ letter-spacing: .18em; } /* Validation error message: also bump from component's 9px to 11px */ .kontakt-field__error { font-size: 11px; } .kontakt-field__hint { font-size: 11px; letter-spacing: .16em; margin-top: 10px; } /* Row already 1col at 600px via kontakt.css */ /* ── Pill selectors ───────────────────────── */ .kontakt-pills { gap: 8px; padding-bottom: 12px; } .kontakt-pill + label { font-size: 12px; padding: 10px 14px; } /* ── Submit area ──────────────────────────── */ .kontakt-submit { flex-direction: column; align-items: flex-start; gap: 18px; } .kontakt-submit__meta { max-width: 100%; gap: 10px; } .kontakt-submit__note { font-size: 13px; line-height: 1.55; } .kontakt-submit__privacy { font-size: 11px; letter-spacing: .16em; } /* ── Success state (mobile) ────────────────── */ .kontakt-success { padding: clamp(32px,7vw,56px) 0; } .kontakt-success__title { font-size: clamp(24px,7vw,36px); } .kontakt-success__text { font-size: 15px; } .kontakt-success__links { flex-direction: column; gap: 14px; align-items: flex-start; } /* ── Info block ───────────────────────────── */ .kontakt-info__title { font-size: clamp(20px,6vw,28px); } .kontakt-step__n { font-size: clamp(28px,8vw,40px); width: 40px; } .kontakt-step { gap: 14px; } .kontakt-info__note { max-width: 100%; font-size: 13px; } /* ── Reassurance ──────────────────────────── */ .kontakt-reassurance { padding: clamp(36px,6vw,56px) var(--gutter); } .kontakt-reassurance__inner { flex-direction: column; align-items: flex-start; gap: clamp(20px,4vw,32px); } .kontakt-reassurance__text { font-size: clamp(15px,4vw,18px); } /* ── Alt contact ──────────────────────────── */ .kontakt-alt { padding: clamp(36px,6vw,56px) var(--gutter); } .kontakt-alt__email { font-size: clamp(15px,4vw,18px); } /* ── Closing block ────────────────────────── */ .kontakt-close { padding: clamp(64px,10vw,100px) var(--gutter); } .kontakt-close__title { font-size: clamp(24px,7vw,40px); } } /* ────────────────────────────────────────────────────────── MOBILE SMALL ≤479px ────────────────────────────────────────────────────────── */ @media (max-width: 479px) { /* ── Global spacing tighten ───────────────── */ .section { padding-top: clamp(44px,10vw,64px); padding-bottom: clamp(44px,10vw,64px); } /* ── Navigation ───────────────────────────── */ .nav { padding: 0 16px; } .nav__logo { font-size: 17px; } .nav__mobile { font-size: clamp(26px,8vw,36px); gap: 18px; } /* ── Homepage hero ───────────────────────── */ .hero__headline { font-size: clamp(36px,11vw,52px); max-width: 100%; } .hero__sub { font-size: 14px; } /* Full-width primary CTA at ≤479px — mirrors the CTA band and kontakt submit patterns already used site-wide. Ghost link sits centered underneath so the hierarchy reads cleanly on phones. */ .hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 14px; } .hero__actions .btn-primary { width: 100%; justify-content: center; } .hero__actions .btn-ghost { justify-content: center; text-align: center; } /* ── Manifesto ────────────────────────────── */ .manifesto__title { font-size: clamp(28px,10vw,44px); } /* ── Services cards ───────────────────────── */ .svc-card__name { font-size: clamp(22px,8vw,32px); } /* ── Packages ─────────────────────────────── */ .packages__title { font-size: clamp(24px,9vw,40px); } /* At very narrow widths the selector row's 3-col grid (num · name · price) can crowd. Drop the price to a second line, name keeps its full width, so each tier stays readable without truncation. */ .pkg-sel__item-top { grid-template-columns: auto 1fr; row-gap: 4px; } .pkg-sel__item-price { grid-column: 2; text-align: left; opacity: .7; } .pkg-sel__item-tag { padding-left: 0; } .pkg-d__name { font-size: clamp(20px,7vw,30px); } .pkg-d__price { font-size: clamp(18px,6vw,26px); } .pkg-d__bestfor { width: 100%; } /* ── CTA band ─────────────────────────────── */ .cta-band { padding: clamp(52px,10vw,80px) var(--gutter); } .cta-band__title { font-size: clamp(30px,10vw,48px); } .cta-band__actions { width: 100%; flex-direction: column; align-items: center; } .cta-band__actions .btn-primary, .cta-band__actions .btn-primary-light, .cta-band__actions .btn-accent, .cta-band__actions .btn-outline-light { width: 100%; justify-content: center; text-align: center; } /* ── Footer ───────────────────────────────── */ .footer { padding-top: clamp(44px,8vw,64px); } .footer__brand-name { font-size: clamp(18px,6vw,24px); } /* ── Usluge hero ──────────────────────────── */ .usluge-hero__title { font-size: clamp(36px,11vw,56px); } /* ── Usluge service sections ──────────────── */ .svc-text__title { font-size: clamp(24px,9vw,40px); } .svc-text__title--secondary { font-size: clamp(22px,8vw,34px); } /* ── Radovi hero ──────────────────────────── */ .radovi-hero__title { font-size: clamp(36px,11vw,56px); } .radovi-showcase__title { font-size: clamp(28px,9vw,40px); } .work-card__title { font-size: clamp(28px,10vw,42px); } .work-card__browser-address { padding: 9px 12px; } .work-card__preview-note { left: 16px; right: 16px; bottom: 16px; } /* ── FAQ hero ─────────────────────────────── */ .faq-hero__title { font-size: clamp(28px,10vw,44px); } .faq-group__title { font-size: clamp(18px,6vw,26px); } .faq-cta__title { font-size: clamp(22px,8vw,36px); } /* ── Kontakt hero ─────────────────────────── */ .kontakt-hero__title { font-size: clamp(28px,10vw,44px); } .kontakt-close__title { font-size: clamp(22px,8vw,34px); } /* ── Kontakt pills ────────────────────────── */ .kontakt-pill + label { font-size: 11px; padding: 9px 12px; } /* ── Submit button ────────────────────────── */ .kontakt-submit .btn-primary { width: 100%; justify-content: center; } /* ── FAQ body accordion ───────────────────── */ .faq-body .faq__q h3 { font-size: 14px; } }