/* ============================================================================ JAKKALS VIBES — RETRO SCREENPRINT SKIN (css/retro.css) Scoped to . Re-skins the existing token-driven UI to the vintage-poster look: worn palette, Alfa Slab display, blocky sticker buttons, framed media, retro stripe + print grain. Loaded AFTER styles.css and design-system.css so its overrides win. Only pages that opt in (body.retro) change — everything else is untouched. ========================================================================== */ /* Acacia Gold typefaces: Bitter (display slab) + Source Sans 3 (body). */ @import url('https://fonts.googleapis.com/css2?family=Bitter:wght@500;700;900&family=Source+Sans+3:wght@400;600;700&display=swap'); /* Body copy → Source Sans 3 across the retro (now Bushveld) skin. */ body.retro, body.retro .ds-body, body.retro p, body.retro li, body.retro a, body.retro input, body.retro button, body.retro textarea { font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; } /* ── Palette: ACACIA GOLD — warm African Bushveld, light sand ground ─────────── Overrides BOTH token systems under the retro scope. Ground is dry-grass sand, text is dark bark, accents are sienna + acacia gold + bushveld grass. */ body.retro { /* design-system tokens */ --ds-bg: #F2E7D0; /* dry-grass sand ground */ --ds-surface: #EADBBE; /* raised sand card */ --ds-surface-2: #E0CFAC; /* deeper sand */ --ds-ink: #33281A; /* dark bark text */ --ds-muted: #6A5A3E; --ds-dim: #8A7654; --ds-red: #B4491F; /* burnt sienna accent */ --ds-red-bright:#C85A2A; --ds-red-deep: #8A3416; --ds-line: rgba(51,40,26,0.18); --ds-line-soft: rgba(51,40,26,0.09); /* legacy styles.css tokens (header, footer, cards) */ --bg: #F2E7D0; --surface: #EADBBE; --surface-2: #E0CFAC; --text: #33281A; --silver-1: #33281A; --silver-2: #6A5A3E; --silver-3: #8A7654; --muted: #6A5A3E; --accent-1: #B4491F; --accent-2: #B4491F; --brand-red: #B4491F; --grad: #B4491F; /* flatten any gradient to burnt sienna */ /* "paper" panels (discography, song pages, world, about, media) run on sand so their --ink text stays dark bark on light — clean, readable */ --paper: #F2E7D0; --paper-2: #EADBBE; --ink: #33281A; --ink-dim: #6A5A3E; --line-l: rgba(51,40,26,0.18); --poster-red: #B4491F; /* bushveld accents */ --rt-cream: #F2E7D0; /* light sand — used as light text on dark elements */ --rt-gold: #D6A63F; /* acacia gold */ --rt-orange: #C87A2E; --rt-teal: #7A7A4E; /* bushveld grass (replaces teal) */ --rt-ink: #33281A; /* dark bark keyline / shadow */ background-color: #F2E7D0; color: #33281A; } /* Full-bleed photo bands keep a dark ground with light sand text, so copy stays readable over the image and reads as an intentional contrast panel. */ body.retro .ds-live, body.retro .ds-live-hero { --ds-ink: #F4ECD9; --ds-muted: #E4D6B8; --ds-dim: #CBBB98; --ds-line: rgba(244,236,217,0.18); color: #F4ECD9; } /* ── Display type: chunky retro slab (headings only; body stays Barlow) ───── */ body.retro .ds-display, body.retro .ds-h2, body.retro .disco-catalogue-h2 { font-family: 'Bitter', Georgia, serif; font-weight: 900; letter-spacing: -0.01em; text-shadow: none; } body.retro .ds-h2 { text-shadow: none; } /* Catch remaining page headings (song pages, heroes) */ body.retro main h1, body.retro main h2, body.retro .ds-break-card__title { font-family: 'Bitter', Georgia, serif; font-weight: 900; letter-spacing: -0.01em; } /* Upright, not italic — the emphasised words in headings stay red but not slanted */ body.retro .ds-display em, body.retro .ds-h2 em, body.retro main h1 em, body.retro main h2 em, body.retro .ds-em { font-style: normal; font-weight: 400; } /* ── Utility / legal / help page heroes: one consistent compact scale ─────── Normalises the older hero patterns (Terms, Privacy, FAQ, Store, Contact) to a single Staatliches "utility hero" size so they match the newer marketing pages. */ body.retro .inner-page-hero h1, body.retro .page-hero h1, body.retro .ct-hero h1 { font-family: 'Bitter', Georgia, serif; font-weight: 400; letter-spacing: 0; font-size: clamp(40px, 6vw, 64px); line-height: 0.98; color: var(--ds-ink); } body.retro .inner-page-hero h1 em, body.retro .page-hero h1 em, body.retro .ct-hero h1 em { font-style: normal; color: var(--ds-red); } /* Section titles inside the legal/utility pages share the display font */ body.retro .section-title { font-family: 'Bitter', Georgia, serif; font-weight: 400; letter-spacing: 0; } /* ── Sticker buttons: hard keyline + offset shadow, square corners ────────── */ body.retro .ds-btn, body.retro .header-book-btn, body.retro .nav-book-btn { border-radius: 0; border: 2px solid var(--rt-ink); box-shadow: 4px 4px 0 var(--rt-ink); text-transform: uppercase; transition: transform .12s ease, box-shadow .12s ease, background .18s ease; } body.retro .ds-btn--primary, body.retro .header-book-btn, body.retro .nav-book-btn { background: var(--ds-red); color: #F4ECD6; } body.retro .ds-btn--ghost { background: var(--rt-cream); color: #14262C; } body.retro .ds-btn:hover, body.retro .header-book-btn:hover, body.retro .nav-book-btn:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--rt-ink); } body.retro .ds-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--rt-ink); } /* ── Top nav on the dark header bar: light links so they read clearly ─────── */ body.retro #main-nav ul li a, body.retro #mobile-nav ul li a { color: var(--rt-cream); font-weight: 700; } body.retro #main-nav ul li a:hover, body.retro #main-nav ul li a.active, body.retro #mobile-nav ul li a:hover, body.retro #mobile-nav ul li a.active { color: var(--rt-gold); background: transparent; } body.retro #main-nav ul li a.active::after { background: var(--rt-gold); } body.retro .social-icons a { color: var(--rt-cream); } body.retro .social-icons a:hover { color: var(--rt-gold); } /* ── Media as pasted prints: keyline frame + hard drop ────────────────────── */ body.retro .ds-media, body.retro .ds-live__inner .ds-media { border: 5px solid var(--rt-ink); box-shadow: 8px 9px 0 rgba(13,24,28,0.45); border-radius: 0; } /* Kicker gets a gold rule to echo the poster stripes */ body.retro .ds-kicker { color: var(--rt-gold); } body.retro .ds-kicker::before { background: var(--rt-orange); } /* ── Retro colour-stripe band under the header ────────────────────────────── */ body.retro #header-outer { position: relative; } body.retro #header-outer::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(90deg, var(--ds-red) 0 20%, var(--rt-orange) 20% 40%, var(--rt-gold) 40% 60%, var(--rt-teal) 60% 80%, var(--rt-cream) 80% 100%); } /* Press / media cards on the dark retro surface — readable text, brighter links */ body.retro .press-item .src, body.retro .press-item--featured .src { color: var(--ds-ink); } body.retro .press-item .desc { color: var(--ds-muted); } body.retro .press-item .desc a { color: var(--ds-red-bright) !important; border-bottom-color: rgba(224,83,63,0.5); } /* Active filter-tab count chip: cream on the red chip (was red-on-red) */ body.retro .filter-tab.active .ft-count { color: var(--rt-cream) !important; } /* ── Worn-print grain over the whole page (never blocks clicks) ────────────── */ body.retro::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Split hero: copy left, framed poster right (off-centre) ──────────────── */ body.retro .retro-hero { position: relative; overflow: hidden; padding: clamp(90px, 12vh, 150px) 0 clamp(56px, 8vh, 96px); background: url('../assets/og-image.jpg?v=2') center/cover no-repeat; } /* Sand veil: strong over the copy (left), lighter over the art (right), so dark text stays readable while the savanna scene still shows through. */ body.retro .retro-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(242,231,208,0.96) 0%, rgba(242,231,208,0.90) 38%, rgba(242,231,208,0.60) 70%, rgba(242,231,208,0.35) 100%); } body.retro .retro-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } /* Hero copy sits full width now the poster art is removed — keep it readable */ body.retro .retro-hero__copy { max-width: 720px; } /* On narrow screens the copy stacks over the image full-width, so veil evenly. */ @media (max-width: 720px) { body.retro .retro-hero::before { background: rgba(242,231,208,0.90); } } body.retro .retro-hero__title { font-family: 'Bitter', Georgia, serif; font-weight: 400; font-size: clamp(52px, 7.2vw, 104px); line-height: 0.92; margin: 14px 0 0; color: var(--ds-ink); text-shadow: none; letter-spacing: 0; } body.retro .retro-hero__title .rt-red { color: var(--ds-red); } /* Hero wordmark as the retro logo image (replaces the headline text) */ body.retro .retro-hero__logo { text-shadow: none; margin: 6px 0 0; } body.retro .retro-hero__logo img { display: block; width: 100%; max-width: 520px; height: auto; } body.retro .retro-hero__sub { margin: 26px 0 0; max-width: 44ch; font-size: 19px; line-height: 1.6; color: var(--ds-muted); } body.retro .retro-hero__stats { display: flex; gap: clamp(28px, 4vw, 48px); margin-top: clamp(36px, 5vh, 56px); } body.retro .retro-hero__stats > div { display: flex; flex-direction: column; } body.retro .retro-hero .rh-num { font-family: 'Bitter', Georgia, serif; font-weight: 900; font-size: clamp(28px, 3vw, 38px); line-height: 1; color: var(--ds-ink); } body.retro .retro-hero .rh-lbl { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ds-muted); margin-top: 6px; } /* framed poster — gold slab behind, dark keyline, hard drop, slight tilt */ body.retro .retro-hero__art { position: relative; justify-self: center; } body.retro .retro-hero__art::before { content: ""; position: absolute; inset: -16px; background: var(--rt-gold); transform: rotate(-2deg); border: 3px solid var(--rt-ink); } /* framed media box holds the fallback image + the interactive canvas */ body.retro .retro-hero__media { position: relative; display: block; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden; border: 6px solid var(--rt-ink); box-shadow: 12px 14px 0 rgba(13,24,28,0.5); } body.retro .retro-hero__media img, body.retro .retro-hero__media canvas { display: block; width: 100%; height: 100%; } body.retro .retro-hero__media canvas { position: absolute; inset: 0; } /* canvas hidden until the interaction component activates it */ body.retro .retro-hero__media canvas.is-active { } @media (max-width: 900px) { body.retro .retro-hero__grid { grid-template-columns: 1fr; } body.retro .retro-hero__art { order: -1; max-width: 400px; margin: 0 auto; } } /* Phones: shorter hero so the title + CTAs clear the first screen */ @media (max-width: 600px) { body.retro .retro-hero { padding: clamp(64px, 9vh, 96px) 0 clamp(36px, 5vh, 56px); } body.retro .retro-hero__grid { gap: 24px; } body.retro .retro-hero__art { max-width: 300px; } body.retro .retro-hero__title { font-size: clamp(44px, 12vw, 60px); } body.retro .retro-hero__sub { margin-top: 18px; font-size: 17px; } body.retro .retro-hero__stats { margin-top: 28px; gap: 22px; } } body.retro .ds-about-hero__bg { object-position: 100% center; } body.retro .ds-about-hero__veil { background: linear-gradient(90deg, rgba(20,38,44,0.97) 0%, rgba(20,38,44,0.92) 34%, rgba(20,38,44,0.5) 60%, rgba(20,38,44,0) 85%); } /* Container stays full-width so its left edge aligns with every other page; the text elements inside are capped so they clear the right-anchored jackal. */ body.retro .ds-about-hero .ds-display--mega { font-size: clamp(46px, 7vw, 88px); max-width: 12ch; } body.retro .ds-about-hero .ds-lead { max-width: 38ch; } @media (max-width: 760px) { /* Phones: jackal off-frame right; darken the whole banner for legibility */ body.retro .ds-about-hero__bg { object-position: 78% center; } body.retro .ds-about-hero__veil { background: linear-gradient(180deg, rgba(20,38,44,0.55) 0%, rgba(20,38,44,0.88) 100%); } } /* ── Legal / utility document pages: consistent, readable prose (review #6) ── */ body.retro .card.prose { max-width: 760px; margin-inline: auto; } body.retro .card.prose h3 { font-family: 'Bitter',Georgia,serif; font-weight: 400; letter-spacing: 0; margin-top: 2rem; } body.retro .card.prose h4 { margin-top: 1.4rem; } body.retro .card.prose p, body.retro .card.prose li { line-height: 1.7; } body.retro .card.prose ul { padding-left: 1.2em; } body.retro .card.prose li + li { margin-top: .4em; } /* Consistent "Last updated" chip (the first muted line on legal pages) */ body.retro .card.prose > .muted:first-of-type { display: inline-block; font-style: normal; font-size: 13px; letter-spacing: .02em; color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-line); padding: 4px 10px; border-radius: 2px; } /* Tables inside legal/utility prose */ body.retro .card.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } body.retro .card.prose th, body.retro .card.prose td { border: 1px solid var(--ds-line); padding: 10px 12px; text-align: left; } body.retro .card.prose th { background: var(--ds-surface); } /* ── Biography: harmonise legacy bio-* components with the new design language ─ Brings the bio hero, eyebrows and section headings in line with the ds-* pages so Biography reads as the same generation. Structure/content unchanged. */ body.retro .bio-eyebrow, body.retro .feature-kicker { color: var(--rt-gold) !important; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 700; } body.retro .feature-title, body.retro .timeline-title, body.retro .bio-intro-title { font-family: 'Bitter', Georgia, serif; font-weight: 400; letter-spacing: 0; } body.retro .bio-hero h1 { font-size: clamp(56px, 9vw, 104px); line-height: 0.92; } body.retro .timeline-milestone-badge { color: var(--rt-cream); } /* ── Contact & shared hero eyebrows / card titles: match the design language ── */ body.retro .ct-eyebrow, body.retro .ct-inbox-kicker, body.retro .ct-social-kicker, body.retro .page-hero-eyebrow { color: var(--rt-gold) !important; text-transform: uppercase; letter-spacing: .22em; font-weight: 700; } body.retro .ct-card-title { font-family: 'Bitter', Georgia, serif; font-weight: 400; letter-spacing: 0; } /* ── Homepage hero CTAs: equal width + spacing from the sub-copy ─────────────── */ body.retro .retro-hero .ds-hero__cta { margin-top: 30px; gap: 16px; } body.retro .retro-hero .ds-hero__cta .ds-btn { min-width: 240px; justify-content: center; text-align: center; } @media (max-width: 600px) { body.retro .retro-hero .ds-hero__cta { flex-direction: column; align-items: stretch; margin-top: 24px; } body.retro .retro-hero .ds-hero__cta .ds-btn { width: 100%; min-width: 0; justify-content: center; text-align: center; } } /* ── Album / feature covers: clean, no frame — blends into the sand theme. Just a soft warm shadow and gentle rounding so the artwork sits flat on the ground with no gold mat, no tilt, no hard keyline. */ body.retro .ds-breakthrough .ds-break-card .ds-media, body.retro .ds-music-hero__art, body.retro .ds-media--poster { position: relative; overflow: hidden !important; border: none !important; background: transparent !important; box-shadow: 0 14px 30px -16px rgba(51, 40, 26, 0.5) !important; border-radius: 8px !important; transform: none !important; } body.retro .ds-breakthrough .ds-break-card .ds-media > img, body.retro .ds-music-hero__art > img, body.retro .ds-media--poster > img { position: relative; z-index: 1; border: none !important; box-shadow: none !important; border-radius: 8px; } body.retro .ds-breakthrough .ds-break-card .ds-media::before, body.retro .ds-music-hero__art::before, body.retro .ds-media--poster::before, body.retro .ds-breakthrough .ds-break-card:nth-child(2) .ds-media::before { display: none !important; } /* ═══ Unified page-top: the five inner heroes share the homepage savanna bg ═══ Same og-image background + sand veil as body.retro .retro-hero, so the top of discography, live, store, about and contact matches the index. */ body.retro .ds-music-hero, body.retro .ds-live-hero, body.retro .page-hero, body.retro .ds-about-hero, body.retro .ct-hero { position: relative; overflow: hidden; background: url('../assets/og-image.jpg?v=2') center/cover no-repeat; padding: clamp(96px, 13vh, 150px) 0 clamp(40px, 6vh, 72px); } body.retro .ds-music-hero::before, body.retro .ds-live-hero::before, body.retro .page-hero::before, body.retro .ds-about-hero::before, body.retro .ct-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(242,231,208,0.96) 0%, rgba(242,231,208,0.90) 40%, rgba(242,231,208,0.62) 72%, rgba(242,231,208,0.38) 100%); } /* lift the text content above the veil */ body.retro .ds-music-hero__inner, body.retro .ds-live-hero__inner, body.retro .page-hero .world-container, body.retro .ds-about-hero__inner, body.retro .ct-hero-inner { position: relative; z-index: 1; } /* drop each hero's own photo / mascot so only the shared savanna shows */ body.retro .ds-live-hero__media, body.retro .ds-about-hero__bg, body.retro .ds-about-hero__veil, body.retro .page-hero .hero-mascot, body.retro .ct-hero .hero-mascot { display: none !important; } /* live hero: dark text on the sand veil like the others, left-aligned */ body.retro .ds-live-hero { --ds-ink:#33281A; --ds-muted:#6A5A3E; --ds-dim:#8A7654; color:#33281A; } body.retro .ds-live-hero__inner { text-align: left; } body.retro .ds-live-hero .ds-kicker { justify-content: flex-start; } /* consistent gold eyebrow / dark title across the six heroes */ body.retro .ds-music-hero .ds-kicker, body.retro .page-hero-eyebrow, body.retro .ct-eyebrow { color: var(--ds-red); } /* ═══════════════════════════════════════════════════════════════════════════ SEAMLESS PAGE TOPS — every hero renders identically to the homepage hero. Same background crop, same sand veil, same content start position, same heading scale, so moving page to page reads as the copy changing only. (Index keeps its wordmark image; the five inner pages share the H1 scale.) ═══════════════════════════════════════════════════════════════════════════ */ body.retro .retro-hero, body.retro .ds-music-hero, body.retro .ds-live-hero, body.retro .page-hero, body.retro .ds-about-hero, body.retro .ct-hero { position: relative; overflow: hidden; min-height: clamp(460px, 62vh, 640px); display: flex; align-items: flex-start; background: url('../assets/og-image.jpg?v=2') center 20% / cover no-repeat !important; padding: clamp(84px,10vh,120px) 0 clamp(48px,7vh,80px) !important; border-bottom: none !important; } body.retro .retro-hero::before, body.retro .ds-music-hero::before, body.retro .ds-live-hero::before, body.retro .page-hero::before, body.retro .ds-about-hero::before, body.retro .ct-hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important; transform:none !important; background: linear-gradient(90deg, rgba(242,231,208,0.97) 0%, rgba(242,231,208,0.93) 48%, rgba(242,231,208,0.74) 80%, rgba(242,231,208,0.52) 100%); } /* drop the old decorative accent line on the contact hero */ body.retro .ct-hero::after { display: none !important; } /* one shared content wrapper: identical width, padding, left-aligned, single column */ body.retro .retro-hero__grid, body.retro .ds-music-hero__inner, body.retro .ds-live-hero__inner, body.retro .page-hero .world-container, body.retro .ds-about-hero__inner, body.retro .ct-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--ds-maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); display: block !important; text-align: left !important; grid-template-columns: 1fr !important; } /* keep text to a comfortable measure */ body.retro .retro-hero__copy, body.retro .ds-music-hero__text, body.retro .ds-live-hero__inner > *, body.retro .ds-about-hero__inner > *, body.retro .ct-hero-inner > * { max-width: 760px; } /* kickers + leads align left (some were centred) */ body.retro .ds-live-hero__inner .ds-kicker, body.retro .ds-music-hero .ds-kicker, body.retro .ds-about-hero .ds-kicker { justify-content: flex-start !important; margin-inline: 0 !important; text-align: left; } body.retro .ds-live-hero .ds-lead, body.retro .ds-about-hero .ds-lead { margin-inline: 0 !important; max-width: 46ch; color: var(--ds-muted); } /* drop every foreground hero element so only the shared background shows */ body.retro .ds-music-hero__art, body.retro .ds-live-hero__media, body.retro .ds-about-hero__bg, body.retro .ds-about-hero__veil, body.retro .page-hero .hero-mascot, body.retro .ct-hero .hero-mascot, body.retro .ct-hero-quick { display: none !important; } /* ONE heading scale + style for all five inner heroes */ body.retro .ds-music-hero h1.ds-display, body.retro .ds-live-hero h1.ds-display, body.retro .ds-about-hero h1.ds-display, body.retro .page-hero h1, body.retro .ct-hero h1 { font-family: 'Bitter', Georgia, serif !important; font-weight: 900 !important; font-size: clamp(44px, 6.2vw, 84px) !important; line-height: 0.96 !important; letter-spacing: -0.01em !important; color: var(--ds-ink) !important; margin: 0 0 var(--ds-s4) !important; } body.retro .ds-music-hero h1 em, body.retro .ds-live-hero h1 em, body.retro .ds-about-hero h1 em, body.retro .page-hero h1 em, body.retro .ct-hero h1 em { color: var(--ds-red) !important; font-style: normal; } /* ── Dark wordmark logo inside inner-page hero headings (Live, About) ──────── */ body.retro .ds-live-hero__logo, body.retro .ds-hero-logo-img { display: block; width: min(100%, 460px); height: auto; margin: 0 0 6px; } body.retro .ds-live-hero__live { display: block; color: var(--ds-red); line-height: 0.9; } body.retro .ds-hero-lead-word { display: block; color: var(--ds-ink); line-height: 0.95; margin-bottom: 2px; } /* ── Sentence-case headings: only the first letter of the heading is capital ── */ body.retro .ds-display, body.retro .ds-h2, body.retro main h1, body.retro main h2, body.retro .section-title, body.retro .disco-catalogue-h2, body.retro .ds-break-card__title { text-transform: lowercase !important; } body.retro .ds-display::first-letter, body.retro .ds-h2::first-letter, body.retro main h1::first-letter, body.retro main h2::first-letter, body.retro .section-title::first-letter, body.retro .disco-catalogue-h2::first-letter, body.retro .ds-break-card__title::first-letter { text-transform: uppercase !important; } /* Sentence-case for the utility/inner hero headings too (outside
) */ body.retro .ct-hero h1, body.retro .page-hero h1, body.retro .inner-page-hero h1 { text-transform: lowercase !important; } body.retro .ct-hero h1::first-letter, body.retro .page-hero h1::first-letter, body.retro .inner-page-hero h1::first-letter { text-transform: uppercase !important; } /* Keep song / release titles in their authored case so the pronoun "I" and proper nouns are never lowercased by the sentence-case heading rule. */ body.retro .music-card__title, body.retro .release__title, body.retro .release-hero__title, body.retro .song_title, body.retro .ds-live-show__event { text-transform: none !important; } /* Store "More coming soon" panel: sand card with readable dark heading (was dark-on-dark) */ body.retro .coming-soon { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: 0 14px 30px -18px rgba(51,40,26,0.4) !important; } body.retro .coming-soon::before { display: none !important; } body.retro .coming-soon h2 { color: var(--ds-ink) !important; } body.retro .coming-soon p { color: var(--ds-muted) !important; } /* ── Unify the hero eyebrow across all pages (same size, colour, rule, spot) ── */ body.retro .page-hero-eyebrow, body.retro .ct-eyebrow { font-family: var(--ds-font-display), 'Source Sans 3', sans-serif; font-size: var(--ds-fs-label) !important; font-weight: 700 !important; letter-spacing: 0.22em !important; gap: 10px !important; color: var(--rt-gold) !important; margin: 0 0 var(--ds-s5) !important; } body.retro .page-hero-eyebrow::before, body.retro .ct-eyebrow::before { width: 28px !important; height: 1px !important; background: var(--rt-orange) !important; } /* ── Retheme the legacy dark "steel" panels to sand so text stays readable ──── These tokens were dark (steel) and are used by legal cards, booking/partner/ contact cards, preview items, unsubscribe box, etc. One override fixes them all. */ body.retro { --steel-bg: #EADBBE; /* raised sand surface (was dark steel) */ --chrome: transparent; /* remove the dark sheen overlay */ --steel-glow: 0 0 0 0 rgba(0,0,0,0); /* remove the dark glow */ } body.retro .card.prose, body.retro .terms-content, body.retro .privacy-content, body.retro .legal-card, body.retro .booking-info-card, body.retro .event-list-card, body.retro .partner-card, body.retro .booking-contact-card, body.retro .contact-left, body.retro .preview-item, body.retro .unsubscribe-container { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; box-shadow: 0 16px 34px -20px rgba(51,40,26,0.4) !important; color: var(--ds-ink); } body.retro .card.prose::before, body.retro .terms-content::before, body.retro .privacy-content::before, body.retro .legal-card::before { display: none !important; } /* ═══ One eyebrow + one description style across every hero ═══════════════════ */ body.retro .retro-hero .ds-kicker, body.retro .ds-music-hero .ds-kicker, body.retro .ds-live-hero .ds-kicker, body.retro .ds-about-hero .ds-kicker, body.retro .page-hero-eyebrow, body.retro .ct-eyebrow { font-family: 'Source Sans 3', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--rt-gold) !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; margin: 0 0 20px !important; line-height: 1 !important; } body.retro .retro-hero .ds-kicker::before, body.retro .ds-music-hero .ds-kicker::before, body.retro .ds-live-hero .ds-kicker::before, body.retro .ds-about-hero .ds-kicker::before, body.retro .page-hero-eyebrow::before, body.retro .ct-eyebrow::before { content: "" !important; width: 30px !important; height: 2px !important; background: var(--rt-orange) !important; display: inline-block !important; } /* Hero description: identical font, size, weight, colour, measure, spacing */ body.retro .retro-hero__sub, body.retro .ds-live-hero .ds-lead, body.retro .ds-about-hero .ds-lead, body.retro .page-hero-sub, body.retro .ct-hero-desc { font-family: 'Source Sans 3', system-ui, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--ds-muted) !important; max-width: 48ch !important; margin: 18px 0 0 !important; } /* Text-reveal line masks were clipping descenders (g, y, p) on the Bitter display font. Extend each line mask downward and pull the next line up to keep spacing. */ body.retro .ds-textreveal .ds-line { padding-bottom: 0.16em !important; margin-bottom: -0.16em !important; } /* Safety: never clip heading glyphs in the hero content */ body.retro .ds-display, body.retro .ds-h2, body.retro main h1, body.retro main h2 { padding-bottom: 0.04em; } /* ── Platform stat tiles (homepage hero) ───────────────────────────────────── Icon + big number + label + sublabel, on the sand ground. Brand-coloured platform icons; Bitter numerals; responsive grid. */ body.retro .jv-stats { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 40px); max-width: 640px; } body.retro .jv-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } body.retro .jv-stat__icon { font-size: 26px; margin-bottom: 6px; line-height: 1; } body.retro .jv-stat__icon--yt { color: #C92E26; } body.retro .jv-stat__icon--sp { color: #1DB954; } body.retro .jv-stat__icon--am { color: #FA243C; } body.retro .jv-stat__icon--tt { color: var(--ds-ink); } body.retro .jv-stat__icon--jv { color: var(--ds-red); } body.retro .jv-stat__num { font-family: 'Bitter', Georgia, serif; font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--ds-ink); font-variant-numeric: tabular-nums; } body.retro .jv-stat__label { font-family: 'Source Sans 3', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-ink); margin-top: 4px; } body.retro .jv-stat__sub { font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-dim); } @media (max-width: 560px) { body.retro .jv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Final CTA links: cap size so each phrase stays on one line (no awkward wrap that reads as cut-off), with a little line-height headroom if it ever wraps. */ body.retro .ds-final__link { font-size: clamp(34px, 7vw, 84px) !important; line-height: 1.04 !important; padding-bottom: 0.04em; } /* Final CTA: match the Bitter heading font and drop the all-caps */ body.retro .ds-final__link { font-family: 'Bitter', Georgia, serif !important; font-weight: 900 !important; text-transform: none !important; letter-spacing: -0.01em !important; }