/* * VietCoff Checkout Bridge * Reskint /warenkorb/, /kasse/ und /mein-konto/ im Design des * Next.js-Frontends (Farben/Fonts aus src/app/[locale]/globals.css). */ :root { --vcb-background: #ffffff; --vcb-foreground: #2b1d14; --vcb-accent: #a3672f; --vcb-surface: #f7f1e8; --vcb-font-sans: "Geist", Arial, Helvetica, sans-serif; } /* Astras eigene Typografie-Grundeinstellung setzt sitweit html{font-size:112.5%} (= 18px statt der ueblichen 16px). Jede rem-Angabe in diesem Stylesheet (Header-Hoehe, Logo, Abstaende, Container-Breite) ist relativ zu dieser Root-Groesse, nicht zu body - dadurch wirkte die Kasse rund 12,5 % groesser als das Next.js-Frontend, das bei den ueblichen 16px bleibt. :has() statt einer Klasse direkt auf (WordPress bietet dafuer keinen Filter, nur body_class) und schlaegt Astras Regel per Spezifitaet, unabhaengig von der Reihenfolge im CSS-Bundle. */ html:has(body.vcb-page) { font-size: 100%; } /* Schrift fuer die gesamte Seite, nicht nur fuer die Bridge-Elemente. Astra setzt auf body den System-Font-Stack (-apple-system, Segoe UI, ...). Ohne diese Regel bliebe der eigentliche Checkout in der Systemschrift und nur der Bridge-Footer waere Geist, was den groessten Teil der optischen Abweichung zum Frontend ausmacht. Die @font-face-Regeln liefert inc/fonts.php inline im Head. Bewusst ohne Universalselektor: WooCommerce nutzt eigene Icon-Fonts ("WooCommerce" und "star") auf Pseudo-Elementen. Die duerfen nicht ueberschrieben werden, sonst brechen Haken, Pfeile und Sternebewertung. Formularelemente brauchen eine eigene Regel, weil Browser sie nicht vom body erben lassen. */ body.vcb-page, body.vcb-page input, body.vcb-page select, body.vcb-page textarea, body.vcb-page button, body.vcb-page optgroup { font-family: var(--vcb-font-sans); } /* Fallback, falls die Action-basierte Entfernung in vietcoff-checkout-bridge.php nicht zur installierten Astra-Version passt. */ #masthead, #colophon { display: none !important; } /* Ankündigungsleiste */ .vcb-announce { background: var(--vcb-foreground); color: var(--vcb-background); } .vcb-announce__inner { margin: 0 auto; max-width: 72rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 1.5rem; padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; font-weight: 500; } .vcb-announce__inner a { color: inherit; text-decoration: none; } .vcb-announce__star { color: #fcd34d; } @media (min-width: 640px) { .vcb-announce__inner { padding: 0.5rem 1.5rem; font-size: 0.875rem; } } /* Container fuer den WooCommerce-Inhalt (Warenkorb/Kasse/Konto). Seit dem Wechsel auf das Elementor-Canvas-Seitentemplate (ersetzt Astras Standardtemplate, um den doppelten Header/Footer loszuwerden) fehlt der Container, den Astra vorher lieferte (#content/.ast-container mit Max-Breite und Innenabstand). Canvas ruft the_content() ohne umschliessendes Div auf, der WooCommerce-Block-Wrapper landet dadurch direkt und randlos unter body. Werte wie im Next.js-Frontend (max-w-6xl + px-4/sm:px-6 + py-16, siehe src/app/[locale]/warenkorb/page.tsx). Direktes-Kind-Selektor (>), damit nur der oberste Wrapper getroffen wird und nicht gleichnamige Klassen, die WooCommerce weiter unten im Baum wiederverwendet. */ body.vcb-page > .wp-block-woocommerce-cart, body.vcb-page > .wp-block-woocommerce-checkout, body.vcb-page > .woocommerce { margin: 0 auto; max-width: 72rem; padding: 4rem 1rem; } @media (min-width: 640px) { body.vcb-page > .wp-block-woocommerce-cart, body.vcb-page > .wp-block-woocommerce-checkout, body.vcb-page > .woocommerce { padding: 4rem 1.5rem; } } /* Header */ .vcb-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(43, 29, 20, 0.1); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); } /* Spaltenaufteilung wie in src/components/Header.tsx: Navigation links, Logo mittig, Aktionen rechts, bei min-h-20 Hoehe. Die DOM-Reihenfolge ist Brand, Nav, Actions (wegen des Burger-Menues, das auf Mobile neben dem Logo stehen muss), deshalb wird die Reihenfolge auf Desktop per order korrigiert. Vorher sass das Logo in der linken Spalte und die Navigation in der Mitte, also genau vertauscht. */ .vcb-header__inner { margin: 0 auto; max-width: 72rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 5rem; gap: 1rem; padding: 0.75rem 1.5rem; } .vcb-header__nav { order: 1; } .vcb-header__brand { order: 2; display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5rem; justify-self: center; } .vcb-header__actions { order: 3; } .vcb-header__logo { flex: none; } /* h-16 wie im Frontend. Auf Mobile ueberschreibt der Media-Query-Block unten auf h-10, ebenfalls wie dort. */ .vcb-header__logo img { display: block; height: 4rem; width: auto; } /* Höhere Spezifität (ID) als Astras "input[type=checkbox]"-Reset, damit die Checkbox des Burger-Menüs unsichtbar bleibt, aber per Label klickbar ist. */ #vcb-menu-toggle { position: absolute !important; height: 1px !important; width: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; } .vcb-header__burger { display: none; align-items: center; justify-content: center; flex: none; height: 2.25rem; width: 2.25rem; padding: 0; border: none; background: none; color: var(--vcb-foreground); cursor: pointer; } .vcb-header__burger svg { display: block; height: 1.5rem; width: 1.5rem; flex: none; } .vcb-header__burger-close { display: none !important; } /* Sprachumschalter als aufklappbares
, analog zum Dropdown in src/components/LanguageSwitcher.tsx. Vorher standen hier fest "DE / EN" nebeneinander, mit neun Sprachen ist das keine Option mehr. Bewusst ohne JavaScript: LiteSpeed hat "Delay JS Execution" aktiv und führt Inline-Scripts erst nach einer Nutzerinteraktion aus. */ .vcb-header__lang { position: relative; font-size: 0.75rem; font-weight: 600; } /* Aufbau 1:1 nach src/components/LanguageSwitcher.tsx: Globus-Icon, Kürzel, Chevron, kein Rahmen. Das Panel listet das Endonym links und das Kürzel rechts in kleiner, blasser Schrift. */ .vcb-header__lang-current { display: flex; align-items: center; gap: 0.375rem; cursor: pointer; list-style: none; padding: 0.25rem 0; white-space: nowrap; opacity: 0.9; transition: opacity 0.15s ease; } .vcb-header__lang-current:hover { opacity: 1; } /* Safari zeigt sonst zusätzlich das native Aufklapp-Dreieck. */ .vcb-header__lang-current::-webkit-details-marker { display: none; } .vcb-header__lang-globe { height: 1rem; width: 1rem; flex: none; } .vcb-header__lang-chevron { height: 0.875rem; width: 0.875rem; flex: none; transition: transform 0.15s ease; } .vcb-header__lang[open] .vcb-header__lang-chevron { transform: rotate(180deg); } .vcb-header__lang-menu { position: absolute; right: 0; z-index: 50; margin: 0.5rem 0 0; min-width: 11rem; list-style: none; padding: 0.25rem 0; overflow: hidden; border-radius: 0.75rem; border: 1px solid rgba(43, 29, 20, 0.1); background: var(--vcb-background); font-size: 0.875rem; font-weight: 500; box-shadow: 0 20px 25px -5px rgba(43, 29, 20, 0.15), 0 8px 10px -6px rgba(43, 29, 20, 0.1); } .vcb-header__lang-menu li { margin: 0; } .vcb-header__lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; color: rgba(43, 29, 20, 0.8); transition: background-color 0.15s ease; } .vcb-header__lang-menu a:hover { background: rgba(43, 29, 20, 0.05); } .vcb-header__lang-menu a[aria-current] { color: var(--vcb-accent); } .vcb-header__lang-code { font-size: 0.75rem; color: rgba(43, 29, 20, 0.4); } .vcb-header__mobile-nav { display: none; } .vcb-header__nav { display: flex; gap: 2rem; font-size: 0.875rem; font-weight: 500; } .vcb-header__nav a, .vcb-header__actions a { color: var(--vcb-foreground); text-decoration: none; transition: color 0.15s ease; } .vcb-header__nav a:hover, .vcb-header__actions a:hover { color: var(--vcb-accent); } .vcb-header__actions { display: flex; align-items: center; flex: none; justify-self: end; gap: 1rem; font-size: 0.875rem; font-weight: 500; } .vcb-header__cart { position: relative; border-radius: 9999px; border: 1px solid var(--vcb-accent); padding: 0.375rem 1rem; transition: background-color 0.15s ease, color 0.15s ease; } .vcb-header__cart:hover { background: var(--vcb-accent); color: #fff !important; } .vcb-header__cart-count { position: absolute; top: -0.5rem; right: -0.5rem; display: flex; height: 1.25rem; min-width: 1.25rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--vcb-accent); padding: 0 0.25rem; font-size: 0.75rem; font-weight: 600; color: #fff; } @media (max-width: 640px) { .vcb-header__nav { display: none; } .vcb-header__inner { display: flex; flex-wrap: nowrap; justify-content: space-between; min-height: 0; gap: 0.5rem; padding: 0.75rem 1rem; } /* Auf Mobile steht das Logo mit dem Burger links und die Aktionen rechts, wie im Frontend. Die order-Werte fuer Desktop muessen dafuer zurueck. */ .vcb-header__brand { order: 0; justify-self: auto; } .vcb-header__actions { order: 1; } .vcb-header__logo img { height: 2.5rem; } .vcb-header__burger { display: flex; } .vcb-header__actions { gap: 0.5rem; font-size: 0.8125rem; } .vcb-header__lang { font-size: 0.6875rem; } .vcb-header__cart { padding: 0.375rem 0.875rem; } #vcb-menu-toggle:checked ~ .vcb-header__inner .vcb-header__burger-open { display: none !important; } #vcb-menu-toggle:checked ~ .vcb-header__inner .vcb-header__burger-close { display: block !important; } #vcb-menu-toggle:checked ~ .vcb-header__mobile-nav { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid rgba(43, 29, 20, 0.1); background: var(--vcb-background); padding: 1rem; font-size: 0.875rem; font-weight: 500; } .vcb-header__mobile-nav a { color: var(--vcb-foreground); text-decoration: none; } .vcb-header__mobile-nav a:hover { color: var(--vcb-accent); } } /* Footer */ .vcb-footer { border-top: 1px solid rgba(43, 29, 20, 0.1); background: var(--vcb-surface); margin-top: 3rem; font-family: var(--vcb-font-sans); color: var(--vcb-foreground); } .vcb-footer__grid { margin: 0 auto; max-width: 72rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 2.5rem 1.5rem; } @media (min-width: 640px) { .vcb-footer__grid { grid-template-columns: repeat(3, 1fr); } } .vcb-footer__brand { grid-column: span 2 / span 2; } @media (min-width: 640px) { .vcb-footer__brand { grid-column: span 1 / span 1; } } /* Die Wortmarke im Frontend-Footer ist "text-lg font-bold text-accent", also Geist Bold und nicht die Display-Schrift (siehe src/components/Footer.tsx). Hier stand vorher Fraunces, das war selbst schon eine Abweichung. Damit entfaellt Fraunces auf den Bridge-Seiten komplett, was rund 143 KB Schriftdaten spart. */ .vcb-footer__brand p:first-child { font-family: var(--vcb-font-sans); font-size: 1.125rem; font-weight: 700; color: var(--vcb-accent); margin: 0; } /* Die Tagline ist das zweite p, nicht zwangslaeufig das letzte Kind: unter ihr stehen seit 2026-08-18 die Icons der sozialen Profile. Mit p:last-child verlor sie ihre Formatierung, sobald der Block dazukam. */ .vcb-footer__brand p + p { margin: 0.25rem 0 0; font-size: 0.875rem; color: rgba(43, 29, 20, 0.7); } /* Profile der Marke, gleiche Groesse und Abstaende wie im Frontend-Footer (components/Footer.tsx: gap-3, h-5 w-5). */ .vcb-footer__social { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .vcb-footer__social a { display: inline-flex; color: rgba(43, 29, 20, 0.6); transition: color 0.2s; } .vcb-footer__social a:hover { color: var(--vcb-accent); } .vcb-footer__social svg { width: 1.25rem; height: 1.25rem; } .vcb-footer__nav { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: rgba(43, 29, 20, 0.7); } .vcb-footer__nav p { margin: 0 0 0.25rem; font-weight: 600; color: var(--vcb-foreground); } .vcb-footer__nav a { color: inherit; text-decoration: none; } .vcb-footer__nav a:hover { color: var(--vcb-accent); } .vcb-footer__payment { border-top: 1px solid rgba(43, 29, 20, 0.1); padding: 1.5rem; } .vcb-footer__payment-inner { margin: 0 auto; max-width: 72rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } @media (min-width: 640px) { .vcb-footer__payment-inner { flex-direction: row; justify-content: space-between; } } .vcb-footer__payment-label { font-size: 0.75rem; font-weight: 500; color: rgba(43, 29, 20, 0.6); margin: 0; } .vcb-footer__icons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .vcb-footer__icons span { display: inline-block; overflow: hidden; border-radius: 0.25rem; box-shadow: 0 0 0 1px rgba(43, 29, 20, 0.1); } .vcb-footer__icons svg { display: block; height: 1.5rem; width: 2.5rem; } .vcb-footer__bottom { border-top: 1px solid rgba(43, 29, 20, 0.1); padding: 1rem 1.5rem; text-align: center; font-size: 0.75rem; color: rgba(43, 29, 20, 0.5); } .vcb-footer__bottom p { margin: 0; } .vcb-footer__bottom p + p { margin-top: 0.25rem; } /* --------------------------------------------------------------------------- Mein-Konto und Formulare --------------------------------------------------------------------------- Login, Registrierung, Adressbuch und Bestelluebersicht sind die Stellen, an denen WooCommerce-Markup direkt sichtbar ist. Ohne diese Regeln erben sie Astras Formularstile und wirken wie eine fremde Seite. Werte bewusst aus dem Frontend uebernommen: - Karten wie in den Next-Komponenten: rounded-2xl (1rem), border foreground/10, bg-surface - Buttons wie die CTAs dort: rounded-full, bg-accent, weisse Schrift - Links in Akzentfarbe mit Unterstreichung beim Hover Bewusst ohne !important. Wenn eine Regel nicht durchgreift, liegt das an Astras Basisstilen, und die gehoeren entfernt (Phase 3 in CHECKOUT-PLAN.md) statt ueberschrieen. */ body.vcb-page .woocommerce-form, body.vcb-page .woocommerce-MyAccount-content, body.vcb-page .woocommerce-Address, body.vcb-page .woocommerce-order-details, body.vcb-page .woocommerce-customer-details { border: 1px solid rgba(43, 29, 20, 0.1); border-radius: 1rem; background: var(--vcb-surface); padding: 1.5rem; } body.vcb-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } body.vcb-page .woocommerce-MyAccount-navigation li a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--vcb-foreground); opacity: 0.75; text-decoration: none; } body.vcb-page .woocommerce-MyAccount-navigation li a:hover { opacity: 1; background: var(--vcb-surface); } body.vcb-page .woocommerce-MyAccount-navigation li.is-active a { opacity: 1; color: var(--vcb-accent); font-weight: 600; background: var(--vcb-surface); } body.vcb-page .woocommerce-Input, body.vcb-page .input-text, body.vcb-page input[type="text"], body.vcb-page input[type="email"], body.vcb-page input[type="tel"], body.vcb-page input[type="password"], body.vcb-page select, body.vcb-page textarea { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid rgba(43, 29, 20, 0.2); border-radius: 0.5rem; background: var(--vcb-background); color: var(--vcb-foreground); font-size: 0.9375rem; line-height: 1.4; } body.vcb-page .woocommerce-Input:focus, body.vcb-page .input-text:focus, body.vcb-page select:focus, body.vcb-page textarea:focus { outline: none; border-color: var(--vcb-accent); box-shadow: 0 0 0 3px rgba(163, 103, 47, 0.15); } body.vcb-page .woocommerce-form__label { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--vcb-foreground); } /* Checkbox-Labels ("Angemeldet bleiben") sollen nicht als Block umbrechen. */ body.vcb-page .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; } body.vcb-page .woocommerce-form__label-for-checkbox input { width: auto; } body.vcb-page .woocommerce-button, body.vcb-page .woocommerce a.button, body.vcb-page .woocommerce button.button, body.vcb-page .woocommerce input.button { display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 9999px; background: var(--vcb-accent); color: #ffffff; font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: opacity 0.15s ease; } body.vcb-page .woocommerce-button:hover, body.vcb-page .woocommerce a.button:hover, body.vcb-page .woocommerce button.button:hover, body.vcb-page .woocommerce input.button:hover { opacity: 0.9; color: #ffffff; } body.vcb-page .woocommerce-LostPassword a, body.vcb-page .woocommerce-MyAccount-content a:not(.button) { color: var(--vcb-accent); } body.vcb-page .woocommerce-LostPassword a:hover, body.vcb-page .woocommerce-MyAccount-content a:not(.button):hover { text-decoration: underline; text-underline-offset: 2px; } body.vcb-page .woocommerce-message, body.vcb-page .woocommerce-info, body.vcb-page .woocommerce-error { border-radius: 0.75rem; border: 1px solid rgba(43, 29, 20, 0.1); border-top: 3px solid var(--vcb-accent); } /* --------------------------------------------------------------------------- WooCommerce Blocks (Warenkorb/Kasse) --------------------------------------------------------------------------- Warenkorb und Kasse laufen inzwischen auf den WooCommerce-Blocks statt dem klassischen Shortcode-Markup, das die Regeln oben (.woocommerce-Input, .woocommerce-button) abdecken - deshalb sahen Textfelder/Buttons dort bislang ungestyled aus. Blocks haben eigene, von WooCommerce fest dokumentierte Komponentenklassen (wc-block-components-*), stabil über Installationen hinweg. Das selbst traegt keine Klasse, das Styling sitzt am umschliessenden Floating-Label-Wrapper. */ body.vcb-page .wc-block-components-text-input input, body.vcb-page .wc-block-components-textarea textarea, body.vcb-page .wc-block-components-select-input select, body.vcb-page .wc-block-components-combobox input { border-radius: 0.5rem; border: 1px solid rgba(43, 29, 20, 0.2); background: var(--vcb-background); color: var(--vcb-foreground); font-family: var(--vcb-font-sans); } body.vcb-page .wc-block-components-text-input input:focus, body.vcb-page .wc-block-components-textarea textarea:focus, body.vcb-page .wc-block-components-select-input select:focus { outline: none; border-color: var(--vcb-accent); box-shadow: 0 0 0 3px rgba(163, 103, 47, 0.15); } /* Nur die Haupt-CTAs (Weiter zur Kasse / Bestellung aufgeben) in der grossen Akzent-Pille wie im Frontend - bewusst nicht jeder .wc-block-components-button (das waeren sonst auch Mengen-Stepper und Entfernen-Links). */ body.vcb-page .wc-block-cart__submit-button, body.vcb-page .wc-block-components-checkout-place-order-button { display: inline-block; border-radius: 9999px; border: none; background: var(--vcb-accent); color: #ffffff; font-family: var(--vcb-font-sans); font-weight: 600; cursor: pointer; transition: opacity 0.15s ease; } body.vcb-page .wc-block-cart__submit-button:hover, body.vcb-page .wc-block-components-checkout-place-order-button:hover { opacity: 0.9; color: #ffffff; } /* Kurzbeschreibung unter jedem Artikel in der Bestelluebersicht (Kasse) / Warenkorb-Zusammenfassung - im Next.js-Frontend zeigt der Warenkorb nur Name + Preis, keinen Fliesstext. NICHT .wc-block-components-order-summary-item__description verwenden: das ist bei WooCommerce Blocks der gemeinsame Wrapper fuer Name + Mengenangabe + Beschreibung zusammen (irrefuehrender Klassenname), das hat beim ersten Versuch auch Titel und Grammangabe mit entfernt. Nur die tatsaechliche Beschreibung, live bestaetigt (Live-CSS-Check 2026-08-05: .wc-block-components-product-metadata__description>p traegt die eigentliche Fliesstext-Formatierung). */ body.vcb-page .wc-block-components-product-metadata__description { display: none; }