/* ========================================================================== Coaster catalogue — page-specific styles Depends on tokens from main.css: --color-black --color-near-black --color-dark --color-white --color-grey-mid --color-accent --color-accent-dim --border-dark --radius-sm --radius-md --transition-base --nav-height ========================================================================== */ .cst { --cst-tile: #101010; --cst-tile-core: #161616; --cst-tile-edge: rgba(201, 168, 76, 0.14); --cst-art-opacity: 1; --cst-gap: 18px; } /* The picker hides things by setting the `hidden` attribute, but several of those elements (.cst-field, .cst-card__controls, .cst-notice) carry an author `display` rule, and any author rule outranks the UA stylesheet's `[hidden] { display: none }`. Without this they stay on screen with the attribute set — which is how the acrylic colours showed under plywood and how the card controls appeared before a design was picked. State it explicitly. */ [data-coasters] [hidden] { display: none !important; } /* ---------- material preview ------------------------------------------- The previews are a flat light artwork on a transparent background, so an SVG feFlood/feComposite filter recolours them to whatever the customer picked. Black acrylic would vanish on a dark tile, so that one flips the tile to a pale surface instead — like the coaster sat on a light table. The attribute lives on so the lightbox (appended to body) gets it. ----------------------------------------------------------------------- */ :root[data-cst-tint="white"] .cst-tile img, :root[data-cst-tint="white"] .cst-lightbox__views img { filter: url(#cst-tint-white); } :root[data-cst-tint="clear"] .cst-tile img, :root[data-cst-tint="clear"] .cst-lightbox__views img { filter: url(#cst-tint-clear); opacity: 0.5; } :root[data-cst-tint="red"] .cst-tile img, :root[data-cst-tint="red"] .cst-lightbox__views img { filter: url(#cst-tint-red); } :root[data-cst-tint="black"] .cst-tile img, :root[data-cst-tint="black"] .cst-lightbox__views img { filter: url(#cst-tint-black); } :root[data-cst-tint="black"] .cst { --cst-tile: #bdb7aa; --cst-tile-core: #d5d0c4; --cst-tile-edge: rgba(0, 0, 0, 0.25); } :root[data-cst-tint="black"] .cst-tile__ref, :root[data-cst-tint="black"] .cst-tile__zoom { color: rgba(0, 0, 0, 0.45); } :root[data-cst-tint="black"] .cst-lightbox__views figure > div { background: radial-gradient(circle at 50% 42%, #d5d0c4 0%, #bdb7aa 72%); border-color: rgba(0, 0, 0, 0.25); } :root[data-cst-tint="clear"] .cst { --cst-tile: #12181a; --cst-tile-core: #1d2426; } /* ---------- intro callout ---------- */ .cst-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 32px; padding: 16px 20px; background: rgba(201, 168, 76, 0.06); border-left: 2px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .cst-callout p { margin: 0; color: var(--color-grey-mid); font-size: 0.9375rem; } .cst-callout strong { color: var(--color-white); font-weight: 600; } /* ---------- spec panel ---------- */ .cst-specs { margin-top: 32px; padding: 28px; background: var(--color-near-black); border: var(--border-dark); border-radius: var(--radius-md); display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; } .cst-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* The colour row only appears for acrylic — give it the full width so the four swatches sit on one line rather than wrapping in a narrow column. */ .cst-field[data-colour-field] { grid-column: 1 / -1; } .cst-field[data-colour-field] .cst-field__hint { max-width: 62ch; } /* Presentation sits on its own row — three fairly long labels wrap badly in a 230px column. */ .cst-field[data-presentation-field] { grid-column: 1 / -1; } .cst-field[data-presentation-field] .cst-field__hint { max-width: 62ch; } /* Packaging photographs. Real photos, not the flat coaster artwork, so they are deliberately outside the .cst-tile selectors the material tint filter targets. */ .cst-photos { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; } .cst-photos__fig { margin: 0; width: 190px; max-width: 100%; } .cst-photos__fig img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: var(--border-dark); border-radius: var(--radius-md); background: var(--color-dark); } .cst-photos__fig figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-grey-mid); } @media (max-width: 560px) { .cst-photos__fig { width: calc(50% - 8px); } .cst-photos__fig figcaption { letter-spacing: 0.04em; } } .cst-field__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .cst-field__hint { font-size: 0.8125rem; line-height: 1.55; color: var(--color-grey-mid); } .cst-seg { display: flex; flex-wrap: wrap; gap: 6px; } .cst-seg--swatch button { display: inline-flex; align-items: center; gap: 8px; } .cst-swatch { width: 13px; height: 13px; flex: none; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .cst-seg button { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; padding: 8px 16px; cursor: pointer; color: var(--color-grey-mid); background: var(--color-dark); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base); } .cst-seg button:hover { color: var(--color-white); border-color: rgba(201, 168, 76, 0.5); } .cst-seg button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-black); } /* ---------- fine-detail warning ---------- */ .cst-notice { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: 0.875rem; line-height: 1.6; color: var(--color-accent); background: rgba(201, 168, 76, 0.08); border: 1px solid rgba(201, 168, 76, 0.28); border-radius: var(--radius-md); } .cst-notice__icon { flex: none; font-size: 1rem; line-height: 1.4; } /* Neutral variant — plain information, not a warning. Keeps gold meaningful on the fine-detail notice, which is the one that actually needs attention. */ .cst-notice--info { color: var(--color-grey-mid); background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } .cst-notice--info strong { color: var(--color-white); } .cst-notice strong { color: var(--color-white); font-weight: 600; } /* ---------- sticky toolbar ---------- */ .cst-toolbar { position: sticky; top: var(--nav-height); z-index: 30; margin-top: 48px; padding-block: 14px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; background: rgba(10, 10, 10, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cst-filters { display: flex; flex-wrap: wrap; gap: 6px; } .cst-filters button { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 13px; cursor: pointer; color: var(--color-grey-mid); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); transition: color var(--transition-base), background var(--transition-base); } .cst-filters button:hover { color: var(--color-white); } .cst-filters button[aria-pressed="true"] { color: var(--color-accent); background: rgba(201, 168, 76, 0.1); border-color: rgba(201, 168, 76, 0.32); } .cst-toolbar__right { display: flex; align-items: center; gap: 16px; } .cst-tally { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-grey-mid); font-variant-numeric: tabular-nums; white-space: nowrap; } .cst-tally b { color: var(--color-accent); font-weight: 500; } /* ---------- collections ---------- */ .cst-collection { padding-top: 56px; scroll-margin-top: calc(var(--nav-height) + 84px); } .cst-order { scroll-margin-top: calc(var(--nav-height) + 84px); } .cst-collection__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cst-collection__head h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin: 0; } .cst-collection__range { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } /* Shape control scoped to one collection — only rendered for collections whose designs cut both ways, so it never implies tiles or trees can change shape. */ .cst-collection__shape { flex: none; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; } .cst-collection__shape-label, .cst-collection__shape-hint { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-grey-mid); } .cst-collection__shape-hint { opacity: 0.75; } .cst-seg--sm button { padding: 6px 14px; font-size: 0.75rem; } @media (max-width: 560px) { .cst-collection__shape-hint { width: 100%; } } .cst-collection__note { flex: none; width: 100%; margin: 0; max-width: 68ch; font-size: 0.9375rem; line-height: 1.65; color: var(--color-grey-mid); } /* ---------- grid + cards ---------- */ .cst-grid { display: grid; gap: var(--cst-gap); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding-top: 24px; } .cst-card { display: flex; flex-direction: column; overflow: hidden; background: var(--color-near-black); border: var(--border-dark); border-radius: var(--radius-md); transition: border-color var(--transition-base), transform var(--transition-base); } .cst-card:hover { border-color: rgba(201, 168, 76, 0.35); transform: translateY(-3px); } .cst-card.is-picked { border-color: var(--color-accent); } .cst-tile { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; padding: 14px; cursor: zoom-in; background: radial-gradient(circle at 50% 42%, var(--cst-tile-core) 0%, var(--cst-tile) 70%); border: none; border-bottom: 1px solid var(--cst-tile-edge); } .cst-tile img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; } .cst-tile__ref { position: absolute; top: 10px; left: 12px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.34); font-variant-numeric: tabular-nums; } .cst-tile__zoom { position: absolute; bottom: 10px; right: 12px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); opacity: 0; transition: opacity var(--transition-base); } .cst-tile:hover .cst-tile__zoom, .cst-tile:focus-visible .cst-tile__zoom { opacity: 1; } .cst-tile__check { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; color: var(--color-black); background: var(--color-accent); border-radius: 50%; } .cst-card.is-picked .cst-tile__check { display: flex; } .cst-card__body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .cst-card__name { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-white); } .cst-card__tags { display: flex; flex-wrap: wrap; gap: 6px; } .cst-tag { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; color: var(--color-grey-mid); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); } .cst-tag--fine { color: var(--color-accent); border-color: rgba(201, 168, 76, 0.35); } .cst-card__pick { margin-top: auto; width: 100%; padding: 10px 12px; cursor: pointer; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-grey-mid); background: var(--color-dark); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); transition: color var(--transition-base), border-color var(--transition-base); } .cst-card__pick:hover { color: var(--color-white); border-color: rgba(201, 168, 76, 0.5); } .cst-card.is-picked .cst-card__pick { color: var(--color-accent); border-color: rgba(201, 168, 76, 0.45); background: rgba(201, 168, 76, 0.08); } /* ---------- per-card controls ---------- */ .cst-card__controls { display: flex; flex-direction: column; gap: 10px; } .cst-qtyrow { display: flex; align-items: center; gap: 10px; } .cst-shape { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--color-grey-mid); } /* Sits in the card body above "Pick this design", so a visitor can compare the two cuts before committing to the design. */ .cst-shape--toggle { display: block; width: 100%; margin-bottom: 8px; padding: 7px 9px; cursor: pointer; text-align: center; background: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base); } .cst-shape--toggle:hover, .cst-shape--toggle:focus-visible { color: var(--color-accent); border-color: rgba(201, 168, 76, 0.5); background: rgba(201, 168, 76, 0.06); } .cst-shape--fixed { display: block; margin-bottom: 8px; padding: 7px 0; text-align: center; } .cst-qtyrow__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-grey-mid); } .cst-stepper { margin-left: auto; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); overflow: hidden; } .cst-stepper button { width: 30px; height: 30px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--color-grey-mid); background: var(--color-dark); border: none; transition: color var(--transition-base), background var(--transition-base); } .cst-stepper button:hover { color: var(--color-accent); background: rgba(201, 168, 76, 0.1); } .cst-stepper__value { min-width: 34px; text-align: center; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-white); font-variant-numeric: tabular-nums; } .cst-engrave { display: flex; flex-direction: column; gap: 5px; } .cst-engrave label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .cst-engrave input { width: 100%; padding: 8px 10px; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-white); background: var(--color-dark); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); } .cst-engrave input:focus { outline: none; border-color: rgba(201, 168, 76, 0.5); } /* ---------- order section ---------- */ .cst-order { margin-top: 72px; display: grid; gap: 32px; grid-template-columns: 1fr 1fr; align-items: start; } .cst-order__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .cst-summary { padding: 20px; max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; background: var(--color-near-black); border: var(--border-dark); border-radius: var(--radius-md); } .cst-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .cst-summary__name { color: var(--color-white); } .cst-summary__ref { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); margin-right: 8px; } .cst-summary__qty { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-grey-mid); white-space: nowrap; font-variant-numeric: tabular-nums; } .cst-summary__engrave { flex-basis: 100%; padding-left: 30px; font-size: 0.8125rem; font-style: italic; color: var(--color-grey-mid); } .cst-summary__total { margin-top: 4px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.16); } .cst-summary__total .cst-summary__name { color: var(--color-grey-mid); } .cst-summary__total .cst-summary__qty { color: var(--color-white); } .cst-summary__empty { margin: 0; color: var(--color-grey-mid); } .cst-actions { display: flex; flex-wrap: wrap; gap: 12px; } .cst-actions .btn[aria-disabled="true"], .cst-actions .btn:disabled { opacity: 0.4; pointer-events: none; } /* ---------- lightbox ---------- */ .cst-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 5, 5, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cst-lightbox__panel { width: 100%; max-width: 800px; max-height: 100%; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 20px; background: var(--color-near-black); border: var(--border-dark); border-radius: var(--radius-md); } .cst-lightbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .cst-lightbox__head h3 { margin: 4px 0 0; font-size: 1.5rem; } .cst-lightbox__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .cst-lightbox__close { flex: none; width: 36px; height: 36px; cursor: pointer; font-size: 1.125rem; line-height: 1; color: var(--color-grey-mid); background: var(--color-dark); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; transition: color var(--transition-base), border-color var(--transition-base); } .cst-lightbox__close:hover { color: var(--color-accent); border-color: rgba(201, 168, 76, 0.5); } .cst-lightbox__views { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .cst-lightbox__views figure { margin: 0; display: flex; flex-direction: column; gap: 10px; } .cst-lightbox__views figure > div { padding: 20px; background: radial-gradient(circle at 50% 42%, var(--cst-tile-core) 0%, var(--cst-tile) 72%); border: 1px solid var(--cst-tile-edge); border-radius: var(--radius-md); } .cst-lightbox__views img { display: block; width: 100%; user-select: none; -webkit-user-drag: none; } .cst-lightbox__views figcaption { text-align: center; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-grey-mid); } /* ---------- toast ---------- */ .cst-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 300; padding: 12px 22px; font-size: 0.875rem; color: var(--color-black); background: var(--color-accent); border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3); } /* ---------- responsive ---------- */ @media (max-width: 900px) { .cst-order { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cst-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; } .cst-specs { padding: 20px; gap: 22px; } .cst-card__body { padding: 13px; gap: 8px; } .cst-card__name { font-size: 0.9375rem; } .cst-toolbar { gap: 10px; } .cst-toolbar__right { width: 100%; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .cst-card:hover { transform: none; } .cst *, .cst-lightbox *, .cst-toast { transition: none !important; animation: none !important; } }