/* Onderdeel van de huisstijl van de plugin. Aan/uit bij WooCommerce → Configurator. */ /* Huisstijl sitebreed. * * Overschrijft de Global Colors van Astra en de lettertypen van het * Starter Template met de kleuren uit het logo: marineblauw #181830 en * goud, op warm wit. De instellingen in de Customizer blijven staan zoals * ze zijn — dit ligt eroverheen. Uitzetten kan met één vinkje bij * WooCommerce → Configurator, of door de plugin te deactiveren. * * Lettertypen staan lokaal in deze plugin, niet bij Google. Dat scheelt een * verbinding met een server in de VS bij elk bezoek (AVG). */ :root{ /* De negen slots van Astra, omgezet van oudroze/zwart naar navy/goud. */ /* Accent is een tint dieper dan het goud uit het logo. Reden: #A8834F haalt op wit maar 3,49:1 en dat is te weinig voor links en knoptekst (eis 4,5). #8A6835 haalt 5,1 en blijft goud. Het lichtere goud staat hieronder voor vlakken waar geen tekst op komt. */ --ast-global-color-0:#8A6835; /* accent: knoppen, links */ --ast-global-color-1:rgba(24,24,48,.62); /* accent doorschijnend */ --ast-global-color-2:#181830; /* tekst en koppen */ --ast-global-color-3:#5E6376; /* bijtekst */ --ast-global-color-4:#F1EDE5; /* licht vlak */ --ast-global-color-5:#FFFFFF; /* wit */ --ast-global-color-6:rgba(24,24,48,.18); /* randen */ --ast-global-color-7:#3A3F52; /* donkere tekst op licht */ --ast-global-color-8:#181830; /* diepste navy */ /* Dezelfde tokens onder eigen naam, voor waar Astra ze niet gebruikt. */ --kbts-navy:#181830; --kbts-goud:#8A6835; --kbts-goud-diep:#6E5329; --kbts-goud-licht:#A8834F; /* alleen decoratief, niet achter tekst */ --kbts-papier:#FAF8F4; } h1,h2,h3,h4,h5,h6, .entry-title, .site-title, .widget-title, .woocommerce-loop-product__title, .product_title, .elementor-heading-title{ font-family:"KBTS Cormorant", Garamond, Georgia, serif; font-weight:400; letter-spacing:.005em; } /* Een paar plekken waar het Beauty-template het roze hard had staan in plaats van via een variabele. */ .ast-button, .button, button.button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .elementor-button, .wp-block-button__link{ background-color:var(--ast-global-color-0); border-color:var(--ast-global-color-0); } .ast-button:hover, .button:hover, .woocommerce a.button:hover, .elementor-button:hover, .wp-block-button__link:hover{ background-color:var(--kbts-goud-diep); border-color:var(--kbts-goud-diep); } a{color:var(--ast-global-color-0)} a:hover, a:focus{color:var(--kbts-goud-diep)} /* Prijzen in de shop: navy in plaats van zwart, cijfers uitgelijnd. */ .woocommerce .price, .woocommerce-Price-amount{ color:var(--kbts-navy); font-variant-numeric:tabular-nums; } /* ── Winkelwagenpaneel (plugin Modern Cart) ──────────────────────────── * * Die plugin zet zijn eigen palet op :root: roze #d4a6b6 voor knoppen, * helderblauw #0284C7 voor producttitels en groen #10B981 voor het aantal. * Dat komt uit het Beauty-template en staat los van de Global Colors, dus * de rest van de huisstijl raakte het niet. * * html:root is één puntje specifieker dan :root, dus dit wint zonder * !important en zonder dat de laadvolgorde uitmaakt. */ html:root{ --moderncart-primary-color:#8A6835; /* knoppen, focusrand */ --moderncart-primary-color-light:#8A683512; --moderncart-heading-color:#181830; /* producttitels */ --moderncart-heading-color-light:#18183012; --moderncart-body-color:#181830; --moderncart-body-color-light:#18183012; --moderncart-header-font-color:#181830; --moderncart-header-font-color-light:#18183012; --moderncart-highlight-color:#8A6835; /* was groen */ --moderncart-highlight-color-light:#8A683512; --moderncart-button-font-color:#FFFFFF; /* wit op goud: 5,1:1 */ /* Het zwevende wagentje rechtsonder: navy met een gouden telbolletje. */ --moderncart-floating-icon-bg-color:#181830; --moderncart-floating-icon-bg-color-light:#18183012; --moderncart-floating-icon-color:#FFFFFF; --moderncart-floating-count-bg-color:#8A6835; --moderncart-floating-count-bg-color-light:#8A683512; --moderncart-floating-count-text-color:#FFFFFF; /* De plus/min-knoppen stonden op koel grijsblauw; dit is hetzelfde warme vlak als de rest van de site. */ --moderncart-quantity-background-color:#F1EDE5; --moderncart-quantity-background-color-light:#F1EDE512; --moderncart-quantity-font-color:#181830; } /* De kop van het paneel in de schreefletter van de site, net als elke andere kop. De plugin gebruikt daar een span, geen h-element, dus de regel hierboven voor koppen pakt hem niet. */ #moderncart-slide-out .moderncart-slide-out-header-title span{ font-family:"KBTS Cormorant", Garamond, Georgia, serif; font-weight:400; letter-spacing:.005em; } /* Bedragen uitgelijnd, zoals in de rest van de winkel. */ #moderncart-slide-out .moderncart-cart-line-items-value, #moderncart-slide-out .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; } /* ── Elementor gebruikt een bevroren kopie van het palet ───────── * * Elementor neemt de Global Colors van Astra bij het opslaan over in eigen * variabelen (--e-global-color-astglobalcolor0 t/m 8) en bevriest ze daar. * Gemeten op de live site stonden die nog op het oude Beauty-palet, terwijl * de Astra-kleuren er hierboven allang naast lagen: * * accent #DCA54A oker tegenover #8A6835 goud * tekst #0F172A tegenover #181830 navy * licht vlak #FAF5E5 tegenover #F1EDE5 * randen #F0E6C5 tegenover rgba(24,24,48,.18) * * Alles wat met Elementor gebouwd is draaide daardoor op de oude kleuren. * Astra zet ze op :root; html:root is een tik specifieker en wint. */ html:root{ --e-global-color-astglobalcolor0:#8A6835; --e-global-color-astglobalcolor1:rgba(24,24,48,.62); --e-global-color-astglobalcolor2:#181830; --e-global-color-astglobalcolor3:#5E6376; --e-global-color-astglobalcolor4:#F1EDE5; --e-global-color-astglobalcolor5:#FFFFFF; --e-global-color-astglobalcolor6:rgba(24,24,48,.18); --e-global-color-astglobalcolor7:#3A3F52; --e-global-color-astglobalcolor8:#181830; } /* ── de ronde pictogrammen ─────────────────────────────────────── * * Crème vlak met een goud pictogram in plaats van een okeren vlak met een * wit pictogram. Dat witte haalde op #DCA54A maar 2,2:1 en was dus al aan de * lichte kant; goud op #f6f3ee haalt 4,6:1. * * Elementor zet de achtergrond per widget met een selector van vijf klassen * (.elementor-1448 .elementor-element.elementor-element-xxx.elementor-view- * stacked .elementor-icon). Vandaar hieronder vijf klassen plus twee * elementen: net genoeg om eroverheen te gaan. */ html body .elementor-element.elementor-element.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{ background-color:#f6f3ee; color:#8A6835; } html body .elementor-element.elementor-element.elementor-widget-icon-box.elementor-view-stacked .elementor-icon i, html body .elementor-element.elementor-element.elementor-widget-icon-box.elementor-view-stacked .elementor-icon svg{ color:#8A6835; fill:#8A6835; } /* ── footer over de volle breedte ──────────────────────────────── * * Astra zet met .ast-hfb-header .site-footer een padding van 0 20px 20px op * de footer. Gemeten op 1440 px: de gekleurde rijen liepen daardoor van 20 * tot 1420, met een witte rand van 20 px links, rechts en onderaan. * * De inhoud houdt zijn eigen marge — ast-builder-footer-grid-columns heeft * 35 px padding — dus alleen de achtergrond loopt door tot de rand, de tekst * niet. Astra's regel is (0,2,0); met html body ervoor komen we daar net * boven, zonder !important. */ html body .site-footer, html body.ast-hfb-header .site-footer{ padding-left:0; padding-right:0; padding-bottom:0; }