/* marketing-cms.css — the approved CMS-PAGE composition, vendored from design-system.css. * * SOURCE: liverec-design-r2/gallery-510/assets/design-system.css (sha256 303b2adf8784…), the sheet the * founder-approved `Candidate/CMS Pages/About Us.html` (APPROVED-SET.tsv:253) links. The * `(marketing)` route group deliberately does not serve design-system.css (see layout.tsx), * so the rules the About composition needs are copied here VERBATIM, one block per selector, * exactly as marketing-pricing.css does for the Choose Plan frame. Nothing here is authored. * * Selected: every rule whose selector names one of the About composition classes * (cms-hero … cms-faq, the notches, mk-arrow, mkt-faqwrap) plus .mkt-toggle for the pricing * page. Excluded on purpose: the decorative job cards, team rail and brand strip (no ratified * people or brands), and mkt-faqcol (C-5: emitted by the frame, defined nowhere — copying * nothing is the honest act). * * TWO TOKENS the rules read that the served marketing sheets do not define are carried with the * same values design-system.css gives them (`--ink-2`, `--tint-panel`). Vendored, not invented. * Generated 2026-08-24; 70 rule blocks. */ :root{--ink-2:#33343A;--tint-panel:#EEF3FF} .ch-av .mk-arrow{width:22px;height:22px;filter:brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(2476%) hue-rotate(216deg) brightness(97%) contrast(96%)} .mk-arrow{display:inline-block;background:url(arrow-nav-alpha.png) center/contain no-repeat} .jc-cur .mk-arrow{filter:brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(900%) hue-rotate(350deg)} .jd-meta .mk-arrow,.jd-meta svg{opacity:.7} .mkt-toggle{display:flex;justify-content:center;margin:26px 0 30px} .mkt-faqwrap{padding:20px 56px 70px} /* 2026-10-05 OPERATOR ORDER ("the corner cutout ... more rounded ... like the homepage banner"): cut-out inner radius = the home hero's 20px (marketing.css `.page.fin.home .p-hero::before{border-bottom-right-radius:20px}`), was 12px (.cms-band, /guides) and 16px (.cms-hcband, /help-center); width/height unchanged. Overrides the frame's 12px (.cms-band, /guides) and 16px (.cms-hcband, /help-center) by that order. NO ledger row. File-only pass: NOT built, NOT measured in a browser. */ .cms-band .cms-notch.nt-tl{width:52px;height:53px;border-bottom-right-radius:20px} .cms-band .cms-notch.nt-br{width:52px;height:53px;border-top-left-radius:20px} .cms-hcband .cms-notch.nt-tl{width:89px;height:89px;border-bottom-right-radius:20px} .cms-hcband .cms-notch.nt-br{width:89px;height:89px;border-top-left-radius:20px} .cms-hero{background:var(--tint-panel);text-align:center;padding:172px 20px 148px;position:relative;overflow:hidden} .cms-hero-in{max-width:780px;margin:0 auto;position:relative} .cms-hero-in>svg{color:var(--brand)} .cms-hero h1{font-family:var(--font-head);font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:14px 0 18px} .cms-hero-in>p{color:var(--ink-2);font-size:15.5px;line-height:1.65;margin:0 auto 28px;max-width:660px} .cms-ctas{display:flex;gap:14px;justify-content:center} .cms-2col{display:grid;grid-template-columns:420px 1fr;gap:60px;padding:82px 170px 36px} .cms-2col h2,.cms-csec h2,.cms-why h2,.cms-team h2{font-family:var(--font-head);font-size:36px;font-weight:800;letter-spacing:-.01em;margin:0} .cms-2col-tx p{font-size:14.5px;line-height:1.7;margin:0 0 18px;color:var(--ink)} .cms-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:58px 170px;text-align:center} .cms-stat{border-inline-start:1px solid var(--line)} .cms-stat:first-child{border-inline-start:0} .cms-stat .n{font-family:var(--font-head);font-size:44px;font-weight:800} .cms-stat .n span{color:var(--brand)} .cms-stat .l{color:var(--ink-2);font-size:14px;margin-top:6px} .cms-csec{text-align:center;padding:42px 170px 30px} .cms-csec>p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:14px auto 0;max-width:760px} .cms-why{background:var(--tint-panel);padding:72px 170px;margin-top:44px} .cms-why-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:46px} .cms-why-head p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0} .cms-why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .cms-why-card svg{color:var(--brand)} .cms-why-card h3{font-family:var(--font-head);font-size:20px;font-weight:800;margin:16px 0 10px} .cms-why-card p{font-size:13.5px;line-height:1.68;color:var(--ink-2);margin:0} .cms-qrail{display:flex;gap:22px;margin-top:42px;justify-content:center;align-items:stretch;padding:8px 0} .cms-qcard{flex:none;width:300px;border:1px solid var(--line);border-radius:12px;padding:24px;text-align:start;background:#fff} .cms-qcard svg{color:#C9D2E4} .cms-qcard.mid svg{color:var(--brand)} .cms-qcard.mid{width:340px;background:var(--tint-panel);border-color:transparent} .cms-qcard p{font-size:13.5px;line-height:1.62;color:var(--ink);margin:12px 0 20px} .cms-qa{display:flex;gap:10px;align-items:center} .cms-qa img{width:36px;height:36px;border-radius:50%} .cms-qa b{display:block;font-size:13.5px} .cms-qa span{font-size:12px;color:var(--ink-2)} .cms-qdots{display:flex;gap:8px;justify-content:center;margin-top:28px} .cms-qdots i{width:8px;height:8px;border-radius:99px;background:#D6DCEA} .cms-qdots i.on{background:var(--brand);width:22px} .cms-cta{margin:70px 170px 30px;background:var(--tint-panel);padding:66px 80px;position:relative;overflow:hidden} .cms-cta-wm{position:absolute;left:72px;top:50%;transform:translateY(-50%);width:130px;height:130px;background:var(--brand);opacity:.2;-webkit-mask:url(arrow-nav-alpha.png) center/contain no-repeat;mask:url(arrow-nav-alpha.png) center/contain no-repeat} .cms-cta-in{margin-left:244px;max-width:820px} .cms-cta-in h2{font-family:var(--font-head);font-size:33px;font-weight:800;margin:0 0 12px} .cms-cta-in p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 26px} .cms-cta-in .cms-ctas{justify-content:flex-start} .cms-faq .mkt-faq{grid-template-columns:330px 1fr} .cms-faq .mkt-faq h2{font-size:34px} .cms-premchip .mk-arrow,.cms-cat.prem .mk-arrow,.lh-prem .mk-arrow{filter:brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(900%) hue-rotate(350deg)} .cms-scb .mk-arrow{filter:brightness(0) invert(1)} .cc-fn .logom .mk-arrow{filter:brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(2476%) hue-rotate(216deg) brightness(97%) contrast(96%)} .cms-premchip .mk-arrow,.cms-cat.prem .mk-arrow,.lh-prem .mk-arrow,.cms-scb .mk-arrow,.cc-fn .logom .mk-arrow{flex:none} .cms-nfx{clip-path:none} .cms-cta.cms-nfx,.cms-hcband.cms-nfx{border-radius:20px} /* P3-OP-20 - NRC-P1-283 (lane-s14, sheet-surgeon, 2026-09-07) - THE ONE SHARED LINE, CHANGED IN PLACE. Operator ruling #22: "the cutouts read as a white back layer". The line below is vendored from design-system.css:2872, where `#fff` is not a colour choice at all - it is the FRAME'S OWN PAGE GROUND: `.frame{width:1684px;background:#fff}` in the gallery's design-system.css. On this site the ground is `--page-bg` #F6F9FF, so the literal paints a white block on a near-white page instead of cutting the corner out of it. THE FRAME AGREES WITH THE OPERATOR IN INTENT; only the literal is wrong for this ground. Precedent already in this sheet, same cure, same reasoning: `.mkt-hero .cms-notch{background:var(--page-bg)}` at the P-HERO block below, and the home hero's pseudo-notches which MEASURE rgb(246, 249, 255) - the intended look the ruling points at. MEASURED BEFORE on :4410, hydrated, dpr 2 (BEFORE.json): notch background rgb(255, 255, 255) against a backdrop of rgb(246, 249, 255) on EVERY notched band read - the backdrop was read by walking up from each notch to the first ancestor with a non-transparent background, never assumed, precisely because a notch over a WHITE section would be made worse by this change. All 3 non-hero band families read the page ground behind them: .cms-hcband.cms-nfx /help-center 2 notches backdrop rgb(246, 249, 255) .cms-band.cms-nfx /guides 2 notches backdrop rgb(246, 249, 255) .cms-cta.cms-nfx.cms-ctafx /about 4 notches backdrop rgb(246, 249, 255) .mkt-hero /employers /blog and the 5 help-centre locale twins - ALREADY rgb(246, 249, 255): the control, cured earlier, unchanged here. S14 DENOMINATOR, two structurally different counts: `class="cms-notch` over all 120 sitemap routes = 164 notch elements on 76 of 120 routes (an SSR FLOOR - client-rendered notches are not in the served HTML); and the hydrated DOM over 13 route-cells, which agreed exactly at 2 per route on every route it read. Every one of them changes with this line. Section 9b PROVEN IN THE BROWSER, not inferred: `getComputedStyle(notch).getPropertyValue ('--page-bg')` returned `#F6F9FF` on 100 % of notches read (6 help-centre routes x 3 widths plus 7 census routes) - non-empty everywhere, so the declaration cannot be silently voided on any surface that was measured. The fallback is the token's OWN measured value and exists only so an UNMEASURED route cannot lose its notch entirely if the token is ever re-scoped; it is not a second colour. */ .cms-notch{position:absolute;background:var(--page-bg,#F6F9FF);z-index:4} /* was #fff - design-system.css:2872, which is NOT edited */ /* 2026-10-05 OPERATOR ORDER ("the corner cutout ... more rounded ... like the homepage banner"): cut-out inner radius = the home hero's 20px (marketing.css `.page.fin.home .p-hero::before{border-bottom-right-radius:20px}`), was 8px (base .cms-notch: /contact chat band and every family below 600px before its own rule); width/height unchanged. Overrides the frame's 8px (base .cms-notch: /contact chat band and every family below 600px before its own rule) by that order. NO ledger row. File-only pass: NOT built, NOT measured in a browser. */ .cms-notch.nt-tl{left:0;top:0;width:40px;height:40px;border-bottom-right-radius:20px} .cms-notch.nt-br{right:0;bottom:0;width:40px;height:40px;border-top-left-radius:20px} /* 2026-10-05 operator ("the corner cutout on this card needs to be ... more rounded, like ... the homepage banner"): the inner radius is the home hero's 20px (marketing.css `.page.fin.home .p-hero::before{border-bottom-right-radius:20px}`), was 12px. */ .cms-cta.cms-nfx .cms-notch.nt-tl{width:71px;height:71px;border-bottom-right-radius:20px} .cms-cta.cms-nfx .cms-notch.nt-br{width:71px;height:71px;border-top-left-radius:20px} .cms-nfx .cms-bwm{position:absolute;width:33px;height:33px;background:url(arrow-nav-alpha.png) center/contain no-repeat;filter:brightness(0) invert(1);opacity:.25} .cms-cta.cms-ctafx .cms-cta-wm{left:61px;top:59px;transform:none;width:130px;height:130px;opacity:.07} .cms-harr{filter:brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(2476%) hue-rotate(216deg) brightness(97%) contrast(96%);margin-bottom:10px} .crs-arrmk.mk-arrow{filter:brightness(0) saturate(100%) invert(64%) sepia(64%) saturate(1850%) hue-rotate(333deg) brightness(103%) contrast(88%)} /* ============================================================================ THE PHONE/TABLET LAYER FOR THE CMS COMPOSITION — added 2026-08-24. Measured first (gate-w5-dl1-device-matrix, same day): /about and /ar/hawl-liverec overflowed at 320 (65 elements, worst escape 644px), 360 (57 / 614px) and 768 (21 / 410px) — every escape a fixed-width `.cms-qcard` (300/340px in a flex row that never wraps), a 420px+1fr `.cms-2col` track, a four-track `.cms-stats`, a three-track `.cms-why-row`, 170px side gutters and the CTA's 244px text offset. The rules above are vendored VERBATIM from the approved sheet and are not edited; these live BELOW them in the same file because `marketing-responsive.css` loads BEFORE this sheet and would lose the cascade at equal specificity. Everything sits inside `max-width:1279.98px`, so at 1280px and above the approved rendering is untouched (verified: `.cms-qcard` 300px, `.cms-2col` 420px track at 1440). No `overflow-x:hidden` — the boxes are made to FIT, so the gate's per-element measurement stays meaningful. Same method as marketing-responsive.css. ⛔⛔ RETRACTION 2026-08-27 — THE PARENTHESISED VERIFICATION ABOVE IS FALSE, AND IT IS LEFT IN PLACE ON PURPOSE SO THE CORRECTION CAN BE AUDITED AGAINST IT (S9). The claim: "at 1280px and above the approved rendering is untouched (verified: `.cms-qcard` 300px, `.cms-2col` 420px track at 1440)". ⭐ BOTH HALVES OF THE PARENTHESIS ARE INDIVIDUALLY TRUE, RE-MEASURED 2026-08-27: `.cms-2col` grid-template-columns @1440 = `420px 380px`, box 120..1320 — fits. TRUE. `.cms-qcard` width @1440 = 300px. TRUE. ⛔ THE CONCLUSION DRAWN FROM THEM IS FALSE. Both are per-ELEMENT facts; neither asks whether the ROW of five cards fits, and it does not. MEASURED 2026-08-27: live /about @1440 documentElement scrollWidth 1514 vs clientWidth 1440 -> 74px of horizontal page scroll approved frame @1440 scrollWidth 1683 vs clientWidth 1440 -> 216px the card run is a fixed 1588px live / 1628px in the frame, and it overflows CONTINUOUSLY from 1588px down to 1280px — a 309px band ⇒ "untouched" was read as "correct". The rendering above 1280 was indeed untouched by that layer, and it was already broken. TWO TRUE PER-ELEMENT MEASUREMENTS WERE CITED AS EVIDENCE FOR A PER-ROW CLAIM NEITHER OF THEM TESTS — which is the most durable way to be wrong, because every number in the sentence checks out. That is why the band went unmeasured: the parenthesis told the next reader it had been verified, and re-deriving it would have agreed. The band is now covered by the `min-width:1280px and max-width:1587.98px` block below. ============================================================================ */ @media (max-width: 1279.98px) { .cms-hero { padding: 96px 20px 72px; } .cms-hero h1 { font-size: 32px; } .cms-2col { grid-template-columns: 1fr; gap: 28px; padding: 48px 20px 24px; } .cms-2col h2, .cms-csec h2, .cms-why h2, .cms-team h2 { font-size: 28px; } .cms-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 36px 20px; } .cms-stat:nth-child(odd) { border-inline-start: 0; } .cms-stat .n { font-size: 34px; } .cms-csec { padding: 32px 20px 20px; } .cms-why { padding: 48px 20px; margin-top: 28px; } .cms-why-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; } /* CF-4b, 2026-08-29: two columns for THREE cards orphaned the third (measured @768: tracks 352 352, rows [2,1], the orphan row 22.7px shorter). The About Us frame draws the row 3-across at 1683 and nothing below; NO FRAME at tablet, correctness only — same class as CF-4 (.mkt-fgrid). Three tracks keep the row whole. */ .cms-why-row { grid-template-columns: repeat(3, 1fr); gap: 24px; } .cms-qrail { flex-wrap: wrap; gap: 16px; } .cms-qcard, .cms-qcard.mid { width: 100%; max-width: 340px; } .cms-cta { margin: 40px 20px 20px; padding: 40px 28px; } .cms-cta-wm { left: 20px; } .cms-cta-in { margin-left: 0; } .cms-cta-in h2 { font-size: 26px; } .cms-ctas { flex-wrap: wrap; } .cms-faq .mkt-faq { grid-template-columns: 1fr; } .cms-faq .mkt-faq h2 { font-size: 28px; } .mkt-faqwrap { padding: 20px 20px 48px; } } /* ============================================================================ ⛔ THE 1280-1588 BAND — THE GAP THE LAYER ABOVE NEVER COVERED. Added 2026-08-27. The block above is scoped `max-width:1279.98px` and its header claims "at 1280px and above the approved rendering is untouched (verified: .cms-qcard 300px ... at 1440)". THAT VERIFICATION IS THE DEFECT: at 1440 the approved rendering does not fit. MECHANISM. `.cms-qrail` is `display:flex` with `justify-content:center` and `overflow:visible`; its five `.cms-qcard`s are `flex:none` at 300px (340px for `.mid`) with 22px gaps — a fixed **1588px run** inside an **860px** rail. It cannot shrink, so it spills BOTH sides equally and is on screen only while the viewport is at least as wide as the run. MEASURED 2026-08-27 by width sweep on /about (scrollWidth vs clientWidth): 1920..1590 delta 0 fits 1588..1280 delta 4..154px ⛔ THE PAGE SCROLLS SIDEWAYS 1279..390 delta 0 the layer above wraps it At the audit's laptop cell (1280) the outermost cards measure left **-154px** and right **1434px** against a 1280 viewport — 154px of horizontal scroll. ⚠ THE AUDIT SEES ONE POINT IN A 309px BAND. Its viewports are 1920/1280/768/390, so only 1280 is sampled; 1366, 1440 and 1500 are equally broken and are measured nowhere. ⚠ THE APPROVED FRAME DOES NOT DEFINE THIS WIDTH, and that is reported rather than resolved by assumption (CLAUDE.md §13). gallery-510 `Candidate/CMS Pages/About Us.html` is a FIXED 1683px canvas — measured `scrollWidth` 1683 at every viewport below 1683, card run 1628px — so it overflows at 1280 exactly as the live page does (right-overhang 376px). It has no 1280 rendering to match. The live composition was made fluid; this covers the band its own responsive layer left open. ⚠ NOT THE MARQUEE SHAPE. `.logos`/`.logo-track` is `width:max-content` inside a CLIPPING parent — deliberate overflow, and the detector already excludes clipped elements. `.cms-qrail` computes `overflow:visible` and the document genuinely scrolls. Different thing. 1587.98 is the MEASURED fit point (run = 1588px), not a round number. At >=1588 the approved single row is untouched because it provably fits. ============================================================================ */ @media (min-width: 1280px) and (max-width: 1587.98px) { .cms-qrail { flex-wrap: wrap; gap: 16px; } .cms-qcard, .cms-qcard.mid { width: 100%; max-width: 340px; } } @media (max-width: 599.98px) { .cms-hero { padding: 64px 16px 48px; } .cms-hero h1 { font-size: 27px; } .cms-stats { grid-template-columns: 1fr; } .cms-stat { border-inline-start: 0; } .cms-why-row { grid-template-columns: 1fr; } .cms-qcard, .cms-qcard.mid { max-width: 100%; } .cms-cta { padding: 32px 20px; } .cms-cta-wm { display: none; } /* MOBILE EYE-GATE 2026-08-24 (founder: "mobile never got a proper eye gate"): the approved frame's corner "notch" is a 71px white square painted over the CTA's top-left corner. On the desktop it sits inside 80px of padding; at phone padding it covered the heading's first letters ("ing for a role that sponsors?", "t your journey with LiveRec"). The device gate measures overflow beyond the viewport and cannot see a box painted over text. Decoration never eats copy. */ .cms-cta .cms-bwm { display: none; } /* P2-12 (operator-2026-09-25-NOTCH-MOBILE): the notch half of the rule above is REVERSED — the cut-outs show on phones, sized down and clear of the copy. See the P2-12 block at the end of this sheet. */ .cms-ctas .btn, .cms-ctas a, .cms-ctas button { width: 100%; text-align: center; } } /* ============================================================================ ⛔ REFUTER RUN-A PLANTS — REMOVED 2026-08-27. THEY WERE NEVER RESTORED. The header on this block read, verbatim: "===== REFUTER RUN-A PLANTS (2026-08-25) — TEMPORARY, restored byte-identical same session =====" The restoration did not happen. All four declarations were still live in the shipped sheet two days later and were MEASURED in the browser on 2026-08-27, on `/` at 1440, with data-saver both off and on. Every one was in effect, and every one was IDENTICAL in both states: body font-family "Hanken Grotesk", sans-serif <- with saver ON h2 line-height 42.94px (= 38px x 1.13) .p-foot .inner::after "Browse and find the best jobs with great pricing today" — rendered, display:block, on every page .fbottom .c footer-arrow.png background + 20px padding-left ⛔ WHY THIS MATTERED BEYOND BEING RESIDUE. Two of the four broke data-saver, which is the mode D15 §1.4 requires and `marketing-saver.css` implements: 1. `body{font-family:... !important}` DEFEATS THE FONT SWAP. marketing-saver overrides `--font-head`/`--font-body` to the system stack and calls it "the largest single saving on these pages (19 Latin files)". An author `!important` on `body` outranks a token, so the webfonts loaded anyway. MEASURED font files fetched on `/`: saver off 9 -> saver on 8. One file saved, not nineteen. The mode's headline saving was not happening. 2. `.fbottom .c{background-image:url(footer-arrow.png)}` puts the footer watermark asset on a SECOND element that data-saver never hides, so `footer-arrow.png` was still downloaded with the mode ON — measured 1 request in both states — while `.watermark` itself was correctly hidden. The reader lost the decoration and kept the byte cost. ⚠ AND `.p-foot .inner::after` INJECTED COMMERCIAL COPY. "Browse and find the best jobs with great pricing today" rendered in the footer of every marketing page, in both states, for two days. Nobody authored that as copy; it was a test string. It is removed, not rewritten — this lane does not author commercial copy. ⛔ NOT DELETED SILENTLY. The exact removed declarations are preserved here so the change is auditable and so a future reader can tell a correction from a transcription (CLAUDE.md §12's own reasoning). R6 is about not deleting FILES; this is a revert of self-declared TEMPORARY plants to the state their own comment claimed they were already in. .fbottom .c{background-image:url(/mocks/assets/footer-arrow.png); background-repeat:no-repeat;background-position:left center; background-size:14px 14px;padding-left:20px} h2,h3{line-height:1.13 !important} .p-foot .inner::after{content:"Browse and find the best jobs with great pricing today";color:#fff;font-size:14px;display:block} body{font-family:"Hanken Grotesk",sans-serif !important} ⭐ CLAUDE.md §8 already warned about exactly this: "Restore between suites … leaves plant residue and manufactures convincing failures." The warning was about failures. This residue manufactured a convincing PASS — data-saver looked implemented and was not. ============================================================================ */ /* --------------------------------------------------------------------------- 2026-08-25 — "Start earning today" made to navigate without changing the approved element. The frame draws a