@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Exo+2:ital,wght@0,300;0,400;0,600;1,300;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap'); /* SHOP-BRIDGE-TOKENS-START — this block is exported verbatim to /shop-assets/theme.css. Keep the START/END markers; the shop-assets build fails without them. */ :root { --ease-expo: cubic-bezier(0.16,1,0.3,1); --ease-in-out: cubic-bezier(0.65,0,0.35,1); --t: 0.4s var(--ease-expo); --parallax-y: 0px; } [data-theme="dark"] { --bg: #04060f; --bg2: #070b18; --bg3: #0c1228; --bg-card: #080d1e; --border: rgba(0,210,255,0.1); --border-hi: rgba(0,210,255,0.3); --text: #d4e8ff; --text2: #6a8aaa; --text3: #2a4060; --cyan: #00d2ff; --cyan-dim: rgba(0,210,255,0.08); --cyan-glow: rgba(0,210,255,0.25); --magenta: #d400ff; --mag-dim: rgba(212,0,255,0.08); --mag-glow: rgba(212,0,255,0.25); --orange: #FF6A00; --orange-dim: rgba(255,106,0,0.1); --orange-glow: rgba(255,106,0,0.3); --blue: #1a4aff; --blue-dim: rgba(26,74,255,0.12); --shadow: 0 0 0 1px rgba(0,210,255,0.08), 0 24px 48px rgba(0,0,0,0.7); --shadow-hi: 0 0 0 1px rgba(0,210,255,0.2), 0 0 40px rgba(0,210,255,0.1), 0 24px 64px rgba(0,0,0,0.8); --scan-op: 0.025; --noise-op: 0.04; --logo-filter: brightness(0) invert(1); } [data-theme="light"] { --bg: #eef3ff; --bg2: #e4ecff; --bg3: #d8e5ff; --bg-card: #ffffff; --border: rgba(26,74,255,0.12); --border-hi: rgba(26,74,255,0.3); --text: #0a1628; --text2: #4a5a78; --text3: #a0b0cc; --cyan: #006acc; --cyan-dim: rgba(0,106,204,0.08); --cyan-glow: rgba(0,106,204,0.2); --magenta: #9900cc; --mag-dim: rgba(153,0,204,0.07); --mag-glow: rgba(153,0,204,0.18); --orange: #D45500; --orange-dim: rgba(212,85,0,0.08); --orange-glow: rgba(212,85,0,0.2); --blue: #1a4aff; --blue-dim: rgba(26,74,255,0.08); --shadow: 0 1px 0 rgba(255,255,255,0.9), 0 4px 16px rgba(26,74,255,0.08), 0 24px 48px rgba(0,0,0,0.06); --shadow-hi: 0 1px 0 rgba(255,255,255,1), 0 0 0 1px rgba(26,74,255,0.15), 0 8px 32px rgba(26,74,255,0.12); --scan-op: 0; --noise-op: 0.015; --logo-filter: brightness(0); } /* SHOP-BRIDGE-TOKENS-END */ /* ═══════════════════════════════════════════════════ IRON CLINIC — BIG CARTEL (COSMOS) OVERRIDES Served as part of /shop-assets/theme.css. Tokens (--bg, --cyan, …) are prepended from global.css at build. NOTE: no `cursor: none` here — the shop keeps the normal cursor. ═══════════════════════════════════════════════════ */ /* ── Base ── */ html { scroll-behavior: smooth; } body { font-family: 'Exo 2', sans-serif !important; background: var(--bg) !important; color: var(--text) !important; transition: background 0.4s cubic-bezier(0.16,1,0.3,1), color 0.4s cubic-bezier(0.16,1,0.3,1); } h1, h2, h3, h4, h5, h6 { font-family: 'Rajdhani', sans-serif !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text) !important; } a { color: var(--cyan); transition: color 0.2s; } a:hover { color: var(--magenta); } /* Scanline backdrop, adapted from the main site (single layer, no noise texture, stacked below the header) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(0deg, rgba(0,210,255,var(--scan-op)) 0 1px, transparent 1px 3px); } /* ── Injected header (nav.js) — icg- prefixed, mirrors main-site nav look ── */ /* Cosmos ships `` with an inline `.preloader * { opacity: 0 }` and only strips the class once its own theme.js runs. Our nav is inserted as body's first child, so it inherits that and stays invisible until (or unless) Cosmos's JS runs. (0,2,1) beats the inline rule's (0,1,1). Not reproducible in scripts/shop-mock/ — the mock omits those runtime-only body classes. */ body.preloader #icgNav, body.preloader #icgNav * { opacity: 1 !important; } #icgNav { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 24px; /* Center the nav's contents to Cosmos's own content container (.home-content is max-width:1160px, centered) so the logo lines up with the page below instead of sitting at the far edge. Falls back to a 28px gutter on narrow viewports where there's no slack. */ padding: 14px max(28px, calc((100% - 1160px) / 2)); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } #icgNav .icg-logo img { width: 36px; height: 36px; display: block; } #icgNav .icg-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; overflow-x: auto; /* mobile: scrollable row instead of drawer */ scrollbar-width: none; flex: 1; } #icgNav .icg-links::-webkit-scrollbar { display: none; } #icgNav .icg-links a { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); white-space: nowrap; text-decoration: none; position: relative; } /* Signature cyan underline-on-hover, same as the main site's #mainNav links. */ #icgNav .icg-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: width 0.3s var(--ease-expo); } #icgNav .icg-links a:hover { color: var(--cyan); } #icgNav .icg-links a:hover::after { width: 100%; } #icgNav .icg-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* Search — replaces Cosmos's .open-search trigger, which we hide along with .top-nav. Submits GET /products?search=… exactly like Cosmos's own form. */ #icgNav .icg-search { display: flex; align-items: center; } #icgNav .icg-search input { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; width: 150px; padding: 6px 10px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-right: none; border-radius: 0; outline: none; /* Safari renders type=search with a pill shape + inner shadow by default */ -webkit-appearance: none; appearance: none; } /* --text2, not --text3: the placeholder is the field's only visible label, and --text3 measured 2.2:1 (light) / 1.8:1 (dark) against the input background. --text2 clears 4.5:1 in both themes. */ #icgNav .icg-search input::placeholder { color: var(--text2); } #icgNav .icg-search input:focus { border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); } #icgNav .icg-search button { display: grid; place-items: center; width: 32px; height: 31px; background: none; border: 1px solid var(--border); border-radius: 0; color: var(--text2); cursor: pointer; } #icgNav .icg-search button:hover { border-color: var(--cyan); color: var(--cyan); } #icgNav .icg-search input:focus + button { border-color: var(--cyan); } #icgNav .icg-search svg { width: 13px; height: 13px; } /* Narrow screens: shrink the field rather than letting it push the row wide. The nav row itself never overflows — .icg-links absorbs the pressure by scrolling horizontally (see overflow-x above). */ /* Narrow screens: the inline field crowded the nav links off the row, so it collapses to a single icon button and expands on focus. CSS-only — no JS, no class toggling, and it works with a real tap (see the input note below). */ @media (max-width: 600px) { #icgNav { gap: 12px; padding: 12px 14px; } #icgNav .icg-right { gap: 8px; } /* Let the links row absorb the width change instead of overflowing the doc. (A scroll container's automatic minimum size is already 0, so this is belt-and-braces for the expanded state.) */ #icgNav .icg-links { min-width: 0; } /* COLLAPSED — exactly one 32px nav button, matching .icg-theme-toggle's footprint so the right-hand cluster reads as a consistent set. */ #icgNav .icg-search { position: relative; width: 32px; height: 32px; transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1); } /* The magnifier fills that box — this is what you SEE. */ #icgNav .icg-search button { position: absolute; inset: 0; width: 100%; height: 100%; } /* …and the input lies invisibly ON TOP of it — this is what you TAP. Deliberate: the button is type=submit, so tapping it while the field is empty would submit and navigate to /products?search=. Making the input the tap target guarantees the first tap reveals the field instead. opacity (not display:none / visibility:hidden) keeps the input focusable and keeps its aria-label in the accessibility tree; the button likewise stays a real submit control for keyboard and AT users. */ #icgNav .icg-search input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; opacity: 0; cursor: pointer; /* Both input and button are absolutely positioned, so paint order would otherwise put the button (later in DOM) on top and swallow the tap — which focuses the submit button instead of the field. */ z-index: 1; } /* EXPANDED — on tap or keyboard focus anywhere in the form. Sized with an explicit width and flex:none on purpose. Flex sizing does NOT work here: with flex-grow the links row wins the free space and the field never opens, and with a flex-basis + shrink the shrink algorithm collapses the field straight back to its 32px collapsed width. Both were measured in the browser, not assumed. The width is capped against the viewport so the row can never push the document into horizontal overflow on narrower phones. 244px is the rest of the row measured at 375px — padding (28) + logo (36) + gaps (28) + cart (98) + toggle (32) = 222 — plus ~20px of slack so a two-digit cart count can grow without cost. Yields ~131px at 375px and ~76px at 320px. The links row is squeezed to nothing while the field is open, which is the intended trade. */ #icgNav .icg-search:focus-within { flex: none; width: min(160px, calc(100vw - 244px)); } #icgNav .icg-search:focus-within input { position: static; flex: 1; min-width: 0; width: auto; padding: 6px 8px; opacity: 1; cursor: auto; border: 1px solid var(--cyan); border-right: none; } #icgNav .icg-search:focus-within button { position: static; flex: none; width: 32px; border-color: var(--cyan); } /* Keep the other two controls at their natural 32px/auto size — without this the flex row steals width from the theme toggle when the field opens, squashing it out of alignment with the rest of the cluster. */ #icgNav .icg-cart, #icgNav .icg-theme-toggle { flex: none; } } /* ── Hamburger button (hidden on desktop; shown ≤768px) ── */ #icgNav .icg-burger { display: none; width: 32px; height: 32px; place-items: center; background: none; border: 1px solid var(--border); color: var(--text2); cursor: pointer; } #icgNav .icg-burger:hover, #icgNav .icg-burger:focus-visible { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); } #icgNav .icg-burger svg { width: 17px; height: 17px; } @media (max-width: 768px) { #icgNav .icg-links { display: none; } #icgNav .icg-burger { display: grid; } } /* ═══════════════════════════════════════════════════ MOBILE DRAWER (injected by nav.js) — icg-drawer-* Mirrors the main site's .mobile-drawer; frame chrome, so it carries the cyan/magenta identity hard. Hidden entirely above 768px. ═══════════════════════════════════════════════════ */ #icgDrawer { position: fixed; top: 0; right: -320px; width: 300px; max-width: 84vw; height: 100%; z-index: 1000; background: var(--bg2); border-left: 1px solid var(--border-hi); box-shadow: -12px 0 48px rgba(0, 0, 0, 0.6), -1px 0 24px var(--cyan-glow); padding: 64px 0 24px; overflow-y: auto; transition: right 0.34s cubic-bezier(0.16, 1, 0.3, 1); } #icgDrawer.open { right: 0; } /* Cyan→magenta gradient bar across the top — both brand colours. */ #icgDrawer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 12px var(--cyan-glow); } #icgDrawerOverlay { position: fixed; inset: 0; z-index: 999; background: rgba(4, 6, 15, 0.72); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s; } #icgDrawerOverlay.open { opacity: 1; pointer-events: auto; } /* Drawer/overlay never participate on desktop. */ @media (min-width: 769px) { #icgDrawer, #icgDrawerOverlay { display: none; } } #icgDrawer .icg-drawer-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid var(--border); color: var(--magenta); cursor: pointer; } #icgDrawer .icg-drawer-close:hover, #icgDrawer .icg-drawer-close:focus-visible { border-color: var(--magenta); box-shadow: 0 0 12px var(--mag-glow); } #icgDrawer .icg-drawer-close svg { width: 16px; height: 16px; } #icgDrawer .icg-drawer-links { display: flex; flex-direction: column; } #icgDrawer .icg-drawer-link { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 24px; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); text-decoration: none; transition: color 0.2s, background 0.2s; } /* Cyan left-accent bar that slides in on hover/focus (vertical echo of the main site's underline motion). */ #icgDrawer .icg-drawer-link::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 60%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: width 0.25s var(--ease-expo); } #icgDrawer .icg-drawer-link:hover, #icgDrawer .icg-drawer-link:focus-visible { color: var(--cyan); background: var(--cyan-dim); } #icgDrawer .icg-drawer-link:hover::before, #icgDrawer .icg-drawer-link:focus-visible::before { width: 3px; } #icgDrawer .icg-drawer-link svg { width: 18px; height: 18px; opacity: 0.7; color: var(--cyan); } #icgDrawer .icg-drawer-socials { display: flex; gap: 12px; padding: 22px 24px 0; margin-top: 14px; border-top: 1px solid var(--border); } #icgDrawer .icg-drawer-social { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text2); } #icgDrawer .icg-drawer-social:hover, #icgDrawer .icg-drawer-social:focus-visible { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); } #icgDrawer .icg-drawer-social svg { width: 16px; height: 16px; } #icgNav .icg-cart { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--cyan); border: 1px solid var(--border-hi); padding: 6px 14px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; } #icgNav .icg-cart:hover { box-shadow: 0 0 12px var(--cyan-glow); } #icgNav .icg-cart-count { color: var(--magenta); font-weight: 700; } #icgNav .icg-theme-toggle { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid var(--border); color: var(--text2); cursor: pointer; } #icgNav .icg-theme-toggle:hover { border-color: var(--magenta); color: var(--magenta); box-shadow: 0 0 12px var(--mag-glow); } #icgNav .icg-theme-toggle svg { width: 15px; height: 15px; } [data-theme="dark"] #icgNav .icg-sun { display: none; } [data-theme="light"] #icgNav .icg-moon { display: none; } /* ═══════════════════════════════════════════════════ COSMOS v1.11.7 OVERRIDES Every selector below is taken from the captured theme source in docs/bigcartel/cosmos/ (layout.html, home.html, products.html, product.html, cart.html) — not guessed. ═══════════════════════════════════════════════════ */ /* ── Native Cosmos chrome — hidden ONLY once our nav has actually rendered. .announcement-message = announcement bar (layout.html) #navigation-modal = mobile nav overlay (opened from .top-nav) .top-nav = Cosmos's link bar + search/cart icons header[data-bc-hook="header"] = Cosmos's store-name/logo header The body:has(#icgNav) gate means that if theme.css loads but nav.js fails (blocked, 404, JS error), Cosmos's own header, nav and search stay visible and the shop remains fully navigable — restyled, but never headless. */ body:has(#icgNav) .announcement-message, body:has(#icgNav) #navigation-modal, body:has(#icgNav) .top-nav, body:has(#icgNav) header[data-bc-hook="header"] { display: none !important; } /* Legacy fallback: browsers without :has() cannot express the gate, so they get the old unconditional hide (correct whenever nav.js succeeds, which is the overwhelmingly common case). */ @supports not selector(:has(*)) { .announcement-message, #navigation-modal, .top-nav, header[data-bc-hook="header"] { display: none !important; } } /* ── Maintenance / coming-soon page — the one body that centres its children ── Cosmos makes a column flex container on EVERY page (cosmos-theme.css `body { display: flex; flex-direction: column }`), which is exactly why the injected #icgNav spans the full width everywhere else: default align-items:stretch. The standalone maintenance template is the only one that adds `.maintenance-page { display:flex; align-items:center; justify-content:center; padding:16px }` on top of it — flex-direction stays column, so the two centring keywords shrink-wrap the bar horizontally and float it mid-viewport with the content card. Undo just that for the nav; keep Cosmos's centred card. Affects no other page (no other template puts .maintenance-page on ). */ body.maintenance-page { /* Dropped so the bar can reach the viewport edges like it does everywhere else; the card takes over the gutter duty via max-width below. */ padding: 0; /* Cosmos's justify-content:center only behaves while everything fits. Let the card overflow (long maintenance_message, short viewport) and centring splits the overflow across BOTH ends, pushing the top — bar included — above the scrollport where it cannot be scrolled back to. Measured before this line existed: card at y=-167 on an 800px-tall viewport. Anchoring the main axis kills that; the card keeps its centred look via the auto margins below, which only apply while there IS free space. */ justify-content: flex-start; } body.maintenance-page #icgNav { align-self: stretch; } body.maintenance-page .maintenance-content { /* Auto margins eat all main-axis free space, which re-centres the card in the space under the bar AND makes Cosmos's justify-content:center a no-op — so the bar sits at the top of the flow instead of drifting down with the card. */ margin: auto; /* Restores the 16px gutter body's padding used to provide. Needed because Cosmos widens the card to 80%/100% at ≤900px/≤768px, where it would otherwise touch the viewport edges. min() keeps Cosmos's own 980px cap. */ max-width: min(980px, calc(100% - 32px)); } /* ── Cosmos's OWN accent colour ── Cosmos's compiled theme sets its accent (from the Big Cartel colour settings) to #E15C2A orange, with #B84C22 as the hover variant, via custom properties on :root. Redeclaring those same properties here retints every surface Cosmos paints with them — including the product-thumbnail border — with no selector archaeology, and keeps working if the Big Cartel setting is ever changed. Referencing var(--magenta) means it follows light/dark automatically. `!important`: every other override in this file wins on specificity/selector scoping, but this is a `:root` block competing with Cosmos's OWN `:root` block declaring the same five properties — without `!important` this only wins because our paste-in snippet is placed AFTER Cosmos's theme_css_url tag in . That's source-order-dependent and this is the one override in the file that is: if the snippet is ever pasted too early, this block loses and ALL of Cosmos's orange returns (buttons, status badges, hover links, the inventory message), not just an isolated spot. `!important` makes the purge survive a mis-ordered snippet regardless of where it lands in . */ :root { --link-hover-color: var(--magenta) !important; --button-background-color: var(--magenta) !important; --button-hover-background-color: var(--magenta) !important; --product-status-background-color: var(--magenta) !important; --inventory-status-text-color: var(--magenta) !important; } /* ── Buttons — scoped to Cosmos's OWN control classes only. Deliberately NOT `button, input[type="submit"]`: payment/express-checkout controls (PayPal / Apple Pay / Google Pay) that Big Cartel injects near the cart's checkout area must keep their vendor styling. Cosmos's own controls all carry .button or .qty-button; the :where(:not(…)) additionally excludes anything payment-branded or living in the cart's payment-messaging container (#payment-processor-messaging, cart.html). CASCADE: :where() contributes ZERO specificity, so this selector is only (0,1,0) — it LOSES to Cosmos's own `button.button, a.button, div.button` (0,1,1). Every property here that Cosmos also declares therefore needs !important. Audited against the compiled Cosmos CSS: it sets background, color, border-radius and font-weight:700 on that selector (and background/ border/color again on .button--secondary / .button--minimal at (0,1,1)) — all covered below. text-transform and letter-spacing are NOT declared by Cosmos on any .button selector, so they apply unopposed. */ .button:where(:not([class*="paypal"], [class*="apple-pay"], [class*="google-pay"], #payment-processor-messaging *)), .qty-button { font-family: 'Rajdhani', sans-serif !important; font-weight: 600 !important; /* beats button.button's font-weight: 700 */ text-transform: uppercase; letter-spacing: 0.08em; background: var(--cyan-dim) !important; color: var(--cyan) !important; border: 1px solid var(--border-hi) !important; border-radius: 0 !important; transition: box-shadow 0.2s, background 0.2s, color 0.2s; } .button:where(:not([class*="paypal"], [class*="apple-pay"], [class*="google-pay"], #payment-processor-messaging *)):hover, .qty-button:hover { box-shadow: 0 0 16px var(--cyan-glow); } /* Primary CTAs (add to cart / checkout, product.html + cart.html) get the solid treatment so they read as THE action. */ .button.add-to-cart-button, .button--checkout { background: var(--cyan) !important; color: var(--bg) !important; border-color: var(--cyan) !important; } .button.add-to-cart-button:hover, .button--checkout:hover { box-shadow: 0 0 24px var(--cyan-glow); } /* Text-like buttons (cart "Remove", product "Reset", share-cart link) */ .button--minimal { background: none !important; border: none !important; color: var(--text2) !important; } .button--minimal:hover { color: var(--magenta) !important; box-shadow: none; } /* ── Inputs — scoped to Cosmos's forms (search-modal, product form, cart quantities, contact form) so injected third-party widgets are untouched. */ .search-form .search-input, .product-form select, .product-form .product_option_select, .cart-form .product-quantity, .contact-form input:not([type="submit"]), .contact-form textarea, .contact-form select { background: var(--bg-card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 0 !important; font-family: 'JetBrains Mono', monospace !important; } /* Cyan focus on the remaining Cosmos forms (search already handled). */ .contact-form input:focus, .contact-form textarea:focus, .product-form select:focus, .product-form input:focus, .cart-form input:focus { outline: none; border-color: var(--cyan) !important; box-shadow: 0 0 10px var(--cyan-glow) !important; } /* ── Page + section headings (home.html/products.html/product.html/cart.html) ── */ .page-title, .featured-title { font-family: 'Rajdhani', sans-serif !important; text-transform: uppercase; letter-spacing: 0.08em; /* Section titles are pure frame — per the brand's "energy in the frame" rule they carry the cyan identity (with a soft glow) rather than sitting white. The magenta accent bar below adds the second brand colour. */ color: var(--cyan) !important; text-shadow: 0 0 24px var(--cyan-glow); position: relative; padding-bottom: 14px; } .page-title::after, .featured-title::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 64px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 12px var(--mag-glow); } .featured-message { color: var(--text2) !important; } /* ── Product grid → Iron Clinic card treatment. Cosmos's grid cell is .product-list-thumb (home.html/products.html); category tiles reuse the same class. CASCADE: no !important needed here. Cosmos's own .product-list-thumb is the same specificity (0,1,0) and declares only position/text-decoration/width — no overlap with what we set — and its one higher-specificity variant (.product-list--alternating .product-list-thumb) sets width only. These properties are unopposed; the equal-specificity tie is settled by source order, and theme.css is always loaded after Cosmos's stylesheet. ── */ .product-list-thumb { background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .product-list-thumb:hover { border-color: var(--cyan); box-shadow: var(--shadow-hi), 0 0 24px var(--cyan-glow); transform: translateY(-2px); } a.product-list-link { color: var(--text) !important; text-decoration: none; } .product-list-thumb-info { padding: 10px 12px 14px; } .product-list-thumb-name { font-family: 'Rajdhani', sans-serif !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text) !important; } .product-list-thumb-options-description { color: var(--text2) !important; } /* Prices — JetBrains Mono + magenta, everywhere Cosmos prints money: grid (.product-list-thumb-price), product page (.product-detail__pricing), cart line items + subtotal (cart.html). Magenta rather than orange: the shop carries no orange. Still an "instrument" — mono, no glow — which is what keeps it distinct from magenta frame accents that DO glow. */ .product-list-thumb-price, .product-detail__pricing, .cart-item-price, .cart-item-unit-price, .cart-subtotal__amount, .price-suffix { font-family: 'JetBrains Mono', monospace !important; color: var(--magenta) !important; } .price-suffix { color: var(--text2) !important; } /* Status badges ("On sale" = status-primary, "Sold out"/"Coming soon" = status-secondary; both in grid thumbs and .product-detail__status). CASCADE: this selector matches Cosmos's own (0,1,0) rules for the same two classes, so font-size / text-transform / letter-spacing win on source order (theme.css loads last); border-radius takes !important because Cosmos sets var(--border-radius-sm) there. The .status-* colors below need !important for a different reason: Cosmos qualifies them as `.product-list-thumb-status.status-primary` (0,2,0), which outranks us. Cosmos's higher-specificity status rules that we do NOT fight (.product-list-thumb-info .product-list-thumb-status and the .product-list-link--hover variants) only set display:none — intentional Cosmos behavior for the duplicate badge, left alone. */ .product-list-thumb-status, .product-detail__status { font-family: 'JetBrains Mono', monospace !important; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 0 !important; } .status-primary { background: var(--mag-dim) !important; color: var(--magenta) !important; border: 1px solid var(--magenta) !important; } .status-secondary { /* Frame chrome — was --text2 grey, which read as flat. Cyan gives the grid its brand identity ("Coming soon"/"Sold out" badges). Instruments (price) stay magenta-mono; this is a container label, so it carries colour. */ background: var(--cyan-dim) !important; color: var(--cyan) !important; border: 1px solid var(--border-hi) !important; } /* ── Footer (layout.html: footer[data-bc-hook="footer"]) ── */ footer[data-bc-hook="footer"] { background: var(--bg2) !important; color: var(--text2) !important; border-top: 1px solid var(--border); } /* Footer frame energy — headings cyan (Rajdhani), links cyan-on-hover, credit muted. One self-contained title rule (no reliance on a prior grey rule's font-size); the generic `footer a` below covers .footer-nav links too. */ footer[data-bc-hook="footer"] .footer-nav-title { font-family: 'Rajdhani', sans-serif !important; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cyan) !important; } footer[data-bc-hook="footer"] a { color: var(--text2) !important; transition: color 0.2s; } footer[data-bc-hook="footer"] a:hover { color: var(--cyan) !important; } footer[data-bc-hook="footer"] .credit-container, footer[data-bc-hook="footer"] .credit-container a { color: var(--text3) !important; } /* ── Misc Cosmos surfaces ── */ .message-banner { background: var(--bg-card) !important; color: var(--text2) !important; border: 1px solid var(--border); } .message-banner--no-bg { background: none !important; border: none; } /* Empty-cart and centered banners get a cyan frame accent (frame chrome, not an instrument). Base .message-banner styling already exists above. */ .message-banner--empty-cart, .message-banner--centered { color: var(--cyan) !important; letter-spacing: 0.04em; } /* Cosmos's search modal. Unreachable in the normal path — its only trigger (.open-search) lives in .top-nav, which we hide, and our injected nav searches via its own form instead. Kept because it IS reachable in the nav.js-failed fallback above: .top-nav stays visible then, so .open-search still opens this modal and it must not render as unstyled Cosmos cream. */ #search-modal .modal-content { background: var(--bg2) !important; } /* ── Light mode ── The rules above resolve through tokens, so most surfaces adapt on their own (solid CTAs stay readable: var(--bg) is near-white on light --cyan). Add [data-theme="light"] overrides here as visual checks find gaps. */