/* ============================================================================ founder-mph.css — the masterproductionhouse.com/founder LAYOUT SYSTEM, ported onto founder.html. Founder, 2026-08-06: "can we do the same for our founder page as well … copy their code and exactly the same". Loaded LAST on founder.html, gated on `body.bto-mph-f`. Linked by founder.html ONLY; about/contact/work never see it. Its partner is bto-css/bto-about-grounds.css (the navy token + the on-dark hero H1), linked just above — that sheet's name is historical, everything in it is generic. ── HOW THE NUMBERS WERE GOT ─────────────────────────────────────────────── Their /founder rendered headless at 1440 with every reveal settled and every computed style dumped (`_probe-mph.cjs`), and ours measured the same way. Every value below is a real before → after. 🔴 THEIR FOUNDER PAGE IS NOT THEIR ABOUT PAGE, AND COPYING THE ABOUT SCALE HERE WOULD HAVE BEEN WRONG. Measured differences on their own site: · h1 is 48/60, not 60/75 — the founder h1 is a full step DOWN. · the eyebrow is 12/16 at ls 3.84px (.32em), not 14/20. · body support text runs 14/24, not 16/28. A page-level port, not a site-level one. ── WHAT OURS WAS ───────────────────────────────────────────────────────── h1 90/85.5 · eyebrow 11.52 (hero's was UNSTYLED at ~20px — it carries `.bto-eyebrow`, not `.svc-sec-eyebrow`, and nothing targeted it) · shell 1350@45 · padding 88/63, hero 104/0 · stat 43.2 · THE HERO HAD NO GROUND AT ALL — a bare `.page-header-content` with no `.bto-panel`, so it fell through to the body canvas while every other page opens dark · THREE #CCD5DA panels, the ground retired on home months ago (see bto-about-grounds.css §1). Both fixed in founder.html. ── NOT COPIED — the same three as about and work ───────────────────────── Their typefaces (Inter + Space Grotesk), their all-light ground, and heading line-height literally: 1.25 suits sentence-case Space Grotesk, not condensed Antonio in caps, which takes 1.05. ========================================================================== */ /* ========================================================================== §1 · THE SHELL — 1350@45 → 1280@80 ========================================================================== MPH runs 1280@80 on all seven bands of their founder page. Ours ran 1350@45: one width, but the wrong one, and a 45px gutter against the header bar's 80. */ body.bto-static.bto-mph-f .container { max-width: 1280px; padding-inline: 0; margin-inline: auto; width: 100%; } body.bto-static.bto-mph-f .bto-panel > .container, body.bto-static.bto-mph-f .bto-static__body { padding-inline: 80px; max-width: 1440px; } body.bto-static.bto-mph-f .bto-static__body > .bto-panel { padding-inline: 0; } /* ========================================================================== §2 · THE GAPS ========================================================================== ours MPH founder here section padding 88/63 72/72 · 80/80 · 80/80 96/96 hero 104/0 144/0 144/80 80/80 is their most-used band and the one already standard on our about page, so it is the one taken rather than an average of their three. 🔴 THE HERO'S `pb` IS 80, NOT MPH'S 0 — the same correction about.html needed and for the same reason. Their page has no ground change, so a hero closing flush is invisible and the next section's padding does all the work. Ours now changes ink → navy at that seam; copied literally the ink would stop a few pixels under the lead while 80px of navy sat above the next eyebrow. 80 both sides restores their symmetry across a coloured edge. */ body.bto-static.bto-mph-f .bto-panel.bto-static__sec, body.bto-static.bto-mph-f .bto-panel { padding-block: 80px; } body.bto-static.bto-mph-f .page-header-content.bto-panel { padding-block: 144px 80px; } /* ========================================================================== §3 · THE TYPE SCALE ========================================================================== ours MPH founder here eyebrow 11.52/14.98 12/16 ls.32em 12/16 ls.32em w600 hero eyebrow UNSTYLED ~20px 12/16 12/16 (see below) h1 90/85.5 48/60 48/1.05 section h2 † — 48/60 · 48/48 48/1.05 section support — 14/24 14/24 prose 18/28.8 14/24 · 16/24 16/28 ‡ card h3 23.04/25.34 24/32 w600 24/32 w600 card line — 14/24 14/24 stat amount 43.2/43.2 36/40 w600 36/40 w600 stat label 14/18.9 14/20 w500 14/20 w500 link / CTA 13.68/20.52 14/20 w600 14/20 w600 chip — 12/16 w600 12/16 w600 † OUR SECTION HEADS ARE `.svc-sec-head`, NOT `.content__title`. This page does not use the class every other static page's sections use — checked against the markup, not assumed, and it is why an about-style rule keyed on `.content__title` would have matched nothing here and failed silently. ‡ PROSE STAYS AT 16/28 RATHER THAN MPH'S 14. Their founder page runs body copy a step smaller than their own about page. 14px is below what this site sets anywhere else for running text, and matching it would make the one page whose job is to be READ the hardest one to read. `.svc-sec-support` — a caption line, which is what MPH actually sets at 14/24 — does take their number. Flagged rather than silently equalised; one value to change if the founder wants it literal. */ /* 🔴 THE HERO EYEBROW IS `.bto-eyebrow`, A CLASS NOTHING STYLED. Every other band on this page opens with `.svc-sec-eyebrow` and gets the tracked amber micro-cap; the hero opens with `.bto-eyebrow` and got nothing, so "Who runs it" rendered as ~20px plain grey body text — the only unstyled heading on the site. Both are listed here so the page has ONE eyebrow. */ body.bto-static.bto-mph-f .bto-panel .svc-sec-eyebrow, body.bto-static.bto-mph-f .bto-panel .bto-eyebrow { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; margin: 0 0 20px; color: var(--fg-accent); } /* 🔴 THE RULE ABOVE BREAKS EVERY EYEBROW ON A DARK GROUND UNLESS THIS FOLLOWS. `--fg-accent` is the accent's LIGHT-SURFACE form (#854D00 dark gold, correct at 5.93:1 on canvas). bto-static.css:272 already flips `.svc-sec-eyebrow` to `--fill-accent` on dark panels — but that rule is (0,3,0) and the block above is (0,4,1), so adding a colour there silently outranked it and painted dark gold on ink and navy: measured 2.61:1 and 1.68:1, six of the eight bands on this page. Caught by the contrast probe, not by reading. BOTH eyebrow classes are listed; the hero's is the one that never had a rule at all, so it was never covered by bto-static.css either. */ body.bto-static.bto-mph-f .bto-panel--dark .bto-eyebrow, body.bto-static.bto-mph-f .bto-panel--dark .svc-sec-eyebrow, body.bto-static.bto-mph-f .bto-panel--navy .bto-eyebrow, body.bto-static.bto-mph-f .bto-panel--navy .svc-sec-eyebrow { color: var(--fill-accent); } body.bto-static.bto-mph-f .page-header-content .page-header__title { font-size: 48px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 24px; max-width: none; } body.bto-static.bto-mph-f .bto-panel .svc-sec-head { font-size: 48px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 20px; } body.bto-static.bto-mph-f .bto-panel .svc-sec-support { font-size: 14px; line-height: 24px; max-width: 56em; margin: 0 0 28px; } body.bto-static.bto-mph-f .bto-static__lead { font-size: 16px; line-height: 32px; max-width: 768px; margin: 0; } body.bto-static.bto-mph-f .bto-prose p { font-size: 16px; line-height: 28px; max-width: 56em; } /* ── THE STEP CARDS ──────────────────────────────────────────────────────── */ body.bto-static.bto-mph-f .svc-step-kicker { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } body.bto-static.bto-mph-f .svc-step-name { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; text-transform: none; } body.bto-static.bto-mph-f .svc-step-line { font-size: 14px; line-height: 24px; } /* 🔴 THE STEP CARD HAD NO ON-DARK FORM, AND #founder-perspective IS NOW NAVY. `.svc-step-name` / `.svc-step-n` are neither `p` nor `.content__title`, so NONE of bto-static.css:267-276's on-dark block reaches them — they inherit `--fg-ink` wherever they land. On the old #CCD5DA panel that was survivable; on navy it measured 1.55:1, the worst number on the page, and the probe found it while every other reading on the same band was green. Any class not in that block needs its own on-dark form the moment its panel changes ground. */ body.bto-static.bto-mph-f .bto-panel--dark .svc-step-name, body.bto-static.bto-mph-f .bto-panel--dark .svc-step-n, body.bto-static.bto-mph-f .bto-panel--navy .svc-step-name, body.bto-static.bto-mph-f .bto-panel--navy .svc-step-n { color: var(--fg-on-dark); } body.bto-static.bto-mph-f .bto-panel--dark .svc-step-line, body.bto-static.bto-mph-f .bto-panel--navy .svc-step-line { color: var(--fg-on-dark-mute); } body.bto-static.bto-mph-f .bto-panel--dark .svc-step-kicker, body.bto-static.bto-mph-f .bto-panel--navy .svc-step-kicker { color: var(--fill-accent); } /* Same audit applied to the step's rule/divider, which drew ink hairlines. */ body.bto-static.bto-mph-f .bto-panel--dark .svc-step, body.bto-static.bto-mph-f .bto-panel--navy .svc-step { border-color: var(--bg-hairline); } /* ── THE STATS BAND ──────────────────────────────────────────────────────── */ body.bto-static.bto-mph-f .bto-stat__amount { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: normal; } body.bto-static.bto-mph-f .bto-stat__label { font-size: 14px; line-height: 20px; font-weight: 500; } /* ── LINKS, BUTTONS, CHIPS ───────────────────────────────────────────────── */ body.bto-static.bto-mph-f .bto-static__link, body.bto-static.bto-mph-f .p2-cta { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: normal; } body.bto-static.bto-mph-f .p4-head-slab { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; } /* ========================================================================== §4 · THE CARD PREVIEWS — RETIRED 2026-08-09 ========================================================================== The `.sva-card`/`.bto-cardgrid` grid (and its two follow-up passes: the 2026-08-09 size/layout fix, then the MPH-ratio card redesign minutes later) is gone from founder.html. Ash: "copy [work.html's] whole panel … get it done for the founder page" — so founder-work is now `.bw-panel`, the exact same component work.html's "Browse the work" archive uses, styled by bto-css/bto-work-screen.css and driven by bto-js/work-screen.js (both already page-agnostic — see that JS file's own header — so nothing here needed rewriting, only the markup swap in founder.html). All three retired passes stay in git history if any part of that direction is ever wanted back; nothing here duplicates it. ========================================================================== */ /* Ash, 2026-08-09: "get rid of the blur background... just keep the video box which shows all the work." `.bw-room` is the defocused showreel still + its navy-wash gradient sitting behind the rail/screen rig (bto-work- screen.css §3) — founder-only removal, work.html keeps it as shipped. `.bw-panel`'s own flat #13181B (§1) is still there underneath once the room is gone, so this is a plain dark ground behind the screen, not a transparent hole. Nothing else in the rig reads the room: the JS's --bw-room-y write (§4, the counter-parallax) still fires, it just has nothing to move. */ body.bto-static.bto-mph-f .bw-panel .bw-room { display: none; } /* Ash, next turn: "the black background and white both are visible. i want one yellow background." Removing the room (above) left the real problem exposed rather than solved — `.bw-screen` and `.bw-rail` were never solid colour, they are FROSTED GLASS (bto-work-screen.css §5/§6: a pale rgba(240,238,235,…) gradient + backdrop-filter), designed to blur the room's colour and light through them. With no room behind it, glass over flat #13181B just reads as a flat pale rectangle on a flat black one — the "black AND white" he's naming. Fix is the same shape as the room fix: go flat, all the way, in the brand amber instead of ink. Every text/border colour below was tuned for pale-on-dark and gets re-paired for ink-on-amber so nothing goes invisible when the surface it sits on flips. Scoped to founder.html only, same as the room removal — work.html's glass-over-room is untouched. */ body.bto-static.bto-mph-f .bw-panel { background: var(--bw-amber); } body.bto-static.bto-mph-f .bw-panel .bw-eyebrow { color: var(--bw-room); } body.bto-static.bto-mph-f .bw-panel .bw-title { color: var(--bw-room); } /* NOT overriding `.bw-slab-word`'s colour, and that's a deliberate stop, not a miss: bto-system.css's "EVERY SLAB, ONE SPEC" block locks all eleven of the site's amber-highlight slabs — including this one — to ink-on-amber via `:root:root:root:root`, specificity (0,6,0), well above anything scoped here. On a now-amber panel that reads as an ink-outlined box with ink text rather than a popping amber fill — visible and legible, just quieter than on a dark page. Flip it only by editing that shared rule (which repaints the other ten slabs too) or by matching its specificity here — not by a normal-weight rule that silently loses the cascade, which is what a first pass at this left in place until it was checked against the rendered page. */ body.bto-static.bto-mph-f .bw-panel .bw-lead { color: rgba(19, 24, 27, .78); } /* the rail and the screen: drop the glass (gradient fill + blur + the shadow that implied floating over a dark image — on flat amber it just reads as a dark smudge) so the amber panel shows through as ONE surface, not two. */ body.bto-static.bto-mph-f .bw-panel .bw-rail, body.bto-static.bto-mph-f .bw-panel .bw-screen { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: rgba(19, 24, 27, .22); } body.bto-static.bto-mph-f .bw-panel .bw-rail-sep { background: rgba(19, 24, 27, .25); } body.bto-static.bto-mph-f .bw-panel .bw-rail-dot { color: rgba(19, 24, 27, .55); } /* .bw-mark and .bw-rail-dot--on already paint ink-on-amber/amber-on-ink (bto-work-screen.css §5) — correct as shipped, not touched here. */ body.bto-static.bto-mph-f .bw-panel .bw-screen-top { border-bottom-color: rgba(19, 24, 27, .18); } body.bto-static.bto-mph-f .bw-panel .bw-screen-label { color: rgba(19, 24, 27, .7); } body.bto-static.bto-mph-f .bw-panel .bw-screen-count { color: rgba(19, 24, 27, .55); } body.bto-static.bto-mph-f .bw-panel .bw-empty { color: rgba(19, 24, 27, .6); } /* chips: OFF was pale-on-dark, becomes ink-on-amber. ON was an amber tint that would now blend into its own background, so ON inverts to a solid ink pill — the one piece of "this is selected" contrast the row needs. */ body.bto-static.bto-mph-f .bw-panel .bw-chip { border-color: rgba(19, 24, 27, .28); color: rgba(19, 24, 27, .75); } body.bto-static.bto-mph-f .bw-panel .bw-chip:hover { border-color: rgba(19, 24, 27, .5); color: var(--bw-room); } body.bto-static.bto-mph-f .bw-panel .bw-chip--on { background: var(--bw-room); border-color: var(--bw-room); color: var(--bw-amber); } /* tiles are untouched — they sit on their own photo + dark scrim (bto-work-screen.css §8), not on the panel field, so the pale tile-name/ tile-meta text this override would otherwise break is still on a dark background exactly as before. */ /* The one piece of founder-work that isn't part of the copied panel: a link back to the full work.html archive. `.bto-static__link` is ink-on-light by default (bto-static.css:174), which actually WORKS now the panel is flat amber — but it still gets its own rule because the panel's ink ISN'T the sitewide `--fg-ink` token (bto-work-screen.css §1's `--bw-room`, hardcoded on purpose so this section stays legible in both themes — see that file's own note on `--bw-navy` for why). */ body.bto-static.bto-mph-f .bw-panel .bw-see-more { margin-top: clamp(28px, 4vh, 40px); align-self: center; color: var(--bw-room); border-bottom-color: rgba(19, 24, 27, .35); } body.bto-static.bto-mph-f .bw-panel .bw-see-more:hover, body.bto-static.bto-mph-f .bw-panel .bw-see-more:focus-visible { border-bottom-color: var(--bw-room); } /* ========================================================================== §5 · NARROW ========================================================================== */ @media (max-width: 991px) { body.bto-static.bto-mph-f .bto-panel > .container, body.bto-static.bto-mph-f .bto-static__body { padding-inline: 40px; } body.bto-static.bto-mph-f .bto-panel.bto-static__sec, body.bto-static.bto-mph-f .bto-panel { padding-block: 64px; } body.bto-static.bto-mph-f .page-header-content.bto-panel { padding-block: 112px 64px; } body.bto-static.bto-mph-f .page-header-content .page-header__title { font-size: 38px; } body.bto-static.bto-mph-f .bto-panel .svc-sec-head { font-size: 34px; } body.bto-static.bto-mph-f .svc-step-name { font-size: 20px; line-height: 28px; } body.bto-static.bto-mph-f .bto-stat__amount { font-size: 30px; line-height: 34px; } } @media (max-width: 575px) { body.bto-static.bto-mph-f .bto-panel > .container, body.bto-static.bto-mph-f .bto-static__body { padding-inline: 24px; } body.bto-static.bto-mph-f .page-header-content .page-header__title { font-size: 30px; } body.bto-static.bto-mph-f .bto-panel .svc-sec-head { font-size: 27px; } } /* ========================================================================== §6 · ONTO THE SITE SCALE (2026-08-06, later the same day) ========================================================================== Founder: "go thru all our pages and do these changes and make everything look and position the same." §3 took MPH's FOUNDER-page numbers, which are a step down from their about page (h1 48 not 60, eyebrow 12 not 14). Faithful to them, but it left our own six pages disagreeing with each other — measured at 2560, h1 was 60 on About and Work and 48 here. Site consistency now outranks per-page fidelity to MPH, because that is the instruction. One scale everywhere: h1 60 · h2 48 · h3 30 · eyebrow 14/20 ls .32em · lead 16/32 · body 16/28 ⚠ These override §3 by load order, not specificity — identical selectors, later in the same file. §3 is left intact above so the MPH-founder numbers remain on record if the per-page reading is ever wanted back. */ body.bto-static.bto-mph-f .page-header-content .page-header__title { font-size: 60px; } body.bto-static.bto-mph-f .bto-panel .svc-sec-eyebrow, body.bto-static.bto-mph-f .bto-panel .bto-eyebrow { font-size: 14px; line-height: 20px; } /* 🔴 GAP FOUND 2026-08-09 (visual-consistency pass): §3 above set body support text to 14/24 — a deliberate page-level MPH port, per the note at the top of this file ("body support text runs 14/24, not 16/28"). But §6's own header promises "One scale everywhere: … body 16/28" and never actually overrides `.svc-sec-support` to deliver it — the block below stopped at h1 and eyebrow. Result: founder.html was the ONLY page on the site running this class off the locked ladder (about.html's equivalent, `.bto-support`, is correctly 16/28 — see bto-about-mph.css:189-195). Bringing it into line here. */ body.bto-static.bto-mph-f .bto-panel .svc-sec-support { font-size: 16px; line-height: 28px; } @media (max-width: 991px) { body.bto-static.bto-mph-f .page-header-content .page-header__title { font-size: 44px; } } @media (max-width: 575px) { body.bto-static.bto-mph-f .page-header-content .page-header__title { font-size: 34px; } } /* ========================================================================== §7 · FOUNDER-PERSPECTIVE — "WORLD" CARDS — REBUILT 2026-08-09 ========================================================================== Replaces the §7 that shipped a few minutes earlier this same session (the services-style capability card, amber-flood on hover, video hidden until hover — kept in git history, not here). Ash's own words on that version: "looks off... the yellow solid." New reference: MPH's founder page, "Filmmaking World / Music World / Travel World" — real media ALWAYS visible on top of the card, no hover trick, a small tag row with an icon, a heading, a paragraph. Ours is not maroon (that's MPH's colour, not ours) — same shape, the site's own ink/amber. */ body.bto-static.bto-mph-f .sva-cards--founder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin-top: clamp(28px, 4vh, 40px); } @media (max-width: 900px) { body.bto-static.bto-mph-f .sva-cards--founder { grid-template-columns: 1fr; } } body.bto-static.bto-mph-f .sva-card--world { aspect-ratio: auto; border-radius: 16px; padding: 0; gap: 0; overflow: hidden; background: rgba(255, 255, 255, .045); border-color: rgba(240, 238, 235, .18); } /* this version keeps the shared `.sva-card::before` amber-flood dot — it's still a nice hover confirmation on a card that's otherwise just sitting there — but the flood no longer has to double as the thing that reveals the video, so the 6px lift (also shared) is fine to keep too. */ body.bto-static.bto-mph-f .sva-card--world .svw-media { position: relative; z-index: 1; aspect-ratio: 4 / 3; overflow: hidden; } body.bto-static.bto-mph-f .sva-card--world .svw-media video, body.bto-static.bto-mph-f .sva-card--world .svw-media img { display: block; width: 100%; height: 100%; object-fit: cover; } body.bto-static.bto-mph-f .sva-card--world .svw-body { position: relative; z-index: 1; padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 8px; } body.bto-static.bto-mph-f .sva-card--world .svw-tag { margin: 0; display: flex; align-items: center; gap: 8px; font-family: Antonio, Archivo, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bw-amber, #FFBF65); } body.bto-static.bto-mph-f .sva-card--world .svw-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--bw-amber, #FFBF65); } body.bto-static.bto-mph-f .sva-card--world .svw-name { margin: 0; font-family: Antonio, Archivo, sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.1; color: var(--bw-ink, #F0EEEB); } body.bto-static.bto-mph-f .sva-card--world .svw-desc { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(240, 238, 235, .78); } @media (prefers-reduced-motion: reduce) { body.bto-static.bto-mph-f .sva-card--world .svw-media video { display: none; } }