/* ========================================================================== Eight Group — global styles Tokens mirror the Figma variables (8G palette / Web type styles) ========================================================================== */ /* ---- Fonts ------------------------------------------------------------- */ /* Larken — supplied brand font */ @font-face { font-family: "Larken"; src: url("../assets/fonts/Larken-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Larken"; src: url("../assets/fonts/Larken-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Larken"; src: url("../assets/fonts/Larken-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Larken"; src: url("../assets/fonts/Larken-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } /* Hanken Grotesk — loaded from Google Fonts (see ). Note: it won't render in this sandbox's preview screenshots (network blocked here), but will load fine in any real browser. */ /* ---- Design tokens ------------------------------------------------------ */ :root { --c-dark-green: #0b2b2a; /* 8G - Dark Green */ --c-teal: #1a4a48; /* 8G - Teal */ --c-gold: #a77421; /* 8G - Gold */ --c-cream: #f5f5f0; /* 8G - Light Cream */ --c-cream-50: #f2f2ec; /* 8G - Dark Cream 50 */ --c-orange: #ea5f3e; /* 8G - Orange */ --c-orange-40: #f7bfb2; /* Orange 40 tint (type on the signup panel) */ --c-green-80: #3c5555; /* Dark Green 80 tint */ --c-green-60: #6d807f; /* Dark Green 60 tint (meta text) */ --c-green-40: #9daaaa; /* Dark Green 40 tint (text on dark) */ --c-green-20: #ced5d4; /* Dark Green 20 tint (rules) */ --font-serif: "Larken", Georgia, serif; --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --pad-x: 2vw; /* page gutter (desktop) */ /* Column gutter for the 12-column grid — proportional, like the page gutter. Capped at the width where `.content-wrapper` hits its 1800px max: past that the wrapper stops growing, so a pure vw gutter would keep widening and quietly eat the columns. 1.5vw = 21.6px at the design's 1440, within a pixel of the 20px it replaces. */ --grid-gutter: min(1.5vw, 28px); --header-h: 107px; /* The content wrapper's ceiling. A variable because the article's media blocks have to match it exactly without being inside a wrapper. */ --content-max: 1800px; /* Ceiling for the article's reading column. 7 of 12 columns is ~1000px in an 1800 wrapper, which is past a comfortable line length. */ --prose-max: 750px; /* Shared transition lists. Kept as variables so an element that both reveals and has its own hover transitions can compose the two — setting `transition` twice would otherwise silently drop one of them. */ --t-btn: background-color 0.25s ease, border-color 0.25s ease, padding 0.3s ease, color 0.15s ease 0.18s; /* NB: the reveal transition is NOT kept here. A var() nested inside a custom property is resolved where that property is *declared* — so a var(--reveal-delay) written at :root would bake in :root's value (0s) and every element would inherit a zero delay. It's declared inline below. */ } /* ---- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.3; color: var(--c-dark-green); background: #fff; -webkit-font-smoothing: antialiased; } img, svg { display: block; } a { color: inherit; text-decoration: none; } p { margin: 0; } h1, h2, h3, hgroup { margin: 0; } h1, h2, h3 { font-weight: 400; } h1 { text-wrap: balance; } h2 { text-wrap: pretty; } /* h2s are often wider — pretty avoids over-short lines */ /* Animated underline for text links: grows from the left on hover, retreats to the right on mouse-out */ .footer-nav a, .site-footer__address a, .section-legal__col a { position: relative; } .footer-nav a::after, .site-footer__address a::after, .section-legal__col a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .footer-nav a:hover::after, .site-footer__address a:hover::after, .section-legal__col a:hover::after { transform: scaleX(1); transform-origin: left; } /* Site-wide section wrapper: gutters + max content width. Mirrors the "content-wrapper" frames in the Figma file — every section's content sits inside one of these; vertical padding is set per section. */ .content-wrapper { max-width: var(--content-max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } /* ---- 12-column grid ------------------------------------------------------ The layout grid the Figma file is drawn on: 12 fluid columns and a proportional gutter, inside the content wrapper. At the design's 1440 the content area is 1380 and a column is 95.4px, so the file's spans land within a pixel — 3 cols = 329, 4 = 446, 5 = 563, 8 = 915, 9 = 1032 (design: 330 / 447 / 562 / 916 / 1030). Put `.grid-12` on the row and give each child a span (`.col-9`) and, where it doesn't simply follow the previous one, a start (`.col-start-4`). Tracks are `1fr` and the gutter is `--grid-gutter` (1.5vw, capped — see :root), so the whole grid scales with the page rather than the columns absorbing a fixed gutter as the viewport shrinks. The spans are written as `grid-column-end: span N`, not the `grid-column` shorthand, so a `.col-start-N` alongside them isn't wiped out — the shorthand would reset the end back to `auto` and collapse the item to one column. Two other rules of the road: a section rule for a `.grid-12` row must never set `display` (it would beat `.grid-12` on source order), and `order` still works, so mobile can reorder a stacked row. Row gaps are a per-section decision: set `--grid-row-gap` on the row. Below 860px the whole thing collapses to a single column and every span goes full width, which is the mobile translation this site already uses. */ .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--grid-row-gap, 0px); } .col-1 { grid-column-end: span 1 } .col-2 { grid-column-end: span 2 } .col-3 { grid-column-end: span 3 } .col-4 { grid-column-end: span 4 } .col-5 { grid-column-end: span 5 } .col-6 { grid-column-end: span 6 } .col-7 { grid-column-end: span 7 } .col-8 { grid-column-end: span 8 } .col-9 { grid-column-end: span 9 } .col-10 { grid-column-end: span 10 } .col-11 { grid-column-end: span 11 } .col-12 { grid-column-end: span 12 } .col-start-1 { grid-column-start: 1 } .col-start-2 { grid-column-start: 2 } .col-start-3 { grid-column-start: 3 } .col-start-4 { grid-column-start: 4 } .col-start-5 { grid-column-start: 5 } .col-start-6 { grid-column-start: 6 } .col-start-7 { grid-column-start: 7 } .col-start-8 { grid-column-start: 8 } .col-start-9 { grid-column-start: 9 } .col-start-10 { grid-column-start: 10 } .col-start-11 { grid-column-start: 11 } .col-start-12 { grid-column-start: 12 } /* ---- Sticky scenes ------------------------------------------------------- How to run more than one sticky section on a page without them fighting. Two rules, and the first is the one that actually matters: 1. **Scope.** A sticky element is pinned for as long as its *containing block* is on screen — so a band sitting directly in
is live for the whole page, and two of them end up on screen together (which is exactly what happened: the alpine band was pinned to the bottom of the window from load and painted over the vision photo). Wrapping each band with the section it interacts with in a `.sticky-scene` makes the wrapper the containing block, so the band physically cannot appear before that scene arrives or after it has passed. No JS, no z-index arms race, and scenes can be reordered freely. 2. **Layer.** Inside a scene the band sits behind and the sections sit in front — `.sticky-scene__back` against the lift below. A static element paints below a positioned one, so every section has to be positioned for that to hold, whether it is a direct child of
or of a scene. To add a sticky section: wrap it and its partner section in a `.sticky-scene`, mark the layer that goes behind, and give it its own `position: sticky` + offset (see the two bands for the `top` vs `bottom` cases). Don't put `overflow` on the wrapper — it disables sticky. */ main > *, .sticky-scene > * { position: relative; z-index: 1; } .sticky-scene__back { z-index: 0; } /* ---- Buttons ------------------------------------------------------------ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; /* One variable drives height and the swipe geometry, so the 35.5° angle holds at every size (run = height / tan 35.5° = height × 1.4025) */ --btn-h: 56px; --btn-run: calc(var(--btn-h) * 1.4025); height: var(--btn-h); padding: 10px 20px 10px 25px; border: 0; /* every .btn was an until the contact form's