/* ============================================================ * Mike Breen Band — brand.css * v1.0 · 2026 * * Drop this file at the root of the site (or import it from * your global stylesheet) and use var(--*) tokens everywhere. * The design system is intentionally tight: three colours, * three faces, one rule. Do not invent new tokens. * * * * Companion files: * brand.md — full written brand spec * Mike Breen Band - Brand Guide.html — visual reference * ============================================================ */ /* ------------------------------------------------------------ * 1 · FONTS * Google Fonts only — no licensed faces, no self-hosted. * Saira Stencil One · display + wordmark + section heads * Space Grotesk · UI + body + nav + buttons * Instrument Serif · the italic "with taste" moment only * JetBrains Mono · code, technical labels, micro spec * ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Saira+Stencil+One&family=Space+Grotesk:wght@300..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---------------------------------------------------------- * 2 · COLOUR — THREE TOKENS, FULL STOP * * The rule: one neon element per surface. Anything more and it * stops being shock. The neon is reserved for the surname, * a single CTA, a single accent line, or a single tile in a feed. * ---------------------------------------------------------- */ --ink: #0A0814; /* default ground · backgrounds · body text on cream */ --ink-2: #1A1426; /* one step lighter · panels-on-ink · hover wash */ --ink-3: #261F36; /* card surface on ink ground */ --neon: #FF1A8A; /* the surname · one CTA · one accent · once per surface */ --neon-hi: #FF54A8; /* hover state for neon CTAs only */ --cream: #F8F3E8; /* letterforms on ink · paper stock */ --cream-2: #ECE2D2; /* secondary paper · cards on cream */ --bone: #E6DDCB; /* tertiary paper · sub-panels */ /* Functional aliases (use these everywhere — never the raw colour names) */ --bg: var(--ink); /* default page background */ --bg-elevated: var(--ink-2); /* navbar, modal, dropdown */ --bg-card: var(--ink-3); /* card on ink */ --bg-inverse: var(--cream); /* paper sections */ --fg: var(--cream); /* default text on ink */ --fg-muted: rgba(248, 243, 232, 0.65); --fg-subtle: rgba(248, 243, 232, 0.40); --fg-inverse: var(--ink); /* text on cream */ --fg-inverse-muted: rgba(10, 8, 20, 0.65); --accent: var(--neon); --accent-hover: var(--neon-hi); --rule: rgba(248, 243, 232, 0.18); /* hairline on ink */ --rule-inverse: rgba(10, 8, 20, 0.12); /* hairline on cream */ /* Glow — only on backgrounds darker than --cream-2. Reserved for neon stencil letterforms, neon dates, the bar under the MBB drum mark. */ --neon-glow: 0 0 1px var(--neon), 0 0 8px rgb(255 26 138 / 0.50), 0 0 22px rgb(255 26 138 / 0.30), 0 0 44px rgb(255 26 138 / 0.18); /* Spray-edge halo for stencil letters on ink — sells the wheatpaste feel without making the letters look bloated. Optional. */ --spray-halo: 0 0 1px rgb(248 243 232 / 0.5), 0 0 6px rgb(248 243 232 / 0.18), 0 0 14px rgb(248 243 232 / 0.08); /* ---------------------------------------------------------- * 3 · TYPOGRAPHY * * Three faces. Strict assignments. Do not mix. * --font-stencil · Saira Stencil One · headlines, wordmarks * --font-sans · Space Grotesk · UI, body, nav, buttons * --font-serif · Instrument Serif · italic "with taste" only * --font-mono · JetBrains Mono · code, micro spec, metadata * ---------------------------------------------------------- */ --font-stencil: "Saira Stencil One", "Stencil Std", "Arial Black", sans-serif; --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino", "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — mobile-first; bump --fs-display + --fs-h1 on >=900px in a media query below. Values are rem so users can scale. */ --fs-micro: 0.6875rem; /* 11px · ALL CAPS labels, eyebrow, metadata */ --fs-caption: 0.8125rem; /* 13px · captions, footnotes */ --fs-body: 1rem; /* 16px · default body */ --fs-lede: 1.25rem; /* 20px · intro paragraph */ --fs-h3: 1.5rem; /* 24px */ --fs-h2: 2rem; /* 32px · sub-section heads in sans */ --fs-h1: 2.75rem; /* 44px · section heads, often stencil */ --fs-display: 4.5rem; /* 72px · hero stencil wordmark, small screens */ --fs-hero: 8rem; /* 128px · the MIKE / BREEN / BAND stack */ /* Line heights */ --lh-tight: 0.92; /* stencil display */ --lh-snug: 1.1; /* h2/h3 */ --lh-body: 1.55; /* body */ --lh-loose: 1.7; /* long-form on cream */ /* Letter spacing */ --tracking-stencil: 0.01em; --tracking-eyebrow: 0.22em; /* ALL CAPS micro labels */ --tracking-allcaps: 0.18em; /* less aggressive caps */ --tracking-body: -0.005em; /* slight tightening, modern feel */ --tracking-headline: -0.02em; /* h1/h2 set in sans */ /* ---------------------------------------------------------- * 4 · SPACING — 8pt scale * ---------------------------------------------------------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* ---------------------------------------------------------- * 5 · LAYOUT * ---------------------------------------------------------- */ --container: 1200px; /* hard max width for content */ --container-text: 720px; /* readable text column */ --measure: 62ch; /* long-form reading column */ --gutter: 24px; --gutter-lg: 48px; /* radii — kept tight on purpose; this is a stencil brand, not a rounded one */ --radius-0: 0; --radius-1: 2px; /* default — buttons, cards */ --radius-2: 4px; --radius-pill: 999px; /* status dots, filter chips, never buttons */ /* ---------------------------------------------------------- * 6 · BORDERS / SHADOWS * Shadows are very low — this brand sits flat. The drama is * in the type, not the elevation. * ---------------------------------------------------------- */ --border-1: 1px solid var(--rule); --border-1-inverse: 1px solid var(--rule-inverse); --border-neon: 1px solid var(--neon); --border-neon-2: 2px solid var(--neon); --shadow-0: none; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.10); --shadow-2: 0 4px 16px rgb(0 0 0 / 0.18); --shadow-3: 0 12px 40px rgb(0 0 0 / 0.35); /* ---------------------------------------------------------- * 7 · MOTION * Standard easing only. No bounces, no springs. * ---------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-xs: 100ms; /* hover micro */ --dur-sm: 180ms; /* default UI */ --dur-md: 260ms; /* page chrome */ --dur-lg: 420ms; /* rare, large reveals */ } /* ------------------------------------------------------------ * Responsive type bumps * ------------------------------------------------------------ */ @media (min-width: 900px) { :root { --fs-h1: 3.5rem; /* 56px */ --fs-display: 6rem; /* 96px */ --fs-hero: 10rem; /* 160px */ } } @media (min-width: 1400px) { :root { --fs-hero: 12rem; /* 192px */ } } /* ------------------------------------------------------------ * 8 · BASE RESET + DEFAULTS * ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tracking-body); font-weight: 400; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } a { color: var(--neon); text-decoration: none; transition: color var(--dur-xs) var(--ease); } a:hover { color: var(--neon-hi); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ * 9 · TYPOGRAPHY UTILITIES * Use these classes (or copy the rules) — do not redefine. * ------------------------------------------------------------ */ /* Stencil wordmark — never set below 24px. */ .mbb-stencil { font-family: var(--font-stencil); letter-spacing: var(--tracking-stencil); line-height: var(--lh-tight); font-weight: 400; } /* Hero stack — the MIKE / BREEN / BAND lockup. Centre it. */ .mbb-hero { font-family: var(--font-stencil); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tracking-stencil); text-align: center; } .mbb-hero .mbb-surname { /* the BREEN line */ color: var(--neon); text-shadow: var(--neon-glow); } /* Section heads — pick stencil OR sans, never both in one page. */ .mbb-h1 { font-family: var(--font-stencil); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-stencil); font-weight: 400; } .mbb-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-headline); font-weight: 600; } .mbb-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-headline); font-weight: 600; } /* Eyebrow — ALL CAPS, wide-tracked, sits above headings. */ .mbb-eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 500; color: var(--fg-muted); } .mbb-eyebrow--neon { color: var(--neon); opacity: 1; } /* Italic "with taste" — only place Instrument Serif appears. Pair it with stencil "VOLUME" for the tagline lockup. */ .mbb-tagline { display: inline-flex; align-items: baseline; gap: 0.5em; } .mbb-tagline__volume { font-family: var(--font-stencil); letter-spacing: var(--tracking-allcaps); } .mbb-tagline__with { font-family: var(--font-serif); font-style: italic; font-weight: 400; } /* Body lede — first paragraph after a heading. */ .mbb-lede { font-family: var(--font-sans); font-size: var(--fs-lede); line-height: var(--lh-body); max-width: var(--measure); font-weight: 400; } /* Caption / metadata */ .mbb-caption { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--fg-muted); } /* Micro spec — small all-caps mono labels, used in chrome */ .mbb-micro { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 500; color: var(--fg-subtle); } /* ------------------------------------------------------------ * 10 · COMPONENTS * ------------------------------------------------------------ */ /* Buttons — three variants only. .mbb-btn · primary, neon ground, ink text .mbb-btn--ghost · cream outline on ink .mbb-btn--link · text-only, underlined on hover */ .mbb-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 14px 22px; background: var(--neon); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; border: none; border-radius: var(--radius-1); cursor: pointer; transition: background var(--dur-xs) var(--ease), transform var(--dur-xs) var(--ease); text-decoration: none; } .mbb-btn:hover { background: var(--neon-hi); } .mbb-btn:active { transform: scale(0.985); } .mbb-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; } .mbb-btn--ghost { background: transparent; color: var(--cream); border: 1px solid var(--cream); } .mbb-btn--ghost:hover { background: var(--cream); color: var(--ink); } .mbb-btn--link { background: transparent; color: var(--neon); padding: 0; text-underline-offset: 4px; } .mbb-btn--link:hover { text-decoration: underline; color: var(--neon-hi); } /* Cards — flat. Hairline border on ink, hairline border on cream. */ .mbb-card { background: var(--bg-card); border: var(--border-1); padding: var(--s-6); border-radius: var(--radius-1); } .mbb-card--cream { background: var(--cream-2); border: var(--border-1-inverse); color: var(--ink); } /* Nav — sticky, 72px tall, hairline bottom rule on scroll. */ .mbb-nav { position: sticky; top: 0; z-index: 50; height: 72px; display: flex; align-items: center; padding: 0 var(--s-6); background: var(--ink); border-bottom: 1px solid transparent; transition: border-color var(--dur-sm) var(--ease); } .mbb-nav--scrolled { border-bottom-color: var(--rule); } .mbb-nav__brand { font-family: var(--font-stencil); font-size: 22px; letter-spacing: 0.02em; color: var(--cream); margin-right: auto; white-space: nowrap; } .mbb-nav__link { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--fg-muted); padding: 8px 12px; text-decoration: none; transition: color var(--dur-xs) var(--ease); } .mbb-nav__link:hover { color: var(--cream); } /* Form fields — minimal, hairline only. */ .mbb-input, .mbb-textarea, .mbb-select { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--rule); color: var(--cream); font-family: var(--font-sans); font-size: var(--fs-body); padding: 12px 0; outline: none; transition: border-color var(--dur-xs) var(--ease); } .mbb-input::placeholder { color: var(--fg-subtle); } .mbb-input:focus, .mbb-textarea:focus, .mbb-select:focus { border-bottom-color: var(--neon); } /* Hairline rule — section divider. */ .mbb-rule { height: 1px; background: var(--rule); border: none; margin: var(--s-7) 0; } .mbb-rule--inverse { background: var(--rule-inverse); } .mbb-rule--neon { background: var(--neon); height: 2px; } /* Badge / chip — for tags ("EDINBURGH", "ELECTRIC 4PC") */ .mbb-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 12px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; border: 1px solid var(--cream); color: var(--cream); border-radius: var(--radius-pill); } .mbb-chip--neon { border-color: var(--neon); color: var(--neon); } /* ------------------------------------------------------------ * 11 · ACCESSIBILITY * Focus rings are non-negotiable. Reduced motion is honoured. * ------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ------------------------------------------------------------ * 12 · PRINT * Hide nav, show URLs, switch to cream paper. * ------------------------------------------------------------ */ @media print { body { background: var(--cream); color: var(--ink); } .mbb-nav, .mbb-btn { display: none; } a::after { content: " (" attr(href) ")"; font-size: 0.8em; opacity: 0.6; } }