/* ============================================================ SVARTLIND · ONE HEADER SYSTEM GLASS MATERIAL · 2026-09-27 KEINE Geometrie. data-world="lind" helles Glas dunkle Reflexion data-world="svart" Obsidian Glass helle Reflexion ============================================================ */ /* ------------------------------------------------------------ LIND ------------------------------------------------------------ */ .sl-header[data-world="lind"] { --sl-reflection: rgba(18,23,21,.032); --sl-reflection-local: rgba(15,20,18,.068); --sl-reflection-secondary: rgba(22,55,42,.016); color: #161817; border: 1px solid rgba(22,24,23,.095); background: radial-gradient( 760px circle at 50% -180px, var(--sl-reflection), rgba(22,55,42,.012) 34%, transparent 72% ), linear-gradient( 180deg, rgba(255,255,255,.61), rgba(247,246,241,.67) ); -webkit-backdrop-filter: blur(20px) saturate(118%); backdrop-filter: blur(20px) saturate(118%); box-shadow: inset 0 1px 0 rgba(255,255,255,.64), 0 10px 32px rgba(25,30,27,.068); } /* LIND · lokale Glasfläche */ .sl-header[data-world="lind"] .sl-glass-control { color: #4d524e; border: 1px solid rgba(22,24,23,.075); background: radial-gradient( 88px circle at var(--sl-x, 50%) var(--sl-y, -48px), rgba(18,23,21,.026), transparent 72% ), rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.30); } .sl-header[data-world="lind"] .sl-glass-control:hover, .sl-header[data-world="lind"] .sl-glass-control:focus-visible { color: #161817; border-color: rgba(22,24,23,.12); background: radial-gradient( 92px circle at var(--sl-x, 50%) var(--sl-y, 50%), var(--sl-reflection-local), var(--sl-reflection-secondary) 44%, transparent 76% ), rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 5px 14px rgba(25,30,27,.032); } /* ------------------------------------------------------------ SVART ------------------------------------------------------------ */ .sl-header[data-world="svart"] { color: #eef5f0; border: 1px solid rgba(44,218,133,.15); background: radial-gradient( 720px circle at 50% -170px, rgba(255,255,255,.030), rgba(82,229,151,.012) 34%, transparent 72% ), linear-gradient( 180deg, rgba(7,18,18,.82), rgba(3,10,11,.88) ); -webkit-backdrop-filter: blur(20px) saturate(112%); backdrop-filter: blur(20px) saturate(112%); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 32px rgba(0,0,0,.22); } /* SVART · lokale Glasfläche */ .sl-header[data-world="svart"] .sl-glass-control { color: rgba(228,239,232,.76); border: 1px solid rgba(44,218,133,.13); background: radial-gradient( 92px circle at var(--sl-x, 50%) var(--sl-y, -48px), rgba(255,255,255,.040), transparent 72% ), rgba(4,14,15,.50); box-shadow: inset 0 1px 0 rgba(255,255,255,.020); } .sl-header[data-world="svart"] .sl-glass-control:hover, .sl-header[data-world="svart"] .sl-glass-control:focus-visible { color: #f3faf6; border-color: rgba(54,231,143,.23); background: radial-gradient( 96px circle at var(--sl-x, 50%) var(--sl-y, 50%), rgba(255,255,255,.085), rgba(82,229,151,.020) 44%, transparent 76% ), rgba(6,25,20,.57); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 6px 18px rgba(0,0,0,.14); } /* ------------------------------------------------------------ ACTIVE STATE ------------------------------------------------------------ */ .sl-header[data-world="lind"] .sl-glass-control[aria-current="page"], .sl-header[data-world="lind"] .sl-glass-control.is-active { color: #161817; background: rgba(231,231,225,.58); border-color: rgba(22,24,23,.09); } .sl-header[data-world="svart"] .sl-glass-control[aria-current="page"], .sl-header[data-world="svart"] .sl-glass-control.is-active { color: #c8ffe1; background: linear-gradient( 180deg, rgba(7,78,51,.72), rgba(3,47,33,.76) ); border-color: rgba(44,235,139,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.040), 0 0 22px rgba(18,255,128,.045); } /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ @media (hover:hover) and (pointer:fine) { .sl-glass-control { transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 180ms ease; } } @media (prefers-reduced-motion: reduce) { .sl-glass-control { transition: none !important; } } /* ============================================================ ONE HEADER · BRAND WORLD COLOR 2026-09-27 Das Logo-Asset selbst bleibt unverändert. LIND: schwarze Erscheinung SVART: Originalfarbe des Assets = SVARTLIND-Gelb PARIS kann später zwischen beiden Zuständen überblenden. ============================================================ */ /* LIND · Baum wird schwarz */ .sl-header[data-world="lind"] .sl-header__brand-logo { filter: brightness(0) saturate(100%); } /* SVART · echte Assetfarbe */ .sl-header[data-world="svart"] .sl-header__brand-logo { filter: none; } /* Übergang ist Material-/Weltenzustand, keine geometrische Animation. */ .sl-header .sl-header__brand-logo { transition: filter 900ms ease; } @media (prefers-reduced-motion:reduce) { .sl-header .sl-header__brand-logo { transition: none !important; } } /* ============================================================ ONE HEADER · LIND VISUAL CONTRACT 2026-09-27 LIND: - Navigation wirkt graviert / frei im Glas - kein permanenter Pillenrahmen - Pointerreflexion bleibt - Primäraktion VAKTEN bleibt schwarz ============================================================ */ /* ------------------------------------------------------------ LIND · CENTER NAV ------------------------------------------------------------ */ .sl-header[data-world="lind"] .sl-header__center .sl-glass-control { border-color: transparent; background: radial-gradient( 90px circle at var(--sl-x, 50%) var(--sl-y, -48px), rgba(18,23,21,.018), transparent 72% ), transparent; box-shadow: none; } .sl-header[data-world="lind"] .sl-header__center .sl-glass-control:hover, .sl-header[data-world="lind"] .sl-header__center .sl-glass-control:focus-visible { border-color: transparent; background: radial-gradient( 92px circle at var(--sl-x, 50%) var(--sl-y, 50%), rgba(15,20,18,.055), rgba(22,55,42,.012) 44%, transparent 76% ), rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); } /* ------------------------------------------------------------ LIND · PRIMARY ACTION ------------------------------------------------------------ */ .sl-header[data-world="lind"] .sl-header__primary-action { color: #fff; border-color: rgba(22,24,23,.88); background: radial-gradient( 110px circle at var(--sl-x, 50%) var(--sl-y, -50px), rgba(255,255,255,.065), transparent 72% ), #161817; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 18px rgba(22,24,23,.11); } .sl-header[data-world="lind"] .sl-header__primary-action:hover, .sl-header[data-world="lind"] .sl-header__primary-action:focus-visible { color: #fff; border-color: #161817; background: radial-gradient( 115px circle at var(--sl-x, 50%) var(--sl-y, 50%), rgba(255,255,255,.12), transparent 72% ), #202321; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 9px 22px rgba(22,24,23,.14); } /* ------------------------------------------------------------ PILL SHAPE · SHARED AUTHORITY ------------------------------------------------------------ */ .sl-header .sl-header__control, .sl-header .sl-header__nav .sl-glass-control { border-radius: 999px; } /* ============================================================ ONE HEADER · BRAND LINK COLOR CONTRACT 2026-09-27 Browser-:visited darf niemals in die Markenfarbe leaken. ============================================================ */ .sl-header__brand, .sl-header__brand:link, .sl-header__brand:visited, .sl-header__brand:hover, .sl-header__brand:focus-visible { color: inherit; text-decoration: none; } /* LIND · ruhig neutral */ [data-world="lind"] .sl-header__brand-line { color: rgba(40,45,42,.52); } /* SVART · Nachtgrau mit leichtem Grünanteil */ [data-world="svart"] .sl-header__brand-line { color: rgba(183,202,190,.58); border-left-color: rgba(120,155,135,.18); }