/* Balldome Customizer — mobile-first, minimalist, high-authority. */ .bdc-root { --bdc-ink:#1a1a1a; --bdc-line:#e2e2e2; --bdc-accent:#003263; --bdc-bg:#fff; max-width:920px; margin:0 auto; color:var(--bdc-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Key the responsive breakpoint to the component's OWN width, not the viewport, so it stacks correctly inside a narrow theme/Divi column. */ container-type:inline-size; overflow-x:hidden; } .bdc-loading,.bdc-error { padding:1rem; color:#666; } .bdc-error { color:#b00; } /* Launch gate — the only thing shown on the product page until clicked. */ .bdc-launch { display:inline-block; padding:.9rem 2.2rem; font-size:1.05rem; font-weight:700; color:#fff; background:var(--bdc-accent); border:2px solid var(--bdc-accent); border-radius:6px; cursor:pointer; letter-spacing:.02em; } .bdc-launch:hover { opacity:.92; } /* Modal — appended to , so it escapes theme/Divi wrappers. Variables and font are re-declared here because the modal lives outside .bdc-root. */ .bdc-modal { --bdc-ink:#1a1a1a; --bdc-line:#e2e2e2; --bdc-accent:#003263; position:fixed; inset:0; z-index:2147483000; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; color:var(--bdc-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .bdc-modal.is-open { display:flex; } html.bdc-modal-open, html.bdc-modal-open body { overflow:hidden; } .bdc-modal-panel { position:relative; display:flex; flex-direction:column; box-sizing:border-box; width:100%; height:100%; max-width:600px; max-height:100vh; background:#fff; overflow:hidden; } /* Dynamic viewport height, where supported. On iOS 100vh ignores the keyboard and the browser chrome, so the panel claims height it does not actually have and the footer ends up underneath the keyboard. Declared second so browsers without dvh keep the vh rule above. */ @supports (max-height:100dvh) { .bdc-modal-panel { max-height:100dvh; } } @media (min-width:700px) { .bdc-modal-panel { height:auto; max-height:92vh; border-radius:10px; } } .bdc-modal-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--bdc-line); } .bdc-modal-title { font-size:1rem; font-weight:700; } .bdc-modal-close { width:38px; height:38px; font-size:1.5rem; line-height:1; border:0; background:#f2f2f2; border-radius:50%; cursor:pointer; color:var(--bdc-ink); } .bdc-modal-close:hover { background:#e6e6e6; } /* Close-up preview — pinned at the top of the panel, always visible while the controls below scroll. Shows only the banner (not the instructions half). */ .bdc-preview-note { flex:0 0 auto; margin:.7rem 1rem 0; font-size:.78rem; color:#000; font-style:italic; } .bdc-preview { flex:0 0 auto; position:relative; box-sizing:border-box; margin:.9rem 1rem 0; background:#f6f6f6; border:1px solid var(--bdc-line); border-radius:8px; padding:8px; cursor:zoom-in; overflow:hidden; } .bdc-canvas { width:100%; display:block; border-radius:4px; } /* The preview does not resize on focus, on blur, or when the keyboard opens. 0.6.1 did all three and it caused a layout jump on click, a swallowed tap on blur, and a dismissed keyboard on Android. A frame that never moves has none of those failure modes. Do not reintroduce a keyboard-reactive preview. */ .bdc-zoom-tag { position:absolute; right:12px; bottom:10px; font-size:.65rem; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:.15rem .4rem; border-radius:3px; pointer-events:none; } /* The one scroll container. Holds the note, the preview and the step body, so the preview can scroll out of the way when a phone keyboard opens instead of being resized. See the comment in build() before changing this. */ .bdc-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* Step body — one step visible at a time. No longer scrolls on its own; its parent does. */ .bdc-stepbody { padding:1rem; } .bdc-step { display:flex; flex-direction:column; gap:.9rem; min-width:0; } .bdc-review-note { margin:0; font-size:.9rem; color:#555; } /* Footer: running total, then nav (Back · dots · Next / Add to Cart). */ .bdc-footer { flex:0 0 auto; display:flex; flex-direction:column; gap:.5rem; padding:.75rem 1rem; border-top:1px solid var(--bdc-line); background:#fff; } .bdc-total { font-size:.95rem; font-weight:700; color:var(--bdc-ink); text-align:right; } .bdc-nav-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .bdc-nav { padding:.7rem 1.4rem; font-size:.95rem; font-weight:700; border-radius:6px; cursor:pointer; border:2px solid var(--bdc-accent); background:#fff; color:var(--bdc-accent); } .bdc-nav-next { background:var(--bdc-accent); color:#fff; } .bdc-nav-next.is-final { background:#1a7f37; border-color:#1a7f37; } /* Step 1 holds Next closed until the customer actually answers the fork. */ .bdc-nav-next.is-disabled { background:#c9ccce; border-color:#c9ccce; color:#6b6f72; cursor:not-allowed; } .bdc-nav:hover { opacity:.92; } .bdc-dots { display:flex; gap:.4rem; } .bdc-dot { width:8px; height:8px; border-radius:50%; background:#d0d0d0; } .bdc-dot.is-active { background:var(--bdc-accent); } .bdc-nav:disabled { opacity:.6; cursor:default; } /* On phones, third-party fixed banners (e.g. TrustIndex) can sit right at the real bottom edge of the visual viewport and intercept taps on the nav buttons. Push the footer's tap targets up with a safe-area-aware buffer. */ @media (max-width:699px) { .bdc-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px) + 10px); } } /* Fullscreen enlarge (rotate + pinch-zoom on mobile). z-index sits ABOVE the modal so it is not hidden behind it. */ .bdc-lightbox { position:fixed; inset:0; z-index:2147483600; background:rgba(0,0,0,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; cursor:zoom-out; } .bdc-lightbox-stage { max-width:96vw; max-height:78vh; overflow:auto; -webkit-overflow-scrolling:touch; } .bdc-lightbox-canvas { display:block; background:#fff; border-radius:4px; } .bdc-lightbox-hint { color:#fff; font-size:.85rem; opacity:.9; text-align:center; padding:0 1rem; } .bdc-lightbox-close { position:absolute; top:14px; right:16px; height:40px; padding:0 1rem; font-size:1rem; font-weight:700; line-height:40px; color:#111; background:#fff; border:0; border-radius:20px; cursor:pointer; } .bdc-h { margin:.25rem 0 .1rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:#666; font-weight:700; } /* Design picker */ /* Design picker. A wrapping grid, not a horizontal scroller. The scroller hid designs off the right edge while a screen and a half of white space sat unused underneath it, and a design a customer never scrolls to is a design that never gets picked. Flex-wrap rather than CSS grid so it behaves the same on older Android WebViews. */ .bdc-designs { display:flex; flex-wrap:wrap; gap:.5rem; padding-bottom:.25rem; min-width:0; max-width:100%; } .bdc-design { flex:1 1 96px; max-width:132px; min-width:88px; padding:4px; background:#fff; border:2px solid var(--bdc-line); border-radius:6px; cursor:pointer; } .bdc-design.is-active { border-color:var(--bdc-accent); } .bdc-design img { width:100%; height:auto; display:block; border-radius:3px; } .bdc-design-name { display:block; font-size:.82rem; font-weight:600; text-align:center; margin-top:4px; color:#333; } /* Text line */ .bdc-line { border:1px solid var(--bdc-line); border-radius:6px; padding:.6rem; } /* Centred to sit over its input, which forces centred text of its own. A left aligned caption above centred content reads as a misalignment. */ .bdc-line-label { display:block; font-size:.75rem; font-weight:700; margin-bottom:.3rem; text-align:center; } .bdc-text { width:100%; box-sizing:border-box; padding:.5rem; font-size:1rem; text-align:center !important; border:1px solid var(--bdc-line); border-radius:4px; } .bdc-line-row { display:flex; gap:.4rem; margin-top:.4rem; align-items:stretch; } .bdc-font { flex:1; padding:.4rem; border:1px solid var(--bdc-line); border-radius:4px; font-size:.85rem; } .bdc-toggle { width:38px; border:1px solid var(--bdc-line); background:#fff; border-radius:4px; cursor:pointer; font-size:.95rem; } .bdc-toggle.bdc-bold { font-weight:700; } .bdc-toggle.bdc-italic { font-style:italic; } .bdc-toggle.is-active { background:var(--bdc-accent); color:#fff; border-color:var(--bdc-accent); } .bdc-colors { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; } .bdc-swatch { width:26px; height:26px; border-radius:50%; border:2px solid #ccc; cursor:pointer; padding:0; } .bdc-swatch.is-active { border-color:var(--bdc-ink); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--bdc-ink); } /* Choices */ .bdc-choices,.bdc-install { display:flex; flex-direction:column; gap:.4rem; } /* Amazon-style picture cards. Two across on phones, which is where most of Kevin's customers are, and where a picture beats a line of text. */ /* align-items:stretch is what makes both cards the same height regardless of which one has the longer title. Without it a two-line title on one card left the other card short, and the two price lines sat at different heights. */ .bdc-choices-cards { flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:.6rem; } .bdc-choices-cards .bdc-card { flex:1 1 0; min-width:0; box-sizing:border-box; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0; overflow:hidden; border-radius:8px; border:2px solid #d5d9d9; background:#fff; cursor:pointer; transition:border-color .12s, box-shadow .12s; } .bdc-choices-cards .bdc-card:hover { border-color:#a7acac; } /* Selected state comes from a JS-applied class, not :has(), so it works on older iOS Safari where :has() is unsupported. */ .bdc-choices-cards .bdc-card.is-active { border-color:#007185; box-shadow:0 0 0 2px rgba(0,113,133,.22); } .bdc-choices-cards .bdc-card input { position:absolute; opacity:0; width:1px; height:1px; } /* Fixed-height picture area. The two sources are different shapes (a case render versus a live canvas), and letting each one set its own height was what threw the titles and prices out of line with each other. Cropping to a fixed box keeps every card identical and keeps the whole row short enough that the buttons underneath stay above the fold on a phone. */ /* align-items:flex-end, not center. Anything taller than the box then hangs off the top rather than being trimmed equally at both ends, which is what was sawing the black base off the bottom of every case. */ .bdc-card-fig { display:flex; align-items:flex-end; justify-content:center; height:120px; background:#fff; line-height:0; overflow:hidden; flex:0 0 auto; } .bdc-card-fig img { width:100%; height:100%; display:block; object-fit:cover; object-position:center bottom; } .bdc-card-fig canvas { max-width:100%; display:block; } /* This canvas draws its own full-height composition (case plus the flat label beneath it), so it fills the box rather than sitting on the floor of it. */ .bdc-card-fig .bdc-card-labelart { align-self:stretch; } /* margin-top:auto pins the copy to the bottom of the card, so titles, notes and prices line up across the row no matter what the pictures did above. */ .bdc-card-txt { display:block; margin-top:auto; padding:.55rem .6rem .6rem; } .bdc-card .bdc-choice-t { display:block; font-size:.95rem; line-height:1.25; font-weight:700; } .bdc-card .bdc-choice-n { display:block; font-size:.8rem; line-height:1.3; color:#565959; margin-top:.2rem; } .bdc-card .bdc-choice-p { display:block; font-size:.95rem; font-weight:700; margin-top:.25rem; } /* Design tiles showing the whole case need more room than flat label strips. */ /* Thumbnails crop to the label band instead of showing the whole case. object-fit:contain letterboxed a tall case render into a small square, which made the label a few pixels tall — the customer was choosing between five designs they could not actually see. Now the crop is centred low, on the label. height + object-fit is the fallback pair for WebViews without aspect-ratio (Android 8, iOS 14), which would otherwise collapse the box. object-position is BOTTOM, not a percentage. A middle-ish percentage crops the black base off the bottom of the case, which makes the product look broken and sawn in half. The ball at the top is the expendable part. */ .bdc-design.bdc-design-case { width:auto; } .bdc-design-case img { height:78px; aspect-ratio:4/3; object-fit:cover; object-position:center bottom; background:#fff; } @supports (aspect-ratio:4/3) { .bdc-design-case img { height:auto; } } /* Case view is portrait, so the canvas is sized in JS and centred rather than stretched to the panel width the way the flat close-up crop was. */ .bdc-preview .bdc-canvas { margin:0 auto; } /* Plain (no picture) choice row, used by every sport that has no case render. The description drops to its own full-width line via order and a 100% basis. Without that it sat on the top row as an unstyled flex item, took whatever width its text wanted, and squeezed the title into a one-word-per-line column. Only baseball, pickleball and tennis have case art, so this layout is what most sports actually show. */ .bdc-choice { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .5rem; padding:.6rem .75rem; border:1px solid var(--bdc-line); border-radius:6px; cursor:pointer; } .bdc-choice input { margin:0; flex:0 0 auto; } .bdc-choice-t { flex:1 1 auto; min-width:0; font-size:.9rem; font-weight:600; } .bdc-choice-p { flex:0 0 auto; font-weight:700; font-size:.9rem; } .bdc-choice-n { order:3; flex:1 0 100%; margin:0; font-size:.78rem; line-height:1.45; color:#666; padding-left:1.5rem; } .bdc-note { font-size:.75rem; color:#666; padding:.25rem .1rem; } .bdc-note-lead { font-size:.92rem; line-height:1.45; color:#333; margin:0 0 .2rem; } /* Optional email capture above the download button. Styled as a plain field, not a required-looking form, so nobody reads it as a wall. */ .bdc-email { display:block; margin:.2rem 0 .1rem; } .bdc-email-label { display:block; font-size:.88rem; font-weight:600; margin-bottom:.3rem; color:#222; } .bdc-email-input { text-align:left !important; } .bdc-email-hint { display:block; font-size:.78rem; line-height:1.4; color:#666; margin-top:.3rem; } /* The email confirmation is the only proof the customer gets that the thing they asked for actually happened, so it is a panel rather than a line of grey small print. Deliberately the mirror of .bdc-warn: same size, same weight, same centring, opposite colour. Green means it worked. */ .bdc-email-status { display:block; margin-top:.55rem; padding:.65rem 1.1rem; border-radius:5px; font-size:.9rem; font-weight:700; line-height:1.5; text-align:center; text-wrap:balance; overflow-wrap:anywhere; } .bdc-email-status.is-ok { background:#0f6e56; border:1px solid #0b5744; color:#fff; } .bdc-email-status.is-sending { background:#eef1f4; border:1px solid #ccd3da; color:#41505f; } /* Amber, not red. The download still succeeded, so this is a caveat rather than a failure, and the red box directly below it means something worse. */ .bdc-email-status.is-fail { background:#fff4e0; border:1px solid #e0a24a; color:#6b4413; } /* Download block. Revealed on Step 4 only when the customer picks the free download, so it reads as the consequence of a choice they just made rather than as a competing offer beside the paid one. Framed in the same green as the old always-on callout, which is still the right colour for "free". */ .bdc-download { display:block; box-sizing:border-box; margin-top:.85rem; padding:.85rem .9rem; border:1px solid #0f6e56; border-left-width:5px; border-radius:6px; background:#eaf6f1; } .bdc-download .bdc-h { margin-top:0; color:#0b4a3a; } /* Brief highlight when the block opens, so the eye lands on it after the scroll. Fades rather than blinks — this is a signpost, not an alarm. */ .bdc-download.is-flash { animation:bdc-flash 1.4s ease-out 1; } @keyframes bdc-flash { 0% { background:#c9ead9; box-shadow:0 0 0 3px rgba(15,110,86,.35); } 100% { background:#eaf6f1; box-shadow:0 0 0 0 rgba(15,110,86,0); } } @media (prefers-reduced-motion:reduce) { .bdc-download.is-flash { animation:none; } } /* No-label warning. Amber, not green and not red. Nothing has gone wrong, but this is the one fact that generates support email if it goes unread. */ /* Deliberately louder than .bdc-qty-note below. This is the one sentence that stops a customer expecting a printed label in the box, so it reads as a stop sign rather than a footnote. */ /* The generous side padding is doing real work, not decoration. At the old .75rem the sentence measured 479px inside 494px of space, so text-align centre had seven pixels of slack per side and read as flush left. Squeezing the measure forces a genuine two-line wrap, and text-wrap balance splits it evenly so it looks deliberate rather than accidental. */ .bdc-warn { margin:.7rem 0 0; padding:.7rem 2.4rem; border-radius:5px; background:#c62828; border:1px solid #a81f1f; color:#fff; font-size:.83rem; line-height:1.5; font-weight:700; text-align:center; text-wrap:balance; } @media (max-width:520px) { .bdc-warn { padding:.7rem 1rem; } } .bdc-foot-note { margin:.15rem 0 0; font-size:.78rem; line-height:1.4; color:#6b4413; text-align:center; } /* Live case thumbnail on the Step 4 printed-label card. Same box as the img version so the two cards stay the same height. */ .bdc-card-canvas { width:100%; height:auto; display:block; } /* Quantity, footer. Sits opposite the running total and only appears on the step that ends in Add to Cart. */ .bdc-total-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .bdc-qty { display:flex; align-items:center; gap:.4rem; } .bdc-qty-label { font-size:.85rem; font-weight:600; color:#333; } .bdc-qty-select { min-height:40px; min-width:64px; padding:.35rem .5rem; font-size:1rem; border:1px solid #b9bcbf; border-radius:5px; background:#fff; } /* Per-item controls on the confirmation screen. The Remove button is quiet by default and only commits to red on hover, because it sits under a picture the customer just spent time making and should not look like the primary action. */ .bdc-thumb-choice { display:block; margin:.3rem 0 0; font-size:.72rem; line-height:1.3; color:#5b6470; text-align:center; } /* Stock product photo standing in for a missing render. Deliberately small and quiet. At full preview size it is indistinguishable from a real label preview, which is how a customer ends up believing their design looks like the catalogue picture. */ .bdc-thumb-stock { width:auto !important; max-height:84px; margin:0 auto; opacity:.72; } .bdc-thumb-stock-note { display:block; margin:.25rem 0 0; font-size:.68rem; font-style:italic; line-height:1.3; color:#8a929b; text-align:center; } /* Product name on a line from another display case. Heavier than the label text beneath it, because it answers "which case is this" first. */ .bdc-thumb-name { display:block; margin:.3rem 0 0; font-size:.74rem; font-weight:700; line-height:1.3; color:var(--bdc-ink); text-align:center; } /* Separated from the group above it so "Also in your cart" reads as a new section rather than another item in the same list. */ .bdc-done-thumbs-alt { margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--bdc-line); } .bdc-thumb-acts { display:flex; gap:.3rem; margin:.35rem 0 0; } .bdc-thumb-btn { flex:1 1 0; min-width:0; padding:.3rem .25rem; background:none; border:1px solid #c9ced6; border-radius:4px; color:#5b6470; font-size:.74rem; font-weight:600; cursor:pointer; } .bdc-thumb-btn:disabled { opacity:.6; cursor:default; } /* Edit leans on the brand colour and Remove on the warning red, so the recoverable action and the destructive one never look interchangeable. */ .bdc-thumb-edit:hover:not(:disabled) { border-color:var(--bdc-accent); color:var(--bdc-accent); } .bdc-thumb-remove:hover:not(:disabled) { border-color:#c62828; color:#c62828; } /* Quantity caveat. Same amber as .bdc-warn, because it is the same category of thing: nothing is broken, but this is the sentence that prevents a refund. */ .bdc-qty-note { margin:.5rem 0 0; padding:.5rem .6rem; border-radius:5px; background:#fff4e0; border:1px solid #e0a24a; color:#6b4413; font-size:.8rem; line-height:1.45; } /* The wait. Covers the panel while the PDF renders and uploads, which on a phone is long enough that a still screen reads as a crash. Sits over the top of everything inside the panel rather than replacing it, so nothing below has to be torn down and rebuilt when it clears. */ .bdc-wait { position:absolute; inset:0; z-index:5; background:#fff; display:flex; align-items:center; justify-content:center; padding:1.5rem; } .bdc-wait-inner { max-width:340px; text-align:center; } .bdc-spinner { width:38px; height:38px; margin:0 auto 1.1rem; border-radius:50%; border:3px solid var(--bdc-line); border-top-color:var(--bdc-accent); animation:bdc-spin .9s linear infinite; } @keyframes bdc-spin { to { transform:rotate(360deg); } } .bdc-wait-head { margin:0 0 1rem; font-size:1rem; font-weight:700; color:var(--bdc-ink); } .bdc-wait-line { margin:0 auto; min-height:4.4em; font-size:.92rem; line-height:1.55; color:#444; opacity:0; transition:opacity .45s ease; } .bdc-wait-line.is-in { opacity:1; } .bdc-wait-foot { margin:1.2rem 0 0; font-size:.75rem; color:#8a8a8a; } @media (prefers-reduced-motion:reduce) { .bdc-spinner { animation-duration:2.5s; } .bdc-wait-line { transition:none; } } /* Post-add confirmation. Replaces the wizard in place so there is exactly one thing on screen to answer. */ /* Scrolls, because the confirmation grows with every case added and a fixed flex child would clip the fourth one out of existence. */ .bdc-done { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.5rem 1.25rem 1.5rem; text-align:center; } .bdc-done-check { width:52px; height:52px; margin:0 auto .85rem; border-radius:50%; background:#e8f5ec; color:#1e7a3c; font-size:1.6rem; line-height:52px; font-weight:700; } .bdc-done-head { margin:0 0 .35rem; font-size:1.15rem; font-weight:700; color:#1f2326; } .bdc-done-msg { margin:0 0 1rem; font-size:.95rem; line-height:1.5; color:#4a5054; } /* What has been designed so far. Full width and stacked, NOT a row of small tiles. This screen exists so a customer can read their own label back and catch a typo before paying. A 90px tile cannot do that job. Do not shrink these to tidy up the layout. */ .bdc-done-thumbs { margin:1.4rem auto 0; max-width:360px; text-align:left; } .bdc-done-thumbs-h { margin:0 0 .5rem; font-size:.78rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#6c7276; text-align:center; } .bdc-done-thumb { margin:0 0 .6rem; } .bdc-done-thumb img { width:100%; height:auto; display:block; border:1px solid var(--bdc-line); border-radius:6px; background:#fff; } .bdc-done-acts { display:flex; flex-direction:column; gap:.6rem; max-width:340px; margin:0 auto; } .bdc-done-row { display:flex; gap:.6rem; } .bdc-done-row .bdc-done-btn { flex:1 1 0; } .bdc-done-btn { display:block; width:100%; min-height:46px; padding:.7rem 1rem; border-radius:6px; font-size:.95rem; font-weight:600; text-align:center; text-decoration:none; cursor:pointer; box-sizing:border-box; border:1px solid #b9bcbf; background:#fff; color:#1f2326; } .bdc-done-again { background:#1f2326; border-color:#1f2326; color:#fff; font-size:1rem; } .bdc-done-again:hover { background:#000; border-color:#000; } .bdc-done-cart:hover, .bdc-done-checkout:hover { background:#f3f4f5; } .bdc-done-foot { margin:1rem auto 0; max-width:360px; font-size:.8rem; line-height:1.45; color:#6c7276; } /* Free print-ready PDF callout. This is one of the strongest reasons to buy the case here rather than on Amazon, so it reads as an offer, not fine print. Full width under the label cards, which is why it breaks the row flow. */ /* box-sizing is what keeps this on screen: flex-basis:100% plus padding and a 5px left border otherwise overflows the row by exactly that much. */ .bdc-freepdf { flex:0 0 100%; width:100%; max-width:100%; box-sizing:border-box; display:flex; gap:.7rem; align-items:flex-start; overflow-wrap:anywhere; margin-top:.2rem; padding:.75rem .85rem; border:1px solid #0f6e56; border-left-width:5px; border-radius:6px; background:#eaf6f1; } .bdc-freepdf-tag { flex:0 0 auto; background:#0f6e56; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:.2rem .45rem; border-radius:3px; margin-top:.1rem; } .bdc-freepdf-txt { display:block; min-width:0; } .bdc-freepdf-h { display:block; font-size:1rem; font-weight:700; color:#0b4a3a; line-height:1.3; } .bdc-freepdf-b { display:block; font-size:.85rem; line-height:1.45; color:#245a4b; margin-top:.2rem; } /* Actions */ .bdc-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; } .bdc-btn { flex:1 1 auto; min-width:160px; padding:.85rem 1rem; font-size:1rem; font-weight:700; border-radius:6px; cursor:pointer; border:2px solid var(--bdc-accent); } .bdc-btn-primary { background:var(--bdc-accent); color:#fff; } .bdc-btn-secondary { background:#fff; color:var(--bdc-accent); } .bdc-btn-full { width:100%; } .bdc-btn:hover { opacity:.92; } /* The designer runs as a single focused column inside the modal (mobile-first). No two-column split — keeps the flow simple on phones. */ /* --------------------------------------------------------------------------- 0.11.0 — picture-card copy. 1. Centre it. The two cards in a row are read side by side and left-aligned copy only looked right on whichever card happened to have the longer title. 2. Kill the note's left indent inside a card. .bdc-choice-n carries padding-left:1.5rem so that on the plain radio-row layout the description lines up under the label text rather than under the radio button. A card shows no radio, so on a card that indent is pure offset: the note ends up centred inside a box inset 24px on one side only and sits visibly right of the title above it. 3. Give the title and the note minimum-height rows so the two cards agree with each other. The copy is bottom-pinned (.bdc-card-txt margin-top:auto), so without this a two-line title on one card pushed its note up a line while the other card's one-line title left its note sitting lower. Heights are in em so they track the font size. The values are the worst-case wrap at each breakpoint, measured at thirteen widths from 320px to 1200px rather than guessed. Step 4's copy is longer than Step 1's and needs its own numbers, which is what .bdc-choices-priced is for. --------------------------------------------------------------------------- */ .bdc-card-txt { text-align:center; } .bdc-card .bdc-choice-n { padding-left:0; } .bdc-choices-cards .bdc-choice-t { min-height:2.5em; } /* 2 lines at 1.25 */ .bdc-choices-cards .bdc-choice-n { min-height:2.6em; } /* 2 lines at 1.3 */ .bdc-choices-priced .bdc-choice-n { min-height:3.9em; } /* 3 lines */ /* Under 360px both titles wrap one line further and Step 4's notes reach four. */ @media (max-width:359px) { .bdc-choices-cards .bdc-choice-t { min-height:3.75em; } .bdc-choices-priced .bdc-choice-n { min-height:5.2em; } } /* Step 4's own titles are longer than Step 1's and wrap to three lines on a phone. "Print it yourself, free PDF download" is what pushed it over. */ @media (max-width:699px) { .bdc-choices-priced .bdc-choice-t { min-height:3.75em; } } /* On a desktop-width panel Step 4's notes fit the same two lines as Step 1. */ @media (min-width:700px) { .bdc-choices-priced .bdc-choice-n { min-height:2.6em; } }