/* ========================================================= CLOSET VAN VAL — KLEUREN SYSTEEM (GLOBAL) Doel: hele site consistente kleuren (links, buttons, forms) Kleuren: Pink + Claret ========================================================= */ :root{ --cvv-pink: #FFBDC5; --cvv-pink-hover: #f6aab4; --cvv-claret: #670626; --cvv-text: #2b2b2b; --cvv-white: #ffffff; --cvv-border: rgba(103, 6, 38, .18); --cvv-focus: rgba(103, 6, 38, .28); } /* ---------- Basis tekst & links ---------- */ body{ color: var(--cvv-text); } a, .alink, a:visited, .alink:visited{ color: var(--cvv-claret); text-decoration: none; } a:hover, .alink:hover{ color: var(--cvv-pink-hover); text-decoration: underline; text-underline-offset: 4px; } /* ---------- Primary buttons (belangrijkste knoppen) ---------- */ /* Magento gebruikt vaak: .action.primary of .action-primary */ .action.primary, .action-primary, button.action.primary, a.action.primary, .pagebuilder-button-primary, a.pagebuilder-button-primary, button.pagebuilder-button-primary{ background: var(--cvv-pink) !important; border: 1px solid var(--cvv-pink) !important; color: var(--cvv-claret) !important; font-weight: 700; border-radius: 10px; transition: .15s ease; } .action.primary:hover, .action-primary:hover, button.action.primary:hover, a.action.primary:hover, .pagebuilder-button-primary:hover, a.pagebuilder-button-primary:hover, button.pagebuilder-button-primary:hover{ background: var(--cvv-pink-hover) !important; border-color: var(--cvv-pink-hover) !important; color: var(--cvv-claret) !important; } /* ---------- Secondary buttons (minder belangrijke knoppen) ---------- */ .action.secondary, .action-secondary, .pagebuilder-button-secondary, a.pagebuilder-button-secondary, button.pagebuilder-button-secondary{ background: transparent !important; border: 1px solid var(--cvv-claret) !important; color: var(--cvv-claret) !important; font-weight: 700; border-radius: 10px; transition: .15s ease; } .action.secondary:hover, .action-secondary:hover, .pagebuilder-button-secondary:hover, a.pagebuilder-button-secondary:hover, button.pagebuilder-button-secondary:hover{ background: var(--cvv-claret) !important; color: var(--cvv-white) !important; } /* ---------- Form inputs (mooie focus/klik rand) ---------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], select, textarea{ border-radius: 10px; border: 1px solid var(--cvv-border); } input:focus, select:focus, textarea:focus{ outline: none !important; border-color: var(--cvv-claret) !important; box-shadow: 0 0 0 3px var(--cvv-focus) !important; } /* ---------- Labels / badges (sale / nieuw) ---------- */ /* Werkt in veel thema's; als jouw thema andere labels gebruikt, passen we dat later aan */ .sale, .product-label, .product-labels span, .badge, .label{ background: var(--cvv-claret) !important; color: var(--cvv-white) !important; border-radius: 999px; } /* ---------- Header / menu ---------- */ .header__info-bar{ background: var(--cvv-pink); color: var(--cvv-claret); } .header__nav a{ color: var(--cvv-claret); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } /* Hover: zichtbaar op witte header */ .header__nav a:hover{ color: var(--cvv-claret); text-decoration: underline; text-underline-offset: 6px; } /* Dropdown achtergrond (desktop) */ @media (min-width: 769px){ .header__nav ul.sm_megamenu_menu li.parent div.sm-megamenu-child{ background: var(--cvv-pink); } } /* ---------- Footer ---------- */ .page-footer, .footer-bottom{ background: var(--cvv-claret); color: var(--cvv-white); } .page-footer a{ color: var(--cvv-white); } .page-footer a:hover{ color: var(--cvv-pink); } /* ---------- Mobiel menu (als nav open is) ---------- */ @media (max-width: 768px){ body.nav-open .navigation, body.nav-open .navigation *{ background-color: var(--cvv-pink) !important; } body.nav-open a{ color: var(--cvv-claret) !important; font-weight: 800 !important; text-transform: uppercase !important; } } /* ---------- Optioneel: selectie kleur (als je tekst selecteert) ---------- */ ::selection{ background: var(--cvv-pink); color: var(--cvv-claret); }

JavaScript lijkt te zijn uitgeschakeld in uw browser. Voor de beste gebruikerservaring, zorg ervoor dat javascript ingeschakeld is voor uw browser.