/* ========================================================================== MUNDO'S FORGE — Theme CSS Light/Dark variabelensysteem + Header ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap'); /* --- LIGHT MODE (standaard) --- */ :root { --mf-primary: #c8aa6e; --mf-bg: #fdfbf7; --mf-text: #1a1a1a; --mf-card-bg: #ffffff; --mf-border: rgba(200, 170, 110, 0.2); } /* --- DARK MODE --- */ html[data-theme="dark"] { --mf-primary: #884da7; --mf-bg: #0a0a12; --mf-text: #e2e8f0; --mf-card-bg: #161625; --mf-border: rgba(136, 77, 167, 0.3); } /* Basis: dit zorgt dat de site direct in het juiste thema opent, geen flits. !important hier is veilig: dit is het / element zelf, geen losse Elementor-sectie, dus dit overschrijft nooit een bewust ingestelde sectie-achtergrond die je later zelf in Elementor kiest. */ html, body { background: var(--mf-bg) !important; color: var(--mf-text) !important; min-height: 100vh; } body { display: flex; flex-direction: column; } body { font-family: 'Plus Jakarta Sans', sans-serif; transition: background 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.6s ease; } /* ========================================================================== PAGE CONTENT — zorgt dat alle gewone content (ook binnen Elementor) meegaat met de light/dark modus, niet alleen de header. Let op: deze selectors zijn met opzet iets "zwaarder" gemaakt (met "body" ervoor) dan losse tags. Elementor's eigen standaard kit-CSS gebruikt namelijk al samengestelde selectors (bv. ".elementor-widget-heading .elementor-heading-title"), die normaal gesproken winnen van een simpele ".elementor-heading-title" regel. Door "body" toe te voegen winnen wij, zonder !important — dus handmatige kleurkeuzes die je later per widget in Elementor instelt (die werken via inline style) blijven gewoon werken. ========================================================================== */ body h1, body h2, body h3, body h4, body h5, body h6, body .elementor-heading-title, body .elementor-widget-heading .elementor-heading-title { color: var(--mf-text) !important; font-family: 'Cinzel', serif !important; letter-spacing: 1px; } /* Maten geënt op de originele mockup - daar waren koppen bewust groot en duidelijk leesbaar. Wil je per pagina toch een andere maat, geef het gewoon aan, dan stemmen we dit verder af. */ body h1 { font-size: clamp(2.2rem, 6vw, 3.75rem) !important; line-height: 1.15 !important; } body h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem) !important; line-height: 1.2 !important; } body h3 { font-size: clamp(1.3rem, 3vw, 1.75rem) !important; line-height: 1.3 !important; } /* H2's zijn de titel-stijl en krijgen daarom de accentkleur (goud/paars) i.p.v. de gewone tekstkleur - moet NA de regel hierboven staan om te winnen */ body h2, body .elementor-widget-heading h2.elementor-heading-title { color: var(--mf-primary) !important; } /* !important hieronder is nodig: Elementor's eigen Global Colors worden door Elementor zelf óók met !important uitgevoerd (om Kit-wide overal te gelden), dus een normale regel - hoe specifiek ook - verliest altijd. Wil je een individuele paragraaf/link toch een eigen kleur geven, doe dat dan via Elementor's "Custom CSS" veld per element en zet daar zelf ook !important bij - dat wint dan weer van onderstaande regels. */ body p, body li, body span, body .elementor-widget-text-editor, body .elementor-widget-text-editor p, body .elementor-icon-list-text { color: var(--mf-text) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; } body a, body a:visited { color: var(--mf-primary) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; } /* Elementor secties/containers die geen eigen achtergrond hebben gekregen (dus "transparant" staan) vallen automatisch terug op de pagina-achtergrond */ body .elementor-section, body .elementor-container, body .e-con, body .elementor-widget-wrap { background-color: transparent; } /* Zorgt dat de page content de lege ruimte opvult → footer blijft onderaan */ body > .elementor, body > #page, body > main, body > .site-content, body > div.elementor { flex: 1; } /* Herbruikbare kaart-stijl — zet "mf-card" in het Custom CSS classes veld van een Container/Section in Elementor om 'm mee te laten thema'n */ .mf-card { background: var(--mf-card-bg); border: 1px solid var(--mf-border); border-radius: 4px; padding: 30px; transition: 0.4s; } .mf-card:hover { border-color: var(--mf-primary); transform: translateY(-5px); } /* Herbruikbare knop-stijl — zet "mf-btn-main" in het Custom CSS classes veld van een Elementor knop-widget */ .mf-btn-main { background: var(--mf-primary); color: var(--mf-bg); padding: 18px 45px; border: none; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.3s; } /* ========================================================================== HEADER ========================================================================== */ .mf-header { padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--mf-border); background: var(--mf-bg); position: sticky; top: 0; z-index: 1000; transition: background 0.6s ease, border 0.6s ease; } @media (min-width: 768px) { .mf-header { padding: 25px 40px; } } .mf-brand { display: flex; align-items: center; gap: 10px; font-family: 'Cinzel', serif; font-size: 1.2rem; letter-spacing: 2px; color: var(--mf-primary); text-decoration: none; z-index: 1100; } /* !important nodig: de algemene "body span" regel (verderop, voor gewone tekst) zou anders ook de spans in de merknaam zelf overschrijven */ .mf-brand, .mf-brand span { color: var(--mf-primary) !important; font-family: 'Cinzel', serif !important; } html body .mf-header .mf-brand img.mf-logo { height: clamp(48px, 6vw, 64px) !important; width: auto !important; max-width: none !important; display: block !important; } @media (min-width: 768px) { .mf-brand { font-size: 1.5rem; } } /* Burger knop */ .mf-burger { display: flex; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; z-index: 1100; padding: 0; } @media (min-width: 900px) { .mf-burger { display: none; } } .mf-burger span { display: block; width: 25px; height: 2px; background: var(--mf-primary); border-radius: 2px; transition: 0.3s; } .mf-burger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mf-burger.active span:nth-child(2) { opacity: 0; } .mf-burger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Navigatie */ .mf-nav { display: flex; gap: 25px; align-items: center; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } @media (max-width: 899px) { .mf-nav { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background: var(--mf-bg); flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 90px 40px 40px; overflow-y: auto; transform: translateX(100%); z-index: 1050; gap: 0; } .mf-nav.open { transform: translateX(0); } .mf-menu { flex-direction: column; gap: 0; align-items: flex-start; width: 100%; } .mf-menu > li { width: 100%; border-bottom: 1px solid var(--mf-border); } .mf-menu > li:first-child { border-top: 1px solid var(--mf-border); } /* Rij: link + pijltje naast elkaar */ .mf-menu > li > a { font-size: 1rem !important; padding: 16px 0 !important; opacity: 0.8; display: inline-flex; align-items: center; } .mf-dropdown-toggle { padding: 16px 12px !important; } .mf-dropdown-toggle svg { width: 12px; height: 8px; } } .mf-menu { display: flex; gap: 25px; align-items: center; list-style: none; margin: 0; padding: 0; } .mf-menu li { margin: 0; } .mf-menu a { background: none; border: none; color: var(--mf-text); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; cursor: pointer; opacity: 0.6; transition: 0.3s; text-decoration: none; } .mf-menu a:hover, .mf-menu .current-menu-item > a { opacity: 1; color: var(--mf-primary); } /* Light/Dark toggle knop */ /* !important + extra specificiteit nodig: Elementor's eigen standaard knop-/focusstijl (vaak rood/roze) wint anders altijd */ .mf-header .mf-nav .mf-toggle, .mf-header .mf-nav button.mf-toggle { background-color: var(--mf-primary) !important; color: var(--mf-bg) !important; border: none !important; outline: none !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; padding: 12px 25px; border-radius: 50px; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s; white-space: nowrap; } .mf-toggle:hover, .mf-toggle:focus { transform: translateY(-2px); border: none !important; outline: none !important; } @media (max-width: 899px) { .mf-toggle { font-size: 1rem !important; padding: 14px 30px !important; } } /* ========================================================================== FOOTER AD SLOT — ruimte voor Google AdSense/Ad Manager, gevuld via Weergave -> Widgets -> "Footer Advertentie". Toont zichzelf alleen als er daadwerkelijk een widget in staat (zie footer.php). ========================================================================== */ .mf-ad-slot { padding: 48px 20px 0; display: flex; justify-content: center; } .mf-ad-slot-inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 40px; border-bottom: 1px solid var(--mf-border); transition: border 0.6s ease; } /* Klein, rustig label boven de advertentie zodat het niet los in de lucht hangt tussen content en footer. Puur cosmetisch — geen invloed op de ad zelf. */ .mf-ad-slot-inner::before { content: "Advertentie"; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--mf-text); opacity: 0.35; order: -1; } .mf-ad-widget { width: 100%; display: flex; justify-content: center; overflow: hidden; } @media (max-width: 599px) { .mf-ad-slot { padding-top: 32px; } .mf-ad-slot-inner { padding-bottom: 28px; } } /* ========================================================================== FOOTER ========================================================================== */ .mf-footer { padding: 18px 20px; text-align: center; border-top: 1px solid var(--mf-border); background: var(--mf-bg); transition: background 0.6s ease, border 0.6s ease; } .mf-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 1200px; margin: 0 auto; } .mf-footer p { font-family: 'Cinzel', serif !important; font-size: 0.65rem; letter-spacing: 1.5px; line-height: 1.5; color: var(--mf-text); opacity: 0.7; margin: 0; } .mf-footer a { color: var(--mf-primary); text-decoration: none; font-weight: 700; } .mf-footer a:hover { text-decoration: underline; } /* Voor later: Privacybeleid- en Contact-knoppen komen hier */ .mf-footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .mf-footer-links a { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; transition: 0.3s; } .mf-footer-links a:hover { opacity: 1; } /* ========================================================================== DROPDOWN NAV — subitems als netjes dropdown op desktop ========================================================================== */ /* Ouder-item relatief zodat het dropdown-paneel eronder kan hangen */ .mf-menu > li { position: relative; } /* Het sub-menu standaard verbergen */ .mf-menu > li > .sub-menu { display: block; visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 200px; background: var(--mf-card-bg); border: 1px solid var(--mf-border); border-radius: 4px; padding: 8px 0; list-style: none; margin: 0; z-index: 2000; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } /* Pijltje boven het dropdown-paneel */ .mf-menu > li > .sub-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--mf-border); } .mf-menu > li > .sub-menu::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--mf-card-bg); } /* Alleen bij klik openen */ .mf-menu > li.mf-dropdown-open > .sub-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Sub-menu links */ .mf-menu > li > .sub-menu li { margin: 0; } .mf-menu > li > .sub-menu a { display: block; padding: 10px 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--mf-text) !important; opacity: 0.7; white-space: nowrap; transition: 0.2s; text-decoration: none; } .mf-menu > li > .sub-menu a:hover { opacity: 1; color: var(--mf-primary) !important; background: rgba(200, 170, 110, 0.06); padding-left: 26px; } /* Toggle-knop naast het ouder-item */ .mf-dropdown-toggle { background: none; border: none; padding: 0 4px; margin-left: 2px; cursor: pointer; color: var(--mf-text); opacity: 0.5; vertical-align: middle; line-height: 1; transition: opacity 0.2s, transform 0.25s; display: inline-flex; align-items: center; } .mf-dropdown-toggle:hover { opacity: 1; } .mf-menu > li.mf-dropdown-open > .mf-dropdown-toggle { opacity: 1; transform: rotate(180deg); } /* ========================================================================== MOBILE: dropdown als accordion (verborgen tot klik) ========================================================================== */ @media (max-width: 899px) { .mf-menu > li > .sub-menu { position: static !important; visibility: hidden; opacity: 0; max-height: 0; overflow: hidden; pointer-events: none; transform: none !important; box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 0 0 16px !important; min-width: 0 !important; transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.25s; } .mf-menu > li > .sub-menu::before, .mf-menu > li > .sub-menu::after { display: none !important; } .mf-menu > li.mf-dropdown-open > .sub-menu { visibility: visible; opacity: 1; max-height: 400px; pointer-events: auto; padding-bottom: 12px !important; } .mf-menu > li > .sub-menu li { border: none !important; } .mf-menu > li > .sub-menu a { font-size: 0.9rem !important; opacity: 0.6; padding: 10px 0 !important; display: block; } .mf-menu > li.mf-dropdown-open > .mf-dropdown-toggle { transform: rotate(180deg); opacity: 1; } } /* ========================================================================== WOOCOMMERCE — Winkel, product, winkelwagen, afrekenen, account Alles hergebruikt de bestaande --mf-* variabelen, dus dark mode werkt hier automatisch ook gewoon mee. ========================================================================== */ /* Algemene WooCommerce-tekst/links volgen het thema */ .woocommerce, .woocommerce-page { color: var(--mf-text); } .woocommerce a { color: var(--mf-primary); } /* Paginatitel "WINKEL" / productnaam e.d. volgen de Cinzel-koppenstijl (zelfde principe als de "body h1 ... !important" regel hierboven) */ body.woocommerce-page h1.page-title, body.woocommerce-page h1.entry-title, body.woocommerce-page .product_title { font-family: 'Cinzel', serif !important; color: var(--mf-text) !important; } /* Breadcrumb */ .woocommerce-breadcrumb { font-family: 'Plus Jakarta Sans', sans-serif; opacity: 0.75; margin-bottom: 30px !important; } .woocommerce-breadcrumb a { color: var(--mf-primary); } /* --- Productgrid (shop-archief) --- */ .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px; } .woocommerce ul.products li.product { background: var(--mf-card-bg); border: 1px solid var(--mf-border); border-radius: 4px; padding: 20px; transition: 0.3s; display: flex; flex-direction: column; height: 100%; margin: 0 !important; width: auto !important; float: none !important; } .woocommerce ul.products li.product:hover { border-color: var(--mf-primary); transform: translateY(-4px); } /* De link rond afbeelding+titel+prijs vult de resterende ruimte op, zodat prijs/knop bij elke kaart op dezelfde hoogte landen, ook als de titel 1 of 2 regels beslaat. */ .woocommerce ul.products li.product > a:first-child { display: flex; flex-direction: column; flex: 1; } /* !important nodig: dit verslaat de globale "body h2 { font-size: clamp(...) }" regel hierboven, die anders ook deze WooCommerce-producttitels (ook

) per ongeluk meeneemt naar koppen-grootte. / .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-family: 'Cinzel', serif !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: normal !important; color: var(--mf-text) !important; margin: 12px 0 6px !important; / Max. 2 regels, daarna afkappen met "…" — zo blijft elke kaart qua titelhoogte gelijk, ook bij een lange productnaam. / display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .woocommerce ul.products li.product img { border-radius: 3px; } .woocommerce ul.products li.product .price { margin-top: auto; padding-top: 8px; } .woocommerce ul.products li.product a.button { margin-top: 14px; } / --- Prijzen --- / .woocommerce .price, .woocommerce ul.products li.product .price { color: var(--mf-primary); font-weight: 700; } .woocommerce .price del { opacity: 0.5; color: var(--mf-text); } .woocommerce .price ins { text-decoration: none; } / --- Sale-badge --- / .woocommerce span.onsale { background: var(--mf-primary); color: var(--mf-bg); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; box-shadow: none; } / --- Knoppen (in winkelmandje toevoegen, afrekenen, etc.) --- / .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button { background: var(--mf-primary) !important; color: var(--mf-bg) !important; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border: none !important; border-radius: 50px; padding: 12px 28px; transition: 0.3s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { transform: translateY(-2px); opacity: 0.9; } .woocommerce a.added_to_cart { color: var(--mf-primary) !important; margin-left: 10px; } / --- Sortering / select-velden / formuliervelden --- / .woocommerce select, .woocommerce .form-row input.input-text, .woocommerce .form-row textarea, .woocommerce table.shop_table td input.qty { background: var(--mf-card-bg); color: var(--mf-text); border: 1px solid var(--mf-border); border-radius: 4px; padding: 10px 14px; font-family: 'Plus Jakarta Sans', sans-serif; } / --- Sterren-rating --- / .woocommerce .star-rating span:before, .woocommerce .star-rating::before { color: var(--mf-primary); } / --- Meldingen (toegevoegd aan winkelwagen, fouten, info) --- / .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noticegroup-checkout, .woocommerce-noticegroup-updateorder { background: var(--mf-card-bg) !important; border-top-color: var(--mf-primary) !important; color: var(--mf-text) !important; border-radius: 4px; font-family: 'Plus Jakarta Sans', sans-serif; } .woocommerce-message::before, .woocommerce-info::before { color: var(--mf-primary) !important; } / --- Winkelwagen & afrekenen: tabellen --- / .woocommerce table.shop_table { border: 1px solid var(--mf-border); border-radius: 4px; background: var(--mf-card-bg); } .woocommerce table.shop_table th { font-family: 'Cinzel', serif; color: var(--mf-text); border-bottom: 1px solid var(--mf-border); } .woocommerce table.shop_table td { border-top: 1px solid var(--mf-border); color: var(--mf-text); } .woocommerce-cart-form .product-remove a { color: var(--mf-primary) !important; } / --- Afrekenen: kolomkoppen ("Jouw bestelling", "Factuurgegevens") --- / .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-family: 'Cinzel', serif; color: var(--mf-text); } #order_review, .woocommerce-checkout-payment { background: var(--mf-card-bg); border: 1px solid var(--mf-border); border-radius: 4px; padding: 20px; } .woocommerce ul.payment_methods li { border-color: var(--mf-border) !important; } / --- Mijn account --- / .woocommerce-MyAccount-navigation ul { border: 1px solid var(--mf-border); border-radius: 4px; overflow: hidden; } .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--mf-border); } .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; } .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 20px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; color: var(--mf-text); opacity: 0.7; } .woocommerce-MyAccount-navigation li.is-active a { background: var(--mf-primary); color: var(--mf-bg); opacity: 1; } .woocommerce-MyAccount-content { background: var(--mf-card-bg); border: 1px solid var(--mf-border); border-radius: 4px; padding: 30px; margin-top: 20px; } @media (min-width: 768px) { .woocommerce-MyAccount-content { padding: 40px; } } / --- Productpagina: tabs (beschrijving, reviews) --- / .woocommerce-tabs ul.tabs li { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; } .woocommerce-tabs ul.tabs li.active a { color: var(--mf-primary); } .woocommerce-tabs .panel { color: var(--mf-text); } / --- Paginering --- / .woocommerce-pagination .page-numbers li a, .woocommerce-pagination .page-numbers li span { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--mf-text); } .woocommerce-pagination .page-numbers li .current { background: var(--mf-primary); color: var(--mf-bg); } / --- Sortering dropdown rij + resultaattekst boven de grid --- */ .woocommerce-ordering select, .woocommerce-result-count { font-family: 'Plus Jakarta Sans', sans-serif; }