/* ========================================================================== Renew Wellness Place: shared base layer. Everything here is built on the --rw-* custom properties in tokens.css. There are no raw hex values in this file by design: a colour only exists in this brand if it traces to a source file, and tokens.css is that file. Pairs with the renew-visual-brand skill. The rules it enforces: - Figtree everywhere, IBM Plex Mono for every number, price, time and label - Headlines uppercase, weight 800, negative tracking, line height 0.98 - Body copy capped at 62 characters per line - Arch top radius equals half the element width, so it reads as a true arch - At most one accent per page, used once and small - Warm navy-tinted shadows, never black - Contrast pairs taken from the measured table, never estimated ========================================================================== */ /* tokens.css and fonts.css are linked directly from every page's , in front of this file. They used to be @imported here, which cost a second round trip: an @import cannot begin downloading until this stylesheet has arrived and been parsed. Do not put them back. */ /* --------------------------------------------------- scrims and veils --- */ /* Photo scrims and hairlines on dark, derived from the palette with color-mix so no colour value is ever hand written outside tokens.css. Scrims are navy tinted, never black: pure black reads cold against cream and against the brand navy. */ :root { --rw-scrim-90: color-mix(in srgb, var(--rw-navy) 90%, transparent); --rw-scrim-65: color-mix(in srgb, var(--rw-navy) 65%, transparent); --rw-scrim-55: color-mix(in srgb, var(--rw-navy) 55%, transparent); --rw-scrim-15: color-mix(in srgb, var(--rw-navy) 15%, transparent); --rw-scrim-08: color-mix(in srgb, var(--rw-navy) 8%, transparent); --rw-scrim-00: color-mix(in srgb, var(--rw-navy) 0%, transparent); --rw-veil-20: color-mix(in srgb, var(--rw-white) 20%, transparent); --rw-veil-12: color-mix(in srgb, var(--rw-white) 12%, transparent); --rw-veil-06: color-mix(in srgb, var(--rw-white) 6%, transparent); } /* --------------------------------------------------------------- reset --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--rw-bg); color: var(--rw-text); font-family: var(--rw-font-sans); font-size: var(--rw-fs-base); font-weight: var(--rw-w-regular); line-height: var(--rw-lh-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--rw-focus); outline-offset: 3px; border-radius: var(--rw-r-sm); } [data-rw-theme="dark"] :focus-visible { outline-color: var(--rw-blush); } ::selection { background: var(--rw-navy); color: var(--rw-cream); } .skip-link { position: absolute; left: var(--rw-s-4); top: calc(-1 * var(--rw-s-10)); z-index: 200; padding: var(--rw-s-3) var(--rw-s-5); background: var(--rw-navy); color: var(--rw-cream); border-radius: var(--rw-r-md); font-weight: var(--rw-w-semi); transition: top var(--rw-dur-base) var(--rw-ease); } .skip-link:focus { top: var(--rw-s-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- layout --- */ .wrap { width: 100%; max-width: var(--rw-container); margin-inline: auto; padding-inline: var(--rw-gutter); } .wrap--narrow { max-width: 860px; } .section { padding-block: var(--rw-section-y); background: var(--rw-bg); color: var(--rw-text); } /* Alternate grounds. Long unbroken cream reads flat. */ .section--raised { background: var(--rw-bg-raised); } .section--dark { background: var(--rw-navy); color: var(--rw-text); } .section--gradient { background-image: var(--rw-gradient); color: var(--rw-cream); } .stack > * + * { margin-top: var(--rw-s-4); } .stack-lg > * + * { margin-top: var(--rw-s-6); } /* ------------------------------------------------------ type: headings --- */ /* Uppercase, 800, negative tracking. Large type falls apart without it. */ .h-hero, .h-sec, .h-sub { font-family: var(--rw-font-sans); font-weight: var(--rw-w-black); text-transform: uppercase; letter-spacing: var(--rw-ls-hero); line-height: var(--rw-lh-tight); text-wrap: balance; } .h-hero { font-size: var(--rw-fs-hero); } .h-sec { font-size: var(--rw-fs-3xl); } .h-sub { font-size: var(--rw-fs-2xl); } /* Card and step headings stay sentence case: uppercase at this size is shouty and the brand voice is warm, not loud. */ .h-card { font-family: var(--rw-font-sans); font-size: var(--rw-fs-xl); font-weight: var(--rw-w-bold); letter-spacing: var(--rw-ls-head); line-height: var(--rw-lh-snug); text-transform: none; } .h-card--sm { font-size: var(--rw-fs-lg); font-weight: var(--rw-w-semi); } /* --------------------------------------------------------- type: body --- */ .lead { font-size: var(--rw-fs-lg); line-height: var(--rw-lh-normal); max-width: var(--rw-measure); } .body { max-width: var(--rw-measure); } .muted { color: var(--rw-text-muted); } .link { color: var(--rw-text-accent); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--rw-dur-fast) var(--rw-ease); } .link:hover { text-decoration-thickness: 2px; } /* -------------------------------------------------- type: the mono set --- */ /* The mono is the signature. Every number, temperature, duration, price and time sits here. Never body copy, never a headline. */ .mono { font-family: var(--rw-font-mono); font-size: var(--rw-fs-mono); font-weight: var(--rw-w-medium); text-transform: uppercase; letter-spacing: var(--rw-ls-mono); line-height: 1.4; font-variant-numeric: tabular-nums; } .mono--lg { font-size: var(--rw-fs-sm); font-weight: var(--rw-w-semi); } /* Rust measures 3.68 on cream, which is large-text only, so the eyebrow never drops below 24px in rust. Below that it falls back to navy. */ .eyebrow { font-family: var(--rw-font-mono); font-size: 1.5rem; /* 24px, the large-text threshold */ font-weight: var(--rw-w-semi); text-transform: uppercase; letter-spacing: var(--rw-ls-mono); line-height: 1.2; color: var(--rw-rust); display: block; } @media (max-width: 40rem) { /* Under 24px rust is no longer compliant, so the small screen uses navy. */ .eyebrow { font-size: var(--rw-fs-sm); color: var(--rw-navy); } } [data-rw-theme="dark"] .eyebrow, .section--dark .eyebrow, .section--gradient .eyebrow { color: var(--rw-blush); } @media (max-width: 40rem) { [data-rw-theme="dark"] .eyebrow, .section--dark .eyebrow, .section--gradient .eyebrow { color: var(--rw-blush); } } /* Price, duration and stat display. */ .figure { font-family: var(--rw-font-mono); font-weight: var(--rw-w-semi); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; } .figure--xl { font-size: clamp(2.75rem, 1.8rem + 3.6vw, 4rem); } .figure--lg { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); } .figure--md { font-size: var(--rw-fs-xl); } /* ------------------------------------------------------------ buttons --- */ .btn { --btn-bg: var(--rw-navy); --btn-fg: var(--rw-cream); --btn-bd: var(--rw-navy); display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 44px; /* tap target floor */ padding: 0.95em 1.7em; background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd); border-radius: var(--rw-r-md); /* 8px. The arch is for images, not buttons */ font-family: var(--rw-font-sans); font-size: 1.1875rem; /* 19px, clears the large-text threshold */ font-weight: var(--rw-w-bold); line-height: 1; text-transform: uppercase; letter-spacing: var(--rw-ls-button); text-align: center; cursor: pointer; transition: transform var(--rw-dur-base) var(--rw-ease), background-color var(--rw-dur-base) var(--rw-ease), color var(--rw-dur-base) var(--rw-ease), box-shadow var(--rw-dur-base) var(--rw-ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--rw-shadow-md); } .btn:active { transform: translateY(0); } /* Secondary: outline on cream. Navy on cream is 9.79, AAA. */ .btn--outline { --btn-bg: transparent; --btn-fg: var(--rw-navy); --btn-bd: var(--rw-navy); } .btn--outline:hover { --btn-bg: var(--rw-navy); --btn-fg: var(--rw-cream); } /* The one accent button. Peach fill, navy label: 4.11, which clears AA at the large-text threshold, so the label is locked at 19px bold above. Nothing lighter works on peach. White is 2.75 and cream is 2.38, both failing even the large-text bar, which is what tokens.css means by peach being fill only. Peach rather than rust because it separates further from the navy header it sits on: 4.11 against it, where rust manages 2.66. Use once. */ .btn--accent { --btn-bg: var(--rw-peach); --btn-fg: var(--rw-navy); --btn-bd: var(--rw-peach); } /* On navy: cream fill with navy text is 9.79, AAA. */ .section--dark .btn, .section--gradient .btn, [data-rw-theme="dark"] .btn { --btn-bg: var(--rw-cream); --btn-fg: var(--rw-navy); --btn-bd: var(--rw-cream); } /* The accent keeps its peach on a dark ground too. Without this the cream fill rule above wins on specificity and the accent disappears. */ .section--dark .btn--accent, .section--gradient .btn--accent, [data-rw-theme="dark"] .btn--accent { --btn-bg: var(--rw-peach); --btn-fg: var(--rw-navy); --btn-bd: var(--rw-peach); } .section--dark .btn--outline, .section--gradient .btn--outline, [data-rw-theme="dark"] .btn--outline { --btn-bg: transparent; --btn-fg: var(--rw-cream); --btn-bd: var(--rw-cream); } .section--dark .btn--outline:hover, .section--gradient .btn--outline:hover, [data-rw-theme="dark"] .btn--outline:hover { --btn-bg: var(--rw-cream); --btn-fg: var(--rw-navy); } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--rw-s-4); align-items: center; } /* Quiet text call to action. */ .textlink { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font-weight: var(--rw-w-semi); border-bottom: 2px solid currentColor; padding-bottom: 2px; transition: opacity var(--rw-dur-fast) var(--rw-ease); } .textlink:hover { opacity: 0.72; } /* --------------------------------------------------------------- arch --- */ /* The top radius equals half the element width, so it reads as a true arch and not a soft rounded rectangle. One arch cluster per layout, no more. */ .arch { border-radius: var(--rw-arch); overflow: hidden; background: var(--rw-slate-deep); } .arch--1-1 { border-radius: var(--rw-arch-1-1); } .arch--9-16 { border-radius: var(--rw-arch-9-16); } .arch img, .arch picture, .arch picture img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------- card --- */ .card { background: var(--rw-bg-raised); border: var(--rw-border-w) solid var(--rw-border-soft); border-radius: var(--rw-r-lg); padding: var(--rw-s-6); box-shadow: var(--rw-shadow-sm); } .section--dark .card, [data-rw-theme="dark"] .card { background: var(--rw-slate-deep); border-color: var(--rw-border-soft); box-shadow: none; } /* -------------------------------------------------------------- rules --- */ .rule { height: var(--rw-rule-w); width: 3rem; background: var(--rw-rust); border: 0; } .section--dark .rule, .section--gradient .rule, [data-rw-theme="dark"] .rule { background: var(--rw-blush); } .hairline { height: var(--rw-border-w); width: 100%; background: var(--rw-border); border: 0; } /* --------------------------------------------------------- tick lists --- */ .ticks { display: grid; gap: var(--rw-s-3); } .ticks li { display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--rw-s-3); align-items: start; line-height: var(--rw-lh-normal); } .ticks li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.35em; border-radius: var(--rw-r-pill); background: var(--rw-navy); /* A tick drawn as a mask, so nothing depends on an icon font. */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; } .section--dark .ticks li::before, [data-rw-theme="dark"] .ticks li::before { background: var(--rw-cream); } /* ------------------------------------------------------------- header --- One header for every page. Two shapes from one piece of markup: - Under 62rem it is a drawer. The nav slides in from the right, the panels inside it are open by default so a first time visitor sees every page without hunting, and the phone number sits at the bottom because this audience would often rather ring. - At 62rem and up it is a horizontal bar and the panels become dropdowns that open on click, never on hover. Hover menus punish anyone with an unsteady hand, and this site is written for a 45 to 70 year old. Everything is usable with JavaScript blocked: the drawer is only hidden once site.js has confirmed it can open it again (.js-nav on ). */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--rw-cream); border-bottom: var(--rw-border-w) solid var(--rw-border-soft); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--rw-s-4); padding-block: var(--rw-s-3); } .site-header__logo { display: inline-flex; align-items: center; min-height: 44px; /* tap target floor, the mark itself is 34px */ flex: 0 0 auto; } .site-header__logo img { height: 34px; width: auto; } .site-header__actions { display: flex; align-items: center; gap: var(--rw-s-3); flex: 0 0 auto; } /* --- the menu button, under 62rem only --- */ .site-header__menu { display: inline-flex; align-items: center; gap: 0.55em; min-height: 44px; padding: 0.5rem 0.75rem; border: var(--rw-border-w) solid var(--rw-border); border-radius: var(--rw-r-md); background: transparent; color: inherit; font-family: var(--rw-font-mono); font-size: var(--rw-fs-mono); font-weight: var(--rw-w-semi); letter-spacing: var(--rw-ls-mono); text-transform: uppercase; cursor: pointer; } /* Three bars drawn in CSS, so nothing depends on an icon font or a request. */ .site-header__burger { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: var(--rw-r-pill); } .site-header__burger::before, .site-header__burger::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: var(--rw-r-pill); } .site-header__burger::before { top: -6px; } .site-header__burger::after { top: 6px; } /* --- the nav, as a drawer --- */ .nav { display: flex; flex-direction: column; gap: var(--rw-s-6); } /* The drawer chrome only exists once JS is confirmed. Without it the nav is an ordinary block of links at the top of the page, which is what a crawler and a no-JS visitor get. */ .nav__head, .nav__foot { display: none; } .js-nav .nav { position: fixed; top: 0; right: 0; z-index: 110; width: min(22rem, 88vw); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--rw-s-5) var(--rw-s-5) var(--rw-s-8); background: var(--rw-navy); color: var(--rw-cream); /* visibility, not display, so the links leave the tab order while shut */ visibility: hidden; transform: translateX(100%); /* visibility flips the instant it opens, and only after the slide out when it shuts. Transitioning it like a normal property means focus lands on a still-hidden close button and the browser refuses it. */ transition: transform var(--rw-dur-base) var(--rw-ease), visibility 0s linear var(--rw-dur-base); } .js-nav .nav.is-open { visibility: visible; transform: none; transition: transform var(--rw-dur-base) var(--rw-ease), visibility 0s; } .js-nav .nav__head { display: flex; } .js-nav .nav__foot { display: grid; } .nav__head { align-items: center; justify-content: space-between; min-height: 44px; } .nav__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -0.5rem; border: 0; border-radius: var(--rw-r-md); background: transparent; color: inherit; cursor: pointer; } .nav__close svg { width: 18px; height: 18px; } .nav__list { display: grid; gap: var(--rw-s-2); } .nav__link { display: flex; align-items: center; justify-content: space-between; gap: var(--rw-s-3); width: 100%; min-height: 48px; padding: 0.5rem 0; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: var(--rw-fs-lg); font-weight: var(--rw-w-semi); text-align: left; cursor: pointer; } /* The chevron is a rotated corner: no request, and it inherits its colour. */ .nav__chev { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--rw-dur-fast) var(--rw-ease); } [aria-expanded="true"] > .nav__chev { transform: rotate(-135deg) translate(-2px, -2px); } .nav__panel { padding-bottom: var(--rw-s-4); } .nav__panel[hidden] { display: none; } .nav__panel-list { display: grid; gap: var(--rw-s-1); padding-left: var(--rw-s-4); border-left: var(--rw-rule-w) solid var(--rw-veil-20); } .nav__panel-list a { display: block; min-height: 44px; padding: 0.5rem var(--rw-s-3) 0.5rem var(--rw-s-4); border-radius: var(--rw-r-md); } .nav__panel-name { display: block; font-size: var(--rw-fs-sm); font-weight: var(--rw-w-semi); } .nav__panel-note { display: block; margin-top: 0.1rem; font-family: var(--rw-font-mono); font-size: var(--rw-fs-mono); letter-spacing: 0.04em; color: var(--rw-mist); } .nav__foot { gap: var(--rw-s-3); padding-top: var(--rw-s-5); border-top: var(--rw-border-w) solid var(--rw-veil-20); } .nav__foot .btn { --btn-bg: var(--rw-cream); --btn-fg: var(--rw-navy); --btn-bd: var(--rw-cream); } .nav__phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--rw-font-mono); font-size: var(--rw-fs-sm); font-weight: var(--rw-w-semi); } .nav__hours { color: var(--rw-mist); line-height: var(--rw-lh-normal); } /* A tap outside the drawer closes it. */ .nav-scrim { position: fixed; inset: 0; z-index: 105; background: color-mix(in srgb, var(--rw-navy) 62%, transparent); opacity: 0; transition: opacity var(--rw-dur-base) var(--rw-ease); } .nav-scrim[hidden] { display: none; } .nav-scrim.is-open { opacity: 1; } /* The shut drawer is parked off the right edge, which would otherwise widen the document. clip, not hidden: hidden makes a scroll container and the sticky header stops sticking. */ .js-nav { overflow-x: clip; } /* The page must not scroll behind an open drawer. */ html.is-nav-open, html.is-nav-open body { overflow: hidden; } .site-header__cta { display: none; } /* Mobile: one call to action stays out on the bar next to the menu, because a hamburger is one tap too many for the thing most people came to do. It is Try us rather than Book: the bar has room for one and a first visit is the one worth catching. Book a session is in the drawer. */ /* Peach, and it keeps the full 19px bold rather than the 15px the other header buttons use. That is not decoration: navy on peach measures 4.11, which clears AA only at the large text threshold of 18.66px bold. At 15px the same colours would need 4.5 and fail. The size is also part of what makes it the loudest thing on the bar, which is the point. */ .site-header__cta-try.btn { padding: 0.62em 1.1em; } /* --- 62rem and up: a bar, with dropdowns --- */ @media (min-width: 62rem) { .site-header__menu, .nav-scrim { display: none; } .nav, .js-nav .nav { position: static; flex-direction: row; align-items: center; gap: 0; width: auto; height: auto; padding: 0; overflow: visible; background: transparent; color: inherit; visibility: visible; transform: none; } .nav__head, .js-nav .nav__head, .nav__foot, .js-nav .nav__foot { display: none; } .nav__list { grid-auto-flow: column; align-items: center; gap: var(--rw-s-5); } .nav__group { position: relative; } .nav__link { width: auto; min-height: 44px; padding-block: 0.6rem; font-size: var(--rw-fs-sm); font-weight: var(--rw-w-semi); white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color var(--rw-dur-fast) var(--rw-ease); } .nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { border-bottom-color: var(--rw-rust); } .nav__chev { width: 6px; height: 6px; } /* The dropdown is a cream card under either header colour, so it reads the same on the home page and on an inner page. */ .nav__panel { position: absolute; top: calc(100% + var(--rw-s-3)); left: calc(var(--rw-s-4) * -1); z-index: 120; width: max-content; min-width: 17rem; padding: var(--rw-s-3); background: var(--rw-cream); color: var(--rw-navy); border: var(--rw-border-w) solid var(--rw-border-soft); border-radius: var(--rw-r-lg); box-shadow: var(--rw-shadow-lg); } .nav__panel-list { gap: 0; padding-left: 0; border-left: 0; } .nav__panel-list a { padding: var(--rw-s-3) var(--rw-s-4); } .nav__panel-list a:hover { background: var(--rw-white); } .nav__panel-note { color: var(--rw-slate); } .site-header__cta { display: inline-flex; } .site-header__cta.btn { font-size: var(--rw-fs-sm); padding: 0.8em 1.25em; } .site-header__cta-try.btn { padding: 0.62em 1.25em; } } /* --- the dark header, for any page that opens on a dark hero --- */ .site-header--dark { background: var(--rw-navy); color: var(--rw-cream); /* 9.79 on navy, AAA. Without this the menu button inherits navy and vanishes. */ border-bottom-color: var(--rw-veil-12); } .site-header--dark .site-header__menu { border-color: var(--rw-veil-20); } .site-header--dark .btn { --btn-bg: var(--rw-cream); --btn-fg: var(--rw-navy); --btn-bd: var(--rw-cream); } /* The accent button keeps its peach on a dark header too, or the rule above would turn it cream like everything else. */ .site-header--dark .btn--accent { --btn-bg: var(--rw-peach); --btn-fg: var(--rw-navy); --btn-bd: var(--rw-peach); } /* Without this the rule above would fill the outline button in as well, and the header would carry two identical solid buttons. */ .site-header--dark .btn--outline { --btn-bg: transparent; --btn-fg: var(--rw-cream); --btn-bd: var(--rw-cream); } .site-header--dark .btn--outline:hover { --btn-bg: var(--rw-cream); --btn-fg: var(--rw-navy); } @media (min-width: 62rem) { .site-header--dark .nav { color: var(--rw-cream); } .site-header--dark .nav__link:hover, .site-header--dark .nav__link[aria-expanded="true"], .site-header--dark .nav__link[aria-current="page"] { border-bottom-color: var(--rw-blush); } } /* ------------------------------------------------------------- footer --- */ .site-footer { background: var(--rw-navy); color: var(--rw-cream); padding-block: var(--rw-s-9) var(--rw-s-6); } .site-footer a:hover { color: var(--rw-white); } .site-footer__grid { display: grid; gap: var(--rw-s-7); grid-template-columns: 1fr; } @media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer__logo img { height: 38px; width: auto; margin-bottom: var(--rw-s-4); } .site-footer h2 { font-family: var(--rw-font-mono); font-size: var(--rw-fs-mono); font-weight: var(--rw-w-semi); text-transform: uppercase; letter-spacing: var(--rw-ls-mono); color: var(--rw-blush); margin-bottom: var(--rw-s-4); } .site-footer ul { display: grid; gap: var(--rw-s-3); } .site-footer li { font-size: var(--rw-fs-sm); } .site-footer__legal { margin-top: var(--rw-s-8); padding-top: var(--rw-s-5); border-top: var(--rw-border-w) solid var(--rw-border-soft); display: flex; flex-wrap: wrap; gap: var(--rw-s-4) var(--rw-s-6); justify-content: space-between; color: var(--rw-mist); font-size: var(--rw-fs-xs); } /* ------------------------------------------------------- scroll reveal --- */ /* Content is only ever hidden while JavaScript is actively managing the reveal. site.js adds .js-reveal to immediately before it starts observing, so a blocked, failed or slow script can never leave a section invisible, and a crawler always sees the full page. */ .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--rw-dur-slow) var(--rw-ease-out), transform var(--rw-dur-slow) var(--rw-ease-out); } .js-reveal .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }