/* ========================================================================== Connect Service Logistics — design system Single source of truth for the whole site. Edit tokens here to retheme. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root { /* brand */ --bronze: #A05C2C; --bronze-deep: #6F3A18; --bronze-dark: #55290F; --bronze-light: #C0813F; --bronze-pale: #D9A870; --bronze-wash: rgba(160, 92, 44, .08); --bronze-line: rgba(160, 92, 44, .26); /* neutrals */ --ink: #1A1917; --ink-2: #3A3735; --muted: #6E6862; --line: #E6DED4; --sand: #F6F1EB; --sand-2: #EFE6DB; --paper: #FFFFFF; /* type */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --fs-eyebrow: .75rem; --fs-small: .875rem; --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem); --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.25rem); --fs-h4: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); --fs-h3: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); --fs-h2: clamp(1.85rem, 1.45rem + 1.7vw, 3rem); --fs-h1: clamp(2.35rem, 1.7rem + 2.9vw, 4rem); /* space */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --container: 1180px; --section-y: clamp(4.5rem, 9vw, 8.5rem); /* misc */ --radius: 4px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(26, 25, 23, .04), 0 6px 20px rgba(26, 25, 23, .05); --shadow-md: 0 2px 6px rgba(26, 25, 23, .05), 0 18px 46px rgba(26, 25, 23, .10); --shadow-lg: 0 4px 10px rgba(26, 25, 23, .06), 0 30px 70px rgba(26, 25, 23, .16); --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: .22s var(--ease); --t: .4s var(--ease); --t-slow: .65s var(--ease-out); /* Height of the unscrolled header. The hero and page heroes are pulled up by this much so they sit behind the transparent header. main.js measures the real header and overwrites this — the value here is only the no-JS fallback, and it deliberately ERRS HIGH: overshooting just tucks a few invisible pixels of hero above the viewport, while undershooting leaves a white strip at the top of the page. */ --header-h: 98px; } /* --- 2. Reset & base ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* clip, not hidden: hidden would make a scroll container and break the sticky header */ overflow-x: clip; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; } body.nav-open { overflow: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--bronze); text-decoration: none; } button { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 400; line-height: 1.13; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: 1.22; } h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; letter-spacing: -.005em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; } .hero :focus-visible, .pagehero :focus-visible, .section--ink :focus-visible, .footer :focus-visible, .cta :focus-visible { outline-color: var(--bronze-pale); } /* --- 3. Layout ----------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 820px; } .section { padding-block: var(--section-y); position: relative; } .section--sand { background: var(--sand); } .section--ink { background: var(--ink); color: rgba(255,255,255,.72); } .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; } .section--ink .lead { color: rgba(255,255,255,.78); } .section--ink .note { color: rgba(255,255,255,.45); } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: .75rem 1.25rem; } .skip-link:focus { left: 1rem; top: 1rem; } /* --- 4. Type utilities --------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin: 0 0 1.25rem; } .eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .55; } .section--ink .eyebrow, .hero .eyebrow, .pagehero .eyebrow, .cta .eyebrow { color: var(--bronze-pale); } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); } .muted { color: var(--muted); } .note { font-size: var(--fs-small); color: var(--muted); } .section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } /* --- 5. Buttons ---------------------------------------------------------- */ .btn { --btn-bg: var(--bronze); --btn-fg: #fff; --btn-sweep: var(--bronze-dark); position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .65rem; padding: 1rem 1.7rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bg); border-radius: var(--radius); cursor: pointer; overflow: hidden; transition: transform var(--t), box-shadow var(--t), color var(--t), border-color var(--t); } /* the fill sweeps in from the left on hover */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-sweep); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(85, 41, 15, .28); } .btn:hover::before { transform: scaleX(1); } .btn:active { transform: translateY(0); } .btn svg { width: 15px; height: 15px; transition: transform var(--t); } .btn:hover svg { transform: translateX(4px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-sweep: var(--ink); border-color: var(--line); } .btn--ghost:hover { color: #fff; border-color: var(--ink); box-shadow: var(--shadow-md); } .btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-sweep: #fff; border-color: rgba(255,255,255,.35); } .btn--light:hover { color: var(--ink); border-color: #fff; box-shadow: none; } .btn-row { display: flex; flex-wrap: wrap; gap: .85rem; } .link-arrow { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-small); font-weight: 600; color: var(--bronze); letter-spacing: .02em; } .link-arrow svg { width: 14px; height: 14px; transition: transform var(--t); } .link-arrow:hover svg, .card--link:hover .link-arrow svg { transform: translateX(5px); } /* --- 6. Header ----------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color var(--t), box-shadow var(--t); } /* The blur lives on a pseudo-element: a backdrop-filter on .header itself would become the containing block for the position:fixed mobile drawer inside it. */ .header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); transition: opacity var(--t); } .header--over-dark:not(.scrolled)::before { opacity: 0; } .header.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 24px rgba(26,25,23,.05); } .header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.2rem; transition: padding var(--t); } .header.scrolled .header__inner { padding-block: .7rem; } .brand { display: inline-flex; align-items: center; } .brand img { height: 42px; width: auto; transition: height var(--t); } .header.scrolled .brand img { height: 34px; } /* two logo files swap so the mark reads on the dark hero and on white */ .brand .brand__light { display: none; } .header--over-dark:not(.scrolled) .brand .brand__light { display: block; } .header--over-dark:not(.scrolled) .brand .brand__dark { display: none; } .nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); } .nav a { position: relative; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); padding-block: .35rem; transition: color var(--t-fast); } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--bronze); transform: scaleX(0); transform-origin: right; transition: transform var(--t); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav a[aria-current="page"] { color: var(--bronze); } .nav a.btn { color: var(--btn-fg); } /* beat .nav a's colour */ .nav > .btn { display: none; } /* in-drawer CTA, mobile only */ .header__cta { display: inline-flex; } /* header sitting over the dark hero */ .header--over-dark:not(.scrolled) .nav a { color: rgba(255,255,255,.82); } .header--over-dark:not(.scrolled) .nav a:hover, .header--over-dark:not(.scrolled) .nav a[aria-current="page"] { color: #fff; } .header--over-dark:not(.scrolled) .nav a::after { background: var(--bronze-pale); } .header--over-dark:not(.scrolled) .nav-toggle { border-color: rgba(255,255,255,.35); } .header--over-dark:not(.scrolled) .nav-toggle span, .header--over-dark:not(.scrolled) .nav-toggle span::before, .header--over-dark:not(.scrolled) .nav-toggle span::after { background: #fff; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: background var(--t-fast); } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--t), top var(--t-fast); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 900px) { /* the desktop CTA is hidden here, so the 44px toggle sets the header height */ :root { --header-h: 86px; } .nav-toggle { display: inline-flex; } .header__cta { display: none; } .nav { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .25rem; padding: 6.5rem var(--gutter) 2.5rem; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(26,25,23,.14); transform: translateX(102%); transition: transform .45s var(--ease-out); overflow-y: auto; } .nav.open { transform: translateX(0); } .nav a, .header--over-dark:not(.scrolled) .nav a { width: 100%; font-size: 1.05rem; color: var(--ink-2); padding-block: .9rem; border-bottom: 1px solid var(--line); } .nav a::after { display: none; } .nav > .btn { display: inline-flex; margin-top: 1.5rem; width: 100%; justify-content: center; color: #fff; border-bottom: 1px solid var(--bronze); } } /* --- 7. Hero (home) ------------------------------------------------------ */ .hero { position: relative; min-height: clamp(600px, 90vh, 900px); display: flex; flex-direction: column; justify-content: flex-end; margin-top: calc(-1 * var(--header-h) - 1px); padding-top: var(--header-h); color: #fff; overflow: hidden; background: var(--ink); } @supports (height: 90svh) { .hero { min-height: clamp(600px, 90svh, 900px); } } .hero__bg { position: absolute; inset: 0; overflow: hidden; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: kenburns 24s var(--ease-out) forwards; } @keyframes kenburns { to { transform: scale(1); } } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,18,16,.94) 0%, rgba(20,18,16,.82) 42%, rgba(20,18,16,.44) 78%, rgba(20,18,16,.3) 100%), linear-gradient(to top, rgba(20,18,16,.92) 0%, rgba(20,18,16,0) 42%); } .hero__inner { position: relative; flex: 1; display: flex; align-items: center; padding-block: clamp(3.5rem, 8vw, 6rem); } .hero__content { max-width: 41rem; } /* rem, not ch — ch resolves against the body size, not the headline */ .hero h1 { color: #fff; margin-bottom: 1.5rem; font-size: clamp(2.3rem, 1.65rem + 2.5vw, 3.6rem); } .hero h1 .word { display: inline-block; } .hero .lead { color: rgba(255,255,255,.82); max-width: 34rem; } .hero .btn-row { margin-top: 2.25rem; } /* glass stat bar along the bottom of the hero */ .hero__stats { position: relative; border-top: 1px solid rgba(255,255,255,.14); background: rgba(20,18,16,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero__stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); } .hero__stats .stat__num { color: var(--bronze-pale); } .hero__stats .stat p { color: rgba(255,255,255,.62); } @media (max-width: 760px) { .hero__stats .container { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; } } /* scroll cue */ .hero__cue { position: absolute; right: var(--gutter); bottom: 42%; display: grid; gap: .85rem; justify-items: center; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); writing-mode: vertical-rl; } .hero__cue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(to bottom, var(--bronze-pale), transparent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } @media (max-width: 1100px) { .hero__cue { display: none; } } /* --- 8. Page hero (inner pages) ------------------------------------------ */ .pagehero { position: relative; overflow: hidden; background: var(--ink); color: rgba(255,255,255,.75); margin-top: calc(-1 * var(--header-h) - 1px); padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6rem)); padding-bottom: clamp(3.5rem, 8vw, 6rem); } .pagehero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(62% 85% at 84% 62%, rgba(160,92,44,.42) 0%, rgba(160,92,44,0) 70%); } .pagehero__watermark { position: absolute; right: -3%; bottom: -34%; width: min(560px, 58vw); color: var(--bronze-pale); opacity: .1; pointer-events: none; } .pagehero .container { position: relative; } .pagehero h1 { color: #fff; } .pagehero .lead { color: rgba(255,255,255,.78); max-width: 62ch; } .crumb { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.2rem; } .crumb a { color: rgba(255,255,255,.45); transition: color var(--t-fast); } .crumb a:hover { color: var(--bronze-pale); } /* --- 9. Stats ------------------------------------------------------------ */ .stat__num { font-family: var(--font-display); font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1; color: var(--bronze); display: block; margin-bottom: .5rem; } .stat p { font-size: var(--fs-small); color: var(--muted); margin: 0; line-height: 1.5; } /* --- 10. Icon plate (the signature hover) -------------------------------- */ .ico { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 1.5rem; flex: none; } .ico::before { /* rotated square, echoing the mark */ content: ""; position: absolute; inset: 7px; background: var(--bronze-wash); border: 1px solid var(--bronze-line); transform: rotate(45deg); transition: transform .6s var(--ease-out), background var(--t), border-color var(--t); } .ico svg { position: relative; width: 25px; height: 25px; color: var(--bronze); transition: color var(--t); } .card--link:hover .ico::before, .svc__item:hover .ico::before { transform: rotate(135deg); background: var(--bronze); border-color: var(--bronze); } .card--link:hover .ico svg, .svc__item:hover .ico svg { color: #fff; } .section--ink .ico::before { background: rgba(255,255,255,.06); border-color: rgba(217,168,112,.32); } .section--ink .ico svg { color: var(--bronze-pale); } .ico--inline { margin-bottom: 0; } /* --- 11. Cards & grids --------------------------------------------------- */ .grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 2.8vw, 2.15rem); height: 100%; transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t); } .card::after { /* bronze rule sweeps across the top */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); } a.card { display: block; color: inherit; } /* whole-card links inherit body colour, not link bronze */ .card--link:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--bronze-line); } .card--link:hover::after { transform: scaleX(1); } .card h3, .card h4 { margin-bottom: .55rem; transition: color var(--t); } .card--link:hover h3 { color: var(--bronze-deep); } .card p { font-size: var(--fs-small); color: var(--muted); line-height: 1.62; } .card .link-arrow { margin-top: 1.25rem; } .section--ink .card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.1); } .section--ink .card p { color: rgba(255,255,255,.62); } /* numbered cards */ .card--num { padding-top: 2.6rem; } .card--num::before { content: attr(data-num); position: absolute; top: 1.4rem; right: 1.6rem; font-family: var(--font-display); font-size: 1.6rem; color: var(--bronze); opacity: .28; transition: opacity var(--t), transform var(--t-slow); } .card--link:hover.card--num::before { opacity: .6; transform: translateY(-2px); } .card--flex { display: flex; gap: 1.15rem; align-items: flex-start; } /* --- 12. Split (image + text) -------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--top { align-items: start; } .split--reverse .split__media { order: 2; } .split__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); } .split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .split__media--tall img { aspect-ratio: 3 / 4; } /* a bronze corner bracket, picked up from the mark's geometry */ .split__media::after { content: ""; position: absolute; right: 1.25rem; bottom: 1.25rem; width: 42px; height: 42px; border-right: 2px solid var(--bronze-pale); border-bottom: 2px solid var(--bronze-pale); opacity: .85; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } } /* --- 13. Service list (Services page) ------------------------------------ */ .svc { border-top: 1px solid var(--line); } .svc__item { position: relative; display: grid; grid-template-columns: 58px 1fr 1.15fr; gap: clamp(1.25rem, 3vw, 2.75rem); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem); border-bottom: 1px solid var(--line); transition: background var(--t); } .svc__item::before { /* bronze rule grows down the left edge */ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--bronze); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease-out); } .svc__item:hover { background: var(--sand); } .svc__item:hover::before { transform: scaleY(1); } .svc__title { display: flex; align-items: baseline; gap: .9rem; } .svc__num { font-family: var(--font-display); font-size: 1.05rem; color: var(--bronze); opacity: .6; } .svc__item h3 { margin: 0; transition: color var(--t); } .svc__item:hover h3 { color: var(--bronze-deep); } .svc__body p { font-size: var(--fs-small); color: var(--muted); } .tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.15rem; } .tag { font-size: .78rem; letter-spacing: .02em; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: .32rem .8rem; transition: border-color var(--t); } .svc__item:hover .tag { border-color: var(--bronze-line); } @media (max-width: 820px) { .svc__item { grid-template-columns: 58px 1fr; } .svc__body { grid-column: 2; } } @media (max-width: 520px) { .svc__item { grid-template-columns: 1fr; } .svc__body { grid-column: 1; } } /* --- 14. Checklist ------------------------------------------------------- */ .checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1.75rem; } .checks li { position: relative; padding-left: 1.7rem; font-size: var(--fs-small); line-height: 1.55; } .checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--bronze); transform: rotate(45deg); transition: transform var(--t); } .checks li:hover::before { transform: rotate(135deg) scale(1.15); } .section--ink .checks li { color: rgba(255,255,255,.78); } .section--ink .checks li::before { background: var(--bronze-pale); } @media (max-width: 620px) { .checks { grid-template-columns: 1fr; } } /* --- 15. Marquee (sectors) ----------------------------------------------- */ .marquee { overflow: hidden; background: var(--ink); } .marquee__track { display: flex; gap: 3rem; width: max-content; padding-block: 1.35rem; animation: marquee 46s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee span { display: inline-flex; align-items: center; gap: 3rem; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; } .marquee span::after { content: ""; width: 6px; height: 6px; background: var(--bronze-pale); transform: rotate(45deg); } @keyframes marquee { to { transform: translateX(-50%); } } /* --- 16. CTA band -------------------------------------------------------- */ .cta { position: relative; overflow: hidden; text-align: center; background: linear-gradient(135deg, #8E4F24 0%, var(--bronze-deep) 55%, var(--bronze-dark) 100%); color: rgba(255,255,255,.82); } .cta h2 { color: #fff; } .cta .lead { color: rgba(255,255,255,.85); } .cta__watermark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(940px, 125%); color: #fff; opacity: .07; pointer-events: none; } .cta .container { position: relative; } .cta .btn-row { justify-content: center; margin-top: 2.25rem; } .cta .btn { --btn-bg: #fff; --btn-fg: var(--bronze-dark); --btn-sweep: var(--ink); border-color: #fff; } .cta .btn:hover { color: #fff; border-color: var(--ink); box-shadow: 0 12px 26px rgba(26,25,23,.3); } .cta .btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-sweep: #fff; border-color: rgba(255,255,255,.45); } .cta .btn--light:hover { color: var(--bronze-dark); border-color: #fff; } /* --- 17. Forms ----------------------------------------------------------- */ .form { display: grid; gap: 1.15rem; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } @media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } } .field { display: grid; gap: .45rem; } .field label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); } .field .req { color: var(--bronze); } .field input, .field select, .field textarea { font: inherit; font-size: var(--fs-small); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem .95rem; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .field textarea { min-height: 150px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px var(--bronze-wash); } .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-small); color: var(--muted); } .consent input { width: 17px; height: 17px; margin-top: .22rem; accent-color: var(--bronze); flex: none; } .form__status { display: none; padding: .95rem 1.15rem; border-radius: var(--radius); font-size: var(--fs-small); } .form__status.show { display: block; } .form__status.ok { background: var(--bronze-wash); border: 1px solid var(--bronze-line); color: var(--bronze-deep); } .form__status.err { background: #fdf0ec; border: 1px solid #f0c9bc; color: #8c3a20; } .details li { padding-block: 1rem; border-bottom: 1px solid var(--line); } .details li:first-child { padding-top: 0; } .details dt { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; } .details dd { margin: 0; font-size: var(--fs-body); color: var(--ink); } .details dd a:hover { text-decoration: underline; } /* --- 18. Footer ---------------------------------------------------------- */ .footer { background: var(--ink); color: rgba(255,255,255,.6); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.75rem, 4vw, 3rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); } .footer__brand img { height: 44px; width: auto; margin-bottom: 1.35rem; } .footer__brand p { font-size: var(--fs-small); line-height: 1.6; max-width: 34ch; } .footer h4 { color: #fff; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.15rem; } .footer li { margin-bottom: .62rem; } .footer a { color: rgba(255,255,255,.62); font-size: var(--fs-small); transition: color var(--t-fast); } .footer a:hover { color: #fff; } .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.75rem; font-size: .8rem; color: rgba(255,255,255,.42); } .footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer__disclaimer { margin-top: 1.5rem; font-size: .78rem; line-height: 1.6; color: rgba(255,255,255,.35); max-width: 90ch; } @media (max-width: 880px) { .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } } /* --- 19. Motion ---------------------------------------------------------- */ /* Reveals are scoped to .js so the site stays fully readable without JavaScript. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), clip-path .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 95ms); } .js [data-reveal="left"] { transform: translateX(-30px); } .js [data-reveal="right"] { transform: translateX(30px); } .js [data-reveal="scale"] { transform: scale(.965); } .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); } .js [data-reveal].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* Below the two-column breakpoint the side slides would push content off-screen (and read as jarring on a phone) — fall back to the vertical rise. */ @media (max-width: 880px) { .js [data-reveal="left"], .js [data-reveal="right"] { transform: translateY(26px); } } /* an image inside a clip reveal settles out of a slow zoom */ .js [data-reveal="clip"] img { transform: scale(1.09); transition: transform 1.3s var(--ease-out); } .js [data-reveal="clip"].in img { transform: none; } /* the eyebrow rule draws itself once its block arrives */ .js [data-reveal] .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out) .2s; } .js [data-reveal].in .eyebrow::before { transform: scaleX(1); } /* hero entrance */ .js .hero h1 .word { opacity: 0; transform: translateY(38px); animation: riseIn .95s var(--ease-out) forwards; animation-delay: calc(.2s + var(--w, 0) * .075s); } .js .hero__enter { opacity: 0; transform: translateY(20px); animation: riseIn .85s var(--ease-out) forwards; animation-delay: calc(.5s + var(--w, 0) * .13s); } @keyframes riseIn { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; clip-path: none; } .js [data-reveal] .eyebrow::before { transform: scaleX(1); } .js .hero h1 .word, .js .hero__enter { opacity: 1; transform: none; } .hero__bg img { transform: none; } }