/* =================================================================== newwave.space -- eigene Anpassungen Liegt bewusst NACH style.css, damit hier alles ohne !important ueberschrieben werden kann. Theme-Dateien bleiben unangetastet. 1) Glass-Menue im Apple-Stil 2) Vertikaler Rhythmus / Abstaende =================================================================== */ /* ------------------------------------------------------------------- 1) GLASS-MENUE -- schwebende Leiste Vorbild: mograde.net/rental. Dort ausgelesen, nicht geschaetzt: .header-blur-background { inset: 32px vom Rand border-radius: 18px backdrop-filter: blur(10px) background: transparent <- KEIN Farbton border: keine box-shadow: keiner } Das ist der ganze Effekt. Die "Kanten-Optik" ist genau die harte Rundung, an der die Unschaerfe aufhoert - kein weicher Auslauf, keine Linie, keine Farbe. Nur Unschaerfe innerhalb einer klaren Form. Das hat einen angenehmen Nebeneffekt: ohne Farbton gibt es nichts, was beim Wechsel hell/dunkel umschalten muesste. Das Problem mit den harten Uebergaengen faellt damit ersatzlos weg. ------------------------------------------------------------------- */ :root { --glass-inset: 26px; /* Abstand der Leiste links/rechts */ --glass-top: 54px; /* Abstand Bildschirmoberkante -> Leiste */ --glass-bar-h: 104px; /* Hoehe der Leiste selbst */ --glass-radius: 24px; /* Eckenradius */ /* Die drei Regler der Scheibe. Sie stehen als Variablen da, damit jede Seite ihren eigenen Charakter bekommen kann, ohne dass der Aufbau doppelt gepflegt werden muss - siehe Abschnitt 1c. */ --glass-blur: 16px; /* Staerke der Unschaerfe */ --glas-hell: 1.80; /* wie stark der Untergrund aufhellt */ --glas-farbe: 1.90; /* wie kraeftig die Farbe durchkommt */ --glas-weiss: .20; /* Anteil Weiss in der Scheibe */ /* #header-container bringt aus dem Theme ein padding-top mit. Weil #logo darin nur relativ positioniert ist, verschiebt das den Startpunkt - im Browser gemessen: 10px ab 1025px Breite, darunter 0. Genau dieser Wert stand vorher nicht in der Rechnung, deshalb sass das Logo zu tief und ragte nur oben ueber die Leiste hinaus. */ --header-pad: 10px; /* Zwei Ebenen, die mehrfach gebraucht werden - einmal definiert, damit sie ueberall identisch sind: --nw-korn feines Filmkorn aus feTurbulence. Liegt auf der Glasleiste und auf allen Sektionshintergruenden. Es macht Flaechen lebendig UND bricht das Farbbanding, das grosse weiche Verlaeufe auf 8-Bit-Bildschirmen sonst als Stufen zeigen. --nw-schraffur eine extrem flache Schraffur, 7px Raster, unter 2 % Deckkraft. Man liest sie nicht als Muster, aber die Flaeche wirkt nicht mehr tot. */ --nw-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.30'/%3E%3C/svg%3E"); --nw-schraffur: repeating-linear-gradient( 118deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 7px); } /* Ab hier wird gerechnet statt geraten. Die Leiste haengt jetzt an --glass-top statt am gleichen Abstand wie links und rechts. Grund: das Theme setzt das Logo mit 80px (grosse Monitore), 60, 40 bzw. 30px Abstand vom linken Rand. Damit der Abstand nach oben genauso wirkt, muss die Leiste tiefer haengen als sie breit eingerueckt ist. Das Logo leitet sich aus der Leiste ab: Leistenhoehe plus zweimal Ueberstand. Damit ist der Ueberstand oben und unten per Konstruktion gleich gross - bei jeder Fensterbreite, ohne dass irgendwo eine zweite Zahl gepflegt werden muss. Der Ueberstand ist zwei Pixel kleiner als der seitliche Abstand, so stoesst das Logo nirgends an. */ :root { --logo-overhang: calc(var(--glass-inset) - 2px); --logo-h: calc(var(--glass-bar-h) + 2 * var(--logo-overhang)); --glass-h: calc(var(--glass-top) + var(--glass-bar-h) + var(--glass-inset)); /* Die Menuepunkte wandern genau so weit mit nach unten, wie die Leiste tiefer gerueckt ist. 18px war die Feinjustage von vorher. */ --nav-offset: calc(18px + var(--glass-top) - var(--glass-inset)); } header { height: var(--glass-h); background-color: transparent; /* Der Header ist jetzt deutlich hoeher, weil die Leiste tiefer haengt. Ohne diese Zeile wuerde die leere Flaeche darueber Klicks auf das Hero-Bild abfangen. Die bedienbaren Teile bekommen ihre Klicks weiter unten wieder zurueck. */ pointer-events: none; } /* WICHTIG: hier steht bewusst KEIN "header nav". Das Menue ist auf dem Handy kein schmaler Balken, sondern ein bildschirmfuellendes Panel (gemessen 390x844, beginnend bei y=46) - auch wenn es zu ist. Mit pointer-events:auto darauf schluckt es jede Beruehrung der ganzen Seite. Die Smooth-Scrollbar verwirft aber jede Geste, deren Ziel nicht in #content-scroll liegt: das Ergebnis war eine Seite, die sich auf dem Handy gar nicht mehr scrollen liess und am Mac nur noch ruckweise. Anfassbar sind deshalb nur die Dinge, die man wirklich antippt. Das gilt fuer offenes wie geschlossenes Menue - die Links sind immer klickbar, die Flaeche dahinter faengt nie etwas ab. */ header nav { pointer-events: none; } header #logo, header #logo a, header .button-wrap, header .menu-button, header nav a, header nav button, header nav .touch-button { pointer-events: auto; } /* --- Die schwebende Glasflaeche --------------------------------- */ header::before { content: ""; position: absolute; top: var(--glass-top); left: var(--glass-inset); right: var(--glass-inset); height: var(--glass-bar-h); bottom: auto; z-index: -1; pointer-events: none; border-radius: var(--glass-radius); /* HELLES Glas. brightness() > 1 hebt den Untergrund an, saturate() holt die Farbe zurueck, die die Unschaerfe wegmittelt. Zusammen ergibt das die helle, leicht leuchtende Scheibe von Apple - nicht eine weisse Milchglasplatte. Damit das funktioniert, MUSS der Untergrund dunkel sein: ueber einer hellen Bildstelle wuerde brightness(1.5) ins Weiss laufen und weisse Schrift verschlucken. Genau dafuer sorgt der Schleier in header::after weiter unten. */ -webkit-backdrop-filter: blur(var(--glass-blur)) brightness(var(--glas-hell)) saturate(var(--glas-farbe)); backdrop-filter: blur(var(--glass-blur)) brightness(var(--glas-hell)) saturate(var(--glas-farbe)); /* FILMKORN. Das ist der Unterschied zwischen "durchsichtige Flaeche" und "Scheibe". Eine echte Glasscheibe im Foto ist nie mathematisch glatt - sie hat Korn. Ohne das wirkt eine grosse unscharfe Flaeche schnell wie ein Rechteck aus Photoshop. Erzeugt wird es mit feTurbulence direkt im SVG, also ohne eine einzige zusaetzliche Datei und ohne Anfrage. baseFrequency 0.92 ist bewusst hoch: das ergibt Korn auf Pixelebene statt sichtbarer Wolken. Die Kachel ist 120px gross, bei dieser Frequenz sieht man die Wiederholung nicht. Nebeneffekt, den man gratis mitnimmt: das Korn bricht das Farbbanding, das grosse weiche Verlaeufe auf 8-Bit-Schirmen sonst zeigen. Und die zweite Ebene ist der Grund, warum die Scheibe ueberhaupt so durchsichtig sein DARF: SCHATTEN NUR UNTER DER SCHRIFT. Weisse Menueschrift auf durchsichtigem Glas ist genau dann unlesbar, wenn ein helles Bild darunter durchlaeuft - bei den Partner-Kacheln fiel sie auf 2,4:1. Frueher wurde deshalb die ganze Scheibe gedaempft, und damit war die Durchsicht weg. Jetzt wird nur die rechte Seite abgedunkelt, dort wo "About" und "Contact" stehen. Links und in der Mitte bleibt die Scheibe voll durchsichtig. Nachgemessen: Durchsicht (Streuung im Bild hinter der Scheibe) steigt von 10 auf 39, der schlechteste Schriftkontrast von 2,4:1 auf 7,9:1. Beides zugleich - das ging vorher nicht. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23k)' opacity='0.42'/%3E%3C/svg%3E"), linear-gradient(to left, rgba(5,5,7,.95) 0%, rgba(5,5,7,.92) 18%, rgba(5,5,7,.62) 34%, rgba(5,5,7,0) 64%); background-size: 120px 120px, auto; background-repeat: repeat, no-repeat; /* Mehr Weiss als vorher - die Scheibe soll heller wirken, ohne milchig zu werden. Der Wert steht im background-color und wird vom Korn darueber leicht aufgebrochen. */ background-color: rgba(255,255,255,var(--glas-weiss)); /* Die einzige Linie im Aufbau: ein Lichtreflex auf der Oberkante, wie ihn eine echte Glasscheibe hat. Kein Rahmen, kein Schatten - die Kanten-Optik kommt weiter aus der harten Rundung. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.30); opacity: 0; transition: opacity .45s cubic-bezier(.4,0,.2,1); } /* Im Ruhezustand ganz aus, damit das Hero-Bild voll wirkt. Beim Scrollen blendet die Flaeche ein. */ body.nw-compact header::before { opacity: 1; } /* --- Kein Schleier mehr hinter der Scheibe ---------------------- Der Schleier hatte eine Aufgabe: helle Bildstellen daempfen, damit die weisse Menueschrift lesbar bleibt. Diese Aufgabe hat inzwischen der Verlauf INNERHALB der Scheibe uebernommen, der nur die rechte Seite abdunkelt, wo die Schrift steht. Nachgemessen ueber die ganze Seite bei 1600x900, mit und ohne Schleier: schlechtester Schriftkontrast beide Male 8,44:1, Median beide Male 9,44:1. Er trug also nichts mehr bei und war nur noch ein sichtbarer Schatten um die Leiste. Weg damit - die Leiste steht jetzt ohne alles auf dem Bild. */ header::after { content: none; } /* --- Logo und Menue mittig in der Leiste ------------------------ Die Leiste laeuft von --glass-inset bis (Hoehe - --glass-inset), ihre Mitte ist also die Mitte des Headers. Das Logo wird darauf zentriert; #header-container hat 20px padding-top, das muss abgezogen werden. ------------------------------------------------------------- */ /* Die Logodatei war nicht mittig: 9px Rand oben, aber 107px unten auf einer 500x500-Leinwand. Der sichtbare Inhalt sass damit 49px zu hoch, und 23% der eingestellten Hoehe waren leere Flaeche - deshalb wirkte das Logo klein UND sass schief. Die Datei ist jetzt exakt auf ihren Inhalt beschnitten (484x384). --logo-h ist ab sofort die wirklich sichtbare Hoehe. */ #logo img { height: var(--logo-h); width: auto; transition: height .45s cubic-bezier(.4,0,.2,1); /* traegt das Logo dort, wo es ueber die Leiste hinausragt */ filter: drop-shadow(0 2px 10px rgba(0,0,0,.28)); } /* Das Logo darf die Glasleiste ueberragen: #logo liegt mit z-index 30 ueber der Glasflaeche (die hat -1). Die Rechnung: Oberkante der Leiste, minus der Ueberstand, minus das padding-top, das #header-container schon beisteuert. Ergebnis ist ein Ueberstand von exakt --logo-overhang oben wie unten. */ #logo { top: calc(var(--glass-top) - var(--logo-overhang) - var(--header-pad)); z-index: 30; } header, #header-container { overflow: visible; } /* Zwei verschiedene Header im Theme: index benutzt .classic-menu mit ausgeschriebenen Menuepunkten, about und contact benutzen .fullscreen-menu mit Burger-Knopf. Bisher stand hier nur der erste - deshalb sass der Knopf "Menu" auf den beiden anderen Seiten bei y=10..90, waehrend die Leiste bei 54..158 liegt. Er hing also oben heraus statt in der Schaltflaeche zu sitzen. */ .classic-menu nav, .classic-menu .button-wrap.right.menu, .fullscreen-menu .button-wrap.right.menu, header .button-wrap.right.menu { position: relative; top: var(--nav-offset); } /* Die Menueschrift bleibt weiss - auf allen Seiten. Das Theme faerbt sie ueber data-menucolor um; auf contact kam dadurch rgb(0,0,0) heraus, also schwarze Schrift auf dunklem Glas. Seit die ganze Seite dunkel ist, gibt es nichts mehr umzufaerben. */ header .button-text, header .button-text span, header .flexnav li a, header .flexnav li a span, header nav a, header nav a span { color: #fff !important; } header #menu-burger span { background-color: #fff !important; } /* Innenabstand der Leiste: Logo und Menue sollen nicht an der Rundung kleben. 80px Container-Padding minus 26px Einrueckung ergeben 54px Luft zur Glaskante - links wie rechts. */ .classic-menu .flexnav li { padding-left: 26px; padding-right: 26px; } /* Weicher Farbwechsel der Schrift beim Sektionswechsel */ header .flexnav li a span, header .button-text span { transition: color .55s cubic-bezier(.4,0,.2,1); } /* ------------------------------------------------------------------- OPTIONAL: schrumpfende Leiste beim Scrollen Standardmaessig AUS. Die Leiste bleibt beim Scrollen in voller Hoehe, das Glas wird nur dichter (siehe oben, body.nw-compact). Zum Einschalten in index.html am -Tag class="nw-shrink" ergaenzen, oder hier die Zeile darunter aktivieren: html { --nw-shrink: 1; } ------------------------------------------------------------------- */ html.nw-shrink body.nw-compact header { height: 104px; } html.nw-shrink body.nw-compact #logo img { height: 68px; } html.nw-shrink body.nw-compact .classic-menu nav, html.nw-shrink body.nw-compact header .button-wrap.right.menu { top: 8px; } /* ------------------------------------------------------------------- Fallback fuer Browser ohne backdrop-filter Ohne diesen Block waere die Leiste dort komplett transparent und die Menueschrift stuende ohne Kontrast auf dem Bild. ------------------------------------------------------------------- */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { /* Ohne Unschaerfe waere die Leiste vollstaendig unsichtbar. Dann braucht sie ersatzweise einen Ton, damit die Schrift Kontrast hat. */ body.nw-compact header::before { background-color: rgba(20,20,24,.55); } } /* ------------------------------------------------------------------- Responsive ------------------------------------------------------------------- */ /* Nur noch Hoehe und Abstand pro Breite - Logohoehe und Ueberstand rechnen sich daraus von selbst. Einzige Ausnahme ist --header-pad: das Theme staffelt das padding-top von #header-container in drei Stufen. Im Browser ausgelesen, Breite fuer Breite: ab 1441px : 20px 1025-1440 : 10px bis 1024 : 0px Wird das nicht mitgefuehrt, sitzt das Logo auf grossen Monitoren genau 20px zu tief - und das war der Grund, warum es dort oben ueberstand und unten nicht. */ /* --glass-top ist so gewaehlt, dass das Logo oben genauso weit vom Rand steht wie links. Die linken Werte kommen aus dem Theme und wurden Breite fuer Breite ausgelesen: ab 1441px : 80px links -> --glass-top 104px 1025-1440 : 60px links -> --glass-top 84px 768-1024 : 40px links -> --glass-top 54px bis 767 : 30px links -> --glass-top 40px (Leistenoberkante = gewuenschter Logoabstand + Ueberstand.) */ @media only screen and (min-width: 1441px) { :root { --header-pad: 20px; --glass-top: 64px; } } @media only screen and (max-width: 1366px) { :root { --glass-inset: 22px; --glass-bar-h: 92px; --glass-top: 50px; } } @media only screen and (max-width: 1024px) { :root { --glass-inset: 16px; --glass-bar-h: 80px; --glass-top: 38px; --glass-radius: 18px; /* Das Theme nimmt hier das padding-top am Header-Container zurueck (gemessen: 0px). Ohne diese Zeile saesse das Logo unterhalb von 1025px genau um jene 10px zu hoch. */ --header-pad: 0px; } } @media only screen and (max-width: 767px) { :root { --glass-inset: 12px; --glass-bar-h: 68px; --glass-top: 26px; --glass-radius: 16px; --glass-blur: 12px; } } /* =================================================================== 1c) JEDE SEITE HAT IHRE EIGENE SCHEIBE Eine Einstellung fuer alle drei Seiten konnte nicht passen: die Startseite hat ein sehr helles, buntes Hero-Bild direkt unter der Leiste, about laeuft ueber ruhige Fotos, contact ueber einen fast leeren dunklen Grund. Dieselbe Aufhellung wirkt dort jedesmal anders - auf der Startseite eben deutlich zu hell. Die Kennung setzt js/nw-sprache.js ganz oben im , noch bevor das erste Pixel gezeichnet wird, und nach jedem AJAX-Seitenwechsel erneut. Deshalb gibt es kein Aufblitzen der falschen Fassung. Alle drei bleiben dieselbe Scheibe - nur Aufhellung, Farbe, Weissanteil und Unschaerfe verschieben sich. Der Aufbau, die Kante und das Korn sind ueberall gleich. =================================================================== */ /* Startseite: geraeucherte Scheibe. Das Hero darunter bringt schon genug Licht und Farbe mit - die Leiste haelt sich zurueck und laesst das Bild wirken. */ html[data-nw-seite="start"] { --glas-hell: 1.14; --glas-farbe: 1.55; --glas-weiss: .085; --glass-blur: 20px; } /* Ueber uns: die mittlere Fassung. Die Fotos darunter sind ruhiger, die Scheibe darf etwas mehr Licht aufnehmen. */ html[data-nw-seite="about"] { --glas-hell: 1.26; --glas-farbe: 1.70; --glas-weiss: .10; --glass-blur: 18px; } /* Kontakt: die hellste und klarste. Hier liegt fast nur dunkler Grund darunter, also faellt hier keine Bildhelligkeit ins Gewicht - die Scheibe darf richtig leuchten. */ html[data-nw-seite="kontakt"] { --glas-hell: 1.85; --glas-farbe: 2.00; --glas-weiss: .19; --glass-blur: 15px; } /* =================================================================== 1b) DUNKLER SEITENGRUND Das war der weisse Streifen unter der Szene: html und body standen noch auf rgb(255,255,255), main auf rgb(23,23,23). Die dunklen Sektionen liegen als einzelne Kaesten darueber - und weil ihre Hoehen auf Subpixel gerundet werden, klafft zwischen zwei Kaesten je nach Fensterbreite eine Luecke von unter einem Pixel. Dort blitzte der weisse Grund durch, mal sichtbar, mal nicht - genau das Verhalten, das man bei einem halbbreiten Fenster sieht. Der Seitengrund wird deshalb auf denselben Ton gelegt wie die Sektionen. Dann kann eine Rundungsluecke nichts mehr zeigen, was auffaellt. Kostet nichts und nimmt der ganzen Frage die Schaerfe. ACHTUNG bei der Auswahl: .light-content ist im Theme KEIN Layout-Container, sondern eine Farbmarkierung - sie haengt unter anderem an #magic-cursor, einem 30x30 grossen Kaestchen, das bei 0,0 parkt. Mit .light-content in der Liste sass genau dort auf jeder Seite ein schwarzer Kasten. Deshalb stehen hier nur echte Container. =================================================================== */ html, body, main, #content-scroll, .scroll-content, .pin-spacer { background-color: #0a0a0c; } /* =================================================================== 2) VERTIKALER RHYTHMUS Ausgangslage: gemessen an der gerenderten Startseite gab es 20 verschiedene Abstandswerte zwischen 40 und 297 px. Ursache ist vor allem .row_padding_top/-bottom mit 8vw - das haengt an der FENSTERBREITE, nicht am Inhalt. Auf einem 27-Zoll-Monitor wurden daraus 154 px, auf einem Laptop 100 px, und die uebrigen Abstaende (feste px-Werte an Ueberschriften und Bildern) blieben gleich. Dadurch verschiebt sich das Verhaeltnis mit jeder Fensterbreite und nichts passt mehr zueinander. Loesung: eine Skala mit wenigen Stufen, fluid aber gedeckelt. =================================================================== */ :root { --nw-s: clamp(32px, 3vw, 48px); /* eng */ --nw-m: clamp(56px, 5vw, 80px); /* normal */ --nw-l: clamp(88px, 7.5vw, 128px); /* Sektionsabstand */ --nw-xl: clamp(120px, 10vw, 176px); /* grosse Zaesur */ } /* --- Sektionsabstaende auf die Skala legen ---------------------- */ .row_padding_top { padding-top: var(--nw-l); } .row_padding_bottom { padding-bottom: var(--nw-l); } .row_padding_all { padding-top: var(--nw-m); padding-bottom: var(--nw-m); } /* Erste Sektion nach dem Hero braucht mehr Luft, damit der Wechsel vom Vollbild zum Inhalt nicht gedraengt wirkt */ #hero + .content-row .row_padding_top, #hero-image-wrapper + .content-row .row_padding_top { padding-top: var(--nw-xl); } /* --- Abstaende innerhalb einer Sektion vereinheitlichen --------- */ .content-row .section-caption { margin-bottom: var(--nw-s); } .content-row .section-title { margin-bottom: var(--nw-m); } .content-row p + p { margin-top: 1.15em; } .content-row h1 + p, .content-row h2 + p, .content-row h3 + p, .content-row h4 + p { margin-top: var(--nw-s); } .content-row p + h2, .content-row p + h3, .content-row p + h4 { margin-top: var(--nw-m); } /* Bildbloecke innerhalb einer Sektion */ .content-row .single-image, .content-row .image-wrap, .content-row .parallax-wrap { margin-bottom: var(--nw-m); } .content-row .single-image:last-child, .content-row .image-wrap:last-child { margin-bottom: 0; } /* Doppelte Abstaende vermeiden: wenn zwei Sektionen mit gleicher Hintergrundfarbe aufeinandertreffen, addieren sich sonst padding-bottom und padding-top zu fast 260px. */ .light-section + .light-section > .row_padding_top, .dark-section + .dark-section > .row_padding_top { padding-top: 0; } /* --- Lesbarkeit: Fliesstext war mit 16px sehr klein gegenueber Ueberschriften bis 158px. Etwas groesser und mit ruhigerer Zeilenlaenge liest sich der Text deutlich besser. ------------- */ .content-row p { font-size: clamp(17px, 1.15vw, 19px); line-height: 1.7; } .content-row .max-text-width, .content-row .text-block p { max-width: 68ch; } /* ------------------------------------------------------------------- Die konkreten Ausreisser Gemessen an der gerenderten Seite, nicht geschaetzt. Das sind die Stellen, an denen sich die grossen Loecher aufgetan haben. ------------------------------------------------------------------- */ /* 300px unter jedem Portfolio-Item war der groesste Einzelposten. Die Parallax-Bewegung haengt an ScrollTrigger, nicht an diesem Abstand - er darf also kleiner werden, ohne dass der Effekt leidet. */ .parallax-two-grid .item { margin-bottom: var(--nw-xl); } .overlapping-grid .item { margin-top: var(--nw-l); margin-bottom: var(--nw-l); } .overlapping-grid.below-caption .item:last-child { margin-bottom: var(--nw-l); } /* Hero-Unterkante: 140-180px waren hier zu viel, weil direkt darunter schon das naechste Sektionspadding kam. */ #hero-caption { padding-bottom: var(--nw-l); } #hero.has-image #hero-caption { padding-bottom: var(--nw-l); } /* Sektionsueberschriften */ .page-nav-caption, .page-nav-caption.marquee-title { padding-top: var(--nw-l); padding-bottom: var(--nw-s); } /* Bildunterschriften im Grid */ .item-caption { padding-top: var(--nw-s); padding-bottom: var(--nw-s); } /* "Slowed"-Elemente: die brauchen Bewegungsraum fuer den Parallax, bekommen aber nicht mehr 150px an jeder Kante. */ .slowed-image-left, .slowed-image-right { margin-top: var(--nw-l); margin-bottom: var(--nw-l); } .slowed-text { padding-top: var(--nw-l); padding-bottom: var(--nw-l); } /* =================================================================== 3) EIN DURCHGEHENDES HINTERGRUNDMOTIV Vorher hatte jede Sektion ihren eigenen Hintergrund, und damit die Kanten nicht hart aufeinanderstiessen lag oben und unten ein dunkler Verlauf darueber. Beim Scrollen sah man deshalb genau das, was gemeldet wurde: Farbe, schwarzer Streifen, wieder Farbe, wieder schwarz. Das Problem war nicht die Staerke des Verlaufs - es war, dass es ueberhaupt Sektionsgrenzen zu verstecken gab. Jetzt gibt es keine mehr. Der Hintergrund liegt EINMAL auf dem Element, das den gesamten Seiteninhalt traegt, und laeuft ueber die ganze Seitenhoehe durch: weiche, runde Farbfelder, die ineinander uebergehen, darueber dasselbe Filmkorn wie auf der Glasleiste. Die Sektionen selbst sind durchsichtig geschaltet. Damit kann es schlicht keine Streifen und keine schwarzen Luecken mehr geben - es gibt nichts, was aneinanderstossen koennte. =================================================================== */ /* Die Sektionen bekommen ihre Farbe vom Theme per data-bgcolor als Inline-Style. Das muss weichen, sonst deckt jede Sektion das Motiv wieder zu - daher hier ausnahmsweise !important. */ .dark-section-wrapper, .dark-section-container, .light-section-wrapper, .light-section-container { background-color: transparent !important; } .scroll-content { background-color: #0a0a0c; background-image: var(--nw-korn), radial-gradient(ellipse 78% 13% at 14% 8%, rgba(52,72,152,.34), transparent 68%), radial-gradient(ellipse 70% 11% at 86% 21%, rgba(28,112,126,.30), transparent 70%), radial-gradient(ellipse 74% 12% at 20% 35%, rgba(114,50,136,.28), transparent 70%), radial-gradient(ellipse 64% 10% at 84% 49%, rgba(172,90,38,.26), transparent 70%), radial-gradient(ellipse 76% 13% at 24% 63%, rgba(30,98,122,.28), transparent 70%), radial-gradient(ellipse 66% 11% at 80% 78%, rgba(70,58,142,.26), transparent 70%), radial-gradient(ellipse 80% 13% at 42% 93%, rgba(26,106,118,.24), transparent 70%), linear-gradient(180deg, #0a0b11 0%, #08090d 28%, #0b0910 52%, #08090c 76%, #0a0b0f 100%); background-size: 160px 160px, auto, auto, auto, auto, auto, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } /* =================================================================== 4) SCROLL-SZENE ("Wir arbeiten jedes Projekt ...") Ersetzt die frueheren .slowed-pin-Sektion des Themes. Die war so gebaut: slowedPin.height = window.innerHeight * 5 (= 4100px) Text bewegt sich 820 - 1402 = -582px auf 3280px Scrollweg Bilder bewegen sich 4100 - 4252 = -152px auf 4920px Scrollweg Man musste also fast 5000px scrollen, damit sich der Text um 582px bewegt - und die Bilder standen dabei praktisch still. Am Ende war die Bildspalte durchgelaufen und es blieb eine leere dunkle Flaeche stehen. Das war der "graue Balken". Neu: genau ein Viewport Pin, zwei gegenlaeufige Bildspalten, die ueber den Rand hinausreichen und deshalb nie leerlaufen koennen. =================================================================== */ .nw-scene { position: relative; height: 100vh; overflow: hidden; } /* Die Medienflaeche ist absichtlich hoeher als die Szene. Dadurch bleibt bei der Drift immer Bild im sichtbaren Bereich. */ .nw-scene-media { position: absolute; top: -22%; bottom: -22%; left: 0; right: 0; display: flex; gap: clamp(14px, 1.6vw, 26px); padding: 0 clamp(14px, 1.6vw, 26px); box-sizing: border-box; } /* Zwei Filmstreifen. Frueher fuellten sechs Kacheln die Flaeche per flex:1 genau aus - die Spalte war damit exakt so hoch wie ihr Fenster und konnte sich nur um die paar Prozent bewegen, die der Ueberstand hergab. Genau deshalb war "die Bewegung fast gar nicht vorhanden". Jetzt haben die Kacheln eine FESTE Hoehe und die Spalte ist mit 18 Kacheln rund viermal so lang wie ihr Fenster. Sie wird per justify-content mittig gehalten und ragt oben wie unten weit hinaus. Damit ist Vorrat fuer eine lange Fahrt da, ohne dass der Streifen jemals leerlaufen kann. */ .nw-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 1.6vw, 26px); /* Kein dauerhaftes will-change: die Spalten sind ueber 4000px hoch, das haette zwei sehr grosse Ebenen dauerhaft im Grafikspeicher gehalten. GSAP schiebt sie ohnehin per translate3d, die Ebene entsteht also waehrend der Animation von selbst und verschwindet danach wieder. */ } .nw-tile { margin: 0; flex: 0 0 auto; /* Breites, filmisches Format - so passen mehrere Bilder uebereinander ins Bild und man sieht sie durchlaufen. Der groessere von Breite und Hoehe gibt den Ausschlag: bei einem breiten flachen Fenster zaehlt vw, bei einem schmalen hohen zaehlt vh. Sonst wuerde der Streifen genau im halbhohen Desktopfenster zu kurz und die Bewegung waere wieder weg - dort war sie mit reinem vw auf 44px zusammengeschrumpft. */ height: clamp(150px, max(15.5vw, 21vh), 320px); border-radius: 14px; overflow: hidden; } .nw-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Schleier: haelt die Ueberschrift lesbar und laesst die Sektion an den Kanten in die Nachbarsektionen auslaufen, statt hart zu stossen */ .nw-scene-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(ellipse 76% 62% at 50% 50%, rgba(8,8,10,.88) 0%, rgba(8,8,10,.66) 55%, rgba(8,8,10,.42) 100%), linear-gradient(to bottom, rgba(8,8,10,1) 0%, rgba(8,8,10,.35) 16%, rgba(8,8,10,.35) 84%, rgba(8,8,10,1) 100%); } .nw-scene-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 clamp(24px, 7vw, 150px); box-sizing: border-box; pointer-events: none; } .nw-scene-title { margin: 0; font-size: clamp(28px, 4.3vw, 72px); line-height: 1.12; letter-spacing: -0.015em; max-width: 19ch; color: #fff; } .nw-scene-sub { margin: clamp(18px, 2.2vw, 32px) 0 0; max-width: 44ch; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.65; color: rgba(255,255,255,.62); } @media only screen and (max-width: 1024px) { .nw-scene-media { top: -16%; bottom: -16%; } } @media only screen and (max-width: 767px) { .nw-scene { height: 92vh; } .nw-scene-title { max-width: 16ch; } .nw-tile { height: clamp(120px, 30vw, 190px); } } /* Wer Bewegung reduziert haben will, bekommt die Szene ruhig */ @media (prefers-reduced-motion: reduce) { .nw-col { transform: none !important; } } /* =================================================================== 5) SPRACHUMSCHALTER DE / EN Sitzt mittig in der Glasleiste. Das ist auf allen drei Seiten die einzige Stelle, die garantiert frei ist: links das Logo, rechts das Menue - und index benutzt einen anderen Header (.classic-menu) als about und contact (.fullscreen-menu). Mittig gesetzt kann er mit keinem von beiden kollidieren, bei keiner Fensterbreite. =================================================================== */ .nw-sprache { position: absolute; top: calc(var(--glass-top) + var(--glass-bar-h) / 2 - var(--header-pad)); left: 50%; transform: translate(-50%, -50%); z-index: 40; display: flex; gap: 2px; padding: 3px; border-radius: 999px; pointer-events: auto; /* Dieselbe Sprache wie die Leiste: ein Hauch Weiss, feines Korn, eine Lichtkante oben. */ background-color: rgba(255,255,255,.10); background-image: var(--nw-korn); background-size: 120px 120px; box-shadow: inset 0 1px 0 rgba(255,255,255,.20); opacity: 0; transition: opacity .45s cubic-bezier(.4,0,.2,1); } /* Erscheint zusammen mit der Leiste, damit das Hero oben frei bleibt */ body.nw-compact .nw-sprache { opacity: 1; } .nw-sprache-knopf { appearance: none; -webkit-appearance: none; border: 0; margin: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px; background: transparent; color: rgba(255,255,255,.62); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1; transition: color .25s ease, background-color .25s ease; } .nw-sprache-knopf:hover { color: #fff; } .nw-sprache-knopf.ist-aktiv { color: #fff; background-color: rgba(255,255,255,.18); } .nw-sprache-knopf:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; } @media only screen and (max-width: 767px) { .nw-sprache-knopf { padding: 5px 11px; font-size: 11px; } } /* Unfertige Mask-Fill-Ueberschriften. Das Theme faerbt den noch nicht gefuellten Teil je nach Sektion entweder mit rgba(255,255,255,.1) oder rgba(0,0,0,.1). Auf contact griff die schwarze Variante - auf dunklem Grund war die Ueberschrift damit praktisch unsichtbar und sah aus, als wuerde sie noch laden. Seit die ganze Seite dunkel ist, gibt es nur noch eine richtige Antwort. */ .has-mask-fill > span, .light-content .light-section .has-mask-fill > span { -webkit-text-fill-color: rgba(255,255,255,.16); background-image: linear-gradient(#fff, #fff); }