/* =========================================================================== Quotation Request Module - public stylesheet. Brand comes from the HASNET ICT Solution logo: navy #091059 the wordmark - structure, headings, the primary surface orange #F16C2C the swoosh - actions and highlights red #CE312D the arc - errors only blue #2F6EA5 the globe - informational notes Navy carries the page; orange is the energy, used sparingly, exactly as the logo does it. Typography matches the ShopManager dashboard exactly, so the client-facing pages read as the same product. From assets/css/style.css: body Open Sans h1..h6 Nunito .card-title Poppins .logo span Nunito The same Google Fonts URL the dashboard uses is loaded here, so the browser reuses one cached copy across both. Self-contained: the public pages do not load the NiceAdmin dashboard theme, so this module can be restyled or removed without touching core assets. ======================================================================== */ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap"); :root{ --q-ground:#F5F7F8; --q-surface:#FFFFFF; --q-surface-2:#EEF2F3; --q-ink:#18222B; --q-ink-soft:#4C5A66; --q-ink-faint:#7A8894; --q-rule:#DDE3E7; --q-rule-soft:#E9EDF0; --q-brand:#091059; /* navy wordmark */ --q-brand-ink:#050B3C; /* navy, pressed */ --q-brand-soft:#E8EAF4; /* navy tint */ --q-accent:#F16C2C; /* orange swoosh */ --q-accent-ink:#D85A1C; --q-accent-soft:#FDEEE4; --q-info:#2F6EA5; /* globe blue */ --q-danger:#CE312D; /* the red arc */ --q-danger-soft:#FBEAE9; --q-warn:#8A6013; --q-warn-soft:#FBF0DC; --q-radius:9px; --q-radius-lg:18px; --q-shadow:0 1px 2px rgba(24,34,43,.05), 0 8px 24px rgba(24,34,43,.06); /* ---- glass ---- A frosted surface needs three things: a background light enough to still read text on, a hairline border brighter than the surface (light catching an edge), and a soft, wide shadow standing in for depth a real pane of glass would cast. Buttons and the toast stay fully opaque - legibility on an action a client is about to tap matters more than the effect. */ --q-glass-bg:#FFFFFFB3; /* white at ~70% */ --q-glass-bg-strong:#FFFFFFCC; /* white at ~80%, for the sticky header */ --q-glass-border:#FFFFFF80; --q-glass-shadow:0 8px 32px rgba(9,16,89,.10), 0 1px 1px rgba(9,16,89,.05); --q-blur:18px; } *{box-sizing:border-box} body.qm{ margin:0; /* Two faint brand-coloured pools behind a light base - enough for a frosted panel to visibly pick something up, subtle enough to disappear behind a card with real content on it. Fixed so it doesn't scroll away and leave the glass looking at a flat colour. */ background: radial-gradient(880px 480px at 8% -8%, #0910590F, transparent 60%), radial-gradient(760px 420px at 100% 0%, #F16C2C12, transparent 55%), linear-gradient(180deg, #F3F5FA 0%, #ECEFF5 100%); background-attachment:fixed; color:var(--q-ink); font-family:"Open Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } body.qm-modal-open{overflow:hidden} /* ---------- shell ---------- */ .qm-bar{ background:var(--q-glass-bg-strong); backdrop-filter:blur(var(--q-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--q-blur)) saturate(160%); border-bottom:1px solid var(--q-glass-border); position:sticky;top:0;z-index:40; } .qm-bar-in{ max-width:1120px;margin:0 auto;padding:13px 22px; display:flex;align-items:center;justify-content:space-between;gap:16px; } .qm-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0} .qm-brand-mark{ width:34px;height:34px;border-radius:8px;flex:none; background:var(--q-brand);color:#fff; display:flex;align-items:center;justify-content:center; font-family:"Nunito",sans-serif; font-weight:700;font-size:15px;letter-spacing:-.02em; } /* The real logo, when the business has uploaded one. */ .qm-logo{height:38px;width:auto;max-width:190px;object-fit:contain;display:block} .qm-brand-tagline{font-family:"Nunito",sans-serif;font-size:14.5px;font-weight:600;color:var(--q-brand);line-height:1.25} .qm-cart-btn{ display:inline-flex;align-items:center;gap:9px; background:var(--q-accent);color:#fff;text-decoration:none; padding:9px 16px;border-radius:var(--q-radius); font-size:14.5px;font-weight:600;white-space:nowrap; border:none;cursor:pointer; } .qm-cart-btn:hover{background:var(--q-accent-ink)} .qm-cart-btn .n{ background:rgba(255,255,255,.22);border-radius:20px; padding:1px 8px;font-size:13px;font-variant-numeric:tabular-nums; } .qm-wrap{max-width:1120px;margin:0 auto;padding:26px 22px 80px} .qm-narrow{max-width:760px} /* ---------- steps ---------- */ .qm-steps{display:flex;align-items:center;gap:6px;margin:0 0 26px;flex-wrap:wrap} .qm-step{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--q-ink-faint)} .qm-step .dot{ width:25px;height:25px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; background:var(--q-surface-2);color:var(--q-ink-faint); font-size:12.5px;font-weight:700;border:1px solid var(--q-rule); } .qm-step.on{color:var(--q-ink);font-weight:600} .qm-step.on .dot{background:var(--q-accent);color:#fff;border-color:var(--q-accent)} .qm-step.done .dot{background:var(--q-brand);color:#fff;border-color:var(--q-brand)} .qm-step-sep{flex:1;min-width:14px;height:1px;background:var(--q-rule)} /* ---------- typography ---------- */ .qm-h1{font-family:"Nunito",sans-serif;font-size:27px;font-weight:700; letter-spacing:-.02em;margin:0 0 7px;line-height:1.2;color:var(--q-brand)} .qm-lede{color:var(--q-ink-soft);margin:0 0 24px;font-size:16.5px;max-width:62ch} .qm-h2{font-family:"Poppins",sans-serif;font-size:17.5px;font-weight:600;margin:0 0 4px;color:var(--q-brand)} /* ---------- cards & forms ---------- */ .qm-card{ background:var(--q-glass-bg); backdrop-filter:blur(var(--q-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--q-blur)) saturate(160%); border:1px solid var(--q-glass-border); border-radius:var(--q-radius-lg);box-shadow:var(--q-glass-shadow); padding:24px;margin-bottom:18px; } .qm-card-head{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--q-rule-soft)} .qm-card-head p{margin:4px 0 0;color:var(--q-ink-faint);font-size:14.5px} .qm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .qm-grid .full{grid-column:1/-1} @media (max-width:660px){.qm-grid{grid-template-columns:1fr}} .qm-field label{ display:block;font-size:13.5px;font-weight:600; margin-bottom:6px;color:var(--q-ink-soft); } .qm-field .req{color:var(--q-danger);font-weight:700} .qm-field .hint{font-weight:400;color:var(--q-ink-faint);font-size:12.5px} .qm-field input[type=text], .qm-field input[type=tel], .qm-field input[type=email], .qm-field input[type=date], .qm-field input[type=number], .qm-field select, .qm-field textarea{ width:100%;padding:10px 13px;font:inherit;font-size:15px; color:var(--q-ink);background:var(--q-surface); border:1px solid var(--q-rule);border-radius:7px; transition:border-color .12s, box-shadow .12s; } .qm-field textarea{min-height:96px;resize:vertical;line-height:1.55} .qm-field input:focus,.qm-field select:focus,.qm-field textarea:focus{ outline:none;border-color:var(--q-brand); box-shadow:0 0 0 3px var(--q-brand-soft); } .qm-field.bad input,.qm-field.bad select,.qm-field.bad textarea{border-color:var(--q-danger)} .qm-field .err{color:var(--q-danger);font-size:13px;margin-top:5px} /* radio cards */ .qm-choice{display:grid;grid-template-columns:repeat(2,1fr);gap:11px} @media (max-width:660px){.qm-choice{grid-template-columns:1fr}} .qm-choice label{ display:flex;gap:11px;align-items:flex-start;cursor:pointer; border:1px solid var(--q-glass-border);border-radius:12px;padding:13px 15px; background:var(--q-glass-bg); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); margin:0;font-weight:500; transition:border-color .12s, background .12s; } .qm-choice label:hover{border-color:var(--q-brand)} .qm-choice input{margin:3px 0 0;accent-color:var(--q-brand);flex:none} .qm-choice label b{display:block;font-size:14.5px;font-weight:600;color:var(--q-ink)} .qm-choice label span{display:block;font-size:13px;color:var(--q-ink-faint);line-height:1.45} .qm-choice input:checked + .qm-choice-txt b{color:var(--q-brand)} .qm-choice label:has(input:checked){border-color:var(--q-brand);background:var(--q-brand-soft)} /* honeypot - must stay invisible to people, visible to bots */ .qm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* ---------- buttons ---------- */ .qm-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 22px;border-radius:var(--q-radius); font-size:15px;font-weight:600;font-family:inherit; border:1px solid transparent;cursor:pointer;text-decoration:none; transition:background .12s,border-color .12s,transform .12s; position:relative;isolation:isolate; } /* A thin highlight along the top edge - the one cue glass surfaces need to read as glass rather than flat colour. On a solid button it doubles as the sheen a raised, tappable surface would catch. */ .qm-btn-primary::before,.qm-btn-navy::before{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; background:linear-gradient(180deg,#FFFFFF3D,transparent 55%); } .qm-btn-primary{background:var(--q-accent);color:#fff} .qm-btn-primary:hover{background:var(--q-accent-ink);transform:translateY(-1px)} .qm-btn-navy{background:var(--q-brand);color:#fff} .qm-btn-navy:hover{background:var(--q-brand-ink);transform:translateY(-1px)} .qm-btn-ghost{ background:var(--q-glass-bg);color:var(--q-ink-soft);border-color:var(--q-glass-border); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .qm-btn-ghost:hover{border-color:var(--q-ink-faint);color:var(--q-ink)} .qm-btn-sm{padding:7px 14px;font-size:13.5px} .qm-btn[disabled]{opacity:.5;cursor:not-allowed} .qm-actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:22px} .qm-actions .spacer{flex:1} /* ---------- alerts ---------- */ .qm-alert{ border-left:3px solid var(--q-brand);background:#E8EAF4B3; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); padding:13px 17px;border-radius:0 12px 12px 0;margin-bottom:20px;font-size:14.5px; } .qm-alert.bad{border-left-color:var(--q-danger);background:#FBEAE9B3} .qm-alert.warn{border-left-color:var(--q-warn);background:#FBF0DCB3} .qm-alert b{display:block;margin-bottom:3px} .qm-alert ul{margin:6px 0 0;padding-left:19px} /* ---------- "can't find it?" ask, sitting above the catalogue ---------- The first version relied on a dashed border and a small chevron to say "tap here" - clear to anyone used to accordions, invisible to anyone who isn't. Nothing here should require having seen a UI pattern before: a real, solid, orange button sits in the row itself. Buttons get tapped; that is the whole job this needs to do. The icon still turns into a close mark and a soft pulse still draws the eye, but neither is load-bearing any more - the button says it plainly by itself. */ .qm-custom-ask{ border:1.5px solid #F16C2C4D;border-radius:var(--q-radius-lg); background:linear-gradient(135deg,#FDEEE4E6,#FDEEE499); backdrop-filter:blur(var(--q-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--q-blur)) saturate(160%); box-shadow:0 6px 20px rgba(241,108,44,.14); margin-bottom:18px; } .qm-custom-ask summary{ display:flex;align-items:center;gap:14px;padding:16px 18px; cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent; } .qm-custom-ask summary::-webkit-details-marker{display:none} .qm-custom-ask summary::marker{content:''} .qm-custom-ask-icon{ flex:none;width:34px;height:34px;border-radius:50%; background:var(--q-accent);color:#fff;font-size:19px;font-weight:700;line-height:1; display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 0 rgba(241,108,44,.4); animation:qm-ask-pulse 2.6s ease-in-out infinite; transition:transform .16s; } .qm-custom-ask[open] .qm-custom-ask-icon{transform:rotate(45deg);animation:none} @keyframes qm-ask-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(241,108,44,.4)} 50%{box-shadow:0 0 0 9px rgba(241,108,44,0)} } .qm-custom-ask-copy{flex:1;min-width:0} .qm-custom-ask-copy b{display:block;font-size:15px;color:var(--q-brand);line-height:1.3} .qm-custom-ask-copy span{display:block;font-size:12.5px;color:var(--q-ink-soft);margin-top:1px;line-height:1.4} /* The part that actually reads as "click me": a real button shape, in the accent colour every other call to action on the page already uses. */ .qm-custom-ask-cta{ flex:none;display:inline-flex;align-items:center;gap:6px; background:var(--q-accent);color:#fff; padding:9px 16px;border-radius:999px; font-size:13.5px;font-weight:700;white-space:nowrap; box-shadow:0 3px 10px rgba(241,108,44,.32); transition:background .14s, transform .14s; } .qm-custom-ask summary:hover .qm-custom-ask-cta{background:var(--q-accent-ink);transform:translateY(-1px)} .qm-custom-ask[open] .qm-custom-ask-cta{opacity:0;width:0;padding:0;margin:0;overflow:hidden} .qm-custom-form{ display:grid;grid-template-columns:1.6fr 90px 1.6fr auto;gap:11px;align-items:end; padding:2px 18px 18px;border-top:1px solid #F16C2C33;margin-top:2px;padding-top:16px; } .qm-custom-form .qm-field{margin:0} .qm-custom-form label{font-size:12.5px} .qm-custom-form .hint{display:none} .qm-custom-form input{background:#FFFFFFE6} @media (max-width:660px){ .qm-custom-form{grid-template-columns:1fr 84px} .qm-custom-form .qm-field:nth-child(3){grid-column:1/-1} .qm-custom-form button{grid-column:1/-1} .qm-custom-ask-cta{padding:8px 13px;font-size:12.5px} } /* ---------- catalogue ---------- */ .qm-toolbar{ position:relative;z-index:20; display:flex;flex-direction:column;gap:12px; background:var(--q-glass-bg); backdrop-filter:blur(var(--q-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--q-blur)) saturate(160%); border:1px solid var(--q-glass-border); border-radius:8px;padding:15px;margin-bottom:14px; box-shadow:var(--q-glass-shadow); } /* The search box on its own row, full width: the one control on this screen most likely to be reached for first, so it gets the most room and the least competition. */ .qm-search{position:relative;z-index:30} .qm-search input[type=search]{ width:100%;min-height:50px;padding:12px 112px 12px 45px;font:inherit;font-size:15px; border:1px solid var(--q-rule);border-radius:8px; background:var(--q-surface);color:var(--q-ink); box-shadow:0 1px 2px rgba(9,16,89,.04); -webkit-appearance:none;appearance:none; } .qm-search input[type=search]::-webkit-search-cancel-button{display:none} .qm-search input:focus{outline:none;border-color:var(--q-brand);box-shadow:0 0 0 3px var(--q-brand-soft)} .qm-search .qm-search-icon{ position:absolute;left:16px;top:25px;transform:translateY(-50%); width:18px;height:18px;stroke:var(--q-ink-faint);fill:none;stroke-width:2; stroke-linecap:round;pointer-events:none;z-index:2; } .qm-search-submit{ position:absolute;right:5px;top:5px;height:40px;min-width:94px;padding:0 17px; border:0;border-radius:6px;background:var(--q-accent);color:#fff; font:inherit;font-size:14px;font-weight:700;cursor:pointer; transition:background .15s,transform .15s; } .qm-search-submit:hover{background:var(--q-brand);transform:translateY(-1px)} .qm-search-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 3px} .qm-search-meta .count{color:var(--q-ink-faint);font-size:13px} .qm-search-meta a{color:var(--q-brand);font-size:13px;font-weight:700;text-decoration:none} .qm-suggestions{ position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80; max-height:min(430px,62vh);overflow-y:auto;padding:6px; border:1px solid var(--q-glass-border);border-radius:8px; background:rgba(255,255,255,.97);box-shadow:0 16px 38px rgba(9,16,89,.16); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } .qm-suggestion{ width:100%;min-height:62px;display:grid;grid-template-columns:48px minmax(0,1fr) 22px; align-items:center;gap:11px;padding:7px 9px;border:0;border-radius:6px; background:transparent;color:var(--q-ink);text-align:left;font:inherit;cursor:pointer; } .qm-suggestion:hover,.qm-suggestion.on{background:var(--q-brand-soft)} .qm-suggestion img{width:48px;height:48px;object-fit:contain;border-radius:6px;background:#fff;padding:3px} .qm-suggestion-copy{min-width:0} .qm-suggestion-copy b,.qm-suggestion-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qm-suggestion-copy b{font-size:14px;color:var(--q-brand)} .qm-suggestion-copy small{margin-top:3px;font-size:11.5px;color:var(--q-ink-faint)} .qm-suggestion-arrow{font-size:25px;line-height:1;color:var(--q-accent);text-align:center} .qm-suggestion-empty{padding:18px;text-align:center;color:var(--q-ink-faint);font-size:14px} .qm-suggestion-loading{width:24px;height:24px;margin:18px auto;border:3px solid var(--q-brand-soft);border-top-color:var(--q-accent);border-radius:50%;animation:qm-spin .7s linear infinite} @keyframes qm-spin{to{transform:rotate(360deg)}} /* A row of chips a thumb flicks through, the way the reference design shows categories - one tap, no menu to open first. Scrolls rather than wraps, so it stays one tidy line regardless of how many categories a business has. */ .qm-category-head{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 8px} .qm-category-head h2{margin:0;font-size:15px;color:var(--q-brand)} .qm-category-controls{display:flex;gap:7px} .qm-category-controls button{ width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--q-glass-border);border-radius:50%;background:var(--q-glass-bg); color:var(--q-brand);font:inherit;font-size:25px;line-height:1;cursor:pointer; } .qm-category-controls button:hover{border-color:var(--q-accent);color:var(--q-accent)} .qm-cat-rail{border:1px solid var(--q-glass-border);border-radius:8px;background:var(--q-glass-bg);padding:8px;margin-bottom:14px} .qm-cat-scroll{ display:flex;gap:8px;overflow-x:auto;padding:1px; scrollbar-width:none;-ms-overflow-style:none; scroll-snap-type:x proximity;overscroll-behavior-x:contain; } .qm-cat-scroll::-webkit-scrollbar{display:none} .qm-cat-chip{ flex:none;display:inline-flex;align-items:center;gap:6px; min-height:44px;padding:9px 15px;border-radius:7px;scroll-snap-align:start; background:var(--q-glass-bg);border:1px solid var(--q-glass-border); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); color:var(--q-ink-soft);font-size:13.5px;font-weight:600; text-decoration:none;white-space:nowrap; transition:background .12s,color .12s,border-color .12s; } .qm-cat-chip .n{color:var(--q-ink-faint);font-weight:500;font-size:12px} .qm-cat-chip:hover{border-color:var(--q-brand)} .qm-cat-chip.on{background:var(--q-brand);border-color:var(--q-brand);color:#fff} .qm-cat-chip.on .n{color:#FFFFFFB3} .qm-products{ display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:15px;margin-bottom:26px; } .qm-product{ background:var(--q-glass-bg); backdrop-filter:blur(var(--q-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--q-blur)) saturate(160%); border:1px solid var(--q-glass-border); border-radius:var(--q-radius-lg);overflow:hidden; display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(9,16,89,.05); transition:border-color .12s, box-shadow .12s, transform .12s; } .qm-product:hover{border-color:var(--q-brand);box-shadow:var(--q-glass-shadow);transform:translateY(-2px)} .qm-product.in-cart{border-color:var(--q-brand);background:#E8EAF4CC} .qm-thumb{ aspect-ratio:1/1;background:#FFFFFF; display:flex;align-items:center;justify-content:center;overflow:hidden; } .qm-thumb img{width:100%;height:100%;object-fit:contain;padding:18px;mix-blend-mode:multiply} .qm-product-body{padding:12px 14px 4px;display:flex;flex-direction:column;gap:3px;flex:1} .qm-product h3{ font-size:14px;font-weight:700;margin:0;line-height:1.3; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } .qm-product .desc{ font-size:12.3px;color:var(--q-ink-faint);line-height:1.4;margin:0; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } .qm-product .meta{ font-size:11px;color:var(--q-ink-faint);margin:1px 0 0; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } .qm-product-foot{padding:8px 14px 14px;display:grid;grid-template-columns:52px 1fr 1fr;gap:7px;align-items:center} .qm-qty{ width:56px;padding:8px 6px;font:inherit;font-size:14px;text-align:center; border:1px solid var(--q-rule);border-radius:999px;background:var(--q-surface);color:var(--q-ink); } .qm-product-foot .qm-btn{width:100%;padding-left:9px;padding-right:9px} .qm-detail-modal{ position:fixed;inset:0;z-index:90; display:flex;align-items:center;justify-content:center; padding:18px;background:rgba(9,16,89,.28); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); } .qm-detail-modal[hidden]{display:none} .qm-detail-pane{ position:relative;width:min(920px,100%);max-height:min(88vh,760px); overflow:auto;border:1px solid #FFFFFF99;border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 22px 70px rgba(9,16,89,.24), inset 0 1px 0 rgba(255,255,255,.75); display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr); } .qm-detail-x{ position:absolute;top:12px;right:12px;z-index:2; width:38px;height:38px;border-radius:50%;border:1px solid #FFFFFF99; background:rgba(255,255,255,.82);color:var(--q-brand); font-size:28px;line-height:1;cursor:pointer; box-shadow:0 6px 18px rgba(9,16,89,.12); } .qm-detail-media{ min-height:360px;background:rgba(255,255,255,.55); display:flex;align-items:center;justify-content:center;padding:30px; } .qm-detail-media img{width:100%;height:100%;max-height:520px;object-fit:contain;mix-blend-mode:multiply} .qm-detail-copy{padding:36px 30px 28px;min-width:0} .qm-detail-kicker{margin:0 42px 7px 0;color:var(--q-accent-ink);font-size:12px;font-weight:700;text-transform:uppercase} .qm-detail-copy h2{margin:0 42px 16px 0;color:var(--q-brand);font-size:24px;line-height:1.2} .qm-detail-copy h3{margin:18px 0 7px;color:var(--q-brand);font-size:14px} .qm-detail-desc{margin:0;color:var(--q-ink-soft);font-size:14.5px;line-height:1.65;white-space:pre-wrap} .qm-detail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0} .qm-detail-facts div{ border:1px solid #FFFFFF99;border-radius:9px;background:rgba(255,255,255,.5); padding:9px 10px;min-width:0; } .qm-detail-facts dt{margin:0 0 2px;color:var(--q-ink-faint);font-size:11px;font-weight:700} .qm-detail-facts dd{margin:0;color:var(--q-ink);font-size:13px;font-weight:700;overflow-wrap:anywhere} .qm-detail-add{display:flex;gap:9px;align-items:center;margin-top:22px} .qm-detail-add .qm-btn{flex:1} .qm-pager{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:26px 0} .qm-pager a,.qm-pager span{ padding:7px 13px;border-radius:999px;border:1px solid var(--q-glass-border); background:var(--q-glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); text-decoration:none;color:var(--q-ink-soft);font-size:14px; } .qm-pager .on{background:var(--q-brand);color:#fff;border-color:var(--q-brand);font-weight:600} .qm-pager .off{opacity:.45;pointer-events:none} /* ---------- cart / review table ---------- */ .qm-scroll{ overflow-x:auto;border:1px solid var(--q-glass-border);border-radius:var(--q-radius-lg); background:var(--q-glass-bg); backdrop-filter:blur(var(--q-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--q-blur)) saturate(160%); } table.qm-table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px} table.qm-table th{ text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--q-ink-faint);font-weight:600;padding:11px 15px; background:#0910590A;border-bottom:1px solid var(--q-glass-border);white-space:nowrap; } table.qm-table td{padding:12px 15px;border-bottom:1px solid var(--q-rule-soft);vertical-align:middle} table.qm-table tr:last-child td{border-bottom:none} table.qm-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .qm-mini-thumb{ width:44px;height:44px;border-radius:6px;background:var(--q-surface-2); object-fit:contain;padding:3px;flex:none; } .qm-cell-item{display:flex;align-items:center;gap:12px} .qm-cell-item b{display:block;font-weight:600;font-size:14.5px} .qm-cell-item small{color:var(--q-ink-faint);font-size:12.5px;font-family:ui-monospace,Menlo,monospace} .qm-empty{text-align:center;padding:52px 20px;color:var(--q-ink-faint)} .qm-empty b{display:block;font-size:16px;color:var(--q-brand);margin-bottom:6px} .qm-empty p{margin:0 0 16px} /* ---------- summary of entered details ---------- */ .qm-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--q-glass-border);border-radius:12px;overflow:hidden} @media (max-width:660px){.qm-summary{grid-template-columns:1fr}} .qm-summary div{ background:var(--q-glass-bg); backdrop-filter:blur(var(--q-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--q-blur)) saturate(160%); padding:11px 15px; } .qm-summary dt{font-size:12.5px;color:var(--q-ink-faint);margin:0 0 2px} .qm-summary dd{margin:0;font-weight:600;font-size:14.5px} /* ---------- done ---------- */ .qm-done{text-align:center;padding:20px 0 10px} .qm-done .tick{ width:62px;height:62px;border-radius:50%; background:#E8EAF4CC;color:var(--q-brand); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--q-glass-border); display:flex;align-items:center;justify-content:center;margin:0 auto 20px; font-size:31px;font-weight:700; box-shadow:0 8px 22px rgba(9,16,89,.12); } /* The reference code itself stays solid, deliberately - the one thing on this whole flow a client must be able to read without a second glance, quote back over the phone, and copy correctly. Everywhere else here can afford to be glass; this cannot afford to be misread. */ .qm-ref{ display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:700; background:var(--q-brand);color:#fff; padding:10px 22px;border-radius:8px;margin:6px 0 20px;letter-spacing:.02em; } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* --------------------------------------------------------------------------- Glass, with a floor to land on. A browser with no backdrop-filter support renders the translucent backgrounds above as plain wash - thin, low-contrast, and see-through onto whatever the gradient happens to be doing underneath. Rather than let that happen quietly, every glass surface gets a solid fallback the moment the blur it depends on isn't there. ------------------------------------------------------------------------- */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .qm-bar, .qm-card, .qm-toolbar, .qm-custom-ask, .qm-product, .qm-scroll, .qm-summary div, .qm-pager a, .qm-pager span, .qm-lang, .qm-appbar-pill, .qm-btn-ghost, .qm-choice label, .qm-cat-chip, .qm-alert, .qm-done .tick, .qm-detail-pane { background:var(--q-surface) !important; } } /* =========================================================================== MOBILE - an app-style action bar fixed to the bottom. Most clients open this on a phone. The desktop layout puts the primary action at the end of a long scroll, which on a phone means scrolling past twenty products to reach "Review". The bar keeps the current step's action, the basket count and the way back permanently in reach. Shown under 820px only; the desktop actions hide at the same breakpoint so the two never both appear. ======================================================================== */ .qm-appbar{display:none} @media (max-width:820px){ /* leave room so the floating nav never covers the last row of content */ body.qm{padding-bottom:118px} /* The nav is two layers: a floating glass pill carrying the side controls, and the primary action rising above it in its own raised pill - the way a phone's tab bar lifts its one important button clear of the row. The outer