/* ========================================================================= Sind Club Sports — shared crest branding Purely presentational. The look lives here (see sc-brand.js for injection). Crest is ALWAYS the official gold SC monogram at /img/crest.png — never generated or substituted. Palette: emerald #06231a/#03140e · gold #d9b45b/#c0962f · text #f3efe6 ========================================================================= */ /* ---- Slim regal top brand strip (injected as first child of ) ---- */ .sc-brandbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 8px 18px; text-decoration: none; background: linear-gradient(160deg, #06231a, #03140e); border-bottom: 1px solid rgba(217, 180, 91, 0.35); box-shadow: 0 1px 0 rgba(217, 180, 91, 0.08), 0 6px 18px rgba(0, 0, 0, 0.28); -webkit-tap-highlight-color: transparent; } .sc-brandbar__crest { width: 30px; height: 30px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 5px rgba(217, 180, 91, 0.45)); } .sc-brandbar__word { font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #d9b45b; line-height: 1; white-space: nowrap; } /* Defensive: keep the brandbar a full-width top banner even inside the few flex-centered utility pages (checkin/checkout/entry/reset/verify). On the normal block-flow pages flex-wrap/align-content are simply ignored, so this is a no-op there. */ body:has(> .sc-brandbar) { flex-wrap: wrap; align-content: flex-start; } .sc-brandbar { flex: 1 0 100%; } @media (max-width: 480px) { .sc-brandbar { padding: 7px 13px; gap: 9px; } .sc-brandbar__crest { width: 25px; height: 25px; } .sc-brandbar__word { font-size: 12.5px; letter-spacing: 2px; } } @media print { .sc-brandbar { display: none !important; } } /* ---- Regal login block (injected at the top of a login card) ---- */ .sc-login-brand { text-align: center; margin: 0 0 18px; } .sc-login-crest { display: block; width: 84px; height: 84px; margin: 0 auto 12px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(217, 180, 91, 0.5)); } .sc-login-title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 26px; letter-spacing: 3px; color: #d9b45b; line-height: 1.1; margin: 0; } .sc-login-sub { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #d9b45b; opacity: 0.85; margin: 8px 0 0; } .sc-login-rule { width: 64px; height: 1px; border: 0; margin: 14px auto 0; background: linear-gradient(90deg, transparent, rgba(217, 180, 91, 0.7), transparent); } @media (max-width: 480px) { .sc-login-crest { width: 72px; height: 72px; } .sc-login-title { font-size: 22px; letter-spacing: 2px; } }