/* Built Logic homepage — page-scoped composition (handoff v3, 11 Sep 2026). Loaded after /assets/bl-visual.css, which owns the shared tokens and the .bl-diagram / .bl-media / .bl-card / .bl-strip / .bl-reserve / .bl-film components. Nothing here restyles a bare element selector and nothing here is required for the page to read: every rule is layout or surface. Selectors that override homepage-critical.css / homepage-route.css are deliberately one level more specific, because the route CSS is inlined at the end of on the built homepage and would otherwise win on order. */ /* ------------------------------------------------------------- 1. hero */ /* The shared .bl-hero owns the 45:55 copy/media split (assets/bl-visual.css). The container is the shared .bl-wide (1,304px less 32px gutters). The route CSS inlined at the end of makes .hp-hero__inner a 50/1fr grid, which would cap the media column, so it is reset to a plain block here. The primary frame lands around 650px wide at a wide desktop. */ .hp-hero .hp-hero__inner { display: block; padding-top: clamp(124px, 11vw, 148px); padding-bottom: 56px; } .hp-hero .hp-hero__copy { padding-top: 0; } .hp-hero .hp-hero__h1 { font-size: clamp(38px, 4.4vw, 62px); } .hp-hero .hp-hero__support { max-width: 34em; font-size: 18.5px; } /* Production view: the staging-only frame is removed at publish time, so the hero becomes one readable column instead of leaving an empty track. */ .hp-hero .bl-hero:has(.bl-hero__media:empty) { grid-template-columns: minmax(0, 1fr); } .hp-hero .bl-hero:has(.bl-hero__media:empty) .bl-hero__media { display: none; } .hp-hero .bl-hero:has(.bl-hero__media:empty) .bl-hero__copy { max-width: 46em; } @media (max-width: 899px) { .hp-hero .hp-hero__inner { padding-top: 118px; padding-bottom: 40px; } .hp-hero .hp-hero__h1 { font-size: 34px; } } /* 2. The capability strip (.hpv3-cap) was removed on 12 Sep 2026 (copy handoff v5 section 3) together with its own padding. The technology banner owns the spacing under the hero now, so nothing replaces this block. */ /* 3. The client-feedback reservation was removed on 11 Sep 2026 (copy handoff v4, section 4) and its space collapsed with it. */ /* --------------------------------- 4. outcomes beside the system graphic */ .hpv3-outcomes { background: #FAFAF8; padding: clamp(56px, 7vw, 88px) 0; border-bottom: 1px solid #E5E5E2; } .hpv3-outcomes__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; } .hpv3-outcomes__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); } .hpv3-outcomes__grid { margin-top: clamp(30px, 3.4vw, 46px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 3vw, 44px); align-items: start; } .hpv3-outcomes__col { display: grid; gap: 20px; align-content: start; } .hpv3-outcome { border-top: 1px solid #232A31; padding: 18px 0 0; } /* Side by side, the three outcomes span the workflow panel: the first rule sits on the panel's top edge and the last paragraph ends on its bottom edge. */ @media (min-width: 1024px) { .hpv3-outcomes__grid { align-items: stretch; } .hpv3-outcomes__col { align-content: space-between; } } .hpv3-outcome h3 { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.25; color: #232A31; } .hpv3-outcome p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: #586069; } /* One workflow composition on the flat slate panel (visual handoff v4 §1). The shared .bl-diagram--slate owns the surface, the node cards and the motion; this file only lays the four nodes out and decides where each node's supporting detail rows are shown. */ .hpv4-sys { margin: 0; } /* Give each stage card presence on the slate without stretching it to the height of the longest label. The three document inputs are deliberately the smallest surfaces and the preparation stage the largest, so scale carries the hierarchy instead of four identical boxes. */ .hpv4-sys .hpv4-flow > li.bl-node { min-height: 0; padding: 18px; } .hpv4-sys .hpv4-flow__prepare { padding: 24px 22px; min-height: 118px; } .hpv4-sys .bl-node--doc { padding: 14px 16px; } .hpv4-flow { list-style: none; margin: clamp(24px, 2.6vw, 34px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 1.15fr); column-gap: 34px; row-gap: 0; /* Each stage is the size of its own content and sits on the centre line of the input stack, so scale reads as hierarchy rather than as stretch. */ align-items: center; } /* The three inputs are one column: a labelled lane of document surfaces that gathers into the preparation stage. */ .hpv4-flow__sources { display: grid; gap: 10px; align-content: start; } .hpv4-flow__lane { margin: 0 0 2px; } .hpv4-flow__gate { margin: 0 0 8px; font-size: 10px; letter-spacing: .12em; color: #586069 !important; } .hpv4-flow__prepare .bl-node__label { font-size: 17px; } /* Light Blue connector between the stages: a chevron on the dark ground, in the gap rather than over a card. The return path below carries no chevron. */ .hpv4-flow > li { position: relative; } .hpv4-flow > li + li:not(.hpv4-return)::before { content: ""; position: absolute; left: -22px; top: calc(50% - 5px); width: 9px; height: 9px; border-top: 1.5px solid #AFC4DD; border-right: 1.5px solid #AFC4DD; transform: rotate(45deg); } /* The labelled exception return: out of the check, back along the row and up into the sources it came from. Orthogonal segments only, and the label sits clear of the line rather than on it. */ .hpv4-return { grid-column: 1 / 4; grid-row: 2; /* The horizontal segment sits in this padding, 26px clear of the stage cards above it; the two risers occupy the same band. */ padding-top: 26px; display: flex; flex-direction: column-reverse; } .hpv4-return__label { margin: 0; } .hpv4-return__line { display: block; height: 0; /* 9px clear of the label below, so the label never sits on the path. */ margin-bottom: 9px; border-top: 1.5px dashed rgba(175,196,221,.55); } /* Left riser, up into the sources column, with its arrowhead. The risers hang off the row rather than off the line, so the draw animation below can clip the horizontal segment without clipping them. */ .hpv4-return::before { content: ""; position: absolute; left: 0; top: 0; height: 26px; border-left: 1.5px dashed rgba(175,196,221,.55); } .hpv4-return__head { position: absolute; left: -4px; top: -1px; width: 8px; height: 8px; border-left: 1.5px solid #AFC4DD; border-top: 1.5px solid #AFC4DD; transform: rotate(45deg); } /* Right riser, down out of the check stage. */ .hpv4-return::after { content: ""; position: absolute; right: 0; top: 0; height: 26px; border-right: 1.5px dashed rgba(175,196,221,.55); } /* The one drawn segment of the entry sequence: the return path traces back from the check towards the sources, once, in step with the node stagger. */ @keyframes hpv4-return-draw { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } } [data-bl-animate].is-armed .hpv4-return__line { clip-path: inset(0 0 0 100%); } [data-bl-animate].is-armed.is-live .hpv4-return__line { animation: hpv4-return-draw 760ms var(--bl-ease) both; animation-delay: calc(var(--i, 0) * 120ms); } [data-bl-animate].is-settled .hpv4-return__line { clip-path: none !important; animation: none !important; } /* On the page each node shows its name. The expanded view is the same figure with the supporting rows revealed. */ .hpv4-sys .bl-node__detail { display: none; } .hp8-dialog .bl-node__detail { display: block; list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(35,42,49,.14); } .hp8-dialog .bl-node__detail li { font-size: 14.5px; line-height: 1.5; color: #586069; } .hp8-dialog .bl-node__detail li + li { margin-top: 8px; } .hpv4-sys__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(22px, 2.4vw, 30px); padding-top: 18px; border-top: 1px solid rgba(250,250,248,.14); } /* The expanded view inside the dialog: larger type and room to read the rows, same subject, same node names, same theme. */ .hp8-dialog .hp8-dialog__body { padding: clamp(28px, 3vw, 44px); } .hp8-dialog .bl-diagram--expanded { margin: 0; } .hp8-dialog .hpv4-flow { column-gap: 40px; } .hp8-dialog .bl-node__label { font-size: 18px; } @media (max-width: 1099px) { .hpv4-flow, .hp8-dialog .hpv4-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 24px; } .hpv4-flow > li + li:not(.hpv4-return)::before { display: none; } /* Two stages per row: the return path runs under the whole block instead of under the first three columns. */ .hpv4-return { grid-column: 1 / -1; grid-row: auto; } } @media (max-width: 639px) { .hpv4-flow, .hp8-dialog .hpv4-flow { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 16px; } } @media (max-width: 1023px) { .hpv3-outcomes__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 899px) { .hpv3-outcomes { padding: clamp(38px, 8vw, 56px) 0; } .hpv3-outcomes__inner { padding: 0 24px; } } /* ----------------------------------------------------- 5. starting points */ .hpv3-start { background: #FAFAF8; padding: clamp(56px, 7vw, 88px) 0; } .hpv3-start__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; } .hpv3-start__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); } .hpv3-start__lead { margin: 18px 0 0; max-width: 62ch; font-size: 17.5px; line-height: 1.6; color: #586069; } .hpv3-start__grid { margin-top: clamp(28px, 3.2vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } .hpv3-offer { display: flex; flex-direction: column; padding: 28px; } .hpv3-offer__icon { color: #1B3A5B; margin-bottom: 18px; } .hpv3-offer h3 { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; color: #232A31; } .hpv3-offer p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: #586069; } .hpv3-offer__link { margin-top: 20px; align-self: flex-start; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 16px; color: #1B3A5B; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #AFC4DD; } .hpv3-offer__link:hover { color: #17314D; text-decoration-color: #1B3A5B; } /* Partnership ribbon: the shared flat-slate .bl-ribbon, spaced under the three starting-point cards. The blue gradient panel was removed on 11 Sep 2026, and v5 decision 4 gives the shared .bl-ribbon its own padding and its heading/action grid, so this file only spaces it under the cards. */ .hpv4-partner { margin-top: 28px; } @media (max-width: 899px) { .hpv3-start { padding: clamp(38px, 8vw, 56px) 0; } .hpv3-start__inner { padding: 0 24px; } .hpv3-start__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* ------------------------------------------------------------- 6. Map */ .hpv3-map { background: #FAFAF8; padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid #E5E5E2; } .hpv3-map__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center; } .hpv3-map__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); } .hpv3-map__body { margin: 18px 0 0; max-width: 46ch; font-size: 17.5px; line-height: 1.6; color: #586069; } .hpv3-map__note { margin: 22px 0 0; max-width: 52ch; font-size: 13.5px; line-height: 1.5; color: #586069; } /* True A4 proportions: page one large, pages two and three as thumbnails. */ .hpv3-pages { display: grid; grid-template-columns: minmax(0, 69fr) minmax(0, 31fr); gap: 18px; align-items: start; } .hpv3-pages__thumbs { display: grid; gap: 18px; } .hpv3-page { margin: 0; } .hpv3-page__frame { overflow: hidden; } .hpv3-page img { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: contain; background: #FAFAF8; border-radius: 8px; } .hpv3-page--lead img { border-radius: 12px; } .hpv3-page figcaption { margin-top: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #586069; } @media (max-width: 899px) { .hpv3-map { padding: clamp(38px, 8vw, 56px) 0; } .hpv3-map__inner { grid-template-columns: minmax(0, 1fr); padding: 0 24px; } } /* ------------------------------------------------ 6b. AI Systems Score */ /* Same band rhythm and type scale as the Map section above it. */ .hpv3-score { background: #FAFAF8; padding: clamp(48px, 6vw, 88px) 28px; } .hpv3-score__card { position: relative; overflow: hidden; max-width: 1264px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(36px, 5vw, 72px); background: linear-gradient(135deg, #232A31 0%, #1B3A5B 100%); color: #FAFAF8; border-radius: 20px; } .hpv3-score__card::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(175, 196, 221, 0.14); pointer-events: none; } .hpv3-score__visual { display: flex; flex-direction: column; align-items: center; gap: 28px; } .hpv3-score__ring { position: relative; width: min(260px, 60vw); aspect-ratio: 1; } .hpv3-score__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .hpv3-score__seg { fill: none; stroke: rgba(175, 196, 221, 0.18); stroke-width: 12; transition: stroke 380ms ease; } .hpv3-score.is-in .hpv3-score__seg { stroke: #AFC4DD; } .hpv3-score.is-in .hpv3-score__seg:nth-child(6), .hpv3-score.is-in .hpv3-score__seg:nth-child(7) { stroke: rgba(175, 196, 221, 0.18); } .hpv3-score__seg:nth-child(2) { transition-delay: 140ms; } .hpv3-score__seg:nth-child(3) { transition-delay: 280ms; } .hpv3-score__seg:nth-child(4) { transition-delay: 420ms; } .hpv3-score__seg:nth-child(5) { transition-delay: 560ms; } .hpv3-score__ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hpv3-score__ring-q { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(56px, 6vw, 80px); line-height: 1; color: #FAFAF8; } .hpv3-score__ring-of { margin-top: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #AFC4DD; } .hpv3-score__areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; max-width: 320px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 250, 248, 0.62); } .hpv3-score__areas li { display: inline-flex; align-items: center; gap: 7px; } .hpv3-score__dot { width: 6px; height: 6px; border-radius: 50%; background: #AFC4DD; opacity: .9; } .hpv3-score__copy { position: relative; z-index: 1; } .hpv3-score__h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(34px, 4vw, 56px); color: #FAFAF8; } .hpv3-score__h2 em { font-style: italic; color: #AFC4DD; } .hpv3-score__body { margin: 22px 0 0; max-width: 52ch; font-size: 17.5px; line-height: 1.6; color: rgba(250, 250, 248, 0.78); } .hpv3-score__facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .hpv3-score__facts li { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #FAFAF8; border: 1px solid rgba(175, 196, 221, 0.32); border-radius: 999px; padding: 8px 14px; } .hpv3-score__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 16px 26px; border-radius: 11px; background: #FAFAF8; color: #232A31; font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color .25s ease, transform .2s ease; } .hpv3-score__cta span { transition: transform .2s ease; } .hpv3-score__cta:hover { background: #E5E5E2; color: #232A31; transform: translateY(-1px); } .hpv3-score__cta:hover span { transform: translateX(4px); } .hpv3-score__cta:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 3px; } @media (max-width: 899px) { .hpv3-score { padding: clamp(32px, 8vw, 56px) 16px; } .hpv3-score__card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px; border-radius: 16px; } .hpv3-score__ring { width: 180px; } .hpv3-score__visual { order: 2; } } @media (prefers-reduced-motion: reduce) { .hpv3-score__seg, .hpv3-score__cta, .hpv3-score__cta span { transition: none; } } /* -------------------------------------------------- 7. calculator support */ .hpv3-calc { background: #FAFAF8; padding: 0 0 clamp(56px, 7vw, 88px); } .hpv3-calc__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; } .hpv3-calc__card { padding: clamp(26px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; } .hpv3-calc__h3 { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; color: #232A31; } .hpv3-calc__body { margin: 10px 0 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: #586069; } .hpv3-calc__link { flex: 0 0 auto; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 16px; color: #1B3A5B; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #AFC4DD; white-space: nowrap; } .hpv3-calc__link:hover { color: #17314D; text-decoration-color: #1B3A5B; } @media (max-width: 899px) { .hpv3-calc { padding: 0 0 clamp(38px, 8vw, 56px); } .hpv3-calc__inner { padding: 0 24px; } .hpv3-calc__card { grid-template-columns: minmax(0, 1fr); } .hpv3-calc__link { white-space: normal; } } /* --------------------------------------- 8. FAQ beside the daily series */ /* The form needs room for first name, work email and the button, so the newsletter column is the wider of the two and the fields stop wrapping into a three-up row before there is space for it. */ .hp8-later .hp8-later__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); } .hp8-later .hp8-course__row { gap: 16px; } @media (max-width: 1100px) { .hp8-later .hp8-later__grid { grid-template-columns: minmax(0, 1fr); } } /* ================================================================== Homepage refresh (23 Sep 2026, Kristian: brighter, friendlier, one flowing journey). Soft Light Blue tonal fields replace the hard section rules; cards lift and icons sit on tinted tiles. Six brand colours only. ================================================================== */ .hpv3-score__eyebrow { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #AFC4DD; } .hpv3-score__eyebrow::before { content: ''; width: 26px; height: 1px; background: #AFC4DD; } /* Hero: a Light Blue field and a halftone dot field behind the film */ .hp-hero { position: relative; overflow: hidden; } .hp-hero::before { content: ''; position: absolute; z-index: 0; right: -6vw; top: 8%; width: min(46vw, 640px); aspect-ratio: 1; border-radius: 50%; background: rgba(175, 196, 221, 0.28); pointer-events: none; } .hp-hero::after { content: ''; position: absolute; z-index: 0; right: 3vw; bottom: 6%; width: min(30vw, 420px); height: min(22vw, 300px); border-radius: 28px; background-image: radial-gradient(#1B3A5B 1.3px, transparent 1.6px); background-size: 16px 16px; opacity: .38; pointer-events: none; } .hp-hero > * { position: relative; z-index: 1; } /* Tools strip: soft card instead of two hard rules */ .hp-tools { border: 0 !important; } /* 01 Where AI helps: each outcome is a friendly card with its own icon */ .hpv3-outcomes { border-bottom: 0; } .hpv3-outcome { border-top: 0; position: relative; padding: 20px 22px 20px 78px; border-radius: 16px; background: rgba(175, 196, 221, 0.16); transition: background-color .25s ease, transform .25s ease; } .hpv3-outcome:hover { background: rgba(175, 196, 221, 0.28); transform: translateX(4px); } .hpv3-outcome__icon { position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #1B3A5B; color: #FAFAF8; } .hpv3-outcome__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* 02 Where to start: a tinted sheet so the section reads as its own step */ .hpv3-start { background: rgba(175, 196, 221, 0.18); margin: 0 clamp(8px, 1.4vw, 20px); border-radius: clamp(20px, 3vw, 36px); } .hpv3-offer { background: #FAFAF8; border: 1px solid rgba(35, 42, 49, 0.08); border-radius: 18px; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; } .hpv3-offer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #1B3A5B; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); } .hpv3-offer:hover { transform: translateY(-6px); border-color: rgba(27, 58, 91, 0.18); } .hpv3-offer:hover::before { transform: scaleX(1); } .hpv3-offer__icon { box-sizing: content-box; width: 24px; height: 24px; padding: 12px; border-radius: 14px; background: rgba(175, 196, 221, 0.42); color: #1B3A5B; } .hpv3-offer__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; text-decoration: none; } .hpv3-offer__link::after { content: '\2192'; transition: transform .2s ease; } .hpv3-offer:hover .hpv3-offer__link::after { transform: translateX(4px); } /* The partnership ribbon: flat Charcoal like every other dark surface (the signal gradient is reserved for the AI Systems Score), with connected Now, Next, Later steps */ .hpv4-partner .bl-ribbon__marks { gap: 8px; align-items: center; } .hpv4-partner .bl-ribbon__mark { padding: 7px 12px; border: 1px solid rgba(175, 196, 221, 0.4); border-radius: 999px; } .hpv4-partner .bl-ribbon__mark:first-child { background: rgba(175, 196, 221, 0.16); border-color: #AFC4DD; color: #FAFAF8; } .hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark { margin-left: 22px; position: relative; } .hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark::after { content: ''; position: absolute; left: -23px; top: 50%; width: 16px; height: 1px; background: rgba(175, 196, 221, 0.6); } .hpv4-partner .bl-ribbon__action a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 11px; background: #FAFAF8; color: #232A31; text-decoration: none; font-weight: 600; transition: background-color .25s ease, transform .2s ease; } .hpv4-partner .bl-ribbon__action a:hover { background: #AFC4DD; transform: translateY(-2px); } /* 03 Your Opportunity Map: no hard rule; the Map pages float on a soft field */ .hpv3-map { border-top: 0; position: relative; } .hpv3-map::before { content: ''; position: absolute; right: 0; top: 12%; bottom: 12%; width: 52%; border-radius: 36px 0 0 36px; background: rgba(175, 196, 221, 0.16); pointer-events: none; } .hpv3-map > * { position: relative; } /* 05 Your own figures: a tinted card with a button-weight link */ /* Daily series and FAQ: softer cards */ .hp8-later .hp8-faq { background: #FAFAF8; border-radius: 14px; } @media (max-width: 899px) { .hp-hero::before { width: 90vw; right: -40vw; top: auto; bottom: -10%; } .hp-hero::after { display: none; } .hpv3-outcome { padding: 18px 18px 18px 72px; } .hpv3-map::before { width: 100%; border-radius: 28px; top: 40%; bottom: 4%; } } @media (prefers-reduced-motion: reduce) { .hpv3-outcome, .hpv3-offer, .hpv3-offer::before, .hpv3-offer__link::after, .hpv4-partner .bl-ribbon__action a, .hpv3-calc__link { transition: none; } .hpv3-outcome:hover, .hpv3-offer:hover { transform: none; } } /* ---- Homepage polish (impeccable critique, 23 Sep 2026) ---- */ /* Fewer shouting labels: the tools caption and Score chips in sentence case */ body .hp-tools .hp-tools__heading { text-transform: none; letter-spacing: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 15px; color: #586069; } .hpv3-score__facts li { text-transform: none; letter-spacing: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; } /* Each service card shows what the client gets, so the three stop looking alike */ .hpv3-offer__art { list-style: none; margin: 22px 0 0; padding: 0; } .hpv3-offer__art--chips { display: flex; flex-wrap: wrap; gap: 8px; } .hpv3-offer__art--chips li { padding: 6px 12px; border-radius: 999px; background: rgba(175, 196, 221, 0.3); color: #1B3A5B; font-size: 14px; font-weight: 600; } .hpv3-offer__art--flow { display: flex; align-items: center; gap: 0; } .hpv3-offer__art--flow li { padding: 7px 11px; border: 1px solid rgba(27, 58, 91, 0.3); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #1B3A5B; background: #FAFAF8; white-space: nowrap; } .hpv3-offer__art--flow li:last-child { background: #1B3A5B; color: #FAFAF8; border-color: #1B3A5B; } .hpv3-offer__art--flow li + li { margin-left: 22px; position: relative; } .hpv3-offer__art--flow li + li::before { content: ''; position: absolute; left: -18px; top: 50%; width: 14px; height: 1.5px; background: #1B3A5B; } .hpv3-offer__art--doc { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid rgba(35, 42, 49, 0.14); border-radius: 10px; background: #FAFAF8; box-shadow: 6px 6px 0 rgba(175, 196, 221, 0.45); } .hpv3-offer__art--doc span { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #232A31; } .hpv3-offer__art--doc span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #1B3A5B; background: rgba(175, 196, 221, 0.35); flex: 0 0 auto; } @media (max-width: 600px) { .hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark { margin-left: 0; } .hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark::after { display: none; } } /* Equal service cards: same height, the "what you get" art in a fixed band, links aligned */ .hpv3-start__grid { align-items: stretch; } .hpv3-offer { height: 100%; } .hpv3-offer__art { min-height: 132px; align-content: flex-start; } .hpv3-offer__art--flow { align-items: flex-start; } .hpv3-offer__art--doc { min-height: 0; height: 132px; box-sizing: border-box; align-content: center; } @media (max-width: 899px) { .hpv3-offer__art, .hpv3-offer__art--doc { min-height: 0; height: auto; } } /* Journey bridges: each section hands the reader to the next step down the page */ .hp-bridge { margin: 26px 0 0; font-size: 17px; line-height: 1.5; color: #232A31; } .hp-bridge a { color: #1B3A5B; font-weight: 600; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; } .hp-bridge a:hover { text-decoration-color: #1B3A5B; } /* One matching panel for every card's "what you get" art, so the three cards line up */ .hpv3-offer__art, .hpv3-offer__art--doc { box-sizing: border-box; width: 100%; height: 132px; min-height: 0; margin: 22px 0 0; padding: 14px 16px; border: 1px solid rgba(35, 42, 49, 0.14); border-radius: 10px; background: #FAFAF8; box-shadow: 6px 6px 0 rgba(175, 196, 221, 0.45); } .hpv3-offer__art--chips { align-content: center; } .hpv3-offer__art--flow { justify-content: center; align-items: center; } .hpv3-offer__link { margin-top: auto; } @media (max-width: 899px) { .hpv3-offer__art, .hpv3-offer__art--doc { height: auto; min-height: 96px; } } /* ROI calculator section: copy beside a drawn slice of the calculator itself (no figures) */ body .hpv3-calc__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: clamp(20px, 3vw, 32px); background: rgba(175, 196, 221, 0.2); border: 0; } .hpv3-calc__eyebrow { margin: 0 0 14px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #1B3A5B; } .hpv3-calc__h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(30px, 3.4vw, 46px); color: #232A31; } .hpv3-calc__h2 em { font-style: italic; color: #1B3A5B; } body .hpv3-calc__body { margin: 18px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: #586069; } body .hpv3-calc__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 15px 24px; border-radius: 11px; background: #232A31; color: #FAFAF8; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, transform .2s ease; } body .hpv3-calc__link:hover { background: #1B3A5B; color: #FAFAF8; transform: translateY(-2px); } body .hpv3-calc__link span { transition: transform .2s ease; } body .hpv3-calc__link:hover span { transform: translateX(4px); } .hpv3-calc__tool { display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: #FAFAF8; border: 1px solid rgba(35, 42, 49, 0.08); } .hpv3-calc__slider { display: grid; gap: 10px; } .hpv3-calc__label { font-size: 14px; font-weight: 600; color: #232A31; } .hpv3-calc__track { position: relative; height: 6px; border-radius: 999px; background: #E5E5E2; } .hpv3-calc__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #1B3A5B; transition: width 900ms cubic-bezier(.2,.8,.2,1); } .hpv3-calc__fill::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #FAFAF8; border: 2px solid #1B3A5B; box-shadow: 0 2px 6px rgba(27, 58, 91, 0.25); } .hpv3-calc.is-in .hpv3-calc__slider:nth-child(1) .hpv3-calc__fill { width: 68%; } .hpv3-calc.is-in .hpv3-calc__slider:nth-child(2) .hpv3-calc__fill { width: 44%; transition-delay: 120ms; } .hpv3-calc.is-in .hpv3-calc__slider:nth-child(3) .hpv3-calc__fill { width: 56%; transition-delay: 240ms; } .hpv3-calc__result { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid #E5E5E2; } .hpv3-calc__range { position: relative; height: 14px; border-radius: 999px; background: #E5E5E2; } .hpv3-calc__band { position: absolute; top: 0; bottom: 0; left: 34%; width: 0; border-radius: 999px; background: #AFC4DD; border: 2px solid #1B3A5B; transition: width 900ms cubic-bezier(.2,.8,.2,1) 380ms; } .hpv3-calc.is-in .hpv3-calc__band { width: 38%; } .hpv3-calc__note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #586069; } .hp-hero__call { margin-top: 18px; } @media (max-width: 899px) { body .hpv3-calc__card { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .hpv3-calc__fill, .hpv3-calc__band { transition: none; } } /* Touch screens (24 Sep 2026, Emil Kowalski's motion rules): a tap leaves :hover stuck on, so the lifts and nudges above would stay raised after a tap. Hover motion runs only on a real mouse or trackpad. */ @media (hover: none), (pointer: coarse) { html body .hero-btn--primary:hover, html body .hero-btn--ghost:hover, html body .hero-btn--primary:hover svg, html body .hero-btn--ghost:hover svg, html body .hpv3-score__cta:hover, html body .hpv3-score__cta:hover span, html body .hpv3-outcome:hover, html body .hpv3-offer:hover, html body .hpv3-offer:hover .hpv3-offer__link::after, html body .hpv4-partner .bl-ribbon__action a:hover, html body .hpv3-calc__link:hover, html body .hpv3-calc__link:hover span { transform: none; } html body .hpv3-offer:hover::before { transform: scaleX(0); } html body .hpv3-offer:hover { box-shadow: none; } }