/* ========================================================================== KANTOORTECHSHOP.BE — THEMA-CSS (kts_theme.css) -------------------------------------------------------------------------- Odoo 17 Enterprise (SaaS) — geladen als los stylesheet via in . Plain CSS (geen SCSS). Puur additief: verandert geen layout van Odoo- containers, raakt geen backend/editor-classes aan. Fonts Inter + Manrope worden apart geladen (geen @import hier). -------------------------------------------------------------------------- Inhoud: 01. :root tokens + basis-typografie 02. Bootstrap-overrides (btn, form, badge, breadcrumb, pagination, dropdown, table) 03. Header (header#top — Odoo default header) 04. Klassecontract (.kts-*) 05. Webshop (website_sale: grid, zijbalk, productpagina, cart/checkout) 06. Cookiebanner (#website_cookies_bar) 07. Footer (.kts-footer + .o_footer_copyright) 08. Forms / misc / responsief ========================================================================== */ /* ========================================================================== 01. :ROOT TOKENS + BASIS ========================================================================== */ :root { --kts-primary: #2563EB; /* hoofdblauw — knoppen, links, accenten */ --kts-primary-dark: #1D4ED8; /* hover */ --kts-primary-soft: #EAF1FE; /* lichte blauwe tint voor icon-chips/badges */ --kts-accent: #0EA5E9; /* sky — gradiënten, secundaire accenten */ --kts-amber: #F59E0B; /* spaarzaam: sterren, sale-badges */ --kts-navy: #0C1C33; /* donkere secties, footer */ --kts-navy-2: #13294B; /* verloop-partner van navy */ --kts-ink: #0F172A; /* koppen op licht */ --kts-body: #475569; /* bodytekst */ --kts-muted: #64748B; /* subtekst */ --kts-line: #E6EBF2; /* borders */ --kts-bg: #F5F8FC; /* lichte sectie-achtergrond */ --kts-white: #FFFFFF; --kts-radius: 16px; /* cards */ --kts-radius-sm: 10px; /* knoppen, inputs */ --kts-shadow: 0 10px 30px rgba(15, 23, 42, .08); --kts-shadow-lg: 0 24px 48px rgba(15, 23, 42, .14); --kts-font-head: 'Manrope', 'Inter', system-ui, sans-serif; --kts-font-body: 'Inter', system-ui, sans-serif; } /* --- Basis-typografie (frontend body) ------------------------------------ */ body { font-family: var(--kts-font-body); color: var(--kts-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--kts-font-head); color: var(--kts-ink); letter-spacing: -0.01em; font-weight: 700; } a { color: var(--kts-primary); } a:hover { color: var(--kts-primary-dark); } ::selection { background: var(--kts-primary); color: var(--kts-white); } :focus-visible { outline: 2px solid var(--kts-primary); outline-offset: 2px; } /* ========================================================================== 02. BOOTSTRAP-OVERRIDES (alleen frontend-componenten) ========================================================================== */ /* --- Knoppen -------------------------------------------------------------- */ .btn { border-radius: var(--kts-radius-sm); font-weight: 600; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } .btn-primary { background-color: var(--kts-primary); border-color: var(--kts-primary); color: var(--kts-white); } .btn-primary:hover, .btn-primary:focus { background-color: var(--kts-primary-dark); border-color: var(--kts-primary-dark); color: var(--kts-white); box-shadow: 0 8px 20px rgba(37, 99, 235, .28); } .btn-primary:focus, .btn-primary:focus-visible { box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .25); } .btn-primary:active, .btn-primary.active { background-color: var(--kts-primary-dark); border-color: var(--kts-primary-dark); color: var(--kts-white); } .btn-outline-primary { color: var(--kts-primary); border-color: var(--kts-primary); background-color: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--kts-primary); border-color: var(--kts-primary); color: var(--kts-white); box-shadow: 0 8px 20px rgba(37, 99, 235, .22); } .btn-outline-primary:focus, .btn-outline-primary:focus-visible { box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .2); } .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--kts-primary-dark); border-color: var(--kts-primary-dark); color: var(--kts-white); } .btn-secondary { background-color: var(--kts-primary-soft); border-color: var(--kts-primary-soft); color: var(--kts-primary-dark); } .btn-secondary:hover, .btn-secondary:focus { background-color: #DCE8FD; border-color: #DCE8FD; color: var(--kts-primary-dark); box-shadow: 0 6px 16px rgba(37, 99, 235, .14); } .btn-secondary:active, .btn-secondary.active { background-color: #CFDFFC; border-color: #CFDFFC; color: var(--kts-primary-dark); } /* --- Formuliervelden ------------------------------------------------------ */ .form-control, .form-select { border-radius: var(--kts-radius-sm); border-color: var(--kts-line); color: var(--kts-ink); padding: .55rem .9rem; transition: border-color .18s ease, box-shadow .18s ease; } .form-control::placeholder { color: var(--kts-muted); opacity: .8; } .form-control:focus, .form-select:focus { border-color: var(--kts-primary); box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15); } .form-check-input:checked { background-color: var(--kts-primary); border-color: var(--kts-primary); } .form-check-input:focus { border-color: var(--kts-primary); box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15); } /* --- Badges --------------------------------------------------------------- */ .badge { font-family: var(--kts-font-body); font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .35em .75em; } /* --- Breadcrumb ----------------------------------------------------------- */ .breadcrumb { background: transparent; font-size: .85rem; padding-left: 0; } .breadcrumb .breadcrumb-item a { color: var(--kts-muted); text-decoration: none; } .breadcrumb .breadcrumb-item a:hover { color: var(--kts-primary); } .breadcrumb .breadcrumb-item.active { color: var(--kts-ink); font-weight: 600; } .breadcrumb-item + .breadcrumb-item::before { color: var(--kts-muted); } /* --- Paginatie ------------------------------------------------------------ */ .pagination .page-link { color: var(--kts-ink); border-color: var(--kts-line); border-radius: var(--kts-radius-sm); margin: 0 3px; min-width: 40px; text-align: center; font-weight: 600; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .pagination .page-link:hover { background-color: var(--kts-primary-soft); border-color: var(--kts-primary-soft); color: var(--kts-primary); } .pagination .page-link:focus { box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15); } .pagination .page-item.active .page-link { background-color: var(--kts-primary); border-color: var(--kts-primary); color: var(--kts-white); } .pagination .page-item.disabled .page-link { color: var(--kts-muted); border-color: var(--kts-line); } /* --- Dropdowns ------------------------------------------------------------ */ .dropdown-menu { border-radius: 12px; border: 1px solid var(--kts-line); box-shadow: var(--kts-shadow); padding: .5rem; } .dropdown-menu .dropdown-item { border-radius: 8px; color: var(--kts-ink); padding: .45rem .75rem; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background-color: var(--kts-primary-soft); color: var(--kts-primary-dark); } .dropdown-menu .dropdown-item.active { background-color: var(--kts-primary); color: var(--kts-white); } /* --- Tabellen ------------------------------------------------------------- */ .table > thead th, .table > thead td { font-family: var(--kts-font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--kts-muted); border-bottom: 2px solid var(--kts-line); background-color: transparent; } .table > tbody td, .table > tbody th { border-color: var(--kts-line); color: var(--kts-body); vertical-align: middle; } /* ========================================================================== 03. HEADER (header#top — Odoo default header) -------------------------------------------------------------------------- Defensief: enkel kleuren, typografie, radius, schaduw en padding op inner-elementen. Geen position/display/width op headercontainers. ========================================================================== */ header#top { background-color: var(--kts-white); border-bottom: 1px solid var(--kts-line); } header#top nav.navbar { background-color: var(--kts-white); } header#top .navbar-brand.logo, header#top .navbar-brand { font-family: var(--kts-font-head); font-weight: 800; color: var(--kts-ink); } /* Menu-links */ header#top #top_menu .nav-link, header#top .top_menu .nav-link { font-weight: 600; color: var(--kts-ink); position: relative; transition: color .15s ease; } header#top #top_menu .nav-link:hover, header#top #top_menu .nav-link:focus, header#top .top_menu .nav-link:hover, header#top .top_menu .nav-link:focus { color: var(--kts-primary); } /* Subtiele underline-indicator */ header#top #top_menu .nav-link::after, header#top .top_menu .nav-link::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .2rem; height: 2px; border-radius: 2px; background-color: var(--kts-primary); opacity: 0; transform: scaleX(.4); transform-origin: center; transition: opacity .18s ease, transform .18s ease; pointer-events: none; } header#top #top_menu .nav-link:hover::after, header#top #top_menu .nav-item.active > .nav-link::after, header#top #top_menu .nav-link.active::after, header#top .top_menu .nav-link:hover::after, header#top .top_menu .nav-item.active > .nav-link::after, header#top .top_menu .nav-link.active::after { opacity: 1; transform: scaleX(1); } header#top #top_menu .nav-item.active > .nav-link, header#top #top_menu .nav-link.active, header#top .top_menu .nav-item.active > .nav-link, header#top .top_menu .nav-link.active { color: var(--kts-primary); } /* Zoekveld als pill */ header#top .o_searchbar_form input.search-query, header#top .o_searchbar_form .search-query { border-radius: 999px; background-color: var(--kts-bg); border: 1px solid var(--kts-line); color: var(--kts-ink); padding-left: 1.1rem; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } header#top .o_searchbar_form input.search-query:focus, header#top .o_searchbar_form .search-query:focus { background-color: var(--kts-white); border-color: var(--kts-primary); box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15); } header#top .o_searchbar_form .btn { border-radius: 999px; } /* Winkelmandje als afgeronde chip */ header#top .o_wsale_my_cart .nav-link, header#top a.o_wsale_my_cart { border-radius: 999px; color: var(--kts-ink); transition: background-color .15s ease, color .15s ease; } header#top .o_wsale_my_cart .nav-link:hover, header#top a.o_wsale_my_cart:hover { background-color: var(--kts-primary-soft); color: var(--kts-primary); } header#top .o_wsale_my_cart .my_cart_quantity, header#top .o_wsale_my_cart .badge { background-color: var(--kts-primary); color: var(--kts-white); border-radius: 999px; font-weight: 700; } /* Sticky variant */ header#top.o_header_affixed, header#top .o_header_affixed, .o_header_affixed { box-shadow: 0 6px 24px rgba(15, 23, 42, .08); } /* ========================================================================== 04. KLASSECONTRACT (.kts-*) ========================================================================== */ /* --- Secties -------------------------------------------------------------- */ .kts-section { padding-top: 72px; padding-bottom: 72px; background-color: var(--kts-white); } .kts-section--alt { background-color: var(--kts-bg); } .kts-section--dark { background: linear-gradient(135deg, var(--kts-navy), var(--kts-navy-2)); color: rgba(255, 255, 255, .85); } .kts-section--dark h1, .kts-section--dark h2, .kts-section--dark h3, .kts-section--dark h4, .kts-section--dark h5, .kts-section--dark h6, .kts-section--dark .kts-h2 { color: var(--kts-white); } .kts-section--dark p { color: rgba(255, 255, 255, .78); } .kts-section--dark .kts-sub { color: rgba(255, 255, 255, .72); } /* --- Typografie ----------------------------------------------------------- */ .kts-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--kts-primary); background-color: var(--kts-primary-soft); border-radius: 999px; padding: .35em 1em; margin-bottom: .85rem; } .kts-section--dark .kts-eyebrow { background-color: rgba(255, 255, 255, .12); color: #9CC3FF; } .kts-h2 { font-family: var(--kts-font-head); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--kts-ink); margin-bottom: .6rem; } .kts-sub { color: var(--kts-muted); font-size: 1.05rem; line-height: 1.65; max-width: 640px; margin-bottom: 0; } .text-center .kts-sub, .kts-sub.text-center { margin-left: auto; margin-right: auto; } /* --- Knoppen (.kts-btn) --------------------------------------------------- */ .kts-btn { display: inline-block; padding: 12px 26px; border-radius: var(--kts-radius-sm); font-family: var(--kts-font-body); font-weight: 700; font-size: .95rem; line-height: 1.4; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; } .kts-btn:hover, .kts-btn:focus { transform: translateY(-2px); text-decoration: none; } .kts-btn--primary { background-color: var(--kts-primary); border-color: var(--kts-primary); color: var(--kts-white); } .kts-btn--primary:hover, .kts-btn--primary:focus { background-color: var(--kts-primary-dark); border-color: var(--kts-primary-dark); color: var(--kts-white); box-shadow: 0 10px 24px rgba(37, 99, 235, .32); } .kts-btn--ghost { background-color: transparent; border-color: var(--kts-primary); color: var(--kts-primary); } .kts-btn--ghost:hover, .kts-btn--ghost:focus { background-color: var(--kts-primary-soft); color: var(--kts-primary-dark); box-shadow: 0 8px 20px rgba(37, 99, 235, .16); } /* Ghost-knop op donkere secties: witte border */ .kts-section--dark .kts-btn--ghost { border-color: rgba(255, 255, 255, .55); color: var(--kts-white); } .kts-section--dark .kts-btn--ghost:hover, .kts-section--dark .kts-btn--ghost:focus { background-color: rgba(255, 255, 255, .1); border-color: var(--kts-white); color: var(--kts-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); } .kts-btn--white { background-color: var(--kts-white); border-color: var(--kts-white); color: var(--kts-primary); } .kts-btn--white:hover, .kts-btn--white:focus { background-color: var(--kts-white); color: var(--kts-primary-dark); box-shadow: 0 12px 28px rgba(0, 0, 0, .25); } /* --- Cards ---------------------------------------------------------------- */ .kts-card { background-color: var(--kts-white); border: 1px solid var(--kts-line); border-radius: var(--kts-radius); padding: 28px; height: 100%; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .kts-card:hover { box-shadow: var(--kts-shadow); } /* --- Iconen & chips ------------------------------------------------------- */ .kts-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; stroke: currentColor; flex-shrink: 0; } .kts-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background-color: var(--kts-primary-soft); color: var(--kts-primary); flex-shrink: 0; } .kts-icon-chip .kts-icon { font-size: 26px; } .kts-icon-chip--dark { background-color: rgba(255, 255, 255, .12); color: var(--kts-white); } /* --- USP-tegel ------------------------------------------------------------ */ .kts-usp { display: flex; align-items: flex-start; gap: 16px; } .kts-usp h6 { font-weight: 700; font-size: 1rem; margin-bottom: .25rem; color: var(--kts-ink); } .kts-usp p { color: var(--kts-muted); font-size: .92rem; line-height: 1.55; margin-bottom: 0; } .kts-section--dark .kts-usp h6 { color: var(--kts-white); } .kts-section--dark .kts-usp p { color: rgba(255, 255, 255, .72); } /* --- Categoriekaart ------------------------------------------------------- */ .kts-cat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 28px 18px; background-color: var(--kts-white); border: 1px solid var(--kts-line); border-radius: var(--kts-radius); color: var(--kts-ink); text-decoration: none; height: 100%; position: relative; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .kts-cat-card:hover, .kts-cat-card:focus { border-color: var(--kts-primary); box-shadow: var(--kts-shadow); transform: translateY(-4px); color: var(--kts-ink); text-decoration: none; } .kts-cat-card .kts-cat-name, .kts-cat-card h6, .kts-cat-card span:not(.kts-icon-chip):not(.kts-cat-arrow) { font-weight: 700; color: var(--kts-ink); } /* Pijl-animatie (optioneel element .kts-cat-arrow of laatste svg) */ .kts-cat-card .kts-cat-arrow { opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; color: var(--kts-primary); font-size: 18px; } .kts-cat-card:hover .kts-cat-arrow, .kts-cat-card:focus .kts-cat-arrow { opacity: 1; transform: translateX(0); } .kts-cat-card:hover .kts-icon-chip { background-color: var(--kts-primary); color: var(--kts-white); } .kts-cat-card .kts-icon-chip { transition: background-color .2s ease, color .2s ease; } /* --- Feature-item (dark secties) ------------------------------------------ */ .kts-feature { display: flex; flex-direction: column; gap: 16px; } .kts-feature h5 { color: var(--kts-white); font-weight: 700; font-size: 1.1rem; margin-bottom: 0; } .kts-feature p { color: rgba(255, 255, 255, .75); line-height: 1.6; margin-bottom: 0; } /* --- Statistiek ----------------------------------------------------------- */ .kts-stat { text-align: center; } .kts-stat .kts-stat-number, .kts-stat strong, .kts-stat b { display: block; font-family: var(--kts-font-head); font-weight: 800; font-size: 2.4rem; line-height: 1.1; color: var(--kts-ink); letter-spacing: -0.02em; } .kts-stat .kts-stat-label, .kts-stat span:not(.kts-stat-number), .kts-stat small { display: block; margin-top: .35rem; color: var(--kts-muted); font-size: .92rem; } .kts-section--dark .kts-stat .kts-stat-number, .kts-section--dark .kts-stat strong, .kts-section--dark .kts-stat b { color: var(--kts-white); } .kts-section--dark .kts-stat .kts-stat-label, .kts-section--dark .kts-stat span:not(.kts-stat-number), .kts-section--dark .kts-stat small { color: rgba(255, 255, 255, .68); } /* --- Juridische pagina's -------------------------------------------------- */ .kts-legal { max-width: 820px; margin-left: auto; margin-right: auto; font-size: 17px; line-height: 1.75; color: var(--kts-body); } .kts-legal h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; } .kts-legal h2 { font-size: 1.35rem; font-weight: 700; margin-top: 3rem; margin-bottom: .75rem; padding-top: .5rem; } .kts-legal h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: .5rem; } .kts-legal p, .kts-legal li { color: var(--kts-body); } .kts-legal li { margin-bottom: .4rem; } .kts-legal a { color: var(--kts-primary); text-decoration: underline; text-underline-offset: 3px; } .kts-legal a:hover { color: var(--kts-primary-dark); } .kts-legal table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.75rem; font-size: .95rem; } .kts-legal table th, .kts-legal table td { border: 1px solid var(--kts-line); padding: .65rem .9rem; text-align: left; vertical-align: top; } .kts-legal table th { background-color: var(--kts-bg); color: var(--kts-ink); font-weight: 700; font-family: var(--kts-font-head); font-size: .88rem; } .kts-legal-meta { display: block; color: var(--kts-muted); font-size: .88rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kts-line); } /* --- Page hero (subpagina's) ---------------------------------------------- */ .kts-page-hero { background: linear-gradient(135deg, var(--kts-navy), var(--kts-navy-2)); color: var(--kts-white); padding: 64px 0; } .kts-page-hero h1 { font-family: var(--kts-font-head); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--kts-white); letter-spacing: -0.02em; margin-bottom: .5rem; } .kts-page-hero p, .kts-page-hero .kts-sub, .kts-page-hero .kts-page-hero-sub { color: rgba(255, 255, 255, .75); margin-bottom: 0; } .kts-page-hero .breadcrumb, .kts-page-hero .breadcrumb-item, .kts-page-hero .breadcrumb-item a, .kts-page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .65); } .kts-page-hero .breadcrumb-item.active { color: var(--kts-white); } /* ========================================================================== 05. WEBSHOP (website_sale — Odoo 17 selectors) ========================================================================== */ /* --- Productgrid: kaarten ------------------------------------------------- */ #products_grid .oe_product, #products_grid .o_wsale_product_grid_wrapper { transition: transform .2s ease, box-shadow .2s ease; } #products_grid .oe_product .o_wsale_product_grid_wrapper, #products_grid .o_wsale_product_grid_wrapper { background-color: var(--kts-white); border: 1px solid var(--kts-line); border-radius: var(--kts-radius); overflow: hidden; } #products_grid .oe_product:hover .o_wsale_product_grid_wrapper, #products_grid .o_wsale_product_grid_wrapper:hover { box-shadow: var(--kts-shadow); transform: translateY(-3px); } #products_grid .oe_product_image { background-color: var(--kts-white); } #products_grid .o_wsale_product_information { padding: 14px 16px 16px; border-top: 1px solid var(--kts-line); background-color: var(--kts-white); } /* Productnaam */ #products_grid .o_wsale_product_information h6, #products_grid .o_wsale_products_item_title, #products_grid .o_wsale_products_item_title a, #products_grid .oe_product .product_name { font-family: var(--kts-font-body); font-weight: 600; color: var(--kts-ink); text-decoration: none; } #products_grid .o_wsale_products_item_title a:hover { color: var(--kts-primary); } /* Prijs in grid */ #products_grid .product_price, #products_grid .product_price .oe_currency_value, #products_grid .product_price span { font-weight: 700; color: var(--kts-primary); } #products_grid .product_price del, #products_grid .product_price del span, #products_grid .product_price del .oe_currency_value { color: var(--kts-muted); font-weight: 500; font-size: .88em; } /* "Toevoegen"-knoppen in grid */ #products_grid .o_wsale_product_btn .btn, #products_grid .oe_product .a-submit, #products_grid .btn.o_add_cart { border-radius: var(--kts-radius-sm); font-weight: 600; } /* Sale-/promobadges spaarzaam amber */ #products_grid .oe_product .o_ribbon, #products_grid .oe_ribbon { font-weight: 700; letter-spacing: .02em; } /* --- Zijbalk categorieën -------------------------------------------------- */ #products_grid_before .o_wsale_products_categories a, .o_wsale_products_categories a { display: block; padding: .45rem .75rem; border-radius: var(--kts-radius-sm); color: var(--kts-body); text-decoration: none; transition: background-color .15s ease, color .15s ease; } #products_grid_before .o_wsale_products_categories a:hover, .o_wsale_products_categories a:hover { background-color: var(--kts-primary-soft); color: var(--kts-primary-dark); } #products_grid_before .o_wsale_products_categories .active > a, #products_grid_before .o_wsale_products_categories a.active, .o_wsale_products_categories .active > a, .o_wsale_products_categories a.active { font-weight: 700; color: var(--kts-primary); background-color: var(--kts-primary-soft); } #products_grid_before .products_attributes_filters label, #products_grid_before .form-check-label { color: var(--kts-body); font-size: .92rem; } /* --- Sorteer-/filterbalk -------------------------------------------------- */ .o_wsale_products_searchbar_form .search-query { border-radius: 999px; border-color: var(--kts-line); } .o_wsale_apply_filters, .o_wsale_products_header .btn-light, .o_wsale_products_header .dropdown-toggle { border-radius: var(--kts-radius-sm); } /* --- Productpagina -------------------------------------------------------- */ #product_detail h1 { font-family: var(--kts-font-head); font-weight: 800; color: var(--kts-ink); letter-spacing: -0.015em; } #product_detail .product_price, #product_detail .product_price .oe_currency_value, #product_detail .product_price span.oe_price, #product_detail .oe_price .oe_currency_value { font-family: var(--kts-font-head); font-weight: 800; font-size: 1.75rem; color: var(--kts-primary); } #product_detail .product_price del, #product_detail .product_price del .oe_currency_value { font-size: 1.05rem; font-weight: 500; color: var(--kts-muted); } #product_detail #add_to_cart { background-color: var(--kts-primary); border-color: var(--kts-primary); color: var(--kts-white); font-weight: 700; padding: .7rem 1.8rem; border-radius: var(--kts-radius-sm); box-shadow: 0 8px 20px rgba(37, 99, 235, .25); transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; } #product_detail #add_to_cart:hover, #product_detail #add_to_cart:focus { background-color: var(--kts-primary-dark); border-color: var(--kts-primary-dark); box-shadow: 0 12px 26px rgba(37, 99, 235, .35); transform: translateY(-1px); } /* Tabs op productpagina */ #product_detail .nav-tabs { border-bottom-color: var(--kts-line); } #product_detail .nav-tabs .nav-link { color: var(--kts-muted); font-weight: 600; border: none; border-bottom: 2px solid transparent; } #product_detail .nav-tabs .nav-link:hover { color: var(--kts-primary); border-bottom-color: var(--kts-primary-soft); } #product_detail .nav-tabs .nav-link.active { color: var(--kts-primary); background: transparent; border-bottom: 2px solid var(--kts-primary); } /* Specificatietabellen */ #product_detail table, #product_attributes_simple table { font-size: .95rem; } #product_detail table th, #product_attributes_simple table th { background-color: var(--kts-bg); color: var(--kts-ink); font-weight: 600; border-color: var(--kts-line); } #product_detail table td, #product_attributes_simple table td { border-color: var(--kts-line); color: var(--kts-body); } /* --- Winkelmandje & checkout ---------------------------------------------- */ .oe_website_sale #cart_products { background-color: var(--kts-white); border: 1px solid var(--kts-line); border-radius: var(--kts-radius); overflow: hidden; } .oe_website_sale #cart_products th { background-color: var(--kts-bg); color: var(--kts-ink); font-weight: 700; font-size: .85rem; border-color: var(--kts-line); } .oe_website_sale #cart_products td { border-color: var(--kts-line); vertical-align: middle; } .oe_website_sale table.table th, .oe_website_sale table.table td { border-color: var(--kts-line); } /* Totalenblok */ .oe_website_sale #o_cart_summary, .oe_website_sale .o_total_card, .oe_website_sale #order_total { background-color: var(--kts-white); border: 1px solid var(--kts-line); border-radius: var(--kts-radius); } .oe_website_sale #order_total .monetary_field, .oe_website_sale #order_total_after_discount .monetary_field, .oe_website_sale tr#order_total td, .oe_website_sale tr#order_total .oe_currency_value { font-weight: 800; color: var(--kts-ink); } /* Checkout-stappen (wizard) */ .oe_website_sale .wizard, .oe_website_sale .o_wizard { background: transparent; } .oe_website_sale .wizard .nav-link, .oe_website_sale .o_wizard .nav-link, .oe_website_sale .o_wizard_steps .nav-link { color: var(--kts-muted); font-weight: 600; } .oe_website_sale .wizard .nav-link.active, .oe_website_sale .o_wizard .nav-link.active, .oe_website_sale .o_wizard_steps .nav-link.active { color: var(--kts-primary); } /* Adres- en betaalkaarten in checkout */ .oe_website_sale .card { border-color: var(--kts-line); border-radius: var(--kts-radius); } .oe_website_sale .card .card-header { background-color: var(--kts-bg); border-bottom-color: var(--kts-line); font-weight: 700; color: var(--kts-ink); } /* ========================================================================== 06. COOKIEBANNER (#website_cookies_bar) ========================================================================== */ #website_cookies_bar .modal-content { border-radius: 16px 16px 0 0; border: none; box-shadow: var(--kts-shadow-lg); background-color: var(--kts-white); padding: 8px 12px; } #website_cookies_bar .modal-body { color: var(--kts-body); } #website_cookies_bar .modal-body p, #website_cookies_bar .modal-body small, #website_cookies_bar p { color: var(--kts-muted); font-size: .9rem; line-height: 1.6; } #website_cookies_bar h1, #website_cookies_bar h2, #website_cookies_bar h3, #website_cookies_bar h4, #website_cookies_bar h5, #website_cookies_bar .modal-title { color: var(--kts-ink); font-family: var(--kts-font-head); font-weight: 700; } #website_cookies_bar a { color: var(--kts-primary); } /* Accepteren = primary */ #website_cookies_bar .btn-primary, #website_cookies_bar #cookies-consent-all, #website_cookies_bar .js_accept_cookies { background-color: var(--kts-primary); border-color: var(--kts-primary); color: var(--kts-white); border-radius: var(--kts-radius-sm); font-weight: 600; } #website_cookies_bar .btn-primary:hover, #website_cookies_bar #cookies-consent-all:hover, #website_cookies_bar .js_accept_cookies:hover { background-color: var(--kts-primary-dark); border-color: var(--kts-primary-dark); } /* Weigeren = outline */ #website_cookies_bar .btn-secondary, #website_cookies_bar .btn-outline-secondary, #website_cookies_bar #cookies-consent-essential, #website_cookies_bar .js_decline_cookies { background-color: transparent; border: 1px solid var(--kts-line); color: var(--kts-body); border-radius: var(--kts-radius-sm); font-weight: 600; } #website_cookies_bar .btn-secondary:hover, #website_cookies_bar .btn-outline-secondary:hover, #website_cookies_bar #cookies-consent-essential:hover, #website_cookies_bar .js_decline_cookies:hover { background-color: var(--kts-bg); border-color: var(--kts-muted); color: var(--kts-ink); } /* ========================================================================== 07. FOOTER (.kts-footer + .o_footer_copyright) ========================================================================== */ .kts-footer { background: linear-gradient(135deg, var(--kts-navy), var(--kts-navy-2)); color: rgba(255, 255, 255, .72); font-size: .95rem; } .kts-footer .kts-footer-main { padding-top: 56px; padding-bottom: 40px; } .kts-footer-brand { font-family: var(--kts-font-head); font-weight: 800; font-size: 1.35rem; color: var(--kts-white); letter-spacing: -0.01em; margin-bottom: .5rem; } .kts-footer .kts-footer-tagline { color: rgba(255, 255, 255, .72); line-height: 1.6; max-width: 340px; margin-bottom: 1.5rem; } /* Kolomtitels */ .kts-footer h5, .kts-footer .kts-footer-title { font-family: var(--kts-font-head); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kts-white); margin-bottom: 1.1rem; } /* Linklijsten */ .kts-footer ul.kts-footer-links { list-style: none; padding-left: 0; margin-bottom: 0; } .kts-footer ul.kts-footer-links li { margin-bottom: .55rem; } .kts-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .15s ease; } .kts-footer a:hover, .kts-footer a:focus { color: var(--kts-white); text-decoration: none; } /* Contactregels met icoontjes */ .kts-footer .kts-footer-contact { display: flex; align-items: flex-start; gap: 10px; margin-bottom: .65rem; color: rgba(255, 255, 255, .72); line-height: 1.5; } .kts-footer .kts-footer-contact .kts-icon { font-size: 18px; margin-top: 2px; color: rgba(255, 255, 255, .55); } /* Bedrijfsgegevens-blokje */ .kts-footer .kts-footer-company { color: rgba(255, 255, 255, .5); font-size: .82rem; line-height: 1.7; margin-top: 1.25rem; margin-bottom: 0; } /* Onderste balk */ .kts-footer .kts-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; padding-bottom: 24px; font-size: .82rem; color: rgba(255, 255, 255, .55); } .kts-footer .kts-footer-bottom .kts-icon { font-size: 16px; vertical-align: -0.19em; color: rgba(255, 255, 255, .55); } /* Odoo copyright-balk (los van .kts-footer, valt eronder) */ .o_footer_copyright { background-color: var(--kts-navy); color: rgba(255, 255, 255, .5); font-size: .82rem; } .o_footer_copyright a, .o_footer_copyright span { color: rgba(255, 255, 255, .5); } .o_footer_copyright a:hover { color: rgba(255, 255, 255, .85); } /* ========================================================================== 08. FORMS / MISC / RESPONSIEF ========================================================================== */ /* --- Website-formulieren (s_website_form) --------------------------------- */ .s_website_form .s_website_form_label { color: var(--kts-ink); font-weight: 600; font-size: .92rem; } .s_website_form .s_website_form_input { border-radius: var(--kts-radius-sm); border-color: var(--kts-line); } .s_website_form .s_website_form_input:focus { border-color: var(--kts-primary); box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15); } .s_website_form .s_website_form_mark { color: var(--kts-primary); } /* --- Ingesloten kaart-iframe (bv. Google Maps) ----------------------------- */ .kts-map iframe, iframe.kts-map, .kts-card iframe { border-radius: var(--kts-radius); border: 1px solid var(--kts-line); display: block; width: 100%; } /* --- Scrollbar (optioneel, WebKit + Firefox) ------------------------------- */ @supports (scrollbar-width: thin) { body { scrollbar-color: #B9C6D9 transparent; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background-color: #B9C6D9; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: #9AAAC2; } ::-webkit-scrollbar-track { background: transparent; } /* --- Responsief ------------------------------------------------------------ */ @media (max-width: 767.98px) { .kts-section { padding-top: 48px; padding-bottom: 48px; } .kts-page-hero { padding: 44px 0; } .kts-page-hero h1 { font-size: 1.75rem; } .kts-stat .kts-stat-number, .kts-stat strong, .kts-stat b { font-size: 1.9rem; } .kts-card { padding: 22px; } .kts-icon-chip { width: 48px; height: 48px; border-radius: 12px; } .kts-icon-chip .kts-icon { font-size: 22px; } .kts-legal { font-size: 16px; } .kts-legal h1 { font-size: 1.7rem; } .kts-legal h2 { margin-top: 2.25rem; } .kts-footer .kts-footer-main { padding-top: 44px; padding-bottom: 28px; } .kts-footer .kts-footer-bottom { text-align: center; } } /* == KTS SPECIFICITY PATCH == */ .btn-primary, a.btn-primary, .btn_cta { background-color: var(--kts-primary) !important; border-color: var(--kts-primary) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn_cta:hover { background-color: var(--kts-primary-dark) !important; border-color: var(--kts-primary-dark) !important; color: #fff !important; } .btn-outline-primary { color: var(--kts-primary) !important; border-color: var(--kts-primary) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--kts-primary) !important; border-color: var(--kts-primary) !important; color: #fff !important; } .text-primary { color: var(--kts-primary) !important; } .bg-primary { background-color: var(--kts-primary) !important; } #wrapwrap .kts-footer a:not(.kts-btn) { color: rgba(255,255,255,.72) !important; text-decoration: none; } #wrapwrap .kts-footer a:not(.kts-btn):hover { color: #fff !important; } #wrapwrap .kts-footer h5, #wrapwrap .kts-footer .kts-footer-brand { color: #fff !important; } #wrapwrap .kts-footer, #wrapwrap .kts-footer p, #wrapwrap .kts-footer small, #wrapwrap .kts-footer li { color: rgba(255,255,255,.72); } header#top .btn_cta { border-radius: 10px; font-weight: 700; } /* == KTS COPYRIGHT BAR PATCH == */ #wrapwrap .o_footer_copyright { background: #060F1D; } #wrapwrap .o_footer_copyright, #wrapwrap .o_footer_copyright small { color: rgba(255,255,255,.55); } #wrapwrap .o_footer_copyright a:not(.btn) { color: rgba(255,255,255,.7) !important; } #wrapwrap .o_footer_copyright a:not(.btn):hover { color: #fff !important; } #wrapwrap .o_footer_copyright .o_footer_copyright_name { font-size: 0; } #wrapwrap .o_footer_copyright .o_footer_copyright_name::after { content: "\00A9 2026 Kantoortechshop.be \2014 een webshop van CompuService"; font-size: .8125rem; } #wrapwrap .o_footer_copyright .o_brand_promotion { display: none !important; } /* == KTS CART BADGE PATCH == */ header#top .my_cart_quantity, .o_wsale_my_cart .my_cart_quantity, sup.my_cart_quantity.badge { background-color: var(--kts-primary) !important; color: #fff !important; } .badge.text-bg-primary { background-color: var(--kts-primary) !important; color: #fff !important; } .badge.text-bg-secondary { background-color: var(--kts-navy) !important; color: #fff !important; } /* == KTS COOKIE ACCEPT BUTTON PATCH == */ #website_cookies_bar #cookies-consent-all { background-color: var(--kts-primary) !important; border-color: var(--kts-primary) !important; color: #fff !important; font-weight: 600; } #website_cookies_bar #cookies-consent-all:hover, #website_cookies_bar #cookies-consent-all:focus { background-color: var(--kts-primary-dark) !important; border-color: var(--kts-primary-dark) !important; color: #fff !important; } #website_cookies_bar #cookies-consent-essential { background-color: transparent !important; border-color: var(--kts-primary) !important; color: var(--kts-primary) !important; } #website_cookies_bar #cookies-consent-essential:hover { background-color: var(--kts-primary-soft) !important; }