/* Luxeraamdecor Kleurstaal Bestellen — frontend */ :root { --lrd-ks-navy: #0e2c54; --lrd-ks-orange: #ef7f1a; --lrd-ks-border: #d8dee8; --lrd-ks-text: #1d2939; --lrd-ks-muted: #667085; --lrd-ks-bg-soft: #f5f7fb; } /* ---- CTA on the product page ---- */ .lrd-ks-cta { margin: 16px 0 20px; } /* Reset any inherited button styles from the theme. */ .lrd-ks-open-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px; background: linear-gradient(135deg, #ef7f1a 0%, #f08a2e 100%); color: #fff; border: 0; border-radius: 12px; box-shadow: 0 4px 14px rgba(239, 127, 26, 0.28); text-align: left; cursor: pointer; font-family: inherit; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; -webkit-tap-highlight-color: rgba(0,0,0,0); } .lrd-ks-open-btn:hover, .lrd-ks-open-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(239, 127, 26, 0.36); filter: brightness(1.04); } .lrd-ks-open-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(239, 127, 26, 0.32); } .lrd-ks-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; background: #fff; color: var(--lrd-ks-orange); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1; } .lrd-ks-btn-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lrd-ks-btn-title { font-size: 16px; font-weight: 700; line-height: 1.2; } .lrd-ks-btn-sub { font-size: 12.5px; opacity: 0.92; line-height: 1.2; } .lrd-ks-btn-arrow { flex: 0 0 auto; font-size: 22px; font-weight: 700; transition: transform .15s ease; } .lrd-ks-open-btn:hover .lrd-ks-btn-arrow { transform: translateX(3px); } /* When injected at the top of the configurator's .lrd-steps, give the CTA a little extra bottom margin so it doesn't crowd step 1. */ .lrd-configurator .lrd-steps > .lrd-ks-cta { margin: 4px 0 20px; } /* Mobile tuning: button stays full-width (already is), tighter padding, smaller text. */ @media (max-width: 600px) { .lrd-ks-open-btn { min-height: 60px; padding: 12px 14px; gap: 10px; border-radius: 10px; } .lrd-ks-btn-title { font-size: 15px; } .lrd-ks-btn-sub { font-size: 12px; } .lrd-ks-btn-arrow { font-size: 20px; } } /* ---- Modal ---- */ .lrd-ks-modal { position: fixed; inset: 0; /* Top of the stacking order — beats sticky checkout bars, header dropdowns, chat widgets, etc. JS also re-parents the modal to to escape any parent stacking context. */ z-index: 2147483647; display: none; } /* Browsers clamp z-index to the max signed 32-bit int (2147483647) regardless of how many nines a CSS rule writes. So a `.sticky-bottom-bar { z-index: 99999999999 !important }` ends up tied with our modal and wins on DOM order. While the modal is open, hide known sticky bars instead of fighting the z-index race. */ body.lrd-ks-modal-open .sticky-bottom-bar, body.lrd-ks-modal-open .lrd-sticky-bar, body.lrd-ks-modal-open #sticky-checkout-button { display: none !important; } .lrd-ks-modal.is-open { display: block; } .lrd-ks-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 44, 84, 0.55); backdrop-filter: blur(2px); } .lrd-ks-modal-panel { position: relative; max-width: 920px; width: calc(100% - 32px); margin: 40px auto; max-height: calc(100vh - 80px); background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(14, 44, 84, 0.25); display: flex; flex-direction: column; overflow: hidden; } .lrd-ks-modal-close { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: var(--lrd-ks-muted); cursor: pointer; padding: 4px 8px; z-index: 2; } .lrd-ks-modal-close:hover { color: var(--lrd-ks-navy); } .lrd-ks-modal-header { padding: 22px 24px 12px; border-bottom: 1px solid var(--lrd-ks-border); } .lrd-ks-modal-header h2 { margin: 0 0 4px; color: var(--lrd-ks-navy); font-size: 20px; font-weight: 700; } .lrd-ks-modal-sub { margin: 0; color: var(--lrd-ks-muted); font-size: 14px; } /* Grid of swatch cards */ .lrd-ks-grid { padding: 18px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; overflow-y: auto; flex: 1 1 auto; } .lrd-ks-card { position: relative; display: block; background: #fff; border: 2px solid var(--lrd-ks-border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease; } .lrd-ks-card input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; } .lrd-ks-card-img { display: block; aspect-ratio: 1 / 1; background: var(--lrd-ks-bg-soft); overflow: hidden; } .lrd-ks-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .2s ease; } .lrd-ks-card:hover { border-color: var(--lrd-ks-navy); } .lrd-ks-card:hover .lrd-ks-card-img img { transform: scale(1.06); } /* CPO products (rolgordijnen/jaloezieën) store window-context photos as their swatch image. Zoom in around the curtain area (roughly 30% from top of the photo) so the card shows the fabric stripes/colour rather than the full window scene with grass and frame. */ .lrd-ks-card--cpo .lrd-ks-card-img img { transform: scale(2.4); transform-origin: 50% 32%; } .lrd-ks-card--cpo:hover .lrd-ks-card-img img { transform: scale(2.5); } .lrd-ks-card.is-selected { border-color: var(--lrd-ks-orange); box-shadow: 0 0 0 3px rgba(239, 127, 26, 0.18); } .lrd-ks-card.is-selected::after { content: ""; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--lrd-ks-orange); background-image: url("data:image/svg+xml;utf8,"); background-size: 14px; background-position: center; background-repeat: no-repeat; } .lrd-ks-card.is-disabled { opacity: 0.45; cursor: not-allowed; } /* Footer */ .lrd-ks-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--lrd-ks-border); background: var(--lrd-ks-bg-soft); flex-wrap: wrap; } .lrd-ks-counter { font-weight: 700; color: var(--lrd-ks-navy); font-size: 15px; } .lrd-ks-feedback { flex: 1 1 100%; color: var(--lrd-ks-muted); font-size: 13px; min-height: 16px; order: 3; } .lrd-ks-feedback.is-error { color: #b42318; } .lrd-ks-feedback.is-success { color: #067647; } .lrd-ks-submit { background: var(--lrd-ks-orange) !important; border-color: var(--lrd-ks-orange) !important; color: #fff !important; font-weight: 700; padding: 11px 22px !important; border-radius: 8px !important; } .lrd-ks-submit:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 600px) { /* Full-screen modal on phones — easier to scan many swatches on a small viewport. */ .lrd-ks-modal-panel { margin: 0; width: 100%; max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; } .lrd-ks-modal-close { top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; font-size: 32px; line-height: 32px; } .lrd-ks-modal-header { padding: 18px 16px 12px; } .lrd-ks-modal-header h2 { font-size: 18px; padding-right: 40px; } .lrd-ks-grid { padding: 12px 16px 16px; grid-template-columns: repeat(3, 1fr); gap: 10px; } .lrd-ks-modal-footer { padding: 10px 14px max(10px, env(safe-area-inset-bottom, 10px)); gap: 8px; } .lrd-ks-submit { width: 100%; min-height: 52px; padding: 14px !important; font-size: 16px !important; border-radius: 10px !important; } .lrd-ks-counter { font-size: 14px; } } @media (max-width: 360px) { .lrd-ks-grid { grid-template-columns: repeat(2, 1fr); } }