From 4ff619f422c938675fe9427cd4ddfbb5efa3a1ac Mon Sep 17 00:00:00 2001 From: nopeitsnothing Date: Sun, 12 Jul 2026 21:36:03 -0400 Subject: [PATCH] fix(css): oops in search icon Signed-off-by: nopeitsnothing --- docs/contribute/index.md | 3 +- docs/guide/index.md | 32 +- docs/index.md | 3 + docs/mirrors/index.md | 6 + docs/overrides/partials/palette-toggle.html | 4 +- docs/stylesheets/navigation.css | 32 + docs/stylesheets/toggle.css | 1160 +++++++++---------- 7 files changed, 638 insertions(+), 602 deletions(-) diff --git a/docs/contribute/index.md b/docs/contribute/index.md index 8f52317..1aa92b5 100644 --- a/docs/contribute/index.md +++ b/docs/contribute/index.md @@ -172,5 +172,4 @@ All donations and spendings are recorded here. Ended | | 2022-09-19 | 0.345024 XMR | VPS RAM/disk upgrade | Ended | -!!! note "About lost funds" - Entries marked **Lost** represent funds spent on services that are no longer available. +**Entries marked Lost represent funds spent on services that are no longer available.** diff --git a/docs/guide/index.md b/docs/guide/index.md index cfb9495..bdcfbd5 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -580,33 +580,29 @@ Whether it is Android, iOS, Windows, macOS, or even Ubuntu. Most popular Operati Here are good overviews of what is being collected by those five popular OSes in their last versions: -- Android/Google: +**Android/Google:** - - Just have a read at their privacy policy [[Archive.org]](https://web.archive.org/web/https://policies.google.com/privacy) +- Just have a read at their privacy policy [[Archive.org]](https://web.archive.org/web/https://policies.google.com/privacy) +- School of Computer Science & Statistics, Trinity College Dublin, Ireland Mobile Handset Privacy: Measuring The Data iOS and Android Send to Apple And Google [[Archive.org]](https://web.archive.org/web/https://www.scss.tcd.ie/doug.leith/apple_google.pdf) - - School of Computer Science & Statistics, Trinity College Dublin, Ireland Mobile Handset Privacy: Measuring The Data iOS and Android Send to Apple And Google [[Archive.org]](https://web.archive.org/web/https://www.scss.tcd.ie/doug.leith/apple_google.pdf) +**IOS/Apple:** -- IOS/Apple: +- More information at [[Archive.org]](https://web.archive.org/web/https://www.apple.com/legal/privacy/en-ww/) and [[Archive.org]](https://web.archive.org/web/https://support.apple.com/en-us/HT202100) +- School of Computer Science & Statistics, Trinity College Dublin, Ireland Mobile Handset Privacy: Measuring The Data iOS and Android Send to Apple And Google [[Archive.org]](https://web.archive.org/web/https://www.scss.tcd.ie/doug.leith/apple_google.pdf) +- Apple does claim[^109] that they anonymize this data using differential privacy[^110] but you will have to trust them on that. - - More information at [[Archive.org]](https://web.archive.org/web/https://www.apple.com/legal/privacy/en-ww/) and [[Archive.org]](https://web.archive.org/web/https://support.apple.com/en-us/HT202100) +**Windows/Microsoft:** - - School of Computer Science & Statistics, Trinity College Dublin, Ireland Mobile Handset Privacy: Measuring The Data iOS and Android Send to Apple And Google [[Archive.org]](https://web.archive.org/web/https://www.scss.tcd.ie/doug.leith/apple_google.pdf) +- Full list of required diagnostic data: [[Archive.org]](https://web.archive.org/web/https://docs.microsoft.com/en-us/windows/privacy/required-windows-diagnostic-data-events-and-fields-2004) +- Full list of optional diagnostic data: [[Archive.org]](https://web.archive.org/web/https://docs.microsoft.com/en-us/windows/privacy/windows-diagnostic-data) - - Apple does claim[^109] that they anonymize this data using differential privacy[^110] but you will have to trust them on that. +**macOS:** -- Windows/Microsoft: +- More details on [[Archive.org]](https://web.archive.org/web/https://support.apple.com/guide/mac-help/share-analytics-information-mac-apple-mh27990/mac) - - Full list of required diagnostic data: [[Archive.org]](https://web.archive.org/web/https://docs.microsoft.com/en-us/windows/privacy/required-windows-diagnostic-data-events-and-fields-2004) +**Ubuntu:** - - Full list of optional diagnostic data: [[Archive.org]](https://web.archive.org/web/https://docs.microsoft.com/en-us/windows/privacy/windows-diagnostic-data) - -- macOS: - - - More details on [[Archive.org]](https://web.archive.org/web/https://support.apple.com/guide/mac-help/share-analytics-information-mac-apple-mh27990/mac) - -- Ubuntu: - - - Ubuntu despite being a Linux distribution also collects Telemetry Data nowadays. This data however is quite limited compared to the others. More details on [[Archive.org]](https://web.archive.org/web/https://ubuntu.com/desktop/statistics) +- Ubuntu despite being a Linux distribution also collects Telemetry Data nowadays. This data however is quite limited compared to the others. More details on [[Archive.org]](https://web.archive.org/web/https://ubuntu.com/desktop/statistics) Not only are Operating Systems gathering telemetry services but so are Apps themselves like Browsers, Mail Clients, and Social Networking Apps installed on your system. diff --git a/docs/index.md b/docs/index.md index f0c6b76..ccab260 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,9 @@ --- title: "Home" description: "The Hitchhiker's Guide to Online Anonymity" +hide: + - toc + - navigation schema: "@context": https://schema.org "@type": WebPage diff --git a/docs/mirrors/index.md b/docs/mirrors/index.md index 16ddab3..d7a899c 100644 --- a/docs/mirrors/index.md +++ b/docs/mirrors/index.md @@ -118,4 +118,10 @@ schema: Onion only +
+

Tor Project

+

We are not affiliated with Tor Project, but we do love them.

+ Tor Project +
+ diff --git a/docs/overrides/partials/palette-toggle.html b/docs/overrides/partials/palette-toggle.html index 6e7eafd..7a71352 100644 --- a/docs/overrides/partials/palette-toggle.html +++ b/docs/overrides/partials/palette-toggle.html @@ -25,8 +25,8 @@
On
Off
-
-
+
+
diff --git a/docs/stylesheets/navigation.css b/docs/stylesheets/navigation.css index 098f8ba..e97435f 100644 --- a/docs/stylesheets/navigation.css +++ b/docs/stylesheets/navigation.css @@ -83,6 +83,38 @@ animation: none; } +.md-header__inner { + flex-wrap: nowrap; +} + +.md-header__button, +.md-header__source, +.toggle-container--header { + flex-shrink: 0; +} + +.md-search { + flex-shrink: 1; + min-width: 0; +} + +@media screen and (max-width: 76.1875em) { + .toggle-container--header { + width: 56px; + margin: 0 4px; + } + + .toggle-container--header .toggle-wrap { + height: 28px; + } +} + +@media screen and (max-width: 44.9375em) { + .toggle-container--header { + width: 44px; + } +} + .md-typeset { max-width: none; } diff --git a/docs/stylesheets/toggle.css b/docs/stylesheets/toggle.css index 34c0248..8398de3 100644 --- a/docs/stylesheets/toggle.css +++ b/docs/stylesheets/toggle.css @@ -1,581 +1,581 @@ -/* Adapted from a holographic toggle concept (Uiverse.io by reglobby), recolored to match site palette */ - -.toggle-container { - position: relative; - width: 150px; - display: flex; - flex-direction: column; - align-items: center; - perspective: 800px; - z-index: 5; -} - -.toggle-wrap { - position: relative; - width: 100%; - flex: 0 0 auto; - align-self: stretch; - height: 60px; - transform-style: preserve-3d; -} - -.toggle-input { - position: absolute; - opacity: 0; - width: 0; - height: 0; -} - -.toggle-track { - position: absolute; - width: 100%; - height: 100%; - background: rgba(0, 30, 10, 0.4); - border-radius: 30px; - cursor: pointer; - box-shadow: - 0 0 15px rgba(0, 240, 128, 0.15), - inset 0 0 10px rgba(0, 0, 0, 0.8); - overflow: hidden; - backdrop-filter: blur(5px); - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); - border: 1px solid rgba(0, 240, 128, 0.3); -} - -.toggle-track::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: radial-gradient( - ellipse at center, - rgba(0, 240, 128, 0.1) 0%, - rgba(0, 0, 0, 0) 70% - ), - linear-gradient(90deg, rgba(0, 90, 40, 0.1) 0%, rgba(0, 30, 10, 0.2) 100%); - opacity: 0.6; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); -} - -.toggle-track::after { - content: ""; - position: absolute; - top: 2px; - left: 2px; - right: 2px; - height: 10px; - background: linear-gradient( - 90deg, - rgba(0, 240, 128, 0.3) 0%, - rgba(3, 150, 52, 0.1) 100% - ); - border-radius: 30px 30px 0 0; - opacity: 0.7; - filter: blur(1px); -} - -.track-lines { - position: absolute; - top: 50%; - left: 0; - width: 100%; - height: 1px; - transform: translateY(-50%); - overflow: hidden; -} - -.track-line { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: repeating-linear-gradient( - 90deg, - rgba(0, 240, 128, 0.3) 0px, - rgba(0, 240, 128, 0.3) 5px, - transparent 5px, - transparent 15px - ); - animation: track-line-move 3s linear infinite; -} - -@keyframes track-line-move { - 0% { transform: translateX(0); } - 100% { transform: translateX(20px); } -} - -.toggle-thumb { - position: absolute; - width: 54px; - height: 54px; - left: 3px; - top: 3px; - background: radial-gradient( - circle, - rgba(10, 60, 30, 0.9) 0%, - rgba(0, 30, 15, 0.8) 100% - ); - border-radius: 50%; - box-shadow: - 0 2px 15px rgba(0, 0, 0, 0.5), - inset 0 0 15px rgba(0, 240, 128, 0.5); - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); - z-index: 2; - border: 1px solid rgba(0, 240, 128, 0.6); - overflow: hidden; - transform-style: preserve-3d; -} - -.thumb-core { - position: absolute; - width: 40px; - height: 40px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: radial-gradient( - circle, - rgba(0, 240, 128, 0.6) 0%, - rgba(3, 150, 52, 0.2) 100% - ); - border-radius: 50%; - box-shadow: 0 0 20px rgba(0, 240, 128, 0.5); - opacity: 0.9; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); -} - -.thumb-inner { - position: absolute; - width: 25px; - height: 25px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: radial-gradient( - circle, - rgba(255, 255, 255, 0.8) 0%, - rgba(150, 255, 200, 0.5) 100% - ); - border-radius: 50%; - box-shadow: 0 0 10px rgba(150, 255, 200, 0.7); - opacity: 0.7; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); - animation: pulse 2s infinite alternate; -} - -@keyframes pulse { - 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); } - 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } -} - -.thumb-scan { - position: absolute; - width: 100%; - height: 5px; - background: linear-gradient( - 90deg, - rgba(0, 0, 0, 0) 0%, - rgba(0, 240, 128, 0.5) 20%, - rgba(255, 255, 255, 0.8) 50%, - rgba(0, 240, 128, 0.5) 80%, - rgba(0, 0, 0, 0) 100% - ); - top: 0; - left: 0; - filter: blur(1px); - animation: thumb-scan 2s linear infinite; - opacity: 0.7; -} - -@keyframes thumb-scan { - 0% { top: -5px; opacity: 0; } - 20% { opacity: 0.7; } - 80% { opacity: 0.7; } - 100% { top: 54px; opacity: 0; } -} - -.thumb-particles { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - overflow: hidden; -} - -.thumb-particle { - position: absolute; - width: 3px; - height: 3px; - background: rgba(150, 255, 200, 0.8); - border-radius: 50%; - box-shadow: 0 0 5px rgba(150, 255, 200, 0.8); - animation: thumb-particle-float 3s infinite ease-out; - opacity: 0; -} - -.thumb-particle:nth-child(1) { top: 70%; left: 30%; animation-delay: 0.2s; } -.thumb-particle:nth-child(2) { top: 60%; left: 60%; animation-delay: 0.6s; } -.thumb-particle:nth-child(3) { top: 50%; left: 40%; animation-delay: 1s; } -.thumb-particle:nth-child(4) { top: 40%; left: 70%; animation-delay: 1.4s; } -.thumb-particle:nth-child(5) { top: 80%; left: 50%; animation-delay: 1.8s; } - -@keyframes thumb-particle-float { - 0% { transform: translateY(0) scale(1); opacity: 0; } - 20% { opacity: 0.8; } - 100% { transform: translateY(-30px) scale(0); opacity: 0; } -} - -.toggle-data { - position: absolute; - width: 100%; - height: 100%; - z-index: 1; -} - -.data-text { - position: absolute; - font-family: var(--code-font, monospace); - font-size: 12px; - font-weight: 500; - letter-spacing: 1px; - text-transform: uppercase; - transition: all 0.5s ease; -} - -.data-text.off { - right: 12px; - top: 50%; - transform: translateY(-50%); - opacity: 1; - color: rgba(0, 240, 128, 0.6); - text-shadow: 0 0 5px rgba(0, 240, 128, 0.4); -} - -.data-text.on { - left: 15px; - top: 50%; - transform: translateY(-50%); - opacity: 0; - color: rgba(231, 217, 163, 0.7); - text-shadow: 0 0 5px rgba(231, 217, 163, 0.4); -} - -.status-indicator { - position: absolute; - width: 10px; - height: 10px; - border-radius: 50%; - background: radial-gradient( - circle, - rgba(0, 240, 128, 0.8) 0%, - rgba(3, 150, 52, 0.4) 100% - ); - box-shadow: 0 0 10px rgba(0, 240, 128, 0.5); - animation: blink 2s infinite alternate; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); -} - -.status-indicator.off { top: 25px; right: 15px; } - -.status-indicator.on { - top: 25px; - left: 15px; - opacity: 0; - background: radial-gradient( - circle, - rgba(231, 217, 163, 0.8) 0%, - rgba(180, 160, 100, 0.4) 100% - ); - box-shadow: 0 0 10px rgba(231, 217, 163, 0.5); -} - -@keyframes blink { - 0%, 100% { opacity: 0.5; transform: scale(0.9); } - 50% { opacity: 1; transform: scale(1.1); } -} - -.energy-rings { - position: absolute; - width: 54px; - height: 54px; - left: 3px; - top: 3px; - pointer-events: none; - z-index: 1; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); -} - -.energy-ring { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 2px solid transparent; - opacity: 0; -} - -.energy-ring:nth-child(1) { - width: 50px; - height: 50px; - border-top-color: rgba(0, 240, 128, 0.5); - border-right-color: rgba(0, 240, 128, 0.3); - animation: spin 3s linear infinite; -} - -.energy-ring:nth-child(2) { - width: 40px; - height: 40px; - border-bottom-color: rgba(0, 240, 128, 0.5); - border-left-color: rgba(0, 240, 128, 0.3); - animation: spin 2s linear infinite reverse; -} - -.energy-ring:nth-child(3) { - width: 30px; - height: 30px; - border-left-color: rgba(0, 240, 128, 0.5); - border-top-color: rgba(0, 240, 128, 0.3); - animation: spin 1.5s linear infinite; -} - -@keyframes spin { - 0% { transform: translate(-50%, -50%) rotate(0deg); } - 100% { transform: translate(-50%, -50%) rotate(360deg); } -} - -.interface-lines { - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; -} - -.interface-line { - position: absolute; - background: rgba(0, 240, 128, 0.3); - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); -} - -.interface-line:nth-child(1) { width: 15px; height: 1px; bottom: -5px; left: 20px; } -.interface-line:nth-child(2) { width: 1px; height: 8px; bottom: -12px; left: 35px; } -.interface-line:nth-child(3) { width: 25px; height: 1px; bottom: -12px; left: 35px; } -.interface-line:nth-child(4) { width: 15px; height: 1px; bottom: -5px; right: 20px; } -.interface-line:nth-child(5) { width: 1px; height: 8px; bottom: -12px; right: 35px; } -.interface-line:nth-child(6) { width: 25px; height: 1px; bottom: -12px; right: 10px; } - -.toggle-reflection { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 40% - ); - border-radius: 30px; - pointer-events: none; -} - -.toggle-label { - position: relative; - margin-top: 20px; - font-family: var(--code-font, monospace); - font-size: 14px; - text-transform: uppercase; - letter-spacing: 2px; - text-align: center; - color: rgba(0, 240, 128, 0.7); - text-shadow: 0 0 10px rgba(0, 240, 128, 0.5); - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); -} - -.holo-glow { - position: absolute; - width: 100%; - height: 100%; - border-radius: 30px; - background: radial-gradient( - ellipse at center, - rgba(0, 240, 128, 0.2) 0%, - rgba(0, 0, 0, 0) 70% - ); - filter: blur(10px); - opacity: 0.5; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); - z-index: 0; -} - -/* checked state = "default" (light/printing press) scheme, amber accent. - Bound to both :checked AND the page's actual data-md-color-scheme so the - toggle can never visually drift from the real active palette (e.g. on - load, before the init script has a chance to sync the checkbox). */ -body[data-md-color-scheme="default"] .toggle-input + .toggle-track, -.toggle-input:checked + .toggle-track { - background: rgba(40, 32, 10, 0.4); - border-color: rgba(231, 217, 163, 0.4); - box-shadow: - 0 0 15px rgba(231, 217, 163, 0.2), - inset 0 0 10px rgba(0, 0, 0, 0.8); -} - -.toggle-input:checked + .toggle-track::before, body[data-md-color-scheme="default"] .toggle-input + .toggle-track::before { - background: radial-gradient( - ellipse at center, - rgba(231, 217, 163, 0.1) 0%, - rgba(0, 0, 0, 0) 70% - ), - linear-gradient(90deg, rgba(120, 100, 50, 0.1) 0%, rgba(40, 32, 10, 0.2) 100%); -} - -.toggle-input:checked + .toggle-track::after, body[data-md-color-scheme="default"] .toggle-input + .toggle-track::after { - background: linear-gradient( - 90deg, - rgba(231, 217, 163, 0.3) 0%, - rgba(180, 160, 100, 0.1) 100% - ); -} - -.toggle-input:checked + .toggle-track .track-line, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .track-line { - background: repeating-linear-gradient( - 90deg, - rgba(231, 217, 163, 0.3) 0px, - rgba(231, 217, 163, 0.3) 5px, - transparent 5px, - transparent 15px - ); - animation-direction: reverse; -} - -.toggle-input:checked + .toggle-track .toggle-thumb, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .toggle-thumb { - left: calc(100% - 57px); - background: radial-gradient( - circle, - rgba(90, 75, 30, 0.9) 0%, - rgba(50, 40, 15, 0.8) 100% - ); - border-color: rgba(231, 217, 163, 0.6); - box-shadow: - 0 2px 15px rgba(0, 0, 0, 0.5), - inset 0 0 15px rgba(231, 217, 163, 0.5); -} - -.toggle-input:checked + .toggle-track .thumb-core, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-core { - background: radial-gradient( - circle, - rgba(231, 217, 163, 0.6) 0%, - rgba(120, 100, 50, 0.2) 100% - ); - box-shadow: 0 0 20px rgba(231, 217, 163, 0.5); -} - -.toggle-input:checked + .toggle-track .thumb-inner, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-inner { - background: radial-gradient( - circle, - rgba(255, 255, 255, 0.8) 0%, - rgba(255, 240, 200, 0.5) 100% - ); - box-shadow: 0 0 10px rgba(255, 240, 200, 0.7); -} - -.toggle-input:checked + .toggle-track .thumb-scan, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-scan { - background: linear-gradient( - 90deg, - rgba(0, 0, 0, 0) 0%, - rgba(231, 217, 163, 0.5) 20%, - rgba(255, 255, 255, 0.8) 50%, - rgba(231, 217, 163, 0.5) 80%, - rgba(0, 0, 0, 0) 100% - ); -} - -.toggle-input:checked + .toggle-track .thumb-particle, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-particle { - background: rgba(255, 240, 200, 0.8); - box-shadow: 0 0 5px rgba(255, 240, 200, 0.8); -} - -.toggle-input:checked + .toggle-track .data-text.off, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .data-text.off { opacity: 0; } -.toggle-input:checked + .toggle-track .data-text.on, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .data-text.on { opacity: 1; } -.toggle-input:checked + .toggle-track .status-indicator.off, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .status-indicator.off { opacity: 0; } -.toggle-input:checked + .toggle-track .status-indicator.on, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .status-indicator.on { opacity: 1; } -.toggle-input:checked + .toggle-track .energy-rings, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-rings { left: calc(100% - 57px); } -.toggle-input:checked + .toggle-track .energy-ring, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring { opacity: 1; } - -.toggle-input:checked + .toggle-track .energy-ring:nth-child(1), body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring:nth-child(1) { - border-top-color: rgba(231, 217, 163, 0.5); - border-right-color: rgba(231, 217, 163, 0.3); -} - -.toggle-input:checked + .toggle-track .energy-ring:nth-child(2), body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring:nth-child(2) { - border-bottom-color: rgba(231, 217, 163, 0.5); - border-left-color: rgba(231, 217, 163, 0.3); -} - -.toggle-input:checked + .toggle-track .energy-ring:nth-child(3), body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring:nth-child(3) { - border-left-color: rgba(231, 217, 163, 0.5); - border-top-color: rgba(231, 217, 163, 0.3); -} - -.toggle-input:checked + .toggle-track .interface-line, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .interface-line { - background: rgba(231, 217, 163, 0.3); -} - -.toggle-input:checked ~ .toggle-label, body[data-md-color-scheme="default"] .toggle-input ~ .toggle-label { - color: rgba(231, 217, 163, 0.7); - text-shadow: 0 0 10px rgba(231, 217, 163, 0.5); -} - -.toggle-input:checked + .toggle-track .holo-glow, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .holo-glow { - background: radial-gradient( - ellipse at center, - rgba(231, 217, 163, 0.2) 0%, - rgba(0, 0, 0, 0) 70% - ); -} - -.toggle-input:hover + .toggle-track { - box-shadow: - 0 0 20px rgba(0, 240, 128, 0.3), - inset 0 0 10px rgba(0, 0, 0, 0.8); -} - -.toggle-input:checked:hover + .toggle-track, body[data-md-color-scheme="default"] .toggle-input:hover + .toggle-track { - box-shadow: - 0 0 20px rgba(231, 217, 163, 0.3), - inset 0 0 10px rgba(0, 0, 0, 0.8); -} - -.toggle-container--header { - width: 80px; - margin: 0 8px; -} - -.toggle-container--header .toggle-wrap { - height: 32px; -} -.toggle-container--header .toggle-thumb, -.toggle-container--header .energy-rings { width: 28px; height: 28px; } -.toggle-container--header .thumb-core { width: 20px; height: 20px; } -.toggle-container--header .thumb-inner { width: 12px; height: 12px; } -.toggle-container--header .data-text { font-size: 8px; } -.toggle-container--header .toggle-label { display: none; } -.toggle-container--header .energy-ring:nth-child(1) { width: 26px; height: 26px; } -.toggle-container--header .energy-ring:nth-child(2) { width: 20px; height: 20px; } -.toggle-container--header .energy-ring:nth-child(3) { width: 15px; height: 15px; } - -.toggle-input:checked + .toggle-track .toggle-thumb, -.toggle-container--header .toggle-input:checked + .toggle-track .toggle-thumb, -body[data-md-color-scheme="default"] .toggle-container--header .toggle-input + .toggle-track .toggle-thumb { - left: calc(100% - 31px); -} - -.toggle-container--header .toggle-input:checked + .toggle-track .energy-rings, -body[data-md-color-scheme="default"] .toggle-container--header .toggle-input + .toggle-track .energy-rings { - left: calc(100% - 31px); +/* Adapted from a holographic toggle concept (Uiverse.io by reglobby), recolored to match site palette */ + +.toggle-container { + position: relative; + width: 150px; + display: flex; + flex-direction: column; + align-items: center; + perspective: 800px; + z-index: 5; +} + +.toggle-wrap { + position: relative; + width: 100%; + flex: 0 0 auto; + align-self: stretch; + height: 60px; + transform-style: preserve-3d; +} + +.toggle-input { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} + +.toggle-track { + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 30, 10, 0.4); + border-radius: 30px; + cursor: pointer; + box-shadow: + 0 0 15px rgba(0, 240, 128, 0.15), + inset 0 0 10px rgba(0, 0, 0, 0.8); + overflow: hidden; + backdrop-filter: blur(5px); + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); + border: 1px solid rgba(0, 240, 128, 0.3); +} + +.toggle-track::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient( + ellipse at center, + rgba(0, 240, 128, 0.1) 0%, + rgba(0, 0, 0, 0) 70% + ), + linear-gradient(90deg, rgba(0, 90, 40, 0.1) 0%, rgba(0, 30, 10, 0.2) 100%); + opacity: 0.6; + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +.toggle-track::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + right: 2px; + height: 10px; + background: linear-gradient( + 90deg, + rgba(0, 240, 128, 0.3) 0%, + rgba(3, 150, 52, 0.1) 100% + ); + border-radius: 30px 30px 0 0; + opacity: 0.7; + filter: blur(1px); +} + +.track-lines { + position: absolute; + top: 50%; + left: 0; + width: 100%; + height: 1px; + transform: translateY(-50%); + overflow: hidden; +} + +.track-line { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + 90deg, + rgba(0, 240, 128, 0.3) 0px, + rgba(0, 240, 128, 0.3) 5px, + transparent 5px, + transparent 15px + ); + animation: track-line-move 3s linear infinite; +} + +@keyframes track-line-move { + 0% { transform: translateX(0); } + 100% { transform: translateX(20px); } +} + +.toggle-thumb { + position: absolute; + width: 54px; + height: 54px; + left: 3px; + top: 3px; + background: radial-gradient( + circle, + rgba(10, 60, 30, 0.9) 0%, + rgba(0, 30, 15, 0.8) 100% + ); + border-radius: 50%; + box-shadow: + 0 2px 15px rgba(0, 0, 0, 0.5), + inset 0 0 15px rgba(0, 240, 128, 0.5); + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); + z-index: 2; + border: 1px solid rgba(0, 240, 128, 0.6); + overflow: hidden; + transform-style: preserve-3d; +} + +.thumb-core { + position: absolute; + width: 40px; + height: 40px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: radial-gradient( + circle, + rgba(0, 240, 128, 0.6) 0%, + rgba(3, 150, 52, 0.2) 100% + ); + border-radius: 50%; + box-shadow: 0 0 20px rgba(0, 240, 128, 0.5); + opacity: 0.9; + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +.thumb-inner { + position: absolute; + width: 25px; + height: 25px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: radial-gradient( + circle, + rgba(255, 255, 255, 0.8) 0%, + rgba(150, 255, 200, 0.5) 100% + ); + border-radius: 50%; + box-shadow: 0 0 10px rgba(150, 255, 200, 0.7); + opacity: 0.7; + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); + animation: pulse 2s infinite alternate; +} + +@keyframes pulse { + 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); } + 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } +} + +.thumb-scan { + position: absolute; + width: 100%; + height: 5px; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 240, 128, 0.5) 20%, + rgba(255, 255, 255, 0.8) 50%, + rgba(0, 240, 128, 0.5) 80%, + rgba(0, 0, 0, 0) 100% + ); + top: 0; + left: 0; + filter: blur(1px); + animation: thumb-scan 2s linear infinite; + opacity: 0.7; +} + +@keyframes thumb-scan { + 0% { top: -5px; opacity: 0; } + 20% { opacity: 0.7; } + 80% { opacity: 0.7; } + 100% { top: 54px; opacity: 0; } +} + +.thumb-particles { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + overflow: hidden; +} + +.thumb-particle { + position: absolute; + width: 3px; + height: 3px; + background: rgba(150, 255, 200, 0.8); + border-radius: 50%; + box-shadow: 0 0 5px rgba(150, 255, 200, 0.8); + animation: thumb-particle-float 3s infinite ease-out; + opacity: 0; +} + +.thumb-particle:nth-child(1) { top: 70%; left: 30%; animation-delay: 0.2s; } +.thumb-particle:nth-child(2) { top: 60%; left: 60%; animation-delay: 0.6s; } +.thumb-particle:nth-child(3) { top: 50%; left: 40%; animation-delay: 1s; } +.thumb-particle:nth-child(4) { top: 40%; left: 70%; animation-delay: 1.4s; } +.thumb-particle:nth-child(5) { top: 80%; left: 50%; animation-delay: 1.8s; } + +@keyframes thumb-particle-float { + 0% { transform: translateY(0) scale(1); opacity: 0; } + 20% { opacity: 0.8; } + 100% { transform: translateY(-30px) scale(0); opacity: 0; } +} + +.toggle-data { + position: absolute; + width: 100%; + height: 100%; + z-index: 1; +} + +.data-text { + position: absolute; + font-family: var(--code-font, monospace); + font-size: 12px; + font-weight: 500; + letter-spacing: 1px; + text-transform: uppercase; + transition: all 0.5s ease; +} + +.data-text.off { + right: 12px; + top: 50%; + transform: translateY(-50%); + opacity: 1; + color: rgba(0, 240, 128, 0.6); + text-shadow: 0 0 5px rgba(0, 240, 128, 0.4); +} + +.data-text.on { + left: 15px; + top: 50%; + transform: translateY(-50%); + opacity: 0; + color: rgba(231, 217, 163, 0.7); + text-shadow: 0 0 5px rgba(231, 217, 163, 0.4); +} + +.toggle-status-dot { + position: absolute; + width: 10px; + height: 10px; + border-radius: 50%; + background: radial-gradient( + circle, + rgba(0, 240, 128, 0.8) 0%, + rgba(3, 150, 52, 0.4) 100% + ); + box-shadow: 0 0 10px rgba(0, 240, 128, 0.5); + animation: blink 2s infinite alternate; + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +.toggle-status-dot.off { top: 25px; right: 15px; } + +.toggle-status-dot.on { + top: 25px; + left: 15px; + opacity: 0; + background: radial-gradient( + circle, + rgba(231, 217, 163, 0.8) 0%, + rgba(180, 160, 100, 0.4) 100% + ); + box-shadow: 0 0 10px rgba(231, 217, 163, 0.5); +} + +@keyframes blink { + 0%, 100% { opacity: 0.5; transform: scale(0.9); } + 50% { opacity: 1; transform: scale(1.1); } +} + +.energy-rings { + position: absolute; + width: 54px; + height: 54px; + left: 3px; + top: 3px; + pointer-events: none; + z-index: 1; + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +.energy-ring { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 2px solid transparent; + opacity: 0; +} + +.energy-ring:nth-child(1) { + width: 50px; + height: 50px; + border-top-color: rgba(0, 240, 128, 0.5); + border-right-color: rgba(0, 240, 128, 0.3); + animation: spin 3s linear infinite; +} + +.energy-ring:nth-child(2) { + width: 40px; + height: 40px; + border-bottom-color: rgba(0, 240, 128, 0.5); + border-left-color: rgba(0, 240, 128, 0.3); + animation: spin 2s linear infinite reverse; +} + +.energy-ring:nth-child(3) { + width: 30px; + height: 30px; + border-left-color: rgba(0, 240, 128, 0.5); + border-top-color: rgba(0, 240, 128, 0.3); + animation: spin 1.5s linear infinite; +} + +@keyframes spin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +.interface-lines { + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; +} + +.interface-line { + position: absolute; + background: rgba(0, 240, 128, 0.3); + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +.interface-line:nth-child(1) { width: 15px; height: 1px; bottom: -5px; left: 20px; } +.interface-line:nth-child(2) { width: 1px; height: 8px; bottom: -12px; left: 35px; } +.interface-line:nth-child(3) { width: 25px; height: 1px; bottom: -12px; left: 35px; } +.interface-line:nth-child(4) { width: 15px; height: 1px; bottom: -5px; right: 20px; } +.interface-line:nth-child(5) { width: 1px; height: 8px; bottom: -12px; right: 35px; } +.interface-line:nth-child(6) { width: 25px; height: 1px; bottom: -12px; right: 10px; } + +.toggle-reflection { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0) 40% + ); + border-radius: 30px; + pointer-events: none; +} + +.toggle-label { + position: relative; + margin-top: 20px; + font-family: var(--code-font, monospace); + font-size: 14px; + text-transform: uppercase; + letter-spacing: 2px; + text-align: center; + color: rgba(0, 240, 128, 0.7); + text-shadow: 0 0 10px rgba(0, 240, 128, 0.5); + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +.holo-glow { + position: absolute; + width: 100%; + height: 100%; + border-radius: 30px; + background: radial-gradient( + ellipse at center, + rgba(0, 240, 128, 0.2) 0%, + rgba(0, 0, 0, 0) 70% + ); + filter: blur(10px); + opacity: 0.5; + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); + z-index: 0; +} + +/* checked state = "default" (light/printing press) scheme, amber accent. + Bound to both :checked AND the page's actual data-md-color-scheme so the + toggle can never visually drift from the real active palette (e.g. on + load, before the init script has a chance to sync the checkbox). */ +body[data-md-color-scheme="default"] .toggle-input + .toggle-track, +.toggle-input:checked + .toggle-track { + background: rgba(40, 32, 10, 0.4); + border-color: rgba(231, 217, 163, 0.4); + box-shadow: + 0 0 15px rgba(231, 217, 163, 0.2), + inset 0 0 10px rgba(0, 0, 0, 0.8); +} + +.toggle-input:checked + .toggle-track::before, body[data-md-color-scheme="default"] .toggle-input + .toggle-track::before { + background: radial-gradient( + ellipse at center, + rgba(231, 217, 163, 0.1) 0%, + rgba(0, 0, 0, 0) 70% + ), + linear-gradient(90deg, rgba(120, 100, 50, 0.1) 0%, rgba(40, 32, 10, 0.2) 100%); +} + +.toggle-input:checked + .toggle-track::after, body[data-md-color-scheme="default"] .toggle-input + .toggle-track::after { + background: linear-gradient( + 90deg, + rgba(231, 217, 163, 0.3) 0%, + rgba(180, 160, 100, 0.1) 100% + ); +} + +.toggle-input:checked + .toggle-track .track-line, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .track-line { + background: repeating-linear-gradient( + 90deg, + rgba(231, 217, 163, 0.3) 0px, + rgba(231, 217, 163, 0.3) 5px, + transparent 5px, + transparent 15px + ); + animation-direction: reverse; +} + +.toggle-input:checked + .toggle-track .toggle-thumb, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .toggle-thumb { + left: calc(100% - 57px); + background: radial-gradient( + circle, + rgba(90, 75, 30, 0.9) 0%, + rgba(50, 40, 15, 0.8) 100% + ); + border-color: rgba(231, 217, 163, 0.6); + box-shadow: + 0 2px 15px rgba(0, 0, 0, 0.5), + inset 0 0 15px rgba(231, 217, 163, 0.5); +} + +.toggle-input:checked + .toggle-track .thumb-core, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-core { + background: radial-gradient( + circle, + rgba(231, 217, 163, 0.6) 0%, + rgba(120, 100, 50, 0.2) 100% + ); + box-shadow: 0 0 20px rgba(231, 217, 163, 0.5); +} + +.toggle-input:checked + .toggle-track .thumb-inner, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-inner { + background: radial-gradient( + circle, + rgba(255, 255, 255, 0.8) 0%, + rgba(255, 240, 200, 0.5) 100% + ); + box-shadow: 0 0 10px rgba(255, 240, 200, 0.7); +} + +.toggle-input:checked + .toggle-track .thumb-scan, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-scan { + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0) 0%, + rgba(231, 217, 163, 0.5) 20%, + rgba(255, 255, 255, 0.8) 50%, + rgba(231, 217, 163, 0.5) 80%, + rgba(0, 0, 0, 0) 100% + ); +} + +.toggle-input:checked + .toggle-track .thumb-particle, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .thumb-particle { + background: rgba(255, 240, 200, 0.8); + box-shadow: 0 0 5px rgba(255, 240, 200, 0.8); +} + +.toggle-input:checked + .toggle-track .data-text.off, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .data-text.off { opacity: 0; } +.toggle-input:checked + .toggle-track .data-text.on, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .data-text.on { opacity: 1; } +.toggle-input:checked + .toggle-track .toggle-status-dot.off, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .toggle-status-dot.off { opacity: 0; } +.toggle-input:checked + .toggle-track .toggle-status-dot.on, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .toggle-status-dot.on { opacity: 1; } +.toggle-input:checked + .toggle-track .energy-rings, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-rings { left: calc(100% - 57px); } +.toggle-input:checked + .toggle-track .energy-ring, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring { opacity: 1; } + +.toggle-input:checked + .toggle-track .energy-ring:nth-child(1), body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring:nth-child(1) { + border-top-color: rgba(231, 217, 163, 0.5); + border-right-color: rgba(231, 217, 163, 0.3); +} + +.toggle-input:checked + .toggle-track .energy-ring:nth-child(2), body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring:nth-child(2) { + border-bottom-color: rgba(231, 217, 163, 0.5); + border-left-color: rgba(231, 217, 163, 0.3); +} + +.toggle-input:checked + .toggle-track .energy-ring:nth-child(3), body[data-md-color-scheme="default"] .toggle-input + .toggle-track .energy-ring:nth-child(3) { + border-left-color: rgba(231, 217, 163, 0.5); + border-top-color: rgba(231, 217, 163, 0.3); +} + +.toggle-input:checked + .toggle-track .interface-line, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .interface-line { + background: rgba(231, 217, 163, 0.3); +} + +.toggle-input:checked ~ .toggle-label, body[data-md-color-scheme="default"] .toggle-input ~ .toggle-label { + color: rgba(231, 217, 163, 0.7); + text-shadow: 0 0 10px rgba(231, 217, 163, 0.5); +} + +.toggle-input:checked + .toggle-track .holo-glow, body[data-md-color-scheme="default"] .toggle-input + .toggle-track .holo-glow { + background: radial-gradient( + ellipse at center, + rgba(231, 217, 163, 0.2) 0%, + rgba(0, 0, 0, 0) 70% + ); +} + +.toggle-input:hover + .toggle-track { + box-shadow: + 0 0 20px rgba(0, 240, 128, 0.3), + inset 0 0 10px rgba(0, 0, 0, 0.8); +} + +.toggle-input:checked:hover + .toggle-track, body[data-md-color-scheme="default"] .toggle-input:hover + .toggle-track { + box-shadow: + 0 0 20px rgba(231, 217, 163, 0.3), + inset 0 0 10px rgba(0, 0, 0, 0.8); +} + +.toggle-container--header { + width: 80px; + margin: 0 8px; +} + +.toggle-container--header .toggle-wrap { + height: 32px; +} +.toggle-container--header .toggle-thumb, +.toggle-container--header .energy-rings { width: 28px; height: 28px; } +.toggle-container--header .thumb-core { width: 20px; height: 20px; } +.toggle-container--header .thumb-inner { width: 12px; height: 12px; } +.toggle-container--header .data-text { font-size: 8px; } +.toggle-container--header .toggle-label { display: none; } +.toggle-container--header .energy-ring:nth-child(1) { width: 26px; height: 26px; } +.toggle-container--header .energy-ring:nth-child(2) { width: 20px; height: 20px; } +.toggle-container--header .energy-ring:nth-child(3) { width: 15px; height: 15px; } + +.toggle-input:checked + .toggle-track .toggle-thumb, +.toggle-container--header .toggle-input:checked + .toggle-track .toggle-thumb, +body[data-md-color-scheme="default"] .toggle-container--header .toggle-input + .toggle-track .toggle-thumb { + left: calc(100% - 31px); +} + +.toggle-container--header .toggle-input:checked + .toggle-track .energy-rings, +body[data-md-color-scheme="default"] .toggle-container--header .toggle-input + .toggle-track .energy-rings { + left: calc(100% - 31px); } \ No newline at end of file