/* ============================================================ Make Your Bouquet — the 3D designer, dressed as this template The designer's markup and JavaScript are the ones the Qitaf app uses, unchanged. Only its skin lives here. Two things make that possible: 1 · Every colour, radius and font in the original is a custom property, so re-theming is a matter of re-pointing the tokens at this template's palette (--main-color-one and friends) rather than rewriting rules. 2 · Everything is scoped under `.qb`. The template ships Bootstrap in css-plugins.css, and the designer owns short class names — .row, .container, .btn, .price, .tag — that Bootstrap and this template also own. Scoping keeps the two sets apart: inside .qb the designer wins on specificity, outside it nothing here applies at all. The exceptions are the toast host and the modal, which the script appends to ; those few rules are global on purpose and marked as such below. ============================================================ */ /* ------------------------------------------------------------ tokens — the Qitaf designer's names, this template's colours ------------------------------------------------------------ */ :root{ --qb-ink:#241A17; --qb-ink-soft:#7A6A63; --qb-ink-faint:#A59B94; --qb-rose:#D2543A; --qb-rose-deep:#A83A24; --qb-blush:#FDF1EA; --qb-blush-soft:#FEF7F3; --qb-sage:#9BB08D; --qb-sage-soft:#E7EEE3; --qb-gold:#E0A33C; --qb-cream:#FBF6F2; --qb-paper:#ffffff; --qb-line:#F0E2DA; --qb-line-strong:#E8B9A6; --qb-shadow-sm:0 1px 2px rgba(36,26,23,.05), 0 2px 8px rgba(36,26,23,.05); --qb-shadow-md:0 2px 4px rgba(36,26,23,.05), 0 10px 28px rgba(36,26,23,.08); --qb-shadow-lg:0 4px 8px rgba(36,26,23,.05), 0 24px 60px rgba(36,26,23,.12); } /* ------------------------------------------------------------ GLOBAL — the handful of things the script hangs off ------------------------------------------------------------ */ .toast-host{ position:fixed;inset-block-end:26px;inset-inline:0;z-index:9999; display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none; } .toast-host .toast{ background:var(--qb-ink);color:#fff;padding:.85em 1.5em;border-radius:100px; font-family:var(--body-font);font-size:.84rem;line-height:1.4; box-shadow:var(--qb-shadow-lg); transform:translateY(14px);opacity:0;transition:all .32s cubic-bezier(.22,.61,.36,1); display:flex;align-items:center;gap:.6em;max-width:calc(100vw - 40px); } .toast-host .toast.in{transform:none;opacity:1;} .toast-host .toast.ok::before, .toast-host .toast.warn::before{ content:'';width:7px;height:7px;border-radius:100px;flex-shrink:0; } .toast-host .toast.ok::before{background:#8FBF8F;} .toast-host .toast.warn::before{background:var(--qb-gold);} /* the mobile action bar is fixed to the window, so the page — not the designer — is what has to make room for it */ @media(max-width:900px){ body.qb-page{padding-bottom:80px;} } /* ============================================================ SCOPED — everything below applies only inside .qb ============================================================ */ .qb{ /* the designer's own token names, pointed at this template */ --ink:var(--qb-ink); --ink-soft:var(--qb-ink-soft); --ink-faint:var(--qb-ink-faint); --rose:var(--qb-rose); --rose-deep:var(--qb-rose-deep); --blush:var(--qb-blush); --blush-soft:var(--qb-blush-soft); --sage:var(--qb-sage); --sage-soft:var(--qb-sage-soft); --gold:var(--qb-gold); --cream:var(--qb-cream); --paper:var(--qb-paper); --line:var(--qb-line); --line-strong:var(--qb-line-strong); --shadow-sm:var(--qb-shadow-sm); --shadow-md:var(--qb-shadow-md); --shadow-lg:var(--qb-shadow-lg); --display:var(--heading-font); --ui:var(--body-font); --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; /* how far down the page the sticky columns start — clears this template's navbar when it pins itself on scroll-up */ --nav-h:92px; --ease:cubic-bezier(.22,.61,.36,1); color:var(--ink); font-family:var(--ui); font-size:16px; line-height:1.65; background:var(--cream); } .qb *{box-sizing:border-box;} .qb [hidden]{display:none!important;} .qb img{max-width:100%;display:block;} .qb a{color:inherit;text-decoration:none;} .qb button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;} .qb input,.qb select,.qb textarea{font:inherit;color:inherit;} .qb h1,.qb h2,.qb h3,.qb h4{ margin:0;font-family:var(--display);font-weight:400;line-height:1.15;letter-spacing:0; color:var(--ink);text-transform:none; } .qb h1{font-size:clamp(2rem,4vw,3rem);} .qb h2{font-size:clamp(1.7rem,3vw,2.4rem);} .qb h3{font-size:clamp(1.2rem,2vw,1.6rem);} .qb p{margin:0;} .qb ::selection{background:var(--blush);color:var(--ink);} /* ------------------------------------------------------------ atoms ------------------------------------------------------------ */ .qb .wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px);} .qb .eyebrow{ font-size:.7rem;letter-spacing:.24em;text-transform:uppercase; color:var(--rose);font-weight:700;margin:0; } .qb .eyebrow.muted{color:var(--ink-faint);} .qb .lede{font-size:1.02rem;color:var(--ink-soft);max-width:62ch;} .qb .muted{color:var(--ink-soft);} .qb .faint{color:var(--ink-faint);} .qb .price{font-family:var(--display);font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--ink);} /* Bootstrap owns .row too — undo its gutters before restyling it */ .qb .row{display:flex;align-items:center;gap:12px;margin:0;} .qb .row.wrap{flex-wrap:wrap;max-width:none;padding-inline:0;} .qb .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; padding:.9em 1.7em;border-radius:100px; font-family:var(--body-font); font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700; line-height:1.2;text-align:center; transition:all .3s var(--ease);white-space:nowrap; border:1px solid transparent; } .qb .btn-primary{background:var(--rose);color:#fff;border-color:var(--rose);} .qb .btn-primary:hover{background:var(--rose-deep);border-color:var(--rose-deep);transform:translateY(-2px);box-shadow:var(--shadow-md);} .qb .btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent;} .qb .btn-ghost:hover{border-color:var(--ink);background:var(--paper);} .qb .btn-sm{padding:.62em 1.15em;font-size:.68rem;} .qb .btn-block{width:100%;} .qb .btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important;} .qb .tag{ display:inline-block;padding:.28em .7em;border-radius:4px; font-family:var(--body-font); font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700; background:var(--blush);color:var(--rose-deep); } .qb .tag.gold{background:#F6ECE3;color:#8A6431;} /* ------------------------------------------------------------ panels, fields and the running receipt ------------------------------------------------------------ */ .qb .panel{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden; } .qb .panel-head{ padding:16px 18px;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:12px; } .qb .panel-head h2{font-size:1.24rem;} .qb .panel-body{padding:16px 18px;} .qb .rlist{list-style:none;padding:0;margin:0;} .qb .rlist li{ display:flex;align-items:center;gap:10px;padding:9px 0; border-bottom:1px solid var(--line);font-size:.87rem; } .qb .rlist li:last-child{border-bottom:0;} .qb .rlist i{width:12px;height:12px;border-radius:100px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);} .qb .rlist .n{margin-inline-start:auto;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap;} .qb .rempty{color:var(--ink-faint);font-size:.87rem;padding:8px 0 14px;} .qb .rsum{border-top:1px solid var(--line-strong);margin-top:14px;padding-top:14px;display:flex;flex-direction:column;gap:8px;} .qb .rsum div{display:flex;justify-content:space-between;gap:12px;font-size:.87rem;color:var(--ink-soft);} .qb .rsum .tot{ font-size:1.02rem;color:var(--ink);align-items:baseline;padding-top:8px;margin-top:2px; border-top:1px solid var(--line); } .qb .rsum .tot b{font-family:var(--display);font-size:1.6rem;font-weight:400;} .qb .ract{display:flex;flex-direction:column;gap:9px;margin-top:16px;} .qb .field{display:block;margin-bottom:14px;} .qb .field span{ display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:7px;font-weight:700; } .qb .field textarea{ width:100%;padding:.75em .9em;border:1px solid var(--line-strong);border-radius:var(--r-md); background:var(--paper);transition:border-color .25s; resize:vertical;min-height:96px;font-family:var(--display);font-size:1.05rem;line-height:1.55; } .qb .field textarea:focus{outline:none;border-color:var(--ink);} .qb .field small{display:block;margin-top:6px;font-size:.74rem;color:var(--ink-faint);} .qb .notecard{ background:var(--blush-soft);border-radius:var(--r-md);padding:18px 20px;margin-top:12px; font-family:var(--display);font-size:1.12rem;line-height:1.6;color:var(--ink);min-height:80px; border:1px dashed var(--line-strong); } .qb .notecard:empty::before{content:'Your message will look like this.';color:var(--ink-faint);} /* ------------------------------------------------------------ colour swatches and quantity steppers ------------------------------------------------------------ */ .qb .swatches{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;} .qb .sw{ width:24px;height:24px;border-radius:100px;position:relative;flex-shrink:0;padding:0; box-shadow:inset 0 0 0 1px rgba(36,26,23,.14);transition:transform .2s var(--ease); } .qb .sw:hover{transform:scale(1.14);} .qb .sw[aria-pressed="true"]{ box-shadow:inset 0 0 0 1px rgba(36,26,23,.2), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); } .qb .stepper{display:flex;align-items:center;gap:2px;margin-top:11px;} .qb .stepper button{ width:32px;height:32px;border-radius:8px;display:grid;place-items:center; border:1px solid var(--line-strong);font-size:1rem;line-height:1; transition:all .2s;color:var(--ink-soft); } .qb .stepper button:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink);} .qb .stepper button:disabled{opacity:.32;cursor:not-allowed;} .qb .stepper output{ min-width:44px;text-align:center;font-family:var(--display);font-size:1.15rem; font-variant-numeric:tabular-nums; } .qb .stepper .sub{margin-inline-start:auto;font-size:.78rem;color:var(--ink-faint);} /* ------------------------------------------------------------ the 3D stage ------------------------------------------------------------ */ .qb .stage{ position:relative;background:linear-gradient(168deg,#FFFDFC,#FDF1EA 55%,#F1E1DB); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; height:min(74vh,760px);min-height:420px; } .qb .stage canvas{display:block;cursor:grab;} .qb .stage.is-dragging canvas{cursor:grabbing;} .qb .stage-tools{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;gap:7px;} .qb .stage-tools button{ width:40px;height:40px;border-radius:100px;display:grid;place-items:center; background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm); color:var(--ink-soft);transition:all .22s; } .qb .stage-tools button:hover{color:#fff;background:var(--rose);} .qb .stage-tools svg{width:17px;height:17px;} .qb .stage-hint{ position:absolute;left:14px;bottom:14px;z-index:3; background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:100px; padding:.5em 1.05em;font-size:.7rem;letter-spacing:.08em;color:var(--ink-soft); display:flex;align-items:center;gap:.55em;pointer-events:none;transition:opacity .5s; } .qb .stage-hint svg{width:14px;height:14px;} .qb .stage.touched .stage-hint{opacity:0;} .qb .stage-count{ position:absolute;left:14px;top:14px;z-index:3; background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:100px; padding:.5em 1.05em;font-size:.72rem;letter-spacing:.06em; } .qb .stage-empty{ position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:30px; color:var(--ink-faint);font-size:.95rem; } .qb .stage.is-empty .stage-empty{display:grid;} .qb .stage-empty .lead{font-family:var(--display);font-size:1.5rem;color:var(--ink-soft);} /* the photoreal preview, and the 3D / Photo switch above it */ .qb .stage-view{ position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:4; display:flex;gap:2px;padding:3px;border-radius:100px; background:rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm); } .qb .stage-view button{ padding:.42em 1.1em;border-radius:100px;font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;font-weight:700;color:var(--ink-faint);transition:all .22s; } .qb .stage-view button[aria-pressed="true"]{background:var(--rose);color:#fff;} .qb .stage-view button:disabled{opacity:.45;cursor:not-allowed;} .qb .stage-photo{ position:absolute;inset:0;z-index:3; display:flex;align-items:center;justify-content:center; background:linear-gradient(168deg,#FFFDFC,#FDF1EA 55%,#F1E1DB); padding:14px 14px 48px; } .qb .stage-photo img{ max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain;border-radius:var(--r-md);box-shadow:var(--shadow-md); } .qb .stage-photo-wait{ position:absolute;inset:14px; display:grid;align-content:center;justify-items:center;gap:8px; text-align:center;color:var(--ink-soft); } .qb .stage-photo-wait b{font-family:var(--display);font-size:1.3rem;font-weight:400;color:var(--ink);} .qb .stage-photo-wait small{font-size:.8rem;color:var(--ink-faint);} .qb .stage-photo-note{ position:absolute;left:14px;right:14px;bottom:12px;text-align:center; font-size:.7rem;color:var(--ink-faint);background:rgba(255,255,255,.88); backdrop-filter:blur(6px);border-radius:100px;padding:.5em 1em; } .qb .spin{ width:26px;height:26px;border-radius:100px; border:2px solid var(--line-strong);border-top-color:var(--rose); animation:qb-spin 1s linear infinite; } @keyframes qb-spin{to{transform:rotate(360deg)}} /* ------------------------------------------------------------ page head ------------------------------------------------------------ */ .qb .whead{padding-top:clamp(18px,2.4vw,30px);padding-bottom:2px;} .qb .whead h1{font-size:clamp(1.9rem,3vw,2.6rem);margin:.14em 0 .22em;} .qb .whead .lede{font-size:.98rem;} /* the template's own section title, used as this page's heading. `.qb p{margin:0}` and `.section-title p` have equal specificity and this file loads last, so the title's standfirst needs its spacing handed back explicitly. */ .qb .qb-head{padding-top:clamp(40px,5vw,78px);} .qb .qb-head .section-title-area{margin-bottom:clamp(22px,3vw,38px);} .qb .qb-head .section-title p{margin-top:20px;max-width:70ch;color:var(--ink-soft);} /* ------------------------------------------------------------ the step rail ------------------------------------------------------------ */ .qb .wrail{ position:sticky;top:calc(var(--nav-h) + 14px); display:flex;flex-direction:column;gap:2px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:12px 10px; } .qb .wr{ position:relative;display:flex;align-items:center;gap:.75em; padding:.72em .8em;border-radius:100px; color:var(--ink-faint);transition:all .25s var(--ease); border:1px solid transparent;white-space:nowrap;text-align:start; } .qb .wr:not(:last-child)::before{ content:'';position:absolute;z-index:0; inset-inline-start:calc(.8em + 12px); top:calc(50% + 15px);height:calc(100% - 28px);width:1px; background:var(--line); } .qb .wr[data-state="done"]:not(:last-child)::before{background:var(--sage-soft);} .qb .wr i{ position:relative;z-index:1; flex-shrink:0;width:24px;height:24px;border-radius:100px; display:grid;place-items:center;font-style:normal; font-size:.72rem;font-variant-numeric:tabular-nums; background:var(--line);color:var(--ink-soft);transition:all .25s var(--ease); box-shadow:0 0 0 3px var(--paper); } .qb .wr i svg{width:13px;height:13px;} .qb .wr span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;} .qb .wr:hover:not(:disabled){color:var(--ink-soft);} .qb .wr:disabled{cursor:not-allowed;opacity:.55;} .qb .wr[data-state="done"] i{background:var(--sage-soft);color:#4D5C45;} .qb .wr[data-state="done"]{color:var(--ink-soft);} .qb .wr[aria-current="step"]{ background:var(--paper);border-color:var(--line-strong);color:var(--ink); box-shadow:var(--shadow-sm); } .qb .wr[aria-current="step"] i{background:var(--rose);color:#fff;} /* ------------------------------------------------------------ the three columns ------------------------------------------------------------ */ .qb .wizard{ display:grid;gap:clamp(12px,1.4vw,20px); grid-template-columns:216px minmax(330px,410px) minmax(0,1fr); align-items:start; max-width:1760px;margin-inline:auto; padding:clamp(12px,1.6vw,20px) clamp(14px,2.4vw,32px) 48px; } .qb .wmid{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);min-width:0;} .qb .wpanel{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(20px,2.4vw,30px); min-height:min(60vh,620px); display:flex;flex-direction:column; } .qb .wstep{display:none;animation:qb-fade .34s var(--ease);} .qb .wstep.on{display:block;} @keyframes qb-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .qb .wstep-head{margin-bottom:clamp(18px,2.4vw,26px);} .qb .wstep-head h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:.16em 0 .34em;} .qb .wstep-note{font-size:.92rem;color:var(--ink-soft);max-width:62ch;} .qb .wtip{ margin-top:16px;font-size:.84rem;color:var(--ink-soft); background:var(--blush-soft);border-radius:var(--r-md);padding:.9em 1.1em; } .qb .wtip:empty{display:none;} .qb .wfoot{ margin-top:auto;padding-top:clamp(20px,2.6vw,30px); border-top:1px solid var(--line); display:flex;align-items:center;gap:14px; } .qb .wfoot-hint{flex:1;text-align:center;font-size:.78rem;color:var(--ink-faint);line-height:1.4;} .qb .wfoot [data-back]{visibility:visible;} .qb .wfoot [data-back][hidden]{display:inline-flex!important;visibility:hidden;} /* ------------------------------------------------------------ 1 · sizes ------------------------------------------------------------ */ .qb .sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;} .qb .wsize{ text-align:start;padding:14px 15px 13px;border-radius:var(--r-md); border:1px solid var(--line);background:var(--cream); transition:all .24s var(--ease); } .qb .wsize:hover{border-color:var(--ink-faint);transform:translateY(-2px);} .qb .wsize[aria-pressed="true"]{ border-color:var(--rose);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rose); } .qb .wsize b{display:block;font-family:var(--display);font-size:1.34rem;font-weight:400;line-height:1.1;} .qb .wsize .n{ display:block;margin-top:4px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--rose);font-weight:700; } .qb .wsize span{display:block;margin-top:8px;font-size:.8rem;color:var(--ink-faint);} /* ------------------------------------------------------------ 2 + 3 · flower cards ------------------------------------------------------------ */ .qb .fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;} .qb .fcard{ border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper); overflow:hidden;display:flex;flex-direction:column;transition:all .24s var(--ease); } .qb .fcard:hover{border-color:var(--line-strong);} .qb .fcard.has{border-color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose);} .qb .fcard-art{ position:relative;aspect-ratio:1/1;background:linear-gradient(168deg,#FFFDFC,#FDF1EA 60%,#F1E1DB); display:grid;place-items:center;overflow:hidden; } .qb .fcard-art img{width:100%;height:100%;object-fit:contain;} .qb .fcard-art .spin{position:absolute;} .qb .fcard-art .tag{position:absolute;top:8px;inset-inline-start:8px;} .qb .fcard-art .qbadge{ position:absolute;top:8px;inset-inline-end:8px; min-width:26px;height:26px;padding:0 7px;border-radius:100px; background:var(--rose);color:#fff;font-size:.74rem; display:grid;place-items:center;font-variant-numeric:tabular-nums; } .qb .fcard-body{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1;} .qb .fcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;} .qb .fcard-top h4{font-family:var(--display);font-size:1.16rem;font-weight:400;} .qb .fcard.has .fcard-top h4{color:var(--rose);} .qb .fcard-top .p{font-size:.72rem;color:var(--ink-faint);white-space:nowrap;} .qb .fcard-note{font-size:.76rem;color:var(--ink-faint);margin-top:3px;flex:1;} .qb .fcard .swatches{margin-top:9px;} .qb .fcard .stepper{margin-top:10px;flex-wrap:wrap;} .qb .fcard .stepper .sub{width:100%;margin-inline-start:0;margin-top:7px;text-align:end;font-size:.76rem;} /* ------------------------------------------------------------ 4 · wraps ------------------------------------------------------------ */ .qb .wraps{display:grid;gap:10px;} .qb .wrapopt{ border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper); padding:15px 17px;cursor:pointer;transition:all .24s var(--ease); } .qb .wrapopt:hover{border-color:var(--ink-faint);} .qb .wrapopt[aria-pressed="true"]{border-color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose);} .qb .wrapopt-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;} .qb .wrapopt-top b{font-family:var(--display);font-size:1.2rem;font-weight:400;} .qb .wrapopt-top span{font-size:.78rem;color:var(--ink-faint);white-space:nowrap;} .qb .wrapopt p{font-size:.82rem;color:var(--ink-soft);margin-top:3px;} /* ------------------------------------------------------------ 5 · ribbons ------------------------------------------------------------ */ .qb .ribs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;} .qb .rib{ display:flex;align-items:center;gap:.7em; padding:.85em 1em;border-radius:var(--r-md); border:1px solid var(--line);background:var(--paper); font-size:.86rem;transition:all .24s var(--ease); } .qb .rib:hover{border-color:var(--ink-faint);} .qb .rib[aria-pressed="true"]{border-color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose);} .qb .rib i{ width:30px;height:16px;border-radius:3px;flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -4px 7px rgba(0,0,0,.09); } /* ------------------------------------------------------------ 6 + 8 · the list ------------------------------------------------------------ */ .qb .pv-list{display:flex;flex-direction:column;gap:2px;} .qb .pv-row{ display:flex;align-items:center;gap:11px; padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem; } .qb .pv-row:last-child{border-bottom:0;} .qb .pv-row i{width:14px;height:14px;border-radius:100px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);} .qb .pv-row .n{margin-inline-start:auto;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;} .qb .pv-total{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin-top:14px;padding-top:14px;border-top:1px solid var(--line-strong); } .qb .pv-total span{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;} .qb .pv-total b{font-family:var(--display);font-size:2rem;font-weight:400;color:var(--rose);} /* ------------------------------------------------------------ 7 · the card ------------------------------------------------------------ */ .qb .cardpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;} .qb .cardpick button{ text-align:start;padding:16px 18px;border-radius:var(--r-md); border:1px solid var(--line);background:var(--cream);transition:all .24s var(--ease); } .qb .cardpick button:hover{border-color:var(--ink-faint);} .qb .cardpick button[aria-pressed="true"]{ border-color:var(--rose);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rose); } .qb .cardpick b{display:block;font-family:var(--display);font-size:1.24rem;font-weight:400;} .qb .cardpick span{display:block;margin-top:4px;font-size:.8rem;color:var(--ink-faint);} /* ------------------------------------------------------------ 8 · done ------------------------------------------------------------ */ .qb .donecard{ border:1px solid var(--line);border-radius:var(--r-md);background:var(--cream); padding:clamp(18px,2.2vw,26px); } .qb .donecard .pv-row{border-bottom-color:var(--line-strong);} .qb .donenote{ margin-top:14px;padding-top:14px;border-top:1px solid var(--line-strong); font-family:var(--display);font-size:1.12rem;line-height:1.6;color:var(--ink); } .qb .donenote small{ display:block;font-family:var(--ui);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;font-weight:700; } /* ------------------------------------------------------------ the right-hand column ------------------------------------------------------------ */ .qb .wside{position:sticky;top:calc(var(--nav-h) + 14px);display:flex;flex-direction:column;} .qb .wside .stage{ height:calc(100vh - var(--nav-h) - 34px); min-height:520px;max-height:1040px; border-radius:var(--r-xl); } .qb .wizard.is-preview .sumcard{display:none;} /* ------------------------------------------------------------ the mobile action bar ------------------------------------------------------------ */ .qb .mobar{ display:none;position:fixed;inset-inline:0;bottom:0;z-index:600; background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line); padding:11px clamp(14px,4vw,22px);align-items:center;gap:14px; padding-bottom:calc(11px + env(safe-area-inset-bottom)); } .qb .mobar .price{font-size:1.28rem;} .qb .mobar small{display:block;font-size:.68rem;color:var(--ink-faint);letter-spacing:.06em;} .qb .mobar .btn{margin-inline-start:auto;} /* ------------------------------------------------------------ responsive ------------------------------------------------------------ */ @media(max-width:1280px){ .qb .wizard,.qb .wizard.is-preview{grid-template-columns:minmax(0,380px) minmax(0,1fr);} .qb .wrail{ grid-column:1 / -1;position:static; flex-direction:row;gap:6px;padding:8px; overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none; } .qb .wrail::-webkit-scrollbar{display:none;} .qb .wr{flex:1 1 0;min-width:104px;} .qb .wr:not(:last-child)::before{display:none;} .qb .wpanel{min-height:0;} } @media(max-width:900px){ .qb .wizard,.qb .wizard.is-preview{grid-template-columns:minmax(0,1fr);} .qb .wrail{grid-column:auto;order:-2;} .qb .wside{position:static;order:-1;} .qb .wside .stage{height:min(40vh,380px);min-height:280px;max-height:none;border-radius:var(--r-lg);} /* the photoreal render is 2:3 portrait — give the stage real height while the photograph is the thing being looked at */ .qb .wside .stage:has(.stage-photo:not([hidden])){height:min(74vh,640px);} .qb .wside .stage.is-empty{display:none;} .qb .sumcard{display:none;} .qb .wr{flex:0 0 auto;min-width:0;} .qb .wr span{display:none;} .qb .wr[aria-current="step"] span{display:inline;} .qb .wfoot{display:none;} .qb .mobar{display:flex;} .qb .mobar [data-back-m]{margin-inline-start:auto;} .qb .mobar [data-next-m]{margin-inline-start:0;} } @media(max-width:600px){ .qb .fcards{grid-template-columns:repeat(2,minmax(0,1fr));} .qb .fcard-note{display:none;} .qb .wstep-head h2{font-size:1.45rem;} .qb .whead{padding-top:14px;} .qb .whead .lede{display:none;} .qb .whead h1{font-size:1.5rem;margin:.1em 0 0;} .qb .wstep-head{margin-bottom:16px;} .qb .wstep-note{font-size:.86rem;} } @media (prefers-reduced-motion: reduce){ .qb *,.qb *::before,.qb *::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important; } .qb .spin{animation-duration:2.4s!important;animation-iteration-count:infinite!important;} }