/* ========================================================= Pavlo Semikashev — Product Design Portfolio Tokens & global ========================================================= */ :root { --bg-gray: #f2f3f4; --text-primary: #171819; --text-secondary: #313236; --text-body: #000; --text-muted: #303030; --orange: #ef4d02; --orange-2: #ef4d03; --orange-3: #ef520a; --border-bubble: #787878; --border-divider: #d9d9d9; --dark-line: #2a2a2a; --neumo-light: #ffffff; --neumo-dark: #c7c1bf; --font-display: "Montserrat", system-ui, sans-serif; --font-body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif; --nav-height: 60px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { /* iOS Safari shows the html background for the rubber-band area above the URL bar and behind the translucent toolbar — paint it white so the strip reads as solid rather than letting page content blur through. */ background: #fff; } html, body { width: 100%; min-height: 100vh; color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body { background: var(--bg-gray); } /* Proportionally scale the entire layout. Baseline is 0.9× (10% smaller than figma) so a 1440-viewport user has breathing room. Grows from 0.9 → 1.4 across viewports up to ~2240px, capped beyond. JS keeps --zoom in sync with body zoom so that 100vh-based heights and decoration math can compensate. */ :root { --zoom: 0.9; } body { /* --page-zoom is set by an inline script before first paint so the layout never visibly jumps from 0.9 to the computed scale once JS runs. */ zoom: var(--page-zoom, 0.9); } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; } img { display: block; max-width: 100%; } /* ========================================================= Top navigation ========================================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: #fff; border-bottom: 1px solid var(--border-divider); z-index: 100; display: flex; align-items: center; /* Side padding tracks the body content column so the Home tab aligns with text/bubbles. */ padding-left: max(60px, calc((100vw - 1140px) / 2)); padding-right: max(60px, calc((100vw - 1140px) / 2)); filter: drop-shadow(0 7px 20.5px rgba(255,255,255,0.09)); } .nav__inner { display: flex; gap: 24px; align-items: stretch; height: 100%; } .nav__home { display: flex; align-items: center; margin-right: 62px; /* matches gap to other tabs at 1440 */ } .nav__tab { display: inline-flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding-top: 4px; position: relative; height: 100%; } .nav__tab-row { display: flex; gap: 4px; align-items: center; flex: 1; } .nav__tab-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); } .nav__tab-icon svg { width: 16px; height: 16px; display: block; } .nav__tab-label { font-family: var(--font-display); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.12px; color: var(--text-muted); white-space: nowrap; } .nav__tab-underline { height: 2px; background: #2f3031; opacity: 0; margin-top: 13px; } .nav__tab.is-active .nav__tab-label { color: #000; } .nav__tab.is-active .nav__tab-underline { opacity: 1; } /* ───────── Hamburger trigger (hidden on desktop) ───────── */ .nav__burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 40px; height: 40px; margin-left: auto; border-radius: 6px; background: transparent; transition: transform 180ms ease, background-color 180ms ease; } .nav__burger:hover { background: var(--bg-gray); } .nav__burger:active { transform: translateY(1px); } .nav__burger-line { display: block; width: 18px; height: 1.5px; background: var(--text-primary); border-radius: 2px; transition: transform 200ms ease, opacity 180ms ease; } .nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] .nav__burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ───────── Mobile slide-out menu ───────── */ .mobile-menu { position: fixed; inset: 0; /* Below the nav (z-index 100) so the nav bar — with the hamburger that morphs into an X — stays on top and acts as the single close control. */ z-index: 90; display: none; } .mobile-menu[data-open="true"] { display: block; } .mobile-menu__backdrop { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 280ms ease; } .mobile-menu[data-open="true"] .mobile-menu__backdrop { opacity: 1; } .mobile-menu__panel { position: absolute; top: 0; right: 0; /* Above the backdrop — it comes later in the DOM, so without an explicit z-index the dark backdrop would paint over the panel and swallow taps. */ z-index: 2; height: 100vh; width: min(86vw, 380px); background: var(--bg-gray); /* Top padding clears the nav bar (the menu sits below it) so the first item isn't hidden under it now that the panel has no close button. */ padding: calc(var(--nav-height) + 16px) 28px 32px; display: flex; flex-direction: column; gap: 24px; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } .mobile-menu[data-open="true"] .mobile-menu__panel { transform: translateX(0); } /* Panel close button removed — the nav hamburger (which morphs to an X while the menu is open) is the single close control. */ .mobile-menu__close { display: none; } .mobile-menu__close:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--orange); } .mobile-menu__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .mobile-menu__link { display: grid; grid-template-columns: 28px 22px 1fr; align-items: center; gap: 14px; /* Full-bleed rows: negative side margins cancel the panel's 28px padding so every row (and its hover / active fill) runs edge to edge, with a single consistent 20px left inset for the content. */ margin-left: -28px; margin-right: -28px; padding: 18px 12px 18px 20px; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--text-primary); background: transparent; position: relative; transition: background-color 180ms ease; } /* Hover / press — soft neutral feedback, no accent colour. */ .mobile-menu__link:hover { background: rgba(255, 255, 255, 0.6); } .mobile-menu__link:active { background: rgba(255, 255, 255, 0.85); } /* Active page — the row's full-bleed white fill (margins/inset come from the base rule); the selected item reads through the white band + orange badge. */ .mobile-menu__link.is-active { background: #fff; } /* Number — plain orange digits on inactive items… */ .mobile-menu__link-num { font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.8px; color: var(--orange); opacity: 0.8; } /* …and a knocked-out white digit in an orange square on the selected item. */ .mobile-menu__link.is-active .mobile-menu__link-num { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 5px; background: var(--orange); color: #fff; opacity: 1; font-weight: 700; font-size: 10px; letter-spacing: 0.4px; } .mobile-menu__link-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .mobile-menu__link-icon img { width: 18px; height: 18px; } .mobile-menu__link[data-tab="home"] .mobile-menu__link-icon { display: none; } .mobile-menu__link[data-tab="home"] { grid-template-columns: 28px 1fr; } .mobile-menu__link-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-menu__foot { margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(0, 0, 0, 0.15); } .mobile-menu__sig { font-family: var(--font-body); font-size: 11px; line-height: 14px; color: var(--text-muted); opacity: 0.7; } /* ───────── Mobile chip nav ───────── On phones we replace the row of full-label tabs with a compact home icon followed by three numbered chips (1/2/3). The chips both fill the empty feeling of the bar and signal that there are exactly 3 cases. */ .nav__chips { display: none; align-items: center; width: 100%; justify-content: space-between; } .nav__chips-group { display: inline-flex; align-items: center; gap: 8px; } .nav__chips-home { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: transparent; color: var(--text-primary); text-decoration: none; transition: background-color 180ms ease; } .nav__chips-home:hover { background: var(--bg-gray); } .nav__chips-home.is-active { background: var(--orange); color: #fff; border-radius: 999px; width: auto; padding: 0 12px; height: 30px; } .nav__chips-home svg { width: 20px; height: 20px; } .nav__chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--bg-gray); color: var(--text-primary); font-family: var(--font-display); font-weight: 700; font-size: 13px; text-decoration: none; transition: background-color 180ms ease, color 180ms ease; } .nav__chip:hover { background: #e6e7e9; } .nav__chip.is-active { background: var(--orange); color: #fff; } .nav__chip-icon { width: 14px; height: 14px; display: inline-block; } .nav__chip-icon img { width: 100%; height: 100%; display: block; } /* Invert chip icon when chip is active (orange bg, white icon). */ .nav__chip.is-active .nav__chip-icon img { filter: brightness(0) invert(1); } /* ───────── Show chips / hide tabs at narrow widths ───────── */ @media (max-width: 700px) { .nav { padding: 0 16px; } .nav__inner { display: none; } .nav__burger { display: none; } .nav__chips { display: inline-flex; } } @media (min-width: 701px) { .mobile-menu { display: none !important; } .nav__chips { display: none; } } /* ========================================================= Home layout ========================================================= */ .home { padding-top: var(--nav-height); min-height: calc(100vh / var(--zoom)); display: grid; grid-template-columns: minmax(816px, 980px) 624px; justify-content: end; background: var(--bg-gray); } @media (min-width: 1601px) { .home { max-width: 1440px; margin: 0 auto; justify-content: center; } } .home__left { position: relative; background: var(--bg-gray); padding: 40px 0 0 174px; min-height: calc((100vh - var(--nav-height) * var(--zoom)) / var(--zoom)); } @media (min-width: 1601px) { .home__left { padding-left: 150px; } } .home__right { position: relative; background: #fff; border-left: 1px solid var(--dark-line); min-height: calc((100vh - var(--nav-height) * var(--zoom)) / var(--zoom)); } /* Bleed the white background out past the column to the viewport's right edge. body has overflow-x:hidden so this never creates a horizontal scroll. */ .home__right::before { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: #fff; pointer-events: none; z-index: 0; } .home__right > * { position: relative; z-index: 1; } /* --- Left column (hero) --- */ .hero { position: relative; width: 602px; max-width: 100%; min-height: 760px; } .hero__caption { font-family: var(--font-body); font-weight: 400; font-size: 10px; line-height: 12px; color: #000; opacity: 0.5; margin-bottom: 7px; } /* SVG overlay for the two adaptive lines (411 top, 417 bottom) extending to viewport edge */ .hero__decorations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; } .hero__decorations path, .hero__bundle path { fill: none; stroke: #F35A0E; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 3 6; animation: dash-march 2.5s linear infinite; } @keyframes dash-march { to { stroke-dashoffset: -9; } } .hero__decorations path.is-reverse { animation-direction: reverse; } @media (prefers-reduced-motion: reduce) { .hero__decorations path, .hero__bundle path { animation: none; } } /* Static bundle of decorations exported from Figma (Vectors 413/414/415/416) */ .hero__bundle { position: absolute; pointer-events: none; display: none; /* desktop-only — shown via media query below */ z-index: 0; } .hero__title { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: 0.48px; color: var(--text-primary); margin-bottom: 37px; } .bubbles { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 546px; max-width: 100%; } .bubble { background: #fff; border: 1px solid var(--border-bubble); border-radius: 20px; padding: 24px; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 24px; color: var(--text-secondary); position: relative; } .bubble--w1 { width: 460px; } .bubble--w2 { width: 523px; } .bubble--w3 { width: fit-content; white-space: nowrap; } /* Dark variant — used as narrator/question prompts inside case-page chat threads */ .bubble--dark { background: #171819; border-color: #171819; color: #fff; } .bubble--dark .accent { color: var(--orange-2); } .bubble--dark .accent--alt { color: var(--orange-3); } .bubble__group { display: flex; flex-direction: column; margin-bottom: 0; } .bubble__group + .bubble__group { /* gap between groups via tail spacer */ } /* Speech bubble tail (inline SVG, pixel-perfect). The white in the SVG sits over both the bubble's bottom border AND the triangle's top stroke, so the two shapes read as one continuous outline. */ .bubble__tail { display: block; margin-left: 15px; /* offset 15px from left of bubble (matches Figma) */ margin-top: -1px; /* nudge up so the fill covers the bubble's bottom border in this strip */ align-self: flex-start; position: relative; z-index: 1; } .hero p .accent { color: var(--orange-2); } .hero p .accent--alt { color: var(--orange-3); } /* (legacy buttons rule removed; now defined above with margin-top) */ /* ========================================================= Floating CTA panel — appears when primary buttons leave viewport. Toggled via IntersectionObserver in script.js (.is-visible class). ========================================================= */ /* ========================================================= Section pill — global component used as a section label across case pages. Figma node 1140:3370. Background matches the gray case background so the inset shadow (light from top-left, dark from bottom-right) makes the pill read as pressed INTO the page rather than floating on top of it. ========================================================= */ .case-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 24px; border-radius: 20px; background: var(--bg-gray); /* Exact Figma orange — slightly warmer than the site's --orange-2 token. */ color: #fb621c; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 24px; letter-spacing: 1.8px; white-space: nowrap; box-shadow: inset -4px -4px 8px 0 #ffffff, inset 4px 6px 7px 0 #e1dedd; } /* Floating CTA: ONLY for the home page on narrow viewports. Hidden everywhere else (desktop, and all case pages regardless of width). */ .floating-cta { display: none; } /* Suppress the bottom CTA across the entire case-pages experience */ body[data-tab="enterprise"] .floating-cta, body[data-tab="light"] .floating-cta, body[data-tab="hearing"] .floating-cta { display: none !important; } .floating-cta__btn { display: inline-flex; align-items: center; gap: 8px; min-width: 140px; padding: 12px 16px; border-radius: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 16px; white-space: nowrap; box-shadow: -3px -3px 6px #fff, 3px 3px 6px var(--neumo-dark); transition: transform 0.15s ease, box-shadow 0.15s ease; } .floating-cta__btn:hover { transform: translateX(-2px); } .floating-cta__btn:active { transform: none; box-shadow: inset -2px -2px 4px #fff, inset 2px 2px 4px var(--neumo-dark); } .floating-cta__btn--ghost { background: var(--bg-gray); color: var(--text-primary); } .floating-cta__btn--dark { background: #000; color: #fff; border: 1.5px solid rgba(0, 0, 0, 0.6); } .floating-cta__icon { width: 14px; height: 14px; flex-shrink: 0; } /* Single-column home layout (≤700px) — buttons sit inline in the content flow (like desktop), no fixed bottom bar. A "next page" indicator at the bottom of the page mirrors the case-study chevron pattern. */ @media (max-width: 700px) { .hero { min-height: 0; } .hero__decorations { display: none; } .floating-cta { display: none !important; } .home__right { padding-bottom: 0; } /* Show the inline buttons (hidden in the desktop overlay layout). Match the desktop button proportions — tall, neumorphic — but flex to fill the row instead of fixed widths. Specificity bumped (.hero .hero__buttons) so the base 80px margin-top rule defined later in the file doesn't win. */ .hero .hero__buttons { display: flex; gap: 16px; margin-top: 32px; margin-bottom: 64px; position: static; } /* Mobile home — kill the bottom padding of the gray left column so the buttons' own 32px margin-bottom is the only spacing to Highlights. */ .home__left { padding-bottom: 0 !important; } /* Drop the right column's 100vh min-height on mobile — otherwise empty white space stretches between the last highlight and the "next case" card. Keep a controlled gap (128px) above and 32px below the card. */ .home__right { min-height: 0; align-self: start; } /* .highlights has height:100% — fine on desktop where it fills the row, but on mobile it inherits the stretched .home__right height and creates ~280px of empty white space below the grid. Let it size to content. */ .highlights { height: auto; } /* Comfortable breathing room below the last highlight before the white column ends (was 32px — felt cramped). Specificity bumped so the later `.highlights__grid { padding: 32px 20px }` rule in @media (max-width:768) doesn't override the bottom value. */ .highlights .highlights__grid { padding-bottom: 80px; } /* Specificity bump (.scroll-next.scroll-next--home) so the base .scroll-next { margin: 40px auto 40px } defined later doesn't win. */ .scroll-next.scroll-next--home { margin-top: 48px; margin-bottom: 48px; } .hero .hero__buttons .btn, .hero .hero__buttons .btn--dark { width: auto; flex: 1; height: 88px; padding: 0 16px; font-size: 15px; border-radius: 7px; } } /* Hide the home "next" cue on desktop — only relevant on single-column. */ @media (min-width: 701px) { .scroll-next--home { display: none; } } .btn { width: 258px; height: 93px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 16px 24px; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 16px; /* Default state keeps the existing neumorphic shadow */ box-shadow: -4px -4px 8px #fff, 4px 4px 8px var(--neumo-dark); transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease; } /* Brutalist offset on hover: button shifts up-left, hard offset shadow in our orange. */ .btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 var(--orange); } /* On press: snap back to 0,0 with no shadow. */ .btn:active { transform: translate(0, 0); box-shadow: 0 0 0 0 var(--orange); } .btn--ghost { background: var(--bg-gray); color: var(--text-primary); } .btn--dark { width: 259px; height: 94px; background: #000; border: 2px solid rgba(0,0,0,0.6); color: #fff; } .btn__icon { width: 16px; height: 16px; flex-shrink: 0; } .hero__buttons { display: flex; gap: 32px; position: relative; z-index: 1; margin-top: 80px; } /* ========================================================= Right column — Highlights ========================================================= */ .highlights { display: flex; flex-direction: column; height: 100%; position: relative; } .highlights__banner { position: relative; height: 60px; background: transparent; /* orange + border drawn by .highlights::before for seamless extension */ overflow: hidden; display: flex; align-items: center; z-index: 1; } /* Single continuous orange strip + bottom border that spans from the banner's left edge all the way past the column to the viewport's right edge. Drawing it as one element guarantees no subpixel seam where the column ends. */ .highlights::before { content: ""; position: absolute; top: 0; left: 0; right: -100vw; height: 60px; background: var(--orange); border-bottom: 1px solid var(--dark-line); pointer-events: none; z-index: 0; } .highlights__banner-track { display: flex; gap: 32px; white-space: nowrap; animation: marquee 18s linear infinite; } .highlights__banner-item { font-family: var(--font-display); font-size: 12px; line-height: 1; text-transform: capitalize; } .highlights__banner-item--solid { font-weight: 700; color: #fff; letter-spacing: 1.44px; } .highlights__banner-item--outline { font-weight: 900; /* Fill same as banner bg + paint-order: stroke fill — emulates Figma's OUTSIDE stroke so adjacent letters' strokes overlap and visually fuse into one continuous outline. */ color: var(--orange); letter-spacing: 2.52px; -webkit-text-stroke: 1.4px #fff; text-stroke: 1.4px #fff; paint-order: stroke fill; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .highlights__grid { display: grid; grid-template-columns: 272px 272px; gap: 0 0; padding: 40px 60px 40px 40px; column-gap: 0; } .highlights__col { display: flex; flex-direction: column; gap: 20px; } .highlight { background: #fff; padding: 12px 24px; display: flex; flex-direction: column; gap: 10px; } .highlight__title { font-family: var(--font-body); font-weight: 700; font-size: 24px; line-height: 24px; color: var(--orange-2); } .highlight__body { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 24px; color: #000; } /* ========================================================= Desktop pixel-lock (≥1280px) — exact figma geometry so the static decorations.svg overlay aligns perfectly with all hero elements. Coordinates are in the hero-local frame (origin = top-left of .hero, which sits at Figma frame x=150, y=100 — i.e. 150px from page left, 60px nav + 40px padding from page top). ========================================================= */ @media (min-width: 1280px) { .hero { width: 769px; /* group 14371 width */ height: 740px; /* enough to contain bundle (top 7, h 692) and lines */ min-height: 0; } .hero__caption, .hero__title, .bubbles, .hero__buttons { position: absolute; margin: 0; } .hero__caption { left: 3px; top: 0; } .hero__title { left: 0; top: 19px; width: 602px; } .bubbles { left: 0; top: 115px; width: 546px; gap: 24px; } .hero__buttons { left: 3px; top: 539px; gap: 20px; margin-top: 0; } .bubble--w1 { width: 403px; } .bubble--w2 { width: 523px; } .bubble--w3 { width: fit-content; } .hero__bundle { display: block; left: -51px; top: 7px; width: 577px; height: 692px; } } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1280px) { .nav { padding: 0 40px; } .home { grid-template-columns: 1fr 1fr; } .home__left, .home__right { min-width: 0; } .home__left { padding: 80px 40px 60px; } .highlights__grid { padding: 40px; grid-template-columns: 1fr 1fr; } .hero, .bubbles, .bubble--w2 { width: 100%; max-width: 600px; } .bubble--w1 { width: 75%; } .bubble--w3 { width: fit-content; } .hero__deco { display: none; } } /* Tighten gutters before stacking — keeps 2-col viable down to ~700px */ @media (max-width: 1024px) { .nav { padding: 0 24px; } .home__left { padding: 56px 20px 40px; } .highlights__grid { padding: 24px 20px; column-gap: 16px; } .highlight { padding: 12px 16px; } } @media (max-width: 700px) { .home { grid-template-columns: 1fr; } .home__right { border-left: 0; border-top: 1px solid var(--dark-line); } .highlights__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav { padding: 0 16px; overflow-x: auto; } .nav__inner { gap: 16px; } .nav__home { margin-right: 24px; } .hero__title { font-size: 36px; } .home__left { padding: 56px 20px 40px; } .highlights__grid { grid-template-columns: 1fr; padding: 32px 20px; gap: 20px; } .highlights__col { gap: 20px; } .bubble--w1, .bubble--w2 { width: 100%; } .bubble--w3 { width: fit-content; } } /* ========================================================= Case study generic layout (used on case-* pages) ========================================================= */ .case { padding-top: var(--nav-height); background: #fff; } .case__container { max-width: 1140px; margin: 0 auto; padding: 0 150px; } @media (max-width: 1280px) { .case__container { padding: 0 40px; } } @media (max-width: 700px) { .case__container { padding: 0 20px; } } .case-placeholder { min-height: calc((100vh - var(--nav-height) * var(--zoom)) / var(--zoom)); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; color: var(--text-secondary); font-family: var(--font-body); text-align: center; padding: 40px 20px; } .case-placeholder h1 { font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--text-primary); } /* Hero intro animation — the phones gently drift down into place on page load and ease to a stop. No opacity fade. Animates the independent `translate` property so it composes with the scroll parallax (`transform`) without conflict. Slight back-to-front stagger. */ @keyframes heroDriftIn { from { translate: 0 -34px; } to { translate: 0 0; } } .hero-intro .cl-hero__phone--2 { animation: heroDriftIn 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.1s both; } .hero-intro .cl-hero__phone--1 { animation: heroDriftIn 1s cubic-bezier(0.16, 0.84, 0.44, 1) 0.18s both; } /* ========================================================= Scroll-to-next-case indicator — sits at the bottom of every page; over-scrolling past it (or clicking) advances the loop. ========================================================= */ .scroll-next { --progress: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; /* Span the full width when the parent is a grid (home page
); ignored harmlessly when
is a plain block (case pages). */ grid-column: 1 / -1; width: max-content; max-width: 90vw; margin: 40px auto 40px; padding: 22px 44px 26px; border-radius: 16px; background: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 18px 40px rgba(0, 0, 0, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease; } .scroll-next:hover { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06), 0 22px 48px rgba(0, 0, 0, 0.10); } .scroll-next.is-armed { transform: scale(calc(1 + var(--progress) * 0.02)); } .scroll-next.is-firing { transform: scale(0.97); opacity: 0.5; } .scroll-next__top { font-family: var(--font-body); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); } .scroll-next__name { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-primary); text-align: center; } .scroll-next__cue { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--font-body); font-size: 13px; color: #fb621c; } .scroll-next__chevron { animation: scrollNextBounce 1.5s ease-in-out infinite; } @keyframes scrollNextBounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } /* Over-scroll progress fill along the bottom edge. */ .scroll-next__progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #fb621c; transform-origin: left center; transform: scaleX(var(--progress)); } @media (prefers-reduced-motion: reduce) { .scroll-next__chevron { animation: none; } } /* Page slide-in transition: the incoming
slides in horizontally, started on `pagereveal` by an inline script (see each page's head). No CSS rule needed here — the off-screen
is clipped by the existing `html { overflow-x: hidden }` above. */ /* ───────── Image lightbox ───────── Centered enlarged view triggered by clicking screenshots in case studies. Not full-screen — image is capped at 90vw / 90vh with a dim backdrop. */ .img-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 20, 22, 0.78); display: none; align-items: center; justify-content: center; padding: 5vh 5vw; cursor: zoom-out; opacity: 0; transition: opacity 0.18s ease; } .img-lightbox.is-open { display: flex; opacity: 1; } .img-lightbox__img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); background: #fff; object-fit: contain; } /* Hearing Care composites have no side padding baked in — pad them in the lightbox so the screens don't touch the backdrop edges. */ .img-lightbox.is-padded .img-lightbox__img { background: #fff; padding: clamp(8px, 2vw, 24px) clamp(12px, 5vw, 56px); box-sizing: border-box; max-width: 92vw; } img.is-zoomable { cursor: zoom-in; }