/* TSC Join a C-Group — front-end styles. "Full bold" system: red-grit field, Barlow Condensed display, Acumin UI text, black translucent cards with soft shadows + gold glow, yellow accents. Scoping note: the modal and the toast render on , outside .tsc-jag, so the design tokens live on :root and every surface reads the same variables. */ /* Both faces ship as WOFF2 with every glyph the originals had — nothing is subsetted away, so no character can ever fall back to a different font. The size win came from elsewhere: Acumin is a variable font whose 1MB was mostly interpolation data for axes this UI never varies. Pinning wdth to 100 and slnt to 0 (slnt=0 is the iOS oblique fix) and keeping only the 300-800 weight range the CSS asks for took it from 1,005 KB to 41 KB, rendering identically. */ /* Barlow Condensed carries EVERYTHING set in caps: the step headlines, the group names on the cards, and the info-sheet title. It replaced Hightone, which is a distressed display face — it held up at 90px+ on the landing headline but at the 32px of a sheet title its roughness ate the letterforms, and a name like "ADDI PENNE & EMILY STUECKER" stopped being readable. It carried the names first for that reason, then the headlines too, so the whole page is one voice instead of two. Shipped whole — 525 characters, nothing subsetted — so no name can hit a missing glyph. hightone.woff2 is left in assets/fonts/ but is no longer declared, so it is not downloaded; restoring the @font-face and --tsc-display is all a revert would take. */ @font-face{font-family:'BarlowCondensed';src:url('../fonts/barlow.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Acumin';src:url('../fonts/acumin.woff2') format('woff2'); font-weight:300 800;font-style:normal;font-display:swap} :root{ --tsc-red:#ca1c2e; --tsc-yellow:#f0ba1b; --tsc-ink:#141013; /* Interaction never changes HUE — only luminance. The brand is four colours; a fifth one for hover is what makes a UI look bolted together. Yellow surfaces light up, black surfaces lift. */ --tsc-yellow-lit:#ffd34d; --tsc-card:rgba(18,10,12,.80); --tsc-card-lift:rgba(32,19,21,.90); --tsc-glow:rgba(255,208,70,.6); --tsc-halo:rgba(0,0,0,.5); /* Same stack as --tsc-title: one face for all caps type. Kept as its own token because the headline and the names are sized and tracked independently. */ --tsc-display:'BarlowCondensed','Arial Narrow',sans-serif; --tsc-title:'BarlowCondensed','Arial Narrow',sans-serif; --tsc-ui:'Acumin','Helvetica Neue',Arial,sans-serif; /* ONE grit asset, LOSSLESS, at the resolution a phone can actually show. History worth keeping: it was drawn at 440px (a 29% downscale of the artwork) which crushed it into busy speckle; then at 1200px lossy, which upscaled 2.8x on a retina phone AND smeared — measured against a lossless reference, the worst pixels were 22% off, which is the blocking that reads as "compressed". Now: 3400px, because 1100 CSS px at 3x device pixels is 3300 — so it renders 1:1 on a phone with no upscale — and lossless, so there are no artefacts at all. 6000px full resolution was tempting (and compresses to a similar size) but decodes to 103 MB of RAM versus 33 MB, for detail no screen in the room can resolve. Lossless normally balloons after a downscale because interpolation invents thousands of intermediate alpha values; quantising alpha to 32 levels while keeping pure 0 and pure 255 exact brings it back to 375 KB with a worst-case error of 4/255. The same file serves the field and the in-card overlay, so it decodes once. */ --tsc-grit:url('../img/grit.webp');--tsc-seal:url('../img/seal-mark.png'); /* Where the card's photo band is taken FROM, vertically. Not the centre, and this is why: the band is a wide strip across a much taller photo, and leader photos are two people stood up against a wall with their heads near the top of the frame. Centred, a 4:3 photo shows only its middle third — 33% to 67% — which runs the crop straight through their foreheads. 15% puts the strip near the top of the frame instead, which keeps heads in shot for landscape AND portrait sources. 7%, and the number was MEASURED rather than picked. It was 10% until desktop photos were still coming up a little tight at the top: expanding the band alone only moves the window from 5.6% to 4.7% of the frame, because a taller band grows DOWNWARD as much as up. The bias is the lever that buys top margin, and 7% puts desktop at 3.3% and the phone at 2.3% — near-identical framing at both sizes, which is worth having on its own. Rendered at the real card width with the real stylesheet, a 4:3 photo shows: centred 33%-67% (which is the mid-forehead crop that started this), at 15% it is 8.3%-52.8% — still shaving the top of the hair — and at 10% it is 5.6%-50.0%, which clears it. Portrait and 16:9 sources both land inside that too. Lower this if a photo ever shows too much wall above someone; raise it and you are back to cutting heads off. */ --tsc-photo-y:7%; /* Strength of the photo-to-card join at the bottom of a card image. 1 = as designed, 0 = no join at all. See .gimg::after for why it is only the bottom third. */ --tsc-photo-veil:1; /* GRIT SCALE — the brand original is 6000x4500. It used to be drawn at 440px with a SECOND offset tile stacked on top, which crushed the texture into fine, busy speckle and doubled its density. The main site shows the same artwork large: soft blotches, sparse flecks. One layer, floored large enough that a phone shows a calm portion of the texture rather than the whole busy tile. This floor is what sets the resolution the field asset needs: 1100 CSS px on a 3x phone is 3300 device pixels, hence the 3400px source above. Raise one, raise both. */ --tsc-grit-size:max(1100px, 100vw); /* Val asked for the texture to read softer so the content pops. The field asset is opaque (red baked in), so "more transparent" is a red veil over it rather than an alpha change — one number, and it keeps the compression win. 0 = full texture, 1 = flat red. */ --tsc-grit-veil:.35; --tsc-grit-bg:linear-gradient(rgba(202,28,46,var(--tsc-grit-veil)),rgba(202,28,46,var(--tsc-grit-veil))), var(--tsc-grit) center top / var(--tsc-grit-size) repeat; } .tsc-jag{ /* Full-bleed: fill the whole viewport width even inside a themed/Elementor column. */ width:100vw;max-width:100vw;margin-left:calc(50% - 50vw); background:var(--tsc-red);color:#fff; font-family:var(--tsc-ui);-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden; /* Acumin has a slant (slnt) axis; some iOS Safari builds render it obliquely by default. Pin slnt to 0 (font-weight still drives the wght axis) + kill synthetic italics. */ font-style:normal;font-synthesis:none; } .tsc-jag *,.tsc-jag-modal *,.tsc-jag-toast{font-variation-settings:'slnt' 0} .tsc-jag *{box-sizing:border-box;margin:0;padding:0} .tsc-jag button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent} /* THEME BLEED GUARD. WordPress themes (and Elementor) style bare