/* ========================================================================== Rush Wristband - Global Stylesheet Modern, clean, responsive design inspired by tablecoversnow.com ========================================================================== */ /* ----- 0. i18n cloak — hide body until either the inline boot script (600 ms timeout) or main.js's applyTranslations() removes the .i18n-cloak class. The 800 ms CSS fallback is just a final safety net in case both fail (e.g. JS blocked). ----- */ html.i18n-cloak body { visibility: hidden; } @keyframes i18n-cloak-safety { to { visibility: visible !important; } } html.i18n-cloak body { animation: i18n-cloak-safety 0s linear 0.8s forwards; } /* ----- 1. Design tokens ----- */ :root { /* ---------- Colour: primary palette ---------- */ --color-primary: #1e3a8a; --color-primary-dark: #0f172a; --color-primary-light: #3b82f6; --color-primary-soft: #eff4ff; --color-accent: #ea580c; --color-accent-dark: #c2410c; --color-accent-light: #fb923c; --color-accent-soft: #fff1e6; /* Teal — Step tabs, secondary toggles, customize-card buttons */ --color-teal: #4ea4ad; --color-teal-dark: #3b8a93; --color-teal-soft: #e6f3f5; --color-teal-line: #c7e3e7; /* Status colours */ --color-success: #059669; --color-success-soft: #d1fae5; --color-danger: #dc2626; --color-danger-soft: #fee2e2; --color-warning: #d97706; --color-warning-soft: #fef3c7; --color-info: #2563eb; --color-info-soft: #dbeafe; /* Step header strip (matches reference site) */ --color-step-strip-top: #e2edf5; --color-step-strip-bot: #d6e4f0; /* ---------- Colour: text / surface ---------- */ --color-text: #0f172a; --color-text-muted: #475569; --color-text-light: #94a3b8; --color-border: #e6e7eb; --color-border-strong: #d1d5db; --color-border-focus: #93c5fd; --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-alt: #f8fafc; --color-bg-alt: #fafaf7; --color-bg-warm: #fdf8f3; --color-bg-dark: #0f172a; --color-bg-darker: #0b1120; --color-overlay: rgba(15, 23, 42, 0.55); /* ---------- Shadow scale (5 stops + 1 inset, 1 brand glow) ---------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08); --shadow-2xl: 0 40px 80px -20px rgba(15, 23, 42, 0.25); --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-glow-accent: 0 8px 24px -8px rgba(234, 88, 12, 0.45); --shadow-glow-teal: 0 8px 24px -8px rgba(78, 164, 173, 0.4); /* ---------- Border radius scale ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px; /* ---------- Spacing scale (4-px base, 8 stops) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- Font ---------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', sans-serif; --font-display: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --letter-tight: -0.02em; --letter-snug: -0.01em; --letter-wide: 0.06em; /* ---------- Layout ---------- */ --container-max: 1280px; --container-pad: clamp(16px, 4vw, 32px); --header-height: 72px; /* ---------- Transitions / easing ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.12s var(--ease-soft); --transition: all 0.2s var(--ease-soft); --transition-slow: 0.35s var(--ease-out); --transition-pop: 0.4s var(--ease-pop); } /* CJK languages typically need slightly looser line-height + a different font preference; is set by applyTranslations(). */ html[data-lang="zh"] body { line-height: 1.7; } /* Arabic support. Only the variables and inherited text are covered here. 177 rules in this sheet name Inter inside a `font:` shorthand instead of reading --font-sans, and there is no way to reach them from one place: an @font-face claiming the name 'Inter' for just the Arabic code blocks was tried, and even with unicode-range confining it to U+0600 and up it changed Latin and CJK rendering on every page (measured: 4815 pixels on pages/about.html, gone the moment the rule was removed — see scripts/_bisect-css-diff.py). Declaring an @font-face for a family name replaces how that name resolves, full stop. So those 177 declarations let Arabic glyphs fall through to the generic `sans-serif`, which maps to a face with Arabic coverage on all three platforms (Segoe UI / Arial on Windows, SF Arabic via Helvetica on Apple, Noto Naskh Arabic via Roboto on Android). Legible, just not a chosen Naskh. Getting the preferred face everywhere means converting those shorthands to var(--font-sans), which is worth doing on its own merits but is a separate change with its own regression run. Arabic sets dots and diacritics above and below the baseline, so it wants more leading than Latin at the same size. */ html[data-lang="ar"] { --font-sans: 'SF Arabic', 'Segoe UI', 'Noto Sans Arabic', 'Noto Naskh Arabic', 'Geeza Pro', Tahoma, Arial, sans-serif; --font-display: 'SF Arabic', 'Segoe UI', 'Noto Sans Arabic', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif; } html[data-lang="ar"] body { line-height: 1.8; } /* ----- 2. Reset & base ----- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--color-primary-light); } button { font-family: inherit; cursor: pointer; border: none; background: none; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 700; line-height: 1.2; color: var(--color-text); letter-spacing: var(--letter-snug); font-family: var(--font-display); } h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: var(--letter-tight); line-height: 1.1; } h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: var(--letter-tight); line-height: 1.15; } h3 { font-size: 1.3rem; } h4 { font-size: 1.1rem; } ::selection { background: var(--color-accent-soft); color: var(--color-accent-dark); } :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: 4px; } p { margin: 0 0 1em; } ul { padding-inline-start: 1.5em; margin: 0 0 1em; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } /* ----- 3. Buttons ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; text-align: center; transition: var(--transition); white-space: nowrap; cursor: pointer; } .btn-primary { background: var(--color-accent); color: #1c1917; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-accent-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: var(--color-primary); color: #fff; } .btn-secondary:hover { background: var(--color-primary-dark); color: #fff; } .btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: #fff; } .btn-ghost { background: transparent; color: var(--color-text); padding: 8px 16px; } .btn-ghost:hover { background: var(--color-bg-alt); } .btn-block { display: flex; width: 100%; } /* ----- 4a. Top utility bar (language switcher) ----- */ .topbar { background: #0f172a; color: #cbd5e1; font-size: 0.78rem; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; z-index: 60; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 24px; } .topbar-info { color: #94a3b8; display: inline-flex; align-items: center; gap: 8px; } /* About / Contact live up here, next to the language picker, the way order-card.com keeps its account and contact links out of the product bar. The nav below is for products only. */ .topbar-links { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; } .topbar-links a { color: #cbd5e1; padding: 4px 8px; border-radius: 4px; font-weight: 500; } .topbar-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .topbar-links a.active { color: #fff; font-weight: 700; } /* (removed: .topbar-cs WhatsApp + chat icon group) order-card.com does not show support icons in the topbar — chat is exclusively the Tawk.to bubble in the bottom-right. The icon styles previously here were dropped along with the markup injector that produced them. */ /* ----- 4b. Limited-time offer strip + offer modal ----- Injected by js/promo.js between the sticky .topbar and the sticky .header, from whatever campaign the admin 优惠码 page has flagged. Deliberately NOT sticky: it would push the header's sticky offset (top: 36px) off by its own height, which varies with the locale's wording. It scrolls away instead and the topbar keeps the offer one click away. */ .promo-bar { background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); color: #fff; font-size: 0.82rem; /* Fixed line box so the strip is the same height in every locale — CJK and Latin glyphs report different metrics and the bar wobbled by a pixel. */ line-height: 22px; padding: 7px 0; } .promo-bar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; text-align: center; } .promo-bar__tag { background: rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 2px 9px; font-size: 0.7rem; font-weight: 700; /* Its own line box, so the pill's padding does not make the strip taller than the 22px text row beside it. */ line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .promo-bar__text { font-weight: 600; } /* Equally spaced fragments read as one run-on sentence, so the code is fenced off with a middot. It rides on the fragment itself rather than sitting between them, so hiding the fragment hides its divider. */ .promo-bar__code::before { content: "\00b7"; margin-inline-end: 12px; opacity: 0.55; } .promo-bar__code { /* "Code" and its chip are one unit and never break apart. */ white-space: nowrap; } .promo-bar__code b { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: 0.06em; border: 1px dashed rgba(255, 255, 255, 0.7); border-radius: 4px; padding: 2px 9px; margin-inline-start: 6px; } .promo-bar__details { background: none; border: 0; color: #fff; font: inherit; font-weight: 700; letter-spacing: 0.03em; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; /* Set apart from the offer itself: it is an aside, not part of the sentence. */ margin-inline-start: 6px; padding: 0; white-space: nowrap; } .promo-bar__details:hover { opacity: 0.85; } @media (max-width: 700px) { .promo-bar { font-size: 0.76rem; } /* Once the strip can wrap, a divider can land at the start of a line. The gaps do the separating from here down. */ .promo-bar__code::before { content: none; } .promo-bar__details { margin-inline-start: 0; } } /* Shared shell for the small print and the homepage offer card. */ .promo-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; } .promo-modal__backdrop { position: absolute; inset: 0; background: var(--color-overlay); } .promo-modal__card { position: relative; background: var(--color-surface); border-radius: 14px; box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 26px 26px 22px; } .promo-modal__x { position: absolute; top: 8px; inset-inline-end: 12px; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--color-text-light); cursor: pointer; } .promo-modal__x:hover { color: var(--color-text); } .promo-modal__title { margin: 0 0 12px; font-size: 1.05rem; padding-inline-end: 24px; } .promo-modal__list { margin: 0 0 18px; padding-inline-start: 20px; color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.6; } .promo-modal__list li { margin-bottom: 6px; } .promo-modal__ok { width: 100%; justify-content: center; } /* The homepage announcement: one card, one number, one code to copy. */ .promo-pop { text-align: center; } .promo-pop__tag { display: inline-block; background: var(--color-accent-soft); color: var(--color-accent-dark); border-radius: 999px; padding: 3px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .promo-pop__title { margin: 14px 0 6px; font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em; } /* The discount inside that headline: the number is what sells the card, so it is set larger than the words around it and in the brand red. Injected by promo.js, which keeps the whole of it — "10%", "9 折", "€20" — in here so no unit is left behind at sentence size. */ .promo-pop__off { /* Red rather than the brand orange: the CTA right below it is orange, and two warm tones that close together read as an accident. */ color: var(--color-danger); font-size: 1.35em; font-weight: 800; /* Optical alignment: a much larger run inside a line of text otherwise drags the baseline of the whole heading down. */ line-height: 1; display: inline-block; vertical-align: -0.04em; } .promo-pop__sub { margin: 0 0 16px; color: var(--color-text-muted); font-size: 0.9rem; } .promo-pop__code { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; cursor: pointer; } .promo-pop__code:hover { border-color: var(--color-accent); } .promo-pop__code span { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.1em; } .promo-pop__code em { font-style: normal; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-accent-dark); } @media (max-width: 480px) { .promo-pop__title { font-size: 1.6rem; } .promo-pop__off { font-size: 2.1rem; } } /* ===================================================================== Language switcher — Order-Card-style dropdown. Markup is enhanced at runtime by enhanceLangSwitchers() in main.js: .lang-switcher button.lang-trigger ← globe + current language name + caret div.lang-menu ← absolutely positioned, hidden by default button.lang-btn × 5 Pre-JS fallback (no .lang-switcher--enhanced class yet) keeps the original inline 5-button look so the page is usable even with JS off. ===================================================================== */ .lang-switcher { display: inline-flex; gap: 2px; align-items: center; position: relative; } /* Pre-enhancement (fallback) sizing for the legacy label. */ .lang-switcher:not(.lang-switcher--enhanced) .lang-label { color: #64748b; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-inline-end: 6px; } .lang-switcher:not(.lang-switcher--enhanced) .lang-btn { background: transparent; color: #94a3b8; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.06em; cursor: pointer; border: none; font-family: inherit; } .lang-switcher:not(.lang-switcher--enhanced) .lang-btn.active { color: #fff; background: var(--color-accent); } /* ----- Dropdown trigger (collapsed state) ----- Sits in the dark topbar so we use the accent orange as the pill colour: globe + name + caret all share the same white text on an accent background so it reads as a real "language picker" call-to- action rather than blending into the topbar. Right-aligned to its container, full-name text means widths vary (English vs Français) — `max-content` keeps it snug. */ .lang-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--color-accent); border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer; color: #fff; font-family: inherit; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em; border-radius: 999px; box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35); transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .lang-trigger:hover { background: var(--color-accent-dark, #c2410c); box-shadow: 0 4px 12px rgba(234, 88, 12, 0.45); transform: translateY(-1px); } .lang-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lang-trigger-icon { display: inline-flex; color: #fff; opacity: 0.95; } .lang-trigger-name { line-height: 1; color: #fff; } .lang-trigger-caret { font-size: 0.75rem; color: #fff; opacity: 0.9; transition: transform 0.18s ease; } .lang-switcher.is-open .lang-trigger { box-shadow: 0 4px 12px rgba(234, 88, 12, 0.5); } .lang-switcher.is-open .lang-trigger-caret { transform: rotate(180deg); } /* ----- Dropdown menu (expanded state) ----- Right-aligned under the trigger so the menu doesn't push off the viewport on narrow topbars. Rows show the short code on the left (tiny, subdued) and the full native language name on the right (bold), with the currently active row painted in the accent colour. */ .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; inset-inline-start: auto; min-width: 180px; padding: 6px 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08); display: none; z-index: 1000; /* Was `overflow: hidden`, but the dropdown now lists 13 locales and can comfortably exceed a phone's viewport. Cap it at 60vh and let the list scroll inside the rounded card so the corners stay clipped and the bottom rows never disappear under the fold. */ max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; } .lang-switcher.is-open .lang-menu { display: block; } .lang-menu .lang-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; background: transparent; border: none; border-inline-start: 3px solid transparent; font-family: inherit; font-size: 0.92rem; color: #1f2937; text-align: start; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .lang-menu .lang-btn .lang-btn-code { flex: 0 0 28px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: #94a3b8; text-transform: uppercase; } .lang-menu .lang-btn .lang-btn-name { flex: 1 1 auto; font-weight: 600; color: inherit; } .lang-menu .lang-btn:hover { background: #fff7ed; border-inline-start-color: var(--color-accent); } .lang-menu .lang-btn:hover .lang-btn-code { color: var(--color-accent); } .lang-menu .lang-btn.is-current, .lang-menu .lang-btn.active { background: rgba(234, 88, 12, 0.08); border-inline-start-color: var(--color-accent); } .lang-menu .lang-btn.is-current .lang-btn-code, .lang-menu .lang-btn.active .lang-btn-code, .lang-menu .lang-btn.is-current .lang-btn-name, .lang-menu .lang-btn.active .lang-btn-name { color: var(--color-accent); font-weight: 800; } /* ===================================================================== Currency switcher (sits to the LEFT of the language switcher in topbar). Visual conventions mirror .lang-switcher so the two controls feel like siblings: same pill shape, same dropdown panel, same hover treatments. We use a slate-blue accent instead of the orange to visually distinguish "what language?" from "what currency?" without screaming for attention. ===================================================================== */ .currency-switcher { display: inline-flex; position: relative; align-items: center; margin-inline-end: 8px; } .currency-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer; color: #fff; font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35); transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .currency-trigger:hover { background: #0f172a; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.45); transform: translateY(-1px); } .currency-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .currency-trigger-icon { font-weight: 800; font-size: 0.9rem; line-height: 1; } .currency-trigger-name { line-height: 1; } .currency-trigger-caret { font-size: 0.72rem; opacity: 0.85; transition: transform 0.18s ease; } .currency-switcher.is-open .currency-trigger { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.5); } .currency-switcher.is-open .currency-trigger-caret { transform: rotate(180deg); } .currency-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; padding: 6px 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08); display: none; z-index: 1000; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; } .currency-switcher.is-open .currency-menu { display: block; } .currency-menu .currency-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: transparent; border: none; border-inline-start: 3px solid transparent; font-family: inherit; font-size: 0.92rem; color: #1f2937; text-align: start; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .currency-menu .currency-btn-code { flex: 0 0 36px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #94a3b8; } .currency-menu .currency-btn-name { flex: 1 1 auto; font-weight: 600; } .currency-menu .currency-btn-symbol { flex: 0 0 auto; font-weight: 700; color: #64748b; font-size: 0.95rem; } .currency-menu .currency-btn:hover { background: #f1f5f9; border-inline-start-color: #1e293b; } .currency-menu .currency-btn:hover .currency-btn-code, .currency-menu .currency-btn:hover .currency-btn-symbol { color: #1e293b; } .currency-menu .currency-btn.is-current { background: rgba(30, 41, 59, 0.06); border-inline-start-color: #1e293b; } .currency-menu .currency-btn.is-current .currency-btn-code, .currency-menu .currency-btn.is-current .currency-btn-name, .currency-menu .currency-btn.is-current .currency-btn-symbol { color: #1e293b; font-weight: 800; } @media (max-width: 600px) { .currency-switcher { margin-inline-end: 4px; } .currency-trigger { padding: 5px 10px; font-size: 0.78rem; } .currency-trigger-icon { font-size: 0.85rem; } } @media (max-width: 600px) { .topbar-info { display: none; } .topbar-inner { justify-content: flex-end; } } /* ----- 5. Header ----- */ .header { position: sticky; top: 36px; z-index: 50; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; color: var(--color-primary-dark); letter-spacing: -0.02em; /* "Rush Wristband" broke across two lines as soon as the nav row grew. */ white-space: nowrap; flex-shrink: 0; } .logo:hover { color: var(--color-primary); } /* The brand mark. Height is fixed so the header keeps its rhythm; width follows the artwork, which is wider than tall. */ .logo-img { height: 36px; width: auto; flex-shrink: 0; display: block; } .main-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; margin-inline-start: 20px; /* Deliberately NOT a scroll container. It used to be `overflow-x: auto` with the scrollbar hidden, which sounds like graceful degradation and is not: when the links did not fit, the last one was sliced mid-word with nothing to say it could be scrolled to. In German that swallowed About and Contact entirely. The categories now live in one dropdown so the row fits in every language, and `visible` is required anyway — an overflow container clips the absolutely positioned menu. scripts/_measure-nav-overflow.py guards the fit, since English still looks fine long after German has broken. */ overflow: visible; } .main-nav a { padding: 8px 6px; border-radius: var(--radius-sm); color: var(--color-text); font-weight: 500; /* Ten items sit in this row (eight product families plus Home and All products), and German labels are the longest of the six locales, so the type is a notch smaller than the body copy and the families carry shorter navbar.* labels here than in their panels. scripts/_verify-mega-nav.py guards the fit down to 961px — English still looks fine long after German has broken. */ font-size: 0.85rem; white-space: nowrap; flex: 0 0 auto; } .main-nav a:hover { background: var(--color-bg-alt); color: var(--color-primary); } .main-nav a.active { color: var(--color-primary); font-weight: 600; } /* ----- Product menus in the primary nav ----- Six product groups sit in the bar, each opening a panel that lists every style in that group — 74 links in total, the way order-card.com lays its catalogue out. Conventions follow the language switcher so the components feel related: `.is-open` on the wrapper, a white card, and click to toggle rather than hover, because a hover menu leaves a touch user holding something they have no way to dismiss. Every trigger stays a real link to that group's listing page and JS only intercepts the click above the mobile breakpoint, so the catalogue is still reachable before main.js runs or if it fails. Each panel repeats the destination as its section heading, which is otherwise unreachable for a mouse user once the click is intercepted. A panel hangs off its own trigger and is only as wide as its content: the families range from three styles to twenty-one, and a one-column panel stretched across the header read as a bug — a name in the top-left corner of an otherwise empty white sheet. Width is capped so the widest panel wraps instead of leaving the viewport, and main.js nudges a panel left when its trigger sits far enough right that even a capped panel would overhang. */ .nav-dropdown { display: block; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; } .nav-dropdown-caret { font-size: 0.75rem; opacity: 0.9; transition: transform 0.18s ease; } .nav-dropdown-menu { display: flex; flex-direction: column; } .nav-dropdown.is-open .nav-dropdown-caret { transform: rotate(180deg); } .nav-mega-col { display: flex; flex-direction: column; } .nav-mega-head { font-weight: 700; color: var(--color-primary-dark); } @media (min-width: 961px) { /* Two rows, as on order-card.com: brand and account icons up top, the whole product bar underneath. Eight groups plus Home and All products cannot share a row with the logo and the icons — German ran them into each other at 1440px, never mind 1024 — and a wrapped .header-inner gets us there without touching the markup on 117 pages. */ :root { --header-height: 118px; } .header-inner { position: relative; flex-wrap: wrap; align-content: center; height: auto; min-height: var(--header-height); row-gap: 0; padding-top: 12px; } .main-nav { order: 3; flex: 1 0 100%; justify-content: center; /* Every link already carries its own side padding; the extra gap is what pushed German and French past a 961px viewport. */ gap: 0; margin: 10px 0 0; padding-top: 6px; border-top: 1px solid var(--color-border); } .nav-dropdown { flex: 0 0 auto; position: relative; } .nav-mega-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: max-content; /* Wide enough for the five material columns of the luggage tag panel, the widest we have; anything wider wraps rather than leaves the viewport. */ max-width: min(94vw, 1260px); display: none; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px 26px; padding: 20px 24px 22px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08); z-index: 1000; max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; } .nav-dropdown.is-open .nav-mega-menu { display: flex; } .nav-mega-col { flex: 0 1 218px; min-width: 0; gap: 1px; } .nav-mega-menu a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); /* Style names run long ("Vintage Crazy Horse Leather Luggage Tag"), so let them wrap inside the column instead of widening it. */ white-space: normal; line-height: 1.35; } .nav-mega-menu a:hover { background: #fff7ed; color: var(--color-accent); } .nav-mega-head { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); border-radius: 0; font-size: 0.9rem; } .nav-mega-head:hover { background: none; } .nav-mega-menu a:not(.nav-mega-head) { font-size: 0.85rem; color: var(--color-text-muted); } } /* Just above the drawer breakpoint the row is within ~12px of the edge in German and French, which is close enough that a different font stack could push it over. Give those widths a smaller step so the margin is comfortable everywhere; wider screens keep the roomier type. */ @media (min-width: 961px) and (max-width: 1140px) { .main-nav a { font-size: 0.8rem; padding: 8px 5px; } } /* Wider than that there is room to spare, so the bar reads at close to body-copy size instead of the compromise the narrow widths force. Kept as its own step rather than raising the base size, because the base is what the mobile drawer uses and the 961-1140px band above must stay at 0.8rem. Starts at 1200px, NOT at 1141px where the squeeze ends: German is the widest locale and at this size its row is ~1010px, which leaves ~120px inside a 1200px viewport — the same margin the narrow band was tuned to keep, and the reason that band exists at all (a different font stack eats a thin margin). At 1141px the same row would have had ~60px, half of it. Measure with scripts/_probe-nav-headroom.py before widening this further, and note it reports the margin on ONE side: the row is centred, so the slack left before anything collides is twice the figure it prints. */ @media (min-width: 1200px) { .main-nav a { font-size: 0.95rem; padding: 9px 7px; } } .header-actions { display: flex; align-items: center; gap: 8px; } /* The newer product pages ship a static account link and ALSO get the control account.js injects, so their header carried two identical person icons — on a phone that pushed the row 56px past the viewport and left the menu button off screen. Hide the static one once the real control is in; with JS off it stays as the fallback it was meant to be. */ .header-actions:has([data-acct-ctl]) > a.icon-btn[href$="account-dashboard.html"] { display: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text); position: relative; } .icon-btn:hover { background: var(--color-bg-alt); } .icon-btn .badge { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--color-accent); color: #1c1917; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; } .menu-toggle { display: none; width: 40px; height: 40px; border-radius: var(--radius-sm); } .menu-toggle:hover { background: var(--color-bg-alt); } @media (max-width: 960px) { .main-nav { position: fixed; /* --pe-drawer-top is the header's measured bottom edge, set by main.js when the drawer opens. This was `inset: var(--header-height) 0 0 0`, which assumed the header started at the top of the viewport; with a 43px sticky topbar above it the drawer rode 44px too high and covered the second line of the logo. The fallback tracks .header's own sticky offset. */ top: var(--pe-drawer-top, calc(36px + var(--header-height))); inset-inline-end: 0; bottom: 0; inset-inline-start: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 16px; margin: 0; overflow-x: hidden; overflow-y: auto; transform: translateX(-100%); transition: transform 0.25s ease; } .main-nav.open { transform: translateX(0); } .main-nav a { padding: 14px 16px; border-bottom: 1px solid var(--color-border); border-radius: 0; } /* An accordion, not the old flat list: 74 style links in one column would be a drawer the length of six screens. The panels collapse only once main.js has marked the nav as enhanced, so with JS broken the drawer degrades to that flat list rather than to six dead rows. */ .nav-dropdown-trigger { display: flex; justify-content: space-between; align-items: center; } .nav-mega-menu { padding-inline-start: 12px; } .nav-mega-head { color: var(--color-text-muted); font-size: 0.8rem; } .main-nav.is-enhanced .nav-dropdown:not(.is-open) .nav-mega-menu { display: none; } .menu-toggle { display: inline-flex; } } /* On a phone the row holds the brand plus four controls, and the wordmark was wide enough to push the mark off the left edge. */ @media (max-width: 620px) { .logo { font-size: 1.05rem; gap: 8px; } .logo-img { height: 30px; } .header-inner { gap: 10px; } } /* A 390px phone is the common case and the row was ~8px over it, which shows up as a page that scrolls sideways. The controls give up the slack, not the wordmark. */ @media (max-width: 430px) { .header-actions { gap: 2px; } .header-actions .icon-btn { width: 36px; } } /* Smallest phones still in use (iPhone SE, 360px Androids): the controls have nothing left to give, so the wordmark takes the last step down. */ @media (max-width: 380px) { .logo { font-size: 0.95rem; } .logo-img { height: 26px; } } /* ----- 6. Hero ----- */ /* DEPRECATED: legacy homepage .hero — replaced by .category-banner--all. Kept for now so future pages can reuse the styles if needed; the homepage no longer renders these elements. Safe to remove in a later cleanup. */ .hero { position: relative; background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%); padding: 72px 0 96px; overflow: hidden; border-bottom: 1px solid var(--color-border); } .hero::before { content: ''; position: absolute; top: -120px; inset-inline-end: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(234, 88, 12, 0.08) 0%, transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -160px; inset-inline-start: -160px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(30, 58, 138, 0.06) 0%, transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--color-accent-soft); color: var(--color-accent-dark); border: 1px solid rgba(234, 88, 12, 0.18); border-radius: 99px; font-size: 0.82rem; font-weight: 600; margin-bottom: 20px; } .hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 16px; font-weight: 800; } .hero p.lead { font-size: 1.15rem; color: var(--color-text-muted); margin-bottom: 32px; max-width: 520px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 24px; font-size: 0.9rem; color: var(--color-text-muted); } .hero-trust span { display: inline-flex; align-items: center; gap: 6px; } .hero-trust svg { color: var(--color-success); flex-shrink: 0; } .hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 520px; margin-inline-start: auto; } .hero-visual .visual-card { position: absolute; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .hero-visual .vc-1 { top: 0; inset-inline-start: 0; width: 60%; height: 60%; } .hero-visual .vc-2 { bottom: 0; inset-inline-end: 0; width: 55%; height: 55%; } .hero-visual .vc-3 { top: 30%; inset-inline-end: 10%; width: 35%; height: 35%; border-radius: 50%; } .hero-visual img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 800px) { .hero { padding: 48px 0 64px; } .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-visual { max-width: 360px; margin: 0 auto; } } /* ----- 7. Sections ----- */ .section { padding: 72px 0; } .section-alt { background: var(--color-bg-alt); } .section-dark { background: var(--color-bg-dark); color: #e2e8f0; } .section-dark h2, .section-dark h3 { color: #fff; } .section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; } .section-header h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 12px; } .section-header p { color: var(--color-text-muted); font-size: 1.05rem; margin: 0; } @media (max-width: 600px) { .section { padding: 48px 0; } .section-header { margin-bottom: 32px; } } /* ----- 8. Category cards (homepage) ----- */ .category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } /* Four per row on desktop; an incomplete final row (e.g. a 5th card) stays centred instead of hugging the left edge. */ .category-grid > .category-card { flex: 0 1 calc(25% - 18px); } @media (max-width: 1100px) { .category-grid > .category-card { flex-basis: calc(50% - 12px); } } @media (max-width: 600px) { .category-grid > .category-card { flex-basis: 100%; } } .category-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); text-decoration: none; color: inherit; } .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); } .category-card .card-image { aspect-ratio: 4/3; background: var(--color-bg-alt); overflow: hidden; } .category-card .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .category-card:hover .card-image img { transform: scale(1.05); } .category-card .card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .category-card h3 { margin: 0 0 8px; font-size: 1.4rem; } .category-card .card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; color: var(--color-text-muted); } .category-card .price-from { color: var(--color-accent-dark); font-weight: 700; font-size: 1.05rem; } /* ----- 8b. Homepage product groups ----- The three biggest families are shown style by style on the homepage. The cards are .product-card, exactly as on the listing pages, so the two can never drift apart visually; only the group header belongs to the homepage. Unlike the listing pages the whole card stays ONE anchor — those pages swap the for a
in JS and inject their own inner link, and the homepage has no listing mode to do that — so the anchor needs its text styles reset and the "Customise" button is a that only looks like one. */ /* Five cards a row, which needs more width than the 1280px the rest of the site is built on — so this ONE section reaches further into the margins. Scoped to #products, which only exists on the homepage. */ #products > .container { max-width: 1560px; } .home-family { margin-bottom: 56px; } .home-family:last-of-type { margin-bottom: 0; } /* Group heading centred over its row of cards, with "see all" pulled out to the right edge so centring the title does not push it off-centre. */ .home-family__head { position: relative; margin: 0 auto 22px; padding-bottom: 12px; text-align: center; border-bottom: 1px solid var(--color-border); } .home-family__head h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.01em; } .home-family__all { position: absolute; inset-inline-end: 0; bottom: 14px; font-size: 0.9rem; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; } .home-family__all:hover { text-decoration: underline; } a.product-card { text-decoration: none; color: inherit; } /* Five per row, and the cards fill the row rather than sitting at a fixed 280px — but this stays the listing pages' centred flex row (inherited from .product-grid) instead of becoming a real grid, because a family whose count is not a multiple of five ends on a short row, and grid would leave that row hard against the left edge with a hole beside it. Flex centres it. So the count per row is set by the flex-basis, one value per breakpoint: (100% − the gaps) ÷ n. Two extra pixels come off each basis so sub-pixel rounding can never push the last card of a row onto the next one; at these widths that is invisible. */ .home-family .product-grid { gap: 22px; max-width: none; } .home-family .product-grid > .product-card { flex: 0 0 calc((100% - 90px) / 5); max-width: none; } @media (max-width: 1400px) { .home-family .product-grid > .product-card { flex-basis: calc((100% - 68px) / 4); } } @media (max-width: 1120px) { .home-family .product-grid > .product-card { flex-basis: calc((100% - 46px) / 3); } } @media (max-width: 820px) { .home-family .product-grid > .product-card { flex-basis: calc((100% - 24px) / 2); } /* No room beside a centred title at this width: the link goes under it. */ .home-family__all { position: static; display: inline-block; margin-top: 8px; } } @media (max-width: 520px) { .home-family .product-grid > .product-card { flex-basis: 100%; } } /* ----- 8c. Homepage "other products" tiles ----- Everything not promoted above keeps a single tile: name and call to action on the left, category photo on the right. */ .home-other { margin-top: 64px; } .home-other > h3 { margin: 0 0 20px; text-align: center; /* Same size as the family headings above — it is the same rank of heading. */ font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.01em; } /* Three across, leftover tiles on the last row sit in the middle — same centering as .product-grid above. 1fr columns would pin a short last row to the left, which is why this is flex rather than grid. */ .other-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 0 auto; } .other-grid > .other-card { flex: 0 1 calc((100% - 56px) / 3); min-width: 0; max-width: calc((100% - 56px) / 3); } @media (max-width: 900px) { .other-grid > .other-card { flex-basis: calc((100% - 28px) / 2); max-width: calc((100% - 28px) / 2); } } @media (max-width: 560px) { .other-grid > .other-card { flex-basis: 100%; max-width: 100%; } } .other-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; /* Floor, not a fixed height: a long name wraps and the tile grows. */ min-height: 136px; padding-inline-start: 26px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: var(--transition); } .other-card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); transform: translateY(-2px); } .other-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 0; } .other-card__name { font-weight: 600; font-size: 1.12rem; } .other-card__cta { font-size: 0.9rem; color: var(--color-text-muted); text-decoration: underline; } /* The photo runs the full height of the tile, whatever the name does to it. */ .other-card__img { flex: none; align-self: stretch; width: 176px; } .other-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 400px) { .other-card { padding-inline-start: 18px; } .other-card__img { width: 128px; } } /* ----- 9. Product grid (sub-category list on product pages) ----- */ .product-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-inline-start: auto; margin-inline-end: auto; max-width: 1280px; } .product-grid > .product-card { flex: 0 0 280px; max-width: 320px; } .product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); } .product-card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); transform: translateY(-2px); } .product-card .card-image { aspect-ratio: 1/1; background: var(--color-bg-alt); overflow: hidden; position: relative; } .product-card .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .product-card:hover .card-image img { transform: scale(1.04); } .product-card .badge-sale { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--color-danger); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.05em; } .product-card .card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .product-card h3 { margin: 0; font-size: 1rem; font-weight: 600; min-height: 2.4em; line-height: 1.2; } .product-card .meta { font-size: 0.8rem; color: var(--color-text-muted); } .product-card .rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); } .product-card .rating .stars { color: var(--color-accent); letter-spacing: 1px; } .product-card .price { display: flex; align-items: baseline; gap: 6px; margin-top: auto; } .product-card .price-current { font-size: 1.15rem; font-weight: 700; color: var(--color-text); } .product-card .price-prefix, .product-card .price-suffix { font-size: 0.8rem; color: var(--color-text-muted); } /* ----- 10. Page header (sub-category pages) ----- */ .page-header { background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%); padding: 56px 0 40px; border-bottom: 1px solid var(--color-border); } /* ============================================================ .category-banner — premium hero strip used at the very top of every product-listing page (PVC Cards / Lanyards / Wristbands) and on the homepage. The right two-thirds is a pre-composed collage of REAL Step-1 product photos (built by scripts/build-category-banners.py) — left ~40% is kept clean by a cream-to-transparent gradient so the heading stays crisp at every viewport width. One image per surface, swapped via the modifier class: .category-banner--wristbands -> hero/category-banner-wristbands.jpg .category-banner--lanyards -> hero/category-banner-lanyards.jpg .category-banner--idcards -> hero/category-banner-idcards.jpg .category-banner--handsanitizers -> hero/category-banner-handsanitizers.jpg .category-banner--finder-tags -> hero/category-banner-finder-tags.jpg .category-banner--all -> hero/category-banner-all.jpg ============================================================ */ .category-banner { position: relative; background-color: #faf4e8; border-bottom: 1px solid var(--color-border); overflow: hidden; } .category-banner .container { position: relative; z-index: 2; } .category-banner__inner { padding: 60px 0 72px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 380px; } .category-banner .breadcrumb { margin-bottom: 18px; } .category-banner__text { max-width: 540px; } .category-banner__eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent, #00b3a4); margin-bottom: 14px; } .category-banner__h1 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; color: #1f2937; margin: 0 0 14px; /* Allow long CJK / hyphen-free strings (Chinese / German compound words) to break inside the text column so they never push past the cream area. */ overflow-wrap: anywhere; word-break: break-word; } .category-banner__tagline { display: inline-block; background: #1f2937; color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 16px; border-radius: 6px; margin-bottom: 16px; } .category-banner__lead { font-size: 1.02rem; line-height: 1.55; color: #4b5563; margin: 6px 0 10px; } .category-banner__sub { font-size: 0.95rem; font-weight: 600; color: var(--color-accent, #00b3a4); } /* ---------- Copy over a busy or dark photo ---------- Set on the banner when the visible photo has no clear area to hold text — the lapel-pin wall being the case that forced this. Since nothing may be laid over the photo, the type has to carry its own contrast, so it flips to white and gets a dark edge drawn around it. The edge is what makes this work rather than the colour. That photo is not uniformly dark: it runs from near-black backing (luma 3) up to pale enamel and chrome (155), so white alone drops to about 2.8:1 wherever a light pin sits behind a stroke — under the 4.5:1 floor. The ring of shadow means each letter supplies its own dark background for the width of its own outline, so the contrast the eye actually resolves is white against that ring, not white against whichever pin happens to be there. Four hard 1px offsets draw the outline; the blurred pair behind them lift the whole block off the busiest patches. text-stroke would be tidier but thickens the strokes from the inside, which closes up dense CJK glyphs at this size — 消毒瓶 turns to mush — so the outline is drawn outside the letterform instead. */ .category-banner.is-photo-busy .category-banner__h1, .category-banner.is-photo-busy .category-banner__lead { color: #fff; text-shadow: 1px 1px 0 rgba(17, 20, 24, 0.92), -1px 1px 0 rgba(17, 20, 24, 0.92), 1px -1px 0 rgba(17, 20, 24, 0.92), -1px -1px 0 rgba(17, 20, 24, 0.92), 0 2px 6px rgba(17, 20, 24, 0.85), 0 4px 18px rgba(17, 20, 24, 0.7); } /* The lead is smaller and lighter than the h1, so it is the first thing to fail; give it the same white rather than the muted grey it uses on cream. */ .category-banner.is-photo-busy .category-banner__lead { color: #f8fafc; } /* The supporting lines need it too. They are easy to forget because the homepage hero has none of them — it uses a pill-shaped eyebrow that carries its own white background — but the lapel-pin LISTING page puts all three over the same photo, where muted grey and mid-teal disappear entirely. The accent-coloured pair keep their hue, lightened to hold up against a photo rather than cream; going white would flatten the hierarchy that tells these apart from the lead. */ .category-banner.is-photo-busy .breadcrumb, .category-banner.is-photo-busy .breadcrumb a, .category-banner.is-photo-busy .breadcrumb .sep { color: #e5e7eb; text-shadow: 1px 1px 0 rgba(17, 20, 24, 0.92), -1px 1px 0 rgba(17, 20, 24, 0.92), 1px -1px 0 rgba(17, 20, 24, 0.92), -1px -1px 0 rgba(17, 20, 24, 0.92), 0 2px 6px rgba(17, 20, 24, 0.85); } .category-banner.is-photo-busy .breadcrumb a:hover { color: #fff; } .category-banner.is-photo-busy .category-banner__eyebrow, .category-banner.is-photo-busy .category-banner__sub { color: #5eead4; text-shadow: 1px 1px 0 rgba(17, 20, 24, 0.92), -1px 1px 0 rgba(17, 20, 24, 0.92), 1px -1px 0 rgba(17, 20, 24, 0.92), -1px -1px 0 rgba(17, 20, 24, 0.92), 0 2px 6px rgba(17, 20, 24, 0.85); } /* Cross-fade the colour with the photo, so the type does not snap to white a beat before the dark slide has finished arriving. Matches the slide's own opacity transition. */ .category-banner .category-banner__h1, .category-banner .category-banner__lead { transition: color 700ms ease-in-out, text-shadow 700ms ease-in-out; } @media (prefers-reduced-motion: reduce) { .category-banner .category-banner__h1, .category-banner .category-banner__lead { transition: none; } } /* Homepage variant — taller, with extra breathing room for CTAs + trust badges. Used together with .category-banner--carousel. */ .category-banner--lg .category-banner__inner { padding: 84px 0 96px; min-height: 480px; } .category-banner--lg .category-banner__text { max-width: 560px; } .category-banner--lg .category-banner__h1 { /* Capped lower than before — at full-HD viewports the headline used to clamp to ~57px which overflowed the cream column with long CJK copy like “为欧洲市场打造的定制工牌卡、挂绳、手环与消毒瓶”. */ font-size: clamp(2rem, 3.8vw, 2.9rem); } .category-banner--lg .category-banner__lead { font-size: 1.05rem; margin: 8px 0 22px; max-width: 520px; } .category-banner--lg .hero-cta { margin: 12px 0 26px; } .category-banner--lg .hero-trust { margin-top: 4px; } /* --- per-category background images (desktop: products on right) --- The banner JPGs are editorial product photography (1600x540) with the products composed on the right two-thirds against a soft cream paper background, with the left third left intentionally empty as negative space for the headline. The CSS overlay gradient just adds a SHORT cream wash over the leftmost 36% to guarantee heading contrast on any viewport. */ .category-banner--wristbands { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-wristbands.jpg?v=hero-9'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--lanyards { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-lanyards.jpg?v=hero-9'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--idcards { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-idcards.jpg?v=hero-9'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--handsanitizers { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-handsanitizers.jpg?v=hs-hero-3'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--baghangers { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-baghangers.jpg?v=bh-hero-2'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--scarves { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-scarves.jpg?v=sc-hero-2'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--buttons { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-buttons.jpg?v=bt-hero-1'); background-position: center right; background-size: cover; background-repeat: no-repeat; } /* No cream wash, unlike its neighbours here. Their photos leave the left side empty for the copy, so a wash over that side hides nothing; this one is a full-bleed wall of pins, so the same wash painted out the left half of the photograph. The copy carries its own contrast instead — the page sets .is-photo-busy on the section. */ .category-banner--lapelpins { background-image: url('../images/hero/category-banner-lapelpins.jpg?v=lp-hero-5'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--luggage-tags { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-luggage-tags.jpg?v=lt-hero-1'); background-position: center right; background-size: cover; background-repeat: no-repeat; } .category-banner--milk-frothers, .category-banner--finder-tags { /* Full-bleed like lapel pins: the photo covers the whole banner, including the copy side. These shots are light, so the default dark type stays. */ background-position: center; background-size: cover; background-repeat: no-repeat; } .category-banner--milk-frothers { background-image: url('../images/hero/category-banner-milk-frothers.jpg?v=mf-hero-8'); } .category-banner--finder-tags { background-image: url('../images/hero/category-banner-finder-tags.jpg?v=fnd-banner-11'); } .category-banner--finder-tags .pd-price-block { margin: 10px 0 16px; } /* Homepage all-categories hero. Two stacked background layers: 1. a cream→transparent gradient (cover, full-bleed) that keeps the left-hand headline readable 2. the composite product photo (cover, anchored RIGHT) so it fills the banner at full size — NOT shrunk. The photo was widened to 4:1 (cream added on the LEFT, see scripts/_widen-all-banner.ps1). Because it's now wider than the banner at every common viewport, `cover` crops the expendable LEFT cream instead of the products — so the cards / lanyards / wristbands / bottles / wheat props on the right always stay fully visible and large. The added cream carries the photo's own paper texture, so the seam is invisible (and falls under the headline gradient anyway). */ .category-banner--all { background-image: linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%, rgba(250, 245, 233, 0.55) 18%, rgba(250, 245, 233, 0) 36%), url('../images/hero/category-banner-all.jpg?v=hero-25'); background-position: center, right center; background-size: cover, cover; background-repeat: no-repeat, no-repeat; } /* ---------- Homepage hero carousel ---------- Same banner, but the photo rotates through the three families the homepage sells style by style. The photo cannot stay on the section's own background-image (there is only one per element to cross-fade), so each slide is a stacked layer and the cream scrim that keeps the headline readable moves onto ::after, above the slides and below .container (z-index 2). The first slide carries .is-active in the markup, so with JS off the hero is simply the static banner it was before. */ .category-banner--carousel { background-color: #faf4e8; } .hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-position: right center; background-size: cover; background-repeat: no-repeat; opacity: 0; /* The change has to be felt, not just noticed after the fact: a long dissolve, plus the incoming photo settling from a hair over full size, so there is something moving for the whole of it. The zoom is small on purpose — it ends at exactly scale(1), so the photo spends its dwell time unscaled and pin-sharp, and only the couple of seconds of the handover are soft. */ transform: scale(1.035); transition: opacity 1300ms ease-in-out, transform 1600ms ease-out; } .hero-slide.is-active { opacity: 1; transform: scale(1); } /* No scrim over the photo. There used to be one: a near-opaque cream wash across the whole copy column so the dark text stayed readable whatever was behind it. Three of the four slides are shot for this layout — their left ~45% is empty backdrop and the products sit on the right — so on those the wash covered nothing but blank cream and cost nothing visible. On the lapel-pin shot, which is a full-bleed wall of pins with no clear side, it painted over half the photograph, and that was the half the visitor saw first. Readability now comes from the type itself (below), which costs nothing on the pale slides and leaves every photo whole. */ /* Arrows and dots are injected by hero-carousel.js, so they only exist when something can actually drive them. */ .hero-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(31, 41, 55, 0.10); border-radius: 50%; background: rgba(255, 255, 255, 0.82); color: #1f2937; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); } .hero-arrow--prev { inset-inline-start: 18px; } .hero-arrow--next { inset-inline-end: 18px; } .hero-arrow:hover { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-md); } .hero-arrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .hero-dots { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; } .hero-dot { width: 30px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(31, 41, 55, 0.22); cursor: pointer; transition: background 200ms ease, transform 200ms ease; } .hero-dot:hover { background: rgba(31, 41, 55, 0.45); } .hero-dot.is-active { background: var(--color-primary); transform: scaleY(1.5); } .hero-dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* On a narrow screen the headline already covers most of the banner, so the controls shrink and tuck in rather than crowd the copy. */ @media (max-width: 700px) { .hero-dots { bottom: 10px; } .hero-dot { width: 22px; } .hero-arrow { width: 34px; height: 34px; } .hero-arrow svg { width: 16px; height: 16px; } .hero-arrow--prev { inset-inline-start: 8px; } .hero-arrow--next { inset-inline-end: 8px; } } /* Reduced motion drops the MOVEMENT — the zoom — and keeps the dissolve. A cross-fade is a change in opacity with nothing travelling across the screen, which is what this preference is asking to be spared; cutting the fade as well just turned the hero into a hard flick between photos, which is both uglier and harder to notice. */ @media (prefers-reduced-motion: reduce) { .hero-slide, .hero-slide.is-active { transform: none; transition: opacity 1300ms ease-in-out; } } /* ---------- Split layout (text column + explicit column) ---------- Used on the HOMEPAGE hero so the product photo on the right is rendered as a real instead of a background image. Background-image cover was cropping the rightmost product (the orange polka-dot lanyard) on narrow / mid-size viewports because the section was wider than the visible viewport area. With an explicit + object-fit: contain, the photo always shows in full, with the cream texture matching the section background so it blends seamlessly. Apply with:
…
*/ .category-banner--split { background-image: none !important; /* drop the background image — the takes over */ background-color: #faf4e8; /* cream wash matches the photo paper background */ } .category-banner--split .category-banner__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; column-gap: 32px; } .category-banner--split .category-banner__media { position: relative; width: 100%; /* Hard ceiling so the image never reports a height taller than the section minimum — keeps the products from pushing the hero too tall on ultrawide monitors. */ max-height: 520px; } .category-banner--split .category-banner__media img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: contain; object-position: right center; } /* --- narrow laptop / tablet / mobile: products fade to the bottom; text sits on top with full width. Breakpoint bumped from 900px → 1080px so common 13" laptops (≈1024px viewport) and split-screen / DevTools-open layouts always get the stacked variant — the side-by-side desktop layout left the headline too close to the products on narrower windows, causing long CJK copy to look clipped. */ @media (max-width: 1080px) { .category-banner__inner { padding: 36px 0 280px; min-height: auto; } .category-banner__text { max-width: 100%; } /* Below this width the photo stops being a backdrop: it shrinks to `contain` and sits along the bottom, leaving the copy on plain cream. White outlined type belongs on a photo and would be unreadable there, so the dark-photo treatment is confined to the wide layout that actually puts text over the image. */ .category-banner.is-photo-busy .category-banner__h1 { color: #1f2937; text-shadow: none; } .category-banner.is-photo-busy .category-banner__lead { color: #4b5563; text-shadow: none; } .category-banner.is-photo-busy .breadcrumb, .category-banner.is-photo-busy .breadcrumb a, .category-banner.is-photo-busy .breadcrumb .sep { color: var(--color-text-muted); text-shadow: none; } .category-banner.is-photo-busy .category-banner__eyebrow, .category-banner.is-photo-busy .category-banner__sub { color: var(--color-accent, #00b3a4); text-shadow: none; } .category-banner--wristbands { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-wristbands.jpg?v=hero-9'); background-position: center bottom; background-size: contain; } .category-banner--lanyards { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-lanyards.jpg?v=hero-9'); background-position: center bottom; background-size: contain; } .category-banner--idcards { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-idcards.jpg?v=hero-9'); background-position: center bottom; background-size: contain; } .category-banner--handsanitizers { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-handsanitizers.jpg?v=hs-hero-3'); background-position: center bottom; background-size: contain; } .category-banner--baghangers { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-baghangers.jpg?v=bh-hero-2'); background-position: center bottom; background-size: contain; } .category-banner--scarves { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-scarves.jpg?v=sc-hero-2'); background-position: center bottom; background-size: contain; } .category-banner--buttons { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-buttons.jpg?v=bt-hero-1'); background-position: center bottom; background-size: contain; } .category-banner--lapelpins { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-lapelpins.jpg?v=lp-hero-5'); background-position: center bottom; background-size: contain; } .category-banner--luggage-tags { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-luggage-tags.jpg?v=lt-hero-1'); background-position: center bottom; background-size: contain; } .category-banner--milk-frothers { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-milk-frothers.jpg?v=mf-hero-8'); background-position: center bottom; background-size: contain; } .category-banner--finder-tags { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-finder-tags.jpg?v=fnd-banner-11'); background-position: center bottom; background-size: contain; } .category-banner--all { background-image: linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%, rgba(250, 245, 233, 0.40) 50%, rgba(250, 245, 233, 0) 80%), url('../images/hero/category-banner-all.jpg?v=hero-25'); background-position: center bottom; background-size: contain; } /* Carousel: same treatment as the static banners above — the photo drops below the copy, contained so nothing is cropped, and the scrim turns vertical so it washes the top of the banner instead of the left. The homepage hero needs the room reserved explicitly: its own .category-banner--lg padding outranks the one-class rule at the top of this block, so without this the photo band sits behind the CTA. */ .category-banner--lg .category-banner__inner { padding: 36px 0 280px; min-height: auto; } .hero-slide, .hero-slide.is-active { background-position: center bottom; background-size: contain; /* No zoom down here: the photo is CONTAINED, so scaling it up crops the edges off instead of filling more of the banner. The dissolve carries the change on its own. */ transform: none; } .hero-slides::after { /* Same fix as the desktop scrim, on the other axis: the copy occupies roughly the top half here (36px of padding, then the headline, with the photo band reserved by the 280px bottom padding), but the scrim used to be down to 0.40 by the 50% mark — right where the headline still is. Holding it near-opaque until 50% costs nothing, because a `contain` photo anchored to the bottom has little in the top half anyway. */ background: linear-gradient(180deg, rgba(250, 245, 233, 0.96) 0%, rgba(250, 245, 233, 0.94) 50%, rgba(250, 245, 233, 0.62) 68%, rgba(250, 245, 233, 0) 88%); } /* Split layout collapses to a single column: text on top, photo below. The takes the full width with a comfortable max-height so the hero doesn't grow taller than necessary on tablets. */ .category-banner--split .category-banner__inner { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 36px 0 32px; } .category-banner--split .category-banner__media, .category-banner--split .category-banner__media img { max-height: 320px; } .category-banner--split .category-banner__media img { object-position: center center; } } @media (max-width: 520px) { .category-banner__inner { padding: 28px 0 220px; } .category-banner__h1 { font-size: 1.85rem; } } /* ============ ID Cards hero (richer hero with sample cards graphic) ============ */ .id-hero { background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%); padding: 40px 0 28px; border-bottom: 1px solid var(--color-border); } .id-hero .breadcrumb { margin-bottom: 18px; } .id-hero-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.05fr); gap: 32px; align-items: center; } .id-hero-eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 2.5px; color: var(--color-text-muted); margin-bottom: 8px; text-transform: uppercase; } .id-hero-h1 { margin: 0 0 14px; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; color: #0f0f0e; } .id-hero-tagline { display: inline-block; background: #111; color: #fff; padding: 9px 16px; font-size: 0.85rem; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 18px; border-radius: 4px; line-height: 1.3; text-transform: uppercase; } .id-hero .lead { color: var(--color-text-muted); font-size: 1rem; max-width: 560px; margin: 0; line-height: 1.55; } .id-hero .lead-sub { margin: 12px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--color-primary); letter-spacing: 0.02em; } .id-hero-cards { width: 100%; max-width: 620px; justify-self: end; } .id-hero-cards svg { width: 100%; height: auto; display: block; } @media (max-width: 860px) { .id-hero-grid { grid-template-columns: 1fr; gap: 22px; } .id-hero-cards { max-width: 540px; justify-self: center; } .id-hero-tagline { font-size: 0.78rem; letter-spacing: 1px; padding: 8px 13px; } } @media (max-width: 520px) { .id-hero { padding: 28px 0 20px; } .id-hero-h1 { font-size: 1.85rem; } } /* ============ Lanyard hero (same vibe as .id-hero, but with real product photos fanned across the right column instead of SVG cards). The five photo tiles overlap and rotate progressively to create the same magazine-cover spread the PVC page uses. ============ */ .lan-hero { background: linear-gradient(135deg, #f7f6f1 0%, #efece5 100%); padding: 40px 0 36px; border-bottom: 1px solid var(--color-border); overflow: hidden; } .lan-hero .breadcrumb { margin-bottom: 18px; } .lan-hero-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.05fr); gap: 32px; align-items: center; } .lan-hero-eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 2.5px; color: var(--color-text-muted); margin-bottom: 8px; text-transform: uppercase; } .lan-hero-h1 { margin: 0 0 14px; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; color: #0f0f0e; } .lan-hero-tagline { display: inline-block; background: #111; color: #fff; padding: 9px 16px; font-size: 0.85rem; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 18px; border-radius: 4px; line-height: 1.3; text-transform: uppercase; } .lan-hero .lead { color: var(--color-text-muted); font-size: 1rem; max-width: 560px; margin: 0; line-height: 1.55; } .lan-hero .lead-sub { margin: 12px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--color-primary); letter-spacing: 0.02em; } /* The fanned-photo strip. Layout: relative-positioned container, each card absolutely placed with a left%, rotation and z-index. The container height is set proportionally so we don't need width-tied media queries. */ .lan-hero-strip { position: relative; width: 100%; max-width: 620px; justify-self: end; aspect-ratio: 720 / 440; /* matches the PVC hero canvas */ } .lan-hero-card { position: absolute; top: 8%; width: 24%; aspect-ratio: 156 / 246; /* same portrait shape as PVC cards */ border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 14px 28px rgba(33, 25, 60, 0.20), 0 4px 8px rgba(33, 25, 60, 0.10); transform-origin: 50% 80%; transition: transform 0.35s ease, box-shadow 0.35s ease; } .lan-hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .lan-hero-card--1 { inset-inline-start: 1%; z-index: 1; transform: rotate(-22deg); } .lan-hero-card--2 { inset-inline-start: 19%; z-index: 2; transform: rotate(-11deg); } .lan-hero-card--3 { inset-inline-start: 38%; z-index: 5; transform: rotate( 0deg) translateY(-6%); } .lan-hero-card--4 { inset-inline-start: 57%; z-index: 4; transform: rotate( 11deg); } .lan-hero-card--5 { inset-inline-start: 75%; z-index: 3; transform: rotate( 22deg); } .lan-hero-card:hover { z-index: 9; transform: scale(1.06) rotate(0deg) translateY(-10px); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 22px 38px rgba(33, 25, 60, 0.32), 0 6px 12px rgba(33, 25, 60, 0.14); } @media (max-width: 980px) { .lan-hero-grid { grid-template-columns: 1fr; gap: 24px; } .lan-hero-strip { max-width: 580px; justify-self: center; } .lan-hero-tagline { font-size: 0.78rem; letter-spacing: 1px; padding: 8px 13px; } } @media (max-width: 560px) { .lan-hero { padding: 28px 0 24px; } .lan-hero-h1 { font-size: 1.85rem; } /* Tighter fan + slightly larger cards so the 3 visible ones still read on a phone (#1 and #5 partly clip off-canvas — that's the intended magazine-edge feel). */ .lan-hero-card { width: 30%; } .lan-hero-card--1 { inset-inline-start: -4%; transform: rotate(-22deg); } .lan-hero-card--2 { inset-inline-start: 13%; transform: rotate(-11deg); } .lan-hero-card--3 { inset-inline-start: 35%; transform: rotate( 0deg) translateY(-6%); } .lan-hero-card--4 { inset-inline-start: 57%; transform: rotate( 11deg); } .lan-hero-card--5 { inset-inline-start: 76%; transform: rotate( 22deg); } } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 16px; } .breadcrumb a { color: var(--color-text-muted); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb .sep { color: var(--color-text-light); } .page-header h1 { margin: 0 0 12px; font-size: clamp(1.75rem, 3vw, 2.5rem); } .page-header .lead { color: var(--color-text-muted); font-size: 1.05rem; max-width: 720px; margin: 0; } .page-header .lead-sub { margin: 14px 0 0; font-size: 1rem; font-weight: 600; color: var(--color-primary); letter-spacing: 0.01em; } .product-section { padding: 48px 0; } .product-section h2 { font-size: 1.5rem; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--color-border); } /* ----- 11. Steps (Customize in X Easy Steps) ----- */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; counter-reset: step; } .step-card { text-align: center; padding: 24px 16px; position: relative; } .step-card .step-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); display: grid; place-items: center; margin: 0 auto 16px; color: #fff; font-weight: 800; font-size: 1.25rem; } .step-card h4 { font-size: 1rem; margin-bottom: 6px; } .step-card p { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; } /* ----- 12. Brand strip ----- */ .brand-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 32px; align-items: center; opacity: 0.7; } .brand-strip > div { display: grid; place-items: center; /* Sector names, not short brand marks: German "Gastgewerbe" and French "Associations" are twice the width of the logotypes this strip was built for, so the row has to grow rather than clip them. */ min-height: 60px; text-align: center; font-weight: 700; font-size: 1.15rem; color: var(--color-text-muted); letter-spacing: 0.02em; } /* ----- 13. Testimonials ----- */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .testimonial-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; position: relative; } .testimonial-card .stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: 12px; /* Inter's Latin subset has no U+2605; without a symbol fallback the glyph becomes tofu / replacement chars on some Windows fonts. */ font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif; } .testimonial-card blockquote { margin: 0 0 16px; font-size: 0.95rem; color: var(--color-text); line-height: 1.6; font-style: italic; } .testimonial-card .author { display: flex; align-items: center; gap: 12px; } .testimonial-card .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.9rem; } .testimonial-card .author-name { font-weight: 600; font-size: 0.875rem; } .testimonial-card .author-meta { font-size: 0.75rem; color: var(--color-text-muted); } /* ----- 14. Features (Why us) ----- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .feature-card { text-align: center; padding: 24px; } .feature-card .feature-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(59, 130, 246, 0.1); color: var(--color-primary); display: grid; place-items: center; margin: 0 auto 16px; } .feature-card h4 { font-size: 1.05rem; margin-bottom: 8px; } .feature-card p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; } /* ----- 15. CTA banner ----- */ .cta-banner { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; padding: 56px 0; text-align: center; border-radius: var(--radius-lg); margin: 48px 0; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; top: -50%; inset-inline-end: -10%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(234, 88, 12, 0.18) 0%, transparent 60%); pointer-events: none; } .cta-banner h2 { color: #fff; margin-bottom: 12px; position: relative; } .cta-banner p { color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto 24px; position: relative; } /* ----- 16. Footer ----- */ .footer { background: var(--color-bg-dark); color: #cbd5e1; padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer h4 { color: #fff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: 10px; } .footer a { color: #94a3b8; font-size: 0.9rem; } .footer a:hover { color: #fff; } .footer-brand .logo { color: #fff; margin-bottom: 16px; } .footer-brand p { font-size: 0.875rem; color: #94a3b8; margin-bottom: 16px; line-height: 1.6; } .footer-contact { font-size: 0.875rem; line-height: 1.8; color: #94a3b8; } /* WhatsApp row inside the footer-contact block — order-card.com ships the same kind of green call-to-action right under the support phone. Matches the topbar wa icon colour for visual continuity. */ .footer-wa { margin-top: 10px; } .footer-wa a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(34, 197, 94, 0.12); color: #4ade80; font-size: 0.825rem; font-weight: 600; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .footer-wa a:hover { background: rgba(34, 197, 94, 0.22); color: #86efac; } .footer-wa a svg { flex-shrink: 0; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 24px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.85rem; color: #64748b; } .payment-methods { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .payment-methods .pm { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #cbd5e1; font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.04em; } /* ----- 17. Cookie banner (GDPR) ----- */ .cookie-banner { position: fixed; bottom: 16px; inset-inline-start: 16px; inset-inline-end: 16px; max-width: 540px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 20px; z-index: 100; display: none; } .cookie-banner.visible { display: block; } .cookie-banner h4 { margin: 0 0 8px; font-size: 1rem; } .cookie-banner p { font-size: 0.875rem; color: var(--color-text-muted); margin: 0 0 16px; line-height: 1.5; } .cookie-banner p a { color: var(--color-primary); text-decoration: underline; } .cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; } .cookie-actions .btn { padding: 8px 16px; font-size: 0.875rem; } /* ----- 17b. "Read this page in your language?" offer ----- Injected by main.js maybeOfferBrowserLang() only when the page is showing a language the visitor's browser didn't ask for. Sits under the sticky topbar + header and points at the switcher, so declining it still teaches where the control is. Fixed rather than in-flow: it appears after first paint and must not shove the page down. z-index below .cookie-banner (100) — consent is the more urgent of the two if they ever collide, and they cannot overlap visually since this one is anchored to the top. */ .lang-hint { position: fixed; top: calc(36px + var(--header-height) + 12px); inset-inline-end: 16px; z-index: 90; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 0.875rem; animation: langHintIn 0.28s var(--ease-out) both; } @keyframes langHintIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .lang-hint { animation: none; } } .lang-hint-text { color: var(--color-text); font-weight: 500; } .lang-hint-go { flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font-size: 0.8125rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--transition-fast); } .lang-hint-go:hover { background: var(--color-primary-dark); } .lang-hint-close { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .lang-hint-close:hover { background: var(--color-surface-alt); color: var(--color-text); } /* Narrow screens: full width under the header. Kept at the top rather than moved to the bottom so it never stacks with the cookie banner. */ @media (max-width: 700px) { .lang-hint { inset-inline-start: 12px; inset-inline-end: 12px; max-width: none; flex-wrap: wrap; padding: 12px; } .lang-hint-text { flex: 1 1 100%; } .lang-hint-go { flex: 1 1 auto; padding: 9px 14px; } .lang-hint-close { position: absolute; top: 6px; inset-inline-end: 6px; } } /* ----- 18. Generic content pages (about, faq, etc.) ----- */ .content-page { padding: 56px 0 80px; max-width: 800px; margin: 0 auto; } .content-page h1 { margin-bottom: 8px; } .content-page .updated { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 32px; } .content-page h2 { font-size: 1.5rem; margin-top: 40px; margin-bottom: 16px; } .content-page h3 { font-size: 1.15rem; margin-top: 24px; margin-bottom: 8px; } .content-page p, .content-page li { color: var(--color-text); line-height: 1.7; } /* FAQ accordion */ .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; } .faq-question { width: 100%; text-align: start; padding: 18px 20px; font-weight: 600; font-size: 1rem; color: var(--color-text); display: flex; align-items: center; justify-content: space-between; background: #fff; transition: var(--transition); } .faq-question:hover { background: var(--color-bg-alt); } .faq-question .icon { flex-shrink: 0; transition: transform 0.2s ease; } .faq-item.open .faq-question .icon { transform: rotate(180deg); } .faq-answer { display: none; padding: 0 20px 18px; color: var(--color-text-muted); line-height: 1.7; } .faq-item.open .faq-answer { display: block; } /* Contact form */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .form-field input, .form-field select, .form-field textarea { padding: 10px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; color: var(--color-text); background: #fff; transition: var(--transition); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1); } .form-field textarea { resize: vertical; min-height: 120px; } /* Status banner shown under the contact-page submit button after the buyer's mail client has been opened. Only two states needed since mailto: dispatch is instant: success (mailto fired ok) and error (validation failure). order-card.com's contact form uses an equally lightweight inline notice. */ .contact-form-status { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.45; border: 1px solid transparent; } .contact-form-status--success { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; } .contact-form-status--error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; } /* ----- 19. Utilities ----- */ .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* =========================================================================== 20. Product card "Customize" CTA =========================================================================== */ .product-card .card-cta { margin-top: 8px; } .btn-customize { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.875rem; border: none; cursor: pointer; transition: var(--transition); font-family: inherit; } .btn-customize:hover { background: var(--color-accent); color: #fff; transform: translateY(-1px); } .btn-customize svg { width: 14px; height: 14px; } /* =========================================================================== 21. Configurator modal (Step 1 → Step N wizard) =========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 200; opacity: 0; transition: opacity 0.2s ease; } .modal-backdrop.open { display: flex; opacity: 1; } .modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 980px; max-height: 92vh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.25); transform: translateY(8px); transition: transform 0.2s ease; } .modal-backdrop.open .modal { transform: translateY(0); } /* Modal header */ .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--color-border); } .modal-title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--color-text); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .modal-title .modal-product { color: var(--color-accent-dark); font-weight: 700; } .modal-close { width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--color-text-muted); display: grid; place-items: center; cursor: pointer; border: none; transition: var(--transition); } .modal-close:hover { background: var(--color-bg-alt); color: var(--color-text); } /* Step navigation */ .config-stepnav { display: flex; align-items: center; gap: 0; padding: 18px 24px 8px; overflow-x: auto; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); } .config-stepnav::-webkit-scrollbar { height: 4px; } .config-stepnav::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; } .config-stepnav .step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; } .config-stepnav .step + .step { padding-inline-start: 28px; } .config-stepnav .step + .step::before { content: ''; position: absolute; inset-inline-start: 12px; top: 50%; width: 12px; height: 1px; background: var(--color-border-strong); } .config-stepnav .step-circle { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--color-border-strong); color: var(--color-text-muted); font-weight: 700; font-size: 0.78rem; flex-shrink: 0; } .config-stepnav .step-label { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; } .config-stepnav .step.is-active .step-circle { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } .config-stepnav .step.is-active .step-label { color: var(--color-text); } .config-stepnav .step.is-done .step-circle { background: var(--color-success); border-color: var(--color-success); color: #fff; } .config-stepnav .step.is-done .step-circle::after { content: '\2713'; font-weight: 700; } .config-stepnav .step.is-done .step-circle .step-num { display: none; } /* Modal body / step panels */ .modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; overflow: hidden; min-height: 380px; } @media (max-width: 800px) { .modal-body { grid-template-columns: 1fr; } } .config-main { padding: 28px 32px 16px; overflow-y: auto; min-width: 0; } /* Disable the browser's scroll-anchoring inside the configurator. When a style tile is clicked, applyVariantSteps() hides every step block and then re-inserts them in order; the browser would otherwise re-anchor the viewport onto a moved block and fling the page to a different step (most noticeable when the clicked tile was only half visible). With anchoring off, our manual scroll-restore (requestAnimationFrame + scrollTo) keeps the page steady. */ #configurator, #configurator * { overflow-anchor: none; } /* Minimum-order-quantity notice under the cloth wristband Quantity input. */ .qty-moq-warn { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: #dc2626; font-size: 0.82rem; font-weight: 600; } .qty-moq-warn[hidden] { display: none; } .qty-moq-warn svg { flex: 0 0 auto; } .wb-input.qty-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); } .config-step-panel { display: none; } .config-step-panel.is-active { display: block; } .config-step-panel h3 { font-size: 1.25rem; margin: 0 0 6px; color: var(--color-text); } .config-step-panel .step-help { margin: 0 0 22px; color: var(--color-text-muted); font-size: 0.92rem; } /* Option cards (style/material/clip selection) */ .option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .option-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; text-align: start; transition: var(--transition); font-family: inherit; position: relative; } .option-card:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .option-card.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12); } .option-card.is-selected::after { content: '\2713'; position: absolute; top: 6px; inset-inline-end: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 0.7rem; display: grid; place-items: center; font-weight: 700; } .option-card .opt-title { font-weight: 700; font-size: 0.92rem; color: var(--color-text); } .option-card .opt-meta, .option-card .opt-sub { font-size: 0.78rem; color: var(--color-text-muted); } /* Force-column variants for the cloth-wristband configurator so the "Print Design" (4 cards) and "Weave Threads" (3 cards) steps line up neatly instead of falling into the auto-fill flow. */ .option-grid--3 { grid-template-columns: repeat(3, minmax(140px, 1fr)); } .option-grid--4 { grid-template-columns: repeat(4, minmax(140px, 1fr)); } @media (max-width: 720px) { .option-grid--3, .option-grid--4 { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } /* ============================================================ Hand-sanitizer multi-size capacity tiles ============================================================ Used by hand-sanitizer-detail.html Step 2 (and any future product that mirrors lapelpinnow.com's per-capacity Qty inputs). Layout: 2 large tiles side by side, each containing a hero image of that capacity, its label, and its own Qty input. The buyer can fill one OR both — main.js's multi-size shim sums the qtys into selections.qty and writes a structured sizeQtys map for per-size pricing. ============================================================ */ .hs-cap-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 16px; margin-bottom: 8px; } /* An author `display` outranks the UA's [hidden] rule — and .lt-config .hs-cap-grid re-declares it further down at the same weight — so hiding the grid needs a selector at least as strong as that one. The made-to-size luggage tags hide it from JS and would otherwise leave an empty grid holding space beneath their dimension boxes. */ .hs-cap-grid[hidden], .lt-config .hs-cap-grid[hidden] { display: none; } @media (max-width: 480px) { /* Tablets / phones: stack the two tiles vertically so the image + qty input stay legible at narrow widths. */ .hs-cap-grid { grid-template-columns: 1fr; } } .hs-cap-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md, 10px); background: #fff; transition: var(--transition); } .hs-cap-tile.is-active { /* Active = at least 1 unit entered. Mirrors the orange highlight that .option-card.is-selected uses so the visual language of "this option is in the order" stays consistent across steps. */ border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12); } .hs-cap-img { width: 100%; /* Bumped to 460 px so on full-width desktop the bottle's "YOUR DESIGN HERE" label and 1 oz / 2 oz volume markings stay crisp. The tile itself is half the configurator column (~520 px on desktop), so this cap leaves a small breathing border without ever forcing the image to be smaller than the source can render. */ max-width: 460px; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: var(--radius-sm); background: #f8f8f8; overflow: hidden; } .hs-cap-img img { /* Was 75 % / 90 % — the bottle photos already include their own padding, so capping them at 75 % shrank the print area to ~½ of what the source asset provides. Letting them fill the tile (with a tiny safety margin) recovers all that resolution. */ max-width: 98%; max-height: 98%; object-fit: contain; } .hs-cap-name { font-weight: 700; font-size: 0.98rem; color: var(--color-text); text-align: center; /* Absorb the tile's leftover height here rather than below the input. Grid rows already stretch every tile to the same height, but a size label that wraps to two lines ("6×109 cm (2.4×43 in)") used to push its own qty input 25 px lower than its neighbours' while the slack sat unused at the bottom of the shorter tiles. Pushing the slack above the input instead bottom-aligns every input in the row, whatever the label length or language. */ margin-bottom: auto; } .hs-cap-qty-label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .hs-cap-qty { width: 100%; max-width: 160px; padding: 10px 12px; font-size: 1.02rem; font-weight: 600; text-align: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font-family: inherit; color: var(--color-text); transition: var(--transition); /* Hide the up/down spinner — buyers typing big numbers (200, 500, 1500) shouldn't accidentally click +1 fifty times. */ -moz-appearance: textfield; } .hs-cap-qty::-webkit-outer-spin-button, .hs-cap-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .hs-cap-qty:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18); } .hs-cap-qty.qty-invalid { border-color: #d12c1f; background: #fff5f5; } .hs-cap-hint { font-size: 0.82rem; color: var(--color-text-muted); margin: 10px 0 0; padding: 8px 12px; background: #fafafa; border-inline-start: 3px solid var(--color-accent); border-radius: 4px; } /* Cloth wristband colour / metallic-thread swatches. The swatches double as picker buttons: the coloured face IS the option, with a small label below for accessibility / clarity. */ .cloth-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; } .cloth-swatch { flex: 0 0 auto; width: 96px; min-height: 84px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding: 8px; font-family: inherit; font-weight: 600; font-size: 0.78rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: var(--transition); position: relative; overflow: hidden; } .cloth-swatch:hover { transform: translateY(-1px); border-color: var(--color-accent); } .cloth-swatch.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25); } .cloth-swatch.is-selected::after { content: '\2713'; position: absolute; top: 4px; inset-inline-end: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 0.72rem; display: grid; place-items: center; font-weight: 700; text-shadow: none; } .cloth-swatch .cloth-swatch-label { background: rgba(15, 23, 42, 0.55); padding: 2px 6px; border-radius: 4px; color: #fff; font-size: 0.72rem; white-space: nowrap; } .cloth-swatch--none { background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 10px, #e2e8f0 10px, #e2e8f0 20px) !important; color: #475569 !important; text-shadow: none; } .cloth-swatch--none .cloth-swatch-label { background: rgba(255, 255, 255, 0.9); color: #0f172a; } .cloth-swatch--pms .cloth-swatch-label { background: rgba(15, 23, 42, 0.75); } /* Size buttons (compact pill style) */ .size-list { display: flex; flex-wrap: wrap; gap: 8px; } .size-btn { padding: 10px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: 0.88rem; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; } .size-btn:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .size-btn.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-dark); font-weight: 700; } .size-btn .sz-name { font-weight: 700; } .size-btn .sz-dim { font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500; } .size-btn.is-selected .sz-dim { color: var(--color-accent-dark); } /* Color swatches */ .swatch-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; } .swatch-grid > .swatch { flex: 0 0 100px; } /* "Card-style" swatch — name on TOP, colour block below (matches the polyester-lanyard reference: each colour is a small white card with a name label, a colour rectangle and (later) a qty input). */ .swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; padding: 10px 8px; background: #fff; border: 1.5px solid var(--color-border, #e5e7eb); border-radius: 10px; font-family: inherit; min-height: 92px; } .swatch-name { font-size: 0.78rem; color: var(--color-text); text-align: center; line-height: 1.2; word-break: break-word; max-width: 100%; order: 1; /* name on top */ font-weight: 500; } .swatch::before { content: ''; width: 36px; height: 22px; border-radius: 4px; background: var(--swatch-bg, #ccc); border: 1px solid var(--color-border-strong, #d1d5db); order: 2; /* colour block below */ flex: 0 0 auto; transition: transform 180ms ease; } .swatch:hover { border-color: var(--color-accent); box-shadow: 0 4px 12px rgba(15,23,42,0.06); transform: translateY(-1px); } .swatch:hover .swatch-name { color: var(--color-accent-dark); } .swatch:hover::before { transform: scale(1.08); } .swatch.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft, rgba(37,99,235,0.08)); box-shadow: 0 0 0 2px var(--color-accent); } .swatch.is-selected .swatch-name { color: var(--color-accent-dark, var(--color-accent)); font-weight: 700; } .swatch.is-selected::before { border-color: var(--color-accent-dark, var(--color-accent)); border-width: 1.5px; } .swatch-info { margin-top: 12px; font-size: 0.82rem; color: var(--color-text-muted); } .swatch-info strong { color: var(--color-text); font-weight: 600; } /* ============================================================ "With Qty" swatch variant — horizontal card with a colour band on the left and a name + numeric Qty input on the right. Used in lanyard Step 3 where each colour is independently priced/orderable (matches the tablecoversnow reference layout). ============================================================ */ .swatch-grid--qty { gap: 14px 14px; justify-content: flex-start; } .swatch-grid--qty > .swatch--with-qty { flex: 0 0 168px; } .swatch--with-qty { /* Reset the column flex inherited from .swatch */ display: grid; grid-template-columns: 56px 1fr; align-items: stretch; gap: 0; padding: 0; min-height: 70px; overflow: hidden; background: #fff; border: 1.5px solid var(--color-border, #e5e7eb); border-radius: 10px; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .swatch--with-qty::before { display: none; } .swatch--with-qty .swatch-color { background: var(--swatch-bg, #ccc); display: block; width: 100%; height: 100%; border-inline-end: 1px solid var(--color-border-strong, #d1d5db); position: relative; overflow: hidden; } .swatch--with-qty.swatch-light .swatch-color { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); } /* Photo-backed swatches (lanyard popular tab). The fills the coloured tile and sits above the solid hex fallback. If the image fails to load, onerror hides it and the underlying CSS background becomes the swatch face again. */ .swatch--photo .swatch-color { background-size: cover; background-position: center; background-repeat: no-repeat; } .swatch--photo .swatch-color img { width: 100%; height: 100%; object-fit: cover; display: block; } .swatch--with-qty .swatch-info-col { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 7px 9px; min-width: 0; } .swatch--with-qty .swatch-name { text-align: start; font-size: 0.78rem; line-height: 1.15; margin: 0; order: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); } .swatch--with-qty .swatch-qty { width: 100%; padding: 4px 8px; border: 1px solid var(--color-border, #d1d5db); border-radius: 6px; font-size: 0.78rem; font-family: inherit; color: var(--color-text); background: #fff; text-align: start; appearance: textfield; -moz-appearance: textfield; box-sizing: border-box; } .swatch--with-qty .swatch-qty::-webkit-outer-spin-button, .swatch--with-qty .swatch-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .swatch--with-qty .swatch-qty::placeholder { color: var(--color-text-muted, #94a3b8); font-weight: 400; } .swatch--with-qty .swatch-qty:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft, rgba(37,99,235,0.18)); } .swatch--with-qty .swatch-qty.qty-invalid, .swatch--with-qty .swatch-qty.qty-invalid:focus { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); } .color-qty-warn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; border-radius: 8px; font-size: 0.85rem; font-weight: 500; } .color-qty-warn[hidden] { display: none; } .color-qty-warn svg { flex: 0 0 auto; } .swatch--with-qty:hover { border-color: var(--color-accent-soft, #cbd5e1); box-shadow: 0 4px 12px rgba(15,23,42,0.06); } .swatch--with-qty.has-qty, .swatch--with-qty.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); background: #fff; /* override .swatch.is-selected accent-soft fill */ } .swatch--with-qty.has-qty .swatch-name, .swatch--with-qty.is-selected .swatch-name { color: var(--color-accent-dark, var(--color-accent)); font-weight: 700; } /* When the PMS pane shows ~1,800 cards, tighten the card width so more fit per row (still keep the color band + qty layout). */ .pms-grid-inline.swatch-grid--qty > .swatch--with-qty { flex: 0 0 150px; min-height: 62px; } .pms-grid-inline.swatch-grid--qty .swatch-name { font-size: 0.72rem; } .pms-grid-inline.swatch-grid--qty .swatch-qty { font-size: 0.72rem; padding: 3px 6px; } /* ============================================================ ATTACH-GRID — image-card grid for Step 5 (Attachment), Step 6 (Stitch), Step 7/8/9 (Optional add-ons), Step 11/12 (Holders / Reels). Card layout: name on TOP, image on BOTTOM (matches polyester-lanyard reference). ============================================================ */ .attach-tabs { display: flex; gap: 12px; background: var(--color-surface-alt, #f1f5f9); border: 1px solid var(--color-border, #e2e8f0); border-radius: 12px; padding: 14px; margin-bottom: 14px; flex-wrap: wrap; justify-content: center; } .attach-tab { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 22px; background: #fff; border: 2px solid transparent; border-radius: 12px; cursor: pointer; min-width: 200px; transition: var(--transition); font-family: inherit; } .attach-tab .at-img { width: 150px; height: 150px; background: var(--color-surface-alt, #f1f5f9); border-radius: 8px; display: grid; place-items: center; overflow: hidden; } .attach-tab .at-img img, .attach-tab .at-img svg { max-width: 100%; max-height: 100%; object-fit: contain; } .attach-tab .at-name { font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); } .attach-tab:hover { border-color: var(--color-accent-soft, #cbd5e1); } .attach-tab.is-active { border-color: var(--color-accent); background: var(--color-accent-soft, rgba(37,99,235,0.06)); } .attach-tab.is-active .at-name { color: var(--color-accent-dark); font-weight: 600; } .attach-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 10px; } .attach-grid > .attach-card { flex: 0 0 230px; } /* Open Ended / Dual Clips — two-column side-by-side layout (Left Attachment | Right Attachment). Use !important to win against the global ".step-block-body .attach-grid" flex override later in the file. Matches polyester-lanyard reference. */ .step-block-body .attach-side-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px; margin: 12px auto 0; align-items: start; max-width: 100%; } .step-block-body .attach-side { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; background: #fff; overflow: hidden; } .step-block-body .attach-side .holder-section-title { margin: 0; padding: 12px 16px; text-align: center; font-size: 1rem; font-weight: 700; color: var(--color-text); background: var(--color-surface-alt, #f9fafb); border-bottom: 1px solid var(--color-border, #e5e7eb); } /* No max-height + no overflow-y on the inner grid: a fixed-height nested scroll container creates a "scroll trap" — the user's wheel events get eaten by the hook grid and the page below (Holder, Reel, etc.) becomes unreachable. Hooks max out at ~6 colours, so the grid is short anyway and flows naturally with the page. */ .step-block-body .attach-side .attach-grid { margin: 0 !important; padding: 12px; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; justify-items: stretch !important; max-width: none !important; } .step-block-body .attach-side .attach-grid > .attach-card { flex: none !important; width: 100% !important; max-width: none !important; min-width: 0; } @media (max-width: 720px) { .step-block-body .attach-side-grid { grid-template-columns: 1fr !important; } .step-block-body .attach-side .attach-grid { grid-template-columns: repeat(2, 1fr) !important; } } .attach-card { display: flex; flex-direction: column; padding: 0; background: #fff; border: 1.5px solid var(--color-border, #e5e7eb); border-radius: 10px; cursor: pointer; overflow: hidden; transition: var(--transition); font-family: inherit; } .attach-card-name { font-size: 0.95rem; font-weight: 600; padding: 12px 14px; color: var(--color-text); background: var(--color-surface-alt, #f9fafb); border-bottom: 1px solid var(--color-border, #e5e7eb); text-align: center; } /* Small "i" info pill shown after a variant label. Pure CSS tooltip on hover / focus / tap (works without JS by leveraging data-tip + ::after). The serif + italic combo turns the plain "i" character into the familiar circled-italic-i info glyph without needing an icon font. */ .info-bang { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-inline-start: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--color-accent, #2563eb); color: #fff; font-size: 0.78rem; font-weight: 700; font-style: italic; font-family: "Times New Roman", Georgia, "DejaVu Serif", serif; cursor: help; line-height: 1; vertical-align: middle; position: relative; transition: transform 0.12s ease, background 0.12s ease; } .info-bang:hover, .info-bang:focus-visible { background: var(--color-accent-dark, #1d4ed8); transform: scale(1.1); outline: none; } .info-bang::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; /* The button face uses italic Times New Roman to look like the "i" icon. Reset both here so the tooltip body reads in the normal sans body font, not in italic serif. */ font-family: var(--font-sans); font-style: normal; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; padding: 8px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18); z-index: 20; } .info-bang::before { /* Little arrow under the bubble */ content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f172a; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 20; } .info-bang:hover::after, .info-bang:hover::before, .info-bang:focus-visible::after, .info-bang:focus-visible::before { opacity: 1; } /* Long tooltips need to wrap, not bleed off the right edge. pre-line (not normal) so explicit "\n" characters in data-tip render as a real line break — used by LAN_HOLDER_TOOLTIPS to put "Holder size" and "Insert size" on separate lines. Consecutive spaces still collapse, so existing tooltips that don't carry "\n" look unchanged. */ .attach-card .info-bang::after { max-width: 280px; white-space: pre-line; text-align: center; } /* Cloth closure tooltips: author them as fixed two-line blocks. Size the bubble to its longest line (max-content) so it is NOT crushed to one word per line by the tiny 18px info-bang containing block. The "\n" in each tip string (js/wristband-options.js) supplies the line break. The two-line bubble is wider than the ~230px card, so the card must be overflow:visible (it defaults to hidden) or the bubble gets clipped at the card edges; the grid/step containers don't clip. z-index keeps the bubble above neighbouring cards. */ [data-render="cloth-attach"] .attach-card { overflow: visible; } [data-render="cloth-attach"] .info-bang::after { width: max-content; max-width: 92vw; white-space: pre-line; text-align: center; z-index: 100; } [data-render="cloth-attach"] .info-bang::before { z-index: 100; } /* Hand-sanitizer print-method tooltips: same fix as cloth-attach — the info-bang is only 18px wide, so without width:max-content the bubble collapses to one word per line (see lapelpinnow reference for the intended ~2-line layout). max-width caps the bubble so longer tips (e.g. Silk Screen description) wrap at a readable width instead of stretching off-screen. z-index lets the bubble float over the neighbouring print-method card. */ [data-step-kind="print-method"] .attach-card { overflow: visible; } [data-step-kind="print-method"] .info-bang::after { width: max-content; max-width: 240px; white-space: pre-line; text-align: center; line-height: 1.45; z-index: 100; } [data-step-kind="print-method"] .info-bang::before { z-index: 100; } .attach-card-img { display: grid; place-items: center; padding: 14px 10px; background: #fff; min-height: 240px; } .attach-card-img svg { width: 96px; height: 96px; } /* Source photos are 230x400 portrait — cap by height, let width auto-shrink */ .attach-card-img img.ac-photo { max-width: 100%; max-height: 230px; width: auto; height: auto; object-fit: contain; display: block; } .attach-card-img .ac-fallback { display: block; } /* Photo variant: real PVC card photos (Step 2 size/orient, Step 3 finish, Step 4 hole). Image fills the entire card-img area (no swatch overlay). */ .attach-card-img--photo { padding: 0; background: #fff; min-height: 240px; overflow: hidden; } .attach-card-img--photo img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; } /* Finder-tag print / case cards: the factory shots are white products on a white sweep. Cover-cropping them into a white well hides the product. Contain + a light well keeps both units visible. */ .fnd-config .attach-card-img.attach-card-img--photo { min-height: 0; aspect-ratio: 1 / 1; background: #eef1f4; padding: 10px; } .fnd-config .attach-card-img.attach-card-img--photo img.ac-photo { width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: contain; } /* ===== Step 2 — Orientation tabs (Vertical / Horizontal) ===== Pill-style toggle above the size grid. Mirrors the reference toast.com card-builder. */ .idc-orient-tabs { display: flex; justify-content: center; gap: 0; margin: 0 auto 24px; padding: 4px; background: #f1f5f9; border-radius: 999px; width: max-content; } .idc-orient-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: #475569; font: 600 14px/1 Inter, system-ui, sans-serif; padding: 10px 22px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .idc-orient-tab:hover { color: #0f172a; } .idc-orient-tab.is-active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(15,23,42,0.06); } .idc-orient-tab .idc-orient-tab-ico { display: inline-flex; } /* ===== Step 2 — Size cards with Qty input ===== Card is laid out vertically: image · size label · qty input. */ .idc-orient-grid > .attach-card { flex: 0 0 220px; display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; } .idc-orient-grid .attach-card-img--photo { min-height: 200px; height: 200px; background: #fff; } .idc-orient-grid .attach-card-img--photo img { min-height: 200px; height: 200px; object-fit: contain; padding: 10px; } .idc-orient-grid .attach-card-name { background: #f1f5f9; padding: 10px 12px; text-align: center; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: #1f2937; } /* Two-line size label: inch dimensions on top (bold, same size as the default name) + mm dimensions underneath (smaller, muted). Layout uses flex column with a thin gap so vertical rhythm stays tight inside the card. The whole block sits in the same .attach-card-name slot the single-line version used, so we keep the inherited background, padding and "selected-state" highlight without writing them again. */ .idc-orient-grid .attach-card-name.idc-size-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; } .idc-orient-grid .idc-size-in { font-weight: 600; color: #1f2937; } .idc-orient-grid .idc-size-mm { font-weight: 500; font-size: 12px; color: #64748b; } .idc-orient-grid .attach-card.is-selected .idc-size-in { color: inherit; } .idc-orient-grid .attach-card.is-selected .idc-size-mm { color: inherit; opacity: 0.85; } .idc-orient-grid .ac-qty-row { padding: 10px; background: #ffffff; } .idc-orient-grid .ac-qty { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 10px; font: 500 14px/1.2 Inter, system-ui, sans-serif; color: #111827; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .idc-orient-grid .ac-qty:focus { outline: none; border-color: var(--color-accent, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.18); } .idc-orient-grid .ac-qty::-webkit-outer-spin-button, .idc-orient-grid .ac-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .idc-orient-grid .ac-qty[type=number] { -moz-appearance: textfield; } .idc-orient-grid .attach-card.is-selected .attach-card-name { background: var(--color-accent-soft, rgba(37,99,235,0.12)); color: var(--color-accent-dark, #1d4ed8); } .attach-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .attach-card.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent) inset; } .attach-card.is-selected .attach-card-name { background: var(--color-accent-soft, rgba(37,99,235,0.08)); color: var(--color-accent-dark); font-weight: 600; } /* Upgrade cards gated behind a minimum order quantity (scarves: the custom hangtag needs 30 pcs). The card goes inert and the threshold is spelled out on it, so the buyer learns what to change instead of only discovering that it won't click. The note keeps its full contrast — greying the card must not grey the one line explaining why. */ .attach-card.is-locked { cursor: not-allowed; } .attach-card.is-locked .attach-card-img img { filter: grayscale(1); opacity: 0.55; } .attach-card.is-locked .attach-card-name { color: var(--color-text-muted, #6b7280); } /* Beats the three .attach-card:hover rules further down the sheet. */ .attach-card.is-locked:hover { transform: none; border-color: var(--color-border, #e5e7eb); box-shadow: none; } .attach-card-note { padding: 8px 12px 10px; background: var(--color-surface-alt, #f9fafb); color: #b45309; font-size: 0.8rem; font-weight: 600; line-height: 1.3; text-align: center; } .attach-card-note[hidden] { display: none; } /* Holder / Reel rows — outer style row, inner colour-variant row. Variant sections are kept fully collapsed until the corresponding main card is clicked. */ .holder-section { margin-top: 18px; } .holder-section.is-collapsed, .holder-section[hidden] { display: none !important; } .holder-section .holder-section-title { display: none !important; } /* ------ Step 11 main holder grid — flex-wrap centered (7 items: 4 + 3 centered) ------ */ .step-block-body .attach-grid[data-single="holder"], .step-block-body .attach-grid[data-single="reel"] { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 14px !important; max-width: 960px; margin: 0 auto !important; padding: 18px !important; background: #edf4fa; border-radius: 12px; } .step-block-body .attach-grid[data-single="holder"] > .attach-card, .step-block-body .attach-grid[data-single="reel"] > .attach-card { flex: 0 0 200px !important; width: 200px !important; max-width: 200px !important; background: #fff; border: 2px solid transparent; border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); flex-direction: column !important; align-items: stretch; padding: 14px 10px 10px; gap: 8px; } .step-block-body .attach-grid[data-single="holder"] > .attach-card.is-selected, .step-block-body .attach-grid[data-single="reel"] > .attach-card.is-selected { border-color: var(--color-accent, #2563eb); box-shadow: 0 3px 10px rgba(37,99,235,0.12); } .step-block-body .attach-grid[data-single="holder"] .attach-card-name, .step-block-body .attach-grid[data-single="reel"] .attach-card-name { background: transparent !important; border: 0 !important; font-size: 0.88rem; font-weight: 600; padding: 4px 0 0; color: var(--color-accent, #2563eb); text-align: center; line-height: 1.25; } .step-block-body .attach-grid[data-single="holder"] .attach-card-img, .step-block-body .attach-grid[data-single="reel"] .attach-card-img { padding: 0; min-height: 130px; display: grid; place-items: center; } .step-block-body .attach-grid[data-single="holder"] .attach-card-img img.ac-photo, .step-block-body .attach-grid[data-single="reel"] .attach-card-img img.ac-photo { max-height: 130px; max-width: 95%; } .step-block-body .attach-grid[data-single="holder"] .attach-card-img svg, .step-block-body .attach-grid[data-single="reel"] .attach-card-img svg { width: 80px; height: 80px; } @media (max-width: 760px) { .step-block-body .attach-grid[data-single="holder"], .step-block-body .attach-grid[data-single="reel"] { grid-template-columns: repeat(2, 1fr) !important; } .step-block-body .attach-grid[data-single="holder"] .attach-card-img, .step-block-body .attach-grid[data-single="reel"] .attach-card-img { min-height: 100px; } .step-block-body .attach-grid[data-single="holder"] .attach-card-img img.ac-photo, .step-block-body .attach-grid[data-single="reel"] .attach-card-img img.ac-photo { max-height: 100px; } } /* ------ Variant grid inside holder-section — flex-wrap centered + Qty input ------ */ .holder-section > .attach-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 16px !important; max-width: 980px; margin: 14px auto 0; padding: 0 4px !important; } .holder-section > .attach-grid > .attach-card { flex: 0 0 190px !important; width: 190px !important; max-width: 190px !important; flex-direction: column !important; border-radius: 10px; /* Override the .attach-card overflow:hidden default — the holder tooltip is wider than the 190px card, so we have to let it spill out. Pair with the info-bang::after z-index below so the bubble stacks on top of neighbouring cards instead of being clipped. */ overflow: visible !important; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(15,23,42,0.04); padding: 0 0 10px; overflow: hidden; } .holder-section > .attach-grid > .attach-card.is-selected { border-color: var(--color-accent, #2563eb); box-shadow: 0 0 0 1px var(--color-accent, #2563eb), 0 2px 8px rgba(37,99,235,0.12); } .holder-section .attach-card-img { order: 1; padding: 16px 12px 8px; min-height: 180px; background: transparent; } .holder-section .attach-card-img img.ac-photo { max-height: 170px; max-width: 92%; } .holder-section .attach-card-img svg { width: 78px; height: 78px; } .holder-section .attach-card-name { order: 2; background: transparent !important; border: 0 !important; font-size: 0.88rem; font-weight: 500; padding: 6px 10px 8px; color: var(--color-text); text-align: center; line-height: 1.25; display: flex; align-items: center; justify-content: center; gap: 5px; } .holder-section .attach-card.is-selected .attach-card-name { color: var(--color-accent-dark, #1d4ed8); font-weight: 600; } /* The .holder-section used to shrink the info-bang to 14x14 and recolour it teal to fit a denser 4-up holder-picker grid. Removed so every info-bang on the site renders identically (18x18 italic blue "i", per the site-wide rule above). The TOOLTIP body override below stays, because holder tooltips are 4-line blocks (label / value x 2) and need a wider bubble than the default. Only structural tweak we keep: `.attach-card-name` inside .holder-section is a flex container with `gap: 5px`, so the badge's default `margin-left: 6px` would compound to ~11px between title and badge. Reset just the margin (NOT the size/colour) so the appearance stays consistent across the site while the flex gap takes care of spacing. */ .holder-section .attach-card-name .info-bang { margin-inline-start: 0; } .holder-section .attach-card .info-bang::after { /* The holder tooltips are 4-line blocks (label / value × 2). Give them room: bigger padding so the bubble doesn't crush the text, a wider max-width so the (98×82mm) values stay on one line, and a comfier line-height + min-width so all four lines breathe. z-index is bumped above .info-bang's default so the bubble can overlap neighbouring cards (now that the card itself is overflow:visible) without being painted under them. */ font-size: 0.78rem; padding: 10px 14px; min-width: 200px; max-width: 280px; line-height: 1.5; z-index: 100; } .holder-section .attach-card .info-bang::before { z-index: 100; } /* Per-variant qty input, rendered by JS as */ .variant-qty-row { display: flex; justify-content: center; padding: 4px 10px 2px; order: 3; } .variant-qty-input { width: 100%; max-width: 110px; height: 28px; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; text-align: center; font-size: 0.78rem; color: var(--color-text); outline: none; transition: border-color 0.12s ease; } .variant-qty-input::placeholder { color: #9ca3af; font-weight: 400; } .variant-qty-input:focus { border-color: var(--color-accent, #2563eb); } /* Hide native number-spinner arrows for a cleaner look */ .variant-qty-input::-webkit-outer-spin-button, .variant-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .variant-qty-input[type=number] { -moz-appearance: textfield; } @media (max-width: 760px) { .holder-section > .attach-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: 8px !important; } .holder-section .attach-card-img img.ac-photo { max-height: 100px; } .holder-section .attach-card-img { min-height: 108px; padding: 10px 6px 4px; } .holder-section .attach-card-name { font-size: 0.72rem; } .variant-qty-input { height: 24px; font-size: 0.72rem; } } .holder-section-title { font-size: 0.95rem; font-weight: 600; margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--color-border, #e5e7eb); } /* PMS picker — open-modal button */ .pms-open-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-accent-soft, #eef2ff); color: var(--color-accent-dark); border: 1.5px solid var(--color-accent); border-radius: 8px; font-weight: 600; font-family: inherit; cursor: pointer; margin: 8px 0 14px; transition: var(--transition); } .pms-open-btn:hover { background: var(--color-accent); color: #fff; } /* Modal — full-screen search for all 1800+ PMS codes */ .pms-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 9999; } .pms-modal-backdrop.is-open { display: flex; } /* Legacy backdrop dialog. Renamed from `.pms-modal` to `.pms-dialog` so it no longer collides with the current full-screen overlay `.pms-modal` (used by openPmsModal). The collision leaked max-width/width/flex-direction onto the overlay and pinned it to the top-left instead of centring it. */ .pms-dialog { background: #fff; border-radius: 14px; max-width: 900px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .pms-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--color-border, #e5e7eb); display: flex; align-items: center; gap: 12px; } .pms-modal-title { flex: 1; font-size: 1.1rem; font-weight: 700; } .pms-modal-close { background: none; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: var(--color-text-muted); } .pms-modal-close:hover { background: var(--color-surface-alt); color: var(--color-text); } .pms-modal-search { padding: 12px 20px; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pms-modal-search input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--color-border-strong, #d1d5db); border-radius: 8px; font-size: 0.95rem; } .pms-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .pms-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; } /* Text / message input */ .config-text-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; color: var(--color-text); background: #fff; transition: var(--transition); } .config-text-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12); } .config-text-help { margin-top: 6px; font-size: 0.78rem; color: var(--color-text-muted); } /* Font sample picker */ .font-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .font-card { padding: 18px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; text-align: center; transition: var(--transition); font-family: inherit; } .font-card:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .font-card.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); } .font-card .font-sample { font-size: 1.4rem; font-weight: 600; color: var(--color-text); margin-bottom: 4px; } .font-card .font-name { font-size: 0.74rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Multi-select add-ons (checkbox cards) */ .addon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .addon-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; transition: var(--transition); font-family: inherit; text-align: start; } .addon-card:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .addon-card.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); } .addon-card .addon-check { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border-radius: 4px; border: 1.5px solid var(--color-border-strong); background: #fff; display: grid; place-items: center; color: #fff; font-size: 0.7rem; font-weight: 700; } .addon-card.is-selected .addon-check { background: var(--color-accent); border-color: var(--color-accent); } .addon-card.is-selected .addon-check::after { content: '\2713'; } .addon-card .addon-info { flex: 1; min-width: 0; } .addon-card .addon-title { font-weight: 700; font-size: 0.88rem; color: var(--color-text); display: flex; justify-content: space-between; gap: 8px; } .addon-card .addon-meta { font-size: 0.76rem; color: var(--color-text-muted); margin-top: 2px; } /* Yes/No toggle group */ .toggle-group { display: inline-flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .toggle-btn { padding: 10px 22px; background: #fff; border: none; font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; transition: var(--transition); } .toggle-btn + .toggle-btn { border-inline-start: 1.5px solid var(--color-border); } .toggle-btn.is-selected { background: var(--color-primary-dark); color: #fff; } /* Quantity tier picker */ .qty-tier-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 16px; } .qty-tier { padding: 12px 8px; text-align: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; transition: var(--transition); font-family: inherit; } .qty-tier:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .qty-tier.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); } .qty-tier .qty-num { font-weight: 800; font-size: 1.05rem; color: var(--color-text); } .qty-tier .qty-price { font-size: 0.76rem; color: var(--color-text-muted); margin-top: 2px; } .qty-tier.is-selected .qty-price { color: var(--color-accent-dark); font-weight: 600; } .qty-custom-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .qty-custom-row label { font-size: 0.88rem; color: var(--color-text-muted); font-weight: 600; } .qty-custom-row input { width: 110px; padding: 10px 12px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; text-align: center; } .qty-custom-row input:focus { outline: none; border-color: var(--color-accent); } /* File upload field */ .file-upload { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: 24px 18px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--color-bg-alt); } .file-upload:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .file-upload .file-icon { width: 36px; height: 36px; margin: 0 auto 8px; color: var(--color-text-muted); } .file-upload .file-text { font-weight: 600; font-size: 0.92rem; color: var(--color-text); } .file-upload .file-help { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 4px; } .file-upload input[type="file"] { display: none; } .file-upload.has-file { border-color: var(--color-success); background: rgba(5, 150, 105, 0.05); } .file-upload.has-file .file-icon { color: var(--color-success); } /* Sidebar summary */ .config-summary { background: var(--color-bg-alt); border-inline-start: 1px solid var(--color-border); padding: 24px 22px; overflow-y: auto; display: flex; flex-direction: column; } @media (max-width: 800px) { .config-summary { border-inline-start: none; border-top: 1px solid var(--color-border); } } .config-summary h4 { margin: 0 0 14px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 700; } .summary-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; } .summary-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 0.86rem; color: var(--color-text); padding-bottom: 8px; border-bottom: 1px dashed var(--color-border); } /* The rule above sets `display`, which beats the UA's `[hidden] {display:none}` outright (author styles win over UA styles whatever the specificity), so the `hidden` attribute stopped working on summary rows. The pin, luggage-tag and scarf configurators all rely on it to drop steps their style doesn't offer, and without this a soft-enamel pin listed "成型方式: 无" — a PVC-only step — as if the buyer had chosen it. `!important` because `.config-allsteps .summary-list li` sets `display: grid` further down (~L6400). */ .summary-list li[hidden] { display: none !important; } .summary-list li .sum-key { color: var(--color-text-muted); font-weight: 500; } .summary-list li .sum-val { font-weight: 600; text-align: end; max-width: 60%; word-break: break-word; } .summary-list li.empty .sum-val { color: var(--color-text-light); font-style: italic; font-weight: 500; } /* Multi-line summary value used by holder/reel rows: each selected parent holder/reel gets a small group with the parent name on top and one sub-line per (size × qty) underneath. */ .summary-list li .sum-val .sum-acc-group { display: block; margin-bottom: 6px; } .summary-list li .sum-val .sum-acc-group:last-child { margin-bottom: 0; } .summary-list li .sum-val .sum-acc-name { font-weight: 700; color: var(--color-text); } .summary-list li .sum-val .sum-sub { font-weight: 500; font-size: 0.85em; color: var(--color-text-muted); margin-top: 1px; } /* `sum-row-wide` — used when the value is too rich for the default two-column key/value layout (e.g. the wristband colour table with band-colour / size / qty / text-colour columns). Use `display:block` instead of flex-column so the key span and the .sum-val payload always stack vertically with a clear gap, regardless of any other `.summary-list li` rule downstream in the cascade. IMPORTANT: A later block at ~L4665 uses `.config-allsteps .summary-list li { display: grid; grid-template-columns: 110px 1fr; }`, which has the SAME specificity as the bare `.summary-list li.sum-row-wide` selector but wins by document order — that's why the label "颜色" was being pinned to the 110 px left column while the table got squeezed into the 1fr right column (same row). The fix is to MATCH that scope (`.config-allsteps`) so our rule sits at higher specificity (0,0,3,1) and `display: block` wins, putting the table on the line BELOW the label as the user requested. The plain `.summary-list li.sum-row-wide` rule remains as a fallback for any future mount-point that isn't inside `.config-allsteps`. */ .summary-list li.sum-row-wide, .config-allsteps .summary-list li.sum-row-wide { display: block; grid-template-columns: none; padding-bottom: 10px; } .summary-list li.sum-row-wide .sum-key, .config-allsteps .summary-list li.sum-row-wide .sum-key { display: block; margin-bottom: 8px; font-weight: 600; color: var(--color-text); } .summary-list li.sum-row-wide .sum-val, .config-allsteps .summary-list li.sum-row-wide .sum-val { display: block; text-align: start; max-width: 100%; width: 100%; font-weight: 500; } .sum-color-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 0.78rem; line-height: 1.25; } .sum-color-table th, .sum-color-table td { padding: 4px 5px; border-bottom: 1px solid var(--color-border); text-align: start; vertical-align: middle; color: var(--color-text); font-weight: 500; /* Don't let the panel's narrow width chop "Adult" into "Adu/lt" vertically — keep tokens whole. Long colour names like "Black | Gold" can still wrap (they're space-separated), but atomic size labels stay on one line. */ word-break: keep-all; overflow-wrap: anywhere; } .sum-color-table th { font-weight: 600; color: var(--color-text-muted); background: rgba(0, 0, 0, 0.025); white-space: nowrap; font-size: 0.75rem; } /* Size column (2nd) — short tokens like "成人 / 青少年" should never wrap, so keep them on one line. */ .sum-color-table th:nth-child(2), .sum-color-table td:nth-child(2) { white-space: nowrap; } /* Qty column (3rd) — right-aligned monospace digits keep totals easy to scan vertically. */ .sum-color-table th:nth-child(3), .sum-color-table td:nth-child(3) { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: var(--color-text); } .sum-color-table tbody tr:last-child td { border-bottom: none; } /* ------------------------------------------------------------------ Cart line — wristband colour / size / qty / text-colour table. Used by both the slide-out cart drawer (cart.js → renderDrawer) and the full cart page (products/cart.html → render). Mirrors the summary panel's .sum-color-table so the buyer sees the same shape across configurator → drawer → cart page → checkout review. ------------------------------------------------------------------ */ .cart-line-desc li.cart-line-desc-wide { /* Promote a single bullet to full width so the inline table can breathe — without this it stays inside the standard text bullet and the table compresses to the bullet's content width. */ list-style: none; margin-inline-start: -1.1rem; /* compensate for the parent UL's default indent */ padding: 4px 0 6px; } .cart-color-label { font-weight: 600; font-size: 0.78rem; margin: 0 0 4px; color: var(--color-text); } .cart-color-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 0.72rem; line-height: 1.25; margin: 0; } .cart-color-table th, .cart-color-table td { padding: 3px 5px; border-bottom: 1px solid var(--color-border); text-align: start; vertical-align: middle; color: var(--color-text); font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; } .cart-color-table th { font-weight: 600; color: var(--color-text-muted); background: rgba(0, 0, 0, 0.025); white-space: nowrap; font-size: 0.68rem; } .cart-color-table th:nth-child(2), .cart-color-table td:nth-child(2) { white-space: nowrap; } .cart-color-table th:nth-child(3), .cart-color-table td:nth-child(3) { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .cart-color-table tbody tr:last-child td { border-bottom: none; } /* Editable variant — the qty column hosts a number input the buyer can tweak inline. The input ALWAYS shows a visible chrome (border + light fill) so it reads as "I am interactive" the moment the page loads, not just on hover — buyers were assuming the cell was static text and missing the feature entirely (user feedback). Focus deepens the accent ring to match .cart-acc-input so the two inline editors on the cart line stay in the same family. */ .cart-color-table--editable .cart-color-qty-cell { padding: 2px 4px; } .cart-color-qty-input { width: 72px; padding: 4px 8px; font: 700 0.82rem/1.2 Inter, sans-serif; font-variant-numeric: tabular-nums; text-align: end; color: var(--color-text); background: #fff; border: 1.5px solid #94a3b8; /* slate-400 — clearly a field */ border-radius: 6px; box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04); transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; -moz-appearance: textfield; cursor: text; } .cart-color-qty-input::-webkit-outer-spin-button, .cart-color-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-color-qty-input:hover { border-color: var(--color-accent, #ea580c); background: #fff7ed; /* amber-50 hover tint */ } .cart-color-qty-input:focus { outline: none; background: #fff; border-color: var(--color-accent, #ea580c); box-shadow: 0 0 0 3px var(--color-accent-soft, rgba(243, 123, 30, 0.22)); } /* ------------------------------------------------------------------ Step 13 — six delivery-date slots (business-day cadence, admin- configurable lead-time + optional holiday overrides). ------------------------------------------------------------------ */ /* Centred rows, not a fixed grid. How many cards there are is decided at runtime and is NOT the number of slots the family declares: pins declare seven, but any slot that would repeat an earlier date is dropped (the dearer of a same-date pair is an option nobody should buy), so the row is usually six. The tracks were nailed to seven regardless, so the cards hugged the left and the spare track sat there as 135px of dead space. A fixed grid can't fix that on its own: whenever the count doesn't divide by the column count, the closing row is short and grid leaves its slack on the right — six cards in four columns put 324px of it under the second row. A wrapping flex row centres a short row instead, which is even-handed at any count and needs nothing to know the count. */ .delivery-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Wide: one row, cards splitting it equally, so it is flush edge to edge whether there are six or seven. min-width overrides flex's `auto` default, which would refuse to shrink past the date text and wrap the row. */ .delivery-slot { flex: 1 1 0; min-width: 0; } /* Narrower: cards hold a width matching the column count of the band and wrap, rather than being squeezed. Basis subtracts the gutters the row will carry. [data-slots] survives as "this family declares that many slots" — pins wrap one step earlier than the rest — and no longer claims to be the rendered count. The [data-slots] selector is repeated in the narrower bands because it out-specifies the plain one and would otherwise keep winning. */ @media (max-width: 1200px) { .delivery-slots[data-slots="7"] > .delivery-slot { flex: 0 0 calc((100% - 30px) / 4); } } @media (max-width: 980px) { .delivery-slots > .delivery-slot, .delivery-slots[data-slots="7"] > .delivery-slot { flex: 0 0 calc((100% - 20px) / 3); } } @media (max-width: 560px) { .delivery-slots > .delivery-slot, .delivery-slots[data-slots="7"] > .delivery-slot { flex: 0 0 calc((100% - 10px) / 2); } } .delivery-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 10px; background: #fff; border: 1.5px solid var(--color-border, #e3e6eb); border-radius: 12px; cursor: pointer; text-align: center; font-family: inherit; font-size: 14px; color: var(--color-text); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease; } .delivery-slot:hover { border-color: var(--color-primary, #2b6cb0); box-shadow: 0 4px 12px rgba(43, 108, 176, 0.10); transform: translateY(-1px); } .delivery-slot .slot-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; color: var(--color-text-light); } .delivery-slot .slot-date { font-size: 15px; font-weight: 700; color: var(--color-text); line-height: 1.25; } .delivery-slot[data-soonest="1"] .slot-label { color: #1b5e20; } .delivery-slot.is-selected { border-color: var(--color-primary, #2b6cb0); background: linear-gradient(135deg, #ebf4ff 0%, #d6e7ff 100%); box-shadow: 0 6px 18px rgba(43, 108, 176, 0.18); } .delivery-slot.is-selected .slot-date, .delivery-slot.is-selected .slot-label { color: var(--color-primary, #1e4a80); } .delivery-slot.is-selected::after { content: ""; position: absolute; top: 8px; inset-inline-end: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary, #2b6cb0) url("data:image/svg+xml;utf8,") center/12px no-repeat; } /* Per-slot price-delta pill: shown only when the merchant has configured a rule for that delivery slot (e.g. "+€2.50" rush fee on slot 1 or "−€1.00" patience discount on slot 6). Sits centred under the date so it doesn't fight the top-right "selected" checkmark for space. */ .delivery-slot .slot-delta { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; background: #f1f4fa; color: var(--color-text-light, #5b6373); } .delivery-slot .slot-delta--up { background: #fff3e0; color: #b34d00; } .delivery-slot .slot-delta--down { background: #e6f5ea; color: #1b5e20; } /* Stronger green for the "no rush fee" standard-delivery slot — makes it visually pop the way tablecoversnow's "FREE" badge does. */ .delivery-slot .slot-delta--free { background: #1b5e20; color: #fff; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .delivery-slot.is-selected .slot-delta { background: rgba(255,255,255,0.65); } .delivery-slot.is-selected .slot-delta--up { color: #b34d00; } .delivery-slot.is-selected .slot-delta--down { color: #1b5e20; } .delivery-slot.is-selected .slot-delta--free { background: #1b5e20; color: #fff; } .summary-total { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border-strong); } .summary-total .label { font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .summary-total .price { font-size: 1.6rem; font-weight: 800; color: var(--color-text); margin: 4px 0 0; letter-spacing: -0.01em; } .summary-total .price-each { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; margin-top: 2px; } /* One-time setup / plate fee row — sits below the per-each line and is shown only when any matched delta carries a `setup` amount. */ .summary-total .price-setup { font-size: 0.8rem; color: var(--color-accent, #b45309); font-weight: 600; margin-top: 2px; } .summary-total .price-setup[hidden] { display: none; } /* Modal footer (prev / next / quote) */ .modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--color-border); background: #fff; } .modal-footer .step-counter { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; } .modal-footer .footer-actions { display: flex; gap: 8px; } .btn-step-prev, .btn-step-next { padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; font-family: inherit; transition: var(--transition); } .btn-step-prev { background: transparent; color: var(--color-text-muted); } .btn-step-prev:hover { background: var(--color-bg-alt); color: var(--color-text); } .btn-step-prev:disabled { opacity: 0.4; cursor: not-allowed; } .btn-step-next { background: var(--color-accent); color: #fff; display: inline-flex; align-items: center; gap: 6px; } .btn-step-next:hover { background: var(--color-accent-dark); transform: translateY(-1px); } .btn-step-next svg { width: 14px; height: 14px; } /* lock body scroll when modal open */ body.modal-open { overflow: hidden; } /* =========================================================================== 22. Product detail page (hero, tabs, pricing chart, inline configurator) =========================================================================== */ /* Breadcrumb on detail page */ .pd-breadcrumb { padding: 18px 0 8px; margin: 0; } /* Hero section */ .pd-hero { background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%); padding: 28px 0 56px; border-bottom: 1px solid var(--color-border); } .pd-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 880px) { .pd-hero-grid { grid-template-columns: 1fr; gap: 32px; } } .pd-image-wrap { position: relative; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.10); border: 1px solid var(--color-border); aspect-ratio: 1 / 1; max-width: 540px; margin: 0 auto; width: 100%; padding: 32px; display: grid; place-items: center; } .pd-image-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(234, 88, 12, 0.06) 0%, transparent 60%); pointer-events: none; } .pd-image { width: 100%; height: 100%; max-width: 360px; max-height: 360px; object-fit: contain; position: relative; z-index: 1; } /* Hero carousel controls (e.g. Metallic Woven Gold/Silver colourways). */ .pd-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18); color: #111827; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .15s, transform .15s; } .pd-carousel-btn:hover { background: #fff; } .pd-carousel-btn--prev { inset-inline-start: 12px; } .pd-carousel-btn--next { inset-inline-end: 12px; } .pd-carousel-dots { position: absolute; bottom: 14px; inset-inline-start: 0; inset-inline-end: 0; display: flex; gap: 8px; justify-content: center; z-index: 3; } .pd-carousel-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(17, 24, 39, 0.28); cursor: pointer; transition: background .15s, transform .15s; } .pd-carousel-dot.is-active { background: var(--color-accent, #2563eb); transform: scale(1.2); } .pd-info { min-width: 0; } .pd-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; color: var(--color-accent-dark); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .pd-info h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0 0 14px; line-height: 1.15; font-weight: 800; color: var(--color-text); } .pd-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 0.88rem; } .pd-rating { color: var(--color-accent); letter-spacing: 1px; font-weight: 600; } .pd-rating span { color: var(--color-text-muted); margin-inline-start: 6px; font-weight: 500; letter-spacing: 0; } .pd-meta { background: #fff; border: 1px solid var(--color-border); padding: 4px 10px; border-radius: 999px; color: var(--color-text-muted); font-weight: 600; font-size: 0.78rem; } .pd-lead { color: var(--color-text-muted); margin: 0 0 22px; line-height: 1.6; font-size: 1rem; } .pd-price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .pd-price-label { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .pd-price { font-size: 2rem; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; } .pd-price-each { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; } .pd-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; } .pd-trust-row { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.85rem; color: var(--color-text-muted); } .pd-trust-row > span { display: inline-flex; align-items: center; gap: 6px; } .pd-trust-row svg { color: var(--color-success); flex-shrink: 0; } /* Sticky tabs */ .pd-tabs-wrap { position: sticky; /* Clear of BOTH sticky bars. This used to be just the header height and so slid under it by the height of the topbar above it. */ top: calc(36px + var(--header-height)); z-index: 30; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } .pd-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; } .pd-tabs::-webkit-scrollbar { height: 0; } .pd-tabs a { padding: 16px 18px; font-size: 0.92rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: var(--transition); } .pd-tabs a:hover { color: var(--color-text); } .pd-tabs a.is-active { color: var(--color-accent-dark); border-bottom-color: var(--color-accent); } /* Inline configurator (no modal wrapper) */ .config-inline { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06); display: grid; grid-template-rows: auto auto 1fr auto; } .config-inline-header { padding: 24px 28px 6px; } .config-inline-header h2 { font-size: 1.5rem; margin: 0 0 6px; } .config-inline-header p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; } .config-inline .config-stepnav { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); border-top: 1px solid var(--color-border); margin-top: 18px; } .config-inline .modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 460px; } @media (max-width: 880px) { .config-inline .modal-body { grid-template-columns: 1fr; } } .config-inline .config-summary { background: var(--color-bg-alt); border-inline-start: 1px solid var(--color-border); position: sticky; top: calc(var(--header-height) + 56px); align-self: start; max-height: calc(100vh - var(--header-height) - 80px); } @media (max-width: 880px) { .config-inline .config-summary { position: static; max-height: none; } } .config-inline .modal-footer { border-top: 1px solid var(--color-border); background: #fff; } /* Pricing table */ .pd-price-chart-size { font: 500 16px/1.2 Inter, sans-serif; color: var(--color-text-muted); margin-inline-start: 6px; letter-spacing: 0; } .pd-pricing-table-wrap { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); } .pd-pricing-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .pd-pricing-table thead th { background: var(--color-bg-alt); text-align: start; padding: 14px 18px; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } .pd-pricing-table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .pd-pricing-table tbody tr:last-child td { border-bottom: none; } .pd-pricing-table tbody tr:hover { background: var(--color-bg-warm); } .pd-pricing-table tbody td:first-child { font-weight: 700; } .pd-pricing-table tbody td:nth-child(2) { color: var(--color-accent-dark); font-weight: 700; } .pd-pricing-table tbody td:last-child { color: var(--color-success); font-weight: 600; } /* Toast utility */ .pe-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); background: var(--color-text); color: #fff; padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); font-size: 0.9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 300; max-width: 90%; text-align: center; } .pe-toast.show { opacity: 1; transform: translate(-50%, 0); } /* Section spacing on detail page (tighter) */ .section[data-pd-section] { padding: 56px 0; scroll-margin-top: calc(var(--header-height) + 64px); } /* Beautification: refined card hover, smoother category cards */ .product-card { border-radius: 14px; } .product-card .card-body { padding: 18px 18px 16px; } .product-card h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; } .product-card .price-current { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; } .product-card .badge-sale { background: var(--color-text); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; } .category-card { border-radius: 18px; } .category-card:hover { border-color: var(--color-accent); } /* Refined faq question styling */ .faq-question { font-size: 0.95rem; } .faq-item { border-radius: 12px; } .faq-item.open { border-color: var(--color-accent); } /* Refined buttons */ .btn { border-radius: 10px; } .btn-primary { box-shadow: 0 4px 12px rgba(234, 88, 12, 0.18); } .btn-primary:hover { box-shadow: 0 6px 16px rgba(234, 88, 12, 0.28); } /* ========================================================================== Multi-step ALL-VISIBLE configurator (replaces wizard nav) Each Step block stacks vertically; right column = sticky live summary. ========================================================================== */ .config-allsteps { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; } /* Configurator container — main column ≈ 2/3 of viewport on typical screens. Widened to 1600px so step bodies (especially wristband Step 3's colour cards) have room to show full-size product photos without cropping. */ [data-pd-section="configurator"] > .container { max-width: 1600px; padding: 0 16px; } @media (max-width: 980px) { .config-allsteps { grid-template-columns: 1fr; } } .config-allsteps .config-summary { background: #fff; border: 1.5px solid var(--color-border); border-radius: 16px; padding: 22px 22px 18px; position: sticky; top: calc(var(--header-height) + 72px); align-self: start; max-height: calc(100vh - var(--header-height) - 96px); /* Flex column so the summary list takes the flexible middle space (scrolls internally when long), and the total + CTA stay pinned at the bottom of the panel — always visible without inner scrolling. Removed the panel-level overflow:auto so the CTA never gets pushed below the viewport. */ display: flex; flex-direction: column; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); } .config-allsteps .config-summary > h4 { flex: 0 0 auto; } .config-allsteps .config-summary .summary-list { flex: 1 1 auto; overflow-y: auto; min-height: 80px; /* Subtle scroll-track so customers know there's more below */ scrollbar-width: thin; scrollbar-gutter: stable; } .config-allsteps .config-summary .summary-list::-webkit-scrollbar { width: 6px; } .config-allsteps .config-summary .summary-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } .config-allsteps .config-summary .summary-total, .config-allsteps .config-summary .summary-cta { flex: 0 0 auto; } .config-allsteps .config-summary .summary-cta .btn { width: 100%; font-size: 1.02rem; padding-block: 14px; } @media (max-width: 980px) { .config-allsteps .config-summary { position: static; max-height: none; display: block; } .config-allsteps .config-summary .summary-list { max-height: none; overflow-y: visible; } } .step-block { background: #fff; border: 1.5px solid var(--color-border); border-radius: 16px; padding: 24px 26px 26px; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); scroll-margin-top: calc(var(--header-height) + 80px); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .step-block:hover { border-color: var(--color-border-strong); } .step-block.is-touched { border-color: var(--color-accent); box-shadow: 0 8px 22px rgba(234, 88, 12, 0.10); } /* Red glow + soft shake when the customer tries to add to cart without making a required selection (e.g. lanyard attachment in STEP 5). Cleared the moment they click any card in the step. The bag-hanger and beanie configurators build their own step containers (.bh-step / .bn-step) instead of .step-block, so they share this rule rather than each redefining the same red-glow treatment. */ .step-block.step-block--invalid, .bh-step.bh-step--invalid, .bn-step.bn-step--invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important; animation: stepShake 0.4s ease; } /* Keep a flagged step clear of the sticky header when it's scrolled to. */ .bh-step, .bn-step { scroll-margin-top: calc(var(--header-height) + 80px); } @keyframes stepShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* Red inline-error bubble injected into the offending step-block when the customer clicks Add-to-Cart with a required field still empty. Replaces the old native alert() popup — non-blocking, in-flow, and scoped to the field the customer actually needs to fix. Auto-dismisses when they interact with the step. */ .inline-error { margin: 0 0 12px; padding: 10px 14px 10px 38px; position: relative; background: #fef2f2; border: 1px solid #f5c6c6; border-inline-start: 4px solid #dc2626; color: #b91c1c; font-size: 13px; font-weight: 600; line-height: 1.5; border-radius: 6px; animation: inlineErrorIn 0.22s ease; } .inline-error::before { content: "!"; position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; line-height: 18px; text-align: center; background: #dc2626; color: #fff; border-radius: 50%; font-weight: 800; font-size: 12px; } @keyframes inlineErrorIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Per-field validation message, sitting directly under the control it belongs to. The step-level .inline-error bubble above can only name one problem, which isn't enough for a step like "Customise Your Lanyard" where the message, the font and the imprint-colour count can all be missing at once — the buyer needs to see which fields, not just that something is wrong. */ .field-error { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: #b91c1c; font-size: 12.5px; font-weight: 600; line-height: 1.4; animation: inlineErrorIn 0.22s ease; } .field-error::before { content: "!"; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; line-height: 15px; text-align: center; background: #dc2626; color: #fff; border-radius: 50%; font-size: 11px; font-weight: 800; } /* Inside a configurator step the inputs are capped at 520px and centred, so the message has to be capped the same way — otherwise it starts at the edge of the step body, well to the left of the field it points at. Rows whose control spans the full width (file browse rows, the clipart pair) opt back out. */ .step-block-body .field-error { max-width: 520px; margin-inline-start: auto; margin-inline-end: auto; text-align: start; } .step-block-body .subrow:has(> .browse-row) .field-error, .step-block-body .subrow:has(> .clipart-row) .field-error { max-width: none; } /* Cloth wristband rows lay their control out at the full width of the step body, so the capped-and-centred message would sit visibly inset from the field it belongs to. */ .step-block-body .wb-field > .field-error { max-width: none; margin-inline-start: 0; margin-inline-end: 0; } /* Red outline on the offending control itself. Covers the native inputs and selects as well as the custom swatch/clipart triggers that replace them. */ .field-invalid, .field-invalid.text-field, .field-invalid.select-field, .field-invalid .swatch-select-trigger, .field-invalid .clip-select-trigger, .field-invalid .cloth-cselect__trigger, .field-invalid.cloth-file, .field-invalid.browse-row { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.14); } .step-block-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; } .step-num-big { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--color-accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25); } .step-block.is-touched .step-num-big { background: var(--color-success); box-shadow: 0 4px 10px rgba(22, 163, 74, 0.25); } .step-num-big::before { content: 'STEP '; font-size: 0.5rem; letter-spacing: 0.1em; display: block; line-height: 1; opacity: 0.85; margin-bottom: 1px; } .step-block-title { flex: 1 1 auto; min-width: 0; } .step-block-title h3 { margin: 0 0 4px; font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); } .step-block-title .step-help { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; } .step-block-optional { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; background: var(--color-bg-alt); color: var(--color-text-muted); border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } .step-block-body { margin-top: 6px; } /* Tile grid (used for Step 1: pick a style) — flex so leftover cards on the last row stay horizontally centred. The minimum card width was bumped from 140px to 210px so the product photo inside each tile is visibly larger and easier to identify (lanyard/wristband styles all look quite similar at thumbnail size). */ .tile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1200px; margin: 0 auto; } .tile-grid > .tile-card { flex: 0 0 210px; } @media (max-width: 600px) { .tile-grid > .tile-card { flex: 0 0 160px; } } .tile-card { background: #fff; border: 1.5px solid var(--color-border); border-radius: 12px; padding: 12px 10px 10px; cursor: pointer; text-align: center; transition: var(--transition); display: flex; flex-direction: column; gap: 8px; position: relative; font-family: inherit; } .tile-card:hover { border-color: var(--color-accent); transform: translateY(-1px); } .tile-card.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 6px 16px rgba(234, 88, 12, 0.12); } .tile-card.is-selected::after { content: ''; position: absolute; top: 8px; inset-inline-end: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent) url("data:image/svg+xml;utf8,") no-repeat center / 12px 12px; } .tile-card .tile-img { width: 100%; aspect-ratio: 1.2 / 1; /* Always paint a clean white panel behind the product photo. The tubular lanyard hero is a transparent PNG (unlike the other styles' JPGs); if we kept the warm tint here, that single tile looked beige while the rest looked white. */ background: #fff; border-radius: 8px; overflow: hidden; display: grid; place-items: center; } .tile-card .tile-img img { width: 92%; height: 92%; object-fit: contain; } .tile-card .tile-name { font-weight: 700; font-size: 0.92rem; color: var(--color-text); line-height: 1.3; } .tile-card .tile-meta { font-size: 0.78rem; color: var(--color-text-muted); } /* Sub-row group (e.g. Step 2 has Type + Width + Length subgroups) */ .subrow { margin-top: 16px; } .subrow:first-child { margin-top: 0; } .subrow-label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--color-text); margin-bottom: 8px; } .subrow-help { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 8px; } /* Compact pill row (used for size/length) */ .pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .pill-btn { background: #fff; border: 1.5px solid var(--color-border); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 0.86rem; color: var(--color-text); cursor: pointer; transition: var(--transition); font-family: inherit; } .pill-btn:hover { border-color: var(--color-accent); color: var(--color-accent-dark); } .pill-btn.is-selected { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* ========================================================================== STEP 9 — "Different designs per card" variable-data table ------------------------------------------------------------ Layout mirrors the tablecoversnow ID-card configurator: a centred pill toggle ("Enter Data" / "Upload File"), then either an editable per-card spreadsheet OR a drag-and-drop upload zone. The spreadsheet has a sticky header where the merchant types FIELD NAMES (Name, Title, ID#…) and a body whose row-count is locked to the live order qty. ========================================================================== */ .subrow--center { display: flex; justify-content: center; } .subrow--center .pill-row { justify-content: center; } /* Restore the browser default for `hidden` on flex/grid subrows — class selectors win the cascade against the UA `[hidden] { display:none }` rule unless we re-state it here, which is why the Step 9 "Enter Data / Upload File" toggle kept showing through even when designSplit was set to "Same Design on All Cards". */ .subrow--center[hidden] { display: none !important; } /* Stacked variant of .subrow used by the Different-design note textarea: label sits on its own line, textarea stretches full-width below. The default .subrow is block-flow with inline label + control, which would crush a multi-line textarea down to one line. */ .subrow--col { display: block; } .subrow--col[hidden] { display: none !important; } .subrow--col .subrow-label { display: block; margin-bottom: 6px; font-weight: 700; } .cd-diff-note-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font: 500 13.5px/1.5 Inter, sans-serif; color: #374151; background: #fafafa; resize: vertical; min-height: 76px; } .cd-diff-note-input:focus { outline: none; border-color: #2563eb; background: #fff; } .cd-data-table-wrap { margin-top: 16px; } .cd-data-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; } .cd-add-field-btn { background: transparent; border: none; color: var(--color-accent); font-weight: 700; font-size: 0.86rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; font-family: inherit; } .cd-add-field-btn:hover { color: var(--color-accent-dark); text-decoration: underline; } .cd-add-field-plus { display: inline-block; width: 16px; height: 16px; line-height: 14px; text-align: center; font-size: 1.1rem; font-weight: 700; } .cd-data-table-scroll { border: 1px solid var(--color-border); border-radius: 10px; max-height: 380px; overflow: auto; background: #fff; } .cd-data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; } .cd-data-table thead th { position: sticky; top: 0; z-index: 2; background: #f6f8fa; border-bottom: 1px solid var(--color-border); padding: 8px 8px; font-weight: 700; color: var(--color-text); text-align: start; vertical-align: middle; } .cd-data-table th.cd-card-num-col { width: 80px; min-width: 80px; text-align: center; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); background: #f0f3f6; } .cd-data-table .cd-field-cell { position: relative; padding: 4px 6px; min-width: 160px; } .cd-data-table .cd-field-name { width: 100%; border: 1px solid var(--color-border); border-radius: 6px; padding: 6px 10px; font: 600 0.86rem/1.2 inherit; color: var(--color-text); background: #fff; box-sizing: border-box; } .cd-data-table .cd-field-name::placeholder { font-weight: 400; color: #b5bcc4; font-style: italic; } .cd-data-table .cd-field-name:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(0, 161, 178, 0.18); } .cd-field-remove { position: absolute; top: 0; inset-inline-end: 4px; border: none; background: transparent; color: #b5bcc4; font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 3px; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s; font-family: inherit; } .cd-data-table .cd-field-cell:hover .cd-field-remove { opacity: 1; } .cd-field-remove:hover { color: #d9534f; background: #fff0f0; } .cd-data-table tbody tr td { padding: 4px 6px; border-bottom: 1px solid #eef1f4; background: #fff; } .cd-data-table tbody tr:last-child td { border-bottom: none; } .cd-data-table tbody tr td.cd-card-num-cell { text-align: center; font-weight: 600; color: var(--color-text-muted); background: #fafbfc; width: 80px; min-width: 80px; } .cd-data-table .cd-value-input { width: 100%; border: 1px solid var(--color-border); border-radius: 6px; padding: 6px 10px; font: 400 0.85rem/1.2 inherit; color: var(--color-text); background: #fff; box-sizing: border-box; } .cd-data-table .cd-value-input::placeholder { color: #c2c8cf; } .cd-data-table .cd-value-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(0, 161, 178, 0.18); } .cd-table-empty { padding: 18px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } .cd-row-cap-notice { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #fff8e6; border: 1px solid #ffe5a8; color: #8a6d1a; font-size: 0.82rem; } /* --- Upload zone --------------------------------------------------------- */ .cd-upload-wrap { margin-top: 16px; } .cd-upload-zone { display: block; border: 2px dashed var(--color-border); border-radius: 12px; padding: 28px 20px; text-align: center; cursor: pointer; background: #fafbfc; transition: background 0.15s, border-color 0.15s; } .cd-upload-zone:hover, .cd-upload-zone.is-dragover { border-color: var(--color-accent); background: #f0fafc; } .cd-upload-input { display: none; } .cd-upload-zone-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; } .cd-upload-icon { font-size: 1.6rem; width: 44px; height: 44px; line-height: 44px; border-radius: 50%; background: var(--color-accent); color: #fff; font-weight: 700; } .cd-upload-text strong { display: block; font-size: 0.95rem; color: var(--color-text); margin-bottom: 2px; } .cd-upload-text small { color: var(--color-text-muted); font-size: 0.78rem; } .cd-upload-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .cd-upload-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: #f6f8fa; border: 1px solid var(--color-border); font-size: 0.85rem; } .cd-upload-item-name { flex: 1; color: var(--color-text); word-break: break-all; } .cd-upload-item-size { color: var(--color-text-muted); font-size: 0.78rem; } .cd-upload-item-remove { border: none; background: transparent; color: #b5bcc4; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px; } .cd-upload-item-remove:hover { color: #d9534f; } @media (max-width: 700px) { .cd-data-table .cd-field-cell { min-width: 140px; } .cd-data-table { font-size: 0.82rem; } } /* Tabbed swatch list (Popular / All / PMS) */ .swatch-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--color-border); margin-bottom: 12px; } .swatch-tab { background: transparent; border: none; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: var(--transition); font-family: inherit; } .swatch-tab:hover { color: var(--color-text); } .swatch-tab.is-active { color: var(--color-accent-dark); border-bottom-color: var(--color-accent); } .swatch-pane { display: none; } .swatch-pane.is-active { display: block; } /* Side block (Front Side / Back Side groups inside Step 4) — flat layout */ .side-block { margin-top: 4px; padding: 0; background: transparent; border: none; border-radius: 0; } .side-block + .side-block { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--color-border); } .side-block-title { display: none; /* hidden by default — flat look like reference */ font-size: 0.95rem; font-weight: 700; margin: 0 0 10px; color: var(--color-text); } /* When both sides are shown (back-side not hidden), reveal the titles so users can tell Front vs Back apart. */ .swatch-pane:has([data-side-back]:not([hidden])) .side-block-title { display: block; } .side-block-title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--color-border, #e5e7eb); color: var(--color-accent-dark); } /* Final big CTA at end of all steps */ .config-final-cta { margin-top: 16px; padding: 22px 26px; background: linear-gradient(135deg, var(--color-accent-soft), #fff); border: 1.5px solid var(--color-accent); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .config-final-cta h4 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: var(--color-text); } .config-final-cta p { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); } .config-final-cta .btn { white-space: nowrap; } .config-cta-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .config-cta-actions .btn { min-width: 160px; } /* Checkout form layout */ .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .form-row label { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-bottom: 8px; } .form-row-wide { grid-column: 1 / -1; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .checkout-submit { display: block; width: 100%; margin-top: 16px; padding: 14px; } .stripe-mount { padding: 12px 0 4px; } .btn-ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); } /* Sticky right summary - more compact */ .config-allsteps .summary-list { padding: 0; list-style: none; margin: 0 0 12px; } .config-allsteps .summary-list li { padding: 8px 0; border-bottom: 1px dashed var(--color-border); display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 0.86rem; } .config-allsteps .summary-list li:last-child { border-bottom: none; } .config-allsteps .summary-list li .sum-key { color: var(--color-text-muted); font-weight: 500; } .config-allsteps .summary-list li .sum-val { color: var(--color-text); font-weight: 600; } .config-allsteps .summary-list li.empty .sum-val { color: var(--color-border-strong); font-weight: 400; font-style: italic; } .config-allsteps .summary-total { padding-top: 8px; border-top: 1.5px solid var(--color-border); } .config-allsteps .summary-total .label { font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .config-allsteps .summary-total .price { font-size: 1.7rem; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; margin: 4px 0 2px; } .config-allsteps .summary-total .price-each { font-size: 0.8rem; color: var(--color-text-muted); } .config-allsteps .summary-cta { margin-top: 14px; display: grid; gap: 8px; } /* File upload for artwork */ .upload-zone { display: block; background: var(--color-bg-alt); border: 2px dashed var(--color-border-strong); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: var(--transition); } .upload-zone:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .upload-zone.has-file { border-color: var(--color-success); background: rgba(22, 163, 74, 0.06); border-style: solid; } .upload-zone input[type="file"] { display: none; } .upload-zone .upload-main { font-weight: 600; color: var(--color-text); margin-bottom: 4px; } .upload-zone .upload-help { font-size: 0.76rem; color: var(--color-text-muted); } /* ============================================================ ID-card Step 7 (Customize Card) — pill-tab layout matching the tablecoversnow.com reference. Two tabs sit on a flat (non-panel) background and animate to a filled teal pill when active. Below the tabs the panes use a stacked label + control layout (vs the default subrow horizontal layout) so the Browse / radios / msg card line up edge-to-edge with the textarea in the shared foot. ============================================================ */ .cc-tabs { display: flex; justify-content: center; gap: 16px; background: transparent; border: 0; padding: 4px 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--color-border, #e2e8f0); flex-wrap: wrap; } .cc-tab { appearance: none; font: inherit; cursor: pointer; padding: 10px 26px; min-width: 180px; border-radius: 999px; border: 1.5px solid var(--color-accent, #38b6c8); background: #fff; color: var(--color-accent, #38b6c8); font-weight: 600; font-size: 0.95rem; transition: var(--transition, all .2s ease); } .cc-tab:hover { background: rgba(56, 182, 200, 0.08); } .cc-tab.is-active { background: var(--color-accent, #38b6c8); color: #fff; box-shadow: 0 4px 12px rgba(56, 182, 200, 0.25); } .cc-pane { margin: 0; } .cc-pane:not(.is-active) { display: none; } .cc-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; } /* HTML's [hidden] sets display:none, but our .cc-field rule above defines display:flex with equal specificity and is loaded later, so it would otherwise win. Restore [hidden] semantics explicitly. */ .cc-field[hidden] { display: none; } .msg-card[hidden] { display: none; } .cc-label { font-weight: 700; font-size: 1rem; color: var(--color-text, #0f172a); line-height: 1.3; } .cc-label--caps { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text, #0f172a); text-transform: uppercase; } .cc-select.text-field, .cc-textarea.text-field { width: 100%; padding: 12px 14px; font-size: 0.95rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; background: #fff; color: var(--color-text, #0f172a); } .cc-select.text-field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 36px; } .cc-textarea.text-field { min-height: 110px; resize: vertical; line-height: 1.5; } /* "Browse Files To Upload | Browse" — flat text-field look with a teal action label on the right. Whole row is the file