/* ───────────────────────────────────────────────────────────────────────── SocialSpire, custom websites. base.css: SCAFFOLD FILE, workers do not edit. Tokens, reset, bands, type, labels, ledes and buttons. Everything a section or package needs in common. Each package styles its own area in its own file, loaded after this one in the order templates/page.mjs sets. Brand tokens are the pack verbatim (OS/context/brand-visual.md). Hard rules honoured: no rounded corners anywhere except the wordmark's circle O, which the pack itself specifies. Rules are 2px. Archivo 800 for headings and the wordmark, Archivo 400 for body. Photography black and white. No rule between sections on this page. Conner, 2026-09-24: the change of field colour is the divider, and the lines looked choppy. The short rules under section labels, the lines inside the process steps and the tools grid, and the top bar's own bottom edge all stay. Scoped to this page by brand-visual.md, and not a precedent for anything else. The one-red-element rule is lifted for this page on Conner's ruling of 2026-09-23. Sections alternate between four full-bleed fields (white, ground grey, ink and red) and red accents are used freely on the light ones. The readability floor is not lifted: every body-size pair below is at or above 4.5:1, which is why the red field is Red 700 and not #EC3013. White on #EC3013 measures 4.2:1 and would fail it. Motion. or "reduce" is set before the first paint (templates/page.mjs) from the device setting OR the Reduce motion switch. Every animation added after 2026-09-24 is scoped under :root[data-motion="full"]. The rules that existed before that keep their @media (prefers-reduced-motion) block and gain a :root[data-motion="reduce"] twin beside it, so the switch reaches them too. ───────────────────────────────────────────────────────────────────────── */ :root { --ground: #F3F2F2; --surface: #EAE9E9; --white: #FFFFFF; --ink: #201E1D; --red: #EC3013; /* accents, rules, large type only */ --red-700: #AE1800; /* red at body-text sizes, and the red field */ --red-300: #FF6244; /* red type on ink */ --ink-lift: #2F2D2C; /* ink lifted toward white: hover fill on ink */ --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --measure: 62ch; --gutter: clamp(16px, 4vw, 56px); --band-y: clamp(64px, 8vw, 128px); --bar-h: 66px; /* the sticky top bar: 64px plus its 2px rule */ } *, *::before, *::after { box-sizing: border-box; border-radius: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } :root[data-motion="reduce"] { scroll-behavior: auto; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-weight: 400; font-size: 17px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; } @supports selector(:focus-visible) { :focus { outline: none; } } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .band-ink :focus-visible, .band-red :focus-visible { outline-color: var(--white); } ::selection { background: rgba(236, 48, 19, 0.28); } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--ground); padding: 12px 18px; font-weight: 800; } .skip:focus { left: 0; } .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; } /* ── the mark and the wordmark ─────────────────────────────────────────── */ .mark { fill: currentColor; flex: none; } .mark .mark-top { fill: var(--red); } .band-ink .mark .mark-top, .foot .mark .mark-top { fill: var(--red-300); } .wm { font-weight: 800; letter-spacing: -0.035em; font-size: 1.125rem; line-height: 1; white-space: nowrap; } /* The pack replaces the O with a circle. In caps it is sized to the cap height with a small overshoot, the way a drawn round glyph behaves. */ .wm-o { display: inline-block; width: 0.76em; height: 0.76em; border-radius: 50%; background: var(--red); vertical-align: -0.035em; margin-inline: 0.03em 0.055em; } .band-ink .wm-o, .topbar .wm-o { background: var(--red); } /* ── layout ─────────────────────────────────────────────────────────────── */ .wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--gutter); } .band { padding-block: var(--band-y); } .band-ground { background: var(--ground); color: var(--ink); } .band-ink { background: var(--ink); color: var(--ground); } .band-red { background: var(--red-700); color: var(--white); } /* ── type ───────────────────────────────────────────────────────────────── */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 7vw, 5rem); } h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); } h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.2; letter-spacing: -0.02em; } p { margin: 0; } .label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: var(--red-700); margin-bottom: clamp(20px, 3vw, 32px); padding-bottom: 10px; border-bottom: 2px solid var(--red); display: inline-block; } .band-ink .label { color: var(--red-300); border-bottom-color: var(--red-300); } .band-red .label { color: var(--white); border-bottom-color: var(--white); } .lede { margin-top: clamp(20px, 2.5vw, 28px); max-width: var(--measure); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); } .band-ink .lede { color: rgba(243, 242, 242, 0.86); } .band-red .lede { color: rgba(255, 255, 255, 0.92); } .cta-row { margin-top: clamp(28px, 4vw, 44px); } /* ── buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-block; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; padding: 16px 28px; border: 2px solid transparent; transition: background-color .15s ease, color .15s ease; } .btn-sm { padding: 10px 18px; font-size: 0.9375rem; } .btn-red { background: var(--red-700); color: var(--white); border-color: var(--red-700); } .btn-red:hover, .btn-red:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); } .btn-ink { background: var(--ink); color: var(--white); border-color: var(--ink); } .btn-ink:hover, .btn-ink:focus-visible { background: var(--white); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } :root[data-motion="reduce"] .btn { transition: none; } /* ── smooth scrolling (#17) ───────────────────────────────────────────────── Lenis 1.3.26's own stylesheet (dist/lenis.css), verbatim. Inert until js/smooth.js starts Lenis, which is what adds the lenis classes to . The iframe rule only applies while Lenis is mid-scroll (lenis-smooth), and the viewer and booking frames only exist while Lenis is stopped, so it never reaches them. The first rule is ours: Lenis does the easing, so the browser's own smooth scrolling steps aside while Lenis is running. */ html.lenis { scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }