/* ========================================================================= FinCraft — design system Navy and sky from the logo, with a warm gold reserved exclusively for conversion actions so a CTA is never competing with decoration. ========================================================================= */ :root { /* Brand */ --navy-900: #071e3f; --navy-800: #0b2e5f; --navy-700: #12417f; --navy-600: #1a539d; --sky-400: #7cbeeb; --sky-300: #a8d4f2; --sky-200: #cde5f8; --sky-100: #e8f2fb; --gold-600: #cf8b1f; --gold-500: #e8a33d; --gold-300: #f6d9a8; --green-600:#0d8542; --green-500:#12a150; /* Neutrals */ --ink: #0f172a; --body: #35435c; --muted: #5b6b82; --line: #e3eaf3; --surface: #f6f9fc; --white: #ffffff; /* Type */ --font-head: 'Plus Jakarta Sans', 'Montserrat', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Space + shape */ --container: 1200px; --narrow: 780px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(11, 46, 95, .06), 0 2px 8px rgba(11, 46, 95, .05); --shadow: 0 4px 12px rgba(11, 46, 95, .07), 0 12px 32px rgba(11, 46, 95, .07); --shadow-lg: 0 8px 24px rgba(11, 46, 95, .1), 0 24px 64px rgba(11, 46, 95, .12); --ease: cubic-bezier(.4, 0, .2, 1); } /* ------------------------------------------------------------------------- Base ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; /* clip, not hidden: clips stray horizontal overflow without turning into a scroll container, so the sticky header keeps working. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--ink); line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .6em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); font-weight: 800; } h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); font-weight: 700; } h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 700; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--navy-600); } img, svg, video { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy-800); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; color: #fff; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--narrow); } .icon { width: 1.25em; height: 1.25em; flex: none; } /* ------------------------------------------------------------------------- Buttons ---------------------------------------------------------------------- */ /* Sized so the rendered height lands at ~44px — the minimum reliable touch target. Trimming further would look tidier on desktop and be worse on a phone, which is where most of this traffic is. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: var(--font-head); font-size: .925rem; font-weight: 700; line-height: 1; padding: .8125rem 1.35rem; border: 1.5px solid transparent; border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn .icon { width: 1.05em; height: 1.05em; } .btn--lg { padding: .9375rem 1.7rem; font-size: .99rem; } .btn--sm { padding: .7rem 1.1rem; font-size: .875rem; min-height: 44px; } .btn--block { display: flex; width: 100%; } .btn--primary { background: var(--navy-800); color: #fff; box-shadow: 0 4px 14px rgba(11, 46, 95, .25); } .btn--primary:hover { background: var(--navy-700); color: #fff; box-shadow: 0 8px 22px rgba(11, 46, 95, .32); } .btn--gold { background: var(--gold-500); color: var(--navy-900); box-shadow: 0 4px 14px rgba(207, 139, 31, .35); } .btn--gold:hover { background: var(--gold-300); color: var(--navy-900); } .btn--ghost { background: var(--white); color: var(--navy-800); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--sky-400); color: var(--navy-700); background: var(--sky-100); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; } /* ------------------------------------------------------------------------- Topbar + header ---------------------------------------------------------------------- */ .topbar { background: var(--navy-900); color: var(--sky-200); font-size: .85rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; flex-wrap: wrap; } .topbar__rate { display: flex; align-items: center; gap: .5rem; margin: 0; } .topbar__rate .icon { width: 1rem; height: 1rem; color: var(--sky-400); } .topbar__rate strong { color: #fff; } .topbar__contact { display: flex; gap: 1.25rem; } .topbar__contact a { display: inline-flex; align-items: center; gap: .4rem; color: var(--sky-200); text-decoration: none; } .topbar__contact a:hover { color: #fff; } .topbar__contact .icon { width: 1rem; height: 1rem; } @media (max-width: 700px) { /* Keep the phone number visible and give it a real tap target — calling is the most valuable action on a mobile finance site, and collapsing it to a bare 16px icon made it almost untappable. The email link drops instead; it is repeated in the footer and on the contact page. */ .topbar__contact a[href^="mailto:"] { display: none; } .topbar__contact a { min-height: 44px; padding-inline: .25rem; } /* Forced onto one line. Left to wrap, this bar grew to 81px and pushed the whole page — and the open menu panel — down by an extra 40px, which is what tipped the nav off-screen on shorter handsets. The rate label truncates before it is ever allowed to take a second line. */ .topbar__inner { min-height: 44px; flex-wrap: nowrap; gap: .75rem; } .topbar__rate { font-size: .78rem; min-width: 0; overflow: hidden; white-space: nowrap; } .topbar__rate span { overflow: hidden; text-overflow: ellipsis; } .topbar__contact { flex: none; } } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .site-header.is-stuck { box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; } /* The inlined logo draws its primary elements in currentColor, so setting `color` here is what makes it navy on the light header. The footer sets white. One file, correct contrast in both places. --fc-logo-accent deepens the pale brand blue from #A8D4F2 to #7CBEEB on light backgrounds only: at 44px the original washes out to 1.6:1 against white. On the navy footer the true brand blue is left alone (10.6:1). To keep exact brand colour everywhere, delete the --fc-logo-accent line. */ .site-header__brand { display: flex; align-items: center; text-decoration: none; color: var(--navy-800); --fc-logo-accent: var(--sky-400); } .site-header__brand:hover { color: var(--navy-700); } .site-header__brand svg, .site-header__brand img { height: 44px; width: auto; } .primary-nav { display: flex; align-items: center; gap: 1.75rem; } /* The header CTA is navigation chrome, not a page CTA — it sat noticeably heavier than the links beside it. Tighter, but still a 44px tap target. */ .primary-nav__cta .btn { font-size: .875rem; padding: .75rem 1.2rem; min-height: 44px; } .primary-nav__list { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; } .primary-nav__list a { font-family: var(--font-head); font-size: .95rem; font-weight: 600; color: var(--navy-900); text-decoration: none; padding: .35rem 0; position: relative; } .primary-nav__list a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--sky-400); border-radius: 2px; transition: right .22s var(--ease); } .primary-nav__list a:hover::after, .primary-nav__list .current-menu-item > a::after { right: 0; } .primary-nav__list .current-menu-item > a { color: var(--navy-700); } /* Dropdowns */ .primary-nav__list .sub-menu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 230px; padding: .5rem; list-style: none; margin: .5rem 0 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s var(--ease); } .primary-nav__list .menu-item-has-children { position: relative; } .primary-nav__list .menu-item-has-children:hover > .sub-menu, .primary-nav__list .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .primary-nav__list .sub-menu a { display: block; padding: .6rem .75rem; border-radius: var(--radius-sm); } .primary-nav__list .sub-menu a::after { display: none; } .primary-nav__list .sub-menu a:hover { background: var(--sky-100); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 10px; border-radius: var(--radius-sm); } .nav-toggle__bars { display: block; position: relative; height: 100%; } .nav-toggle__bars span { position: absolute; left: 0; right: 0; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform .22s var(--ease), opacity .18s var(--ease); } .nav-toggle__bars span:nth-child(1) { top: 2px; } .nav-toggle__bars span:nth-child(2) { top: 50%; margin-top: -1px; } .nav-toggle__bars span:nth-child(3) { bottom: 2px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } @media (max-width: 1000px) { .nav-toggle { display: block; } /* backdrop-filter on an ancestor makes position:fixed resolve against THAT ancestor instead of the viewport. With it on .site-header, this panel was being laid out inside a 77px-tall box: it collapsed, showed one menu item floating over the page, and could not be dismissed. Dropped below 1000px, where the panel genuinely needs viewport-fixed positioning. */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } /* Closed panel is display:none rather than translated off-screen — a fixed element parked at translateX(100%) still widens the document and gives every phone a horizontal scrollbar. The slide-in is an animation on open instead, so nothing is ever positioned outside the viewport. inset:0 with a JS-measured padding-top, not a hardcoded offset: the top bar wraps to two lines on narrow screens, so the chrome height varies. */ .primary-nav { display: none; position: fixed; inset: 0; z-index: 95; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 1.5rem var(--gutter) 3rem; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; } .primary-nav.is-open { display: flex; animation: fc-nav-in .28s var(--ease); } @keyframes fc-nav-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .primary-nav__list > li { border-bottom: 1px solid var(--line); } /* 16px / 12px puts all seven items plus the CTA on screen without scrolling, down to a 667px-tall iPhone SE. At the previous 17.6px / 16px the last item and the button fell below the fold on smaller handsets and people simply did not know they were there. Each row is still ~51px, well above the 44px touch minimum. */ .primary-nav__list a { display: block; padding: .75rem 0; font-size: 1rem; } .primary-nav__list a::after { display: none; } .primary-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; margin: 0; } .primary-nav__cta { margin-top: 1.1rem; } .primary-nav__cta .btn { width: 100%; } body.nav-open { overflow: hidden; } } /* ------------------------------------------------------------------------- Hero ---------------------------------------------------------------------- */ .hero { position: relative; background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 46%, var(--navy-700) 100%); color: #fff; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem); } /* Orbit motif — a scaled echo of the logo mark. */ .hero__bg { position: absolute; inset: 0; background-image: radial-gradient(60rem 40rem at 78% 18%, rgba(168, 212, 242, .16), transparent 62%), radial-gradient(44rem 44rem at 8% 92%, rgba(124, 190, 235, .12), transparent 60%); pointer-events: none; } .hero__bg::before, .hero__bg::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(168, 212, 242, .22); } .hero__bg::before { width: 46rem; height: 46rem; right: -14rem; top: -12rem; border-top-color: rgba(168, 212, 242, .55); border-right-color: rgba(168, 212, 242, .55); } .hero__bg::after { width: 34rem; height: 34rem; right: -8rem; top: -5rem; border-bottom-color: rgba(255, 255, 255, .35); border-left-color: rgba(255, 255, 255, .35); } .hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-300); background: rgba(168, 212, 242, .12); border: 1px solid rgba(168, 212, 242, .25); padding: .5rem 1rem; border-radius: 999px; margin: 0 0 1.5rem; } .hero__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--sky-300); box-shadow: 0 0 0 0 rgba(168, 212, 242, .7); animation: fc-pulse 2.4s infinite; } @keyframes fc-pulse { 70% { box-shadow: 0 0 0 9px rgba(168, 212, 242, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 212, 242, 0); } } .hero__title { color: #fff; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); margin-bottom: 1.15rem; } .hero__text { font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); color: rgba(255, 255, 255, .84); max-width: 40ch; margin-bottom: 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.25rem; } .hero__trust { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .hero__trust li { display: flex; align-items: center; gap: .65rem; font-size: .95rem; color: rgba(255, 255, 255, .82); } .hero__trust .icon { color: var(--sky-300); width: 1.15rem; height: 1.15rem; } .hero__aside { display: grid; gap: 1.25rem; } .hero__figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .hero__figure img { width: 100%; object-fit: cover; } .hero__card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(168, 212, 242, .28); backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding: 1.75rem; } .hero__card-label { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-300); margin: 0 0 .5rem; } .hero__card-rate { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .85rem; } .hero__card-value { font-family: var(--font-head); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.03em; } .hero__card-unit { font-size: .95rem; color: rgba(255, 255, 255, .7); } .hero__card-note { font-size: .9rem; color: rgba(255, 255, 255, .72); margin-bottom: 1rem; } .hero__card-link { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--sky-300); text-decoration: none; } .hero__card-link:hover { color: #fff; } .hero__card-link .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); } .hero__card-link:hover .icon { transform: translateX(3px); } @media (max-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } .hero__text { max-width: none; } } /* ------------------------------------------------------------------------- Lenders strip ---------------------------------------------------------------------- */ .lenders { background: var(--white); border-bottom: 1px solid var(--line); padding-block: 1.75rem; } .lenders__label { text-align: center; margin: 0 0 1rem; font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* Nine lenders sit on one line at 1280px with ~30px to spare. The gap and pill padding were trimmed slightly to buy that back when SA Home Loans was added — at the previous .75rem/1.15rem the row broke onto a second line on standard laptops. Font size is untouched, so nothing got harder to read. */ .lenders__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; list-style: none; margin: 0; padding: 0; } .lenders__list span { display: block; padding: .55rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--navy-800); } /* ------------------------------------------------------------------------- Sections ---------------------------------------------------------------------- */ .section { padding-block: clamp(3.5rem, 7vw, 6rem); } .section--tinted { background: var(--surface); } .section__head { max-width: 60ch; margin: 0 auto clamp(2.25rem, 4vw, 3.25rem); text-align: center; } .section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; text-align: left; } .section__eyebrow { font-family: var(--font-head); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-600); margin: 0 0 .75rem; } .section__title { margin-bottom: .75rem; } .section__lede { font-size: 1.1rem; color: var(--muted); margin: 0; } @media (max-width: 760px) { .section__head--split { flex-direction: column; align-items: flex-start; } } /* ------------------------------------------------------------------------- Page hero ---------------------------------------------------------------------- */ .page-hero { background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); color: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; } .page-hero::after { content: ''; position: absolute; width: 32rem; height: 32rem; right: -12rem; top: -14rem; border-radius: 50%; border: 1px solid rgba(168, 212, 242, .2); border-top-color: rgba(168, 212, 242, .5); pointer-events: none; } .page-hero__title { color: #fff; position: relative; margin-bottom: .5rem; } .page-hero__lede { color: rgba(255, 255, 255, .8); font-size: 1.08rem; max-width: 62ch; margin: 0; position: relative; } .page-hero__search { margin-top: 1.5rem; max-width: 480px; } .breadcrumbs { margin-bottom: 1.1rem; font-size: .87rem; position: relative; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; } .breadcrumbs li + li::before { content: '/'; margin-right: .45rem; color: rgba(255, 255, 255, .4); } .breadcrumbs a { color: var(--sky-300); text-decoration: none; } .breadcrumbs a:hover { color: #fff; text-decoration: underline; } .breadcrumbs [aria-current] { color: rgba(255, 255, 255, .72); } /* ------------------------------------------------------------------------- Value cards ---------------------------------------------------------------------- */ .value__grid, .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; } .value__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.75rem; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .value__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-200); } .value__icon, .service-card__icon, .service-row__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.15rem; border-radius: 14px; background: linear-gradient(140deg, var(--sky-100), var(--sky-200)); color: var(--navy-800); } .value__icon .icon, .service-card__icon .icon, .service-row__icon .icon { width: 1.5rem; height: 1.5rem; } .value__title, .service-card__title { margin-bottom: .55rem; } .value__text, .service-card__text { color: var(--muted); font-size: .98rem; margin: 0; } /* ------------------------------------------------------------------------- Service cards ---------------------------------------------------------------------- */ .service-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.75rem; scroll-margin-top: 110px; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-200); } .service-card__text { flex: 1; margin-bottom: 1.25rem; } .service-card__link { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 700; font-size: .93rem; color: var(--navy-700); text-decoration: none; } .service-card__link .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); } .service-card__link:hover .icon { transform: translateX(3px); } /* Services page rows */ .service-list { display: grid; gap: 1.25rem; } .service-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; scroll-margin-top: 110px; } .service-row__aside { display: grid; justify-items: center; gap: .6rem; } .service-row__num { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--sky-400); } .service-row__icon { margin-bottom: 0; } .service-row__text { color: var(--muted); margin-bottom: 1.25rem; } @media (max-width: 640px) { .service-row { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.5rem; } .service-row__aside { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } } /* ------------------------------------------------------------------------- Process ---------------------------------------------------------------------- */ .process__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.75rem; counter-reset: step; } .process__step { position: relative; padding-top: 1.5rem; } .process__step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sky-400), var(--sky-200)); } .process__num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--sky-300); margin-bottom: .75rem; letter-spacing: -.04em; } .process__title { font-size: 1.15rem; margin-bottom: .5rem; } .process__text { color: var(--muted); font-size: .97rem; margin: 0; } /* ------------------------------------------------------------------------- Stats ---------------------------------------------------------------------- */ .stats { background: var(--navy-900); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem); } .stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem; margin: 0; } .stats__item { text-align: center; } .stats__value { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--sky-300); line-height: 1; letter-spacing: -.03em; margin-bottom: .6rem; } .stats__label { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .72); max-width: 24ch; margin-inline: auto; } /* ------------------------------------------------------------------------- Calculators ---------------------------------------------------------------------- */ .calc-stack { display: grid; gap: 2rem; } .calc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; scroll-margin-top: 110px; } .calc__head { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, var(--sky-100), transparent 70%); } .calc__icon { width: 2rem; height: 2rem; color: var(--navy-700); flex: none; } .calc__title { font-size: 1.3rem; margin: 0 0 .2rem; } .calc__sub { margin: 0; font-size: .95rem; color: var(--muted); } .calc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 0; } /* min-width:0 on the grid items, and the tracks above use minmax(0, 1fr). Without both, a number input's intrinsic width (~227px) sets a min-content floor that pushes these panels wider than the card on small phones. */ .calc__inputs, .calc__results { min-width: 0; } .calc__inputs { padding: 1.75rem; display: grid; gap: 1.25rem; align-content: start; } .calc__field label { display: block; margin-bottom: .45rem; font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--ink); } .calc__input { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); overflow: hidden; } .calc__input:focus-within { border-color: var(--sky-400); box-shadow: 0 0 0 4px rgba(124, 190, 235, .18); } .calc__affix { display: grid; place-items: center; padding-inline: .85rem; background: var(--surface); border-right: 1px solid var(--line); font-weight: 600; font-size: .95rem; color: var(--muted); } .calc__affix--end { border-right: 0; border-left: 1px solid var(--line); } .calc__input input { /* width:0 with flex-grow, rather than relying on min-width alone — a bare number input otherwise contributes its default ~20-character width to intrinsic sizing and overflows narrow screens. */ flex: 1 1 0; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; padding: .8rem .9rem; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--ink); } .calc__input input::-webkit-outer-spin-button, .calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc__input input[type=number] { -moz-appearance: textfield; } .calc__help { margin: .45rem 0 0; font-size: .84rem; color: var(--muted); line-height: 1.5; } .calc__field--check label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; font-family: var(--font-body); font-size: .95rem; cursor: pointer; } .calc__field--check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--navy-700); } .calc__results { padding: 1.75rem; background: linear-gradient(165deg, var(--navy-800), var(--navy-900)); color: #fff; } .calc__headline { margin-bottom: 1.5rem; } .calc__headline-label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-300); margin-bottom: .4rem; font-family: var(--font-head); } .calc__headline-value { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; } .calc__breakdown { margin: 0; display: grid; gap: .1rem; } .calc__breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(168, 212, 242, .18); } .calc__breakdown dt { font-size: .9rem; color: rgba(255, 255, 255, .74); } .calc__breakdown dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: #fff; white-space: nowrap; } .calc__breakdown dd.is-positive { color: #7ee2a8; } .calc__meter { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .15); margin-bottom: 1.25rem; } .calc__meter-bar { height: 100%; border-radius: 999px; transition: width .3s var(--ease); background: var(--sky-300); } .calc__meter-bar.is-good { background: #4ade80; } .calc__meter-bar.is-warn { background: var(--gold-500); } .calc__meter-bar.is-over { background: #f87171; } .calc__note { margin: 1.25rem 0 0; font-size: .87rem; line-height: 1.55; color: rgba(255, 255, 255, .72); padding-top: 1rem; border-top: 1px solid rgba(168, 212, 242, .18); } @media (max-width: 860px) { .calc__body { grid-template-columns: minmax(0, 1fr); } } /* Lead form inside a calculator */ .calc__lead { padding: 1.5rem 1.75rem; background: var(--surface); border-top: 1px solid var(--line); } .calc__lead-intro { font-size: .93rem; color: var(--muted); margin-bottom: 1rem; } .calc__lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .65rem; margin-bottom: .9rem; } .calc__lead input[type=text], .calc__lead input[type=email], .calc__lead input[type=tel] { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .97rem; background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .calc__lead input:focus { outline: 0; border-color: var(--sky-400); box-shadow: 0 0 0 4px rgba(124, 190, 235, .18); } /* The whole label is clickable because the input sits inside it, but the box itself is bumped to 22px — a 16px checkbox is fiddly on a phone. */ .calc__consent { display: flex; align-items: flex-start; gap: .65rem; font-size: .85rem; color: var(--muted); line-height: 1.5; margin-bottom: .5rem; padding: .35rem 0; cursor: pointer; } .calc__consent input { margin-top: .1rem; width: 22px; height: 22px; flex: none; accent-color: var(--navy-700); cursor: pointer; } .calc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .calc__lead-status { margin: .75rem 0 0; font-size: .92rem; font-weight: 600; min-height: 1.4em; } .calc__lead-status.is-success { color: var(--green-600); } .calc__lead-status.is-error { color: #c0392b; } /* Confirmation panel — replaces the form once it submits successfully. */ .form-success { text-align: center; padding: 2.5rem 1.75rem; background: linear-gradient(165deg, #f2fbf5, #eaf7f0); border: 1px solid #bde5cd; border-radius: var(--radius-lg); animation: fc-success-in .35s var(--ease); } .form-success:focus { outline: none; } .form-success__icon { width: 56px; height: 56px; color: var(--green-500); margin: 0 auto 1.1rem; } .form-success__title { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); color: var(--navy-900); margin-bottom: .45rem; } .form-success__body { font-size: 1.05rem; color: var(--body); margin-bottom: .85rem; } .form-success__meta { font-size: .9rem; color: var(--muted); max-width: 46ch; margin-inline: auto; margin-bottom: 1rem; } .form-success__call { font-family: var(--font-head); font-weight: 700; font-size: .97rem; color: var(--navy-800); margin: 0; } .form-success__call a { color: var(--navy-700); text-decoration: none; } .form-success__call a:hover { text-decoration: underline; } @keyframes fc-success-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Inside a calculator the panel sits on the tinted lead strip. */ .calc .form-success { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } /* "Powered by FinCraft" strip at the foot of every calculator */ .calc__credit { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: .85rem 1.75rem; background: var(--navy-900); font-family: var(--font-head); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .7); } .calc__credit strong { color: #fff; font-weight: 800; letter-spacing: .02em; } .calc__credit-mark { display: inline-flex; color: #fff; } .calc__credit-mark svg { width: 18px; height: 18px; } .calc__disclaimer { margin-top: 1.5rem; font-size: .82rem; line-height: 1.6; color: var(--muted); max-width: 90ch; } .calc-section__more { text-align: center; margin-top: 2rem; } /* The other three calculators, linked from the homepage */ .calc-more { margin-top: 2.5rem; } .calc-more__title { text-align: center; font-size: 1.1rem; margin-bottom: 1.25rem; color: var(--ink); } .calc-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; } .calc-more__card { display: flex; align-items: center; gap: .9rem; padding: 1.15rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .calc-more__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sky-300); } .calc-more__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(140deg, var(--sky-100), var(--sky-200)); color: var(--navy-800); } .calc-more__icon .icon { width: 1.25rem; height: 1.25rem; } .calc-more__body { display: block; min-width: 0; } .calc-more__body strong { display: block; font-family: var(--font-head); font-size: .97rem; font-weight: 700; color: var(--ink); margin-bottom: .15rem; } .calc-more__body span { font-size: .85rem; color: var(--muted); line-height: 1.45; } .calc-more__arrow { flex: none; width: 1.1rem; height: 1.1rem; color: var(--navy-600); transition: transform .2s var(--ease); } .calc-more__card:hover .calc-more__arrow { transform: translateX(3px); } .calc-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; position: relative; } .calc-tabs__link { display: inline-block; padding: .55rem 1.1rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(168, 212, 242, .3); border-radius: 999px; font-family: var(--font-head); font-size: .9rem; font-weight: 600; color: #fff; text-decoration: none; transition: background-color .18s var(--ease); } .calc-tabs__link:hover { background: rgba(255, 255, 255, .2); color: #fff; } /* ------------------------------------------------------------------------- Enquiry form ---------------------------------------------------------------------- */ .enquiry { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); position: relative; } .enquiry__title { font-size: 1.5rem; margin-bottom: .5rem; } .enquiry__intro { color: var(--muted); font-size: .97rem; margin-bottom: 1.5rem; } .enquiry__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .enquiry__field--full { grid-column: 1 / -1; } .enquiry__field label { display: block; margin-bottom: .4rem; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--ink); } .enquiry__field input, .enquiry__field select, .enquiry__field textarea { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .98rem; color: var(--ink); background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .enquiry__field textarea { resize: vertical; min-height: 110px; } .enquiry__field :is(input, select, textarea):focus { outline: 0; border-color: var(--sky-400); box-shadow: 0 0 0 4px rgba(124, 190, 235, .18); } @media (max-width: 620px) { .enquiry__grid { grid-template-columns: minmax(0, 1fr); } .enquiry { padding: 1.5rem; } } /* ------------------------------------------------------------------------- Contact page ---------------------------------------------------------------------- */ .contact__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 2.5rem; align-items: start; } .contact__details-title { font-size: 1.25rem; } .contact__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.1rem; } .contact__list li { display: flex; gap: .9rem; align-items: flex-start; } .contact__list strong { display: block; font-family: var(--font-head); font-size: .85rem; color: var(--muted); font-weight: 600; } .contact__list a { font-weight: 600; text-decoration: none; } .contact__list a:hover { text-decoration: underline; } .contact__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sky-100); color: var(--navy-700); } .contact__areas { padding: 1.5rem; background: var(--surface); border-radius: var(--radius); margin-bottom: 1.5rem; } .contact__areas h3 { font-size: 1rem; margin-bottom: .5rem; } .contact__areas p { font-size: .93rem; color: var(--muted); margin-bottom: .5rem; } .contact__areas-note { font-size: .87rem; } .contact__map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .contact__map iframe { width: 100%; height: 280px; border: 0; display: block; } @media (max-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------------- FAQ ---------------------------------------------------------------------- */ .faq__list { display: grid; gap: .75rem; } .faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .faq__item[open] { border-color: var(--sky-300); box-shadow: var(--shadow-sm); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.5rem; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink); list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--navy-700); } .faq__chev { width: 1.25rem; height: 1.25rem; flex: none; color: var(--navy-600); transition: transform .22s var(--ease); } .faq__item[open] .faq__chev { transform: rotate(180deg); } .faq__a { padding: 0 1.5rem 1.35rem; color: var(--muted); font-size: .98rem; } .faq__a p:last-child { margin-bottom: 0; } .faq__title { text-align: center; margin-bottom: 1.75rem; } /* ------------------------------------------------------------------------- CTA band ---------------------------------------------------------------------- */ .cta-band { background: linear-gradient(140deg, var(--navy-800), var(--navy-900)); color: #fff; position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 4.5rem); } .cta-band::before { content: ''; position: absolute; width: 30rem; height: 30rem; left: -10rem; bottom: -16rem; border-radius: 50%; border: 1px solid rgba(168, 212, 242, .22); border-top-color: rgba(168, 212, 242, .55); } .cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; } .cta-band__content { max-width: 52ch; } .cta-band__title { color: #fff; margin-bottom: .6rem; } .cta-band__text { color: rgba(255, 255, 255, .8); margin: 0; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: .85rem; } /* ------------------------------------------------------------------------- Blog ---------------------------------------------------------------------- */ .layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; padding-block: clamp(2.5rem, 5vw, 4rem); align-items: start; } body.no-sidebar .layout { grid-template-columns: minmax(0, 1fr) 320px; } @media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } } .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; } .post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .post-card:hover .post-card__media img { transform: scale(1.04); } .post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .post-card__cat { font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-600); margin: 0 0 .6rem; } .post-card__title { font-size: 1.15rem; margin-bottom: .55rem; } .post-card__title a { color: var(--ink); text-decoration: none; } .post-card__title a:hover { color: var(--navy-700); } .post-card__excerpt { color: var(--muted); font-size: .95rem; flex: 1; } .post-meta { font-size: .84rem; color: var(--muted); margin: .75rem 0 0; } .side-cta { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #fff; border-radius: var(--radius-lg); padding: 1.75rem; position: sticky; top: 100px; } .side-cta__title { color: #fff; font-size: 1.25rem; margin-bottom: .5rem; } .side-cta__text { color: rgba(255, 255, 255, .78); font-size: .95rem; margin-bottom: 1.25rem; } .side-cta__link { display: block; margin-top: .9rem; text-align: center; color: var(--sky-300); font-size: .9rem; text-decoration: none; } .side-cta__link:hover { color: #fff; text-decoration: underline; } .widget { margin-bottom: 2rem; } .widget__title { font-size: 1.05rem; margin-bottom: .85rem; } .widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .widget a { text-decoration: none; } .widget a:hover { text-decoration: underline; } /* ------------------------------------------------------------------------- Prose ---------------------------------------------------------------------- */ .prose { font-size: 1.075rem; line-height: 1.75; color: var(--body); } .prose > * + * { margin-top: 1.15em; } .prose h2 { margin-top: 2em; } .prose h3 { margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: .4em; } .prose img { border-radius: var(--radius); } .prose blockquote { margin: 2em 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--sky-300); background: var(--sky-100); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.05rem; } .prose blockquote p:last-child { margin-bottom: 0; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose :is(th, td) { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; } .prose th { font-family: var(--font-head); background: var(--surface); } .prose--intro { margin-bottom: 2.5rem; font-size: 1.12rem; } .single__media { margin: -2rem auto 0; max-width: var(--container); position: relative; z-index: 2; } .single__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; } .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 2rem 0 0; } .tag-list a { display: inline-block; padding: .35rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; text-decoration: none; } .post-nav { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); font-weight: 600; } .post-nav a { text-decoration: none; } .post-nav a:hover { text-decoration: underline; } .pagination { margin-top: 2.5rem; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } .pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding-inline: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; } .pagination .page-numbers:hover { background: var(--sky-100); border-color: var(--sky-300); } .pagination .current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .empty { color: var(--muted); font-size: 1.05rem; } /* Partner + trust blocks */ .partner-block, .trust-block { margin-top: 3rem; padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); } .partner-block__title, .trust-block h2 { font-size: 1.3rem; margin-bottom: .85rem; } .trust-block__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .trust-block__list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .98rem; } .trust-block__list .icon { color: var(--green-500); width: 1.2rem; height: 1.2rem; margin-top: .15rem; } .error-404 { text-align: center; } .error-404__links { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: .6rem; } .error-404__links a { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; } .error-404__search { max-width: 420px; margin-inline: auto; } .search-form { display: flex; gap: .5rem; } .search-form input { flex: 1; padding: .75rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .97rem; } .search-form button { padding: .75rem 1.35rem; border: 0; border-radius: var(--radius-sm); background: var(--navy-800); color: #fff; font-family: var(--font-head); font-weight: 700; cursor: pointer; } .search-form button:hover { background: var(--navy-700); } /* ------------------------------------------------------------------------- Footer ---------------------------------------------------------------------- */ .site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .95rem; } .site-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .site-footer__logo { color: #fff; } .site-footer__logo svg { height: 84px; width: auto; } .site-footer__blurb { margin: 1.25rem 0 1.5rem; max-width: 42ch; } .site-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .site-footer__contact li { display: flex; gap: .65rem; align-items: flex-start; } .site-footer__contact .icon { color: var(--sky-400); width: 1.1rem; height: 1.1rem; margin-top: .2rem; } .site-footer__contact a { color: rgba(255, 255, 255, .82); text-decoration: none; } .site-footer__contact a:hover { color: #fff; text-decoration: underline; } .footer__heading { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; } .site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .site-footer__links a { color: rgba(255, 255, 255, .72); text-decoration: none; } .site-footer__links a:hover { color: var(--sky-300); } .site-footer__links--inline { display: flex; flex-wrap: wrap; gap: .4rem .9rem; } .site-footer__partner { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .site-footer__partner-label { font-size: .88rem; color: rgba(255, 255, 255, .6); } .site-footer__partner a { display: inline-flex; align-items: center; gap: .4rem; color: var(--sky-300); text-decoration: none; font-family: var(--font-head); } .site-footer__partner a:hover { color: #fff; } .site-footer__partner .icon { width: 1rem; height: 1rem; } .site-footer__legal { padding-top: 1.75rem; } .site-footer__disclaimer { font-size: .82rem; line-height: 1.65; color: rgba(255, 255, 255, .55); max-width: 100ch; } .site-footer__reg { font-size: .84rem; color: rgba(255, 255, 255, .68); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .87rem; } .site-footer__bottom p { margin: 0; } .site-footer__legal-list { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .site-footer__legal-list a { color: rgba(255, 255, 255, .68); text-decoration: none; } .site-footer__legal-list a:hover { color: #fff; text-decoration: underline; } @media (max-width: 900px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; } } /* WhatsApp floating button with speech bubble */ .whatsapp-cta { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2.5rem); } .whatsapp-fab { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, .4); transition: transform .2s var(--ease); } .whatsapp-fab:hover { transform: scale(1.07); color: #fff; } .whatsapp-fab .icon { width: 1.8rem; height: 1.8rem; } /* The bubble stays out of the way until the reader has scrolled past the hero — on a phone it would otherwise sit on top of the main hero CTA. */ .whatsapp-cta__bubble { position: relative; display: flex; align-items: flex-start; gap: .35rem; max-width: 15rem; padding: .7rem .6rem .7rem .95rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateX(12px) scale(.96); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .whatsapp-cta.is-bubble-visible .whatsapp-cta__bubble { opacity: 1; visibility: visible; transform: translateX(0) scale(1); } /* The tail, pointing at the button. */ .whatsapp-cta__bubble::after { content: ''; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #fff; border-right: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); } .whatsapp-cta__bubble-link { font-family: var(--font-head); font-size: .84rem; font-weight: 700; line-height: 1.35; color: var(--navy-800); text-decoration: none; } .whatsapp-cta__bubble-link:hover { color: var(--green-600); } .whatsapp-cta__close { position: relative; flex: none; width: 26px; height: 26px; padding: 6px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--muted); border-radius: 50%; } /* Extends the tap target to 44px without changing the visual size — the icon needs to stay small inside the bubble. */ .whatsapp-cta__close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .whatsapp-cta__close:hover { background: var(--surface); color: var(--ink); } .whatsapp-cta__close svg { width: 100%; height: 100%; } .whatsapp-cta.is-dismissed .whatsapp-cta__bubble { display: none; } @media (max-width: 420px) { .whatsapp-cta__bubble { max-width: 11.5rem; padding: .6rem .5rem .6rem .8rem; } .whatsapp-cta__bubble-link { font-size: .78rem; } .whatsapp-fab { width: 54px; height: 54px; } } /* ------------------------------------------------------------------------- Gated white papers ---------------------------------------------------------------------- */ .papers { margin-block: 2rem; } .papers__title { text-align: center; margin-bottom: 2rem; } .papers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; } .papers__note { margin-top: 1.5rem; text-align: center; font-size: .85rem; color: var(--muted); } .paper { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); } .paper__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .paper__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(140deg, var(--sky-100), var(--sky-200)); color: var(--navy-800); } .paper__icon .icon { width: 1.4rem; height: 1.4rem; } .paper__meta { font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .paper__title { font-size: 1.12rem; margin-bottom: .55rem; } .paper__desc { font-size: .93rem; color: var(--muted); flex: 1; margin-bottom: 1.25rem; } .paper__form { display: grid; gap: .6rem; } .paper__form input[type=text], .paper__form input[type=email], .paper__form input[type=tel], .paper__form select { width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .95rem; background: #fff; color: var(--ink); } .paper__form :is(input, select):focus { outline: 0; border-color: var(--sky-400); box-shadow: 0 0 0 4px rgba(124, 190, 235, .18); } .paper__form .calc__consent { margin: .2rem 0 .4rem; font-size: .8rem; } .form-success__download { margin: .35rem auto 1rem; display: inline-flex; } /* ------------------------------------------------------------------------- POPIA notice bar ---------------------------------------------------------------------- */ .privacy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 28px rgba(11, 46, 95, .12); animation: fc-privacy-in .35s var(--ease) .4s both; } .privacy-bar.is-hidden { display: none; } .privacy-bar__inner { max-width: var(--container); margin-inline: auto; padding: 1.1rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; } .privacy-bar__text { flex: 1 1 30ch; min-width: 0; font-size: .9rem; color: var(--muted); } .privacy-bar__text p { margin: 0; } .privacy-bar__title { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: .2rem !important; } .privacy-bar__text a { color: var(--navy-700); font-weight: 600; } /* Equal visual weight on both choices — steering people toward "accept all" is the pattern the Information Regulator objects to. */ .privacy-bar__actions { display: flex; gap: .6rem; flex-wrap: wrap; } @keyframes fc-privacy-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } /* Keep the WhatsApp button clear of the bar while it is on screen. */ body.has-privacy-bar .whatsapp-cta { bottom: 7.5rem; } @media (max-width: 700px) { .privacy-bar__inner { padding-block: .9rem; gap: .85rem; } .privacy-bar__actions { width: 100%; } .privacy-bar__actions .btn { flex: 1; } body.has-privacy-bar .whatsapp-cta { bottom: 10.5rem; } } /* POPIA collection notice beneath forms */ .collection-notice { margin-top: 1.25rem; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .84rem; line-height: 1.6; color: var(--muted); } .collection-notice p { margin-bottom: .6rem; } .collection-notice p:last-child { margin-bottom: 0; } .collection-notice strong { display: block; color: var(--ink); font-family: var(--font-head); } /* ------------------------------------------------------------------------- Print ---------------------------------------------------------------------- */ @media print { .topbar, .site-header, .site-footer, .cta-band, .whatsapp-fab, .calc__lead { display: none !important; } .calc__results { background: none !important; color: #000 !important; } .calc__breakdown dt, .calc__breakdown dd, .calc__headline-value, .calc__headline-label { color: #000 !important; } body { font-size: 11pt; } }