/* Maha Samadhi — "Temple Glass" v2 (Phase 0–2, reines CSS) * Nav: futuristisches Indigo-Blau (#7E8CFF) statt Gold. * Restliche Glasflächen (Karten/Stream-Boxen) bleiben golden. * Lädt NACH dem Inline-CSS jeder Seite → gleich-spezifische Regeln gewinnen hier. */ /* Animierbare Sweep-Variable für das Indigo-Leuchten der Nav-Buchstaben */ @property --p { syntax: ''; inherits: false; initial-value: 0%; } /* ============================================================ * PHASE 0 — Sicherheit: globaler Reduced-Motion-Schutz * ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ * PHASE 1 — Glas-Signatur "Bleiglas-Kante" * Nav (header.site): INDIGO-Kante. Karten/Boxen: weiterhin GOLD. * ============================================================ */ header.site { border-bottom-color: rgba(126,140,255,.24); /* war Gold: futuristisches Indigo */ box-shadow: inset 0 1px 0 rgba(126,140,255,.30), inset 0 -1px 0 rgba(10,26,54,.50), 0 8px 30px rgba(0,0,0,.20); } .glass, .disco-card, .stream-box, .release-badge { box-shadow: inset 0 1px 0 rgba(226,192,120,.22), inset 0 -1px 0 rgba(95,160,225,.12), 0 18px 50px -24px rgba(0,0,0,.45); } :root[data-theme="light"] header.site { box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 26px rgba(15,34,64,.07) !important; } :root[data-theme="light"] .glass, :root[data-theme="light"] .disco-card, :root[data-theme="light"] .stream-box, :root[data-theme="light"] .release-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 18px 44px -26px rgba(15,34,64,.30) !important; } /* ============================================================ * Nav-CTA ("Höre die Single") — Gold → Indigo * ============================================================ */ .nav-cta { border-color: #7E8CFF; color: #9AA6FF; box-shadow: 0 0 14px rgba(126,140,255,.25), inset 0 1px 0 rgba(255,255,255,.12); } .nav-cta:hover { background: #7E8CFF; border-color: #7E8CFF; color: #0A1430; } :root[data-theme="light"] .nav-cta { color: #4F5BD5 !important; border-color: #7E8CFF !important; } :root[data-theme="light"] .nav-cta:hover { background: #5862D6 !important; color: #FFFFFF !important; } /* Bestehender Nav-Unterstrich (v.a. Mobil): Gold → Indigo */ .nav-links a::after { background: #7E8CFF; } /* ============================================================ * PHASE 2 — Nav: kompakt + Glas-Pille pro Wort + Indigo-Leuchten * Nur Desktop (>=881px). Auf Mobil bleibt das bestehende Dropdown. * ============================================================ */ @media (min-width: 881px) { .nav-wrap { gap: 1.1rem; padding-block: .7rem; } .nav-links { gap: .4rem; flex-wrap: nowrap; } .nav-links a { display: inline-block; position: relative; padding: .22rem .55rem; border-radius: 999px; isolation: isolate; white-space: nowrap; --nav-rest: #FFFFFF; --nav-glow: #7E8CFF; /* Indigo, das einläuft */ } .nav-links a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(126,140,255,.16); border: 1px solid rgba(126,140,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); opacity: 0; transform: scale(.86); transition: opacity .25s ease, transform .42s cubic-bezier(.2,.8,.2,1); } .nav-links a:hover::before, .nav-links a:focus-visible::before, .nav-links a[aria-current=page]::before { opacity: 1; transform: scale(1); } .nav-links a[aria-current=page]::before { background: rgba(126,140,255,.08); border-color: rgba(126,140,255,.38); } /* Indigo-Leuchten der Buchstaben von LINKS nach RECHTS (statt dunklem Text). */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .nav-links a { background-image: linear-gradient(90deg, var(--nav-glow) 0%, var(--nav-glow) var(--p), var(--nav-rest) var(--p), var(--nav-rest) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transition: --p .55s cubic-bezier(.2,.8,.2,1), text-shadow .4s ease; } .nav-links a:hover, .nav-links a:focus-visible { --p: 100%; text-shadow: 0 0 11px rgba(126,140,255,.55); } .nav-links a[aria-current=page] { --p: 100%; text-shadow: 0 0 12px rgba(126,140,255,.60); } } .nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current=page]::after { transform: scaleX(0); } .nav-links a:focus-visible { outline: 2px solid rgba(170,180,255,.75); outline-offset: 3px; } /* Light-Theme: tieferes Indigo, eigene Ruhefarbe */ :root[data-theme="light"] .nav-links a { --nav-rest: #1B3A6F; --nav-glow: #4F5BD5; } :root[data-theme="light"] .nav-links a:hover, :root[data-theme="light"] .nav-links a:focus-visible, :root[data-theme="light"] .nav-links a[aria-current=page] { text-shadow: 0 0 10px rgba(79,91,213,.35); } :root[data-theme="light"] .nav-links a::before { background: rgba(98,110,220,.14); border-color: rgba(98,110,220,.50); } :root[data-theme="light"] .nav-links a[aria-current=page]::before { background: rgba(98,110,220,.09); } } /* ============================================================ * Cursor — kleiner Indigo-Ring (hohl), nur echte Maus * ============================================================ */ @media (hover: hover) and (pointer: fine) { body { cursor: url("../img/cursor-ring.svg?v=3") 9 9, auto; } a, button, summary, label, [role="button"], [onclick], .btn, .nav-cta, .disco-pill, .disco-card, .theme-btn, .lang-btn, .menu-btn, .download-btn { cursor: url("../img/cursor-ring.svg?v=3") 9 9, pointer; } input, textarea, select { cursor: auto; } :root[data-theme="light"] body { cursor: url("../img/cursor-ring-light.svg?v=3") 9 9, auto; } :root[data-theme="light"] a, :root[data-theme="light"] button, :root[data-theme="light"] .btn, :root[data-theme="light"] .nav-cta, :root[data-theme="light"] .disco-pill, :root[data-theme="light"] .disco-card { cursor: url("../img/cursor-ring-light.svg?v=3") 9 9, pointer; } }