/* ============================================================ MESMER — Grad Night Entertainment (a Wand Enterprises company) Hypnotism.com ============================================================ */ /* Fonts loaded via in index.html for reliable rendering. */ :root { --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Hanken Grotesque', system-ui, sans-serif; } /* ============================================================ THEME TOKENS ============================================================ */ :root, :root[data-theme="spotlight"] { --ink: #1c1430; /* deep aubergine-indigo near-black */ --ink-soft: #433a5c; --muted: #6c6480; --surface: #fbf6ee; /* warm cream */ --surface-2: #ffffff; /* cards */ --surface-3: #f3ecdf; --line: #e6ddcd; --line-strong:#d6c9b4; --primary: #6a52e6; /* hypnotic periwinkle/violet */ --primary-deep:#4a35c2; --primary-ink:#ffffff; --primary-tint:#efeafd; --accent: #ffb43e; /* spotlight amber */ --accent-ink: #3a2600; --accent-2: #ff6f91; /* confetti coral */ --hero-bg: #1c1430; /* dark hero on this theme */ --hero-ink: #fdfbf6; --hero-muted: #b6abce; --on-dark-card:#2a2042; } :root[data-theme="dusk"] { --ink: #e7e9f2; --ink-soft: #aab0c8; --muted: #7e85a0; --surface: #0d1020; /* deep desaturated navy */ --surface-2: #161a2e; --surface-3: #0a0d1a; --line: #232842; --line-strong:#313655; --primary: #8b82d8; /* muted periwinkle */ --primary-deep:#6b61bd; --primary-ink:#0c0a1a; --primary-tint:#1d2038; --accent: #d6a45a; /* restrained antique amber */ --accent-ink: #241600; --accent-2: #9aa0c4; --hero-bg: #080a16; --hero-ink: #eef0f8; --hero-muted: #8a90ac; --on-dark-card:#161a2e; } :root[data-theme="confetti"] { --ink: #241a2e; --ink-soft: #4f4459; --muted: #7d7287; --surface: #fff9fb; /* near white, warm pink */ --surface-2: #ffffff; --surface-3: #fdeef3; --line: #f3dde6; --line-strong:#ecc9d7; --primary: #7b3ff2; /* bold violet */ --primary-deep:#5e22d6; --primary-ink:#ffffff; --primary-tint:#f0e7ff; --accent: #ff5c8a; /* hot coral-pink */ --accent-ink: #36000f; --accent-2: #ffc23d; /* sunny yellow */ --hero-bg: #ffe9f0; /* light playful hero */ --hero-ink: #241a2e; --hero-muted: #6f5f77; --on-dark-card:#ffffff; } :root[data-theme="velvet"] { --ink: #f6ecf5; --ink-soft: #cdb6cb; --muted: #9d869b; --surface: #170915; /* deep plum-black */ --surface-2: #241020; --surface-3: #120710; --line: #36192f; --line-strong:#4a2440; --primary: #d6a14a; /* antique gold */ --primary-deep:#b9842f; --primary-ink:#1c0c18; --primary-tint:#33231a; --accent: #e85d8a; /* rose */ --accent-ink: #2a0013; --accent-2: #b48bff; --hero-bg: #0f0510; --hero-ink: #f6ecf5; --hero-muted: #b69bb2; --on-dark-card:#241020; } /* --- Noir: near-monochrome dark, whisper of cool --- */ :root[data-theme="noir"] { --ink:#ededf2; --ink-soft:#a7a9b6; --muted:#787a8a; --surface:#0c0c10; --surface-2:#16161d; --surface-3:#08080c; --line:#222230; --line-strong:#30303f; --primary:#c7c9d6; --primary-deep:#9b9dab; --primary-ink:#0c0c10; --primary-tint:#1c1c26; --accent:#e3b864; --accent-ink:#241600; --accent-2:#8d8f9e; --hero-bg:#070709; --hero-ink:#f3f3f7; --hero-muted:#8a8c9a; --on-dark-card:#16161d; } /* --- Pinewood: deep forest green, dark --- */ :root[data-theme="pinewood"] { --ink:#e9f1ea; --ink-soft:#a8c2ad; --muted:#789081; --surface:#0b1410; --surface-2:#13201a; --surface-3:#070f0b; --line:#1f3128; --line-strong:#2c4436; --primary:#5fae84; --primary-deep:#418863; --primary-ink:#06140d; --primary-tint:#142a1f; --accent:#e0a24c; --accent-ink:#231400; --accent-2:#9cc2a6; --hero-bg:#060e0a; --hero-ink:#eef5ef; --hero-muted:#86a18d; --on-dark-card:#13201a; } /* --- Ember: charcoal with warm coal glow --- */ :root[data-theme="ember"] { --ink:#f4ece6; --ink-soft:#cbb3a6; --muted:#967f73; --surface:#15100d; --surface-2:#221913; --surface-3:#0e0a07; --line:#33261d; --line-strong:#46342a; --primary:#d97a4e; --primary-deep:#b85c34; --primary-ink:#1a0d06; --primary-tint:#2c1d14; --accent:#e8b25a; --accent-ink:#241500; --accent-2:#c98f6f; --hero-bg:#0e0a07; --hero-ink:#f6efe9; --hero-muted:#a98e7f; --on-dark-card:#221913; } /* --- Abyss: deep teal-navy, cool --- */ :root[data-theme="abyss"] { --ink:#e4f1f3; --ink-soft:#a3c4c9; --muted:#71919a; --surface:#08161a; --surface-2:#0f2229; --surface-3:#050f12; --line:#1a333b; --line-strong:#264751; --primary:#4fb3b8; --primary-deep:#318a8f; --primary-ink:#04181a; --primary-tint:#0f2c30; --accent:#e6b15c; --accent-ink:#231600; --accent-2:#7fb6bd; --hero-bg:#041013; --hero-ink:#eef6f7; --hero-muted:#80a0a8; --on-dark-card:#0f2229; } /* --- Slate: cool light grey, restrained --- */ :root[data-theme="slate"] { --ink:#1b2230; --ink-soft:#46506a; --muted:#737c92; --surface:#eef1f6; --surface-2:#ffffff; --surface-3:#e4e8f0; --line:#d9dee8; --line-strong:#c3cad8; --primary:#4c5fb0; --primary-deep:#384a93; --primary-ink:#ffffff; --primary-tint:#e6e9f6; --accent:#c98a3c; --accent-ink:#ffffff; --accent-2:#7d88b8; --hero-bg:#1b2230; --hero-ink:#eef1f6; --hero-muted:#9aa3bb; --on-dark-card:#283044; } /* --- Bone: warm light, minimal color --- */ :root[data-theme="bone"] { --ink:#272320; --ink-soft:#55504a; --muted:#857e74; --surface:#f4f0e9; --surface-2:#fffdf9; --surface-3:#ece6db; --line:#e0d9cb; --line-strong:#cfc6b3; --primary:#766a57; --primary-deep:#5a5142; --primary-ink:#fffdf9; --primary-tint:#ece5d7; --accent:#b07d3f; --accent-ink:#fffdf9; --accent-2:#a99e88; --hero-bg:#272320; --hero-ink:#f4f0e9; --hero-muted:#a89f92; --on-dark-card:#36302a; } /* ============================================================ RESET / BASE ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--surface); color: var(--ink); line-height: 1.5; font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; } .eyebrow { font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; } .wrap { width: min(1200px, 92vw); margin-inline: auto; } .section { padding: clamp(70px, 9vw, 130px) 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .55em; font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: 999px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 10px 26px -10px color-mix(in oklab, var(--primary) 70%, transparent); } .btn-primary:hover { background: var(--primary-deep); transform: translateY(-2px); box-shadow: 0 16px 32px -12px color-mix(in oklab, var(--primary) 75%, transparent); } .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); } .btn-accent { background: var(--accent); color: var(--accent-ink); } .btn-accent:hover { transform: translateY(-2px); filter: brightness(1.03); } .btn-lg { padding: 18px 32px; font-size: 17px; } .on-dark .btn-ghost { color: var(--hero-ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--hero-ink) 35%, transparent); } .on-dark .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--hero-ink); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); background: color-mix(in oklab, var(--surface) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease; } .nav.scrolled { border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; gap: 28px; height: 96px; } .brand { display: flex; align-items: center; gap: 13px; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; } .brand .spiral { width: 34px; height: 34px; flex: none; } .brand .tld { color: var(--primary); } .brand small { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-top: -2px; } .nav-links { display: flex; gap: 26px; margin-left: 14px; } .nav-links a { font-weight: 600; font-size: 15.5px; color: var(--ink-soft); transition: color .15s; position: relative; } .nav-links a:hover { color: var(--ink); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .proposal-pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow .2s, background .2s; } .proposal-pill:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .proposal-pill .count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); display: inline-grid; place-items: center; font-size: 12.5px; transition: transform .2s ease; } .proposal-pill.bump .count { animation: bump .4s ease; } @keyframes bump { 0%,100%{transform:scale(1)} 35%{transform:scale(1.4)} } .nav-cta { display: none; } @media (min-width: 880px){ .nav-cta { display: inline-flex; } } /* ============================================================ HERO (variants via [data-hero]) ============================================================ */ .hero { background: var(--hero-bg); color: var(--hero-ink); position: relative; overflow: hidden; } .hero .eyebrow { color: var(--accent); } .hero h1 { font-size: clamp(44px, 6.6vw, 88px); line-height: 1.04; margin: 18px 0 0; } .hero h1 .em { color: var(--accent); font-style: italic; font-family: var(--font-display); } .hero .lede { color: var(--hero-muted); font-size: clamp(17px, 1.5vw, 21px); max-width: 30ch; margin-top: 22px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; color: var(--hero-muted); font-size: 14px; font-weight: 600; } .hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .hero-trust svg { width: 17px; height: 17px; color: var(--accent); } /* spiral backdrop */ .hero-spiral { position: absolute; pointer-events: none; opacity: .5; } /* --- split (default) --- */ [data-hero="split"] .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: clamp(56px, 8vw, 104px) 0; position: relative; z-index: 2; } [data-hero="split"] .hero-art { position: relative; min-height: 420px; } @media (max-width: 900px){ [data-hero="split"] .hero-inner { grid-template-columns: 1fr; } [data-hero="split"] .hero-art { min-height: 360px; } } /* --- spotlight (centered) --- */ [data-hero="spotlight"] .hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(70px, 10vw, 140px) 0 clamp(40px,6vw,80px); position: relative; z-index: 2; } [data-hero="spotlight"] .lede { max-width: 46ch; } [data-hero="spotlight"] .hero-cta { justify-content: center; } [data-hero="spotlight"] .hero-trust { justify-content: center; } [data-hero="spotlight"] .hero-art { width: 100%; margin-top: 50px; } /* --- marquee (oversized) --- */ [data-hero="marquee"] .hero-inner { padding: clamp(64px,8vw,110px) 0; position: relative; z-index: 2; } [data-hero="marquee"] h1 { font-size: clamp(54px, 12vw, 168px); line-height: .92; } [data-hero="marquee"] .lede { max-width: 40ch; } [data-hero="marquee"] .hero-art { margin-top: 44px; } /* spotlight cycler — one big rotating portrait + thumbnail rail */ .spotlight-hero { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; } .sh-stage { position: relative; width: min(100%, 410px); aspect-ratio: 4 / 4.7; } .sh-glow { position: absolute; inset: -10% -10% 4%; border-radius: 46% 46% 40% 40%; background: radial-gradient(58% 48% at 50% 26%, color-mix(in oklab, var(--accent) 48%, transparent), transparent 72%); filter: blur(30px); z-index: 0; animation: vpulse 7s ease-in-out infinite; } .sh-ring { position: absolute; inset: -7%; width: 114%; height: 114%; z-index: 0; animation: vrot 80s linear infinite; pointer-events: none; } .sh-ring circle { fill: none; stroke: color-mix(in oklab, var(--accent) 42%, transparent); stroke-width: .35; stroke-dasharray: .6 3; } .sh-frame { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; z-index: 1; background: var(--on-dark-card); box-shadow: 0 40px 80px -28px rgba(0,0,0,.72); border: 1px solid color-mix(in oklab, var(--hero-ink) 12%, transparent); } .sh-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; } .sh-slide.active { opacity: 1; } .sh-slide .sh-img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; } .sh-slide .sh-ph { width: 100%; height: 100%; display: grid; place-items: center; position: relative; background: radial-gradient(120% 120% at 30% 18%, color-mix(in oklab, var(--av-1) 92%, white) 0%, var(--av-1) 46%, var(--av-2) 100%); } .sh-slide .sh-ph .initials { font-family: var(--font-display); font-weight: 800; color: rgba(255,255,255,.94); font-size: 92px; letter-spacing: -.03em; } .sh-slide .sh-ph .sq-spiral { position: absolute; inset: 0; opacity: .2; mix-blend-mode: screen; } .sh-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 58px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; background: linear-gradient(to top, rgba(6,8,18,.95), rgba(6,8,18,.55) 48%, transparent); } .sh-badge { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 4px 10px; border-radius: 999px; margin-bottom: 6px; } .sh-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.5vw, 28px); color: #fff; line-height: 1.08; letter-spacing: -.02em; } .sh-skill { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--accent); letter-spacing: .06em; margin-top: 1px; } .sh-rail { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .sh-thumb { width: 54px; padding: 0; background: none; border-radius: 13px; opacity: .45; transition: opacity .2s, transform .2s; cursor: pointer; } .sh-thumb .squircle { width: 54px; border-radius: 13px; } .sh-thumb:hover { opacity: .8; } .sh-thumb.active { opacity: 1; transform: translateY(-3px); } .sh-thumb.active .squircle { box-shadow: 0 0 0 2px var(--accent), 0 8px 18px -8px rgba(0,0,0,.6); } @keyframes vrot { to { transform: rotate(360deg); } } @keyframes vpulse { 0%, 100% { opacity: .6; transform: scale(.98); } 50% { opacity: .92; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce){ .sh-glow, .sh-ring { animation: none; } .sh-slide { transition: opacity .2s; } } @media (max-width: 900px){ .sh-stage { width: min(82%, 380px); } } /* horizontal featured strip for spotlight/marquee heroes */ .featured-strip { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .featured-strip .fs-item { text-align: center; width: 132px; } .featured-strip .fs-name { color: var(--hero-ink); font-weight: 700; font-size: 14px; margin-top: 10px; } .featured-strip .fs-tag { color: var(--hero-muted); font-size: 11.5px; font-family: 'Space Mono', monospace; } /* ============================================================ SQUIRCLE AVATAR (photo-ready placeholder) ============================================================ */ .squircle { position: relative; aspect-ratio: 1; width: 100%; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 120% at 25% 15%, color-mix(in oklab, var(--av-1, #6a52e6) 92%, white) 0%, var(--av-1, #6a52e6) 45%, var(--av-2, #4a35c2) 100%); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); } .squircle .initials { font-family: var(--font-display); font-weight: 800; color: rgba(255,255,255,.94); font-size: clamp(26px, 4vw, 44px); letter-spacing: -.03em; z-index: 2; } .squircle .sq-spiral { position: absolute; inset: 0; opacity: .22; mix-blend-mode: screen; } .squircle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; } .squircle .ph-badge { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); font-family: 'Space Mono', monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.32); color: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(3px); white-space: nowrap; z-index: 2; } .sq-sm { width: 120px; } /* ============================================================ STAT BAND ============================================================ */ .stats { background: var(--surface-3); border-block: 1px solid var(--line); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: clamp(36px,5vw,56px) 0; } .stat { text-align: center; } .stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; color: var(--primary); } .stat .lbl { margin-top: 10px; font-size: 14px; color: var(--muted); font-weight: 600; } @media (max-width: 720px){ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } } /* ============================================================ LOGO WALL (schools — two rows, opposite directions) ============================================================ */ .marquee-sec { padding: clamp(44px,6vw,72px) 0; text-align: center; } .marquee-sec .cap { color: var(--muted); font-weight: 600; font-size: 15px; margin-bottom: 30px; } .marquee-sec .cap b { color: var(--ink); } .logo-wall { display: flex; flex-direction: column; gap: 16px; } .logo-row { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-track { display: flex; gap: 8px; width: max-content; align-items: center; animation: logoscroll 52s linear infinite; } .logo-track.rev { animation-direction: reverse; animation-duration: 46s; } .logo-row:hover .logo-track { animation-play-state: paused; } @keyframes logoscroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .logo-track { animation: none; } .logo-wall { gap: 12px; } .logo-row { mask-image: none; -webkit-mask-image: none; } .logo-track { flex-wrap: wrap; justify-content: center; } } .school-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 56px; padding: 0 30px; } .school-logo .logo-img { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .68; transition: opacity .2s ease, filter .2s ease; } .school-logo:hover .logo-img { filter: grayscale(0); opacity: 1; } .school-logo .logo-word { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--ink-soft); opacity: .5; white-space: nowrap; letter-spacing: -.015em; transition: opacity .2s ease; } .school-logo:hover .logo-word { opacity: .82; } /* ============================================================ ROSTER ============================================================ */ .roster-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 36px; } .roster-head h2 { font-size: clamp(34px, 4.4vw, 58px); } .roster-head p { color: var(--muted); max-width: 42ch; margin-top: 14px; } .filters { display: flex; gap: 10px; flex-wrap: wrap; } .chip { font-weight: 700; font-size: 14px; padding: 9px 17px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-soft); transition: all .18s ease; } .chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-soft); } .chip.active { background: var(--ink); color: var(--surface); box-shadow: none; } .roster-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1040px){ .roster-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px){ .roster-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .roster-grid { grid-template-columns: 1fr; } } .card { background: var(--surface-2); border-radius: 24px; padding: 16px; box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(20,12,40,.4); border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 30px 56px -28px rgba(20,12,40,.45); } .card .cat { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); font-weight: 700; } .card-link { display: block; text-decoration: none; } .card .nm { display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-top: 4px; line-height: 1.05; color: var(--ink); transition: color .15s; } a.nm:hover { color: var(--primary); } .card .show { color: var(--muted); font-size: 14px; margin-top: 4px; } .card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .card .tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-deep); } .card { position: relative; } .card-content { display: flex; flex-direction: column; flex: 1; } .card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 10px; } .add-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14.5px; padding: 12px; border-radius: 13px; background: var(--ink); color: var(--surface); transition: all .18s ease; } .add-btn:hover { background: var(--primary); color: var(--primary-ink); } .add-btn.added { background: var(--primary-tint); color: var(--primary-deep); } .icon-btn { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: all .18s; flex: none; } .icon-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .icon-btn svg { width: 19px; height: 19px; } /* card layout: portrait (default) */ [data-card="portrait"] .card .squircle { margin-bottom: 14px; } /* card layout: row */ [data-card="row"] .card { flex-direction: row; align-items: stretch; gap: 16px; } [data-card="row"] .card .squircle { width: 96px; height: 96px; flex: none; align-self: flex-start; margin: 0; } [data-card="row"] .roster-grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px){ [data-card="row"] .roster-grid { grid-template-columns: 1fr; } } /* card layout: overlay */ [data-card="overlay"] .card { padding: 0; overflow: hidden; border: none; } [data-card="overlay"] .card .squircle { width: 100%; border-radius: 24px; aspect-ratio: 3/3.6; margin: 0; } [data-card="overlay"] .card .squircle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,4,18,.94) 4%, rgba(8,4,18,.4) 42%, transparent 72%); z-index: 1; } [data-card="overlay"] .card .initials { font-size: 64px; } [data-card="overlay"] .card-content { position: absolute; inset: auto 0 0 0; padding: 18px; z-index: 2; color: #fff; } [data-card="overlay"] .card .cat { color: var(--accent); } [data-card="overlay"] .card .nm { color: #fff; } [data-card="overlay"] .card .show { color: rgba(255,255,255,.8); } [data-card="overlay"] .card .tags { display: none; } [data-card="overlay"] .card-foot { margin-top: 12px; padding-top: 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s ease, max-height .25s ease; } [data-card="overlay"] .card:hover .card-foot { opacity: 1; max-height: 70px; } [data-card="overlay"] .add-btn { background: #fff; color: #1c1430; } [data-card="overlay"] .add-btn:hover { background: var(--accent); color: var(--accent-ink); } [data-card="overlay"] .icon-btn { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); color: #fff; } /* ============================================================ HOW IT WORKS ============================================================ */ .how { background: var(--ink); color: var(--surface); } .how .eyebrow { color: var(--accent); } .how h2 { color: var(--surface); font-size: clamp(34px,4.4vw,56px); max-width: 18ch; margin-top: 14px; } .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 54px; } @media (max-width: 820px){ .steps { grid-template-columns: 1fr; gap: 18px; } } .step { border-top: 2px solid color-mix(in oklab, var(--surface) 22%, transparent); padding-top: 22px; } .step .n { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--accent); font-size: 15px; } .step h3 { color: var(--surface); font-size: 24px; margin: 14px 0 10px; } .step p { color: color-mix(in oklab, var(--surface) 70%, transparent); font-size: 16px; } .how-note { margin-top: 50px; padding: 22px 26px; border-radius: 18px; background: color-mix(in oklab, var(--surface) 8%, transparent); border: 1px solid color-mix(in oklab, var(--surface) 16%, transparent); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .how-note .spiral { width: 30px; height: 30px; flex: none; } .how-note p { font-size: 15.5px; color: color-mix(in oklab, var(--surface) 82%, transparent); } .how-note b { color: var(--accent); } /* ============================================================ INQUIRY ============================================================ */ .inquiry-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 30px; align-items: start; } @media (max-width: 900px){ .inquiry-grid { grid-template-columns: 1fr; } } .form-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px,3vw,40px); box-shadow: 0 24px 60px -36px rgba(20,12,40,.5); } .form-card h2 { font-size: clamp(28px,3.4vw,42px); } .form-card .sub { color: var(--muted); margin-top: 12px; max-width: 46ch; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; } @media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 7px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; } .field input, .field select, .field textarea { font-family: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 13px 14px; transition: border-color .15s, box-shadow .15s; } .field textarea { resize: vertical; min-height: 92px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); } .form-submit { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .form-fine { color: var(--muted); font-size: 13.5px; } .shortlist { background: var(--ink); color: var(--surface); border-radius: 26px; padding: 26px; position: sticky; top: 116px; } .shortlist h3 { color: var(--surface); font-size: 21px; } .shortlist .sl-sub { color: color-mix(in oklab, var(--surface) 68%, transparent); font-size: 14px; margin-top: 8px; } .sl-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; } .sl-empty { color: color-mix(in oklab, var(--surface) 55%, transparent); font-size: 14.5px; border: 1.5px dashed color-mix(in oklab, var(--surface) 24%, transparent); border-radius: 14px; padding: 22px 16px; text-align: center; } .sl-item { display: flex; align-items: center; gap: 12px; background: color-mix(in oklab, var(--surface) 8%, transparent); border-radius: 13px; padding: 9px 11px; animation: slin .25s ease; } @keyframes slin { from { opacity: 0; transform: translateX(8px);} } .sl-item .squircle { width: 40px; height: 40px; border-radius: 9px; flex: none; } .sl-item .squircle .initials { font-size: 15px; } .sl-item .sl-meta { flex: 1; min-width: 0; } .sl-item .sl-nm { font-weight: 700; font-size: 14.5px; color: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sl-item .sl-cat { font-size: 11.5px; color: color-mix(in oklab, var(--surface) 60%, transparent); font-family: 'Space Mono', monospace; } .sl-item .sl-rm { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: color-mix(in oklab, var(--surface) 60%, transparent); transition: all .15s; flex: none; } .sl-item .sl-rm:hover { background: color-mix(in oklab, var(--surface) 14%, transparent); color: var(--surface); } .sl-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--surface) 16%, transparent); display: flex; justify-content: space-between; font-size: 14px; color: color-mix(in oklab, var(--surface) 72%, transparent); } .sl-foot b { color: var(--accent); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--surface-3); border-top: 1px solid var(--line); padding: clamp(50px,6vw,80px) 0 40px; } .footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, .8fr); gap: 36px; } @media (max-width: 820px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; } } .footer .brand { font-size: 24px; } .footer-blurb { color: var(--muted); font-size: 15px; margin-top: 16px; max-width: 34ch; } .footer-col h5 { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 700; } .footer-col a { display: block; color: var(--ink-soft); font-size: 15px; padding: 5px 0; transition: color .15s; } .footer-col a:hover { color: var(--primary); } .footer-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; } /* ============================================================ TOAST ============================================================ */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--ink); color: var(--surface); padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; z-index: 200; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); transition: transform .35s cubic-bezier(.2,.9,.3,1.3); display: flex; align-items: center; gap: 10px; } .toast.show { transform: translateX(-50%) translateY(0); } .toast svg { width: 18px; height: 18px; color: var(--accent); } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* honeypot — visually hidden, off-screen, not display:none (bots skip those) */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* loading skeletons */ .card.skel { pointer-events: none; } .card.skel .squircle { background: linear-gradient(110deg, var(--line) 30%, var(--surface-3) 50%, var(--line) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .skel-line { height: 12px; border-radius: 6px; background: var(--line); margin-top: 10px; } .skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; } /* spotlight ribbon on featured acts */ .spotlight-flag { position: absolute; top: 10px; left: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 5px; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 4px 9px; border-radius: 999px; } [data-card="row"] .spotlight-flag { top: 8px; left: 8px; } /* ============================================================ PRE-LAUNCH GATE ============================================================ */ #gate { position: fixed; inset: 0; z-index: 9999; background: #1c1430; color: #fdfbf6; display: grid; place-items: center; padding: 24px; font-family: var(--font-body); } #gate .gate-card { width: min(420px, 92vw); text-align: center; } #gate .spiral { width: 56px; height: 56px; margin: 0 auto 22px; animation: spin 14s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #gate h1 { font-family: var(--font-display); font-size: 34px; letter-spacing: -.03em; } #gate p { color: #b6abce; margin-top: 10px; font-size: 15.5px; } #gate .gate-form { margin-top: 26px; display: flex; gap: 10px; } #gate input { flex: 1; font-family: inherit; font-size: 16px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #3a3056; background: #2a2042; color: #fff; } #gate input:focus { outline: none; border-color: #ffb43e; } #gate button { background: #6a52e6; color: #fff; font-weight: 700; padding: 0 22px; border-radius: 12px; font-size: 16px; } #gate button:hover { background: #4a35c2; } #gate .gate-err { color: #ff6f91; font-size: 14px; margin-top: 14px; min-height: 18px; font-weight: 600; } #gate .gate-fine { color: #6c6480; font-size: 12px; margin-top: 22px; font-family: 'Space Mono', monospace; letter-spacing: .04em; } /* ============================================================ ARTIST DETAIL PAGE ============================================================ */ .back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--ink-soft); padding: 26px 0 6px; transition: color .15s, gap .15s; } .back-link:hover { color: var(--primary); gap: 12px; } /* profile header */ .profile { padding: 18px 0 clamp(40px,6vw,72px); } .profile-grid { display: grid; grid-template-columns: 380px 1fr; gap: clamp(28px,4vw,56px); align-items: start; } @media (max-width: 860px){ .profile-grid { grid-template-columns: 1fr; gap: 28px; } } .profile-photo { position: relative; } .profile-photo .squircle { width: 100%; border-radius: 28px; aspect-ratio: 1; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); } .profile-photo .squircle .initials { font-size: clamp(64px, 10vw, 104px); } .profile-photo .spotlight-flag { font-size: 11px; padding: 6px 12px; top: 14px; left: 14px; } .profile-meta .cat { font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); font-weight: 700; } .profile-meta h1 { font-size: clamp(40px, 6vw, 76px); margin: 12px 0 0; } .profile-meta .tagline { font-size: clamp(18px, 1.8vw, 23px); color: var(--ink-soft); margin-top: 18px; max-width: 34ch; line-height: 1.35; } .profile-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; } .profile-fact { display: flex; flex-direction: column; gap: 2px; } .profile-fact .pf-label { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .profile-fact .pf-val { font-weight: 700; font-size: 16px; color: var(--ink); } .profile-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .profile-skills .tag { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-deep); } .profile-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* generic detail section */ .detail-sec { padding: clamp(40px,5vw,68px) 0; border-top: 1px solid var(--line); } .detail-sec .sec-eyebrow { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); font-weight: 700; } .detail-sec h2 { font-size: clamp(28px,3.4vw,44px); margin-top: 12px; } .bio-copy { margin-top: 22px; max-width: 64ch; columns: 1; } .bio-copy p { font-size: 18px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.62; } .bio-wrap { position: relative; } .bio-copy.clamped { max-height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } .bio-toggle { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 700; font-size: 15px; color: var(--primary); padding: 6px 0; transition: color .15s, gap .15s; } .bio-toggle:hover { color: var(--primary-deep); gap: 9px; } .bio-toggle .chev { font-size: 12px; } /* showreel / video */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 26px; } .video-card { position: relative; border-radius: 20px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 16/9; cursor: pointer; } .video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-poster { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklab, var(--primary) 70%, black) 0%, color-mix(in oklab, var(--hero-bg) 90%, black) 70%); } .video-poster .sq-spiral { position: absolute; inset: -20% ; opacity: .14; } .video-play { width: 66px; height: 66px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 92%, white); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(0,0,0,.5); transition: transform .18s; z-index: 2; } .video-card:hover .video-play { transform: scale(1.08); } .video-play svg { width: 26px; height: 26px; color: var(--accent-ink); margin-left: 3px; } .video-title { position: absolute; left: 16px; bottom: 14px; z-index: 2; color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 2px 8px rgba(0,0,0,.5); } .video-badge { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.4); color: rgba(255,255,255,.85); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); } /* gallery — masonry columns so images show in full (never cropped) */ .gallery-grid { columns: 4; column-gap: 14px; margin-top: 26px; } @media (max-width: 980px){ .gallery-grid { columns: 3; } } @media (max-width: 720px){ .gallery-grid { columns: 2; } } .gallery-item { break-inside: avoid; margin-bottom: 14px; border-radius: 18px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); } .gallery-item img { width: 100%; height: auto; display: block; object-fit: contain; } .gallery-item.ph { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklab, var(--primary) 30%, var(--surface-2)) 0%, var(--surface-2) 72%); border: 1px solid var(--line); } .gallery-item.ph span { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* testimonials on detail */ .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 26px; } .testi-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 22px; padding: 26px; } .testi-card .quote-mark { font-family: var(--font-display); font-size: 54px; line-height: .6; color: var(--primary); opacity: .55; } .testi-card blockquote { font-size: 18px; color: var(--ink); line-height: 1.5; margin: 8px 0 18px; } .testi-card .attr { display: flex; flex-direction: column; gap: 2px; } .testi-card .attr .who { font-weight: 700; font-size: 15px; } .testi-card .attr .role { font-size: 13px; color: var(--muted); } /* closing CTA band */ .artist-cta { background: radial-gradient(130% 130% at 88% -20%, color-mix(in oklab, var(--primary) 62%, transparent) 0%, transparent 55%), radial-gradient(120% 130% at 0% 120%, color-mix(in oklab, var(--accent) 40%, transparent) 0%, transparent 52%), linear-gradient(135deg, #1e1838 0%, #14112a 60%, #0e0c1f 100%); color: #fff; border-radius: 28px; padding: clamp(38px,5vw,64px); text-align: center; margin: clamp(40px,6vw,80px) 0; position: relative; overflow: hidden; box-shadow: 0 30px 70px -36px rgba(0,0,0,.6); } .artist-cta h2 { color: #fff; font-size: clamp(28px,4vw,48px); max-width: 20ch; margin: 0 auto; } .artist-cta p { color: rgba(255,255,255,.76); margin: 16px auto 0; max-width: 46ch; } .artist-cta .profile-cta { justify-content: center; } .artist-cta .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); } .artist-cta .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,.08); } .artist-cta .spiral-bg { position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; opacity: .22; pointer-events: none; } /* empty / not-found state */ .detail-loading, .detail-error { padding: clamp(60px,12vw,140px) 0; text-align: center; color: var(--muted); } .detail-error h1 { font-size: clamp(32px,5vw,56px); color: var(--ink); margin-bottom: 14px; }