/* ============================================================================ vendor-restyle-home.css — Segment B (Home + hero / landing surfaces) ---------------------------------------------------------------------------- Self-hosted, same-origin, additive restyle for the creditcorp.co.uk homepage hero + landing component blocks. Mirrors the beta's proven pre-styled component look (Laravel+Preline beta, box167 /srv/credicorp-beta-port) WITHOUT changing any markup, wording, brand marks, URLs or SEO. Scope of ownership (Segment B only): .home-hero* (the Swiper carousel + its slides/cards/CTAs), .home-stats / .home-stat, .home-products / .home-product, .home-how* (the four-step landing block). Shared shell (header/footer/nav = Segment A), product/tool pages (C) and content/legal/help pages (D) are NOT touched here. Why this file exists (jank it fixes): 1. CTA SIZE JITTER — hero slide 1 uses .btn--lg (min-height 48px, padding sp-3/sp-5, font fs-base) while slides 2-9 use .ui-btn--lg (min-height 3.25rem/52px, padding sp-3/sp-6, font 1.0625rem). As the carousel auto-advances the "primary" button visibly changes height/padding. The beta uses ONE canonical hero CTA. We normalise both button systems to a single vendor size across the hero so slides no longer jump. 2. INCONSISTENT CARD DEPTH/RADIUS — beta gives every "card" component the same rounded-xl radius + raised-then-float hover lift. The home cards (stat / product / how-step) already carry the skeu depth but with a mixed radius and no unified hover treatment on the stat cards. We align them onto one vendor card treatment. 3. GRID RHYTHM — even, roomier gutters on the product / stat / how grids to match the beta's denser-but-consistent landing rhythm. Load order: AFTER marketing.css + home.css (this overrides them). CSP: external same-origin file only — no inline, no CDN, no @import. Every value references a token already defined in marketing.css :root (all verified present). No new colours, no brand marks, no AI-generated art. ============================================================================ */ /* Vendor component scale mirrored from the beta (Tailwind rounded-lg/xl/2xl + the .skeu-card-hover lift). Prefixed so it can't leak into other segments. */ :root{ --vrh-radius-card: 0.75rem; /* beta rounded-xl on cards / panels */ --vrh-radius-panel: 1rem; /* beta rounded-2xl on hero figure / glass */ --vrh-lift: -4px; /* beta .skeu-card-hover translateY on cards */ --vrh-cta-min: 3.25rem; /* beta prominent hero CTA height (52px) */ } /* --------------------------------------------------------------------------- 1) HERO CTAs — one canonical vendor button size across ALL slides. The hero mixes .btn / .btn--lg (slide 1) with .ui-btn / .ui-btn--lg (slides 2-9). marketing.css already recolours both to green (primary) / glass (ghost) inside .home-hero; here we only unify their GEOMETRY so the button no longer resizes as the carousel advances. We match the larger .ui-btn--lg metrics (the beta's prominent hero CTA) as the single size. --------------------------------------------------------------------------- */ .home-hero .btn--lg, .home-hero .ui-btn--lg, .home-hero .btn--primary.btn--lg, .home-hero .ui-btn--primary.ui-btn--lg, .home-hero .btn--ghost.btn--lg, .home-hero .ui-btn--ghost.ui-btn--lg{ min-height:var(--vrh-cta-min); padding-block:var(--sp-3); padding-inline:var(--sp-6); font-size:1.0625rem; font-weight:700; border-radius:var(--r-md); line-height:1.2; } /* the two systems also differ in default label weight/letter-spacing; pin them equal so a green "Apply now" reads identically on every slide */ .home-hero .btn, .home-hero .ui-btn{ letter-spacing:0; } /* actions row: consistent gap + a touch more breathing room under it, matching the beta's hero action rhythm (kept additive, no layout restructure) */ .home-hero__actions{ gap:var(--sp-3); } /* --------------------------------------------------------------------------- 2) HERO "AT A GLANCE" GLASS CARD — nudge to the beta's rounded-2xl panel radius so the glass card matches the promo panels' corner treatment. (Purely the corner radius; the existing glass gradient / blur is kept.) --------------------------------------------------------------------------- */ .home-hero__card, .home-hero__promo-glass, .home-hero__promo-panel{ border-radius:var(--vrh-radius-panel); } /* --------------------------------------------------------------------------- 3) STAT CARDS — beta gives every card the same raised→float hover lift. The stat cards currently have the raised shadow but no hover treatment, so they read flatter than the product / how cards next to them. Add the same vendor hover the sibling cards already use, and unify the radius. --------------------------------------------------------------------------- */ .home-stat{ border-radius:var(--vrh-radius-card); } .home-stat:hover{ transform:translateY(var(--vrh-lift)); box-shadow:var(--skeu-shadow-hover, var(--skeu-shadow-raised-lg)); border-color:var(--c-border); } /* even, roomier stat gutter to match the beta grid rhythm */ .home-stats__grid{ gap:var(--sp-5) var(--sp-5); } /* --------------------------------------------------------------------------- 4) PRODUCT + HOW CARDS — unify radius onto the vendor rounded-xl and give the product cards the same stronger lift the beta uses on its clickable feature cards (they currently only get the shared raised shadow, no lift). --------------------------------------------------------------------------- */ .home-product, .home-how__step{ border-radius:var(--vrh-radius-card); } .home-product{ transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .home-product:hover{ transform:translateY(var(--vrh-lift)); box-shadow:var(--skeu-shadow-hover, var(--skeu-shadow-raised-lg)); border-color:var(--c-navy); } /* consistent, roomier gutters on the product + how grids (beta rhythm) */ .home-products__grid{ gap:var(--sp-6); } .home-how__steps{ gap:var(--sp-5); } /* product logo: keep it optically centred + capped like the beta feature card */ .home-product__logo{ max-width:180px; margin-inline:0; } /* --------------------------------------------------------------------------- 5) SECTION HEAD RHYTHM — the beta gives landing section heads a slightly tighter lede + consistent bottom rhythm. Additive nudge only. --------------------------------------------------------------------------- */ .home-section__head{ margin-bottom:var(--sp-6); } /* --------------------------------------------------------------------------- 6) DESKTOP GAP FIX — "quick check" budget-calc band marooned in a narrow column on desktop. marketing.css (PINNED, not edited) caps .home-calc__inner at --container-narrow (640px) by default, then 56rem (896px) from 820px up. On a 1920px viewport that leaves ~512px of pure dead background on each side of the card — the only home band still on the OLD narrow-promo width after Segment B's pass (which scoped .home-hero/.home-stats/.home-products/.home-how only). Every sibling full-bleed band (.home-hero__inner, .home-section, .home-ribbon, .home-compare__inner--rich) reads at --container-wide (1320px); the plain .home-illustrator-band__inner reads at --container-default (960px) and isn't even used on this page. Bring the calc card up to --container-default so its two-column slider/readout layout gets comfortable desktop width without stretching into an unreadably wide single form. Scoped to the >=820px breakpoint where the cascade above currently locks it to 56rem — mobile/tablet (already-audited, correct) are untouched. --------------------------------------------------------------------------- */ @media (min-width:820px){ .home-calc__inner{ max-width:var(--container-default); } } /* --------------------------------------------------------------------------- Reduced motion — never move on hover (matches the estate a11y baseline). --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .home-stat, .home-product{ transition:none; } .home-stat:hover, .home-product:hover{ transform:none; } }