/* ========================================================================== videoeditor.agency — site stylesheet Hand-written. No framework, no preprocessor, no build step. What is in this file is what is served. Governed by: instructions.md §5 (binding design rules, zero-JS rules) 02-Decisions/SITE-MAP-v1.md §2 (nav) 02-Decisions/RULINGS.md (R16 Dhaka, R22 flat slugs, R04 pricing) THREAD-PLAN.md §5 T3 (this file is T3's, exclusively) ⚠️ THIS FILE WAS REBUILT ON A DARK PALETTE ON 2026-09-05. See §0. It no longer inherits Mango's light navy/orange system. Read §0 before changing a single token. ========================================================================== */ /* -------------------------------------------------------------------------- 0. THE RULING THIS FILE IMPLEMENTS, AND WHAT IT OVERRIDES Masud, 2026-09-05, verbatim: "MZ Media style" — chosen after being shown three costed options and the specific costs of this one: a white logo would be needed, the heading font is commercial, and the glow/motion that makes mzmedia.digital work cannot be built under the zero-JS ruling. ⚠️ THIS OVERRIDES instructions.md §3 RULING 3. Ruling 3 (2026-09-03) said: "Reuse Mango's design system — same tokens, same Roboto Slab 600 / Roboto pairing, same single radius, same navy-primary / orange-accent rule." The 2026-09-05 ruling replaces the palette, the type pairing and the radius value. Sources named, not silently reconciled: instructions.md §3 ruling 3 VERSUS Masud 2026-09-05. The later ruling governs. What SURVIVES from ruling 3 is the file's STRUCTURE: one radius token, one accent, one type pairing, the space scale, the container, the accessibility rules, and this commenting discipline. WHERE THE VALUES CAME FROM. Every hex below was READ FROM THE LIVE mzmedia.digital STYLESHEET on 2026-09-05, from its own CSS custom properties — not eyedropped from a screenshot and not remembered. --primary-black #090909 --primary-blue #273FB7 --secondary-black #111111 --all-border #ffffff0f --navy-s-border #31313c --navy-blue-gradient #181929 body 14px / 1.6, headings white, h1 72px, h2 52px control radius 3px, card radius 20-25px TWO DELIBERATE DEVIATIONS, LABELLED SO THEY CAN BE REVERSED: 1. BODY TEXT IS 16px, NOT 14px, and sits at 72% white rather than 60%. MZ Media sells to YC founders. VEA sells to coaches, business owners and marketers across a wider age range. 14px at 60% measures 7.34:1 — it passes AA, so this is a readability judgement, not a compliance fix. Revert both lines if the tighter look is wanted. 2. ONE RADIUS TOKEN, NOT TWO. MZ Media runs 3px on controls and 20-25px on cards. instructions.md §5 requires "one radius token" and that rule survived the palette change. 3px is used throughout, because it is the value on their interactive elements and it is the one a visitor actually touches. Softer cards would need a second token and Masud's ruling to break §5. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* --- Radius ------------------------------------------------------------ ⚠️ TWO TOKENS AS OF 2026-09-05. THIS DELIBERATELY BREAKS A BINDING RULE. RULED BY MASUD, 2026-09-05. He was shown three options with the cost of each stated, and selected: "Add a second radius token — site.css gets --radius (3px, buttons/inputs) plus --radius-card (20px, cards and panels), exactly MZ Media's own two-value system. This overrides instructions.md §5's 'one radius token' rule, which needs your word." WHAT IT OVERRIDES, NAMED RATHER THAN QUIETLY BROKEN: · instructions.md §5, page rules: "One radius token, one primary accent." · site.css §0 deviation 2, T3, 2026-09-05: chose 3px throughout and recorded that softer cards "would need a second token and Masud's ruling to break §5." Sources: instructions.md §5 versus Masud 2026-09-05. The later ruling governs. T3's deviation 2 is now superseded and should be read as history. ⚠️ WRITTEN BY T4, WHICH DOES NOT OWN THIS FILE. THREAD-PLAN.md §1 Rule 1 gives site.css to T3, exclusively. T4 crossed it on Masud's explicit instruction — the same exception T8 was given to import the copy doc. Recorded here so T3 finds it rather than discovering a token it did not write. → [[R32 — not yet in RULINGS.md. T1 registers it.]] WHY TWO AND NOT ONE SOFT TOKEN: mzmedia.digital runs 3px on the things a visitor clicks and 20–25px on the surfaces they read. Making the single token soft would have rounded the buttons too, which is not what that site does. Measured from its stylesheet by T3 on 2026-09-05. */ --radius: 3px; /* buttons, inputs, focus rings — anything clickable */ --radius-card: 20px; /* cards, panels, banners — anything you read */ /* --- Colour ------------------------------------------------------------ DARK BASE. The page is near-black; white carries the text; the blue is a FILL, never a text colour. Read the contrast block below before using it. */ --bg: #090909; /* page. MZ --primary-black */ --bg-raised: #111111; /* cards, panels. MZ --secondary-black */ --bg-tint: #181929; /* the one navy-tinted surface. MZ --navy-blue-gradient */ --ink: #FFFFFF; /* headings, and any text that must lead */ --ink-body: rgba(255,255,255,0.72); /* body copy. See §0 deviation 1 */ --ink-muted: rgba(255,255,255,0.50); /* captions, legal, metadata */ --rule: rgba(255,255,255,0.09); /* hairlines. MZ --all-border */ --rule-strong: #31313C; /* emphasised divider. MZ --navy-s-border */ --accent: #273FB7; /* MZ --primary-blue */ /* ⚠️ CONTRAST — MEASURED 2026-09-05, NOT A STYLE PREFERENCE. Against this page's #090909 background: white on bg 21.0:1 PASS AAA body white 72% on bg 10.3:1 PASS AAA muted white 50% on bg 5.3:1 PASS AA ACCENT #273FB7 ON bg 2.48:1 FAIL — fails even the 3:1 floor for non-text UI Against the accent itself: white on #273FB7 8.46:1 PASS AAA THE RULE THAT FOLLOWS, AND IT IS BINDING: ✅ The accent is a FILL. A blue button with a WHITE label is 8.46:1 and is correct. ❌ The accent is NEVER text on the dark background. Not a link, not a label, not a number, not a heading. ❌ The accent is NEVER a hairline border or a thin rule on the dark background. At 2.48:1 it is below the 3:1 floor for UI components, so it would not be reliably visible. This is stricter than the brief anticipated. The brief allowed a failing accent on "borders". On THIS background it fails so far below the floor that a border does not qualify. Measured, then ruled. */ /* --- The blue that IS legible as text ---------------------------------- The ban above is on the VALUE #273FB7, not on the hue. A lighter sibling clears AA comfortably, so the site is not forced to choose between "blue accents" and "readable". RE-MEASURED BY T3, 2026-09-06, independently of T4's figures: #7891FF on #090909 (page) ........... 6.92:1 PASS AA · AAA for large #7891FF on #111111 (raised card) .... 6.56:1 PASS AA same at 0.9 alpha over #090909 ...... 5.73:1 PASS AA ⚠️ T3 CHANGED T4's PROPOSED VALUE, AND SAYS SO RATHER THAN QUIETLY SWAPPING IT. Design-Patterns-v1.md §1 proposed `rgba(120,145,255,0.9)`. T3 ships the SOLID hex instead. Two reasons: 1. It is a full contrast step better — 6.92:1 against 5.73:1 — for no visual cost anyone can see. 2. An alpha colour composites differently on --bg than on --bg-raised, so its real contrast changes depending on which surface it lands on. A solid value measures once and stays true. T4's 5.73 vs 5.75 difference is rounding, not an error. USE FOR: step numbers, FAQ counters, eyebrow rules, hover borders. NEVER for body copy — that is --ink-body. */ --ink-accent: #7891FF; /* --- Glow -------------------------------------------------------------- Every "light flare" on mzmedia.digital is a hosted .webp — Glow Line Divider.webp, test glow.webp, Pricing Top BG.webp. These are the same shapes built as CSS gradients, so nothing is hosted, nothing is requested, and nothing breaks if a CDN goes away. ⚠️ These are DECORATION and never carry meaning. Every one of them sits behind content on a pointer-events:none pseudo-element. No text is ever placed on a glow and asked to be read against it. */ --glow-soft: rgba(39, 63, 183, 0.30); --glow-strong: rgba(39, 63, 183, 0.45); --glow-faint: rgba(39, 63, 183, 0.14); --glow-line: rgba(120, 145, 255, 0.55); --glow-edge: rgba(120, 145, 255, 0.45); /* hover borders on cards */ /* --- Type -------------------------------------------------------------- ⚠️ MZ Media's pairing is Sherika (headings) + InterDisplay (body). InterDisplay is Inter Display — Rasmus Andersson's Inter family, SIL Open Font License. Free. It is loaded below as "Inter" from Google Fonts. SHERIKA IS NOT SHIPPED AND CANNOT BE UNTIL IT IS LICENSED. It is served from mzmedia.digital as a self-hosted Sherika-Regular.otf. It is not a Google font. Using it requires buying a webfont licence, and this project does not have one. Until then Inter carries BOTH roles — which is honest, free, and still the closer half of their pairing. → [[R28 — SHERIKA LICENCE. Masud: buy a Sherika webfont licence, or name a free display face for headings? Until answered, headings are Inter.]] instructions.md §5 rule: nothing is loaded that renders nowhere. Inter is the only family in the and it is the only family used here. */ --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --weight-heading: 600; --weight-body: 400; --weight-bold: 600; /* Scale anchored on MZ's measured h1 72px / h2 52px, stepped down for the smaller sizes and clamped so it does not overflow a phone. */ --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.5rem; --step-3: clamp(2rem, 5vw, 3.25rem); --step-4: clamp(2.5rem, 7vw, 4.5rem); /* --- Space -------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4rem; --space-8: 7.5rem; /* MZ --section-padding 120px */ --measure: 68ch; /* ⚠️ WIDENED 2026-09-06, 72rem → 88rem. Masud, on a large display: "I think you are not using the whole screen size… on the left and right sides, there is empty space." He is right. 72rem is 1152px, which on a 1920px display leaves ~380px of dead margin each side. PARAGRAPHS DO NOT STRETCH WITH IT — `p` is still capped at --measure (68ch) in §2, because a 1400px line of body text is unreadable no matter how wide the screen is. What widens is the LAYOUT: grids, card rows and the section rules. ⚠️ T4 edited this file, which it does not own. Masud's instruction, same basis as R32. */ --container: 88rem; } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); color-scheme: dark; } /* Nothing on this site animates today. This is here so that stays true for users who ask for reduced motion once something eventually does. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; /* Lets a full-bleed strip break out of .container without creating a horizontal scrollbar. `clip` rather than `hidden` — hidden would make the body a scroll container and break any future position: sticky. */ overflow-x: clip; background: var(--bg); color: var(--ink-body); font-family: var(--font-body); font-weight: var(--weight-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Footer sits at the bottom on short pages. Flexbox, not JS. */ min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-3); text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); letter-spacing: -0.01em; } h4 { font-size: var(--step-1); letter-spacing: 0; } p { margin: 0 0 var(--space-3); max-width: var(--measure); } /* Links are WHITE and underlined — never the accent. At 2.48:1 the accent is unreadable as text on this background. The underline carries the affordance, which is also what makes it work for colour-blind readers. */ a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 2px; } /* Visible keyboard focus. Non-negotiable on a site with no JS to fall back on. ⚠️ The ring is WHITE, not the accent. On Mango's light palette the orange ring was the most visible thing in the palette; on #090909 the blue measures 2.48:1 and would be a nearly invisible focus indicator. White is 21:1. */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--radius); } /* The ONE radius token, applied to image containers as the rules require. */ img { max-width: 100%; height: auto; border-radius: var(--radius); } /* Screen-reader-only. Used for the footer heading, which the document outline needs but which must not compete with the page's single real

. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------------------------------------- 3. LAYOUT -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } .site-main { flex: 1 0 auto; padding-block: var(--space-7); } /* MZ Media runs 120px section padding. Halved below 48rem so a phone does not scroll through empty space. */ /* ⚠️ HALVED 2026-09-06. Masud, on seeing the page: "there is a huge gap between sections. Please minimize the pattern." THE ARITHMETIC NOBODY DID. --space-8 is 7.5rem, taken from MZ Media's measured 120px --section-padding. But that padding sits on BOTH sides of every section, so two adjacent sections put 7.5rem + 7.5rem = 15rem = 240px between their content. MZ Media's gap is 120px. We had exactly double it, and the original comment "MZ --section-padding 120px" is what made it look correct. --space-7 (4rem) on each side gives 8rem ≈ 128px between sections, which is the number the reference actually renders. ⚠️ WRITTEN BY T4, WHICH DOES NOT OWN THIS FILE. Rule 1 gives site.css to T3. Crossed on Masud's explicit instruction, same as R32. T3 may retune the value — but do not restore --space-8 here without also removing it from one side, or the 240px comes back. */ /* Tightened again 2026-09-06, second pass, on Masud's instruction. --space-6 (3rem) each side = 6rem / 96px between sections. Below MZ Media's measured 120px, deliberately. */ .section { padding-block: var(--space-4); } @media (min-width: 48rem) { .section { padding-block: var(--space-6); } } /* -------------------------------------------------------------------------- 3b. SCROLL REVEAL — CSS SCROLL-DRIVEN ANIMATION, NO JAVASCRIPT Masud, 2026-09-06: "could you please add some scrolling animation so that when we scroll, the bottom part comes out smoothly?" ⚠️ THIS LOOKS LIKE A BANNED FEATURE AND IS NOT. NAMED, NOT SLIPPED IN. instructions.md §5 lists "scroll-triggered reveals" among the banned items. That list sits under the heading "Zero JS by default", and every other entry on it — carousels, preloader gates, count-up counters, Load More, lightboxes — is banned because it REQUIRES JAVASCRIPT. Scroll reveals were on that list for the same reason: in 2024 the only way to build one was an IntersectionObserver. `animation-timeline: view()` is CSS. No script, no observer, no library, nothing to load, nothing that can fail at runtime. The ruling's PURPOSE — no JavaScript — is fully intact. Sources named: instructions.md §5 banned list versus Masud, 2026-09-06. The later instruction governs, and the reason the rule existed does not apply to this implementation. → [[R33 — T1 to register.]] ⚠️ WHAT THIS STILL DOES NOT DO. site.css §0 records that the glow-and-drift motion on mzmedia.digital "cannot be built under the zero-JS ruling", and that Masud was shown that cost. This does not reverse it. Theirs is JS-driven, continuous, and tied to scroll velocity. This is a one-shot fade-and-rise as each block enters the viewport. It is the honest zero-JS approximation, not the same thing. TWO GUARDS, AND BOTH MATTER: 1. @supports — in a browser without scroll-driven animation support, NONE of this applies and every section is simply visible. That is the correct failure: content-first. Firefox shipped this late, so this is not a hypothetical branch. 2. prefers-reduced-motion: no-preference — an EXPLICIT guard, because §2's global reduced-motion rule DOES NOT COVER THIS. That rule works by forcing animation-duration to 0.01ms, and a scroll-driven animation ignores duration entirely — its progress comes from scroll position, not from time. Without this guard, a user who asked for no motion would get it anyway. -------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .section, .cta-block, .hero__grid { animation: reveal-rise linear both; animation-timeline: view(); /* Runs while the block travels the first 55% of its entry into the viewport, so it has settled before the reader reaches it. Anything already on screen at load is past this range and renders at the end state — no flash, no empty first screen. */ animation-range: entry 0% entry 55%; } @keyframes reveal-rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } } } } /* -------------------------------------------------------------------------- 4. SKIP LINK -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 100; padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--bg); border-radius: var(--radius); text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 5. HEADER AND NAV Six top-level items, per 02-Decisions/SITE-MAP-v1.md §2: Services · For ▾ · Portfolio · Pricing · About · Contact NO PAGE EXISTS YET, so every item renders as unlinked muted text. instructions.md §5 requires that "every nav link resolves to a live page, no exceptions" — a link to a page that does not exist breaks that rule; unlinked text does not. Promote each to a real as its thread ships it. The "For" dropdown is deliberately NOT built. An empty menu is worse than no menu. It lands with T7 and its four child pages, on CSS :hover / :focus-within for desktop and native
for mobile. Single level only. A multi-level flyout is banned. ⚠️ URLS ARE FLAT — /coaches/, /content-creators/, /business-owners/, /marketers-and-agencies/. That is R22, ruled 2026-09-03. SITE-MAP-v1.md §1's table still says /for/… and IS STALE. -------------------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--rule); padding-block: var(--space-4); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); } /* ⚠️ The wordmark is TEXT, not the logo image, and that is deliberate. VEA's logo measures #1C2448 — a dark navy, read from the live logo.svg on 2026-09-05. On a #090909 page it is very nearly invisible. A white logo file does not exist yet. → [[R29 — WHITE LOGO. Masud: a white/reversed version of the VEA logo is required before any logo image can appear on a dark page. Until it exists the header is set in type.]] */ .wordmark { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--step-1); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); } .nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); } .nav a { text-decoration: none; color: var(--ink-body); } .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; } /* Sections that do not have a page yet. Muted, so the state reads as deliberate rather than as a broken link. */ .nav__pending { color: var(--ink-muted); cursor: default; } /* The Contact CTA. It is a .btn, so it inherits the fill and the motion from §6 — this only trims it to nav scale. */ .nav__cta { padding: var(--space-2) var(--space-3); font-size: var(--step--1); } /* --- The "For" dropdown -------------------------------------------------- */ /* ⚠️ BUILT 2026-09-06. ZERO JAVASCRIPT, AND IT HAS TO STAY THAT WAY. instructions.md §5 bans multi-level flyout mega-menus and off-canvas JS mobile nav. This is one level, opened by :hover and :focus-within, and on small screens it does not open at all — it is simply always visible. WHY :focus-within MATTERS AND IS NOT OPTIONAL. :hover alone builds a menu that a mouse can reach and a keyboard cannot. :focus-within opens the panel whenever focus lands anywhere inside the
  • , which is what happens when a visitor tabs to the "For" button. Delete it and the four audience pages become keyboard-unreachable from the header. */ .nav__has-menu { position: relative; } /* "For" is a real