/* ========================================================================== Social Sunday — Champions Night of Worship Design tokens -------------------------------------------------------------------------- This file is the contract. index.html and site.css consume it. Change a value here and the whole site follows. Do not hardcode a brand colour or a type size anywhere else. Two colours plus neutrals. That is the whole palette, on purpose. ========================================================================== */ :root { /* --- brand primitives -------------------------------------------------- */ --ss-black: #0A0A0B; /* the base. not pure black — a trace of warmth */ --ss-surface: #141416; /* raised panels, form fields */ --ss-surface-2: #1D1D20; /* the one step above that, used sparingly */ --ss-line: #2A2A2E; /* hairlines */ --ss-crimson: #DE3A47; /* THE accent. one colour, no siblings. */ --ss-crimson-deep: #A81E2A; /* hover / active / pressed */ --ss-crimson-tint: #EF5865; /* small accent text on a RAISED panel only */ --ss-bone: #F5F3F0; /* body text on dark */ --ss-muted: #8A8580; /* secondary text on dark — 5.4:1 on --ss-black */ /* !! HARD RULE — READ BEFORE TOUCHING --ss-crimson. Contrast is symmetric, so crimson-on-black and black-on-crimson are the same number. That single number governs the eyebrows, the accent headline line, the primary button label AND every word in the programme block — which is why the accent is pinned to the lightest crimson that still reads as deep. #D22B38, the first choice, measured 3.90:1 and failed all four at once. #DE3A47 is 8% lighter and clears AA. Measured against #0A0A0B, sampled from rendered pixels: --ss-bone on --ss-black -> 17.87:1 any size --ss-crimson on --ss-black -> 4.53:1 any size --ss-black on --ss-crimson -> 4.53:1 any size --ss-muted on --ss-black -> 5.42:1 any size --ss-bone on --ss-crimson -> 3.95:1 LARGE ONLY (>=24px) The raised panels (--ss-surface, --ss-surface-2) are lighter than the base, so the accent loses contrast against them: 4.21:1 and 3.85:1. Small accent text on a panel therefore uses --ss-crimson-tint (5.01:1 on the lightest panel), never --ss-crimson. Fills, borders and focus rings are non-text UI and only need 3:1, so they keep the true accent. If you swap the accent, re-measure ALL of the above before shipping. */ /* --- semantic --------------------------------------------------------- Components point at these, never at the primitives above. */ --color-bg: var(--ss-black); --color-surface: var(--ss-surface); --color-surface-alt: var(--ss-surface-2); --color-text: var(--ss-bone); --color-text-muted: var(--ss-muted); --color-accent: var(--ss-crimson); --color-accent-hover: var(--ss-crimson-deep); --color-accent-quiet: var(--ss-crimson-tint); /* small accent text on panels */ --color-on-accent: var(--ss-black); /* NOT bone. see the hard rule above. */ --color-border: var(--ss-line); --color-focus: var(--ss-crimson); /* --- type ------------------------------------------------------------- One display + one text face. Hierarchy comes from size, weight and tracking — not from adding families. Archivo is a variable font with a width axis (62%–125%). The display face is Archivo pushed to 125% width; that expanded cut is the whole visual identity of the headlines. Never render display type at the default width — it collapses into an ordinary grotesque. */ --font-display: Archivo, "Archivo Expanded", ui-sans-serif, system-ui, sans-serif; --font-text: "General Sans", ui-sans-serif, system-ui, sans-serif; --width-expanded: 125; /* font-variation-settings 'wdth' for display type */ --width-normal: 100; /* Fluid scale. px endpoints in the comments are the measured values at the clamp boundaries (360px and 1440px viewport). */ --font-hero: clamp(3rem, 1.1077rem + 8.4103vw, 8.5rem); /* 48 -> 136px */ --font-h2: clamp(2rem, 1.3128rem + 3.0545vw, 4rem); /* 32 -> 64px */ --font-h3: clamp(1.375rem, 1.1601rem + 0.9551vw, 2rem); /* 22 -> 32px */ --font-lead: clamp(1.125rem, 1.0391rem + 0.3821vw, 1.375rem);/* 18 -> 22px */ --font-body: 1.0625rem; /* 17px */ --font-small: 0.9375rem; /* 15px */ --font-micro: 0.8125rem; /* 13px */ /* The programme block reads as print, so its type is set on its own scale. */ --font-programme-time: clamp(1.5rem, 1.1560rem + 1.5288vw, 2.5rem); /* 24 -> 40px */ --font-programme-item: clamp(1.125rem, 0.9960rem + 0.5733vw, 1.5rem);/* 18 -> 24px */ --tracking-hero: -0.035em; /* huge display type needs to be pulled tight */ --tracking-tight: -0.02em; --tracking-wide: 0.14em; /* eyebrows, section numbers, small caps */ --weight-display: 700; --weight-body: 400; --weight-medium: 500; --weight-bold: 700; --leading-hero: 0.86; /* the three hero lines must lock into a block */ --leading-tight: 1.08; --leading-snug: 1.3; --leading-body: 1.62; /* --- spacing (4px base) ------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --page-max: 1280px; --page-gutter: var(--space-6); --spine-w: clamp(2.75rem, 5vw, 5.5rem); /* left rule + section numbers */ /* --- the arch ---------------------------------------------------------- The signature graphic. A victory arch for "Champions", a threshold for "everyone has a seat". Flat crimson, hard edges — it is a structural shape, never a decoration, and it never carries a gradient or a glow. Expressed as a border-radius so it can crop any box at any width. */ --arch-crown: 100% 100% 0 0 / 42% 42% 0 0; /* the standard springing line */ --arch-tall: 100% 100% 0 0 / 68% 68% 0 0; /* narrow boxes: taller crown */ --arch-stroke: 2px; --arch-stroke-heavy: 4px; /* --- photography -------------------------------------------------------- The photographs are real, from the room, and they run warm — timber wall, stage light, skin tones. Dropped in raw they fight the crimson. The grade is a light touch on purpose. A full crimson duotone would sit more "designed", but it also flattens the faces of the people in these pictures into a texture, and the whole argument of this page is that the night is about those people rather than a production. So: pull the saturation back far enough that the timber stops competing, hold a little extra contrast, and leave the warmth in. Dial toward duotone by lowering the saturate() value if that changes. */ A light grade alone was not enough — the photographs still read as snapshots dropped into the page rather than part of it. They are now duotoned into the brand: driven to monochrome, then tinted with the accent through a `color` blend. Two colours and neutrals, extended to the photography. The two lead pictures are different: their subjects are cut out of the background entirely and stand on the page itself, so those keep their colour and only take a light grade. Faces should stay faces. */ --photo-grade: grayscale(1) contrast(1.22) brightness(0.72); --photo-tint: 0.58; /* strength of the accent over the monochrome */ --photo-grade-focus: grayscale(0) contrast(1.02) brightness(1); --cut-grade: saturate(0.92) contrast(1.05) brightness(0.97); /* --- cut-out edge treatment --------------------------------------------- A subject lifted from its background has a hard bottom edge where the crop ends, and that edge is what makes a cut-out look like a cut-out. Two things fix it: 1. --cut-fade masks the figure's alpha away down the lower half, so the body dissolves into the page instead of stopping at a line. This is a MASK, not a painted gradient — no gradient is ever visible as colour, which is what the no-gradient rule is actually about. Requested explicitly by the owner. 2. --cut-outline traces the accent around the silhouette. drop-shadow follows the alpha channel, so four zero-blur offsets produce a clean stroke that hugs the figure exactly. Because a mask is applied after filters, the outline fades out with the body rather than leaving a stranded line across the bottom. Move the first stop of --cut-fade to change where the dissolve begins. */ --cut-fade: linear-gradient(to bottom, #000 0%, #000 44%, rgba(0, 0, 0, 0.62) 63%, rgba(0, 0, 0, 0.26) 78%, rgba(0, 0, 0, 0.06) 90%, transparent 97%); --cut-outline-w: 1.5px; /* --- radius ------------------------------------------------------------ Flat and hard-edged everywhere except the arch. Square corners are the point; do not soften them. */ --radius-flat: 0; /* --- borders ------------------------------------------------------------ */ --border-hair: 1px solid var(--color-border); --border-btn: 2px; /* --- elevation ---------------------------------------------------------- There is none. This design is flat by mandate — depth is communicated by colour blocking and negative space. No box-shadow token exists on purpose. */ /* --- motion ------------------------------------------------------------ One curve. Decisive, no overshoot, nothing bounces. Four intentional interactions site-wide — not a blanket fade-up on every element. */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --motion-fast: 0.2s var(--ease-out); --motion-mid: 0.4s var(--ease-out); --dur-arch: 1.1s; /* the hero arch stroke drawing itself, once */ --dur-reveal: 0.5s; --stagger-step: 60ms; /* programme rows; 6 rows = 300ms total, one gesture */ } /* Everything above assumes a dark page. There is no light mode — the brief specifies a dark, moody base as the identity. Honour the user's contrast preference rather than flipping the palette. */ @media (prefers-contrast: more) { :root { --ss-muted: #B5B0A9; /* 9.1:1 on --ss-black */ --ss-crimson: #E84553; /* 6.4:1 on --ss-black */ --ss-line: #4A4A50; } }