/* ========================================================================== ABIDE CITY – design tokens Everything downstream reads from here. Change a value once, site follows. ========================================================================== */ /* --- Typefaces ----------------------------------------------------------- Inter, self-hosted as the variable font so the display weight can sit at 450 – between Regular and Medium, which is where it matches the weight the design was drawn at. Inter is SIL OFL. Azeret Mono is SIL OFL. Both are free to embed, so nothing here needs a licence before launch. Aktiv Grotesk (Dalton Maag, desktop licence only) was the original display face. It is gone from the CSS; the TTFs are still in assets/fonts/ for reference and are not loaded. NOTE FOR WIX: the Studio Editor does not support variable fonts. Static instances cut at 400 and 450 live in assets/fonts/wix/ for uploading there. -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Variable-latin.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Variable-latin-ext.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Azeret Mono'; src: local('Azeret Mono Regular'), url('../assets/fonts/AzeretMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Azeret Mono'; src: local('Azeret Mono Medium'), url('../assets/fonts/AzeretMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } :root { /* --- Core palette (brand base) --- */ --paper: #FFFFFF; --ink: #333333; /* the same two colours as components, so hairlines and scrims can be written as rgba(var(--ink-rgb), .18) and flip with the theme */ --paper-rgb: 255,255,255; --ink-rgb: 51,51,51; --bone: #E6E6E6; --bone-rgb: 230,230,230; /* The only tint on the site. Grounds are either true paper or this. */ /* Bone, held back. 20% was invisible once it was fading at both ends, so the fade had nothing to arrive at. This is the dial. */ --field: rgba(230, 230, 230, .55); --mist: #F6F6F4; /* the quietest step off paper – separates components without reading as a coloured band */ /* Grounds that do NOT flip with the theme. Anything sitting on a photograph is white in both themes, and the two full-field moments (the opener and the Scripture overlay) stay ink. */ --on-photo: #FFFFFF; --field-bg: #16160F; /* the opener */ --field-fg: #FFFFFF; --verse-bg: #333333; /* the Scripture overlay: Abide grey */ /* The footer, as one switch. Set these four back to #333333 / #FFFFFF / the paper rule / invert(1) brightness(2) to put it on ink again. */ --footer-bg: #FFFFFF; --footer-fg: var(--ink); --footer-rule: rgba(51, 51, 51, .18); --footer-mark: none; /* filter on the wordmark */ /* The brand neutral. It carries every call to action that is not sitting on a photograph, which is the one place colour appears on the site. --cta is the token components read: it is lifted on dark grounds so a mono label at 11px still holds, and goes white over a photograph. */ --neutral: #7F7B62; --neutral-rgb: 127,123,98; --sage: var(--neutral); /* old name, kept so nothing breaks */ --cta: var(--neutral); /* --- Seasonal pairs, held for later --- */ --spring-deep: #4A6B2E; --spring-bright: #B2CC46; --summer-deep: #2F24B8; --summer-bright: #46C7F0; --autumn-deep: #D2764A; --autumn-bright: #F2C9A8; --winter-deep: #8894D8; --winter-bright: #CFC4F5; --easter-deep: #B4472A; --easter-bright: #F7A23C; --xmas-deep: #14564B; --xmas-bright: #35C08D; /* ====================================================================== TYPE HIERARCHY – six steps, no improvising. Every piece of text on the site is one of these. If something needs a seventh size, the page is trying to say too much. ====================================================================== */ --display: 'Inter', 'Helvetica Neue', Arial, sans-serif; --mono: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Inter is a wider face than Aktiv and carries more of its own sidebearing, so one tracking value no longer serves the whole scale. Measured against the Aktiv files for the same strings at the same sizes: t1 112px Aktiv -0.045em Inter -0.042em +3.8% wide t2 56px Aktiv -0.045em Inter -0.042em +3.8% t3 32px Aktiv -0.04em Inter -0.032em +2% body 16px Aktiv -0.04em Inter -0.014em +11% The display steps are held near width parity, because the headline is cut to fill the measure and a few per cent there is the difference between one line and two. Body is NOT held: -0.04em on Inter at 16px is cramped, and fighting a face's metrics with tracking is what makes a substitute look like one. Paragraphs run about 11% wider, so the measures were re-cut. */ --track: -0.014em; /* body, mono rows, everything small */ --track-title: -0.032em; /* t3 and the t4 emphasis line */ --track-tight: -0.042em; /* t1 and t2 only */ /* The display weight, in one place. Inter is loaded as a variable font so this is a real 450, not a rounded 400 or 500. Everything that used to said font-weight: 500 now reads this. */ --w-mid: 450; --t1: clamp(3.25rem, 7.4vw, 7rem); /* hero + masthead. Once per page. */ --t2: clamp(2.25rem, 3.6vw, 3.5rem); /* section title */ --t3: clamp(1.5rem, 2vw, 2rem); /* item title */ --t4: 1.25rem; /* lead / emphasis */ --t5: 1rem; /* body */ --t6: 0.6875rem; /* mono label – 11px */ --t6-nav: 0.75rem; /* mono nav – 12px */ --lh-tight: 1.02; /* t1, t2 */ --lh-title: 1.14; /* t3 */ --lh-body: 1.6; /* t4, t5 */ --lh-mono: 1.7; /* ====================================================================== SPACING – an 8px scale. Padding and margins come from here only. ====================================================================== */ --s1: 8px; --s2: 16px; --s3: 24px; /* = the grid gutter */ --s4: 40px; --s5: 64px; /* = the outer margin */ --s6: 96px; --s7: 140px; --s8: 200px; /* Every section breathes the same. One clamp rather than a fixed 140 plus two media-query overrides, so the step scales with the window instead of jumping, and the largest gap is 112 rather than 140 – the old value read as a hole on the shorter components. */ --section-y: clamp(64px, 6.2vw, 112px); --block-y: var(--s5); /* gap between blocks inside a section */ /* ====================================================================== IMAGE RATIOS – squared off by default. Two exceptions, used sparingly. ====================================================================== */ --ratio: 1 / 1; --ratio-portrait: 4 / 5; --ratio-wide: 3 / 2; /* --- Layout --- --edge is the ONE outer margin. It already carries the centring offset for the 1560 measure, so every full-bleed element (hero, band, footer, index rows) lands on the same vertical as every column inside .grid. Before this, .grid centred at 1560 but full-bleed furniture didn't, and the two disagreed by 20px at 1600 – which is what kept reading as "the grid isn't right". */ --measure: 1560px; --edge-min: var(--s5); --edge: max(var(--edge-min), calc((100vw - var(--measure)) / 2 + var(--edge-min))); --content: 1200px; --gutter: var(--s3); } /* The light/dark control and its token block were removed: the site is one ground. The --paper / --ink / *-rgb pairs stay in place, so the whole mechanism is still there if a theme is ever wanted again. ========================================================================== */ @media (max-width: 880px) { :root { --edge-min: var(--s3); --block-y: var(--s4); } } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The drawers park off-canvas at translateX(100%), and a transformed box still counts toward the scrollable area. On a phone that pushed the page's scroll width out to 615px, and the fixed header — which is pinned with left and right rather than a width — stretched to match it, carrying the Menu button off the right-hand edge. `clip` stops the overflow without making the root a scroll container, which `hidden` would, and which breaks sticky positioning. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); font-weight: 400; letter-spacing: var(--track); font-size: var(--t5); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } /* Inter runs about 11% wider than Aktiv at body sizes, which left a handful of paragraphs ending on a single short word. Rather than hand-breaking copy that is going to be edited in Wix anyway, let the browser hold the last lines back. Headings are deliberately left alone – their breaks were set by eye and `balance` would move them. */ p, dd, li, .lead__bio, .split__lead, .switch__lead { text-wrap: pretty; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } /* ========================================================================== TYPE PRIMITIVES Classes that map straight onto the hierarchy. Components use these rather than setting their own sizes, so the scale can never drift. ========================================================================== */ .t1 { font-size: var(--t1); font-weight: var(--w-mid); line-height: var(--lh-tight); letter-spacing: var(--track-tight); } .t2 { font-size: var(--t2); font-weight: var(--w-mid); line-height: var(--lh-tight); letter-spacing: var(--track-tight); } .t3 { font-size: var(--t3); font-weight: var(--w-mid); line-height: var(--lh-title); letter-spacing: var(--track-title); } .t4 { font-size: var(--t4); font-weight: 400; line-height: var(--lh-body); } .t5 { font-size: var(--t5); font-weight: 400; line-height: var(--lh-body); } .label { font-family: var(--mono); font-size: var(--t6); letter-spacing: 0; text-transform: uppercase; line-height: var(--lh-mono); } .muted { opacity: .62; } .quiet { opacity: .45; } /* stack rhythm – the only vertical margins on the site */ .stack-1 > * + * { margin-top: var(--s1); } .stack-2 > * + * { margin-top: var(--s2); } .stack-3 > * + * { margin-top: var(--s3); } .stack-4 > * + * { margin-top: var(--s4); } .stack-5 > * + * { margin-top: var(--s5); } /* ========================================================================== IMAGES – squared off everywhere unless explicitly told otherwise ========================================================================== */ .img { display: block; width: 100%; aspect-ratio: var(--ratio); object-fit: cover; } .img--portrait { aspect-ratio: var(--ratio-portrait); } .img--wide { aspect-ratio: var(--ratio-wide); } .img--fill { aspect-ratio: auto; height: 100%; }