/* ============================================================ COOKIES-TC.CSS — Optimized Theme-Compatible Styles Dark mode supports both: ============================================================ */ /* ============================================================ NETWORK STATUS BANNER — Fully Responsive / Fluid ============================================================ */ #network-status-banner { position: fixed; top: clamp(.375rem, 1.5vw, .75rem); left: 50%; width: clamp(12.5rem, 52vw, 30rem); text-align: center; padding: clamp(.375rem, 1.2vw, .625rem) clamp(.75rem, 3vw, 1.75rem); border-radius: clamp(1.5rem, 5vw, 3.125rem); font-family: var(--body-font); font-size: clamp(9.6px, 1.8vw, 13.12px); font-weight: var(--font-weight); letter-spacing: 0.02em; line-height: 1.4; z-index: 10000; cursor: pointer; -webkit-user-select: none; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, width 0.3s ease, padding 0.3s ease, border-radius 0.3s ease; transform: translate(-50%, -150%); opacity: 0; pointer-events: none; } /* Offline */ #network-status-banner.offline { background: var(--primary-background); color: #ef4444; border: .0938rem solid rgba(239, 68, 68, 0.45); box-shadow: 0 .25rem 1.25rem rgba(239, 68, 68, 0.15); transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } /* Online */ #network-status-banner.online { background: var(--primary-background); color: #10b981; border: .0938rem solid rgba(16, 185, 129, 0.45); box-shadow: 0 .25rem 1.25rem rgba(16, 185, 129, 0.15); transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } /* Hidden */ #network-status-banner.network-hidden { transform: translate(-50%, -150%) !important; opacity: 0 !important; pointer-events: none !important; } /* ── Layout change: Tablet — wider banner, more relaxed ── */ @media (max-width: 48rem) { #network-status-banner { width: clamp(13.75rem, 60vw, 25rem); } } /* ── Layout change: Phone — pill stretches wider, text wraps ── */ @media (max-width: 30rem) { #network-status-banner { width: clamp(11.25rem, 88vw, 22.5rem); white-space: normal; border-radius: clamp(1.25rem, 6vw, 2.5rem); padding: clamp(.4375rem, 2vw, .5625rem) clamp(.875rem, 4vw, 1.25rem); } } /* ── Layout change: Small phone — nearly full width, rounded rectangle ── */ @media (max-width: 22.5rem) { #network-status-banner { width: clamp(10.625rem, 92vw, 20rem); border-radius: clamp(1rem, 5vw, 1.875rem); padding: clamp(.375rem, 1.8vw, .5rem) clamp(.75rem, 3.5vw, 1rem); font-size: clamp(8.96px, 3.5vw, 10.88px); } } /* ── Layout change: Tiny screens — full-width bar style ── */ @media (max-width: 17.5rem) { #network-status-banner { width: 94vw; border-radius: .75rem; padding: .375rem .625rem; font-size: 8.96px; } } /* ── Dark mode ── */ :is(html.dark-mode, body.dark-mode) #network-status-banner.offline { background: #1a1a2e; border-color: rgba(239, 68, 68, 0.35); box-shadow: 0 .25rem 1.5rem rgba(239, 68, 68, 0.12); } :is(html.dark-mode, body.dark-mode) #network-status-banner.online { background: #1a1a2e; border-color: rgba(16, 185, 129, 0.35); box-shadow: 0 .25rem 1.5rem rgba(16, 185, 129, 0.12); } /* ============================================================ COOKIE OVERLAY ============================================================ */ #cookie-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity var(--transition-base); } #cookie-overlay.tc-visible { opacity: 1; visibility: visible; } /* ============================================================ CONSENT BANNER — Fluid + Responsive ============================================================ */ .tc-consent-banner { position: fixed; left: 50%; bottom: var(--spacing-sm); width: clamp(18.75rem, 94vw, var(--max-width-narrow)); background: var(--box-background-image); border-radius: var(--radius-md); padding: var(--spacing-md); z-index: 9999; box-shadow: var(--box-shadow-lg); border: .0625rem solid var(--accent-blue-border); transition: transform var(--transition-slow); transform: translateX(-50%) translateY(150%); } .tc-consent-banner.tc-visible { transform: translateX(-50%) translateY(0); } .tc-consent-content { display: flex; flex-wrap: wrap; gap: var(--spacing-md); align-items: center; justify-content: space-between; } .tc-text-wrapper { flex: 1; min-width: 15rem; } .tc-text-wrapper h3 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--head-font-size); font-family: var(--heading-font); color: var(--text-color); } .tc-consent-text { margin: 0; font-size: var(--title-size-font); font-family: var(--body-font); color: var(--text-muted); line-height: 1.5; } .tc-consent-link { color: var(--link-color); font-weight: var(--font-weight); text-decoration: none; transition: color var(--transition-fast); } .tc-consent-link:hover { color: var(--link-hover-color); } /* ── Tablet: banner stays two-column but tighter ── */ @media (max-width: 48rem) { .tc-consent-content { gap: var(--spacing-sm); } .tc-text-wrapper { min-width: 12.5rem; } } /* ── Phone: single column layout, buttons stack full width ── */ @media (max-width: 30rem) { .tc-consent-banner { width: 96vw; padding: var(--spacing-sm); } .tc-consent-content { flex-direction: column; align-items: stretch; } .tc-text-wrapper { min-width: 100%; } .tc-button-group { flex-direction: column; width: 100%; } .tc-button-group .tc-btn { width: 100%; text-align: center; } } /* ============================================================ BUTTONS ============================================================ */ .tc-button-group { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; } .tc-btn { border: .0625rem solid transparent; padding: 9.6px 19.2px; border-radius: var(--radius-sm); font-family: var(--body-font); font-weight: var(--font-weight); cursor: pointer; transition: all var(--transition-fast); } .tc-btn-primary { background: var(--link-visited-color); color: #ffffff; box-shadow: var(--box-shadow-sm); } .tc-btn-primary:hover { background: var(--accent-blue); box-shadow: var(--box-shadow-md); } .tc-btn-secondary { background: var(--toggle-bg-light); color: var(--text-color); border-color: var(--accent-blue-border); } .tc-btn-secondary:hover { background: var(--accent-gradient); border-color: var(--accent-blue-border-strong); } /* ============================================================ PREFERENCES MODAL — Fluid + Responsive ============================================================ */ .tc-modal { position: fixed; top: 50%; left: 50%; width: clamp(17.5rem, 88vw, 31.25rem); background: var(--primary-background); border-radius: var(--radius-md); border: .0625rem solid var(--accent-blue-border); z-index: 10000; box-shadow: var(--box-shadow-lg); display: flex; flex-direction: column; transition: all var(--transition-base); transform: translate(-50%, -40%); opacity: 0; visibility: hidden; } .tc-modal.tc-visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%); } .tc-modal-header { display: flex; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); border-bottom: .0625rem solid var(--accent-blue-border); } .tc-modal-header h3 { margin: 0; color: var(--text-color); font-family: var(--heading-font); font-size: var(--head-font-size); } .tc-close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-muted); transition: color var(--transition-fast); } .tc-close-btn:hover { color: var(--text-strong); } .tc-modal-body { padding: var(--spacing-md); overflow-y: auto; max-height: 60vh; } .tc-preference-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); gap: var(--spacing-sm); } .tc-preference-row:last-child { margin-bottom: 0; } .tc-pref-info h4 { margin: 0 0 4px 0; color: var(--text-color); font-family: var(--body-font); font-size: var(--title-size-font); } .tc-pref-info p { margin: 0; font-size: 13.6px; color: var(--text-muted); font-family: var(--body-font); } .tc-modal-footer { padding: var(--spacing-sm) var(--spacing-md); border-top: .0625rem solid var(--accent-blue-border); } /* ── Phone: modal full screen feel, rows stack ── */ @media (max-width: 30rem) { .tc-modal { width: 96vw; max-height: 90vh; border-radius: var(--radius-sm); } .tc-modal-body { max-height: 70vh; padding: var(--spacing-sm); } .tc-preference-row { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); } .tc-toggle { align-self: flex-end; } .tc-modal-footer { padding: var(--spacing-sm); } .tc-modal-footer .tc-btn { width: 100%; text-align: center; } } /* ============================================================ TOGGLE SWITCH ============================================================ */ .tc-toggle { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex-shrink: 0; } .tc-toggle input { opacity: 0; width: 0; height: 0; } .tc-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--hover-color); transition: var(--transition-base); border-radius: var(--radius-pill); } .tc-slider:before { position: absolute; content: ""; height: 1.125rem; width: 1.125rem; left: .1875rem; bottom: .1875rem; background-color: var(--text-secondary-color); transition: var(--transition-base); border-radius: 50%; } input:checked + .tc-slider { background-color: var(--accent-blue); } input:checked + .tc-slider:before { transform: translateX(1.25rem); } input:disabled + .tc-slider { background-color: var(--accent-blue-border); cursor: not-allowed; } /* ============================================================ DARK MODE (Cookie / Toggle) ============================================================ */ :is(html.dark-mode, body.dark-mode) .tc-btn-secondary { background: var(--nav-hover-color); color: var(--text-secondary-color); } :is(html.dark-mode, body.dark-mode) .tc-btn-secondary:hover { background: var(--accent-blue-border-strong); }