/* ===================================================================== William Laflamme — mortgage broker site. "Warm & approachable" design system. Because every page extends base.html and loads this file, these tokens/components cascade site-wide. ===================================================================== */ :root { /* Brand green (kept) */ --primary: #055c2b; --primary-600: #0a6b38; --primary-hover: #044621; --primary-color: #055c2b; /* legacy alias, still referenced in places */ /* Warm accent (honey/amber) — the missing "warmth". --accent / --accent-600 are SURFACE colours (button and chip backgrounds). --accent-ink is the only one safe for TEXT or icons on a light background: --accent-600 on cream measures 3.08:1 and on --accent-soft 2.85:1, both below WCAG minimums. --accent-ink is 4.93:1 on cream, 4.57:1 on soft. */ --accent: #e0912f; --accent-600: #c77c1c; --accent-hover: #cf8018; --accent-ink: #9c5c0d; --accent-soft: #fbecd3; /* Warm neutrals (replace the cold greys) */ --cream: #faf6ef; --cream-2: #f3ebdd; --ink: #2b2823; --muted: #6f695f; --surface: #ffffff; --green-soft: #e8f1ea; /* Depth */ --shadow-sm: 0 2px 10px rgba(31, 27, 20, .05); --shadow: 0 14px 38px -14px rgba(31, 27, 20, .18); --shadow-hover: 0 22px 48px -16px rgba(31, 27, 20, .26); --radius: 18px; --radius-sm: 12px; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-head: 'Poppins', var(--font-body); } /* ---------- Base typography ---------- */ /* Large-gutter (g-5) rows protrude ~12px past the container padding on narrow screens, causing horizontal scroll. `clip` (not `hidden`) removes it without creating a scroll container, so position: sticky keeps working. */ html, body { overflow-x: clip; } /* Opening a modal made a strip appear down the right edge of the page. Bootstrap locks scrolling by setting overflow:hidden on and then pads right by the scrollbar's width, to compensate for the scrollbar it expects to vanish. Here it never vanishes: the viewport scrollbar belongs to , and clipping doesn't remove it (measured — the client width is identical before and after). So the padding compensates for nothing, every full-bleed section shrinks inside it, and body's cream background shows through against the dark footer and the green hero. The fixed cookie banner, which Bootstrap doesn't pad, then misaligns with everything else. Dropping the compensation is enough. Note this is NOT a job for scrollbar-gutter: stable — that reserves the gutter even on pages too short to scroll, which puts the same strip on the 404 permanently. Bootstrap sets these inline, hence !important. The .sticky-top rule is the matching half: Bootstrap pulls sticky elements out by the same width, which left the navbar hanging 15px past every other section. */ body { padding-right: 0 !important; } .sticky-top { margin-right: 0 !important; } body { background-color: var(--cream); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--font-head); letter-spacing: -.01em; } h1, h2 { font-weight: 700; } .lead { font-weight: 400; } .text-muted { color: var(--muted) !important; } a { text-decoration-thickness: .08em; text-underline-offset: .15em; } /* ---------- Icons (inline SVG, was the Bootstrap Icons webfont) ---------- Sized in em and filled with currentColor so an icon inherits font-size and colour from its parent exactly as the webfont glyph did — that's what lets utilities like .fs-2/.small, and inline font-size styles, keep working untouched. -.125em matches Bootstrap Icons' own baseline nudge. */ .bi { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; flex-shrink: 0; } /* ---------- Brand color utility overrides ---------- */ .bg-primary { background-color: var(--primary) !important; } .text-primary { color: var(--primary) !important; } .text-accent { color: var(--accent) !important; } .bg-cream { background-color: var(--cream) !important; } .bg-cream-2 { background-color: var(--cream-2) !important; } .btn { border-radius: 11px; font-weight: 600; } .btn-lg { padding: .7rem 1.5rem; } .btn-primary { background-color: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px -8px rgba(5, 92, 43, .55); } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); } /* Dark text on the amber, not white. White measured 2.54:1 — below the WCAG minimum of 3:1 even for large text — on the site's primary CTA. Ink on the same amber is 5.77:1, so the brand colour is unchanged and only the text flips. The hover shade is chosen to stay above 4.5:1 with ink (4.72:1); --accent-600 would drop it to 4.42:1. */ .btn-accent { background-color: var(--accent); border-color: var(--accent); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(224, 145, 47, .6); } .btn-accent:hover, .btn-accent:focus { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink); } .navbar-brand.text-primary:hover { color: var(--primary-hover) !important; } /* ---------- Navbar ---------- */ .navbar { box-shadow: 0 1px 0 rgba(31,27,20,.06), 0 6px 24px -20px rgba(31,27,20,.4); } .navbar .nav-link { font-weight: 500; } .navbar .nav-link:hover { color: var(--primary) !important; } /* ---------- Cards & depth ---------- */ .card { border-radius: var(--radius); border: 1px solid rgba(31, 27, 20, .05); box-shadow: var(--shadow-sm); background: var(--surface); transition: transform .18s ease, box-shadow .18s ease; } .card-hover:hover, a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } /* ---------- Icon chip (upgrades the thin generic icons) ---------- */ .icon-chip { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--primary); background: var(--green-soft); } .icon-chip.accent { color: var(--accent-ink); background: var(--accent-soft); } .icon-chip.lg { width: 66px; height: 66px; font-size: 1.9rem; } /* ---------- Section headings with an accent underline ---------- */ .section-eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .5rem; } .section-title { position: relative; } .section-title.center-underline::after { content: ""; display: block; width: 54px; height: 4px; border-radius: 4px; background: var(--accent); margin: .75rem auto 0; } /* ---------- Hero ---------- */ /* .hero-section is the legacy class other pages use; keep it an alias of .hero. */ .hero, .hero-section { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 15% -10%, var(--primary-600) 0%, transparent 60%), linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); } .hero-blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .18; pointer-events: none; } .hero-blob-1 { width: 340px; height: 340px; background: var(--accent); top: -120px; right: -60px; opacity: .22; } .hero-blob-2 { width: 260px; height: 260px; background: #fff; bottom: -120px; left: -80px; opacity: .08; } .hero-eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #ffe4bd; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: .32rem .8rem; border-radius: 999px; } .hero-pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: .86rem; font-weight: 500; padding: .38rem .8rem; border-radius: 999px; } .hero-pill .bi { color: #ffcf8a; } /* Hero visual card (illustrated placeholder — looks finished, no photo needed yet) */ .hero-visual { position: relative; border-radius: 22px; padding: 2rem; background: linear-gradient(160deg, #fff 0%, var(--cream) 100%); box-shadow: var(--shadow); } .hero-visual svg { width: 100%; height: auto; display: block; } .stat-chip { position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: .6rem .85rem; display: flex; align-items: center; gap: .55rem; } .stat-chip .icon-chip { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 10px; } .stat-chip .sc-num { font-family: var(--font-head); font-weight: 700; line-height: 1; color: var(--ink); } .stat-chip .sc-lbl { font-size: .72rem; color: var(--muted); } .stat-chip-tl { top: 8px; left: -18px; } .stat-chip-br { bottom: 10px; right: -14px; } @media (max-width: 575px) { .stat-chip-tl { left: 4px; } .stat-chip-br { right: 4px; } } /* ---------- Trust bar ---------- */ .trust-item { display: flex; align-items: center; gap: .6rem; justify-content: center; } .trust-item .icon-chip { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 11px; } /* ---------- Process timeline ---------- */ .process-step-num { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 1.25rem; font-family: var(--font-head); box-shadow: 0 0 0 6px var(--green-soft); position: relative; z-index: 1; } /* (6-step process now wraps to 2 rows, so no single-row connector line.) */ /* ---------- Meet William photo ---------- */ /* The tinted background shows only while the (lazy) image is still arriving — the aspect-ratio box is already reserved, so nothing reflows when it lands. */ .meet-photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--green-soft), var(--accent-soft)); } .meet-photo img, .about-photo { width: 100%; height: 100%; object-fit: cover; display: block; } /* In the About sidebar card the photo is the card's top edge, so it only needs rounding where the card rounds. Height comes from the intrinsic ratio. */ .about-photo { aspect-ratio: 4 / 5; height: auto; } .signature { font-family: var(--font-head); font-weight: 700; color: var(--primary); } /* ---------- Accordion ---------- */ .accordion-item { border-radius: var(--radius-sm) !important; overflow: hidden; margin-bottom: .6rem; border: 1px solid rgba(31,27,20,.08); } .accordion-button { font-weight: 600; } .accordion-button:not(.collapsed) { color: var(--primary); background-color: var(--green-soft); } .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(5, 92, 43, .15); } /* ---------- Calculator results panel ---------- */ @media (min-width: 992px) { .calc-results { position: sticky; top: 90px; } } /* ---------- Cookie banner ---------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; /* Must clear the sticky navbar (1020) but stay under the modal backdrop (1050) and the modal itself (1055). It was 1080 — Bootstrap's tooltip level — so it floated over an open modal, undimmed and looking clickable. */ background: #fff; border-top: 1px solid rgba(31,27,20,.1); z-index: 1035; box-shadow: 0 -8px 30px -18px rgba(31,27,20,.4); } /* ---------- Booking calendar overlay (pre-warmed Calendly) ---------- Hidden state is opacity + z-index ONLY. Never display:none, visibility:hidden or an off-screen offset: Calendly refuses to render a widget that isn't intersecting the viewport, and the whole point is that it renders early, out of sight, so the click has nothing left to wait for. See site.js. z-index sits above the modal layer (1055) since it is the topmost surface. */ .cal-warm { position: fixed; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(31, 27, 20, .55); opacity: 0; pointer-events: none; transition: opacity .15s ease; } .cal-warm.is-open { opacity: 1; pointer-events: auto; z-index: 1060; } .cal-warm__box { position: relative; width: min(960px, 100%); height: min(760px, 100%); background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .cal-warm__close { position: absolute; top: .6rem; right: .6rem; z-index: 2; background-color: #fff; border-radius: 50%; padding: .6rem; opacity: .85; } .cal-warm__close:hover { opacity: 1; } .cal-warm__host, .cal-warm__host > div, .cal-warm iframe { width: 100%; height: 100%; border: 0; } /* ---------- Extra spacing utility (Bootstrap stops at 5) ---------- */ .py-6 { padding-top: 5rem; padding-bottom: 5rem; } @media (min-width: 992px) { .py-lg-6 { padding-top: 5.5rem; padding-bottom: 5.5rem; } } /* ---------- Footer accent ---------- */ footer .link-light:hover { color: #fff !important; }