/* ============================================================
Boolin Tunes — main stylesheet
Phase 3 in progress: aesthetic layer applied top-down.
Currently styled: design tokens, body type, header + nav.
Still on scaffold: hero, cards, sections, footer.
============================================================ */
/* Reset-lite */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--bt-font-body);
font-weight: 400;
line-height: 1.5;
color: var(--bt-ink);
background: var(--bt-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; }
a:hover { text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .35em;
line-height: 1.2;
font-family: var(--bt-font-display);
font-weight: 600;
}
p { margin: 0 0 1em; }
/* ============================================================
DESIGN TOKENS
Phase 3 foundation — semantic hooks for the rest of the site
to style against. Keep hex values here, reference elsewhere.
============================================================ */
:root {
/* Type */
--bt-font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
--bt-font-display: 'Oswald', 'Nunito Sans', system-ui, -apple-system, sans-serif;
/* Colour — white paper with a forest-leaning ink and muted poster accents.
Base white retained from C. Accents adopt A's dustier tones and add two
new roles: warm terracotta for highlight moments, moss for deep green
surfaces or borders when we want an earthier feel than pure ink. */
--bt-ink: #1d2a22; /* deep forest-ink — carries a slight green undertone */
--bt-bg: #ffffff;
--bt-muted: #5e6b62; /* muted, slightly tinted to the forest */
--bt-line: #d8d0bf; /* warm cream-grey — slightly desaturated cream */
--bt-accent: #6E8A5E; /* sage — primary accent (active states, highlights) */
--bt-accent-warm: #C5C086; /* sand/khaki — warm secondary accent */
--bt-accent-dark: #3B4937; /* dark olive — deep secondary accent */
--bt-moss: #2B3D33; /* deep forest — section bgs / borders */
/* Section accent — overridden per-section via body class (see section
override block lower in this file). Default = teal. Sectional UI
like eyebrows, numerals, and per-content-type borders read from
this rather than --bt-accent directly, so they shift with the
chapter while universal UI (nav, hover, focus) stays teal. */
--bt-section-accent: var(--bt-accent);
/* Dark Mode Overrides */
--bt-dark-ink: #e2e8e4;
--bt-dark-bg: #121814;
--bt-dark-muted: #94a399;
--bt-dark-line: #2d3831;
--bt-dark-moss: #3a5a48;
/* Patterns */
--bt-pattern-halftone: rgba(0,0,0,0.08);
--bt-pattern-stripes: rgba(0,0,0,0.04);
/* Fixed Colours (for dark bands that don't flip) */
--bt-fixed-ink: #1D291C; /* deepest camo green — footer + review banner background, fixed across both light/dark modes */
/* Cinema Hero Overlays */
--bt-cinema-bg: rgba(29, 42, 34, 0.92);
--bt-cinema-mid: rgba(29, 42, 34, 0.5);
--bt-cinema-fade: rgba(29, 42, 34, 0.1);
/* Layout */
--bt-max: 1320px;
--bt-gutter: 1.5rem;
--bt-gap: 1.5rem;
/* Fixed Technical Colours */
--bt-white: #ffffff;
--bt-black: #000000;
/* Low-Alpha Overlays (Light on Dark) */
--bt-alpha-w-02: rgba(255, 255, 255, 0.02);
--bt-alpha-w-04: rgba(255, 255, 255, 0.04);
--bt-alpha-w-10: rgba(255, 255, 255, 0.1);
--bt-alpha-w-12: rgba(255, 255, 255, 0.12);
--bt-alpha-w-15: rgba(255, 255, 255, 0.15);
--bt-alpha-w-20: rgba(255, 255, 255, 0.2);
--bt-alpha-w-50: rgba(255, 255, 255, 0.5);
--bt-alpha-w-70: rgba(255, 255, 255, 0.7);
--bt-alpha-w-80: rgba(255, 255, 255, 0.8);
/* Low-Alpha Overlays (Dark on Light) */
--bt-alpha-b-02: rgba(0, 0, 0, 0.02);
--bt-alpha-b-10: rgba(0, 0, 0, 0.1);
--bt-alpha-b-15: rgba(0, 0, 0, 0.15);
--bt-alpha-b-45: rgba(0, 0, 0, 0.45);
--bt-alpha-b-75: rgba(0, 0, 0, 0.75);
/* Semantic Shadows & Effects */
--bt-sh-ink: rgba(29, 42, 34, 0.18);
--bt-sh-maroon: rgba(59, 73, 55, 0.45);
--bt-sh-maroon-low: rgba(59, 73, 55, 0.15);
--bt-sh-warm: rgba(197, 192, 134, 0.35);
--bt-sh-teal: rgba(110, 138, 94, 0.18);
}
@media (prefers-color-scheme: dark) {
:root:not(.is-light) {
--bt-ink: var(--bt-dark-ink);
--bt-bg: var(--bt-dark-bg);
--bt-muted: var(--bt-dark-muted);
--bt-line: var(--bt-dark-line);
--bt-moss: var(--bt-dark-moss);
--bt-pattern-halftone: rgba(255,255,255,0.08);
--bt-pattern-stripes: rgba(255,255,255,0.04);
--bt-cinema-bg: rgba(18, 24, 20, 0.95);
--bt-cinema-mid: rgba(18, 24, 20, 0.6);
--bt-cinema-fade: rgba(18, 24, 20, 0.2);
/* Technical Overrides */
--bt-white: #e2e8e4;
--bt-black: #090c0a;
--bt-sh-ink: rgba(0, 0, 0, 0.4);
--bt-sh-maroon: rgba(0, 0, 0, 0.5);
--bt-color-scaffold: #1a221d;
}
}
/* ============================================================
SECTION ACCENT MAP
Each content type owns one of the four palette colours. The
accent token --bt-section-accent gets reassigned by body class
so any rule consuming it (eyebrows, numerals, FFO borders, etc)
shifts colour at the section level — single source of truth.
Mapping:
Reviews → teal (default, no override)
Calendar → teal (default, no override)
News → terracotta
Interviews → maroon
Galleries → terracotta
Roundups → moss (matched on tag-releases-roundup, not category)
Body class names come from WP's body_class() — `category-{slug}`
for category archives and single posts in that primary category,
`tag-{slug}` for tag archives and tag-tagged single posts. The
YMHM roundup template is triggered by the releases-roundup tag,
so we key on that.
============================================================ */
body.category-news,
body.category-galleries {
--bt-section-accent: var(--bt-accent-warm);
}
body.category-interviews {
--bt-section-accent: var(--bt-accent-dark);
}
body.tag-releases-roundup {
--bt-section-accent: var(--bt-moss);
}
:root.is-dark {
--bt-ink: var(--bt-dark-ink);
--bt-bg: var(--bt-dark-bg);
--bt-muted: var(--bt-dark-muted);
--bt-line: var(--bt-dark-line);
--bt-moss: var(--bt-dark-moss);
--bt-pattern-halftone: rgba(255,255,255,0.08);
--bt-pattern-stripes: rgba(255,255,255,0.04);
--bt-cinema-bg: rgba(18, 24, 20, 0.95);
--bt-cinema-mid: rgba(18, 24, 20, 0.6);
--bt-cinema-fade: rgba(18, 24, 20, 0.2);
/* Technical Overrides */
--bt-white: #e2e8e4;
--bt-black: #090c0a;
--bt-sh-ink: rgba(0, 0, 0, 0.4);
--bt-sh-maroon: rgba(0, 0, 0, 0.5);
--bt-color-scaffold: #1a221d;
}
.bt-container {
max-width: var(--bt-max);
margin: 0 auto;
padding: 0 var(--bt-gutter);
}
/* Skip link */
.screen-reader-text {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal;
}
.skip-link:focus {
position: static;
clip: auto;
display: inline-block;
padding: .5rem 1rem;
background: var(--bt-ink);
color: var(--bt-bg);
}
/* ============================================================
HEADER — masthead + primary nav
============================================================ */
.bt-header {
border-bottom: 1px solid var(--bt-ink);
padding: 1.25rem 0;
background: var(--bt-bg);
}
.bt-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
/* Brand — treated as a masthead: heavier weight, tightened tracking.
Deliberately uses the BODY font (Nunito) not the display font (Oswald) —
the masthead is a wordmark; Oswald is reserved for section headers and
card titles where its condensed personality earns its place. */
.bt-header__brand { flex-shrink: 0; }
.bt-header__logo-link {
display: block;
text-decoration: none;
line-height: 0;
}
.bt-header__logo {
height: 72px;
width: auto;
max-width: 100%;
}
.bt-header__logo--light { display: block; }
.bt-header__logo--dark { display: none; }
:root.is-dark .bt-header__logo--light { display: none; }
:root.is-dark .bt-header__logo--dark { display: block; }
/* When system is dark and no class override exists */
@media (prefers-color-scheme: dark) {
:root:not(.is-light) .bt-header__logo--light { display: none; }
:root:not(.is-light) .bt-header__logo--dark { display: block; }
}
/* Defensive cap on WP's Customise → Site Identity → Logo output.
The theme uses .bt-header__logo for its own SVG/branding, but if
anyone ever re-uploads a logo via Customise → Site Identity, WP
renders ![]()
at intrinsic dimensions inside
.bt-header__brand, which overflows the header (caused a bug during
the prod migration). This rule ensures any future custom-logo image
stays inside the masthead's vertical band regardless of upload size. */
.bt-header__brand .custom-logo {
height: 72px;
width: auto;
max-width: 100%;
display: block;
}
/* Primary nav links */
.bt-nav__list {
display: flex;
gap: 0; /* spacing comes from the pipe separators */
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.bt-nav__list li {
display: flex;
align-items: center;
}
/* Pipe separator between items — editorial rhythm. */
.bt-nav__list li + li::before {
content: "|";
color: var(--bt-line);
font-weight: 300;
margin: 0 1.1rem;
}
.bt-nav__list a {
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.005em;
color: var(--bt-ink);
text-decoration: none;
padding: 0.25rem 0;
display: inline-block;
position: relative;
white-space: nowrap;
}
.bt-nav__list a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.25rem;
height: 2px;
background: var(--bt-line);
transform: scaleX(0);
transition: transform 0.2s ease;
}
.bt-nav__list a:hover::after {
transform: scaleX(1);
}
/* When an item is already in the current/active state, the underline
is persistent. */
.bt-nav__list .current-menu-item > a::after,
.bt-nav__list .current-menu-parent > a::after,
.bt-nav__list .current-menu-ancestor > a::after,
.bt-nav__list .current_page_item > a::after,
.bt-nav__list .current-post-parent > a::after,
.bt-nav__list .current-post-ancestor > a::after {
transform: scaleX(1);
background: var(--bt-accent);
}
/* Right-side actions: social icons + compact search */
.bt-header__actions {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
/* Social icon links */
.bt-header__social {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.bt-header__social a {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bt-ink);
text-decoration: none;
padding: 0.25rem;
transition: color 0.15s;
}
.bt-header__social a:hover { color: var(--bt-accent); }
/* Theme Toggle — simple icon switch */
.bt-theme-toggle {
background: none;
border: none;
padding: 0.4rem;
color: var(--bt-ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s, transform 0.2s;
border-radius: 50%;
}
.bt-theme-toggle:hover {
color: var(--bt-accent);
background: var(--bt-alpha-b-02);
}
.bt-theme-toggle svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Show/hide icons based on theme state */
.bt-theme-toggle__sun { display: none; }
.bt-theme-toggle__moon { display: block; }
:root.is-dark .bt-theme-toggle__sun { display: block; }
:root.is-dark .bt-theme-toggle__moon { display: none; }
/* When system is dark and no class override exists */
@media (prefers-color-scheme: dark) {
:root:not(.is-light) .bt-theme-toggle__sun { display: block; }
:root:not(.is-light) .bt-theme-toggle__moon { display: none; }
}
/* Compact search in the header — underline-only, editorial.
Default .bt-searchform styling (used on 404/search pages) is defined below;
these overrides scope it to the header context. */
.bt-header__search .bt-searchform {
display: flex;
align-items: center;
border: none;
border-bottom: 1px solid var(--bt-line);
width: 200px;
transition: border-color 0.15s;
}
.bt-header__search .bt-searchform:focus-within {
border-bottom-color: var(--bt-ink);
}
.bt-header__search .bt-searchform__input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
padding: 0.4rem 0;
font: inherit;
font-size: 0.875rem;
color: var(--bt-ink);
outline: none;
}
.bt-header__search .bt-searchform__input::placeholder { color: var(--bt-muted); }
.bt-header__search .bt-searchform__submit {
background: none;
border: none;
padding: 0 0 0 0.5rem;
color: var(--bt-ink);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s;
}
.bt-header__search .bt-searchform__submit:hover { color: var(--bt-accent); }
/* Default search form (search.php, 404.php) — lightly styled, not scoped to header */
.bt-searchform {
display: flex;
align-items: stretch;
border: 1px solid var(--bt-line);
max-width: 420px;
}
.bt-searchform__input {
flex: 1;
min-width: 0;
border: none;
background: transparent;
padding: 0.6rem 0.75rem;
font: inherit;
outline: none;
}
.bt-searchform__submit {
background: none;
border: none;
border-left: 1px solid var(--bt-line);
padding: 0 0.9rem;
display: inline-flex;
align-items: center;
color: var(--bt-ink);
}
.bt-searchform__submit:hover { color: var(--bt-accent); }
/* Burger button — hidden on desktop, visible on mobile */
.bt-header__burger {
display: none;
background: none;
border: none;
padding: .5rem;
cursor: pointer;
width: 56px;
height: 56px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
}
.bt-header__burger-bar {
display: block;
width: 28px;
height: 3px;
background: var(--bt-ink);
transition: transform .2s, opacity .2s;
}
/* When open, bars form an X */
.bt-header__burger[aria-expanded="true"] .bt-header__burger-bar:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.bt-header__burger[aria-expanded="true"] .bt-header__burger-bar:nth-child(2) {
opacity: 0;
}
.bt-header__burger[aria-expanded="true"] .bt-header__burger-bar:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
.bt-header__burger-bar { transition: none; }
}
/* Mobile: hide nav by default, reveal as a panel when burger is open.
Theme toggle stays visible in the header — without it, mobile users
have no way to switch dark/light. The other actions (socials and
search) collapse since they're accessible from the footer / via the
nav menu respectively. */
@media (max-width: 900px) {
.bt-header__burger {
display: flex;
/* Push burger to the right edge — flex order overrides DOM
position so we keep the toggle left of nav for source-order
accessibility while putting the burger visually on the right. */
order: 3;
margin-left: auto;
}
.bt-header__actions {
display: flex;
gap: 0.25rem;
order: 2;
}
.bt-header__actions .bt-header__social,
.bt-header__actions .bt-header__search,
.bt-header__actions .bt-theme-toggle { display: none; }
.bt-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bt-bg);
border-bottom: 1px solid var(--bt-line);
padding: 1rem var(--bt-gutter);
z-index: 50;
}
.bt-nav.is-open { display: block; }
.bt-nav__list {
flex-direction: column;
gap: .75rem;
}
.bt-nav__list li + li::before { display: none; }
.bt-header { position: relative; }
}
/* Section spacing — no bottom border; section-header acts as divider */
.bt-section {
padding: 1.5rem 0;
position: relative; /* anchor for any pseudo-element decorations */
isolation: isolate; /* contains pseudo-element z-index within this section */
border-bottom: 1px solid var(--bt-line);
}
/* The dark "Our picks" section has its own band styling (background +
pseudo-element rules), no extra divider needed. */
.bt-section--dark { border-bottom: none; }
/* The hero is the first section — no top, no bottom; the next section
provides its own top edge via the previous section's bottom. */
.bt-section--hero { border-bottom: none; }
/* Hero gets slightly less bottom padding so the feed starts tighter */
.bt-section--hero {
padding-top: 1.25rem;
padding-bottom: 1rem;
}
.bt-section-header {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.bt-section-header__title {
margin: 0;
font-family: var(--bt-font-display);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
flex-shrink: 0;
color: var(--bt-ink);
/* Subtle letterpress shadow — same vocabulary as review score
and YMHM numerals. Reads as printed-on-paper, not bug. */
text-shadow: 1px 1px 0 var(--bt-sh-warm);
}
/* .bt-section-header__rule removed — rule element is no longer rendered
in the DOM after Firefox rendering issues at desktop widths. To restore:
(1) re-add the