/* ========================================================================== Layout — container, grid, section rhythm, header/footer shells ========================================================================== */ /* --- Container --- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } .container--narrow { max-width: 820px; } /* --- Section rhythm --- */ .section { padding-block: var(--sp-8); } .section--tight { padding-block: var(--sp-6); } .section--loose { padding-block: var(--sp-9); } .section--alt { background: var(--c-surface-alt); } /* --- Grid helpers --- */ .grid { display: grid; gap: var(--sp-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* --- Flex helpers --- */ .flex { display: flex; } .flex--center { align-items: center; justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } .flex--wrap { flex-wrap: wrap; } .gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } /* --- Header shell --- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--c-surface); border-bottom: 1px solid var(--c-line); } /* .nav is nested inside .site-header, so its own z-index only ranks it within the header's stacking context, not against .nav-backdrop (appended to ). Raise the header's context above the backdrop while the drawer is open so the nested drawer isn't hidden behind it. */ body.has-drawer .site-header { z-index: var(--z-drawer); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--sp-5); } /* ========================================================================== FOOTER Oversized wordmark, bordered link cards, and a large claim — the same structural idea as the reference, rebuilt in our palette and type. ========================================================================== */ .site-footer { /* TEST: was var(--c-ink) (dark green, left over from the sage palette) — swapped to the brand-deep brown so the footer matches the current theme. Deliberately a different shade from .cta-band's --c-brand-dark, so the two dark bands don't read as identical. */ background: var(--c-brand-deep); color: var(--c-on-dark-soft); /* 9.95:1 on --c-ink, ~8.7:1 on --c-brand-deep — still clear */ padding-block: var(--sp-8) var(--sp-6); } .site-footer a { transition: color var(--dur) var(--ease); } .site-footer a:hover { color: #ffffff; } /* --- Oversized wordmark ------------------------------------------------ */ .footer-logo { display: flex; align-items: center; gap: 0.22em; margin-bottom: var(--sp-7); /* One font-size drives the whole lockup — mark and word are both sized in em against this, so they scale together and match each other, rather than the mark being sized off this and the word carrying its own separate (previously much smaller) font-size. */ font-size: clamp(2.75rem, 5.5vw, 4rem); line-height: 1; color: var(--c-brand-soft); } .footer-logo__mark { display: block; flex: none; width: 1em; height: 1em; } .footer-logo__mark svg { width: 100%; height: 100%; } /* A custom uploaded logo is a full lockup, not a square icon — let it set its own width against the font-size instead of being squashed/stretched into the 1em icon box. */ .footer-logo__mark:has(img) { width: auto; } .footer-logo__mark img { max-height: 100%; width: auto; object-fit: contain; } .footer-logo__word { font-size: 1em; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em; color: #ffffff; } .footer-logo__word span { color: var(--c-brand-soft); font-weight: 300; } .footer-logo:hover .footer-logo__word { color: #ffffff; } /* --- Grid --------------------------------------------------------------- */ .footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.1fr; gap: var(--sp-5); align-items: stretch; } .footer-card { padding: var(--sp-5); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-lg); } .footer-card__title { margin-bottom: var(--sp-4); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; } .footer-list { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); } .footer-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-contact { display: grid; gap: var(--sp-4); font-size: var(--fs-sm); } .footer-contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-3); align-items: start; line-height: 1.5; } .footer-contact .icon { margin-top: 2px; color: var(--c-brand-pale); } /* 9.08:1 */ /* --- Claim -------------------------------------------------------------- */ .footer-claim { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5); padding-left: var(--sp-4); } .footer-claim__text { /* Was a big 3-word display slogan (clamp 1.75rem-2.75rem, tight line-height) — now a full descriptive paragraph, so sized and spaced like body copy instead. */ font-family: var(--font-head); font-size: var(--fs-sm); /* 14px */ font-weight: 300; line-height: 1.6; letter-spacing: normal; color: var(--c-on-dark-soft); } .footer-claim__text em { font-style: normal; font-weight: 700; color: var(--c-brand-soft); } .footer-social { display: flex; gap: var(--sp-3); } .footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; color: var(--c-on-dark-soft); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .footer-social a:hover { background: var(--c-brand-soft); border-color: var(--c-brand-soft); color: var(--c-ink); } .footer-social .icon { width: 18px; height: 18px; } /* --- Bottom bar --------------------------------------------------------- */ .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-xs); color: var(--c-on-dark-dim); /* 6.39:1 */ } .footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); } /* --- Floating message button -------------------------------------------- */ .float-msg { position: fixed; left: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-header); display: inline-flex; align-items: center; gap: var(--sp-3); padding: 6px 6px 6px 6px; border-radius: var(--r-pill); background: var(--c-brand-deep); color: #ffffff; /* 5.34:1 */ box-shadow: var(--shadow-lg); transition: background var(--dur) var(--ease); } .float-msg:hover { background: var(--c-brand-dark); } .float-msg__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); } .float-msg__icon .icon { width: 19px; height: 19px; } .float-msg__label { padding-right: var(--sp-4); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } /* --- Utilities --- */ .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .sr-only { position: absolute; 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: var(--z-toast); padding: var(--sp-3) var(--sp-4); background: var(--c-brand-deep); color: #fff; } .skip-link:focus { left: var(--sp-4); top: var(--sp-2); }