/* ========================================================================= bag-designer.css — chrome for the shared design window (bag-designer.js). Extracted from walker_bag.css when the window gained a second consumer. The JS was shared; the CSS was not, so the modal opened on the EZOrder page with no positioning, no overlay and no z-index -- appended to the end of as unstyled divs, i.e. it looked like the button did nothing. Split along the same seam as the JS. What is here is anything the design window itself paints: .wk-bag-modal / -mbox / -mh / -msub the modal shell .wk-bag-mfoot-note / -mactions .wk-bag-mcancel / -mok the action bar .wk-bd-* option chips, stage, photo grid, text row, font + ink rows, wheel The shell rules are used by walker_bag.js's OWN dialogs too (label capture, confirm, warn), so walker_bag.css now DEPENDS on this file rather than duplicating it. Load bag-designer.css BEFORE walker_bag.css. Both pages that use the designer must load this file: walked.html designer + walker dialogs easyorder-v2 designer only (the beach bag add-on) TOKENS. Custom properties come from the walker token sheet, which both pages already register. Fallbacks are given for everything that decides whether the window is USABLE -- background, text colour, type -- because an unresolved custom property renders as nothing rather than falling back, and the failure mode is an invisible modal, which is the exact bug this file was split out to fix. Cosmetic tokens are left bare. ========================================================================= */ /* ===================== modal shell ===================== */ .wk-bag-modal { position: fixed; inset: 0; background: rgba(22, 33, 44, 0.55); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 10000; animation: wk-bag-fade .18s ease both; } @keyframes wk-bag-fade { from { opacity: 0; } to { opacity: 1; } } .wk-bag-mbox { background: var(--panel, #fbf8f1); border-radius: 14px; max-width: 440px; width: 100%; /* the box must never outgrow the phone: the drawstring designer stacks to ~1000px of content on a 550px visible viewport. Cap and scroll INSIDE the box, so the heading and the Add/Cancel actions always stay reachable. dvh tracks the real visible height under iOS Safari's collapsing URL bar; the vh line is the fallback for engines without dvh. */ max-height: 92vh; max-height: calc(100dvh - 36px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 24px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32); font-family: var(--sans, system-ui, -apple-system, "Segoe UI", sans-serif); animation: wk-bag-pop .22s cubic-bezier(.2,.8,.3,1.05) both; } @keyframes wk-bag-pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } } .wk-bag-mh { font-family: var(--serif, Georgia, "Times New Roman", serif); font-weight: normal; font-size: 24px; margin: 0 0 10px; color: var(--ink, #2f2a1d); line-height: 1.2; } .wk-bag-msub { font-size: 15px; color: var(--ink-soft, #6b6152); line-height: 1.5; margin: 0 0 14px; } .wk-bag-mfoot-note { font-size: 13px; color: var(--ink-soft, #6b6152); font-style: italic; margin: 0 0 14px; padding-top: 2px; text-align: center; } .wk-bag-mactions { display: flex; gap: 10px; margin-top: 4px; } .wk-bag-mcancel { flex: 0 0 auto; background: none; border: 1px solid var(--hairline, #d9cfae); border-radius: 9px; padding: 11px 18px; font: inherit; font-size: 13.5px; color: var(--ink-soft, #6b6152); cursor: pointer; transition: all .15s; } .wk-bag-mcancel:hover { border-color: var(--ink); color: var(--ink); } .wk-bag-mok { flex: 1; background: var(--ink, #2f2a1d); color: #fff; border: 0; border-radius: 9px; padding: 11px 18px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; letter-spacing: .03em; transition: background .18s, transform .1s; } .wk-bag-mok:hover { background: var(--gold); } .wk-bag-mok:active { transform: scale(.99); } .wk-bag-mok:disabled { opacity: .4; cursor: not-allowed; transform: none; } /* ===================== bag designer (shared) ===================== */ /* The design window (bag-designer.js), shared by the drawstring bag and the mesh beach bag: wider modal variant, option chips, 2x stage, stock-photo grid, upload button, text row, colour wheel. Prefixed wk-bd- because it is no longer one product's chrome -- wk-ds- now means the drawstring COMPOSITOR's layers (ds-compose.js), which are inline-styled and have no rules here. Composition-internal geometry stays inline, computed per render width. */ /* The design window is the ONE box here that does not scroll as a whole. .wk-bag-mbox's overflow-y:auto is right for the walker's short dialogs and for Enlarge, but in the designer it is what let the preview scroll off the top the moment you reached the upload button or the colour wheel -- i.e. precisely when you needed to see it. Here the box is a column with fixed chrome (heading, pinned preview, hint, actions) and a single scrolling region, .wk-bd-panels, holding the accordions. */ .wk-bag-mbox--design { max-width: 640px; display: flex; flex-direction: column; overflow: hidden; } .wk-bag-mbox--design > .wk-bag-mh, .wk-bag-mbox--design > .wk-bag-msub, .wk-bag-mbox--design > .wk-bd-pin, .wk-bag-mbox--design > .wk-bd-hint, .wk-bag-mbox--design > .wk-bag-mactions { flex: 0 0 auto; } /* The pinned preview. Nothing but the stage lives here: anything else added to it is height taken from the accordion for the whole session. */ .wk-bd-pin { position: relative; } /* The only scroller. min-height:0 is load-bearing -- a flex item's default min-height is auto, which refuses to shrink below its content, so without it the accordions push the action bar off the bottom instead of scrolling. position:relative makes offsetTop resolve against this box, which is what the open-section scroll in bag-designer.js measures against. */ .wk-bd-panels { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 0 10px; border-top: 1px solid var(--wk-line, #e6dcc3); } /* ---- accordion sections ---- */ .wk-bd-sec { border-bottom: 1px solid var(--wk-line, #e6dcc3); } .wk-bd-sech { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 2px; background: none; border: 0; font: inherit; text-align: left; color: var(--wk-ink, #5b4a2a); cursor: pointer; } .wk-bd-secname { font-weight: 600; font-size: .95rem; flex: 0 0 auto; } /* What the section is currently set to, so a closed one still reports its state. Truncates rather than wraps: a long line of shopper text must not make the header two rows tall and cost the preview the difference. */ .wk-bd-secval { flex: 1 1 auto; min-width: 0; font-size: .85rem; color: var(--wk-ink-soft, #6b6152); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .wk-bd-secchev { flex: 0 0 auto; font-size: .8rem; opacity: .55; transition: transform .16s ease; } .wk-bd-sec.is-open .wk-bd-sech { color: var(--wk-accent, #0a7ea4); } .wk-bd-sec.is-open .wk-bd-secchev { transform: rotate(180deg); opacity: .9; } /* The open section's own value is redundant with the controls right below it. */ .wk-bd-sec.is-open .wk-bd-secval { visibility: hidden; } .wk-bd-secbody { padding: 2px 2px 14px; } .wk-bd-sech:focus-visible { outline: 2px solid var(--gold, #b8912f); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .wk-bd-secchev { transition: none; } } .wk-bd-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .wk-bd-opt { background: none; border: 2px solid var(--wk-line, #e6dcc3); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .95rem; color: var(--wk-ink, #5b4a2a); cursor: pointer; } .wk-bd-opt.is-on { border-color: var(--wk-accent, #0a7ea4); color: var(--wk-accent, #0a7ea4); font-weight: 600; } .wk-bd-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--wk-line, #e6dcc3); border-radius: 10px; background: var(--wk-panel, #fbf7ec); } .wk-bd-stageph { font-size: .9rem; opacity: .6; } .wk-bd-search { display: flex; gap: 8px; margin-bottom: 8px; } .wk-bd-searchin { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--wk-line, #cbb98f); border-radius: 8px; font: inherit; font-size: 1rem; } .wk-bd-searchbtn, .wk-bd-more, .wk-bd-upbtn { background: var(--wk-accent, #0a7ea4); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: .95rem; cursor: pointer; display: inline-block; } .wk-bd-more { margin-top: 8px; } .wk-bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } .wk-bd-cell { padding: 0; border: 2px solid var(--wk-line, #e6dcc3); border-radius: 8px; background: none; cursor: pointer; overflow: hidden; aspect-ratio: 4 / 3; } .wk-bd-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .wk-bd-cell.is-on { border-color: var(--wk-accent, #0a7ea4); } .wk-bd-upmsg { font-size: .9rem; margin-left: 10px; opacity: .75; } .wk-bd-srcpanel { margin: 0 0 12px; } .wk-bd-srcpanel:empty { margin: 0; } /* Wraps the text column and nothing else now. The font and ink rows used to share this flex row and wrap under it; they are a section of their own, so what is left is a plain block. Kept rather than removed because the class is part of the designer's published markup. */ .wk-bd-textrow { margin: 0; } .wk-bd-textin { width: 100%; box-sizing: border-box; min-width: 0; padding: 8px 10px; border: 1px solid var(--wk-line, #cbb98f); border-radius: 8px; font: inherit; font-size: 1rem; } .wk-bd-inkrow { display: flex; gap: 6px; } .wk-bd-ink { background: none; border: 2px solid var(--wk-line, #e6dcc3); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .9rem; cursor: pointer; color: var(--wk-ink, #5b4a2a); } .wk-bd-ink.is-on { border-color: var(--wk-accent, #0a7ea4); color: var(--wk-accent, #0a7ea4); font-weight: 600; } @media (max-width: 720px) { .wk-bag-mbox--design { max-width: 96vw; } /* NOTE: the font-size overrides that used to live here are gone. They existed only to clear iOS Safari's 16px focus-zoom threshold; the base sizes for .wk-bd-searchin / .wk-bd-textin / .wk-bd-hexin / .wk-bag-min are now 16px outright, so the overrides were duplicating a value they no longer changed. If any of those base sizes is ever reduced below 16px, the zoom comes back. */ /* 44px touch floor for the designer's tappable chrome (matches the interview panel's stated floor in walker_bp-interview.css) */ .wk-bd-opt, .wk-bd-ink, .wk-bd-fontbtn, .wk-bd-sech, .wk-bd-searchbtn, .wk-bd-more, .wk-bd-upbtn { min-height: 44px; } } /* two-line text inputs in the designer */ .wk-bd-textcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* font chips — each label renders in its own typeface */ .wk-bd-fontrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 10px; } .wk-bd-fontbtn { background: #fff; border: 2px solid var(--wk-line, #e6dcc3); border-radius: 8px; padding: 8px 6px; font-size: 1rem; line-height: 1.1; color: var(--wk-ink, #5b4a2a); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-bd-fontbtn.is-on { border-color: var(--wk-accent, #0a7ea4); color: var(--wk-accent, #0a7ea4); } @media (max-width: 430px) { .wk-bd-fontrow { grid-template-columns: repeat(2, 1fr); } } /* ink chips — filled with the ink colour, name in white */ .wk-bd-inkrow { flex-wrap: wrap; } .wk-bd-ink { color: #fff; border: 2px solid transparent; } .wk-bd-ink.is-on { border-color: var(--wk-accent, #0a7ea4); color: #fff; font-weight: 600; box-shadow: 0 0 0 2px rgba(10, 126, 164, .25); } .wk-bd-ink--white { color: var(--wk-ink, #5b4a2a); border-color: var(--wk-line, #e6dcc3); } .wk-bd-ink--white.is-on { color: var(--wk-ink, #5b4a2a); } /* colour wheel — the mesh beach bag's background option. Dye-sublimation on polyester takes the full gamut, so the control is a continuous wheel rather than a swatch set: a fixed palette would invent a limit the process does not have. Hue by angle, saturation by radius, lightness on the slider. The hex field is for shoppers who arrive knowing their colour, which on a corporate order is most of them. */ .wk-bd-wheel { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .wk-bd-wheelcv { width: 180px; height: 180px; flex: 0 0 auto; border-radius: 50%; cursor: crosshair; touch-action: none; background: var(--wk-panel, #fbf7ec); box-shadow: 0 1px 6px rgba(0, 0, 0, .15); } .wk-bd-wheelside { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .wk-bd-wheellbl { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--wk-ink, #5b4a2a); } .wk-bd-wheellight { width: 100%; } .wk-bd-hexin { padding: 8px 10px; border: 1px solid var(--wk-line, #cbb98f); border-radius: 8px; font: inherit; font-size: 1rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: lowercase; } .wk-bd-wheelcv:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @media (max-width: 430px) { .wk-bd-wheel { justify-content: center; } } /* ===================== responsive + a11y (design window) ===================== */ @media (max-width: 720px) { /* Heading collapse. On a phone the title wraps to two lines and the subtitle to two more, so four lines of type sit between the top of the modal and the preview that is meant to be pinned there. bag-designer.js adds .is-designing on the first touch inside the accordion; the preview then rises to the top and stays there for the rest of the session. Phone only. On a desktop the heading costs nothing next to a 640px box, and losing it would leave the window unlabelled. */ .wk-bag-mbox--design.is-designing > .wk-bag-mh, .wk-bag-mbox--design.is-designing > .wk-bag-msub { display: none; } .wk-bag-mbox { padding: 20px 18px 16px; } .wk-bag-mh { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .wk-bag-modal, .wk-bag-mbox { animation: none; } .wk-bag-mok, .wk-bag-mcancel { transition: none; } } .wk-bag-mok:focus-visible, .wk-bag-mcancel:focus-visible { outline: 2px solid var(--gold, #b8912f); outline-offset: 2px; } /* ===================== background fill + art placement ===================== Two independent layers, so two controls. The fill is a flat colour UNDER everything; the art is an image placed on top by width/cx/cy. Together they are what makes "my logo, centred on our brand colour" a thing the shopper can actually build. */ /* Fill: a swatch that expands the wheel rather than 180px of canvas permanently occupying a modal that already scrolls on a phone. */ .wk-bd-fillrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .wk-bd-filllbl { font-size: .85rem; color: var(--wk-ink, #5b4a2a); flex: 1 1 auto; min-width: 0; } .wk-bd-fillsw { flex: 0 0 auto; width: 40px; height: 28px; border: 1px solid var(--wk-line, #cbb98f); border-radius: 6px; cursor: pointer; padding: 0; } /* No fill set: a diagonal rule reads as "empty" where a white swatch would read as "white", which on the beach bag is a real and different answer. */ .wk-bd-fillsw.is-empty { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--wk-line, #cbb98f) 50%, transparent calc(50% + 1px)) !important; } .wk-bd-fillnone { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--wk-line, #cbb98f); border-radius: 6px; background: #fff; font: inherit; font-size: .8rem; color: var(--wk-ink, #5b4a2a); cursor: pointer; } .wk-bd-fillnone:disabled { opacity: .4; cursor: default; } /* Placement: size slider plus the three cases anyone actually wants. */ .wk-bd-place { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; } .wk-bd-placelbl { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 140px; font-size: .85rem; color: var(--wk-ink, #5b4a2a); } .wk-bd-scale { flex: 1 1 auto; min-width: 90px; } .wk-bd-placebtn { padding: 7px 12px; border: 1px solid var(--wk-line, #cbb98f); border-radius: 6px; background: #fff; font: inherit; font-size: .8rem; color: var(--wk-ink, #5b4a2a); cursor: pointer; } .wk-bd-placebtn:hover:not(:disabled) { border-color: var(--wk-accent, #0a7ea4); } .wk-bd-placebtn:disabled { opacity: .4; cursor: default; } /* Wrapper for whichever image source the current option needs. */ .wk-bd-src { margin: 10px 0 0; } .wk-bd-fillsw:focus-visible, .wk-bd-fillnone:focus-visible, .wk-bd-placebtn:focus-visible { outline: 2px solid var(--gold, #b8912f); outline-offset: 2px; } /* Text vertical placement. A slider rather than a drag: the block is two short lines and dragging something that small on a phone is worse than a slider you can nudge. Center restores true dead centre, which the compositors resolve against the block's own height so it is exact for one line or two. */ .wk-bd-textpos { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .wk-bd-textposlbl { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--wk-ink, #5b4a2a); } .wk-bd-texty { flex: 1 1 auto; min-width: 80px; } .wk-bd-textcenter { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--wk-line, #cbb98f); border-radius: 6px; background: #fff; font: inherit; font-size: .8rem; color: var(--wk-ink, #5b4a2a); cursor: pointer; } .wk-bd-textcenter:hover { border-color: var(--wk-accent, #0a7ea4); } .wk-bd-textcenter:focus-visible, .wk-bd-texty:focus-visible { outline: 2px solid var(--gold, #b8912f); outline-offset: 2px; } /* ===================== enlarge (read-only) ===================== Reuses the modal shell. The box is sized by its CONTENT here rather than the design window's fixed width: the composition is already measured against both viewport axes in JS, so the box just wraps it. No overflow:auto — if it scrolled, it would not be showing the whole bag, which is the entire point of enlarging it. */ /* A DEFINITE width, not shrink-to-fit. The JS measures this box to decide how large the photo can be, and an auto-width box sized by its own content gives a measurement that depends on what has not been inserted yet. */ .wk-bd-zoombox { width: 100%; max-width: 820px; } .wk-bd-zoombag { width: 100%; margin: 0 auto; line-height: 0; text-align: center; /* the composition is narrower than the box */ } .wk-bd-zoombag > * { margin: 0 auto; } /* ===================== choose a design (pick) ===================== A grid of composed bags, because the choice cannot be made in words: three bags may all be named "Photo on colour" and what tells them apart is the picture. Reuses the modal shell; wider than the default 440px box so three thumbnails sit on one row on a desktop and two on a phone. */ .wk-bd-pickbox { width: 100%; max-width: 660px; } /* FLEX, not grid. A grid would want equal tracks, and an auto-repeat track list cannot be sized by min-content at all -- so the cells would stretch and leave each picture at its baked-in 160px inside a wider box. Every compositor pins its wrap to an exact pixel width and solves its panel geometry for that number, so the cell is sized to the picture here, never the other way round. Same rule that keeps .ez-bag-art width-less in easyorder-v2.css. */ .wk-bd-pickgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 16px; } .wk-bd-pickcell { flex: 0 0 auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: #fff; border: 1px solid var(--hairline, #d9cfae); border-radius: 10px; font: inherit; color: var(--ink, #2f2a1d); cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; } .wk-bd-pickcell:hover, .wk-bd-pickcell:focus-visible { border-color: var(--gold, #b99a4b); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } .wk-bd-pickart { line-height: 0; border-radius: 6px; overflow: hidden; } .wk-bd-pickname { font-size: 13px; font-weight: 600; line-height: 1.3; } .wk-bd-pickmsg { font-size: 12.5px; color: var(--ink-soft, #6b6152); line-height: 1.3; }