/* --------------------------------------------------------------------------- McGlynn Personnel — design tokens + base layer Values are the rendered brand ("System B" in audit/05-design-system.md), not the abandoned Envato kit. Every hex here was measured off live. --------------------------------------------------------------------------- */ :root { /* brand ------------------------------------------------------------------ */ --mp-pink: #D02479; --mp-pink-dark: #A71D61; --mp-pink-deep: #4C0F2D; --mp-pink-light: #FFBAE2; --mp-pink-hot: #FF2A89; --mp-pink-mid: #F17AB5; --mp-blue: #253499; --mp-blue-dark: #0B1129; --mp-blue-deep: #090F26; --mp-blue-ui: #3146CB; /* header chrome + legacy buttons */ --mp-blue-ui-h: #3AA9EA; --mp-navy-panel: #11172D; --mp-steel: #6497B2; --mp-gold: #FFD166; /* ink -------------------------------------------------------------------- */ --mp-ink: #FFFFFF; --mp-ink-muted: #D7DBFF; /* on blue */ --mp-ink-muted-pink: #FFE5F0; /* on pink */ --mp-ink-body: #767676; /* on white. Live's #868686 is 3.6:1, below AA; #767676 is the nearest grey that passes (4.54:1) */ --mp-ink-heading: #292929; /* on white */ --mp-rule: #E8E8E8; /* surfaces --------------------------------------------------------------- */ --mp-surface-blue: radial-gradient(130% 160% at 70% 0%, var(--mp-blue) 0%, var(--mp-blue-dark) 65%, var(--mp-blue-deep) 100%); --mp-surface-pink: radial-gradient(130% 160% at 70% 0%, var(--mp-pink) 0%, var(--mp-pink-dark) 60%, var(--mp-pink-deep) 100%); --mp-glass: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); --mp-glass-strong: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); --mp-outline: rgba(255,255,255,.22); --mp-hairline: rgba(255,255,255,.15); --mp-scrim: rgba(0,0,0,.69); /* header main bar */ /* elevation -------------------------------------------------------------- */ --mp-sh-card: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 25px rgba(0,0,0,.30); --mp-sh-chip: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.28); --mp-sh-panel: 0 24px 60px rgba(14,22,53,.45); --mp-sh-btn: 0 6px 18px rgba(0,0,0,.35); --mp-sh-btn-h: 0 10px 24px rgba(0,0,0,.45); --mp-sh-bar: 0 0 10px 0 rgba(0,0,0,.5); /* type ------------------------------------------------------------------- */ --mp-font-display: "DM Serif Display", Georgia, "Times New Roman", serif; --mp-font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --mp-fs-hero: 52px; --mp-fs-hero-m: 36px; --mp-fs-section: 42px; --mp-fs-section-m: 30px; --mp-fs-h3: 26px; --mp-fs-card: 22px; --mp-fs-footer-h: 21px; --mp-fs-body: 16px; --mp-fs-body-sm: 14px; --mp-fs-eyebrow: 12px; --mp-lh-display: 1.12; --mp-lh-hero: 1.05; --mp-lh-body: 1.5; --mp-ls-eyebrow: .14em; --mp-ls-hero: .02em; /* layout ----------------------------------------------------------------- */ --mp-content: 1200px; --mp-wide: 1500px; --mp-gutter: 20px; --mp-section-y: 90px; --mp-gap: 24px; --mp-gap-lg: 36px; --mp-radius: 12px; --mp-radius-pill: 999px; --mp-header-h: 112px; --mp-header-h-m: 135px; } /* reset ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--mp-font-ui); font-size: var(--mp-fs-body); line-height: var(--mp-lh-body); color: var(--mp-ink-body); background: #fff; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--mp-font-display); font-weight: 400; line-height: var(--mp-lh-display); color: var(--mp-ink-heading); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } /* Superscripts must not grow the line box ("19th March", "5th Floor"): live's Hello Elementor reset does this, and without it those lines were 6px taller. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } /* An anchor with no href is not a link (live's editors wrap addresses in without one); it takes the surrounding text colour, as on live. */ a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--mp-pink-light); outline-offset: 2px; } .mp-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .mp-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--mp-blue); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--mp-radius) 0; } .mp-skip-link:focus { left: 0; } /* Full-bleed bolt-* sections. Live forced every hand-written section edge-to-edge from a Customizer Additional-CSS rule (wp_custom_css post 28): section[id^="bolt-"], div[id^="bolt-"] { width:100vw; margin-inline: calc(50% - 50vw) } The ported sections render directly inside a full-width
, so they are already edge-to-edge; this reproduces the rule verbatim so a nested instance cannot be constrained by a parent. Each block's own .*-inner wrapper holds the real content width. */ main#main { width: 100%; } /* Live's selector verbatim (section/div), plus the footer this theme renders as