/* ========================================================================== RushMoney — Design System Fast. Simple. Secure. Palette derived from the brand logo gradient ramp: #7c3aed -> #5e48ec -> #2563eb (primary) #7c3aed -> #6058e7 -> #18a3d8 -> #06b6d4 (accent) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Work+Sans:wght@300;400;500;600;700&display=swap'); /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Brand */ --violet: #7c3aed; --violet-lo: #9a67f2; --indigo: #5e48ec; --blue: #2563eb; --blue-lo: #5b8bf5; --cyan: #06b6d4; --teal: #14b8a6; /* ---- Theming ------------------------------------------------------- Light is the default. Dark is opt-in via data-theme="dark" on , set by the toggle in the nav and persisted in localStorage. To make the theme follow the OS instead, see DEPLOY.md §8. -------------------------------------------------------------------- */ /* Surfaces */ --bg: #f5f6fb; --surface-soft: rgba(17, 24, 60, .035); --surface-strong: rgba(17, 24, 60, .055); --surface-hover: rgba(17, 24, 60, .085); --card-bg: linear-gradient(165deg, #ffffff 0%, #fbfcff 100%); --card-bg-2: linear-gradient(160deg, #ffffff 0%, #f3f5ff 100%); --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .3)); --footer-bg: linear-gradient(180deg, rgba(17, 24, 60, .04), transparent); --chip-bg: rgba(255, 255, 255, .92); --badge-bg: var(--grad-brand); --track: rgba(17, 24, 60, .14); --link: #1d4ed8; /* 6.3:1 on --bg */ --link-hover: #0e7490; --card-solid: #ffffff; /* opaque card — used where a photo sits behind */ --nav-bg: rgba(255, 255, 255, .7); --nav-bg-stuck: rgba(255, 255, 255, .93); --menu-bg: #ffffff; /* Ambient page wash */ --ambient: radial-gradient(900px 620px at 12% -8%, rgba(124, 58, 237, .14), transparent 62%), radial-gradient(820px 560px at 92% 4%, rgba(37, 99, 235, .12), transparent 60%), radial-gradient(700px 520px at 50% 108%, rgba(6, 182, 212, .1), transparent 62%); /* Text — --text-mute is 5.6:1 on --bg */ --text: #0f1430; --text-soft: #3a4066; --text-mute: #585d87; /* Lines */ --line: rgba(17, 24, 60, .12); --line-strong: rgba(17, 24, 60, .2); --line-hover: rgba(17, 24, 60, .34); /* Semantic — darkened for contrast on a light page */ --ok: #047857; --danger: #dc2626; --warn-fg: #8a5a06; --warn-bg: rgba(251, 191, 36, .2); --warn-br: rgba(160, 110, 10, .55); /* Elevation */ --sh-sm: 0 1px 2px rgba(17, 24, 60, .07); --sh-md: 0 12px 30px -14px rgba(17, 24, 60, .26); --sh-lg: 0 30px 60px -26px rgba(17, 24, 60, .34); --glow-violet: 0 16px 38px -16px rgba(124, 58, 237, .5); --glow-cyan: 0 16px 38px -16px rgba(6, 182, 212, .45); /* Gradients */ --grad-brand: linear-gradient(100deg, #7c3aed 0%, #5e48ec 42%, #2563eb 100%); --grad-accent: linear-gradient(120deg, #7c3aed 0%, #6058e7 30%, #18a3d8 78%, #06b6d4 100%); --grad-text: linear-gradient(96deg, #7c3aed 0%, #2563eb 52%, #0e8ba8 100%); /* Geometry */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Rhythm */ --shell: 1200px; --gutter: clamp(20px, 5vw, 40px); --section-y: clamp(72px, 10vw, 128px); /* Motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --t-fast: 160ms; --t-mid: 240ms; --t-slow: 420ms; /* Layers */ --z-base: 1; --z-raised: 10; --z-sticky: 20; --z-nav: 30; --z-overlay: 50; } /* -------------------------------------------------------------------------- 1b. Dark theme -------------------------------------------------------------------------- */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0a0a23; --surface-soft: rgba(255, 255, 255, .035); --surface-strong: rgba(255, 255, 255, .055); --surface-hover: rgba(255, 255, 255, .1); --card-bg: linear-gradient(165deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)); --card-bg-2: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); --footer-bg: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent); --chip-bg: rgba(255, 255, 255, .06); --badge-bg: linear-gradient(150deg, rgba(124, 58, 237, .3), rgba(6, 182, 212, .16)); --track: rgba(255, 255, 255, .12); --link: #5b8bf5; --link-hover: #22d3ee; --card-solid: #15163c; --nav-bg: rgba(10, 10, 35, .55); --nav-bg-stuck: rgba(7, 8, 28, .88); --menu-bg: #0b0b26; --ambient: radial-gradient(900px 620px at 12% -8%, rgba(124, 58, 237, .28), transparent 62%), radial-gradient(820px 560px at 92% 4%, rgba(37, 99, 235, .22), transparent 60%), radial-gradient(700px 520px at 50% 108%, rgba(6, 182, 212, .16), transparent 62%); --text: #f6f7fc; --text-soft: #c6c9e6; --text-mute: #9296bd; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16); --line-hover: rgba(255, 255, 255, .3); --ok: #34d399; --danger: #fb7185; --warn-fg: #fbbf24; --warn-bg: rgba(251, 191, 36, .13); --warn-br: rgba(251, 191, 36, .6); --grad-text: linear-gradient(96deg, #9a67f2 0%, #5b8bf5 48%, #22d3ee 100%); --sh-sm: 0 1px 2px rgba(0, 0, 0, .4); --sh-md: 0 12px 32px -12px rgba(0, 0, 0, .7); --sh-lg: 0 32px 64px -24px rgba(0, 0, 0, .8); --glow-violet: 0 18px 48px -18px rgba(124, 58, 237, .75); --glow-cyan: 0 18px 48px -18px rgba(6, 182, 212, .6); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } body { font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.7; color: var(--text-soft); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Ambient page glow — sits behind everything, never intercepts pointer events */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ambient); } img, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, h5 { font-family: 'Outfit', system-ui, sans-serif; color: var(--text); line-height: 1.12; letter-spacing: -.024em; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 6.2vw, 4.5rem); font-weight: 800; } h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.2vw, 1.65rem); } h4 { font-size: 1.1rem; letter-spacing: -.01em; } p { text-wrap: pretty; } a { color: var(--link); text-decoration: none; transition: color var(--t-fast) var(--ease-out); } a:hover { color: var(--link-hover); } ul, ol { padding-left: 1.15rem; } li { margin-block: .35rem; } strong, b { color: var(--text); font-weight: 600; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } ::selection { background: rgba(124, 58, 237, .55); color: #fff; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; } .section { position: relative; z-index: var(--z-base); padding-block: var(--section-y); } .section--tight { padding-block: clamp(52px, 7vw, 84px); } .section--panel { background: var(--panel-bg); border-block: 1px solid var(--line); } .stack > * + * { margin-top: var(--gap, 1rem); } .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .section-head { max-width: 700px; margin-bottom: clamp(34px, 5vw, 56px); } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { margin-top: 1rem; font-size: 1.06rem; color: var(--text-mute); } /* -------------------------------------------------------------------------- 4. Text utilities -------------------------------------------------------------------------- */ .grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .95rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-strong); backdrop-filter: blur(10px); font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(6, 182, 212, .7); animation: pulse-dot 2.4s var(--ease-out) infinite; } .lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--text-mute); max-width: 58ch; } .tnum { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--grad-brand); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .8rem 1.6rem; border-radius: var(--r-pill); font-family: 'Outfit', sans-serif; font-size: .98rem; font-weight: 600; letter-spacing: -.005em; color: #fff; background: var(--btn-bg); background-size: 180% 100%; background-position: 0% 50%; box-shadow: var(--glow-violet); cursor: pointer; overflow: hidden; isolation: isolate; transition: background-position var(--t-slow) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .btn:hover { color: #fff; background-position: 100% 50%; box-shadow: 0 22px 54px -16px rgba(124, 58, 237, .95); transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* sheen sweep */ .btn::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); transition: left var(--t-slow) var(--ease-out); } .btn:hover::after { left: 120%; } .btn--ghost { background: var(--surface-strong); border: 1px solid var(--line-strong); box-shadow: none; color: var(--text); backdrop-filter: blur(10px); } .btn--ghost:hover { background: var(--surface-hover); border-color: var(--line-hover); box-shadow: var(--sh-md); } .btn--accent { --btn-bg: var(--grad-accent); box-shadow: var(--glow-cyan); } .btn--accent:hover { box-shadow: 0 22px 54px -16px rgba(6, 182, 212, .8); } .btn--sm { min-height: 42px; padding: .55rem 1.15rem; font-size: .9rem; } .btn--lg { min-height: 58px; padding: 1rem 2.1rem; font-size: 1.06rem; } .btn--block { display: flex; width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; } .link-arrow { display: inline-flex; align-items: center; min-height: 44px; gap: .4rem; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--link); } .link-arrow svg { transition: transform var(--t-mid) var(--ease-out); } .link-arrow:hover svg { transform: translateX(4px); } /* -------------------------------------------------------------------------- 6. Cards -------------------------------------------------------------------------- */ .card { position: relative; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-bg); backdrop-filter: blur(14px); overflow: hidden; transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); } /* gradient hairline that lights up on hover */ .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-accent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--t-mid) var(--ease-out); pointer-events: none; } .card--hover { cursor: pointer; } .card--hover:hover, .card--hover:focus-within { transform: translateY(-6px); box-shadow: var(--sh-lg); } .card--hover:hover::before, .card--hover:focus-within::before { opacity: .9; } .card h3 { margin-bottom: .6rem; } .card p { color: var(--text-mute); font-size: .97rem; } /* Spotlight follows cursor — driven by --mx/--my set in main.js */ .card--spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, .22), transparent 68%); opacity: 0; transition: opacity var(--t-mid) var(--ease-out); pointer-events: none; } .card--spot:hover::after { opacity: 1; } .icon-badge { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1.15rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--badge-bg); color: #fff; transition: transform var(--t-mid) var(--ease-spring); } .icon-badge svg { width: 26px; height: 26px; } .card--hover:hover .icon-badge { transform: scale(1.08) rotate(-5deg); } /* -------------------------------------------------------------------------- 7. Navigation -------------------------------------------------------------------------- */ .nav { position: fixed; inset: 16px 16px auto; z-index: var(--z-nav); max-width: calc(var(--shell) + 48px); margin-inline: auto; padding: .65rem .75rem .65rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--nav-bg); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); display: flex; align-items: center; gap: 1rem; transition: background var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out); } .nav.is-stuck { background: var(--nav-bg-stuck); border-color: var(--line-strong); box-shadow: var(--sh-lg); } .nav__brand { display: flex; align-items: center; flex-shrink: 0; } .nav__brand img { height: 30px; width: auto; } /* Theme-aware lockup: the colour logo has a near-black wordmark, so the white-wordmark variant is swapped in for dark. */ .logo-dk { display: none; } :root[data-theme='dark'] .logo-lt { display: none; } :root[data-theme='dark'] .logo-dk { display: block; } .nav__links { display: flex; align-items: center; gap: .25rem; margin-left: auto; list-style: none; padding: 0; } .nav__links li { margin: 0; } .nav__links a { position: relative; display: block; padding: .5rem .85rem; border-radius: var(--r-pill); font-family: 'Outfit', sans-serif; font-size: .93rem; font-weight: 500; color: var(--text-soft); transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .nav__links a:hover { color: var(--text); background: var(--surface-hover); } .nav__links a[aria-current='page'] { color: var(--text); } .nav__links a[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; border-radius: 2px; background: var(--grad-accent); transform: translateX(-50%); } .nav__cta { flex-shrink: 0; } /* Theme toggle — sun and moon are stacked and cross-faded */ .theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-strong); color: var(--text-soft); transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .theme-toggle:hover { color: var(--text); background: var(--surface-hover); border-color: var(--line-hover); } .theme-toggle svg { grid-area: 1 / 1; width: 19px; height: 19px; transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-spring); } /* Light theme shows the moon (what you'd switch to); dark shows the sun. */ .theme-toggle .i-sun { opacity: 0; transform: rotate(-70deg) scale(.5); } .theme-toggle .i-moon { opacity: 1; transform: none; } :root[data-theme='dark'] .theme-toggle .i-sun { opacity: 1; transform: none; } :root[data-theme='dark'] .theme-toggle .i-moon { opacity: 0; transform: rotate(70deg) scale(.5); } .nav__toggle { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-strong); flex-shrink: 0; } .nav__toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear; } .nav__toggle span + span { margin-top: 4px; } .nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Scroll progress bar */ .scroll-bar { position: fixed; top: 0; left: 0; z-index: var(--z-overlay); height: 3px; width: 100%; transform: scaleX(var(--progress, 0)); transform-origin: 0 50%; background: var(--grad-accent); pointer-events: none; } /* -------------------------------------------------------------------------- 8. Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(130px, 17vw, 190px) clamp(64px, 8vw, 100px); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 64px); align-items: center; } /* Positioning context for the photo, the floating UI cards and the chips. */ .hero__visual { position: relative; width: min(400px, 82vw); margin-inline: auto; } /* --- Hero photograph --- */ .hero__photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--sh-lg), 0 0 90px -34px rgba(124, 58, 237, .8); background: var(--surface-soft); } .hero__photo img { width: 100%; height: 100%; object-fit: cover; } /* A brand-tinted wash keeps the photo sitting inside the palette rather than looking like a pasted-on stock image. */ .hero__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(124, 58, 237, .2) 0%, transparent 42%), linear-gradient(0deg, rgba(8, 9, 30, .55) 0%, transparent 46%); pointer-events: none; } /* "Approved" pill, top-left over the photo — fixed colours, it always sits on the image in both themes. */ .hero__badge { position: absolute; top: 16px; left: 16px; z-index: var(--z-raised); display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border-radius: var(--r-pill); background: rgba(10, 11, 34, .58); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(10px); font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 600; color: #fff; } .hero__badge i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: pulse-dot 2s var(--ease-out) infinite; } /* Disbursal card, overlapping the bottom-left corner. Opaque so it reads against both the photo and the page. */ .hero__paycard { position: absolute; left: -22px; bottom: -26px; z-index: var(--z-raised); width: min(248px, 74%); padding: 1rem 1.15rem 1.05rem; border-radius: var(--r-lg); background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: var(--sh-lg); } .hero__paycard::before { /* brand accent rail */ content: ''; position: absolute; top: 1rem; bottom: 1rem; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad-accent); } .hero__paycard small { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .hero__paycard strong { display: block; margin: .1rem 0 .5rem; font-family: 'Outfit', sans-serif; font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; } .hero__paycard-meta { display: flex; align-items: center; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--text-mute); } .hero__paycard-meta span:first-child { color: var(--text-soft); font-weight: 500; } .hero__paycard-meta span:nth-child(2) { margin-left: auto; } .hero h1 { margin-block: 1.35rem 1.35rem; } .hero .lede { margin-bottom: 2rem; } /* A 4-up grid rather than flex-wrap: the labels are uneven in width, so wrapping produced a ragged orphan row once the photo took more space. */ .hero__proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); } .hero__proof-item dt { font-family: 'Outfit', sans-serif; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .hero__proof-item dd { margin: .15rem 0 0; font-size: .79rem; line-height: 1.45; color: var(--text-mute); letter-spacing: .02em; } /* Decorative floating currency/coin chips */ .float-chip { position: absolute; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--chip-bg); backdrop-filter: blur(10px); font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--text); box-shadow: var(--sh-md); pointer-events: none; z-index: var(--z-raised); animation: bob 6s var(--ease-out) infinite; } /* -------------------------------------------------------------------------- 9. Phone mockup NOT CURRENTLY USED — the hero now leads with a photograph instead. Kept because it is a complete, working component: to go back to the device mockup, restore the .phone markup inside .hero__visual (see DEPLOY.md §8). -------------------------------------------------------------------------- */ .phone { position: relative; width: 100%; max-width: 300px; margin-inline: auto; aspect-ratio: 300 / 610; padding: 12px; border-radius: 44px; background: linear-gradient(160deg, #2b2c62, #0b0b24); border: 1px solid rgba(255, 255, 255, .16); box-shadow: var(--sh-lg), 0 0 90px -30px rgba(124, 58, 237, .85); } .phone::before { /* notch */ content: ''; position: absolute; top: 20px; left: 50%; width: 92px; height: 22px; border-radius: var(--r-pill); background: #06071c; transform: translateX(-50%); z-index: 3; } .phone__screen { position: relative; height: 100%; border-radius: 34px; background: linear-gradient(175deg, #12123a, #07081e); overflow: hidden; padding: 46px 18px 18px; display: flex; flex-direction: column; gap: 12px; } /* The device is dark in BOTH themes, so everything inside it uses fixed colours rather than the themed tokens. */ .phone__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--r-md); background: rgba(255, 255, 255, .05); font-size: .8rem; } .phone__row span:first-child { color: #9296bd; } .phone__row span:last-child { color: #f6f7fc; font-weight: 600; font-variant-numeric: tabular-nums; } .phone__amount { padding: 18px 14px; border-radius: var(--r-md); background: var(--grad-brand); box-shadow: var(--glow-violet); text-align: center; } .phone__amount small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .82); } .phone__amount strong { display: block; margin-top: 2px; font-family: 'Outfit', sans-serif; font-size: 1.85rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .phone__cta { margin-top: auto; padding: 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); text-align: center; font-family: 'Outfit', sans-serif; font-size: .87rem; font-weight: 600; color: #fff; } .phone__status { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: #34d399; } .phone__status i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: pulse-dot 2s var(--ease-out) infinite; } /* -------------------------------------------------------------------------- 10. Marquee (trust strip) -------------------------------------------------------------------------- */ .marquee { position: relative; overflow: hidden; padding-block: 1.15rem; border-block: 1px solid var(--line); background: var(--surface-soft); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; width: max-content; gap: 3rem; animation: slide-left 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: flex; align-items: center; gap: .55rem; font-family: 'Outfit', sans-serif; font-size: .92rem; font-weight: 500; color: var(--text-mute); white-space: nowrap; } .marquee__item svg { width: 18px; height: 18px; color: var(--cyan); flex-shrink: 0; } /* -------------------------------------------------------------------------- 11. Loan calculator -------------------------------------------------------------------------- */ .calc { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3.5vw, 44px); padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card-bg-2); backdrop-filter: blur(18px); box-shadow: var(--sh-lg); } .field { margin-bottom: 2rem; } .field:last-child { margin-bottom: 0; } .field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; } .field__head label { font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 500; color: var(--text-soft); } .field__value { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .field__scale { display: flex; justify-content: space-between; margin-top: .55rem; font-size: .78rem; color: var(--text-mute); font-variant-numeric: tabular-nums; } /* Range input. The input itself is 32px tall so it is a comfortable touch target on a phone; the visible 8px track is drawn on the track pseudo-element rather than on the input's own background. --fill is updated by main.js. */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; /* full-height touch target; the visible track is 8px */ background: transparent; cursor: pointer; outline-offset: 4px; } /* WebKit / Blink */ .range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, #7c3aed 0%, #6058e7 30%, #18a3d8 78%, #06b6d4 100%) 0 / var(--fill, 50%) 100% no-repeat, var(--track); } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -9px; /* centres the 26px thumb on the 8px track */ width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--violet); box-shadow: 0 4px 16px rgba(124, 58, 237, .8); cursor: grab; transition: transform var(--t-fast) var(--ease-spring); } .range::-webkit-slider-thumb:hover { transform: scale(1.16); } .range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.06); } /* Firefox */ .range::-moz-range-track { height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, #7c3aed 0%, #6058e7 30%, #18a3d8 78%, #06b6d4 100%) 0 / var(--fill, 50%) 100% no-repeat, var(--track); } .range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--violet); box-shadow: 0 4px 16px rgba(124, 58, 237, .8); cursor: grab; } .calc__out { display: flex; flex-direction: column; gap: .8rem; padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: linear-gradient(165deg, rgba(124, 58, 237, .2), rgba(6, 182, 212, .1)); } .calc__hero { padding-bottom: 1rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line-strong); } .calc__hero small { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); } .calc__hero strong { display: block; margin-top: .2rem; font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .calc__line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .93rem; } .calc__line dt { color: var(--text-mute); } .calc__line dd { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .calc__note { margin-top: .5rem; font-size: .78rem; line-height: 1.55; color: var(--text-mute); } /* -------------------------------------------------------------------------- 12. Steps -------------------------------------------------------------------------- */ .steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); counter-reset: step; } /* Connecting rail behind the step cards. The step numbers sit at the left of each column, so the rail runs from the first circle to the third rather than edge to edge; the transparent gradient stops soften both ends. */ .steps::before { content: ''; position: absolute; top: 46px; left: 2%; right: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--violet), var(--blue), var(--cyan), transparent); opacity: .45; } .step { position: relative; padding-top: 0; } .step__num { position: relative; z-index: var(--z-raised); display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 1.5rem; border-radius: 50%; background: var(--grad-brand); border: 5px solid var(--bg); box-shadow: var(--glow-violet); font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff; } .step h3 { margin-bottom: .55rem; } .step p { color: var(--text-mute); font-size: .97rem; } /* -------------------------------------------------------------------------- 13. Accordion (FAQ) -------------------------------------------------------------------------- */ .faq { display: grid; gap: .8rem; } .faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-soft); overflow: hidden; transition: border-color var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-out); } .faq__item.is-open { border-color: rgba(124, 58, 237, .55); background: rgba(124, 58, 237, .08); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%; padding: 1.15rem 1.35rem; text-align: left; font-family: 'Outfit', sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--text); cursor: pointer; transition: color var(--t-fast) var(--ease-out); } .faq__q:hover { color: var(--link); } .faq__icon { position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-out); } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--t-mid) var(--ease-out); } .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .is-open .faq__icon { background: var(--violet); transform: rotate(180deg); } .is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-out); } .is-open .faq__a { grid-template-rows: 1fr; } .faq__a > div { overflow: hidden; } .faq__a p { padding: 0 1.35rem 1.3rem; font-size: .97rem; color: var(--text-mute); } /* -------------------------------------------------------------------------- 14. CTA band -------------------------------------------------------------------------- */ .cta-band { position: relative; padding: clamp(40px, 6vw, 72px); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: radial-gradient(700px 340px at 20% 0%, rgba(124, 58, 237, .42), transparent 68%), radial-gradient(640px 320px at 88% 100%, rgba(6, 182, 212, .32), transparent 66%), var(--card-bg-2); text-align: center; overflow: hidden; } .cta-band h2 { max-width: 20ch; margin-inline: auto; } .cta-band p { max-width: 54ch; margin: 1.1rem auto 2rem; color: var(--text-soft); } .cta-band .btn-row { justify-content: center; } /* -------------------------------------------------------------------------- 15. Forms -------------------------------------------------------------------------- */ .form { display: grid; gap: 1.2rem; } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .form__group { display: flex; flex-direction: column; gap: .45rem; } .form__group label { font-family: 'Outfit', sans-serif; font-size: .89rem; font-weight: 500; color: var(--text-soft); } .form__group label .req { color: var(--danger); } .input { width: 100%; min-height: 50px; padding: .75rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-strong); color: var(--text); transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .input::placeholder { color: #6f739b; } .input:hover { border-color: var(--line-hover); } .input:focus { outline: none; border-color: var(--violet); background: var(--surface-hover); box-shadow: 0 0 0 4px rgba(124, 58, 237, .22); } textarea.input { min-height: 130px; resize: vertical; line-height: 1.6; } select.input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239296bd' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; } .input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(251, 113, 133, .18); } .form__error { display: none; font-size: .82rem; color: var(--danger); } .form__error.is-shown { display: block; } .form__note { font-size: .82rem; line-height: 1.6; color: var(--text-mute); } /* Honeypot — off-screen for humans, still filled in by naive bots. Not display:none, which some bots detect and skip. */ .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__status { display: none; padding: .9rem 1.1rem; border-radius: var(--r-sm); border: 1px solid rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .12); color: var(--ok); font-size: .93rem; } .form__status.is-shown { display: block; } .form__status--error { border-color: rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .1); color: var(--danger); } /* -------------------------------------------------------------------------- 16. Footer -------------------------------------------------------------------------- */ .footer { position: relative; z-index: var(--z-base); margin-top: clamp(60px, 8vw, 100px); border-top: 1px solid var(--line); background: var(--footer-bg); } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); padding-block: clamp(48px, 6vw, 72px); } .footer__brand img { height: 34px; width: auto; margin-bottom: 1.2rem; } .footer__brand p { font-size: .93rem; color: var(--text-mute); max-width: 34ch; } .footer h4 { margin-bottom: 1.1rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; } .footer ul { list-style: none; padding: 0; } .footer ul li { margin-block: .1rem; } /* inline-block + vertical padding gives each link a ~44px tap target instead of an 18px line box, which is unusable on a phone */ .footer ul a { display: inline-block; min-width: 44px; /* short labels like "FAQs" still get a full tap area */ padding-block: .8rem; font-size: .94rem; line-height: 1.35; color: var(--text-soft); } .footer ul a:hover { color: var(--link-hover); } .socials { display: flex; gap: .6rem; margin-top: 1.4rem; } .socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-strong); color: var(--text-soft); transition: transform var(--t-mid) var(--ease-spring), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .socials a:hover { transform: translateY(-3px); background: var(--grad-brand); color: #fff; border-color: transparent; } .socials svg { width: 19px; height: 19px; } .footer__legal { padding-block: 1.6rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--text-mute); } .footer__legal p + p { margin-top: .7rem; } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; border-top: 1px solid var(--line); font-size: .87rem; color: var(--text-mute); } .footer__bottom nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; } .footer__bottom nav a { display: inline-block; min-width: 44px; padding-block: .72rem; } /* -------------------------------------------------------------------------- 17. Page header (inner pages) -------------------------------------------------------------------------- */ .page-head { padding-block: clamp(128px, 15vw, 170px) clamp(38px, 5vw, 58px); text-align: center; } .page-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-block: 1.1rem .9rem; } .page-head p { max-width: 62ch; margin-inline: auto; color: var(--text-mute); } .breadcrumb { display: flex; justify-content: center; gap: .5rem; font-size: .85rem; color: var(--text-mute); } .breadcrumb a { display: inline-block; padding: .72rem .4rem; margin: -.72rem -.4rem; color: var(--text-mute); } .breadcrumb a:hover { color: var(--link-hover); } /* -------------------------------------------------------------------------- 18. Prose (legal / policy pages) -------------------------------------------------------------------------- */ .prose { max-width: 74ch; margin-inline: auto; font-size: 1.02rem; } .prose h2 { margin-top: 2.8rem; margin-bottom: .9rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); scroll-margin-top: 110px; } .prose h3 { margin-top: 1.9rem; margin-bottom: .6rem; font-size: 1.14rem; } .prose h2:first-child { margin-top: 0; } .prose p, .prose ul, .prose ol { margin-bottom: 1.1rem; color: var(--text-mute); } .prose li { margin-block: .5rem; } .prose li::marker { color: var(--violet-lo); } .callout { padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--violet); border-radius: var(--r-sm); background: rgba(124, 58, 237, .09); font-size: .95rem; } .callout strong { display: block; margin-bottom: .3rem; color: var(--text); } /* Placeholder token — makes unfilled company details impossible to miss */ .ph { padding: .1em .45em; border-radius: 4px; border: 1px dashed var(--warn-br); background: var(--warn-bg); color: var(--warn-fg); font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; font-size: .88em; font-weight: 600; white-space: nowrap; } /* -------------------------------------------------------------------------- 19. Misc components -------------------------------------------------------------------------- */ .pill-list { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; } .pill-list li { margin: 0; padding: .45rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-strong); font-size: .89rem; color: var(--text-soft); } .check-list { list-style: none; padding: 0; } .check-list li { position: relative; padding-left: 2rem; margin-block: .85rem; color: var(--text-mute); } .check-list li::before { content: ''; position: absolute; left: 0; top: .42em; width: 20px; height: 20px; border-radius: 50%; /* Tick on top, brand gradient underneath — first layer paints last. */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat, var(--grad-accent); } .check-list li strong { display: block; color: var(--text); } .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .stat { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-soft); text-align: center; } .stat dt { font-family: 'Outfit', sans-serif; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat dd { margin: .35rem 0 0; font-size: .89rem; color: var(--text-mute); } /* Data tables — wrapped in overflow-x on narrow screens */ .table { width: 100%; border-collapse: collapse; font-size: .95rem; } .table thead th { padding: .7rem .9rem; border-bottom: 1px solid var(--line-strong); font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); text-align: left; } .table tbody th { width: 42%; padding: .85rem .9rem; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--text); text-align: left; vertical-align: top; } .table tbody td { padding: .85rem .9rem; color: var(--text-mute); vertical-align: top; } .table tbody tr + tr th, .table tbody tr + tr td { border-top: 1px solid var(--line); } .table tbody tr { transition: background var(--t-fast) var(--ease-out); } .table tbody tr:hover { background: var(--surface-soft); } .table--wide tbody th { width: 26%; } .table--wide tbody td:first-of-type { width: 30%; color: var(--text); font-weight: 500; } @media (max-width: 680px) { .table, .table thead, .table tbody, .table tr, .table th, .table td { display: block; } .table thead { display: none; } .table tbody th { width: auto; padding-bottom: .2rem; } .table tbody td { padding-top: .2rem; } .table tbody tr { padding-block: .8rem; border-top: 1px solid var(--line); } .table tbody tr + tr th, .table tbody tr + tr td { border-top: 0; } .table--wide tbody th, .table--wide tbody td:first-of-type { width: auto; } } /* -------------------------------------------------------------------------- Photography -------------------------------------------------------------------------- */ .person-card { padding: 0; overflow: hidden; /* These borrow .card--hover for the lift, but they are not links — so don't promise a click with the cursor. */ cursor: default; } .person-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-soft); } .person-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); } .card--hover:hover .person-card__media img { transform: scale(1.06); } /* Scrim keeps the tag legible over any photo */ .person-card__media::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(8, 10, 30, .78)); pointer-events: none; } .person-card__tag { position: absolute; left: 14px; bottom: 12px; z-index: var(--z-raised); padding: .3rem .8rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); font-family: 'Outfit', sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #fff; } .person-card__body { padding: clamp(18px, 2.2vw, 26px); } .person-card__body h3 { margin-bottom: .45rem; font-size: 1.14rem; } .person-card__body p { font-size: .94rem; } /* Framed photo used beside body copy */ .media-frame { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .media-frame img { width: 100%; height: auto; display: block; } .media-frame__caption { position: absolute; inset: auto 16px 16px; padding: .85rem 1.1rem; border-radius: var(--r-md); background: rgba(10, 11, 34, .68); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: .9rem; } .media-frame__caption strong { display: block; font-family: 'Outfit', sans-serif; color: #fff; margin-bottom: .1rem; } /* "Coming soon" notice — stands in for content that does not exist yet, rather than inventing partner names or registration numbers. */ .coming-soon { max-width: 760px; margin-inline: auto; padding: clamp(26px, 3.4vw, 42px); border: 1px dashed var(--line-strong); border-radius: var(--r-xl); background: var(--surface-soft); text-align: center; } .coming-soon__badge { display: inline-block; padding: .38rem .95rem; border-radius: var(--r-pill); background: var(--grad-brand); box-shadow: var(--glow-violet); font-family: 'Outfit', sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #fff; } .coming-soon h3 { margin: 1.1rem 0 .7rem; } .coming-soon p { max-width: 62ch; margin-inline: auto; font-size: .97rem; color: var(--text-mute); } .contact-tile { display: flex; gap: 1rem; padding: clamp(18px, 2.2vw, 24px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-soft); } .contact-tile .icon-badge { width: 46px; height: 46px; margin-bottom: 0; flex-shrink: 0; } .contact-tile .icon-badge svg { width: 22px; height: 22px; } .contact-tile h3 { font-size: 1.02rem; margin-bottom: .25rem; } .contact-tile p { font-size: .93rem; margin: 0; } /* -------------------------------------------------------------------------- 20. Scroll reveal -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--delay, 0ms); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal='left'] { transform: translateX(-32px); } [data-reveal='right'] { transform: translateX(32px); } [data-reveal='zoom'] { transform: scale(.94); } /* -------------------------------------------------------------------------- 21. Keyframes -------------------------------------------------------------------------- */ @keyframes slide-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-16px) rotate(var(--rot, 0deg)); } } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, .6); } 70% { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); } } @keyframes spin-slow { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 22. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; text-align: center; } .hero .lede, .hero .eyebrow { margin-inline: auto; } .hero .btn-row { justify-content: center; } .hero__proof { max-width: 620px; margin-inline: auto; } /* Stacked layout keeps the headline first — the device mockup follows the copy rather than pushing it below the fold. */ .hero__visual { margin-top: clamp(32px, 7vw, 56px); } .calc { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .nav__links { position: absolute; inset: calc(100% + 10px) 0 auto; flex-direction: column; align-items: stretch; gap: .2rem; padding: .75rem; border: 1px solid var(--line-strong); border-radius: var(--r-lg); /* Fully opaque, and deliberately no backdrop-filter: this panel escapes the rounded bounds of .nav, which is itself blurred. Nesting a second backdrop-filter there makes Chrome composite the page through the panel. */ background: var(--menu-bg); box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility var(--t-mid); } .nav__links.is-open { opacity: 1; visibility: visible; transform: none; } .nav__links a { padding: .8rem 1rem; border-radius: var(--r-sm); } .nav__links a[aria-current='page']::after { display: none; } .nav__links a[aria-current='page'] { background: rgba(124, 58, 237, .22); } .nav__toggle { display: grid; margin-left: auto; } .nav__cta { display: none; } .grid--3, .grid--2 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 1.4rem; } .steps::before { display: none; } .step { display: grid; grid-template-columns: auto 1fr; gap: 0 1.15rem; align-items: start; } .step__num { margin-bottom: 0; grid-row: span 2; width: 50px; height: 50px; font-size: 1.05rem; } .form__row { grid-template-columns: 1fr; } .float-chip { display: none; } .hero__visual { width: min(330px, 80vw); } /* keep the overlapping card inside the viewport once chips are gone */ .hero__paycard { left: 50%; transform: translateX(-50%); bottom: -22px; width: min(260px, 86%); } } @media (max-width: 560px) { body { font-size: 16px; } .footer__top { grid-template-columns: 1fr; } .grid--4, .stat-row { grid-template-columns: 1fr; } .hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1.5rem; } .btn--block-sm { display: flex; width: 100%; } } /* -------------------------------------------------------------------------- 23. Accessibility & print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .marquee__track { animation: none; } } .visually-hidden { 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; top: -100px; left: 16px; z-index: var(--z-overlay); padding: .8rem 1.3rem; border-radius: var(--r-sm); background: var(--violet); color: #fff; font-weight: 600; transition: top var(--t-mid) var(--ease-out); } .skip-link:focus { top: 16px; color: #fff; } @media print { body::before, .nav, .scroll-bar, .footer, .cta-band { display: none !important; } body { background: #fff; color: #000; } h1, h2, h3, h4 { color: #000; } }