/* Protection Connect: homepage styles (site/index.html). Loaded after /assets/site.css. Source of truth: design/Homepage v3.dc.html and design/README.md sections 2-12. Shared tokens, type scale, buttons, header, footer and keyframes live in site.css. Animated parts are driven by /assets/home.js: - Dashboard preview: a scripted demo drawn from data-* attributes on .ho-app (screen, campaigns, leads, estimate, cursor waypoint, ...), with Pause / Play, Replay and five step buttons under it. The markup ships the static Overview (two campaigns and three leads, no cursor) shown without JS; under prefers-reduced-motion nothing plays until a click and each step shows a still. See section 2. - How it works: is-live / is-anim on the section; is-active on the step, tab and view of the story window; is-set / is-act, --p / --pi and data-r on the views (see 4). - .is-paused on a container pauses its CSS animations while it is off-screen. - [data-ho-reveal] blocks fade up once on scroll (see 11). Sections 5, 7 and 13 (bidding and the shared card parts, the sample enquiry and lead credits, the starting costs) are static: a short heading, one line and a few scannable items each, with one small UI card where it helps; nothing driven by home.js apart from the reveal. The trust strip and the final CTA were ported from the /home-v2/ preview (removed); their few colours with no site.css token are below. The homepage's own section spacing (--pc-section) is a little tighter than the site default (section 0). Contents 0. Page tokens 1. Hero 2. Dashboard preview 3. Trust strip 4. How it works 5. Bidding and pricing (plus the shared stage, UI card, tag, caption, link and points) 6. Journey and product film 7. Sample enquiry and lead credits 8. (none: the numbers band was removed in October 2026) 9. FAQ 10. SEO copy and final CTA 11. Motion helpers 12. Proof components (not rendered until genuine proof exists) 13. Sample enquiry and starting costs (the hero's second button, the anchor offsets and the costs) */ /* ----------------------------------------------------------- 0. Page tokens */ .pc-home { --ho-ink-2: #2A3654; /* secondary ink: trust strip, quotes, lead credit grounds */ --ho-soft: #F6F8FB; /* sample enquiry contact strip, SEO band */ --ho-underline: #C9D2E2; /* FRN underline */ --ho-ease: cubic-bezier(.2, .7, .2, 1); /* Homepage section rhythm: 56-80px between sections (the site default is 64-96px), so the page reads as one tight story. */ --pc-section: clamp(56px, 6.5vw, 80px); } /* ------------------------------------------------------------------- 1. Hero */ /* Two-tone brand mark in a reserved 52 x 52 box (nothing shifts). The markup and these base rules are the static final state; the intro below plays once on load (about 1.4 s): 0.08-0.72 s the halves glide in from opposite corners, turning 16deg about the centre, and resolve from a soft (blurred) copy to the sharp one (the sharp copy fades in faster than the soft one fades out, so the halves never read washed out): an ease-out glide to 72%, then an ease-in pull for the last 2.5px, so they keep moving and arrive with a click 0.72 s lock: the pair pops 1 > 1.07 > .985 > 1 (.4 s) 0.70-1.42 s a soft blue glow and a thin ring expand from the joint and fade out Then it is still, apart from a one-off shine sweep that home.js (section 0) adds every 8-10 s while the mark is on screen and the tab is visible. Only transform and opacity animate: the blur is a static filter on a copy of each half that fades out. */ .ho-mark { position: relative; display: block; width: 52px; height: 52px; margin: 0 auto; } .ho-mark__glow, .ho-mark__ring, .ho-mark__snap, .ho-mark__half, .ho-mark__glint { position: absolute; inset: 0; display: block; } .ho-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .ho-mark__half--a { fill: var(--pc-mark-a); animation: hoHalfA .64s .08s both; } .ho-mark__half--b { fill: var(--pc-mark-b); animation: hoHalfB .64s .08s both; } .ho-mark__soft { opacity: 0; filter: blur(1.6px); animation: hoSoft .6s cubic-bezier(.3, 0, .4, 1) .08s both; } .ho-mark__sharp { animation: hoSharp .34s cubic-bezier(.3, 0, .4, 1) .08s both; } .ho-mark__snap { animation: hoLock .4s cubic-bezier(.25, .6, .35, 1) .72s both; } .ho-mark__glow { border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 92, 255, .36), rgba(36, 92, 255, .14) 55%, rgba(36, 92, 255, 0)); opacity: 0; animation: hoGlow .72s cubic-bezier(.2, .7, .3, 1) .7s both; } .ho-mark__ring { border-radius: 50%; box-shadow: 0 0 0 1px rgba(36, 92, 255, .5); opacity: 0; animation: hoRing .7s cubic-bezier(.2, .7, .3, 1) .72s both; } /* Shine: a diagonal light band, clipped to the mark's own shape, crosses it once per .is-on. */ .ho-mark__glint { overflow: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 248'%3E%3Cpath d='M4.05 92.04C4.06 82.04 3.36 71.46 6.21 61.79C7.75 56.56 10.12 51.67 13.04 47.08C20.78 34.92 33.39 26.48 47.37 23.28C55 21.54 63.03 22.11 70.79 22.13H106.3L140.31 22.09C147.72 22.1 154.7 21.78 160.35 27.5C166.03 33.26 165.15 39.16 165.18 46.58C165.23 59.41 165.38 72.27 165.09 85.09C165.05 86.89 165.14 88.8 164.78 90.57C162.94 99.55 156.3 106.69 147.54 109.17C146.57 109.45 145.66 109.8 144.66 109.93C140.93 110.4 136.92 110.03 133.16 110.01H112.65C107.86 109.99 102.92 109.66 98.15 110.13C89.49 111 81.05 114.41 74.1 119.65C67.34 124.72 61.66 133.46 59.19 141.48C58.31 144.35 57.85 147.28 57.3 150.22C56.52 154.35 57.7 162.11 56.91 165.18C56.7 166 56.25 166.63 55.62 167.19C53.52 169.07 50.63 168.75 48.03 168.77L32.52 168.8L14.02 168.76C11.34 168.79 8.06 169.37 5.89 167.45C3.92 165.7 4.05 163.48 4.05 161.06V148.05V92.04Z'/%3E%3Cpath d='M83.47 172.27C83.48 165.56 82.97 158.39 85.22 151.97C88.32 143.14 96.84 137.56 105.82 136.24C109.54 135.69 113.56 136.06 117.32 136.08L139.33 136.12C143.94 136.1 148.75 136.44 153.34 135.93C154.35 135.81 155.26 135.47 156.24 135.24L158.68 134.81C164.97 133.14 170.94 129.57 175.87 125.39C177.95 123.64 179.58 121.63 181.2 119.47C185.95 113.15 188.54 107.16 190.19 99.47L190.9 96.57C191.44 92.61 190.35 84.85 191.15 81.59C191.46 80.33 192.29 79.16 193.45 78.55C195.7 77.35 202.54 78.03 205.33 78.03L233.35 78C237.35 78 243.09 77.24 243.92 82.6C244.4 85.73 243.98 92.13 243.98 95.6V121.62V154.64C243.99 161.22 244.5 168.68 243.75 175.15C242.12 189.32 236.12 202.46 225.47 212.15C217.25 219.63 206.5 224.42 195.48 225.74C189.96 226.4 178.62 225.87 172.47 225.88L120.44 225.91H95.92C92.4 225.92 88.25 226.49 85.51 223.76C82.54 220.81 83.47 213.73 83.47 209.79V172.27Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 248'%3E%3Cpath d='M4.05 92.04C4.06 82.04 3.36 71.46 6.21 61.79C7.75 56.56 10.12 51.67 13.04 47.08C20.78 34.92 33.39 26.48 47.37 23.28C55 21.54 63.03 22.11 70.79 22.13H106.3L140.31 22.09C147.72 22.1 154.7 21.78 160.35 27.5C166.03 33.26 165.15 39.16 165.18 46.58C165.23 59.41 165.38 72.27 165.09 85.09C165.05 86.89 165.14 88.8 164.78 90.57C162.94 99.55 156.3 106.69 147.54 109.17C146.57 109.45 145.66 109.8 144.66 109.93C140.93 110.4 136.92 110.03 133.16 110.01H112.65C107.86 109.99 102.92 109.66 98.15 110.13C89.49 111 81.05 114.41 74.1 119.65C67.34 124.72 61.66 133.46 59.19 141.48C58.31 144.35 57.85 147.28 57.3 150.22C56.52 154.35 57.7 162.11 56.91 165.18C56.7 166 56.25 166.63 55.62 167.19C53.52 169.07 50.63 168.75 48.03 168.77L32.52 168.8L14.02 168.76C11.34 168.79 8.06 169.37 5.89 167.45C3.92 165.7 4.05 163.48 4.05 161.06V148.05V92.04Z'/%3E%3Cpath d='M83.47 172.27C83.48 165.56 82.97 158.39 85.22 151.97C88.32 143.14 96.84 137.56 105.82 136.24C109.54 135.69 113.56 136.06 117.32 136.08L139.33 136.12C143.94 136.1 148.75 136.44 153.34 135.93C154.35 135.81 155.26 135.47 156.24 135.24L158.68 134.81C164.97 133.14 170.94 129.57 175.87 125.39C177.95 123.64 179.58 121.63 181.2 119.47C185.95 113.15 188.54 107.16 190.19 99.47L190.9 96.57C191.44 92.61 190.35 84.85 191.15 81.59C191.46 80.33 192.29 79.16 193.45 78.55C195.7 77.35 202.54 78.03 205.33 78.03L233.35 78C237.35 78 243.09 77.24 243.92 82.6C244.4 85.73 243.98 92.13 243.98 95.6V121.62V154.64C243.99 161.22 244.5 168.68 243.75 175.15C242.12 189.32 236.12 202.46 225.47 212.15C217.25 219.63 206.5 224.42 195.48 225.74C189.96 226.4 178.62 225.87 172.47 225.88L120.44 225.91H95.92C92.4 225.92 88.25 226.49 85.51 223.76C82.54 220.81 83.47 213.73 83.47 209.79V172.27Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; } .ho-mark__glint::before { content: ""; position: absolute; inset: 0 auto 0 -100%; width: 100%; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .36) 50%, rgba(255, 255, 255, 0) 72%); opacity: 0; } .ho-mark__glint.is-on::before { animation: hoGlint 1.1s cubic-bezier(.45, 0, .25, 1) both; } /* home.js: loaded in a background tab, the mark stays still until the tab is first shown. */ .ho-mark.is-still *, .ho-mark.is-still *::before { animation: none !important; } @keyframes hoHalfA { 0% { opacity: 0; transform: translate(-16px, -16px) rotate(-16deg); animation-timing-function: cubic-bezier(.25, .65, .35, .94); } 72% { opacity: 1; transform: translate(-2.5px, -2.5px) rotate(-2.5deg); animation-timing-function: cubic-bezier(.5, .2, .92, .5); } 100% { opacity: 1; transform: none; } } @keyframes hoHalfB { 0% { opacity: 0; transform: translate(16px, 16px) rotate(-16deg); animation-timing-function: cubic-bezier(.25, .65, .35, .94); } 72% { opacity: 1; transform: translate(2.5px, 2.5px) rotate(-2.5deg); animation-timing-function: cubic-bezier(.5, .2, .92, .5); } 100% { opacity: 1; transform: none; } } @keyframes hoSoft { from { opacity: 1; } to { opacity: 0; } } @keyframes hoSharp { from { opacity: 0; } to { opacity: 1; } } @keyframes hoLock { 0% { transform: scale(1); } 30% { transform: scale(1.07); } 62% { transform: scale(.985); } 100% { transform: scale(1); } } @keyframes hoGlow { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2); } } /* The ring starts just outside the mark's corners (radius 1.15 x 26px) so it never crosses it. */ @keyframes hoRing { 0% { opacity: 0; transform: scale(1.15); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(2); } } @keyframes hoGlint { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(200%); } } .ho-hero__h1 { margin: 22px auto 0; max-width: 880px; } .ho-hero__sub { margin: 20px auto 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--pc-muted); /* Even lines (the new model's sub-line, 3 Nov 2026, runs to three lines on desktop). */ text-wrap: balance; } .ho-hero__sub strong, .ho-hero__for strong { color: var(--pc-navy); font-weight: 600; } .ho-hero__cta { margin-top: 28px; display: flex; justify-content: center; } /* First-deposit reassurance right under the CTA, then who it is for. */ .ho-hero__terms { margin: 14px auto 0; max-width: 34em; font-size: 14px; font-weight: 500; color: var(--ho-ink-2); text-wrap: balance; } .ho-hero__for { margin: 6px 0 0; font-size: 14px; color: var(--pc-muted); text-wrap: balance; } /* ------------------------------------------------------- 2. Dashboard preview */ /* An illustrative screen recording of the broker dashboard in its default navy look (founder, 10 Oct 2026: the navy side rail, a light page and white cards), played at about 1.5x (about 35 s loop, home.js section 1), in five steps: 1 Campaigns > Create campaign > criteria and bid 2 the estimated leads per week and a bid tip (Apply); a £150 daily spend limit (the estimate shows that it caps it) > Start buying ("Campaign created and active") > an over-50s campaign on fast-forward 3 leads arrive on the Overview (fast-forward chip on) 4 the newest lead opens in the lead drawer (the full enquiry) > Call > "Calling…" 5 Pause all buying > "Buying paused" and the paused banner > fade and restart. Pause / Play and Replay sit on the frame's bottom edge (.ho-ctl, at the end of this section), outside the zoomed stage. Camera (founder, 13 Oct 2026). Everything the app draws sits in .ho-stage, which home.js moves with one transform (translate + scale, from the top-left corner): the loop opens on the full dashboard, then zooms and pans to each part being clicked, picked or typed in, and back out at the end of each scene. .ho-app clips it. The shots are per canvas, like the cursor waypoints: --k-: x y zoom (the centre in design px and the zoom), with --cw / --ch the canvas size; home.js clamps each centre so the stage always covers the frame. Canvas. The app is drawn in design pixels and scaled as one piece: --u is one design pixel, worked out from the card's width (container query units). So that text stays close to its design size, the viewport picks one of three canvases (media queries, so the frame can shrink with the compact one): wide 960px and up 976 x 560, navy side rail (1u = 1px at 1366; 0.89-1 from 960) mid 780-959px 772 x 640: the wide screens moved under the navy top bar and tabs (0.9-1.12), with the smallest text set a little larger compact under 780px 360 x 640, navy top bar and tabs, bottom sheets; at most 1.2px per u, and .ho-dash narrows to that so the frame hugs the app Every length is calc(N * var(--u)) and every click target is a fixed box, so the cursor waypoints (--tNx / --tNy: the design px of the pointer's hotspot) line up at any width with no JS and no layout shift. Positioned parts set --x --y --w --h (design px, relative to their positioned parent); the mid and compact blocks at the end of this section override them. .ho-wide parts exist on the wide and mid canvases, .ho-compact parts on the compact one; the side rail is wide only and the top bar mid and compact. The lead drawer is a right panel on the wide and mid canvases and a bottom sheet on the compact one. State. home.js sets data-* on .ho-app (scr, nav, camps, leads, form, est, rec, smoke, cover, lim, focus, sel, drw, call, paused, ff, toast, curhide, out, cur) and writes the [data-txt] strings; everything here is derived from them. The markup ships the static final state (Overview with three leads, buying on, no drawer), which shows without JS and under reduced motion, with no cursor and no zoom. Only transform and opacity animate (plus the option chips' and nav items' text colour). Navy look colours (the dashboard's --pcn- tokens): rail #0B1B3F, active item #24345A with a #7FA0FF bar, rail text #C3CCE0 / #A3AECB, buttons #245CFF, page #EEF1F6, card lines #E2E6EE. */ .ho-dash { max-width: 1080px; margin: var(--pc-hero-gap) auto 0; padding: 0 clamp(12px, 3vw, 24px); box-sizing: border-box; } .ho-dash__frame { border-radius: 20px; background: var(--pc-navy); padding: clamp(8px, 2.4vw, 28px); } /* The card is navy like the frame (the app paints its own light page): a light card showed as a faint arc at the rounded corners behind the navy rail and top bar (QA, 13 Oct 2026). */ .ho-dash__card { border-radius: 12px; overflow: hidden; background: var(--pc-navy); container-type: inline-size; } /* The frame holds the controls (.ho-ctl, positioned on it). The "Illustrative example, not our prices" tag on its top edge was removed (founder, 10 Oct 2026). */ .ho-dash__frame { position: relative; } .ho-app { --u: calc(100cqw / 976); /* Cursor waypoints (wide). */ --c0x: 640; --c0y: 430; /* resting point */ --t1x: 64; --t1y: 153; /* Campaigns (sidebar) */ --t2x: 582; --t2y: 281; /* Create campaign */ --t3x: 300; --t3y: 129; /* Campaign name */ --t4x: 386; --t4y: 264; /* Non-smoker */ --t5x: 371; --t5y: 332; /* £100k+ */ --t6x: 284; --t6y: 403; /* Maximum price per lead */ --t7x: 894; --t7y: 226; /* Apply */ --t12x: 468; --t12y: 403; /* Daily spend limit */ --t8x: 782; --t8y: 504; /* Start buying leads */ --t9x: 887; --t9y: 41; /* + New campaign */ --c1x: 700; --c1y: 380; /* reappears after the fast-forward */ --t10x: 60; --t10y: 81; /* Overview (sidebar) */ --c2x: 430; --c2y: 470; /* parked while leads arrive */ --t11x: 330; --t11y: 263; /* the newest lead's row */ --t13x: 700; --t13y: 120; /* Call, in the lead drawer */ --t14x: 885; --t14y: 36; /* Pause all buying */ --cx: var(--c0x); --cy: var(--c0y); --navi: 0; /* nav highlight: 0 Overview, 2 Campaigns */ --campsi: 0; --leadsi: 0; --esti: 0; --rh: 54; /* lead row height */ --ban: 56; /* how far the Overview moves down for the paused banner */ /* Camera (wide): the canvas, and each shot's centre (design px) and zoom. */ --cw: 976; --ch: 560; --k-t1: 230 180 1.8; /* Campaigns, in the rail */ --k-t2: 582 240 1.8; /* Create campaign */ --k-form: 470 222 1.75; /* name, smoking status, cover (and the estimate as it narrows) */ --k-fields: 470 380 1.75; /* maximum price and daily limit */ --k-t7: 782 200 1.75; /* the estimate and the bid tip's Apply */ --k-t8: 782 380 1.6; /* the summary and Start buying leads */ --k-t9: 780 130 1.7; /* + New campaign */ --k-t10: 230 180 1.8; /* Overview, in the rail */ --k-t11: 420 250 1.75; /* the newest lead */ --k-drw: 740 160 1.9; /* the lead drawer and Call */ --k-t14: 770 120 1.8; /* Pause all buying */ position: relative; display: block; width: calc(976 * var(--u)); height: calc(560 * var(--u)); overflow: hidden; background: #0B1B3F; color: #0B1B3F; font-family: var(--pc-figtree); font-size: calc(13 * var(--u)); line-height: 1.3; text-align: left; white-space: nowrap; pointer-events: none; -webkit-user-select: none; user-select: none; transition: opacity .3s cubic-bezier(.2, .7, .2, 1); } /* Loop start and end: hidden (fades in over .3 s, out over .45 s). */ .ho-app[data-out="1"] { opacity: 0; transition: opacity .45s ease; } /* The camera's stage: the whole app, moved by home.js (transform only; will-change only while it moves, so text is redrawn sharp once it settles). */ .ho-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; } .ho-stage.is-moving { will-change: transform; } /* The shared cards' .ho-stage (section 5) must not reach the demo's stage: no padding, rounded corners or panel colour. The stage paints the dashboard's page colour, navy under the rail (or the top bar below 960px), and the app and the card behind it are navy, so no light shows as an arc at the card's rounded corners behind the rail and top bar (QA, 13 Oct 2026). */ .ho-app > .ho-stage { padding: 0; border-radius: 0; background: linear-gradient(90deg, #0B1B3F calc(188 * var(--u)), #EEF1F6 0); } @media (max-width: 959.98px) { .ho-app > .ho-stage { background: linear-gradient(180deg, #0B1B3F calc(88 * var(--u)), #EEF1F6 0); } } /* Before home.js takes over (motion allowed), start hidden like the loop's first frame. */ .ho-motion .ho-app:not(.is-live) { opacity: 0; } /* Seeking / resetting: jump straight to the new state. */ .ho-app.is-instant, .ho-app.is-instant *, .ho-app.is-instant *::before, .ho-app.is-instant *::after, .ho-app .is-instant, .ho-app .is-instant *, .ho-app .is-instant *::before, .ho-app .is-instant *::after { transition: none !important; } .ho-app[data-cur="c0"] { --cx: var(--c0x); --cy: var(--c0y); } .ho-app[data-cur="t1"] { --cx: var(--t1x); --cy: var(--t1y); } .ho-app[data-cur="t2"] { --cx: var(--t2x); --cy: var(--t2y); } .ho-app[data-cur="t3"] { --cx: var(--t3x); --cy: var(--t3y); } .ho-app[data-cur="t4"] { --cx: var(--t4x); --cy: var(--t4y); } .ho-app[data-cur="t5"] { --cx: var(--t5x); --cy: var(--t5y); } .ho-app[data-cur="t6"] { --cx: var(--t6x); --cy: var(--t6y); } .ho-app[data-cur="t7"] { --cx: var(--t7x); --cy: var(--t7y); } .ho-app[data-cur="t8"] { --cx: var(--t8x); --cy: var(--t8y); } .ho-app[data-cur="t9"] { --cx: var(--t9x); --cy: var(--t9y); } .ho-app[data-cur="c1"] { --cx: var(--c1x); --cy: var(--c1y); } .ho-app[data-cur="t10"] { --cx: var(--t10x); --cy: var(--t10y); } .ho-app[data-cur="c2"] { --cx: var(--c2x); --cy: var(--c2y); } .ho-app[data-cur="t11"] { --cx: var(--t11x); --cy: var(--t11y); } .ho-app[data-cur="t12"] { --cx: var(--t12x); --cy: var(--t12y); } .ho-app[data-cur="t13"] { --cx: var(--t13x); --cy: var(--t13y); } .ho-app[data-cur="t14"] { --cx: var(--t14x); --cy: var(--t14y); } .ho-app[data-nav="campaigns"] { --navi: 2; } .ho-app[data-camps="1"] { --campsi: 1; } .ho-app[data-camps="2"] { --campsi: 2; } .ho-app[data-leads="1"] { --leadsi: 1; } .ho-app[data-leads="2"] { --leadsi: 2; } .ho-app[data-leads="3"] { --leadsi: 3; } .ho-app[data-est="1"] { --esti: 1; } .ho-app[data-est="2"] { --esti: 2; } .ho-app[data-est="3"] { --esti: 3; } .ho-app[data-est="4"] { --esti: 4; } .ho-app[data-est="5"] { --esti: 5; } .ho-app[data-est="6"] { --esti: 6; } /* Positioned parts: --x --y --w --h in design px. */ .ho-app :where(.ho-app__side, .ho-app__top, .ho-app__logo, .ho-nav__hl, .ho-nav__i, .ho-side__bl, .ho-side__bv, .ho-side__add, .ho-acct, .ho-top__bal, .ho-top__av, .ho-tab, .ho-badge, .ho-ov__head, .ho-seg, .ho-pz, .ho-ban, .ho-kpis, .ho-ov__lh, .ho-ov__leads, .ho-ov__note, .ho-cp__title, .ho-cp__sub, .ho-cp__new, .ho-cp__empty, .ho-cp__create, .ho-cpl, .ho-cpr, .ho-cpr__c1, .ho-cpr__c2, .ho-cpr__c3, .ho-cpr__est, .ho-cpr__m, .ho-cpr__m2, .ho-cpr__m3, .ho-cpr__tag, .ho-cp__note, .ho-fm__back, .ho-fm__title, .ho-ff, .ho-fm__card, .ho-lbl, .ho-in, .ho-fm__to, .ho-opt, .ho-fm__help, .ho-fm__est, .ho-fm__sum, .ho-fm__sheet, .ho-eyebrow, .ho-fm__fig, .ho-fm__fig2, .ho-fm__per, .ho-fm__note, .ho-stt, .ho-stt__apply, .ho-fm__sp, .ho-fm__ls, .ho-fm__go, .ho-toast, .ho-drw, .ho-drw__ref, .ho-drw__x, .ho-drw__name, .ho-drw__sub, .ho-call, .ho-drw__mail, .ho-dl) { position: absolute; box-sizing: border-box; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); } @media (min-width: 960px) { .ho-app .ho-app__top { display: none !important; } } @media (max-width: 959.98px) { .ho-app .ho-app__side { display: none !important; } } @media (min-width: 780px) { .ho-app .ho-compact { display: none !important; } } @media (max-width: 779.98px) { .ho-app .ho-wide { display: none !important; } } /* Shared bits */ .ho-app b { font-weight: 600; } .ho-app .ho-i { display: block; flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); } .ho-h1 { font-size: calc(21 * var(--u)); font-weight: 700; letter-spacing: -0.02em; line-height: calc(26 * var(--u)); } .ho-card { background: #FFFFFF; border-radius: calc(12 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(11, 27, 63, .10); } .ho-card::after, .ho-fm__card::after, .ho-fm__sum::after, .ho-cpl::after { content: ""; position: absolute; inset: 0; border: 1px solid #E2E6EE; border-radius: inherit; pointer-events: none; } .ho-btn { display: flex; align-items: center; justify-content: center; border-radius: calc(8 * var(--u)); background: #245CFF; color: #FFFFFF; font-size: calc(13 * var(--u)); font-weight: 600; } .ho-eyebrow { display: flex; align-items: center; gap: calc(6 * var(--u)); font-family: var(--pc-mono); font-size: calc(10.5 * var(--u)); line-height: calc(14 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; color: #5B6787; } .ho-app .ho-eyebrow .ho-i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); } .ho-empty { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(46 * var(--u)); bottom: calc(46 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: #5B6787; opacity: 0; transition: opacity .25s ease; } .ho-empty b { font-size: calc(14 * var(--u)); color: #0B1B3F; } /* Live dot: solid dot with a pinging ring behind it. */ .ho-live { position: relative; display: inline-block; flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); } .ho-live::before, .ho-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pc-check); } .ho-live::before { animation: pcPing 1.8s cubic-bezier(0, 0, .2, 1) infinite; } /* Buying status: "Buying" (green) and "Buying paused" (amber, the dashboard's colours) cross-fade. */ .ho-buying { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)); box-sizing: border-box; border-radius: 999px; background: var(--pc-success-bg); color: var(--pc-success); font-size: calc(12 * var(--u)); font-weight: 600; transition: opacity .3s ease; } .ho-buying--p { background: #FBF1DF; color: #8A5A14; opacity: 0; } .ho-buying__dot { flex: none; display: inline-block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #C9820A; } .ho-app[data-camps="0"] .ho-buying { opacity: 0; } .ho-app[data-paused="1"] .ho-buying { opacity: 0; } .ho-app[data-paused="1"] .ho-buying--p { opacity: 1; } /* Rolling numbers: a stack of every value in a one-line window (--rl design px tall). */ .ho-roll { --ri: 0; --rl: 20; display: block; height: calc(var(--rl) * var(--u)); overflow: hidden; } .ho-roll__s { display: block; transform: translateY(calc(var(--ri) * var(--rl) * var(--u) * -1)); transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .ho-roll__s > span { display: block; height: calc(var(--rl) * var(--u)); line-height: calc(var(--rl) * var(--u)); } /* Status tags: competitive (green) / raise (blue). */ .ho-tag { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); flex: none; height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(6 * var(--u)); box-sizing: border-box; border-radius: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; } .ho-tag--ok { background: #E6F6EF; color: #1F6E55; } .ho-tag--up { background: #EAF2FF; color: #1A3A8F; } /* Click feedback (home.js adds .is-press for 160 ms). */ .ho-app [data-t] { transition: transform .16s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, color .2s ease; } .ho-app [data-t].is-press { transform: scale(.96); } .ho-app .ho-ld[data-t].is-press { transform: scale(.985); } /* Chrome (wide): the navy side rail, as the dashboard's (white logo; Overview, Leads, Campaigns, Calls with a sliding highlight; the balance with Add funds and the account button at the foot). */ .ho-app__side { --x: 0; --y: 0; --w: 188; --h: 560; z-index: 2; background: #0B1B3F; } .ho-app__logo { --x: 22; --y: 24; --w: 149; --h: 17; display: block; } .ho-nav__hl { --x: 12; --y: 64; --w: 164; --h: 34; border-radius: calc(9 * var(--u)); background: #24345A; box-shadow: inset calc(3 * var(--u)) 0 0 #7FA0FF; transform: translateY(calc(var(--navi) * 36 * var(--u))); transition: transform .24s cubic-bezier(.2, .8, .2, 1); } .ho-nav__i { --x: 12; --y: 64; --w: 164; --h: 34; display: flex; align-items: center; padding-left: calc(12 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; color: #C3CCE0; transition: color .24s ease; } .ho-nav__i--ld { --y: 100; } .ho-nav__i--cp { --y: 136; } .ho-nav__i--cl { --y: 172; } .ho-app[data-nav="overview"] .ho-nav__i--ov, .ho-app[data-nav="campaigns"] .ho-nav__i--cp, .ho-app[data-nav="overview"] .ho-tab--ov, .ho-app[data-nav="campaigns"] .ho-tab--cp { color: #FFFFFF; font-weight: 600; } /* Leads count badge: pops in with the first lead, then rolls. */ .ho-badge { --x: 134; --y: 8; --w: 20; --h: 18; border-radius: 999px; background: #245CFF; color: #FFFFFF; font-size: calc(11.5 * var(--u)); font-weight: 600; text-align: center; opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .34s cubic-bezier(.3, 1.6, .5, 1); } .ho-badge .ho-roll { --rl: 18; --ri: max(0, var(--leadsi) - 1); } .ho-app:not([data-leads="0"]) .ho-badge { opacity: 1; transform: none; } /* The rail's foot: the balance (it rolls down as leads are bought) with Add funds, then the account button (a made-up firm and user). */ .ho-side__bl { --x: 22; --y: 444; --w: 150; --h: 16; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #A3AECB; } .ho-side__bv.ho-roll { --x: 22; --y: 462; --w: 88; --h: 26; --rl: 26; --ri: var(--leadsi); font-size: calc(16.5 * var(--u)); font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; } .ho-side__add { --x: 110; --y: 461; --w: 66; --h: 28; display: flex; align-items: center; justify-content: center; border-radius: calc(7 * var(--u)); background: #245CFF; color: #FFFFFF; font-size: calc(12 * var(--u)); font-weight: 600; } .ho-acct { --x: 12; --y: 506; --w: 164; --h: 40; display: flex; align-items: center; gap: calc(9 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(8 * var(--u)); color: #A3AECB; } .ho-acct__av, .ho-top__av { flex: none; display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: #24345A; color: #FFFFFF; font-size: calc(11 * var(--u)); font-weight: 600; } .ho-acct__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .ho-acct__t b { font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; } .ho-acct__t span { font-size: calc(11.5 * var(--u)); line-height: calc(15 * var(--u)); overflow: hidden; text-overflow: ellipsis; } .ho-app .ho-acct .ho-i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); } /* Chrome (mid and compact): the navy top bar, as the dashboard's below its rail width (white logo, the balance and the account button, then the tabs). Tabs differ in width, so the active tab's fill fades in rather than sliding. */ .ho-app__top { --x: 0; --y: 0; --w: 360; --h: 88; z-index: 2; background: #0B1B3F; } .ho-app__top .ho-app__logo { --x: 16; --y: 15; --w: 131.5; --h: 15; } .ho-top__bal.ho-roll { --x: 192; --y: 12; --w: 112; --h: 20; --rl: 20; --ri: var(--leadsi); font-size: calc(13.5 * var(--u)); font-weight: 600; color: #FFFFFF; text-align: right; font-variant-numeric: tabular-nums; } .ho-top__av { --x: 314; --y: 8; --w: 30; --h: 30; width: calc(30 * var(--u)); height: calc(30 * var(--u)); } .ho-tab { --x: 10; --y: 46; --w: 84; --h: 32; isolation: isolate; display: flex; align-items: center; justify-content: center; border-radius: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 500; color: #C3CCE0; transition: color .24s ease; } .ho-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #24345A; opacity: 0; transition: opacity .24s ease; } .ho-app[data-nav="overview"] .ho-tab--ov::before, .ho-app[data-nav="campaigns"] .ho-tab--cp::before { opacity: 1; } .ho-tab--ld { --x: 98; --w: 74; padding-right: calc(18 * var(--u)); } .ho-tab--cp { --x: 176; --w: 96; } .ho-tab--cl { --x: 276; --w: 58; } .ho-tab .ho-badge { --x: 52; --y: 8; --w: 16; --h: 16; font-size: calc(10.5 * var(--u)); } .ho-tab .ho-badge .ho-roll { --rl: 16; } /* Screens: stacked over the whole app, cross-faded. */ .ho-scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(calc(6 * var(--u))); transition: opacity .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s; } .ho-app[data-scr="overview"] .ho-scr--ov, .ho-app[data-scr="campaigns"] .ho-scr--cp, .ho-app[data-scr="form"] .ho-scr--fm { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s; } /* Overview, as the dashboard's: the title with the buying switch (a pill: the status, then "Pause all buying"; once paused, "Buying paused" and "Resume buying", the dashboard's paused banner fades in and the rest of the screen moves down under it), Leads today, Spent today and Balance as three cards, then the leads list (customer, product, cover, age and smoking, when, paid, status), newest first, and the line under it. No campaigns block (founder, 9-10 Oct). */ .ho-ov__head { --x: 212; --y: 24; --w: 400; --h: 26; display: flex; align-items: center; } .ho-seg { --x: 694; --y: 18; --w: 258; --h: 36; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE3EF; transition: opacity .25s ease; } .ho-app[data-camps="0"] .ho-seg { opacity: 0; } .ho-seg__st { position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); width: calc(122 * var(--u)); height: calc(28 * var(--u)); } .ho-seg__st .ho-buying { position: absolute; inset: 0; height: auto; padding: 0; background: none; } .ho-pz { --x: 128; --y: 4; --w: 126; --h: 28; border-radius: 999px; background: #EEF2F8; font-size: calc(12.5 * var(--u)); font-weight: 600; } .ho-pz::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #245CFF; opacity: 0; transition: opacity .2s ease; } .ho-pz__a, .ho-pz__b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease; } .ho-pz__b { opacity: 0; color: #FFFFFF; } .ho-app[data-paused="1"] .ho-pz::before { opacity: 1; } .ho-app[data-paused="1"] .ho-pz__a { opacity: 0; } .ho-app[data-paused="1"] .ho-pz__b { opacity: 1; } .ho-ban { --x: 212; --y: 66; --w: 740; --h: 44; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); background: #FBF6EC; box-shadow: inset 0 0 0 1px #EFE0C4; font-size: calc(13 * var(--u)); line-height: calc(17 * var(--u)); opacity: 0; transform: translateY(calc(-6 * var(--u))); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1); } .ho-app[data-paused="1"] .ho-ban { opacity: 1; transform: none; } .ho-ov__body { position: absolute; inset: 0; transition: transform .36s cubic-bezier(.2, .8, .2, 1); } .ho-app[data-paused="1"] .ho-ov__body { transform: translateY(calc(var(--ban) * var(--u))); } .ho-kpis { --x: 212; --y: 70; --w: 740; --h: 80; display: flex; gap: calc(16 * var(--u)); } .ho-kpi { position: relative; flex: 1 1 0%; min-width: 0; padding: calc(15 * var(--u)) calc(18 * var(--u)) 0; border-radius: calc(12 * var(--u)); background: #FFFFFF; box-shadow: 0 0 0 1px #E2E6EE, 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(11, 27, 63, .10); } .ho-kpi__l { display: block; font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 600; color: #4A5675; } .ho-kpi__v.ho-roll { --rl: 34; --ri: var(--leadsi); margin-top: calc(5 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .ho-kpi:nth-child(2) .ho-roll__s { transition-delay: .06s; } .ho-kpi:nth-child(3) .ho-roll__s { transition-delay: .12s; } .ho-ov__lh { --x: 212; --y: 170; --w: 200; --h: 20; font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; letter-spacing: -0.01em; } .ho-ov__leads { --x: 212; --y: 200; --w: 740; --h: 206; overflow: hidden; } /* The list's column heads (wide and mid). */ .ho-lt__h { position: absolute; left: 0; right: 0; top: 0; height: calc(36 * var(--u)); background: #F7F9FC; } .ho-lt__h span { position: absolute; top: 0; line-height: calc(36 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6787; } .ho-lt__h span:nth-child(1) { left: calc(16 * var(--u)); } .ho-lt__h span:nth-child(2) { left: calc(160 * var(--u)); } .ho-lt__h span:nth-child(3) { left: calc(284 * var(--u)); } .ho-lt__h span:nth-child(4) { left: calc(488 * var(--u)); } .ho-lt__h span:nth-child(5) { left: calc(552 * var(--u)); } .ho-ov__leads .ho-empty { top: calc(36 * var(--u)); bottom: 0; } .ho-app[data-camps="0"] .ho-ov__none-l { opacity: 1; } .ho-ov__wait { position: absolute; left: 0; right: 0; top: calc(111 * var(--u)); height: calc(20 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); color: #5B6787; opacity: 0; transition: opacity .25s ease; } .ho-app:not([data-camps="0"])[data-leads="0"] .ho-ov__wait { opacity: 1; } /* Lead rows: newest first. The stack slides down one row per new lead; rows above the window are clipped. A row opens the lead drawer, as in the dashboard. */ .ho-lds { position: absolute; left: 0; right: 0; top: calc(36 * var(--u)); bottom: 0; overflow: hidden; } .ho-lds__s { display: block; transform: translateY(calc((var(--leadsi) - 3) * var(--rh) * var(--u))); transition: transform .42s cubic-bezier(.2, .8, .2, 1); } .ho-ld { position: relative; display: block; height: calc(var(--rh) * var(--u)); opacity: 0; transition: opacity .3s ease; } .ho-ld::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #E8ECF3; } .ho-ld::after { content: ""; position: absolute; inset: 1px 0 0; background: #EEF4FF; opacity: 0; } .ho-app[data-leads="1"] .ho-ld--1, .ho-app[data-leads="2"] .ho-ld--1, .ho-app[data-leads="2"] .ho-ld--2, .ho-app[data-leads="3"] .ho-ld { opacity: 1; } .ho-app.is-live[data-leads="1"] .ho-ld--1::after, .ho-app.is-live[data-leads="2"] .ho-ld--2::after, .ho-app.is-live[data-leads="3"] .ho-ld--3::after { animation: hoTint 1.4s ease-out both; } .ho-app[data-drw="1"] .ho-ld--3::after { animation: none; opacity: 1; } @keyframes hoTint { from { opacity: 1; } to { opacity: 0; } } .ho-ld > * { position: absolute; z-index: 1; top: 0; height: calc(var(--rh) * var(--u)); line-height: calc(var(--rh) * var(--u)); overflow: hidden; text-overflow: ellipsis; } .ho-ld__n { left: calc(16 * var(--u)); width: calc(136 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; } .ho-ld__d { left: calc(284 * var(--u)); width: calc(196 * var(--u)); font-size: calc(12 * var(--u)); color: #4A5675; } .ho-ld__w { left: calc(488 * var(--u)); width: calc(60 * var(--u)); font-size: calc(12 * var(--u)); color: #4A5675; } .ho-ago > span { display: none; } .ho-app[data-leads="1"] .ho-ago__1, .ho-app[data-leads="2"] .ho-ago__2, .ho-app[data-leads="3"] .ho-ago__3 { display: inline; } .ho-ld__p { left: calc(552 * var(--u)); width: calc(44 * var(--u)); font-size: calc(13 * var(--u)); color: #8A94AD; font-variant-numeric: tabular-nums; } /* Status: the dashboard's compact dropdown pill. */ .ho-ld > .ho-st { left: calc(600 * var(--u)); top: calc(13 * var(--u)); width: calc(124 * var(--u)); height: calc(28 * var(--u)); line-height: normal; box-sizing: border-box; display: flex; align-items: center; gap: calc(5 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(9 * var(--u)); border-radius: 999px; box-shadow: inset 0 0 0 1px #BFD0F5; background: #FFFFFF; color: #1E4FD8; font-size: calc(11.5 * var(--u)); font-weight: 600; } .ho-st__d { flex: none; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #245CFF; } .ho-app .ho-st .ho-i { margin-left: auto; width: calc(11 * var(--u)); height: calc(11 * var(--u)); } .ho-ov__note { --x: 214; --y: 418; --w: 736; --h: 16; font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); color: #5B6787; } /* Campaigns */ .ho-oc__dot { flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #1F9D7A; } .ho-cp__title { --x: 212; --y: 24; --w: 400; --h: 26; } .ho-cp__sub { --x: 212; --y: 54; --w: 600; --h: 16; font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); color: #5B6787; } .ho-cp__new { --x: 822; --y: 24; --w: 130; --h: 34; } .ho-app[data-camps="0"] .ho-cp__new { opacity: 0; } .ho-cp__empty { --x: 212; --y: 96; --w: 740; --h: 284; border: 1px dashed #C9D3E4; background: #FFFFFF; border-radius: calc(14 * var(--u)); text-align: center; transition: opacity .25s ease; } .ho-cp__empty > b, .ho-cp__empty > span:not(.ho-btn) { position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); } .ho-cp__empty > b { top: calc(89 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; letter-spacing: -0.02em; } .ho-cp__empty > span:not(.ho-btn) { top: calc(119 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: #5B6787; white-space: normal; } .ho-cp__create { --x: 305; --y: 165; --w: 128; --h: 38; } .ho-app:not([data-camps="0"]) .ho-cp__empty { opacity: 0; } /* The list's frame: one row tall, then two (cross-faded, so nothing resizes). */ .ho-cpl { --x: 212; --y: 96; --w: 740; --h: 84; border-radius: calc(14 * var(--u)); background: #FFFFFF; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(11, 27, 63, .10); opacity: 0; transition: opacity .32s ease; } .ho-cpl--2 { --h: 168; } .ho-app[data-camps="1"] .ho-cpl--1, .ho-app[data-camps="2"] .ho-cpl--2 { opacity: 1; } .ho-cpr { --x: 212; --y: 96; --w: 740; --h: 84; transition: opacity .32s ease, transform .32s cubic-bezier(.2, .8, .2, 1); } .ho-cpr--b { --y: 180; } .ho-cpr--b::before { content: ""; position: absolute; left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: 0; height: 1px; background: #EDF1F7; } .ho-cpr::after { content: ""; position: absolute; inset: 1px; border-radius: calc(13 * var(--u)); background: #EEF4FF; opacity: 0; } .ho-cpr--b::after { border-radius: 0 0 calc(13 * var(--u)) calc(13 * var(--u)); } .ho-cpr > * { z-index: 1; } .ho-app[data-camps="0"] .ho-cpr, .ho-app[data-camps="1"] .ho-cpr--b { opacity: 0; transform: translateY(calc(10 * var(--u))); } .ho-app.is-live[data-camps="1"] .ho-cpr--a::after, .ho-app.is-live[data-camps="2"] .ho-cpr--b::after { animation: hoTint 1.2s ease-out both; } .ho-cpr__c1 { --x: 22; --y: 20; --w: 158; --h: 44; display: flex; flex-direction: column; gap: calc(4 * var(--u)); } .ho-cpr__c1 b { font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; } .ho-cpr__st { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); color: #1E4FD8; } /* Criteria (age, smoking, cover) and buying (price, daily limit, today) in three short lines each. */ .ho-cpr__c2, .ho-cpr__c3 { --x: 190; --y: 18; --w: 168; --h: 48; display: flex; flex-direction: column; font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); color: #5B6787; overflow: hidden; } .ho-cpr__c3 { --x: 370; --w: 118; } .ho-cpr__c3 b { font-size: calc(13 * var(--u)); color: #0B1B3F; } .ho-cpr__est { --x: 500; --y: 18; --w: 224; --h: 18; font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 600; } .ho-cpr__tag { --x: 500; --y: 42; --h: 22; width: auto; } .ho-cp__note { --x: 212; --y: 280; --w: 740; --h: 16; display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u)); color: #5B6787; transition: opacity .25s ease; } .ho-app[data-camps="0"] .ho-cp__note { opacity: 0; } /* Create campaign */ .ho-fm__back { --x: 212; --y: 20; --w: 200; --h: 14; font-size: calc(12.5 * var(--u)); line-height: calc(14 * var(--u)); color: #5B6787; } .ho-fm__title { --x: 212; --y: 37; --w: 400; --h: 26; } .ho-ff { --x: 847; --y: 24; --w: 105; --h: 20; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); border-radius: 999px; background: #0B1B3F; color: #FFFFFF; font-family: var(--pc-mono); font-size: calc(10 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transform: translateY(calc(-4 * var(--u))); transition: opacity .2s ease, transform .2s ease; } .ho-app .ho-ff .ho-i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); } .ho-app[data-ff="1"] .ho-ff { opacity: 1; transform: none; } /* On the Overview the buying switch has the top right: the chip sits beside the Leads heading. */ .ho-app[data-scr="overview"] .ho-ff { --y: 170; } .ho-fm__card { --x: 212; --y: 78; --w: 384; --h: 390; border-radius: calc(12 * var(--u)); background: #FFFFFF; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(11, 27, 63, .10); } .ho-lbl { --x: 16; --y: 14; --w: 340; --h: 14; font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); font-weight: 600; } .ho-fm__l2 { --y: 82; --w: 186; } .ho-fm__l3 { --x: 216; --y: 82; --w: 150; } .ho-fm__l4 { --y: 150; } .ho-fm__l5 { --y: 218; } .ho-fm__l6 { --y: 286; --w: 176; } .ho-fm__l7 { --x: 200; --y: 286; --w: 168; } .ho-in { --x: 16; --y: 34; --w: 352; --h: 34; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(10 * var(--u)); border: 1px solid #DCE3EF; border-radius: calc(8 * var(--u)); background: #FFFFFF; font-size: calc(13.5 * var(--u)); } .ho-in__t { position: relative; display: flex; align-items: center; min-width: 0; overflow: hidden; } .ho-in__ph { color: #8A94AD; display: none; } .ho-in [data-txt="name"]:empty ~ .ho-in__ph, .ho-in [data-txt="lim"]:empty ~ .ho-in__ph { display: inline; } .ho-in__ring { position: absolute; inset: -1px; border: calc(1.5 * var(--u)) solid #245CFF; border-radius: inherit; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(36, 92, 255, .14); opacity: 0; transition: opacity .16s ease; } .ho-app[data-focus="name"] .ho-fm__name .ho-in__ring, .ho-app[data-focus="bid"] .ho-fm__bid .ho-in__ring, .ho-app[data-focus="lim"] .ho-fm__lim .ho-in__ring { opacity: 1; } /* Text caret: out of the flow, so the text never moves when it shows. home.js moves it to the end of the text with a transform (no layout shift as characters are typed). */ .ho-fm__name .ho-in__t, .ho-fm__bid .ho-in__t, .ho-fm__lim .ho-in__t { padding-right: calc(2 * var(--u)); } .ho-caret { position: absolute; left: calc(-.75 * var(--u)); top: 50%; width: calc(1.5 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-8 * var(--u)); background: #0B1B3F; opacity: 0; } .ho-app.is-live[data-focus="name"] .ho-fm__name .ho-caret, .ho-app.is-live[data-focus="bid"][data-sel="0"] .ho-fm__bid .ho-caret, .ho-app.is-live[data-focus="lim"] .ho-fm__lim .ho-caret { opacity: 1; animation: pcCaret 1s step-end infinite; } .ho-fm__prod { --y: 102; --w: 192; color: #0B1B3F; } .ho-app .ho-fm__prod .ho-i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #5B6787; } .ho-fm__age1, .ho-fm__age2 { --x: 216; --y: 102; --w: 48; justify-content: center; padding: 0; } .ho-fm__age2 { --x: 296; } .ho-fm__to { --x: 264; --y: 102; --w: 32; --h: 34; display: flex; align-items: center; justify-content: center; font-size: calc(12.5 * var(--u)); color: #5B6787; } /* Option chips: the selected fill is a layer that fades in. */ .ho-opt { --x: 16; --y: 170; --w: 40; --h: 32; isolation: isolate; display: flex; align-items: center; justify-content: center; border: 1px solid #DCE3EF; border-radius: calc(8 * var(--u)); background: #FFFFFF; font-size: calc(12.5 * var(--u)); font-weight: 500; color: #0B1B3F; transition: color .16s ease, opacity .25s ease; } .ho-opt::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: #0B1B3F; opacity: 0; transition: opacity .16s ease; } .ho-opt--s1 { --x: 62; --w: 62; } .ho-opt--s2 { --x: 130; --w: 88; } .ho-opt--c0 { --y: 238; } .ho-opt--c1 { --x: 62; --y: 238; --w: 58; } .ho-opt--c2 { --x: 126; --y: 238; --w: 66; } .ho-opt--c3 { --x: 198; --y: 238; --w: 66; } .ho-opt--c4 { --x: 270; --y: 238; --w: 66; } .ho-app[data-smoke="any"] .ho-opt--s0, .ho-app[data-smoke="ns"] .ho-opt--s2, .ho-app[data-cover="any"] .ho-opt--c0, .ho-app[data-cover="50"] .ho-opt--c1, .ho-app[data-cover="100"] .ho-opt--c2 { color: #FFFFFF; } .ho-app[data-smoke="any"] .ho-opt--s0::before, .ho-app[data-smoke="ns"] .ho-opt--s2::before, .ho-app[data-cover="any"] .ho-opt--c0::before, .ho-app[data-cover="50"] .ho-opt--c1::before, .ho-app[data-cover="100"] .ho-opt--c2::before { opacity: 1; } /* Over-50s cover runs Any, £5k+, £10k+, £20k+ (home.js relabels the chips): no fourth tier. */ .ho-app[data-form="b"] .ho-opt--c4 { opacity: 0; } .ho-fm__bid, .ho-fm__lim { --y: 306; --w: 112; --h: 38; justify-content: flex-start; } .ho-fm__lim { --x: 200; } .ho-fm__pound { margin-right: calc(5 * var(--u)); font-size: calc(15 * var(--u)); color: #5B6787; } .ho-fm__bv, .ho-fm__lv { position: relative; z-index: 0; font-size: calc(18 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; } /* The limit's "£" follows its value in the markup (so it can hide while the field is empty) but shows first. */ .ho-fm__lim .ho-fm__pound { order: -1; } .ho-fm__lv:empty + .ho-fm__pound { display: none; } .ho-fm__lim .ho-in__ph { font-size: calc(13.5 * var(--u)); } .ho-fm__bv::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--u)); right: calc(-1 * var(--u)); top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); border-radius: calc(2 * var(--u)); background: #CFE0FF; opacity: 0; } .ho-app[data-sel="1"] .ho-fm__bv::before { opacity: 1; } .ho-fm__flash { position: absolute; inset: 0; border-radius: inherit; background: #E2EBFF; opacity: 0; } .ho-fm__bid.is-flash .ho-fm__flash { animation: hoTint .6s ease-out both; } .ho-fm__help { --x: 16; --y: 350; --w: 176; --h: 30; display: flex; align-items: flex-start; font-size: calc(12 * var(--u)); line-height: calc(15 * var(--u)); color: #5B6787; white-space: normal; } /* Estimated leads (Google Ads style): the range rolls as criteria, bid and limit change, a line says when the daily limit caps it, and the status box offers a raise with Apply. */ .ho-fm__est { --x: 612; --y: 78; --w: 340; --h: 196; } .ho-fm__est .ho-eyebrow, .ho-fm__sum .ho-eyebrow { --x: 18; --y: 16; --w: 300; --h: 14; } .ho-fm__fig { --x: 18; --y: 36; --w: 300; --h: 32; --rl: 32; --ri: var(--esti); font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ho-fm__per { --x: 18; --y: 72; --w: 304; --h: 16; font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); color: #5B6787; } .ho-fm__note { --x: 18; --y: 92; --w: 304; --h: 16; display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); color: #8A5A14; opacity: 0; transition: opacity .25s ease; } .ho-fm__note .ho-buying__dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); } .ho-app[data-lim="1"] .ho-fm__note { opacity: 1; } .ho-stt { --x: 18; --y: 116; --w: 304; --h: 64; } .ho-stt__v { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(9 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; line-height: calc(17 * var(--u)); white-space: normal; opacity: 0; transform: scale(.98); transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1); } .ho-app .ho-stt__v .ho-i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); } .ho-stt__v--ok { background: #E6F6EF; color: #1F6E55; } .ho-stt__v--a { padding-right: calc(82 * var(--u)); background: #EAF2FF; color: #0B1B3F; } .ho-app[data-rec="ok"] .ho-stt__v--ok, .ho-app[data-rec="raiseA"] .ho-stt__v--a { opacity: 1; transform: none; } .ho-stt__apply { --x: 232; --y: 18; --w: 64; --h: 28; font-size: calc(12.5 * var(--u)); opacity: 0; } .ho-app:not([data-rec="ok"]) .ho-stt__apply { opacity: 1; } .ho-fm__sum { --x: 612; --y: 288; --w: 340; --h: 248; border-radius: calc(12 * var(--u)); background: #FFFFFF; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(11, 27, 63, .10); } .ho-fm__sp { --x: 18; --y: 36; --w: 304; --h: 22; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 700; letter-spacing: -0.01em; overflow: hidden; } .ho-fm__ls { --x: 18; --y: 64; --w: 304; --h: 125; display: flex; flex-direction: column; font-size: calc(13 * var(--u)); } .ho-fm__ls > * { display: block; height: calc(25 * var(--u)); line-height: calc(24 * var(--u)); border-top: 1px solid #E8EDF6; box-sizing: border-box; overflow: hidden; } .ho-fm__go { --x: 18; --y: 198; --w: 304; --h: 36; font-size: calc(13.5 * var(--u)); } /* Overlays */ /* Toast: centred under the main content, over the campaigns list only. */ .ho-toast { --x: 446; --y: 506; --w: 272; --h: 32; z-index: 3; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); border-radius: 999px; background: #0B1B3F; color: #FFFFFF; font-size: calc(12.5 * var(--u)); font-weight: 600; box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) calc(-8 * var(--u)) rgba(11, 27, 63, .5); opacity: 0; transform: translateY(calc(10 * var(--u))); transition: opacity .26s ease, transform .26s cubic-bezier(.2, .8, .2, 1); } .ho-app .ho-toast .ho-i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); } .ho-app[data-toast="1"] .ho-toast { opacity: 1; transform: none; } .ho-app:not([data-scr="campaigns"]) .ho-toast { opacity: 0; transform: translateY(calc(10 * var(--u))); } /* Lead drawer: the full enquiry, as the dashboard's lead drawer shows it (contact, then the enquiry with its site, source and consent time), with Call (which becomes "Calling…") and Email. A right panel over a light scrim; a bottom sheet on the compact canvas. */ .ho-scrim { position: absolute; inset: 0; z-index: 3; background: rgba(11, 27, 63, .28); opacity: 0; transition: opacity .3s ease; } .ho-app[data-drw="1"] .ho-scrim { opacity: 1; } .ho-drw { --x: 596; --y: 0; --w: 380; --h: 560; z-index: 4; background: #FFFFFF; box-shadow: calc(-24 * var(--u)) 0 calc(60 * var(--u)) calc(-30 * var(--u)) rgba(11, 27, 63, .45); transform: translateX(calc(420 * var(--u))); transition: transform .34s cubic-bezier(.2, .8, .2, 1); } .ho-app[data-drw="1"] .ho-drw { transform: none; } .ho-drw__ref { --x: 22; --y: 20; --w: 220; --h: 16; font-family: var(--pc-mono); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #5B6787; } .ho-drw__x { --x: 334; --y: 14; --w: 28; --h: 28; display: flex; align-items: center; justify-content: center; color: #5B6787; } .ho-app .ho-drw__x .ho-i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); } .ho-drw__name { --x: 22; --y: 44; --w: 336; --h: 28; font-size: calc(21 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 700; letter-spacing: -0.02em; } .ho-drw__sub { --x: 22; --y: 74; --w: 336; --h: 18; font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: #5B6787; } .ho-call, .ho-drw__mail { --x: 22; --y: 102; --w: 164; --h: 36; border-radius: calc(9 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; } .ho-call { background: #245CFF; color: #FFFFFF; } .ho-drw__mail { --x: 194; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); box-shadow: inset 0 0 0 1px #DCE3EF; } .ho-call::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #1F7A5E; opacity: 0; transition: opacity .18s ease; } .ho-call__a, .ho-call__b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); transition: opacity .18s ease; } .ho-call__b { opacity: 0; } .ho-app .ho-call .ho-i, .ho-app .ho-drw__mail .ho-i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); } .ho-app[data-call="1"] .ho-call::before, .ho-app[data-call="1"] .ho-call__b { opacity: 1; } .ho-app[data-call="1"] .ho-call__a { opacity: 0; } .ho-drw .ho-eyebrow { --x: 22; --y: 156; --w: 336; --h: 14; } .ho-drw .ho-drw__e2 { --y: 268; } .ho-dl { --x: 22; --y: 174; --w: 336; --h: 78; display: flex; flex-direction: column; } .ho-drw__dl2 { --y: 286; --h: 234; } .ho-dl__r { display: grid; grid-template-columns: calc(100 * var(--u)) minmax(0, 1fr); align-items: center; height: calc(26 * var(--u)); border-bottom: 1px solid #EDF1F7; font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); } .ho-dl__r > span { color: #5B6787; } .ho-dl__r > b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } /* Cursor: x and y glide on separate layers with different easings, so the path curves like a hand's. home.js sets --ho-mv (the move's duration) and data-cur; the press (.is-down) and the ripple (.is-tapA / .is-tapB, alternated so each click restarts it) are classes on .ho-cur. Wide: an arrow whose tip is the hotspot. Compact: a touch dot centred on it. */ .ho-cur { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; opacity: 0; transition: opacity .2s ease; } .ho-app.is-live .ho-cur { opacity: 1; } .ho-app.is-live[data-curhide="1"] .ho-cur { opacity: 0; transition-duration: .16s; } .ho-cur__x, .ho-cur__y { position: absolute; left: 0; top: 0; } .ho-cur__x { transform: translateX(calc(var(--cx) * var(--u))); transition: transform var(--ho-mv, 0ms) cubic-bezier(.45, 0, .2, 1); } .ho-cur__y { transform: translateY(calc(var(--cy) * var(--u))); transition: transform var(--ho-mv, 0ms) cubic-bezier(.3, .75, .25, 1); } .ho-cur__ptr { position: absolute; left: calc(-4.583 * var(--u)); top: calc(-2.75 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; overflow: visible; transform-origin: calc(4.583 * var(--u)) calc(2.75 * var(--u)); filter: drop-shadow(0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(11, 27, 63, .28)); transition: transform .14s cubic-bezier(.2, .8, .2, 1); } .ho-cur__dot { position: absolute; left: calc(-13 * var(--u)); top: calc(-13 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); display: none; border-radius: 50%; background: rgba(36, 92, 255, .18); /* A white outer ring, so the dot shows on the blue buttons too. */ box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(36, 92, 255, .55), 0 0 0 calc(2 * var(--u)) #fff; transition: transform .14s cubic-bezier(.2, .8, .2, 1); } .ho-cur.is-down .ho-cur__ptr, .ho-cur.is-down .ho-cur__dot { transform: scale(.86); transition-duration: .09s; } .ho-cur__rip { position: absolute; left: calc(-18 * var(--u)); top: calc(-18 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: rgba(36, 92, 255, .16); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(36, 92, 255, .5); opacity: 0; } .ho-cur.is-tapA .ho-cur__rip { animation: hoTapA .42s ease-out; } .ho-cur.is-tapB .ho-cur__rip { animation: hoTapB .42s ease-out; } @keyframes hoTapA { from { opacity: .45; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } } @keyframes hoTapB { from { opacity: .45; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } } /* The hotspot itself (0 x 0), for alignment checks. */ .ho-cur__tip { position: absolute; left: 0; top: 0; width: 0; height: 0; } /* Wide and mid canvases drawn below 1:1 (780-1079px viewports, 0.89-1.12px per u): text under 12.5 design px is set a little larger, so it stays at about 11px or more. Every box keeps its size, so nothing moves. */ @media (min-width: 780px) and (max-width: 1079.98px) { .ho-eyebrow { font-size: calc(12 * var(--u)); } .ho-buying, .ho-kpi__l, .ho-ld__d, .ho-ld__w, .ho-lbl, .ho-fm__help, .ho-empty, .ho-tag, .ho-cp__note, .ho-fm__note, .ho-drw__sub, .ho-ov__note, .ho-side__bl { font-size: calc(12.5 * var(--u)); } .ho-badge, .ho-drw__ref, .ho-ld > .ho-st, .ho-side__add { font-size: calc(12 * var(--u)); } .ho-lt__h span { font-size: calc(11 * var(--u)); } .ho-ff { --x: 838; --w: 114; font-size: calc(11.5 * var(--u)); } } /* Mid canvas (780-959px viewports): 772 x 640 design px. The wide screens, moved 196 left and 78 down under the navy top bar (all four tabs); their waypoints and camera shots move with them. The drawer is an overlay: a right panel the app's full height. */ @media (min-width: 780px) and (max-width: 959.98px) { .ho-app { --u: calc(100cqw / 772); --c0x: 444; --c0y: 508; --t1x: 224; --t1y: 62; --t2x: 386; --t2y: 359; --t3x: 104; --t3y: 207; --t4x: 190; --t4y: 342; --t5x: 175; --t5y: 410; --t6x: 88; --t6y: 481; --t7x: 698; --t7y: 304; --t12x: 272; --t12y: 481; --t8x: 586; --t8y: 582; --t9x: 691; --t9y: 119; --c1x: 504; --c1y: 458; --t10x: 52; --t10y: 62; --c2x: 234; --c2y: 548; --t11x: 134; --t11y: 341; --t13x: 496; --t13y: 120; --t14x: 689; --t14y: 114; --cw: 772; --ch: 640; --k-t1: 200 150 1.7; --k-t2: 386 330 1.7; --k-form: 208 300 1.7; --k-fields: 208 458 1.7; --k-t7: 586 278 1.7; --k-t8: 586 458 1.6; --k-t9: 584 208 1.7; --k-t10: 200 150 1.7; --k-t11: 224 328 1.7; --k-drw: 590 180 1.8; --k-t14: 590 200 1.7; width: calc(772 * var(--u)); height: calc(640 * var(--u)); } .ho-app__top { --w: 772; } .ho-top__bal.ho-roll { --x: 600; } .ho-top__av { --x: 726; } .ho-tab .ho-badge { --y: 8; --w: 18; --h: 16; font-size: calc(11 * var(--u)); } .ho-scr { inset: auto; left: calc(-196 * var(--u)); top: calc(78 * var(--u)); width: calc(976 * var(--u)); height: calc(560 * var(--u)); } .ho-ff { --x: 642; --y: 102; } /* an overlay, not in a screen: where the moved screens put it */ .ho-app[data-scr="overview"] .ho-ff { --y: 248; } .ho-toast { --x: 250; --y: 584; } .ho-drw { --x: 392; --h: 640; } } /* Compact canvas (under 780px): 360 x 640 design px, at most 1.2px each. .ho-dash narrows to that width (plus its own and the frame's padding), so the card always fits the app. */ @media (max-width: 779.98px) { .ho-dash { max-width: calc(432px + 2 * clamp(8px, 2.4vw, 28px) + 2 * clamp(12px, 3vw, 24px)); } .ho-app { --u: min(calc(100cqw / 360), 1.2px); --c0x: 290; --c0y: 600; --t1x: 224; --t1y: 62; --t2x: 180; --t2y: 348; --t3x: 100; --t3y: 177; --t4x: 165; --t4y: 281; --t5x: 148; --t5y: 333; --t6x: 66; --t6y: 385; --t7x: 304; --t7y: 559; --t12x: 66; --t12y: 437; --t8x: 180; --t8y: 611; --t9x: 285; --t9y: 114; --c1x: 250; --c1y: 470; --t10x: 52; --t10y: 62; --c2x: 300; --c2y: 560; --t11x: 100; --t11y: 266; --t13x: 96; --t13y: 239; --t14x: 282; --t14y: 112; --rh: 62; --ban: 62; --cw: 360; --ch: 640; --k-t1: 190 150 1.6; --k-t2: 180 300 1.6; --k-form: 112 260 1.6; --k-fields: 112 400 1.6; --k-t7: 176 520 1.1; /* the bid, the tip and Apply, all whole (one column) */ --k-t8: 180 500 1.08; /* the bid, the limit and the full-width Start buying leads */ --k-t9: 250 200 1.6; --k-t10: 120 150 1.6; --k-t11: 120 290 1.5; --k-drw: 112 300 1.6; --k-t14: 228 220 1.5; width: calc(360 * var(--u)); height: calc(640 * var(--u)); margin-inline: auto; } .ho-h1 { font-size: calc(19 * var(--u)); line-height: calc(24 * var(--u)); } .ho-cur__ptr { display: none; } .ho-cur__dot { display: block; } /* Overview, as the dashboard on a phone: the title with the buying switch, the three figures in one card, then the leads as rows (name and status; product, cover, age and smoking; when). */ .ho-ov__head { --x: 16; --y: 100; --w: 120; --h: 24; } .ho-seg { --x: 112; --y: 96; --w: 232; --h: 32; } .ho-seg__st { left: calc(3 * var(--u)); top: calc(3 * var(--u)); width: calc(108 * var(--u)); height: calc(26 * var(--u)); } .ho-seg .ho-buying { font-size: calc(11.5 * var(--u)); } .ho-pz { --x: 112; --y: 3; --w: 117; --h: 26; font-size: calc(11.5 * var(--u)); } .ho-ban { --x: 16; --y: 136; --w: 328; --h: 50; align-items: center; padding: 0 calc(12 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: calc(15 * var(--u)); white-space: normal; } .ho-kpis { --x: 16; --y: 140; --w: 328; --h: 62; gap: 0; overflow: hidden; border-radius: calc(10 * var(--u)); background: #FFFFFF; box-shadow: 0 0 0 1px #E2E6EE; } .ho-kpi { padding: calc(10 * var(--u)) calc(10 * var(--u)) 0; border-radius: 0; background: none; box-shadow: none; } .ho-kpi + .ho-kpi { box-shadow: inset 1px 0 0 #E2E6EE; } .ho-kpi__l { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); } .ho-kpi__v.ho-roll { --rl: 22; margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); } .ho-ov__lh { --x: 16; --y: 216; --w: 200; --h: 20; font-size: calc(15 * var(--u)); } .ho-ov__leads { --x: 16; --y: 244; --w: 328; --h: 186; border-radius: calc(10 * var(--u)); } .ho-ov__leads .ho-empty { left: calc(12 * var(--u)); right: calc(12 * var(--u)); top: 0; bottom: 0; font-size: calc(11.5 * var(--u)); } .ho-empty b { font-size: calc(13 * var(--u)); } .ho-ov__wait { top: calc(83 * var(--u)); font-size: calc(12 * var(--u)); } .ho-lds { top: 0; } .ho-ld > * { height: calc(20 * var(--u)); line-height: calc(20 * var(--u)); } .ho-ld__n { left: calc(12 * var(--u)); top: calc(10 * var(--u)); width: calc(186 * var(--u)); font-size: calc(13.5 * var(--u)); } .ho-ld__m { left: calc(12 * var(--u)); top: calc(36 * var(--u)); width: calc(250 * var(--u)); height: calc(16 * var(--u)); line-height: calc(16 * var(--u)); font-size: calc(11.5 * var(--u)); color: #4A5675; } .ho-ld__w { left: auto; right: calc(12 * var(--u)); top: calc(36 * var(--u)); width: calc(52 * var(--u)); height: calc(16 * var(--u)); line-height: calc(16 * var(--u)); font-size: calc(11.5 * var(--u)); color: #4A5675; text-align: right; } .ho-ld__p { display: none; } .ho-ld > .ho-st { left: auto; right: calc(10 * var(--u)); top: calc(7 * var(--u)); width: calc(112 * var(--u)); height: calc(25 * var(--u)); font-size: calc(11 * var(--u)); } .ho-ov__note { --x: 16; --y: 444; --w: 328; --h: 32; font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u)); white-space: normal; } .ho-tag { height: calc(20 * var(--u)); font-size: calc(11 * var(--u)); padding: 0 calc(7 * var(--u)) 0 calc(5 * var(--u)); } /* Campaigns: row cards (criteria; price and limit; estimate; tag). */ .ho-cp__title { --x: 16; --y: 102; --w: 200; --h: 24; } .ho-cp__new { --x: 226; --y: 98; --w: 118; --h: 32; font-size: calc(12 * var(--u)); } .ho-cp__sub { --x: 16; --y: 134; --w: 328; --h: 32; font-size: calc(11.5 * var(--u)); white-space: normal; } .ho-cp__empty { --x: 16; --y: 180; --w: 328; --h: 240; border-radius: calc(12 * var(--u)); } .ho-cp__empty > b { top: calc(64 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); } .ho-cp__empty > span:not(.ho-btn) { top: calc(92 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); } .ho-cp__create { --x: 99; --y: 149; --w: 128; --h: 36; } .ho-cpr { --x: 16; --y: 176; --w: 328; --h: 118; border: 1px solid #E3E8F2; border-radius: calc(12 * var(--u)); background: #FFFFFF; } .ho-cpr--b { --y: 302; } .ho-cpr--b::before { display: none; } .ho-cpr::after, .ho-cpr--b::after { inset: 0; border-radius: calc(11 * var(--u)); } .ho-cpr__c1 { --x: 13; --y: 11; --w: 300; --h: 20; flex-direction: row; align-items: center; justify-content: space-between; } .ho-cpr__c1 b { font-size: calc(14 * var(--u)); } .ho-cpr__st { font-size: calc(11.5 * var(--u)); } .ho-cpr__m, .ho-cpr__m2, .ho-cpr__m3 { --x: 13; --y: 35; --w: 300; --h: 16; font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u)); overflow: hidden; text-overflow: ellipsis; } .ho-cpr__m { color: #5B6787; } .ho-cpr__m2 { --y: 53; } .ho-cpr__m3 { --y: 71; font-weight: 600; } .ho-cpr__tag { --x: 13; --y: 92; --h: 20; } .ho-cp__note { --x: 16; --y: 430; --w: 328; --h: 34; align-items: flex-start; font-size: calc(11 * var(--u)); white-space: normal; } .ho-app .ho-cp__note .ho-i { margin-top: calc(2 * var(--u)); } /* Create campaign: fields on the page (the daily limit under the price), a bottom sheet with the estimate. */ .ho-fm__back { --x: 16; --y: 96; --w: 200; --h: 14; font-size: calc(12 * var(--u)); } .ho-fm__title { --x: 16; --y: 112; --w: 220; --h: 24; } .ho-ff { --x: 248; --y: 98; --w: 96; --h: 18; font-size: calc(9.5 * var(--u)); } .ho-app[data-scr="overview"] .ho-ff { --y: 217; } .ho-fm__card { --x: 0; --y: 0; --w: 360; --h: 640; border-radius: 0; background: none; box-shadow: none; } .ho-fm__card::after { display: none; } .ho-lbl { --x: 16; --y: 146; --w: 328; --h: 14; font-size: calc(11.5 * var(--u)); } .ho-fm__l2 { --y: 198; --w: 196; } .ho-fm__l3 { --x: 222; --y: 198; --w: 122; } .ho-fm__l4 { --y: 250; } .ho-fm__l5 { --y: 302; } .ho-fm__l6 { --y: 354; --w: 200; } .ho-fm__l7 { --x: 16; --y: 406; --w: 200; } .ho-in { --x: 16; --y: 162; --w: 328; --h: 30; font-size: calc(13 * var(--u)); } .ho-fm__prod { --y: 214; --w: 196; } .ho-fm__age1 { --x: 222; --y: 214; --w: 44; } .ho-fm__age2 { --x: 300; --y: 214; --w: 44; } .ho-fm__to { --x: 266; --y: 214; --w: 34; --h: 30; font-size: calc(12 * var(--u)); } .ho-opt { --x: 16; --y: 266; --w: 38; --h: 30; font-size: calc(12 * var(--u)); } .ho-opt--s1 { --x: 60; --w: 58; } .ho-opt--s2 { --x: 124; --w: 82; } .ho-opt--c0 { --y: 318; } .ho-opt--c1 { --x: 60; --y: 318; --w: 52; } .ho-opt--c2 { --x: 118; --y: 318; --w: 60; } .ho-opt--c3 { --x: 184; --y: 318; --w: 60; } .ho-opt--c4 { --x: 250; --y: 318; --w: 60; } .ho-fm__bid, .ho-fm__lim { --x: 16; --y: 370; --w: 100; --h: 30; } .ho-fm__lim { --y: 422; } .ho-fm__bv, .ho-fm__lv { font-size: calc(16 * var(--u)); } .ho-fm__lim .ho-in__ph { font-size: calc(13 * var(--u)); } .ho-fm__help { --x: 128; --y: 370; --w: 216; --h: 30; align-items: center; font-size: calc(11.5 * var(--u)); } .ho-fm__sheet { --x: 0; --y: 458; --w: 360; --h: 182; z-index: 1; background: #FFFFFF; box-shadow: inset 0 1px 0 #E3E8F2, 0 calc(-10 * var(--u)) calc(24 * var(--u)) calc(-14 * var(--u)) rgba(11, 27, 63, .22); } .ho-fm__sheet .ho-eyebrow { --x: 16; --y: 12; --w: 328; --h: 13; font-size: calc(10.5 * var(--u)); } .ho-fm__fig2 { --x: 16; --y: 28; --w: 328; --h: 24; --rl: 24; --ri: var(--esti); font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ho-fm__sheet .ho-fm__note { --x: 16; --y: 55; --w: 328; --h: 14; font-size: calc(11.5 * var(--u)); line-height: calc(14 * var(--u)); } .ho-fm__sheet .ho-stt { --x: 16; --y: 74; --w: 328; --h: 54; } .ho-stt__v { gap: calc(9 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(16 * var(--u)); } .ho-stt__v--a { padding-right: calc(76 * var(--u)); } .ho-fm__sheet .ho-stt__apply { --x: 260; --y: 13; --w: 56; --h: 28; font-size: calc(12 * var(--u)); } .ho-fm__sheet .ho-fm__go { --x: 16; --y: 136; --w: 328; --h: 34; font-size: calc(13 * var(--u)); } .ho-toast { --x: 40; --y: 590; --w: 280; --h: 32; font-size: calc(12 * var(--u)); } /* Lead drawer: a bottom sheet. */ .ho-drw { --x: 0; --y: 136; --w: 360; --h: 504; border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; box-shadow: 0 calc(-12 * var(--u)) calc(36 * var(--u)) calc(-16 * var(--u)) rgba(11, 27, 63, .45); transform: translateY(calc(530 * var(--u))); } .ho-drw__ref { --x: 16; --y: 16; --w: 220; --h: 14; font-size: calc(11.5 * var(--u)); line-height: calc(14 * var(--u)); } .ho-drw__x { --x: 318; --y: 9; } .ho-drw__name { --x: 16; --y: 36; --w: 328; --h: 24; font-size: calc(19 * var(--u)); line-height: calc(24 * var(--u)); } .ho-drw__sub { --x: 16; --y: 62; --w: 328; --h: 16; font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u)); } .ho-call, .ho-drw__mail { --x: 16; --y: 86; --w: 160; --h: 34; font-size: calc(13 * var(--u)); } .ho-drw__mail { --x: 184; } .ho-drw .ho-eyebrow { --x: 16; --y: 132; --w: 328; --h: 12; font-size: calc(10.5 * var(--u)); line-height: calc(12 * var(--u)); } .ho-drw .ho-drw__e2 { --y: 228; } .ho-dl { --x: 16; --y: 146; --w: 328; --h: 72; } .ho-drw__dl2 { --y: 242; --h: 216; } .ho-dl__r { grid-template-columns: calc(92 * var(--u)) minmax(0, 1fr); height: calc(24 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(15 * var(--u)); } } /* The data-lead marketplace (2 Nov 2026): the demo's Available leads screen, the buy panel and the bought lead. These rules come after the canvases above, so each one restates its mid and compact values below. data-bought (0, 1) rolls the three figures and both balances, pops the My leads badge and turns the newest row's "Buy for £78" into "Bought"; data-drw="buy" slides the drawer in with the buy panel over it, data-drw="1" shows the bought lead. */ .ho-app { --boughti: 0; --t11x: 874; --t11y: 263; --k-t11: 700 250 1.6; --k-drw: 760 185 1.8; } .ho-app[data-bought="1"] { --boughti: 1; } .ho-kpi__v.ho-roll, .ho-side__bv.ho-roll, .ho-top__bal.ho-roll { --ri: var(--boughti); } .ho-app:not([data-bought="1"]) .ho-badge { opacity: 0; transform: scale(.5); } .ho-app[data-bought="1"] .ho-badge { opacity: 1; transform: none; } .ho-badge { line-height: calc(18 * var(--u)); } .ho-tab .ho-badge { line-height: calc(16 * var(--u)); } .ho-tab--ov { --w: 84; } .ho-tab--ld { --x: 98; --w: 82; } .ho-tab--cp { --x: 184; --w: 88; } /* Rows: product, cover and age bands, when it was sent, then the Buy button. No website on a lead still for sale (founder, 4 Nov 2026: "remove source of lead before its bought"); it shows only in the bought lead's drawer. Heads: PRODUCT, COVER / AGE, SUBMITTED, (empty), PRICE. */ .ho-lt__h span:nth-child(2) { left: calc(180 * var(--u)); } .ho-lt__h span:nth-child(3) { left: calc(412 * var(--u)); } .ho-lt__h span:nth-child(5) { left: calc(600 * var(--u)); } .ho-ld__n { width: calc(152 * var(--u)); } .ho-ld__d { left: calc(180 * var(--u)); width: calc(220 * var(--u)); } .ho-ld__w { left: calc(412 * var(--u)); width: calc(176 * var(--u)); } .ho-ld > .ho-st--buy { justify-content: center; padding: 0; background: #245CFF; box-shadow: none; color: #FFFFFF; transition: background-color .2s ease, transform .12s ease; } .ho-st--buy > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease; } .ho-st__b { opacity: 0; } .ho-app[data-bought="1"] .ho-ld--3 > .ho-st--buy { background: #E6F6EF; color: #1F6E55; } .ho-app[data-bought="1"] .ho-ld--3 .ho-st__a { opacity: 0; } .ho-app[data-bought="1"] .ho-ld--3 .ho-st__b { opacity: 1; } .ho-app .ho-st--buy.is-press { transform: scale(.96); } /* The toast shows on this screen, clear of the drawer. */ .ho-app:not([data-scr="campaigns"]) .ho-toast { opacity: 0; transform: translateY(calc(10 * var(--u))); } .ho-app[data-scr="overview"][data-toast="1"] .ho-toast { opacity: 1; transform: none; } .ho-toast { --x: 212; --y: 506; } /* The drawer: the buy panel, then the lead. */ .ho-app[data-drw="buy"] .ho-drw { transform: none; } .ho-app[data-drw="buy"] .ho-scrim { opacity: 1; } .ho-app[data-drw="buy"] .ho-ld--3::after { animation: none; opacity: 1; } .ho-app :where(.ho-buy__t, .ho-buy__sub, .ho-buy__go, .ho-buy__hold, .ho-drw__open) { position: absolute; box-sizing: border-box; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); } .ho-buy { position: absolute; inset: 0; z-index: 2; background: #FFFFFF; opacity: 0; transition: opacity .2s ease; } .ho-app[data-drw="buy"] .ho-buy { opacity: 1; } .ho-buy__t { --x: 22; --y: 44; --w: 336; --h: 28; font-size: calc(21 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 700; letter-spacing: -0.02em; } .ho-buy__sub { --x: 22; --y: 74; --w: 336; --h: 18; overflow: hidden; text-overflow: ellipsis; font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: #5B6787; } .ho-buy__go { --x: 22; --y: 102; --w: 336; --h: 36; font-size: calc(13.5 * var(--u)); transition: transform .12s ease; } .ho-app .ho-buy__go.is-press { transform: scale(.98); } .ho-drw .ho-buy__e { --y: 156; } .ho-drw .ho-buy__dl { --y: 174; --h: 78; } .ho-buy__dl .ho-dl__r { grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr); } .ho-buy__dl .ho-dl__r > b { text-align: right; font-variant-numeric: tabular-nums; } .ho-buy__hold { --x: 22; --y: 264; --w: 336; --h: 36; white-space: normal; font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: #5B6787; } .ho-drw__open { --x: 22; --y: 264; --w: 336; --h: 50; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u)); background: #EEF4FF; } .ho-drw__ol { display: block; font-size: calc(10.5 * var(--u)); line-height: calc(14 * var(--u)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #4A5675; } .ho-drw__open q { display: block; overflow: hidden; text-overflow: ellipsis; font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 600; quotes: "\201C" "\201D"; } .ho-drw .ho-drw__e2 { --y: 330; } .ho-drw__dl2 { --y: 348; --h: 156; } @media (min-width: 780px) and (max-width: 959.98px) { .ho-app { --t11x: 678; --t11y: 341; --k-t11: 560 328 1.7; --k-drw: 590 180 1.8; } .ho-toast { --x: 40; --y: 584; } } @media (max-width: 779.98px) { .ho-app { --t11x: 278; --t11y: 264; --k-t11: 200 290 1.5; --k-drw: 180 320 1.1; } .ho-tab--ov { --x: 10; --w: 84; } .ho-tab--ld { --x: 98; --w: 82; } .ho-tab--cp { --x: 184; --w: 88; } .ho-ld__n { left: calc(12 * var(--u)); width: calc(186 * var(--u)); } .ho-toast { --x: 40; --y: 96; --w: 280; --h: 32; } .ho-buy__t { --x: 16; --y: 36; --w: 328; --h: 24; font-size: calc(19 * var(--u)); line-height: calc(24 * var(--u)); } .ho-buy__sub { --x: 16; --y: 62; --w: 328; --h: 16; font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u)); } .ho-buy__go { --x: 16; --y: 86; --w: 328; --h: 34; font-size: calc(13 * var(--u)); } .ho-drw .ho-buy__e { --y: 132; } .ho-drw .ho-buy__dl { --y: 146; --h: 72; } .ho-buy__dl .ho-dl__r { grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr); } .ho-buy__hold { --x: 16; --y: 228; --w: 328; --h: 34; font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u)); } .ho-drw__open { --x: 16; --y: 226; --w: 328; --h: 48; padding: calc(7 * var(--u)) calc(10 * var(--u)); } .ho-drw__open q { font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); } .ho-drw .ho-drw__e2 { --y: 288; } .ho-drw__dl2 { --y: 302; --h: 144; } } /* Browsers without container query units (Safari 15 and older): the same canvases, with the card's width worked out from the viewport. These follow the paddings of .ho-dash (clamp(12px, 3vw, 24px)) and .ho-dash__frame (clamp(8px, 2.4vw, 28px)): change them together. */ @supports not (container-type: inline-size) { .ho-app { --u: min(1px, calc((95.2vw - 48px) / 976)); margin-inline: auto; } @media (min-width: 780px) and (max-width: 959.98px) { .ho-app { --u: calc(max(89.2vw, 95.2vw - 48px) / 772); } } @media (max-width: 779.98px) { .ho-app { --u: min(1.2px, calc(min(89.2vw, 94vw - 16px, 95.2vw - 24px, 100vw - 40px) / 360)); } } } /* Controls on the demo (outside the app's role=img; founder, 10 Oct 2026: no step labels or progress lines under it): Pause / Play and Replay as small round buttons, centred on the frame's bottom edge at every width (from 13 Oct 2026 also on wide screens: the navy rail's foot now holds the balance and the account button, and the camera's zoom moves the whole app under the card's corners), outside the zoomed stage, so they never cover the app. Without JS they stay hidden. */ .ho-dash__frame { margin-bottom: 20px; } .ho-ctl { position: absolute; left: 50%; bottom: -20px; z-index: 5; display: flex; transform: translateX(-50%); } .ho-ctl__btns { flex: none; display: flex; gap: 8px; } .ho-ctl__btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1px var(--pc-border-4), 0 6px 14px -6px rgba(11, 27, 63, .45); color: var(--pc-navy); cursor: pointer; transition: box-shadow .2s ease, background-color .2s ease; } .ho-ctl__btn:hover { background: #FFFFFF; box-shadow: 0 0 0 1px var(--pc-navy), 0 6px 14px -6px rgba(11, 27, 63, .45); } .ho-ctl__btn:focus-visible { outline: 3px solid var(--pc-blue); outline-offset: 2px; } .ho-ctl__i { display: block; } .ho-ctl__btn[aria-pressed="false"] .ho-ctl__i--play, .ho-ctl__btn[aria-pressed="true"] .ho-ctl__i--pause { display: none; } @media (max-width: 959.98px) { .ho-ctl__btns { gap: 6px; } } /* ------------------------------------------------------------ 3. Trust strip */ /* Four items with blue line icons, split by hairlines; two columns below 900px. It sits directly under the dashboard demo (site/index.html section 4; founder, 26 Oct 2026: "move this info under the dashboard illustrative video"), outside the hero, so it brings the sections' 24px side padding itself: the same 1032px measure as the demo frame, as it had in the hero. The space above it is the hero gap (hero, demo, trust strip: design/README.md "Vertical rhythm"), counted from the bottom of the demo's Pause and Replay buttons. It is padding, not margin, so it adds to the 20px the frame keeps below it for those buttons instead of collapsing into it. */ .ho-trust { max-width: var(--pc-content); margin: 0 auto; padding: var(--pc-hero-gap) 24px 0; box-sizing: border-box; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ho-trust li { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 12px; box-sizing: border-box; border-left: 1px solid var(--pc-border); font-size: 15px; font-weight: 500; color: var(--ho-ink-2); text-align: center; } .ho-trust li:first-child { border-left: 0; } .ho-trust svg { flex: none; color: var(--pc-blue); } .ho-trust__fca, .ho-trust__fca:hover, .ho-trust__a, .ho-trust__a:hover { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ho-ink-2); text-decoration: none; } /* "Credit for invalid enquiries" jumps to the lead credit rules (#lead-credits). */ .ho-trust__u { text-decoration: underline; text-decoration-color: var(--ho-underline); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; } .ho-trust__a:hover .ho-trust__u { color: var(--pc-navy); text-decoration-color: var(--pc-blue); } .ho-trust__t { display: inline; } .ho-trust__frn { margin-left: 8px; font-size: 13px; color: var(--pc-muted); text-decoration: underline; text-decoration-color: var(--ho-underline); text-underline-offset: 3px; white-space: nowrap; transition: color .2s ease, text-decoration-color .2s ease; } .ho-trust__fca:hover .ho-trust__frn { color: var(--pc-navy); text-decoration-color: var(--pc-blue); } /* From 900px: four columns are too narrow for "Run by an FCA authorised firm" and "PJG Financial Limited · FRN 919697" on one line, so the second line sits under it (as it does in the two-column layout). */ @media (min-width: 900px) { .ho-trust__t, .ho-trust__u { text-align: left; } .ho-trust__frn { display: block; margin: 2px 0 0; line-height: 1.2; } } @media (max-width: 899.98px) { .ho-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; } .ho-trust li { justify-content: flex-start; align-items: flex-start; border-left: 0; padding: 10px 0; text-align: left; font-size: 14.5px; line-height: 1.35; } .ho-trust li > svg, .ho-trust__fca > svg, .ho-trust__a > svg { margin-top: 1px; } .ho-trust__fca, .ho-trust__fca:hover, .ho-trust__a, .ho-trust__a:hover { align-items: flex-start; } /* white-space: normal: in a two-column phone layout "PJG Financial Limited · FRN 919697" is wider than its column, so on one line it ran into the next item. It wraps instead. */ .ho-trust__frn { display: block; margin: 2px 0 0; white-space: normal; text-wrap: balance; } } /* ----------------------------------------------------------- 4. How it works */ /* A scroll story. Story layout (screens 920px wide and 600px tall and up, so the pinned 452px window always fits, with motion allowed; chosen by CSS alone, so it never depends on the tab being visible at load or on home.js): heading, intro and the three steps in the left column; one sticky app window on the right (.ho-win). Without home.js the window shows view 1 and every step is at full strength. home.js (section 2) adds .is-live, which dims the steps that are not active (opacity only, each line kept at 4.5:1 or better), then .is-anim, which turns the transitions on; it sets .is-active on the step, tab and view as each step crosses the window's middle. Static layout (narrow or short screens, reduced motion, print): no window; every step carries its own mock (.ho-how__mock) inline, side by side from 640px and stacked below. The views are the same components in both places and the markup is their static final state. */ .ho-how { --ho-win-h: 452px; /* Story padding above and below each step. The active step changes halfway between two steps; the last step's bottom padding lets the window go just as that step is centred on it (half the window less half a three-line step). */ --ho-step-pad: clamp(56px, 8vh, 80px); --ho-step-end: calc(var(--ho-win-h) / 2 - 96px); } .ho-how__steps { margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(40px, 6vw, 72px); } /* The heading keeps its two sentences apart: "Choose your customers." may wrap, "Choose your price." starts its own line. */ .ho-how__h2 { max-width: 11.5em; } .ho-how__h2 span { display: block; } .ho-how__step { display: grid; gap: 18px; min-width: 0; } .ho-how__n { display: block; font-size: clamp(40px, 4.6vw, 60px); line-height: .86; letter-spacing: -0.055em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pc-blue); } .ho-how__h { margin: 14px 0 0; font-size: clamp(23px, 2.3vw, 28px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; } .ho-how__p { margin: 8px 0 0; font-size: 17px; line-height: 1.6; color: var(--pc-muted); text-wrap: pretty; } .ho-how__mock { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; border-radius: 18px; background: var(--pc-panel); } @media (min-width: 640px) { .ho-how__step { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 72px); } .ho-how__h { margin-top: 18px; } .ho-how__p { margin-top: 10px; max-width: 36ch; } /* two even lines per step */ .ho-how__mock { min-height: 380px; padding: clamp(18px, 4.5vw, 40px); border-radius: 20px; } } /* Static layout on a wide screen: the intro sits right, level with the heading's last line, over the mock column, so the heading never leaves an empty half beside it. */ @media (min-width: 920px) { .ho-how__head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; column-gap: clamp(28px, 5vw, 72px); } .ho-how__head .pc-intro { margin: 0; padding-bottom: 4px; } } .ho-win { display: none; } /* Story layout. Scoped to screen so print gets the static layout. The height guard keeps a short landscape screen (a large phone turned sideways) off it: the window pins at 88px or lower, so anything under about 560px tall would cut off its foot. */ @media screen and (min-width: 920px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) { .ho-how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); column-gap: clamp(48px, 6vw, 88px); align-items: start; } .ho-how__head { display: block; } .ho-how__head .pc-intro { margin-top: 14px; padding-bottom: 0; } .ho-how__steps { margin-top: 0; gap: 0; } .ho-how__step { display: block; padding: var(--ho-step-pad) 0; } /* A plain 32px gap above the first step (a negative margin here would lay the step over the intro's last line and block selecting it). Handover to step 2 depends on step 1's bottom edge. */ .ho-how__step:first-child { padding-top: 32px; } .ho-how__step:last-child { padding-bottom: max(var(--ho-step-pad), var(--ho-step-end)); } .ho-how__mock { display: none; } /* Inactive steps (home.js only): the numeral (aria-hidden) falls back to a pale blue, the title to 60% navy and the line to 90% --pc-muted, both still 4.5:1 on white. */ .ho-how.is-live .ho-how__step:not(.is-active) .ho-how__n { opacity: .3; } .ho-how.is-live .ho-how__step:not(.is-active) .ho-how__h { opacity: .6; } .ho-how.is-live .ho-how__step:not(.is-active) .ho-how__p { opacity: .9; } .ho-how.is-anim .ho-how__n, .ho-how.is-anim .ho-how__h, .ho-how.is-anim .ho-how__p { transition: opacity .5s var(--ho-ease); } /* Pinned with its middle on the middle of the area under the 64px header. */ .ho-win { display: flex; position: sticky; top: max(88px, calc(50vh + 32px - var(--ho-win-h) / 2)); } } /* The app window: navy frame, title bar with the campaign and a Criteria / Price / Leads switch, and a pale stage holding the three views in one grid cell. It is decorative and never interactive: no pointer events, default cursor, no hover states, so the switch never reads as clickable. The mark is pc-mark-duo-white.svg, the two-tone mark's on-navy form (as on the final CTA). */ .ho-win { --i: 0; flex-direction: column; height: var(--ho-win-h); box-sizing: border-box; padding: 6px; border-radius: 22px; background: var(--pc-navy); box-shadow: 0 32px 64px -32px rgba(11, 27, 63, .55), 0 12px 28px -18px rgba(11, 27, 63, .35); font-family: var(--pc-figtree); color: #FFFFFF; line-height: 1.4; cursor: default; pointer-events: none; -webkit-user-select: none; user-select: none; } .ho-win__bar { flex: none; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 14px; } .ho-win__mark { flex: none; display: block; width: 18px; height: 18px; } .ho-win__name { min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .ho-win__tabs { position: relative; margin-left: auto; display: grid; grid-template-columns: repeat(3, 78px); padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .07); } .ho-win__ind { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 78px; border-radius: 8px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transform: translateX(calc(var(--i) * 100%)); } .ho-win__tab { position: relative; padding: 6px 0; text-align: center; font-size: 13px; font-weight: 600; opacity: .5; } .ho-win__tab.is-active { opacity: 1; } .ho-win__stage { flex: 1 1 0%; min-height: 0; display: grid; border-radius: 17px; background: var(--pc-panel); overflow: hidden; } .ho-win__view { grid-area: 1 / 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; transform: translateY(14px); } .ho-win__view.is-active { opacity: 1; transform: none; } .ho-how.is-anim .ho-win__ind { transition: transform .5s var(--ho-ease); } .ho-how.is-anim .ho-win__tab { transition: opacity .3s ease; } .ho-how.is-anim .ho-win__view { transition: opacity .3s ease, transform .5s var(--ho-ease); } .ho-how.is-anim .ho-win__view.is-active { transition-delay: .12s; } /* Shared view parts: white cards in the product font. */ .ho-vc, .ho-vp, .ho-vl { min-width: 0; font-family: var(--pc-figtree); color: var(--pc-navy); line-height: 1.4; text-align: left; } .ho-vc, .ho-vp, .ho-vl__note { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 27, 63, .05), 0 1px 2px rgba(11, 27, 63, .05), 0 14px 32px -18px rgba(11, 27, 63, .28); } /* View 1: criteria. Rows tick on one by one: "Any" gives way to the value and a check (is-set); the row just set is highlighted (is-act). Started from the settled state (on arrival), only the highlight passes down the rows. */ .ho-vc { width: min(100%, 420px); box-sizing: border-box; padding: 6px; border-radius: 16px; } .ho-vc__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px; font-size: 15px; } .ho-vc__row + .ho-vc__row { box-shadow: 0 -1px 0 #EEF2F8; } .ho-vc__row::before { content: ""; position: absolute; inset: 0; border-radius: 11px; background: var(--pc-pale-2); opacity: 0; transition: opacity .35s ease; } .ho-vc__row.is-act::before { opacity: 1; } .ho-vc__l, .ho-vc__v { position: relative; } .ho-vc__l { color: var(--pc-muted); white-space: nowrap; } .ho-vc__v { display: grid; grid-template-columns: auto 16px; align-items: center; justify-items: end; column-gap: 9px; font-weight: 600; white-space: nowrap; } .ho-vc__any, .ho-vc__val { grid-area: 1 / 1; transition: opacity .3s ease, transform .4s var(--ho-ease); } .ho-vc__any { font-weight: 500; color: var(--pc-placeholder); } .ho-vc__val { opacity: 0; transform: translateY(6px); } .ho-vc__ck { grid-area: 1 / 2; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--pc-blue); color: #FFFFFF; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.5, .5, 1); } .ho-vc__ck svg { display: block; } .ho-vc__row.is-set .ho-vc__any { opacity: 0; transform: translateY(-6px); } .ho-vc__row.is-set .ho-vc__val, .ho-vc__row.is-set .ho-vc__ck { opacity: 1; transform: none; } /* View 2: price, under the criteria from view 1 as navy chips (as in the dashboard's campaign card), tagged "Illustrative example" beside its label. --p (0-1 across £35-£80, £35 being the minimum price; the bids are illustrative) drives the fill and the thumb; --pi picks the figure in .ho-vp__roll, a column of the five prices in a masked window that slides with them (transform only, nothing is re-laid out). Both default to the static £45. */ .ho-vp { --p: .22; --pi: 2; width: min(100%, 420px); box-sizing: border-box; padding: 18px 24px 22px; border-radius: 16px; } .ho-vp__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 18px; margin-bottom: 18px; box-shadow: 0 1px 0 #EEF2F8; } .ho-vp__chip { padding: 5px 9px; border-radius: 7px; background: var(--pc-navy); color: #FFFFFF; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .ho-vp__l { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 14px; color: var(--pc-muted); } .ho-vp__v { --ho-roll: 66px; height: var(--ho-roll); margin-top: 4px; overflow: hidden; font-size: 60px; line-height: var(--ho-roll); letter-spacing: -0.045em; font-weight: 700; font-variant-numeric: tabular-nums; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), #000 14%, #000 86%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(rgba(0, 0, 0, 0), #000 14%, #000 86%, rgba(0, 0, 0, 0)); } .ho-vp__roll { display: block; transform: translateY(calc(var(--pi) * var(--ho-roll) * -1)); transition: transform .9s var(--ho-ease); } .ho-vp__roll > span { display: block; height: var(--ho-roll); } .ho-vp__track { position: relative; margin-top: 26px; height: 6px; border-radius: 3px; background: #E8EDF6; } .ho-vp__fill { position: absolute; inset: 0; border-radius: 3px; overflow: hidden; } .ho-vp__fill::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--pc-blue); transform: translateX(calc((var(--p) - 1) * 100%)); transition: transform .9s var(--ho-ease); } /* The thumb rides on the right end of a full-width strip slid in from the left (like the fill), so nothing ever reaches past the track's right edge and widens the page. */ .ho-vp__thumb { position: absolute; inset: 0; transform: translateX(calc((var(--p) - 1) * 100%)); transition: transform .9s var(--ho-ease); } .ho-vp__knob { position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; box-sizing: border-box; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--pc-blue); box-shadow: 0 2px 6px rgba(11, 27, 63, .18); } .ho-vp.is-instant .ho-vp__fill::before, .ho-vp.is-instant .ho-vp__thumb, .ho-vp.is-instant .ho-vp__roll { transition: none; } .ho-vp__range { margin-top: 16px; display: flex; justify-content: space-between; font-size: 13px; color: var(--pc-muted); font-variant-numeric: tabular-nums; } /* View 3: live leads. Four opaque notes in one stack, placed by data-r: 0 = newest (blue ring), 1-2 below it, 3 = gone below the stack's faded foot, "new" = about to scale in at the top. The stack is 20px wider than the notes on each side so the mask never cuts their shadows. The delivery channels light up in turn as each note lands. On the narrowest phones the sub-line drops " · Non-smoker" (container query on the stack) rather than ending in "…". */ .ho-vl { width: min(100%, 420px); } .ho-vl__head { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; } .ho-vl__excl { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--pc-muted); } .ho-vl__stack { position: relative; height: 222px; margin: 10px -20px 0; container-type: inline-size; -webkit-mask-image: linear-gradient(#000 62%, rgba(0, 0, 0, .12)); mask-image: linear-gradient(#000 62%, rgba(0, 0, 0, .12)); } .ho-vl__note { position: absolute; left: 20px; right: 20px; top: 4px; height: 66px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 14px; transition: transform .7s var(--ho-ease), opacity .45s ease; } .ho-vl__note::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(36, 92, 255, .55); opacity: 0; transition: opacity .4s ease; } .ho-vl__note[data-r="0"] { z-index: 4; } .ho-vl__note[data-r="0"]::after { opacity: 1; } .ho-vl__note[data-r="1"] { z-index: 3; transform: translateY(74px); } .ho-vl__note[data-r="2"] { z-index: 2; transform: translateY(148px); } .ho-vl__note[data-r="3"] { z-index: 1; transform: translateY(222px); opacity: 0; } .ho-vl__note[data-r="new"] { z-index: 5; transform: scale(.94); opacity: 0; transition: none; } .ho-vl__note img { flex: none; display: block; width: 26px; height: 26px; } .ho-vl__body { flex: 1 1 0%; min-width: 0; display: block; } .ho-vl__top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; } .ho-vl__ago { font-size: 12.5px; font-weight: 500; color: var(--pc-muted); } .ho-vl__note[data-r="0"] .ho-vl__ago { color: var(--pc-blue); } .ho-vl__sub { display: block; margin-top: 1px; font-size: 13px; color: var(--pc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 310px) { .ho-vl__more { display: none; } } .ho-vl__chans { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; } .ho-vl__chan { position: relative; isolation: isolate; padding: 6px 11px; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--pc-border-2); font-size: 12.5px; font-weight: 600; color: var(--ho-ink-2); } .ho-vl__chan::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pc-pale); box-shadow: inset 0 0 0 1px rgba(36, 92, 255, .3); opacity: 0; transition: opacity .3s ease; } .ho-vl__chan.is-on::before { opacity: 1; } /* View 1 (leads for sale) uses the stack above with each listing's made-up price on the right. View 2: the buy card (the price, from the balance, by card, then the button). View 3: the bought lead in My leads with its source and the suggested opening line, then where it reaches you. */ .ho-vl__pr { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .ho-vl__note[data-r="0"] .ho-vl__pr { color: var(--pc-blue); } .ho-vb, .ho-vo { min-width: 0; font-family: var(--pc-figtree); color: var(--pc-navy); line-height: 1.4; text-align: left; } .ho-vb, .ho-vo__card { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 27, 63, .05), 0 1px 2px rgba(11, 27, 63, .05), 0 14px 32px -18px rgba(11, 27, 63, .28); } .ho-vb { width: min(100%, 420px); box-sizing: border-box; display: flex; flex-direction: column; padding: 20px 22px 22px; border-radius: 16px; } .ho-vb__t { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .ho-vb__sub { margin-top: 2px; font-size: 13px; color: var(--pc-muted); } .ho-vb__r { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14.5px; box-shadow: 0 -1px 0 #EEF2F8; } .ho-vb__sub + .ho-vb__r { margin-top: 14px; } .ho-vb__r > span { color: var(--pc-muted); } .ho-vb__r > b { font-weight: 600; font-variant-numeric: tabular-nums; } .ho-vb__btn { margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--pc-blue); color: #FFFFFF; font-size: 15px; font-weight: 700; text-align: center; } .ho-vb__note { margin-top: 10px; font-size: 12.5px; color: var(--pc-muted); text-align: center; } .ho-vo { width: min(100%, 420px); } .ho-vo__card { margin-top: 12px; display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 16px; } .ho-vo__name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .ho-vo__meta { margin-top: 2px; font-size: 13px; color: var(--pc-muted); } .ho-vo__r { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 11px; font-size: 14.5px; box-shadow: 0 -1px 0 #EEF2F8; } .ho-vo__r > span { color: var(--pc-muted); } .ho-vo__r > b { font-weight: 600; } .ho-vo__open { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--pc-pale); } .ho-vo__open > span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ho-ink-2); } .ho-vo__open q { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.4; } /* Phones: a tighter criteria card (and a smaller one below 360px, so "Smoker status / Non-smokers" still fits on one row). */ @media (max-width: 639.98px) { .ho-vc__row { padding: 14px 12px; } } @media (max-width: 359.98px) { .ho-vc__row { gap: 8px; font-size: 14px; } } /* 640-699px: the two-column static layout leaves the card about 260px wide, too narrow for the full-size rows. */ @media (min-width: 640px) and (max-width: 699.98px) { .ho-vc__row { gap: 8px; padding: 16px 12px; font-size: 14px; } } /* ------------------------------------------------- 5. Shared cards and links */ /* Shared by sections 7 and 13 (the bidding section was removed, founder, 10 Oct 2026): the cards are real UI cards (white, hairline ring, soft shadow, product font) set on a pale stage like the How-it-works mocks; one with example figures is labelled "Illustrative example" in a quiet sentence-case tag. Text links are blue with an arrow that nudges on hover. */ .ho-stage { min-width: 0; padding: clamp(12px, 2.6vw, 28px); box-sizing: border-box; border-radius: 20px; background: var(--pc-panel); } .ho-uicard { box-sizing: border-box; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 27, 63, .06), 0 1px 2px rgba(11, 27, 63, .05), 0 22px 44px -26px rgba(11, 27, 63, .3); font-family: var(--pc-figtree); color: var(--pc-navy); line-height: 1.4; text-align: left; } .ho-ill { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--pc-panel); color: var(--pc-muted); font-family: var(--pc-font); font-size: 12.5px; font-weight: 500; white-space: nowrap; } .ho-link, .ho-link:hover { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--pc-blue-press); text-decoration: none; } .ho-link:hover { color: var(--pc-navy); } /* A 44px tap target (21px of text plus 12px above and below); the negative margins keep the layout exactly as it was. */ .ho-link { padding-block: 12px; margin-block: -12px; } .ho-link svg { flex: none; display: block; transition: transform .2s var(--ho-ease); } .ho-link:hover svg { transform: translateX(3px); } .ho-nb { white-space: nowrap; } /* ------------------------------------------------ 6. Journey and product film */ /* The heading (two sentences, each on its own line), then the four-step flow: a ring per step joined by a hairline, the matching step with the two-tone mark, "Delivered to you" the one filled (blue) ring. A vertical rail below 900px, a row of four from 900px. Then the film. */ .ho-jr__h2 { max-width: none; } .ho-jr__h2 span { display: block; } .ho-flow { margin: clamp(32px, 4.4vw, 56px) 0 0; padding: 0; list-style: none; display: grid; max-width: 560px; } /* align-content: start keeps every step's heading on one line across the row of four: a step stretched to the tallest one's height must not spread its spare height over its own rows. */ .ho-flow__i { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; column-gap: 18px; padding-bottom: 32px; } .ho-flow__i:last-child { padding-bottom: 0; } .ho-flow__i::before { content: ""; position: absolute; left: 24px; top: 54px; bottom: 6px; width: 1px; background: var(--pc-border-4); } .ho-flow__i:last-child::before { display: none; } .ho-flow__m { grid-row: 1 / span 2; width: 48px; height: 48px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid var(--pc-border-4); border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 27, 63, .06); color: var(--pc-navy); } .ho-flow__m svg, .ho-flow__m img { display: block; } .ho-flow__i--on .ho-flow__m { border-color: var(--pc-blue); background: var(--pc-blue); color: #FFFFFF; box-shadow: 0 0 0 6px rgba(36, 92, 255, .12); } .ho-flow__h { margin: 0; padding-top: 3px; font-size: clamp(19px, 1.8vw, 21px); line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; } .ho-flow__p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--pc-muted); text-wrap: pretty; } @media (min-width: 900px) { .ho-flow { --ho-flow-gap: clamp(24px, 3vw, 40px); max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--ho-flow-gap); } .ho-flow__i { grid-template-columns: minmax(0, 1fr); padding: 0; } .ho-flow__m { grid-row: auto; width: 56px; height: 56px; margin-bottom: 22px; } /* From the ring's right edge to just short of the next ring. */ .ho-flow__i::before { left: 68px; right: calc(12px - var(--ho-flow-gap)); top: 28px; bottom: auto; width: auto; height: 1px; } .ho-flow__h { padding-top: 0; } } .ho-jr + .ho-film { margin-top: clamp(48px, 6vw, 72px); } /* Product film: click to play (home.js section 4), on every screen width. A still poster (the film's Match frame, lazy) and "Watch how it works"; the click adds the iframe of /product-film?embed=1&once=1, which fades in over the poster on its "ready" message. Pause (top left) becomes Replay at the end. "Create your broker account" fades in on the end card while the film plays on. Under 600px the box is portrait (4:5) and home.js asks for the film's portrait cut (&m=1), which frames each scene so its key line stays readable on a phone. Under the box, once it plays: a thin progress bar with the time, and one caption line (the voice-over). The transcript is for screen readers only (.pc-sr; founder, 10 Oct 2026: no caption or "Read the transcript" under the film). */ .ho-film { position: relative; margin-top: 32px; } /* White behind the poster and frame (the same as the page): Chrome's rounded clip leaves a 1px anti-aliased fringe of whatever sits behind it, so this keeps the corners clean on the light poster, and the frame's overscan below does the same for the film's dark scenes. */ .ho-film__box { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #FFFFFF; isolation: isolate; } @media (max-width: 599.98px) { .ho-film__box { aspect-ratio: 4 / 5; border-radius: 14px; } } .ho-film__poster { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; } .ho-film__box.is-ready .ho-film__poster { opacity: 0; pointer-events: none; } .ho-film__frame { /* Overscan: the film page's own background can show as a hairline at the film's edge, which the rounded clip turns into an arc at the corners, so the film is drawn slightly larger than the box. The film page puts its 37px playback bar under the film and centres the film in the space above it, fitting it to the width and to the height less 44px. With the frame 8px wider and 48px taller than the box, the film comes out 4px taller and 6.4px wider than the box, centred 5.5px below the frame's top: top -5.5px puts that centre on the box's own, 2px past the top and bottom and 3.2px past each side (top -2px left a 2.25px pale band along the top, over the dark scenes). The bar stays below the box. The portrait cut (800 x 1000 in a 4:5 box) comes out the same way: 2px past the top and bottom and 1.6px past each side. */ position: absolute; left: -4px; top: -5.5px; z-index: 0; width: calc(100% + 8px); height: calc(100% + 48px); border: 0; display: block; opacity: 0; transition: opacity .5s ease; } .ho-film__frame.is-ready { opacity: 1; } /* "Watch how it works": a navy pill in the middle of the poster. While the film loads, a ring turns in place of the play icon. */ .ho-film__play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px 0 20px; box-sizing: border-box; border: 0; border-radius: 999px; background: var(--pc-navy); color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 18px 40px -16px rgba(11, 27, 63, .6), 0 0 0 1px rgba(255, 255, 255, .14) inset; transition: background-color .2s ease, transform .2s var(--ho-ease); } .ho-film__play:hover { background: var(--pc-blue); } .ho-film__play:active { transform: translate(-50%, -50%) scale(.97); } .ho-film__play:focus-visible { outline: 3px solid var(--pc-blue); outline-offset: 3px; } /* Phones (3 Nov 2026): the portrait poster is the film's "Lead bought" card, with its tick and words above the middle, so the button sits in the card's empty lower part (82% down) and covers neither. */ @media (max-width: 599.98px) { .ho-film__play { top: 82%; } } .ho-film__icon { flex: none; display: block; } .ho-film__spin { display: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF; border-radius: 50%; animation: hoFilmSpin .8s linear infinite; } .ho-film__box.is-loading .ho-film__play { cursor: progress; } .ho-film__box.is-loading .ho-film__icon { display: none; } .ho-film__box.is-loading .ho-film__spin { display: block; } @keyframes hoFilmSpin { to { transform: rotate(360deg); } } /* Pause / Replay: a 44px round button, over the film's top left (it sits in the progress row in the markup, so on phones it can stay out of the portrait film's way: first in that row). */ .ho-film__pause { position: absolute; z-index: 3; top: 14px; left: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 27, 63, .72); color: #FFFFFF; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset; transition: background-color .2s ease; } .ho-film__pause:hover { background: var(--pc-navy); } .ho-film__pause:focus-visible { outline: 3px solid var(--pc-blue); outline-offset: 2px; } .ho-film__i { display: none; } .ho-film__pause[data-mode="pause"][aria-pressed="false"] .ho-film__i--pause, .ho-film__pause[data-mode="pause"][aria-pressed="true"] .ho-film__i--play, .ho-film__pause[data-mode="replay"] .ho-film__i--replay { display: block; } /* The end: the hero's CTA, centred below the end card's line, fading up. */ .ho-film__end { position: absolute; z-index: 2; left: 0; right: 0; bottom: 11%; width: fit-content; margin: 0 auto; height: 50px; padding: 0 24px; font-size: 16px; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .55); animation: hoFilmEnd .5s var(--ho-ease) both; } @media (max-width: 599.98px) { .ho-film__end { bottom: 8%; height: 48px; padding: 0 20px; font-size: 15px; } } /* Progress: a thin bar (scaleX from home.js) and the time, "0:07 / 0:22". home.js shows this row and the caption line at the click, so the page below settles while the click is still recent (no layout shift counted later); until the film is ready (.is-wait) Pause keeps its place but is not shown or focusable. */ .ho-film__prog { margin-top: 12px; display: flex; align-items: center; gap: 12px; } .ho-film__prog.is-wait .ho-film__pause { visibility: hidden; } @media (max-width: 599.98px) { .ho-film__pause { position: static; flex: none; background: var(--pc-navy); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } } .ho-film__track { position: relative; flex: 1 1 auto; height: 3px; border-radius: 2px; background: var(--pc-border-2); overflow: hidden; } .ho-film__bar { position: absolute; inset: 0; background: var(--pc-blue); transform: scaleX(0); transform-origin: 0 50%; } .ho-film__time { flex: none; font-size: 13px; font-weight: 500; color: var(--pc-muted); font-variant-numeric: tabular-nums; } /* "CC": captions are off until it is pressed (founder, 10 Oct 2026). A 44px tap target around a small pill. */ .ho-film__ccbtn { flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 44px; margin: -10px -6px -10px -4px; padding: 0; border: 0; background: none; color: var(--pc-muted); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; cursor: pointer; } .ho-film__ccbtn::before { content: ""; grid-area: 1 / 1; width: 32px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px currentColor; } .ho-film__ccbtn > * { grid-area: 1 / 1; } .ho-film__ccbtn:hover { color: var(--pc-navy); } .ho-film__ccbtn[aria-pressed="true"] { color: #FFFFFF; } .ho-film__ccbtn[aria-pressed="true"]::before { background: var(--pc-navy); box-shadow: none; } .ho-film__ccbtn:focus-visible { outline: 3px solid var(--pc-blue); outline-offset: -4px; border-radius: 8px; } /* Captions: under the box, never over the film. Room for two lines (three on phones), so the page never moves as they change. */ .ho-film__cc { margin: 10px auto 0; max-width: 46em; min-height: calc(2 * 1.45em); font-size: 17px; line-height: 1.45; font-weight: 500; text-align: center; color: var(--pc-navy); text-wrap: balance; } @media (max-width: 599.98px) { .ho-film__cc { min-height: calc(3 * 1.45em); font-size: 16px; } } /* ---------------------------------------------- 7. How it reaches you and lead credits */ /* One column: "How it reaches you" (four ways in, in a row), then the lead credit rules (#lead-credits, Terms section 5) under a hairline (founder, 10 Oct 2026: the fictional sample enquiry card above them was removed). Both are inset by --ho-sample-pad. */ .ho-sample { --ho-sample-gutter: clamp(20px, 2.8vw, 32px); --ho-sample-pad: var(--ho-sample-gutter); } .ho-sample__via-h, .ho-credits__eyebrow { font-family: var(--pc-mono); font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-muted); } /* How it reaches you: a mono label, then the four ways in a row, each a 48px character icon (/assets/pc-character/on-white/), a bold name and one line. Two a row on tablets, one a row on phones. */ .ho-sample__via { padding-inline: var(--ho-sample-pad); } .ho-sample__via-h { margin: 0 0 14px; } .ho-sample__via ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px clamp(16px, 2.2vw, 28px); } .ho-sample__via li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; font-size: 14.5px; line-height: 1.45; color: var(--pc-muted); text-wrap: pretty; } .ho-sample__via li b { display: block; margin-bottom: 1px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--pc-navy); } /* Character icons (inline SVG: this list carries no , so no CRM logo can slip in). */ .ho-sample__via-m { flex: none; display: block; width: 48px; height: 48px; margin: -6px -5px 0 -7px; } /* the art has empty margins: line its edge up with the heading */ .ho-sample__via-m svg { display: block; width: 48px; height: 48px; } /* Lead credits: a six-column grid, two columns each for the heading, the claim window with the policy link, and the five grounds. */ .ho-credits { margin-top: clamp(32px, 4vw, 48px); padding: clamp(32px, 3.6vw, 44px) var(--ho-sample-pad) 0; border-top: 1px solid var(--pc-border); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px clamp(16px, 2.2vw, 28px); align-items: start; } .ho-credits__h { grid-column: span 2; margin: 0; max-width: 15ch; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.18; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; } .ho-credits__foot { grid-column: span 2; min-width: 0; } .ho-credits__foot p { margin: 0 0 14px; max-width: 30ch; font-size: 16px; line-height: 1.55; color: var(--pc-muted); text-wrap: pretty; } .ho-credits__grounds { grid-column: span 2; min-width: 0; } .ho-credits__eyebrow { margin: 0 0 12px; } .ho-credits__grounds ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .ho-credits__grounds li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; align-items: start; font-size: 15.5px; line-height: 1.4; font-weight: 500; color: var(--ho-ink-2); } .ho-credits__grounds li::before { content: ""; width: 16px; height: 16px; margin-top: 2px; background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.3 2.9 2.9 6.1-6.4' stroke='%231F6E55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Tablets: the four ways two a row; the credit heading across the top, then the claim window and the grounds side by side. */ @media (max-width: 959.98px) { .ho-sample__via ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ho-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ho-credits__h { grid-column: 1 / -1; max-width: 22ch; } .ho-credits__foot, .ho-credits__grounds { grid-column: span 1; } } /* Phones: the four ways and the credits in one column on the section's own edge. */ @media (max-width: 599.98px) { .ho-sample__via { padding-inline: 0; } .ho-sample__via ul { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ho-credits { grid-template-columns: minmax(0, 1fr); padding-inline: 0; row-gap: 20px; } .ho-credits__h, .ho-credits__foot, .ho-credits__grounds { grid-column: 1 / -1; } .ho-credits__grounds { margin-top: 8px; } } /* ------------------------------------------------------------------- 9. FAQ */ .ho-faq { margin-top: 32px; max-width: 760px; border-top: 1px solid var(--pc-border); } /* Centred block (founder, 8 Oct 2026): the heading and the list sit in the middle; questions and answers stay left-aligned inside the list so they read easily. */ .ho-faq-sec .pc-h2 { margin-inline: auto; text-align: center; } .ho-faq-sec .ho-faq { margin-inline: auto; } .ho-faq__item { border-bottom: 1px solid var(--pc-border); } .ho-faq__h { margin: 0; font: inherit; } .ho-faq__q { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; margin: 0; border: 0; border-radius: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; font: inherit; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; text-align: left; color: var(--pc-navy); transition: var(--pc-transition); } .ho-faq__q:active { transform: scale(.985); opacity: .7; } .ho-faq__icon { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--pc-muted); transition: transform .25s ease; } .ho-faq__icon svg { display: block; } .ho-faq__q[aria-expanded="true"] .ho-faq__icon { transform: rotate(45deg); } /* No display or padding on the panel itself: closed panels use hidden="until-found". */ .ho-faq__a p { margin: 0; padding: 0 44px 20px 0; font-size: 15.5px; line-height: 1.6; color: var(--pc-muted); } /* An answer in more than one block (founder brief, 30 Oct 2026: the credit claim answer as how to claim, the deadline, the reasons as a list, what is not covered, then the credit): closer blocks, a plain bulleted list in the answer's own type, and navy run-in labels. */ .ho-faq__a p:not(:last-child) { padding-bottom: 10px; } .ho-faq__a ul { margin: 0; padding: 0 44px 10px 22px; font-size: 15.5px; line-height: 1.6; color: var(--pc-muted); } .ho-faq__a ul:last-child { padding-bottom: 20px; } .ho-faq__a li + li { margin-top: 4px; } .ho-faq__a li::marker { color: var(--pc-navy); } .ho-faq__a strong { font-weight: 600; color: var(--pc-navy); } /* Links to the guides inside an answer: underlined, so they don't rely on colour alone. */ .ho-faq__a a { color: var(--pc-navy); text-decoration: underline; text-decoration-color: rgba(11, 27, 63, .35); text-underline-offset: 3px; } .ho-faq__a a:hover { text-decoration-color: currentColor; } /* -------------------------------------------------- 10. SEO copy and final CTA */ /* SEO copy: full-width pale band (the lead credits tint) between the navy final CTA and the navy footer, so it needs no pc-spacer. Editorial split: the heading column (eyebrow, H2, standfirst, three checks) sticks beside four numbered blocks split by hairlines (the FCA block carries a shield disc), then a white card of guide links and a secondary sign-up link, held to 640px. One column below 960px. Static: no reveal, so the copy is never hidden. */ .ho-seo { padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 88px); background: var(--ho-soft); } .ho-seo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; } .ho-seo__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--pc-mono); font-size: 12.5px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-blue-press); } .ho-seo__eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1.5px; background: var(--pc-blue); } .ho-seo__h2 { margin: 18px 0 0; max-width: 9.5em; font-size: clamp(34px, 5.2vw, 44px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; } .ho-seo__stand { margin: 20px 0 0; max-width: 38ch; font-size: clamp(17.5px, 1.5vw, 19px); line-height: 1.5; letter-spacing: -0.01em; font-weight: 600; color: var(--pc-navy); text-wrap: balance; } .ho-seo__checks { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--ho-ink-2); } .ho-seo__checks li { display: flex; align-items: center; gap: 10px; } .ho-seo__checks svg { flex: none; display: block; color: var(--pc-blue); } /* Numbered blocks: a display numeral in a gutter, sitting on the H3's first baseline, then copy held to about 64 characters. */ .ho-seo__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pc-border-4); } .ho-seo__item { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: baseline; padding: clamp(28px, 2.8vw, 34px) 0; border-bottom: 1px solid var(--pc-border-4); } /* A short blue tick on the hairline above each numeral. */ .ho-seo__item::before { content: ""; position: absolute; top: -1px; left: 0; width: 24px; height: 1px; background: var(--pc-blue); } .ho-seo__n { font-size: clamp(26px, 2.2vw, 30px); line-height: 1; letter-spacing: -0.05em; font-weight: 600; color: var(--pc-blue); font-variant-numeric: tabular-nums; } .ho-seo__h3 { margin: 0; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; } .ho-seo__copy p { margin: 10px 0 0; max-width: 64ch; font-size: 16.5px; line-height: 1.7; color: var(--pc-muted); text-wrap: pretty; } .ho-seo__copy p + p { margin-top: 14px; } /* Block 04: the H3 followed by a shield line icon in a white disc, like a verified mark. */ .ho-seo__fca { display: flex; align-items: flex-start; gap: 12px; } .ho-seo__fca-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -4px; box-sizing: border-box; border: 1px solid var(--pc-border-4); border-radius: 50%; background: #FFFFFF; color: var(--pc-blue); } .ho-seo__fca-icon svg { display: block; } /* Guide links: one white card, rows split by hairlines, each with a small line icon and an arrow that nudges on hover. */ .ho-seo__more { max-width: 640px; margin-top: clamp(36px, 4vw, 48px); } .ho-seo__lead { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; } .ho-seo__lead span { display: block; font-weight: 400; color: var(--pc-muted); } .ho-seo__links { margin: 16px 0 0; padding: 0; list-style: none; border: 1px solid var(--pc-border-2); border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 27, 63, .04), 0 12px 32px -20px rgba(11, 27, 63, .22); overflow: hidden; } .ho-seo__links li + li { border-top: 1px solid var(--pc-border-3); } .ho-seo__link, .ho-seo__link:hover { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 18px 12px 14px; box-sizing: border-box; color: var(--pc-navy); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-decoration: none; transition: background-color .2s ease; } .ho-seo__link:hover { background: var(--pc-pale-2); } .ho-seo__link:focus-visible { outline-offset: -2px; border-radius: 13px; } .ho-seo__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--pc-pale); color: var(--pc-blue); } .ho-seo__ic svg { display: block; } .ho-seo__lt { flex: 1 1 auto; min-width: 0; text-wrap: balance; } .ho-seo__arr { flex: none; display: block; color: var(--pc-placeholder); transition: transform .2s var(--ho-ease), color .2s ease; } .ho-seo__link:hover .ho-seo__arr { color: var(--pc-blue); transform: translateX(3px); } /* Secondary sign-up: a quiet white button (the blue one is in the navy band just above). */ .ho-seo__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 28px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--pc-muted); } .ho-seo__cta span { flex: 1 1 240px; max-width: 30ch; text-wrap: balance; } .ho-seo__btn, .ho-seo__btn:hover { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 20px; box-sizing: border-box; border: 1px solid #D3DBEA; border-radius: 10px; background: #FFFFFF; color: var(--pc-navy); font-size: 15.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: border-color .2s ease, transform .14s var(--pc-ease-press); } .ho-seo__btn:hover { border-color: var(--pc-navy); } .ho-seo__btn:active { transform: scale(.98); } .ho-seo__btn svg { display: block; transition: transform .2s var(--ho-ease); } .ho-seo__btn:hover svg { transform: translateX(3px); } @media (min-width: 960px) { .ho-seo__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(56px, 7vw, 104px); } /* Clears the 64px sticky header. */ .ho-seo__head { position: sticky; top: 112px; } .ho-seo__h2 { font-size: clamp(40px, 3.6vw, 50px); } .ho-seo__stand { max-width: 30ch; } .ho-seo__checks { flex-direction: column; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--pc-border-4); } } @media (max-width: 599.98px) { .ho-seo__item { grid-template-columns: minmax(0, 1fr); } .ho-seo__n { padding: 0 0 12px; } .ho-seo__cta { flex-direction: column; align-items: stretch; } .ho-seo__cta span { flex: none; } .ho-seo__btn { justify-content: center; } } /* Final CTA: the guides' CTA box (site.css .pc-cta; founder, 10 Oct 2026). */ /* --------------------------------------------------------- 11. Motion helpers */ /* home.js adds .is-paused to animated containers while they are off-screen. */ .is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; } /* Scroll reveal: [data-ho-reveal] blocks fade up once as they enter (html.ho-reveal is set by the head script only when motion is allowed; home.js adds .is-in). */ .ho-reveal [data-ho-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ho-ease), transform .7s var(--ho-ease); } .ho-reveal [data-ho-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* Static final states: no ping ring, no reveal. */ .ho-live::before { display: none; } .ho-reveal [data-ho-reveal] { opacity: 1; transform: none; } /* Hero mark: the sharp halves in place, no soft copies, glow, ring or shine. */ .ho-mark .ho-mark__soft, .ho-mark__glow, .ho-mark__ring, .ho-mark__glint { display: none; } .ho-mark__half, .ho-mark__sharp, .ho-mark__snap { animation: none; } /* Dashboard preview: no cursor (a step shows its still; Play still plays). */ .ho-cur { display: none; } } /* Print: blocks never scrolled into view would otherwise print blank. */ @media print { .ho-reveal [data-ho-reveal] { opacity: 1; transform: none; transition: none; } } /* Homepage only: the navy final CTA sits directly above the footer, so hide the footer's own duplicate "Create your broker account / Log in" buttons here (other pages keep them). */ .pc-home .pc-ftr__ctas { display: none; } /* ------------------------------------------- 12. Proof components (not rendered) */ /* For the commented-out PROOF SLOT in site/index.html (between Bidding and the FAQ). Nothing uses these until genuine, verifiable, dated proof exists, with written permission and the evidence kept on file (CAP Code 3.7 and 3.45); every statistic names its source and period. Never fill them with sample content. Three variants, in the page's language: - .ho-proof__quotes > figure.ho-proof__quote: quote, name, role and firm (with FRN), date. Up to three side by side from 760px, stacked below. - ul.ho-proof__logos: firm logos at 32px tall, greyscale until hovered. - dl.ho-proof__stats + p.ho-proof__src: figures over labels split by hairlines, then the source line. */ .ho-proof__quotes { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 760px) { .ho-proof__quotes { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } .ho-proof__quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(22px, 2.6vw, 28px); border: 1px solid var(--pc-border-2); border-radius: 18px; background: #FFFFFF; } .ho-proof__quote blockquote { margin: 0; } .ho-proof__quote blockquote p { margin: 0; font-size: 17px; line-height: 1.55; letter-spacing: -0.01em; color: var(--pc-navy); text-wrap: pretty; } .ho-proof__quote figcaption { display: grid; gap: 2px; font-size: 14px; line-height: 1.45; } .ho-proof__name { font-weight: 600; color: var(--pc-navy); } .ho-proof__role, .ho-proof__date { color: var(--pc-muted); } .ho-proof__logos { margin: 32px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 24px clamp(32px, 5vw, 56px); } .ho-proof__logos img { display: block; height: 32px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s ease, opacity .2s ease; } .ho-proof__logos img:hover { filter: none; opacity: 1; } .ho-proof__stats { margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px 0; } .ho-proof__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 0 24px; border-left: 1px solid var(--pc-border); } .ho-proof__stat:first-child { padding-left: 0; border-left: 0; } .ho-proof__stat dd { margin: 0; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.045em; font-weight: 700; font-variant-numeric: tabular-nums; } .ho-proof__stat dt { font-size: 15px; font-weight: 500; color: var(--pc-muted); } .ho-proof__src { margin: 20px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--pc-muted); } /* ---------------------------------------- 13. Sample enquiry and starting costs */ /* The hero's button row (the second button, "View a sample enquiry", was removed with the sample enquiry, founder, 10 Oct 2026). Below 520px it is centred, at least 48px tall. */ .ho-hero__cta { gap: 12px; flex-wrap: wrap; } @media (max-width: 519.98px) { .ho-hero__cta { flex-direction: column; align-items: center; } .ho-hero__cta .pc-btn { width: min(100%, 340px); height: auto; min-height: 48px; } } /* The sticky header must not cover the headings these two are linked to (the trust strip and the nav). */ #lead-credits, #pricing { scroll-margin-top: 84px; } /* Starting costs (#pricing): one navy panel. The two figures are the loudest thing on it: large white numerals (the pound sign smaller, in light brand blue) each with a plain white label and one short grey-blue note, hairline between. From 960px the heading, its line and the CTA sit on the left and the figures on the right; the four ticks and the balance line run along the foot under a hairline. Below 960px everything stacks in source order (heading, figures, ticks, CTA, line), so the Pricing link lands on the figures. The panel is the section's only child, so the space above and below is the homepage's --pc-section rhythm, as before. Colours on navy (#0B1B3F): white 16.9:1, #B9C4DD 9.7:1, #8FA2C6 6.6:1, #A9C1FF 9.5:1, #6E9BFF 6.3:1 (about 4.6:1 at the brightest point of the glow; large text), the blue button 3.3:1 against it. */ .ho-cost__panel { --ho-cost-pad: clamp(24px, 5.6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--ho-cost-pad); box-sizing: border-box; border-radius: 24px; background: radial-gradient(70% 90% at 92% 8%, rgba(36, 92, 255, .30), rgba(36, 92, 255, 0) 62%), var(--pc-navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: #FFFFFF; } .ho-cost__head { min-width: 0; } .ho-cost__h2 { max-width: 11em; color: #FFFFFF; } .ho-cost__lede { margin: 16px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.55; color: #B9C4DD; text-wrap: pretty; } /* The figures: number left, label and note right, on a shared column (subgrid) so both labels line up. The label sits before the number in the source, so it is read first. The label is the meaning of the number, so it is white and semibold; the note under it is quieter. */ .ho-cost__figs { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: clamp(32px, 4vw, 44px) 0 0; } .ho-cost__fig { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "num label" "num sub"; grid-template-rows: auto auto; column-gap: clamp(18px, 2.4vw, 32px); align-items: center; padding: clamp(20px, 2.6vw, 30px) 0; border-top: 1px solid rgba(255, 255, 255, .14); } .ho-cost__fig:first-child { padding-top: 0; border-top: 0; } .ho-cost__fig:last-child { padding-bottom: 0; } .ho-cost__fig dt { grid-area: label; align-self: end; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; } .ho-cost__fig dd { margin: 0; } .ho-cost__num { grid-area: num; font-size: clamp(60px, 7.8vw, 112px); font-weight: 700; line-height: .92; letter-spacing: -0.045em; color: #FFFFFF; white-space: nowrap; font-variant-numeric: lining-nums; } /* The pound sign: a real span (not ::first-letter, which Firefox and Safari draw differently). */ .ho-cost__gbp { display: inline-block; margin-right: .04em; font-size: .5em; font-weight: 600; letter-spacing: 0; vertical-align: .62em; color: #6E9BFF; } .ho-cost__sub { grid-area: sub; align-self: start; font-size: 15px; line-height: 1.45; color: #B9C4DD; text-wrap: pretty; } .ho-cost__fig .ho-cost__sub { margin-top: 6px; } /* Four ticks: a white check in a brand-blue disc, then a short white phrase. */ .ho-cost__ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: clamp(32px, 4vw, 44px) 0 0; padding: clamp(24px, 3vw, 32px) 0 0; border-top: 1px solid rgba(255, 255, 255, .14); list-style: none; } .ho-cost__ticks li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #FFFFFF; } .ho-cost__ticks li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pc-blue) center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.3 2.9 2.9 6.1-6.4' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .ho-cost__cta { margin-top: clamp(28px, 3.4vw, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; } .ho-cost__cta .pc-btn { height: 52px; padding: 0 24px; font-size: 16px; } .ho-cost .ho-link, .ho-cost .ho-link:hover { color: #A9C1FF; } .ho-cost .ho-link:hover { color: #FFFFFF; } .ho-cost__fine { margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; color: #8FA2C6; text-wrap: pretty; } /* Tablets: the two figures side by side (label, number, note), a hairline between. The ticks stay two by two, the second column under the second figure, until all four fit on one row with room between them (768px since "No fixed-term contract", founder, 30 Oct 2026: on one row it ran past the panel's padding below about 726px; with "No contract" the row fitted from 720px). */ @media (min-width: 600px) and (max-width: 959.98px) { .ho-cost__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ho-cost__fig, .ho-cost__fig:first-child, .ho-cost__fig:last-child { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "num" "sub"; padding: 0 0 0 clamp(24px, 4vw, 40px); border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); } .ho-cost__fig:first-child { padding-left: 0; border-left: 0; } .ho-cost__fig dt { align-self: start; } .ho-cost__num { margin-top: 14px; font-size: clamp(76px, 11vw, 100px); } .ho-cost__fig .ho-cost__sub { margin-top: 12px; } .ho-cost__ticks { column-gap: calc(2 * clamp(24px, 4vw, 40px)); } } @media (min-width: 768px) and (max-width: 959.98px) { .ho-cost__ticks { grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 20px; } } @media (min-width: 960px) { .ho-cost__panel { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "head figs" "cta figs" "ticks ticks" "fine fine"; grid-template-rows: auto 1fr auto auto; column-gap: clamp(48px, 6vw, 88px); } .ho-cost__head { grid-area: head; } .ho-cost__figs { grid-area: figs; align-self: center; margin: 0; } .ho-cost__fig { padding: 34px 0; } .ho-cost__cta { grid-area: cta; align-self: end; } .ho-cost__ticks { grid-area: ticks; grid-template-columns: repeat(4, max-content); justify-content: space-between; margin-top: clamp(40px, 4.2vw, 52px); } .ho-cost__fine { grid-area: fine; margin-top: 16px; } .ho-cost__panel { padding-bottom: calc(var(--ho-cost-pad) - 12px); } } /* Wide screens: the panel stops growing at the page width, so the two columns keep their share. (Until 3 Nov 2026 the figures' column took max-content here, for a long one-line label; with the new model's one-line notes that squeezed the heading to a word a line and put the button over "£50".) The notes wrap under their label at a readable measure. */ @media (min-width: 1200px) { .ho-cost__panel { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } .ho-cost__fig .ho-cost__sub { max-width: 30ch; } } /* The narrowest phones: each figure stacks (label, number, note) and the ticks take one column. */ @media (max-width: 379.98px) { .ho-cost__figs { grid-template-columns: minmax(0, 1fr); } .ho-cost__fig { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "num" "sub"; } .ho-cost__num { margin-top: 10px; font-size: 64px; } .ho-cost__fig .ho-cost__sub { margin-top: 10px; } .ho-cost__ticks { grid-template-columns: minmax(0, 1fr); } .ho-cost__cta .pc-btn { padding: 0 14px; font-size: 15.5px; } } @media (max-width: 519.98px) { .ho-cost__panel { border-radius: 20px; } .ho-cost__ticks { gap: 14px 12px; } .ho-cost__ticks li { font-size: 15px; gap: 8px; } .ho-cost__fig dt { font-size: 16.5px; } .ho-cost__cta { flex-direction: column; align-items: stretch; gap: 18px; } .ho-cost__cta .pc-btn { width: 100%; } .ho-cost__cta .ho-link { align-self: center; } } /* Windows high contrast: keep the panel's edge, and keep the tick discs (their check is an image). */ @media (forced-colors: active) { .ho-cost__panel { outline: 1px solid CanvasText; } .ho-cost__ticks li::before { forced-color-adjust: none; } }