/* ========================================================================== Redesign rollout — site-wide overrides -------------------------------------------------------------------------- Loaded on every NON-home template (the homepage-redesign template ships its own self-contained bundle and is untouched). It does three jobs: 1. Paint the global page background in the new header/footer tone so the page reads as one seamless surface. 2. Let the new sticky nav work on legacy pages (they pin / to 100% height, which would cut the sticky off after one screen). 3. Map the new chrome's dark theme onto the site's existing `body.dark-theme` switch, and fix the About team photos. The new header/footer markup (header.php / footer.php) lives inside a `.vf` wrapper set to `display:contents`, so home-redesign.css styles the chrome WITHOUT wrapping — and restyling — the legacy page content. ========================================================================== */ /* ---------- 1. Global background = new header/footer tone ---------- Legacy CSS sets `body{background:var(--bg)!important}` (white), so we need !important here to win. Dark uses the same near-black as the redesign. */ body { background: #f5f4f1 !important; } body.dark-theme { background: #161615 !important; } /* ---------- 2. Make the sticky nav work on legacy pages ---------- Legacy CSS pins html/body to height:100% (one viewport). A sticky element's containing block is its parent, so at height:100% the nav drops away after the first screen. Letting them grow to the content height fixes it. The new nav is in-flow & sticky, so we also drop the old fixed-header top padding. */ html, body { height: auto; } body { padding-top: 0; } /* keep in-page anchor targets clear of the sticky nav */ html { scroll-padding-top: 84px; } /* Keep the slim footer pinned to the viewport bottom on short pages (e.g. 404). The old header wrapped the page in `.wrapper{display:flex;min-height:100%}` to do this; the new chrome doesn't render that wrapper, so we move the same sticky-footer layout onto . The legacy `.page{flex:1 1 auto}` rule then expands the content so the footer drops to the bottom. The sticky nav and the fixed progress/mega/back-to-top elements are unaffected by the flex context. */ body { display: flex; flex-direction: column; min-height: 100vh; } /* ---------- 3. Dark theme for the new chrome ---------- home-redesign.css defines the chrome's dark palette under `.vf.dark`, but the rest of the site themes via `body.dark-theme`. We re-point the same custom properties so one switch themes both the chrome and page content. (Values copied verbatim from home-redesign.css's `.vf.dark` block.) */ body.dark-theme .vf { --bg: #161615; --bg2: #1d1d1c; --surface: #222221; --surface2: #2a2a29; --border: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.06); --text: #f2f1ee; --muted: #a3a39e; --faint: #6e6e69; --ribbon-bg: var(--accent); --ribbon-ink: #10231c; } /* moon in light mode, sun in dark mode (mirrors the home template's swap) */ body.dark-theme .vf .mode-icon--moon { display: none; } body.dark-theme .vf .mode-icon--sun { display: flex; } /* ---------- 4. About page — team photos ---------- The team Swiper is never initialised in JS, so the slides render as a raw flex row: with one slide visible it stretches full-width and `cover` zooms in so far that faces get cropped out the top. We don't need a carousel here — a simple responsive grid of portrait cards shows every member, and `background-position:center top` keeps faces in frame. */ .about-teams__slider .swiper-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; transform: none !important; /* neutralise any stray Swiper transform */ } .about-teams__slider .swiper-wrapper .swiper-slide { width: auto !important; min-height: 360px; background-position: center top; /* show the face, not the midriff */ } /* the (non-functional) pagination dots are pointless without a carousel */ .about-teams__slider .swiper-pagination { display: none; }