/* ============================================================ TOKENS.CSS — Design System Foundation ============================================================ This is the single source of truth for every visual value used across the site. Change something here and it updates everywhere automatically. Think of it like a brand guidebook that the whole site reads from. HOW TO USE: Reference any value with var(--token-name) e.g. color: var(--color-ink); font-size: var(--font-size-name); ============================================================ */ /* ------------------------------------------------------------ COLOUR — Ink (text) --color-ink : primary text, fully opaque black --color-ink-soft : secondary text, 50% transparent black (used for parenthetical labels) ------------------------------------------------------------ */ :root { --color-ink: rgba(0, 0, 0, 1.0); --color-ink-soft: rgba(0, 0, 0, 0.5); --color-background: #ffffff; } /* ------------------------------------------------------------ COLOUR — Blobs (the iridescent colour clouds) Each discipline word has its own blob made of layered radial gradients. We define the colours as named tokens so they can be reused or swapped per-theme. Naming: --blob-[word]-[stop number] ------------------------------------------------------------ */ :root { /* Technologist — deep indigo / electric blue */ --blob-tech-1: #2a148f; --blob-tech-2: #4a2fd6; --blob-tech-3: #5b4fe6; --blob-tech-4: #7ec6ff; --blob-tech-5: #c4e8ff; --blob-tech-6: #8a5cff; /* User Experience — fresh greens and lime */ --blob-ux-1: #2f9a38; --blob-ux-2: #7dc93a; --blob-ux-3: #c7e04a; --blob-ux-4: #fff26a; --blob-ux-5: #f3d24a; --blob-ux-6: #5fae36; /* Artist — warm gold and amber */ --blob-art-1: #8a5a00; --blob-art-2: #caa13b; --blob-art-3: #e8b33b; --blob-art-4: #ffe38a; --blob-art-5: #fff2c7; --blob-art-6: #b0822a; /* Photographer — full rainbow spectrum */ --blob-phot-1: #ff3a3a; --blob-phot-2: #ff9f00; --blob-phot-3: #ffe600; --blob-phot-4: #00d97a; --blob-phot-5: #0090ff; --blob-phot-6: #8b2fff; --blob-phot-7: #ff40c0; --blob-phot-8: #00e0d0; /* Music — deep reds and burnt orange */ --blob-mus-1: #c41f14; --blob-mus-2: #e04a1a; --blob-mus-3: #f26a2a; --blob-mus-4: #ffb56a; --blob-mus-5: #ff8a4a; --blob-mus-6: #a41010; /* Massage — mauve, orchid, rose */ --blob-mass-1: #7a1470; --blob-mass-2: #b82e8c; --blob-mass-3: #df4aa6; --blob-mass-4: #ffa8cf; --blob-mass-5: #ffd1e0; --blob-mass-6: #932a7a; } /* ------------------------------------------------------------ TYPOGRAPHY — Typeface We use Fraunces — a variable font with optical size (opsz), weight (wght), softness (SOFT), and wonkiness (WONK) axes. ------------------------------------------------------------ */ :root { --font-family: "Fraunces", "EB Garamond", "Times New Roman", serif; /* Two weights in use across the site: light = name headline, modal body, parentheticals medium = floating discipline words */ --font-weight-light: 300; --font-weight-medium: 420; /* Optical size settings per context (Fraunces variable axis) */ --font-fvar-name: "opsz" 144, "SOFT" 100, "wght" 300, "WONK" 0; --font-fvar-word: "opsz" 72, "SOFT" 100, "wght" 420, "WONK" 0; --font-fvar-paren: "opsz" 72, "SOFT" 100, "wght" 300, "WONK" 0; --font-fvar-modal-title: "opsz" 72, "SOFT" 100, "wght" 380, "WONK" 0; --font-fvar-modal-body: "opsz" 48, "SOFT" 100, "wght" 340, "WONK" 0; /* Font sizes — clamp(mobile-min, fluid, desktop-max) This one definition covers ALL screen sizes. The middle value scales with viewport width (vw). */ --font-size-name: clamp(32pt, 9vw, 40pt); --font-size-word: clamp(18pt, 5vw, 25pt); --font-size-modal-title: clamp(22px, 3vw, 34px); --font-size-modal-body: 14px; /* Letter spacing */ --letter-spacing-name: -0.02em; --letter-spacing-word: 0.005em; --letter-spacing-modal: -0.01em; /* Line height */ --line-height-name: 0.96; --line-height-body: 1.55; } /* ------------------------------------------------------------ SIZING — Lines & Borders One place to control all stroke weights across the site. --line-weight : SVG connector lines between words and name --border-width : pill border around name, modal rim ------------------------------------------------------------ */ :root { --line-weight: 0.75px; --line-opacity: 0.5; --line-color: rgba(120, 120, 120, 1); --border-width: 1px; --border-color-name: rgba(0, 0, 0, 0.14); /* pill around name */ --modal-border-width: 1.5px; /* modal specular rim */ } /* ------------------------------------------------------------ SIZING — Layout Core spatial values for the page composition. ------------------------------------------------------------ */ :root { --name-padding-v: 25px; /* top/bottom padding inside name pill */ --name-padding-h: 40px; /* left/right padding inside name pill */ --name-radius: 999px; /* makes the pill fully rounded */ /* BPM widget — heart rate display */ --bpm-heart-size: 53px; /* height of heart SVG = max rendered name height (40pt) */ --bpm-font-size: 13pt; /* number inside the heart — small, complementary */ --bpm-font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; --bpm-stroke: rgba(0, 0, 0, 0.65); /* heart outline colour */ --bpm-stroke-width: 2; /* heart stroke weight */ --modal-radius: 28px; --modal-width: 500px; --modal-height: 300px; --modal-padding-v: 34px; --modal-padding-h: 40px; } /* ------------------------------------------------------------ GLASS — Modal material The glass card effect: blur, tint, specular border. --glass-blur : backdrop blur amount --glass-tint : white tint over the blurred background --glass-multiply : grey multiply layer that saturates colors seen through the glass (makes it feel like actual tinted glass, not frosted plastic) ------------------------------------------------------------ */ :root { --glass-blur: blur(8px) saturate(1.6) brightness(1.04); --glass-tint: rgba(255, 255, 255, 0.08); --glass-multiply-color: rgba(180, 185, 192, 1); --glass-multiply-opacity: 0.32; /* Specular border gradient — light from top-left, dark bottom-right White holds across the top, grey in the middle, white again bottom */ --glass-border-gradient: linear-gradient( 135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 55%, rgba(128,128,128,0.4) 78%, rgba(255,255,255,0.9) 100% ); } /* ------------------------------------------------------------ ANIMATION — Durations & Curves CSS transition timings used for modal open/close. The JS easing constants live in js/easing.js. ------------------------------------------------------------ */ :root { --transition-modal-in: 480ms cubic-bezier(0.2, 0.8, 0.2, 1); --transition-modal-out: 300ms ease-out; --transition-blob: 520ms cubic-bezier(0.4, 0, 0.2, 1); --transition-visibility-in: 0s 0ms; --transition-visibility-out: 0s 300ms; }