sits between .site and the sections, so it has to pass the column layout through rather than collapse them into one block. */ .site > main { display: flex; flex-direction: column; } /* ------------------------------------------------------------------------- Full-bleed section backgrounds Each section spans the whole viewport so its background colour or photo reaches both edges, and the content is brought back to 1440 by padding instead of by a width cap. Padding keeps the section's own box full width — which is what the background paints — while `container-type: inline-size` measures the *content* box, so the export's `@container hero/about/ categories/how-it-works/footer` rules keep seeing exactly the widths they saw before. The `max(0px, ...)` half-difference is 0 below 1440 and grows from there, so on phones and tablets this is just the gutter and nothing changes. The gutter is added on top of the centring padding rather than folded into it, so the content band on a 2560px screen is the same band as on a 1440px one instead of 48px wider. ------------------------------------------------------------------------- */ .site > main > section, .site > main > .founding-cta, /* the "Join the first 100" banner is a bare div */ .site > footer { /* Per-section so the hero can keep the export's wider inset. */ --gutter: 24px; padding-inline: calc(max(0px, (100% - var(--site-max-width)) / 2) + var(--gutter)); } /* The hero and the "Join the first 100" banner are inset by 120px in the export rather than by the 24px every .section uses. This rule outranks the export's own breakpoint (it is more specific), so the collapse to a small gutter has to be restated here. 1199px rather than the export's 576px: a 120px inset on a 700px screen leaves the content in a 460px column. */ .site > main > #hero, .site > main > .founding-cta { --gutter: 120px; } @media (max-width: 1199px) { .site > main > #hero, .site > main > .founding-cta { --gutter: 24px; } } /* The hero photo. Only the image is overridden, not the whole shorthand: the export's `center / cover no-repeat` on `.hero` is still what we want, and restating it would mean two places to keep in step. The file the export names there (assets/col.png) has been deleted: this rule replaces the layer outright, so the browser never requests it. Same for the two photos on `.founder-left`/`.founder-right` below. Those three dead paths are still in landing-website.css; if one of these overrides is ever removed, the rule 404s — which is the loud failure we want, rather than silently getting the old artwork back. */ .hero { background-image: var(--hero-photo); } /* The two backdrop shapes sit behind the hero (z-index 2 and 3 against its 4), so they are only ever visible where they stick out past it. The export gave them a fixed 852px — the desktop hero's height — but on a phone the hero is 100svh, which is shorter on most screens. The overhang painted a plum band between the bottom of the photo and the next section. Capping at the hero's own floor (`main > section` gives every section min-height: 100svh) makes the overhang impossible at any viewport size, without having to know how tall the hero actually ends up. */ .hero-backdrop { height: min(852px, 100svh); } /* ------------------------------------------------------------------------- Navigation ------------------------------------------------------------------------- */ .site-nav { position: relative; z-index: 20; margin-left: 0; display: flex; /* Explicit: `@container hero (width < 1197px)` in the export sets `.site-nav-row { flex-direction: column }`, and this nav still carries that class. Same specificity, so we must declare the property to win it. */ flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; align-self: stretch; /* the export centered .site-nav-row; we want full width */ } /* Same container query adds `text-align: center` to every .site-nav-row child. */ .site-nav > * { text-align: left; } .site-nav-logo { display: inline-flex; flex-shrink: 0; } /* Driven by height, not width: the height is what has to line up with the nav links beside it. The export sized it as `width: 115px` on a 230x112 asset, which happened to land on 56px tall. */ .site-nav-logo .site-nav-logo-img { margin: 0; display: block; width: auto; height: 64px; } /* 56px below the same breakpoint where the nav collapses to the hamburger, so the logo and the menu change together rather than at two separate widths. */ @media (max-width: 900px) { .site-nav-logo .site-nav-logo-img { height: 56px; } } .site-nav-menu { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 32px; } /* Kill the 540px spacer the export used to push the links to the right; justify-content on .site-nav does that job now. */ .site-nav-menu .site-nav-link-first { margin-left: 0; margin-inline: 0; } .site-nav-menu .site-nav-link { margin-top: 0; margin-right: 0; display: block; padding: 8px 0; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .site-nav-menu .site-nav-link:hover, .site-nav-menu .site-nav-link:focus-visible { color: var(--secondary-500-base); } /* --- Hamburger button (hidden on desktop) --- */ .site-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; } .site-nav-toggle span { display: block; width: 100%; height: 2px; border-radius: 2px; background-color: var(--background-600); transition: transform 0.25s ease, opacity 0.2s ease; } /* Morph the three bars into an X while the panel is open. */ .site-nav.is-open .site-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav.is-open .site-nav-toggle span:nth-child(2) { opacity: 0; } .site-nav.is-open .site-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ------------------------------------------------------------------------- Mobile navigation ------------------------------------------------------------------------- */ /* 900px: the point where the five nav labels stop fitting beside the logo. Kept as a literal — @media cannot read custom properties. */ @media (max-width: 900px) { .site-nav-toggle { display: flex; } /* A full-bleed sheet hanging off the bar, not a floating card. `left: 0; right: 0` would only span the nav, which is inset by the page gutter on both sides. The nav is centred in the viewport, so pinning the panel's left edge to the nav's midpoint and pulling it back half its own width puts it on the screen's edges whatever that gutter turns out to be — and it works the same under the hero's padding as under .doc-header's. The pull-back is `translate` rather than a negative margin because the export's `@container hero (width < 1197px)` rule sets `margin-left: unset !important` on every .site-nav-row child, which silently eats a margin here — and only on index.html, where the nav sits inside the hero container, so it would have looked correct on every other page. `translate` is also its own property, so it composes with the open/close `transform` below instead of fighting it. It also sits flush against the bar now: the old 16px gap was the breathing room a rounded card needed to read as separate, and an edge-to-edge sheet reads as attached instead. The shadow stays — it is what lifts the panel off the content it covers. */ .site-nav-menu { position: absolute; top: 100%; left: 50%; right: auto; width: 100vw; translate: -50%; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border-radius: 0; background-color: var(--primary-500-base); box-shadow: 0 16px 40px rgba(40, 23, 38, 0.35); /* Animate open/close without display:none, so the transition runs. */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .site-nav.is-open .site-nav-menu { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav-menu .site-nav-link { padding: 14px 16px; border-radius: 10px; font-size: 17px; } .site-nav-menu .site-nav-link:hover, .site-nav-menu .site-nav-link:focus-visible { background-color: var(--primary-400); color: var(--surface-white); } } @media (prefers-reduced-motion: reduce) { .site-nav-menu, .site-nav-toggle span { transition: none; } } /* ========================================================================= Phase 2: content rows The export sized every row for a 1440px canvas: fixed pixel widths paired with `flex-shrink: 0`, spaced by huge gaps and nudged with negative margins. That combination cannot shrink, so anything below 1440px overflows sideways. The fix is the same shape everywhere: replace the fixed-width flex row with an auto-fitting grid, and neutralise the pixel widths and negative margins the export used for optical alignment. ========================================================================= */ /* Images never drive the layout wider than their column. */ img { max-width: 100%; height: auto; } /* --- "Discover / Choose / Book the Look" (3 feature columns) --- */ .steps { margin-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; align-items: start; width: 100%; max-width: 1000px; margin-inline: auto; } .steps > .step-left, .steps > .step-center, .steps > .step-right { margin: 0; width: auto; min-width: 0; /* lets a grid item shrink below its content's intrinsic size */ } .steps .step { margin-block: 0; } /* The third step is `column-a col-right1` in the markup now, like the other two, but the export still gives `.step-right` its own 9px gap — and since both selectors weigh (0,1,0), the one written later in landing-website.css wins, which is that one. Hence restating the shared gap here rather than relying on `.step` to carry it. 9px against the others' 16px is what pulled "Book the Look" and its description up a few pixels: two gaps above the copy instead of one, so the drift compounded down the column. */ .steps > .step-right { gap: 16px; } /* The export centred these columns optically with per-element nudges. */ .steps .step-shot, .steps .step-center .step-shot-inner { margin: 0; width: 176px; } /* The screenshots are RGBA with the rounded frame and its pale background already painted in — the corners of the file are transparent. The export drew a second 5px ring around that with `border` + `border-radius`, which is the double edge. The artwork owns the shape, so nothing is needed here. Dropping the border also gives back the 10px it was eating: box-sizing is border-box (reset.css:28), so the 176px box was rendering a 166px image. */ .step-shot { border: 0; border-radius: 0; } .steps .step-title, .steps .step-left .step-title { margin-left: 0; /* Full column width, not the 176px of the screenshot above it. Capping the heading to the image made "Book the Look" wrap onto a second line while "Discover" and "Choose" stayed on one, which pushed that column's description out of line with its neighbours. The column is ~300px, so all three titles fit on one line and the three descriptions start level. */ width: 100%; max-width: none; /* The heading is a flex box, so `text-align` alone would not move a single line inside it — the line box is only as wide as the words. */ justify-content: center; } /* .step-right was the only column without centring; the export relied on its fixed width instead. */ .steps > * { align-items: center; } /* Every step is a centred stack: screenshot, title, description. Two things fight this in the export. The headings carry `text-align: left` (landing-website.css:257 and :289) — Figma writes down where the text happened to sit, not that it was meant to hang off the left of a column that is otherwise centred. And `@container about (width < 1002px)` resets `.steps > .step-left > *` and friends to `text-align: unset`, which throws away the `center` that `.step-text` sets — so below 1002px the descriptions go left too, which is the misalignment that shows up in practice. `.about` in front of the selector is only there for weight: it takes this to (0,3,1), above the container query's (0,2,1). Being later in the file is not enough on its own, since specificity is compared before source order and at-rules do not enter into it. */ .about .steps > * > * { text-align: center; } /* Dots are built by JS for every track, so they must stay out of the way on the desktop grids, where every slide is visible at once. */ .carousel-dots { display: none; } /* --- Horizontal carousels on small screens --------------------------------- Two rows share this behaviour: the "Discover / Choose / Book the Look" steps and the category cards. Scroll snapping does the paging natively, so no JS is involved in the movement itself — touch flicks, trackpads and keyboard scrolling all behave the way the OS already does. JS only mirrors the position into the dots. */ @media (max-width: 700px) { #what-is-glamgo .steps, #categories .category-row { display: flex; /* The export's own container queries (`col1`/`col9 width < N`) stack these into a column. A media query does not outrank a container query, so the direction has to be restated here explicitly. */ flex-direction: row; align-items: stretch; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; /* Hide the scrollbar: the dots are the affordance here. */ scrollbar-width: none; /* Cancel the section's side padding so the track spans edge to edge. */ margin-inline: -24px; width: calc(100% + 48px); max-width: none; } #what-is-glamgo .steps::-webkit-scrollbar, #categories .category-row::-webkit-scrollbar { display: none; } #what-is-glamgo .steps > *, #categories .category-row > * { /* flex-basis alone is not enough: flex items shrink by default, so they would all squeeze onto one screen instead of scrolling. */ flex-shrink: 0; scroll-snap-align: center; } /* One step per screen: they are text blocks, and a partial one is just truncated copy. */ #what-is-glamgo .steps { gap: 0; } #what-is-glamgo .steps > * { flex-basis: 100%; padding-inline: 24px; } /* The category cards are 226/352 portraits — full width would make each one taller than the screen. A narrower slide also leaves the next card peeking in, which advertises that the row scrolls. */ #categories .category-row { gap: 12px; padding-inline: 24px; /* Without this the snapped card sits flush against the viewport edge instead of aligned with the rest of the section's content. */ scroll-padding-inline: 24px; } #categories .category-row > * { flex-basis: 68%; max-width: 260px; } #what-is-glamgo .carousel-dots, #categories .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; } .carousel-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background-color: var(--primary-200); opacity: 0.4; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; } .carousel-dot[aria-current='true'] { background-color: var(--primary-500-base); opacity: 1; } .carousel-dot:focus-visible { outline: 2px solid var(--primary-500-base); outline-offset: 3px; } } /* --- "Meet the Founders" (2 cards) --- */ .founders-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; } .founders-row > .founder { width: auto; min-width: 0; } /* The export put a flat rgba(145, 100, 140, 0.6) wash over the whole photo on top of the bottom fade, which is why these two read as muted next to the category cards. Drop the wash and keep only the scrim. The export's `background-size: auto auto, auto auto, cover` listed one size per layer, so removing a layer would have left the photo at `auto auto` (its intrinsic pixel size) instead of cover — hence the explicit reset. */ /* The photo hangs on the front face, not on .founder. On the card itself it would stay put while the text panel turned in front of it, and the middle of every flip showed a still portrait with nothing on it. */ .founder-left, .founder-right { background-image: none; } .founder-front, .founder-back { background-size: cover; background-position: center; } .founder-left .founder-front { background-image: var(--photo-scrim), url(../assets/audience-clients.png); } .founder-right .founder-front { background-image: var(--photo-scrim), url(../assets/audience-providers.png); } /* The reverse keeps the same portrait under a near-opaque veil rather than going flat: it holds the card's colour through the turn, and the bio still reads at AA against it. A flat panel makes the back look like a different component that swapped in. */ .founder-left .founder-back { background-image: var(--photo-veil), url(../assets/audience-clients.png); } .founder-right .founder-back { background-image: var(--photo-veil), url(../assets/audience-providers.png); } /* --- founder flip --- Two faces on one card: the photo and title block, and the bio behind it. Turned by hover on a mouse, and by the More button everywhere — the button is what makes the bio reachable from a keyboard, and the only affordance a touch screen has, since it has no hover state to discover the card with. The rotation is on .founder-inner rather than .founder because .founder is already a reveal target: `data-reveal-group` in the markup hands each card a `transform: translate3d(...)` entrance, and a second rule setting `transform` on the same element replaces it rather than adding to it. */ .founder { position: relative; padding: 0; perspective: 1200px; } .founder-inner { display: grid; flex: 1; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Both faces in the same grid cell, so they stack without leaving the flow. Absolute positioning would collapse the card to its min-height and clip the longer bio on a narrow phone; stacked in one cell the card takes the height of its tallest face, and the row's grid stretch keeps the pair level. */ .founder-front, .founder-back { grid-area: 1 / 1; min-width: 0; border-radius: 16px; padding: 18px 26px; /* Safari still needs the prefix for the property that hides the reverse side of a turned face; without it both faces paint at once mid-turn. */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .founder-front { display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; } /* Centred rather than bottom-aligned like the front: the bio is a block of running text with nothing under it, so it should sit in the panel instead of hanging off its floor. Its ground is set with the photos further down. */ .founder-back { display: flex; align-items: center; transform: rotateY(180deg); /* Clears the toggle sitting in the top-right corner. */ padding-top: 58px; } .founder-bio { color: var(--background-400); font-size: 15px; line-height: 1.55; text-align: left; margin: 0; } /* Outside .founder-inner on purpose: a control that rides the face it turns would spin away from the pointer that is trying to press it. */ .founder-toggle { position: absolute; top: 16px; right: 16px; z-index: 1; display: inline-flex; align-items: center; background-color: rgba(255, 251, 252, 0.16); color: var(--background-400); font-family: 'DM Sans'; font-size: 14px; font-weight: 500; line-height: 1; border: 1px solid rgba(255, 251, 252, 0.5); border-radius: 999px; cursor: pointer; padding: 8px 16px; transition: background-color 0.2s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .founder-toggle:hover { background-color: rgba(255, 251, 252, 0.3); } .founder-toggle:focus-visible { outline: 2px solid var(--background-400); outline-offset: 2px; } .founder-toggle-back { display: none; } .founder.is-flipped .founder-inner { transform: rotateY(180deg); } .founder.is-flipped .founder-toggle-more { display: none; } .founder.is-flipped .founder-toggle-back { display: inline; } /* Hover only where there is a real pointer. `(hover: hover)` alone is true on some touch devices that emulate a hover on first tap, which would turn the card on a tap meant to scroll past it. */ @media (hover: hover) and (pointer: fine) { .founder:hover .founder-inner { transform: rotateY(180deg); } /* The label has to follow the hover turn too, or the card reads "More" while it is already showing the bio. */ .founder:hover .founder-toggle-more { display: none; } .founder:hover .founder-toggle-back { display: inline; } } /* A card that rotates in depth is exactly the kind of motion this setting is asking us to drop, so the same two states arrive as a cross-fade instead. */ @media (prefers-reduced-motion: reduce) { .founder-inner, .founder:hover .founder-inner, .founder.is-flipped .founder-inner { transform: none; } .founder-back { transform: none; opacity: 0; transition: opacity 0.2s ease; } .founder-front { transition: opacity 0.2s ease; } .founder.is-flipped .founder-back { opacity: 1; } .founder.is-flipped .founder-front { opacity: 0; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .founder:hover .founder-back { opacity: 1; } .founder:hover .founder-front { opacity: 0; } } @media (max-width: 640px) { .founders { padding: 24px var(--margin-sm) 32px; } } /* --- "Explore Beauty by Category" (5 image cards) --- */ .category-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; width: 100%; } /* Five cards divide badly on tablet: auto-fit picks 4 columns and strands the fifth alone. Pin it to 3 (3+2) until there is room for all five in a row. */ @media (700px < width <= 1199px) { .category-row { grid-template-columns: repeat(3, 1fr); } } /* `.category`/`.category-nails`/`.category-lashes` all shared a 226px width plus 300px of top padding to push the caption to the bottom. An aspect ratio plus flex end-alignment does the same thing at any width. */ .category-row > * { width: auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 226 / 352; padding: 24px 20px 28px; /* The export gave each card a different text-align + asymmetric padding (61/45/68px) to fake centring at its fixed width. Centre them for real. */ text-align: center; } /* --- "Join the first 100" banner --- */ /* -201px pulled the paragraph left to overlap the heading's column at 1440px. Once .founding-cta stacks (container query in the export), it drags text offscreen. */ .founding-cta-text { margin: 0; } .founding-cta-body { max-width: 100%; } /* The banner is a headline on the left and a pitch answering it from the right — the outward pull is what makes the two read as one line of thought rather than two stacked paragraphs. Both are restated here rather than left to the export, since they are now a requirement instead of a leftover of where Figma happened to place the boxes. */ .founding-cta-title { text-align: left; } .founding-cta-text { text-align: right; /* Fixed, unlike every other supporting line on the page: this one sits against a 48px headline in a dark band, and the h1 support ramp's 22px made it compete with the headline instead of answering it. */ font-size: var(--type-body-lg); } /* The CTA became an so it can navigate. Everything the export drew still applies — `.btn1` already makes it a flex box — but an anchor brings its own underline and its own colour, which `.body-md1` would otherwise lose to the user-agent's link styling. */ .founding-cta-btn { text-decoration: none; color: var(--background-400); } @media (max-width: 640px) { .founding-cta { padding-block: 40px; } /* Once the band is one narrow column, opposite edges stop reading as a pair and just look misaligned, so both centre. */ .founding-cta-title, .founding-cta-body, .founding-cta-text { text-align: center; } .founding-cta-btn { width: 100%; align-self: stretch; } } /* ========================================================================= Phase 3: Founding Perks Replaces .row2 / .row3 / .row4 from the export. Those were a flat row of six siblings (icon column, text column, icon column, ...) plus a seventh perk stranded outside, with the header image pinned at `left: 818px`. Now: three self-contained groups, each with an image header and its own list, so wrapping never separates an icon from its text. ========================================================================= */ .perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: start; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--margin-md); } .perk-group { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Image header: same gradient + photo treatment the export gave .financial, but sized by aspect-ratio instead of 258px of top padding. */ .perk-group-title { display: flex; align-items: flex-end; justify-content: center; /* The photos are 768x656. Any other ratio here makes `cover` crop them, so the box follows the asset rather than the other way round. */ aspect-ratio: 768 / 656; margin: 0; padding: 20px 16px 24px; border-radius: 16px; color: var(--background-400); font-size: 28px; font-family: var(--font-display); font-weight: 600; line-height: 1.1; text-align: center; background-position: center; background-size: cover; background-repeat: no-repeat; } .perk-group-financial { background-image: var(--photo-scrim), url(../assets/perk-financial.png); } .perk-group-operations { background-image: var(--photo-scrim), url(../assets/perk-operations.png); } .perk-group-access { background-image: var(--photo-scrim), url(../assets/perk-access.png); } .perk-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .perk { display: flex; align-items: flex-start; gap: 14px; } .perk-check { flex: none; width: 32px; margin-top: 2px; } .perk-text { min-width: 0; margin: 0; color: var(--primary-500-base); font-size: var(--type-body-lg); font-family: var(--font-body); font-weight: 500; line-height: 1.333; text-align: left; } @media (max-width: 640px) { .perks { padding-inline: var(--margin-sm); } .perk-group-title { /* Only the type shrinks here. Overriding the aspect ratio made `cover` crop a third of the photo's height away on phones, which is where the header is widest and the crop most visible. */ font-size: 24px; } } /* ========================================================================= Phase 4: "See GlamGo in Action" demo cards The export drew the first card with ten absolutely-positioned pieces at literal Figma coordinates (`.cliennt-demo1 { top: 43px; left: 577px }`), plus a `.rect2` div standing in for the card background. Both cards are now the same two-column flow layout, mirrored, sharing one `.demo-media` stack for the phone-over-ornament composition. ========================================================================= */ .demo-card { display: flex; align-items: center; gap: 48px; width: 100%; max-width: 995px; margin-inline: auto; padding: 56px 64px; border-radius: 24px; background-color: var(--background-400); /* The ornament is wider than its column by design; clip it to the card's rounded edge instead of letting it push the page sideways. */ overflow: hidden; } .demo-card-body { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* These three were absolutely positioned; they are now plain flow children. */ .demo-card .demo-title-clients, .demo-card .demo-lede-clients { position: static; min-height: 0; } .demo-steps { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; } .demo-step { display: flex; align-items: flex-start; gap: 10px; } .demo-step-check { flex: none; width: 24px; margin-top: 3px; } .demo-step-text { min-width: 0; margin: 0; text-align: left; } /* --- Match the "For Clients" card's type to the "For Beauty Providers" one --- The two cards are the same component shown twice, but the export gave them different text classes: the clients side got the fluid `display-web-xl2` / `body-web-lg1` / `body-md2`, which interpolate with the viewport, while the providers side got the fixed `display-web-xl1` / `body-web-lg3` / `row-text`. They only agree at 1440, where the fluid scales top out; anywhere below that the clients card is visibly smaller than the card right beneath it — 27.8px against 32px at a 1086px viewport, for instance. The providers card is the reference, so these are its computed values, pinned. Line heights already match (both cards use the same ratios), and so do the colours; only size — and the step text's weight — were out of step. The heading and its supporting line have since moved to the site-wide heading scale at the bottom of this file, which drives both cards from one pair of selectors; only the step text's weight is still pinned here. */ .demo-card-clients .demo-step-text { font-size: var(--type-body); font-weight: 400; } /* --- Shared media stack: phone mockup over the decorative ornament --- */ .demo-media { position: relative; flex: 0 1 380px; /* Reset the export's fixed 380x575 box on .demo-media-providers. */ width: auto; height: auto; aspect-ratio: 380 / 575; display: flex; align-items: center; justify-content: center; } .demo-media-phone { position: relative; z-index: 1; display: block; width: 72%; max-width: 268px; /* The clips are 296x640. Pinning their ratio means the card reserves the right space before the video's metadata arrives, so nothing jumps, and the video sits at very close to its native shape. `cover` absorbs what is left: the ~1% the poster PNG differs by (536x1148), and the couple of percent the border costs, since box-sizing is border-box and the ratio therefore describes the border box rather than the video inside it. */ aspect-ratio: 296 / 640; object-fit: cover; /* Unlike the poster, video frames are square-cornered, so the rounding has to come from CSS here. Two percentages rather than one length: 16% of the width and 7.5% of the height are both ~43px at full size and stay circular as the card shrinks, where a fixed 43px would not. */ border-radius: 16% / 7.5%; /* The recordings are raw screen captures with no device frame of their own, so this ring is the phone's bezel. The inner radius follows from the outer one minus the border on its own — no second value needed. */ border: 5px solid var(--background-600); } /* Purely decorative; sits behind and slightly below the phone. The export pinned it at left:-99px, which is what pushed it outside the card. */ .demo-media-layer { position: absolute; z-index: 0; top: 58%; left: 50%; width: 165%; max-width: none; transform: translate(-50%, -50%); pointer-events: none; } /* --- Mirrored card below (For Beauty Providers) --- */ .demo-card-providers { align-items: center; gap: 48px; width: 100%; max-width: 995px; margin-inline: auto; padding: 56px 64px; overflow: hidden; } .demo-card-body-providers { flex: 1 1 340px; min-width: 0; margin-top: 0; width: auto; } /* The export nudged each row's text with negative right margins sized for a fixed-width column (-155px, -51px, -21px); they overflow once it is fluid. */ .demo-card-providers .demo-row, .demo-card-providers .demo-row-3 { margin: 0; width: auto; max-width: none; align-self: stretch; } .demo-card-providers .demo-row-text, .demo-card-providers .demo-row-text-last { margin: 0; min-width: 0; } .demo-card-providers .demo-lede-providers { margin: 0; } /* The column is `align-items: center` in the export, which shrink-wraps its children to their text and then centres the box. That hides `text-align` entirely — a box only as wide as its words has nothing to align inside. Stretching them to the column makes the alignment below a real choice rather than a side effect of how long the sentence happens to be. */ .demo-card-providers .demo-title-providers, .demo-card-providers .demo-lede-providers { align-self: stretch; text-align: left; } .demo-card-providers .demo-row-1 { margin-top: 20px; } @media (max-width: 900px) { .demo-card, .demo-card-providers { flex-direction: column; gap: 40px; padding: 40px var(--margin-md); } /* Text first, phone second, on both cards. */ .demo-card .demo-media, .demo-card-providers .demo-media { order: 2; flex: none; width: 100%; max-width: 340px; } .demo-card-body, .demo-card-body-providers { order: 1; flex: none; width: 100%; } /* Both cards' heading and supporting line centre once the card stacks. Side by side, the text column has the phone beside it and its own left edge to read down, so the heading belongs on that edge. Stacked, the text column *is* the card, and a left-aligned heading over a narrow phone-width block reads as an accident rather than a choice. The checklist below them stays left in both layouts: a list of steps reads down a common left edge at any width. `.demo-title-clients` is a flex box in the export, so it needs `justify-content` too — `text-align` alone would not move a line box that is only as wide as its words. */ .demo-card .demo-title-clients, .demo-card .demo-lede-clients, .demo-card-providers .demo-title-providers, .demo-card-providers .demo-lede-providers { text-align: center; justify-content: center; } } @media (max-width: 640px) { .demo-card, .demo-card-providers { padding: 32px var(--margin-sm); } } /* --- Buttons: let the hero CTAs wrap instead of overflowing --- */ .hero-actions { flex-wrap: wrap; } @media (max-width: 480px) { .hero-actions { align-self: stretch; } .hero-actions > .hero-btn-primary, .hero-actions > .hero-btn-secondary { width: 100%; } } /* --------------------------------------------------------------------------- Tabs (audience toggles) + FAQ accordion The export baked the *state* into the markup: the selected option was a

` in the markup. One `

to make the styling uniform would announce a subsection that does not exist, for the same reason the section titles above stay