/** * NCTE Warehouse Sale — landing page styles. * Self-contained and namespaced under .whs- so it can be removed with the * mu-plugin after the finite sale. Enqueued only on the sale page template. */ .whs-page { --whs-ink: #1b2a4a; --whs-accent: #c2185b; --whs-accent-2: #00838f; --whs-bg: #f6f8fb; --whs-line: #e2e8f0; --whs-ok: #1b7a43; color: var(--whs-ink); } /* Hero */ .whs-hero { background: linear-gradient(135deg, var(--whs-ink), var(--whs-accent-2)); color: #fff; padding: 3rem 0; text-align: center; } /* Font sizes match the site's standard scale (h1 40px, sub-head 20px, body 16px, fine print 14px) — the theme uses a ~10px (62.5%) root, so these are set in px rather than rem to avoid shrinking. */ .whs-hero__title { font-size: 40px; line-height: 1.2; margin: 0 0 .5rem; color: #fff; } .whs-hero__lede { max-width: 46rem; margin: 0 auto 1.25rem; font-size: 20px; line-height: 1.5; opacity: .95; } .whs-hero__tiers { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; padding: 0; margin: 0 0 1rem; } .whs-hero__tiers li { background: rgba(255, 255, 255, .15); border-radius: 999px; padding: .4rem 1rem; font-size: 16px; } .whs-hero__tiers strong { color: #ffd54f; } .whs-hero__twist { font-size: 16px; } .whs-hero__twist em { color: #ffd54f; font-style: normal; font-weight: 700; } .whs-hero__body { max-width: 52rem; margin: 0 auto 1rem; font-size: 16px; line-height: 1.75; } /* Image hero: full-bleed banner with the headline/sub-copy overlaid on the open space; a brand-tone scrim keeps dark text legible over the photo at any width. */ .whs-hero--image { position: relative; min-height: 340px; display: flex; align-items: center; padding: 0; background: #f5a623; overflow: hidden; text-align: left; } .whs-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; } .whs-hero--image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(245,166,35,.92) 0%, rgba(245,166,35,.6) 45%, rgba(245,166,35,0) 72%); } .whs-hero__overlay { position: relative; z-index: 2; } .whs-hero--image .whs-hero__panel { max-width: 52%; } .whs-hero--image .whs-hero__title { color: var(--whs-ink); } .whs-hero--image .whs-hero__lede { color: var(--whs-ink); margin: 0; max-width: 32rem; opacity: 1; } /* Sale-details band shown below an image hero (light background). */ .whs-hero-details { padding: 1.5rem 0 0; } .whs-hero-details .whs-hero__body { color: var(--whs-ink); margin: 0 0 1rem; max-width: 60rem; } .whs-hero-details .whs-hero__tiers { justify-content: flex-start; } .whs-hero-details .whs-hero__tiers li { background: #eef6f7; color: var(--whs-ink); } .whs-hero-details .whs-hero__tiers strong { color: var(--whs-accent); } .whs-hero-details .whs-hero__twist { color: var(--whs-ink); } .whs-hero-details .whs-hero__twist em { color: var(--whs-accent); } .whs-hero-details .whs-hero__fineprint { color: #475569; } @media (max-width: 700px) { .whs-hero--image { min-height: 240px; } .whs-hero--image .whs-hero__panel { max-width: 84%; } .whs-hero--image .whs-hero__title { font-size: 30px; } } /* Layout */ .whs-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0; } @media (min-width: 900px) { .whs-layout { grid-template-columns: 1.7fr 1fr; align-items: start; } } /* Login prompt */ .whs-login-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--whs-line); border-left: 4px solid var(--whs-accent-2); border-radius: 8px; padding: .85rem 1.1rem; margin-bottom: 1.5rem; } .whs-login-prompt--member { border-left-color: var(--whs-ok); } /* Product grid */ /* grid-auto-rows:1fr makes every row the same height as the tallest card, so all cards are uniform regardless of title length (buttons already pin to the bottom via .whs-add margin-top:auto). Reset to auto in the 1-column mobile layout. */ .whs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; grid-auto-rows: 1fr; } .whs-card { background: #fff; border: 1px solid var(--whs-line); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; } .whs-card__media { aspect-ratio: 1 / 1; background: var(--whs-bg); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .whs-card__media img { width: 100%; height: 100%; object-fit: cover; } .whs-card__placeholder { font-size: 2rem; font-weight: 800; color: #b8c2d0; letter-spacing: .05em; } .whs-card__mystery { width: 100%; height: 100%; color: var(--whs-accent-2); background: linear-gradient(135deg, #e6f4f5, #f6f8fb); } .whs-card__mystery svg { width: 64%; height: 64%; } /* min-height ~2 lines so 1-line vs 2-line titles don't shift the price/controls. */ .whs-card__title { font-size: 1rem; margin: .25rem 0 0; line-height: 1.3; min-height: 2.6em; } .whs-card__price { font-weight: 700; color: var(--whs-accent); margin: 0; } .whs-card__size select { width: 100%; padding: .4rem; border: 1px solid var(--whs-line); border-radius: 6px; } .whs-add { margin-top: auto; } .whs-finalnote { font-size: .85rem; color: #64748b; margin-top: 1.25rem; } /* Checkout panel */ .whs-checkout { background: #fff; border: 1px solid var(--whs-line); border-radius: 12px; padding: 1.5rem; position: sticky; top: 1rem; } .whs-checkout h2 { margin-top: 0; font-size: 1.3rem; } .whs-cart { list-style: none; padding: 0; margin: 0 0 1rem; } .whs-cart__empty { color: #64748b; font-style: italic; } .whs-cart__item { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--whs-line); font-size: .9rem; } .whs-cart__qty { display: inline-flex; align-items: center; gap: .4rem; } .whs-cart__qty button, .whs-cart-rm { border: 1px solid var(--whs-line); background: var(--whs-bg); border-radius: 6px; width: 1.6rem; height: 1.6rem; cursor: pointer; line-height: 1; } .whs-cart-rm { color: var(--whs-accent); } .whs-cart__line { font-weight: 600; } .whs-summary { margin: 0 0 .5rem; } .whs-summary > div { display: flex; justify-content: space-between; padding: .25rem 0; } .whs-summary__total { border-top: 2px solid var(--whs-line); margin-top: .5rem; padding-top: .5rem; font-weight: 700; font-size: 1.1rem; } .whs-summary__note { font-size: .78rem; color: #64748b; margin: 0 0 1rem; } .whs-form fieldset { border: none; padding: 0; margin: 0 0 1rem; } .whs-form legend { font-weight: 700; font-size: .95rem; margin-bottom: .4rem; } .whs-form label { display: block; font-size: .85rem; margin-bottom: .5rem; } .whs-form input[type="text"], .whs-form input[type="email"], .whs-form input[type="tel"] { width: 100%; padding: .5rem; border: 1px solid var(--whs-line); border-radius: 6px; } .whs-card-field { border: 1px solid var(--whs-line); border-radius: 6px; padding: .5rem; min-height: 3rem; } .whs-consent { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin: .5rem 0 1rem; } .whs-optin { display: flex; align-items: flex-start; gap: .5rem; font-size: 14px; line-height: 1.4; margin: .25rem 0 .75rem; } .whs-optin input { margin-top: .15rem; } .whs-pay { width: 100%; } .whs-status { margin-top: .75rem; font-size: .9rem; color: var(--whs-accent); min-height: 1.2em; } .whs-thanks, .whs-closed { background: #fff; border: 1px solid var(--whs-line); border-radius: 12px; padding: 2rem; text-align: center; } .whs-thanks h2 { color: var(--whs-ok); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* ====================================================================== * QA hardening — accessibility & responsive (added after first QA pass) * ====================================================================== */ /* Overflow guard against theme .container quirks; consistent box model. */ .whs-page { box-sizing: border-box; max-width: 100%; overflow-x: hidden; } .whs-page *, .whs-page *::before, .whs-page *::after { box-sizing: border-box; } /* Visible keyboard focus on every interactive element (WCAG 2.4.7). */ .whs-add:focus-visible, .whs-cart__qty button:focus-visible, .whs-cart-rm:focus-visible, .whs-form input:focus-visible, .whs-card__size select:focus-visible, .whs-consent input:focus-visible, .whs-pay:focus-visible, .whs-login-prompt .btn:focus-visible { outline: 3px solid var(--whs-ink); outline-offset: 2px; } .whs-card-field:focus-within { outline: 2px solid var(--whs-accent-2); outline-offset: 1px; } /* Touch targets >= ~44px; 16px inputs prevent iOS auto-zoom. */ .whs-cart__qty button, .whs-cart-rm { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; } .whs-form input[type="text"], .whs-form input[type="email"], .whs-form input[type="tel"], .whs-card__size select { min-height: 2.75rem; font-size: 1rem; } /* Disabled pay button: not opacity-only (color-blind safe). */ /* Higher specificity than the theme's .btn-primary:disabled (which forces green). */ .btn-primary.whs-pay:disabled, .whs-pay:disabled { opacity: 1; background: #cbd5e1; color: #475569; border: 1px solid #94a3b8; cursor: not-allowed; } /* New elements introduced by QA copy/UX fixes. */ .whs-hero__fineprint { font-size: 14px; opacity: .9; margin: .5rem 0 0; } .whs-card__badge { font-size: .72rem; font-weight: 700; color: var(--whs-accent-2); margin: 0; text-transform: uppercase; letter-spacing: .03em; } .whs-policy { font-size: .82rem; background: #eef6f7; border: 1px solid var(--whs-line); border-radius: 8px; padding: .5rem .7rem; margin: 0 0 1rem; } .whs-secure-note { font-size: .8rem; color: #475569; margin: 0 0 .5rem; } /* Mobile: drop the sticky checkout (it overlaps products) + reflow. */ @media (max-width: 899px) { .whs-checkout { position: static; } } @media (max-width: 640px) { .whs-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .whs-card__title { min-height: 0; } .whs-hero { padding: 2rem 0; } .whs-hero__title { font-size: 2rem; } .whs-cart__item { gap: .4rem .5rem; } .whs-cart__name { min-width: 0; overflow-wrap: anywhere; } .whs-login-prompt { flex-direction: column; align-items: flex-start; } } /* Sold-out + no-JS states */ .whs-card--soldout { opacity: .8; } .whs-card--soldout .whs-card__media { filter: grayscale(.4); } .whs-soldout-badge { font-size: .72rem; font-weight: 700; color: #b91c1c; text-transform: uppercase; letter-spacing: .03em; margin: 0; } .whs-stock-low { font-size: .78rem; font-weight: 700; color: #b45309; margin: 0; } .whs-stock-msg { font-size: 13px; font-weight: 600; color: #b45309; margin: 0; min-height: 1em; } .whs-closed { background: var(--whs-bg); border: 2px solid var(--whs-line); } .whs-noscript { background: #fff8e1; border: 1px solid #f0d98c; border-radius: 8px; padding: 1rem 1.25rem; margin: 1.5rem 0; color: #5b4a1a; } .whs-products__title { font-size: 1.4rem; margin: 0 0 1.1rem; } .whs-thanks h2:focus { outline: 3px solid var(--whs-ink); outline-offset: 3px; } /* ---- Layout rebalance + order-panel legibility (stakeholder feedback) ---- */ @media (min-width: 900px) { .whs-layout { grid-template-columns: 1.35fr 1fr; } } /* Smaller merch imagery so the order/payment panel has room. */ .whs-card__media { max-width: 320px; width: 100%; margin: 0 auto; } /* Bump the right-column typography for readability. */ .whs-checkout h2 { font-size: 1.45rem; } .whs-cart__item { font-size: .98rem; } .whs-summary > div { font-size: 1rem; } .whs-summary__total { font-size: 1.2rem; } .whs-summary__note { font-size: .86rem; } .whs-policy { font-size: .9rem; } .whs-secure-note { font-size: .88rem; } .whs-form legend { font-size: 1.05rem; } .whs-form label { font-size: .95rem; } .whs-consent { font-size: .92rem; } /* ---- Lightbox (click a shirt to view larger) ---- */ .whs-card__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; } .whs-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, .85); padding: 1.5rem; } .whs-lightbox.is-open { display: flex; } .whs-lightbox__img { max-width: 90vw; max-height: 85vh; border-radius: 8px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); } .whs-lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: none; background: #fff; color: var(--whs-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; } .whs-lightbox__close:focus-visible, .whs-card__zoom:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* ====================================================================== * Typography & target-size FIX (appended last so it wins). * The active theme sets the root font-size to ~10px (the 62.5% trick), which * shrank every rem-based size here below legible/AA limits (e.g. 1rem rendered * at 10px, 2.75rem touch targets at only 27.5px). Re-establish a legible, * accessible scale in px (still scales with browser zoom) and trim the imagery. * ====================================================================== */ .whs-page { font-size: 16px; line-height: 1.5; } /* Smaller product imagery (stakeholder feedback). */ .whs-card__media { max-width: 240px; } /* Font sizes matched to the site's standard scale (h1 40px, sub-head 20px, body 16px, fine print 14px) — see the base rules near the top. */ .whs-hero__title { font-size: 40px; line-height: 1.2; } .whs-hero__lede { font-size: 20px; line-height: 1.5; } .whs-hero__tiers li { font-size: 16px; } .whs-hero__twist { font-size: 16px; } .whs-hero__fineprint { font-size: 14px; } .whs-hero__body { font-size: 16px; line-height: 1.75; } .whs-card__title { font-size: 16px; line-height: 1.35; } .whs-card__price { font-size: 18px; } .whs-card__badge, .whs-stock-low, .whs-soldout-badge { font-size: 13px; } .whs-add { font-size: 15px; } .whs-checkout h2 { font-size: 22px; } .whs-cart__item { font-size: 15px; } .whs-cart__empty { font-size: 15px; } .whs-summary > div { font-size: 16px; } .whs-summary__total { font-size: 19px; } .whs-summary__note { font-size: 13px; } .whs-policy { font-size: 14px; } .whs-secure-note { font-size: 14px; } .whs-form legend { font-size: 17px; } .whs-form label { font-size: 15px; } .whs-consent { font-size: 15px; } .whs-finalnote { font-size: 13px; } /* Target sizes >= ~44px (px so the 10px root can't shrink them); 16px inputs. */ .whs-form input[type="text"], .whs-form input[type="email"], .whs-form input[type="tel"], .whs-card__size select { min-height: 44px; font-size: 16px; } .whs-pay { min-height: 46px; font-size: 17px; } .whs-cart__qty button, .whs-cart-rm { width: 40px; height: 40px; font-size: 18px; } .whs-lightbox__close { width: 44px; height: 44px; font-size: 24px; } /* Preview-mode notices (team review; checkout disabled). */ .whs-preview-banner { background: #fff7e6; border: 1px solid #f0c674; color: #7a5b00; border-radius: 8px; padding: 10px 14px; margin: 1.25rem 0 0; font-size: 14px; } .whs-preview-note { background: #f1f5f9; border: 1px dashed var(--whs-line); border-radius: 6px; padding: 10px; color: #475569; font-size: 14px; text-align: center; } /* Center the action buttons (stakeholder feedback). Higher specificity + !important on display to beat the theme's `.btn { display: inline-block }`. */ .whs-add { align-self: center; } .whs-form .whs-pay { display: block !important; width: fit-content; min-width: 200px; margin: 1rem auto 0; } /* Zoom affordance: a greyed "Enlarge" hint over each clickable product image. */ /* The zoom