/* Dancehall 101 — its own brand (Ras Tafari Inc / TRC Events), not a SelassieFest sub-theme. Distinct fonts/palette on purpose. Per-school accent colors are applied at runtime via --school-primary/--school- secondary (see dancehall101-client.js); sane fallbacks here so the page looks right before that fetch resolves. */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --school-primary: #C8102E; --school-secondary: #F2B705; --dh-bg: #0a0a0a; --dh-bg-alt: #131313; --dh-text: #F5F5F5; --dh-text-dim: #9a9a9a; --dh-border: rgba(255, 255, 255, 0.1); --dh-card: rgba(255, 255, 255, 0.04); } body { background: var(--dh-bg); color: var(--dh-text); font-family: 'Inter', system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: var(--school-secondary); text-decoration: none; } .dh-wordmark { font-family: 'Anton', 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; } /* ── Top bar ─────────────────────────────────────────────────────────── */ .dh-topbar { padding: 18px 24px; border-bottom: 1px solid var(--dh-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .dh-topbar .dh-wordmark { font-size: 1.3rem; color: var(--dh-text); } .dh-topbar .dh-wordmark span { color: var(--school-primary); } .dh-topbar .dh-tagline { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dh-text-dim); } /* ── Wordmark: real cleared logo image, or a styled text badge using the school's own colors/short code when no cleared logo exists yet ──────── */ .dh-wordmark-img { object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, 0.92); display: block; margin: 0 auto; } /* For logo files that are white-on-transparent (meant for a dark header on the school's own site) -- see dh101_schools.logo_bg. */ .dh-wordmark-img-dark { background: rgba(0, 0, 0, 0.75); } .dh-wordmark-badge { display: flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(155deg, var(--school-primary), color-mix(in srgb, var(--school-primary) 55%, black)); border: 1px solid color-mix(in srgb, var(--school-secondary) 60%, transparent); margin: 0 auto; } .dh-wordmark-badge span { font-family: 'Anton', 'Inter', sans-serif; color: var(--school-secondary); letter-spacing: 0.03em; } .dh-wm-sm.dh-wordmark-img, .dh-wm-sm.dh-wordmark-badge { width: 52px; height: 52px; padding: 6px; } .dh-wm-sm.dh-wordmark-badge span { font-size: 0.95rem; } .dh-wm-lg.dh-wordmark-img, .dh-wm-lg.dh-wordmark-badge { width: 92px; height: 92px; padding: 12px; margin-bottom: 14px; } .dh-wm-lg.dh-wordmark-badge span { font-size: 1.5rem; } /* ── School mode ───────────────────────────────────────────────────────── Applied to only on a specific school's landing/ticket page (not the neutral multi-school picker) -- a real university site has a bold colored header/hero, not just a small badge and colored text on an otherwise-identical dark page. This is the actual "feels like your school" lever, not the logo/mascot alone. */ body.dh-school-mode .dh-topbar { border-bottom: 3px solid var(--school-primary); } body.dh-school-mode .dh-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--school-primary) 32%, transparent) 0%, transparent 75%), linear-gradient(180deg, var(--dh-bg), var(--dh-bg)); border-bottom: 1px solid color-mix(in srgb, var(--school-secondary) 35%, transparent); } /* ── Hero ────────────────────────────────────────────────────────────── */ .dh-hero { text-align: center; padding: 48px 24px 32px; } .dh-hero h1 { font-family: 'Anton', 'Inter', sans-serif; font-size: clamp(2rem, 6vw, 3.4rem); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; margin-top: 18px; } .dh-hero h1 .accent { color: var(--school-primary); } .dh-hero .dh-mascot-tag { margin-top: 8px; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--school-secondary); font-weight: 600; } .dh-hero .dh-sub { margin-top: 14px; font-size: 1.05rem; color: var(--dh-text-dim); max-width: 560px; margin-left: auto; margin-right: auto; } .dh-badge { display: inline-block; margin-top: 18px; padding: 6px 16px; border-radius: 20px; background: var(--school-primary); color: #fff; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } /* ── School picker grid ─────────────────────────────────────────────── */ .dh-picker { max-width: 900px; margin: 0 auto; padding: 12px 24px 60px; } .dh-picker input[type="search"] { width: 100%; font-family: inherit; background: var(--dh-card); border: 1px solid var(--dh-border); border-radius: 10px; padding: 13px 16px; color: var(--dh-text); font-size: 1rem; margin-bottom: 20px; outline: none; } .dh-picker input[type="search"]:focus { border-color: var(--school-secondary); } .dh-school-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .dh-school-card { display: block; background: var(--dh-card); border: 1px solid var(--dh-border); border-radius: 14px; padding: 18px; text-align: center; transition: border-color 0.15s, transform 0.15s; } .dh-school-card:hover { border-color: var(--school-secondary); transform: translateY(-2px); } .dh-school-card .dh-wordmark-img, .dh-school-card .dh-wordmark-badge { margin-bottom: 10px; } .dh-school-card .name { font-size: 0.92rem; color: var(--dh-text); } .dh-school-card .mascot { font-size: 0.75rem; color: var(--dh-text-dim); margin-top: 2px; } .dh-empty { text-align: center; color: var(--dh-text-dim); padding: 40px 0; } /* ── Signup form ─────────────────────────────────────────────────────── */ .dh-form-wrap { max-width: 460px; margin: 0 auto; padding: 0 24px 60px; } .dh-form { background: var(--dh-card); border: 1px solid var(--dh-border); border-radius: 18px; padding: 26px 24px; } .dh-form h2 { font-size: 1rem; color: var(--school-secondary); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.06em; } .dh-form label { display: block; font-size: 0.78rem; color: var(--dh-text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; } .dh-form input, .dh-form select { width: 100%; font-family: inherit; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dh-border); border-radius: 8px; padding: 11px 13px; color: var(--dh-text); font-size: 0.95rem; margin-bottom: 16px; outline: none; } .dh-form input:focus, .dh-form select:focus { border-color: var(--school-secondary); } .dh-form .dh-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } .dh-form button { width: 100%; background: var(--school-primary); color: #fff; border: none; border-radius: 10px; padding: 14px; font-family: inherit; font-size: 0.98rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: filter 0.15s; } .dh-form button:hover { filter: brightness(1.1); } .dh-form button:disabled { opacity: 0.6; cursor: not-allowed; } .dh-form-msg { margin-top: 14px; font-size: 0.85rem; text-align: center; min-height: 1.2em; } .dh-form-msg.is-error { color: #e08585; } .dh-form-msg.is-success { color: #6dbe8f; } .dh-footer { text-align: center; color: var(--dh-text-dim); font-size: 0.78rem; padding: 20px; border-top: 1px solid var(--dh-border); }