/* ============================================================= Wildlife Lookout case study — conversion layout on NC tokens Loaded after styles.css; consumes the page-local token block set on #top (--ink, --paper, --accent, --accent-ink, …). Page accent is the greenish yellow of the platform's own buttons, which is the design system's --color-secondary-lime. Two stops: --accent the lime itself, for dots, rules, tinted fills, and any accent text sitting on the dark panels --accent-ink a deep mix of it, for accent text on the paper background, where the lime cannot clear contrast The primary button stays black, per the site-wide .btn--dark. Namespace: .wl-* ============================================================= */ /* ---------- Scroll reveal (progressive enhancement, js/reveal.js) Only applies once gets .nc-reveal, so with JS off, reduced motion, or no IntersectionObserver everything shows. */ html.nc-reveal [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } html.nc-reveal [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- Layout primitives ---------- */ .wl-section { padding: clamp(60px, 7.5vw, 116px) var(--gutter); } .wl-section--tight { padding-top: clamp(20px, 3vw, 40px); } .wl-section--flush { padding-bottom: clamp(24px, 3vw, 44px); } /* .wl-section--rule: the line itself lives in styles.css (.nc-rule group) so it stays inside the content column instead of spanning the viewport. */ .wl-prose { max-width: 62ch; } /* ---------- Shared type ---------- */ .wl-eyebrow { margin: 0 0 18px; } .wl-h2 { font-family: var(--ff-title); font-weight: 700; font-size: clamp(1.95rem, 4.1vw, 2.95rem); line-height: 1.03; letter-spacing: -0.035em; color: var(--ink); margin: 0; text-wrap: balance; } .wl-h2--dark { color: #fff; } .wl-h3 { font-family: var(--ff-title); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; } .wl-lead { font-family: var(--ff-body); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-60); margin: 22px 0 0; } .wl-body { font-family: var(--ff-body); font-size: 16.5px; line-height: 1.65; color: var(--ink-60); margin: 0; } .wl-body + .wl-body { margin-top: 16px; } /* Heading emphasis is a flat accent colour, never italics and never a gradient fill: the deep stop clears contrast on the paper background. */ .wl-accent { color: var(--accent-ink); } /* ---------- Buttons ---------- */ .wl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ff-title); font-size: 15px; font-weight: 600; padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s; white-space: nowrap; } .wl-btn__arrow { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .wl-btn:hover .wl-btn__arrow { transform: translateX(3px); } /* Black primary, neutral shadow. On dark panels use .wl-btn--light instead. */ .wl-btn--primary { background: var(--ink); color: #fff; box-shadow: 0 14px 30px -16px rgba(10, 10, 8, 0.7); } .wl-btn--primary:hover { background: var(--ink-elevated); transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(10, 10, 8, 0.8); } .wl-btn--ghost { border-color: var(--border-ink-strong); color: var(--ink); } .wl-btn--ghost:hover { border-color: var(--ink); background: rgba(10, 10, 8, 0.05); transform: translateY(-2px); } .wl-btn--light { background: #fff; color: var(--ink); } .wl-btn--light:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.6); } .wl-btn--ghost-dark { border-color: rgba(255, 255, 255, 0.3); color: var(--on-dark); } .wl-btn--ghost-dark:hover { border-color: rgba(255, 255, 255, 0.72); color: #fff; transform: translateY(-2px); } /* ---------- Outcome band (dark metrics) ---------- */ .wl-band { position: relative; overflow: hidden; background: var(--ink); border-radius: 28px; padding: clamp(26px, 2.8vw, 38px) clamp(24px, 3.6vw, 48px); } .wl-band::before, .wl-band::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; } .wl-band::before { top: -46%; left: -6%; background: radial-gradient(circle, rgba(196, 231, 66, 0.20), transparent 68%); } .wl-band::after { bottom: -50%; right: -6%; background: radial-gradient(circle, rgba(196, 231, 66, 0.14), transparent 68%); } .wl-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); } .wl-metric { position: relative; padding-left: clamp(20px, 2.4vw, 34px); } .wl-metric:first-child { padding-left: 0; } .wl-metric::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.16); } .wl-metric:first-child::before { display: none; } /* Label above, value below: these hold short facts, not numerals. */ .wl-metric__label { display: block; margin: 0 0 9px; font-family: var(--ff-title); font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-dark-muted); } .wl-metric__value { font-family: var(--ff-title); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -0.022em; color: #fff; display: block; } .wl-metric__note { display: block; margin-top: 5px; font-family: var(--ff-body); font-size: 13.5px; line-height: 1.45; color: var(--on-dark-muted); } /* ---------- Two-column intro ---------- */ .wl-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .wl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .wl-chip { display: inline-flex; align-items: center; font-family: var(--ff-title); font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface-light); border: 1px solid var(--border-ink); padding: 9px 16px; border-radius: 999px; } .wl-quotepanel { position: relative; background: var(--surface-light); border: 1px solid var(--border-ink); border-radius: 24px; padding: clamp(26px, 3vw, 38px); } .wl-quotepanel__kicker { font-family: var(--ff-title); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); margin: 0; } .wl-quotepanel__mark { font-family: var(--ff-title); font-size: 56px; font-weight: 800; line-height: 0.7; color: var(--accent-ink); } .wl-quotepanel__text { font-family: var(--ff-title); font-weight: 600; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 0; } .wl-quotepanel__meta { font-family: var(--ff-body); font-size: 14px; line-height: 1.5; color: var(--ink-45); margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--border-ink); } /* ---------- Before / after comparison ---------- */ .wl-compare { border: 1px solid var(--border-ink); border-radius: 24px; overflow: hidden; background: var(--surface-light); } .wl-compare__head, .wl-compare__row { display: grid; grid-template-columns: 1fr 1fr; } .wl-compare__head > div { font-family: var(--ff-title); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px clamp(18px, 2.2vw, 28px); } .wl-compare__head > div:first-child { color: var(--ink-35); } .wl-compare__head > div:last-child { color: var(--ink); background: rgba(196, 231, 66, 0.16); } .wl-compare__row > div { display: flex; gap: 12px; align-items: flex-start; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 28px); border-top: 1px solid var(--border-ink); font-family: var(--ff-body); font-size: 15.5px; line-height: 1.5; } .wl-compare__row > div:first-child { color: var(--ink-45); } .wl-compare__row > div:last-child { color: var(--ink); background: rgba(196, 231, 66, 0.16); } .wl-compare__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; } .wl-compare__icon--x { color: var(--ink-25); } .wl-compare__icon--check { color: var(--accent-ink); } /* ---------- Work overview ---------- */ .wl-work-intro { max-width: 720px; margin-inline: auto; text-align: center; } .wl-work-display { display: grid; grid-template-columns: minmax(280px, 0.6fr) minmax(0, 1.4fr); gap: clamp(40px, 5vw, 64px); align-items: start; margin-top: clamp(40px, 5vw, 70px); } .wl-work-intro__list { padding-top: 4px; } .wl-work-intro__list .wl-h3 { max-width: 12ch; margin: 0; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.08; } .wl-work-intro__list .wl-list { gap: 0; margin-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--border-ink); } .wl-work-intro__list .wl-list li { gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-ink); font-size: 15.5px; line-height: 1.4; color: var(--ink); } .wl-work-intro__list .wl-list li::before { width: 8px; height: 8px; margin-top: 7px; background: var(--accent); } /* ---------- Three-up product illustrations ---------- */ .wl-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); } .wl-showcase__item { min-width: 0; margin: 0; } .wl-showcase__media { display: flex; align-items: center; justify-content: center; } .wl-showcase__media .wl-phone { width: min(230px, 88%); } /* The phone sits dead centre in front of the desktop shot and hangs below the frame. Centring is the point: the phone screenshot is a crop of the middle of the same scene, so covering the middle hides the desktop's copy of it instead of showing the same content twice side by side. Size comes from top/bottom, not from a width: the phone fills the padding box top to bottom and aspect-ratio derives the width from that height. So a taller desktop screenshot gets a proportionally taller phone with no per-image tuning. --wl-phone-bleed is the one number to turn. It is symmetric padding, so the frame's centre line and the padding box's centre line are the same, which is what keeps the phone vertically centred on the desktop shot. It also sets the size: the phone stands past the frame by that much at the top and at the bottom, so raising it grows the phone and keeps it centred at once. */ .wl-shot { --wl-phone-bleed: 5.5%; position: relative; padding-block: var(--wl-phone-bleed); } .wl-shot__phone { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: auto; aspect-ratio: 480 / 1045; border-radius: 30px; overflow: hidden; background: #0A0A08; border: 7px solid #0A0A08; box-shadow: 0 34px 58px -26px rgba(10, 10, 8, 0.6); } .wl-shot__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 23px; } /* ---------- Single phone figure ---------- */ .wl-phone { border-radius: 30px; overflow: hidden; background: #0A0A08; border: 7px solid #0A0A08; box-shadow: 0 34px 60px -28px rgba(10, 10, 8, 0.5); } .wl-phone img { display: block; width: 100%; height: auto; border-radius: 23px; } /* ---------- Browser frame (the live site) ---------- */ .wl-browser { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -40px rgba(10, 10, 8, 0.32); } .wl-browser__bar { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 18px; background: var(--ink); } .wl-browser__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); flex: 0 0 auto; } /* No URL text in the bar: the phone is centred and taller than the frame, so it covers the middle of the bar at every width. Three dots still read as a browser, and the domain is already in the badge, the copy and the button. */ /* No fixed aspect ratio: the shot keeps the screenshot's own proportions, so nothing is cropped. The width/height attributes reserve the box. */ .wl-browser__shot { position: relative; overflow: hidden; background: var(--surface-light); } .wl-browser__shot img { display: block; width: 100%; height: auto; } /* ---------- Process steps ---------- */ .wl-timeline { position: relative; margin-top: clamp(36px, 4vw, 56px); padding-left: 0; list-style: none; } .wl-timeline::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--accent-ink), var(--accent) 55%, rgba(196, 231, 66, 0.18)); } .wl-step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: clamp(18px, 2.6vw, 34px); } .wl-step + .wl-step { margin-top: clamp(20px, 2.4vw, 30px); } .wl-step__node { position: relative; z-index: 1; margin-top: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--paper); } .wl-step__card { background: var(--surface-light); border: 1px solid var(--border-ink); border-radius: 22px; padding: clamp(22px, 2.6vw, 30px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; } .wl-step__card:hover { transform: translateY(-3px); border-color: var(--border-ink-strong); } .wl-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .wl-step__weeks { font-family: var(--ff-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-45); white-space: nowrap; } .wl-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; } .wl-list--two { grid-template-columns: 1fr 1fr; column-gap: 26px; } .wl-list li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--ff-body); font-size: 15px; line-height: 1.5; color: var(--ink-60); } .wl-list li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--accent-ink); } /* ---------- Result panel ---------- */ .wl-result { position: relative; overflow: hidden; background: var(--ink); border-radius: 32px; padding: clamp(30px, 4.4vw, 60px); } .wl-result::before { content: ""; position: absolute; top: -34%; right: -8%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 231, 66, 0.26), rgba(142, 156, 30, 0.14) 42%, transparent 70%); pointer-events: none; } .wl-result__inner { position: relative; z-index: 1; } .wl-result__statement { font-family: var(--ff-title); font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.28; letter-spacing: -0.03em; color: #fff; margin: 0; max-width: 34ch; text-wrap: balance; } .wl-result__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(30px, 3.6vw, 46px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid rgba(255, 255, 255, 0.16); } .wl-result__label { font-family: var(--ff-title); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); margin: 0 0 10px; } .wl-result__text { font-family: var(--ff-body); font-size: 15px; line-height: 1.6; color: var(--on-dark); margin: 0; } /* ---------- Cards ---------- */ .wl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 24px); margin-top: clamp(34px, 4vw, 52px); } /* Four-up starts at two columns and only opens to four when the content column is wide enough for the body text to survive it. */ .wl-cards--four { grid-template-columns: repeat(2, 1fr); } .wl-card { background: var(--surface-light); border: 1px solid var(--border-ink); border-radius: 22px; padding: clamp(24px, 2.6vw, 32px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.35s; } .wl-card:hover { transform: translateY(-4px); border-color: var(--border-ink-strong); box-shadow: 0 22px 40px -26px rgba(10, 10, 8, 0.4); } .wl-card__icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(196, 231, 66, 0.2); border: 1px solid rgba(142, 156, 30, 0.34); color: var(--accent-ink); margin-bottom: 18px; } .wl-cards--four .wl-card { background: var(--ink); border-color: rgba(255, 255, 255, 0.14); } .wl-cards--four .wl-card:hover { border-color: rgba(255, 255, 255, 0.3); } .wl-cards--four .wl-card__icon { background: var(--accent); border-color: transparent; color: var(--ink); } .wl-cards--four .wl-h3 { color: #fff; } .wl-cards--four .wl-body { color: var(--on-dark); } /* ---------- Closing CTA ---------- */ .wl-cta { position: relative; overflow: hidden; background: var(--ink); border-radius: 36px; padding: clamp(38px, 5.6vw, 84px) clamp(26px, 4vw, 72px); text-align: center; } .wl-cta::before, .wl-cta::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; } .wl-cta::before { top: -30%; left: -8%; background: radial-gradient(circle, rgba(196, 231, 66, 0.2), transparent 70%); } .wl-cta::after { bottom: -34%; right: -6%; background: radial-gradient(circle, rgba(142, 156, 30, 0.24), transparent 70%); } .wl-cta__inner { position: relative; z-index: 1; } .wl-cta__lead { font-family: var(--ff-body); font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.6; color: var(--on-dark-muted); max-width: 58ch; margin: 22px auto 0; } .wl-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } /* ---------- Next case study ---------- */ .wl-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--surface-light); border: 1px solid var(--border-ink); border-radius: 24px; padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 38px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; } .wl-next:hover { transform: translateY(-3px); border-color: var(--border-ink-strong); } .wl-next__label { font-family: var(--ff-title); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 8px; } .wl-next__title { font-family: var(--ff-title); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -0.03em; color: var(--ink); margin: 0; } .wl-next__go { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-title); font-size: 15px; font-weight: 600; color: var(--ink); } .wl-next:hover .wl-next__go span { transform: translateX(4px); } .wl-next__go span { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Sticky mobile CTA ---------- */ .wl-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 14px; background: rgba(10, 10, 8, 0.94); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; padding: 12px 12px 12px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); transform: translateY(140%); opacity: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; } .wl-sticky.is-in { transform: none; opacity: 1; } .wl-sticky__text { font-family: var(--ff-title); font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; } .wl-sticky__text span { display: block; font-family: var(--ff-body); font-size: 12.5px; font-weight: 400; color: var(--on-dark-muted); margin-top: 2px; } .wl-sticky .wl-btn { padding: 12px 20px; font-size: 14px; } /* ============================================================= Hero ============================================================= */ .wl-hero { position: relative; padding: clamp(120px, 14vw, 168px) var(--gutter) clamp(48px, 6vw, 88px); } .wl-hero__glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(20px); } .wl-hero__glow--a { top: -14%; right: -8%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(196, 231, 66, 0.34), rgba(142, 156, 30, 0.14) 42%, transparent 70%); animation: ncGlowB 16s ease-in-out infinite; } .wl-hero__glow--b { bottom: -20%; left: -10%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(196, 231, 66, 0.22), transparent 68%); animation: ncGlowA 19s ease-in-out infinite; } .wl-hero__inner { position: relative; z-index: 1; max-width: var(--container-inner); margin-inline: auto; } /* Copy beside the screenshot, not above a full-width one. The composite in the media column is the same desktop-plus-phone pair the feature rows use, so the hero states the case at the size of a screenshot rather than a billboard. */ .wl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(32px, 4.6vw, 72px); align-items: center; } .wl-h1 { font-family: var(--ff-title); font-weight: 700; font-size: clamp(2.15rem, 3.5vw, 3.15rem); line-height: 1.04; letter-spacing: -0.036em; color: var(--ink); margin: 0; text-wrap: balance; } .wl-hero__meta .wl-badges { margin: clamp(24px, 2.6vw, 32px) 0 0; } .wl-hero__lead { font-family: var(--ff-body); font-size: clamp(16.5px, 1.6vw, 18px); line-height: 1.55; color: var(--ink-60); margin: 18px 0 0; max-width: 52ch; } .wl-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; } /* ---------- Status badges ---------- */ .wl-badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 24px; padding: 0; list-style: none; } .wl-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-60); background: var(--surface-light); border: 1px solid var(--border-ink); padding: 8px 14px; border-radius: 999px; } .wl-badge--live { color: var(--ink); border-color: rgba(142, 156, 30, 0.4); background: rgba(196, 231, 66, 0.2); } .wl-badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); flex: 0 0 auto; } /* ---------- Editorial caveat ---------- Separated by space and a lighter colour, not by a rule on one edge. */ .wl-note { font-family: var(--ff-body); font-size: 14.5px; line-height: 1.6; color: var(--ink-45); max-width: 68ch; margin: clamp(30px, 3.4vw, 44px) 0 0; } /* ============================================================= Responsive ============================================================= */ @media (max-width: 1040px) { .wl-metrics { grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 4vw, 34px); } .wl-metric:nth-child(3) { padding-left: 0; } .wl-metric:nth-child(3)::before { display: none; } .wl-result__grid { grid-template-columns: 1fr; gap: 22px; } /* Cards drop to two columns before they drop to one. */ .wl-cards, .wl-cards--four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .wl-hero__grid { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); } .wl-split { grid-template-columns: 1fr; } .wl-work-display { grid-template-columns: 1fr; } .wl-showcase__media { min-height: 0; } .wl-phone { max-width: 220px; margin-inline: auto; } .wl-sticky { display: flex; } } @media (min-width: 1200px) { .wl-cards--four { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { /* Short word values stay two-up here; they only stack on the narrowest screens. */ .wl-metrics { gap: 20px 22px; } .wl-cards, .wl-cards--four { grid-template-columns: 1fr; } .wl-showcase { grid-template-columns: 1fr; gap: 28px; } .wl-showcase__item { width: min(100%, 260px); margin-inline: auto; } .wl-compare__head { display: none; } .wl-compare__row { grid-template-columns: 1fr; } .wl-compare__row > div:first-child { padding-bottom: 8px; } .wl-compare__row > div:last-child { border-top: 0; } .wl-list--two { grid-template-columns: 1fr; } .wl-step { grid-template-columns: 26px 1fr; gap: 16px; } .wl-step__node { width: 26px; height: 26px; box-shadow: 0 0 0 5px var(--paper); } .wl-timeline::before { left: 12px; } /* The desktop shot is small here, so the phone takes a larger share of it. A wider bleed is what makes it legible at this width. */ .wl-shot { --wl-phone-bleed: 7.5%; } .wl-shot__phone { border-width: 5px; border-radius: 22px; } .wl-shot__phone img { border-radius: 17px; } .wl-btn { width: 100%; } .wl-sticky .wl-btn { width: auto; } } @media (max-width: 460px) { .wl-metrics { grid-template-columns: 1fr; } .wl-metric { padding-left: 0; padding-top: 16px; } .wl-metric::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; } .wl-metric:nth-child(2)::before { display: block; } } @media (prefers-reduced-motion: reduce) { .wl-card, .wl-step__card, .wl-next, .wl-btn, .wl-sticky { transition: none; } .wl-card:hover, .wl-step__card:hover, .wl-next:hover, .wl-btn:hover { transform: none; } }