/* ===================================================================== CreatorLabs — landing redesign v3 (faithful replica of Figma 471-4041) Scrapbook aesthetic: cream paper, torn edges, stickers, marker type. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600&family=Syne:wght@600;700;800&family=Caveat:wght@500;600;700&family=Permanent+Marker&family=Kaushan+Script&display=swap'); /* Atomic Marker — the design's marker-accent face (SCALE. / FAST. / TWO WEEKS. …) */ @font-face { font-family: 'Atomic Marker'; src: url('assets/fonts/AtomicMarker-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- tokens ---------- */ :root { /* viewport width, capped at the 1600 design frame — the scale every full-bleed decoration must follow so it never outgrows its section */ --frame-w: min(100vw, 1600px); --cream: #F7F1E8; --cream-2: #FBF7F0; --ink: #04080D; --grey: #6B6F7B; --grey-3: #9CA3AF; --lead-ink: #16151C; --purple: #6C5CE7; --purple-deep: #5B4BDB; --purple-bright: #6657F5; --purple-tint: #EFEBFE; --lav: #DCD3F6; --lav-pill: #C9BCF0; --pink: #F6D7E4; --pink-deep: #F48FB8; --pink-pill: #F9A8CC; --yellow: #F4F76B; --yellow-deep: #F7F92D; --white: #fff; --hair: #E8E4DC; --r: 18px; --r-lg: 26px; --shadow: 0 16px 40px -18px rgba(35,25,80,.25); --maxw: 1440px; --fd: 'Bricolage Grotesque', sans-serif; --fb: 'DM Sans', sans-serif; --fu: 'Inter', sans-serif; --fsyne: 'Syne', sans-serif; --fj: 'Plus Jakarta Sans', sans-serif; --fh: 'Caveat', cursive; --fm: 'Atomic Marker', 'Permanent Marker', cursive; /* design uses "Boxed Round Medium" for button labels — DM Sans 500 is the metric-closest stand-in */ --fbtn: 'DM Sans', sans-serif; --hero-bg: #F8F2EA; /* SCALE MODEL — the Figma frame is a 1600px artboard holding a 1440px content column. We ship that 1:1: `.stage` sections are laid out in artboard units capped at 1600, `.wrap` sections use the 1440 column, so both share the same left/right edges and every type size equals its design value at >=1600. Below 1600 the stage `--u` shrinks with the container and `.wrap` falls back to `100% - gutter`, so the page scales down instead of cropping. Backgrounds are always full-bleed and independent of both. */ --dw-page: 1600px; --gutter: 44px; --fs: 'Kaushan Script', cursive; /* The nav's 14-segment separator (Figma 471:4213). A token because the cookie bar wears the same strip and the two must not drift apart. */ --rainbow: linear-gradient(90deg, #b288e7 0 7.14%, #6657f5 7.14% 14.29%, #7751f4 14.29% 21.43%, #ebacff 21.43% 42.86%, #bec7ff 42.86% 64.29%, #b086e7 64.29% 85.71%, #d5b9f3 85.71% 100%); } * { box-sizing: border-box; } button { font: inherit; color: inherit; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--fb); color: var(--ink); background: var(--cream); line-height: 1.5; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { width: min(100% - 44px, var(--maxw)); margin-inline: auto; position: relative; z-index: 2; } /* Design stage: children are absolutely positioned in Figma artboard px via --u, which is exactly 1px when the stage is 1600 wide. Capped at --dw-page. */ /* A stage's OWN height must never be written as calc(N * var(--u)): an element cannot query its own container, so `100cqw` inside .stage resolves against the VIEWPORT while its children resolve against the (1600-capped) stage. Above 1600px the two diverge and the box inflates away from its content — that is what left a ~500px hole under the hero on wide screens. `aspect-ratio` tracks the stage's real width instead, so the box is exact at every viewport. Each stage just declares its artboard height in --sh. */ .stage { position: relative; container-type: inline-size; width: min(100%, var(--dw-page)); margin-inline: auto; --u: calc(100cqw / 1600); aspect-ratio: 1600 / var(--sh, 1); } .stage > * { position: absolute; } /* ---------- type ---------- */ h1,h2,h3,h4 { font-family: var(--fd); font-weight: 700; letter-spacing: -0.02em; line-height: 0.9; margin: 0; } .h-display { font-size: clamp(2.5rem, 5.6vw, 4.7rem); } .h-sec { font-size: clamp(2.1rem, 4.4vw, 4.375rem); font-weight: 500; line-height: 1.0; text-align: center; } /* per-section heading sizes (Figma: sizes/weights vary section to section) */ .gradband .h-sec { font-size: calc(100 * var(--u)); font-weight: 700; letter-spacing: 0; } /* Figma 471:4697 — 100 Bold */ .where .h-sec, .results .h-sec { font-size: clamp(2.1rem, 4.4vw, 4.375rem); } /* 70 Medium */ .weeks-sec .h-sec, .control-sec .h-sec { font-size: clamp(1.9rem, 3.75vw, 3.75rem); } /* 60 Medium */ .youus-sec .h-sec, .pricing .h-sec, .faq-zone .h-sec { font-size: clamp(1.7rem, 3.25vw, 3.25rem); } /* 52 Medium */ .h-feat { font-size: clamp(1.9rem, 3.3vw, 3.125rem); font-weight: 600; line-height: 1.06; } .marker { font-family: var(--fm); font-weight: 400; letter-spacing: 0; color: var(--purple); transform: rotate(-1.5deg); display: inline-block; } .hand { font-family: var(--fh); font-weight: 600; } .script { font-family: var(--fs); font-weight: 400; } .purple { color: var(--purple); } .lead { color: var(--lead-ink); font-weight: 300; font-size: clamp(1.05rem, 1.55vw, 1.5625rem); line-height: 1.4; } .kick { font-family: var(--fh); font-weight: 600; font-size: clamp(1.1rem, 1.35vw, 1.25rem); color: var(--ink); letter-spacing: 0; } .kick.caps { color: var(--purple); } /* ---------- pills / buttons ---------- */ .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fd); font-weight: 800; font-size: 15px; letter-spacing: .02em; padding: 11px 24px; border-radius: 999px; background: var(--lav-pill); color: #000; transform: rotate(-2deg); } .tag.flat { transform: none; } /* Design-stage pills (Figma 471:4687 / 471:4690 / 471:4693) — sized in --u, 226x42 */ .tag-pink, .tag-lav { justify-content: center; padding: 0; font-family: var(--fd); font-weight: 800; font-size: calc(17 * var(--u)); letter-spacing: 0; gap: calc(7 * var(--u)); transform: rotate(-1.4deg); } .tag-pink { background: #FE9DD0; color: #fff; } .tag-lav { background: #C9BCF0; color: #000; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--fsyne); font-weight: 700; font-size: 17px; padding: 15px 34px; border-radius: 999px; border: 1.5px solid var(--ink); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; background: #fff; color: var(--ink); } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); } .btn:active { transform: scale(.97); } .btn-yellow { background: var(--yellow-deep); } .btn-yellow::after { content: "⟶"; font-size: 17px; } .btn-purple { background: var(--purple); border-color: var(--purple); color: #fff; } .btn-sm { padding: 10px 20px; font-size: 14px; } /* ===================================================================== TUTORIAL VIDEO PLATE — the onboarding walkthrough, sitting on the page instead of hiding behind a CTA. One component, used twice: under the "More than an AI chatbot" statement and again above the FAQ folders. The mp4 is preload="none", so a visit costs the 24KB poster and nothing more until someone presses play. The tilt lives on .vplate-frame, not on .vplate: [data-reveal].in lands on transform:none and would flatten a tilt set on the same element. ===================================================================== */ .vplate { --rot: 0deg; width: min(100%, 920px); margin-inline: auto; } .vplate-frame { position: relative; background: #fff; border-radius: var(--r-lg); padding: clamp(8px, 1vw, 16px); box-shadow: 0 26px 60px -28px rgba(74, 45, 110, .42); transform: rotate(var(--rot)); } .vplate-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0d0d12; } .vplate-video { display: block; width: 100%; height: 100%; object-fit: cover; } /* full-bleed veil so the whole still is one control, not a small target floating over a dead image. No flat scrim over the poster: the frame's field is a bright yellow and any dark wash turns it olive, so the button and the caption carry their own contrast instead. */ .vplate-play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: none; transition: opacity .3s ease, visibility .3s ease; } .vplate-play:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: -4px; } .vplate-btn { display: grid; place-items: center; width: clamp(56px, 6vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--purple); box-shadow: 0 14px 34px -8px rgba(35, 25, 80, .55); transition: transform .2s ease, background .2s ease; } .vplate-btn svg { width: 46%; height: 46%; display: block; margin-left: 6%; } .vplate-play:hover .vplate-btn { transform: scale(1.07); background: var(--purple-deep); } .vplate-play:active .vplate-btn { transform: scale(.97); } /* pinned to a corner rather than stacked under the button: centred, the pill lands straight across the phone mockups the still is there to show */ .vplate-cap { position: absolute; left: clamp(8px, 1.8vw, 24px); bottom: clamp(8px, 1.8vw, 24px); display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 24px; border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--fbtn); font-weight: 500; font-size: clamp(13px, 1.05vw, 16px); line-height: 1; box-shadow: 0 10px 26px -12px rgba(35, 25, 80, .45); } .vplate-cap b { font-family: var(--fu); font-weight: 600; color: var(--purple); } /* once it is playing the veil steps aside for the native controls. visibility, not just opacity: a transparent button is still a tab stop */ .vplate.playing .vplate-play { opacity: 0; visibility: hidden; pointer-events: none; } /* at phone width the pill would otherwise run the full width of the frame */ @media (max-width: 600px) { .vplate-cap { padding: 8px 16px; font-size: 12px; gap: 8px; } } /* ---------- sections ---------- */ .sec { position: relative; padding-block: clamp(56px, 8vw, 110px); } .sec-head { text-align: center; max-width: 1240px; margin: 0 auto clamp(30px, 4vw, 52px); position: relative; z-index: 2; } .sec-head .tag { margin-bottom: 20px; } .sec-head .lead { font-size: clamp(1.1rem, 1.9vw, 1.875rem); margin: 18px auto 0; max-width: 660px; } /* ---------- torn paper edges ---------- */ .torn { position: absolute; left: 0; right: 0; width: 100%; height: 74px; object-fit: cover; z-index: 3; pointer-events: none; } .torn.top { top: -36px; } .torn.bottom { bottom: -36px; transform: scaleY(-1); } /* ---------- doodles ---------- */ .doodle { position: absolute; pointer-events: none; z-index: 1; } /* ===================================================================== NAV ===================================================================== */ /* Figma 471:4213 — bar 84px + 3px 14-segment separator, logo x53, right items x32 */ .topstrip { display: none; } .nav { position: sticky; top: 0; z-index: 60; background: rgba(248,242,234,.9); backdrop-filter: blur(10px); } .nav::after { content: ""; display: block; height: 3px; background: var(--rainbow); } .nav-in { display: flex; align-items: center; justify-content: space-between; height: 84px; width: min(100%, var(--dw-page)); max-width: none; padding: 0 32px 0 53px; margin-inline: auto; } .nav-in { position: relative; } .nav-in > .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fd); font-weight: 700; font-size: 19px; } .brand .logo-img { height: 28px; width: auto; display: block; } .feat-img { display: block; width: 100%; height: auto; } .brand .logo-img-lg { height: 36px; } .nav-links { display: flex; gap: 48px; font-family: var(--fu); font-size: 14px; font-weight: 400; color: #212121; } .nav-links a { display: inline-flex; align-items: center; } .nav-links a:hover { opacity: .65; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-right .btn-sm { border-width: 2px; border-color: #212121; color: #212121; border-radius: 39px; padding: 13px 24px; font-size: 16px; line-height: 20px; background: transparent; } /* five links need a tighter rhythm before the centred list closes on the logo to its left and the Start free pill to its right */ @media (max-width: 1100px) { .nav-links { gap: 32px; } } /* the bar is sticky and 87px tall (84 + the rainbow rule), so without this an anchor jump parks the section's first line underneath it */ #why, #what, #start-steps, #pricing, #faq, #start { scroll-margin-top: 96px; } /* burger — hidden until the bar drops its links at 980 */ .nav-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 48px; height: 48px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; } .nav-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .18s ease; } .nav.open .nav-burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); } .nav.open .nav-burger span:nth-child(2) { opacity: 0; } .nav.open .nav-burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } .nav-burger:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 8px; } /* logo + Start free + burger have to share one 320px bar: at the old sizes the wordmark ran under the pill from 360 down */ @media (max-width: 600px) { .brand .logo-img { height: 24px; } .nav-right { gap: 8px; } .nav-right .btn-sm { padding: 8px 16px; font-size: 14px; line-height: 16px; } .nav-burger { width: 40px; margin-right: -8px; } } /* ===================================================================== HERO ===================================================================== */ /* Figma: hero band = frame y87..939 (852 tall) on flat #F8F2EA. Background is full-bleed; the design stage is capped at the 1600px artboard width and centred, so --u never grows past 1px on wide screens. */ .hero { position: relative; overflow: clip; background: var(--hero-bg); } .hero .stage { --sh: 852; } .hero .h-plusses { left: calc(232 * var(--u)); top: calc(192 * var(--u)); width: calc(168 * var(--u)); } .hero .h-sparkle { left: calc(180 * var(--u)); top: calc(217 * var(--u)); width: calc(57 * var(--u)); } /* Both doodles are marks scribbled on top of the headline, so they arrive with it instead of already sitting there: same [data-reveal] trigger as .hero-copy (above the fold, so it fires on load), but a stamp-in — scale plus a little rotation about the mark's own centre — rather than the page-wide translateY. Each carries its own --from and --t so the two don't move in lockstep; the black sparkle is the last mark to land. Overriding transform here is why the rules are per-class: .hero .h-* outranks the [data-reveal] base. */ .hero .h-plusses, .hero .h-sparkle { transform: var(--from); transition: opacity .45s ease, transform .55s cubic-bezier(.34,1.4,.64,1); transition-delay: var(--t); } .hero .h-plusses.in, .hero .h-sparkle.in { transform: none; } .hero .h-plusses { --from: scale(.62) rotate(-9deg); --t: .18s; } .hero .h-sparkle { --from: scale(.35) rotate(16deg); --t: .34s; } .hero .hero-collage { left: calc(776 * var(--u)); top: calc(35 * var(--u)); width: calc(802 * var(--u)); height: auto; } .hero .hero-copy { left: calc(97 * var(--u)); top: calc(245 * var(--u)); width: calc(741 * var(--u)); z-index: 3; } .hero h1 { /* 81, not the frame's 90: "Run your business" is a longer first line than the design's "creator business" and 90 overflows the 741 copy column. */ font-size: calc(81 * var(--u)); line-height: calc(72 * var(--u)); font-weight: 700; letter-spacing: 0; color: #000; font-variation-settings: "opsz" 14, "wdth" 100; } .hero h1 .purple { color: var(--purple-bright); } .hero-sub { margin: calc(24 * var(--u)) 0 0; width: calc(667 * var(--u)); font-family: var(--fb); font-weight: 300; color: #000; font-size: calc(30 * var(--u)); line-height: calc(35 * var(--u)); } .hero-actions { display: flex; align-items: center; gap: calc(22 * var(--u)); margin-top: calc(63 * var(--u)); } /* Figma primary/secondary button: square, 1px black hairline, 57 tall */ .hero .btn { font-family: var(--fbtn); font-weight: 500; letter-spacing: 0; font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); height: calc(57 * var(--u)); padding: 0 calc(38 * var(--u)); border: 1px solid #000; border-radius: 0; background: transparent; color: #000; gap: calc(10 * var(--u)); } .hero .btn-yellow { background: var(--yellow-deep); width: calc(210 * var(--u)); padding: 0; } .hero .btn-yellow::after { content: none; } .hero .btn-arrow { width: calc(43 * var(--u)); height: auto; transform: scaleY(-1); } .hero .btn:hover { transform: none; box-shadow: 3px 3px 0 rgba(0,0,0,.85); } /* ===================================================================== YELLOW STATS BAND ===================================================================== */ /* Figma 471:4673 — 1600x80 band #F8F96F, three fixed columns at x87 / x611 / x1139 */ .statband { background: #F8F96F; position: relative; z-index: 2; } .statband .stage { --sh: 80; } .statband .item { /* Centred rather than a fixed top: at `top: 14 * --u` the ink sat 6px above the frame's in the 80px band (ours 956..990 against 963..992 measured off v3.png at 1600). Centring the 44px box lands the ink centre on 977.0 against the frame's 977.5. */ top: 50%; translate: 0 -50%; display: flex; align-items: baseline; gap: calc(8 * var(--u)); font-family: var(--fbtn); font-weight: 400; font-size: calc(30 * var(--u)); line-height: calc(40 * var(--u)); color: #000; white-space: nowrap; } .statband .i1 { left: calc(87 * var(--u)); } .statband .i2 { left: calc(611 * var(--u)); } .statband .i3 { left: calc(1139 * var(--u)); } .statband b { font-family: var(--fbtn); font-weight: 700; font-size: calc(36 * var(--u)); } .statband .sp { font-size: calc(23 * var(--u)); } /* One stat per row below 750, where the band's 30px design type has scaled under 14px (it reaches 6px at 320 — the whole stage is aspect-ratio 1600/80, so the band and its text shrink with the viewport forever). Same escape hatch the hero uses: leave the absolute stage, --u: 1px, and size in real px. The b/.sp ratios stay design-exact by using em (36/30 = 1.2, 23/30 = 0.767). */ @media (max-width: 980px) { .statband .stage { aspect-ratio: auto; height: auto; container-type: normal; --u: 1px; display: grid; justify-items: center; gap: clamp(9px, 2.4vw, 15px); padding: clamp(22px, 5.2vw, 34px) 22px; } .statband .stage > * { position: static; translate: none; } .statband .item { font-size: clamp(15px, 4.9vw, 26px); line-height: 1.25; gap: .3em; } .statband b { font-size: 1.2em; } .statband .sp { font-size: .767em; } } /* ===================================================================== PARTNERS + CREATORS (pink band with torn edges) ===================================================================== */ /* Figma 471:4202 — flat #F8E4E3 band, frame y1019..1533, torn paper edge into cream */ .pinkband { background: #F8E4E3; position: relative; } .pinkband .stage { --sh: 514; } .pinkband .pb-star { left: calc(1198 * var(--u)); top: calc(43 * var(--u)); width: calc(144 * var(--u)); } .pinkband .pb-heart { left: calc(320 * var(--u)); top: calc(121 * var(--u)); width: calc(72 * var(--u)); } .pinkband .tag-pink { left: calc(709 * var(--u)); top: calc(75 * var(--u)); width: calc(226 * var(--u)); height: calc(42 * var(--u)); } .pinkband .pb-title { left: calc(388 * var(--u)); top: calc(108 * var(--u)); width: calc(875 * var(--u)); font-family: var(--fd); font-weight: 400; letter-spacing: 0; text-align: center; color: #000; font-size: calc(50 * var(--u)); line-height: calc(120 * var(--u)); font-variation-settings: "opsz" 14, "wdth" 100; } .pinkband .pb-cards { left: calc(505 * var(--u)); top: calc(243 * var(--u)); width: calc(680 * var(--u)); aspect-ratio: 1360 / 256; } /* Both torn cards share one webp whose flat #F8E4E3 ground matches the band, so each link paints its own half of the image and can move independently: the pink it drags along is invisible against the pink it sits on. */ .pinkband .pb-cards .pb-link { position: absolute; top: 0; height: 100%; width: 50%; background: url(assets/pb-cards.webp) 0 0 / 200% 100% no-repeat; transform-origin: 50% 55%; } .pinkband .pb-cards .pb-link.unruly { left: 0; } .pinkband .pb-cards .pb-link.behave { left: 50%; background-position: 100% 0; } .pinkband .pb-cards .pb-link:hover { animation: pb-wave .7s ease-in-out; } @keyframes pb-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.4deg); } 60% { transform: rotate(2.2deg); } 85% { transform: rotate(-.8deg); } } /* torn edge is full-bleed so wide screens still tear edge-to-edge */ .pinkband .pb-torn { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(147 / 1600 * var(--frame-w)); object-fit: fill; } /* ---------- creators (cream) ---------- */ /* Figma frame y1533..2534 on #F8F2EA — script wordmark, handwriting, polaroid wall */ .creators-sec { background: var(--cream); position: relative; overflow: clip; } .creators-sec .stage { --sh: 1001; } .creators-sec .tag-lav { left: calc(712 * var(--u)); top: calc(35 * var(--u)); width: calc(226 * var(--u)); height: calc(42 * var(--u)); } .creators-sec .cr-words { left: calc(1189 * var(--u)); top: calc(-2 * var(--u)); width: calc(411 * var(--u)); } .creators-sec .cr-script{ left: calc(79 * var(--u)); top: calc(71 * var(--u)); width: calc(1061 * var(--u)); } .creators-sec .cr-cards { left: calc(70 * var(--u)); top: calc(369 * var(--u)); width: calc(1475 * var(--u)); } .blend { display: block; width: 100%; pointer-events: none; } .ccard { margin: 0; background: #fff; border-radius: 6px; box-shadow: 0 26px 46px -22px rgba(90,50,140,.4); transition: transform .25s ease; } .ccard img { border-radius: 6px; } .ccard.t1 { width: 20%; transform: rotate(-5deg) translateY(84px); } .ccard.t2 { width: 26%; transform: rotate(-2deg); } .ccard.t3 { width: 23%; transform: rotate(1.5deg) translateY(26px); } .ccard.t4 { width: 25%; transform: rotate(4deg) translateY(52px); } .ccard:hover { transform: rotate(0) translateY(-4px); z-index: 3; } /* ===================================================================== CHOOSE / SCALE (gradient pink→lavender) ===================================================================== */ /* Figma frame y2534..3694. Background = torn paper edge out of the creators cream, then Figma's blurred blob stack (471:4210): #F4EEF6 plate + pink + lavender rects, each with a 50px layer blur. All three layers are full-bleed. */ .gradband { position: relative; background: var(--cream); overflow: clip; container-type: inline-size; --u: calc(min(100cqw, var(--dw-page)) / 1600); padding: calc(232 * var(--u)) 0 calc(46 * var(--u)); } .gradband > .wrap { z-index: 3; } .gradband .gb-blob { position: absolute; left: 50%; translate: -50% 0; top: calc(188 * var(--u)); width: 100%; min-width: 1600px; height: calc(972 * var(--u)); background: #F4EEF6; filter: blur(calc(50 * var(--u))); z-index: 0; } /* full-bleed layers anchor to the page centre, so frame x maps to 50% + (x - 800)*--u */ .gradband .gb-blob i { position: absolute; display: block; filter: blur(calc(50 * var(--u))); } .gradband .gb-blob .b1 { left: calc(50% - 783 * var(--u)); top: 0; width: calc(1093 * var(--u)); height: calc(716 * var(--u)); background: #F8C9EB; } .gradband .gb-blob .b2 { left: calc(50% - 669 * var(--u)); top: calc(301 * var(--u)); width: calc(1479 * var(--u)); height: calc(714 * var(--u)); background: #C9BCF0; } .gradband .gb-torn { position: absolute; left: 50%; translate: -50% 0; top: 0; width: 100%; height: calc(276 / 1600 * var(--frame-w)); object-fit: fill; z-index: 1; } .gradband .gb-star1, .gradband .gb-star2, .gradband .gb-heart { position: absolute; z-index: 2; } .gradband .gb-star1 { left: calc(50% - 446 * var(--u)); top: calc(297 * var(--u)); width: calc(45 * var(--u)); } .gradband .gb-star2 { left: calc(50% + 440 * var(--u)); top: calc(325 * var(--u)); width: calc(69 * var(--u)); } .gradband .gb-heart { left: calc(50% - 393 * var(--u)); top: calc(1067 * var(--u)); width: calc(37 * var(--u)); } /* head block: tag y232, h2 y302 (100/92), lead y520 — all measured off the frame */ .gradband .sec-head { margin: 0 auto; max-width: none; } .gradband .sec-head .tag { width: calc(226 * var(--u)); height: calc(42 * var(--u)); margin: 0; } .gradband .sec-head .h-sec { margin-top: calc(28 * var(--u)); line-height: calc(92 * var(--u)); } .gradband .sec-head .lead { margin: calc(34 * var(--u)) auto 0; max-width: none; font-size: calc(30 * var(--u)); line-height: calc(35 * var(--u)); color: #000; } .gradband .compare { margin-top: calc(57 * var(--u)); } /* note sits next to the heart doodle at a fixed frame position, not after the cards */ .gradband { min-height: calc(1160 * var(--u)); } .gradband .compare-note { position: absolute; left: calc(50% - 324 * var(--u)); top: calc(1079 * var(--u)); margin: 0; width: calc(833 * var(--u)); text-align: left; z-index: 3; font-weight: 400; font-size: calc(58 * var(--u)); letter-spacing: calc(1.1 * var(--u)); line-height: calc(35 * var(--u)); white-space: nowrap; } .compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; max-width: 1200px; margin: 0 auto; } .ccol { background: #fff; border-radius: var(--r-lg); padding: 34px 32px; box-shadow: 0 14px 34px -20px rgba(60,40,120,.35); } .ccol h3 { font-family: var(--fd); font-weight: 700; font-size: 25px; margin-bottom: 6px; } .ccol .sub { font-family: var(--fu); font-size: 15px; color: var(--grey-3); margin: 0 0 22px; } .ccol.mid { background: #FBEFF6; position: relative; box-shadow: 0 22px 44px -20px rgba(120,40,120,.4); } .ccol.mid h3 { font-family: var(--fs); font-weight: 400; font-size: 26px; color: var(--purple-bright); } .ccol .flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-1deg); background: var(--ink); color: var(--yellow-deep); font-family: var(--fu); font-weight: 700; font-size: 11px; letter-spacing: .06em; padding: 7px 14px; border-radius: 999px; white-space: nowrap; } .clist { margin: 0; padding: 0; display: grid; gap: 16px; } .clist li { list-style: none; display: flex; gap: 12px; font-family: var(--fu); font-size: 16px; color: var(--ink); align-items: center; } .clist li::before { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; } .clist.x li::before { content: "✕"; background: #FBE1DC; color: #D9502E; } .clist.check li::before { content: "✓"; background: var(--purple-bright); color: #fff; } .clist li.good::before { content: "✓"; background: #D8F2E1; color: #1F9D55; } /* heart is a real doodle image (.gb-heart), so no ::before glyph here */ .compare-note { text-align: center; margin-top: 40px; font-family: var(--fh); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); } /* chatbot statement (cream) */ .statement-sec { background: var(--cream); position: relative; padding-block: clamp(72px, 9vw, 120px); } .statement { text-align: center; position: relative; } .statement h2 { font-size: clamp(2.3rem, 5.6vw, 5.625rem); font-weight: 700; line-height: .96; } .statement .hl { position: relative; display: inline-block; padding: 2px 14px; background: var(--yellow-deep); transform: rotate(-1.6deg); font-family: var(--fm); font-weight: 400; color: var(--ink); } .statement .lead { max-width: 520px; margin: 18px auto 0; color: #6b5f79; } /* the two plates lean opposite ways so the pair reads as hand-placed rather than as the same embed pasted twice */ .statement-sec .vplate { --rot: -1.1deg; margin-top: clamp(40px, 5vw, 72px); } .faq-zone .vplate { --rot: 1.1deg; margin-bottom: clamp(40px, 5.5vw, 80px); } /* ===================================================================== FEATURES ===================================================================== */ .feat { position: relative; padding-block: clamp(56px, 7vw, 96px); } /* Figma feature rows are not a uniform 50/50 grid — each row sets its own column widths / gutter / total span via --c1/--c2/--gap/--gw. */ .feat-grid { display: grid; grid-template-columns: var(--c1, 1fr) var(--c2, 1fr); gap: var(--gap, clamp(28px, 5vw, 72px)); max-width: var(--gw, none); margin-inline: auto; align-items: center; } .feat-grid.flip .copy { order: 2; } .feat .copy .kick { display: block; margin-bottom: calc(6px + .1em); transform: rotate(-1deg); } /* Bricolage SemiBold 50 / line-height 70 / tracking -1.82px (Figma 471:4870) */ .feat .copy h3 { font-size: clamp(1.9rem, 3.3vw, 3.125rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.036em; } .feat .copy h3 .purple { color: var(--purple-bright); } /* DM Sans Light 25 / line-height 35 / black (Figma 471:4871) */ .feat .copy .lead { margin-top: 6px; max-width: 46ch; color: #000; } .blob-bg { position: absolute; inset: auto 0; left: 50%; transform: translateX(-50%); border-radius: 50%; z-index: 0; } .feat .wrap { z-index: 2; } /* white ui cards */ .uicard { background: #fff; border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); font-family: var(--fu); } .uirow { display: flex; align-items: center; gap: 12px; padding: 13px 4px; } .uirow + .uirow { border-top: 1px solid #F0EDE7; } .uirow .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--purple-tint); display: grid; place-items: center; font-size: 17px; flex: none; } .uirow .t { font-weight: 600; font-size: 14.5px; } .uirow .s { font-size: 12px; color: var(--grey-3); } .uirow .rt { margin-left: auto; text-align: right; } .uirow .num { font-weight: 700; font-size: 16px; color: var(--purple-bright); } .minipill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--yellow); } .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--fu); font-weight: 600; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; background: var(--purple-tint); color: var(--purple-deep); } .chip.red { background: #FDE8E8; color: #C0392B; } .chip.dashed { background: transparent; border: 1.5px dashed var(--grey-3); color: var(--grey); } .chip.solid { background: var(--purple); color: #fff; } .chip.white { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0,0,0,.25); } .chip.yellow { background: var(--yellow-deep); color: var(--ink); } .chip.outline { background: transparent; border: 1.5px solid var(--ink); } /* progress bars (auto engagement) */ .bar { height: 34px; border-radius: 10px; background: var(--purple-tint); position: relative; overflow: hidden; margin-top: 8px; font-size: 12.5px; font-weight: 600; } .bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--purple), var(--purple-bright)); border-radius: 10px; } .bar span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; color: #fff; z-index: 1; } .bar.light span { color: var(--purple-deep); } /* content management card (feature 04, Figma 518:2443) */ .content-card { max-width: 582px; margin: 0 auto clamp(32px, 4vw, 52px); background: #fff; border: 1px solid #ECECEF; border-radius: 18px; padding: clamp(16px, 2.4vw, 26px); box-shadow: 0 30px 70px rgba(4,8,13,.1); display: grid; gap: 13px; font-family: var(--fu); text-align: left; } .cc-head { display: flex; align-items: center; gap: 11px; background: #F4F2FE; border-radius: 12px; padding: 14px 16px; } .cc-badge { width: 34px; height: 34px; border-radius: 9px; background: #fff; display: grid; place-items: center; font-size: 16px; flex: none; } .cc-badge.lav { width: 38px; height: 38px; background: var(--purple-tint); } .cc-t { font-weight: 600; font-size: 14px; color: #04080D; } .cc-s { font-size: 12px; color: #5C6370; margin-top: 3px; } .cc-photos { display: flex; gap: 10px; justify-content: center; } .cc-photos img { width: clamp(70px, 23%, 124px); aspect-ratio: 124 / 165; object-fit: cover; border-radius: 12px; } .cc-tag { color: var(--purple-bright); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding-top: 3px; } .cc-bundle { display: flex; align-items: center; gap: 12px; border: 1px solid #ECECEF; border-radius: 12px; padding: 14px 16px; } .cc-bundle > div { flex: 1; } .cc-bundle .cc-s { color: var(--grey-3); } .cc-price { color: var(--purple-bright); font-weight: 600; font-size: 19px; flex: none; } /* ===================================================================== WHERE YOU ARE — 4 cards ===================================================================== */ .where { background: linear-gradient(180deg, #F6DCE9, #F3D4E5); position: relative; padding-block: clamp(70px, 9vw, 110px) clamp(90px, 11vw, 150px); overflow: clip; } .where h2 .purple { color: var(--purple-bright); } .where-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(44px, 6vw, 80px); position: relative; align-items: start; } .wcard { position: relative; background: #fff; border-radius: 20px; padding: 34px 22px 24px; box-shadow: 0 20px 38px -22px rgba(120,40,90,.45); border: 1px solid rgba(120,60,150,.10); } .wcard::before { content: ""; position: absolute; left: 18px; right: 18px; top: 20px; border-top: 2px dashed #CBB9FF; } .wcard::after { content: "•••"; position: absolute; right: 18px; top: 9px; letter-spacing: 2px; color: #CBB9FF; font-size: 11px; line-height: 1; } .wcard .wic { position: absolute; left: 20px; top: 36px; width: 42px; height: 42px; border-radius: 12px; background: var(--purple-tint); display: grid; place-items: center; font-size: 19px; } .wcard h4 { font-family: var(--fd); font-weight: 700; font-size: 16px; margin: 0 0 12px 56px; min-height: 42px; display: flex; align-items: center; line-height: 1.15; } .wcard p { margin: 0; font-family: var(--fu); font-size: 12.5px; color: var(--grey); line-height: 1.55; } /* diagonal cascade: steps up left -> right (arrow is child 1). margin-top, NOT transform: the data-reveal animation ends in transform:none and would wipe a transform-based stagger. */ .wcard:nth-child(1) { margin-top: 54px; } .wcard:nth-child(2) { margin-top: 36px; } .wcard:nth-child(3) { margin-top: 18px; } .wcard:nth-child(4) { margin-top: 0; } .where-arrow { position: absolute; left: -6px; top: -34px; width: clamp(78px, 8vw, 118px); transform: rotate(8deg) scaleX(-1); opacity: .75; pointer-events: none; z-index: 1; } /* ===================================================================== RESULTS — yellow band ===================================================================== */ .results { padding-block: clamp(64px, 8vw, 100px) 0; } .results-band { background: var(--yellow); margin-top: clamp(30px, 4vw, 48px); padding: clamp(36px, 5vw, 60px) 0; } .rgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .rcard { background: #fff; border-radius: var(--r); padding: 28px 20px; text-align: center; box-shadow: 0 12px 26px -14px rgba(90,90,20,.35); } .rcard .ico { font-size: 20px; margin-bottom: 10px; color: var(--purple); } .rcard .big { font-family: var(--fd); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--purple-bright); } .rcard .lbl { font-family: var(--fu); font-size: 12.5px; color: var(--grey); margin-top: 8px; line-height: 1.5; } /* ===================================================================== YOU / US ===================================================================== */ .youus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 0 auto; } .yu-card { border-radius: var(--r-lg); padding: 26px; } .yu-card.you { background: #fff; box-shadow: var(--shadow); } .yu-card.us { background: var(--purple-tint); box-shadow: var(--shadow); } .yu-card h4 { font-family: var(--fd); font-size: 18px; margin-bottom: 16px; } .yu-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(0,0,0,.06); font-family: var(--fu); font-size: 14px; } .yu-row .who { flex: none; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--purple-deep); box-shadow: 0 2px 6px rgba(0,0,0,.08); } /* ===================================================================== TIMELINE ===================================================================== */ .timeline { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; } .tl { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; } .tl .day { font-family: var(--fu); font-weight: 700; font-size: 12px; background: var(--purple); color: #fff; border-radius: 999px; padding: 6px 12px; text-align: center; margin-top: 16px; transform: rotate(-2deg); } .tl .body { background: #fff; border-radius: var(--r); padding: 20px 24px; box-shadow: var(--shadow); } .tl .body h4 { font-family: var(--fd); font-size: 16.5px; margin-bottom: 6px; } .tl .body p { margin: 0; font-family: var(--fu); font-size: 13.5px; color: var(--grey); } .tl.hl .body { background: var(--purple-tint); } /* ===================================================================== CONTROL — blob cards ===================================================================== */ .ctrl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1020px; margin: 0 auto; } .blobcard { border: 1.6px solid var(--ink); background: transparent; padding: 30px 28px; position: relative; border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%; min-height: 150px; } .blobcard:nth-child(2n) { border-radius: 45% 55% 48% 52% / 48% 55% 45% 52%; transform: rotate(.6deg); } .blobcard:nth-child(3n) { border-radius: 52% 48% 42% 58% / 55% 45% 55% 45%; transform: rotate(-.7deg); } .blobcard h4 { font-family: var(--fd); font-size: 16px; margin-bottom: 8px; } .blobcard p { margin: 0; font-family: var(--fu); font-size: 12.5px; color: var(--grey); line-height: 1.55; } .blobcard .ic { position: absolute; top: 18px; right: 26px; font-size: 18px; color: var(--purple); } .blobcard .ic-img { position: absolute; top: 12px; right: 22px; width: 52px; height: 52px; object-fit: contain; } .blobcard h4 { padding-right: 56px; } .ctrl-legal { text-align: center; font-family: var(--fu); font-size: 11.5px; color: var(--grey-3); max-width: 620px; margin: 36px auto 0; } .ctrl-legal a { text-decoration: underline; } /* ===================================================================== PRICING ===================================================================== */ /* overflow-x only. The gradient below has to bleed vertically past the section box — the frame ramps it up over ~280px starting well ABOVE this section, so at the section's own top edge it is already at 53% of peak. `overflow: clip` cut it off exactly there, which is the hard horizontal line that looked like the artwork had been trimmed. `clip`/`visible` is a legal pair and is preserved (same trick as `body`), so content still cannot escape sideways. */ .pricing { position: relative; overflow-x: clip; overflow-y: visible; padding-block: clamp(70px, 9vw, 120px); } /* Background gradient. It was three `border-radius: 50%` blobs behind `filter: blur()`, but the frame's version is not radial at all — node 471:4119 paints two heavily blurred rounded RECTANGLES: a yellow one across the top left and a larger lavender one below and right of it. Round blobs cannot make the broad flat fields that produces, and the fixed-px sizes had the usual gotcha-2 problem on top of it, so the whole thing read as a pale wash (peak #F8F3DC against the frame's #FCFF4D). Reproduced from the frame's own export rather than re-fitted by hand: the two rects overlap, which contaminates any edge fit — every attempt to solve the blur radius from the ramp disagreed with itself (sigma 29 across, 59 down, for one isotropic blur). The export registers to frame x 0..1600, y 13006..14222, found by brute-force offset search over background-only pixels (score 1.86/255). Stretched with 100% 100% rather than pinned to an aspect ratio: the artwork has no feature smaller than the ~30px blur, so it takes any amount of non-uniform scaling invisibly, and that keeps the composition filling the section identically at every viewport. Absolute px would be exact at 1600 and then leave most of the section bare on a phone, where this section grows to ~3x its desktop height while --frame-w shrinks. Percentages are over OUR section height (1018 at 1600), not the design's 972 — using 972 stretched it 4.7% and pushed the colour transition ~40 blue-levels late. Height is the export's 1216. The -145 top is measured, not the export's nominal -101 from the design's container: our section box does not start where that container does. Fitted by rendering the ramps at -101/-115/-130/-145/-160/-175 and scoring RMS against the frame's own vertical profiles — 35.6 at -101, 2.8 at -145, rising again after, which agrees with anchoring on the pink pill's ink independently. z-index -1, not 0: the bleed now lands on the control section above and the FAQ below, both of which are transparent over body's cream. A negative z-index paints above the canvas background but behind every element on the page, so those sections' own content still covers it and the price card stays opaque on top without needing a counter-z-index on .wrap. */ .pricing::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: -14.24%; height: 119.45%; background: url(assets/pricing-glow.webp) 50% 50% / 100% 100% no-repeat; } .price-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); max-width: 920px; margin: 0 auto; overflow: hidden; } .prow { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 22px 30px; align-items: baseline; } .prow + .prow { border-top: 1px solid #F0EDE7; } .prow .k { font-family: var(--fd); font-weight: 700; font-size: 15.5px; } .prow .v { font-family: var(--fu); font-weight: 700; font-size: 15.5px; color: var(--purple-bright); } .prow .d { font-family: var(--fu); font-size: 13px; color: var(--grey); margin-top: 4px; } .fee-table { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); max-width: 920px; margin: 22px auto 0; overflow: hidden; font-family: var(--fu); font-size: 14px; } .fee-table .tr { display: flex; justify-content: space-between; padding: 14px 30px; } .fee-table .tr + .tr { border-top: 1px solid #F0EDE7; } .fee-table .th { background: var(--pink); font-weight: 700; } .fee-table .amt { font-weight: 700; color: var(--purple-bright); } /* ===================================================================== FAQ — folder cards ===================================================================== */ .faq-zone { position: relative; } .folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; max-width: 940px; margin: 0 auto; position: relative; z-index: 2; } .folder { position: relative; cursor: pointer; } .folder .face { background: #fff; border-radius: 14px; padding: 34px 26px 30px; box-shadow: 0 16px 34px -16px rgba(35,25,80,.3); position: relative; min-height: 104px; display: flex; align-items: center; } .folder .face::before { content: ""; position: absolute; top: -15px; left: 16px; width: 44%; height: 18px; background: #fff; border-radius: 9px 12px 0 0; } .folder:nth-child(3n+1) { transform: rotate(-3.4deg); } .folder:nth-child(3n+2) { transform: rotate(2.4deg); } .folder:nth-child(3n) { transform: rotate(-1.6deg); } .folder .q { font-family: var(--fu); font-weight: 600; font-size: 17px; line-height: 1.35; display: flex; justify-content: space-between; gap: 10px; width: 100%; align-items: center; } .folder .q .st { color: var(--purple); flex: none; } .folder .q .st-img { width: 34px; height: 34px; object-fit: contain; flex: none; } .folder .a { display: none; font-family: var(--fu); font-size: 12.5px; color: var(--grey); margin-top: 10px; line-height: 1.55; } .folder.open .a { display: block; } .faq-q-doodle { position: absolute; z-index: 1; opacity: .9; } /* ===================================================================== FINAL CTA + FOOTER ===================================================================== */ .final { text-align: center; padding-block: clamp(70px, 9vw, 110px) clamp(48px, 6vw, 72px); } .final h2 { font-size: clamp(2.1rem, 4.5vw, 4.5rem); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; } .final .lead { max-width: 420px; margin: 14px auto 26px; } .final .note { margin-top: 16px; font-family: var(--fu); font-size: 12.5px; color: var(--grey-3); } .footer { border-top: 1px solid var(--hair); padding: clamp(44px, 6vw, 64px) 0 32px; position: relative; overflow: clip; } .footer .brandrow { display: flex; justify-content: center; margin-bottom: clamp(32px, 4vw, 48px); } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 980px; margin: 0 auto; } .f-left { position: relative; min-height: 180px; } .f-left .script-lab { font-family: var(--fh); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--purple); transform: rotate(-3deg); display: inline-block; } .f-left .tagline { font-family: var(--fh); font-weight: 600; font-size: 19px; color: var(--pink-deep); margin-top: 8px; } .f-contact { display: grid; gap: 26px; } .f-item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; } .f-item .lbl { font-family: var(--fh); font-weight: 700; font-size: 21px; color: var(--pink-deep); } .f-item .val { font-family: var(--fd); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.55rem); } .f-item .val-line { display: block; width: min(100%, 320px); height: 10px; margin-top: 3px; } .footer .fd { z-index: 0; opacity: .92; } .footer-legal { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-family: var(--fu); font-size: 11.5px; color: var(--grey-3); margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--hair); padding-top: 20px; } /* ---------- reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } [data-reveal].in { opacity: 1; transform: none; } /* ===================================================================== ANIMATED FEATURE MOCKUPS ===================================================================== */ /* staged items — hidden until the [data-anim] container scrolls in, then each child pops at its own --t delay */ [data-anim] .ai { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .5s ease, transform .55s cubic-bezier(.34,1.4,.64,1); transition-delay: var(--t, 0s); } [data-anim].in .ai { opacity: 1; transform: none; } /* --------------------------------------------------------------------- .mock — proportional mockup scaler. The Figma frame is 1600px wide, so every mockup is authored in raw design px and scales as one unit: set --dw to the design width, then express every inner value as calc(N * var(--u)). --u is exactly 1px when the mockup renders at its design size. --------------------------------------------------------------------- */ .mock { container-type: inline-size; width: 100%; max-width: calc(var(--dw) * 1px); margin-inline: auto; text-align: left; --u: calc(100cqw / var(--dw)); } /* Figma pins DM Sans's optical-size axis at 14 inside the mockups; without this the glyphs render ~8% narrower than the design at large sizes. */ .mock { font-variation-settings: "opsz" 14; } /* 01 — auto onboarding (Figma 471:4968, 602x559) */ .ob-card { background: #fff; border-radius: calc(30 * var(--u)); padding: calc(44 * var(--u)) calc(32 * var(--u)) calc(49 * var(--u)) calc(37 * var(--u)); font-family: var(--fb); } .ob-hi { display: flex; align-items: center; gap: calc(49 * var(--u)); height: calc(103 * var(--u)); margin-bottom: calc(37 * var(--u)); padding-left: calc(31 * var(--u)); background: #F8F5FC; border: 1px solid #E5E5E5; border-radius: calc(10 * var(--u)); } .ob-hi-ic { width: calc(60 * var(--u)); height: calc(60 * var(--u)); flex: none; } .ob-hi-ic svg { width: 100%; height: 100%; display: block; } .ob-item { display: flex; align-items: center; gap: calc(30 * var(--u)); } .ob-item:not(:last-child) { padding-bottom: calc(18 * var(--u)); border-bottom: 1px solid #D9D9D9; margin-bottom: calc(19 * var(--u)); } .ob-ic { width: calc(84 * var(--u)); height: calc(84 * var(--u)); flex: none; margin-left: calc(19 * var(--u)); /* tiles sit inset from the card padding */ background: #F8F5FC; border: 1px solid #E7E7E7; border-radius: calc(10 * var(--u)); display: grid; place-items: center; overflow: hidden; } .ob-ic img { display: block; } .ob-ic .w61 { width: calc(61 * var(--u)); } .ob-ic .w56 { width: calc(56 * var(--u)); } .ob-ic .w59 { width: calc(59 * var(--u)); } .ob-tt { flex: 1; min-width: 0; } .ob-tt b { display: block; font-weight: 600; font-size: calc(25 * var(--u)); line-height: calc(32 * var(--u)); color: #000; } .ob-tt span { display: block; font-weight: 500; font-size: calc(18 * var(--u)); line-height: calc(32 * var(--u)); color: #818181; margin-top: calc(3 * var(--u)); } .ob-right { display: grid; justify-items: end; gap: calc(15 * var(--u)); } .ob-num { font-weight: 600; font-size: calc(35 * var(--u)); line-height: calc(32 * var(--u)); color: #6657F5; white-space: nowrap; } .ob-flag { display: flex; align-items: center; gap: calc(5 * var(--u)); width: calc(101 * var(--u)); height: calc(23 * var(--u)); padding-left: calc(12 * var(--u)); background: #FDF1C3; border-radius: calc(11.5 * var(--u)); font-weight: 500; font-size: calc(10 * var(--u)); line-height: 1; color: #000; white-space: nowrap; } .ob-flag svg { width: calc(9 * var(--u)); height: calc(7 * var(--u)); flex: none; transform: rotate(-37.87deg); } .hashpill { background: #EFEBFE; color: #5346E8; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; } /* 03 — fan profile (Figma 471:4877 — 582x283) */ .fp-card { background: #fff; border: 1px solid #ECECEF; border-radius: calc(18 * var(--u)); padding: calc(27 * var(--u)); display: grid; gap: calc(16 * var(--u)); filter: drop-shadow(0 calc(30 * var(--u)) calc(35 * var(--u)) rgba(4,8,13,.12)); font-family: var(--fu); line-height: normal; } .fp-head { display: flex; align-items: center; gap: calc(12 * var(--u)); } .fp-ava { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(22 * var(--u)); flex: none; background: linear-gradient(135deg, #8C7DF8 0%, #6657F5 100%); } .fp-id { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--u)); } .fp-name { display: flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; color: #04080D; } .fp-pill { background: #EFEBFE; color: #5346E8; font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: calc(.4 * var(--u)); text-transform: uppercase; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: 999px; } .fp-sub { font-size: calc(12 * var(--u)); color: #9CA3AF; } .fp-live { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; color: #15803D; } .fp-live .dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #16A34A; flex: none; } .fp-table { border: 1px solid #ECECEF; border-radius: calc(12 * var(--u)); padding: calc(3 * var(--u)) 1px 1px; overflow: clip; } .fp-tr { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); } .fp-tr + .fp-tr { border-top: 1px solid #F1F2F4; padding-top: calc(13 * var(--u)); } .fp-tr .k { font-size: calc(13 * var(--u)); color: #5C6370; } .fp-tr .v { font-size: calc(13 * var(--u)); font-weight: 600; color: #04080D; } .fp-chips { display: flex; flex-wrap: wrap; gap: 0 calc(8 * var(--u)); height: calc(27 * var(--u)); } .fp-chips span { background: #F2F2F5; color: #5C6370; font-size: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; display: flex; align-items: center; } /* 02 — chat demo (Figma 471:4054 — 678x845 stage, card 547x784 at 74,46). Laid out absolutely, exactly as the Figma frame: this is a screenshot-style mockup, so faithful geometry beats reflow. */ .cd-stage { position: relative; height: calc(845 * var(--u)); font-family: var(--fu); } .cd-stage > img { position: absolute; } .cd-dust-l { left: 0; top: 0; width: calc(76 * var(--u)); height: calc(809 * var(--u)); } .cd-dust-r { left: calc(621 * var(--u)); top: calc(109 * var(--u)); width: calc(57 * var(--u)); height: calc(736 * var(--u)); transform: rotate(180deg); } .cd-eye { left: calc(554 * var(--u)); top: 0; width: calc(105 * var(--u)); height: calc(65 * var(--u)); } .cd-lips { left: calc(12.25 * var(--u)); top: calc(666.85 * var(--u)); width: calc(88.09 * var(--u)); height: calc(60.1 * var(--u)); transform: rotate(-21.08deg); } .cd-card { position: absolute; left: calc(74 * var(--u)); top: calc(46 * var(--u)); width: calc(547 * var(--u)); height: calc(784 * var(--u)); background: rgba(255,255,255,.87); border-radius: calc(30 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(0,0,0,.08); } .cd-card > * { position: absolute; } /* header */ .cd-back { left: calc(21.75 * var(--u)); top: calc(42.8 * var(--u)); width: calc(26.5 * var(--u)); height: calc(18.41 * var(--u)); transform: rotate(180deg); } .cd-ava { left: calc(65 * var(--u)); top: calc(26 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: 50%; } .cd-name { left: calc(144 * var(--u)); top: calc(35 * var(--u)); font-family: var(--fb); font-weight: 600; font-size: calc(18 * var(--u)); line-height: calc(18 * var(--u)); color: #000; } .cd-verified { left: calc(197 * var(--u)); top: calc(40 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); } .cd-dot { left: calc(146 * var(--u)); top: calc(68 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #44DC79; } .cd-online { left: calc(163 * var(--u)); top: calc(57 * var(--u)); height: calc(29 * var(--u)); display: flex; align-items: center; font-family: var(--fd); font-weight: 300; font-size: calc(15 * var(--u)); letter-spacing: 0; color: #000; } .cd-live { left: calc(379 * var(--u)); top: calc(29 * var(--u)); width: calc(138.58 * var(--u)); height: calc(41.45 * var(--u)); background: #fff; border: max(1px, calc(.5 * var(--u))) solid #D5B9F3; border-radius: calc(11.5 * var(--u)); } .cd-live i { position: absolute; left: calc(10.9 * var(--u)); top: calc(16.22 * var(--u)); width: calc(9.34 * var(--u)); height: calc(10.81 * var(--u)); border-radius: 50%; background: #44DC79; } .cd-live span { position: absolute; left: calc(28 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; font-family: var(--fd); font-weight: 300; font-size: calc(15 * var(--u)); color: #000; } .cd-div { left: calc(1 * var(--u)); top: calc(97 * var(--u)); width: calc(541 * var(--u)); height: 1px; background: #D7BEF7; } /* message bubbles — Inter Regular 15 / line box 18 */ .cd-b { font-weight: 400; font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); color: #04080D; } .cd-fan { background: #F3ECFC; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(5 * var(--u)) calc(18 * var(--u)); } .cd-b1 { left: calc(109 * var(--u)); top: calc(124 * var(--u)); width: calc(302 * var(--u)); height: calc(79 * var(--u)); } .cd-b3 { left: calc(113 * var(--u)); top: calc(325 * var(--u)); width: calc(298 * var(--u)); height: calc(79 * var(--u)); } .cd-b2 { left: calc(108 * var(--u)); top: calc(235 * var(--u)); width: calc(361 * var(--u)); height: calc(58 * var(--u)); background: #FDFDFE; border: 1px solid #DADADA; color: #000; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(5 * var(--u)); } /* avatars: 17px star badge pinned bottom-right, as in Figma */ .cd-av { border-radius: 50%; } .cd-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .cd-av > svg { position: absolute; width: calc(17 * var(--u)); height: calc(17 * var(--u)); } .cd-avf1 { left: calc(427 * var(--u)); top: calc(134 * var(--u)); width: calc(55 * var(--u)); height: calc(57 * var(--u)); } .cd-avf2 { left: calc(427 * var(--u)); top: calc(339 * var(--u)); width: calc(51 * var(--u)); height: calc(53 * var(--u)); } .cd-avf1 > svg { left: calc(38 * var(--u)); top: calc(44 * var(--u)); } .cd-avf2 > svg { left: calc(38 * var(--u)); top: calc(44 * var(--u)); } .cd-avc1 { left: calc(35 * var(--u)); top: calc(243 * var(--u)); } .cd-avc2 { left: calc(35 * var(--u)); top: calc(436 * var(--u)); } .cd-avc1, .cd-avc2 { width: calc(43.68 * var(--u)); height: calc(44.13 * var(--u)); } .cd-avc1 > svg, .cd-avc2 > svg { left: calc(30 * var(--u)); top: calc(28 * var(--u)); } /* unlock card */ .cd-unlock { left: calc(114 * var(--u)); top: calc(436 * var(--u)); width: calc(368 * var(--u)); height: calc(191 * var(--u)); background: #8D70EE; border-radius: calc(16 * var(--u)); } .cd-unlock > * { position: absolute; } .cd-uc-media { left: calc(16 * var(--u)); top: calc(16 * var(--u)); width: calc(157 * var(--u)); height: calc(108 * var(--u)); border-radius: calc(15 * var(--u)); object-fit: cover; } .cd-uc-t { left: calc(184 * var(--u)); top: calc(35 * var(--u)); width: calc(148 * var(--u)); text-align: center; font-family: var(--fb); font-weight: 600; font-size: calc(20 * var(--u)); line-height: calc(19 * var(--u)); letter-spacing: calc(-.16 * var(--u)); color: #FCF9F3; } .cd-uc-p { left: calc(186 * var(--u)); top: calc(63 * var(--u)); font-family: var(--fj); font-weight: 500; font-size: calc(12 * var(--u)); line-height: calc(18.6 * var(--u)); letter-spacing: calc(-.16 * var(--u)); color: #FCF9F3; white-space: nowrap; } .cd-uc-btn { left: calc(18 * var(--u)); top: calc(148 * var(--u)); width: calc(332 * var(--u)); height: calc(33 * var(--u)); background: rgba(231,229,253,.37); border-radius: calc(12.5 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(9 * var(--u)); font-weight: 600; font-size: calc(15 * var(--u)); color: #fff; } .cd-uc-btn svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); flex: none; } /* footer confirmation pill */ .cd-pill { left: calc(57 * var(--u)); top: calc(671 * var(--u)); width: calc(445.34 * var(--u)); height: calc(57.67 * var(--u)); background: #8D70EE; border: 1px solid #C9BCF0; border-radius: calc(16 * var(--u)); display: flex; align-items: center; justify-content: center; font-family: var(--fj); font-weight: 600; font-size: calc(12.5 * var(--u)); line-height: calc(19.38 * var(--u)); letter-spacing: calc(-.16 * var(--u)); color: #fff; } /* ===================================================================== v3 SYNC — kick caps, feature 01 card, feature 04 live stream, chat flip, where/results/you-us/timeline/control restyles ===================================================================== */ /* feature kick — uppercase spaced variant (04 / 05 / 06) */ .kick.caps { font-family: var(--fu); font-weight: 700; font-size: clamp(11.5px, 1.1vw, 13px); letter-spacing: .16em; text-transform: uppercase; } /* ---------- feature 04 — live stream ---------- */ /* ---------- feature 04 live stream (Figma 471:5492 head / 471:5005 tabs / 471:4917 panel) ---------- */ .feat04-head { display: flex; flex-direction: column; align-items: center; gap: 21px; text-align: center; margin: 0 auto clamp(30px, 3.5vw, 56px); } /* Figma Hand Bold 13 / tracking 1.56 / #6657F5 */ .feat04-head .kick.caps { font-family: var(--fh); font-weight: 700; font-size: 15px; letter-spacing: 1.56px; text-transform: uppercase; color: #6657F5; display: block; margin: 0; } /* Bricolage Medium 55 / line-height 60 / tracking -1.2 */ .feat04-head h3 { font-size: clamp(2.05rem, 3.44vw, 3.4375rem); font-weight: 500; line-height: 1.091; letter-spacing: -0.0218em; color: #04080D; } /* Inter Regular 18 / line-height 28.8 / #5C6370, 526px measure, left-aligned */ .feat04-head .lead { width: min(100%, 526px); margin: 0; font-family: var(--fu); font-weight: 400; font-size: clamp(15px, 1.125vw, 18px); line-height: 1.6; color: #5C6370; text-align: left; } .stream-tabs { display: flex; justify-content: center; gap: calc(51 * var(--u)); margin-bottom: clamp(24px, 2.6vw, 41px); position: relative; } .stab { /* The 2px stroke is a design-px value like everything else in a .mock, so it has to ride --u — left fixed it reads 4x too heavy once --u drops to .3 (2px around a 16.7px-tall pill). 1px is the floor so it never disappears. */ --sbw: max(1px, calc(2 * var(--u))); height: calc(56 * var(--u)); flex: none; display: flex; align-items: center; justify-content: center; border: var(--sbw) solid #000; border-radius: calc(30 * var(--u)); font-family: var(--fb); font-weight: 400; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); color: #04080D; white-space: nowrap; } .stab:nth-child(1) { width: calc(200.79 * var(--u)); background: #F8F96F; border-radius: calc(33 * var(--u)); font-weight: 500; font-size: calc(24 * var(--u)); position: relative; } /* Hand-drawn offset shadow behind the active tab. The border width is subtracted so the black peeks out bottom-right; subtracting a flat 2px inverted the offset below u≈0.43 (at u=.299 it landed at -0.2,-0.6, i.e. up-LEFT of the pill and clipped by the section edge). */ .stab:nth-child(1)::before { content: ''; position: absolute; z-index: -1; background: #000; left: calc(5.87 * var(--u) - var(--sbw)); top: calc(4.54 * var(--u) - var(--sbw)); width: calc(204.4 * var(--u)); height: calc(50.89 * var(--u)); border-radius: calc(43 * var(--u)); } .stab:nth-child(2) { width: calc(256.18 * var(--u)); } .stab:nth-child(3) { width: calc(253.87 * var(--u)); } .stab:nth-child(4) { width: calc(280.42 * var(--u)); } /* Figma 471:5952 — a flat vector cursor (pale-yellow fill, 1.5px black stroke), not the ☝️ emoji that was standing in for it. 39.66x58.98 at frame (396,7115), i.e. (158.36,30) inside the first tab. */ .stab-hand { position: absolute; left: calc(158.36 * var(--u)); top: calc(30 * var(--u)); width: calc(39.66 * var(--u)); height: calc(58.98 * var(--u)); pointer-events: none; } .stream { display: flex; gap: calc(24 * var(--u)); align-items: flex-start; } .stream-video { width: calc(751 * var(--u)); flex: none; border-radius: calc(16 * var(--u)); overflow: hidden; background: #111; } .sv-media { position: relative; height: calc(532 * var(--u)); } .sv-media img { width: 100%; height: 100%; object-fit: cover; } .live-badge { position: absolute; left: calc(30 * var(--u)); top: calc(27 * var(--u)); width: calc(176 * var(--u)); height: calc(36 * var(--u)); display: flex; align-items: center; gap: calc(13 * var(--u)); padding-left: calc(16 * var(--u)); background: #fff; border-radius: calc(9 * var(--u)); font-family: var(--fu); font-weight: 600; font-size: calc(16 * var(--u)); line-height: 1; color: #04080D; } .live-badge .dot { width: calc(12 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #E5484D; flex: none; } .live-badge .tt { color: #656565; font-weight: 500; } .stream-controls { height: calc(135 * var(--u)); background: #C9BCF0; display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--u)); } .sctl { display: grid; justify-items: center; gap: calc(8 * var(--u)); font-family: var(--fu); font-size: calc(13 * var(--u)); line-height: 1; color: #5B5570; } .sctl .ci { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #fff; display: grid; place-items: center; color: #4A4560; } .sctl .ci svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); } .sctl.end { color: #FF3734; font-weight: 600; } .sctl.end .ci { background: #FF3734; color: #fff; } .sctl.end .ci svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); } .stream-side { width: calc(382 * var(--u)); height: calc(667 * var(--u)); flex: none; background: #fff; border: 1px solid #606060; border-radius: calc(16 * var(--u)); padding: calc(26 * var(--u)) calc(32 * var(--u)) 0; display: flex; flex-direction: column; font-family: var(--fu); } .ss-head { display: flex; align-items: baseline; gap: calc(29 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(21 * var(--u)); } .ss-head .ss-chat { color: #5f5f5f; } .ss-head .ss-att { font-weight: 600; } .ss-head .ss-count { margin-left: auto; font-weight: 600; } .ss-head .mut { color: #5f5f5f; font-weight: 500; } .stream-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)) calc(30 * var(--u)); margin-top: calc(38 * var(--u)); } /* no position: relative — the mic badge it anchored was never in the frame */ .satt { margin: 0; display: grid; justify-items: center; gap: calc(17 * var(--u)); } .satt img { width: 100%; aspect-ratio: 147 / 190; object-fit: cover; border-radius: calc(10 * var(--u)); } .satt figcaption { height: calc(26 * var(--u)); display: flex; align-items: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #C9BCF0; font-size: calc(13 * var(--u)); padding-inline: calc(7 * var(--u)); border-radius: calc(5 * var(--u)); } .stream-bundle { margin-top: auto; margin-bottom: calc(20 * var(--u)); height: calc(66 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); border: 1px solid #ECECEF; border-radius: calc(12 * var(--u)); padding-inline: calc(14 * var(--u)); } .stream-bundle > div { flex: 1; min-width: 0; } .stream-bundle .cc-badge.lav { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(11 * var(--u)); } .stream-bundle .cc-badge svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); } .stream-bundle .cc-t { font-size: calc(15 * var(--u)); font-weight: 600; } .stream-bundle .cc-s { font-size: calc(12 * var(--u)); color: #9CA3AF; margin-top: calc(3 * var(--u)); } .stream-bundle .cc-price { font-size: calc(20 * var(--u)); } /* Stacked below 800: side by side, the 382-wide panel is under 250px there and its 17px type renders below 11px. Kept next to the component on purpose — the old overrides lived in the RESPONSIVE block 90 lines away and had drifted into setting grid-template-columns on a flex container, so the stack they were meant to produce never happened. Each column re-derives --u from its OWN design width, so the mockup keeps scaling as one piece instead of boxes growing while their contents stay small. 100cqw resolves against .mock (neither column is a container itself), and the min() caps each at design size so nothing renders larger than 1:1. */ @media (max-width: 800px) { .stream { flex-direction: column; align-items: center; gap: clamp(16px, 3vw, 24px); } .stream-video { width: min(100%, 751px); --u: calc(min(100cqw, 751px) / 751); } .stream-side { width: min(100%, 382px); --u: calc(min(100cqw, 382px) / 382); } /* The four pills run 1144 design px on one line, so scaling them off that leaves 7px labels next to a mockup that is now near 1:1. Wrap to two rows and scale off the wider row (253.87 + 51 + 280.42 = 585.3, rounded up to 600 for slack) instead. flex-start, not center: .stab-hand is absolutely placed 158.36 design px from the ROW's left edge, so centring the short first row slides the cursor 32px back into the middle of the label. */ .stream-tabs { flex-wrap: wrap; justify-content: flex-start; --u: calc(min(100cqw, 600px) / 600); row-gap: calc(16 * var(--u)); } } /* ---------- where cards — glyph icons + tilt ---------- */ .wcard::before { display: none; } .wcard.in { transform: rotate(var(--rot, 0deg)); } .wcard:nth-child(1) { --rot: -3deg; } .wcard:nth-child(2) { --rot: 2.4deg; } .wcard:nth-child(3) { --rot: -2deg; } .wcard:nth-child(4) { --rot: 3deg; } .wcard .wic svg { display: block; } /* ---------- results — glyph icons, ✦ divider, tilted ribbon ---------- */ .results { overflow: clip; } .results-band { width: 106%; margin-left: -3%; transform: rotate(-2deg); } .rgrid { transform: rotate(2deg); } .rico { width: 46px; height: 46px; border-radius: 50%; background: var(--purple-tint); display: grid; place-items: center; margin: 0 auto 12px; } .rdiv { display: block; color: var(--purple); font-size: 12px; margin: 9px auto 6px; opacity: .75; } .rcard.in { transform: rotate(var(--rot, 0deg)); } .rcard:nth-child(1) { --rot: -2.4deg; } .rcard:nth-child(2) { --rot: 1.6deg; } .rcard:nth-child(3) { --rot: -1.4deg; } .rcard:nth-child(4) { --rot: 2.4deg; } /* ---------- you / us — folder-tab cards + checklist ---------- */ .yu-card { position: relative; border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); padding: 30px 28px 26px; } .yu-card::before { content: ""; position: absolute; top: -15px; left: 0; width: 40%; height: 18px; border-radius: 12px 14px 0 0; } .yu-card.you, .yu-card.you::before { background: #fff; } .yu-card.us, .yu-card.us::before { background: var(--purple-tint); } .yu-head { display: flex; align-items: center; gap: 8px; font-family: var(--fu); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--grey-3); margin-bottom: 18px; } .yu-ic { width: 22px; height: 22px; border-radius: 6px; background: rgba(108,92,231,.14); display: grid; place-items: center; color: var(--purple); } .yu-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 15px; } .yu-list li { position: relative; padding-left: 28px; font-family: var(--fu); font-size: 14.5px; color: var(--ink); line-height: 1.35; } .yu-list li::before { content: "✓"; position: absolute; left: 4px; top: 0; font-weight: 800; color: var(--purple-bright); } /* ---------- timeline — role badges + folder-tab day ---------- */ .tl-badge { display: inline-block; margin-top: 14px; font-family: var(--fu); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--purple-tint); color: var(--purple-deep); } .tl-badge.you { background: #E2F6EA; color: #1F9D55; } .tl .day { border-radius: 0 9px 9px 9px; transform: none; } .tl .day::before { content: ""; position: absolute; top: -6px; left: 0; width: 42%; height: 8px; background: var(--purple); border-radius: 6px 7px 0 0; } .tl .day { position: relative; } .tl.hl .day, .tl.hl .day::before { background: var(--purple-deep); } /* ---------- control — clean ellipse outlines + line icons ---------- */ .blobcard { border-radius: 50%; padding: 34px 46px; min-height: 172px; display: flex; flex-direction: column; justify-content: center; text-align: left; } .blobcard:nth-child(2n) { border-radius: 50%; transform: rotate(.8deg); } .blobcard:nth-child(3n) { border-radius: 50%; transform: rotate(-.9deg); } .blobcard h4 { padding-right: 34px; } .ic-line { position: absolute; top: 30px; right: 46px; display: grid; place-items: center; } .ic-line svg { display: block; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 980px) { /* hero drops out of the 1600px design stage into normal flow */ .hero .stage { aspect-ratio: auto; height: auto; padding: 40px 0 56px; container-type: normal; --u: 1px; } .hero .stage > * { position: static; } .hero .h-plusses, .hero .h-sparkle { display: none; } .hero .hero-copy { width: min(100% - 44px, 680px); margin-inline: auto; } /* Min rides vw, not the old 2.4rem floor: "Run your business" has to hold one line down to ~320px or the br strands "on Autopilot." mid-phrase. */ .hero h1 { font-size: clamp(1.8rem, 9vw, 4rem); line-height: 1.02; } .hero-sub { width: 100%; font-size: clamp(1.05rem, 2.6vw, 1.4rem); line-height: 1.4; } /* the desktop break lands mid-phrase at phone widths; let it flow */ .hero-sub br { display: none; } .hero-actions { margin-top: 32px; gap: 14px; flex-wrap: wrap; } .hero .btn { height: 52px; font-size: 16px; } .hero .btn-yellow { width: auto; padding: 0 28px; } .hero .hero-collage { display: block; width: min(100% - 22px, 620px); margin: 34px auto 0; } .nav-in { padding-inline: 22px; } .feat-grid { grid-template-columns: 1fr; } .feat-grid.flip .copy { order: 0; } .compare { grid-template-columns: 1fr; max-width: 480px; } .where-cards, .rgrid { grid-template-columns: 1fr 1fr; } .where { padding-bottom: clamp(64px, 8vw, 90px); } .where-cards { margin-top: clamp(30px, 4vw, 48px); } .wcard:nth-child(1), .wcard:nth-child(2), .wcard:nth-child(3), .wcard:nth-child(4) { margin-top: 0; } .where-arrow { display: none; } .youus { grid-template-columns: 1fr; } .folders { grid-template-columns: 1fr 1fr; } .ctrl-grid { grid-template-columns: 1fr 1fr; } /* ---------- burger menu ---------- The bar's own