/* ========================================================================== Cash Buyers Direct — Design System ========================================================================== */ /* Self-hosted fonts (from fontsource). Variable-weight where possible. Preload hints for Fraunces + Inter live in each page's . */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/fraunces-wght-normal.woff2') format('woff2-variations'); } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('assets/fonts/fraunces-wght-italic.woff2') format('woff2-variations'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-wght-normal.woff2') format('woff2-variations'); } @font-face { font-family: 'Cal Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/cal-sans-400.woff2') format('woff2'); } :root { /* Colors (base — may be overridden by Tweaks) */ --charcoal: #2E2A27; --charcoal-2: #3A3632; --charcoal-3: #4A4541; --cream: #F5F0E8; --cream-2: #EBE4D7; --cream-3: #DDD3C1; /* Accent — derived from logo gradient (cyan → blue) */ --accent-cyan: #3ED1E0; /* gradient start */ --accent-blue: #5B8FFF; /* gradient end */ --accent-grad: linear-gradient(135deg, #3ED1E0 0%, #5B8FFF 100%); --mint: #4FB0EC; /* solid midpoint — safe for icons, checks, borders */ --mint-dark: #3A7FD9; /* deeper blue for hover / on-light */ --mint-tint: #E4F1FB; /* soft tint for badges, circle backgrounds */ --ink: #2E2A27; --ink-2: #5A544D; --ink-3: #8A8278; --line: rgba(46, 42, 39, 0.12); --line-2: rgba(46, 42, 39, 0.08); --line-cell: rgba(46, 42, 39, 0.22); /* Cream-on-dark alpha ramp (for text / rules on charcoal backgrounds) */ --cream-85: rgba(245, 240, 232, 0.85); --cream-82: rgba(245, 240, 232, 0.82); --cream-80: rgba(245, 240, 232, 0.80); --cream-78: rgba(245, 240, 232, 0.78); --cream-75: rgba(245, 240, 232, 0.75); --cream-70: rgba(245, 240, 232, 0.70); --cream-65: rgba(245, 240, 232, 0.65); --cream-60: rgba(245, 240, 232, 0.60); --cream-55: rgba(245, 240, 232, 0.55); --cream-50: rgba(245, 240, 232, 0.50); --cream-22: rgba(245, 240, 232, 0.22); --cream-18: rgba(245, 240, 232, 0.18); --cream-10: rgba(245, 240, 232, 0.10); --cream-08: rgba(245, 240, 232, 0.08); --cream-06: rgba(245, 240, 232, 0.06); /* Surface tokens — off-whites */ --surface-raised: #FFFDF8; /* card bg on cream */ --surface-input: #ffffff; /* form input bg */ --bg: var(--cream); --bg-dark: var(--charcoal); /* Type */ --serif: 'Fraunces', 'Georgia', serif; --sans: 'Inter', -apple-system, system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-btn: 'Cal Sans', 'Inter', system-ui, sans-serif; /* Spacing scale — the rhythm the whole site beats to. 4pt-based with semantic names, not pixel-named. Use these for padding, margin, gap everywhere; never arbitrary values. */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 56px; --space-3xl: 80px; --space-4xl: 120px; /* Section vertical rhythm — three tempos. Sections default to md; use .section-dense for punch (Credibility-style stat strips), .section-breath for key beats (post-hero, pre-footer). */ --section-pad-dense: clamp(var(--space-xl), 5vw, var(--space-2xl)); --section-pad: clamp(var(--space-2xl), 9vw, var(--space-3xl)); --section-pad-breath: clamp(var(--space-3xl), 12vw, var(--space-4xl)); /* Radii */ --radius-sm: 6px; --radius: 10px; --radius-lg: 18px; --radius-xl: 28px; /* Layout */ --container: 1280px; --gutter: clamp(18px, 5.5vw, 96px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } /* Typography ------------------------------------------------------------- */ /* Fraunces is a variable font with an optical-size axis (opsz, 9–144). Larger opsz values tighten joins and thin contrast strokes — intended for display. Smaller opsz values open joins and thicken thin strokes for readability at small sizes. Setting opsz explicitly gives each role the right cut; without it, browsers fall back to the default (which is usually tuned for small text). */ .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; font-variation-settings: "opsz" 28; } .mono { font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.02em; text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums; } .display { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5.4vw, 82px); line-height: 1.02; letter-spacing: -0.025em; font-variation-settings: "opsz" 128; /* display cut — tight joins, high contrast */ font-feature-settings: "ss01" 1; /* Fraunces stylistic set 1 — refined g */ } .h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4vw, 60px); line-height: 1.05; letter-spacing: -0.022em; font-variation-settings: "opsz" 72; } .h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.018em; font-variation-settings: "opsz" 48; } .h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.012em; font-variation-settings: "opsz" 24; } .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } .eyebrow.on-dark { color: var(--mint); } /* Logo-gradient text utility — use on italic headline accents */ .grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-2); } /* Layout ---------------------------------------------------------------- */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } section { padding: var(--section-pad) 0; } section.section-dense { padding: var(--section-pad-dense) 0; } section.section-breath { padding: var(--section-pad-breath) 0; } section.tight { padding: var(--section-pad-dense) 0; } /* legacy alias */ /* Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: "Cal Sans", "Inter", system-ui, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: -0.01em; padding: 14px 22px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-grad); color: #0B2646; } .btn-primary:hover { background: linear-gradient(135deg, #2FB8C8 0%, #4578EB 100%); } .btn-ghost-dark { background: transparent; color: var(--cream); border-color: rgba(245, 240, 232, 0.2); } .btn-ghost-dark:hover { border-color: var(--mint); color: var(--mint); } .btn-ghost-light { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost-light:hover { border-color: var(--ink); } .btn-lg { padding: 18px 28px; font-size: 16px; } /* Nav ------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 40; background: var(--charcoal); color: var(--cream); border-bottom: 1px solid rgba(255,255,255,0.06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; /* Logo stays flush-left; keep the gutter on the right so the phone CTA doesn't jam into the viewport edge. */ padding: 12px var(--gutter) 12px 0; gap: 24px; } /* Desktop logo sizing — shared between nav and footer so the two marks are symmetrical. Wordmark stays on the LOCK spec (26 px); icon runs at 96 px so the mark carries weight in the nav and bookends the footer at matching scale. */ .nav-logo .logo-icon, .footer-brand .logo-icon { width: 120px !important; height: 120px !important; margin-right: -30px !important; margin-top: 0 !important; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; } .nav-logo svg { flex-shrink: 0; } .nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: rgba(245, 240, 232, 0.8); } .nav-links a { text-decoration: none; transition: color .15s; white-space: nowrap; } .nav-links a:hover { color: var(--mint); } .nav-links a.active { color: var(--cream); } .nav-phone { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: rgba(79, 176, 236, 0.10); border: 1px solid rgba(79, 176, 236, 0.28); color: var(--cream); text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .nav-phone:hover { background: rgba(79, 176, 236, 0.18); border-color: rgba(79, 176, 236, 0.55); } .nav-phone-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: #0B2646; flex: 0 0 auto; } .nav-phone-text { display: inline-flex; flex-direction: column; line-height: 1; gap: 3px; } .nav-phone-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 240, 232, 0.72); font-weight: 700; } .nav-phone-number { font-family: "Cal Sans", "Inter", system-ui, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: -0.005em; color: var(--cream); font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; } .nav-phone-label { white-space: nowrap; } @media (max-width: 1080px) { .nav-links { gap: 20px; font-size: 13px; } /* Property-strip head: keep 2-col layout but force strict ratios so the headline wraps in col1 and the paragraph stays right in col2. */ .sit-head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; gap: 40px !important; } } @media (max-width: 1080px) { .nav-links { display: none; } } @media (max-width: 680px) { .nav-inner { padding: 10px 0; gap: 12px; } .nav-logo .logo-icon { width: 88px !important; height: 88px !important; margin-right: -22px !important; margin-top: 0 !important; } .nav-logo .logo-word { font-size: 22px !important; } .nav-phone { display: none; } } @media (max-width: 400px) { .nav-logo .logo-word { font-size: 15px !important; } } /* Mobile sticky CTA bar ------------------------------------------------- */ .mobile-cta { display: none; } @media (max-width: 680px) { .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(46, 42, 39, 0.96); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-top: 1px solid rgba(245, 240, 232, 0.12); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28); } .mobile-cta-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 14px; border-radius: var(--radius); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .mobile-cta-btn:active { transform: translateY(1px); } .mobile-cta-btn.primary { background: var(--accent-grad); color: #0B2646; } .mobile-cta-btn.secondary { background: transparent; color: var(--cream); border: 1px solid rgba(245, 240, 232, 0.22); } /* Reserve room under the fixed bar so footer content isn't obscured */ body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } } /* Footer ---------------------------------------------------------------- */ .footer { background: var(--charcoal); color: var(--cream); padding: clamp(64px, 8vw, 96px) 0 28px; } /* Top zone — brand + prominent single-action CTA on the right. Bookends the hero's "big statement + form" layout. */ .footer-top { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: clamp(40px, 5vw, 56px); } /* Footer icon size is unified with the nav via the shared selector above; wordmark follows the LOGO_LOCK default (26 px) so the two marks match. */ .footer-lede { margin: 8px 0 0; max-width: 44ch; font-size: 14px; line-height: 1.55; color: var(--cream-70); } .footer-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; } .footer-cta-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-55); } .footer-phone { display: inline-flex; align-items: center; gap: 12px; font-family: "Cal Sans", "Inter", system-ui, sans-serif; font-size: clamp(24px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.01em; color: var(--cream); text-decoration: none; font-feature-settings: "tnum" 1, "lnum" 1; transition: color .15s ease; } .footer-phone:hover { color: var(--mint); } .footer-phone-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(79, 176, 236, 0.16); flex: 0 0 auto; } /* Radar ping — subtle expanding ring that reads as "this is live, call us." GPU-only (transform + opacity). */ .footer-phone-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); pointer-events: none; animation: phone-dot-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes phone-dot-ping { 0% { transform: scale(1); opacity: 0.55; } 80% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .footer-phone-dot::after { animation: none; display: none; } } .footer-cta-btn { align-self: flex-end; } .footer-hr { border: 0; border-top: 1px solid var(--cream-10); margin: 0; } /* Middle zone — nav columns. */ .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 64px); padding: clamp(40px, 5vw, 56px) 0; } .footer-nav h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-50); margin: 0 0 18px; font-weight: 500; } .footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-nav a { color: var(--cream-85); text-decoration: none; font-size: 14px; transition: color .15s ease; } .footer-nav a:hover { color: var(--mint); } /* Bottom zone — micro bar. */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 12px; color: var(--cream-50); } .footer-tagline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } @media (max-width: 880px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-cta { align-items: flex-start; text-align: left; } .footer-cta-btn { align-self: flex-start; } .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 520px) { .footer { padding: 56px 0 24px; } .footer-nav { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; } .footer .logo-icon { width: 88px !important; height: 88px !important; margin-right: -22px !important; margin-top: 0 !important; } .footer .logo-word { font-size: 22px !important; } .footer-phone { font-size: 22px; } } /* Placeholder imagery --------------------------------------------------- */ .ph { position: relative; background: repeating-linear-gradient( 135deg, var(--cream-2) 0 12px, var(--cream-3) 12px 14px ); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; padding: 14px; } .ph.dark { background: repeating-linear-gradient( 135deg, #3A3632 0 12px, #2E2A27 12px 14px ); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); } .ph-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-3); background: var(--cream); padding: 4px 8px; border-radius: 4px; text-transform: uppercase; } .ph.dark .ph-tag { background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.7); } /* Utility ---------------------------------------------------------------- */ .muted { color: var(--ink-2); } .divider { height: 1px; background: var(--line); } /* Hero split layout — text left, form right at ≥1080 px so the form lands above the fold on 1366×768 small laptops. Below 1080 px the hero collapses to stacked/centered (the original treatment). */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .hero-copy { max-width: 640px; } .hero-form { width: 100%; } @media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 4vw, 64px); } .hero-copy { max-width: none; } .hero-form { max-width: 460px; justify-self: end; width: 100%; } .hero-section .display { text-align: left; /* "Don't clean a thing." italic at Fraunces needs ~8.2 × font-size of horizontal space. The text column lands at ~614 px at the widest viewports — cap the font at 68 so the line never wraps, even after sub-pixel kerning wobble. Scales 50 → 68 across the split range. */ font-size: clamp(50px, 4.5vw, 68px); } } @media (max-width: 999px) { .hero-grid { text-align: center; } .hero-copy { margin: 0 auto; } .hero-form { max-width: 560px; margin: 0 auto; } } /* Card baseline */ .card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; } /* Thank-you "have ready" cards collapse to 1 column on mobile */ @media (max-width: 680px) { .prep-grid { grid-template-columns: 1fr !important; } } /* Thank-you "what happens next" steps: 2-col desktop, stacked on mobile */ .ty-step { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; } @media (max-width: 680px) { .ty-step { grid-template-columns: 1fr; gap: 12px; align-items: start; } } /* Situation cards — interactive, lift on hover */ .sit-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .sit-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(46, 42, 39, 0.18); } /* "Jump to" anchor tiles on /situation */ .jump-card { transition: background .15s ease, border-color .15s ease, transform .15s ease; } .jump-card:hover { background: var(--cream-2) !important; border-color: var(--mint) !important; transform: translateX(2px); } .jump-card:hover span:last-child { transform: translateX(3px); } .jump-card span:last-child { transition: transform .15s ease; } /* Focus */ :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; } /* Form baseline --------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 500; color: var(--ink-2); } .field input[type="text"], .field input[type="email"], .field input[type="tel"] { font-family: var(--sans); font-size: 15px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-input); color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s; } .field input:focus { outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(79, 176, 236, 0.28); } .field input.error { border-color: #C04545; box-shadow: 0 0 0 3px rgba(192,69,69,0.1); } .field-error { color: #C04545; font-size: 12.5px; margin-top: 2px; } .check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; } .check input { margin-top: 2px; accent-color: var(--mint-dark); flex-shrink: 0; } .check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* Disclaimer chip */ .chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums lining-nums; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(79, 176, 236, 0.14); color: var(--mint-dark); border: 1px solid rgba(79, 176, 236, 0.28); } .chip.on-dark { background: rgba(79,176,236,0.16); color: var(--mint); border-color: rgba(79, 176, 236, 0.32); } /* Radar-ping pulse dot — used inside .chip and mobile hero chip */ .chip-dot { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--mint); flex-shrink: 0; } .chip-dot::before, .chip-dot::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--mint); animation: chip-dot-ping 3.6s cubic-bezier(0, 0, 0.2, 1) infinite; pointer-events: none; } .chip-dot::after { animation-delay: 1.8s; } @keyframes chip-dot-ping { 0% { transform: scale(1); opacity: 0.6; } 80% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } /* Hero entrance — staggered fade-rise on first paint. One orchestrated moment, not scattered micro-interactions. GPU-accelerated (transform + opacity only). Respects prefers-reduced-motion. */ @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .hero-rise { opacity: 0; animation: hero-rise 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: var(--hero-rise-delay, 0ms); } } /* Success checkmark — circle scales in, then the tick draws. Signals craft at the moment of arrival on /thank-you. Totally subtle: on reduced-motion this becomes an instant solid check. */ @keyframes check-circle-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes check-draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: no-preference) { .check-circle { animation: check-circle-in .45s cubic-bezier(0.22, 1, 0.36, 1) both; } .check-path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: check-draw .55s cubic-bezier(0.22, 1, 0.36, 1) .25s forwards; } } .btn-primary[disabled], .btn-primary[aria-busy="true"] { opacity: 0.75; cursor: wait; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .chip-dot::before, .chip-dot::after { animation: none; } }