/* Sumisu Knives — redesign layer (loaded AFTER style.css). Additive, scoped. Visual reference: /designs/. No global reset, no markup changes. */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root{ --sk-ink:#0d0d0d; --sk-ink2:#171717; --sk-ink3:#252525; --sk-gold:#c8a96e; --sk-gold2:#e2c898; --sk-cta:#b87935; --sk-cta2:#e6b76f; --sk-japan:#A90000; --sk-japan-soft:rgba(169,0,0,.16); --sk-warm:#f7f3ee; --sk-cream:#ede5d8; --sk-muted:#9a8c7e; --sk-light:#f0ebe3; --sk-white:#ffffff; --sk-transition:all .35s cubic-bezier(.4,0,.2,1); --sk-serif:"Cormorant Garamond",serif; --sk-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } /* ============================================================ 2. TYPOGRAPHY — clean sans body, refined serif headings ============================================================ */ body{ font-family:var(--sk-sans); } h1,h2,h3,h4{ font-family:var(--sk-serif); font-weight:400; line-height:1.14; } /* ============================================================ 3. FOOTER — premium dark (design: dark ink, gold accents) Scoped to the footer landmark so nothing else is affected. ============================================================ */ footer[role="contentinfo"]{ background:var(--sk-ink); color:rgba(240,235,227,.72); } footer[role="contentinfo"] a{ color:rgba(240,235,227,.72); transition:var(--sk-transition); } footer[role="contentinfo"] a:hover{ color:var(--sk-gold2); } /* Headings + option titles -> refined serif in gold */ footer[role="contentinfo"] h2, footer[role="contentinfo"] h3, footer[role="contentinfo"] h4, footer[role="contentinfo"] .footer-option-title{ font-family:var(--sk-serif); color:var(--sk-gold2); } /* ============================================================ 4. HEADER — premium dark (design: dark bar + gold accents) Topbar is already dark; this darkens the white .header-main and fixes contrast for logo, menu, icons and the mobile toggle. Only TOP-LEVEL mega-menu links are recolored (>) so the white dropdown submenus keep their dark text. ============================================================ */ .header-main{ background-color:#171717 !important; } .announce span:before { content: '◆'; font-size: 7px; margin-right: 8px; opacity: .65; } /* Logo -> white on dark */ #header-desktop .header-logo img, #header-mobile .header-logo img, .header-logo img{ filter:brightness(0) invert(1); } /* Top-level menu links -> cream, gold on hover / current */ #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link{ color:rgba(240,235,227,.82) !important; } #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{ color:var(--sk-gold2) !important; } /* Header icons (cart, account, search) -> cream */ .header-icons i{ color:rgba(240,235,227,.88) !important; } /* Mobile hamburger lines -> cream so the toggle stays visible */ #mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-animated-inner, #mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-animated-inner::before, #mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-animated-inner::after{ background:rgba(240,235,227,.92) !important; } /* Mega Menu bar own background -> transparent so the dark .header-main shows. Top-level wrapper + menu bar + toggle only; .mega-sub-menu dropdowns keep their own (light) bg. */ #mega-menu-wrap-header-menu, #mega-menu-wrap-header-menu-frans, #mega-menu-wrap-header-menu #mega-menu-header-menu, #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans, #mega-menu-wrap-header-menu .mega-menu-toggle, #mega-menu-wrap-header-menu-frans .mega-menu-toggle{ background:transparent !important; box-shadow:none !important; } /* ============================================================ 5. HEADER LAYOUT — match homepage design (CSS reflow, no markup changes) Scoped to #header-desktop so the mobile header is untouched. ============================================================ */ /* Top bar: refined dark premium */ .top-bar{ background:#0d0d0d !important; border-bottom: 1px solid rgba(255, 255, 255, .07);} .top-bar .row{ align-items:center; } .topbar-item-usp{ font-size:11px !important; letter-spacing:.07em; color:rgba(240,235,227,.78); } .topbar-item-usp strong{ color:var(--sk-gold2); font-weight:600; } .topbar-item-usp i{ color:var(--sk-gold) !important; } .header-review-txt,.header-review-number{ color:rgba(240,235,227,.78); } /* Desktop main row: logo (left) | nav (center) | actions (right) */ #header-desktop .row{ display:flex !important; align-items:center; gap:24px; } #header-desktop .header-logo{ flex:0 0 auto; } #header-desktop .header-menu{ flex:1 1 auto; display:flex; justify-content:center; } #header-desktop .search-bar{ flex:0 0 auto; width:190px; } #header-desktop .header-icons{ flex:0 0 auto; gap:16px; align-items:center; } #header-desktop .header-logo img{ max-width:none !important; height:46px !important; width:auto !important; } /* Center the mega-menu items horizontally */ #header-desktop #mega-menu-header-menu, #header-desktop #mega-menu-header-menu-frans{ display:flex !important; justify-content:center !important; align-items:center; } /* Nav links typography -> design (Inter, uppercase, spaced) */ #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link{ font-family:var(--sk-sans) !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important; } /* Cart -> gold pill (icon + counter) */ #header-desktop .cart-link{ background:linear-gradient(135deg,var(--sk-cta),var(--sk-cta2)); padding:9px 15px; border-radius:999px; box-shadow:0 10px 26px rgba(184,121,53,.22); display:inline-flex; align-items:center; gap:7px; transition:var(--sk-transition); } #header-desktop .cart-link:hover{ filter:brightness(1.05); } #header-desktop .cart-link i{ color:#111 !important; font-size:16px !important; } #header-desktop .cart-link .cart-counter{ background:#fff; color:#111; min-width:18px; height:18px; padding:0 4px; border-radius:999px; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; } /* Search field on dark -> rounded pill, light text */ #header-desktop .search-bar input{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(200,169,110,.22) !important; color:#fff !important; border-radius:999px !important; } #header-desktop .search-bar input::placeholder{ color:rgba(240,235,227,.5) !important; } /* ============================================================ 6. HEADER EXACT-MATCH — top bar two tiers, moved search, SVG icons ============================================================ */ /* Top bar -> stack: USP slider (full width) above trust + search + language */ .top-bar .row{ display:block !important; } .topbar-usps{ width:100% !important; } .topbar-extra{ width:100% !important; display:flex !important; align-items:center; gap:14px; } .topbar-extra .topbar-info{ margin-right:auto; } /* Moved search -> compact pill in the top bar (design: top-right) */ .topbar-search{ flex:0 0 auto; width:210px; } .topbar-search input{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(200,169,110,.22) !important; color:#fff !important; border-radius:999px !important; height:30px !important; font-size:12px !important; } .topbar-search input::placeholder{ color:rgba(240,235,227,.5) !important; } /* SVG icons (exact design glyphs) */ #header-desktop .header-icons a svg, #header-mobile .header-icons a svg{ display:block; } #header-desktop .header-icons a:not(.cart-link) svg{ stroke:rgba(240,235,227,.9) !important; } #header-desktop .cart-link svg{ stroke:#111 !important; } #header-mobile .header-icons a svg{ stroke:rgba(240,235,227,.92) !important; } /* Design action order: account first, cart pill last */ #header-desktop .header-icons{ display:flex; } #header-desktop .header-icons .cart-link{ order:2; } /* ============================================================ 7. HEADER FINETUNE — colors (3 tiers), cart pill text+counter, search width, language pill, marquee, discount banner ============================================================ */ /* --- 3 tiers like design --- */ .topbar-usps{ background:#080808 !important; } /* top-top: USP slider */ .top-bar{ background:#333333 !important; } /* top: trust + search + lang */ .topbar-extra{ background:rgba(255,255,255,.025); border-top:1px solid rgba(255,255,255,.06); } .header-main{ background:#333333 !important; border-bottom: 1px solid rgba(200, 169, 110, .16);} /* header (was #171717) */ /* --- Continuous USP ticker (marquee) --- */ .swiper-topbar-usps .swiper-wrapper{ transition-timing-function:linear !important; } .swiper-topbar-usps .topbar-item-usp{ width:auto !important; } /* --- Cart pill: label + inline counter inside the button --- */ #header-desktop .cart-link{ padding:8px 16px; gap:8px; } #header-desktop .cart-link .cart-label{ color:#111; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #header-desktop .cart-link .cart-counter{ position:static !important; top:auto !important; right:auto !important; background:#fff !important; color:#111 !important; box-shadow:none !important; width:18px; height:18px; min-width:18px; font-size:10px; font-weight:800; } #header-mobile .cart-label{ display:none !important; } /* mobile stays icon-only */ /* --- Search: shorter, like design --- */ .topbar-search{ width:168px !important; } .topbar-search input{ height:28px !important; } /* --- Language selector as a pill (flag + code) --- */ .language-selector .current-language{ border:1px solid rgba(200,169,110,.20) !important; border-radius:999px !important; padding:4px 10px !important; background:rgba(255,255,255,.03) !important; gap:7px !important; height: 28px !important; } .language-selector .current-language img{ width:18px !important; height:auto !important; border-radius:2px; } .language-selector .lang-code{ color:rgba(240,235,227,.9); font-size:11px; font-weight:700; letter-spacing:.06em; } .language-selector .current-language i{ color:rgba(240,235,227,.55) !important; font-size:9px !important; } /* --- Discount/action banner -> premium dark + gold --- */ .discount_banner_page{ background:#0d0d0d !important; color:var(--sk-gold2) !important; border-bottom:1px solid rgba(200,169,110,.18); letter-spacing:.03em; } .discount_banner_page p, .discount_banner_page a, .discount_banner_page a span, .discount_banner_page strong{ color:var(--sk-gold2) !important; } .discount_banner_page .fas{ color:var(--sk-gold) !important; } /* ============================================================ 8. LOGO — show original colors (no invert) + larger ============================================================ */ #header-desktop .header-logo img, #header-mobile .header-logo img, .header-logo img{ filter:none !important; } #header-desktop .header-logo img{ height:58px !important; max-width:none !important; width:auto !important; } #header-mobile .header-logo img{ height:46px !important; max-width:none !important; width:auto !important; } /* ============================================================ 11. MEGA MENU dropdowns -> premium dark + account circle + cart underline fix ============================================================ */ /* Dropdown panels (grid + flyout) -> dark premium */ #mega-menu-wrap-header-menu .mega-sub-menu{ background:#fff !important; border:1px solid rgba(0,0,0,.08) !important; box-shadow:0 18px 50px rgba(0,0,0,.16) !important; } #mega-menu-wrap-header-menu .mega-sub-menu .mega-menu-column, #mega-menu-wrap-header-menu .mega-sub-menu .mega-menu-row{ background:transparent !important; } #mega-menu-wrap-header-menu .mega-sub-menu, #mega-menu-wrap-header-menu .mega-sub-menu p, #mega-menu-wrap-header-menu .mega-sub-menu li, #mega-menu-wrap-header-menu .mega-sub-menu span{ color:#111 !important; } #mega-menu-wrap-header-menu .mega-sub-menu a, #mega-menu-wrap-header-menu .mega-sub-menu a.mega-menu-link{ color:#111 !important; text-decoration:none !important; } #mega-menu-wrap-header-menu .mega-sub-menu a:hover, #mega-menu-wrap-header-menu .mega-sub-menu a.mega-menu-link:hover{ color:var(--sk-cta) !important; } /* column / widget titles (.textwidget heading) -> gold serif, larger + bolder */ #mega-menu-wrap-header-menu .mega-sub-menu .mega-block-title, #mega-menu-wrap-header-menu .mega-sub-menu .widget-title, #mega-menu-wrap-header-menu .mega-sub-menu h1, #mega-menu-wrap-header-menu .mega-sub-menu h2, #mega-menu-wrap-header-menu .mega-sub-menu h3, #mega-menu-wrap-header-menu .mega-sub-menu h4, #mega-menu-wrap-header-menu .mega-sub-menu .textwidget, #mega-menu-wrap-header-menu .mega-sub-menu .textwidget p, #mega-menu-wrap-header-menu .mega-sub-menu .textwidget a{ color:var(--sk-gold) !important; font-family:var(--sk-serif) !important; font-size:22px !important; font-weight:600 !important; line-height:1.2 !important; } /* Account icon -> circle (design) */ #header-desktop .header-icons a:not(.cart-link){ width:42px; height:42px; border:1px solid rgba(240,235,227,.30); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:var(--sk-transition); } #header-desktop .header-icons a:not(.cart-link):hover{ border-color:var(--sk-gold2); } #header-desktop .header-icons a:not(.cart-link) svg{ stroke:rgba(240,235,227,.9) !important; } /* Cart pill text -> no underline */ #header-desktop .cart-link, #header-desktop .cart-link *, .cart-link .cart-label{ text-decoration:none !important; } /* ============================================================ 12. ANNOUNCE bar -> design CSS marquee ticker ============================================================ */ .announce{ background:#080808; color:var(--sk-gold2); height:38px; display:flex; align-items:center; overflow:hidden; font-size:11px; letter-spacing:.13em; text-transform:uppercase; width:100%; } .announce-track{ display:inline-flex; gap:64px; white-space:nowrap; padding-left:64px; will-change:transform; animation:sk-ticker 32s linear infinite; } .announce-track span{ display:inline-block; } @keyframes sk-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* keep the top bar tiers clean now that USP swiper is gone */ .top-bar .row{ display:block !important; padding:0 !important; max-width:none !important; } .topbar-extra{ max-width:1400px; margin:0 auto; padding:8px 40px; } @media(max-width:760px){ .topbar-extra{ padding:8px 18px; } } /* Larger header logo */ #header-desktop .header-logo img{ height:65px !important; } #header-mobile .header-logo img{ height:54px !important; } /* ============================================================ 13. Top-level menu hover -> gold (beat Mega Menu plugin's white hover) ============================================================ */ html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link:hover, html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item:hover > a.mega-menu-link, html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link:hover, html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item:hover > a.mega-menu-link, html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{ color:var(--sk-gold2) !important; background:transparent !important; } /* ============================================================ 14. Topbar search (shorter + black) + uniform header-top color ============================================================ */ .topbar-search{ width:auto !important; flex:0 0 auto; } .topbar-search form.asearch{ width:175px !important; margin:0 !important; height: 28px} .topbar-search .input_search, .topbar-search #keyword{ width:175px !important; max-width:175px !important; min-width:0 !important; background:#0d0d0d !important; color:#fff !important; border:1px solid rgba(200,169,110,.25) !important; border-radius:999px !important; height:27px !important; font-size:12px !important; padding:0 14px !important; box-shadow:none !important; } .topbar-search .input_search::placeholder{ color:rgba(240,235,227,.5) !important; } .topbar-search form.asearch button, .topbar-search #mybtn{ background:transparent !important; color:rgba(240,235,227,.7) !important; } /* Header-top band: one even color (fixes topbar-extra wrong bg) */ .top-bar{ background:#333333 !important; } .topbar-extra{ background:transparent !important; border-top:none !important; } /* ============================================================ 15. asearch widget in topbar -> short BLACK pill (overrides the widget's own inline white style) ============================================================ */ .topbar-search .search_bar{ width:178px !important; max-width:178px !important; } .topbar-search form.asearch{ background:#3c3c3c !important; border:1px solid rgba(200,169,110,.25) !important; border-radius:999px !important; width:178px !important; padding:0 0 0 14px !important; } .topbar-search form.asearch .input_search, .topbar-search form.asearch #keyword{ background:transparent !important; border:none !important; box-shadow:none !important; color:#fff !important; width:100% !important; height:26px !important; font-size:12px !important; padding:0 !important; } .topbar-search form.asearch .input_search::placeholder{ color:rgba(240,235,227,.5) !important; } .topbar-search form.asearch #mybtn, .topbar-search form.asearch #mybtn i{ color:rgba(240,235,227,.7) !important; background:transparent !important; } /* ============================================================ 18. Topbar-extra -> eigen full-width balk (#383838), content als .row (1280) ============================================================ */ .top-bar{ background:#383838 !important; } /* full-width balk-kleur (announce dekt eigen tier af) */ .topbar-extra{ background:transparent !important; border-top:none !important; } .topbar-extra.row{ max-width:1280px !important; margin:0 auto !important; padding:4px 0 !important; display:flex !important; align-items:center; gap:14px; justify-content:flex-start; } @media(max-width:760px){ .topbar-extra.row{ padding:8px 18px !important; } } /* Trustpilot-regel links (vervangt oude topbar-info) */ .topbar-extra .header-top-left{ display:flex; align-items:center; gap:8px; margin:0 auto 0 0; color:rgba(240,235,227,.78); font-size:11px; letter-spacing:.02em; white-space:nowrap; } .topbar-extra .header-top-left .stars{ display:inline-flex; gap:3px; line-height:1; } .topbar-extra .header-top-left .stars span{ width:18px; height:18px; font-size:11px; line-height:1; font-family:Inter,sans-serif; background:#00b67a; color:#fff; display:inline-flex; align-items:center; justify-content:center; } a.header-top-left, .topbar-extra a.header-top-left{ text-decoration:none !important; cursor:pointer; } .topbar-extra .header-top-left .tp-word{ color:var(--sk-gold2); text-decoration:none !important; } .topbar-extra a.header-top-left:hover, .topbar-extra a.header-top-left:hover .tp-word{ text-decoration:none !important; } @media(max-width:760px){ .topbar-extra.row{ flex-wrap:wrap; } .topbar-extra .header-top-left{ font-size:10px; gap:6px; } } /* ============================================================ 19. FOOTER 2026 — exact /designs/ .final + .footer rebuild Markup lives in footer.php under