/* Theme Name: IndyGG Theme URI: https://indygg.com Author: IndyGG Media Description: Indianapolis Esports News Theme Version: 1.0.0 Text Domain: indygg */ :root { --cyan: #00D4FF; --red: #FF3152; --green: #22C55E; --purple: #A855F7; --bg: #FFFFFF; --surface: #F6F7F9; --text: #111111; --muted: #444444; --border: #E4E6EA; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* ═══════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════ */ .f-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; } .f-ui { font-family: 'Outfit', sans-serif; } .f-mono { font-family: 'JetBrains Mono', monospace; } .f-body { font-family: 'Lora', serif; } /* ═══════════════════════════════════════ TICKER ═══════════════════════════════════════ */ .ticker-wrap { overflow: hidden; } .ticker-inner { display: flex; white-space: nowrap; animation: ticker 35s linear infinite; } .ticker-inner:hover { animation-play-state: paused; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ═══════════════════════════════════════ LIVE PULSE ═══════════════════════════════════════ */ .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: inline-block; flex-shrink: 0; animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } } /* ═══════════════════════════════════════ TAGS ═══════════════════════════════════════ */ /* WordPress adds class "tag" to on post_tag archives; scope pill styles so body stays block-level. */ .tag:not(body) { display: inline-block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; line-height: 1.5; } a.tag { text-decoration: none; } .tag-cyan { background: var(--cyan); color: #000; } .tag-red { background: var(--red); color: #fff; } .tag-dark { background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, .08);} .tag-ghost { border: 1.5px solid var(--border); color: #666; background: transparent; } .tag-green { background: #22C55E; color: #fff; } .tag-purple { background: #A855F7; color: #fff; } .tag-accent { background: var(--scene-accent, var(--cyan)); color: #000; } .tag-outline { background: transparent; border: 1px solid rgba(0,0,0,.12); color: #666; } .tag--sm { font-size: 10px; } .tag--mb { display: inline-block; margin-bottom: 5px; } .tag--mb-sm { display: inline-block; margin-bottom: 6px; } .tag--mb-lg { display: inline-block; margin-bottom: 10px; } .tag--shrink-0 { flex-shrink: 0; } /* ═══════════════════════════════════════ ORG SINGLE (mockup port) ═══════════════════════════════════════ */ .organization-single .org-hero { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; background: linear-gradient(135deg,#06060f 0%,#0c0c22 60%,#06060f 100%); } .organization-single .org-hero__grid { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(255,255,255,.018) 60px,rgba(255,255,255,.018) 61px), repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.018) 60px,rgba(255,255,255,.018) 61px); } .organization-single .org-hero__darken { position: absolute; inset: 0; background: linear-gradient(to top,rgba(6,6,15,1) 0%,rgba(6,6,15,.55) 50%,rgba(6,6,15,.1) 100%); } .organization-single .org-hero__stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--scene-accent, var(--cyan)); } .organization-single .org-hero__wm { position: absolute; right: -20px; bottom: -30px; font-family: 'Bebas Neue', sans-serif; font-size: 11rem; line-height: 1; color: rgba(255,255,255,.025); letter-spacing: .06em; pointer-events: none; user-select: none; } .organization-single .org-hero__content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 38px 24px 40px; } /* Pin share button to the centered 1200px content rail (overrides team-single absolute right). */ .organization-single .team-single__share-anchor { right: max(24px, calc(50% - 600px + 24px)); } /* Event single: reuse team dossier share button styles */ .events-single-hero__share { position: absolute; top: 10px; /* Pin to the centered 72rem rail */ right: max(24px, calc(50% - 36rem + 24px)); z-index: 5; } @media (max-width: 720px) { .events-single-hero__share { top: 8px; right: 12px; } } /* Event hero: smaller, dossier-style + title image tile */ .events-single-hero { min-height: 12rem; } .events-single-hero__content { padding-top: 1.25rem; padding-bottom: 1.25rem; } .events-single-hero__wm { position: absolute; right: -20px; bottom: -30px; font-family: "Bebas Neue", sans-serif; font-size: 11rem; line-height: 1; color: rgba(255, 255, 255, 0.03); letter-spacing: 0.06em; pointer-events: none; user-select: none; z-index: 1; } .events-single-hero__title-row { display: flex; align-items: center; gap: 18px; } .events-single-hero__logo-box { width: 88px; height: 88px; margin-top: 0; } .events-single-hero__logo-box img { padding: 10px; } @media (max-width: 720px) { .events-single-hero { min-height: 10.5rem; } .events-single-hero__title-row { gap: 14px; } .events-single-hero__logo-box { width: 74px; height: 74px; } } /* Event map embed: remove padding frame + solid pin */ .events-venue-card__map { padding: 0; align-items: stretch; justify-content: stretch; } .events-venue-card__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -70%); margin: 0; z-index: 2; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)); } .events-venue-card__pin, .events-venue-card__pin * { fill: currentColor; stroke: none; } .events-venue-card__map-cap { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; } .organization-single .org-hero__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .organization-single .org-hero__inclusive-badge { display: inline-flex; align-items: center; gap: 6px; } .organization-single .org-hero__inclusive-ico { width: 14px; height: 14px; flex-shrink: 0; } .organization-single .org-hero__inclusive-ico svg { display: block; width: 100%; height: 100%; } .organization-single .org-hero__id { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 16px; } .organization-single .org-logo-box { width: 88px; height: 88px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; } .organization-single .org-logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: luminosity; opacity: .85; } .organization-single .logo-corner { position:absolute; width:10px; height:10px; border-color:var(--scene-accent, var(--cyan)); border-style:solid; } .organization-single .lc-tl { top:0; left:0; border-width:1.5px 0 0 1.5px; } .organization-single .lc-tr { top:0; right:0; border-width:1.5px 1.5px 0 0; } .organization-single .lc-bl { bottom:0; left:0; border-width:0 0 1.5px 1.5px; } .organization-single .lc-br { bottom:0; right:0; border-width:0 1.5px 1.5px 0; } .organization-single .org-hero__title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.4rem,5vw,3.8rem); color: #fff; line-height: .97; letter-spacing: .04em; margin-bottom: 6px; } .organization-single .org-hero__sub { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #555; letter-spacing: .1em; text-transform: uppercase; } .organization-single .hero-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; } .organization-single .hero-meta-item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #888; font-weight: 600; } .organization-single .hero-meta-item a { color: inherit; text-decoration: none; } .organization-single .hero-meta-item a:hover { text-decoration: underline; } .organization-single .hero-meta-item.hl { color: var(--scene-accent, var(--cyan)); font-weight: 700; } .organization-single .hero-stats { display: flex; gap: 36px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); flex-wrap: wrap; } .organization-single .hero-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; line-height: 1; color: #fff; letter-spacing: .04em; } .organization-single .hero-stat-num.acc { color: var(--scene-accent, var(--cyan)); } .organization-single .hero-stat-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #666; margin-top: 4px; } .organization-single .tabs-bar { background: #fff; border-bottom: 2px solid var(--border); position: sticky; top: 68px; z-index: 30; } .organization-single .team-single__tabs { z-index: 0; } .organization-single .tabs-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; overflow-x: auto; scrollbar-width: none; } .organization-single .tabs-inner::-webkit-scrollbar { display:none; width:0; height:0; } .organization-single .tab-btn { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; color: #888; background: none; border: none; border-bottom: 2px solid transparent; padding: 15px 20px; letter-spacing: .03em; text-transform: uppercase; margin-bottom: -2px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .organization-single .tab-btn:hover { color: #111; } .organization-single .tab-btn.ton { color:#111; border-bottom-color: var(--scene-accent, var(--cyan)); } .organization-single .tab-count { display: inline-block; background: var(--surface); color: #888; font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 1px 6px; border-radius: 2px; } .organization-single .tab-btn.ton .tab-count { background: var(--scene-accent, var(--cyan)); color: #000; } .ticker-item-text--cyan { color: var(--cyan); } .ticker-item-text--muted { color: #aaa; } /* ═══════════════════════════════════════ NAV LINKS ═══════════════════════════════════════ */ .nav-item { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1em; letter-spacing: 0.03em; color: #555; text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .nav-item:hover, .nav-item.on { color: #111; border-bottom-color: var(--cyan); } .nav-item.hot { color: var(--red); } .nav-item.hot:hover { border-bottom-color: var(--red); } /* ═══════════════════════════════════════ IMAGE OVERLAY ═══════════════════════════════════════ */ .darken { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 55%, transparent 100%); } /* ═══════════════════════════════════════ CARD HOVER ═══════════════════════════════════════ */ .card-lift { transition: transform .2s ease, box-shadow .2s ease; } .card-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.1); } /* ═══════════════════════════════════════ SCORE CARD ═══════════════════════════════════════ */ .score-card { border-left: 3px solid var(--border); transition: border-color .2s; } .score-card:hover { border-left-color: var(--cyan); } .score-card.live { border-left-color: var(--red); } /* ═══════════════════════════════════════ RANK BAR ═══════════════════════════════════════ */ .rank-fill { height: 3px; background: linear-gradient(to right, var(--cyan), var(--red)); } /* ═══════════════════════════════════════ SECTION HEADER ═══════════════════════════════════════ */ .sec-head { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); } /* ═══════════════════════════════════════ MATCH BADGES ═══════════════════════════════════════ */ .badge-live { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; background: var(--red); color: #fff; padding: 2px 8px; } .badge-soon { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; background: #1a1a1a; color: #888; padding: 2px 8px; } /* ═══════════════════════════════════════ HEADLINES ═══════════════════════════════════════ */ .headline-lg { font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; letter-spacing: 0.03em; line-height: 1.05; color: #fff; } .headline-md { font-family: 'Bebas Neue', sans-serif; font-size: 1.65rem; letter-spacing: 0.03em; line-height: 1.08; color: #fff; } .headline-sm { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.4; color: #111; } /* ═══════════════════════════════════════ BYLINE ═══════════════════════════════════════ */ .byline { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #999; letter-spacing: 0.04em; text-transform: uppercase; } /* ═══════════════════════════════════════ BODY TEXT ═══════════════════════════════════════ */ .body-text { font-family: 'Outfit', sans-serif; font-size: 14px; line-height: 1.65; color: #666; } /* ═══════════════════════════════════════ FILTER BUTTONS ═══════════════════════════════════════ */ .filter-btn { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; padding: 6px 16px; border: 1.5px solid var(--border); color: #666; background: #fff; cursor: pointer; transition: all .15s; white-space: nowrap; } .filter-btn:hover { border-color: #aaa; color: #111; } .filter-btn.active { background: var(--cyan); border-color: var(--cyan); color: #000; } /* ═══════════════════════════════════════ SHARE BUTTONS ═══════════════════════════════════════ */ .share-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; padding: 8px 16px; border: 1.5px solid var(--border); cursor: pointer; text-decoration: none; transition: all .15s; color: #555; background: #fff; } .share-btn:hover { border-color: #aaa; color: #111; } .share-btn.twitter:hover { border-color: #1DA1F2; color: #1DA1F2; } .share-btn.discord:hover { border-color: #5865F2; color: #5865F2; } .share-btn.copy:hover { border-color: var(--cyan); color: var(--cyan); } /* ═══════════════════════════════════════ BUTTON SYSTEM (site-wide) Use this instead of page-specific button styles. ═══════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; padding: 8px 18px; border: 1.5px solid var(--border); cursor: pointer; text-decoration: none; transition: all .15s; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; background: transparent; color: #555; } .btn:hover { border-color: #aaa; color: #111; } .btn--accent { --btn-accent: var(--cyan); border-color: color-mix(in srgb, var(--btn-accent) 30%, transparent); color: var(--btn-accent); } .btn--accent:hover { background: color-mix(in srgb, var(--btn-accent) 10%, transparent); } .btn--ghost { border-color: #333; color: #888; } .btn--ghost:hover { border-color: #555; color: #fff; } .btn__icon { width: 12px; height: 12px; flex-shrink: 0; } /* Page hero CTAs: solid primary + glass secondary (matches indy-cta / dark-band heroes) */ .page-hero .page-hero__actions .btn { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.3s; } .page-hero .page-hero__actions .btn__icon { width: 14px; height: 14px; } .page-hero .page-hero__actions .btn--accent { --btn-accent: var(--page-hero-acc); background: var(--page-hero-acc); color: #07070f; border-color: transparent; box-shadow: 0 4px 22px color-mix(in srgb, var(--page-hero-acc) 40%, transparent); } .page-hero .page-hero__actions .btn--accent:hover { background: color-mix(in srgb, var(--page-hero-acc) 86%, #ffffff); color: #07070f; border-color: transparent; transform: scale(1.04); box-shadow: 0 10px 34px color-mix(in srgb, var(--page-hero-acc) 48%, transparent); } .page-hero .page-hero__actions .btn--ghost { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); } .page-hero .page-hero__actions .btn--ghost:hover { border-color: var(--page-hero-acc); color: #fff; background: color-mix(in srgb, var(--page-hero-acc) 22%, rgba(255, 255, 255, 0.08)); } @media (prefers-reduced-motion: reduce) { .page-hero .page-hero__actions .btn { transition-duration: 0.01ms; } .page-hero .page-hero__actions .btn--accent:hover { transform: none; } } .events-feat-hero .btn--accent { --btn-accent: var(--cyan); } .events-feat-hero .btn--ghost { border-color: color-mix(in srgb, var(--cyan) 30%, rgba(255, 255, 255, 0.18)); } .events-feat-hero .btn--ghost:hover { border-color: var(--cyan); } .events-single-hero .btn--accent { --btn-accent: var(--cyan); } .events-single-hero .btn--ghost { border-color: color-mix(in srgb, var(--cyan) 30%, rgba(255, 255, 255, 0.18)); } .events-single-hero .btn--ghost:hover { border-color: var(--cyan); } /* ═══════════════════════════════════════ EVENT INFO (Amenities pills) ═══════════════════════════════════════ */ .events-info { width: 100%; background: #fff; border: 1.5px solid var(--border); padding: 18px 20px; } .events-info__pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; } .events-info__pill-wrap { position: relative; } .events-info-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1.5px solid var(--border); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; user-select: none; } .events-info-pill:hover, .events-info-pill.active { border-color: var(--cyan); background: #f0fdff; } .events-info-pill__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #888; transition: color .15s; flex-shrink: 0; } .events-info-pill:hover .events-info-pill__icon, .events-info-pill.active .events-info-pill__icon { color: var(--cyan); } .events-info-pill__label { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #444; white-space: nowrap; transition: color .15s; } .events-info-pill:hover .events-info-pill__label, .events-info-pill.active .events-info-pill__label { color: #111; } .events-info-pill__count { font-family: 'JetBrains Mono', monospace; font-size: 9px; background: var(--surface); border: 1px solid var(--border); color: #888; padding: 1px 6px; border-radius: 999px; letter-spacing: .04em; } .events-info-pill:hover .events-info-pill__count, .events-info-pill.active .events-info-pill__count { background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.3); color: var(--cyan); } .events-info-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 260px; background: #111; border: 1px solid #222; padding: 14px 16px; z-index: 50; box-shadow: 0 8px 32px rgba(0,0,0,.18); } .events-info-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #222; } .events-info-tooltip__title { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #222; } .events-info-tooltip__row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .events-info-tooltip__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #555; } .events-info-tooltip__dot.yes { background: var(--green); } .events-info-tooltip__dot.no { background: var(--red); } .events-info-tooltip__dot.na { background: #555; } .events-info-tooltip__name { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; flex: 1; color: #ddd; } .events-info-tooltip__val { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #888; text-align: right; max-width: 120px; } .events-info-tooltip__val.yes { color: var(--green); } .events-info-tooltip__val.no { color: var(--red); } .events-info-tooltip__note { margin-top: 10px; padding-top: 8px; border-top: 1px solid #222; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #666; line-height: 1.5; } /* ═══════════════════════════════════════ RELATED CARD ═══════════════════════════════════════ */ .rel-card { text-decoration: none; background: #fff; border: 1.5px solid var(--border); overflow: hidden; display: block; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .rel-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.1); } /* ═══════════════════════════════════════ BG GRADIENTS ═══════════════════════════════════════ */ .bg-valorant { background: linear-gradient(135deg, #0d0d1f 0%, #1a1035 100%); } .bg-lol { background: linear-gradient(135deg, #071520 0%, #0d2540 100%); } .bg-cs2 { background: linear-gradient(135deg, #100808 0%, #280d0d 100%); } .bg-rl { background: linear-gradient(135deg, #060a18 0%, #0a1535 100%); } .bg-ow { background: linear-gradient(135deg, #0e0618 0%, #1e0a35 100%); } .bg-indy { background: linear-gradient(135deg, #080810 0%, #0f1020 100%); } .bg-val { background: linear-gradient(135deg, #0d0d1f 0%, #1a1035 100%); } /* ═══════════════════════════════════════ ARTICLE BODY TEXT (Single Post) ═══════════════════════════════════════ */ .article-body p:not(.indy-article-cta__eyebrow):not(.indy-article-cta__body):not(.indy-directory-callout__heading):not(.indy-directory-audience__desc):not(.indy-quote__text) { font-family: 'Lora', serif; font-size: 17px; line-height: 1.85; color: #2a2a2a; margin-bottom: 24px; } .article-body h2:not(.extra-title__eyebrow):not(.indy-article-cta__headline) { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 0.04em; color: #111; margin: 40px 0 16px; padding-left: 16px; border-left: 4px solid var(--cyan); } .article-body h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.15rem; color: #111; margin: 32px 0 12px; } .article-body blockquote:not(.indy-quote) { margin: 32px 0; padding: 24px 28px; background: var(--surface); border-left: 4px solid var(--cyan); position: relative; } .article-body blockquote:not(.indy-quote)::before { content: '"'; font-family: 'Bebas Neue', sans-serif; font-size: 5rem; color: var(--cyan); opacity: 0.25; position: absolute; top: -10px; left: 16px; line-height: 1; } .article-body blockquote:not(.indy-quote) p { font-family: 'Lora', serif; font-size: 1.15rem; font-style: italic; color: #333; line-height: 1.7; margin: 0; } .article-body blockquote:not(.indy-quote) cite { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 12px; font-style: normal; } .article-body ul:not(.indy-directory-callout__list) { margin: 0 0 24px 0; padding: 0; list-style: none; } .article-body ul:not(.indy-directory-callout__list) > li { font-family: 'Lora', serif; font-size: 17px; line-height: 1.75; color: #2a2a2a; padding: 6px 0 6px 24px; position: relative; border-bottom: 1px solid #f4f4f4; } .article-body ul:not(.indy-directory-callout__list) > li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); } /* ═══════════════════════════════════════ STAT CALLOUT ═══════════════════════════════════════ */ .stat-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); margin: 32px 0; } .stat-item { background: var(--surface); padding: 20px; text-align: center; } /* ═══════════════════════════════════════ STICKY SIDEBAR ═══════════════════════════════════════ */ .sticky-share { position: sticky; top: 88px; } /* ═══════════════════════════════════════ READING PROGRESS BAR ═══════════════════════════════════════ */ #progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(to right, var(--cyan), var(--red)); z-index: 9999; transition: width .1s linear; } /* ═══════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: #f0f0f0; } ::-webkit-scrollbar-thumb { background: var(--cyan); } /* ═══════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Layout: header, ticker, main shells (replaces inline styles in templates) */ .site-header { background: #fff; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 100; overflow: visible; } /* Row layout must survive core block/global CSS (see saved IndyGGwp.html order). */ .site-header .site-header__bar { position: static; max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 68px; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: clamp(12px, 3vw, 24px); box-sizing: border-box; overflow: visible; } /* Logo left; primary nav + search/subscribe clustered on the right (matches scene landing v3 header). */ .site-header__end { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: clamp(16px, 2.2vw, 28px); flex: 1 1 auto; min-width: 0; } .site-logo-link { text-decoration: none; display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: inherit; } .site-logo-img { display: block; height: auto; max-height: 42px; width: auto; max-width: min(220px, 38vw); object-fit: contain; } .site-logo-wordmark { font-size: 28px; line-height: 1; color: #111; } .site-logo-accent { color: var(--cyan); } .site-logo-tagline { font-size: 9px; letter-spacing: 0.15em; color: #aaa; line-height: 1; margin-top: 2px; } /* Primary nav: avoid .hidden + .lg:flex (other CSS can reorder and keep nav invisible). */ .primary-nav { align-items: center; overflow: visible; } .primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 24px; overflow: visible; } .primary-nav__item { position: relative; display: flex; align-items: center; } .primary-nav__item--mega { position: static; } .primary-nav__dropdown { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); z-index: 600; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; } .primary-nav__item--has-children:hover > .primary-nav__dropdown, .primary-nav__item--has-children:focus-within > .primary-nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .primary-nav__subitem { margin: 0; } .primary-nav__sublink { display: block; padding: 10px 14px; color: #111; text-decoration: none; white-space: nowrap; } .primary-nav__sublink:hover, .primary-nav__sublink:focus-visible { background: #f6f6f6; color: var(--cyan); text-decoration: none; } /* Mega menu: full-width dark panel (indygg-mega-menu-fullwidth / singlecol mockups) */ .primary-nav__mega { position: static; display: flex; align-items: stretch; overflow: visible; } .primary-nav__item--mega { align-self: stretch; } .primary-nav__item--mega > .primary-nav__mega { height: 100%; } .nav-item.nav-item--mega-trigger { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; height: 100%; } .mega-menu__chevron { flex-shrink: 0; transition: transform 0.25s ease; } .primary-nav__item--mega:hover .mega-menu__chevron, .primary-nav__item--mega:focus-within .mega-menu__chevron { transform: rotate(180deg); } /* Full-bleed shell: dark from the first pixel under the bar (no white “bridge” gap). */ .primary-nav__mega .mega-menu { position: absolute; left: 0; right: 0; width: auto; transform: none; top: 100%; padding-top: 0; box-sizing: border-box; max-width: none; z-index: 999999; opacity: 0; visibility: hidden; pointer-events: none; background: #0a0a0a; border-top: 3px solid var(--cyan); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28); transition: opacity 0.18s ease, visibility 0.18s ease; } .primary-nav__item--mega:hover .mega-menu, .primary-nav__item--mega:focus-within .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; } .primary-nav__mega .mega-menu__inner { max-width: 1200px; margin: 0 auto; padding: 44px 24px 52px; background: transparent; color: #fff; } .mega-menu__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 56px; background: transparent; } /* Single mega column: one section, larger type (single-column mockup). */ .mega-menu__grid:has(> .mega-menu__column:only-child) { grid-template-columns: 1fr; gap: 0; } .mega-menu__grid:has(> .mega-menu__column:only-child) .mega-menu__link { padding: 14px 0; gap: 16px; } .mega-menu__grid:has(> .mega-menu__column:only-child) .mega-menu__chev { font-size: 26px; } .mega-menu__grid:has(> .mega-menu__column:only-child) .mega-menu__link-title { font-size: 26px; } .mega-menu__grid:has(> .mega-menu__column:only-child) .mega-menu__link-desc { font-size: 13px; } .mega-menu__column { padding: 0; min-width: 0; } .mega-menu__column--solo { display: flex; flex-direction: column; gap: 0; } .mega-menu__col-head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #888; font-weight: 500; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid #1f1f1f; } a.mega-menu__col-head--link { display: block; text-decoration: none; color: #888; transition: color 0.18s ease; } a.mega-menu__col-head--link:hover { color: var(--cyan); text-decoration: none; } .mega-menu__list { list-style: none; margin: 0; padding: 0; } .mega-menu__item { margin: 0; } .mega-menu__link { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 11px 0; text-decoration: none; color: #fff; border-bottom: 1px solid #141414; box-sizing: border-box; transition: transform 0.18s ease, color 0.18s ease; } .mega-menu__column .mega-menu__list .mega-menu__item:last-child .mega-menu__link { border-bottom: none; } .mega-menu__column--solo > .mega-menu__link:last-child { border-bottom: none; } .mega-menu__link:hover { transform: translateX(4px); } .mega-menu__chev { font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; transition: transform 0.18s ease, color 0.18s ease; } .mega-menu__column:nth-child(3n + 1) .mega-menu__chev { color: var(--cyan); } .mega-menu__column:nth-child(3n + 2) .mega-menu__chev { color: var(--red); } .mega-menu__column:nth-child(3n + 3) .mega-menu__chev { color: var(--green); } .mega-menu__grid:has(> .mega-menu__column:only-child) .mega-menu__chev { color: var(--cyan); } .mega-menu__link-body { flex: 1; min-width: 0; } .mega-menu__link-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.04em; line-height: 1.05; color: #fff; display: block; margin-bottom: 4px; transition: color 0.18s ease; } .mega-menu__link-desc { display: block; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500; color: #888; letter-spacing: 0.01em; line-height: 1.4; } .mega-menu__column:nth-child(3n + 1) .mega-menu__link:hover .mega-menu__link-title { color: var(--cyan); } .mega-menu__column:nth-child(3n + 2) .mega-menu__link:hover .mega-menu__link-title { color: var(--red); } .mega-menu__column:nth-child(3n + 3) .mega-menu__link:hover .mega-menu__link-title { color: var(--green); } .mega-menu__grid:has(> .mega-menu__column:only-child) .mega-menu__link:hover .mega-menu__link-title { color: var(--cyan); } .mega-menu__link:hover .mega-menu__chev { transform: translateX(3px); } .mega-menu__link--active .mega-menu__link-title { color: var(--cyan); } .mega-menu__column:nth-child(3n + 2) .mega-menu__link--active .mega-menu__link-title { color: var(--red); } .mega-menu__column:nth-child(3n + 3) .mega-menu__link--active .mega-menu__link-title { color: var(--green); } @media (prefers-reduced-motion: no-preference) { .primary-nav__mega:hover .mega-menu__item .mega-menu__link { animation: megaMenuLinkIn 0.32s ease both; } .primary-nav__mega:hover .mega-menu__column:nth-child(1) .mega-menu__item:nth-child(1) .mega-menu__link { animation-delay: 0.04s; } .primary-nav__mega:hover .mega-menu__column:nth-child(1) .mega-menu__item:nth-child(2) .mega-menu__link { animation-delay: 0.08s; } .primary-nav__mega:hover .mega-menu__column:nth-child(1) .mega-menu__item:nth-child(3) .mega-menu__link { animation-delay: 0.12s; } .primary-nav__mega:hover .mega-menu__column:nth-child(1) .mega-menu__item:nth-child(4) .mega-menu__link { animation-delay: 0.16s; } .primary-nav__mega:hover .mega-menu__column:nth-child(1) .mega-menu__item:nth-child(5) .mega-menu__link { animation-delay: 0.2s; } .primary-nav__mega:hover .mega-menu__column:nth-child(2) .mega-menu__item:nth-child(1) .mega-menu__link { animation-delay: 0.06s; } .primary-nav__mega:hover .mega-menu__column:nth-child(2) .mega-menu__item:nth-child(2) .mega-menu__link { animation-delay: 0.1s; } .primary-nav__mega:hover .mega-menu__column:nth-child(2) .mega-menu__item:nth-child(3) .mega-menu__link { animation-delay: 0.14s; } .primary-nav__mega:hover .mega-menu__column:nth-child(2) .mega-menu__item:nth-child(4) .mega-menu__link { animation-delay: 0.18s; } .primary-nav__mega:hover .mega-menu__column:nth-child(3) .mega-menu__item:nth-child(1) .mega-menu__link { animation-delay: 0.08s; } .primary-nav__mega:hover .mega-menu__column:nth-child(3) .mega-menu__item:nth-child(2) .mega-menu__link { animation-delay: 0.12s; } .primary-nav__mega:hover .mega-menu__column:nth-child(3) .mega-menu__item:nth-child(3) .mega-menu__link { animation-delay: 0.16s; } } @keyframes megaMenuLinkIn { from { opacity: 0; } to { opacity: 1; } } .mega-menu__glance { margin-top: 16px; padding-top: 12px; border-top: 1px solid #1f1f1f; } .mega-menu__glance-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #888; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .mega-menu__glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mega-menu__glance-cell { text-align: center; background: #141414; padding: 10px 6px; border: 1px solid #1f1f1f; } .mega-menu__glance-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; line-height: 1.1; letter-spacing: 0.04em; } .mega-menu__glance-num--cyan { color: var(--cyan); } .mega-menu__glance-num--red { color: var(--red); } .mega-menu__glance-caption { font-family: 'JetBrains Mono', monospace; font-size: 8px; color: #888; letter-spacing: 0.08em; text-transform: uppercase; } /* Mobile mega (nested details under Indy Scene) */ .mobile-mega__summary-row, .mobile-mega__section-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; list-style: none; cursor: pointer; } .mobile-mega__parent-link { flex: 1; min-width: 0; text-decoration: none; } .mobile-mega__chevron, .mobile-mega__section-chevron { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 1px solid var(--border); border-radius: 999px; color: #111; } .mobile-mega__section-chevron { width: 30px; height: 26px; } .mobile-mega__chevron::after, .mobile-mega__section-chevron::after { content: '+'; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 800; line-height: 1; } details.mobile-mega[open] > summary .mobile-mega__chevron::after, details.mobile-mega__section[open] > summary .mobile-mega__section-chevron::after { content: '-'; } .mobile-mega__panel { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 8px 12px; border-left: 2px solid var(--border); margin-top: 6px; } .mobile-mega__section { border-radius: 6px; } .mobile-mega__heading { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); cursor: pointer; } .mobile-mega__heading-link { flex: 1; min-width: 0; text-decoration: none; } .mobile-mega__sub { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 8px 12px; } .mobile-mega__link, .mobile-mega__solo { font-size: 16px; font-weight: 600; color: #333; text-decoration: none; padding: 2px 0; } .mobile-mega__link:hover, .mobile-mega__solo:hover { color: var(--cyan); } details.mobile-mega > summary { list-style: none; } details.mobile-mega > summary::-webkit-details-marker { display: none; } details.mobile-mega__section > summary { list-style: none; } details.mobile-mega__section > summary::-webkit-details-marker { display: none; } .header-nav-desktop { display: none !important; } @media (min-width: 1024px) { .header-nav-desktop { display: flex !important; flex-shrink: 0; } /* Full row-height hit targets so moving down from a link stays “in” the nav until the mega panel (no dead zone under short links). */ .site-header__end .header-nav-desktop.primary-nav { min-height: 68px; align-items: stretch; } .site-header__end .header-nav-desktop.primary-nav .primary-nav__list > .primary-nav__item > .nav-item { display: flex; align-items: center; } .site-header__end .header-nav-desktop.primary-nav .primary-nav__list > .primary-nav__item--mega { display: flex; align-items: center; align-self: stretch; } } .header-search-md { display: none !important; } @media (min-width: 768px) { .header-search-md { display: flex !important; } } .header-subscribe-md { display: none !important; } @media (min-width: 768px) { .header-subscribe-md { display: inline-block !important; } } .header-menu-mobile { display: inline-flex; align-items: center; justify-content: center; } @media (min-width: 1024px) { .header-menu-mobile { display: none !important; } } .site-header .site-header__actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px; flex-shrink: 0; } .btn-header-menu { background: none; border: none; cursor: pointer; padding: 4px; } .btn-subscribe-header { background: var(--red); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; padding: 8px 20px; text-decoration: none; text-transform: uppercase; white-space: nowrap; } .btn-subscribe-header.is-disabled { opacity: 0.5; cursor: default; pointer-events: none; } .mobile-menu-panel { background: #fff; border-top: 1px solid var(--border); padding: 16px 24px; } .mobile-menu-inner { display: flex; flex-direction: column; gap: 14px; } .nav-item--mobile { font-size: 18px; } .ticker-shell { background: #0a0a0a; height: 36px; display: flex; align-items: center; overflow: hidden; } .ticker-badge-col { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid #222; flex-shrink: 0; height: 100%; } .ticker-live-label { font-size: 11px; color: var(--cyan); letter-spacing: 0.12em; } .ticker-track { flex: 1; height: 100%; display: flex; align-items: center; } .ticker-item-text { font-size: 13px; font-weight: 600; padding: 0 28px; } .ticker-date-col { font-size: 11px; color: #444; padding: 0 18px; border-left: 1px solid #222; flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; height: 100%; } .filter-bar-wrap { background: #fff; border-bottom: 1px solid var(--border); overflow-x: auto; } .filter-bar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 8px; min-width: max-content; } .filter-bar-label { margin-right: 6px; } /* Home: primary landmark is full width; Super Hero bleeds edge-to-edge; .main-shell constrains the rest. */ .site-main.site-main--home { display: block; width: 100%; max-width: none; } .main-shell { max-width: 1200px; margin: 0 auto; padding: 28px 24px; } .main-shell--single { padding: 40px 24px; } /* Optional ACF blocks (Settings → IndyGG home) below Deep Dive + sidebar, full width in main shell. */ .indy-home-after-hero { margin-top: 32px; margin-bottom: 0; } .indy-home-after-hero__block + .indy-home-after-hero__block { margin-top: 24px; } .content-sidebar-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; } .content-sidebar-grid--single { grid-template-columns: 1fr 300px; gap: 48px; align-items: start; } .sidebar-stack { display: flex; flex-direction: column; gap: 20px; } /* Header site search (GET form — query typed before submit). */ .header-search-form { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); padding: 4px 4px 4px 10px; background: #fff; flex-shrink: 1; min-width: 0; max-width: min(280px, 32vw); box-sizing: border-box; } .header-search-form__icon { flex-shrink: 0; color: #bbb; } .header-search-form__input { flex: 1 1 80px; min-width: 0; width: 100%; border: none; outline: none; background: transparent; font-family: 'Outfit', sans-serif; font-size: 13px; color: #111; padding: 4px 0; line-height: 1.3; } .header-search-form__input::placeholder { color: #aaa; } .header-search-form__submit { flex-shrink: 0; border: none; background: transparent; cursor: pointer; color: #888; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; padding: 6px 10px; white-space: nowrap; } .header-search-form__submit:hover { color: #111; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 900px) { .content-sidebar-grid, .content-sidebar-grid--single { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════ RESPONSIVE UTILITIES (Tailwind-like) Header uses .header-nav-desktop / .header-search-md / etc. instead of .hidden + breakpoints. ═══════════════════════════════════════ */ .hidden { display: none !important; } @media (min-width: 768px) { .md\:hidden { display: none !important; } .md\:flex { display: flex !important; } .md\:inline-block { display: inline-block !important; } } @media (min-width: 1024px) { .lg\:hidden { display: none !important; } .lg\:flex { display: flex !important; } } /* ═══════════════════════════════════════ INDY SCENE — landing + single (mock adaption) ═══════════════════════════════════════ */ .single-indy-scene-skin { --scene-accent: var(--cyan); --scene-accent-dark: #0099bb; --scene-accent-bg: rgba(0, 212, 255, 0.07); --scene-accent-text: #000; } .indy-scene-theme-college { --scene-accent: #00D4FF; --scene-accent-dark: #0099bb; --scene-accent-bg: rgba(0, 212, 255, 0.07); --scene-accent-text: #000; } .indy-scene-theme-highschool { --scene-accent: #FF3152; --scene-accent-dark: #cc1f3e; --scene-accent-bg: rgba(255, 49, 82, 0.07); --scene-accent-text: #fff; } .indy-scene-theme-youth { --scene-accent: #22C55E; --scene-accent-dark: #16a34a; --scene-accent-bg: rgba(34, 197, 94, 0.07); --scene-accent-text: #fff; } .indy-scene-theme-inclusive { --scene-accent: #A855F7; --scene-accent-dark: #7e22ce; --scene-accent-bg: rgba(168, 85, 247, 0.07); --scene-accent-text: #fff; } .indy-scene-theme-venues { --scene-accent: #f97316; --scene-accent-dark: #c2410c; --scene-accent-bg: rgba(249, 115, 22, 0.1); --scene-accent-text: #fff; } .indy-scene-theme-organizers { --scene-accent: #94a3b8; --scene-accent-dark: #64748b; --scene-accent-bg: rgba(148, 163, 184, 0.12); --scene-accent-text: #111; } .indy-scene-theme-default { --scene-accent: var(--cyan); --scene-accent-dark: #0099bb; --scene-accent-bg: rgba(0, 212, 255, 0.07); --scene-accent-text: #000; } .sec-head.scene-sec-head { color: var(--scene-accent); } .indy-scene-progress { background: linear-gradient(to right, var(--scene-accent), var(--red)); } /* Archive breadcrumb */ .indy-scene-archive__breadcrumb { background: var(--surface); border-bottom: 1px solid var(--border); } .indy-scene-archive__breadcrumb-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .indy-scene-archive__crumb--link { font-size: 11px; color: #aaa; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; } .indy-scene-archive__crumb--current { font-size: 11px; color: #111; letter-spacing: 0.05em; text-transform: uppercase; } .indy-scene-archive__crumb-sep { font-size: 11px; color: #ccc; } /* News landing (page template) */ .news-landing__breadcrumb { background: var(--surface); border-bottom: 1px solid var(--border); } .news-landing__breadcrumb-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .news-landing__crumb--link { font-size: 11px; color: #aaa; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; } .news-landing__crumb--current { font-size: 11px; color: #111; letter-spacing: 0.05em; text-transform: uppercase; } .news-landing__crumb-sep { font-size: 11px; color: #ccc; } .news-landing__page-title { margin: 0; } .main-shell--news-title { padding-bottom: 8px; } .news-landing__filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 16px; margin-top: 8px; width: 100%; } .news-landing__filter-field { min-width: 0; } .news-landing__filter-label { display: block; margin-bottom: 6px; font-size: 10px; color: #666; letter-spacing: 0.08em; text-transform: uppercase; } .indy-scene-archive__search-row--news { flex-wrap: wrap; align-items: center; gap: 12px; } .news-landing__card-grid.story-grid-2 { margin-top: 8px; } .empty-state__icon svg { opacity: 0.35; display: block; } /* Landing hero */ .scene-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #06060e 0%, #0c0e1e 55%, #080810 100%); } .scene-hero--compact { background: #0a0a12; border-bottom: 1px solid #1a1a28; } .hero-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.018) 60px, rgba(255, 255, 255, 0.018) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.018) 60px, rgba(255, 255, 255, 0.018) 61px); } .scene-hero__glow { position: absolute; pointer-events: none; border-radius: 50%; } .scene-hero__glow--a { bottom: -120px; left: -80px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 65%); } .scene-hero__glow--b { top: -80px; right: -40px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 49, 82, 0.07) 0%, transparent 65%); } .indy-scene-archive__hero-inner { max-width: 1200px; margin: 0 auto; padding: 56px 24px 52px; position: relative; z-index: 1; } .scene-hero--compact .indy-scene-archive__hero-inner { padding: 40px 24px 36px; } .indy-scene-archive__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .indy-scene-archive__eyebrow--compact { margin-bottom: 14px; } .indy-scene-archive__eyebrow-bar { width: 3px; height: 22px; background: var(--cyan); } .indy-scene-archive__eyebrow-bar--short { height: 18px; } .indy-scene-archive__eyebrow-text { font-size: 11px; color: var(--cyan); letter-spacing: 0.15em; text-transform: uppercase; } .indy-scene-archive__hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: end; margin-bottom: 48px; } .indy-scene-archive__hero-grid--compact { grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 0; } @media (max-width: 960px) { .indy-scene-archive__hero-grid { grid-template-columns: 1fr; } .indy-scene-archive__hero-grid--compact { grid-template-columns: 1fr; gap: 24px; } } .indy-scene-archive__headline { font-size: clamp(3rem, 6vw, 5rem); color: #fff; line-height: 0.98; margin-bottom: 20px; } .indy-scene-archive__headline--compact { font-size: clamp(2.4rem, 4.5vw, 3.8rem); margin-bottom: 12px; } .indy-scene-archive__headline-accent { color: var(--cyan); } .indy-scene-archive__dek { font-size: 17px; line-height: 1.7; color: #aaa; max-width: 520px; } .indy-scene-archive__dek--compact { font-size: 16px; line-height: 1.7; color: #888; max-width: 500px; } .indy-scene-archive__stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); align-self: end; } .indy-scene-archive__stat-grid--hero { display: none; grid-template-columns: repeat(4, 1fr); align-self: end; } @media (min-width: 768px) { .indy-scene-archive__stat-grid--hero { display: grid; } } .indy-scene-archive__stat-cell { background: rgba(0, 0, 0, 0.4); padding: 20px; text-align: center; } .indy-scene-archive__stat-grid--hero .indy-scene-archive__stat-cell { padding: 16px 22px; background: rgba(0, 0, 0, 0.5); } .indy-scene-archive__stat-num { font-size: 2.8rem; line-height: 1; } .indy-scene-archive__stat-num--compact { font-size: 2.2rem; } .indy-scene-archive__stat-num--cyan { color: var(--cyan); } .indy-scene-archive__stat-num--red { color: var(--red); } .indy-scene-archive__stat-num--green { color: #22C55E; } .indy-scene-archive__stat-num--purple { color: #A855F7; } .indy-scene-archive__stat-label { font-size: 10px; color: #666; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; } .indy-scene-archive__stat-grid--hero .indy-scene-archive__stat-label { font-size: 9px; color: #555; margin-top: 3px; } .indy-scene-archive__cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } @media (max-width: 1100px) { .indy-scene-archive__cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .indy-scene-archive__cat-grid { grid-template-columns: 1fr; } } .cat-card { position: relative; overflow: hidden; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; text-decoration: none; display: block; color: inherit; } .cat-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3); } .cat-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--cat-color); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; z-index: 2; } .cat-card:hover::before { transform: scaleX(1); } .cat-card__plate { min-height: 200px; position: relative; } .cat-card__glow { position: absolute; bottom: -40px; left: -40px; width: 200px; height: 200px; pointer-events: none; } .cat-card__accent-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0.5; } .cat-card-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; } .cat-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .cat-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; } .cat-card__title { font-size: 1.7rem; color: #fff; line-height: 1.05; margin-bottom: 4px; } .cat-card__desc { font-size: 12px; color: #888; line-height: 1.5; margin-top: 8px; } .cat-card__browse { margin-top: 14px; display: flex; align-items: center; gap: 6px; } .cat-card__browse .f-ui { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .featured-band.indy-scene-archive__featured { padding: 40px 0; } .indy-scene-archive__section { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .indy-scene-archive__section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .indy-scene-archive__section-rule { flex: 1; height: 1px; background: var(--border); } .indy-scene-archive__section-hint { font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: 0.06em; } .indy-scene-archive__featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1000px) { .indy-scene-archive__featured-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .indy-scene-archive__featured-grid { grid-template-columns: 1fr; } } .indy-scene-archive__featured-card { text-decoration: none; background: #fff; border: 1.5px solid var(--border); border-top: 3px solid var(--scene-accent, #111); display: block; transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; color: inherit; } .indy-scene-archive__featured-micro { height: 4px; background: color-mix(in srgb, var(--scene-accent, #111) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--scene-accent, #111) 19%, transparent); } .indy-scene-archive__featured-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } .indy-scene-archive__featured-body { padding: 16px; } .indy-scene-archive__featured-initial { width: 40px; height: 40px; border: 2px solid color-mix(in srgb, var(--scene-accent, #111) 25%, var(--border)); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .indy-scene-archive__featured-logo { width: 100%; height: 100%; display: block; object-fit: contain; } .indy-scene-archive__featured-initial-text { color: var(--scene-accent, #111); } .indy-scene-archive__featured-name { font-weight: 800; font-size: 14px; line-height: 1.3; color: #111; margin-bottom: 4px; } .indy-scene-archive__featured-byline { margin-bottom: 10px; } .indy-scene-archive__chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; } .game-chip { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 11px; background: var(--surface); border: 1px solid var(--border); padding: 2px 8px; color: #555; } .indy-scene-archive__chip-more { color: #aaa; } .status-yes--compact { font-size: 10px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; } .indy-scene-archive__featured-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Sticky filter bar (sits below sticky site header, min-height 68px) */ .indy-scene-archive__filters-sticky { position: sticky; top: 68px; z-index: 99; background: #fff; border-bottom: 2px solid var(--border); } .indy-scene-archive__filters-inner { max-width: 1200px; margin: 0 auto; } .indy-scene-archive__directory { padding: 0; margin: 0; max-width: none; } .indy-scene-archive__directory-surface { background: var(--surface); border-top: 1px solid var(--border); } .indy-scene-archive__directory-inner { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; } .indy-scene-archive__dir-label-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .indy-scene-archive__dir-label-title { flex-shrink: 0; } .indy-scene-archive__dir-label-count { font-size: 13px; color: #888; flex-shrink: 0; } .indy-scene-archive__dir-label-count strong { color: #111; } .indy-scene-archive__sort { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .indy-scene-archive__sort-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; } .sort-btn { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border: 1.5px solid var(--border); background: #fff; color: #888; cursor: pointer; transition: all 0.15s; } .sort-btn:hover { border-color: #aaa; color: #111; } .sort-btn--active { background: #111; border-color: #111; color: #fff; } .indy-scene-archive__filters-sticky .indy-scene-archive__search-panel { background: #fff; border: none; margin: 0; } .indy-scene-archive__search-panel { background: #fff; border: 1.5px solid var(--border); margin-bottom: 24px; } .indy-scene-archive__search-row { display: flex; align-items: stretch; gap: 10px; min-height: 46px; padding: 0 16px; border-bottom: 1px solid var(--border); } .indy-scene-archive__filters-sticky .indy-scene-archive__search-row { align-items: center; flex-wrap: wrap; } .indy-scene-archive__search-row .search-input { flex: 1; min-width: 50px; padding: 10px 0; } .indy-scene-archive__search-icon { color: #bbb; flex-shrink: 0; align-self: center; } .search-input { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500; border: none; outline: none; background: transparent; color: #111; width: 100%; } .search-input::placeholder { color: #aaa; } .indy-scene-archive__search-clear { background: none; border: none; cursor: pointer; color: #bbb; padding: 0; flex-shrink: 0; align-self: center; } .indy-scene-archive__search-divider { width: 1px; align-self: stretch; min-height: 28px; background: var(--border); flex-shrink: 0; } @media (max-width: 680px) { .indy-scene-archive__search-divider--hide-narrow { display: none; } } .indy-scene-archive__search-count { font-size: 11px; color: #bbb; white-space: nowrap; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; padding: 10px 0; } .indy-scene-archive__filter-row { padding: 10px 18px; display: flex; align-items: center; gap: 8px; overflow-x: auto; flex-wrap: wrap; } .indy-scene-archive__filter-row--inline { padding: 0; /* flex: 1 1 280px; */ min-width: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; border: none; } .indy-scene-archive__filter-row--inline-compact { flex: 1 1 240px; min-width: 220px; } .indy-scene-archive__filter-select-wrap { position: relative; display: flex; align-items: stretch; min-width: 50px; flex: 1 1 220px; } .indy-scene-archive__filter-select { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; border: 1.5px solid var(--border); background: #fff; color: #555; padding: 0 36px 0 14px; height: 32px; line-height: 32px; outline: none; appearance: none; width: 100%; cursor: pointer; } .indy-scene-archive__filter-select:hover { border-color: #aaa; color: #111; } .indy-scene-archive__filter-select:focus { border-color: #111; } .indy-scene-archive__filter-select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #aaa; font-size: 11px; } .indy-scene-archive__filter-label--inline { margin-right: 2px; } @media (max-width: 900px) { .indy-scene-archive__filters-sticky .indy-scene-archive__search-row { padding-top: 10px; padding-bottom: 10px; } .indy-scene-archive__filter-row--inline { flex-basis: 100%; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; } } /* Directory: Scholarships toggle (Teams archive) */ .indy-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1.5px solid var(--border); background: #fff; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .indy-toggle:hover { border-color: #aaa; } .indy-toggle[aria-pressed="true"] { border-color: #111; } .indy-toggle__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #666; } .indy-toggle[aria-pressed="true"] .indy-toggle__label { color: #111; } .indy-toggle__track { width: 34px; height: 18px; border-radius: 999px; border: 1px solid var(--border); background: #f4f4f4; position: relative; flex-shrink: 0; } .indy-toggle__thumb { width: 14px; height: 14px; border-radius: 999px; background: #bbb; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); transition: all 0.15s; } .indy-toggle__thumb--on { left: 18px; background: #111; } .indy-scene-archive__filter-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 6px 16px; min-height: 38px; } .indy-scene-archive__filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .indy-scene-archive__filter-chip { display: inline-flex; align-items: center; gap: 5px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; padding: 3px 9px; background: #111; color: #fff; border: none; cursor: pointer; } .indy-scene-archive__filter-chip:hover { background: #333; } .indy-scene-archive__filter-hint { font-size: 10px; color: #ccc; text-transform: uppercase; letter-spacing: 0.06em; } .indy-scene-archive__filter-clear-all { background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700; color: #aaa; text-decoration: underline; font-family: 'Outfit', sans-serif; } .indy-scene-archive__filter-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; margin-right: 4px; } .filter-pill { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; padding: 6px 14px; border: 1.5px solid var(--border); background: #fff; color: #666; cursor: pointer; transition: all 0.15s; white-space: nowrap; display: flex; align-items: center; gap: 5px; } .filter-pill:hover { border-color: #aaa; color: #111; } .filter-pill--active-all { background: #111; border-color: #111; color: #fff; } .filter-pill--active-college { background: #00D4FF; border-color: #00D4FF; color: #000; } .filter-pill--active-highschool { background: #FF3152; border-color: #FF3152; color: #fff; } .filter-pill--active-youth { background: #22C55E; border-color: #22C55E; color: #fff; } .filter-pill--active-inclusive { background: #A855F7; border-color: #A855F7; color: #fff; } .filter-pill--active-venues { background: #f97316; border-color: #f97316; color: #fff; } .filter-pill--active-organizers { background: #64748b; border-color: #64748b; color: #fff; } .indy-scene-archive__filter-count { font-size: 10px; opacity: 0.7; } .indy-scene-archive__card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 640px) { .indy-scene-archive__card-grid { grid-template-columns: 1fr; } } .prog-card { background: #fff; border: 1.5px solid var(--border); border-top: 3px solid var(--card-accent, var(--border)); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .prog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } .prog-card__accent { height: 3px; background: var(--card-accent, var(--border)); } .prog-card__body { padding: 18px; flex: 1; } .prog-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .prog-card__initial { width: 42px; height: 42px; border: 2px solid color-mix(in srgb, var(--card-accent, #111) 25%, var(--border)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .prog-card__logo { width: 100%; height: 100%; display: block; object-fit: contain; } .prog-card__initial-text { font-size: 1rem; color: var(--card-accent, #111); } .prog-card__tag { font-size: 10px; flex-shrink: 0; } .prog-card__title { font-weight: 800; font-size: 15px; line-height: 1.3; color: #111; margin-bottom: 3px; } .prog-card__status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .prog-card__status-item { display: inline-flex; align-items: center; gap: 4px; } .prog-card__status-item--muted .f-ui { color: #aaa; } .prog-card__status-dot { color: #ddd; font-size: 11px; } .prog-card__status-pub { margin-left: auto; } .dot-yes { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; flex-shrink: 0; } .dot-no { width: 8px; height: 8px; border-radius: 50%; background: #f87171; flex-shrink: 0; } .prog-card__footer { padding: 10px 18px; border-top: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; } .prog-card__foot-left { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.06em; } .prog-card__foot-left--muted { color: #ccc; } .prog-card__cta { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--card-accent, #111); } .empty-state { text-align: center; padding: 64px 24px; color: #aaa; } .empty-state__icon { font-size: 3rem; margin-bottom: 12px; } .empty-state__title { font-size: 2rem; color: #ccc; margin-bottom: 8px; } .empty-state__text { font-size: 14px; color: #bbb; margin-bottom: 20px; } .empty-state__btn { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; padding: 10px 24px; background: #111; color: #fff; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; } .indy-scene-archive__load-more-wrap { text-align: center; margin-top: 32px; } .indy-scene-archive__load-more { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; padding: 12px 40px; background: #fff; border: 1.5px solid var(--border); color: #555; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; } .indy-scene-archive__load-more:hover { border-color: #111; color: #111; } .indy-scene-archive__load-more-meta { font-size: 11px; color: #aaa; margin-left: 8px; } .indy-scene-archive__cta { background: #0a0a12; border-top: 1px solid #1a1a2e; padding: 48px 24px; } .indy-scene-archive__cta-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } @media (max-width: 800px) { .indy-scene-archive__cta-inner { grid-template-columns: 1fr; } } .indy-scene-archive__cta-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .indy-scene-archive__cta-eyebrow-text { font-size: 11px; color: var(--cyan); letter-spacing: 0.15em; text-transform: uppercase; } .indy-scene-archive__cta-title { font-size: 2.2rem; color: #fff; line-height: 1.05; margin-bottom: 10px; } .indy-scene-archive__cta-dek { font-size: 15px; color: #888; line-height: 1.65; max-width: 560px; } .indy-scene-archive__cta-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .indy-scene-archive__cta-primary { display: block; text-align: center; background: var(--cyan); color: #000; font-weight: 800; font-size: 14px; padding: 14px 32px; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; } .indy-scene-archive__cta-secondary { display: block; text-align: center; background: transparent; color: #888; font-weight: 700; font-size: 13px; padding: 10px 32px; text-decoration: none; text-transform: uppercase; border: 1.5px solid #333; } /* Single profile */ .profile-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #08090f 0%, #0d1020 60%, #08080f 100%); } .profile-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--scene-accent); } .hero-glow-a { position: absolute; bottom: -100px; left: -60px; width: 500px; height: 500px; background: radial-gradient(circle, var(--scene-accent-bg) 0%, transparent 65%); pointer-events: none; } .hero-glow-b { position: absolute; top: -60px; right: 40px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255, 49, 82, 0.08) 0%, transparent 65%); pointer-events: none; } .indy-scene-single__hero-shell { max-width: 1200px; margin: 0 auto; padding: 48px 24px 40px 32px; position: relative; z-index: 1; } .indy-scene-single__hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; } @media (max-width: 768px) { .indy-scene-single__hero-grid { grid-template-columns: 1fr; } } .indy-scene-single__hero-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .indy-scene-single__hero-meta, .indy-scene-single__hero-loc { font-size: 11px; color: #666; } .indy-scene-single__title { font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; line-height: 1.04; margin-bottom: 8px; } .indy-scene-single__dek { font-size: 17px; color: #aaa; font-weight: 500; margin-bottom: 24px; } .indy-scene-single__status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; } .status-yes { display: inline-flex; align-items: center; gap: 5px; background: #f0fdf4; color: #16a34a; font-weight: 700; font-size: 12px; padding: 4px 10px; border: 1.5px solid #bbf7d0; } .status-no { display: inline-flex; align-items: center; gap: 5px; background: #fef2f2; color: #dc2626; font-weight: 700; font-size: 12px; padding: 4px 10px; border: 1.5px solid #fecaca; } .status-maybe { display: inline-flex; align-items: center; gap: 5px; background: #fefce8; color: #ca8a04; font-weight: 700; font-size: 12px; padding: 4px 10px; border: 1.5px solid #fef08a; } .indy-scene-single__games-label { margin-bottom: 10px; color: #555; } .indy-scene-single__game-list { display: flex; gap: 8px; flex-wrap: wrap; } .game-pill { display: inline-block; background: var(--surface); border: 1.5px solid var(--border); font-weight: 700; font-size: 12px; padding: 5px 12px; color: #333; } .indy-scene-single__logo-block { flex-shrink: 0; text-align: center; padding-top: 8px; display: none; } @media (min-width: 768px) { .indy-scene-single__logo-block { display: block; } } .indy-scene-single__logo-frame { width: 120px; height: 120px; border: 3px solid var(--scene-accent); margin: 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0a0a12; } .indy-scene-single__logo-img { width: 100%; height: 100%; object-fit: cover; } .indy-scene-single__logo-placeholder { width: 120px; height: 120px; border: 3px solid var(--scene-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto; background: rgba(0, 0, 0, 0.25); } .indy-scene-single__logo-initials { font-size: 3rem; color: var(--scene-accent); line-height: 1; } .indy-scene-single__main { max-width: 1200px; margin: 0 auto; padding: 36px 24px; } .indy-scene-single__grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; } @media (max-width: 900px) { .indy-scene-single__grid { grid-template-columns: 1fr; } } .indy-scene-single__aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; } @media (max-width: 900px) { .indy-scene-single__aside { position: static; } } .verified-bar { background: var(--scene-accent-bg); border: 1px solid var(--scene-accent); padding: 10px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 32px; } .verified-bar svg { color: var(--scene-accent); flex-shrink: 0; } .verified-bar__text { font-size: 11px; color: #555; letter-spacing: 0.06em; text-transform: uppercase; } .verified-bar__strong { color: #111; } .verified-bar__sep { margin: 0 0.25em; } .verified-bar__link { color: var(--scene-accent); text-decoration: none; font-weight: 700; } .indy-scene-section { margin-bottom: 36px; } .indy-scene-section__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .indy-scene-section__rule { flex: 1; height: 1px; background: var(--border); } .indy-scene-section__hint { font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: 0.06em; } .facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .facts-grid-header { background: var(--scene-accent-bg); border-left: 3px solid var(--scene-accent); grid-column: 1 / -1; padding: 10px 20px; display: flex; align-items: center; gap: 8px; } .facts-grid-header svg { color: var(--scene-accent); } .facts-grid-header__label { font-size: 10px; color: var(--scene-accent); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; } .fact-cell { background: #f9fafb; padding: 16px 20px; } .fact-cell:hover { background: #f3f4f6; } .fact-cell--full { grid-column: 1 / -1; background: #f3f4f6; } .fact-cell--games { grid-column: 1 / -1; } .fact-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 6px; } .fact-value { font-weight: 700; font-size: 15px; color: #111; line-height: 1.3; } .fact-value a { color: var(--scene-accent); text-decoration: none; } .fact-value a:hover { text-decoration: underline; } .fact-value--row { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .fact-note { font-size: 13px; color: #666; margin-top: 8px; line-height: 1.5; } .team-card { background: #f9fafb; border: 1.5px solid var(--border); border-top: 3px solid var(--scene-accent); padding: 18px 20px; transition: box-shadow 0.2s, transform 0.2s; } .team-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); transform: translateY(-2px); } .indy-scene-single__team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 640px) { .indy-scene-single__team-grid { grid-template-columns: 1fr; } } .indy-scene-team-card { text-decoration: none; color: inherit; display: block; } .indy-scene-team-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; gap: 8px; } .indy-scene-team-card__name { font-size: 1.4rem; color: #111; line-height: 1.1; } .indy-scene-team-card__link { font-size: 10px; color: var(--scene-accent); letter-spacing: 0.04em; text-transform: uppercase; } .contact-card { background: #0a0a12; border-left: 4px solid var(--scene-accent); padding: 20px 24px; } .contact-card__inner { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; justify-content: space-between; } .contact-card__person { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 220px; } .contact-card__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--scene-accent); color: var(--scene-accent-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex-shrink: 0; } .contact-card__name { font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 2px; } .contact-card__title { margin-bottom: 8px; color: #999; } .contact-card__email { font-size: 12px; color: var(--scene-accent); text-decoration: none; letter-spacing: 0.03em; } .contact-card__social { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; } .social-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; padding: 8px 14px; border: 1.5px solid var(--border); color: #555; text-decoration: none; transition: all 0.15s; background: #fff; } .social-btn:hover { border-color: #aaa; color: #111; } .social-btn--dark { background: transparent; border-color: #333; color: #aaa; } .social-btn--full { width: 100%; justify-content: center; } .indy-scene-angles { background: var(--surface); border: 1.5px solid var(--border); border-top: 3px solid var(--scene-accent); padding: 0 20px; } .angle-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f4f4f4; align-items: flex-start; } .angle-item--last { border-bottom: none; } .angle-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: #e4e4e4; flex-shrink: 0; line-height: 1.1; } .angle-text { font-size: 14px; font-weight: 600; color: #333; line-height: 1.5; } .indy-scene-single__about { max-width: 680px; } .indy-scene-single__about p { font-family: 'Outfit', sans-serif; font-size: 16px; line-height: 1.8; color: #333; } .indy-scene-glance { background: #fff; border: 1.5px solid var(--border); border-top: 3px solid var(--scene-accent); } .indy-scene-glance--plain { border-top-color: var(--border); } .indy-scene-glance__head { padding: 14px 18px; border-bottom: 1px solid var(--border); } .indy-scene-glance__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #f4f4f4; gap: 12px; } .indy-scene-glance__k { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 0.06em; } .indy-scene-glance__v { font-weight: 700; font-size: 13px; } .indy-scene-glance__stat { font-size: 1.3rem; color: var(--scene-accent); } .indy-scene-glance__block { padding: 12px 18px; border-bottom: 1px solid #f4f4f4; } .indy-scene-glance__block--last { border-bottom: none; } .indy-scene-glance__web { font-weight: 700; font-size: 13px; color: var(--scene-accent); text-decoration: none; } .indy-scene-glance__socials { padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; } .indy-scene-glance--verified { flex-direction: row; align-items: center; gap: 10px; padding: 14px 18px; border-top: none; } .indy-scene-glance--verified svg { color: var(--scene-accent); flex-shrink: 0; } .indy-scene-glance__verified-date { font-weight: 700; font-size: 13px; color: #111; margin-top: 2px; } .indy-scene-cta-card { padding: 18px; background: var(--surface); border-top-width: 1px; } .indy-scene-cta-card__title { font-weight: 800; font-size: 15px; color: #111; margin-bottom: 6px; } .indy-scene-cta-card__text { font-size: 13px; color: #666; line-height: 1.55; margin-bottom: 14px; } .indy-scene-cta-card__btn { display: block; text-align: center; background: var(--scene-accent); color: var(--scene-accent-text); font-weight: 700; font-size: 13px; padding: 10px; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; } .indy-scene-related { background: var(--surface); border-top: 1px solid var(--border); padding: 48px 0; } .indy-scene-related__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .indy-scene-related__head { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .indy-scene-related__all { font-weight: 700; font-size: 12px; color: #aaa; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; } .indy-scene-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .indy-scene-related__grid { grid-template-columns: 1fr; } } .indy-scene-rel-card { text-decoration: none; background: #fff; border: 1.5px solid var(--border); overflow: hidden; display: block; color: inherit; transition: transform 0.2s, box-shadow 0.2s; } .indy-scene-rel-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); } .indy-scene-rel-card__bar { height: 6px; background: var(--scene-accent); } .indy-scene-rel-card__body { padding: 18px; } .indy-scene-rel-card__title { font-weight: 800; font-size: 15px; color: #111; line-height: 1.2; margin-bottom: 6px; } .indy-scene-rel-card__games { margin-top: 12px; } /* ═══════════════════════════════════════ STAT ITEM TYPOGRAPHY ═══════════════════════════════════════ */ .stat-item__value { font-size: 2.2rem; color: var(--stat-color, #111); } .stat-item__label { font-size: 10px; color: #888; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; } /* ═══════════════════════════════════════ SITE BREADCRUMB ═══════════════════════════════════════ */ .site-breadcrumb { background: var(--surface); border-bottom: 1px solid var(--border); } .site-breadcrumb__inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 8px; } .site-breadcrumb__link { font-size: 11px; color: #aaa; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; } .site-breadcrumb__sep { font-size: 11px; color: #ccc; } .site-breadcrumb__current { font-size: 11px; color: #111; letter-spacing: 0.05em; text-transform: uppercase; } /* ═══════════════════════════════════════ ARCHIVE LAYOUT (generic blog archive) ═══════════════════════════════════════ */ /* Category Featured archive — compact hero (full width, narrow height) */ .archive-hero-compact { position: relative; overflow: hidden; background: linear-gradient(135deg, #06060f 0%, #0c0c22 55%, #06060f 100%); border-bottom: 1px solid #1a1a2e; } .archive-hero-compact::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); z-index: 2; } .archive-hero-compact__grid { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.018) 60px, rgba(255, 255, 255, 0.018) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.018) 60px, rgba(255, 255, 255, 0.018) 61px); } .archive-hero-compact__glow { position: absolute; bottom: -100px; left: -80px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0, 212, 255, 0.14) 0%, transparent 65%); } .archive-hero-compact__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 26px 24px 30px; } .archive-hero-compact__eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin: 0 0 10px; } .archive-hero-compact__title { font-size: clamp(2rem, 4vw, 2.65rem); color: #fff; line-height: 1.05; letter-spacing: 0.04em; margin: 0 0 10px; } .archive-hero-compact__desc { font-size: 15px; line-height: 1.55; color: #9ca3af; max-width: 560px; margin: 0; } .archive-hero-compact__desc--rich p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } .archive-shell { max-width: 1200px; margin: 0 auto; padding: 28px 24px; } .archive-shell__header { margin-bottom: 32px; } .archive-shell__title { font-size: 2.5rem; color: #111; margin-bottom: 8px; } .archive-shell__desc { max-width: 600px; } .archive-shell__grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; } .archive-shell__sidebar { display: flex; flex-direction: column; gap: 20px; } .archive-shell__section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .archive-shell__rule { flex: 1; height: 1px; background: var(--border); } .archive-shell__card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } @media (max-width: 900px) { .archive-shell__grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .archive-shell__card-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════ STORY CARD (archive grid, top stories, card component) ═══════════════════════════════════════ */ .story-card { text-decoration: none; background: #fff; border: 1.5px solid var(--border); display: block; overflow: hidden; color: inherit; } .story-card__media { position: relative; height: 190px; } .story-card__media--150 { height: 150px; } .story-card__media--250 { height: 250px; } .story-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .story-card__tag-corner { position: absolute; top: 14px; left: 14px; } .story-card__num { position: absolute; bottom: 10px; right: 14px; font-size: 72px; color: #fff; opacity: 0.07; line-height: 1; } .story-card__num--48 { font-size: 48px; } .story-card__body { padding: 18px; } .story-card__body .headline-sm { margin-bottom: 8px; } .story-card__body .body-text { margin-bottom: 12px; } .story-card__meta { display: flex; justify-content: space-between; align-items: center; } .story-card__read-time { font-size: 11px; color: var(--cyan); } .section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .section-heading__rule { flex: 1; height: 1px; background: var(--border); } .section-heading__link { font-weight: 700; font-size: 12px; color: #aaa; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; } .story-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } @media (max-width: 640px) { .story-grid-2 { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════ RELATED ARTICLES (blog) ═══════════════════════════════════════ */ .rel-card__media { position: relative; height: 170px; } .rel-card__tag-corner { position: absolute; top: 14px; left: 14px; } .rel-card__num { position: absolute; bottom: 10px; right: 14px; font-size: 60px; color: #fff; opacity: 0.07; line-height: 1; } .rel-card__body { padding: 16px; } .rel-card__title { font-weight: 800; font-size: 15px; line-height: 1.4; color: #111; margin-bottom: 8px; } /* ═══════════════════════════════════════ SHARE BARS ═══════════════════════════════════════ */ .share-bar-top { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .share-bar-top__label { font-size: 13px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; } .share-bar-top__reading { margin-left: auto; font-size: 11px; color: #bbb; text-transform: uppercase; letter-spacing: 0.06em; } .share-bar-bottom { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--border); flex-wrap: wrap; } .share-bar-bottom__prompt { font-size: 14px; font-weight: 700; color: #111; } .share-bar-bottom__actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } /* ═══════════════════════════════════════ SIDEBAR FEEDS (more stories, latest, rankings shell) ═══════════════════════════════════════ */ .sidebar-feed { background: #fff; border: 1.5px solid var(--border); border-top: 3px solid var(--cyan); margin-bottom: 20px; } .sidebar-feed--flush { margin-bottom: 0; } .sidebar-feed--accent-red { border-top-color: var(--red); } .sidebar-feed__head { padding: 12px 16px; border-bottom: 1px solid var(--border); } .sidebar-feed__head--flex { display: flex; align-items: center; gap: 8px; } .sidebar-feed__head--roomy { padding: 14px 18px; } .sidebar-feed__head .sec-head.sidebar-feed__title--live { color: var(--red); } .sidebar-feed__row { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f4f4f4; text-decoration: none; background: #fff; transition: background 0.15s; } .sidebar-feed__row:hover { background: #fafafa; } .sidebar-feed__row--roomy { gap: 12px; padding: 13px 18px; } .sidebar-feed__row:last-child { border-bottom: none; } .sidebar-feed__row-body { flex: 1; min-width: 0; } .sidebar-feed__row-title { font-weight: 600; font-size: 13px; line-height: 1.4; color: #111; } .sidebar-feed__row-title--lg { font-size: 13.5px; } .sidebar-feed__byline { flex-shrink: 0; padding-top: 2px; } .sidebar-feed__footer { padding: 12px 18px; } /* Featured Stories sidebar block (editor picks) */ .feat-stories { background: #fff; border: 1.5px solid var(--border); border-top: 3px solid var(--cyan); margin-bottom: 20px; } .feat-stories__header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .feat-stories__eyebrow { font-size: 9px; color: #bbb; letter-spacing: 0.1em; text-transform: uppercase; } .feat-stories__row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #f2f2f2; text-decoration: none; background: #fff; color: inherit; position: relative; overflow: hidden; transition: background 0.18s; } .feat-stories__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cyan); transform: scaleY(0); transform-origin: bottom; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .feat-stories__row:hover { background: #fafbfc; } .feat-stories__row:hover::before { transform: scaleY(1); } .feat-stories__rank { font-size: 1.5rem; color: #e0e0e0; line-height: 1; flex-shrink: 0; min-width: 22px; letter-spacing: 0.04em; transition: color 0.2s; } .feat-stories__row:hover .feat-stories__rank { color: var(--cyan); } .feat-stories__body { flex: 1; min-width: 0; } .feat-stories__title { font-weight: 700; font-size: 13px; line-height: 1.4; color: #111; margin-bottom: 5px; transition: color 0.18s; } .feat-stories__row:hover .feat-stories__title { color: #000; } .feat-stories__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .feat-stories__pin { width: 28px; height: 28px; flex-shrink: 0; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2); display: flex; align-items: center; justify-content: center; align-self: center; transition: background 0.2s, border-color 0.2s; } .feat-stories__row:hover .feat-stories__pin { background: rgba(0, 212, 255, 0.15); border-color: var(--cyan); } .feat-stories__pin-svg { width: 13px; height: 13px; color: var(--cyan); } .feat-stories__footer { padding: 12px 18px; } .feat-stories__cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1.5px solid var(--border); padding: 10px 16px; text-decoration: none; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #111; position: relative; overflow: hidden; transition: border-color 0.2s, color 0.2s; } .feat-stories__cta::after { content: ""; position: absolute; inset: 0; background: var(--cyan); transform: translateX(-101%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .feat-stories__cta:hover { border-color: var(--cyan); color: #000; } .feat-stories__cta:hover::after { transform: translateX(0); } .feat-stories__cta span, .feat-stories__cta svg { position: relative; z-index: 1; } .feat-stories__cta svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; } .feat-stories__cta:hover svg { transform: translateX(4px); } /* Post sidebar: ACF related Events / Teams / Venues / Organizations */ .post-related-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .related-widget { --rw-accent: var(--cyan); border: 1.5px solid var(--border); border-left: 3px solid var(--rw-accent, var(--cyan)); background: #fff; overflow: hidden; } .related-widget__header { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .related-widget__icon { color: var(--rw-accent, var(--cyan)); display: flex; align-items: center; flex-shrink: 0; } .related-widget__svg { width: 13px; height: 13px; display: block; vertical-align: middle; } .related-widget__svg--arrow { color: #ddd; flex-shrink: 0; transition: color 0.15s, transform 0.15s; } .related-widget__label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; font-weight: 500; } .related-widget__count { margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: #bbb; letter-spacing: 0.06em; } .related-widget__row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background 0.15s; color: inherit; } .related-widget__row:last-child { border-bottom: none; } .related-widget__row:hover { background: var(--surface); } .related-widget__row:hover .related-widget__title { color: var(--rw-accent, var(--cyan)); } .related-widget__row:hover .related-widget__svg--arrow { color: var(--rw-accent, var(--cyan)); transform: translateX(2px); } .related-widget__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rw-accent, var(--cyan)); flex-shrink: 0; opacity: 0.6; } .related-widget__title { font-weight: 700; font-size: 13px; color: #111; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .related-widget__meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: #bbb; letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; } .sidebar-feed__foot-link { font-weight: 700; font-size: 12px; color: var(--cyan); text-decoration: none; } .sidebar-feed__foot { padding: 10px 16px; text-align: right; border-top: 1px solid var(--border); } .sidebar-trend__row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px; border-bottom: 1px solid #f4f4f4; text-decoration: none; background: #fff; transition: background 0.15s; } .sidebar-trend__row:hover { background: #fafafa; } .sidebar-trend__row:last-child { border-bottom: none; } .sidebar-trend__idx { font-size: 1.6rem; color: #e4e4e4; flex-shrink: 0; line-height: 1.2; } .sidebar-trend__title { font-weight: 600; font-size: 13.5px; color: #333; line-height: 1.4; } .sidebar-panel { background: #fff; border: 1.5px solid var(--border); } .sidebar-panel__head { padding: 14px 18px; border-bottom: 1px solid var(--border); } .sidebar-rankings__row { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #f4f4f4; } .sidebar-rankings__rank { font-size: 11px; color: #ccc; width: 18px; flex-shrink: 0; text-align: center; } .sidebar-rankings__body { flex: 1; min-width: 0; } .sidebar-rankings__name { font-weight: 700; font-size: 14px; } .sidebar-rankings__fill-wrap { margin-top: 4px; } .sidebar-rankings__fill-wrap .rank-fill { width: var(--rank-fill, 0%); max-width: 100%; } .sidebar-rankings__reg { font-size: 10px; color: #ccc; } .sidebar-rankings__delta { font-size: 11px; font-weight: 500; } .sidebar-rankings__delta--up { color: var(--cyan); } .sidebar-rankings__delta--dn { color: var(--red); } .live-compact__match { padding: 14px 16px; } .live-compact__match--border { border-bottom: 1px solid var(--border); } .live-compact__head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .live-compact__teams { display: flex; align-items: center; justify-content: space-between; } .live-compact__team { font-size: 18px; color: #111; } .live-compact__score { font-size: 24px; color: var(--cyan); } .sidebar-newsletter { background: var(--cyan); padding: 22px; } .sidebar-newsletter__title { font-size: 1.5rem; color: #000; margin-bottom: 4px; } .sidebar-newsletter__text { font-size: 13px; color: #0a5060; margin-bottom: 14px; } .sidebar-newsletter__field { display: block; width: 100%; border: none; padding: 10px 14px; font-family: 'Outfit', sans-serif; font-size: 14px; margin-bottom: 8px; outline: none; color: #111; } .sidebar-event-promo { background: #0a0a0a; border-left: 4px solid var(--red); padding: 22px; } .sidebar-event-promo__title { font-size: 1.65rem; color: #fff; margin-bottom: 6px; } .sidebar-event-promo__text { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 14px; } .sidebar-event-promo__meta { font-size: 11px; color: var(--cyan); margin-bottom: 14px; } .sidebar-camp-promo { background: #0a0a0a; border-left: 4px solid #22c55e; padding: 22px; } .sidebar-camp-promo__kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #777; margin-bottom: 10px; } .sidebar-camp-promo__title { font-size: 1.65rem; color: #fff; margin-bottom: 8px; } .sidebar-camp-promo__dates { margin-bottom: 14px; } .sidebar-camp-promo__date-primary { font-size: 13px; color: #888; line-height: 1.6; margin-bottom: 2px; } .sidebar-camp-promo__date-secondary { font-size: 11px; color: #22c55e; } /* ═══════════════════════════════════════ DEEP DIVE SECTION ═══════════════════════════════════════ */ .deep-dive { background: #0a0a12; border-left: 4px solid var(--cyan); padding: 28px 32px; position: relative; overflow: hidden; } .deep-dive__sheen { position: absolute; top: 0; right: 0; width: 280px; height: 100%; background: linear-gradient(to left, rgba(0, 212, 255, 0.06), transparent); pointer-events: none; } .deep-dive__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .deep-dive__meta { font-size: 11px; color: #555; } .deep-dive__title { font-size: 2.1rem; color: #fff; line-height: 1.1; margin-bottom: 12px; max-width: 580px; } .deep-dive__excerpt { font-size: 15px; line-height: 1.65; color: #888; margin-bottom: 20px; max-width: 540px; } .deep-dive__footer { display: flex; align-items: center; justify-content: space-between; } .deep-dive__author-row { display: flex; align-items: center; gap: 10px; } .deep-dive__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .deep-dive__author-name { font-weight: 700; font-size: 14px; color: #fff; } .deep-dive__link { color: var(--cyan); font-size: 14px; } .deep-dive__link:hover, .deep-dive__link:focus-visible { color: #fff; } /* ═══════════════════════════════════════ LIVE SCORES (homepage section) ═══════════════════════════════════════ */ .live-scores { background: var(--surface); border: 1px solid var(--border); margin-bottom: 32px; } .live-scores__head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .live-scores__title { font-weight: 800; font-size: 13px; color: var(--red); letter-spacing: 0.05em; text-transform: uppercase; } .live-scores__date { font-size: 11px; color: #aaa; margin-left: auto; } .live-scores__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .live-scores__cell { padding: 18px 22px; } .live-scores__cell--divider { border-left: 1px solid var(--border); } .live-scores__match-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .live-scores__teams { display: flex; align-items: center; justify-content: space-between; } .live-scores__team-col { text-align: center; } .live-scores__abbr { font-size: 22px; color: #fff; background: #111; padding: 4px 12px; display: inline-block; } .live-scores__byline-push { margin-top: 5px; } .live-scores__score { font-size: 26px; color: #ccc; } .live-scores__score--live { font-size: 34px; color: var(--cyan); } .live-scores__foot { padding: 10px 20px; border-top: 1px solid var(--border); text-align: right; } .live-scores__foot-link { font-weight: 700; font-size: 13px; color: var(--cyan); text-decoration: none; } /* ═══════════════════════════════════════ SCORE CARD COMPONENT ═══════════════════════════════════════ */ .score-card-panel { padding: 18px 22px; } .score-card-panel--compact { padding: 14px 16px; } .score-card-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .score-card-panel--compact .score-card-panel__head { margin-bottom: 10px; } .score-card-abbr { font-size: 22px; color: #fff; background: #111; padding: 4px 12px; display: inline-block; } .score-card-panel--compact .score-card-abbr { font-size: 18px; } .score-card-panel__teams { display: flex; align-items: center; justify-content: space-between; } .score-card-panel__col { text-align: center; } .score-card-mid-score { font-size: 34px; color: var(--cyan); } .score-card-panel--compact .score-card-mid-score { font-size: 24px; } .score-card-mid-score--idle { color: #ccc; } .score-card-byline-gap { margin-top: 5px; } /* ═══════════════════════════════════════ AUTHOR BIO + TAGS ROW ═══════════════════════════════════════ */ .author-bio-card { margin-top: 40px; padding: 28px; background: #0a0a12; border-left: 4px solid var(--cyan); display: flex; gap: 20px; align-items: flex-start; } .author-bio-card__avatar-wrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .author-bio-card__avatar-fallback { width: 64px; height: 64px; border-radius: 50%; background: var(--cyan); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex-shrink: 0; } .author-bio-card__body { flex: 1; } .author-bio-card__name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; } .author-bio-card__name { font-weight: 800; font-size: 17px; color: #fff; } .author-bio-card__byline { margin-bottom: 10px; } .author-bio-card__text { font-size: 14px; line-height: 1.65; color: #888; } .author-bio-card__links { display: flex; gap: 12px; margin-top: 14px; } .author-bio-card__link { color: var(--cyan); font-size: 13px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 5px; } .author-bio-card__link--muted { color: #aaa; display: inline; } .single-tags-row { display: flex; align-items: center; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; } .single-tags-row__label { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 0.06em; } /* ═══════════════════════════════════════ HERO GRID (home) ═══════════════════════════════════════ */ .hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 3px; margin-bottom: 3px; } @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } } .hero-grid__main { position: relative; min-height: 520px; overflow: hidden; } .hero-grid__bg { position: absolute; inset: 0; } .hero-grid__blob-cyan { position: absolute; bottom: -80px; left: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 212, 255, 0.18) 0%, transparent 65%); } .hero-grid__blob-red { position: absolute; top: -40px; right: 60px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(255, 49, 82, 0.12) 0%, transparent 65%); } .hero-grid__grid-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.025) 60px, rgba(255, 255, 255, 0.025) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.025) 60px, rgba(255, 255, 255, 0.025) 61px); } .hero-grid__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; } .hero-grid__tags-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .hero-grid__read-mono { font-size: 11px; color: #888; } .hero-grid__headline { margin-bottom: 14px; max-width: 580px; } .hero-grid__excerpt { color: #bbb; margin-bottom: 20px; max-width: 500px; font-size: 15px; line-height: 1.6; } .hero-grid__meta-row { display: flex; align-items: center; justify-content: space-between; } .hero-grid__author-bit { display: flex; align-items: center; gap: 10px; } .hero-grid__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cyan); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .hero-grid__author-name { font-weight: 700; font-size: 14px; color: #fff; } .hero-grid__side { display: flex; flex-direction: column; gap: 3px; } .hero-grid__side-card { position: relative; flex: 1; overflow: hidden; min-height: 256px; cursor: pointer; text-decoration: none; color: inherit; } .hero-grid__side-bg { position: absolute; inset: 0; } .hero-grid__side-blob { position: absolute; top: -30px; right: -30px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 49, 82, 0.2) 0%, transparent 65%); } .hero-grid__side-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; } .hero-grid__side-tag { margin-bottom: 10px; } .hero-grid__side-title { margin-bottom: 8px; } /* ═══════════════════════════════════════ SHARED PRIMARY CTA (“Read Story” / hero mock) ═══════════════════════════════════════ */ .indy-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 11px 22px; text-decoration: none; border: 1.5px solid transparent; position: relative; overflow: hidden; transform: scale(1); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.3s; } .indy-cta::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateX(-101%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .indy-cta:hover { transform: scale(1.04); box-shadow: 0 8px 28px var(--indy-cta-glow); } .indy-cta:hover::after { transform: translateX(101%); } .indy-cta svg { position: relative; z-index: 1; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .indy-cta:hover svg { transform: translateX(4px); } .indy-cta span { position: relative; z-index: 1; } .indy-cta--cyan { background: var(--cyan); color: #000; --indy-cta-glow: rgba(0, 212, 255, 0.35); } .indy-cta--red { background: var(--red); color: #fff; --indy-cta-glow: rgba(255, 49, 82, 0.35); } .indy-cta--green { background: #22c55e; color: #000; --indy-cta-glow: rgba(34, 197, 94, 0.35); } button.indy-cta { appearance: none; -webkit-appearance: none; margin: 0; font: inherit; cursor: pointer; } /* Full-width stacked sidebar / band CTAs */ .indy-cta--block { display: flex; width: 100%; box-sizing: border-box; justify-content: center; align-items: center; } .indy-cta--block:hover { transform: scale(1.02); box-shadow: 0 8px 28px var(--indy-cta-glow); } /* Outline / light surface (e.g. Latest Stories “All stories”) */ .indy-cta--neutral { background: #fff; color: #666; border-color: var(--border); --indy-cta-glow: rgba(0, 0, 0, 0.14); } .indy-cta--neutral::after { background: rgba(0, 212, 255, 0.14); } /* Dark fill on bright bands (e.g. newsletter submit on cyan) */ .indy-cta--inverse { background: #000; color: #fff; --indy-cta-glow: rgba(0, 0, 0, 0.4); } .indy-cta--inverse::after { background: rgba(255, 255, 255, 0.22); } button.indy-cta:disabled, button.indy-cta[disabled] { opacity: 0.55; cursor: not-allowed; } button.indy-cta:disabled:hover, button.indy-cta[disabled]:hover { transform: none; box-shadow: none; } button.indy-cta:disabled::after, button.indy-cta[disabled]::after { transform: translateX(-101%); } /* ═══════════════════════════════════════ Text “read more” links (arrow nudge) ═══════════════════════════════════════ */ .indy-read-more { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; font-weight: 700; transition: color 0.2s ease; } .indy-read-more__arrow { display: inline-flex; flex-shrink: 0; align-items: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .indy-read-more__arrow svg { width: 1em; height: 1em; display: block; } .indy-read-more:hover .indy-read-more__arrow, .indy-read-more:focus-visible .indy-read-more__arrow { transform: translateX(6px); } /* ═══════════════════════════════════════ SUPER HERO (home / news posts index) ═══════════════════════════════════════ */ @keyframes super-hero-bracket-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 0.7; transform: scale(1); } } @keyframes super-hero-bracket-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.25; } } @keyframes super-hero-hud-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes super-hero-scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } @keyframes super-hero-glitch { 0%, 100% { clip-path: none; transform: none; opacity: 0; } 19% { opacity: 0; } 20% { clip-path: polygon(0 18%, 100% 18%, 100% 22%, 0 22%); transform: translate(-3px, 0); opacity: 0.6; } 21% { clip-path: none; transform: none; opacity: 0; } 79% { opacity: 0; } 80% { clip-path: polygon(0 68%, 100% 68%, 100% 73%, 0 73%); transform: translate(3px, 0); opacity: 0.6; } 81% { clip-path: none; transform: none; opacity: 0; } } @keyframes super-hero-progress { from { width: 0%; } to { width: 100%; } } .super-hero { position: relative; width: 100%; max-width: none; background: #080810; overflow: hidden; border-bottom: 1px solid #1a1a2e; margin-bottom: 0; } .super-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cyan); transform: scaleX(0.28); transform-origin: left; z-index: 10; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .super-hero.super-hero--loaded::before { transform: scaleX(1); } /* ═══════════════════════════════════════ Hero intro stagger (all indy-hero variants) ═══════════════════════════════════════ */ @keyframes indy-hero-intro-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .indy-hero-intro--a1, .indy-hero-intro--a2, .indy-hero-intro--a3, .indy-hero-intro--a4 { opacity: 0; } .indy-hero.indy-hero--loaded .indy-hero-intro--a1 { animation: indy-hero-intro-up 0.6s ease forwards 0.1s; } .indy-hero.indy-hero--loaded .indy-hero-intro--a2 { animation: indy-hero-intro-up 0.6s ease forwards 0.2s; } .indy-hero.indy-hero--loaded .indy-hero-intro--a3 { animation: indy-hero-intro-up 0.6s ease forwards 0.35s; } .indy-hero.indy-hero--loaded .indy-hero-intro--a4 { animation: indy-hero-intro-up 0.6s ease forwards 0.45s; } @media (prefers-reduced-motion: reduce) { .indy-hero-intro--a1, .indy-hero-intro--a2, .indy-hero-intro--a3, .indy-hero-intro--a4 { opacity: 1 !important; animation: none !important; transform: none !important; } } .super-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .super-hero__scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(0, 212, 255, 0.4), transparent); pointer-events: none; z-index: 3; animation: super-hero-scanline 6s linear infinite; } .super-hero__grid-texture { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.022) 60px, rgba(255, 255, 255, 0.022) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.022) 60px, rgba(255, 255, 255, 0.022) 61px); } .super-hero__ambient { position: absolute; bottom: -200px; left: -100px; width: 700px; height: 700px; border-radius: 50%; pointer-events: none; z-index: 1; transition: background 1.2s ease; background: radial-gradient(circle, rgba(0, 212, 255, 0.18) 0%, transparent 65%); } .super-hero__wm { position: absolute; bottom: -60px; right: -40px; z-index: 1; pointer-events: none; user-select: none; line-height: 1; font-size: clamp(8rem, 22vw, 28rem); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.018); } .super-hero__bracket { position: absolute; top: 20px; width: 22px; height: 22px; z-index: 6; pointer-events: none; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); opacity: 0; animation: super-hero-bracket-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .super-hero__bracket--tl { left: 16px; top: 16px; animation: super-hero-bracket-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards, super-hero-bracket-pulse 4s ease-in-out 1s infinite; } .super-hero__bracket--tr { left: auto; right: 16px; top: 16px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); border-left: none; animation: super-hero-bracket-in-tr 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards, super-hero-bracket-pulse 4s ease-in-out 1s infinite; } @keyframes super-hero-bracket-in-tr { from { opacity: 0; transform: scale(0.7); } to { opacity: 0.7; transform: scale(1); } } .super-hero__hud { position: absolute; top: 16px; right: 20px; z-index: 11; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-width: min(320px, 42vw); } .super-hero__hud-row { display: flex; align-items: center; gap: 6px; opacity: 0; animation: super-hero-hud-in 0.5s ease forwards; } .super-hero__hud-row--delay-0 { animation-delay: 0s; } .super-hero__hud-row--delay-1 { animation-delay: 0.4s; } .super-hero__hud-row--delay-2 { animation-delay: 0.8s; } .super-hero__hud-text { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .super-hero__hud-text--live { color: #ff3152; } .super-hero__hud-text--green { color: #22c55e; } .super-hero__hud-text--cyan { color: var(--cyan); } .super-hero__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .super-hero__dot--green { background: #22c55e; } .super-hero__dot--cyan { background: var(--cyan); } .super-hero__dot--pulse-slow { animation: pulse 2s ease-in-out infinite; } .super-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 5; } .super-hero__grid { display: grid; grid-template-columns: 1fr 340px; gap: 0; min-height: 540px; } @media (max-width: 1000px) { .super-hero__grid { grid-template-columns: 1fr; min-height: 0; } .super-hero__hud { display: none; } .super-hero__bracket { display: none; } } .super-hero__feature-col { padding: 40px 40px 40px 0; display: flex; flex-direction: column; justify-content: flex-end; border-right: 1px solid rgba(255, 255, 255, 0.06); position: relative; } @media (max-width: 1000px) { .super-hero__feature-col { border-right: none; padding: 32px 0 24px; min-height: 420px; } } .super-hero__feature-head { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; } .super-hero__feature-label { font-size: 10px; color: #444; letter-spacing: 0.15em; text-transform: uppercase; } .super-hero__feature-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.06); } .super-hero__dots { display: flex; gap: 6px; align-items: center; } .super-hero__dot-btn { width: 6px; height: 6px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.15); cursor: pointer; transition: width 0.3s ease, background 0.3s ease; } .super-hero__dot-btn.is-active { width: 20px; background: var(--cyan); } .super-hero__slides { position: relative; flex: 1; min-height: 260px; } .super-hero__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; } .super-hero__slide-bg { position: absolute; inset: 0; overflow: hidden; } .super-hero__slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(45%) brightness(0.92); transform: scale(1.04); transition: transform 8s ease; } .super-hero.super-hero--loaded .super-hero__slide-img { transform: scale(1); } .super-hero__slide-gradient { position: absolute; inset: 0; } .super-hero__blob-cyan { position: absolute; bottom: -80px; left: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 212, 255, 0.18) 0%, transparent 65%); pointer-events: none; } .super-hero__blob-red { position: absolute; top: -40px; right: 60px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(255, 49, 82, 0.12) 0%, transparent 65%); pointer-events: none; } .super-hero__slide-darken { z-index: 1; } .super-hero__slide-body { position: relative; z-index: 2; padding-bottom: 4px; } .super-hero__tags-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .super-hero__read-mono { font-size: 11px; color: #888; } .super-hero__game-pill { font-size: 10px; color: #555; margin-left: auto; } .super-hero__title { font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: 0.04em; line-height: 1.05; margin-bottom: 14px; max-width: 560px; margin-top: 0; } .super-hero__title-link { color: #fff; text-decoration: none; } .super-hero__title-link:hover { color: var(--cyan); } .super-hero__title-glitch { position: relative; } .super-hero__title-glitch::after { content: attr(data-text); position: absolute; inset: 0; color: var(--cyan); animation: super-hero-glitch 9s ease-in-out infinite 4s; clip-path: none; pointer-events: none; } .super-hero__excerpt { color: #888; margin-bottom: 22px; max-width: 500px; font-size: 15px; line-height: 1.65; } .super-hero__meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .super-hero__author-bit { display: flex; align-items: center; gap: 10px; } .super-hero__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cyan); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } .super-hero__author-name { font-weight: 700; font-size: 14px; color: #fff; } .super-hero__progress-track { margin-top: 28px; height: 2px; background: rgba(255, 255, 255, 0.07); position: relative; overflow: hidden; } .super-hero__progress-fill { height: 100%; width: 0; background: var(--cyan); animation: super-hero-progress 6s linear forwards; } .super-hero__side { display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; } @media (max-width: 1000px) { .super-hero__side { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.06); } } .super-hero__side-head { padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 8px; position: relative; } .super-hero__side-head::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .super-hero__side:hover .super-hero__side-head::after { transform: scaleX(1); } .super-hero__qhit--view-all .super-hero__qhit-num { color: var(--cyan); } .super-hero__qhit--view-all .super-hero__qhit-title { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; } .super-hero__qhit--view-all:hover { background: rgba(0, 212, 255, 0.06); } .super-hero__breaking { font-size: 10px; color: #ff3152; letter-spacing: 0.12em; text-transform: uppercase; } .super-hero__quick { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .super-hero__qhit { padding: 13px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); display: flex; align-items: flex-start; gap: 10px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: background 0.25s; } .super-hero__qhit::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: rgba(255, 255, 255, 0.04); transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .super-hero__qhit:hover::before { height: 100%; } .super-hero__qhit::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cyan); transform: scaleY(0); transform-origin: bottom; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .super-hero__qhit:hover::after { transform: scaleY(1); } .super-hero__qhit-num { font-size: 1.4rem; color: #222; line-height: 1; flex-shrink: 0; min-width: 22px; letter-spacing: 0.04em; position: relative; z-index: 1; transition: color 0.2s; } .super-hero__qhit:hover .super-hero__qhit-num { color: var(--cyan); } .super-hero__qhit-main { min-width: 0; flex: 1; position: relative; z-index: 1; } .super-hero__qhit-tag { margin-bottom: 5px; font-size: 10px; padding: 2px 8px; display: inline-block; } .super-hero__qhit-title { font-weight: 700; font-size: 13px; line-height: 1.4; color: #ddd; transition: color 0.2s; } .super-hero__qhit:hover .super-hero__qhit-title { color: #fff; } .super-hero__qhit-time { margin-top: 4px; } .super-hero__qhit-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; } .super-hero__qhit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .super-hero__stats { border-top: 1px solid rgba(255, 255, 255, 0.06); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, 0.04); margin-top: auto; padding: 0; } .super-hero__stat-cell { padding: 14px 16px; background: #080810; position: relative; overflow: hidden; transition: background 0.35s; } .super-hero__stat-cell::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: rgba(0, 212, 255, 0.06); transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .super-hero__stats:hover .super-hero__stat-cell::after { height: 100%; } .super-hero__stat-cell--border { border-right: none; } .super-hero__stat-label { font-size: 9px; color: #444; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; position: relative; z-index: 1; transition: color 0.2s; } .super-hero__stats:hover .super-hero__stat-label { color: var(--cyan); } .super-hero__stat-val { font-size: 1.9rem; line-height: 1; position: relative; z-index: 1; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .super-hero__stats:hover .super-hero__stat-val { transform: translateY(-2px); } .super-hero__stat-val--cyan { color: var(--cyan); } .super-hero__stat-val--red { color: var(--red); } .super-hero__strip-wrap { border-top: 1px solid rgba(255, 255, 255, 0.06); position: relative; z-index: 5; } .super-hero__strip { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .super-hero__strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .super-hero__strip { grid-template-columns: 1fr; } } .super-hero__strip-card { padding: 16px 18px; border-right: 1px solid rgba(255, 255, 255, 0.06); text-decoration: none; color: inherit; display: block; position: relative; overflow: hidden; transition: background 0.2s; } .super-hero__strip-card:last-child { border-right: none; } .super-hero__strip-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .super-hero__strip-card:hover { background: rgba(255, 255, 255, 0.03); } .super-hero__strip-card:hover::after { transform: scaleX(1); } .super-hero__strip-card--has-media { min-height: 112px; } .super-hero__strip-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .super-hero__strip-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; } .super-hero__strip-fallback { position: absolute; inset: 0; opacity: 0.2; } .super-hero__strip-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 50%, transparent 100%); } .super-hero__strip-tag { position: relative; z-index: 1; font-size: 10px; padding: 2px 8px; margin-bottom: 8px; display: inline-block; } .super-hero__strip-title { position: relative; z-index: 1; font-weight: 700; font-size: 13px; line-height: 1.35; color: #ccc; margin-bottom: 6px; display: block; } .super-hero__strip-time { position: relative; z-index: 1; } /* ═══════════════════════════════════════ SINGLE ARTICLE HERO ═══════════════════════════════════════ */ .article-hero { position: relative; width: 100%; background: linear-gradient(135deg, #080810 0%, #0d1530 60%, #0a0820 100%); overflow: hidden; } .article-hero__blob-cyan { position: absolute; bottom: -100px; left: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 212, 255, 0.14) 0%, transparent 65%); } .article-hero__blob-red { position: absolute; top: -60px; right: 80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255, 49, 82, 0.1) 0%, transparent 65%); } .article-hero__grid-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.02) 60px, rgba(255, 255, 255, 0.02) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.02) 60px, rgba(255, 255, 255, 0.02) 61px); } .article-hero__accent-bar { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--cyan); } .article-hero__inner { max-width: 1200px; margin: 0 auto; padding: 56px 24px 48px 32px; position: relative; z-index: 1; } .article-hero__tags { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .article-hero__read-mono { font-size: 11px; color: #888; margin-left: 4px; } .article-hero__title-wrap { max-width: 820px; } .article-hero__org-identity { display: flex; align-items: center; gap: 16px; } .article-hero__org-logo { width: 92px; height: 92px; border-radius: 16px; overflow: hidden; flex-shrink: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; } .article-hero__org-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; } .article-hero__org-logo-fallback { color: #fff; font-size: 34px; letter-spacing: 0.04em; } .article-hero__title { font-size: clamp(2.4rem, 5vw, 3.8rem); color: #fff; line-height: 1.04; margin-bottom: 20px; } .article-hero__excerpt { font-size: 18px; line-height: 1.65; color: #bbb; margin-bottom: 32px; max-width: 680px; } .article-hero__meta-bar { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .article-hero__author-block { display: flex; align-items: center; gap: 12px; margin-right: 32px; } .article-hero__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cyan); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; } .article-hero__author-name { font-weight: 700; font-size: 15px; color: #fff; } .article-hero__dates { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .article-hero__date-val { font-size: 13px; color: #ccc; font-weight: 600; margin-top: 2px; } .article-hero__views { font-size: 13px; color: var(--cyan); font-weight: 700; margin-top: 2px; } /* ═══════════════════════════════════════ SITE FOOTER ═══════════════════════════════════════ */ .site-footer { background: #0a0a0a; color: #fff; margin-top: 48px; } .site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 28px; } .site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer__brand-title { font-size: 2rem; margin-bottom: 4px; } .site-footer__brand-tag { font-size: 9px; letter-spacing: 0.15em; color: #555; margin-bottom: 14px; } .site-footer__brand-text { font-size: 14px; color: #666; line-height: 1.65; } .site-footer__col-head { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #444; margin-bottom: 14px; } .site-footer__links { display: flex; flex-direction: column; gap: 10px; } .site-footer__bottom { border-top: 1px solid #1a1a1a; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-footer__copyright { font-size: 11px; color: #444; } .site-footer__legal { display: flex; gap: 20px; } .footer-nav-link { font-size: 14px; color: #666; text-decoration: none; } .footer-nav-link--mono { font-size: 11px; color: #444; } /* ═══════════════════════════════════════ COMING SOON (page template) ═══════════════════════════════════════ */ .coming-soon { position: relative; width: 100%; max-width: none; background: #080810; color: #fff; overflow: hidden; border-bottom: 1px solid #1a1a2e; } .coming-soon__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.02) 60px, rgba(255, 255, 255, 0.02) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.02) 60px, rgba(255, 255, 255, 0.02) 61px); } .coming-soon__glow { position: absolute; pointer-events: none; border-radius: 999px; } .coming-soon__glow--a { bottom: -140px; left: -80px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, transparent 65%); } .coming-soon__glow--b { top: -120px; right: -40px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255, 49, 82, 0.09) 0%, transparent 65%); } .coming-soon__inner { max-width: 1200px; margin: 0 auto; padding: 56px 24px 64px; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; } @media (max-width: 980px) { .coming-soon__inner { grid-template-columns: 1fr; } } .coming-soon__panel { position: relative; padding-right: 16px; } .coming-soon__brand { margin-bottom: 24px; } .coming-soon__brand .site-logo-link { color: #fff; } .coming-soon__brand .site-logo-wordmark { color: #fff; } .coming-soon__brand .site-logo-tagline { color: #444; } .coming-soon__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .coming-soon__eyebrow-bar { width: 3px; height: 22px; background: var(--cyan); flex-shrink: 0; } .coming-soon__eyebrow-text { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); } .coming-soon__title { font-size: clamp(3rem, 6.5vw, 5.2rem); line-height: 0.98; margin: 0 0 18px; text-transform: uppercase; letter-spacing: 0.04em; } .coming-soon__title-accent { color: var(--cyan); margin-left: 10px; } .coming-soon__dek { font-size: 17px; line-height: 1.75; color: #bbb; max-width: 58ch; margin: 0 0 22px; } .coming-soon__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .coming-soon__signup .sidebar-newsletter { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); } .coming-soon__fine-print { margin-top: 14px; font-size: 13px; line-height: 1.6; color: #888; } .coming-soon__fine-print p { margin: 0 0 10px; } .coming-soon__fine-print p:last-child { margin-bottom: 0; } .coming-soon__side { display: flex; flex-direction: column; gap: 14px; } .coming-soon__card { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.45); padding: 16px 16px 18px; } .coming-soon__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .coming-soon__countdown-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #555; } .coming-soon__muted { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #555; } .coming-soon__count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .coming-soon__count-cell { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); padding: 14px 10px 12px; text-align: center; } .coming-soon__count-num { font-size: 2.4rem; line-height: 1; margin-bottom: 6px; color: #fff; } .coming-soon__count-k { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #444; } .coming-soon__progress-pct { font-size: 11px; letter-spacing: 0.08em; color: var(--cyan); } .coming-soon__progress-track { height: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .coming-soon__progress-fill { height: 100%; width: 0; background: linear-gradient(to right, var(--cyan), var(--red)); } .coming-soon__social-grid { display: flex; flex-direction: column; gap: 10px; } /* —— Site announcement (Settings → IndyGG announcement) —— */ .indygg-announce { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 0 24px; background: #0f0c1a; border-bottom: 1px solid rgba(255, 49, 82, 0.35); } .indygg-announce__inner { display: flex; align-items: center; justify-content: center; flex: 1; gap: 12px; min-width: 0; } .indygg-announce__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: indygg-announce-pulse 1.4s ease-in-out infinite; } @keyframes indygg-announce-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } } .indygg-announce__badge { flex-shrink: 0; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(255, 49, 82, 0.22); border: 1px solid rgba(255, 49, 82, 0.55); padding: 2px 8px; white-space: nowrap; } .indygg-announce__text { font-size: 13px; font-weight: 500; color: #9ca3af; line-height: 1.45; text-align: center; } .indygg-announce__text strong, .indygg-announce__text b { color: #e5e7eb; font-weight: 700; } .indygg-announce__text a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; } .indygg-announce__text a:hover { color: #ff6b82; } /* —— Games directory (archive: /games/) —— */ .indygg-gamesdir { background: #f6f7f9; } .gamesdir-breadcrumb { background: #f6f7f9; border-bottom: 1px solid var(--border); } .gamesdir-bc-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 8px; } .gamesdir-bc-a { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #aaa; letter-spacing: .05em; text-transform: uppercase; } .gamesdir-bc-a:hover { color: var(--cyan); } .gamesdir-bc-sep { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #ccc; } .gamesdir-bc-cur { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #111; letter-spacing: .05em; text-transform: uppercase; } .gamesdir-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #06060f 0%, #0c0c22 60%, #06060f 100%); border-bottom: 1px solid #1a1a28; } .gamesdir-hero-grid { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,.018) 60px, rgba(255,255,255,.018) 61px), repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,.018) 60px, rgba(255,255,255,.018) 61px); } .gamesdir-hero-scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(0,212,255,.25), transparent); z-index: 2; pointer-events: none; animation: gamesdir-scan 8s linear infinite; } @keyframes gamesdir-scan { 0%{ top: -2px } 100%{ top: 100% } } .gamesdir-hero-glow { position: absolute; bottom: -120px; left: -80px; width: 600px; height: 600px; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(0,212,255,.16) 0%, transparent 65%); } .gamesdir-hero-glow-r { position: absolute; top: -80px; right: 40px; width: 400px; height: 400px; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(168,85,247,.10) 0%, transparent 65%); } .gamesdir-hero-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); z-index: 2; } .gamesdir-hero-wm { position: absolute; right: -30px; bottom: -80px; z-index: 1; pointer-events: none; user-select: none; font-family: 'Bebas Neue', sans-serif; font-size: 22rem; line-height: 1; color: rgba(255,255,255,.022); letter-spacing: .04em; } .gamesdir-hero-inner { position: relative; z-index: 4; max-width: 1200px; margin: 0 auto; padding: 48px 24px 40px; } .gamesdir-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .gamesdir-hero-eyebrow-bar { width: 3px; height: 18px; background: var(--cyan); } .gamesdir-hero-eyebrow-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cyan); letter-spacing: .15em; text-transform: uppercase; } .gamesdir-hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.6rem, 5vw, 4rem); color: #fff; line-height: .98; margin: 0 0 12px; letter-spacing: .04em; } .gamesdir-hero-sub { font-size: 15px; line-height: 1.7; color: #888; max-width: 520px; margin: 0; } .gamesdir-hero-grid-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end; } @media (min-width: 768px) { .gamesdir-hero-grid-layout { grid-template-columns: 1fr auto; gap: 40px; } } .gamesdir-genre-strip { display: none; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); min-width: 320px; } @media (min-width: 768px) { .gamesdir-genre-strip { display: grid; } } .gamesdir-genre-cell { background: rgba(0,0,0,.5); padding: 14px 18px; text-align: left; border-left: 2px solid transparent; } .gamesdir-genre-cell-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; line-height: 1; color: #fff; } .gamesdir-genre-cell-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #777; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; } .gamesdir-filter-bar { background: #fff; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 30; } .gamesdir-filter-inner { max-width: 1200px; margin: 0 auto; } .gamesdir-filter-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); height: 48px; } .gamesdir-filter-search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-right: 1px solid var(--border); } .gamesdir-filter-search input { font-family: 'Outfit', sans-serif; font-size: 14px; border: none; outline: none; background: transparent; color: #111; width: 100%; } .gamesdir-filter-search input::placeholder { color: #aaa; } .gamesdir-filter-search-clear { background: none; border: none; cursor: pointer; color: #bbb; padding: 0; display: flex; } .gamesdir-filter-count { display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #bbb; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .gamesdir-pills-row { padding: 10px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gamesdir-pills-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #888; margin-right: 4px; } .gamesdir-pill { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border: 1.5px solid var(--border); background: #fff; color: #666; cursor: pointer; transition: all .15s; } .gamesdir-pill:hover { border-color: #aaa; color: #111; } .gamesdir-pill.is-on { background: #111; border-color: #111; color: #fff; } .gamesdir-sort-wrap { margin-left: auto; display: flex; align-items: center; gap: 6px; } .gamesdir-sort-btn { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border: 1.5px solid var(--border); background: #fff; color: #888; cursor: pointer; transition: all .15s; } .gamesdir-sort-btn:hover { border-color: #aaa; color: #111; } .gamesdir-sort-btn.is-on { background: var(--cyan); border-color: var(--cyan); color: #000; } .gamesdir-page-wrap { max-width: 1200px; margin: 0 auto; padding: 36px 24px 80px; } .gamesdir-sec-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .gamesdir-sec-bar { width: 3px; height: 18px; background: var(--cyan); flex-shrink: 0; } .gamesdir-sec-label { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); } .gamesdir-sec-line { flex: 1; height: 1px; background: var(--border); } .gamesdir-sec-extra { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #aaa; letter-spacing: .05em; text-transform: uppercase; } .gamesdir-games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (min-width: 1024px) { .gamesdir-games-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .gamesdir-games-grid { grid-template-columns: 1fr; } } .gamesdir-card { background: #fff; border: 1.5px solid var(--border); display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), border-color .2s; } .gamesdir-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.10); border-color: var(--c, var(--cyan)); } .gamesdir-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c, var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,1,.36,1); z-index: 5; } .gamesdir-card:hover::before { transform: scaleX(1); } .gamesdir-card-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0a12; } .gamesdir-card-cover-bg { position: absolute; inset: 0; background: var(--cover-bg); transition: transform .55s cubic-bezier(.22,1,.36,1); } .gamesdir-card:hover .gamesdir-card-cover-bg { transform: scale(1.06); } .gamesdir-card-cover-grid { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(255,255,255,.04) 24px, rgba(255,255,255,.04) 25px), repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(255,255,255,.04) 24px, rgba(255,255,255,.04) 25px); } .gamesdir-card-cover-glow { position: absolute; bottom: -60px; right: -40px; width: 280px; height: 280px; background: radial-gradient(circle, var(--c-glow) 0%, transparent 65%); pointer-events: none; transition: bottom .55s cubic-bezier(.22,1,.36,1), right .55s cubic-bezier(.22,1,.36,1); } .gamesdir-card:hover .gamesdir-card-cover-glow { bottom: -10px; right: 0; } .gamesdir-card-cover-darken { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 50%, transparent 100%); } .gamesdir-card-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .gamesdir-card-art svg { transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .3s; opacity: .85; width: 140px; height: 140px; } .gamesdir-card:hover .gamesdir-card-art svg { transform: scale(1.1) rotate(-2deg); opacity: 1; } .gamesdir-card-scanline { position: absolute; left: 0; right: 0; height: 1px; top: -1px; background: linear-gradient(to right, transparent, var(--c, var(--cyan)), transparent); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 4; } .gamesdir-card:hover .gamesdir-card-scanline { opacity: .55; animation: gamesdir-card-scan 2.4s linear infinite; } @keyframes gamesdir-card-scan { 0%{ top: -1px } 100%{ top: 100% } } .gamesdir-card-genre { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 4px 10px; backdrop-filter: blur(4px); } .gamesdir-card-title-wrap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; } .gamesdir-card-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: 1; color: #fff; letter-spacing: .04em; text-shadow: 0 2px 14px rgba(0,0,0,.55); } .gamesdir-card-publisher { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 5px; } .gamesdir-card-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; } .gamesdir-card-desc { font-size: 13.5px; line-height: 1.6; color: #555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .gamesdir-card-cta { display: flex; align-items: center; justify-content: space-between; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #999; transition: color .25s; border-top: 1px solid var(--border); margin: 0 -18px -16px; padding: 12px 18px; background: #f6f7f9; } .gamesdir-card:hover .gamesdir-card-cta { color: var(--c, var(--cyan)); background: #fff; } .gamesdir-card-cta-arrow { transition: transform .3s cubic-bezier(.22,1,.36,1); flex-shrink: 0; } .gamesdir-card:hover .gamesdir-card-cta-arrow { transform: translateX(5px); } .gamesdir-empty { grid-column: 1 / -1; text-align: center; padding: 60px 24px; background: #fff; border: 1.5px dashed var(--border); } .gamesdir-empty-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: #333; margin-bottom: 8px; letter-spacing: .04em; } .gamesdir-empty-sub { font-size: 13px; color: #888; margin-bottom: 18px; } .gamesdir-empty-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; background: #111; color: #fff; cursor: pointer; border: none; } .indygg-announce__link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } .indygg-announce__link:hover { color: #ff6b82; } .indygg-announce__dismiss { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 6px; margin: 0; border: none; background: none; cursor: pointer; color: #6b7280; line-height: 1; transition: color 0.15s ease; } .indygg-announce__dismiss:hover { color: #d1d5db; } @media (max-width: 640px) { .indygg-announce { flex-wrap: wrap; padding: 10px 16px; } .indygg-announce__inner { flex-wrap: wrap; justify-content: flex-start; } .indygg-announce__text { text-align: left; flex: 1 1 100%; order: 3; } }