/* Theme Name: Amaya Child Template: amaya Version: 1.12 Text Domain: amayachild */ /* ========================================================================== Transparenter Header ueber dem Hero -------------------------------------------------------------------------- Kontaktzeile (Topbar) und Logoleiste bekommen keine eigene Hintergrund- flaeche mehr, sondern liegen direkt auf dem Hero-Bild (Vorbild: Picante). Greift nur auf Seiten, deren Inhalt mit einem Hero-Block beginnt - alle anderen Seiten behalten die normalen Balken. ========================================================================== */ :root { /* Startwerte fuer Kontaktzeile und Logoleiste. js/hero-header.js misst beide nach dem Parsen und ueberschreibt sie - diese Werte gelten also nur fuer das allererste Rendern und wenn kein JavaScript laeuft. Sie sollten der aktuellen Darstellung entsprechen, damit nichts springt. 42px ist die min-height, die das Theme der .topbar-content gibt; 177px ist die Logoleiste ab 1200px Breite, wo der Schriftzug seine volle Breite von 1200px erreicht hat. Darunter skaliert das Logo mit der Viewport-Breite (schmaler: 141px bei 992px Fensterbreite, rund 100px in der Schmalansicht), das kann nur das Skript abdecken. */ --pp-topbar-height: 42px; --pp-header-height: 177px; /* Markenrot der Pasta Party, die Farbe des Logos. Bewusst NICHT --pp-accent: diesen Namen belegt css/pretix-widget.css bereits mit dem Kupfer #bd9576, und die Datei setzt ihn auf - eine zweite Deklaration hier auf :root wuerde von ihr ueberschrieben. Die Akzentfarbe des Themes (Customizer > Farben) bleibt das Kupfer; rot werden nur die Stellen, die im Abschnitt "Markenfarbe" weiter unten aufgezaehlt sind. */ --pp-brand: #e83338; /* Hoehe des gestapelten Logos in der Schmalansicht (siehe Abschnitt "Logo"). Waechst mit der Fensterbreite mit, damit das Logo nicht auf jeder Breite gleich klein wirkt: 56px auf dem kleinsten Telefon, ab rund 370px Breite die vollen 104px. Das Logo ist zweieinviertel mal so breit wie hoch und nimmt damit gut die halbe Fensterbreite ein. Die 104px sind ab 370px Breite erreicht - auf den meisten Telefonen also gleich zu Beginn. Wer das Logo dort weiter vergroessern will, muss den dritten Wert anheben, nicht den mittleren. Die Werte lagen vorher bei 48px bis 72px. Mehr war nicht moeglich, solange links und rechts je 72px fuer Menue- und Suchsymbol reserviert waren - auf einem 320px breiten Telefon blieben dem Logo damit 128px, und bei 2,25:1 sind das eben jene 56px Hoehe. Seit der Burger weg ist (Abschnitt "Kopfzeile auf dem Telefon"), steht die ganze Breite zur Verfuegung. */ --pp-logo-narrow-height: clamp(56px, 28vw, 104px); --pp-header-stack: calc(var(--pp-topbar-height) + var(--pp-header-height)); /* Aufteilung des Platzes, der im Hero uebrig bleibt, wenn Logo, Textblock und Button untergebracht sind. Der Rest (hier 48%) geht unter den Button. Die Summe aus oben und Mitte bestimmt, wo der Titel steht - wer nur zwischen den beiden umverteilt, verschiebt das Logo und laesst den Titel stehen. hero-header.js liest die Anteile und rechnet daraus die Positionen aus - so sammelt sich der Inhalt auf jeder Fensterhoehe in der Mitte, statt dass das Logo oben klebt und der Text nach unten wegrutscht. */ --pp-hero-space-top: .40; /* ueber dem Logo */ --pp-hero-space-mid: .12; /* zwischen Logo und Titel */ /* Beides setzt hero-header.js aus den Anteilen oben. Ohne JavaScript bleiben die Startwerte stehen: Logo dort, wo das Theme es setzt, und der Textblock direkt unter dem Header - also die Darstellung von vorher. */ --pp-hero-logo-shift: 0px; --pp-hero-content-offset: 0px; /* Abstand zwischen Hero-Text und Button. Den Rest rechnet hero-header.js aus: Der Text ist mittig im Hero, der Button haengt am unteren Rand - ohne Messung waere der Abstand je nach Fensterhoehe mal riesig, mal negativ. */ --pp-hero-cta-gap: 32px; /* Wie weit der Button vom unteren Hero-Rand hochgezogen wird. Startwert, wird vom Skript ueberschrieben. */ --pp-hero-cta-offset: 120px; /* Staerke der beiden Verlaeufe, die ueber dem Hero-Bild liegen. 0 = gar nicht, 1 = schwarz. Beide sind auf Wunsch abgeschaltet: Das neue Aufmacherbild ist hell und flaechig, Titel und Text stehen jetzt in Markenrot statt in Weiss - die Abdunklung hat daran nichts mehr zu verbessern und nimmt dem Motiv nur die Leuchtkraft. Die Regeln bleiben stehen, damit ein Bildwechsel die Abdunklung ohne Suche nach den Verlaeufen zurueckholen kann. Frueher standen hier .12 oben und .28 unten fuer den Hero und .55 fuer die Kopfzeile. */ --pp-header-dim: 0; /* Verlauf unter Kontaktzeile und Logoleiste */ --pp-hero-dim-top: 0; --pp-hero-dim-bottom: 0; } body:has(.entry-content > .section-hero:first-child) #page.site-wrap { position: relative; } /* Topbar und Header aus dem Textfluss nehmen, damit der Hero ganz oben beginnt und beide Leisten darauf liegen. */ body:has(.entry-content > .section-hero:first-child) .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1001; background: transparent; } /* translateY statt padding: Ein Innenabstand wuerde die Hoehe des Headers aendern, und genau die misst hero-header.js fuer --pp-header-height - die Verschiebung wuerde sich also selbst weiterschieben. */ body:has(.entry-content > .section-hero:first-child) #header { position: absolute; top: var(--pp-topbar-height); left: 0; right: 0; z-index: 1000; background: transparent; box-shadow: none; transform: translateY(var(--pp-hero-logo-shift)); } body:has(.entry-content > .section-hero:first-child) #header-regular, body:has(.entry-content > .section-hero:first-child) #header-responsive { background: transparent; } /* Weicher Verlauf, damit Kontaktzeile und Logo auf hellen Bildstellen lesbar bleiben. Staerke ueber --pp-header-dim, derzeit 0. */ body:has(.entry-content > .section-hero:first-child) #page.site-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--pp-header-stack) + var(--pp-hero-logo-shift) + 80px); background: linear-gradient(to bottom, rgba(10, 10, 20, var(--pp-header-dim)), rgba(10, 10, 20, 0)); pointer-events: none; z-index: 999; } /* Alle Header-Inhalte hell, weil sie jetzt auf dem Bild stehen. */ body:has(.entry-content > .section-hero:first-child) .topbar-content, body:has(.entry-content > .section-hero:first-child) .topbar-content a, body:has(.entry-content > .section-hero:first-child) .topbar-content i, body:has(.entry-content > .section-hero:first-child) #header .header-wrap i { color: #fff; } body:has(.entry-content > .section-hero:first-child) #header #toggle div.bar, body:has(.entry-content > .section-hero:first-child) #header #toggle div.bar:before, body:has(.entry-content > .section-hero:first-child) #header #toggle div.bar:after { background-color: #fff; } /* Hero-Inhalt unterhalb des Headers. Statt ihn in der Restflaeche zu zentrieren (dann waechst auf hohen Fenstern nur der Abstand zum Logo), beginnt er an der Stelle, die hero-header.js aus den Anteilen oben errechnet. Die Flaeche selbst bleibt unveraendert - die seitliche Vertikalschrift ist absolut darin positioniert und soll nicht mitwandern. */ body:has(.entry-content > .section-hero:first-child) .entry-content > .section-hero:first-child .hero-content-wrap { top: var(--pp-header-stack); min-height: calc(100% - var(--pp-header-stack)); align-items: flex-start; padding-top: var(--pp-hero-content-offset); /* Ueber die Abdunklung weiter unten. Ohne die Angabe legt sie sich als spaeteres Element ueber den Text - beide sind positioniert, und dann entscheidet die Reihenfolge im Dokument. Die seitliche Vertikalschrift liegt in diesem Kasten und kommt damit mit nach vorn. */ z-index: 2; } /* Hero exakt auf Bildschirmhoehe. Nicht nur min-height: das Bild behaelt sein Seitenverhaeltnis und wird auf breiten Monitoren sonst deutlich hoeher als der Viewport. svh statt vh, damit die Adressleiste auf dem Smartphone nichts abschneidet. */ body:has(.entry-content > .section-hero:first-child) .entry-content > .section-hero:first-child { height: 100vh; height: 100svh; } /* blocks.js schreibt die selbst gemessene Hoehe als Inline-Style ins Bild - nur mit !important behaelt die Kappung oben die Oberhand. object-fit: cover aus dem Theme sorgt dafuer, dass dabei beschnitten und nicht verzerrt wird. */ body:has(.entry-content > .section-hero:first-child) .entry-content > .section-hero:first-child .hero-image { height: 100% !important; min-height: 0 !important; } /* Abdunklung des Hero-Bildes. Als eigene Flaeche ueber dem Bild und nicht als filter: brightness() auf dem Bild selbst: Ein Filter nimmt dem Motiv auch Kontrast und Farbe, der Verlauf legt nur Schwarz darueber. z-index: 1 hebt sie ueber das Bild - das ist position: relative und liegt sonst davor. Der Button unter dem Hero hat bereits z-index: 2 und bleibt damit ebenfalls vorn. */ body:has(.entry-content > .section-hero:first-child) .entry-content > .section-hero:first-child::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(10, 10, 20, var(--pp-hero-dim-top)), rgba(10, 10, 20, var(--pp-hero-dim-bottom))); pointer-events: none; z-index: 1; } /* Den CTA-Button unter dem Hero optisch in den Hero holen. Er bleibt im Textfluss (der Hero-Block nimmt keine inneren Bloecke auf), wird aber per negativem margin-top hochgezogen; das gleich grosse margin-bottom haelt alles darunter an seiner alten Position. */ body:has(.entry-content > .section-hero:first-child) .entry-content > .section-hero:first-child + .cta-button-hero { position: relative; z-index: 2; margin-top: calc(-1 * var(--pp-hero-cta-offset)); margin-bottom: var(--pp-hero-cta-offset); } /* Der Hero-Button traegt die Schriftgroesse "Medium" (20px), das Theme gibt allen Block-Buttons aber die 7px Innenabstand, die zu seinen 0.7rem kleinen Standardbuttons gehoeren - oben und unten wirkt der Button dadurch angeschnitten. line-height bleibt wie vom Theme geerbt, damit sich die Zeilenhoehe nicht aendert; nur der Abstand darueber und darunter waechst. */ .cta-button-hero .wp-block-button__link { padding-top: 15px; padding-bottom: 15px; } /* Eigene Hintergrundfarbe fuer den Hero-Button. Die Buttonfarbe kommt sonst aus dem Customizer (Buttons > Hintergrund) und gilt fuer jeden Button der Seite - hier soll nur dieser eine abweichen. Die Auswahl ist bewusst eine Klasse spezifischer als die des Themes (.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background)): Die Customizer-Farben haengen als inline-CSS an einer zweiten Einbindung dieser Datei und stehen damit hinter ihr - bei gleicher Spezifitaet wuerden sie gewinnen. Bewusst ohne :hover: Beim Ueberfahren soll der Button golden werden wie alle anderen. Die Theme-Regel dafuer traegt ein :hover mehr und ist damit von sich aus spezifischer als die Zeile hier - der Wechsel passiert also ohne eigenes Zutun, und wenn die Hover-Farbe im Customizer geaendert wird, geht dieser Button mit. border-color wandert mit, damit die vom Theme gesetzte alte Randfarbe nicht stehen bleibt, falls der Button je einen sichtbaren Rand bekommt. Der Button auf der Startseite traegt die Farbe zusaetzlich als Inline-Style aus dem Block-Editor und wird von dort gesteuert; diese Regel greift also erst, wenn die Farbe im Editor wieder auf "Standard" steht. Beide zeigen seit der Umstellung auf dasselbe Rot. */ .entry-content .cta-button-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--pp-brand); border-color: var(--pp-brand); } /* ========================================================================== Hero-Titel auf sehr schmalen Fenstern -------------------------------------------------------------------------- Die Schriftgroesse des Hero-Titels stellt das Theme (Customizer > Typografie) als mitwachsende Groesse ein. Die Regel dazu steht als Inline-CSS im Kopf der Seite: @media screen and (min-width: 320px) { .hero-title { font-size: calc(20.8636px + 4.10511vw) !important } } Sie laeuft von 34px bei 320px Fensterbreite auf 70px bei 1200px hoch. Die Bedingung min-width: 320px ist der Haken: Darunter greift sie nicht mehr, und es bleibt der Grundwert von 4.125em stehen - also 70px, die Groesse fuer grosse Monitore. Auf einem 300px breiten Fenster bricht der Titel dann mitten im Wort um ("Past" / "a,"). Betroffen sind Geraete unter 320px (Galaxy Fold und aehnliche) und jedes Telefon, auf dem die Seite vergroessert dargestellt wird - Zoom verkleinert die gemeldete Fensterbreite. Die Regel hier setzt dieselbe Formel unterhalb von 320px fort. Damit gibt es an der Grenze keinen Sprung: Bei genau 320px rechnen beide 34px aus. !important ist noetig, weil die Regel des Themes es ebenfalls traegt und das vorangestellte body sonst nicht reichen wuerde; das body wiederum hebt die Auswahl ueber die des Themes, weil dessen Inline-CSS hinter dieser Datei steht. ========================================================================== */ @media screen and (max-width: 319px) { body .hero-title { font-size: calc(20.8636px + 4.10511vw) !important; } } /* ========================================================================== Kopfzeile auf dem Telefon -------------------------------------------------------------------------- Unterhalb von 960px zeigt das Theme die schmale Kopfzeile: links das Burger-Symbol, in der Mitte das Logo, rechts ein gleich breites Feld fuer das Suchsymbol. Dem Burger ist kein Menue zugewiesen - das Overlay, das er oeffnet (#navi-overlay), ist leer. Er wird deshalb ausgeblendet, statt auf eine leere Flaeche zu fuehren. Ausgeblendet wird nur das Symbol, nicht die Spalte darum: Weil links und rechts dieselbe Breite haben, bleibt das Logo damit in der Mitte stehen. ACHTUNG: Sobald unter Design > Menues ein Menue fuer die mobile Navigation hinterlegt wird, gehoert diese Regel geloescht - sonst ist das Menue auf dem Telefon nicht mehr erreichbar. ========================================================================== */ #header-responsive .toggle-wrap { display: none; } /* Auf dem Telefon werden die beiden 72px breiten Spalten links und rechts zusaetzlich auf null gezogen, damit das gestapelte Logo die ganze Breite nutzen kann (siehe --pp-logo-narrow-height). Beide zusammen, damit das Logo mittig bleibt. Nur bis 599px: Darueber steht wieder der breite Schriftzug, und der ist vom Theme auf die Breite abzueglich dieser 192px ausgelegt. Die Auswahl wiederholt die des Themes (#header-responsive .header-left), die eine ID traegt - ohne die ID waere die Regel hier schwaecher. */ @media only screen and (max-width: 599px) { #header-responsive .header-left, #header-responsive .header-right { flex-basis: 0; } } /* ========================================================================== Logo -------------------------------------------------------------------------- Das Logo ist ein sehr breiter Schriftzug (2560 x 276, Verhaeltnis rund 9:1). In der Logoleiste bekommt es die Breite des Inhaltsbereichs minus 192px fuer Menue- und Suchsymbol - auf dem Telefon bleiben davon knapp 180px Breite und damit gerade einmal 20px Hoehe uebrig. Der Schriftzug ist dort nicht mehr zu lesen. Ab 600px Breite ist er ueber 44px hoch und steht deshalb wie gehabt. Darunter tritt die zweizeilige Fassung an seine Stelle (images/pasta-party-logo- stacked.png, 1080 x 480, Verhaeltnis 2,25:1) - dasselbe Logo ohne Unterzeile, auf zwei Zeilen gebrochen. Getauscht wird ueber content: Das bleibt mit seinem alt-Text im Dokument, nur sein Bildinhalt wird ersetzt. Eine zweite Datei per display: none einzublenden wuerde den Namen der Seite aus der Vorlesereihenfolge nehmen. Die Datei liegt bewusst im Child-Theme und nicht in der Mediathek: Sie gehoert zum Stylesheet, das sie aufruft, und geht bei einem Aufraeumen der Mediathek nicht verloren. Es ist die rot eingefaerbte Fassung von Paty_Party_Logo_bw_no_sub.png - die Vorlage liegt schwarz vor. ========================================================================== */ @media only screen and (max-width: 599px) { #header .logoimage { content: url("images/pasta-party-logo-stacked.png"); /* Beide Masse werden gesetzt, weil das Seitenverhaeltnis der ersetzten Datei ein anderes ist als das der width/height-Attribute im HTML. 2.25 ist 1080/480. object-fit faengt den Fall ab, dass ein Browser content auf nicht kennt: Dann steht dort weiter der breite Schriftzug, aber unverzerrt statt in die Hoehe gequetscht. */ height: var(--pp-logo-narrow-height); width: calc(var(--pp-logo-narrow-height) * 2.25); max-width: 100%; object-fit: contain; } } /* Das Logo im Footer (VivArt_Society_Logo.png) liegt als rote Datei vor und soll dort schwarz stehen - der Footer hat einen weissen Hintergrund. brightness(0) zieht alle Farbwerte auf 0 und laesst die Transparenz unangetastet: Die weichen Kanten der Schrift bleiben also erhalten. Betrifft nur den Footer. Das Logo in der Kopfzeile liegt bereits im Markenrot vor und wird nirgends umgefaerbt. Sauberer waere eine schwarze Fassung der Datei; solange die rote im Customizer hinterlegt ist, faerbt diese Regel sie ein. */ .footer-logo img { filter: brightness(0); } /* ========================================================================== Medien-Text-Bloecke stapeln bereits unterhalb von 768px -------------------------------------------------------------------------- Betrifft den Abschnitt "Sei dabei" (Poster links, pretix-Widget rechts). Er ist ein Medien-Text-Block (wp-block-media-text) und stellt beide Seiten je auf die Haelfte der Breite. Der Block traegt die Einstellung "Auf Mobil- geraeten stapeln", WordPress loest sie aber erst unterhalb von 600px ein (wp-includes/blocks/media-text/style.min.css). Zwischen 600px und 767px bleiben damit zwei Spalten von rund 300 bis 380px stehen, und davon braucht das Widget mehr: Der Produktname bricht in zwei Zeilen, Datum und Button stehen gedraengt darunter. Gestapelt bekommt es die ganze Breite - so wie auf dem Telefon. 767px ist die Grenze, an der auch das Theme auf die schmale Darstellung umstellt (amaya/style.css, amaya/css/blocks.css). Der Abschnitt klappt damit gemeinsam mit dem Rest der Seite um und nicht an einer eigenen Stelle. Die drei Regeln sind die von WordPress fuer unterhalb 600px, nur mit dieser Grenze. Sie greifen weiterhin nur bei Bloecken mit der Einstellung "Auf Mobilgeraeten stapeln" - ein Medien-Text-Block ohne sie bleibt bis zur kleinsten Breite zweispaltig. Jede Regel beginnt mit body: Das Block-Stylesheet steht als Inline-CSS im Kopf der Seite und damit vor dieser Datei, und .wp-block-media-text.has- media-on-the-right (Bild rechts) ist genauso spezifisch wie die Auswahl hier. !important deckt den Fall ab, dass am Block eine eigene Spaltenbreite eingestellt ist - die schreibt WordPress als Inline-Style an den Block. Aus demselben Grund traegt auch die WordPress-Regel eines. ========================================================================== */ @media only screen and (max-width: 767px) { body .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100% !important; } body .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media { grid-column: 1; grid-row: 1; } body .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { grid-column: 1; grid-row: 2; } } /* ========================================================================== Markenfarbe -------------------------------------------------------------------------- Die Stellen, die laut Abstimmung das Rot des Logos tragen sollen. Alles andere - Links, Hover-Farben, Rahmen - bleibt beim Kupfer #bd9576 aus dem Customizer (Farben > Akzentfarbe). Wer die ganze Seite auf Rot stellen will, aendert dort die Akzentfarbe; dieser Abschnitt wird dann ueberfluessig. Jede Regel beginnt mit body. Die Farben des Themes stehen als Inline-CSS im Kopf der Seite und damit hinter dieser Datei - bei gleicher Spezifitaet wuerden sie gewinnen. Das zusaetzliche body hebt die Regeln eine Stufe darueber, ohne an die Auswahl selbst zu ruehren. ========================================================================== */ /* Ueberschrift und Zeile darunter im Hero. !important, weil die Regel des Themes fuer .content-white-pluscolor .hero-title selbst eines traegt. */ body .content-white-pluscolor .hero-title, body .content-white .hero-title { color: var(--pp-brand) !important; } body .content-white-pluscolor .hero-content .hero-text, body .content-white .hero-content .hero-text { color: var(--pp-brand); } /* Die kleine Zeile ueber den Ueberschriften ("Weil wir Pasta lieben", "Was auf den Tisch kommt"). */ body .subtitle-above { color: var(--pp-brand); } /* Der kurze Strich unter den Ueberschriften. Die drei Auswahlen sind die des Themes: als eigener Block, im Hero und in den Inhaltsboxen. */ body .divider-block, body .hero-divider, body .contentboxes-divider { background-color: var(--pp-brand); } /* Die hervorgehobene Karte der Speisekarte ("Aus unserer Kueche"), bisher fast schwarz. border-color muss mit: Das Theme legt um die Karte einen 6px breiten Rahmen in der Hintergrundfarbe. Die Schrift darin setzt das Theme bereits auf Weiss. */ body .menu-categories .featured2 { background-color: var(--pp-brand); border-color: var(--pp-brand); } /* ========================================================================== Weichere Hover-Uebergaenge -------------------------------------------------------------------------- Das Theme animiert seine Hover-Wechsel bereits, aber mit 0.1s - bei 100ms ist der Farbwechsel praktisch mit dem Mauszeiger fertig und wirkt wie ein harter Umschlag. Hier wird nur die Dauer hochgesetzt. Bewusst nur transition-duration und kein komplettes transition: So bleiben die Eigenschaftsliste und die Beschleunigungskurve des Themes stehen, und die Stellen, die es absichtlich anders taktet, bleiben unberuehrt - das Aufklappen des Burger-Menues (0.3s), der Bildzoom in Teasern (0.6s) und .notransition, mit dem das Theme Animationen per JavaScript abschaltet. Die Auswahl wiederholt die des Themes (style.css, Abschnitt "transition"), vorangestelltes body macht sie eine Stufe spezifischer. Ohne das haengt es an der Reihenfolge der Stylesheets - und die kann ein Cache-Plugin aendern. ========================================================================== */ :root { /* Dauer aller Hover-Uebergaenge. Kuerzer wirkt schnippisch, laenger traege; zwischen .2s und .3s liegt der uebliche Bereich. */ --pp-hover-duration: .25s; } body a:link, body a:visited, body a:active, body a:hover, body .sf-menu li:hover, body .sf-menu li.sfHover, body .sf-menu a:focus, body .sf-menu a:hover, body .sf-menu ul a:hover, body .socialicons i, body .social-label, body a.pp_previous i, body a.pp_next i, body .post-tag:hover .post-tag-hashtag, body .woocommerce-MyAccount-navigation a { transition-duration: var(--pp-hover-duration); } /* Echte