/* ========================================================= POLITA_SHARED_CONTENT_UI_V31D Content layer built from the actual extension UI grammar. Shell remains V31C2. ========================================================= */ /* ========================================================= PAGE WIDTH / RHYTHM ========================================================= */ body.polita-content-v31d .page, body.polita-content-v31d .page-width, body.polita-content-v31d main { width: min( 1380px, calc(100% - 40px) ); max-width: 1380px; margin-left: auto; margin-right: auto; } body.polita-content-v31d .page { padding-top: 34px; padding-bottom: 30px; } /* ========================================================= PAGE HEADINGS Smaller, denser, extension-like. ========================================================= */ body.polita-content-v31d .page-heading { margin-bottom: 22px; } body.polita-content-v31d .page-heading h1, body.polita-content-v31d .page-title, body.polita-content-v31d h1 { margin-top: 0; color: #f4f8fb; font-family: "Rajdhani", "Inter", Arial, sans-serif !important; font-size: clamp( 32px, 3.25vw, 46px ); font-weight: 700; line-height: .98; letter-spacing: -.025em; } body.polita-content-v31d .page-copy, body.polita-content-v31d .page-heading p { max-width: 760px; margin-top: 9px; color: #7d8d98; font-family: "Inter", Arial, sans-serif; font-size: 13px; line-height: 1.6; } body.polita-content-v31d .eyebrow, body.polita-content-v31d .section-kicker, body.polita-content-v31d .kicker { color: #59deff !important; font-family: "Inter", Arial, sans-serif !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .13em !important; text-transform: uppercase; } /* ========================================================= EXTENSION PANEL GRAMMAR ========================================================= */ body.polita-content-v31d .card, body.polita-content-v31d .panel, body.polita-content-v31d .section, body.polita-content-v31d .hero, body.polita-content-v31d .profile-card, body.polita-content-v31d .profile-section, body.polita-content-v31d .campaign-card, body.polita-content-v31d .reward-card, body.polita-content-v31d .result-card, body.polita-content-v31d .database-card { border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important; background: #081014 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important; } /* No giant generic glass glow. */ body.polita-content-v31d .card, body.polita-content-v31d .panel, body.polita-content-v31d .section { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================= STAT MODULES Extension overview stat language. ========================================================= */ body.polita-content-v31d .stat, body.polita-content-v31d .stat-card, body.polita-content-v31d .metric, body.polita-content-v31d .metric-card, body.polita-content-v31d .summary-card, body.polita-content-v31d .hero-stat, body.polita-content-v31d .profile-stat { min-height: 58px; border: 1px solid rgba(255,255,255,.055) !important; border-radius: 10px !important; background: #070d11 !important; box-shadow: none !important; } body.polita-content-v31d .stat strong, body.polita-content-v31d .stat-card strong, body.polita-content-v31d .metric strong, body.polita-content-v31d .metric-card strong, body.polita-content-v31d .summary-card strong, body.polita-content-v31d .hero-stat strong, body.polita-content-v31d .profile-stat strong { color: #f4f8fb; font-family: "Rajdhani", "Inter", Arial, sans-serif !important; font-weight: 700; } body.polita-content-v31d .stat span, body.polita-content-v31d .stat-card span, body.polita-content-v31d .metric span, body.polita-content-v31d .metric-card span, body.polita-content-v31d .summary-card span, body.polita-content-v31d .hero-stat span, body.polita-content-v31d .profile-stat span { color: #7d8d98; } /* ========================================================= BUTTONS / TABS ========================================================= */ body.polita-content-v31d button:not(.polita-shell-control-v31c2), body.polita-content-v31d .button, body.polita-content-v31d .btn, body.polita-content-v31d .page-button { min-height: 34px; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px !important; background: #081014 !important; color: #7f939c !important; box-shadow: none !important; font-family: "Rajdhani", "Inter", Arial, sans-serif !important; font-size: 12px; font-weight: 700; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; } body.polita-content-v31d button:not(.polita-shell-control-v31c2):hover:not(:disabled), body.polita-content-v31d .button:hover, body.polita-content-v31d .btn:hover, body.polita-content-v31d .page-button:hover:not(:disabled) { color: #f4f8fb !important; border-color: rgba(89,222,255,.22) !important; background: #0b151a !important; } body.polita-content-v31d button.active, body.polita-content-v31d .button.active, body.polita-content-v31d .btn.active, body.polita-content-v31d .page-button.active { border-color: rgba(89,222,255,.28) !important; background: rgba(89,222,255,.065) !important; color: #87e9ff !important; } body.polita-content-v31d button:disabled, body.polita-content-v31d .page-button:disabled { opacity: .42; } /* ========================================================= INPUTS / FILTERS ========================================================= */ body.polita-content-v31d input, body.polita-content-v31d select, body.polita-content-v31d textarea { min-height: 38px; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 9px !important; background: #070d11 !important; color: #e9f1f5 !important; box-shadow: none !important; font-size: 12px !important; } body.polita-content-v31d input::placeholder, body.polita-content-v31d textarea::placeholder { color: #586a73 !important; } body.polita-content-v31d input:focus, body.polita-content-v31d select:focus, body.polita-content-v31d textarea:focus { border-color: rgba(89,222,255,.28) !important; box-shadow: 0 0 0 2px rgba(89,222,255,.035) !important; } /* Common filter/toolbar surfaces */ body.polita-content-v31d .controls, body.polita-content-v31d .toolbar, body.polita-content-v31d .filters, body.polita-content-v31d .filter-bar, body.polita-content-v31d .search-bar { border-color: rgba(255,255,255,.055) !important; background: transparent !important; box-shadow: none !important; } /* ========================================================= TABLE / LIST LANGUAGE ========================================================= */ body.polita-content-v31d table { border-collapse: separate; border-spacing: 0; color: #dfe9ed; } body.polita-content-v31d th { color: #6f838d !important; font-family: "Inter", Arial, sans-serif; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .09em; text-transform: uppercase; } body.polita-content-v31d td { border-color: rgba(255,255,255,.05) !important; font-size: 12px; } body.polita-content-v31d tbody tr { background: #081014; } body.polita-content-v31d tbody tr:hover { background: #0b151a !important; } /* ========================================================= DATABASE / HOMEPAGE ========================================================= */ body[data-polita-surface-v31d="database"] .page-heading { max-width: 900px; } body[data-polita-surface-v31d="database"] .page-heading h1 { max-width: 760px; } body[data-polita-surface-v31d="database"] .card, body[data-polita-surface-v31d="database"] .panel { overflow: hidden; } /* ========================================================= GLOBAL BADGES Preserve V29C layout, align cards to extension chrome. ========================================================= */ body[data-polita-surface-v31d="badges"] .badge-store-card-v29a { border-color: rgba(255,255,255,.07) !important; border-radius: 14px !important; background: #081014 !important; box-shadow: none !important; } body[data-polita-surface-v31d="badges"] .badge-store-card-v29a:hover { border-color: rgba(89,222,255,.20) !important; background: #0b151a !important; box-shadow: none !important; } body[data-polita-surface-v31d="badges"] .badge-store-art-v29a { border-right-color: rgba(255,255,255,.055) !important; background: radial-gradient( circle at 50% 35%, rgba(89,222,255,.075), transparent 58% ), #070d11 !important; } body[data-polita-surface-v31d="badges"] .badge-title { color: #f4f8fb !important; font-family: "Rajdhani", "Inter", Arial, sans-serif !important; } body[data-polita-surface-v31d="badges"] .badge-category, body[data-polita-surface-v31d="badges"] .badge-requirement { color: #7d8d98 !important; } /* ========================================================= BADGE DETAIL V30B ========================================================= */ body[data-polita-surface-v31d="badge-detail"] .hero-v30b, body[data-polita-surface-v31d="badge-detail"] .availability-v30b, body[data-polita-surface-v31d="badge-detail"] .context-card-v30b, body[data-polita-surface-v31d="badge-detail"] .campaign-card-v30b, body[data-polita-surface-v31d="badge-detail"] .artwork-section-v30b, body[data-polita-surface-v31d="badge-detail"] .technical { border-color: rgba(255,255,255,.07) !important; border-radius: 14px !important; background: #081014 !important; box-shadow: none !important; } body[data-polita-surface-v31d="badge-detail"] .hero-art, body[data-polita-surface-v31d="badge-detail"] .event-artwork-placeholder-v30b { background: radial-gradient( circle at 50% 35%, rgba(89,222,255,.075), transparent 58% ), #070d11 !important; } body[data-polita-surface-v31d="badge-detail"] .context-copy-v30b, body[data-polita-surface-v31d="badge-detail"] .campaign-sub-v30b { color: #7d8d98 !important; } /* ========================================================= DROPS / CAMPAIGNS ========================================================= */ body[data-polita-surface-v31d="drops"] .page-heading, body[data-polita-surface-v31d="campaign"] .page-heading { margin-bottom: 20px; } body[data-polita-surface-v31d="drops"] .page-button, body[data-polita-surface-v31d="campaign"] .page-button { min-height: 33px; } body[data-polita-surface-v31d="drops"] .campaign-card, body[data-polita-surface-v31d="drops"] .drop-card, body[data-polita-surface-v31d="drops"] .reward-card, body[data-polita-surface-v31d="campaign"] .campaign-card, body[data-polita-surface-v31d="campaign"] .reward-card { border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important; background: #081014 !important; box-shadow: none !important; } /* ========================================================= LEADERBOARD ========================================================= */ body[data-polita-surface-v31d="leaderboard"] table, body[data-polita-surface-v31d="leaderboard"] .panel, body[data-polita-surface-v31d="leaderboard"] .card { border-color: rgba(255,255,255,.07) !important; background: #081014 !important; } body[data-polita-surface-v31d="leaderboard"] tbody tr { background: #081014 !important; } body[data-polita-surface-v31d="leaderboard"] tbody tr:hover { background: #0b151a !important; } body[data-polita-surface-v31d="leaderboard"] .rank, body[data-polita-surface-v31d="leaderboard"] .rank-number { color: #59deff !important; font-family: "Rajdhani", "Inter", Arial, sans-serif !important; font-weight: 700; } /* ========================================================= PROFILE / MY PROFILE ========================================================= */ body[data-polita-surface-v31d="profile"] .card, body[data-polita-surface-v31d="profile"] .panel, body[data-polita-surface-v31d="profile"] .profile-card, body[data-polita-surface-v31d="profile"] .profile-section, body[data-polita-surface-v31d="me"] .card, body[data-polita-surface-v31d="me"] .panel, body[data-polita-surface-v31d="me"] .profile-card, body[data-polita-surface-v31d="me"] .profile-section { border-color: rgba(255,255,255,.07) !important; background: #081014 !important; box-shadow: none !important; } body[data-polita-surface-v31d="profile"] img, body[data-polita-surface-v31d="me"] img { image-rendering: auto; } body[data-polita-surface-v31d="profile"] .profile-v11-owner-actions a, body[data-polita-surface-v31d="me"] .profile-v11-owner-actions a { border-color: rgba(255,255,255,.08); background: #081014; } /* ========================================================= LINKS / ACCENTS ========================================================= */ body.polita-content-v31d a:not( .polita-site-logo-link-v31c2 ):not( .polita-shell-control-v31c2 ):not( .polita-shell-menu-v31c2 a ) { text-decoration-color: rgba(89,222,255,.30); } body.polita-content-v31d a:hover { text-decoration-color: rgba(89,222,255,.65); } /* ========================================================= SCROLLBAR ========================================================= */ body.polita-content-v31d { scrollbar-color: #28353c #05090d; } body.polita-content-v31d ::-webkit-scrollbar { width: 10px; height: 10px; } body.polita-content-v31d ::-webkit-scrollbar-track { background: #05090d; } body.polita-content-v31d ::-webkit-scrollbar-thumb { border: 3px solid #05090d; border-radius: 999px; background: #28353c; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:900px) { body.polita-content-v31d .page, body.polita-content-v31d .page-width, body.polita-content-v31d main { width: min( 100% - 24px, 1380px ); } body.polita-content-v31d .page { padding-top: 25px; } body.polita-content-v31d .page-heading h1, body.polita-content-v31d .page-title, body.polita-content-v31d h1 { font-size: clamp( 29px, 7vw, 38px ); } } @media (max-width:560px) { body.polita-content-v31d .page, body.polita-content-v31d .page-width, body.polita-content-v31d main { width: min( 100% - 18px, 1380px ); } body.polita-content-v31d .page { padding-top: 20px; } body.polita-content-v31d .page-heading { margin-bottom: 17px; } body.polita-content-v31d .page-copy, body.polita-content-v31d .page-heading p { font-size: 12px; line-height: 1.55; } } /* END POLITA_SHARED_CONTENT_UI_V31D */ /* ========================================================= POLITA_TITLE_INTRO_CLEANUP_V31E3 Page introductions are NOT cards. Keep extension chrome for actual content modules only. ========================================================= */ /* DATABASE / HOME */ body[data-polita-surface-v31d="database"] main > .hero:first-of-type { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; } body[data-polita-surface-v31d="database"] main > .hero:first-of-type .hero-copy { margin-left: auto; margin-right: auto; } body[data-polita-surface-v31d="database"] main > .hero:first-of-type .live-strip { justify-content: center; } body[data-polita-surface-v31d="database"] main > .hero:first-of-type .live-stat { justify-content: center; } /* GLOBAL BADGES */ body[data-polita-surface-v31d="badges"] main > .hero:first-of-type, body[data-polita-surface-v31d="badges"] main > .page-heading:first-of-type { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* TWITCH DROPS */ body[data-polita-surface-v31d="drops"] main > .hero:first-of-type, body[data-polita-surface-v31d="drops"] main > .page-heading:first-of-type { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* LEADERBOARD */ body[data-polita-surface-v31d="leaderboard"] main > .hero:first-of-type, body[data-polita-surface-v31d="leaderboard"] main > .page-heading:first-of-type { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* PUBLIC PROFILE */ body[data-polita-surface-v31d="profile"] main > .page-heading:first-of-type { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* MY PROFILE */ body[data-polita-surface-v31d="me"] main > .page-heading:first-of-type { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Generic safety net for page-heading intro wrappers. Does NOT touch badge-detail or campaign content cards. */ body.polita-content-v31d:not( [data-polita-surface-v31d="badge-detail"] ):not( [data-polita-surface-v31d="campaign"] ) main > .page-heading:first-of-type { border-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* END POLITA_TITLE_INTRO_CLEANUP_V31E3 */ /* POLITA_TOP_NUMBER_BOX_CLEANUP_V31E4R */ /* Top summary groups are text, not cards */ body.polita-content-v31d .page-summary, body.polita-content-v31d .page-summary > *, body.polita-content-v31d main > .stats-grid:first-of-type, body.polita-content-v31d main > .stats-grid:first-of-type > *, body.polita-content-v31d main > .stats-row:first-of-type, body.polita-content-v31d main > .stats-row:first-of-type > *, body.polita-content-v31d main > .summary-grid:first-of-type, body.polita-content-v31d main > .summary-grid:first-of-type > *, body.polita-content-v31d main > .hero-stats:first-of-type, body.polita-content-v31d main > .hero-stats:first-of-type > * { min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Homepage/database headline numbers */ body[data-polita-surface-v31d="database"] main > .hero:first-of-type .live-stat { min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Global Badges headline numbers */ body[data-polita-surface-v31d="badges"] :is(.page-summary,.stats,.stats-grid,.hero-stats) > * { min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Twitch Drops headline numbers */ body[data-polita-surface-v31d="drops"] main > :is(.stats,.stats-grid,.summary-grid,.hero-stats):first-of-type > * { min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Leaderboard headline numbers */ body[data-polita-surface-v31d="leaderboard"] main > :is(.stats,.stats-grid,.summary-grid,.hero-stats):first-of-type > * { min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Badge detail collectors / sightings */ body[data-polita-surface-v31d="badge-detail"] .hero-v30b .hero-stat { min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* END POLITA_TOP_NUMBER_BOX_CLEANUP_V31E4R */