/* ========================================================================== THEME: Cibazaar (SL-Computers blueprint, Step 6 Phase B) -------------------------------------------------------------------------- Visual port of slcomputers.nl. Loaded by shop/includes/header.php only when the active shop theme is "cibazaar" — non-cibazaar shops never download it. Why a separate file? - Keeps `input.css` (Tailwind) lean: ~180 lines fewer. - Themes are interchangeable: switching theme reloads a different stylesheet instead of carrying every theme's overrides in one big bundle. - Self-hosted webfonts (Lexend + Jost) only ship to visitors who actually see the cibazaar look. Self-hosted Lexend + Jost - Files must live under `/assets/fonts/lexend/` and `/assets/fonts/jost/`. - See `/assets/fonts/cibazaar.README.md` for download instructions. - When the woff2 files are absent the @font-face simply falls through to the next font in the stack (Inter → system-ui), so the theme stays usable even before fonts are deployed. Tailwind variables we reuse - `var(--color-blue-600)` etc. are emitted by Tailwind into the global `:root` so they remain reachable from this static stylesheet. - The `--shop-*` variables are declared by the base `[data-shop-theme]` block in input.css; we override the ones that need a Cibazaar value here. ========================================================================== */ /* --- Self-hosted webfonts ----------------------------------------------- */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/lexend/Lexend-Regular.woff2') format('woff2'); } @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/lexend/Lexend-Medium.woff2') format('woff2'); } @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/lexend/Lexend-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/lexend/Lexend-Bold.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jost/Jost-Medium.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jost/Jost-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jost/Jost-Bold.woff2') format('woff2'); } /* --- Token block (light) ------------------------------------------------ We override BOTH `--shop-*` tokens (used by the small set of `.shop-*` utilities) AND the global `--app-*` tokens (used by *every* Tailwind utility on the storefront — `bg-app-surface`, `text-app-text`, `border-app-border`, `bg-app-primary`, …). Overriding only the shop tokens would not be enough because most existing pages use the app-token utilities. Because `data-shop-theme` only ever lives on shop ``, re-mapping app-tokens here cannot bleed into admin/portal pages. */ [data-shop-theme="cibazaar"] { /* shop tokens (used by .shop-spec-table, .btn-primary overrides, etc.) */ --shop-primary: #3a7af5; --shop-primary-hover: #285ec7; --shop-primary-soft-bg: #f8fafd; --shop-accent: #3a7af5; --shop-link: #3a7af5; --shop-link-hover: #285ec7; --shop-text: #212121; --shop-text-secondary: #454545; --shop-text-muted: #666666; --shop-divider-light: #f5f5f5; --shop-border: #eeeeee; --shop-border-soft: #eaeaea; --shop-surface: #ffffff; --shop-surface-alt: #f8f9fa; --shop-surface-hover: #eef5ff; --shop-danger: #dc3545; --shop-danger-hover: #bd2130; --shop-card-radius: 12px; --shop-control-radius: 8px; --shop-card-shadow: 0 5px 20px rgba(0, 0, 0, 0.03); --shop-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.06); --shop-button-glow: 0 4px 12px rgba(58, 122, 245, 0.3); /* Sale-badge (Spotlight deals tab + future smartproducts_tabs sale icon). */ --shop-sale-from: #8549e3; --shop-sale-to: #6935b8; /* Cibazaar signature dark CTA (used on auth-card submit, see below). */ --cibazaar-cta-bg: #212121; --cibazaar-cta-bg-hover: #000000; --shop-hero-from: #f8fafd; --shop-hero-via: #ffffff; --shop-hero-to: #eef5ff; --shop-effect-emoji: ''; /* App-tokens — these power EVERY `bg-app-*`, `text-app-*`, `border-app-*` Tailwind utility on the storefront. Rewriting them here gives the whole page the Cibazaar palette without touching individual templates. */ --app-bg: #ffffff; --app-surface: #ffffff; --app-surface-alt: #f8f9fa; --app-text: #212121; --app-text-secondary: #454545; --app-text-muted: #666666; --app-text-label: #888888; --app-border: #eeeeee; --app-border-light: #f5f5f5; --app-primary: #3a7af5; --app-primary-hover: #285ec7; --app-hover-row: #f8fafd; --app-input-bg: #ffffff; --app-header-bg: #ffffff; --app-header-border: #eeeeee; } /* --- Token block (dark) ------------------------------------------------- */ html.dark[data-shop-theme="cibazaar"] { --shop-primary: #5a93ff; --shop-primary-hover: #3a7af5; --shop-primary-soft-bg: oklch(0.27 0.05 250); --shop-text: #f1f5f9; --shop-text-secondary: #cbd5e1; --shop-text-muted: #94a3b8; --shop-divider-light: oklch(0.25 0.02 250); --shop-border: oklch(0.30 0.02 250); --shop-border-soft: oklch(0.28 0.02 250); --shop-surface: oklch(0.20 0.02 250); --shop-surface-alt: oklch(0.17 0.02 250); --shop-surface-hover: oklch(0.27 0.06 250); --shop-card-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); --shop-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.35); --shop-button-glow: 0 4px 12px rgba(90, 147, 255, 0.4); --cibazaar-cta-bg: #0f172a; --cibazaar-cta-bg-hover: #1e293b; --shop-hero-from: oklch(0.20 0.04 250); --shop-hero-via: oklch(0.17 0.02 250); --shop-hero-to: oklch(0.22 0.06 250); /* App-token dark overrides — slate-tinted blue surfaces, brighter blue primary so contrast against the dark surface stays accessible. */ --app-bg: oklch(0.18 0.02 250); --app-surface: oklch(0.20 0.02 250); --app-surface-alt: oklch(0.17 0.02 250); --app-text: #f1f5f9; --app-text-secondary: #cbd5e1; --app-text-muted: #94a3b8; --app-text-label: #64748b; --app-border: oklch(0.30 0.02 250); --app-border-light: oklch(0.25 0.02 250); --app-primary: #5a93ff; --app-primary-hover: #3a7af5; --app-hover-row: oklch(0.27 0.06 250); --app-input-bg: oklch(0.17 0.02 250); --app-header-bg: oklch(0.20 0.02 250); --app-header-border: oklch(0.28 0.02 250); } /* --- Font assignment via body class ------------------------------------- We previously expressed this as a Tailwind `@utility font-cibazaar`. With the per-theme split that is no longer needed: the body simply gets the class `.shop-theme-cibazaar` and we apply the font here. Falls back through Inter → system-ui so pages stay readable even when the woff2 files have not been uploaded yet. */ body.shop-theme-cibazaar, .shop-theme-cibazaar { font-family: 'Lexend', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Optional accent font for headings/numerics. Apply via class `.font-cibazaar-accent` (kept compatible with the previous utility name). */ .shop-theme-cibazaar .font-cibazaar-accent, [data-shop-theme="cibazaar"] .font-cibazaar-accent { font-family: 'Jost', 'Inter', system-ui, -apple-system, sans-serif; } /* --- Buttons ------------------------------------------------------------ */ [data-shop-theme="cibazaar"] .btn-primary, [data-shop-theme="cibazaar"] button[type="submit"]:not(.btn-secondary):not(.btn-row-action-blue):not(.btn-row-action-red):not(.btn-row-action-amber):not(.btn-link):not(.shop-btn-not-primary) { background-color: var(--shop-primary); border-color: var(--shop-primary); color: #ffffff; border-radius: var(--shop-control-radius); transition: background-color .15s ease, box-shadow .2s ease, transform .15s ease; } [data-shop-theme="cibazaar"] .btn-primary:hover, [data-shop-theme="cibazaar"] button[type="submit"]:not(.btn-secondary):not(.btn-row-action-blue):not(.btn-row-action-red):not(.btn-row-action-amber):not(.btn-link):not(.shop-btn-not-primary):hover { background-color: var(--shop-primary-hover); border-color: var(--shop-primary-hover); box-shadow: var(--shop-button-glow); transform: translateY(-1px); } /* --- Cards -------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .card { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); transition: box-shadow .25s ease, transform .15s ease; } [data-shop-theme="cibazaar"] .card:hover { box-shadow: var(--shop-card-shadow-hover); } /* --- Auth pages (login / register / forgot / reset / verify / pending) The wrapper is `.shop-auth-card` (added on those pages). On Cibazaar we override the base submit-button to the signature dark CTA. */ [data-shop-theme="cibazaar"] .shop-auth-card { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-auth-card button[type="submit"] { background-color: var(--cibazaar-cta-bg); border-color: var(--cibazaar-cta-bg); color: #ffffff; } [data-shop-theme="cibazaar"] .shop-auth-card button[type="submit"]:hover { background-color: var(--cibazaar-cta-bg-hover); border-color: var(--cibazaar-cta-bg-hover); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transform: translateY(-1px); } /* --- Modern spec-table look (used on /shop/product.php) Hooks added to product.php: .shop-spec-card → outer wrapper .shop-spec-table → .shop-spec-row → .shop-spec-attr →
attribute cell .shop-spec-val → value cell */ [data-shop-theme="cibazaar"] .shop-spec-card { border-radius: var(--shop-control-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-spec-table .shop-spec-attr { width: 35%; background-color: var(--shop-surface-alt); color: var(--shop-text-secondary); font-weight: 600; } [data-shop-theme="cibazaar"] .shop-spec-table .shop-spec-row:hover { background-color: var(--shop-surface-hover); } /* Backwards-compatible selectors for older spec-table markup. */ [data-shop-theme="cibazaar"] .spec-table tbody tr:hover, [data-shop-theme="cibazaar"] table.spec-table tbody tr:hover, [data-shop-theme="cibazaar"] .product-specs tr:hover { background-color: var(--shop-surface-hover); } /* --- Subtle hover-bg on links + nav items inside the shop --------------- */ [data-shop-theme="cibazaar"] .shop-nav-item:hover, [data-shop-theme="cibazaar"] a.shop-link:hover { background-color: var(--shop-primary-soft-bg); color: var(--shop-primary-hover); } /* --- Hero gradient ------------------------------------------------------ */ [data-shop-theme="cibazaar"] .shop-hero-bg { background: linear-gradient(135deg, var(--shop-hero-from), var(--shop-hero-via), var(--shop-hero-to)); } /* --- Spotlight block (tabs + cards) Hooks added in shop/index.php and shop/includes/product_card.php: [data-shop-spotlight] → outer section .shop-spotlight-tabs → tab-bar container .shop-spotlight-tab.is-active → active tab .shop-product-card → reusable card .shop-product-card-badge → top-left discount pill */ [data-shop-theme="cibazaar"] .shop-spotlight-tab { border-radius: var(--shop-control-radius) var(--shop-control-radius) 0 0; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } [data-shop-theme="cibazaar"] .shop-spotlight-tab:hover { background-color: var(--shop-primary-soft-bg); color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-spotlight-tab.is-active { color: var(--shop-primary); border-color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-product-card > a { border-radius: var(--shop-card-radius); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } [data-shop-theme="cibazaar"] .shop-product-card:hover > a { transform: translateY(-4px); box-shadow: var(--shop-button-glow); border-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-product-card-badge { background: linear-gradient(135deg, var(--shop-sale-from, #8549e3), var(--shop-sale-to, #6935b8)); box-shadow: 0 4px 10px rgba(133, 73, 227, 0.35); } /* --- Mega-menu (Cibazaar fly-out) Hooks added in shop/includes/header.php: [data-shop-megamenu] → outer nav .shop-megamenu-trigger → top-level button with caret .shop-megamenu-pane → flyout panel .shop-megamenu-pane-title → "View all X" header link .shop-megamenu-pane-link → child-category links Hover/click open is handled by inline JS; this CSS just polishes the look on Cibazaar (rounder pane, primary-blue accent, soft fade-in). */ [data-shop-theme="cibazaar"] .shop-megamenu-pane { border-radius: var(--shop-card-radius); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12); animation: shop-megamenu-fade .15s ease-out; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-title { color: var(--shop-primary); letter-spacing: 0.18em; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-link:hover { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-megamenu-trigger[aria-expanded="true"] { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-megamenu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } @keyframes shop-megamenu-fade { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-shop-theme="cibazaar"] .shop-megamenu-pane { animation: none; } } /* --- SmartProducts carousels (Cibazaar arrow + kicker styling) Hooks added in shop/index.php: [data-shop-smartproducts] → outer section .shop-smartproducts-kicker → category label kicker .shop-smartproducts-arrow → both prev/next buttons .shop-smartproducts-scroller → horizontal scroll container .shop-smartproducts-cell → each card cell */ [data-shop-theme="cibazaar"] .shop-smartproducts-kicker { color: var(--shop-primary); letter-spacing: 0.18em; } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow { border-radius: 9999px; box-shadow: var(--shop-card-shadow); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow:hover { transform: translateY(-50%) scale(1.05); box-shadow: var(--shop-button-glow); background-color: var(--shop-primary-soft-bg); border-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow-prev:hover { transform: translateY(-50%) translateX(-12px) scale(1.05); } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow-next:hover { transform: translateY(-50%) translateX(12px) scale(1.05); } /* --- Newsletter popup (Cibazaar entrance animation) Hooks added in shop/includes/newsletter_popup.php: .shop-newsletter-popup → backdrop .shop-newsletter-popup-card → modal card .shop-newsletter-popup-icon → top-left envelope icon */ [data-shop-theme="cibazaar"] .shop-newsletter-popup-card { border-radius: var(--shop-card-radius); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25); animation: shop-newsletter-pop .35s cubic-bezier(.2, .9, .25, 1.05); } [data-shop-theme="cibazaar"] .shop-newsletter-popup-icon { background: linear-gradient(135deg, var(--shop-primary), #285ec7); color: #ffffff; } @keyframes shop-newsletter-pop { 0% { transform: translateY(20px) scale(.96); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-shop-theme="cibazaar"] .shop-newsletter-popup-card { animation: none; } } /* --- WhatsApp bubble (Cibazaar pulse-ring) The base bubble lives in input.css; on Cibazaar we layer a soft double-ring pulse so the chat catches the eye without being noisy. */ [data-shop-theme="cibazaar"] .shop-whatsapp-bubble { position: fixed; } [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::before, [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; border: 2px solid rgba(37, 211, 102, 0.5); animation: shop-whatsapp-pulse 2.4s ease-out infinite; pointer-events: none; } [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::after { animation-delay: 1.2s; } @keyframes shop-whatsapp-pulse { 0% { transform: scale(1); opacity: 0.7; } 80% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::before, [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::after { animation: none; opacity: 0; } } /* --- Account sidebar (Cibazaar list-group) Hooks added in shop/includes/account_sidebar.php: .shop-account-sidebar → outer aside .shop-account-sidebar-link → each link .is-active → active link (also has aria-current) The default theme already renders an inset blue left-border via `border-l-4 border-blue-600 bg-blue-50/60` Tailwind utilities. On Cibazaar we strengthen it with the brand blue + a subtle right-arrow indicator on hover, matching the SL-Computers list-group blueprint. */ [data-shop-theme="cibazaar"] .shop-account-sidebar > div { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-account-sidebar-link { position: relative; } [data-shop-theme="cibazaar"] .shop-account-sidebar-link:hover { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-account-sidebar-link.is-active { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); border-left-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-account-sidebar-link.is-active::after { content: '›'; position: absolute; right: 1rem; color: var(--shop-primary); font-weight: 700; font-size: 1.25rem; line-height: 1; } /* --- Dashboard tiles (Cibazaar lift-on-hover) Hooks added in shop/account/dashboard.php: .shop-dashboard-tile → all tiles .shop-dashboard-tile-wishlist → wishlist variant (rose accent) */ [data-shop-theme="cibazaar"] .shop-dashboard-tile { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-dashboard-tile:hover { transform: translateY(-5px); box-shadow: var(--shop-button-glow); border-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-dashboard-tile-wishlist:hover { /* Pink-tinted glow on the wishlist tile, matching the heart icon. */ box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25); border-color: #fb7185; } /* --- Footer (Cibazaar 4-column blueprint) The footer markup in `shop/includes/footer.php` ships a deep-slate look as default. On Cibazaar we use a softer, brand-blue tinted dark footer that matches the SL-Computers blueprint without breaking the default theme. Hooks added in footer.php: .shop-footer → outer footer .shop-footer-brand → brand name .shop-footer-heading → column titles .shop-footer-link → list anchors .shop-footer-bottom → copyright row */ [data-shop-theme="cibazaar"] .shop-footer { background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); color: #cbd5e1; } [data-shop-theme="cibazaar"] .shop-footer-brand { /* Bigger, the Lexend stack carries the Cibazaar identity. */ letter-spacing: -0.01em; } [data-shop-theme="cibazaar"] .shop-footer-heading { color: var(--shop-primary); letter-spacing: 0.18em; position: relative; padding-bottom: 0.5rem; } [data-shop-theme="cibazaar"] .shop-footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--shop-primary); border-radius: 2px; } [data-shop-theme="cibazaar"] .shop-footer-link { color: #94a3b8; transition: color .15s ease, transform .15s ease; } [data-shop-theme="cibazaar"] .shop-footer-link:hover { color: #ffffff; transform: translateX(2px); } [data-shop-theme="cibazaar"] .shop-footer-bottom { border-top-color: rgba(148, 163, 184, 0.12); } /* ========================================== Cibazaar — Collage banners Hero/cards op homepage krijgen primary-tinted CTA-pill, zachte glow op hover en een iets prominenter gradient zodat tekst altijd leesbaar blijft. ========================================== */ [data-shop-theme="cibazaar"] .shop-collage-hero, [data-shop-theme="cibazaar"] .shop-collage-card { border: 1px solid rgba(99, 102, 241, 0.08); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); } [data-shop-theme="cibazaar"] .shop-collage-hero:hover, [data-shop-theme="cibazaar"] .shop-collage-card:hover { transform: translateY(-3px); box-shadow: var(--shop-button-glow, 0 12px 28px rgba(37, 99, 235, 0.18)); } [data-shop-theme="cibazaar"] .shop-collage-overlay { background: linear-gradient(135deg, rgba(15, 23, 42, 0.62) 0%, rgba(37, 99, 235, 0.18) 70%, rgba(37, 99, 235, 0.05) 100%); } [data-shop-theme="cibazaar"] .shop-collage-cta { background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%); color: var(--shop-primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18); } [data-shop-theme="cibazaar"] .shop-collage-hero:hover .shop-collage-cta, [data-shop-theme="cibazaar"] .shop-collage-card:hover .shop-collage-cta { box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); } /* ========================================== Cibazaar — WhatsApp panel (Fase D-3) Multi-agent flyout matcht de blauwe accenten van het thema. De avatar krijgt een primary-blauwe ring, de online-pip blijft groen voor herkenbaarheid. ========================================== */ [data-shop-theme="cibazaar"] .shop-whatsapp-panel { border-radius: var(--shop-card-radius, 1rem); border-color: rgba(37, 99, 235, 0.12); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(37, 99, 235, 0.06); } [data-shop-theme="cibazaar"] .shop-whatsapp-panel-title { color: var(--shop-primary); letter-spacing: -0.005em; } [data-shop-theme="cibazaar"] .shop-whatsapp-agent a:hover { background: var(--shop-primary-soft-bg, rgba(37, 99, 235, 0.08)); } [data-shop-theme="cibazaar"] .shop-whatsapp-avatar { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); } [data-shop-theme="cibazaar"] .shop-whatsapp-status.is-online { color: #16a34a; } /* ========================================================================== Extended (3-row) header & blue category strip — Cibazaar look -------------------------------------------------------------------------- Hooks added in shop/includes/header.php (theme-agnostic, Cibazaar styles them with this brand colour set): [data-shop-header-layout="extended_3rows"] .shop-utility-bar .shop-cat-strip → outer blue band .shop-cat-strip-link → admin-curated shortcuts .shop-megamenu-pane-grouped → grouped pane variant .shop-megamenu-sidebar → 250px left list .shop-megamenu-sidebar-link → each top-level cat link .shop-megamenu-content[*] → the right-hand kicker grid .lvl-2-header / .grandchildren → kicker title + sub list ========================================================================== */ /* 1. Blue category strip (extended_3rows). Markup in shop/includes/header.php places .shop-cat-strip as a full-width block under
(outside the max-w-7xl row), so the bar is already edge-to-edge — no ::before bleed (left/right -5000px) which would widen the document and cause horizontal scrollbars. */ [data-shop-theme="cibazaar"] .shop-site-header[data-shop-header-layout="extended_3rows"] .shop-cat-strip { background: #3a7af5; color: #ffffff; position: relative; z-index: 10; min-height: 45px; } /* 2. Make sure the cat-strip nav links are crisp white on the blue band. */ [data-shop-theme="cibazaar"] .shop-cat-strip .shop-megamenu-trigger, [data-shop-theme="cibazaar"] .shop-cat-strip .shop-cat-strip-link { color: #ffffff; font-weight: 500; letter-spacing: 0; text-transform: none; } [data-shop-theme="cibazaar"] .shop-cat-strip .shop-megamenu-trigger:hover, [data-shop-theme="cibazaar"] .shop-cat-strip .shop-cat-strip-link:hover { background: rgba(255, 255, 255, 0.18); } /* Open mega-menu on blue strip: the generic trigger rule uses --shop-primary-soft-bg (#f8fafc in light mode). Cat-strip still forces white text → unreadable. Use a translucent pill on the blue bar instead (same family as :hover above). */ [data-shop-theme="cibazaar"] .shop-cat-strip .shop-megamenu-trigger[aria-expanded="true"] { color: #ffffff; background-color: rgba(255, 255, 255, 0.18); } /* 3. Mega-menu pane (grouped Cibazaar variant). Pane sits right under the blue strip with a soft shadow, same border-radius family as the rest. */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped { border: 1px solid #ddd; border-top: 0; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); background: #ffffff; color: #333; } /* 4. Left sidebar in the grouped pane: light grey background, hover swaps to white so it visually merges with the right content area. */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar { background: #f4f4f4; border-right: 1px solid #eee; } [data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link { color: #333; border-bottom: 1px solid #eee; transition: background .15s ease, color .15s ease, font-weight .15s ease; } [data-shop-theme="cibazaar"] .shop-megamenu-sidebar-item:hover .shop-megamenu-sidebar-link, [data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link:focus { background: #ffffff; color: #3a7af5; font-weight: 700; } /* 5. Kicker headings inside the right pane — blue title with blue underline. */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .lvl-2-header, [data-shop-theme="cibazaar"] .shop-megamenu-pane:not(.shop-megamenu-pane-grouped) .lvl-2-header { color: #3a7af5; border-color: #3a7af5; font-weight: 800; } /* 6. Branded scrollbar on sidebar + content — auto-hide unless hovered. Mirrors the original Cibazaar stylesheet (lines 1932-1980). */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host] { scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .3s ease; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar:hover, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]:hover { scrollbar-color: #3a7af5 #f1f1f1; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar::-webkit-scrollbar, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]::-webkit-scrollbar { width: 6px; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar::-webkit-scrollbar-track, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]::-webkit-scrollbar-track { background: transparent; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar::-webkit-scrollbar-thumb, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; transition: background .3s ease-in-out; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar:hover::-webkit-scrollbar-thumb, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]:hover::-webkit-scrollbar-thumb { background: #3a7af5; border: 1px solid #f1f1f1; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar:hover::-webkit-scrollbar-track, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]:hover::-webkit-scrollbar-track { background: #f1f1f1; } /* 7. Hide the blue strip on mobile (screen reader still finds it). The mobile drawer (#shop-mobile-menu) covers categories on small screens. */ @media (max-width: 767px) { [data-shop-theme="cibazaar"] .shop-site-header[data-shop-header-layout="extended_3rows"] .shop-cat-strip { display: none; } } /* 8. Utility-bar (telefoon-balk) op alle thema's iets compacter; Cibazaar gebruikt een wat lichtere tint zodat het past bij de blauwe strip. */ [data-shop-theme="cibazaar"] .shop-utility-bar { background: #f8f8f8; color: #61616c; border-bottom-color: #eee; font-family: 'Jost', 'Lexend', sans-serif; text-transform: none; letter-spacing: 0; } [data-shop-theme="cibazaar"] .shop-utility-bar a { color: #212121; font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; } [data-shop-theme="cibazaar"] .shop-utility-bar a:hover, [data-shop-theme="cibazaar"] .shop-utility-bar .shop-utility-link:hover { color: #3a7af5; } /* Theme-toggle iconen (zon/scherm/maan) zitten in een groep met aparte styling. We schalen ze iets en kleuren ze grijs zodat ze niet domineren in de bar. */ [data-shop-theme="cibazaar"] .shop-utility-theme { display: inline-flex; align-items: center; gap: 4px; } [data-shop-theme="cibazaar"] .shop-utility-theme button, [data-shop-theme="cibazaar"] .shop-utility-theme [role="button"] { color: #61616c; } [data-shop-theme="cibazaar"] .shop-utility-theme button:hover { color: #3a7af5; } [data-shop-theme="cibazaar"] .shop-utility-select { color: #61616c; background: transparent; border-color: transparent; } [data-shop-theme="cibazaar"] .shop-utility-select:hover { border-color: #ddd; color: #3a7af5; } /* --- Dark mode: utility bar + grouped mega-menu (hard-coded light greys above would stay white while --app-* on the rest of the shop switches under html.dark[data-shop-theme="cibazaar"]). */ html.dark[data-shop-theme="cibazaar"] .shop-utility-bar { background: var(--app-surface-alt); color: var(--app-text-muted); border-bottom-color: var(--app-border); } html.dark[data-shop-theme="cibazaar"] .shop-utility-bar a { color: var(--app-text-secondary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-bar a:hover, html.dark[data-shop-theme="cibazaar"] .shop-utility-bar .shop-utility-link:hover { color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-theme button, html.dark[data-shop-theme="cibazaar"] .shop-utility-theme [role="button"] { color: var(--app-text-label); } html.dark[data-shop-theme="cibazaar"] .shop-utility-theme button:hover { color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-select { color: var(--app-text-secondary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-select:hover { border-color: var(--app-border); color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped { border-color: var(--app-border); background: var(--app-surface); color: var(--app-text); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar { background: var(--app-surface-alt); border-right-color: var(--app-border); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link { color: var(--app-text-secondary); border-bottom-color: var(--app-border); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-sidebar-item:hover .shop-megamenu-sidebar-link, html.dark[data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link:focus { background: var(--app-surface); color: var(--shop-primary); } /* ============================================================================ 9. CIBAZAAR ICON-PILL ROW (account / wishlist / cart) ============================================================================ Donkere ronde pills met witte iconen + gele badge rechts-bovenaan, exact zoals slcomputers.nl. Account-pill toont in twee states: "in" (donker, user ingelogd) en "out" (lichtgrijs, uitgelogd). Alleen actief op Cibazaar; andere thema's behouden de standaard "soft border" pillen uit /shop/includes/header.php. */ [data-shop-theme="cibazaar"] .shop-icon-pill { width: 40px; height: 40px; border-radius: 50%; background: #212121; color: #fff; border: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } [data-shop-theme="cibazaar"] .shop-icon-pill:hover { background: #000; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } [data-shop-theme="cibazaar"] .shop-icon-pill .shop-icon-pill-svg { color: #fff !important; width: 18px; height: 18px; stroke-width: 2; } /* Account-pill in 'out' state: lichtgrijs met donker icoon (zoals Cibazaar wanneer er geen sessie actief is). */ [data-shop-theme="cibazaar"] .shop-icon-pill-account-out { background: #e9e9e9; box-shadow: none; } [data-shop-theme="cibazaar"] .shop-icon-pill-account-out:hover { background: #d8d8d8; } [data-shop-theme="cibazaar"] .shop-icon-pill-account-out .shop-icon-pill-svg { color: #61616c !important; } /* Gele Cibazaar-badge ipv blauw/rose default. We overrulen kleur+positionering maar laten de min-width logic uit Tailwind staan zodat 1-3 cijfers passen. */ [data-shop-theme="cibazaar"] .shop-icon-pill-badge { background: #fada4a !important; color: #212121 !important; font-family: 'Jost', sans-serif; font-weight: 500; height: 18px; min-width: 18px; padding: 0 4px; border-radius: 50%; top: -4px; right: -4px; line-height: 18px; font-size: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } /* Cibazaar Portal-knop: gele "B2B Portal"-pill (matcht badge-kleur en springt eruit als CTA). Tekst donker zodat contrast op geel ok blijft. */ [data-shop-theme="cibazaar"] .shop-portal-btn { background: #fada4a !important; color: #212121 !important; font-family: 'Jost', sans-serif; font-weight: 600; border-radius: 24px; padding: 9px 18px; box-shadow: 0 2px 6px rgba(250, 218, 74, 0.35); text-transform: none; letter-spacing: 0; } [data-shop-theme="cibazaar"] .shop-portal-btn:hover { background: #f5cc1a !important; color: #000 !important; box-shadow: 0 4px 12px rgba(250, 218, 74, 0.45); } /* 10. Sticky-scrolled state: subtiele schaduw onder de header zodra de pagina een paar pixels naar beneden is gescrolld — helpt het 3-rij design te laten 'detachen' van de content. */ [data-shop-theme="cibazaar"] .shop-site-header { transition: box-shadow 0.2s ease; } [data-shop-theme="cibazaar"] .shop-site-header.is-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); } /* ========================================================================== Product page + cart + checkout (OpenCart modern block ~2504–2718, cart ~3239) Hooks: .shop-product-page, .shop-product-breadcrumb, .shop-product-gallery-main, .shop-product-buy-box, .shop-cart-page, .shop-cart-line, .shop-checkout-* ========================================================================== */ [data-shop-theme="cibazaar"] .shop-product-breadcrumb a, [data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a, [data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a { color: #999999; transition: color 0.15s ease; } [data-shop-theme="cibazaar"] .shop-product-breadcrumb a:hover, [data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a:hover, [data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a:hover { color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-product-breadcrumb a, html.dark[data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a, html.dark[data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a { color: var(--app-text-muted); } html.dark[data-shop-theme="cibazaar"] .shop-product-breadcrumb a:hover, html.dark[data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a:hover, html.dark[data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a:hover { color: var(--shop-primary); } /* -------------------------------------------------------------------------- Catalog listing (category / filters / grid) Hooks: .shop-catalog-page, .shop-catalog-breadcrumb, .shop-catalog-sidebar, .shop-catalog-filter-card, .shop-catalog-toolbar, .shop-catalog-grid, .shop-catalog-pagination -------------------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .shop-catalog-filter-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-catalog-toolbar .form-select { border-radius: var(--shop-control-radius); border-color: var(--shop-border-soft); background: var(--shop-surface); font-weight: 600; color: var(--shop-text); } [data-shop-theme="cibazaar"] .shop-catalog-pagination a { border-radius: var(--shop-control-radius); transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease; } [data-shop-theme="cibazaar"] .shop-catalog-pagination a:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(58, 122, 245, 0.12); } [data-shop-theme="cibazaar"] .shop-catalog-pagination a.bg-blue-600 { box-shadow: var(--shop-button-glow); } /* -------------------------------------------------------------------------- Checkout (single-page form + sticky summary) Hooks: .shop-checkout-page, .shop-checkout-breadcrumb, .shop-checkout-header, .shop-checkout-errors, .shop-checkout-form, .shop-checkout-main, .shop-checkout-section, .shop-checkout-option, .shop-checkout-summary-aside, .shop-checkout-summary-card, .shop-checkout-place-order -------------------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .shop-checkout-section { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-checkout-summary-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); background: var(--shop-surface-alt); } [data-shop-theme="cibazaar"] .shop-checkout-option { border-radius: var(--shop-control-radius); border-color: var(--shop-border-soft); background: var(--shop-surface); } [data-shop-theme="cibazaar"] .shop-checkout-option:hover { border-color: rgba(58, 122, 245, 0.35); } [data-shop-theme="cibazaar"] .shop-checkout-place-order:not(:disabled) { min-height: 50px; border-radius: var(--shop-control-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(0.75rem, 1.2vw, 1rem); box-shadow: var(--shop-button-glow); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } [data-shop-theme="cibazaar"] .shop-checkout-place-order:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(58, 122, 245, 0.4); } [data-shop-theme="cibazaar"] .shop-account-auth-page .shop-auth-card .form-input, [data-shop-theme="cibazaar"] .shop-account-auth-page .shop-auth-card .form-select { border-radius: var(--shop-control-radius); border-color: var(--shop-border-soft); } [data-shop-theme="cibazaar"] .shop-product-gallery-main { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } /* Buy box ≈ .buy-box-area (OC 2604–2610) */ [data-shop-theme="cibazaar"] .shop-product-buy-box { background: var(--shop-surface-alt); border-color: var(--shop-border); border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } /* Primary add-to-cart ≈ #button-cart (OC 2664–2690) */ [data-shop-theme="cibazaar"] .shop-product-buy-box button[type="submit"]:not(:disabled) { min-height: 50px; border-radius: var(--shop-control-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(0.75rem, 1.2vw, 1rem); box-shadow: var(--shop-button-glow); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } [data-shop-theme="cibazaar"] .shop-product-buy-box button[type="submit"]:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(58, 122, 245, 0.4); } /* Quantity field ≈ .quantity-wrapper inner (OC 2620–2643) */ [data-shop-theme="cibazaar"] .shop-product-buy-box input[type="number"] { background: var(--shop-surface); border-color: var(--shop-border-soft); border-radius: var(--shop-control-radius); font-weight: 700; font-size: 1.125rem; color: var(--shop-text); } /* Cart line cards — cleaner edges + hover lift (OC cart polish family) */ [data-shop-theme="cibazaar"] .shop-cart-line { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease; } [data-shop-theme="cibazaar"] .shop-cart-line:hover { border-color: rgba(58, 122, 245, 0.28); box-shadow: var(--shop-card-shadow-hover); } /* Slight OC-style card shadow on stacked order rows (input.css <768px) */ @media (max-width: 767px) { [data-shop-theme="cibazaar"] table.shop-stacked-table tr { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); border-color: var(--shop-border); } } /* -------------------------------------------------------------------------- Product detail — description / specs / reviews tabs (OC-style nav) -------------------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .shop-product-tabs-nav { border-bottom-color: var(--shop-border); gap: 0; } [data-shop-theme="cibazaar"] .shop-product-tab { font-weight: 700; text-transform: none; letter-spacing: normal; border-radius: 0; padding: 0.65rem 1rem; } [data-shop-theme="cibazaar"] .shop-product-tab-active { color: var(--shop-primary) !important; border-bottom-color: var(--shop-primary) !important; } @media (max-width: 767px) { [data-shop-theme="cibazaar"] .shop-product-tabs-nav { flex-wrap: wrap; gap: 0.35rem; border-bottom: none; margin-bottom: 0.35rem; } [data-shop-theme="cibazaar"] .shop-product-tabs-nav .shop-product-tab { flex: 1 1 auto; min-width: calc(50% - 0.2rem); justify-content: center; border: 1px solid var(--shop-border); border-radius: var(--shop-control-radius); margin-bottom: 0; border-bottom-width: 1px; } [data-shop-theme="cibazaar"] .shop-product-tabs-nav .shop-product-tab-active { background: var(--shop-primary-soft-bg); border-color: var(--shop-primary) !important; border-bottom-color: var(--shop-primary) !important; } } /* ========================================================================== Cart — secundaire submits (niet de globale blauwe primary-regel) `shop-btn-not-primary` uitsluiten van de brede submit-selector hierboven; anders krijgen “Verwijderen” / “Leegmaken” blauwe achtergrond + gekleurde tekst. ========================================================================== */ [data-shop-theme="cibazaar"] button.shop-btn-not-primary[type="submit"] { background-color: var(--shop-surface-alt); border: 1px solid var(--shop-border); color: var(--shop-text-secondary); box-shadow: none; transform: none; text-transform: none; letter-spacing: normal; min-height: auto; } [data-shop-theme="cibazaar"] button.shop-btn-not-primary[type="submit"]:hover { background-color: var(--shop-surface-hover); border-color: var(--shop-primary); color: var(--shop-primary); box-shadow: none; transform: none; } [data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"] { background: transparent; border: none; color: var(--shop-danger); padding: 0.35rem 0; text-decoration: none; } [data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"]:hover { color: var(--shop-danger-hover); text-decoration: underline; background: transparent; border: none; } [data-shop-theme="cibazaar"] button.shop-cart-btn-clear.shop-btn-not-primary[type="submit"] { background: transparent; border: 1px solid var(--shop-border); color: var(--shop-text-secondary); padding: 0.5rem 0.85rem; } [data-shop-theme="cibazaar"] button.shop-cart-btn-clear.shop-btn-not-primary[type="submit"]:hover { border-color: var(--shop-danger); color: var(--shop-danger); background: var(--shop-primary-soft-bg); } html.dark[data-shop-theme="cibazaar"] button.shop-btn-not-primary[type="submit"] { background-color: var(--app-surface-alt); border-color: var(--app-border); color: var(--app-text-secondary); } html.dark[data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"] { background: transparent; border: none; color: #f87171; } html.dark[data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"]:hover { color: #fca5a5; background: transparent; } html.dark[data-shop-theme="cibazaar"] button.shop-cart-btn-clear.shop-btn-not-primary[type="submit"] { background: transparent; color: var(--app-text-muted); }