/* ==========================================================================
Dancers Asylum Ent — Design tokens
Colors + type scale, ported from the Gaaga.world live site (computed
styles pulled directly from gaaga.world on 2026-08-11) and recolored
per the master brief. Milker/Avenir are Gaaga's licensed fonts; we
substitute with Anton (display) and Inter (body), same sizes/weights.
========================================================================== */
/* Google Fonts are loaded from tags in each page's now, not
from an @import here — @import forces the browser to fully fetch+parse
this stylesheet before it even discovers the font CSS needs fetching
too, chaining what should be parallel requests one after another. That
chain sat on every single page load, so it's the first thing worth
fixing for "loads fast, no delay." See the +
pair near the top of each page's . */
/* Nosifer — uploaded locally (OFL-licensed), used only for the hero
headline per request, not a site-wide display font swap. */
@font-face{
font-family:'Nosifer';
src:url('../fonts/Nosifer-Regular.ttf') format('truetype');
font-weight:400; font-style:normal; font-display:swap;
}
:root{
/* ---- Color -------------------------------------------------------- */
--ink: #000000; /* dominant background */
--paper: #ffffff; /* main contrast / text on black */
--signal: #e4002b; /* accent — small details only: borders, numbers,
icons, hover states (see brief §2 for the two
confirmed exceptions: carousel bg, popup) */
--ash: #141414; /* card/panel fill, subtle separation from --ink */
--line: #2a2a2a; /* hairline borders on black */
--smoke: #6b6b6b; /* muted/secondary text on black */
/* ---- Font families -------------------------------------------------
Milker -> Anton (licensed font, per brief §2 substitute)
Avenir -> Inter (licensed font, per brief §2 substitute)
Utility -> Space Mono (labels, timecodes, spec-sheet data — not used
anywhere on Gaaga itself, reserved for our
own "utility/labels" layer per the brief)
Fallback stacks keep the page legible if the @import is ever blocked.
---------------------------------------------------------------------- */
--font-display: 'Anton', 'Archivo Black', Impact, sans-serif;
--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Matches the "DANCERS' ASYLUM" wordmark baked into images/DA_FULL-white.png
(per the client: that logo was set in Bebas Neue). Scoped to the hero
H1 only ("Talent. Movement. Nightlife.") — not a --font-display swap,
so every other heading site-wide (which matches Gaaga's Anton/Milker
treatment) is untouched. */
--font-wordmark: 'Bebas Neue', 'Anton', 'Archivo Black', Impact, sans-serif;
/* ---- Type scale ------------------------------------------------------
Base reference sizes below are read verbatim off gaaga.world (desktop,
1280px viewport) via getComputedStyle — those numbers are exact, not an
approximation. But a fixed px size is the same on a 375px phone as on a
1440px laptop, which is what was breaking mobile/laptop parity: text
never scaled down, it just sat at its desktop size and crowded or
overflowed narrow viewports. Every size below is now a clamp(min,
fluid, max) — the Gaaga-sourced number is the MAX (full desktop width,
matches the reference exactly like before), with a proportional minimum
for small screens and a fluid middle so it scales continuously between
the two rather than jumping at breakpoints. Line-heights are unitless
so they scale together with the font-size automatically.
------------------------------------------------------------------------ */
/* Display (--font-display) */
--text-display-2xl: clamp(34px, 6vw + 20px, 48px); --lh-display-2xl: 1.02; /* stat numbers, e.g. "50+" */
--text-display-xl: clamp(27px, 5vw + 15px, 36px); --lh-display-xl: 1.12; /* H1 hero + major section headings */
--text-display-lg: clamp(19px, 2vw + 13px, 24px); --lh-display-lg: 1.3; /* sub-headings within sections */
--ls-display-xl: 0.1em; /* H1 hero carries uppercase + this tracking —
matches gaaga.world's mobile hero exactly:
computed letter-spacing:2px at their 20px
font-size = 0.1em (their "tracking-widest"). */
/* Body (--font-body) */
--text-body-xl: clamp(21px, 3vw + 14px, 30px); --lh-body-xl: 1.28; /* rare: large stat-band style heading */
--text-body-lg: clamp(18px, 2vw + 13px, 24px); --lh-body-lg: 1.34; /* intro/lead paragraphs */
--text-body-md: clamp(16px, 1.2vw + 13px, 20px); --lh-body-md: 1.4; /* main paragraph copy — default for FAQ/services text */
--text-body-sm: clamp(15px, 1vw + 12.5px, 18px); --lh-body-sm: 1.45; /* supporting paragraph text */
--text-body-base: clamp(14px, 0.5vw + 13px, 16px); --lh-body-base: 1.5; /* base text, nav links, footer labels */
--text-body-xs: clamp(12.5px, 0.3vw + 11.5px, 14px); --lh-body-xs: 1.45; /* pill buttons ("For Talents"/"For Clients"), captions */
/* Utility (--font-mono) — no Gaaga equivalent; sized to align with the
body scale so mono labels sit flush against body text baselines */
--text-mono-base: clamp(12.5px, 0.3vw + 11.5px, 14px); --lh-mono-base: 1.45; /* timecodes, eyebrows, spec-sheet rows */
--text-mono-sm: clamp(10px, 0.2vw + 9.5px, 11px); --lh-mono-sm: 1.45; /* fine print, tags */
--radius: 8px; /* Gaaga-style rounded corners on cards/buttons */
}
/* ---- Reference element classes ------------------------------------------
Not required, just a quick way to sanity-check the scale in a browser:
drop this file on any page and apply these classes.
------------------------------------------------------------------------ */
.type-display-2xl{ font-family:var(--font-display); font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl); }
.type-display-xl{ font-family:var(--font-display); font-size:var(--text-display-xl); line-height:var(--lh-display-xl); letter-spacing:var(--ls-display-xl); text-transform:uppercase; }
.type-display-lg{ font-family:var(--font-display); font-size:var(--text-display-lg); line-height:var(--lh-display-lg); }
.type-body-xl{ font-family:var(--font-body); font-size:var(--text-body-xl); line-height:var(--lh-body-xl); }
.type-body-lg{ font-family:var(--font-body); font-size:var(--text-body-lg); line-height:var(--lh-body-lg); }
.type-body-md{ font-family:var(--font-body); font-size:var(--text-body-md); line-height:var(--lh-body-md); }
.type-body-sm{ font-family:var(--font-body); font-size:var(--text-body-sm); line-height:var(--lh-body-sm); }
.type-body-base{ font-family:var(--font-body); font-size:var(--text-body-base); line-height:var(--lh-body-base); }
.type-body-xs{ font-family:var(--font-body); font-size:var(--text-body-xs); line-height:var(--lh-body-xs); }
.type-mono-base{ font-family:var(--font-mono); font-size:var(--text-mono-base); line-height:var(--lh-mono-base); }
.type-mono-sm{ font-family:var(--font-mono); font-size:var(--text-mono-sm); line-height:var(--lh-mono-sm); }