/* ========================================================================== mangomedia.digital — site stylesheet Hand-written. No framework, no preprocessor, no build step. What is in this file is what is served. Governed by: instructions.md §3 (binding design rules) instructions.md §6 (QA checklist) SPEC-CANONICAL.md §1, §9 (brand colour, radius, type) DECISION-Framework.md v2 (plain HTML + CSS, zero JS) Three rules this file exists to hold: 1. ONE radius token, on buttons, cards and image containers alike. 2. Navy primary and dominant. Orange a ~10% signal accent. Nothing else. 3. Roboto Slab 600 headings + Roboto body. Inter appears nowhere. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* --- Radius ------------------------------------------------------------ ONE token. Change this single line and every corner on the site follows. Value: 5px, chosen from the small end as SPEC-CANONICAL §9 directs. §9 rules that the 8–16px recommendation in Design-System-Recommendations.md rests on a miscount: the true tally is 2 of 8, and BOTH of those two are theme demos rather than agencies. Excluding theme demos and the source flagged unreliable, the three RELIABLE competitors measure 0px, 5px and ~6–8px. 5px sits inside that real evidence. This is not a compromise between the two claimed ranges. The 8–16px range has zero market evidence behind it and was not weighed. */ --radius: 5px; /* --- Colour ------------------------------------------------------------ RULED — SPEC-CANONICAL §1, 2026-09-01. Hexes MEASURED from Masud's logo files, not estimated. NAVY IS PRIMARY AND DOMINANT. ORANGE IS A ~10% SIGNAL ACCENT. An earlier row in the spec had these inverted and was corrected — this file follows the corrected rows. Navy carries authority, orange carries action. Do not give orange surface area. BACKGROUND IS RULED WHITE. The "orange-on-dark is worth testing" note in §9 is CANCELLED, not deferred. Do not re-propose a dark site. */ --navy: #0D3C87; /* PRIMARY, dominant. 10.43:1 on white */ --blue: #1F58A8; /* secondary blue, live logo only. 6.95:1 on white */ --orange: #FF4F01; /* SIGNAL ACCENT ONLY, ~10% */ --bg: #FFFFFF; /* ruled white */ --ink: #0D3C87; /* §1: navy "is the text colour" */ /* ⚠️ ORANGE FAILS WCAG AA FOR TEXT — measured, SPEC-CANONICAL §1: orange on white 3.30:1 FAIL white on orange 3.30:1 FAIL orange on navy 3.16:1 FAIL Orange is permitted on fills, LARGE headings, icons, borders and rules. NEVER on body text, small text, or small button labels. A button may take an orange fill only if its label is large or bold. This is an accessibility floor, not a style preference. */ /* Neutrals — PROVISIONAL, and not mine to settle. SPEC-CANONICAL §1 refuses a third brand colour and rules that what the site needs instead is "a neutral grey ramp for text, borders and surfaces," with "exact neutral values a design-thread deliverable." These two are navy-tinted placeholders so the page renders. DESIGN owns the real ramp. Neutrals are not brand hues and do not count against the one-accent rule. */ --ink-muted: #5B6B8A; /* PROVISIONAL — DESIGN thread */ --rule: #D8E0EC; /* PROVISIONAL — DESIGN thread */ /* --- Type -------------------------------------------------------------- instructions.md §3: keep Roboto Slab 600 headings + Roboto body. "The gap is consistency of application, not font choice." Inter is dead weight and is NOT referenced anywhere in this file or in any page's . */ --font-heading: "Roboto Slab", Georgia, "Times New Roman", serif; --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --weight-heading: 600; /* Roboto Slab 600, per the rule */ --weight-body: 400; --weight-bold: 700; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.5rem; --step-3: 2rem; --step-4: 2.75rem; /* --- 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; --measure: 68ch; --container: 72rem; } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Nothing on the 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; background: var(--bg); color: var(--ink); 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); line-height: 1.15; 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); } p { margin: 0 0 var(--space-3); max-width: var(--measure); } a { color: inherit; 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. Orange is CORRECT here: a focus ring is a border, which is a permitted use under the contrast rule above, and it is the most visible thing in the palette against white. */ :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--radius); } /* The ONE radius token, applied to image containers as §3 requires. */ 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); } /* -------------------------------------------------------------------------- 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(--navy); color: var(--bg); border-radius: var(--radius); text-decoration: none; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* -------------------------------------------------------------------------- 5. HEADER AND NAV Five top-level items, per SPEC-CANONICAL §3: Services · Industries · Portfolio · About · Contact Only /contact/ exists today, so only /contact/ is a link. The other four render as plain unlinked text. instructions.md §3 requires that "every nav item resolves to a live page, no exceptions" — a link to a page that does not exist breaks that rule; unlinked text does not. The Services and Industries dropdowns are deliberately NOT built yet. An empty menu is worse than no menu. They land with their child pages, on CSS :hover / :focus-within for desktop and native
for mobile, single level only, per SPEC-CANONICAL §3. No JS. -------------------------------------------------------------------------- */ .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); } .wordmark { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--step-1); letter-spacing: -0.01em; text-decoration: none; color: var(--navy); } .nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .nav a { text-decoration: none; } .nav a:hover, .nav a[aria-current="page"] { 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; } /* -------------------------------------------------------------------------- 6. FOOTER -------------------------------------------------------------------------- */ .site-footer { flex-shrink: 0; border-top: 1px solid var(--rule); padding-block: var(--space-6); font-size: var(--step--1); } .contact-block { font-style: normal; } .contact-block dl { margin: 0; } .contact-block dt { color: var(--ink-muted); margin-top: var(--space-3); } .contact-block dd { margin: 0; } /* The ruled reply-time commitment. SPEC-CANONICAL §1 and §8: "We reply within one working day." Exact wording, Masud 2026-09-01. Large heading size, so it is one of the few places orange would be permitted — left in navy for now; that is DESIGN's call, not BUILD's. */ .reply-commitment { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--step-1); margin: var(--space-5) 0 0; max-width: none; } .legal { color: var(--ink-muted); margin: var(--space-5) 0 0; } /* -------------------------------------------------------------------------- 7. UNFILLED BRACKETS A [[bracket]] is a fact Masud has not supplied yet. Deliberately conspicuous, so one cannot reach production unnoticed. Delete this rule once no page contains a bracket. -------------------------------------------------------------------------- */ .todo { display: inline-block; background: #FFF3CD; border: 1px dashed #B8860B; border-radius: var(--radius); padding: 0.1em 0.45em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; color: #6B4E00; }