/* ============================================================================ MODAL — product detail dialog ---------------------------------------------------------------------------- Loaded by : products.html Depends on: base/tokens.css, base/global.css (body.modal-open) Scripted by: js/catalogue.js One .modal-overlay per product sits in the page, hidden. Opening adds .active to it and .modal-open to to lock background scroll. Closes on the X, on the backdrop, or on Escape. ============================================================================ */ .modal-overlay{ display:none; position:fixed;top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.6);z-index:9999; align-items:center;justify-content:center;padding:2rem; } .modal-overlay.active{display:flex;} .modal-box{ background:var(--white);border-radius:12px; max-width:720px;width:100%;max-height:90vh;overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:modalIn 0.25s ease; } @keyframes modalIn{ from{opacity:0;transform:scale(0.95) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} } /* ── Header ─────────────────────────────────────────────────────────────── */ .modal-header{ display:flex;align-items:center;justify-content:space-between; padding:1.5rem 2rem;border-bottom:1px solid var(--border); } .modal-header h3{font-size:1.15rem;font-weight:800;color:var(--text-dark);} .modal-close{ width:36px;height:36px;border-radius:50%; border:1px solid var(--border);background:var(--light);cursor:pointer; display:flex;align-items:center;justify-content:center; font-size:1.1rem;color:var(--text-mid);transition:all 0.2s; } .modal-close:hover{background:var(--navy);color:var(--white);border-color:var(--navy);} /* ── Image well ─────────────────────────────────────────────────────────── */ .modal-img{ width:100%;background:var(--light); display:flex;align-items:center;justify-content:center; padding:2rem;min-height:250px; } .modal-img img{max-width:80%;max-height:280px;object-fit:contain;} .modal-img .modal-icon{font-size:5rem;color:var(--navy);opacity:0.2;} /* Brand logo standing in for a product photo. Qualified with img so it outranks `.modal-img img` above, which is also (0,1,1) and would otherwise win on source order. */ img.modal-brand-logo{max-width:50%;opacity:0.6;} img.modal-brand-logo--lg{max-width:60%;} /* Two photos side by side; sizing on the descendant so each needs no class. */ .modal-img-dual{display:flex;gap:1rem;padding:2rem;} .modal-img-dual img{width:48%;object-fit:contain;} /* ── Details ────────────────────────────────────────────────────────────── */ .modal-details{padding:2rem;} .modal-details .md-badge{ display:inline-block;background:var(--light2);border:1px solid var(--border); color:var(--navy);font-size:0.68rem;font-weight:700; letter-spacing:1px;text-transform:uppercase;padding:3px 10px; border-radius:3px;margin-bottom:0.8rem; } .modal-details .md-model{ font-size:0.78rem;font-weight:700;color:var(--blue); letter-spacing:0.8px;text-transform:uppercase;margin-bottom:1rem; } .modal-details p{font-size:0.9rem;color:var(--text-mid);line-height:1.75;margin-bottom:1rem;} .modal-details h4{ font-size:0.82rem;font-weight:700;color:var(--text-dark); text-transform:uppercase;letter-spacing:1px;margin-bottom:0.5rem; } .modal-details .spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem 2rem;margin-bottom:1.2rem;} .modal-details .spec-row{ display:flex;justify-content:space-between; padding:8px 0;border-bottom:1px solid var(--border);font-size:0.82rem; } .spec-row .s-lbl{color:var(--text-light);font-weight:500;} .spec-row .s-val{color:var(--text-dark);font-weight:700;} .modal-details .md-list{padding:0;margin-bottom:1rem;} .modal-details .md-list li{ font-size:0.82rem;color:var(--text-mid); padding:4px 0 4px 16px;position:relative;line-height:1.6; } .modal-details .md-list li::before{content:'–';position:absolute;left:0;color:var(--navy);} .modal-cta{ display:inline-flex;align-items:center;gap:8px; background:var(--navy);color:var(--white); padding:11px 24px;border-radius:5px; font-size:0.85rem;font-weight:600; border:none;cursor:pointer;text-decoration:none; transition:background 0.25s;margin-top:0.5rem; } .modal-cta:hover{background:var(--blue);} /* ── Content helpers ────────────────────────────────────────────────────── */ /* These come last and are scoped to .modal-details on purpose: each one has to outrank a broader rule above (.modal-details p sets font-size, .modal-cta sets margin-top). A bare single-class selector would silently lose. */ /* Emphasised opening line of a modal. */ .modal-details .md-lead{color:var(--navy);font-weight:600;} /* Small trailing caveat, e.g. "not all variants listed". */ .modal-details .md-note{margin-top:1rem;font-size:0.85rem;color:var(--text-mid);} /* Extra breathing room above a block that follows a list. */ .modal-details .md-spaced{margin-top:0.75rem;} @media(max-width:640px){ .modal-overlay{padding:0.5rem;} .modal-details .spec-grid{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){ .modal-box{animation:none;} }