/* ========================================================================== Lazy Habits Blocks — gemeinsame Grundlage. Hier stehen nur blockuebergreifende Hilfen und die Bewegungsschicht. Die Design-Tokens liegen im Theme (tokens.css), weil ein Plugin deaktivierbar ist und Kopf, Fuss und Wortmarke die Variablen in jedem Fall brauchen. ⚠ ALLES HIER LIEGT IN EINER KASKADENSCHICHT, und das ist der Kern: WordPress bettet kleine Block-Stylesheets inline ein, und zwar VOR den verlinkten Dateien. Gemessen auf der About-Seite: Block-CSS in den Zeilen 41 bis 204, base.css erst in 239. Jede Blockregel, die mit einer Klasse hier gleich spezifisch kollidiert — .lh-container, .lh-btn, .lh-eyebrow, .lh-heading, .lh-display — verlor dadurch lautlos. Kein Fehler, keine Warnung, die Regel greift einfach nicht. Abhaengigkeiten helfen nicht: sie sind gesetzt, aber WordPress druckt die eingebetteten Stile an der Kette vorbei. Ungeschichtete Regeln schlagen geschichtete, unabhaengig von der Reihenfolge. Weil die Bloecke ungeschichtet bleiben, gewinnen sie jetzt immer — ohne dass jemand Spezifitaeten hochzuechten muss. Wer hier etwas ergaenzt: es gehoert INNERHALB des Layer-Blocks. ========================================================================== */ @layer lh-base { /* --- Layoutgrundlage ---------------------------------------------------- */ .lh-section{ width:100%; padding-block:var(--lh-space-96); padding-inline:var(--lh-gutter); } .lh-section--flush{padding-block:0;padding-inline:0} .lh-container{ width:100%; max-width:var(--lh-container); margin-inline:auto; } .lh-container--wide{max-width:var(--lh-container-wide)} .lh-container--prose{max-width:var(--lh-measure)} /* --- Schaltflaechen ------------------------------------------------------ */ .lh-btn{ display:inline-flex;align-items:center;justify-content:center; gap:var(--lh-space-8); min-height:44px; /* Fingerkuppe, nicht Mauszeiger */ padding:13px var(--lh-space-24); font-family:var(--lh-font-ui); font-size:var(--lh-text-16);font-weight:600; letter-spacing:-0.32px;text-transform:uppercase; border:1px solid var(--lh-paper); color:var(--lh-paper); background:transparent; transition:color .15s ease,background-color .15s ease,border-color .15s ease; } .lh-btn:hover{color:var(--lh-accent);border-color:var(--lh-accent)} .lh-btn--accent{background:var(--lh-accent);border-color:var(--lh-accent);color:var(--lh-white)} .lh-btn--accent:hover{color:var(--lh-white);filter:brightness(1.15)} .lh-btn--paper{background:var(--lh-paper);color:var(--lh-black)} .lh-btn--paper:hover{background:var(--lh-accent);border-color:var(--lh-accent);color:var(--lh-white)} .lh-btn--full{width:100%} /* --- Typografie ---------------------------------------------------------- */ .lh-display{ margin:0;font-family:var(--lh-font-display);font-weight:600; font-size:var(--lh-text-192);line-height:.8;letter-spacing:-.04em; color:var(--lh-white);text-wrap:balance; } /* Gleiche Sache wie bei .lh-heading, eine Stufe groesser: "ABOUT" ist bei der Mindestgroesse von 115px 362px breit, der Container bei 360px Geraet nur 320px. Gemessen, nicht geschaetzt. */ @media (max-width:380px){ .lh-display{ font-size:clamp(72px, 26vw, 115px) } } .lh-heading{ margin:0;font-family:var(--lh-font-display);font-weight:600; font-size:var(--lh-text-96);line-height:1;letter-spacing:-.05em; color:var(--lh-white);text-wrap:balance; } /* Unter 380px laeuft "DISCOGRAPHY" aus der Seite: elf Zeichen bei der Mindestgroesse von 58px brauchen rund 395px, das Geraet hat 360 minus Rand. Ein einzelnes langes Wort kann nicht umbrechen, also muss es kleiner werden. Der Deckel liegt bei 58px, damit sich oberhalb dieser Breite nichts aendert. */ @media (max-width:380px){ .lh-heading{ font-size:clamp(38px, 12vw, 58px) } } .lh-eyebrow{ margin:0;font-family:var(--lh-font-ui);font-size:var(--lh-text-16); font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--lh-accent); } .lh-accent{color:var(--lh-accent)} /* ========================================================================== Bewegungsschicht. Aus der statischen Vorlage uebernommen. Geaendert sind nur die Selektoren: statt dtc-Hashklassen zaehlen jetzt die data-Attribute, die die Bloecke selbst setzen. ========================================================================== */ @media (prefers-reduced-motion:no-preference){ [data-lh-anim].anim{ opacity:0;transform:translateY(28px); transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 90ms); } h1[data-lh-anim].anim,h2[data-lh-anim].anim, [data-lh-anim].anim > .lh-display,[data-lh-anim].anim > .lh-heading{ transform:translateY(56px) skewY(1.2deg); } [data-lh-anim][data-lh-anim-from="left"].anim{transform:translateX(-36px)} /* Zuletzt, damit die Aufloesung den gleichrangigen Ausgangszustaenden oben den Vortritt nimmt — sonst bleiben Elemente haengen. */ [data-lh-anim].anim.in{opacity:1;transform:none} /* Schwebende Kacheln, Bewegung ueber die eigenstaendige translate- Eigenschaft, damit sie der Einblendung nie ins Gehege kommt. */ .lh-lift{ transition-property:opacity,transform,translate,box-shadow; transition-duration:.7s,.8s,.3s,.3s; transition-timing-function:ease,cubic-bezier(.16,1,.3,1),cubic-bezier(.16,1,.3,1),ease; transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s; } .lh-lift:hover{translate:0 -6px;box-shadow:0 18px 48px var(--lh-accent-glow)} @keyframes lhHeroZoom{from{transform:scale(1.06)}to{transform:scale(1)}} @keyframes lhRiseIn{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}} @keyframes lhVinylSpin{to{transform:rotate(360deg)}} } /* ========================================================================== Akzent-Wisch beim Scrollen. Portiert aus dem Sunrise-Theme. Die hervorgehobenen Woerter beginnen gedaempft und werden wortweise in die Akzentfarbe gewischt, waehrend der Absatz ins Bild scrollt. Reines CSS ueber animation-timeline:view(), kein JavaScript. Ohne Browserunterstuetzung oder bei prefers-reduced-motion bleibt die Akzentfarbe statisch stehen — also genau das, was ohne den Effekt zu sehen waere. ABWEICHUNG VON SUNRISE: dort laeuft der Wisch auf view(), also auf der Sichtbarkeit des Absatzes. Das setzt voraus, dass der Absatz von unten ins Bild kommt. Hier steht er weit oben, und wie weit er beim Laden schon "abgedeckt" ist, haengt an der Fensterhoehe — bei 900px waren die ersten zwei Woerter schon durch, bevor jemand gescrollt hat. Deshalb scroll(root block): die Zeitachse ist der Seitenscroll selbst. Bei Scrollstand 0 steht der Wisch garantiert am Anfang, unabhaengig von der Fensterhoehe. ⚠ FALLSTRICK: Eine view()-Zeitachse misst gegen den naechsten Vorfahren, der ein Scroll-Container ist. Jeder Vorfahr mit overflow:hidden|auto|scroll wird dazu und FRIERT den Wisch ein. Wo geclippt werden muss, gehoert overflow:clip hin — das clippt, ohne einen Scroll-Container zu erzeugen. Gilt fuer scroll(root) nicht, dort ist der Bezug immer das Dokument. ========================================================================== */ .lh-reveal{ --_lh-base:var(--lh-reveal-base, rgb(245 245 245 / .35)); --_lh-hi: var(--lh-reveal-hi, var(--lh-accent)); color:var(--_lh-hi); /* Rueckfall: statischer Akzent */ /* Die Phrase haelt zusammen. Der Wisch packt jedes Wort in eine eigene Spanne, damit die Woerter nacheinander umschlagen koennen — dadurch durfte der Zeilenumbruch mitten durch "lazy habits" laufen. Der Name der Band ueber zwei Zeilen zerrissen ist das Gegenteil dessen, wofuer die Hervorhebung da ist. nowrap auf der aeusseren Spanne, nicht auf den einzelnen Woertern: die Phrase rueckt als Ganzes in die naechste Zeile, statt zu brechen. */ white-space:nowrap; } @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ /* ⚠ Nur Woerter, die beim Laden UNTER der Bildschirmkante stehen, werden gewischt — das Attribut setzt anim.js. Alles, was schon sichtbar ist, bleibt beim statischen Akzent aus .lh-reveal. Vorher lief der Wisch ab Scrollstand 0, der sichtbare Absatz stand deshalb beim Laden grau da. */ .lh-reveal__w[data-lh-wipe], .lh-reveal__w[data-lh-wipe-in]{ /* Linke Haelfte Akzent, rechte Haelfte gedaempft; ein 200 Prozent breiter Verlauf wandert von "ganz gedaempft" nach "ganz Akzent", beschnitten auf die Buchstaben. Jedes Wort bekommt seinen eigenen Abschnitt der Zeitachse, per animation-range inline gesetzt. */ background-image:linear-gradient(90deg, var(--_lh-hi) 50%, var(--_lh-base) 50%); background-size:200% 100%; background-position:100% 0; background-repeat:no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; /* Safari nimmt das vor color */ animation:lhAccentWipe linear both; } /* Unter der Kante: der Scrollweg treibt den Wisch. */ .lh-reveal__w[data-lh-wipe]{ animation-timeline:scroll(root block) } /* Im ersten Bild: es gibt keinen Scrollweg, an dem der Wisch haengen koennte — der Absatz steht ja schon da. Hier laeuft er einmal auf der Uhr, gestaffelt in Lesereihenfolge, und bleibt danach stehen. */ .lh-reveal__w[data-lh-wipe-in]{ animation-duration:.5s } } @keyframes lhAccentWipe{ to{ background-position:0 0 } } } }