/* ============================================================================ SportsTalk 24/7 — Demo section styles Covers: the password gate, the demo gallery, and page framing so the demos sit cleanly under the shared site navigation. Brand palette: gold #fed136 / #fec503, ink #212529, Montserrat. ========================================================================== */ /* The shared v2 navbar (#mainNav.navbar.v2) is solid black at all widths, so it stays readable over the demos' light backgrounds with no override needed here. */ /* --- Gate: hide protected content until unlocked (set in , no flash) - */ html.demo-gated .demo-protected { display: none !important; } html.demo-gated, html.demo-gated body { height: 100%; overflow: hidden; } .demo-lock { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background-color: #16181c; background-image: radial-gradient(120% 70% at 85% -10%, rgba(254, 209, 54, 0.18), transparent 55%), radial-gradient(90% 60% at -5% 110%, rgba(62, 151, 232, 0.14), transparent 55%); font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-tap-highlight-color: transparent; animation: demo-fade-in 0.3s ease both; } .demo-lock.is-leaving { animation: demo-fade-out 0.35s ease forwards; } .demo-lock__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 430px; } .demo-lock__logo { height: 38px; width: auto; } .demo-lock__card { width: 100%; background: #fff; border-radius: 16px; padding: 40px 38px 34px; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); } .demo-lock.is-shaking .demo-lock__card { animation: demo-shake 0.4s; } .demo-lock__title { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #212529; margin: 0 0 10px; } .demo-lock__sub { font-size: 14px; line-height: 1.6; color: #6b7280; margin: 0 auto 26px; max-width: 32ch; } .demo-lock__form { display: flex; flex-direction: column; gap: 12px; } .demo-lock__input { width: 100%; font-size: 16px; padding: 14px 16px; border: 1px solid #d7dbe0; border-radius: 8px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; } .demo-lock__input:focus { border-color: #fed136; box-shadow: 0 0 0 3px rgba(254, 209, 54, 0.3); } .demo-lock__btn { width: 100%; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #212529; background: #fed136; border: none; border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: background 0.15s, transform 0.05s; } .demo-lock__btn:hover { background: #fec503; } .demo-lock__btn:active { transform: translateY(1px); } .demo-lock__error { min-height: 18px; font-size: 13px; font-weight: 600; color: #d9534f; margin-top: 4px; visibility: hidden; } .demo-lock__error.is-visible { visibility: visible; } .demo-lock__note { font-size: 12px; color: #9aa1ab; margin: 22px 0 0; } @keyframes demo-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes demo-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes demo-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } /* --- Demo gallery (landing) ------------------------------------------------ */ .demo-hero { background-color: #212529; background-image: radial-gradient(120% 70% at 85% -20%, rgba(254, 209, 54, 0.16), transparent 55%), radial-gradient(90% 70% at -5% 120%, rgba(62, 151, 232, 0.12), transparent 55%); color: #fff; text-align: center; padding: 150px 0 70px; } .demo-hero .demo-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #fed136; margin-bottom: 14px; font-family: 'Montserrat', sans-serif; } .demo-hero h1 { font-size: 44px; font-weight: 700; text-transform: uppercase; margin: 0 0 16px; font-family: 'Montserrat', sans-serif; } .demo-hero p { font-size: 16px; line-height: 1.7; color: #c5c9d0; max-width: 620px; margin: 0 auto; } .demo-gallery { padding: 70px 0 90px; } .demo-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e6e9ee; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 22px rgba(20, 23, 31, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } a.demo-card, a.demo-card:hover { text-decoration: none; } .demo-card.is-live:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20, 23, 31, 0.16); } .demo-card__thumb { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .demo-card__thumb-title { font-family: 'Anton', 'Montserrat', sans-serif; font-size: 52px; line-height: 0.9; text-transform: uppercase; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); } .demo-card__thumb-title .pop { color: #ffe79a; } .demo-card__tag { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; display: inline-flex; align-items: center; gap: 6px; } .demo-card__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; animation: demo-blink 1.4s infinite; } @keyframes demo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .demo-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 24px 26px; } .demo-card__body h3 { font-size: 19px; font-weight: 700; color: #212529; margin: 0 0 8px; font-family: 'Montserrat', sans-serif; } .demo-card__body p { font-size: 14px; line-height: 1.6; color: #6b7280; margin: 0 0 20px; flex: 1 1 auto; } .demo-card__cta { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #212529; background: #fed136; border-radius: 8px; padding: 11px 20px; transition: background 0.15s; } .demo-card.is-live:hover .demo-card__cta { background: #fec503; } /* "Coming soon" placeholder card — signals a growing catalogue */ .demo-card.is-soon { opacity: 0.85; } .demo-card.is-soon .demo-card__thumb { background: #f1f3f6; } .demo-card.is-soon .demo-card__thumb-title { color: #c2c8d2; text-shadow: none; } .demo-card.is-soon .demo-card__tag { background: rgba(0, 0, 0, 0.3); } .demo-card.is-soon .demo-card__tag .dot { background: #9aa1ab; animation: none; } .demo-card.is-soon .demo-card__cta { background: #eceef1; color: #9aa1ab; cursor: default; } /* --- the roar demo page framing ------------------------------------------- */ /* Push the widget's own light stage below the fixed navbar. */ .demo-roar .pg-wrap { padding-top: 104px; } @media (max-width: 991px) { .demo-roar .pg-wrap { padding-top: 92px; } }