/* Inter, self-hosted (variable font, wght 100-900 — covers the 400/500/600 the site uses). Two subsets with Google-matching unicode-ranges so latin-ext only downloads when the page actually needs those glyphs. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-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-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: dark; --bg: #08080b; --text: #eef0f4; --dim: #83858f; --line: #1a1b20; /* No-JS fallback = the Tangerine/Cobalt duotone (one of the two approved pairings, and Paddy's favourite). The inline script overrides these per load with either Tangerine/Cobalt or Crimson/Indigo; if JS is off, the page still renders in an approved palette rather than an off-brand one. Both accents clear WCAG AA on --bg (Tangerine ~9:1, Cobalt ~5.3:1). */ --comedy: #ff8c42; --software: #5878ff; } * { box-sizing: border-box; } /* Keyboard focus: visible ring for tab navigation (WCAG 2.4.7). Track links inherit each section's accent; footer falls back to --text. */ a:focus-visible { outline: 2px solid var(--accent, var(--text)); outline-offset: 3px; border-radius: 2px; } /* Respect users who ask for less motion (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } main { max-width: 540px; margin: 0 auto; padding: 5rem 1.5rem 4rem; text-align: center; } .head { margin-bottom: 3.5rem; } .avatar { width: 165px; height: 165px; border-radius: 50%; object-fit: cover; margin-bottom: 1.5rem; padding: 3px; background: linear-gradient(135deg, var(--comedy), var(--software)); } h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.35rem; } /* The domain wordmark, restored from the original paddylb.com header. It wears the same duotone gradient as the avatar ring; solid text fallback where background-clip: text is unsupported. */ @supports (-webkit-background-clip: text) or (background-clip: text) { h1.site { /* 90deg, not the ring's 135deg: on one short line of text a diagonal gradient reads as its muddy midpoint — horizontal shows both accents */ background: linear-gradient(90deg, var(--comedy), var(--software)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } .name { font-size: 1rem; font-weight: 500; margin: 0 0 0.35rem; } .loc { color: var(--dim); font-size: 0.9rem; margin: 0 0 1.75rem; } .head .avatar { margin-bottom: 0; } .back { margin: 0 0 2rem; font-size: 0.9rem; } .back a { color: var(--dim); } .back a:hover { color: var(--text); } .track { margin-bottom: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); } .track h2 { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; margin: 0 0 1.75rem; } /* Comedy = warm accent, Software = cool accent */ .track:nth-of-type(1) { --accent: var(--comedy); } .track:nth-of-type(2) { --accent: var(--software); } .track h2 { color: var(--accent); } .row { margin-bottom: 1.5rem; } .row:last-child { margin-bottom: 0; } .label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; /* Dimmer than --dim but still clears WCAG AA on --bg: 4.75:1 (WCAG 1.4.3). The old #55565e read at 2.74:1 — below AA for this meaningful text. */ color: #7a7b82; margin-bottom: 0.5rem; } .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; } a { color: var(--text); text-decoration: none; font-size: 1rem; transition: color 0.2s ease, border-color 0.2s ease; } .links a, .row > a { border-bottom: 1px solid transparent; padding-bottom: 1px; } .links a:hover, .row > a:hover { color: var(--accent); border-bottom-color: var(--accent); } .social { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 1.6rem; } .social a { color: var(--dim); font-size: 1.15rem; transition: color 0.2s ease, transform 0.2s ease; } .social a:hover { color: #fff; transform: translateY(-2px); } /* --------------------------------------------------------------------------- Upcoming shows (The Night Crew) — list styling for shows.html. --------------------------------------------------------------------------- */ .shows-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; } .shows-list li { font-size: 0.95rem; } .shows-list a { border-bottom: 1px solid transparent; padding-bottom: 1px; } .shows-list a:hover { color: var(--accent, var(--comedy)); border-bottom-color: var(--accent, var(--comedy)); } .shows-list .when { color: var(--dim); font-size: 0.85rem; margin-left: 0.6rem; } .shows-empty { color: var(--dim); font-size: 0.9rem; } .shows-src { color: var(--dim); font-size: 0.85rem; margin: 1.75rem 0 0; } .shows-src a { color: var(--dim); border-bottom: 1px solid transparent; } .shows-src a:hover { color: var(--text); border-bottom-color: var(--text); } /* --------------------------------------------------------------------------- Print / save-as-PDF. Three of the five concepts are dark; printed as-is they waste ink and can render links illegibly in B&W. Force clean paper output: white bg, black text, and — since this is a link directory — append each destination URL after content links so the printed copy is actually usable. Screen rendering is untouched (all rules scoped to @media print). --------------------------------------------------------------------------- */ @media print { :root { color-scheme: light; } body { background: #fff !important; color: #111 !important; } main { max-width: none; padding: 1.5rem 0; } h1, .track h2 { color: #111 !important; } /* the gradient wordmark would print as invisible clipped text — go solid */ h1.site { background: none !important; -webkit-text-fill-color: #111 !important; } .name { color: #111 !important; } .loc, .shows-list .when, .shows-src { color: #444 !important; } .track, .social { border-top-color: #ccc !important; } .label { color: #333 !important; } a { color: #111 !important; } /* remove the gradient avatar ring (a background — stripped in print anyway) */ .avatar { background: none !important; padding: 0; } /* make the printout actionable: show each link's URL (content links only, not the icon-only social row) */ .links a::after, .row > a::after { content: " \00a0" attr(href); font-size: 0.78em; color: #666; word-break: break-all; } .social a { color: #111 !important; } a:hover { border-bottom-color: transparent !important; } }