/* POLITA_MASTER_HUB_HEADER_V1 */ :root { --polita-master-header-height-v1: 64px; } body.polita-master-header-enabled-v1 { padding-top: var(--polita-master-header-height-v1) !important; } body.polita-master-header-enabled-v1 > header:not(#politaMasterHeaderV1), body.polita-master-header-enabled-v1 main.app > header:not(#politaMasterHeaderV1), body.polita-master-header-enabled-v1 .app > header:not(#politaMasterHeaderV1), body.polita-master-header-enabled-v1 header.topbar:not(#politaMasterHeaderV1), body.polita-master-header-enabled-v1 header.polita-simple-home-icon-header-v1 { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } #politaMasterHeaderV1 { position: fixed !important; inset: 0 0 auto 0 !important; z-index: 2147483000 !important; width: 100% !important; height: var(--polita-master-header-height-v1) !important; min-height: var(--polita-master-header-height-v1) !important; margin: 0 !important; padding: 0 18px !important; border: 0 !important; border-bottom: 1px solid rgba(110, 110, 180, .26) !important; background: linear-gradient( 90deg, rgba(2, 21, 24, .985), rgba(10, 9, 28, .985) ) !important; box-shadow: 0 10px 36px rgba(0, 0, 0, .32) !important; backdrop-filter: blur(18px) !important; font-family: "Rajdhani", Inter, system-ui, sans-serif !important; } #politaMasterHeaderV1, #politaMasterHeaderV1 * { box-sizing: border-box !important; } .polita-master-header-inner-v1 { width: min(1160px, 100%) !important; height: 100% !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 46px minmax(0, 1fr) 46px !important; align-items: center !important; gap: 18px !important; } .polita-master-logo-v1 { width: 38px !important; height: 38px !important; display: grid !important; place-items: center !important; overflow: hidden !important; border-radius: 10px !important; text-decoration: none !important; } .polita-master-logo-v1 img { width: 36px !important; height: 36px !important; display: block !important; object-fit: contain !important; } .polita-master-nav-v1 { min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; } .polita-master-nav-v1 a { min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; border: 1px solid transparent !important; border-radius: 9px !important; color: rgba(241, 241, 248, .82) !important; background: transparent !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } .polita-master-nav-v1 a:hover { color: #fff !important; background: rgba(255, 255, 255, .045) !important; } .polita-master-nav-v1 a.is-active { color: #fff !important; border-color: rgba(160, 93, 255, .24) !important; background: linear-gradient( 145deg, rgba(160, 93, 255, .13), rgba(255, 255, 255, .025) ) !important; } .polita-master-profile-v1 { position: relative !important; justify-self: end !important; } .polita-master-profile-button-v1 { width: 42px !important; height: 42px !important; display: grid !important; place-items: center !important; overflow: hidden !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 50% !important; color: #fff !important; background: linear-gradient( 145deg, rgba(160, 93, 255, .22), rgba(68, 225, 255, .09) ) !important; box-shadow: 0 0 20px rgba(160, 93, 255, .12) !important; cursor: pointer !important; font-size: 16px !important; font-weight: 800 !important; } .polita-master-profile-button-v1:hover, .polita-master-profile-button-v1[aria-expanded="true"] { border-color: rgba(160, 93, 255, .52) !important; box-shadow: 0 0 24px rgba(160, 93, 255, .22) !important; } .polita-master-profile-button-v1 img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; } .polita-master-menu-v1 { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; width: 244px !important; display: none !important; overflow: hidden !important; padding: 8px !important; border: 1px solid rgba(255, 255, 255, .11) !important; border-radius: 14px !important; background: linear-gradient( 145deg, rgba(17, 17, 24, .995), rgba(7, 7, 11, .995) ) !important; box-shadow: 0 22px 70px rgba(0, 0, 0, .55) !important; } .polita-master-menu-v1.is-open { display: block !important; } .polita-master-menu-user-v1 { padding: 10px 11px 11px !important; margin-bottom: 6px !important; border-bottom: 1px solid rgba(255, 255, 255, .075) !important; } .polita-master-menu-name-v1 { overflow: hidden !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .polita-master-menu-meta-v1 { margin-top: 2px !important; color: rgba(220, 220, 232, .52) !important; font-size: 11px !important; font-weight: 600 !important; } .polita-master-menu-v1 a { min-height: 37px !important; display: flex !important; align-items: center !important; padding: 0 11px !important; border-radius: 8px !important; color: rgba(235, 235, 243, .78) !important; background: transparent !important; text-decoration: none !important; font-size: 13px !important; font-weight: 700 !important; } .polita-master-menu-v1 a:hover { color: #fff !important; background: rgba(255, 255, 255, .055) !important; } .polita-master-menu-divider-v1 { height: 1px !important; margin: 7px 4px !important; background: rgba(255, 255, 255, .075) !important; } .polita-master-menu-v1 .polita-master-logout-v1 { color: #ffaaaa !important; } .polita-master-menu-v1 .polita-master-logout-v1:hover { color: #ffd0d0 !important; background: rgba(255, 75, 75, .09) !important; } @media (max-width: 620px) { #politaMasterHeaderV1 { padding: 0 10px !important; } .polita-master-header-inner-v1 { grid-template-columns: 40px minmax(0, 1fr) 40px !important; gap: 7px !important; } .polita-master-logo-v1, .polita-master-logo-v1 img { width: 34px !important; height: 34px !important; } .polita-master-nav-v1 { gap: 3px !important; } .polita-master-nav-v1 a { min-height: 34px !important; padding: 0 7px !important; font-size: 12px !important; } .polita-master-profile-button-v1 { width: 38px !important; height: 38px !important; } .polita-master-menu-v1 { position: fixed !important; top: calc(var(--polita-master-header-height-v1) + 7px) !important; right: 10px !important; width: min(260px, calc(100vw - 20px)) !important; } } /* POLITA_MASTER_SUPPORT_HEART_V2 Support text followed by a small red CSS heart. The 10px margin provides the requested visible space. */ #politaMasterHeaderV1 .polita-master-support-tab-v2{ display:inline-flex; align-items:center; justify-content:center; } #politaMasterHeaderV1 .polita-master-support-label-v2{ display:inline-block; } #politaMasterHeaderV1 .polita-master-support-heart-v2{ position:relative; display:inline-block; width:9px; height:8px; flex:0 0 9px; margin-left:10px; transform:rotate(-45deg); border-radius:2px; background:#ff4866; filter: drop-shadow(0 0 3px rgba(255,72,102,.50)) drop-shadow(0 0 7px rgba(255,72,102,.20)); } #politaMasterHeaderV1 .polita-master-support-heart-v2::before, #politaMasterHeaderV1 .polita-master-support-heart-v2::after{ content:""; position:absolute; width:9px; height:8px; border-radius:50%; background:#ff4866; } #politaMasterHeaderV1 .polita-master-support-heart-v2::before{ top:-4px; left:0; } #politaMasterHeaderV1 .polita-master-support-heart-v2::after{ top:0; left:4px; } /* * POLITA_MASTER_GLOBAL_APPEARANCE_CSS_V1 * * One complete named Appearance preset controls: * - every page using the shared master assets, * - the global page atmosphere, * - the one shared header, * - the shared profile-picture ring, * - Settings avatar rings through the same variables. * * Ring shells remain visibly planted. Only the image inside waits. */ :root, html[data-polita-appearance-preset="aurora"] { --polita-appearance-a: #51e9ff; --polita-appearance-b: #815dff; --polita-appearance-c: #317fff; --polita-appearance-ring: rgba(105, 104, 255, .92); --polita-appearance-glow: rgba(80, 208, 255, .30); --polita-appearance-soft: rgba(101, 91, 255, .12); --polita-appearance-deep: #070716; } html[data-polita-appearance-preset="inferno"] { --polita-appearance-a: #ffb52d; --polita-appearance-b: #ff4a32; --polita-appearance-c: #b5112f; --polita-appearance-ring: rgba(255, 99, 42, .94); --polita-appearance-glow: rgba(255, 84, 35, .30); --polita-appearance-soft: rgba(255, 73, 32, .12); --polita-appearance-deep: #160706; } html[data-polita-appearance-preset="eclipse"] { --polita-appearance-a: #a460ff; --polita-appearance-b: #5728ca; --polita-appearance-c: #111839; --polita-appearance-ring: rgba(141, 79, 255, .94); --polita-appearance-glow: rgba(114, 65, 255, .30); --polita-appearance-soft: rgba(105, 61, 232, .12); --polita-appearance-deep: #05050d; } html[data-polita-appearance-preset="leviathan"] { --polita-appearance-a: #40f1e5; --polita-appearance-b: #2178ff; --polita-appearance-c: #092a62; --polita-appearance-ring: rgba(46, 183, 255, .94); --polita-appearance-glow: rgba(32, 170, 255, .30); --polita-appearance-soft: rgba(29, 151, 255, .12); --polita-appearance-deep: #030c18; } html[data-polita-appearance-preset="sakura"] { --polita-appearance-a: #ff93c9; --polita-appearance-b: #ef3ca6; --polita-appearance-c: #9157ff; --polita-appearance-ring: rgba(255, 92, 178, .94); --polita-appearance-glow: rgba(255, 79, 179, .30); --polita-appearance-soft: rgba(255, 75, 178, .12); --polita-appearance-deep: #160712; } html[data-polita-appearance-preset="venom"] { --polita-appearance-a: #bfff31; --polita-appearance-b: #37df66; --polita-appearance-c: #087447; --polita-appearance-ring: rgba(99, 241, 82, .94); --polita-appearance-glow: rgba(85, 255, 102, .28); --polita-appearance-soft: rgba(80, 235, 95, .11); --polita-appearance-deep: #041107; } html[data-polita-appearance-preset="solaris"] { --polita-appearance-a: #fff071; --polita-appearance-b: #ffb520; --polita-appearance-c: #ee6718; --polita-appearance-ring: rgba(255, 189, 43, .96); --polita-appearance-glow: rgba(255, 187, 36, .30); --polita-appearance-soft: rgba(255, 177, 28, .12); --polita-appearance-deep: #160d02; } html[data-polita-appearance-preset="frostbite"] { --polita-appearance-a: #f2fbff; --polita-appearance-b: #8eeaff; --polita-appearance-c: #4299e8; --polita-appearance-ring: rgba(144, 228, 255, .96); --polita-appearance-glow: rgba(127, 221, 255, .30); --polita-appearance-soft: rgba(122, 213, 255, .12); --polita-appearance-deep: #061018; } /* * POLITA_MASTER_MONOCHROME_APPEARANCE_PRESETS_V1 * * White / Grey and Black / Grey use the same complete global * Appearance system as every existing preset. */ html[data-polita-appearance-preset="whitegrey"] { --polita-appearance-a: #ffffff; --polita-appearance-b: #c7ccd4; --polita-appearance-c: #858c97; --polita-appearance-ring: rgba(232, 236, 242, .96); --polita-appearance-glow: rgba(220, 225, 234, .28); --polita-appearance-soft: rgba(218, 223, 232, .13); --polita-appearance-deep: #171a1f; } html[data-polita-appearance-preset="blackgrey"] { --polita-appearance-a: #5f646d; --polita-appearance-b: #202329; --polita-appearance-c: #030405; --polita-appearance-ring: rgba(91, 97, 107, .94); --polita-appearance-glow: rgba(60, 65, 74, .28); --polita-appearance-soft: rgba(64, 69, 78, .12); --polita-appearance-deep: #010102; } /* * Shared global page atmosphere. * This is deliberately behind page content and does not replace * page layout, panels, controls or application functionality. */ html[data-polita-appearance-preset] { background: var(--polita-appearance-deep) !important; } html[data-polita-appearance-preset] body { background-color: var(--polita-appearance-deep) !important; background-image: radial-gradient( circle at 15% 0%, color-mix( in srgb, var(--polita-appearance-a) 18%, transparent ), transparent 34% ), radial-gradient( circle at 88% 10%, color-mix( in srgb, var(--polita-appearance-b) 19%, transparent ), transparent 36% ), radial-gradient( circle at 54% 100%, color-mix( in srgb, var(--polita-appearance-c) 15%, transparent ), transparent 44% ), linear-gradient( 180deg, color-mix( in srgb, var(--polita-appearance-deep) 92%, #000 ), var(--polita-appearance-deep) ) !important; background-attachment: fixed !important; } /* * The one shared master header follows the selected preset. */ html[data-polita-appearance-preset] #politaMasterHeaderV1 { border-bottom-color: color-mix( in srgb, var(--polita-appearance-ring) 32%, rgba(255, 255, 255, .07) ) !important; background: linear-gradient( 180deg, color-mix( in srgb, var(--polita-appearance-deep) 88%, var(--polita-appearance-b) ), color-mix( in srgb, var(--polita-appearance-deep) 96%, #000 ) ) !important; box-shadow: 0 1px 0 color-mix( in srgb, var(--polita-appearance-ring) 16%, transparent ), 0 16px 44px color-mix( in srgb, var(--polita-appearance-glow) 38%, transparent ) !important; } html[data-polita-appearance-preset] .polita-master-nav-v1 a:hover, html[data-polita-appearance-preset] .polita-master-nav-v1 a.is-active { border-color: color-mix( in srgb, var(--polita-appearance-ring) 60%, rgba(255, 255, 255, .08) ) !important; background: color-mix( in srgb, var(--polita-appearance-soft) 74%, rgba(255, 255, 255, .025) ) !important; box-shadow: inset 0 -2px 0 var(--polita-appearance-ring), 0 0 20px color-mix( in srgb, var(--polita-appearance-glow) 46%, transparent ) !important; } /* * Permanent master profile ring. * * visibility: visible is intentional: the ring remains planted even * while the inner uploaded image is still loading. */ html[data-polita-appearance-preset] .polita-master-profile-button-v1 { visibility: visible !important; border-color: var(--polita-appearance-ring) !important; background: linear-gradient( 145deg, color-mix( in srgb, var(--polita-appearance-a) 38%, #11131d ), color-mix( in srgb, var(--polita-appearance-b) 30%, #080910 ) ) !important; box-shadow: 0 0 0 4px var(--polita-appearance-soft), 0 0 24px var(--polita-appearance-glow) !important; } html[data-polita-appearance-preset] .polita-master-profile-button-v1:hover, html[data-polita-appearance-preset] .polita-master-profile-button-v1[aria-expanded="true"] { border-color: var(--polita-appearance-a) !important; box-shadow: 0 0 0 4px var(--polita-appearance-soft), 0 0 32px var(--polita-appearance-glow) !important; } /* * Settings uses its own account chip in addition to the shared header. * These selectors make the chip, preview ring and Settings top bar use * the same globally saved preset. */ html[data-polita-appearance-preset] .avatar, html[data-polita-appearance-preset] .profile-preview-avatar-v1 { visibility: visible !important; border-color: var(--polita-appearance-ring) !important; background: linear-gradient( 145deg, color-mix( in srgb, var(--polita-appearance-a) 36%, #11131d ), color-mix( in srgb, var(--polita-appearance-b) 28%, #090a10 ) ) !important; box-shadow: 0 0 0 4px var(--polita-appearance-soft), 0 0 24px var(--polita-appearance-glow) !important; } html[data-polita-appearance-preset] .topbar, html[data-polita-appearance-preset] .account-chip { border-color: color-mix( in srgb, var(--polita-appearance-ring) 30%, rgba(255, 255, 255, .08) ) !important; background: color-mix( in srgb, var(--polita-appearance-deep) 90%, var(--polita-appearance-b) ) !important; } /* * POLITA_MASTER_HEADER_NOTIFICATION_BELL_STYLE_V1_1 * * Non-emoji CSS notification bell matching the Settings icon family. * * Quiet: * - grey * - no animation * - no number * - no dot * * Real unread: * - slow grey-to-light-cyan pulse * - soft glow */ #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-v1 { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; width: auto !important; min-width: 92px !important; overflow: visible !important; } #politaMasterHeaderV1 .polita-master-notification-button-v1 { position: relative !important; width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; display: inline-grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 50% !important; background: transparent !important; color: rgba(167, 171, 188, .60) !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; transition: color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important; } #politaMasterHeaderV1 .polita-master-notification-button-v1:hover { color: rgba(202, 208, 224, .88) !important; border-color: rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .025) !important; } #politaMasterHeaderV1 .polita-master-notification-button-v1:focus-visible { color: #79eaff !important; border-color: rgba(94, 228, 255, .35) !important; box-shadow: 0 0 0 3px rgba(81, 233, 255, .08) !important; } #politaMasterHeaderV1 .polita-master-notification-bell-v1 { position: relative !important; display: block !important; width: 20px !important; height: 21px !important; } #politaMasterHeaderV1 .polita-master-notification-bell-dome-v1 { position: absolute !important; left: 4px !important; top: 3px !important; width: 12px !important; height: 12px !important; border: 2px solid currentColor !important; border-bottom: 0 !important; border-radius: 8px 8px 3px 3px !important; box-sizing: border-box !important; } #politaMasterHeaderV1 .polita-master-notification-bell-dome-v1::before { content: "" !important; position: absolute !important; left: 3px !important; top: -5px !important; width: 2px !important; height: 3px !important; border-radius: 2px !important; background: currentColor !important; } #politaMasterHeaderV1 .polita-master-notification-bell-base-v1 { position: absolute !important; left: 2px !important; top: 13px !important; width: 16px !important; height: 5px !important; border-bottom: 2px solid currentColor !important; border-radius: 0 0 10px 10px !important; box-sizing: border-box !important; } #politaMasterHeaderV1 .polita-master-notification-bell-clapper-v1 { position: absolute !important; left: 8px !important; bottom: 0 !important; width: 4px !important; height: 3px !important; border-radius: 0 0 5px 5px !important; background: currentColor !important; } #politaMasterHeaderV1 .polita-master-notification-button-v1.has-unread { animation: politaMasterNotificationPulseV1_1 3.8s ease-in-out infinite !important; } @keyframes politaMasterNotificationPulseV1_1 { 0%, 100% { color: rgba(167, 171, 188, .62); border-color: transparent; background: transparent; box-shadow: none; filter: none; } 50% { color: #79eaff; border-color: rgba(94, 228, 255, .22); background: rgba(81, 233, 255, .035); box-shadow: 0 0 10px rgba(81, 233, 255, .12), 0 0 24px rgba(81, 233, 255, .07); filter: drop-shadow( 0 0 4px rgba(81, 233, 255, .28) ); } } @media (prefers-reduced-motion: reduce) { #politaMasterHeaderV1 .polita-master-notification-button-v1.has-unread { animation: none !important; color: #79eaff !important; box-shadow: 0 0 14px rgba(81, 233, 255, .11) !important; } } /* * The right side now contains the bell and profile picture. * The single master header remains the only header authority. */ #politaMasterHeaderV1 .polita-master-header-inner-v1 { grid-template-columns: 46px minmax(0, 1fr) auto !important; } @media (max-width: 620px) { #politaMasterHeaderV1 .polita-master-header-inner-v1 { grid-template-columns: 40px minmax(0, 1fr) auto !important; } #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-v1 { gap: 4px !important; min-width: 80px !important; } #politaMasterHeaderV1 .polita-master-notification-button-v1 { width: 36px !important; height: 36px !important; min-width: 36px !important; flex-basis: 36px !important; } #politaMasterHeaderV1 .polita-master-notification-bell-v1 { transform: scale(.9) !important; } } /* * POLITA_MASTER_HEADER_NOTIFICATION_DROPDOWN_STYLE_V1 * * Appearance-aware notification inbox attached to the shared header. */ #politaMasterHeaderV1 .polita-master-notification-dropdown-v1 { position: absolute !important; top: calc(100% + 11px) !important; right: 48px !important; z-index: 1000002 !important; width: min(390px, calc(100vw - 24px)) !important; max-height: min(520px, calc(100vh - 92px)) !important; display: none !important; overflow: hidden !important; border: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 30%, rgba(255, 255, 255, .08) ) !important; border-radius: 16px !important; background: linear-gradient( 145deg, color-mix( in srgb, var(--polita-appearance-deep) 94%, var(--polita-appearance-b) ), color-mix( in srgb, var(--polita-appearance-deep) 98%, #000000 ) ) !important; box-shadow: 0 24px 74px rgba(0, 0, 0, .62), 0 0 30px color-mix( in srgb, var(--polita-appearance-glow) 24%, transparent ) !important; color: #ffffff !important; backdrop-filter: blur(22px) !important; } #politaMasterHeaderV1 .polita-master-notification-dropdown-v1.is-open { display: block !important; } #politaMasterHeaderV1 .polita-master-notification-dropdown-head-v1 { min-height: 66px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 12px 14px !important; border-bottom: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 20%, rgba(255, 255, 255, .065) ) !important; background: color-mix( in srgb, var(--polita-appearance-soft) 42%, transparent ) !important; } #politaMasterHeaderV1 .polita-master-notification-dropdown-head-v1 > div { min-width: 0 !important; display: grid !important; gap: 3px !important; } #politaMasterHeaderV1 .polita-master-notification-dropdown-head-v1 strong { color: #ffffff !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1.1 !important; } #politaMasterHeaderV1 .polita-master-notification-dropdown-head-v1 span { overflow: hidden !important; color: rgba(224, 228, 243, .53) !important; font-size: 11px !important; font-weight: 700 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #politaMasterHeaderV1 #politaMasterNotificationMarkAllV1 { min-height: 32px !important; flex: 0 0 auto !important; padding: 0 10px !important; border: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 30%, rgba(255, 255, 255, .08) ) !important; border-radius: 9px !important; background: color-mix( in srgb, var(--polita-appearance-soft) 58%, rgba(255, 255, 255, .018) ) !important; color: color-mix( in srgb, var(--polita-appearance-a) 74%, #ffffff ) !important; font: inherit !important; font-size: 11px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 #politaMasterNotificationMarkAllV1:hover:not(:disabled) { border-color: color-mix( in srgb, var(--polita-appearance-ring) 55%, rgba(255, 255, 255, .08) ) !important; box-shadow: 0 0 16px color-mix( in srgb, var(--polita-appearance-glow) 38%, transparent ) !important; } #politaMasterHeaderV1 #politaMasterNotificationMarkAllV1:disabled { cursor: default !important; opacity: .38 !important; } #politaMasterHeaderV1 .polita-master-notification-list-v1 { max-height: 438px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; } #politaMasterHeaderV1 .polita-master-notification-row-v1 { position: relative !important; width: 100% !important; min-height: 78px !important; display: flex !important; align-items: stretch !important; margin: 0 !important; padding: 14px 15px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .065) !important; border-radius: 0 !important; background: transparent !important; color: inherit !important; text-align: left !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } #politaMasterHeaderV1 .polita-master-notification-row-v1:last-child { border-bottom: 0 !important; } #politaMasterHeaderV1 .polita-master-notification-row-v1:hover { background: color-mix( in srgb, var(--polita-appearance-soft) 36%, rgba(255, 255, 255, .018) ) !important; } #politaMasterHeaderV1 .polita-master-notification-row-v1.is-unread { background: linear-gradient( 90deg, color-mix( in srgb, var(--polita-appearance-soft) 72%, transparent ), transparent 82% ) !important; } #politaMasterHeaderV1 .polita-master-notification-row-v1.is-unread::before { content: "" !important; position: absolute !important; top: 13px !important; bottom: 13px !important; left: 0 !important; width: 2px !important; border-radius: 0 3px 3px 0 !important; background: var(--polita-appearance-a) !important; box-shadow: 0 0 12px var(--polita-appearance-glow) !important; } #politaMasterHeaderV1 .polita-master-notification-row-copy-v1 { min-width: 0 !important; flex: 1 1 auto !important; display: grid !important; gap: 7px !important; } #politaMasterHeaderV1 .polita-master-notification-row-top-v1 { min-width: 0 !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; } #politaMasterHeaderV1 .polita-master-notification-row-top-v1 strong { min-width: 0 !important; overflow: hidden !important; color: rgba(244, 246, 255, .87) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.25 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #politaMasterHeaderV1 .polita-master-notification-row-v1.is-unread .polita-master-notification-row-top-v1 strong { color: #ffffff !important; } #politaMasterHeaderV1 .polita-master-notification-row-top-v1 time { flex: 0 0 auto !important; color: rgba(213, 218, 237, .43) !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1.4 !important; white-space: nowrap !important; } #politaMasterHeaderV1 .polita-master-notification-message-v1 { display: -webkit-box !important; overflow: hidden !important; margin: 0 !important; color: rgba(219, 224, 242, .55) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.45 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } #politaMasterHeaderV1 .polita-master-notification-empty-v1 { min-height: 225px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 8px !important; padding: 28px !important; text-align: center !important; } #politaMasterHeaderV1 .polita-master-notification-empty-v1 strong { color: rgba(242, 245, 255, .82) !important; font-size: 14px !important; font-weight: 900 !important; } #politaMasterHeaderV1 .polita-master-notification-empty-v1 p { margin: 0 !important; color: rgba(219, 224, 242, .45) !important; font-size: 12px !important; font-weight: 600 !important; } #politaMasterHeaderV1 .polita-master-notification-empty-bell-v1 { position: relative !important; width: 26px !important; height: 27px !important; margin-bottom: 4px !important; color: color-mix( in srgb, var(--polita-appearance-a) 55%, rgba(190, 194, 210, .55) ) !important; opacity: .65 !important; } #politaMasterHeaderV1 .polita-master-notification-empty-bell-v1::before { content: "" !important; position: absolute !important; top: 3px !important; left: 5px !important; width: 16px !important; height: 17px !important; border: 2px solid currentColor !important; border-bottom: 0 !important; border-radius: 10px 10px 4px 4px !important; box-sizing: border-box !important; } #politaMasterHeaderV1 .polita-master-notification-empty-bell-v1::after { content: "" !important; position: absolute !important; bottom: 2px !important; left: 3px !important; width: 20px !important; height: 7px !important; border-bottom: 2px solid currentColor !important; border-radius: 0 0 12px 12px !important; box-sizing: border-box !important; } @media (max-width: 620px) { #politaMasterHeaderV1 .polita-master-notification-dropdown-v1 { position: fixed !important; top: calc( var(--polita-master-header-height-v1) + 7px ) !important; right: 10px !important; width: min( 390px, calc(100vw - 20px) ) !important; max-height: calc( 100vh - var(--polita-master-header-height-v1) - 18px ) !important; } #politaMasterHeaderV1 .polita-master-notification-list-v1 { max-height: calc( 100vh - var(--polita-master-header-height-v1) - 92px ) !important; } #politaMasterHeaderV1 .polita-master-notification-dropdown-head-v1 { padding: 11px 12px !important; } #politaMasterHeaderV1 .polita-master-notification-row-v1 { min-height: 74px !important; padding: 13px !important; } } /* POLITA_FULL_NOTIFICATION_VIEW_STYLE_V1 */ #politaMasterHeaderV1 .polita-master-notification-detail-v1 { display: none !important; max-height: 438px !important; overflow-y: auto !important; } #politaMasterHeaderV1 .polita-master-notification-detail-v1.is-open { display: block !important; } #politaMasterHeaderV1 .polita-master-notification-detail-head-v1 { min-height: 54px !important; display: flex !important; align-items: center !important; padding: 10px 14px !important; border-bottom: 1px solid rgba(255,255,255,.065) !important; } #politaMasterHeaderV1 #politaMasterNotificationDetailBackV1 { border: 0 !important; background: transparent !important; color: var(--polita-appearance-a) !important; font: inherit !important; font-size: 12px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-notification-detail-body-v1 { min-height: 260px !important; padding: 16px !important; } /* POLITA_FULL_NOTIFICATION_VIEW_CONTENT_STYLE_V1 */ #politaMasterHeaderV1 .polita-master-notification-detail-media-v1 { margin:0 0 15px 0!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.075)!important; border-radius:12px!important; background:rgba(255,255,255,.018)!important; } #politaMasterHeaderV1 .polita-master-notification-detail-media-v1 img { display:block!important; width:100%!important; max-height:260px!important; object-fit:contain!important; background:rgba(0,0,0,.24)!important; } #politaMasterHeaderV1 .polita-master-notification-detail-copy-v1 { display:grid!important; gap:12px!important; } #politaMasterHeaderV1 .polita-master-notification-detail-meta-v1 { display:flex!important; justify-content:space-between!important; gap:12px!important; color:rgba(213,218,237,.48)!important; font-size:10px!important; font-weight:800!important; text-transform:uppercase!important; letter-spacing:.08em!important; } #politaMasterHeaderV1 .polita-master-notification-detail-copy-v1 h3 { margin:0!important; color:#fff!important; font-size:19px!important; font-weight:900!important; line-height:1.2!important; } #politaMasterHeaderV1 .polita-master-notification-detail-copy-v1 p { margin:0!important; color:rgba(226,231,246,.72)!important; font-size:13px!important; font-weight:600!important; line-height:1.6!important; white-space:pre-wrap!important; overflow-wrap:anywhere!important; } #politaMasterHeaderV1 .polita-master-notification-detail-action-v1 { min-height:40px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:100%!important; margin-top:4px!important; padding:0 14px!important; border:1px solid color-mix(in srgb,var(--polita-appearance-ring) 55%,rgba(255,255,255,.09))!important; border-radius:10px!important; background:color-mix(in srgb,var(--polita-appearance-soft) 58%,rgba(255,255,255,.025))!important; color:#fff!important; font:inherit!important; font-size:12px!important; font-weight:900!important; text-decoration:none!important; box-sizing:border-box!important; } #politaMasterHeaderV1 .polita-master-notification-detail-action-v1:hover { border-color:color-mix(in srgb,var(--polita-appearance-ring) 78%,rgba(255,255,255,.12))!important; box-shadow:0 0 18px color-mix(in srgb,var(--polita-appearance-glow) 34%,transparent)!important; } @media (max-width:620px) { #politaMasterHeaderV1 .polita-master-notification-detail-v1 { max-height:calc(100vh - var(--polita-master-header-height-v1) - 18px)!important; } #politaMasterHeaderV1 .polita-master-notification-detail-media-v1 img { max-height:220px!important; } } /* * POLITA_NOTIFICATION_FOUR_CARD_SCROLL_V1 */ #politaMasterHeaderV1 .polita-master-notification-list-v1 { max-height: calc(78px * 4) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; } /* * POLITA_NOTIFICATION_MANAGEMENT_STYLE_V1 */ #politaMasterHeaderV1 #politaMasterNotificationClearAllV1 { flex: 0 0 auto !important; min-height: 32px !important; margin-left: 7px !important; padding: 0 10px !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 9px !important; background: rgba(255, 255, 255, .025) !important; color: rgba(232, 236, 248, .62) !important; font: inherit !important; font-size: 11px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 #politaMasterNotificationClearAllV1:hover:not(:disabled) { border-color: color-mix( in srgb, var(--polita-appearance-ring) 48%, rgba(255, 255, 255, .08) ) !important; color: #ffffff !important; background: color-mix( in srgb, var(--polita-appearance-soft) 35%, rgba(255, 255, 255, .025) ) !important; } #politaMasterHeaderV1 #politaMasterNotificationClearAllV1:disabled { cursor: default !important; opacity: .38 !important; } #politaMasterHeaderV1 #politaMasterNotificationDetailDismissV1 { width: 100% !important; min-height: 40px !important; margin-top: 14px !important; padding: 0 14px !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 10px !important; background: rgba(255, 255, 255, .025) !important; color: rgba(232, 236, 248, .68) !important; font: inherit !important; font-size: 12px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 #politaMasterNotificationDetailDismissV1:hover:not(:disabled) { border-color: rgba(255, 255, 255, .16) !important; color: #ffffff !important; background: rgba(255, 255, 255, .05) !important; } #politaMasterHeaderV1 #politaMasterNotificationDetailDismissV1:disabled { cursor: default !important; opacity: .45 !important; } /* * POLITA_MASTER_HEADER_PINGS_DROPDOWN_STYLE_V1_1 * * Appearance-aware Pings dropdown matching Notifications. * Envelope pulses yellow only for genuine unread Pings. */ #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-pings-v1 { min-width: 138px !important; } #politaMasterHeaderV1 .polita-master-ping-button-v1 { position: relative !important; width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; display: inline-grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 50% !important; background: transparent !important; color: rgba(167, 171, 188, .60) !important; box-shadow: none !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } #politaMasterHeaderV1 .polita-master-ping-button-v1:hover { color: rgba(202, 208, 224, .88) !important; border-color: rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .025) !important; } #politaMasterHeaderV1 .polita-master-ping-envelope-v1 { position: relative !important; display: block !important; width: 20px !important; height: 15px !important; border: 2px solid currentColor !important; border-radius: 3px !important; box-sizing: border-box !important; } #politaMasterHeaderV1 .polita-master-ping-envelope-flap-v1::before, #politaMasterHeaderV1 .polita-master-ping-envelope-flap-v1::after { content: "" !important; position: absolute !important; top: 2px !important; width: 12px !important; border-top: 2px solid currentColor !important; } #politaMasterHeaderV1 .polita-master-ping-envelope-flap-v1::before { left: 0 !important; transform: rotate(35deg) !important; } #politaMasterHeaderV1 .polita-master-ping-envelope-flap-v1::after { right: 0 !important; transform: rotate(-35deg) !important; } #politaMasterHeaderV1 .polita-master-ping-button-v1.has-unread { animation: politaMasterPingPulseV1_1 3.8s ease-in-out infinite !important; } @keyframes politaMasterPingPulseV1_1 { 0%, 100% { color: rgba(167, 171, 188, .62); border-color: transparent; background: transparent; box-shadow: none; filter: none; } 50% { color: #ffe06d; border-color: rgba(255, 220, 78, .25); background: rgba(255, 214, 65, .035); box-shadow: 0 0 10px rgba(255, 214, 65, .13), 0 0 24px rgba(255, 214, 65, .07); filter: drop-shadow( 0 0 4px rgba(255, 214, 65, .29) ); } } #politaMasterHeaderV1 .polita-master-ping-dropdown-v1 { position: absolute !important; top: calc(100% + 11px) !important; right: 96px !important; z-index: 1000003 !important; width: min(420px, calc(100vw - 24px)) !important; max-height: min(590px, calc(100vh - 92px)) !important; display: none !important; overflow: hidden !important; border: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 30%, rgba(255, 255, 255, .08) ) !important; border-radius: 16px !important; background: linear-gradient( 145deg, color-mix( in srgb, var(--polita-appearance-deep) 94%, var(--polita-appearance-b) ), color-mix( in srgb, var(--polita-appearance-deep) 98%, #000 ) ) !important; box-shadow: 0 24px 74px rgba(0, 0, 0, .62), 0 0 30px color-mix( in srgb, var(--polita-appearance-glow) 24%, transparent ) !important; color: #fff !important; backdrop-filter: blur(22px) !important; } #politaMasterHeaderV1 .polita-master-ping-dropdown-v1.is-open { display: block !important; } #politaMasterHeaderV1 .polita-master-ping-dropdown-head-v1 { min-height: 66px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 14px !important; border-bottom: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 20%, rgba(255, 255, 255, .065) ) !important; background: color-mix( in srgb, var(--polita-appearance-soft) 42%, transparent ) !important; } #politaMasterHeaderV1 .polita-master-ping-dropdown-head-v1 > div { min-width: 0 !important; display: grid !important; gap: 3px !important; } #politaMasterHeaderV1 .polita-master-ping-dropdown-head-v1 strong { color: #fff !important; font-size: 16px !important; font-weight: 900 !important; } #politaMasterHeaderV1 .polita-master-ping-dropdown-head-v1 span { overflow: hidden !important; color: rgba(224, 228, 243, .53) !important; font-size: 11px !important; font-weight: 700 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #politaMasterHeaderV1 .polita-master-ping-dropdown-head-v1 button, #politaMasterHeaderV1 .polita-master-ping-bulk-v1 button { min-height: 32px !important; padding: 0 10px !important; border: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 30%, rgba(255, 255, 255, .08) ) !important; border-radius: 9px !important; background: color-mix( in srgb, var(--polita-appearance-soft) 58%, rgba(255, 255, 255, .018) ) !important; color: color-mix( in srgb, var(--polita-appearance-a) 74%, #fff ) !important; font: inherit !important; font-size: 11px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-tabs-v1 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; padding: 7px !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; } #politaMasterHeaderV1 .polita-master-ping-tabs-v1 button { min-height: 34px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: rgba(224, 228, 243, .53) !important; font: inherit !important; font-size: 12px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-tabs-v1 button.is-active, #politaMasterHeaderV1 .polita-master-ping-tabs-v1 button:hover { color: #fff !important; border-color: color-mix( in srgb, var(--polita-appearance-ring) 27%, transparent ) !important; background: color-mix( in srgb, var(--polita-appearance-soft) 52%, transparent ) !important; } #politaMasterHeaderV1 .polita-master-ping-bulk-v1 { min-height: 42px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; padding: 5px 10px !important; border-bottom: 1px solid rgba(255, 255, 255, .055) !important; } #politaMasterHeaderV1 .polita-master-ping-bulk-v1 button:disabled { opacity: .38 !important; cursor: default !important; } #politaMasterHeaderV1 .polita-master-ping-body-v1 { max-height: 436px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; } #politaMasterHeaderV1 .polita-master-ping-row-v1 { position: relative !important; min-height: 78px !important; display: grid !important; grid-template-columns: 25px minmax(0, 1fr) auto !important; align-items: center !important; gap: 7px !important; border-bottom: 1px solid rgba(255, 255, 255, .065) !important; } #politaMasterHeaderV1 .polita-master-ping-row-v1.is-unread { background: linear-gradient( 90deg, rgba(255, 214, 65, .075), transparent 78% ) !important; } #politaMasterHeaderV1 .polita-master-ping-row-v1.is-unread::before { content: "" !important; position: absolute !important; top: 13px !important; bottom: 13px !important; left: 0 !important; width: 2px !important; background: #ffe06d !important; box-shadow: 0 0 12px rgba(255, 214, 65, .3) !important; } #politaMasterHeaderV1 .polita-master-ping-row-main-v1 { min-width: 0 !important; min-height: 77px !important; display: flex !important; align-items: center !important; gap: 11px !important; padding: 10px 4px !important; border: 0 !important; background: transparent !important; color: inherit !important; text-align: left !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-avatar-v1 { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; display: grid !important; place-items: center !important; overflow: hidden !important; border: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 45%, rgba(255, 255, 255, .08) ) !important; border-radius: 50% !important; background: color-mix( in srgb, var(--polita-appearance-soft) 55%, #0b0c12 ) !important; color: #fff !important; font-weight: 900 !important; } #politaMasterHeaderV1 .polita-master-ping-avatar-v1 img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; } #politaMasterHeaderV1 .polita-master-ping-row-copy-v1 { min-width: 0 !important; display: grid !important; gap: 5px !important; } #politaMasterHeaderV1 .polita-master-ping-row-top-v1 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } #politaMasterHeaderV1 .polita-master-ping-row-top-v1 strong { overflow: hidden !important; color: rgba(244, 246, 255, .89) !important; font-size: 13px !important; font-weight: 900 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #politaMasterHeaderV1 .polita-master-ping-row-top-v1 time { flex: 0 0 auto !important; color: rgba(213, 218, 237, .43) !important; font-size: 10px !important; font-weight: 800 !important; } #politaMasterHeaderV1 .polita-master-ping-row-copy-v1 p { overflow: hidden !important; margin: 0 !important; color: rgba(219, 224, 242, .55) !important; font-size: 12px !important; font-weight: 600 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #politaMasterHeaderV1 .polita-master-ping-row-action-v1 { min-height: 28px !important; margin-right: 9px !important; padding: 0 8px !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 7px !important; background: transparent !important; color: rgba(225, 229, 243, .55) !important; font: inherit !important; font-size: 10px !important; font-weight: 800 !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-select-v1 { display: grid !important; place-items: center !important; padding-left: 8px !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-select-v1 input { position: absolute !important; opacity: 0 !important; } #politaMasterHeaderV1 .polita-master-ping-select-v1 span { width: 15px !important; height: 15px !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 4px !important; background: rgba(255, 255, 255, .025) !important; } #politaMasterHeaderV1 .polita-master-ping-select-v1 input:checked + span { border-color: var(--polita-appearance-ring) !important; background: var(--polita-appearance-ring) !important; box-shadow: inset 0 0 0 3px var(--polita-appearance-deep) !important; } #politaMasterHeaderV1 .polita-master-ping-empty-v1 { min-height: 245px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 8px !important; padding: 30px !important; text-align: center !important; } #politaMasterHeaderV1 .polita-master-ping-empty-v1 strong { color: rgba(242, 245, 255, .84) !important; font-size: 14px !important; font-weight: 900 !important; } #politaMasterHeaderV1 .polita-master-ping-empty-v1 p { margin: 0 !important; color: rgba(219, 224, 242, .45) !important; font-size: 12px !important; font-weight: 600 !important; } #politaMasterHeaderV1 .polita-master-ping-empty-envelope-v1 { position: relative !important; width: 28px !important; height: 21px !important; margin-bottom: 5px !important; border: 2px solid currentColor !important; border-radius: 4px !important; color: color-mix( in srgb, var(--polita-appearance-a) 56%, rgba(190, 194, 210, .55) ) !important; opacity: .65 !important; } #politaMasterHeaderV1 .polita-master-ping-empty-envelope-v1::before, #politaMasterHeaderV1 .polita-master-ping-empty-envelope-v1::after { content: "" !important; position: absolute !important; top: 3px !important; width: 17px !important; border-top: 2px solid currentColor !important; } #politaMasterHeaderV1 .polita-master-ping-empty-envelope-v1::before { left: 0 !important; transform: rotate(34deg) !important; } #politaMasterHeaderV1 .polita-master-ping-empty-envelope-v1::after { right: 0 !important; transform: rotate(-34deg) !important; } #politaMasterHeaderV1 .polita-master-ping-conversation-head-v1, #politaMasterHeaderV1 .polita-master-ping-compose-head-v1 { min-height: 58px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 9px !important; padding: 9px 11px !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; } #politaMasterHeaderV1 .polita-master-ping-conversation-head-v1 button, #politaMasterHeaderV1 .polita-master-ping-compose-head-v1 button { min-height: 30px !important; padding: 0 9px !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 8px !important; background: transparent !important; color: rgba(232, 235, 248, .66) !important; font: inherit !important; font-size: 10px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-conversation-person-v1 { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; } #politaMasterHeaderV1 .polita-master-ping-conversation-person-v1 .polita-master-ping-avatar-v1 { width: 34px !important; height: 34px !important; flex-basis: 34px !important; } #politaMasterHeaderV1 .polita-master-ping-conversation-person-v1 span { min-width: 0 !important; display: grid !important; } #politaMasterHeaderV1 .polita-master-ping-conversation-person-v1 strong { overflow: hidden !important; color: #fff !important; font-size: 13px !important; font-weight: 900 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #politaMasterHeaderV1 .polita-master-ping-conversation-person-v1 small { color: rgba(222, 226, 241, .44) !important; font-size: 10px !important; } #politaMasterHeaderV1 .polita-master-ping-request-v1 { margin: 10px !important; padding: 12px !important; border: 1px solid rgba(255, 214, 65, .18) !important; border-radius: 11px !important; background: rgba(255, 214, 65, .045) !important; } #politaMasterHeaderV1 .polita-master-ping-request-v1 strong { color: #ffe798 !important; font-size: 12px !important; font-weight: 900 !important; } #politaMasterHeaderV1 .polita-master-ping-request-v1 p { margin: 4px 0 10px !important; color: rgba(230, 232, 241, .58) !important; font-size: 11px !important; } #politaMasterHeaderV1 .polita-master-ping-request-actions-v1 { display: flex !important; gap: 7px !important; } #politaMasterHeaderV1 .polita-master-ping-request-actions-v1 button { min-height: 30px !important; padding: 0 10px !important; border: 1px solid rgba(255, 214, 65, .2) !important; border-radius: 8px !important; background: rgba(255, 214, 65, .05) !important; color: #ffe798 !important; font: inherit !important; font-size: 10px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-messages-v1 { min-height: 220px !important; max-height: 295px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; overflow-y: auto !important; padding: 12px !important; } #politaMasterHeaderV1 .polita-master-ping-message-v1 { display: flex !important; justify-content: flex-start !important; } #politaMasterHeaderV1 .polita-master-ping-message-v1.is-mine { justify-content: flex-end !important; } #politaMasterHeaderV1 .polita-master-ping-message-v1 > div { max-width: 82% !important; padding: 9px 11px !important; border: 1px solid rgba(255, 255, 255, .075) !important; border-radius: 12px 12px 12px 4px !important; background: rgba(255, 255, 255, .035) !important; } #politaMasterHeaderV1 .polita-master-ping-message-v1.is-mine > div { border-color: color-mix( in srgb, var(--polita-appearance-ring) 25%, rgba(255, 255, 255, .06) ) !important; border-radius: 12px 12px 4px 12px !important; background: color-mix( in srgb, var(--polita-appearance-soft) 56%, rgba(255, 255, 255, .018) ) !important; } #politaMasterHeaderV1 .polita-master-ping-message-v1 p { margin: 0 !important; color: rgba(241, 243, 252, .83) !important; font-size: 12px !important; line-height: 1.45 !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; } #politaMasterHeaderV1 .polita-master-ping-message-v1 time { display: block !important; margin-top: 5px !important; color: rgba(220, 224, 239, .38) !important; font-size: 9px !important; text-align: right !important; } #politaMasterHeaderV1 .polita-master-ping-reply-v1 { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; padding: 10px !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; } #politaMasterHeaderV1 .polita-master-ping-reply-v1 textarea, #politaMasterHeaderV1 .polita-master-ping-compose-form-v1 textarea, #politaMasterHeaderV1 .polita-master-ping-search-v1 input { width: 100% !important; border: 1px solid rgba(255, 255, 255, .09) !important; border-radius: 9px !important; background: rgba(0, 0, 0, .18) !important; color: #fff !important; font: inherit !important; font-size: 12px !important; outline: none !important; } #politaMasterHeaderV1 .polita-master-ping-reply-v1 textarea { min-height: 42px !important; max-height: 105px !important; resize: vertical !important; padding: 10px !important; } #politaMasterHeaderV1 .polita-master-ping-reply-v1 button, #politaMasterHeaderV1 .polita-master-ping-compose-form-v1 button { min-height: 38px !important; align-self: end !important; padding: 0 13px !important; border: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 35%, rgba(255, 255, 255, .07) ) !important; border-radius: 9px !important; background: color-mix( in srgb, var(--polita-appearance-soft) 68%, rgba(255, 255, 255, .02) ) !important; color: color-mix( in srgb, var(--polita-appearance-a) 72%, #fff ) !important; font: inherit !important; font-size: 11px !important; font-weight: 900 !important; cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-compose-v1 { padding-bottom: 12px !important; } #politaMasterHeaderV1 .polita-master-ping-search-v1 { display: grid !important; gap: 6px !important; padding: 12px 12px 7px !important; } #politaMasterHeaderV1 .polita-master-ping-search-v1 span { color: rgba(230, 234, 246, .59) !important; font-size: 10px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .5px !important; } #politaMasterHeaderV1 .polita-master-ping-search-v1 input { height: 40px !important; padding: 0 11px !important; } #politaMasterHeaderV1 .polita-master-ping-search-results-v1 { max-height: 190px !important; overflow-y: auto !important; margin: 0 12px !important; border-radius: 10px !important; } #politaMasterHeaderV1 .polita-master-ping-user-result-v1, #politaMasterHeaderV1 .polita-master-ping-selected-user-v1 { width: 100% !important; min-height: 58px !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 8px 10px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .055) !important; background: rgba(255, 255, 255, .018) !important; color: inherit !important; text-align: left !important; } #politaMasterHeaderV1 .polita-master-ping-user-result-v1 { cursor: pointer !important; } #politaMasterHeaderV1 .polita-master-ping-user-result-v1:hover { background: color-mix( in srgb, var(--polita-appearance-soft) 45%, rgba(255, 255, 255, .02) ) !important; } #politaMasterHeaderV1 .polita-master-ping-user-result-v1 span, #politaMasterHeaderV1 .polita-master-ping-selected-user-v1 span { min-width: 0 !important; display: grid !important; } #politaMasterHeaderV1 .polita-master-ping-user-result-v1 strong, #politaMasterHeaderV1 .polita-master-ping-selected-user-v1 strong { overflow: hidden !important; color: rgba(244, 246, 255, .88) !important; font-size: 12px !important; font-weight: 900 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #politaMasterHeaderV1 .polita-master-ping-user-result-v1 small, #politaMasterHeaderV1 .polita-master-ping-selected-user-v1 small { color: rgba(220, 224, 239, .43) !important; font-size: 10px !important; } #politaMasterHeaderV1 .polita-master-ping-selected-user-v1 { width: auto !important; margin: 8px 12px 0 !important; border: 1px solid color-mix( in srgb, var(--polita-appearance-ring) 25%, rgba(255, 255, 255, .06) ) !important; border-radius: 10px !important; } #politaMasterHeaderV1 .polita-master-ping-searching-v1 { padding: 18px !important; color: rgba(224, 228, 241, .48) !important; font-size: 11px !important; text-align: center !important; } #politaMasterHeaderV1 .polita-master-ping-compose-form-v1 { display: grid !important; gap: 8px !important; padding: 10px 12px !important; } #politaMasterHeaderV1 .polita-master-ping-compose-form-v1 textarea { min-height: 125px !important; resize: vertical !important; padding: 11px !important; } #politaMasterHeaderV1 .polita-master-ping-compose-foot-v1 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } #politaMasterHeaderV1 .polita-master-ping-compose-foot-v1 small { color: rgba(220, 224, 239, .4) !important; font-size: 9px !important; } #politaMasterHeaderV1 .polita-master-ping-no-messages-v1 { margin: auto !important; color: rgba(224, 228, 241, .43) !important; font-size: 11px !important; } @media (prefers-reduced-motion: reduce) { #politaMasterHeaderV1 .polita-master-ping-button-v1.has-unread { animation: none !important; color: #ffe06d !important; } } @media (max-width: 620px) { #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-pings-v1 { min-width: 116px !important; gap: 2px !important; } #politaMasterHeaderV1 .polita-master-ping-button-v1 { width: 34px !important; height: 34px !important; min-width: 34px !important; flex-basis: 34px !important; } #politaMasterHeaderV1 .polita-master-ping-dropdown-v1 { position: fixed !important; top: calc( var(--polita-master-header-height-v1) + 7px ) !important; right: 10px !important; width: min( 420px, calc(100vw - 20px) ) !important; max-height: calc( 100vh - var(--polita-master-header-height-v1) - 18px ) !important; } #politaMasterHeaderV1 .polita-master-ping-body-v1 { max-height: calc( 100vh - var(--polita-master-header-height-v1) - 190px ) !important; } } /* * POLITA_MASTER_HEADER_REAL_INNER_ICON_PULSE_V1 * * The original unread animation lived on the outer buttons. * Those buttons intentionally have permanent !important colour, * border and background declarations, which prevent animation * keyframes from changing those properties. * * The visual icon itself now owns the unread colour animation. * This keeps the existing button layout and unread state system * completely unchanged. */ /* PINGS — actual envelope colour pulse */ #politaMasterHeaderV1 .polita-master-ping-button-v1.has-unread .polita-master-ping-envelope-v1 { animation: politaMasterPingEnvelopeColourPulseV1 3.8s ease-in-out infinite !important; } @keyframes politaMasterPingEnvelopeColourPulseV1 { 0%, 100% { color: rgba(167, 171, 188, .62); filter: none; } 25% { color: rgba(207, 194, 126, .82); filter: drop-shadow( 0 0 2px rgba(255, 214, 65, .10) ); } 50% { color: #ffe06d; filter: drop-shadow( 0 0 4px rgba(255, 214, 65, .42) ) drop-shadow( 0 0 10px rgba(255, 214, 65, .18) ); } 75% { color: rgba(207, 194, 126, .82); filter: drop-shadow( 0 0 2px rgba(255, 214, 65, .10) ); } } /* NOTIFICATIONS — actual bell colour pulse */ #politaMasterHeaderV1 .polita-master-notification-button-v1.has-unread .polita-master-notification-bell-v1 { animation: politaMasterNotificationBellColourPulseV1 3.8s ease-in-out infinite !important; } @keyframes politaMasterNotificationBellColourPulseV1 { 0%, 100% { color: rgba(167, 171, 188, .62); filter: none; } 25% { color: rgba(123, 194, 208, .82); filter: drop-shadow( 0 0 2px rgba(81, 233, 255, .10) ); } 50% { color: #79eaff; filter: drop-shadow( 0 0 4px rgba(81, 233, 255, .40) ) drop-shadow( 0 0 10px rgba(81, 233, 255, .17) ); } 75% { color: rgba(123, 194, 208, .82); filter: drop-shadow( 0 0 2px rgba(81, 233, 255, .10) ); } } /* * Respect reduced-motion preferences without losing the unread * indication: unread icons remain statically coloured. */ @media (prefers-reduced-motion: reduce) { #politaMasterHeaderV1 .polita-master-ping-button-v1.has-unread .polita-master-ping-envelope-v1 { animation: none !important; color: #ffe06d !important; filter: drop-shadow( 0 0 4px rgba(255, 214, 65, .30) ) !important; } #politaMasterHeaderV1 .polita-master-notification-button-v1.has-unread .polita-master-notification-bell-v1 { animation: none !important; color: #79eaff !important; filter: drop-shadow( 0 0 4px rgba(81, 233, 255, .28) ) !important; } } /* * POLITA_MASTER_NAV_TRUE_WHOLE_HEADER_CENTRE_V4 * * Badge Hub / Paint Studio / Upload are centred against the * mathematical centre of the complete shared master header. * * Their position is independent of the asymmetric width of: * - the Polita favicon on the left * - Pings, Notifications and Profile controls on the right * * Existing visual styling and right-side controls remain untouched. */ #politaMasterHeaderV1 .polita-master-header-inner-v1 { position: relative !important; } #politaMasterHeaderV1 .polita-master-logo-v1 { position: relative !important; z-index: 3 !important; } #politaMasterHeaderV1 .polita-master-profile-v1 { position: relative !important; z-index: 3 !important; } #politaMasterHeaderV1 .polita-master-nav-v1 { position: absolute !important; left: 50% !important; top: 50% !important; width: max-content !important; max-width: none !important; margin: 0 !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; } /* * Preserve the same mathematical centre on narrow screens. * Only the three primary tab footprints are reduced to avoid * colliding with the fixed controls at either side. */ @media (max-width: 620px) { #politaMasterHeaderV1 .polita-master-nav-v1 { left: 50% !important; top: 50% !important; gap: 1px !important; transform: translate(-50%, -50%) !important; } #politaMasterHeaderV1 .polita-master-nav-v1 a { min-height: 32px !important; padding-left: 3px !important; padding-right: 3px !important; font-size: 10px !important; } } /* * POLITA_NOTIFICATION_CLEAR_DEDICATED_ROW_STYLE_V1 * Clear is intentionally separated from the compact header so the * action has one unambiguous touch/click target on desktop and mobile. */ #politaMasterHeaderV1 #politaMasterNotificationClearAllV1 { width: 100% !important; min-height: 40px !important; margin: 0 !important; padding: 0 14px !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-radius: 0 !important; display: block !important; text-align: center !important; touch-action: manipulation !important; } /* * POLITA_MASTER_HEADER_LEFT_APPEARANCE_V1 * * Left-side utility cluster only: * Polita logo + Appearance sun. * * Pings, Notifications, Profile and centre navigation remain untouched. */ #politaMasterHeaderV1 .polita-master-left-actions-v1 { position: relative !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: max-content !important; min-width: 0 !important; } #politaMasterHeaderV1 .polita-master-left-appearance-v1 { width: 38px !important; height: 38px !important; min-width: 38px !important; display: inline-grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 10px !important; color: rgba(167, 171, 188, .62) !important; background: transparent !important; text-decoration: none !important; outline: none !important; cursor: pointer !important; transition: color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important; } #politaMasterHeaderV1 .polita-master-left-appearance-v1:hover { color: rgba(202, 208, 224, .90) !important; border-color: rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .025) !important; } #politaMasterHeaderV1 .polita-master-left-appearance-v1:focus-visible { color: var(--polita-appearance-a, #09F9E8) !important; border-color: color-mix( in srgb, var(--polita-appearance-a, #09F9E8) 38%, transparent ) !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--polita-appearance-a, #09F9E8) 8%, transparent ) !important; } #politaMasterHeaderV1 .polita-master-left-appearance-sun-v1 { display: block !important; width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.65 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* * Expand only the first master-header grid column enough to contain * P + sun. The centred nav stays absolutely centred by the later * whole-header-centre authority. */ #politaMasterHeaderV1 .polita-master-header-inner-v1 { grid-template-columns: 84px minmax(0, 1fr) auto !important; } @media (max-width: 620px) { #politaMasterHeaderV1 .polita-master-left-actions-v1 { gap: 4px !important; } #politaMasterHeaderV1 .polita-master-left-appearance-v1 { width: 34px !important; height: 34px !important; min-width: 34px !important; } #politaMasterHeaderV1 .polita-master-left-appearance-sun-v1 { width: 18px !important; height: 18px !important; } #politaMasterHeaderV1 .polita-master-header-inner-v1 { grid-template-columns: 72px minmax(0, 1fr) auto !important; } } /* POLITA_MASTER_HEADER_POPOUT_ICONS_V1 */ /* * Exact icon language from Polita extension 4.7.15. * * Pings = real chat-bubble SVG. * Notifications = real bell SVG. * * Existing website button IDs/classes are preserved. * Existing unread .has-unread animation targets are preserved. * Dropdown/API/click/layout logic is untouched. */ #politaMasterHeaderV1 .polita-master-header-popout-icon-v1 { display:block !important; width:19px !important; height:19px !important; min-width:19px !important; min-height:19px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.75 !important; stroke-linecap:round !important; stroke-linejoin:round !important; overflow:visible !important; } /* ---------------------------------------------------------- PINGS Retire the old CSS envelope rectangle while keeping its existing class name so unread colour animation still works. ---------------------------------------------------------- */ #politaMasterHeaderV1 .polita-master-ping-envelope-v1 { position:relative !important; width:19px !important; height:19px !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; box-sizing:content-box !important; } /* Old envelope flap is no longer used. */ #politaMasterHeaderV1 .polita-master-ping-envelope-flap-v1, #politaMasterHeaderV1 .polita-master-ping-envelope-flap-v1::before, #politaMasterHeaderV1 .polita-master-ping-envelope-flap-v1::after { display:none !important; content:none !important; } /* ---------------------------------------------------------- NOTIFICATIONS Keep the old bell class on the SVG so existing unread pulse/reduced-motion selectors continue to work. ---------------------------------------------------------- */ #politaMasterHeaderV1 .polita-master-notification-bell-v1 { position:relative !important; display:block !important; width:19px !important; height:19px !important; transform:none !important; background:none !important; border:0 !important; box-shadow:none !important; } /* Old hand-built CSS bell pieces are no longer used. */ #politaMasterHeaderV1 .polita-master-notification-bell-dome-v1, #politaMasterHeaderV1 .polita-master-notification-bell-base-v1, #politaMasterHeaderV1 .polita-master-notification-bell-clapper-v1, #politaMasterHeaderV1 .polita-master-notification-bell-dome-v1::before { display:none !important; content:none !important; } /* Mobile keeps the real SVGs crisp instead of scaling old shapes. */ @media (max-width:620px) { #politaMasterHeaderV1 .polita-master-header-popout-icon-v1, #politaMasterHeaderV1 .polita-master-ping-envelope-v1, #politaMasterHeaderV1 .polita-master-notification-bell-v1 { width:18px !important; height:18px !important; min-width:18px !important; min-height:18px !important; transform:none !important; } } /* /POLITA_MASTER_HEADER_POPOUT_ICONS_V1 */ /* POLITA_MASTER_HEADER_CLEAN_ICON_HOVER_V2 */ /* * Pings + Notifications: * * - NO hover circle * - NO hover panel/background * - NO hover border * - NO hover box shadow * - larger real Polita 4.7.15 SVGs * - SVG itself reacts on hover/focus * * Existing buttons, click areas, unread states, * dropdowns and APIs remain unchanged. */ /* ========================================================== REMOVE BUTTON-LEVEL HOVER CIRCLE COMPLETELY ========================================================== */ #politaMasterHeaderV1 .polita-master-ping-button-v1:hover, #politaMasterHeaderV1 .polita-master-ping-button-v1:focus-visible, #politaMasterHeaderV1 .polita-master-notification-button-v1:hover, #politaMasterHeaderV1 .polita-master-notification-button-v1:focus-visible{ background:transparent!important; border-color:transparent!important; box-shadow:none!important; outline:none!important; } /* ========================================================== MAKE THE ACTUAL SVG ICONS NOTICEABLY LARGER ========================================================== */ #politaMasterHeaderV1 .polita-master-header-popout-icon-v1, #politaMasterHeaderV1 svg.polita-master-ping-envelope-v1, #politaMasterHeaderV1 svg.polita-master-notification-bell-v1{ width:24px!important; height:24px!important; min-width:24px!important; min-height:24px!important; flex:0 0 24px!important; transform:scale(1)!important; transform-origin:center!important; transition: transform .16s ease, color .16s ease, filter .16s ease!important; } /* ========================================================== ICON ITSELF REACTS — NO CIRCLE BEHIND IT ========================================================== */ #politaMasterHeaderV1 .polita-master-ping-button-v1:hover .polita-master-header-popout-icon-v1, #politaMasterHeaderV1 .polita-master-ping-button-v1:focus-visible .polita-master-header-popout-icon-v1, #politaMasterHeaderV1 .polita-master-notification-button-v1:hover .polita-master-header-popout-icon-v1, #politaMasterHeaderV1 .polita-master-notification-button-v1:focus-visible .polita-master-header-popout-icon-v1{ transform:scale(1.10)!important; color: color-mix( in srgb, var(--polita-appearance-a,#51e9ff) 72%, white 28% )!important; filter: drop-shadow( 0 0 5px color-mix( in srgb, var(--polita-appearance-glow,rgba(80,208,255,.30)) 55%, transparent ) )!important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width:620px){ #politaMasterHeaderV1 .polita-master-header-popout-icon-v1, #politaMasterHeaderV1 svg.polita-master-ping-envelope-v1, #politaMasterHeaderV1 svg.polita-master-notification-bell-v1{ width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; flex-basis:22px!important; } } /* /POLITA_MASTER_HEADER_CLEAN_ICON_HOVER_V2 */ /* * POLITA_MASTER_HEADER_STRUCTURAL_RIGHT_CLUSTER_V3 * * Real DOM order: * Appearance -> Pings -> Notifications -> Profile * * No JavaScript left/top position calculations. */ /* Logo is the only item in the left utility group. */ #politaMasterHeaderV1 .polita-master-header-inner-v1{ grid-template-columns: max-content minmax(0,1fr) auto !important; } #politaMasterHeaderV1 .polita-master-left-actions-v1{ gap:0 !important; } /* Real right-side icon/action row. */ #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-v1, #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-pings-v1{ display:flex !important; align-items:center !important; justify-content:flex-end !important; width:max-content !important; min-width:0 !important; gap:0 !important; } /* No stale coordinate positioning on any utility control. */ #politaMasterHeaderV1 #politaMasterLeftAppearanceV1, #politaMasterHeaderV1 #politaMasterPingButtonV1, #politaMasterHeaderV1 #politaMasterNotificationButtonV1{ position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; } /* Appearance: 24px palette, visually tight beside Pings. */ #politaMasterHeaderV1 #politaMasterLeftAppearanceV1{ width:35px !important; height:40px !important; min-width:35px !important; flex:0 0 35px !important; margin:0 !important; padding:0 !important; } #politaMasterHeaderV1 #politaMasterLeftAppearanceV1 .polita-master-left-appearance-sun-v1{ display:block !important; width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; flex:0 0 24px !important; } /* Same true structure on mobile. */ @media (max-width:620px){ #politaMasterHeaderV1 .polita-master-header-inner-v1{ grid-template-columns: max-content minmax(0,1fr) auto !important; } #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-v1, #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-pings-v1{ width:max-content !important; min-width:0 !important; gap:0 !important; } #politaMasterHeaderV1 #politaMasterLeftAppearanceV1{ width:31px !important; height:34px !important; min-width:31px !important; flex:0 0 31px !important; margin:0 !important; } #politaMasterHeaderV1 #politaMasterLeftAppearanceV1 .polita-master-left-appearance-sun-v1{ width:22px !important; height:22px !important; min-width:22px !important; min-height:22px !important; flex:0 0 22px !important; } } /* /POLITA_MASTER_HEADER_STRUCTURAL_RIGHT_CLUSTER_V3 */ /* * POLITA_MASTER_NOTIFICATION_BELL_PROFILE_EDGE_V4B * * Final right-cluster correction. * * Palette: unchanged. * Pings: unchanged. * Bell: moved visibly left and one real size step larger. * Profile orb: remains final item and aligned to right inner edge. */ /* ========================================================== RIGHT EDGE — PROFILE ORB ========================================================== */ #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-v1, #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-pings-v1{ justify-self:end !important; margin-right:0 !important; padding-right:0 !important; } #politaMasterHeaderV1 #politaMasterProfileButtonV1{ margin-left:0 !important; margin-right:0 !important; } /* ========================================================== NOTIFICATION BUTTON BOX Keep the real layout box in normal flex flow. ========================================================== */ #politaMasterHeaderV1 #politaMasterNotificationButtonV1{ margin-left:0 !important; margin-right:0 !important; } /* * Desktop structural bell alignment. * * 40px -> 34px button footprint moves the centred 29px bell * exactly 3px left. * * 6px right reserve restores the total consumed width: * 34 + 6 = 40. * * Palette, Pings and Profile therefore keep their positions. */ @media (min-width:621px){ #politaMasterHeaderV1 #politaMasterNotificationButtonV1{ width:34px !important; min-width:34px !important; flex:0 0 34px !important; margin-left:0 !important; margin-right:6px !important; } } /* ========================================================== BELL GLYPH ONLY Move the actual bell left inside its existing button. Palette and Pings do not move. ========================================================== */ #politaMasterHeaderV1 #politaMasterNotificationButtonV1 svg.polita-master-notification-bell-v1{ position:relative !important; left:auto !important; right:auto !important; width:29px !important; height:29px !important; min-width:29px !important; min-height:29px !important; flex:0 0 29px !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width:620px){ #politaMasterHeaderV1 #politaMasterNotificationButtonV1 svg.polita-master-notification-bell-v1{ left:auto !important; width:27px !important; height:27px !important; min-width:27px !important; min-height:27px !important; flex:0 0 27px !important; } } /* /POLITA_MASTER_NOTIFICATION_BELL_PROFILE_EDGE_V4B */ /* * POLITA_MASTER_PROFILE_RIGHT_EDGE_V5B * * Profile-only visual movement. * * Transform does not participate in the flex geometry, so * Palette / Pings / Notifications remain where their own * layout puts them. */ @media (min-width:621px){ #politaMasterHeaderV1 #politaMasterProfileButtonV1{ transform: translateX(18px) !important; } #politaMasterHeaderV1 #politaMasterProfileMenuV1{ right:-18px !important; } } /* /POLITA_MASTER_PROFILE_RIGHT_EDGE_V5B */ /* POLITA_MASTER_HEADER_MOBILE_HIDE_UTILITY_ICONS_V1 Mobile only: - hide Appearance / Palette - hide Pings - hide Notifications Preserve: - Polita logo - primary page navigation - profile orb - desktop/tablet >620px layout - all underlying Pings/Notifications/Profile functionality */ @media (max-width:620px){ #politaMasterHeaderV1 #politaMasterLeftAppearanceV1, #politaMasterHeaderV1 .polita-master-left-appearance-v1, #politaMasterHeaderV1 .polita-master-ping-button-v1, #politaMasterHeaderV1 .polita-master-notification-button-v1{ display:none!important; } /* With Pings + Notifications hidden, remove their historical reserved width so the visible profile orb sits naturally at the mobile right edge. */ #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-v1, #politaMasterHeaderV1 .polita-master-profile-v1.polita-master-profile-actions-pings-v1{ width:max-content!important; min-width:0!important; gap:0!important; } } /* /POLITA_MASTER_HEADER_MOBILE_HIDE_UTILITY_ICONS_V1 */ /* POLITA_PROFILE_SUPPORT_CYAN_HEART_V1 Global master-header profile menu only. Changes the Support menu CSS heart from red/pink to the same Polita cyan used by Unwavering Support. Menu text, route, spacing, profile behaviour, desktop/mobile layout and all other icons remain unchanged. */ #politaMasterHeaderV1 .polita-master-support-heart-v2{ background:#51e9ff!important; filter: drop-shadow(0 0 3px rgba(81,233,255,.54)) drop-shadow(0 0 7px rgba(81,233,255,.22))!important; } #politaMasterHeaderV1 .polita-master-support-heart-v2::before, #politaMasterHeaderV1 .polita-master-support-heart-v2::after{ background:#51e9ff!important; } /* /POLITA_PROFILE_SUPPORT_CYAN_HEART_V1 */