/* ========================================================================== Die Schweiß-Profis 2026 – Eigene Styles -------------------------------------------------------------------------- Diese Datei wird automatisch geladen (siehe functions.php). Hier kannst du eigene CSS-Anpassungen vornehmen, ohne style.css zu ändern. ========================================================================== */ /* ========================================================================== Pill-Navbar mit dunklem Glass-Morphism ("Liquid Glass") -------------------------------------------------------------------------- Die gesamte Kopfzeile (.uk-navbar-container) wird zu einer schwebenden, abgerundeten Glas-Kapsel, die LOGO + MENÜ gemeinsam enthält und zentriert auf der Seite sitzt: - dunkler, halbtransparenter Hintergrund + backdrop-filter (Blur) - feine obere Lichtkante + weicher Schatten (Glas-Anmutung) - glühende Schweißnaht-Unterstreichung beim Hover/Fokus der Menüpunkte - helle Schrift/Logo erzwungen (Lesbarkeit auf dunklem Glas) Stellschrauben unten in :root (--rd-nav-*). ========================================================================== */ :root { --rd-nav-bg: rgba(18, 21, 25, 0.55); /* Glasfarbe (dunkel) */ --rd-nav-bg-solid: rgba(18, 21, 25, 0.92); /* Fallback ohne backdrop-filter */ --rd-nav-blur: 20px; /* Stärke des Blurs */ --rd-nav-border: rgba(255, 255, 255, 0.14); /* Glasrand */ --rd-nav-radius: 999px; /* Pill-Rundung */ --rd-nav-gap: 1rem; /* Abstand oben + seitlich */ --rd-nav-max: 1440px; /* max. Breite der Kapsel (Platz für einzeilige Punkte) */ --rd-nav-text: rgba(255, 255, 255, 0.86); /* Linkfarbe */ --rd-nav-text-on: #ffffff; /* Link aktiv/hover */ --rd-nav-item-pad: 12px; /* horizontaler Innenabstand der Menüpunkte = Nahtbreite */ --rd-nav-underline-off: 0.62em; /* Abstand der Hover-Naht unter dem Text */ --rd-nav-draw-time: 0.8s; /* Dauer des Aufbaus (etwas langsamer) */ --rd-nav-ease: cubic-bezier(0.16, 0.84, 0.44, 1); /* bremst zum Ende stark ab (sanftes Ausklingen) */ } /* --- Die Glas-Kapsel (Logo + Menü) ----------------------------------------- Wird zentriert und auf max. Breite begrenzt -> schwebende Pille. */ .tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container { margin-top: var(--rd-nav-gap); margin-left: auto; margin-right: auto; max-width: min(var(--rd-nav-max), calc(100% - 2 * var(--rd-nav-gap))); border-radius: var(--rd-nav-radius); /* Glas: halbtransparenter dunkler Hintergrund + Blur dahinter. uk-navbar-transparent setzt bg:transparent -> bewusst überschreiben. */ background: var(--rd-nav-bg) !important; -webkit-backdrop-filter: blur(var(--rd-nav-blur)) saturate(160%); backdrop-filter: blur(var(--rd-nav-blur)) saturate(160%); border: 1px solid var(--rd-nav-border); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), /* weicher Schlagschatten */ inset 0 1px 0 rgba(255, 255, 255, 0.18); /* obere Lichtkante */ position: relative; } /* Feiner Glanz-Layer oben (Liquid-Glass-Schimmer) – rein dekorativ */ .tm-header .uk-navbar-container::before, .tm-header-mobile .uk-navbar-container::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 45%); } /* Inhalt über dem Glanz-Layer halten */ .tm-header .uk-navbar-container > *, .tm-header-mobile .uk-navbar-container > * { position: relative; z-index: 1; } /* Fallback: kein backdrop-filter -> kräftigeres, fast deckendes Dunkel */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container { background: var(--rd-nav-bg-solid) !important; } } /* --- Menüpunkte: glühende Schweißnaht-Unterstreichung beim Hover ----------- Statt Hintergrund-Pille zieht sich beim Hover/Fokus eine feine, glühende Linie unter dem Menüpunkt auf (in der Akzentfarbe = YOOtheme-Primary, via rd-weld-Variablen). Passt zum Schweißnaht-Motiv des Effekt-Systems. */ /* Jeder Menüpunkt bleibt EINZEILIG (white-space: nowrap) und schrumpft nicht (flex-shrink: 0) -> die Naht kann nie durch eine zweite Textzeile streichen. Reicht der Platz nicht, rutschen ganze Punkte in eine zweite Reihe (flex-wrap: wrap) statt überzulaufen. */ .tm-header .uk-navbar-nav { flex-wrap: wrap; justify-content: flex-end; } .tm-header .uk-navbar-nav > li { flex-shrink: 0; } .tm-header .uk-navbar-nav > li > a { position: relative; white-space: nowrap; color: var(--rd-nav-text); /* Innenabstand definiert -> Naht kann exakt die Textbreite einnehmen */ padding-left: var(--rd-nav-item-pad); padding-right: var(--rd-nav-item-pad); margin: 0 2px; transition: color 0.3s ease; } /* Die Schweißnaht (reine Primary-Farbe, kräftiges Glühen) – exakt textbreit, baut sich von LINKS nach RECHTS auf (transform-origin: left). */ .tm-header .uk-navbar-nav > li > a::after { content: ""; position: absolute; left: var(--rd-nav-item-pad); right: var(--rd-nav-item-pad); top: calc(50% + var(--rd-nav-underline-off)); height: 2px; border-radius: 2px; background: var(--rd-weld-accent, #ff7a1a); /* nur Primary, kein Verlauf */ /* mehrschichtiges Glühen für deutlich stärkeren Glow */ box-shadow: 0 0 4px var(--rd-weld-accent, #ff7a1a), 0 0 10px var(--rd-weld-line, rgba(255, 122, 26, 0.65)), 0 0 20px var(--rd-weld-line, rgba(255, 122, 26, 0.65)), 0 0 34px var(--rd-weld-soft, rgba(255, 122, 26, 0.16)); opacity: 0; transform: scaleX(0); transform-origin: left center; /* Aufbau von links */ transition: transform var(--rd-nav-draw-time) var(--rd-nav-ease), opacity 0.25s ease; pointer-events: none; } /* Wandernder Glut-Funke an der AUFBAUENDEN SPITZE. Läuft synchron mit der Naht von links nach rechts. Die box-shadow-Punkte sitzen OBER- UND UNTERHALB der Linie -> Funken in beide Richtungen, deutlich (mit Glow). */ .tm-header .uk-navbar-nav > li > a::before { content: ""; position: absolute; top: calc(50% + var(--rd-nav-underline-off) + 1px); /* Mitte der 2px-Naht */ left: var(--rd-nav-item-pad); width: 4px; height: 4px; margin: -2px 0 0 -2px; /* Funke auf den Punkt zentrieren */ border-radius: 50%; background: var(--rd-weld-accent-hot, #ffd08a); /* heller Glutkern */ transform-origin: center; /* Größerer Funkenfächer – deutlich sichtbar, ober- UND unterhalb */ box-shadow: 0 0 12px 3px var(--rd-weld-accent, #ff7a1a), /* Glut-Halo */ /* Funken oberhalb der Naht */ 0px -9px 3px 0 var(--rd-weld-accent-hot, #ffd08a), 6px -15px 2px -1px var(--rd-weld-accent, #ff7a1a), -6px -13px 2px -1px var(--rd-weld-accent-hot, #ffd08a), 2px -22px 2px -1px var(--rd-weld-accent, #ff7a1a), /* Funken unterhalb der Naht */ 0px 9px 3px 0 var(--rd-weld-accent-hot, #ffd08a), 6px 15px 2px -1px var(--rd-weld-accent, #ff7a1a), -6px 13px 2px -1px var(--rd-weld-accent-hot, #ffd08a), 2px 22px 2px -1px var(--rd-weld-accent, #ff7a1a); opacity: 0; pointer-events: none; /* Sanfter Fade-out auch beim Verlassen (Hover-out): die Animation wird beim Aushovern entfernt, der Wert geht zurück auf 0 -> diese Transition fängt den Übergang weich ab, statt hart auszuschnappen. */ transition: opacity 0.35s ease; } /* Hover / Fokus / aktiver Punkt / offenes Dropdown */ .tm-header .uk-navbar-nav > li > a:hover, .tm-header .uk-navbar-nav > li > a:focus, .tm-header .uk-navbar-nav > li.uk-active > a, .tm-header .uk-navbar-nav > li > a[aria-expanded="true"] { color: var(--rd-nav-text-on); } /* Naht von links nach rechts aufbauen */ .tm-header .uk-navbar-nav > li > a:hover::after, .tm-header .uk-navbar-nav > li > a:focus::after, .tm-header .uk-navbar-nav > li.uk-active > a::after, .tm-header .uk-navbar-nav > li > a[aria-expanded="true"]::after { opacity: 1; transform: scaleX(1); } /* Zwei Animationen gleichzeitig: 1) rd-nav-spark-tip -> Spitze läuft mit der Naht von links nach rechts 2) rd-nav-spark-twinkle -> schnelles Scale/Drehen = die Funken FUNKELN */ .tm-header .uk-navbar-nav > li > a:hover::before, .tm-header .uk-navbar-nav > li > a:focus::before { animation: rd-nav-spark-tip var(--rd-nav-draw-time) var(--rd-nav-ease), rd-nav-spark-twinkle 0.25s linear infinite; } /* Funke startet links, läuft mit der Naht-Spitze nach rechts und erlischt (steuert nur left + opacity -> kein Konflikt mit der Funkel-Transform) */ @keyframes rd-nav-spark-tip { 0% { opacity: 0; left: var(--rd-nav-item-pad); } 15% { opacity: 1; } /* ab hier gleichmäßig (linear) und über ein großes Fenster langsam ausfaden -> kein abruptes Verschwinden. Das überschreibt nur die Opazitäts-Kurve; der Lauf (left) behält die Auskling-Ease und bleibt synchron zur Naht. */ 50% { opacity: 1; animation-timing-function: linear; } 100% { opacity: 0; left: calc(100% - var(--rd-nav-item-pad)); } } /* Funkeln: rasches Zucken + Drehen -> die Funkenpunkte tanzen um die Spitze */ @keyframes rd-nav-spark-twinkle { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.5) rotate(14deg); } 50% { transform: scale(0.75) rotate(-9deg); } 75% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1) rotate(0deg); } } /* Tastatur-Fokus zusätzlich klar kennzeichnen (dezent, eingerückt) */ .tm-header .uk-navbar-nav > li > a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: -6px; border-radius: 12px; } /* Reduced Motion: kein „Aufziehen"/keine Funken, nur sanftes Ein-/Ausblenden */ @media (prefers-reduced-motion: reduce) { .tm-header .uk-navbar-nav > li > a::after { transform: scaleX(1); transition: opacity 0.2s ease; } .tm-header .uk-navbar-nav > li > a:hover::before, .tm-header .uk-navbar-nav > li > a:focus::before { animation: none; } } /* --- Schrift + Logo auf dem dunklen Glas immer hell ------------------------ Überschreibt YOOthemes automatische Hell/Dunkel-Umschaltung (uk-light/ uk-dark), damit auf der dunklen Kapsel IMMER die helle Variante sichtbar ist – unabhängig vom Abschnitt dahinter. */ .tm-header .uk-navbar-nav > li > a, .tm-header-mobile .uk-navbar-nav > li > a { color: var(--rd-nav-text); } .tm-header .uk-logo > :not(.uk-logo-inverse), .tm-header-mobile .uk-logo > :not(.uk-logo-inverse) { display: none !important; } .tm-header .uk-logo-inverse, .tm-header-mobile .uk-logo-inverse { display: inline-block !important; } /* Mobile-Menü-Button (Hamburger) auf dem Glas hell halten */ .tm-header-mobile .uk-navbar-toggle, .tm-header-mobile .uk-navbar-toggle:hover { color: var(--rd-nav-text-on); } /* Mittlere Desktops: Logo + Menü kompakter, damit alles länger EINREIHIG bleibt (verhindert frühen Umbruch in eine zweite Menü-Reihe). */ @media (min-width: 960px) and (max-width: 1300px) { .tm-header .uk-logo img { max-width: 200px; height: auto; } :root { --rd-nav-item-pad: 9px; } .tm-header .uk-navbar-nav > li > a { font-size: 0.82rem; } } /* Auf sehr kleinen Screens etwas kompakter */ @media (max-width: 639px) { :root { --rd-nav-gap: 0.6rem; --rd-nav-radius: 26px; /* etwas weniger rund, da niedrige Bauhöhe */ } }