/* ═══ DIE FARBEN SIND ANIMIERBAR ══════════════════════════════════════════ Chris am 24.08.: „wenn man switcht von hell auf dunkel, muss es super smooth und am besten super langsam gehen - das ist unser Effekt, der von der Brand mitkommt." Eine gewöhnliche Variable springt. Der Browser kennt sie nur als Text und weiß nicht, dass #0b0d10 und #f4f2ee zwei Farben sind, zwischen denen es einen Weg gibt. Mit @property sagen wir es ihm - ab da lässt sich der Übergang animieren wie jede andere Farbe auch. Und weil fast alles auf der Seite über diese fünf Variablen läuft, kippt damit die ganze Seite weich, nicht nur der Hintergrund. */ @property --bg { syntax:''; inherits:true; initial-value:#0b0d10 } @property --bg-2 { syntax:''; inherits:true; initial-value:#12161b } @property --fg { syntax:''; inherits:true; initial-value:#ece8e1 } @property --fg-dim { syntax:''; inherits:true; initial-value:#9aa1a9 } @property --line { syntax:''; inherits:true; initial-value:#252c34 } /* ⭐ NEU: der Fliesstext. Er stand an acht Stellen als festes #cdd3da - ein Wert, der nirgends erklaert war und den man an acht Stellen haette aendern muessen. Jetzt hat er einen Namen und zwei Werte. */ @property --fg-text { syntax:''; inherits:true; initial-value:#cdd3da } @property --akzent { syntax:''; inherits:true; initial-value:#e8e4dc } /* Das Azur sagt "laeuft gerade" - beim Atem, bei der Glocke, beim Naturklang, bei der gewaehlten Sprache. Auf Schwarz leuchtet es; auf Hellbeige verschwand es fast (Kontrast 1,7). */ @property --azur { syntax:''; inherits:true; initial-value:#6cc6ff } /* Langsam, weil es ein Atemzug sein soll und kein Lichtschalter. 1,6 s ist ungefähr ein halber Einatmer - lang genug, dass man es als Bewegung erlebt, kurz genug, dass niemand wartet. */ /* ⚠️ ZWEI SELEKTOREN, UND overflow MUSS MIT. Lenis setzt auf .lenis.lenis-autoToggle (0,2,0) ein transition-property:overflow - das schlaegt ein blosses html (0,0,1), und mein Uebergang kam nie an. Gemessen: transitionProperty stand auf "overflow / 0.001s". Der zweite Selektor (0,2,1) gewinnt knapp. Und overflow steht in der Liste mit, weil Lenis es zum Umschalten des Scrollens braucht - haette ich es nur ueberschrieben, waere der weiche Uebergang gekommen und das Scrollen kaputtgegangen. */ html, html.lenis.lenis-autoToggle{ /* ⚠️ background-color steht ABSICHTLICH NICHT in dieser Liste. Chris am 24.08.: „wenn man von hell auf dunkel macht, bleibt so ein Rahmen oben ... und links unten, irgendwas ist mit Padding noch, ganz minimal." Es war kein Padding. html holt seinen Grund aus var(--bg), und --bg animiert bereits. Stand background-color zusaetzlich in der Liste, lief der Grund von html der ohnehin laufenden Farbe ein zweites Mal hinterher - er war also immer ein Stueck zurueck gegenueber body, das den Wert direkt nimmt. Sichtbar wird dieser Rueckstand genau dort, wo html hinter body hervorschaut: oben und an den Raendern. Eine Ueberblendung auf eine Ueberblendung ergibt keinen weicheren Uebergang, sondern zwei verschiedene Zeiten fuer dieselbe Farbe. */ transition-property:--bg, --bg-2, --fg, --fg-dim, --line, --fg-text, --akzent, --azur, overflow; transition-duration:1.6s, 1.6s, 1.6s, 1.6s, 1.6s, 1.6s, 1.6s, 1.6s, 1ms; transition-timing-function:ease; transition-behavior:allow-discrete; } @media (prefers-reduced-motion: reduce){ html, html.lenis.lenis-autoToggle{ transition-duration:1ms, 1ms, 1ms, 1ms, 1ms, 1ms, 1ms, 1ms, 1ms; } } /* ⚠️ DER WEISSE RAHMEN HINTER DER SEITE. Chris am 24.08.: „ich seh auch, wenn man von hell auf dunkel macht, dass es hinten so einen Rahmen in Weiß noch gibt." Zwei Ursachen, beide hier: 1. Die Seite hat nie gesagt, dass sie dunkel ist. Ohne color-scheme geht der Browser von Hell aus und malt alles, was IHM gehört - der Bereich hinter der Seite beim Überziehen, die Bildlaufleisten - in Weiß. 2. Der Grund stand nur auf body. Was darüber hinausragt, gehört html, und das war durchsichtig. */ :root{ color-scheme:dark; /* Der Grundwert des Fliesstextes - genau das, was vorher als #cdd3da ueberall stand. Dunkel bleibt also unveraendert. */ --fg-text:#cdd3da; --azur:#6cc6ff; /* Als Zahlen, damit sich die Deckkraft davon ableiten laesst. */ --azur-teile:108,198,255; } html{ background:var(--bg) } /* Natural High · Der helle Modus --------------------------------------------------------------------------- Chris am 24.08.: „ich glaub wir brauchen noch ein Global hell/dunkel Modus, aktuell ist Default dark, aber auch einen hellen ermöglichen. Ich seh's grad aufm Balkon in der Sonne." Das ist der Grund, und er ist der beste: Ein Bildschirm in der Sonne zeigt von einem dunklen Bild fast nichts. Wer draußen atmen will, soll die Seite lesen können. ⭐ DUNKEL BLEIBT DAS ZUHAUSE. Natural High ist ein Abend, kein Arbeitswerkzeug - der glühende Ring auf Schwarz IST die Marke. Hell ist deshalb kein zweites Design, sondern dieselbe Seite bei Tageslicht: gleiche Abstände, gleiche Schrift, gleiche Ruhe. Nur die Werte kippen. ⚠️ ES GILT NUR ÜBER html.hell. Eine Regel mit html davor (0,1,1) schlägt :root (0,1,0) - deshalb greift sie über die Farbblöcke in den einzelnen Seiten, ohne dass eine davon angefasst werden muss. -------------------------------------------------------------------------- */ html.hell{ /* Kein reines Weiß. Papier hat einen Ton, und der nimmt dem Schirm die Härte - genau wie das Schwarz bei uns nie #000 ist. */ --bg:#f4f2ee; --bg-2:#eae7e1; /* Und keine schwarze Schrift: ein sehr dunkles Blaugrau, damit es mit dem Dunkelmodus verwandt bleibt statt wie ein fremdes Dokument zu wirken. */ --fg:#191d22; --fg-dim:#5c646d; --line:#d6d1c9; --akzent:#191d22; --akzent-fg:#f4f2ee; /* ⭐ DER SCHLEIER IST DER SCHLÜSSEL. Über hundert Stellen legen rgba(255,255,255,.x) über den Grund - ein heller Hauch auf Dunkel. Auf hellem Grund wäre er unsichtbar. Statt jede Stelle zu ändern, tragen sie ab jetzt diese Variable, und hier kippt sie von Weiß auf Schwarz. */ --schleier:0,0,0; --schleier-stark:0,0,0; /* Ein Schatten bleibt in beiden Welten dunkel - er ist ja Abwesenheit von Licht. Auf hellem Grund darf er nur leiser sein, sonst wirkt ein leichter Kasten wie festgenagelt. */ --schleier-schatten:60,56,50; /* Der Fliesstext im Hellen: dunkler als die Ueberschrift, damit die Rangfolge bleibt - aber weit genug von der Seite entfernt, um bequem zu lesen. Gemessen gegen #f4f2ee: Kontrast 11,2. */ --fg-text:#2b3138; /* Dasselbe Blau, nur tief genug fuer hellen Grund. Gemessen gegen #f4f2ee: Kontrast 4,9 statt 1,7. */ --azur:#0b74ad; --azur-teile:11,116,173; /* Im Hoehepunkt ihres Atems wird die Wortmarke heller - auf hellem Grund muss sie stattdessen dunkler werden, sonst verschwindet sie. */ --marke-hoch:var(--fg); color-scheme:light; } /* Dunkel ist die Voreinstellung - hier stehen nur die Werte, die es dafür braucht, damit dieselben Regeln in beiden Welten funktionieren. */ :root{ --schleier:255,255,255; --schleier-stark:255,255,255; --schleier-schatten:0,0,0; } /* ---- Der Umschalter ------------------------------------------------------- Er steht neben dem Naturklang: beide gehören zu dem, was man an der Seite EINSTELLT - Ton und Licht. ⚠️ pointer-events:auto ist Pflicht. Die Menüleiste lässt Berührungen absichtlich durch (`.menue{pointer-events:none}`), damit man durch sie hindurch scrollen kann. Wer das nicht zurückholt, ist für einen echten Finger unsichtbar - genau das ist dem Sprachumschalter am 22.08. passiert, und ein Skript-Klick hat es nicht gezeigt. -------------------------------------------------------------------------- */ .hell-knopf{ pointer-events:auto; align-self:flex-start; /* 44px Trefferfläche, das Maß, unter dem eine Fingerkuppe danebengeht. Der negative Rand zieht sie wieder auf ihren Platz, damit nichts verrutscht - dieselbe Rechnung wie beim Naturklang. */ width:2.75rem; height:2.75rem; padding:.65rem; margin:-.65rem -.5rem -.65rem -.35rem; display:grid; place-items:center; background:none; border:0; border-radius:50%; overflow:visible; box-shadow:none; -webkit-appearance:none; appearance:none; font:inherit; line-height:0; cursor:pointer; -webkit-tap-highlight-color:transparent; color:var(--fg-dim); opacity:.65; transition:color .5s ease, opacity .5s ease, background .45s ease; } /* Die Knöpfe der Seite tragen Farbblasen - hier nicht. */ .hell-knopf::before, .hell-knopf::after{content:none} .hell-knopf:hover{color:var(--fg); opacity:1} .hell-knopf:active{ background:radial-gradient(circle, rgba(var(--schleier),.11) 0%, rgba(var(--schleier),.05) 55%, transparent 72%); transition:background .12s ease; } .hell-knopf svg{ width:1.15rem; height:1.15rem; display:block; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; } /* ---- Was im Hellen anders sein muss als nur die Farbe --------------------- */ /* ⛔ HIER STAND html.hell .zeichen circle{ stroke-width:2.4 } Chris am 24.08.: „im hellen Modus ist der Kreis bisschen dicker, das geht gegen unsere Brand." Er hat recht - die Haarlinie IST die Marke, und ein Ring, der je nach Modus anders stark ist, ist zwei Ringe. Die Stärke kommt jetzt überall aus derselben Regel wie im Dunkeln. */ /* Die Deckkraft der Menüwörter war für Weiß-auf-Schwarz gewählt. Auf hellem Grund liest sich dasselbe Grau blasser - ein Tick fester. */ html.hell .menue a{ color:#4b535c } html.hell .menue a[aria-current]{ color:var(--fg) } /* ---- Die Bildlaufleiste ---------------------------------------------------- Chris am 24.08.: „da ist ein abgerundetes Schwarz, und hinten ist weiß, nicht abgerundet." Genau das ist sie: der Griff dunkel und rund, die Bahn dahinter hell und eckig. Sie gehört dem Browser, nicht der Seite - und er malt sie nach seiner eigenen Vorstellung, sobald der Grund kippt. Von innen sah sie aus wie ein Rahmen um die Seite. Ab jetzt malen wir sie selbst, in beiden Welten. Das räumt nebenbei auch den hellen Streifen weg, der im Dunkelmodus rechts stand. Sie ist schmal und still: Auf einer Seite, die vom Atem lebt, soll kein Balken mitlaufen und um Aufmerksamkeit bitten. */ html{ scrollbar-color:rgba(var(--schleier),.18) transparent; scrollbar-width:thin } /* ⚠️ 10px, nicht 11. Die alte Leiste in hauch.css war 10 breit; ein Pixel mehr macht die Seite ein Pixel schmaler, und alles mittig Gesetzte rutscht mit. Chris am 24.08.: "das Padding hat sich verschoben." */ ::-webkit-scrollbar{ width:10px; height:10px; background:transparent } ::-webkit-scrollbar-track{ background:transparent } ::-webkit-scrollbar-thumb{ background:rgba(var(--schleier),.18); border-radius:99px; /* Der Rand aus dem Grund macht ihn schmaler, ohne die Trefferfläche zu verkleinern - greifen lässt er sich weiter über die volle Breite. */ border:2px solid transparent; /* wie vorher: 2, nicht 3 */ background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:rgba(var(--schleier),.3); background-clip:content-box } ::-webkit-scrollbar-corner{ background:transparent } /* ---- Die Silhouette in der Reise ------------------------------------------ Chris am 24.08.: „im hellen Modus bei der Animation gerne die weiße Silhouette in Schwarz bitte." Die Datei ist weiß auf Schwarz und liegt mit mix-blend-mode:screen auf der Seite. Screen rechnet Schwarz zu nichts - im Dunkeln bleibt genau die Figur stehen. Auf hellem Grund rechnet dasselbe Screen aber ALLES zu Weiß: Die Figur verschwand vollständig. invert dreht die Datei um (schwarze Figur auf Weiß), multiply rechnet dann das Weiß weg und lässt die Figur stehen - dieselbe Mechanik, spiegelverkehrt. Kein zweites Bild nötig, das beim nächsten Export auseinanderlaufen könnte. */ html.hell .reise-figur{ filter:invert(1); mix-blend-mode:multiply; } /* Schwarz auf Hell trägt kräftiger als Weiß auf Dunkel - bei denselben 17 % stünde sie im Hellen zu deutlich da. „Nur leicht zu sehen, das ist der Schlüssel", Chris am 21.08. */ html.hell .reise.offen .reise-figur{ opacity:.12 } /* ---- Schatten, die nur im Dunkeln Sinn ergeben ---------------------------- Die Knopfschriften tragen `text-shadow:0 1px 12px rgba(10,4,24,.6)` - einen dunklen Weichzeichner. Unter weißer Schrift auf dunklem Grund setzt er sie ab. Unter dunkler Schrift auf hellem Grund legt er einen Schmier um jeden Buchstaben, weil Schatten und Schrift dieselbe Richtung haben. Ein Schatten trennt nur, wenn er dunkler ist als beides. Auf Hell tut er das nicht mehr - also weg. */ html.hell button, html.hell a.knopf, html.hell .tor-los, html.hell .knopf{ text-shadow:none } /* Und die Glut unter den Knöpfen bleibt, wird aber leiser: Auf Schwarz ist sie ein Glimmen, auf Hellbeige würde dieselbe Sättigung wie Farbe wirken - und eine gefüllte Farbfläche gehört hier nicht hin. */ html.hell button::before, html.hell button::after, html.hell a.knopf::before, html.hell a.knopf::after, html.hell .tor-los::before, html.hell .tor-los::after{ opacity:calc(var(--cta-farbe,0) * .5) } /* ---- Die Fassung im Fuß --------------------------------------------------- Chris am 24.08.: „ganz unten im Footer naturalhigh.app v1.3 - aber v1.3 ganz klein und dünn und weniger opac." Sie steht hinter dem Namen und nicht darunter: Eine eigene Zeile machte aus einer Nebensache eine Angabe. So liest man den Namen und nimmt die Zahl nur mit. ⚠️ Warum die Regel HIER steht und nicht in einer eigenen Datei: hell.css ist die einzige, die jede der 21 Seiten lädt. Eine zweite Datei wäre ein Link mehr in 21 Köpfen; dieselbe Regel 21-mal einzutragen wäre genau das Muster, das uns heute 196 feste Farbwerte eingebracht hat. -------------------------------------------------------------------------- */ .fuss-fassung{ font-size:.62em; /* relativ zum Fuß, nicht absolut - er ist auf den Seiten verschieden groß */ font-weight:200; /* Chris am 24.08.: "nicht so weit Letter-Spacing." Der Fuss sperrt seine Schrift; eine so kleine Zahl faellt dadurch auseinander. */ letter-spacing:0; opacity:.38; margin-left:.15em; /* Sie soll nie umbrechen und nie allein in einer Zeile stehen. */ white-space:nowrap; }