/* ============================================================= KamagraKopen247.nl – Homepage stylesheet Structure: 1. Tokens 2. Base 3. Layout helpers 4. Components 5. Sections (in page order) 6. Utilities 7. Responsive ============================================================= */ /* ---------- 1. Design tokens ---------- */ :root { --navy: #0b2a5b; --navy-2: #0f3a75; --navy-3: #16478c; --blue: #2f80ed; --blue-50: #f3f8fd; --blue-100: #e6f0fa; --blue-200: #cfe0f3; --green: #22a05a; --green-dark: #178a4a; --green-50: #e9f8ef; --orange: #f47a20; --orange-dark: #e06a10; --orange-50: #fff1e6; --text: #17263f; --muted: #5b6b82; --border: #e3eaf3; --white: #ffffff; --star: #f5b301; /* Deliberately not Plus Jakarta Sans (kamagrajelly.nl) or Outfit/Poppins (kamagrakopen24.nl), so this site does not read as the same template. */ --font-head: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --font-hand: "Kalam", "Segoe Script", cursive; --radius: 18px; --radius-sm: 12px; --radius-xs: 8px; --shadow-sm: 0 2px 8px rgba(11, 42, 91, 0.06); --shadow: 0 12px 32px rgba(11, 42, 91, 0.09); --shadow-lg: 0 24px 60px rgba(11, 42, 91, 0.16); --container: 1200px; --gutter: 24px; --header-h: 84px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.62; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* `hidden` turns into a scroll container, which silently breaks every position:sticky descendant (the product page's table of contents). `clip` stops the same horizontal overflow without creating that scroll container. */ @supports (overflow: clip) { body { overflow-x: clip; } } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; } h1 { font-size: clamp(2.05rem, 4.3vw, 3.35rem); font-weight: 800; letter-spacing: -0.025em; } h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; } h3 { font-size: 1.2rem; font-weight: 700; } p { margin: 0 0 1em; } a { color: var(--navy-2); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--blue); } img, svg { max-width: 100%; height: auto; display: block; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } input, textarea { font-family: inherit; font-size: 1rem; } :focus-visible { outline: 3px solid rgba(47, 128, 237, 0.45); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 2000; } .skip-link:focus { top: 12px; } /* ---------- 3. Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* Long-form pages (privacy, terms, FAQ intro…) as a premium content card instead of a bare, cramped text column. */ .container--narrow { max-width: 900px; } .container--narrow > .prose__body { max-width: none; margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 56px; box-shadow: var(--shadow-sm); } .container--narrow > .prose__body > h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); } @media (max-width: 640px) { .container--narrow > .prose__body { padding: 30px 22px; } } .section { padding: 72px 0; } .section--tight { padding: 56px 0; } .section--soft { background: var(--blue-50); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; } .section-head h2 { margin-bottom: 0; } .eyebrow { display: inline-block; font-family: var(--font-head); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: var(--navy); white-space: nowrap; } .link-arrow svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* ---------- 4. Components ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 0.98rem; border: 2px solid transparent; line-height: 1; white-space: nowrap; transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s; } .btn svg { width: 18px; height: 18px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: linear-gradient(135deg, #ff8c2f, var(--orange) 55%, var(--orange-dark)); color: #fff; box-shadow: 0 10px 24px rgba(244, 122, 32, 0.32); } .btn--primary:hover { color: #fff; box-shadow: 0 14px 30px rgba(244, 122, 32, 0.4); } .btn--green { background: linear-gradient(135deg, #2bb867, var(--green) 60%, var(--green-dark)); color: #fff; box-shadow: 0 10px 24px rgba(34, 160, 90, 0.28); } .btn--green:hover { color: #fff; } .btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); } .btn--outline:hover { background: var(--navy); color: #fff; } .btn--navy { background: var(--navy-2); color: #fff; } .btn--navy:hover { background: var(--navy-3); color: #fff; } .btn--white { background: #fff; color: var(--navy); } .btn--white:hover { color: var(--navy); } .btn--sm { padding: 11px 20px; font-size: 0.9rem; } .btn--block { width: 100%; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .badge--green { background: var(--green); color: #fff; } .badge--orange { background: var(--orange); color: #fff; } .badge--navy { background: var(--navy); color: #fff; } .badge--soft { background: var(--blue-100); color: var(--navy-2); } .badge--pink { background: #d94f8c; color: #fff; } .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-200); } .icon-circle { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } .icon-circle svg { width: 22px; height: 22px; } .icon-circle--navy { background: var(--navy); color: #fff; } .icon-circle--green { background: var(--green); color: #fff; } .icon-circle--soft { background: var(--blue-100); color: var(--navy-2); } .icon-circle--outline { border: 2px solid var(--navy); color: var(--navy); } .stars { display: inline-flex; align-items: center; gap: 2px; color: var(--star); } .stars svg { width: 14px; height: 14px; } .stars .star--empty { color: #d9e1ec; } /* ---------- 5. Sections ---------- */ /* Top bar */ .topbar { background: var(--navy); color: #d6e2f3; font-size: 0.8rem; } .topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; } .topbar__usps { display: flex; gap: 26px; flex-wrap: wrap; } .topbar__usps li { display: inline-flex; align-items: center; gap: 7px; } .topbar__usps svg { width: 15px; height: 15px; color: #6fd39a; } .topbar__right { display: flex; align-items: center; gap: 18px; } .topbar__right a { color: #d6e2f3; display: inline-flex; align-items: center; gap: 6px; } /* The icon helper emits bare ) */ .age-gate { position: fixed; inset: 0; z-index: 1100; background: rgba(6, 22, 48, 0.86); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; } .age-gate.is-visible { display: flex; } .age-gate__box { background: #fff; border-radius: 22px; max-width: 460px; padding: 36px; text-align: center; box-shadow: var(--shadow-lg); } .age-gate__box img { height: 56px; width: auto; margin: 0 auto 20px; } .age-gate__box p { color: var(--muted); font-size: 0.92rem; } .age-gate__actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; } /* ---------- Breadcrumb (every page type) ---------- */ .crumbs { border-bottom: 1px solid var(--border); background: #fff; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0; font-size: 0.85rem; color: var(--muted); } .crumbs li + li::before { content: "/"; margin-right: 8px; color: #b7c3d4; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--navy); } .crumbs [aria-current] { color: var(--navy); font-weight: 600; } /* ---------- 5b. Long-form content (pages, posts, products) ---------- */ /* ---------- Long-form content + sticky table of contents ---------- */ .prose__grid { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; } .toc { position: sticky; top: calc(var(--header-h) + 20px); background: var(--blue-50); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; } .toc__title { display: block; font-family: var(--font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; } .toc a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 0.87rem; color: var(--text); line-height: 1.35; } .toc a:hover { background: #fff; color: var(--navy); } .toc a.is-active { background: #fff; color: var(--navy); font-weight: 700; box-shadow: var(--shadow-sm); } .prose__body { max-width: none; } .prose__block { scroll-margin-top: calc(var(--header-h) + 24px); } .prose__block + .prose__block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border); } .prose__block h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); margin-bottom: 14px; } .prose__block p { color: var(--muted); } .prose__block p:last-child { margin-bottom: 0; } .ticklist { display: grid; gap: 10px; margin: 4px 0 18px; } .ticklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; } .ticklist svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--green); } .ticklist b { color: var(--navy); } /* A tick next to "ernstige hart- en vaatziekten" reads as approval, so warning lists get a neutral dot instead. */ .ticklist--warn li svg { display: none; } .ticklist--warn li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; margin-top: 9px; } .chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 18px; } .chips li { background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--navy-2); border-radius: 999px; padding: 8px 16px; font-size: 0.88rem; font-weight: 600; } .safety { display: flex; gap: 18px; margin-top: 40px; padding: 26px 28px; background: linear-gradient(135deg, #0d326d, var(--navy)); color: #cddcf0; border-radius: var(--radius); } .safety h2 { color: #fff; font-size: 1.15rem; margin-bottom: 10px; } .safety p { color: #c3d5ee; font-size: 0.92rem; } .safety p:last-child { margin-bottom: 0; } .safety__ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; } .safety__ico svg { width: 22px; height: 22px; } @media (max-width: 1100px) { .prose__grid { grid-template-columns: 200px 1fr; gap: 36px; } } @media (max-width: 992px) { .prose__grid { grid-template-columns: 1fr; gap: 0; } /* the sticky rail becomes a plain jump-list above the text */ .toc { position: static; margin-bottom: 32px; } .toc ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; } .prose__body { max-width: none; } } @media (max-width: 640px) { .toc ul { grid-template-columns: 1fr; } .safety { flex-direction: column; gap: 14px; padding: 22px; } } /* Lists inside SCF wysiwyg output */ .prose__block ul:not(.accordion), .prose__body > ul, .prose__body ul:not(.accordion):not(.toc ul) { display: grid; gap: 10px; margin: 4px 0 18px; padding: 0; list-style: none; } .prose__block ul:not(.accordion) > li, .prose__body > ul > li, .prose__body ul:not(.accordion) > li { position: relative; display: block; padding-left: 22px; font-size: 0.95rem; } .prose__block ul:not(.accordion) > li::before, .prose__body > ul > li::before, .prose__body ul:not(.accordion) > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .prose__block--warn ul > li::before { background: var(--orange); } .prose__body ul > li + li { margin-top: 8px; } /* Long-form page bodies (Over ons, Privacybeleid, Algemene voorwaarden) */ .prose__body > h2 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin: 34px 0 12px; } .prose__body > h2:first-of-type { margin-top: 22px; } .prose__body > h3 { font-size: 1.1rem; margin: 26px 0 10px; } .prose__body > p { color: var(--muted); } .prose__body > p strong, .prose__body li strong { color: var(--navy); } .prose__body > h1 { margin-bottom: 6px; } /* Contextual in-content links (internal cross-links + authority sources) */ .prose__body p a, .prose__body li a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--blue-200); transition: color 0.2s, text-decoration-color 0.2s; } .prose__body p a:hover, .prose__body li a:hover { color: var(--green-dark); text-decoration-color: var(--green); } /* Keep the Bronnen cards on their own styling, not the inline-link look */ .prose__body .references__list a, .references__list a { color: var(--navy); font-weight: 600; text-decoration: none; } .prose__body .references__list a:hover, .references__list a:hover { color: var(--navy); } /* ---------- 5c. About us (pharmacy-style, icon + image led) ---------- */ .about-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .about-hero__grid h1 { margin: 10px 0 16px; } .about-hero__grid p { color: var(--muted); } .about-hero__media img { display: block; width: 100%; max-width: 420px; margin: 0 auto; border-radius: var(--radius); box-shadow: var(--shadow); } .about-mission { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow-sm); } .about-mission .icon-circle { width: 52px; height: 52px; } .about-mission .icon-circle svg { width: 24px; height: 24px; } .about-mission h2 { margin-bottom: 8px; } .about-mission p { color: var(--muted); } .about-why { margin-top: 30px; } .about-why__item { text-align: left; padding: 28px 26px; } .about-why__item .icon-circle { margin-bottom: 16px; } .about-why__item h3 { font-size: 1.05rem; margin-bottom: 6px; } .about-why__item p { color: var(--muted); font-size: 0.93rem; margin: 0; } .about-why__lead { color: var(--muted); max-width: 60ch; margin: 10px 0 0; } .about-central { max-width: 720px; } .about-central p { color: var(--muted); } .about-central .btn { margin-top: 12px; } .about-tagline { text-align: center; max-width: 760px; margin: 0 auto; font-family: var(--font-head); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; color: var(--navy); line-height: 1.4; } @media (max-width: 900px) { .about-hero__grid { grid-template-columns: 1fr; gap: 30px; text-align: left; } .about-hero__media { order: -1; } .about-hero__media img { max-width: 280px; } .about-mission { flex-direction: column; } } /* ---------- 5d. Contact form (Contact Form 7) ---------- */ .kk-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 34px; box-shadow: var(--shadow-sm); margin-top: 26px; } .kk-form .wpcf7-form label { display: block; margin-bottom: 18px; font-weight: 600; color: var(--navy); font-size: 0.92rem; } .kk-form .wpcf7-form label:last-of-type { margin-bottom: 0; } .kk-form .wpcf7-form-control-wrap { display: block; margin-top: 6px; } .kk-form .wpcf7-form-control { width: 100%; padding: 13px 16px; border: 2px solid var(--border); border-radius: 12px; background: var(--blue-50); font-family: inherit; font-size: 0.96rem; color: var(--text); transition: border-color 0.2s, background 0.2s; } .kk-form textarea.wpcf7-form-control { min-height: 130px; resize: vertical; } .kk-form .wpcf7-form-control:focus { outline: none; border-color: var(--blue); background: #fff; } .kk-form .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; padding: 15px 30px; border: 0; border-radius: 999px; cursor: pointer; line-height: 1; font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; color: #fff; background: linear-gradient(135deg, #2bb867, var(--green) 60%, var(--green-dark)); box-shadow: 0 10px 24px rgba(34, 160, 90, 0.28); transition: transform 0.2s var(--ease), box-shadow 0.2s; } .kk-form .wpcf7-submit:hover { transform: translateY(-2px); } .kk-form .wpcf7-spinner { margin-left: 10px; } .kk-form .wpcf7-not-valid-tip { color: var(--orange-dark); font-size: 0.82rem; font-weight: 600; margin-top: 6px; } .kk-form .wpcf7-not-valid { border-color: var(--orange) !important; } .kk-form .wpcf7-response-output { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 0.9rem; } .kk-form form.sent .wpcf7-response-output { background: var(--green-50); border: 1px solid rgba(34, 160, 90, 0.3); color: var(--green-dark); } .kk-form form.failed .wpcf7-response-output, .kk-form form.aborted .wpcf7-response-output, .kk-form form.spam .wpcf7-response-output { background: var(--orange-50); border: 1px solid #ffd9bd; color: #6b3b12; } /* ---------- 6. Utilities / motion ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.1s; } .reveal[data-delay="2"] { transition-delay: 0.2s; } .reveal[data-delay="3"] { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------- 7. Responsive ---------- */ @media (max-width: 1280px) { .nav__link { padding: 10px 10px; font-size: 0.9rem; } .megamenu { grid-template-columns: repeat(3, 1fr); gap: 0 16px; padding: 20px 18px 0; } .trustbar li { padding: 18px 16px; } .trustbar small { font-size: 0.76rem; } } /* Below this the copy no longer fits inside the banner's own height, so the hero stacks: text on the flat background, banner as a cropped strip underneath. */ @media (max-width: 1150px) { .hero { display: block; aspect-ratio: auto; min-height: 0; } .hero .container { padding-top: 40px; padding-bottom: 28px; } .hero__content { max-width: none; } .hero h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); } .hero__lead { font-size: 1.05rem; } .hero__media { position: relative; inset: auto; } .hero__bg { position: static; width: 100%; height: clamp(220px, 58vw, 330px); } .hero__tag { right: 4%; top: 8%; font-size: clamp(1.1rem, 2.4vw, 1.6rem); } } /* Tablets: only one top-bar USP fits next to the e-mail address */ @media (max-width: 900px) { .topbar__usps li:nth-child(n+2) { display: none; } } /* Small laptops: the full desktop header no longer fits, so trim it down */ @media (max-width: 1150px) { .topbar__usps li:nth-child(n+3) { display: none; } .header .container { gap: 14px; } .logo img { height: 46px; } .nav__link { padding: 10px 9px; font-size: 0.9rem; } .header__cta { display: none; } } @media (max-width: 1100px) { .promo { grid-template-columns: 1fr 250px; gap: 26px; padding: 36px 32px 0; } .promo__list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding-bottom: 36px; } .promo__list li + li { border-top: 0; } .promo__list li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.13); } .footer__main { grid-template-columns: 1.4fr 1fr 1fr; } .promo { grid-template-columns: 1fr 1fr; } .promo__list { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { :root { --header-h: 72px; } .nav { display: none; } .burger { display: block; } .header__cta { display: none; } .logo img { height: 42px; } .topbar__usps li:nth-child(n+3) { display: none; } .trustbar ul { grid-template-columns: repeat(2, 1fr); } .trustbar li:nth-child(3) { border-left: 0; } .trustbar li:nth-child(n+3) { border-top: 1px solid var(--border); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .why__top { grid-template-columns: 1fr; gap: 28px; } .faq { grid-template-columns: 1fr; gap: 24px; } .newsletter { grid-template-columns: auto 1fr; } .newsletter form { grid-column: 1 / -1; min-width: 0; } /* Mobile nav panel */ .nav.is-open { display: block; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: #fff; z-index: 890; overflow-y: auto; padding: 16px var(--gutter) 40px; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__item { border-bottom: 1px solid var(--border); } .nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.05rem; } .nav__link::after { display: none; } .dropdown, .megamenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px; display: none; min-width: 0; } .nav__item.is-open > .dropdown, .nav__item.is-open > .megamenu { display: block; } .megamenu__foot > span { display: none; } .megamenu__title { padding: 14px 4px 6px; } .megamenu__title--gap { margin-top: 6px; } .megamenu__col a { padding: 8px 4px; } .megamenu__foot { margin-top: 6px; padding: 14px 4px 4px; } .nav__mobile-cta { margin-top: 20px; display: grid; gap: 10px; } } @media (min-width: 993px) { .nav__mobile-cta { display: none; } } @media (max-width: 640px) { .section { padding: 52px 0; } .bundle { padding: 26px 20px 20px; } .bundle__thumbs img { width: 66px; height: 66px; } .bundles__foot { gap: 12px 24px; } .topbar .container { justify-content: center; } .topbar__right { display: none; } .hero__actions .btn { flex: 1; } .hero__tag { top: 6%; right: 5%; max-width: 8em; } .trustbar li { padding: 14px 10px; gap: 9px; } .trustbar svg { width: 22px; height: 22px; } .trustbar b { font-size: 0.85rem; } .trustbar small { font-size: 0.72rem; } .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } .topbar__usps li:nth-child(n+2) { display: none; } /* Products: two per row on phones */ .products .grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; } .product-card { padding: 10px 10px 12px; } .product-card__badge { top: 8px; right: 8px; padding: 4px 8px; font-size: 0.62rem; } .product-card h3 { font-size: 0.9rem; } .product-card__meta { font-size: 0.74rem; } .product-card__rating { font-size: 0.7rem; } .product-card__rating .stars svg { width: 11px; height: 11px; } .product-card .price { font-size: 1.05rem; } .product-card .price--old { font-size: 0.78rem; } .product-card .btn { padding: 10px 8px; font-size: 0.8rem; gap: 6px; } .product-card .btn svg { width: 15px; height: 15px; } .product-card__quick { display: none; } .section-head { flex-direction: column; align-items: flex-start; gap: 8px; } .promo { padding: 30px 22px 0; grid-template-columns: 1fr; gap: 0; text-align: left; } .promo__text { padding-bottom: 26px; } .promo__img { order: 3; align-self: center; } .promo__img img { max-width: 230px; } .promo__list { grid-column: auto; grid-template-columns: 1fr; padding-bottom: 8px; } /* back to one column, so every item gets a divider again */ .promo__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.13); } .why__stats { gap: 18px; flex-wrap: wrap; } .newsletter { padding: 22px; grid-template-columns: 1fr; } .newsletter__icon { display: none; } .newsletter form { flex-direction: column; } .footer__main { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 32px; } .footer__bottom { flex-direction: column; text-align: center; } .whatsapp-fab span { display: none; } .whatsapp-fab { padding: 14px; } .cookie { left: 12px; right: 12px; max-width: none; bottom: 12px; } .to-top { display: none; } } /* ---- Logo (PNG, 400x173) ---- */ .logo img { height: 52px; width: auto; max-width: 220px; object-fit: contain; } .footer__logo { display: inline-block; background: #fff; border-radius: 14px; padding: 10px 16px; margin-bottom: 18px; } .footer__logo img { height: 52px; width: auto; margin: 0; } .age-gate__box img { height: 64px; } /* ---- Mega dropdown (all 13 products) ---- */ /* ---- Mega menu: thumbnails instead of a bare price list ---- */ .nav { position: relative; } /* Desktop-only centering + grid. Kept behind a min-width guard so the translate(-50%) never leaks onto the mobile panel (where the menu is a static, full-width stacked list) and shoves it off-screen. */ @media (min-width: 993px) { .nav__item--has-dropdown { position: static; } .megamenu { left: 50%; transform: translate(-50%, 8px); min-width: min(860px, calc(100vw - 48px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 22px; padding: 22px 24px 0; } .nav__item:hover > .megamenu, .nav__item.is-open > .megamenu { transform: translate(-50%, 0); } } .megamenu__col { display: flex; flex-direction: column; } .megamenu__title { font-family: var(--font-head); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--green); padding: 2px 10px 8px; } .megamenu__title--gap { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 14px; } .megamenu__col a { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 10px; } .megamenu__col a img { width: 42px; height: 42px; object-fit: contain; background: var(--blue-50); border-radius: 9px; padding: 3px; flex: none; transition: background 0.2s, transform 0.25s var(--ease); } .megamenu__col a b { display: block; font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--navy); line-height: 1.25; } .megamenu__col a small { font-size: 0.75rem; color: var(--muted); } .megamenu__col a:hover { background: var(--blue-50); } .megamenu__col a:hover img { background: #fff; transform: scale(1.06); } .megamenu__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; border-top: 1px solid var(--border); padding: 14px 10px; font-size: 0.85rem; } .megamenu__foot a { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: var(--green); font-weight: 700; } .megamenu__foot a:hover { background: none; color: var(--green-dark); } .megamenu__foot > span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); } .megamenu__foot svg { width: 16px; height: 16px; } .header__actions { display: flex; align-items: center; gap: 6px; flex: none; } .icon-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--navy); transition: background 0.2s; } .icon-btn:hover { background: var(--blue-100); } .icon-btn svg { width: 22px; height: 22px; } .cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; } .cart-count.bump { animation: bump 0.4s var(--ease); } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } } .header__cta { margin-left: 10px; } .burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; padding: 8px; } .burger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; margin: 6px 0; transition: transform 0.3s, opacity 0.3s; } .burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger.is-active span:nth-child(2) { opacity: 0; } .burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Search bar */ .search-bar { display: none; border-top: 1px solid var(--border); background: #fff; padding: 14px 0; } .search-bar.is-open { display: block; } .search-bar form { display: flex; gap: 10px; max-width: 720px; margin: 0 auto; } .search-bar input { flex: 1; padding: 13px 18px; border: 2px solid var(--border); border-radius: 999px; } .search-bar input:focus { border-color: var(--blue); outline: none; } /* ---- Price label on product cards ---- */ .price small { font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; } .price--unit { font-size: 0.78rem; color: var(--muted); } .product-card__price { flex-wrap: wrap; gap: 4px 10px; } /* ---- Ons assortiment ---- */ .assortiment__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; } .assortiment__body p { color: var(--muted); } .assortiment__note { display: flex; gap: 14px; align-items: flex-start; background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 0.92rem; color: var(--navy-2); margin: 22px 0 24px; } .assortiment__note svg { width: 22px; height: 22px; flex: none; color: var(--navy-2); margin-top: 2px; } /* ---- Hoe werkt Kamagra ---- */ .how__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; } .how__grid p { color: var(--muted); } .how__facts { display: grid; gap: 14px; } .how__fact { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; box-shadow: var(--shadow-sm); } .how__fact .icon-circle { grid-row: span 2; } .how__fact b { font-family: var(--font-head); font-size: 1.05rem; color: var(--navy); align-self: end; } .how__fact small { font-size: 0.86rem; color: var(--muted); line-height: 1.45; align-self: start; } /* ---- Contact button (replaces the WhatsApp one until a number is supplied) ---- */ .contact-fab { position: fixed; right: 22px; bottom: 22px; z-index: 950; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #2bb867, var(--green) 60%, var(--green-dark)); color: #fff; padding: 13px 20px 13px 16px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; box-shadow: 0 12px 28px rgba(34, 160, 90, 0.36); transition: transform 0.2s; } .contact-fab:hover { transform: translateY(-3px); color: #fff; } .contact-fab svg { width: 22px; height: 22px; } @media (max-width: 992px) { .assortiment__grid, .how__grid { grid-template-columns: 1fr; gap: 26px; } /* This rule must remain after the shared header declarations above. */ .burger { display: block; } } @media (max-width: 640px) { .contact-fab span { display: none; } .contact-fab { padding: 14px; } .how__fact { grid-template-columns: 1fr; gap: 8px; } .how__fact .icon-circle { grid-row: auto; } }