/* ========================================================================== Marble Consulting Group — editorial layer, part 2 of 2 editorial.css grew past 500KB, which a plain static file server truncates mid-transfer: everything past ~522KB silently never reached the browser, so the page rendered half-styled and any rule near the end was dead on arrival. The file is split at a brace-depth-zero boundary - nothing is deleted, added or reordered, and part 1 then part 2 in the is byte-identical to the original cascade. ========================================================================== */ .otn__frame--move .otn__shot img { object-position: 44% 46%; filter: brightness(calc(0.5 + 0.54 * var(--m))) saturate(calc(0.7 + 0.42 * var(--m))) contrast(calc(0.96 + 0.08 * var(--m))); } .otn__frame--move .otn__shot { box-shadow: inset 0 0 0 1px rgba(192, 156, 96, calc(0.14 + 0.3 * var(--m))), 0 calc(var(--m) * 34px) calc(24px + var(--m) * 56px) -20px rgba(0, 0, 0, calc(0.18 + 0.62 * var(--m))); } .otn__shot { position: absolute; inset: 0; overflow: hidden; border-radius: 2px; background: var(--obsidian-raised); } .otn__shot img { position: absolute; inset: -5%; width: 110%; height: 110%; /* main.css carries a global img { max-width: 100% } that silently clamps any deliberately oversized image */ max-width: none; display: block; object-fit: cover; /* NO transition on filter: it is computed from --m, which GSAP writes every frame, and a transition would smear the whole scrub */ } /* the pointer specular, inside the frame so it is clipped with the picture */ .otn__gleam { --omx: 50; --omy: 50; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(42% 34% at calc(var(--omx) * 1%) calc(var(--omy) * 1%), rgba(255, 240, 212, 0.2), transparent 70%); } /* ---- the words. Fixed, and each one carries its own scrim, because a photograph is travelling underneath them. ---- */ .otn__head, .otn__lede, .otn__neg, .otn__note, .otn__end { position: absolute; z-index: 5; isolation: isolate; /* keeps the scrim pseudo out of the frames' business */ } /* ONLY the negations cross a photograph, so only they carry a scrim. A scrim behind a block that sits on plain obsidian paints a slightly different black rectangle with visible edges and nothing else. It has to be a wide soft ellipse rather than a box, because it crosses both frames and one of them is lit. */ .otn__neg::before { content: ""; position: absolute; inset: -3.4rem -5rem -3.6rem -4.4rem; z-index: -1; pointer-events: none; background: radial-gradient(46% 52% at 40% 50%, rgba(6, 6, 8, 0.93), rgba(6, 6, 8, 0.74) 56%, rgb(34 31 27 / 0) 88%), radial-gradient(72% 76% at 46% 50%, rgba(6, 6, 8, 0.6), rgb(34 31 27 / 0) 84%); } .otn__head { left: 3%; top: 6%; width: 38%; } .otn__h { margin: 0.55rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--white); } .otn__h em { font-style: italic; color: var(--gold-light); } .otn__lede { left: 3%; top: 44%; width: 31%; margin: 0; color: var(--ink); font-size: var(--text-lg); line-height: 1.6; } .otn__neg { left: 30%; top: 56%; width: 52%; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem); line-height: 1.24; letter-spacing: -0.014em; color: var(--white); } .otn__note { left: 62%; top: 90%; width: 30%; margin: 0; color: var(--vein); font-size: var(--text-sm); line-height: 1.68; } .otn__end { left: 3%; top: 76%; width: 46%; } .otn__close { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem); line-height: 1.18; letter-spacing: -0.018em; color: var(--white); } .otn__close span { display: inline; } .otn__close em { font-style: italic; color: var(--gold-light); } .otn__act { margin-top: clamp(1.1rem, 0.85rem + 1vw, 1.8rem); } @media (hover: hover) and (pointer: fine) { .otn__frame--move:hover .otn__shot { box-shadow: inset 0 0 0 1px rgba(192, 156, 96, calc(0.3 + 0.3 * var(--m))), 0 calc(var(--m) * 40px) calc(24px + var(--m) * 64px) -18px rgba(0, 0, 0, calc(0.24 + 0.62 * var(--m))); } } /* ---- the type wraps to more lines as the measure narrows, so the stage gets taller in steps rather than in one jump ---- */ @media (max-width: 1360px) { .otn__stage { --oh: 0.66; } } @media (max-width: 1180px) { .otn__stage { --oh: 0.75; } } @media (max-width: 1024px) { .otn__stage { --oh: 0.86; } } /* ---- 900 and below the overtake cannot hold: two frames crossing each other need the horizontal room they cross in. The stage becomes a run in reading order, the doorstep stays the larger of the two, and every absolute value the composition set has to be reset here. ---- */ @media (max-width: 900px) { .otn__stage { --oh: auto; aspect-ratio: auto; display: grid; gap: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); } .otn__frame, .otn__head, .otn__lede, .otn__neg, .otn__note, .otn__end { position: relative; left: auto; top: auto; width: auto; } .otn__lede::before, .otn__neg::before, .otn__note::before { inset: -0.7rem -1rem; background: none; } /* reading order: headline, who it suits, the doorstep, the negations, the tower, the mechanism, the standard */ .otn__head { order: 1; } .otn__lede { order: 2; max-width: 34rem; } .otn__frame--move { order: 3; --ar: 4 / 5; width: min(78%, 22rem); margin-left: auto; } .otn__neg { order: 4; max-width: 30rem; } .otn__frame--wait { order: 5; --ar: 3 / 4; width: min(58%, 16rem); } .otn__note { order: 6; max-width: 30rem; margin-left: auto; } .otn__end { order: 7; max-width: 34rem; } /* the grade is the argument even when the geometry cannot be: the tower stays cool and soft, the doorstep stays lit */ .otn__frame--wait .otn__shot img { filter: brightness(0.72) saturate(0.6) hue-rotate(-10deg) blur(1.3px); } .otn__frame--move .otn__shot img { filter: brightness(1.02) saturate(1.1) contrast(1.04); } } @media (max-width: 560px) { .otn__frame--move { width: min(92%, 20rem); } .otn__frame--wait { width: min(66%, 13rem); } } @media (prefers-reduced-motion: reduce) { .otn__gleam { transition: none; } } /* ========================================================================== THE FLOOR — team.html, Behind the scenes (section 04) Replaced a `.rail--scroll` horizontal gallery whose four `.media` frames all used `data-src`, so the clean-pass hid every one of them and the section rendered as four blank marble panels. `.rail--scroll` / `.railwrap` / `.rail__item` stay: about.html still uses them. THE PRINTS ARE SPREAD, NOT SCROLLED. Four sizes, four crops, four angles, overlapping at the corners the way prints actually sit on a table, and the scroll spreads them out of one tight pile. 01 turns, 02 converges, 03 holds still, this one spreads. --gather is written in PX by main.js. A percentage translate resolves against the element's own size rather than its parent, which is the trap that shaped `.wall`, and cqw would break the whole transform where it is unsupported. It defaults to 0 so no-JS renders the prints already spread. ========================================================================== */ @property --spread { syntax: ""; initial-value: 1; inherits: false; } .floor { position: relative; overflow-x: clip; } .floor__head { max-width: 46rem; } .floor__h { margin-top: clamp(0.9rem, 0.75rem + 0.6vw, 1.4rem); font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); } .floor__note { position: absolute; /* clear of print D's corner by a real gutter, measured: at 72% the two overlapped by 5px */ left: 74.5%; top: 64%; width: 25.5%; z-index: 6; color: var(--vein); font-size: var(--text-sm); line-height: 1.75; } .floor__note i { display: block; width: 2.2rem; height: 1px; margin-bottom: 0.85rem; background: linear-gradient(90deg, var(--gold-light), transparent); } /* ---- the table ---------------------------------------------------------- */ .floor__stage { position: relative; margin-top: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); aspect-ratio: 1 / 0.58; } .print { position: absolute; margin: 0; /* the gather runs first so the rotation and scale pivot on the print's own centre wherever it currently is */ transform: translate(calc(var(--gx, 0px) * (1 - var(--spread))), calc(var(--gy, 0px) * (1 - var(--spread)))) rotate(calc(var(--rot) * var(--spread))) scale(calc(0.88 + 0.12 * var(--spread))); } /* hand-laid: no two share a width, a crop, an angle or a corner */ .print--a { left: 0; top: 10%; width: 36%; aspect-ratio: 16 / 9; --rot: -1.4deg; z-index: 1; } .print--b { left: 40%; top: 0; width: 24%; aspect-ratio: 4 / 3; --rot: 1.1deg; z-index: 2; } /* z-index 5, above D: the two overlap at a corner and D was landing on top of C's caption, clipping the first word off it. The print that owns the caption has to own the stacking. */ .print--c { left: 64%; top: 8%; width: 27%; aspect-ratio: 1 / 1; --rot: -0.7deg; z-index: 5; } .print--d { left: 26%; top: 40%; width: 46%; aspect-ratio: 3 / 2; --rot: 1.6deg; z-index: 4; } .print__shot { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px rgba(156, 120, 72, 0.24), 0 34px 64px -30px rgba(0, 0, 0, 0.95); transition: filter 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); } .print__shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.84) contrast(1.04) saturate(0.84); } .print__shot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 22% 8%, rgba(156, 120, 72, 0.13), transparent 58%), linear-gradient(180deg, transparent 48%, rgba(6, 6, 8, 0.8)); } /* hover lands on filter and shadow only: GSAP composes the transform from --spread and must not share it */ @media (hover: hover) { .print:hover .print__shot { filter: brightness(1.15); box-shadow: 0 0 0 1px rgba(192, 156, 96, 0.5), 0 34px 64px -30px rgba(0, 0, 0, 0.95); } .floor__stage:has(.print:hover) .print:not(:hover) .print__shot { filter: brightness(0.82); } } .print__cap { /* holds back until its print has actually landed */ opacity: calc(1.5 * var(--spread) - 0.5); position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.8rem; z-index: 2; display: flex; align-items: center; gap: 0.5rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95); } .print__cap i { flex: 0 0 auto; width: 0.9rem; height: 1px; background: var(--gold-light); } /* ---- narrower ----------------------------------------------------------- */ /* Below the desktop range the four prints stop being a table you look down at and become a column you read. Absolute placement is dropped entirely rather than re-tuned, because four overlapping frames in 400px of width is a pile, not a composition. */ @media (max-width: 860px) { .floor__stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 0.5rem + 1.4vw, 1.4rem); } .print, .print--a, .print--b, .print--c, .print--d { position: relative; left: auto; top: auto; width: auto; transform: rotate(calc(var(--rot) * var(--spread))); } /* the two wide crops take the full row so the set still has a rhythm */ .print--a { grid-column: 1 / -1; aspect-ratio: 2 / 1; } .print--d { grid-column: 1 / -1; aspect-ratio: 2 / 1; } /* back into flow with the prints once the table becomes a column */ .floor__note { position: relative; left: auto; top: auto; width: auto; grid-column: 1 / -1; margin-top: 0.25rem; } } @media (max-width: 520px) { .floor__stage { grid-template-columns: minmax(0, 1fr); } .print--b { aspect-ratio: 3 / 2; } .print--c { aspect-ratio: 4 / 3; } .print__cap { font-size: 0.55rem; letter-spacing: 0.14em; } } @media (prefers-reduced-motion: reduce) { .print__shot { transition: none; } } /* ========================================================================== TEAM PAGE RHYTHM + TYPE SCALE — scoped to this page on purpose. The client asked for a medium heading size and less air between the sections, the same pass what-we-do had. Both are scoped to `.team` so no other page moves: `--section` cascades into every `.section` inside the main element, and the headings are re-declared here rather than by touching the shared `--text-h2` / `--text-h1` tokens, which still run index / about / results / careers / contact / the two legal pages. If the request ever becomes "do it site-wide", change --text-h2, --text-h1 and --section in main.css and delete this block. THE LADDER, and keep it in this order: hero h1 3rem section h2 2.6rem (.clk__h .fld__h .otn__h .floor__h and .sec--md h2) closing statement 2.2rem (.otn__close) display lede 1.85rem (.otn__neg) panel heading 2rem (.fld__note--1 .fld__name) sub-headings 1.5rem (.fld__name) NOTE the two rebuilds this block has already outlived: .seat became .fld and .turn became .otn, and the selectors here went stale both times because the sizes are also declared in each section's own block. When a section is replaced, GREP THIS BLOCK for its prefix. ========================================================================== */ .team { --section: clamp(3.5rem, 2.5rem + 4vw, 5.75rem); --section-sm: clamp(2.75rem, 2rem + 3vw, 4.25rem); } .team .hero h1 { font-size: clamp(1.95rem, 1.45rem + 2.1vw, 3rem); line-height: 1.1; } .team .clk__h, .team .fld__h, .team .otn__h, .team .floor__h { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; } .team .otn__close { font-size: clamp(1.35rem, 1.05rem + 1.45vw, 2.2rem); } .team .otn__neg { font-size: clamp(1.25rem, 1.02rem + 1.15vw, 1.85rem); } .team .fld__note--1 .fld__name { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); } .team .fld__name { font-size: clamp(1.1rem, 0.98rem + 0.55vw, 1.5rem); } .team .clk__name { font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.55rem); } /* the engraved numerals come down with everything else, or they end up louder than the headings they sit beside */ .team .fld__mark { font-size: clamp(2.4rem, 1.7rem + 2.8vw, 4.4rem); } /* the lede paragraphs step down one notch so the body does not crowd the now-smaller headings */ .team .clk__lede, .team .fld__lead, .team .otn__lede { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); } /* ========================================================================== CAREERS HERO — "the board" (careers.html) Was the shared `.hero--page`: eyebrow, headline, sub, a 5% mark watermark and a glow. `.hero--page` is untouched and still runs about / contact / privacy / terms. THE HEADLINE ALREADY NAMED THE OBJECT. "No seniority. No waiting. A leaderboard." was being set as flat type over a watermark, so the one concrete thing this page offers a candidate was asserted rather than shown. The hero is now the board itself: three positions standing on one rule, each one a photograph of the work, each one carrying its own engraved position numeral. THE MOTION IS REORDERING, AND THAT IS WHY IT CAN EXIST HERE. Every other moment on this site moves a different way - index travels X, pushes Z, climbs Y, turns an object and strikes type through; what-we-do swings doors and assembles a case; results registers a tear and develops a print; team slides lanes in and runs a clock. Nothing anywhere REORDERS, and reordering is the single thing a leaderboard does. The position numerals roll on a reel as the standing changes, so the change is unmistakable with no caption explaining it. THE ENTRANCE IS THE BOARD RESOLVING. While the preloader curtain is up every plate sits at last place - same height, same grade - and the standing sorts itself out as the curtain lifts. Then, on a slow cycle, whoever is last comes up to first and everyone else steps down one. Hovering a plate promotes it, because the argument is that anyone can be at the top and nothing about the order is owed to anybody. RANK IS ONE NUMBER. `--rank` (0, 1, 2) drives height, grade, frame, glow, numeral opacity and the reel, all through calc. That is what makes the whole sort one CSS transition instead of a tween per property, and it is why the module can live in main.js and work with GSAP absent - a hero cannot depend on a CDN (same call as `.tally`). THE GRADE ONLY FALLS A LITTLE (1.04 / 0.90 / 0.76). Prominence is carried by height, frame and glow instead, because crushing third place into the dark is how this site keeps producing the empty-screen failure. Third place is still a photograph you can read. Photography is another explicit exception to the `.media img` clean pass, via its own `.bp__*` classes: field-dusk / door / phone-win, the arc of the job in three anonymous frames. No faces are claimed and no names or numbers are attached to any position. ========================================================================== */ .hero--board { min-height: min(80svh, 44rem); padding-top: clamp(3.625rem, 3.045rem + 1.392vw, 4.495rem); padding-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); justify-content: stretch; } .board__wash { position: absolute; inset: -6%; z-index: 0; pointer-events: none; background: radial-gradient(30rem 24rem at 72% 18%, rgba(192, 156, 96, 0.2), transparent 66%), radial-gradient(26rem 20rem at 84% 78%, rgba(156, 120, 72, 0.12), transparent 68%), radial-gradient(40rem 24rem at 2% 96%, rgba(156, 120, 72, 0.08), transparent 62%); } .board__inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; } .board__body { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); align-items: center; } /* ---- the claim --------------------------------------------------------- */ .board__claim { max-width: 34rem; } .board h1 { font-size: clamp(1.95rem, 1.45rem + 2.1vw, 3rem); line-height: 1.1; letter-spacing: -0.026em; margin-bottom: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); } .board h1 em { font-style: italic; color: var(--gold-light); } .board .hero__sub { max-width: 31rem; margin-bottom: 0; } /* the sentence the whole composition is arguing, set apart on a hairline */ .board__note { margin-top: clamp(1.1rem, 0.9rem + 0.9vw, 1.7rem); padding-left: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem); border-left: 1px solid rgba(156, 120, 72, 0.42); max-width: 26rem; font-size: var(--text-sm); line-height: 1.6; color: var(--ink); text-wrap: pretty; } .board .hero__actions { margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); } /* ---- the board --------------------------------------------------------- */ .board__stand { --stand-h: clamp(17rem, 11rem + 21vw, 28.5rem); position: relative; margin: 0; width: 100%; } /* a board is an object, so it gets a header the way a real one would */ .board__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(0.7rem, 0.6rem + 0.4vw, 1rem); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .board__head i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(156, 120, 72, 0.5), rgba(156, 120, 72, 0.05)); } .board__plates { position: relative; display: grid; /* hand-set unequal, so three plates on a shared baseline never resolve into the even columns of a chart */ grid-template-columns: 1.15fr 0.78fr 1fr; column-gap: clamp(0.5rem, 0.35rem + 0.6vw, 0.95rem); height: var(--stand-h); } /* the rule the standing stands on. Static: it is structure, not motion. */ .board__base { display: block; height: 1px; background: linear-gradient(90deg, rgba(156, 120, 72, 0.5) 0%, rgba(156, 120, 72, 0.28) 62%, rgba(156, 120, 72, 0.08) 100%); } .board__tell { margin-top: clamp(0.7rem, 0.6rem + 0.4vw, 1rem); font-size: var(--text-sm); line-height: 1.55; color: var(--vein); } /* ---- one position ------------------------------------------------------ ONE NUMBER DRIVES EVERYTHING. --rank is 0, 1 or 2 and every difference between first and third is calculated from it, so a change of position is a single transition across six properties at once. */ .bp { --rank: 0; --h: calc(84 - var(--rank) * 14); position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out); } .bp--1 { --rank: 0; } .bp--2 { --rank: 1; } .bp--3 { --rank: 2; } /* the lit segment of the baseline belongs to whoever is first. The three segments cross-fade, so the light appears to move along the rule. */ .bp::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(242, 216, 168, 0.95), transparent); box-shadow: 0 0 20px 2px rgba(192, 156, 96, 0.55); opacity: 0; transition: opacity 1.05s var(--ease-out); } .bp.is-lead::after { opacity: 1; } /* the position numeral, on a reel. Rolling is what makes the reorder legible without a line of type explaining it. */ .bp__pos { display: block; height: 1.06em; overflow: hidden; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: clamp(1.2rem, 0.85rem + 1.35vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; opacity: calc(1 - var(--rank) * 0.26); transition: opacity 1.05s var(--ease-out); } /* EM, NEVER A PERCENTAGE. A percentage translate resolves against the element's OWN height, and the reel is three digits tall, so -100% rolled three positions at once and left the mask empty. Same trap as the homepage wall. */ .bp__reel { display: block; transform: translateY(calc(var(--rank) * -1.06em)); transition: transform 1.05s var(--ease-out); } /* the metallic ramp is near-vertical on purpose: at a flatter angle a leading digit drops into the darkest stop and disappears */ .bp__reel i { display: block; height: 1.06em; line-height: 1.06; font-style: normal; background: linear-gradient(179deg, #fdf6e8 0%, #d8b981 42%, #9c7848 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .bp.is-lead .bp__reel i { background: linear-gradient(179deg, #ffffff 0%, #f0dcb4 38%, #c09c60 100%); -webkit-background-clip: text; background-clip: text; } .bp__frame { position: relative; height: calc(var(--h) * 1%); min-height: 0; overflow: hidden; border-radius: 3px; background: var(--obsidian); border: 1px solid rgba(156, 120, 72, calc(0.5 - var(--rank) * 0.13)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 26px 58px -30px rgba(0, 0, 0, 0.94); transition: height 1.05s var(--ease-out), border-color 1.05s var(--ease-out), box-shadow 1.05s var(--ease-out), opacity 1.05s var(--ease-out); } .bp.is-lead .bp__frame { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 26px 58px -30px rgba(0, 0, 0, 0.94), 0 0 60px -12px rgba(176, 138, 84, 0.6); } .bp__shot { position: absolute; inset: -4% 0; } .bp__shot img { width: 100%; height: 100%; object-fit: cover; /* the fall from first to third is deliberately shallow. Prominence is carried by height, frame and glow; a dark third place is how this site keeps producing a section nobody can see. */ filter: saturate(calc(0.94 - var(--rank) * 0.05)) contrast(1.05) brightness(calc(1.04 - var(--rank) * 0.12)); transition: filter 1.05s var(--ease-out); } .bp--1 .bp__shot img { object-position: 32% 52%; } .bp--2 .bp__shot img { object-position: 56% 48%; } .bp--3 .bp__shot img { object-position: 50% 38%; } /* the corner the whole page is lit from, plus a floor vignette so a plate sits into the dark rather than on top of it */ .bp__grade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 62% 24%, rgba(192, 156, 96, calc(0.12 - var(--rank) * 0.03)), transparent 66%), linear-gradient(180deg, rgba(6, 6, 10, 0.32) 0%, transparent 24%, transparent 58%, rgba(6, 6, 10, 0.66) 100%); } /* ---- ambient light ---------------------------------------------------- The wrapper clips, the inner band travels. GSAP owns both, and nothing in CSS transitions either, so a tween and a transition never fight. */ .board__sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; } .board__sheen i { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%; opacity: 0; background: linear-gradient(104deg, transparent 0%, rgba(226, 190, 126, 0.16) 48%, transparent 100%); filter: blur(6px); } /* ---- entrance --------------------------------------------------------- Every plate opens at LAST PLACE and the standing sorts itself out as the curtain lifts. The from-state only exists while `is-loading` is on the document, so no-JS and reduced motion render a finished board. */ .is-loading .bp { --rank: 2; opacity: 0; transform: translateY(26px); } .is-loading .bp--2 { transition-delay: 0.08s; } .is-loading .bp--3 { transition-delay: 0.16s; } .is-loading .bp::after { opacity: 0; } .board__head, .board__base, .board__tell { transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out); } .board__base { transition-delay: 0.12s; } .board__tell { transition-delay: 0.42s; } .is-loading .board__head { opacity: 0; transform: translateY(10px); } .is-loading .board__base { opacity: 0; } .is-loading .board__tell { opacity: 0; transform: translateY(10px); } /* the headline is two sentences and it must stay on two lines. Widen the column before ever reaching for a smaller type size. */ @media (min-width: 981px) and (max-width: 1180px) { .board__body { grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr); gap: clamp(1.75rem, 1rem + 2.4vw, 3rem); } .board__claim { max-width: none; } /* the board loses width here, so it loses height with it, or the plates turn into three slivers */ .board__stand { --stand-h: clamp(15rem, 6rem + 20vw, 21rem); } } @media (max-width: 980px) { .hero--board { min-height: 0; } .board__body { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.6rem + 2.2vw, 3rem); } .board__claim { max-width: 42rem; } .board .hero__sub, .board__note { max-width: 42rem; } .board__stand { --stand-h: clamp(13rem, 6rem + 26vw, 19rem); } } @media (max-width: 560px) { .board__stand { --stand-h: 15rem; } .bp { --h: calc(86 - var(--rank) * 15); } .bp__pos { margin-bottom: 0.35rem; } } @media (prefers-reduced-motion: reduce) { .bp, .bp::after, .bp__pos, .bp__reel, .bp__frame, .bp__shot img, .board__head, .board__base, .board__tell { transition: none; } } /* ========================================================================== CAREERS - page rhythm and heading scale The same client pass what-we-do and team already had: a medium heading size and less air between the sections. Scoped to
so index / about / results / contact / the legal pages do not move. THE LADDER: hero h1 3rem > section h2 2.6rem > sub-headings unchanged. ========================================================================== */ .careers { --section: clamp(3.5rem, 2.5rem + 4vw, 5.75rem); --section-sm: clamp(2.75rem, 2rem + 3vw, 4.25rem); } .careers h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; } /* ========================================================================== THE BAR — careers.html, section 01 (`.barx`) It replaced an `.ed ed--overlap` split whose image used `data-src`, so the clean pass hid it and the section rendered as a blank marble panel beside a paragraph. `.ed` stays: about and results still use it. THE COPY WAS THE REAL PROBLEM. This section restated the homepage almost word for word - "most people who apply do not get in", "barely for most people" and BOTH halves of the managed / measured fork are all on index. A prettier setting of sentences the reader has already read is worse than the plain version, because that repetition is exactly what reads as generated. The division now: index owns the FILTER and the FORK, this section owns "we are not for everyone" and the standard itself, section 03 owns the published rungs. THE HEADLINE ANSWERS THE HERO. The board above says the order is not fixed; this says the bar does not move. People move, the standard does not, and the two sections argue together instead of repeating. NO PANEL, AND THAT IS DELIBERATE. Wrapping a section in a container is almost always the wrong move on this brand (the `.omit` lesson: a big card with dark boxes inside reads as a template). So the section's own ground IS the stone: a faint brushed grain, a warm floor, and the headline cut into it. There is no box anywhere in here. THE MECHANIC IS RAKING LIGHT, and that is what was still free. On this site `.wall` travels X, `.worlds` pushes Z, `.rise` climbs Y, `.lp` holds still, `.forge` turns, `.hire` strikes type through, `.cab` assembles, `.stop` opens a rule from the centre, `.cuts` register, `.latent` develops, `.lane` slides hairlines in, `.floor` spreads, `.clk` runs on a clock and the hero above reorders. Nothing anywhere is LIT FROM A MOVING SOURCE. Raking light is also the only way an engraving is ever read in the real world, so the mechanic and the subject are the same thing. `--rx` (0..1) is where the light is across the section. It drives the warm pool, the depth and direction of the engraved headline's shadows, the note's hairline and both plate rims, so one number relights the whole composition. It is an UNREGISTERED custom property on purpose: GSAP writes it every frame so it never needs to interpolate, and unregistered means it inherits to the children for free without the site-wide recalc cost a registered inherited property carries on a stylesheet that loads on nine pages. NEVER PUT A CSS TRANSITION ON ANYTHING DRIVEN BY --rx. GSAP owns it outright; the transitions in here are on `filter` for hover only. Photography is another explicit exception to the `.media img` clean pass, via its own `.barx__*` classes: car-dawn (the empty street before the first door) and training (the standard, up close under a lamp). Both are unused elsewhere on this page. ========================================================================== */ .barx { /* where the raking light is. GSAP owns it; this is the resting value. */ --rx: 0.42; /* the distance from the container's content edge to the viewport edge, so the wide plate can run off the side of the page */ --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-block: clamp(2.16rem, 1.584rem + 2.16vw, 3.42rem); overflow-x: clip; } /* the moving source */ .barx__rake { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(36rem 22rem at calc(var(--rx) * 100%) 26%, rgba(192, 156, 96, 0.17), transparent 62%), radial-gradient(58rem 28rem at calc(var(--rx) * 100%) 94%, rgba(156, 120, 72, 0.075), transparent 66%); } /* the ground the headline is cut into. Brushed, not a surface with edges. */ .barx__floor { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6; background: repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 8px), linear-gradient(180deg, transparent 0%, rgba(156, 120, 72, 0.035) 58%, transparent 100%); } .barx__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto auto; column-gap: clamp(1.75rem, 1.1rem + 2.6vw, 3.75rem); row-gap: clamp(1.25rem, 0.95rem + 1.4vw, 2rem); align-items: end; } .barx__cut { grid-column: 1; grid-row: 1; align-self: center; } /* ---- the engraving ----------------------------------------------------- The letter fill NEVER changes: it stays --ink at about 16:1 whatever the light is doing. Only the two edges move, which is what makes it read as cut rather than as a text effect, and it is also why a moving light can never take the headline's contrast with it. */ .barx__h { --rxo: calc((var(--rx) - 0.5) * 2); /* -1 at the left, +1 at the right */ color: var(--ink); text-shadow: calc(var(--rxo) * -2.6px) -1.4px 2px rgba(0, 0, 0, 0.95), calc(var(--rxo) * 2.6px) 1.4px 0 rgba(226, 190, 126, 0.32), 0 0 calc(16px + var(--rx) * 30px) rgba(156, 120, 72, 0.15); } /* the one metallic word. It drops the shadows: a text-shadow behind a background-clip:text fill paints straight through the transparent glyph. */ .barx__h em { font-style: italic; text-shadow: none; background: linear-gradient(179deg, #ffffff 0%, #f0dcb4 40%, #b08a54 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .barx__lead { margin-top: clamp(0.9rem, 0.8rem + 0.6vw, 1.35rem); max-width: 32rem; font-size: var(--text-lg); line-height: 1.7; color: var(--ink); text-wrap: pretty; } /* the honest gap. Its hairline is lit by the same source as the engraving. */ .barx__note { margin-top: clamp(0.9rem, 0.8rem + 0.6vw, 1.35rem); padding-top: clamp(0.75rem, 0.65rem + 0.45vw, 1.05rem); border-top: 1px solid rgba(156, 120, 72, calc(0.2 + var(--rx) * 0.3)); max-width: 29rem; font-size: var(--text-sm); line-height: 1.6; color: var(--vein); text-wrap: pretty; } /* ---- the work ---------------------------------------------------------- */ .barx__plate { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--obsidian); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 30px 64px -32px rgba(0, 0, 0, 0.94); } /* runs off the right edge of the page. The border and the radius go with it on that side, or the picture reads as a panel that happens to be wide. */ .barx__plate--wide { grid-column: 2; grid-row: 1 / span 2; /* it must fill the span, not sit at the bottom of it. With `align-items: end` on the grid a spanning item is pinned to the last row's baseline and leaves the whole top corner of the section empty. */ align-self: stretch; height: 100%; width: calc(100% + var(--bleed)); min-height: clamp(15rem, 10rem + 15vw, 23rem); border: 1px solid rgba(156, 120, 72, calc(0.14 + var(--rx) * 0.26)); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); } /* the near plate is smaller, pulled right and set OVER the wide one, so the two read as hand-laid at different depths rather than as a pair */ .barx__plate--near { grid-column: 1; grid-row: 2; z-index: 3; width: min(100%, 24rem); margin-left: auto; margin-right: clamp(-7rem, -7vw, -2.5rem); /* and it dips past the wide plate's bottom edge, so the pair reads as one print laid over another rather than as an inset panel */ margin-bottom: clamp(-1.75rem, -1.4vw, -0.5rem); aspect-ratio: 16 / 10; border: 1px solid rgba(156, 120, 72, calc(0.4 - var(--rx) * 0.16)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 34px 70px -30px rgba(0, 0, 0, 0.96); } .barx__shot { position: absolute; inset: -5% 0; } .barx__shot img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.6s var(--ease-out); } .barx__plate--wide .barx__shot img { object-position: 46% 44%; filter: saturate(0.88) contrast(1.06) brightness(0.9); } .barx__plate--near .barx__shot img { object-position: 52% 54%; filter: saturate(0.94) contrast(1.04) brightness(1); } .barx__plate:hover .barx__shot img { filter: saturate(0.98) contrast(1.06) brightness(1.08); } .barx__vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 70% at 58% 26%, rgba(192, 156, 96, 0.1), transparent 66%), linear-gradient(180deg, rgba(6, 6, 10, 0.3) 0%, transparent 26%, transparent 58%, rgba(6, 6, 10, 0.62) 100%); } /* ---- narrow ------------------------------------------------------------ The bleed and the overlap are DROPPED rather than re-tuned: two plates overlapping inside 400px of width is a pile, not a composition. */ @media (max-width: 900px) { .barx__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); align-items: stretch; } .barx__cut, .barx__plate--wide, .barx__plate--near { grid-column: 1; grid-row: auto; } .barx__plate--wide { width: calc(100% + var(--gutter)); min-height: 0; aspect-ratio: 16 / 9; } .barx__plate--near { width: min(64%, 24rem); margin-left: 0; margin-right: 0; margin-bottom: 0; aspect-ratio: 16 / 10; } .barx__lead, .barx__note { max-width: 42rem; } } @media (max-width: 560px) { .barx__plate--wide { aspect-ratio: 16 / 10; } .barx__plate--near { width: 78%; } } @media (prefers-reduced-motion: reduce) { .barx__shot img { transition: none; } } /* ========================================================================== THE JOB — careers.html, section 02 (`.jobx`) It replaced a `.grid` col-5 / col-7 with a bulleted `.plain-list`, which is the shape a template produces. `.plain-list` is now unused on this page but STILL USED on about.html, so its CSS stays. THE SECTION IS SAID, NOT LISTED. The KB's note on this material is that nobody in this category will state the job plainly, and that stating it plainly wins the trust of every good applicant who is about to search for you. So the statements are SPOKEN: each one cuts in a word at a time, hard, with no fade and no easing. Everything else on this site eases; this is the only place that cuts, and a cut is the plainest transition there is. WHY NOT FOUR NUMBERED ROWS: section 03 directly below is four numbered rungs. Two numbered vertical fours in a row is the adjacent-section repetition that reads as generated, so this one has no numerals, no bullets and no rules between the statements, and it runs across the page rather than down it. THE MEASURES ARE HAND-SET AND UNEQUAL, and the last block FLIPS so the set never resolves into a zigzag: photograph left / statement right, then statement left / photograph right, then one wide statement across the left, then a hairline, then the payoff on the LEFT with its photograph on the right. Three different aspect ratios (16/9, 4/3, 5/4) so the plates never read as a set of three. THE HAIRLINE IS THE TURN. Three statements are what you give and the fourth is what you get, so the rule sits between them and the payoff is the only statement set larger. COLDER THAN ITS NEIGHBOURS ON PURPOSE. `.barx` above is a warm raking light and `.rungs` below is a lit ladder; this one is a flat neutral top-light with almost no gold in the ground. The temperature drop is what makes it feel like a different section rather than more of the same one. Photography is another explicit exception to the `.media img` clean pass, via `.jobx__*` classes: retail (the field, a door standing open on a business), team-walk (walking in to people who did not ask), signature (paid on what you close). All three are unused elsewhere on this page. ========================================================================== */ .jobx { --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-block: clamp(2.16rem, 1.584rem + 2.16vw, 3.42rem); overflow-x: clip; } /* neutral, not gold. The cold section between two warm ones. */ .jobx__floor { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, transparent 34%), radial-gradient(52rem 26rem at 50% -8%, rgba(156, 120, 72, 0.05), transparent 64%); } .jobx > .container { position: relative; z-index: 2; } .jobx__head { margin-bottom: clamp(1.75rem, 1.3rem + 2vw, 3rem); } /* ---- the arrangement --------------------------------------------------- Twelve columns, every item placed by hand. Nothing here is auto-flowed, because auto-flow is what makes a set of things look like a set. */ .jobx__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 0.6rem + 1.6vw, 2.25rem); row-gap: clamp(1.1rem, 0.9rem + 1vw, 1.85rem); align-items: center; } /* THE PHOTOGRAPHS SHARE ROWS WITH THE STATEMENTS RATHER THAN STACKING BELOW THEM. Three plates on three rows of their own measured 1718px for this section; spanning them across the statements they belong to brings it under 1000 with the same three pictures at the same size. Height is the first thing to check whenever a section grows a third image. */ .jobx__plate--a { grid-column: 1 / 6; grid-row: 1 / span 3; } .jobx__plate--b { grid-column: 6 / 8; grid-row: 1 / span 2; } .jsay--1 { grid-column: 8 / 13; grid-row: 1; } .jsay--2 { grid-column: 8 / 13; grid-row: 2; } .jsay--3 { grid-column: 6 / 13; grid-row: 3; } .jobx__turn { grid-column: 1 / 13; grid-row: 4; } /* the payoff and the terms hug the row boundary between them, or the tall plate beside them centres each in its own row and opens a void between two lines that belong together */ .jsay--4 { grid-column: 1 / 7; grid-row: 5; align-self: end; } .jobx__close { grid-column: 1 / 7; grid-row: 6; align-self: start; } .jobx__plate--c { grid-column: 7 / 13; grid-row: 5 / span 2; } /* ---- the statements ---------------------------------------------------- */ .jsay { margin: 0; /* the grid cells are hand-set and uneven, but the READING measure is not allowed to be: a statement that runs 95 characters wide is not plain */ max-width: 40rem; font-size: clamp(1.12rem, 0.98rem + 0.68vw, 1.6rem); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink); text-wrap: pretty; } /* the payoff. The only statement set larger, and the only one with gold in it, because it is the only one that is not a cost. */ .jsay--4 { font-size: clamp(1.35rem, 1.08rem + 1.3vw, 2.15rem); line-height: 1.28; letter-spacing: -0.018em; } .jsay--4 b { font-weight: inherit; color: var(--gold-light); } /* three statements are what you give, the fourth is what you get */ .jobx__turn { height: 1px; background: linear-gradient(90deg, rgba(156, 120, 72, 0.45) 0%, rgba(156, 120, 72, 0.22) 58%, rgba(156, 120, 72, 0.04) 100%); } .jobx__close { margin: 0; max-width: 34rem; font-size: var(--text-base); line-height: 1.7; color: var(--vein); text-wrap: pretty; } /* the word unit the build cuts in. Inline on purpose: inline-block would change how the lines break and the copy has to set exactly as written. */ .jw { will-change: opacity; } /* ---- the plates -------------------------------------------------------- */ .jobx__plate { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--obsidian); border: 1px solid rgba(156, 120, 72, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 28px 60px -32px rgba(0, 0, 0, 0.94); } /* runs off the LEFT edge of the page. `.barx` above bleeds right, so this one bleeds the other way and the two never read as the same layout. */ .jobx__plate--a { align-self: stretch; width: calc(100% + var(--bleed)); margin-left: calc(-1 * var(--bleed)); min-height: clamp(15rem, 10rem + 14vw, 21rem); border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* bottom-aligned and shorter, so its top edge sits well below A's and the two never read as one photograph split down the middle */ .jobx__plate--b { align-self: end; aspect-ratio: 4 / 5; } .jobx__plate--c { align-self: stretch; min-height: clamp(12rem, 8rem + 11vw, 17rem); } .jobx__shot { position: absolute; inset: -4% 0; } .jobx__shot img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.6s var(--ease-out); } .jobx__plate--a .jobx__shot img { object-position: 54% 46%; filter: saturate(0.9) contrast(1.06) brightness(0.94); } .jobx__plate--b .jobx__shot img { object-position: 50% 44%; filter: saturate(0.88) contrast(1.05) brightness(0.92); } .jobx__plate--c .jobx__shot img { object-position: 52% 54%; filter: saturate(0.94) contrast(1.05) brightness(1); } .jobx__plate:hover .jobx__shot img { filter: saturate(0.98) contrast(1.06) brightness(1.1); } .jobx__vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 70% at 54% 24%, rgba(192, 156, 96, 0.08), transparent 66%), linear-gradient(180deg, rgba(6, 6, 10, 0.28) 0%, transparent 26%, transparent 60%, rgba(6, 6, 10, 0.6) 100%); } /* ---- narrow ------------------------------------------------------------ One column, source order, and the placement is dropped rather than re-tuned. The statements keep their order relative to the photographs, which is the only thing that has to survive. */ @media (max-width: 900px) { .jobx__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); align-items: stretch; } .jobx__plate--a, .jsay--1, .jsay--2, .jobx__plate--b, .jsay--3, .jobx__turn, .jsay--4, .jobx__close, .jobx__plate--c { grid-column: 1; grid-row: auto; } /* THREE STACKED PHOTOGRAPHS IS THE HEIGHT PROBLEM AT THIS WIDTH, not the copy: at 900 the section measured 2249px with the desktop aspects still applied. The plates keep their order and their differences and simply stop being full-height. */ .jobx__plate--a { aspect-ratio: 21 / 9; min-height: 0; } .jobx__plate--b { width: 50%; margin-left: auto; aspect-ratio: 3 / 2; } .jobx__plate--c { width: 62%; aspect-ratio: 3 / 2; min-height: 0; } .jobx__close { max-width: 42rem; } } @media (max-width: 560px) { .jobx__plate--a { aspect-ratio: 16 / 9; } .jobx__plate--b { width: 64%; } .jobx__plate--c { width: 78%; } } @media (prefers-reduced-motion: reduce) { .jobx__shot img { transition: none; } } /* ========================================================================== THE PATH — "the widening view" (careers.html, section 03) History: `.rungs` / `.rung`, four identical rows -> `.climb`, a rung list beside ONE frame that widened when you selected a rung -> this. THE REFRAME IS KEPT, AND IT IS STILL THE WHOLE SECTION: the ladder is SCOPE, not height. Height was unavailable twice over - index `.rise` is already a vertical ascent past numbered landings, and the hero on THIS page is objects at different heights on a shared baseline - but the approved copy never actually says higher. It says a portfolio, then an account, then a team, then a market. Each rung is a WIDER VIEW of the same job. WHAT CHANGED IS THAT ALL FOUR ARE ON THE PAGE AT ONCE. The selection version showed one photograph at a time behind an interaction, left the right third of the section as dead ground, and the four rungs beside it were still a four-row list - the exact shape the version before it had been rebuilt out of. Nothing here is hidden and nothing has to be touched: four rungs, four photographs, four bars, all readable at rest. EACH RUNG IS A BAND OF PHOTOGRAPHY INSIDE A FULL-WIDTH HAIRLINE GHOST. The band fills 40, 60, 80 and 100 per cent of its ghost, so the ground you have not reached is visible on every rung and closes only at the last one. That device survived the rebuild because it fixes a compositional hole AND states the argument, which is always worth more than one that only fills space. AND THEY ALL START THE SAME WIDTH. `--sc` runs 0 -> 1 and every band is interpolated from the FIRST rung's width to its own, so the section opens as four equal bands and resolves into the ladder. Everybody starts with the same scope; the rest is earned. Nothing else on this page moves that way - 01 rakes light across stone, 02 cuts type in word by word, 04 backlights an opening, 05 breathes, 06 closes a brace, 07 is a two-rail diagram. THE HEIGHTS FALL AS THE WIDTHS GROW, which is what stops four stacked bands reading as a bar chart: the view is not getting bigger, it is getting WIDER and flatter, the way a view does. `--sc` is UNREGISTERED: GSAP writes it every frame so nothing needs interpolating, and a registered INHERITED property costs a recalc on all nine pages that load this file. Its CSS value is 1, THE FINISHED LADDER, so no JS, a dead CDN and reduced motion all render it widened. ========================================================================== */ .scp { position: relative; overflow-x: clip; } .scp__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; column-gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(2rem, 1.5rem + 2.2vw, 3.4rem); } .scp__h { margin: 0.55rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--white); } /* the closing note used to sit alone under the ladder with 200px of dead ground round it; as the head's second column it fills the row and reads as the promise the ladder is made against */ .scp__lead { margin: 0; max-width: 30rem; color: var(--vein); font-size: var(--text-base); line-height: 1.68; } /* ---- the ladder ---- */ .scp__ladder { --sc: 1; /* 0 four equal bands, 1 the earned ladder. GSAP owns it. */ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.85rem, 0.6rem + 1vw, 1.4rem); } .scp__row { position: relative; /* every band grows from the FIRST rung's reach to its own */ --live: calc(40 + (var(--w) - 40) * var(--sc)); height: var(--bh); } .scp__row--1 { --bh: clamp(11rem, 7.6rem + 8vw, 20rem); } .scp__row--2 { --bh: clamp(10.5rem, 7.6rem + 6.4vw, 15rem); } .scp__row--3 { --bh: clamp(10rem, 7.2rem + 6vw, 14rem); } .scp__row--4 { --bh: clamp(9.75rem, 7.2rem + 5.8vw, 15.5rem); } /* the ground you have not reached. A hairline, never a fill: the point is that it is empty. */ .scp__ghost { position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(156, 120, 72, 0.16); border-radius: 2px; } .scp__ghost::after { /* a short tick at the far end, so the extent reads as a measurement rather than as an empty box */ content: ""; position: absolute; top: 50%; right: -1px; width: 1px; height: 34%; transform: translateY(-50%); background: linear-gradient(180deg, transparent, rgba(192, 156, 96, 0.5), transparent); } .scp__band { --bmx: 50; --bmy: 50; position: absolute; inset: 0 auto 0 0; width: calc(var(--live) * 1%); overflow: hidden; border-radius: 2px; background: var(--obsidian-raised); /* the light on this page comes from the upper left */ box-shadow: inset 1px 1px 0 rgba(192, 156, 96, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.66); } .scp__shot { position: absolute; inset: 0; overflow: hidden; } .scp__shot img { position: absolute; inset: -5%; width: 110%; height: 110%; /* main.css carries a global img { max-width: 100% } that silently clamps any deliberately oversized image */ max-width: none; display: block; object-fit: cover; /* GSAP owns --bdx and nothing else here, so filter is free to carry a CSS transition for the hover states without ever sharing a property */ filter: brightness(0.78) saturate(0.9); transition: filter 0.55s var(--ease-out); transform: translate3d(calc(var(--bdx, 0) * 1px), 0, 0); } /* each frame is anchored by hand: the band re-crops as it widens, so the subject has to be told where to stay */ .scp__row--1 .scp__shot img { object-position: 50% 34%; } .scp__row--2 .scp__shot img { object-position: 52% 48%; } .scp__row--3 .scp__shot img { object-position: 54% 40%; } .scp__row--4 .scp__shot img { object-position: 50% 52%; filter: brightness(0.94) saturate(1) contrast(1.04); } /* legibility: a fall from the left, where every lockup sits */ .scp__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(96deg, rgba(6, 6, 8, 0.9) 0%, rgba(6, 6, 8, 0.66) 34%, rgba(6, 6, 8, 0.12) 64%, rgba(6, 6, 8, 0.34) 100%); } .scp__glow { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity 0.5s var(--ease-out); background: radial-gradient(38% 62% at calc(var(--bmx) * 1%) calc(var(--bmy) * 1%), rgba(255, 240, 212, 0.18), transparent 72%); } /* THE NUMERAL JOINS THE LOCKUP. The first cut put it at a different corner on each band for variety, and on the flat bands it landed straight on the scope label and on the bar line. A ladder's rungs should be numbered the same way; the variation here is the widths, the heights and the pictures. */ .scp__num { display: block; margin-bottom: 0.3rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.35rem + 1.3vw, 2.7rem); line-height: 0.9; letter-spacing: -0.02em; background: linear-gradient(166deg, rgba(246, 242, 234, 0.92), rgba(198, 160, 102, 0.82) 46%, rgba(128, 96, 56, 0.52)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85)); } .scp__body { position: absolute; z-index: 3; left: clamp(1.1rem, 0.85rem + 1.4vw, 2.3rem); bottom: clamp(1rem, 0.8rem + 1.2vw, 1.9rem); width: min(calc(100% - 4rem), 27rem); } .scp__name { margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1rem + 0.72vw, 1.62rem); line-height: 1.14; letter-spacing: -0.014em; color: var(--white); } .scp__note { margin: 0 0 0.5rem; color: var(--ink); font-size: var(--text-sm); line-height: 1.6; } .scp__bar { margin: 0; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); } /* the reach sits at the band's own right edge, so it travels outward with the rung rather than being parked at the page margin */ /* THE REACH SITS PAST THE BAND'S END, in the ground that rung has not taken. Inside the band there is no corner it can hold on the narrow rungs without landing on the lockup, and out here it reads as the end-cap of a measurement, which is what it is. */ .scp__reach { position: absolute; z-index: 3; left: calc(var(--live) * 1% + clamp(1rem, 2vw, 1.9rem)); top: 50%; transform: translateY(-50%); margin: 0; font-family: var(--font-display); font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.2rem); color: var(--ink); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } .scp__reach span { display: block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-shadow); margin-bottom: 0.15rem; } /* the last rung fills its ghost, so its own label has nowhere outside to go and takes the head of the band instead */ .scp__row--4 .scp__reach { left: auto; right: clamp(1rem, 2vw, 1.9rem); top: clamp(0.9rem, 1.8vw, 1.5rem); transform: none; text-align: right; } @media (hover: hover) and (pointer: fine) { .scp__band:hover .scp__glow { opacity: 1; } .scp__ladder:has(.scp__band:hover) .scp__band:not(:hover) .scp__shot img { filter: brightness(0.5) saturate(0.68); } .scp__band:hover .scp__shot img { filter: brightness(1.02) saturate(1.06); } } /* ---- the copy needs more room as the measure narrows, so the bands get taller in steps rather than in one jump ---- */ @media (max-width: 1180px) { .scp__row--2 { --bh: clamp(9rem, 6.6rem + 5.6vw, 13.5rem); } .scp__row--3 { --bh: clamp(8.5rem, 6.2rem + 5vw, 12.5rem); } } @media (max-width: 1024px) { .scp__head { grid-template-columns: 1fr; row-gap: 1.1rem; align-items: start; } .scp__lead { max-width: 38rem; } } /* ---- 760 and below the ladder cannot be read as widths: at 380px of measure, 40 per cent is 152px and no photograph survives that. The reach becomes the ladder instead - every band runs full width and the SCOPE label carries the progression, with the heights still falling. ---- */ @media (max-width: 760px) { .scp__row { --live: 100; } .scp__ghost { border-color: rgba(156, 120, 72, 0.1); } .scp__row--1 { --bh: clamp(14.5rem, 10rem + 22vw, 17.5rem); } .scp__row--2 { --bh: clamp(14rem, 10rem + 20vw, 16.5rem); } .scp__row--3 { --bh: clamp(13.5rem, 9.5rem + 19vw, 16rem); } .scp__row--4 { --bh: clamp(14rem, 10rem + 20vw, 16.5rem); } .scp__body { width: min(calc(100% - 3rem), 24rem); } .scp__row--1 .scp__body { bottom: clamp(1rem, 0.8rem + 1.2vw, 1.9rem); top: auto; } .scp__reach, .scp__row--4 .scp__reach { left: auto; right: clamp(0.9rem, 2.4vw, 1.4rem); top: clamp(0.8rem, 2vw, 1.3rem); transform: none; text-align: right; } .scp__num { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.8rem); } .scp__row--1 .scp__num, .scp__row--4 .scp__num { left: auto; right: clamp(0.9rem, 2.4vw, 1.4rem); bottom: clamp(0.7rem, 1.8vw, 1.2rem); top: auto; } .scp__row--2 .scp__num, .scp__row--3 .scp__num { right: clamp(0.9rem, 2.4vw, 1.4rem); bottom: clamp(0.7rem, 1.8vw, 1.2rem); top: auto; } .scp__veil { background: linear-gradient(102deg, rgba(6, 6, 8, 0.92) 0%, rgba(6, 6, 8, 0.72) 40%, rgb(34 31 27 / 0.3) 78%, rgba(6, 6, 8, 0.5) 100%); } } @media (prefers-reduced-motion: reduce) { .scp__shot img, .scp__glow { transition: none; } } /* ========================================================================== THE APERTURE — careers.html, section 04 (`.trn`) It replaced an `.ed` split whose image used `data-src`, so the clean pass hid it and the section rendered as a blank marble panel beside a bulleted `.plain-list`. `.plain-list` is STILL USED on about.html, so its CSS stays. THE COPY WAS THE REAL PROBLEM, for the third time on this page. "A defined promotion track with a published bar" restated section 03 directly above, whose own headline is "Four rungs. A published bar for each."; the closing compensation line restated the FAQ below almost word for word. Both went back to the section that owns them. Grep the distinctive phrases first - a prettier setting of sentences the reader has already read is worse than the plain version, because that repetition is what reads as generated. THE MECHANIC IS BACKLIGHT, and it was what was still free. `.barx` in section 01 of this same page lights a stone surface from the SIDE and cuts its headline INTO it; everything else on the site lights a surface from the front. Nothing anywhere is lit from BEHIND, through an opening. So the ground here is one photograph with the light off, and the word is an opening in it. THE REGISTER IS THE WHOLE TRICK, and it is what stops this being the common image-filled-text effect. `.trn__ground` and `.trn__h` are the same element box (both `inset: 0` of the stage), carry the SAME background image at the SAME `cover` size and the SAME position - declared in one shared rule so they cannot drift - and only the grade differs. The glyphs therefore show exactly the pixels that sit behind them, undimmed. It does not read as a picture poured into letters, it reads as light coming through a wall. Same family as the `.cuts` continuity math on results. FOUR LAYERS, ONE BOX: ground (the room, dark) / scrim / glow (a blurred copy of the word, so the light that comes through lands on the dark around each letter) / the opening / gleam (a specular travelling across it). THE TWO DECORATIVE COPIES OF THE WORD ARE PSEUDO-ELEMENT CONTENT, never text nodes: `content: attr(data-w)` keeps them out of the DOM and out of the accessibility tree entirely, so the h2 is announced exactly once and the low-opacity-text check in the verification sweep has nothing to catch. ONLY THE GRADIENT POSITION MOVES on the gleam. Translating the layer would slide the light off the glyphs instead of across them - the `.cover` lesson, and the reason `--gl` feeds `background-position`. `--thru` (0..1, the backlight), `--pan` (px the world drifts behind the stencil) and `--gl` (the specular) are all UNREGISTERED on purpose: GSAP writes them every frame so they never need to interpolate, and unregistered means they inherit to the children for free without the site-wide recalc cost a registered inherited property carries on a stylesheet that loads on nine pages (the `.clk` lesson). The values declared here ARE the finished state, so no-GSAP / no-CDN / reduced-motion render the section fully lit. NEVER PUT A CSS TRANSITION ON ANYTHING DRIVEN BY --thru / --pan / --gl. GSAP owns them outright; the transitions in here are on `filter`, for hover. Photography is another explicit exception to the `.media img` clean pass, via its own `.trn__*` classes: office-dawn (the building before the day starts; the only thing the room is asked to say is that nobody is in it) and tower (a block you have not worked yet). Those were the ONLY two frames in the library still unused on careers.html - this section is asset-limited, not design-limited. ========================================================================== */ .trn { /* the backlight. GSAP owns it; this is the finished state. */ --thru: 1; /* px the world drifts behind the stencil. Read by BOTH layers. */ --pan: 0; /* where the specular sits across the letters, in % */ --gl: 150; position: relative; overflow-x: clip; } .trn > .container { position: relative; z-index: 2; } /* ---- the stage -------------------------------------------------------- Full bleed, and deliberately NOT a panel: it sits outside the container as a direct child of the section, and the scrim feathers it to obsidian at the top and bottom edges so it dissolves into the page instead of ending. Wrapping a section in a box is almost always the wrong move on this brand (the `.omit` lesson). */ .trn__stage { position: relative; width: 100%; height: clamp(15rem, 6rem + 27vw, 26rem); margin-block: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem); overflow: hidden; isolation: isolate; } /* the four layers share ONE box and ONE typographic setting, which is what keeps the blurred copy, the opening and the specular in exact register. EVERY LAYER RULE IS PREFIXED `.trn `, AND THAT IS NOT COSMETIC. The page block above carries `.careers h2` (0,1,1), which OUT-SPECIFIES a bare `.trn__h` (0,1,0): the opening rendered at the page's 41.6px heading size while the two decorative spans, untouched by an h2 selector, sat at the full 168px. Measured 42px against 168px - three layers of the same word at two different sizes, so the spill and the specular were nowhere near the glyphs they belong to. Same family as the nav backdrop-filter trap: check what else in this stylesheet can reach the element before trusting a single-class selector. */ .trn .trn__ground, .trn .trn__glow, .trn .trn__h, .trn .trn__gleam { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; /* THE WORD IS SET LEFT, TO THE CONTAINER'S EDGE, AND THAT IS A LEGIBILITY FIX BEFORE IT IS A COMPOSITIONAL ONE. Centred, the second half of the word landed on the dark block at the right of the photograph and "s on" effectively disappeared - the cost of showing the true pixels is that the word can only be read where the picture is lit. Set left, the whole of it sits over the glass. Padding does not change the padding box, so `cover` and the background position are untouched and the register with the ground still cannot drift. */ justify-content: flex-start; padding-inline-start: max(var(--gutter), calc((100% - var(--container)) / 2)); font-family: var(--font-display); font-weight: 500; font-style: normal; font-size: clamp(3.1rem, 0.6rem + 12.6vw, 10.5rem); line-height: 1; letter-spacing: -0.022em; white-space: nowrap; text-transform: none; } /* ONE rule, both layers: identical image, identical cover geometry, identical position. This is the register, and it cannot drift. */ .trn .trn__ground, .trn .trn__h { background-image: url("../assets/img/office-dawn.jpg"); background-repeat: no-repeat; background-size: cover; background-position: calc(46% + var(--pan) * 1px) 40%; } /* the room with the light off. It is deliberately NOT crushed: this client's standing complaint is a section that reads as an empty screen, and a dark room still has to look like a room. */ .trn__ground { z-index: 0; filter: brightness(calc(0.3 + var(--thru) * 0.2)) saturate(0.66) contrast(1.04); } /* cool top light and a vignette, so the dark ground still reads as a room rather than as a black band, and so the band has no hard edges */ .trn__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--obsidian) 0%, rgb(34 31 27 / 0.22) 32%, rgb(34 31 27 / 0.3) 64%, var(--obsidian) 100%), radial-gradient(122% 96% at 34% 46%, transparent 30%, rgba(6, 6, 8, 0.7) 100%); } /* the spill. A blurred copy of the word behind the opening, so the light coming through lands on the dark around each letter. */ .trn__glow { z-index: 2; pointer-events: none; color: rgba(238, 208, 152, 0.9); filter: blur(clamp(9px, 2.1vw, 24px)); opacity: calc(0.08 + var(--thru) * 0.6); } .trn__glow::before { content: attr(data-w); } /* THE OPENING. IT IS GRADED WARM, AND THAT IS A BRAND DECISION, NOT A PHOTOGRAPHIC ONE. Ungraded, the glass and the dawn sky put a large CYAN word on a page whose palette is antique gold on obsidian and never anything brighter or cooler, and `.jobx` two sections above is already the deliberately cold ground on this page. The grade costs nothing that matters: the register is about POSITION, not colour, so the letters still show exactly the pixels behind them, now as light rather than as a blue screen. */ .trn .trn__h { z-index: 3; -webkit-background-clip: text; background-clip: text; color: transparent; filter: brightness(calc(0.72 + var(--thru) * 0.72)) contrast(1.04) saturate(0.4) sepia(0.46) hue-rotate(-6deg); } /* the specular travelling beyond the wall */ .trn__gleam { z-index: 4; pointer-events: none; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(102deg, rgba(255, 244, 222, 0) 38%, rgba(255, 244, 222, 0.62) 50%, rgba(255, 244, 222, 0) 62%); background-repeat: no-repeat; background-size: 240% 100%; background-position: calc(var(--gl) * 1%) 0; mix-blend-mode: screen; } .trn__gleam::before { content: attr(data-w); } /* ---- what you get ----------------------------------------------------- Not a list, and no numerals or rules: section 03 directly above is four numbered rungs and section 07 below is a four-step timeline, so a third numbered set on one page is the repetition that reads as generated. The three are given DIFFERENT internal structures rather than different sizes of the same one (the `.seat` lesson): a bare display statement, a statement with a kicker above it and a dimmed trailing clause, and one bound to a photograph. */ .trn__body { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem); row-gap: clamp(1.1rem, 0.85rem + 1.2vw, 1.85rem); align-items: start; } .trn__lead { grid-column: 1 / 8; grid-row: 1; max-width: 36rem; color: var(--vein); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem); line-height: 1.62; } .trn__one { grid-column: 1 / 8; grid-row: 2; max-width: 32rem; margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); line-height: 1.22; letter-spacing: -0.01em; } /* indented, so the three do not stack into a left-hand column beside a picture - which is the `.ed` split this section replaced. The stagger is what fills the middle of the composition. */ .trn__two { grid-column: 3 / 9; grid-row: 3; max-width: 28rem; margin: 0; color: var(--ink); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.6; } .trn__q { color: var(--vein); } .trn__k { display: block; margin-bottom: 0.6rem; color: var(--gold-light); font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* the third one is bound to its photograph, and the pair is lifted into the bottom of the stage so the two halves of the section interlock instead of sitting in stacked bands */ /* KEEP THE PLATE NARROW AND SHORT ENOUGH TO MATCH THE LEFT COLUMN. A grid item that spans rows distributes its excess height ACROSS those rows, so an over-tall picture on the right does not overflow, it silently pushes the three statements apart - which read as unexplained gaps rather than as air. At 4 columns and 3/4 it ran ~190px past the copy; at 3 columns the two sides finish together. */ .trn__three { grid-column: 10 / 13; grid-row: 1 / span 3; margin: 0; align-self: start; } .trn__plate { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(156, 120, 72, 0.26); background: var(--obsidian-raised); } .trn__shot { position: absolute; inset: -4% 0; } .trn__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; /* a dusk sky is inherently cool, and this page is gold on obsidian, so the blue is pulled back the same way the opening is */ filter: saturate(0.7) sepia(0.16) contrast(1.04) brightness(1.12); transition: filter 0.5s ease; } .trn__plate:hover .trn__shot img { filter: saturate(1) contrast(1.06) brightness(1.1); } .trn__vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 46%, rgba(6, 6, 8, 0.62) 100%), radial-gradient(120% 88% at 50% 34%, transparent 40%, rgba(6, 6, 8, 0.42) 100%); } .trn__three figcaption { margin-top: clamp(0.85rem, 0.7rem + 0.6vw, 1.2rem); color: var(--ink); font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.05rem); line-height: 1.55; } /* lift the pair into the stage only where there is room for it: below this width the plate would land on the word */ @media (min-width: 1120px) { .trn__three { margin-top: calc(-1 * clamp(4rem, 1rem + 7vw, 8.5rem)); } } @media (max-width: 900px) { /* rows follow DOM order, so what a screen reader hears and what a phone shows are the same sequence */ .trn__lead { grid-column: 1 / 13; grid-row: 1; } .trn__one { grid-column: 1 / 13; grid-row: 2; } .trn__two { grid-column: 1 / 13; grid-row: 3; } .trn__three { grid-column: 1 / 13; grid-row: 4; margin-top: 0; } /* THE CROP HAS TO CHANGE, NOT JUST THE POSITION. On a wide stage `cover` crops the photograph to a band and the lit glass is most of it; on a phone the stage is close to the image's own aspect, so `cover` shows nearly the whole frame and the word lands squarely on the dark floor in the middle of it - measured invisible at 390. Sizing off the HEIGHT instead pushes in on the lit band, and both layers read the same rule so the register is untouched. */ .trn .trn__ground, .trn .trn__h { background-size: auto 280%; background-position: calc(30% + var(--pan) * 1px) 24%; } .trn__plate { aspect-ratio: 16 / 10; } .trn__shot img { object-position: 50% 56%; } } @media (max-width: 560px) { .trn__stage { height: clamp(12rem, 8rem + 26vw, 16rem); } .trn__plate { aspect-ratio: 3 / 2; } } @media (prefers-reduced-motion: reduce) { .trn__shot img { transition: none; } /* `.trn ` prefix REQUIRED, and this is the second time the same trap bit in this one block: the shared layer rule is `.trn .trn__gleam` (0,2,0), so a bare `.trn__gleam` (0,1,0) here never won and the specular stayed on - frozen mid-sweep, since motion.js returns before it can drive `--gl`. Measured display:flex when it should have been none. Whenever a base rule is written at a raised specificity, every override of it has to match. */ .trn .trn__gleam { display: none; } } /* ========================================================================== HELD OPEN — careers.html, section 05 (`.hld`) It replaced three identical `.tcard` placeholders, all reading "Story pending" - a three-across grid of the same card, saying nothing three times, which is the shape a template produces. careers.html was the LAST user of `.tcard` site-wide so that block is DELETED. `.shead` stays: about.html and index.html still use it. THE SECTION HAS NO CONTENT AND THAT IS THE CONTENT. Nobody has a publishable promotion story yet. The three honest options were to invent one (forbidden), drop the section (loses "We will not fake them", which is the differentiator), or show the SENTENCE THAT WILL BE PUBLISHED with the two things we do not have left as blanks. The third is the only one that turns the gap into an argument. THE ONLY LIGHT IN THIS SECTION COMES FROM THE TWO EMPTY PLACES. The ground is deliberately unlit and cool - no warm pool, because `.barx` owns that on this page - so the blanks are the section's light source and the missing thing is the thing the eye goes to. That is the whole lighting design and it is also the argument. THE MECHANIC IS WAITING, and it was still free. Every other section on this site RESOLVES - `.wall` travels X, `.worlds` pushes Z, `.rise` climbs Y, `.lp` separates planes, `.forge` turns, `.hire` strikes through, `.cab` assembles, `.stop` opens a rule, `.cuts` register, `.latent` develops, `.lane` slides in, `.floor` spreads, `.clk` runs, `.tally` counts, the careers hero reorders, `.barx` rakes, `.jobx` cuts, `.climb` widens and `.trn` lights from behind. This one arrives and then does not finish: the two blanks hold a slow breath that never fills. Nothing else on the site is unresolved on purpose. THE TWO BREATHS ARE OUT OF PHASE (motion.js delays the second by half a cycle). In phase they pulse together and read as a LOADING INDICATOR, which is a UI idiom and says "wait a moment"; out of phase they read as two separate places being kept, which says "wait for something real". Same number of lines of code, completely different meaning. IT IS THE ONLY CENTRED COMPOSITION ON THIS PAGE and the only one with no photograph. After four loud, asymmetric, image-led sections the page needs a breath, and a quiet section only works if its quietness is clearly a decision - hence the symmetry and the single light source, rather than just less of everything. `--hold` (0..1, how far the light has come up) and `--breath` (the pulse, written per slot) follow the site's two-number pattern - one scrubbed, one free-running - so a tween and a transition can never fight. Both are UNREGISTERED: GSAP writes them every frame, they inherit to the children for free, and there is no site-wide recalc cost. The declared values ARE the finished state, so no-GSAP / no-CDN / reduced-motion render the blanks lit and steady. ========================================================================== */ .hld { /* how far the light in the blanks has come up. GSAP owns it. */ --hold: 1; position: relative; overflow-x: clip; } /* the unlit ground. Cool and still on purpose: `.barx` above is a warm raking light and `.trn` directly above is a lit photographic band, so the temperature drop is what makes this register as a different room. */ .hld__ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(232, 232, 246, 0.028) 0%, transparent 42%), radial-gradient(80% 60% at 50% 8%, rgba(180, 190, 220, 0.022), transparent 70%); } .hld > .container { position: relative; z-index: 1; } /* THE WHOLE SECTION IS CENTRED, and it is the only one on this page that is. Left-aligned it left the entire right half of the head empty while the sentence sat centred below it, so the two halves read as unrelated blocks rather than as one composition. Symmetry also suits what this is: a place formally kept, closer to a dedication than to an article. Everything else on careers.html is asymmetric, so the change of axis is what gives a quiet section its own identity. */ .hld__head { max-width: 46rem; margin-inline: auto; text-align: center; } .hld__lead { margin-top: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem); max-width: 36rem; margin-inline: auto; color: var(--vein); font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem); line-height: 1.62; } /* ---- the sentence ------------------------------------------------------ Capped at the page's own h2 size. The client asked for a medium heading size across careers, so this earns its presence through light and air, not through scale - the blanks are what carry it. */ .hld__spec { position: relative; isolation: isolate; margin: clamp(3rem, 1.9rem + 5vw, 6.5rem) auto clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); /* WIDE ENOUGH TO HOLD ONE LINE AT FULL SIZE. At 46rem it wrapped after "on" and left the MONTH blank alone on line two with the full stop stranded beside it, which reads as a broken layout rather than as a held place. `balance` is the safety net for the widths where it does have to wrap. */ max-width: 54rem; text-align: center; text-wrap: balance; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.45rem, 1rem + 2.1vw, 2.6rem); line-height: 1.5; letter-spacing: -0.012em; } /* a place kept. No fill of its own - only a hairline to write on, a faint rise of light to it, and the pool it throws. */ .hld__slot { --breath: 0.5; /* one number the whole blank is lit from */ --lum: calc(var(--hold) * (0.38 + var(--breath) * 0.62)); position: relative; display: inline-block; width: clamp(6.5rem, 3.6rem + 10.5vw, 11.5rem); height: 0.9em; margin-inline: 0.14em; vertical-align: -0.04em; border-bottom: 1px solid rgba(192, 156, 96, calc(0.26 + var(--lum) * 0.62)); } /* the closing blank carries almost no right margin, or the full stop floats away from it and reads as a stray dot rather than as the end of a sentence */ .hld__slot--sm { width: clamp(5rem, 3rem + 7vw, 8.5rem); margin-inline-end: 0.02em; } /* the pool on the stone. This is the section's only light source, so it is allowed to be wide and soft. z-index -1 inside the isolated paragraph puts it behind the sentence but above the section ground. */ .hld__slot::before { content: ""; position: absolute; left: 50%; top: 46%; width: 330%; height: 760%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(196, 158, 98, calc(var(--lum) * 0.3)), transparent 70%); } /* the light rising to the line */ .hld__slot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 12%, rgba(192, 156, 96, calc(var(--lum) * 0.08)) 72%, rgba(226, 190, 126, calc(var(--lum) * 0.17)) 100%); } /* what the blank is waiting for, named. Without this the reader has to be told what is missing; with it the section explains itself, which is the test this client's rejected devices kept failing. */ .hld__field { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: clamp(0.55rem, 0.48rem + 0.24vw, 0.72rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(226, 190, 126, calc(0.3 + var(--lum) * 0.45)); } .hld__note { max-width: 34rem; margin-inline: auto; text-align: center; color: var(--vein); font-size: clamp(0.9rem, 0.87rem + 0.18vw, 1rem); line-height: 1.6; } @media (max-width: 620px) { /* the sentence breaks over more lines on a phone, so it needs the line to breathe or the blanks collide with the row above */ .hld__spec { line-height: 1.62; } .hld__slot { width: clamp(6rem, 4rem + 14vw, 9rem); } .hld__slot--sm { width: clamp(4.6rem, 3rem + 10vw, 7rem); } } /* ========================================================================== THE SET — careers.html, section 06 (`.opn`) It replaced three `.position` rows - full-width flex rows with a border top and bottom, which is the default jobs-board shape - and careers.html was the only user of `.position`, so that CSS is DELETED from main.css. THE REAL FAULT WAS NOT VISUAL. The three roles were `