... : each card sticks a little lower than the one before and shrinks back as the next one covers it. */ html.wm-on .wm-stack__card { position: sticky; top: calc(var(--wm-stack-top, 150px) + var(--wm-i, 0) * 22px); transform: scale(calc(1 - var(--wm-cover, 0) * .07)); transform-origin: 50% 0; } html.wm-on .wm-stack__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: #1e0a1a; opacity: calc(var(--wm-cover, 0) * .32); } .wm-stack { display: flex; flex-direction: column; gap: 40px; } .wm-stack__card { position: relative; } /* 7. tilt on hover: data-tilt (cards, visuals) */ html.wm-on [data-tilt] { transition: transform .5s var(--wm-ease); transform: perspective(1200px) rotateX(var(--wm-rx, 0deg)) rotateY(var(--wm-ry, 0deg)); } /* 8. scroll progress bar (added by wine-motion.js unless has .wn-noprogress) */ .wm-progress { position: fixed; z-index: 70; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; } .wm-progress i { display: block; height: 100%; background: linear-gradient(90deg, #b4235a, #e8466f 55%, #ffb3c7); transform-origin: 0 50%; transform: scaleX(var(--wm-sp, 0)); } html.wm-on.wm-sda .wm-progress i { animation: wm-grow linear both; animation-timeline: scroll(root block); } @keyframes wm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* 9. loops only while visible: data-play gets .is-live on screen; CSS loops inside pause otherwise (WCAG 2.2.2) */ html.wm-on [data-play]:not(.is-live) *, html.wm-on [data-play]:not(.is-live) *::before, html.wm-on [data-play]:not(.is-live) *::after { animation-play-state: paused !important; } /* 10. LITE motion (21 Oct 2026): below 1024px and on touch screens wine-motion.js swaps html.wm-on for html.wm-lite. Only the one-shot reveals run there, every direction as a short rise (no sideways moves that could push the page wider); pinned stories, sideways stages, stacks, parallax, scrubbing, drawing and tilt keep their static layout. */ html.wm-lite [data-reveal], html.wm-lite [data-split] { transition: opacity .6s var(--wm-ease), transform .7s var(--wm-ease); transition-delay: var(--wm-delay, 0ms); } html.wm-lite [data-reveal]:not([data-reveal="stagger"]):not([data-reveal="bars"]):not(.is-in), html.wm-lite [data-split]:not([data-reveal]):not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); } html.wm-lite [data-reveal="fade"]:not(.is-in), html.wm-lite [data-reveal="blur"]:not(.is-in) { transform: none; } html.wm-lite [data-reveal="scale"]:not(.is-in) { transform: scale(.97); } html.wm-lite [data-reveal="stagger"] > * { transition: opacity .5s var(--wm-ease), transform .6s var(--wm-ease); transition-delay: calc(min(var(--wm-i, 0), 6) * 60ms + var(--wm-delay, 0ms)); } html.wm-lite [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translate3d(0, 14px, 0); } html.wm-lite [data-reveal="bars"] i { transition: transform .9s var(--wm-ease); transition-delay: calc(min(var(--wm-i, 0), 10) * 60ms + 100ms); } html.wm-lite [data-reveal="bars"]:not(.is-in) i { transform: scaleX(0); } html.wm-lite [data-reveal="bars"][data-axis="y"] i { transform-origin: 50% 100%; } html.wm-lite [data-reveal="bars"][data-axis="y"].is-in i { transform: scaleY(var(--v, 1)); } html.wm-lite [data-reveal="bars"][data-axis="y"]:not(.is-in) i { transform: scaleY(0); } html.wm-lite .wn-marquee.is-looping .wn-marquee__track { animation: wm-marquee var(--wm-dur, 50s) linear infinite; } html.wm-lite .wn-marquee.is-looping:not(.is-live) .wn-marquee__track { animation-play-state: paused; } html.wm-lite [data-play]:not(.is-live) *, html.wm-lite [data-play]:not(.is-live) *::before, html.wm-lite [data-play]:not(.is-live) *::after { animation-play-state: paused !important; } html.wm-lite.wm-sda .wm-progress i { animation: wm-grow linear both; animation-timeline: scroll(root block); } /* the hero (and the first section of a page without .wn-hero) on small screens: shown at first paint, before wine-motion.js runs (the snippet arms html.wm-on), so its text never waits for a reveal and nothing moves */ @media (max-width: 1023.98px), (hover: none) and (pointer: coarse) { html:is(.wm-on, .wm-lite) :is(.wn-hero, .wn-main > section:first-of-type) [data-reveal]:not([data-reveal="stagger"]):not([data-reveal="bars"]):not(.is-in), html:is(.wm-on, .wm-lite) :is(.wn-hero, .wn-main > section:first-of-type) [data-reveal="stagger"]:not(.is-in) > *, html:is(.wm-on, .wm-lite) :is(.wn-hero, .wn-main > section:first-of-type) [data-split]:not(.is-in), html:is(.wm-on, .wm-lite) :is(.wn-hero, .wn-main > section:first-of-type) [data-split]:not(.is-in) .wm-w > span { opacity: 1; transform: none; filter: none; transition: none; } } /* static: reduced motion, ?static=1, print */ @media (prefers-reduced-motion: reduce) { html [data-reveal], html [data-reveal]:not([data-reveal="bars"]) > *, html [data-split] .wm-w > span, html [data-scrub], html [data-parallax], html [data-tilt], html .wm-pin [data-step] { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } /* bars keep their resting length (scaleX(var(--v)) / scaleY / width, as on ?static=1): only the movement stops */ html [data-reveal="bars"] i { animation: none !important; transition: none !important; } html [data-draw] .wm-draw { stroke-dasharray: none !important; animation: none !important; } html .wm-pin, html .wm-h { height: auto !important; } html .wm-pin__sticky, html .wm-h__sticky, html .wm-stack__card { position: relative !important; height: auto !important; } .wn-marquee__track { animation: none !important; } } @media print { html.wm-on [data-reveal], html.wm-on [data-reveal] > *, html.wm-on [data-split] .wm-w > span { opacity: 1 !important; transform: none !important; filter: none !important; } html.wm-lite [data-reveal], html.wm-lite [data-reveal] > *, html.wm-lite [data-split] { opacity: 1 !important; transform: none !important; filter: none !important; } } /* ===================================================================================================== RESPONSIVE: the shared components on small laptops, tablets and phones (breakpoints: the block at the top). Template blocks (t-*.css) load after this file and fix their own parts with the same breakpoints. ===================================================================================================== */ /* for templates: a wide table or drawing scrolls inside this box, never the page (no page uses it yet) */ .wn-tscroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* ---------- 1200: small laptop ---------- */ @media (max-width: 1199.98px) { /* headings scale with the screen (equal to the desktop sizes at 1200, about 60% of them at 390) */ .wn-display { font-size: clamp(40px, 5.43vw + 22.8px, 88px); line-height: 1.05; letter-spacing: -.025em; } .wn-h1 { font-size: clamp(34px, 3.21vw + 25.5px, 64px); line-height: 1.1; letter-spacing: -.022em; } .wn-h2 { font-size: clamp(28px, 1.98vw + 24.3px, 48px); line-height: 1.18; letter-spacing: -.02em; } .wn-h3 { font-size: clamp(22px, .74vw + 21.1px, 30px); line-height: 1.2; letter-spacing: -.016em; } .wn-split { gap: 56px; } .wn-hero__grid { gap: 48px; } .wn-faq { gap: 56px; } .wn-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wn-steps > li { grid-template-columns: 96px minmax(0, 360px) minmax(0, 1fr); column-gap: 28px; } /* related-card titles: a long word ("Segmentation", "Programming & hosting") wraps inside its card at 1024 */ .wn-rcard b { font-size: 21px; line-height: 27px; overflow-wrap: anywhere; } } /* ---------- 1024: tablet landscape and below ---------- */ @media (max-width: 1023.98px) { :root { --wn-sec-y: 96px; } .wn-sec--sm { padding: 64px 0; } .wn-sec--lg { padding: 120px 0; } .wn-head { margin-bottom: 44px; } .wn-head--flush { margin-bottom: 0; } /* text + picture splits stack (the picture follows the text) */ .wn-split, .wn-split--wide, .wn-split--narrow { grid-template-columns: minmax(0, 1fr); gap: 48px; } .wn-grid--3, .wn-grid--4, .wn-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wn-sticky { position: static; } /* hero: one column, the visual under the text */ .wn-hero { padding: var(--wn-hdr-clear, 96px) 0 88px; } .wn-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } .wn-hero__solo { max-width: 760px; } .wn-hero__glow { width: 640px; height: 640px; right: -30%; } /* the closing CTA's office line reads at 16px on tablets too (phone agents, 21 Oct 2026) */ .wn-cta__office { font-size: 16px; line-height: 22px; } /* stat row: four still fit side by side */ .wn-stat { min-width: 140px; padding: 24px 20px 8px 0; } .wn-stat + .wn-stat { padding-left: 20px; } .wn-stat b { font-size: 52px; letter-spacing: -1.3px; } /* numbered steps: number | title and text */ .wn-steps > li { grid-template-columns: 80px minmax(0, 1fr); column-gap: 24px; row-gap: 8px; } .wn-steps > li::before { grid-row: 1 / span 2; font-size: 38px; } .wn-steps > li > * { grid-column: 2; } .wn-ticks--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* FAQ: the heading above the questions, no sticky column */ .wn-faq { grid-template-columns: minmax(0, 1fr); gap: 36px; } .wn-faq__h { position: static; } .wn-faq__a { padding-right: 32px; } /* closing CTA */ .wn-cta { padding: 32px 0 96px; } .wn-cta__box { padding: 88px 48px 64px; border-radius: var(--wn-r-lg); } /* related cards: two columns */ .wn-related, .wn-related--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* kit visuals */ .wn-vis { height: 500px; } .wn-vis--sm { height: 420px; } .wn-vis--lg { height: 560px; } .wn-vis--auto { height: auto; } /* media never wider than its column */ .wn-main video, .wn-main canvas, .wn-main iframe { max-width: 100%; } } /* ---------- 768: tablet portrait, phones in landscape ---------- */ @media (max-width: 767.98px) { :root { --wn-sec-y: 72px; } /* a long word (a URL, a product code) breaks instead of running out of a shared block */ .wn-prose, .wn-faq, .wn-card, .wn-rcard, .wn-quote, .wn-cta__box, .wn-ticks, .wn-steps { overflow-wrap: break-word; } .wn-sec--sm { padding: 56px 0; } .wn-sec--lg { padding: 96px 0; } /* text: never under 16px for reading copy */ .wn-lead { font-size: 18px; line-height: 28px; } .wn-body { font-size: 17px; line-height: 27px; } .wn-prose p { font-size: 17px; line-height: 28px; } .wn-prose p + p { margin-top: 16px; } .wn-head { gap: 12px; margin-bottom: 36px; } .wn-head--flush { margin-bottom: 0; } .wn-head .wn-sub { font-size: 18px; line-height: 28px; } .wn-split, .wn-split--wide, .wn-split--narrow { gap: 36px; } .wn-grid { gap: 16px; } .wn-grid--2, .wn-grid--3, .wn-grid--4, .wn-grid--5 { grid-template-columns: minmax(0, 1fr); } /* hero */ .wn-hero { padding: var(--wn-hdr-clear-m, 88px) 0 64px; } .wn-hero__txt { gap: 18px; } .wn-hero__ctas { margin-top: 10px; gap: 12px; } .wn-hero__glow { width: 480px; height: 480px; right: -45%; top: 8%; } .wn-crumbs { column-gap: 8px; row-gap: 6px; } /* cards */ .wn-card { padding: 24px; } /* stat row: two by two (an odd last one takes the full row) */ .wn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .wn-stat { min-width: 0; padding: 20px 16px 16px 0; } .wn-stat + .wn-stat { padding-left: 0; border-left: 0; } .wn-stat:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--wn-line); } .wn-stat:nth-child(n+3) { border-top: 1px solid var(--wn-line); } .wn-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .wn-stats--dark .wn-stat:nth-child(n+3) { border-top-color: rgba(255,179,199,.22); } .wn-stat b { font-size: clamp(34px, 8vw + 6px, 48px); letter-spacing: -.025em; } /* numbered steps */ .wn-steps > li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 24px 0; } .wn-steps > li::before { font-size: 30px; } .wn-steps h3 { font-size: 20px; line-height: 27px; } .wn-steps p { font-size: 16px; line-height: 25px; } /* ticked lists and chips */ .wn-ticks--2, .wn-ticks--3 { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .wn-chip { height: auto; min-height: 34px; padding: 8px 14px; line-height: 18px; white-space: normal; } /* drawn bars: label and value on one line, the bar under them */ .wn-bars li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; } .wn-bars__l { grid-column: 1; grid-row: 1; } .wn-bars__v { grid-column: 2; grid-row: 1; } .wn-bars__t { grid-column: 1 / -1; grid-row: 2; } /* quote */ .wn-quote { padding: 28px 24px; gap: 14px; } .wn-quote blockquote { font-size: 21px; line-height: 30px; } /* FAQ */ .wn-faq { gap: 28px; } .wn-faq__item summary { gap: 16px; padding: 20px 0; font-size: 18px; line-height: 26px; } .wn-faq__a { padding: 0 0 24px; } .wn-faq__a p { font-size: 17px; line-height: 27px; } /* closing CTA */ .wn-cta { padding: 24px 0 72px; } .wn-cta__box { padding: 64px 24px 48px; gap: 14px; border-radius: 28px; } .wn-cta__glow { width: 560px; height: 380px; margin-left: -280px; } .wn-cta__btns { margin-top: 10px; gap: 12px; } .wn-cta__office { flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: 16px; line-height: 22px; } /* related cards: one column */ .wn-related, .wn-related--3 { grid-template-columns: minmax(0, 1fr); gap: 14px; } .wn-rcard { min-height: 0; padding: 24px 24px 64px; } .wn-rcard b { font-size: 21px; line-height: 27px; } .wn-rcard__go { left: 24px; bottom: 22px; } /* kit visuals */ .wn-vis { height: 420px; border-radius: 22px; } /* the offices map (wine-kit.css .sk-map, generated from the kit): its city names drawn at about 8px on a phone read at 12px or more, centred over their pins so none runs past the edge; the role lines under them (6px) are left out, the page text names each office's role (21 Oct 2026) */ .wkit .sk-map svg text { font-size: 25px; text-anchor: middle; } .wkit .sk-map svg text.r { display: none; } .wn-vis--sm { height: 360px; } .wn-vis--lg { height: 460px; } .wn-vis--auto { height: auto; } /* code and tables scroll inside their box, never the page */ .wn-main pre { max-width: 100%; overflow-x: auto; } .wn-prose table, .wn-table { display: block; max-width: 100%; overflow-x: auto; } } /* ---------- 480: phone ---------- */ @media (max-width: 479.98px) { :root { --wn-sec-y: 64px; } .wn-sec--sm { padding: 48px 0; } .wn-head { margin-bottom: 32px; } .wn-head--flush { margin-bottom: 0; } /* button rows: one full-width button per line; long labels wrap instead of running off the screen */ .wn-hero__ctas, .wn-cta__btns { flex-direction: column; align-items: stretch; align-self: stretch; } .wn-hero__ctas > .btn, .wn-cta__btns > .btn { width: 100%; } .wn-hero__ctas > :not(.btn) { align-self: flex-start; } .wn-cta__btns > :not(.btn) { align-self: center; } .wn-main .btn { max-width: 100%; white-space: normal; text-align: center; } .wn-card { padding: 22px 20px; } .wn-quote { padding: 24px 20px; } .wn-cta__box { padding: 56px 20px 40px; border-radius: 24px; } .wn-rcard { padding: 22px 20px 60px; } .wn-rcard__go { left: 20px; } .wn-steps > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; } .wn-steps > li::before { font-size: 26px; } } /* ---------- small screens and touch: form fields at 16px (iOS zooms into smaller ones) ---------- */ @media (max-width: 767.98px), (hover: none) and (pointer: coarse) { .wn-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea) { font-size: 16px !important; } } /* ---------- touch screens: 44px tap targets without moving the layout, no hover lifts that stick after a tap ---------- */ @media (hover: none) and (pointer: coarse) { .wn-crumbs a { display: inline-block; padding: 13px 13px; margin: -13px -13px; } .wn-main .tlink { padding-top: 15px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; } .wn-main .tlink::after { bottom: 7px; } a.wn-card:hover, .wn-card--lift:hover, .wn-rcard:hover, .wn-rcard:hover .wn-rcard__go, .wn-main .tlink:hover, .btn:hover .wn-arr { transform: none; } } /* the main column clips anything wider than the screen; overflow-x: clip where supported (keeps sticky working) */ @supports not (overflow-x: clip) { @media (max-width: 1023.98px) { .wn-main { overflow-x: hidden; } } }