/* * Escape hatch only. Prefer theme.json (Styles panel) and block-level * settings for anything editable. Put rules here only when a block * genuinely can't express them (e.g. a carousel's scroll-snap behavior). */ /* Header — Phase 3 */ /* * Header search — Phase 7 fix: was core/search with a hand-added * "query" attribute to scope it to products; replaced with the real * WooCommerce product-search block (woocommerce/product-search), used * completely bare (no attributes at all — that block registers with * zero declared attributes/supports, so styling has to happen entirely * here rather than via block-level color/border/typography controls, * which this specific block doesn't expose). Class names below are * confirmed from that block's own PHP render function, not guessed. */ .wc-block-product-search { flex: 1 1 320px; max-width: 560px; } .wc-block-product-search form { margin: 0; } .wc-block-product-search__label { /* Visually hidden but still readable by screen readers. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wc-block-product-search__fields { display: flex; align-items: center; background-color: var(--wp--preset--color--neutral-light); border-radius: 999px; overflow: hidden; padding-left: var(--wp--preset--spacing--30); } .wc-block-product-search__field { flex: 1; min-width: 0; border: none; background: transparent; padding: var(--wp--preset--spacing--20) 0; font: inherit; } .wc-block-product-search__field:focus { outline: none; } /* * The rule above removes the native focus ring from the inner input; put a * visible (teal) keyboard-focus indicator back on the whole pill instead, so * the search field is still reachable/visible for keyboard users. Uses the * accent token var (the `gold` slug now holds the teal accent) — NOT the CSS * named color `gold`. */ .wc-block-product-search__fields:focus-within { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; } .wc-block-product-search__button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: none; border-radius: 999px; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); cursor: pointer; } .wc-block-product-search__button svg { fill: currentColor; } /* * Site Logo + Site Title fallback: when no logo image has been * uploaded via the Site Logo block, WordPress renders nothing for it * (no wrapper, no placeholder on the frontend) and the grotesque * site-title wordmark is the only thing shown — a true fallback with zero * markup needed. Once a logo image IS uploaded, WordPress adds a * "wp-custom-logo" class to ; this rule hides the text wordmark * at that point so the uploaded logo replaces it instead of sitting * next to it. Remove this rule if you'd rather show both together. */ body.wp-custom-logo .cam-wordmark-fallback { display: none; } /* Homepage carousels — Phase 4 */ /* * No core block does a horizontal-scroll "carousel" — this is a * CSS-only scroll-snap row (no JS, no plugin). Visitors scroll/swipe it * directly; see the theme README for why arrow buttons aren't included * here specifically (they need a fixed, known "next card" target, which * a dynamically repeated pattern can't give without JS). */ .cam-carousel { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .cam-carousel > .cam-product-card { flex: 0 0 auto; width: 260px; scroll-snap-align: start; } /* * Product-card border (goldin.co-style flat card): a hairline neutral border on * the card GROUP — not the inner image — pairs with the softened `card` shadow * preset (in theme.json) for the clean, flat look. The card's radius comes from * the pattern's inline --wp--custom--radius--card (now 10px). */ .cam-product-card { border: 1px solid var(--wp--preset--color--neutral-light); } /* * Section imagery (store photos) — one cohesive treatment so every photo reads * like the goldin.co aesthetic: cover-cropped, rounded to the card radius, with * a dark gradient overlay wherever white text/buttons sit on top so they stay * readable regardless of the underlying photo. Background images are set inline * on the block (core/group style.background) or via core/cover; these rules add * the overlay + cropping. Content sits above the overlay via a stacking context. */ .cam-cat-tile, .cam-drop-tile { position: relative; isolation: isolate; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--wp--custom--radius--card); overflow: hidden; } .cam-cat-tile::before, .cam-drop-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 10, 0.30) 0%, rgba(10, 10, 10, 0.82) 100%); } /* Full-width CTA banner: even, slightly stronger tint for centered white text. */ .cam-cta-band { position: relative; isolation: isolate; background-size: cover; background-position: center; background-repeat: no-repeat; } .cam-cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 10, 0.64); } /* Per-slot background photos (root-relative so they survive a domain change). */ .cam-cat-sports { background-image: url('/wp-content/uploads/2026/09/cam-mj-fleer-front.jpg'); } .cam-cat-tcg { background-image: url('/wp-content/uploads/2026/09/cam-gold-pokemon-card.jpg'); } .cam-cat-comics { background-image: url('/wp-content/uploads/2026/09/cam-comics-wall.jpg'); } .cam-cat-games { background-image: url('/wp-content/uploads/2026/09/cam-games-shelf.jpg'); } .cam-cat-memorabilia { background-image: url('/wp-content/uploads/2026/09/cam-memorabilia-signed.jpg'); } .cam-drop-pokemon { background-image: url('/wp-content/uploads/2026/09/cam-gold-pokemon-card.jpg'); } .cam-drop-comics { background-image: url('/wp-content/uploads/2026/09/cam-comics-wall.jpg'); } .cam-drop-graded { background-image: url('/wp-content/uploads/2026/09/cam-football-cards-case.jpg'); } .cam-cta-band { background-image: url('/wp-content/uploads/2026/09/cam-storefront.jpg'); } /* Hero showcase image — fills the 45% column as a neat rounded rectangle. */ .cam-hero-media { margin: 0; } .cam-hero-media img { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: var(--wp--custom--radius--card); } @media (max-width: 781px) { .cam-hero-media img { height: 240px; } } /* About/Contact content images: rounded, responsive, never stretched. */ .cam-content-img img { width: 100%; height: auto; border-radius: var(--wp--custom--radius--card); } /* A row of photos kept to a uniform height so mixed portrait/landscape shots line up cleanly. */ .cam-gallery-row .wp-block-image { margin: 0; } .cam-gallery-row .wp-block-image img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--wp--custom--radius--card); } @media (max-width: 781px) { .cam-gallery-row .wp-block-image img { height: 220px; } } /* Footer brand logo lockup (logo art is on black, so a rounded badge keeps it tidy on the light footer). */ .cam-footer-logo { margin: 0; } .cam-footer-logo img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; } /* * Hero carousel: same scroll-snap technique, but each slide is * full-width (one visible at a time) and the prev/next arrows + dots * inside each slide are plain anchor links to the other slides' * `anchor` IDs (set via each Group block's own Advanced > HTML anchor * field). Fragment-link navigation natively scrolls the nearest * scrollable ancestor — no JS needed — but a static link can't know * which slide is "current", so unlike the arrows, the dots don't * highlight the active slide. */ .cam-hero-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .cam-hero-carousel::-webkit-scrollbar { display: none; } .cam-hero-slide { flex: 0 0 100%; scroll-snap-align: start; } .cam-hero-arrows a { text-decoration: none; padding: 0 var(--wp--preset--spacing--20); } .cam-hero-dots a { text-decoration: none; font-size: 0.5em; line-height: 1; padding: var(--wp--preset--spacing--20); } /* Mobile responsive pass — design-polish + full-width layout task */ /* * Shop filter sidebar (patterns/shop-archive.php): the

now * renders closed by default on every viewport (a genuine mobile * collapse/toggle), but the desktop sidebar is meant to stay * permanently open, not click-to-expand. This forces its content * visible on desktop regardless of the native open/closed state, and * disables the summary's toggle behavior there — CSS only, no JS. * Below 782px (core's own columns-stacking breakpoint, used * everywhere else in this theme for consistency) it's untouched, so * the native

toggle behavior applies. */ @media (min-width: 782px) { .cam-filter-details > summary { cursor: default; } .cam-filter-details:not([open]) > *:not(summary) { display: block; } } /* * Header — below 600px the product-search field (flex-basis 320px, * see .wc-block-product-search above) no longer fits alongside the * logo, hamburger toggle, mini-cart, Login, and Sell button on one * row. Drop it to its own full-width row below them instead of * letting it crowd/overlap — the header row's flexWrap:wrap (set on * the block itself in parts/header.html) already allows this, this * rule just controls the order/sizing so it wraps cleanly as a single * full-width row instead of an oddly-sized leftover fragment. */ @media (max-width: 600px) { .wc-block-product-search { flex: 1 1 100%; max-width: none; order: 3; } } /* * Carousels — the 260px fixed card width (set above, Phase 4) is * comfortable on desktop but leaves very little of a second card * visible at 375px, so shrink cards for narrow screens; the carousel * itself already scrolls/swipes natively via the scroll-snap rules * above, this only changes how much of it shows per view. */ @media (max-width: 480px) { .cam-carousel > .cam-product-card { width: 200px; } }