diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor index 321f46a..a55bce5 100644 --- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor +++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor @@ -4,8 +4,34 @@ - - \ No newline at end of file + + + +
+
+ Privacy + +
+

We keep a random tag in your browser so we can count how many people a track reaches — not who they are. No account, no name, nothing personal, nothing shared with anyone else. Clear your browser data and the tag’s gone.

+
+
+ +@code { + private bool _privacyOpen; + + private void OpenPrivacy() => _privacyOpen = true; + private void ClosePrivacy() => _privacyOpen = false; +} \ No newline at end of file diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css index fb1a191..80ceb89 100644 --- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css +++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css @@ -57,16 +57,26 @@ color: var(--deepdrft-muted); } -.deepdrft-footer-privacy { +/* PRIVACY trigger — visually matches the footer links (same font, size, casing, colour). + Reset all button chrome so it reads as a link, not a button element. */ +.deepdrft-footer-privacy-btn { font-family: var(--deepdrft-font-mono); - font-size: 0.55rem; - letter-spacing: 0.08em; + font-size: 0.62rem; + letter-spacing: 0.18em; + text-transform: uppercase; color: var(--deepdrft-muted); - opacity: 0.7; + text-decoration: none; + transition: color 0.2s; + background: none; + border: none; + padding: 0; margin: 0; - line-height: 1.6; + cursor: pointer; + line-height: inherit; } +.deepdrft-footer-privacy-btn:hover { color: var(--deepdrft-navy); } + @media (max-width: 440px) { .deepdrft-footer { padding: 1.5rem; diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index 2e35c18..ae867ff 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -917,3 +917,82 @@ body:has(.deepdrft-queue-overlay) { max-height: 184px; overflow-y: auto; } + +/* ============================================================================= + 17. PRIVACY OVERLAY + Screen-centered modal following the same MudOverlay idiom as the visualizer + controls and queue overlays. MudOverlay portals to body — CSS isolation cannot + reach portaled content, so chrome lives here in the global sheet. + ============================================================================= */ + +/* Raise above the sticky header (100), player dock (1200), and minimized FAB (1300). */ +.deepdrft-privacy-overlay { + z-index: 1400 !important; +} + +/* Mild tint: doubled selector (0,2,0) outranks MudBlazor's .mud-overlay-dark (0,1,0). */ +.deepdrft-privacy-overlay .mud-overlay-scrim.mud-overlay-dark { + background-color: rgba(var(--deepdrft-scrim-rgb), var(--deepdrft-modal-scrim-alpha)); +} + +.deepdrft-privacy-overlay .mud-overlay-content { + max-height: 90vh; + overflow: visible; +} + +/* Lock body scroll while the overlay is open. */ +body:has(.deepdrft-privacy-overlay) { + overflow: hidden; +} + +/* Panel: compact width, navy-panel ground, thin light border — matches queue/visualizer chrome. */ +.deepdrft-privacy-modal { + display: flex; + flex-direction: column; + width: min(90vw, 480px); + background: var(--deepdrft-panel-ground); + border: 1px solid var(--deepdrft-border-light); + border-radius: 0; + backdrop-filter: blur(8px); + overflow: hidden; +} + +.deepdrft-privacy-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.85rem 0.85rem 0.85rem 1rem; + border-bottom: 1px solid var(--deepdrft-border-light); +} + +/* Mono uppercase eyebrow — matches queue modal title. */ +.deepdrft-privacy-modal-title { + font-family: var(--deepdrft-font-mono); + font-size: 0.72rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--deepdrft-white); + opacity: 0.85; +} + +/* Tuck the close icon flush with the panel edge; keep it subtle. */ +.deepdrft-privacy-modal-close { + opacity: 0.6; + color: var(--deepdrft-white) !important; +} + +.deepdrft-privacy-modal-close:hover { + opacity: 1; +} + +/* Privacy copy: same mono treatment as the former inline paragraph, but readable on dark ground. */ +.deepdrft-privacy-modal-body { + font-family: var(--deepdrft-font-mono); + font-size: 0.72rem; + letter-spacing: 0.06em; + line-height: 1.7; + color: var(--deepdrft-white); + opacity: 0.8; + margin: 0; + padding: 1rem 1rem 1.25rem; +}