/* ============================================================ tokens.css — REAL VALUES, extracted from the live Wix site. Sources: - Type scale measured at 1440px and 390px viewports, then interpolated with clamp() between those two endpoints. - Colours read from the live DOM and confirmed against extracted/screens/*.png by sampling pixels. This is the only file that carries colour, font and spacing values. Do not hardcode them anywhere else. ============================================================ */ /* --- Fonts ------------------------------------------------- Self-hosted from Google Fonts (both OFL). Barlow Condensed 700 -> all headings, nav, cards, buttons Krub 500 / 700 -> body copy, form labels, footer nav Yellowtail 400 -> wordmark + script eyebrows The script face is LTC Swing Bold, licensed from The Type Founders and self-hosted. Yellowtail remains next in the stack as a fallback if the file ever fails to load. ----------------------------------------------------------- */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Krub"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/krub-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Krub"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/krub-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Krub"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/krub-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Krub"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/krub-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* LTC Swing Bold — the real wordmark face, licensed from The Type Founders (Lanston Type Co.) for web use at 10,000 page views/month. Shipped exactly as delivered: the EULA forbids modifying the software, so no subsetting or re-encoding. The licence is per-domain and non-sublicensable, so the deploy repo must stay private. Renewal is yearly — see assets/fonts/WEB_EULA_LTC.html. Declared across 400-700 so it matches whether or not a rule asks for bold; the face has a single weight and synthetic bolding would distort it. */ @font-face { font-family: "Swing"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/Swing-Bold.woff2") format("woff2"), url("/assets/fonts/Swing-Bold.woff") format("woff"); } @font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/yellowtail-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/yellowtail-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Colour: base ---------------------------------------- The canvas is white. Black is a section treatment (hero, footer, the home page's mid sections), not the page ground. Album card titles sampled from discografia-desktop.png: #000000 text on #FFFFFF, #929191 for the year above it. --------------------------------------------------------- */ --color-bg: #ffffff; --color-bg-alt: #f3f3f0; --color-surface: #f3f3f0; --color-text: #000000; --color-text-muted: #929191; --color-heading: #000000; --color-border: rgba(0, 0, 0, 0.14); /* Dark treatment: hero, footer, dark sections */ --color-dark: #000000; --color-on-dark: #ffffff; --color-border-dark: rgba(255, 255, 255, 0.16); --color-footer-bg: #000000; /* Nav: white, yellow for the current page */ --color-nav: #ffffff; --color-nav-active: #fae017; /* --- Accessible muted tones, long-form pages only --------- --color-text-muted (#929191) and --band-yellow-title (#9f8206) are the live site's own greys and are kept exactly as measured, so the replicated pages stay faithful. Both fail WCAG AA on white as normal-size text: 3.14 and 3.70 against a 4.5 floor. The article, album-sheet and legal templates are new work with no live counterpart to match, so their small print uses these darkened variants instead. Both clear 4.5 on white AND on the #f3f3f0 section grey (5.41/4.87 and 5.75/5.17). --------------------------------------------------------- */ --color-text-muted-aa: #6a6a6a; --color-dorado-aa: #7a6405; /* Teal as TEXT on a light ground. The band background stays #0ca382 -- that value is untouched. As small-or-large text on white it is only 3.19, under even the 3:1 large-text floor once it lands on the #f3f3f0 section grey (2.87). This darkened teal clears 4.5 on both (5.29 / 4.76). Coral (#bb2d28) already passes at 5.97 / 5.37 and is used as-is. */ --color-teal-aa: #087a61; /* Focus / form states */ --color-focus: #0ca382; --color-error: #ff8a7a; /* --- Colour: the three band pairs ------------------------ Every coloured section on the site is one of these three. The BACKGROUNDS are the live site's, measured, and unchanged. The TITLE colours are not. The live site sets each band's title to a tint of its own background, which looks composed and is close to unreadable: teal #41d1b2 on #0ca382 = 1.67:1 red #ec7d79 on #bb2d28 = 2.21:1 yellow #9f8206 on #fae017 = 2.78:1 All three fail WCAG AA at every size, and all three appear on / and /acerca — the quote band on / is the yellow one, the quote band on /acerca is the teal one. This is a deliberate break from pixel parity: parity was the right rule while the live site was the spec, but it is now preserving a legibility bug on the first two pages a reviewer opens. teal #ffffff on #0ca382 = 3.19:1 AA large text red #ffffff on #bb2d28 = 5.97:1 AA all sizes yellow #6f5c04 on #fae017 = 4.91:1 AA all sizes Teal reaches 3.19 and stops. White is the lightest possible foreground, so 3.19 is the CEILING on that background: the quote (25px+) and the band titles (20px+ bold) clear the 3:1 large-text bar, but the .eyebrow on /discografia is 22px in a non-bold script face and needs 4.5. Closing that last gap means darkening --band-teal-bg itself, which changes the brand colour on every teal band on the site. Not done here; it is a design decision, not an accessibility patch. See HANDOFF-ADSENSE.md. --------------------------------------------------------- */ --band-teal-bg: #0ca382; --band-teal-title: #ffffff; --band-red-bg: #bb2d28; --band-red-title: #ffffff; --band-yellow-bg: #fae017; --band-yellow-title: #6f5c04; /* Fallbacks so var(--band-*) always resolves outside a band. TRAP: a custom property whose value is another var() is substituted where it is DECLARED, not where it is used. --band-title resolves to #000000 here at :root and then inherits that literal black. A descendant that redefines --color-heading (e.g. .section--dark) does NOT change --band-title, so band text silently goes black-on-black. Any rule that flips the foreground must override --band-title too — see .section--dark in site.css. */ --band-bg: transparent; --band-title: var(--color-heading); /* --- Type: families -------------------------------------- */ --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif; --font-body: "Krub", "Helvetica Neue", Arial, sans-serif; --font-script: "Swing", "Yellowtail", "Brush Script MT", cursive; /* --- Type: scale ----------------------------------------- clamp(, , ). Both endpoints are measured off the live site; Wix scales these fluidly, so fixed px would only ever be right at one width. --------------------------------------------------------- */ /* Fitted linearly between 390 and 1440, this ramp is nearly flat at the low end, so below 390 it left the title far larger than live's — which keeps scaling with the viewport — and pushed its button off a 320 screen. min() hands over to a proportional term below 390; the two are equal at 390 by construction, so nothing moves at either measured width. */ --fs-band-title: clamp(20px, min(9.744vw, 29.132px + 2.274vw), 61.875px); --fs-page-title: clamp(25px, 13.393px + 2.976vw, 56.25px); --fs-wordmark: clamp(28px, 22.521px + 1.405vw, 42.75px); /* Measured 38px at 390, 48.87px at 834, 73.125px at 1440. Wix is not linear across that range, so a single two-point clamp overshoots the middle by ~4px. Split at 834 and interpolate each leg separately. */ /* Two ramps that meet exactly at 834 — a knee in one continuous curve, not a breakpoint. max() picks whichever leads, so no media query. */ --fs-wordmark-lg: clamp(38px, max(28.452px + 2.448vw, 15.489px + 4.002vw), 73.125px); --fs-script: clamp(22px, 15.964px + 1.548vw, 38.25px); --fs-accordion: clamp(25px, 22.4px + 0.667vw, 32px); --fs-card: clamp(16px, 12.75px + 0.833vw, 24.75px); --fs-nav: clamp(16px, 13.771px + 0.571vw, 22px); --fs-footer-title: clamp(18px, 16.329px + 0.429vw, 22.5px); /* Live buttons: 22.5px label at 1440, 11.68px at 390. The discography button runs a smaller 18px at 1440 (same 11.68px at 390), so it has its own ramp. Box is a flat 9px pad / 1px border / 11.25px radius at 1440, halving to 4.06 / 1 / 5.08 at 390. */ --fs-button: clamp(11.68px, 7.661px + 1.0305vw, 22.5px); --fs-button-sm: clamp(11.68px, 9.333px + 0.6019vw, 18px); --btn-pad: clamp(4.06px, 0.625vw, 9px); --btn-radius: clamp(5.08px, 0.78125vw, 11.25px); --btn-min-height: clamp(33.4px, 3.264vw, 47px); --fs-email: clamp(20px, 19.257px + 0.19vw, 22px); --fs-quote: clamp(25px, 19.661px + 1.369vw, 39.375px); /* The /acerca pull-quote is set larger than the home one: 45px against 39.375px at 1440. Mobile end is proportional, not measured. */ --fs-quote-lg: clamp(25px, 17.571px + 1.9048vw, 45px); /* Quote strips are a fixed 160px with the text centred, and the text column is 1262px — wider than the 1200px container. */ --band-quote-h: clamp(96px, 72.229px + 6.095vw, 160px); --quote-w: 1262px; --fs-legal: clamp(12px, 10.514px + 0.381vw, 16px); /* Body copy DOES scale: 16px at 390 and 18px at 1440, with the line box at 25.2px (1.4) on desktop. The earlier "16px, does not scale" note came from tokens.json, which extract-design.mjs captured at 390 because its viewport loop ends on mobile — the measurement was right for phones and wrong everywhere else. */ --fs-body: clamp(16px, 15.257px + 0.19vw, 18px); --fs-small: 14px; /* Aliases kept so existing site.css selectors keep resolving */ --fs-display: var(--fs-band-title); --fs-h1: var(--fs-page-title); --fs-h2: var(--fs-band-title); --fs-h3: var(--fs-card); --fs-eyebrow: var(--fs-script); /* --- Type: line height ----------------------------------- Ratios are exact where Wix used the same one at both ends. The DISPLAY is the exception: measured against live it runs 0.9 at 390px and 1.3 at 1440px, so it interpolates like the size does. The band title is a flat 1.3 at both ends — this curve was previously wired to the band title by mistake, which left the two swapped below 768px. --------------------------------------------------------- */ --lh-display: clamp(34.2px, 17.026px + 4.404vw, 80.4375px); --lh-band-title: 1.3; --lh-body: 1.4; --lh-card: 1.4; /* Home cards only: live runs the year and title on the same 1.4 line box (24.75/34.65 at 1440, 16/22.4 at 390) and pulls the title up into the year's box with a negative margin rather than spacing them apart. /discografia measures differently and is tuned separately. */ --album-year-gap: clamp(-6px, -7.393px + 0.357vw, -2.25px); --lh-script: 1.3; --lh-accordion: 1.4; --lh-footer: 1.5; --lh-wordmark-lg: 0.7; --lh-quote: 1; --lh-heading: 1.1; /* --- Type: tracking -------------------------------------- Every text element on the live site computes to letter-spacing: normal. Kept as tokens so the intent is explicit rather than accidental. --------------------------------------------------------- */ --tracking-display: normal; --tracking-eyebrow: normal; --tracking-label: normal; /* --- Layout ---------------------------------------------- */ /* The live layout column is 1262px at 1440, not 1200 — confirmed four independent ways: the quote text block, both wide photos, the colour bands, and the album grid (4-up cards measure 297px, which is exactly (1262 - 3x24) / 4). */ --container: calc(1262px + 2 * var(--gutter)); --container-text: 760px; --gutter: clamp(1.25rem, 4vw, 3rem); --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 7.5rem; --section-padding: clamp(2rem, 4.3vw, 3.875rem); --band-padding: clamp(12px, 1.389vw, 20px); --radius: 0px; --radius-card: 0px; --header-height: clamp(96px, 78.914px + 4.381vw, 142px); --wordmark-top: clamp(12px, 8.286px + 0.952vw, 22px); --nav-offset: clamp(12px, 10.514px + 0.381vw, 16px); --nav-gap: clamp(9px, 2.686px + 1.619vw, 26px); /* Instagram strip. Measured off the live carousel: 12px gutter, square tiles, and a tile width that changes mode rather than scaling — 386px with ~3.6 visible at 1440, but one tile at a time below 1200. Edge inset is 0 at 1440, 26px at 834, 12px at 390. */ --ig-gap: 12px; --ig-tile: calc(100vw - 25px); --ig-edge: 12px; /* Album grid: 24px gutter at every width. Column count steps 2/3 at 390/834; at 1440 the live site is 4-up for Fruko and 5-up for the other two sections, so the count is set per section. */ --grid-gap: 24px; /* Hero social rail: vertical, left edge, anchored to the hero bottom. Measured at 390 -> 1440: left 28->102, size 22->25, gap 10 both, bottom offset 69->74. */ --rail-left: clamp(28px, 0.514px + 7.048vw, 102px); --rail-bottom: clamp(69px, 67.143px + 0.476vw, 74px); --rail-size: clamp(22px, 20.886px + 0.286vw, 25px); --rail-gap: 10px; /* Accordion rows: 14px apart at both endpoints, row height 35 -> 45 */ /* Live accordion: 6px/40px padding, a 1px white rule on both the item and its trigger, and a 12px solid plus with 3.33px arms. */ /* /acerca bio intro: title and copy are scaled independently of the global type ramp, matching live's own per-breakpoint coefficients. */ --fs-award: 3.333vw; --fs-bio-title: 6.41vw; --fs-bio-body: 16px; --lh-bio-body: 1.3; --accordion-pad-y: 6px; --accordion-pad-x: 40px; --accordion-rule: 1px solid #ffffff; --accordion-icon: 12px; --accordion-icon-stroke: 3.33px; /* Contacto info panel: asymmetric padding, measured 59/59 at 390 and 142/75 at 1440 */ --info-pad-l: clamp(59px, 28.171px + 7.905vw, 142px); --info-pad-r: clamp(59px, 53.057px + 1.524vw, 75px); /* YouTube embeds. Box ratio measured per page at 390 and 1440 — the two differ at mobile (Wix letterboxes them differently) and the acerca one is not monotonic across widths (1.845 at 834). */ --video-home-sm: 1.537; --video-home-lg: 1.763; --video-acerca-sm: 1.5; --video-acerca-lg: 1.763; --video-max: 1009px; /* Hero aspect ratios, measured per page at 390 and 1440 */ --hero-home-sm: 0.769; --hero-home-lg: 1.959; --hero-acerca-sm: 1.406; --hero-acerca-lg: 2.04; --hero-discografia-sm: 1.12; --hero-discografia-lg: 2.54; --hero-contacto-sm: 1.36; --hero-contacto-lg: 2.796; /* --- Motion ---------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --duration: 420ms; --duration-fast: 180ms; } /* --- Band pairs --------------------------------------------- Each class sets the two locals every band component reads: --band-bg for the strip itself, --band-title for the heading sitting on it. Nesting works, so a card inside a band can opt back out by setting them again. ------------------------------------------------------------ */ .band--teal { --band-bg: var(--band-teal-bg); --band-title: var(--band-teal-title); } .band--red { --band-bg: var(--band-red-bg); --band-title: var(--band-red-title); } .band--yellow { --band-bg: var(--band-yellow-bg); --band-title: var(--band-yellow-title); } @media (min-width: 751px) { :root { --ig-tile: calc(100vw - 52px); --ig-edge: 26px; } } @media (min-width: 1001px) { :root { --ig-tile: 386px; --ig-edge: 0px; } } @media (prefers-reduced-motion: reduce) { :root { --duration: 1ms; --duration-fast: 1ms; } } /* Live steps the bio intro's title at 750 and 1000 rather than interpolating, and opens the copy's leading up at the desktop step. */ @media (min-width: 751px) { :root { --fs-bio-title: 5.859vw; --fs-award: 2.083vw; } } @media (min-width: 1001px) { :root { --fs-bio-title: 3.906vw; --lh-bio-body: 1.6; /* font_6 is 22px at live's 1280 reference, capped by --section-max-width. */ --fs-award: min(1.71875vw, 27.5px); } }