/* ========================================================================== Favor — landing page Implemented from "Favor Landing v2.dc.html" (claude.ai/design → project "Favor Referral Marketplace Branding") The design source is a Design-Canvas doc: template, head block, and placeholders driven by support.js / image-slot.js. Those are authoring-time scaffolding. Here the head block is hoisted into , the image slots are plain with object-fit:cover (what the slot renders at runtime), and the inline styles are lifted into classes so the page can respond to viewport width. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Greens — dark end */ --deep: #10231c; --deeper: #0c1d17; --phone-shell: #0a1712; --surface: #183329; --line: #1e3a2e; --line-2: #2a4738; --rule: #3a5a48; --outline: #35533f; --avatar-dark: #3e6049; /* Lime accent */ --lime: #a9c46c; /* Lime is a dark-ground colour: on white it measures 1.94:1. This is the lightest olive of the same family that clears AA on white, cream and paper (5.43 / 4.75 / 4.97), and `.light` swaps it in for text use. */ --lime-text: var(--lime); --lime-deep: #557328; --lime-hover: #b8d179; /* on the lime card itself, where #3d5628 measured 4.22:1 */ --lime-eyebrow: #374e23; --lime-body: #2c4a2e; /* Paper / light surfaces */ --cream: #edf1ea; --paper: #f6f5ee; --paper-2: #dce4d9; --paper-3: #d3ddd1; --paper-4: #e2e8de; --paper-line: #c2cfbf; --chip: #c3d3ae; /* Text on dark */ --on-dark: #edf1ea; --on-dark-1: #a6bcab; --on-dark-2: #8ca394; --on-dark-3: #7e9483; --on-dark-4: #5f7b6b; --quote-dark: #dce6d9; --quote-dark-2: #c0d0bf; /* Text on light */ --on-light: #10231c; --on-light-1: #4a6355; /* sits on cream and on --paper-2 inside the phone mocks, where #5e7a69 measured 3.62:1 */ --on-light-2: #4e6857; --ink-mid: #26402f; --ink-hand: #3b5244; --money: #3d6b2e; /* Type */ --serif: Spectral, Georgia, "Times New Roman", serif; --sans: Archivo, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif; --narrow: "Archivo Narrow", Archivo, system-ui, sans-serif; --hand: Caveat, "Bradley Hand", cursive; /* Layout */ --shell: 1240px; --gutter: 40px; --sec: 96px; /* section vertical rhythm */ /* How far the hero phone crosses the band's bottom edge onto the white page. Read by .hero-visual (negative margin) and .how (clearance). */ --hero-overhang: 128px; } @media (max-width: 900px) { :root { --gutter: 26px; --sec: 68px; --hero-overhang: 104px; } } @media (max-width: 560px) { :root { --gutter: 20px; --sec: 54px; --hero-overhang: 84px; } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--deep); color: var(--on-dark); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Keep anchored sections clear of the sticky header */ :target, #how, #app, #business, #download, #invite { scroll-margin-top: 88px; } a { color: var(--lime); text-decoration: none; } a:hover { color: var(--cream); } ::selection { background: var(--lime); color: var(--deep); } :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 18px; border-radius: 6px; background: var(--lime); color: var(--deep); font-size: 14.5px; font-weight: 600; transform: translateY(-250%); transition: transform 0.16s ease; } .skip-link:focus { color: var(--deep); transform: none; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* auto-fit grid that never forces a track wider than its container */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr)); gap: var(--gap, 24px); } .grid--cards { --min: 250px; --gap: 20px; } /* -------------------------------------------------------------------------- 4. Shared pieces -------------------------------------------------------------------------- */ /* Hand-drawn circle. Stroke colour and width are inherited from this element, so each use site sets them without touching the path. */ .scribble { position: absolute; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; pointer-events: none; } .wordmark { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 8px 22px; color: var(--lime); } .wordmark:hover { color: var(--lime); } .wordmark .scribble { inset: 0; width: 100%; height: 100%; } .wordmark__text { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1; color: var(--cream); } .eyebrow { font-family: var(--narrow); font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-3); } .eyebrow--mini { font-size: 11px; letter-spacing: 0.18em; } /* The serif asterisk used as a separator throughout */ .star { font-family: var(--serif); font-size: 16px; line-height: 1; color: var(--lime-text); } .star--lg { font-size: 17px; } .dash { display: block; width: 26px; height: 1px; background: var(--rule); } .dash--wide { width: 40px; } /* Image frames: renders an absolutely positioned, centred, container-filling image — this is the same geometry. */ .frame { position: relative; width: 100%; overflow: hidden; background: var(--paper-2); } .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Taped-down photo prints */ .polaroid { position: relative; background: var(--paper); } .tape { position: absolute; background: var(--tape, rgba(233, 238, 225, 0.3)); box-shadow: 0 1px 3px rgba(4, 14, 10, 0.15); } .caption { font-family: var(--hand); color: var(--ink-hand); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; font-family: inherit; font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .btn:active { transform: translateY(1px); } .btn--sm { padding: 10px 18px; font-size: 14.5px; } .btn--md { padding: 15px 24px; font-size: 15.5px; } .btn--lg { padding: 16px 26px; font-size: 16px; } .btn--lime { background: var(--lime); color: var(--deep); } .btn--lime:hover { background: var(--lime-hover); color: var(--deep); } .btn--ink { background: var(--deep); color: var(--cream); } .btn--ink:hover { background: #1b3b2d; color: var(--cream); } .btn--ghost { border: 1px solid var(--outline); color: var(--cream); font-weight: 500; } .btn--ghost:hover { border-color: var(--lime); color: var(--cream); } .btn--ghost-light { border: 1px solid var(--paper-line); color: var(--on-light); font-weight: 500; } .btn--ghost-light:hover { border-color: var(--on-light); color: var(--on-light); } /* Round monogram avatars */ .avatar { display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; font-weight: 600; } /* -------------------------------------------------------------------------- 5. Nav -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 20; background: rgba(16, 35, 28, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; } .nav__menu { display: flex; align-items: center; gap: 30px; } .nav__link { position: relative; padding-block: 4px; font-size: 14.5px; color: var(--on-dark-2); white-space: nowrap; transition: color 0.16s ease; } .nav__link:hover { color: var(--cream); } .nav__link.is-active { color: var(--cream); } .nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--lime); } .nav__cta { margin-left: 4px; white-space: nowrap; } /* Hamburger — hidden until the bar runs out of room */ .nav__toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--cream); cursor: pointer; } .nav__bars { position: relative; display: block; width: 21px; height: 13px; } .nav__bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: top 0.2s ease, transform 0.2s ease; } .nav__bars i:nth-child(1) { top: 1px; } .nav__bars i:nth-child(2) { top: 10px; } .nav.is-open .nav__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav.is-open .nav__bars i:nth-child(2) { top: 6px; transform: rotate(-45deg); } @media (max-width: 860px) { .nav__toggle { display: inline-flex; } /* Panel drops out of the bar itself, full-bleed, and is inert when closed */ .nav__menu { position: absolute; left: 0; right: 0; top: 100%; display: grid; align-items: stretch; gap: 0; padding: 4px var(--gutter) 22px; /* Solid, not translucent: display type behind a menu has no business ghosting through the links, however faintly. */ background: var(--deep); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(4, 14, 10, 0.4); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; } .nav.is-open .nav__menu { visibility: visible; opacity: 1; transform: none; } .nav__link { padding-block: 15px; font-size: 16.5px; border-bottom: 1px solid var(--line); } /* The underline treatment doesn't read in a stacked list */ .nav__link.is-active::after { display: none; } .nav__link.is-active { color: var(--lime); } .nav__cta { margin-left: 0; margin-top: 18px; padding-block: 15px; font-size: 15.5px; } } @media (prefers-reduced-motion: reduce) { .nav__menu, .nav__bars i { transition: none; } } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ /* Centred, one column: headline, a line of description, where to get it, the badges, then the phone underneath. The device crosses the band's bottom edge onto the white page (see .hero-visual), so the dark hero and the light body hand over deliberately rather than colliding. */ .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; padding-block: calc(var(--sec) - 24px) 0; } .hero__copy { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 760px; } .hero__kicker { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.035em; max-width: 19ch; } .hero__circled { position: relative; display: inline-block; padding: 0 14px; color: var(--lime); } .hero__circled .scribble { inset: -8px -6px; width: calc(100% + 12px); height: calc(100% + 16px); stroke-width: 3.5; } .hero__circled em { color: var(--on-dark); } .hero__lede { font-size: 18.5px; line-height: 1.6; color: var(--on-dark-1); max-width: 46ch; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 6px; } /* Beli-style: one uppercase line saying where to get it, then the badges doing the asking. Nothing else competes in the hero. */ .hero__download { padding-top: 2px; /* A step lighter than a normal eyebrow: it is an instruction, not a label, and at --on-dark-2 it measured 4.15:1 over the clip — under AA. */ color: var(--on-dark-1); } .store { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; align-items: center; } /* Placeholder badges. Apple and Google both require their own supplied artwork, so swap these for the official SVGs before launch (see README). Proportions and wording match the real badges so it is like-for-like. */ .store__badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid #3d4a42; border-radius: 9px; background: #000; color: #fff; transition: border-color 0.18s ease, transform 0.12s ease; } .store__badge:hover { border-color: var(--lime); color: #fff; } .store__badge:active { transform: translateY(1px); } .store__mark { width: 26px; height: 26px; flex: none; fill: #fff; } .store__text { display: flex; flex-direction: column; line-height: 1.05; } .store__small { font-size: 10.5px; letter-spacing: 0.02em; } .store__big { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; } .hero__aside { padding-top: 4px; font-size: 14.5px; color: var(--on-dark-3); } .hero__aside a { color: var(--on-dark-1); text-decoration: underline; text-underline-offset: 3px; /* keeps the arrow with its label instead of orphaning it on a new line */ white-space: nowrap; } /* On a 390px screen the pair needs 338px and has 335 — three pixels short of sitting together, which is worth reclaiming from the padding. */ @media (max-width: 430px) { .store { gap: 10px; } .store__badge { padding: 9px 12px; gap: 8px; } } .hero__aside a:hover { color: var(--cream); } /* Hero band — the florist footage runs full-bleed behind the hero. The clip is bright pink/pastel and high-key, which fights the forest green palette raw, so it gets a three-part treatment: desaturated and warmed (sepia) at the element, dimmed to let the deep green ground through, then a scrim that stays near-solid behind the copy column and fades the band into the page at top and bottom. The same filter applies to the poster frame, so reduced-motion gets the identical look, still. */ .hero-band { position: relative; /* No overflow clip here: the hero phone deliberately crosses the band's bottom edge into the white page. The blurred clip is clipped by .hero-band__backdrop instead. z-index keeps the overhanging device painting above the light section that follows. */ z-index: 1; background: var(--deep); /* The clip is deliberately bright here, so the small text is lifted to buy the contrast headroom that pays for it: #dce6d9 tolerates 2.25x the backdrop luminance that #a6bcab does. Hierarchy below the headline still reads through size and letterspacing rather than through greying out. */ --on-dark-1: #dce6d9; --on-dark-3: #dce6d9; } /* Clips the blurred clip's soft edges and the scrim to the band's box. */ .hero-band__backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* Ambient only. A half-opacity photograph of a recognisable scene reads as a broken image, not as texture — so this is blurred well past the point where any object survives, leaving warm light and slow movement. scale(1.12) pushes the blur's soft edges outside the backdrop, which clips them. */ .hero-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: blur(30px) saturate(0.8) brightness(1.04) contrast(1.02) sepia(0.24); transform: scale(1.12); opacity: 0.95; pointer-events: none; } /* Shaped to the centred layout: the veil is heaviest exactly where the copy sits and nowhere else, so the footage stays visible either side of the text instead of being darkest where you're looking. Never light enough anywhere to resolve detail. rgba(16,35,28,…) is --deep with alpha, as the nav uses. Every text role over the clip is measured against its worst frame — the binding numbers are in the README; re-measure if you touch these stops, the video dials, or the band's text tokens. */ .hero-band__scrim { position: absolute; inset: 0; pointer-events: none; background: /* Painted first, so on top: shields the centred copy column — a soft ellipse sitting exactly under the text block, fading out before the band's edges so the footage stays visible either side of it. */ radial-gradient( 54% 72% at 50% 32%, rgba(16, 35, 28, 0.69) 0%, rgba(16, 35, 28, 0.56) 55%, rgba(16, 35, 28, 0) 80% ), /* The frame: settles the clip under the nav, stays open through the middle, and grounds the bottom edge without going solid — the seam is drawn by the white page below, not by fading the band to black. */ linear-gradient( to bottom, rgba(16, 35, 28, 0.5) 0%, rgba(16, 35, 28, 0.06) 24%, rgba(16, 35, 28, 0.04) 56%, rgba(16, 35, 28, 0.34) 86%, rgba(16, 35, 28, 0.5) 100% ); } /* Lift the content above the absolutely-positioned video and scrim */ .hero-band .hero { position: relative; } /* On narrow screens the copy spans the full band width, so the shaped ellipse has no open sides left to protect — one flat vertical veil does the same job with less. Slightly heavier than the desktop frame because there is copy over every column of the clip; measured at 834/390/360 against the worst frame (see README table). */ @media (max-width: 860px) { .hero-band__video { opacity: 0.82; } .hero-band__scrim { background: linear-gradient( to bottom, rgba(16, 35, 28, 0.74) 0%, rgba(16, 35, 28, 0.62) 46%, rgba(16, 35, 28, 0.5) 74%, rgba(16, 35, 28, 0.62) 100% ); } } /* Hero visual — just the phone. There was a taped print behind it and a margin note beside it; at this column width the phone covered most of the print and the note landed on the bezel, so both read as mistakes. The photography now lives in sections that have room for it. Fixed pixels, no cqw: the phone must render at full size so its screen text never dips below the 11px floor. */ .hero-visual { position: relative; min-width: 0; display: flex; justify-content: center; align-items: flex-start; padding: 0; /* The device deliberately crosses the band's bottom edge onto the white page — a clear, drawn seam instead of the old 4px near-miss. The band shrinks by the overhang; .how below leaves room for it. */ margin-bottom: calc(var(--hero-overhang) * -1); } /* A soft warm pool behind the device. Without it the phone, the haze and the ground are all one mid-tone and nothing sits forward of anything. */ .hero-visual::before { content: ""; position: absolute; z-index: 0; /* 100%, not 118%: the band no longer clips (the phone overhangs it on purpose), so an oversized glow leaks into the page's scroll width — it was exactly the 10px of horizontal overflow at 390px. The gradient is transparent past 68% anyway, so nothing visible is lost. */ width: 100%; aspect-ratio: 1; max-width: 620px; border-radius: 50%; background: radial-gradient( circle, rgba(169, 196, 108, 0.13) 0%, rgba(169, 196, 108, 0.05) 42%, rgba(169, 196, 108, 0) 68% ); pointer-events: none; } /* .phone.hero-phone so the height wins over the base .phone rule, which is declared later in the file (section 10) */ .phone.hero-phone { position: relative; z-index: 1; height: 624px; transform: rotate(1.5deg); box-shadow: 0 40px 80px rgba(4, 14, 10, 0.62), 0 8px 24px rgba(4, 14, 10, 0.4); } .hero-phone__head { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 16px; } .hero-phone__photo { position: relative; height: 244px; flex: none; overflow: hidden; background: var(--surface); } .hero-phone__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-phone__foot { flex: 1; display: flex; flex-direction: column; gap: 13px; padding: 16px 24px 22px; } .hero-phone__foot .phone__cta { margin-top: auto; } /* Below the two-column point the phone alone carries the "this is an app" message; the print and the note need side room that no longer exists. */ @media (max-width: 640px) { /* On a 740px-tall phone the stacked copy pushed the device so far down that only its status bar cleared the fold — which defeats the whole point of putting it there. Claw back the space above it and shorten the device itself. Note what is NOT done here: no transform: scale() and no cropping, because either would drag the screen's own text under 11px. Every value below keeps the app screen at full size. */ .hero { gap: 24px; padding-block: 20px 0; } .hero__copy { gap: 16px; } .hero__lede { font-size: 17.5px; } .hero-visual { padding: 0; } /* .phone.hero-phone to beat the base .phone height, as above */ .phone.hero-phone { height: 560px; margin-left: 0; transform: none; } .hero-phone__head { padding: 14px 22px 12px; } .hero-phone__photo { height: 188px; } .hero-phone__foot { gap: 11px; padding: 14px 22px 18px; } } /* Short phones (an iPhone SE is 667px tall) run out of height before they run out of width, so this keys off height. The trust row goes — it is the least load-bearing line in the hero and the marquee directly below says much the same thing — which buys enough room for the app screen to clear the fold. */ @media (max-width: 640px) and (max-height: 700px) { .hero { gap: 14px; padding-block: 10px 0; } .hero__copy { gap: 12px; } .hero__title { font-size: 38px; } .hero__lede { font-size: 15.5px; } .hero__download { padding-top: 0; } .hero__aside { padding-top: 0; font-size: 13px; } } /* -------------------------------------------------------------------------- 7. Marquee strip -------------------------------------------------------------------------- */ .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--deeper); } .marquee__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding-block: 22px; font-family: var(--narrow); font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-4); } /* space-between only reads as a strip while it's one line */ @media (max-width: 900px) { .marquee__inner { justify-content: center; gap: 10px 14px; } } /* -------------------------------------------------------------------------- 8. How it works -------------------------------------------------------------------------- */ .how { display: flex; flex-direction: column; gap: 44px; /* Extra top room for the hero phone's overhang into this white section: the overhang itself plus a real gap before the title at every width. */ padding-block: calc(var(--hero-overhang) + max(48px, var(--sec) - 32px)) 20px; } .how__intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 40px 64px; align-items: end; } .section-title { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -0.03em; } .how__intro p { font-size: 17px; line-height: 1.65; color: var(--on-dark-2); text-wrap: pretty; } .how__steps { --min: 280px; --gap: 20px; } .how__card { display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 34px; border-radius: 4px; background: var(--surface); } .how__card .polaroid { padding: 8px 8px 10px; margin-bottom: 6px; box-shadow: 0 12px 26px rgba(4, 14, 10, 0.4); } .how__card .frame { height: 150px; } .how__card .tape { --tape: rgba(233, 238, 225, 0.28); top: -11px; width: 78px; height: 24px; box-shadow: none; } .how__card:nth-child(1) .polaroid { transform: rotate(-2deg); } .how__card:nth-child(1) .tape { left: 36%; transform: rotate(-4deg); } .how__card:nth-child(2) .polaroid { transform: rotate(1.6deg); } .how__card:nth-child(2) .tape { right: 30%; transform: rotate(3deg); } .how__label { font-family: var(--narrow); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime-text); } .how__heading { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; } .how__body { font-size: 15px; line-height: 1.6; color: var(--on-dark-2); } .how__card--lime { background: var(--lime); color: var(--deep); } .how__card--lime .polaroid { transform: rotate(-1.4deg); box-shadow: 0 12px 26px rgba(4, 14, 10, 0.25); } .how__card--lime .tape { --tape: rgba(16, 35, 28, 0.12); left: 32%; transform: rotate(-3deg); } .how__card--lime .how__label { color: var(--lime-eyebrow); } .how__card--lime .how__body { color: var(--lime-body); } /* -------------------------------------------------------------------------- 9. Scrapbook strip -------------------------------------------------------------------------- */ .scrapbook { display: flex; flex-direction: column; gap: 36px; padding-block: var(--sec) 8px; } .scrapbook__label { display: flex; align-items: center; justify-content: center; gap: 16px; } .scrapbook__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 26px; padding: 10px 0 26px; } .snapshot { width: 225px; padding: 9px 9px 12px; box-shadow: 0 16px 34px rgba(4, 14, 10, 0.45); } .snapshot .frame { height: 185px; } .snapshot .caption { font-size: 19.5px; padding: 8px 3px 0; } .snapshot .tape { top: -11px; width: 76px; height: 24px; box-shadow: none; } .snapshot:nth-child(1) { transform: rotate(-3.5deg); } .snapshot:nth-child(1) .tape { left: 34%; transform: rotate(-5deg); } .snapshot:nth-child(2) { transform: rotate(2.2deg); margin-top: 22px; } .snapshot:nth-child(2) .tape { right: 26%; transform: rotate(4deg); } .snapshot:nth-child(3) { transform: rotate(-1.6deg); } .snapshot:nth-child(3) .tape { left: 28%; transform: rotate(-3deg); } .snapshot:nth-child(4) { transform: rotate(3deg); margin-top: 16px; } .snapshot:nth-child(4) .tape { right: 32%; transform: rotate(5deg); } .snapshot:nth-child(5) { transform: rotate(-2.4deg); margin-top: 20px; } .snapshot:nth-child(5) .tape { left: 30%; transform: rotate(-4deg); } .snapshot:nth-child(6) { transform: rotate(1.8deg); } .snapshot:nth-child(6) .tape { right: 28%; transform: rotate(3deg); } /* -------------------------------------------------------------------------- 10. App mocks -------------------------------------------------------------------------- */ .app { display: flex; flex-direction: column; gap: 48px; padding-block: var(--sec); } .app__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 16px; } .app__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.2vw, 44px); letter-spacing: -0.03em; } /* One phone beside an editorial column: a short lede, a snapshot, and the receipt kept like a slip of paper — the two beats that used to be full phone mocks, retold in photographs and paper instead. */ .app__spread { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(344px, 100%), 1fr)); gap: 48px 44px; align-items: center; justify-items: center; } .app__item { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; } .app__note { font-family: var(--hand); font-size: 22px; color: var(--lime-text); text-align: center; } .app__item .app__note { transform: rotate(-1.5deg); } .app__aside { display: flex; flex-direction: column; gap: 36px; width: 100%; max-width: 560px; } .app__lede { font-size: 17px; line-height: 1.7; color: var(--on-dark-1); max-width: 52ch; text-wrap: pretty; } .app__stills { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px 30px; } .app__stills .app__still { transform: rotate(-2.4deg); } .app__stills .app__still .tape { left: 30%; transform: rotate(-4deg); } .app__keep { position: relative; width: min(258px, 100%); display: flex; flex-direction: column; gap: 12px; margin-top: 14px; transform: rotate(2deg); } .app__keep .tape { top: -11px; left: 32%; width: 76px; height: 24px; box-shadow: none; } .app__keep .receipt { box-shadow: 0 16px 34px rgba(4, 14, 10, 0.45); } /* Device */ .phone { width: min(326px, 100%); height: 672px; padding: 9px; border-radius: 44px; background: var(--phone-shell); box-shadow: 0 26px 60px rgba(4, 14, 10, 0.55); } .phone__screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; } .phone__screen--light { background: var(--cream); color: var(--deep); } .phone__screen--dark { background: var(--deep); color: var(--cream); } .phone__status { display: flex; justify-content: space-between; padding: 16px 24px 0; font-size: 12px; font-weight: 600; } .phone__status span:last-child { letter-spacing: 0.08em; } .phone__cta { border-radius: 12px; padding: 15px; text-align: center; font-size: 15.5px; font-weight: 600; width: 100%; } /* Screen 1 — Send */ .send__head { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 16px; } .send__head .eyebrow--mini { color: var(--on-light-2); } .send__title { font-family: var(--serif); font-weight: 400; font-size: 31px; line-height: 1.1; letter-spacing: -0.02em; } .send__search { margin: 0 24px 14px; background: var(--paper-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--on-light-2); } .send__list { padding: 0 24px; display: flex; flex-direction: column; gap: 10px; } .send__row { display: flex; gap: 12px; align-items: center; padding: 11px; background: #fff; border: 1px solid var(--paper-2); border-radius: 12px; } .send__thumb { position: relative; width: 50px; height: 50px; flex: none; border-radius: 8px; overflow: hidden; background: var(--paper-2); } .send__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .send__meta { display: flex; flex-direction: column; gap: 2px; } .send__name { font-size: 15px; font-weight: 600; } .send__sub { font-size: 12.5px; color: var(--on-light-2); } .send__foot { padding: 18px 24px 24px; margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .send__to { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--on-light-2); } .send__to .avatar { width: 22px; height: 22px; background: var(--chip); color: var(--ink-mid); font-size: 11px; } /* Receive-screen text pieces — used by the hero phone */ .receive__from { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--on-dark-2); } .receive__from .avatar { width: 26px; height: 26px; background: var(--lime); color: var(--ink-mid); font-size: 12px; } .receive__title { font-family: var(--serif); font-weight: 400; font-size: 33px; line-height: 1.08; letter-spacing: -0.02em; } .receive__quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 18px; line-height: 1.45; color: var(--quote-dark-2); } .receive__welcome { border-top: 1px solid var(--line-2); padding-top: 13px; display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--on-dark-2); } .receive__welcome span:last-child { color: var(--lime); } /* The kept receipt — also used on how-it-works.html. The card is always white, so it always brings its own ink: on the dark bands (the app aside here, the step media on how-it-works) inherited text would be cream on white. */ .receipt { color: var(--deep); background: #fff; border: 1px solid var(--paper-2); border-radius: 14px; padding: 17px; display: flex; flex-direction: column; gap: 10px; } .receipt__row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .receipt__row dt { color: var(--on-light-2); } .receipt__row dd { margin: 0; font-weight: 600; } .receipt__row--total { border-top: 1px solid var(--paper-4); padding-top: 10px; } .receipt__row dd.is-money { color: var(--money); } /* -------------------------------------------------------------------------- 11. For businesses -------------------------------------------------------------------------- */ .business { background: var(--cream); color: var(--deep); } .business__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 56px 72px; align-items: center; padding-block: var(--sec); } .business__figure { padding: 8px; } .business__print { background: #fff; padding: 12px 12px 16px; transform: rotate(-1.6deg); box-shadow: 0 18px 40px rgba(16, 35, 28, 0.2); } .business__print .frame { aspect-ratio: 544 / 400; } .business__print .caption { font-size: 21px; padding: 10px 4px 0; } .business__print .tape { --tape: rgba(16, 35, 28, 0.1); top: -13px; left: 40%; width: 92px; height: 28px; transform: rotate(-4deg); box-shadow: none; } .business__copy { display: flex; flex-direction: column; gap: 26px; } .business__copy .eyebrow { color: var(--on-light-2); } .business__lede { font-size: 17px; line-height: 1.65; color: var(--on-light-1); max-width: 46ch; text-wrap: pretty; } .business__points { --min: 200px; --gap: 26px 34px; padding-top: 6px; } .business__point { display: flex; flex-direction: column; gap: 7px; border-top: 2px solid var(--deep); padding-top: 14px; } .business__point dt { font-size: 15.5px; font-weight: 600; } .business__point dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-light-1); } .business__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; } /* -------------------------------------------------------------------------- 12. Quotes -------------------------------------------------------------------------- */ .quotes { --min: 300px; --gap: 26px; padding-block: var(--sec); } .quote { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 36px 32px; border-radius: 4px; background: var(--surface); } .quote .tape { --tape: rgba(233, 238, 225, 0.22); top: -12px; width: 84px; height: 26px; box-shadow: none; } .quote__text { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 23px; line-height: 1.35; color: var(--quote-dark); } .quote__cite { display: flex; align-items: center; gap: 11px; margin-top: auto; font-style: normal; } .quote__cite .avatar { width: 34px; height: 34px; font-size: 12.5px; background: var(--avatar-dark); color: var(--cream); } .quote__who { display: flex; flex-direction: column; } .quote__name { font-size: 14px; font-weight: 600; } .quote__org { font-size: 13px; color: var(--on-dark-3); } .quote:nth-child(1) { transform: rotate(-0.8deg); } .quote:nth-child(1) .tape { left: 38%; transform: rotate(-3deg); } .quote--light { background: var(--cream); color: var(--deep); } .quote--light .tape { --tape: rgba(233, 238, 225, 0.35); box-shadow: 0 1px 3px rgba(4, 14, 10, 0.12); } .quote--light .quote__text { color: var(--ink-mid); } .quote--light .quote__org { color: var(--on-light-1); } .quote--light .avatar { background: var(--deep); color: var(--cream); } .quote:nth-child(2) { transform: rotate(0.7deg); } .quote:nth-child(2) .tape { right: 30%; transform: rotate(4deg); } .quote:nth-child(3) { transform: rotate(-0.5deg); } .quote:nth-child(3) .tape { left: 30%; transform: rotate(-4deg); } .quote:nth-child(3) .avatar { background: var(--lime); color: var(--deep); } /* -------------------------------------------------------------------------- 13. Closing CTA -------------------------------------------------------------------------- */ .cta { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; padding-block: calc(var(--sec) + 8px) calc(var(--sec) - 20px); } .cta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em; max-width: 22ch; } .cta__lede { font-size: 18px; line-height: 1.6; color: var(--on-dark-2); max-width: 48ch; } .invite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px 10px 10px 22px; background: var(--surface); border-radius: 8px; } .invite__field { width: 230px; border: 0; background: transparent; color: var(--cream); font-family: inherit; font-size: 16px; padding: 0; } .invite__field::placeholder { color: var(--on-dark-3); opacity: 1; } .invite__field:focus { outline: none; } .invite:focus-within { box-shadow: 0 0 0 2px var(--lime); } .invite__submit { border-radius: 5px; padding: 14px 24px; font-size: 15.5px; } .invite__status { font-size: 14.5px; line-height: 1.4; color: var(--lime-text); } .invite__status:empty { display: none; } .invite__status[data-state="error"] { color: #e6a6a6; } @media (max-width: 420px) { .invite { width: 100%; padding: 14px; } .invite__field { width: 100%; text-align: center; } .invite__submit { width: 100%; } } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .footer { border-top: 1px solid var(--line); } .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-block: 32px; } .footer .wordmark { padding: 5px 15px; color: var(--on-dark-3); } .footer .wordmark .scribble { stroke-width: 2; } .footer .wordmark__text { font-size: 16px; color: var(--on-dark-3); } /* Its own full-width line above the wordmark/links row, as Beli does */ .store--footer { flex-basis: 100%; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .footer__links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 13.5px; /* --on-dark-4 measured 3.54:1 on --deep here */ color: var(--on-dark-3); } .footer__links a { color: var(--on-dark-3); } .footer__links a:hover { color: var(--cream); } @media (max-width: 560px) { .footer__links { gap: 18px; } } /* ========================================================================== PART TWO — site-wide components Everything above implements the home page from the design source. Everything below is the shared kit the other pages are built from, using the same tokens, type scale and spacing rhythm. ========================================================================== */ /* -------------------------------------------------------------------------- 15. Bands A band is a full-bleed background. On a light band the text tokens are reassigned rather than overridden per component, so every shared piece below reads correctly on both grounds without a light-mode variant. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- The light page Everything below the hero runs on white. Rather than a light variant of each component, `.light` reassigns the text/line/surface tokens, so anything built on the token set adapts on its own — the same trick `.band--light` uses, one level up. Bands nested inside it become paper tints instead of dark slabs, which keeps the section rhythm without punching holes in the white. -------------------------------------------------------------------------- */ .light { background: #fff; color: var(--deep); --on-dark: #10231c; --on-dark-1: #41584a; --on-dark-2: #4a6355; /* both were a shade too light on the cream bands: 4.12 and 4.09 against AA */ --on-dark-3: #55705f; --on-dark-4: #586f60; --line: #e2e8de; --line-2: #e2e8de; --rule: #c3cfbf; --outline: #c9d4c6; --surface: var(--paper); --deeper: var(--cream); --quote-dark: #26402f; --quote-dark-2: #3d5346; --lime-text: var(--lime-deep); } /* Opts one band back to the dark ground inside the light page, by restoring the root token values. Used sparingly — a single dark slab mid-page gives the long white run some rhythm and echoes the hero. */ .band--dark { background: var(--deep); color: #edf1ea; --on-dark: #edf1ea; --on-dark-1: #a6bcab; --on-dark-2: #8ca394; --on-dark-3: #7e9483; --on-dark-4: #5f7b6b; --line: #1e3a2e; --line-2: #2a4738; --rule: #3a5a48; --outline: #35533f; --surface: #183329; --deeper: #0c1d17; --quote-dark: #dce6d9; --quote-dark-2: #c0d0bf; --lime-text: var(--lime); } /* The base link colour is lime, which is a dark-ground colour: on white it measures 1.94:1. Links in the light region take the olive instead — but not buttons or badges, which carry their own colours and would otherwise lose them to this rule's higher specificity. */ .light a:not(.btn):not(.store__badge) { color: var(--lime-text); } .light a:not(.btn):not(.store__badge):hover { color: var(--deep); } .light .band--dark a:not(.btn):not(.store__badge) { color: var(--lime); } .light .band--dark a:not(.btn):not(.store__badge):hover { color: var(--cream); } .light .band--deeper { background: var(--cream); border-block: 1px solid var(--line); } /* Quote cards are paper on a paper-ish ground, so they need a drawn edge to read as cards at all */ .light .quote { border: 1px solid var(--line); } .light .band--surface { background: var(--paper); } .light .band--light { background: var(--cream); } /* Paper prints need an edge of their own once the page behind them is white */ .light .polaroid { box-shadow: 0 14px 30px rgba(16, 35, 28, 0.13); outline: 1px solid rgba(16, 35, 28, 0.06); } .light .snapshot { box-shadow: 0 14px 30px rgba(16, 35, 28, 0.15); } .light .tape { --tape: rgba(16, 35, 28, 0.07); box-shadow: none; } .light .bizdash { border: 1px solid var(--line); box-shadow: 0 20px 44px rgba(16, 35, 28, 0.13); } .light .receipt, .light .send__row { border-color: var(--paper-2); } /* The phone shells and the demo well stay dark on purpose — they read as screens, and the contrast is what makes them sit forward of the white. */ .band--deeper { background: var(--deeper); border-block: 1px solid var(--line); } .band--surface { background: var(--surface); } .band--light { background: var(--cream); color: var(--deep); --on-dark: #10231c; --on-dark-1: #4a6355; --on-dark-2: #4a6355; --on-dark-3: #55705f; --on-dark-4: #586f60; --line: #c9d4c6; --line-2: #c9d4c6; --rule: #a9b5a6; --outline: #c2cfbf; --surface: #ffffff; --quote-dark: #26402f; /* light ground, so lime cannot be used as text here either */ --lime-text: var(--lime-deep); } .band__inner { padding-block: var(--sec); } .band__inner--tight { padding-block: calc(var(--sec) - 24px); } /* -------------------------------------------------------------------------- 16. Page hero (every page except home) -------------------------------------------------------------------------- */ .page-hero { display: flex; flex-direction: column; gap: 24px; padding-block: calc(var(--sec) - 26px) calc(var(--sec) - 18px); } .page-hero__kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .page-hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -0.033em; max-width: 21ch; } .page-hero__lede { font-size: 19px; line-height: 1.6; color: var(--on-dark-1); max-width: 54ch; text-wrap: pretty; } .page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 8px; } /* Circled word, reusable at page-hero scale */ .circled { position: relative; display: inline-block; padding: 0 14px; color: var(--lime); } .circled .scribble { inset: -8px -6px; width: calc(100% + 12px); height: calc(100% + 16px); stroke-width: 3.5; } .circled em, .circled span { color: var(--on-dark); } /* -------------------------------------------------------------------------- 17. Section head -------------------------------------------------------------------------- */ .sec-head { display: flex; flex-direction: column; gap: 18px; } .sec-head__lede { font-size: 17.5px; line-height: 1.65; color: var(--on-dark-2); max-width: 58ch; text-wrap: pretty; } .sec-head--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px 64px; align-items: end; } .stack { display: flex; flex-direction: column; gap: var(--stack, 44px); } .stack--sm { --stack: 34px; } /* Vertical rhythm for a plain section, and the demo block that uses it */ .sec, .demo { padding-block: var(--sec); } .sec--tight { padding-block: calc(var(--sec) - 24px); } /* Eyebrow laid out inline with a rule or an asterisk beside it */ .kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 18. Generic cards, notes, stats -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 32px; border-radius: 4px; background: var(--surface); } .card__label { font-family: var(--narrow); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime-text); } .card__title { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.22; } .card__body { font-size: 15px; line-height: 1.62; color: var(--on-dark-2); } .card--outline { background: transparent; border: 1px solid var(--line); } .card--lime { background: var(--lime); color: var(--deep); } .card--lime .card__label { color: var(--lime-eyebrow); } .card--lime .card__body { color: var(--lime-body); } /* The favor card, at a fixed scale, for ordinary flow. (The home hero once carried a cqw-scaled twin of this in its collage; the hero now shows the same content on the phone instead.) */ .favor-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; border-radius: 3px; background: var(--cream); color: var(--deep); } .favor-card__head { display: flex; align-items: center; gap: 11px; } .favor-card__head .avatar { width: 30px; height: 30px; font-size: 13px; background: var(--lime); color: var(--ink-mid); } .favor-card__from { font-size: 14px; color: var(--on-light-1); } .favor-card__quote { font-size: 16.5px; line-height: 1.5; color: var(--ink-mid); } .favor-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--paper-3); padding-top: 13px; font-size: 14px; color: var(--on-light-1); } .favor-card__foot b { font-weight: 600; color: var(--deep); } .note { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px; border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: 4px; background: var(--deeper); } .band--light .note { background: rgba(255, 255, 255, 0.6); } .note__title { font-size: 15.5px; font-weight: 600; } .note__body { font-size: 15px; line-height: 1.65; color: var(--on-dark-2); } .stats { --min: 210px; --gap: 26px 34px; } .stat { display: flex; flex-direction: column; gap: 9px; border-top: 2px solid var(--lime); padding-top: 16px; } .stat__n { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.025em; } .stat__label { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-2); } /* -------------------------------------------------------------------------- 19. Split (copy beside a visual) -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 56px 72px; align-items: center; } .split__copy { display: flex; flex-direction: column; gap: 24px; } .split__lede { font-size: 17px; line-height: 1.65; color: var(--on-dark-1); max-width: 46ch; text-wrap: pretty; } /* Media column comes second in source order; this pulls it left where the layout reads better with the picture leading. Only above the stack point, so the copy always comes first on a phone. */ @media (min-width: 861px) { .split--media-first .split__media { order: -1; } } /* -------------------------------------------------------------------------- 20. Numbered steps (how it works) -------------------------------------------------------------------------- */ .steps { display: flex; flex-direction: column; } .step { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 36px 64px; align-items: center; padding-block: 54px; border-top: 1px solid var(--line); } .step:last-child { border-bottom: 1px solid var(--line); } .step__copy { display: flex; flex-direction: column; gap: 18px; } .step__n { display: flex; align-items: baseline; gap: 14px; font-family: var(--narrow); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime-text); } .step__n b { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 0.8; letter-spacing: -0.02em; } .step__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.7vw, 36px); line-height: 1.12; letter-spacing: -0.025em; } .step__body { font-size: 16.5px; line-height: 1.65; color: var(--on-dark-2); max-width: 46ch; text-wrap: pretty; } .ticks { display: flex; flex-direction: column; gap: 11px; } .ticks li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.6; color: var(--on-dark-2); } .ticks li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 11px; height: 1px; background: var(--lime-text); } @media (min-width: 861px) { .step:nth-child(even) .step__media { order: -1; } } /* -------------------------------------------------------------------------- 21. Prose (about, privacy) -------------------------------------------------------------------------- */ .prose { display: flex; flex-direction: column; gap: 24px; max-width: 68ch; } .prose h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.022em; margin-top: 20px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 16.5px; font-weight: 600; margin-top: 6px; } .prose p { font-size: 16.5px; line-height: 1.72; color: var(--on-dark-1); text-wrap: pretty; } .prose ul { display: flex; flex-direction: column; gap: 11px; } .prose li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.7; color: var(--on-dark-1); } .prose li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 11px; height: 1px; background: var(--lime-text); } .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose__meta { font-family: var(--narrow); font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-3); } /* -------------------------------------------------------------------------- 22. FAQ accordion -------------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 23px 2px; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.32; transition: color 0.16s ease; } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--lime-text); } .faq__q::after { content: "+"; flex: none; font-family: var(--sans); font-size: 21px; font-weight: 400; line-height: 1.2; color: var(--lime-text); } .faq__item[open] .faq__q::after { content: "–"; } .faq__a { display: flex; flex-direction: column; gap: 14px; padding: 0 56px 26px 2px; font-size: 16px; line-height: 1.7; color: var(--on-dark-2); } .faq__a a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 560px) { .faq__a { padding-right: 2px; } } /* -------------------------------------------------------------------------- 23. Pricing -------------------------------------------------------------------------- */ /* Calculator */ code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; padding: 1px 5px; border-radius: 3px; background: rgba(169, 196, 108, 0.13); color: var(--lime); } .band--light code { background: rgba(16, 35, 28, 0.07); color: var(--ink-mid); } /* Comparison table */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; } .tbl th, .tbl td { text-align: left; padding: 17px 20px 17px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; } .tbl thead th { font-family: var(--narrow); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-3); border-bottom-color: var(--rule); padding-top: 0; } .tbl tbody th { font-weight: 600; color: var(--on-dark); width: 30%; } .tbl td { color: var(--on-dark-2); } .tbl td.is-yes { color: var(--lime-text); } /* -------------------------------------------------------------------------- 24. Dashboard mock (for businesses) -------------------------------------------------------------------------- */ /* Named bizdash, not dash: `.dash` is already the little eyebrow rule in Part One, and a plain `.dash` here inherited its 26x1px box and then clipped the whole mock away under overflow:hidden. */ .bizdash { background: var(--cream); color: var(--deep); border-radius: 10px; overflow: hidden; box-shadow: 0 28px 64px rgba(4, 14, 10, 0.5); } .bizdash__bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: #fff; border-bottom: 1px solid var(--paper-2); } .bizdash__dots { display: flex; gap: 6px; flex: none; } .bizdash__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); } .bizdash__crumb { font-size: 12.5px; color: var(--on-light-2); } .bizdash__body { display: flex; flex-direction: column; gap: 16px; padding: 22px; } .bizdash__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 14px; } .bizdash__kpi { background: #fff; border: 1px solid var(--paper-2); border-radius: 10px; padding: 16px 18px; } .bizdash__kpi-n { font-family: var(--serif); font-size: 29px; line-height: 1; letter-spacing: -0.02em; } .bizdash__kpi-l { font-size: 12.5px; line-height: 1.4; color: var(--on-light-2); padding-top: 7px; } .bizdash__panel { background: #fff; border: 1px solid var(--paper-2); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 14px; } .bizdash__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bizdash__panel-title { font-size: 14px; font-weight: 600; } .bizdash__panel-meta { font-size: 12px; color: var(--on-light-2); } .bizdash__chart { display: flex; align-items: flex-end; gap: 7px; height: 96px; } .bizdash__chart span { flex: 1; min-width: 0; background: var(--chip); border-radius: 2px 2px 0 0; height: var(--h, 30%); } .bizdash__chart span:nth-last-child(-n + 3) { background: var(--lime); } .bizdash__rows { display: flex; flex-direction: column; } .bizdash__row { display: flex; align-items: center; gap: 12px; padding-block: 11px; border-top: 1px solid var(--paper-4); font-size: 13.5px; } .bizdash__row:first-child { border-top: 0; } .bizdash__row .avatar { width: 26px; height: 26px; font-size: 11px; background: var(--chip); color: var(--ink-mid); } .bizdash__row-name { font-weight: 600; } .bizdash__row-sub { color: var(--on-light-2); font-size: 12.5px; } .bizdash__row-val { margin-left: auto; font-weight: 600; color: var(--money); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 25. Demo well — the video / graphic slot Holds an asset-free animated walkthrough today; main.js swaps in a real