/* * ForsakenRO shared chrome + theming for the Tokenshop. * Tokens + header/footer styles ported from ../site-development * (BaseLayout.astro :root/[data-theme], Header.astro, Footer.astro). * * Two jobs: * 1. Provide the site-dev design tokens (light + dark) on . * 2. Style the shared header/footer chrome, and remap the WooCommerce/QuickMart * block presets to the themed tokens so dark mode themes the whole storefront. */ /* ---- Design tokens (verbatim from site-development) ---- */ :root { color-scheme: light; --blue: #3d8fd4; --blue-dark: #2a6fa8; --blue-light: #5aaae8; --ink: #333333; --muted: #666666; --surface: #f4f4f4; --white: #ffffff; --border: #e0e0e0; --header-top: #222222; --footer-bg: #1a1a1a; --purple: #8866bb; --card: #ffffff; --card-alt: #f9f9f9; --shadow: rgba(0, 0, 0, 0.12); } html[data-theme="dark"] { color-scheme: dark; --blue: #4d9ae0; --blue-dark: #3d8fd4; --blue-light: #6fb4ec; --ink: #e4e6e8; --muted: #9aa3ab; --surface: #0f1318; --white: #1a1f27; --border: #2b333d; --purple: #b492e0; --card: #1a1f27; --card-alt: #222834; --shadow: rgba(0, 0, 0, 0.6); } /* ---- Remap block-theme presets to themed tokens (DARK MODE ONLY) ---- */ /* WordPress defines the preset vars on `:root{}` with baked hex values (gray-1000 #1a1a1a etc). To beat that specificity we scope our overrides to `:root[data-theme="dark"]` (0-2-0 > WP's 0-1-0) and only in dark mode — light mode already uses the correct baked FRO palette from theme.json. Remapping the grays to themed tokens means one toggle re-themes the whole storefront. */ :root[data-theme="dark"] { --wp--preset--color--gray-100: var(--card); /* was #fff surfaces */ --wp--preset--color--gray-200: var(--surface); /* was #f4f4f4 page bg */ --wp--preset--color--gray-500: var(--border); /* borders */ --wp--preset--color--gray-800: var(--muted); /* secondary text */ --wp--preset--color--gray-900: var(--ink); /* body text */ --wp--preset--color--gray-1000: var(--ink); /* headings */ /* keep primary-500 = blue in both modes (already correct) */ } body { background: var(--surface); color: var(--ink); } /* ---- Dark-mode defensive layer for WP/Woo core surfaces ---- */ /* Core block + WooCommerce CSS hardcodes #fff/#000 on interactive surfaces that the preset-var remap can't reach (form fields, nav dropdowns, notices, tables). Re-theme the user-visible ones so dark mode is consistent. */ :root[data-theme="dark"] { /* form fields (checkout / cart / account / search) */ } :root[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .wc-block-components-text-input input, :root[data-theme="dark"] .wp-block-search__inside-wrapper { background-color: var(--card) !important; border-color: var(--border) !important; color: var(--ink) !important; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--muted); } /* nav submenu dropdowns (core hardcodes #fff bg / #000 text) */ :root[data-theme="dark"] .wp-block-navigation__submenu-container { background-color: var(--card) !important; border-color: var(--border) !important; color: var(--ink) !important; } /* WooCommerce notices + info boxes */ :root[data-theme="dark"] .woocommerce-message, :root[data-theme="dark"] .woocommerce-info, :root[data-theme="dark"] .woocommerce-error, :root[data-theme="dark"] .wc-block-components-notice-banner { background-color: var(--card-alt) !important; color: var(--ink) !important; } /* cart / order tables */ :root[data-theme="dark"] table.shop_table, :root[data-theme="dark"] .wc-block-cart-items, :root[data-theme="dark"] .wc-block-components-totals-item { background-color: transparent; color: var(--ink); } :root[data-theme="dark"] table.shop_table td, :root[data-theme="dark"] table.shop_table th { border-color: var(--border) !important; } /* Mini-cart slide-out drawer (opens from the cart icon). Woo renders it in a fixed overlay with a hardcoded #fff panel that the preset remap can't reach, so theme it explicitly in dark mode. */ :root[data-theme="dark"] .wc-block-components-drawer, :root[data-theme="dark"] .wc-block-components-drawer__content, :root[data-theme="dark"] .wp-block-woocommerce-mini-cart-contents, :root[data-theme="dark"] .wc-block-mini-cart__drawer, :root[data-theme="dark"] .wc-block-mini-cart__template-part { background-color: var(--card) !important; color: var(--ink) !important; } :root[data-theme="dark"] .wc-block-mini-cart__title, :root[data-theme="dark"] .wc-block-mini-cart__title *, :root[data-theme="dark"] .wc-block-components-product-name, :root[data-theme="dark"] .wc-block-mini-cart__footer-subtotal, :root[data-theme="dark"] .wc-block-mini-cart__footer-subtotal * { color: var(--ink) !important; } :root[data-theme="dark"] .wc-block-mini-cart__footer, :root[data-theme="dark"] .wc-block-mini-cart-items, :root[data-theme="dark"] .wc-block-cart-item__wrap { border-color: var(--border) !important; } :root[data-theme="dark"] .wc-block-components-drawer__close { color: var(--ink) !important; } /* ===================================================================== Shared header chrome (ported from site-development Header.astro) ===================================================================== */ .fro-chrome * { box-sizing: border-box; } .fro-topbar { background: var(--header-top); font-size: 0.78rem; color: #aaa; } .fro-topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; height: 32px; } .fro-topbar-left, .fro-topbar-right { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; align-items: center; } .fro-topbar-left a { color: #ccc; text-decoration: none; font-size: 0.78rem; } .fro-topbar-left a:hover { color: #fff; } .fro-topbar-right li { color: #aaa; font-size: 0.78rem; display: flex; align-items: center; gap: 0.25rem; } .fro-topbar-right li.fro-status-item { cursor: help; } .fro-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #666; } .fro-status-dot.online { background: #4caf50; } .fro-main-header { background: var(--card); border-bottom: 1px solid var(--border); } .fro-main-inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .fro-logo { font-size: 1.45rem; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -0.03em; white-space: nowrap; } .fro-logo span { color: var(--blue); } .fro-logo:hover { text-decoration: none; } .fro-nav { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; } .fro-nav-link { padding: 0.3rem 0.7rem; border-radius: 4px; font-size: 0.9rem; color: var(--ink); text-decoration: none; transition: background 0.15s, color 0.15s; } .fro-nav-link:hover { background: var(--surface); color: var(--blue); } .fro-btn-join { margin-left: 0.5rem; padding: 0.35rem 1rem; background: var(--blue); color: #fff; border-radius: 4px; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background 0.15s; } .fro-btn-join:hover { background: var(--blue-dark); color: #fff; } .fro-theme-toggle { display: flex; width: 34px; height: 34px; margin-left: 0.35rem; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; } .fro-theme-icon { width: 18px; height: 18px; fill: currentColor; } .fro-theme-toggle .sun-icon { display: none; } html[data-theme="dark"] .fro-theme-toggle .moon-icon { display: none; } html[data-theme="dark"] .fro-theme-toggle .sun-icon { display: block; } /* Shop utility row: product search + cart, themed */ .fro-shop-bar { background: var(--card-alt); border-bottom: 1px solid var(--border); } .fro-shop-inner { max-width: 1100px; margin: 0 auto; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 1rem; } .fro-shop-inner .wp-block-search { flex: 1; margin: 0; } .fro-shop-inner .wc-block-mini-cart { margin-left: auto; } /* Category nav in the shop bar: themed link color, readable in both modes. */ .fro-shop-inner .wp-block-navigation a { color: var(--ink); } .fro-shop-inner .wp-block-navigation a:hover { color: var(--blue); } /* Search field: theme its surface so it isn't a jarring white box on the dark toolbar. Targets the QuickMart inside-wrapper (hardcoded #fff by default). */ .fro-shop-inner .wp-block-search__inside-wrapper { background-color: var(--card) !important; border-color: var(--border) !important; } .fro-shop-inner .wp-block-search__input { background: transparent; color: var(--ink); } .fro-shop-inner .wp-block-search__input::placeholder { color: var(--muted); } .fro-shop-inner .wp-block-search button { color: var(--ink); } /* Mobile menu toggle */ .fro-menu-toggle { display: none; width: 40px; height: 36px; padding: 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; flex-direction: column; gap: 0.25rem; align-items: center; justify-content: center; } .fro-menu-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } @media (max-width: 680px) { .fro-topbar-right { display: none; } .fro-menu-toggle { display: flex; } .fro-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; } .fro-nav.is-open { display: flex; } } /* ===================================================================== Shared footer chrome (ported from site-development Footer.astro) ===================================================================== */ .fro-footer { background: var(--footer-bg); color: #cfd3d8; font-size: 0.9rem; } .fro-footer-inner { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; } .fro-footer .fro-col-heading { display: block; color: #fff; font-weight: 700; margin-bottom: 0.6rem; font-size: 0.95rem; } .fro-footer a { display: block; color: #cfd3d8; text-decoration: none; padding: 0.2rem 0; } .fro-footer a:hover { color: var(--blue-light); } .fro-footer-bottom { border-top: 1px solid #333; text-align: center; padding: 1rem; color: #9aa0a6; font-size: 0.82rem; } /* ===================================================================== Product cards + SALE badge (match cp-development component language: soft-shadow rounded panels, blue pill badges) ===================================================================== */ /* ---- Product grid: ONE bordered panel around the whole row, not a window around every item. The product-template grid gets the border/shadow; each card is transparent and borderless, separated only by gap. ---- */ .wc-block-product-template__responsive { column-gap: 1.5rem; row-gap: 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgba(31, 63, 93, 0.05); padding: 1.5rem; } /* Cards: flat, no per-item window. Still a flex column so buttons bottom-align. */ .wc-block-product, li.product { position: relative; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; /* Equal-height cards: stack contents so variable-length titles don't stagger the price/button rows across a grid row. */ display: flex !important; flex-direction: column; height: 100%; } /* The card itself is the flex column (image, title, price, button are direct children). Push the button to the bottom edge so every "Add to cart" / "Select options" bottom-aligns across a row regardless of title length. Handles both the block grid (.wp-block-button / product-button) and, if a .wp-block-group wrapper is ever present, its child button too. */ .wc-block-product > .wp-block-button, .wc-block-product > .wc-block-components-product-button, .wc-block-product > .wp-block-group:first-child, li.product > .wp-block-button, li.product > .wc-block-components-product-button { margin-top: auto; } .wc-block-product > .wp-block-group:first-child { display: flex; flex-direction: column; flex: 1 1 auto; } .wc-block-product > .wp-block-group > .wp-block-button, .wc-block-product > .wp-block-group > .wc-block-components-product-button { margin-top: auto; } /* Archive card wrapper (.wp-block-group holding image-group + title-group + button) stretches to full card height; keep its inner blocks packed to the top so the image sits right above the title, and only the button drops to the bottom. Without this the flex stretch leaves a dead gray band under the image. */ .wc-block-product > .wp-block-group:first-child { justify-content: flex-start; } .wc-block-product > .wp-block-group > .wp-block-group { flex: 0 0 auto; width: 100%; align-self: stretch; } /* Subtle hover lift on the image only (no per-card border to highlight). */ .wc-block-product .wc-block-components-product-image { transition: transform 0.18s ease; } .wc-block-product:hover .wc-block-components-product-image { transform: translateY(-2px); } /* ---- Product image: CONSISTENT SQUARE MEDIA STAGE. The catalog mixes tiny token coins (100x100) with full-size package art (270x270); without a fixed box the small images render at natural size and, because the grid rows are equal-height, leave a large dead gap between the image and the title (the button is pinned to the row bottom). Force every image wrapper to a 1:1 box and center the art with object-fit:contain so token coins and package sprites occupy the same height — gap gone, small art stays crisp (centered, not upscaled). The is also the positioning context for the SALE badge. All product art in this catalog is square, so contain adds no letterbox bands. */ .wc-block-product .wc-block-components-product-image { margin-bottom: 0.5rem; width: 100%; align-self: stretch; } .wc-block-product .wc-block-components-product-image > a, li.product > a { position: relative; display: block; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: var(--card-alt, #eef1f4); border-radius: 8px; } .wc-block-product .wc-block-components-product-image__inner-container { position: static; } .wc-block-product .wc-block-components-product-image img, li.product > a img { position: absolute; inset: 10px; margin: auto; max-width: calc(100% - 20px); max-height: calc(100% - 20px); width: auto; height: auto; object-fit: contain !important; border-radius: 4px; } /* ---- SALE badge: overlay the media corner, FRO gold so "sale" is semantic (not another blue control that blends into the CTA) ---- */ .wc-block-components-product-sale-badge, li.product .onsale { position: absolute !important; top: 0.6rem; right: 0.6rem; left: auto; z-index: 5; min-height: 0; min-width: 0; margin: 0 !important; background: var(--secondary-500, #f0c65a) !important; border: 0 !important; border-radius: 999px !important; color: #3a2d00 !important; font-size: 0.68rem !important; font-weight: 800 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0.06em; padding: 0.32em 0.66em !important; box-shadow: 0 2px 8px rgba(31, 63, 93, 0.28); text-transform: uppercase; } .wc-block-components-product-sale-badge span { color: #3a2d00 !important; background: transparent !important; } /* Card price: smaller so it stays on one line. Centered to match the title. */ .wc-block-product .wc-block-components-product-price, li.product .price { font-size: 0.85rem !important; line-height: 1.3; text-align: center; display: block; width: 100%; } /* Prices: sale price emphasised, original struck through in muted. */ .wc-block-components-product-price del, .price del { color: var(--muted); opacity: 0.8; font-weight: 400; margin-right: 0.35rem; } .wc-block-components-product-price ins, .price ins { color: var(--blue); font-weight: 700; text-decoration: none; } /* Product title links: consistent weight + ink colour in every grid (home, shop, search, related) so titles stop switching between blue and black. */ .wc-block-grid__product-title, .wc-block-components-product-title, .wc-block-product .wp-block-post-title, .wc-block-product .wp-block-post-title a, li.product .woocommerce-loop-product__title { color: var(--ink) !important; font-weight: 700; font-size: 0.9rem !important; line-height: 1.3; text-align: center !important; display: block; width: 100%; } .wc-block-product .wp-block-post-title a:hover, .wc-block-grid__product-title a:hover, .wc-block-components-product-title a:hover, li.product .woocommerce-loop-product__title:hover { color: var(--blue) !important; } /* ---- Catalog sorting does not inherit it and renders abnormally large. Force a compact, on-brand control. ---- */ .wc-block-catalog-sorting select, .wc-block-catalog-sorting .orderby, .woocommerce-ordering select, select.orderby { font-size: 0.85rem !important; line-height: 1.3 !important; height: auto !important; min-height: 0 !important; padding: 0.45rem 2rem 0.45rem 0.75rem !important; max-width: 220px; border-radius: 6px !important; } /* ---- Order-summary quantity badge (cart + checkout): the default is a pale circle with a pale number — nearly invisible on our dark surfaces. Make it a solid high-contrast blue chip with a white number in both themes. ---- */ .wc-block-components-order-summary-item__quantity { background: var(--blue, #3d8fd4) !important; color: #fff !important; border: 2px solid var(--card, #ffffff) !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; } .wc-block-components-order-summary-item__quantity, .wc-block-components-order-summary-item__quantity * { color: #fff !important; } /* ---- Commerce action buttons: compact, equal, aligned, white text in both themes. Replaces the oversized / full-width-on-archive treatment. ---- */ .wc-block-product .wp-block-button, .wc-block-product .wc-block-components-product-button { display: flex; justify-content: center; width: 100%; margin-top: 0.35rem; } .wc-block-product .wp-block-button__link, .wc-block-product .wc-block-components-product-button a, .wc-block-product .wc-block-components-product-button button, li.product a.button, li.product .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; max-width: 100%; min-height: 40px; padding: 0.55rem 1rem; background: var(--blue); color: #fff !important; border: 0; border-radius: 4px; font-size: 0.85rem; font-weight: 600; line-height: 1.2; } .wc-block-product .wp-block-button__link:hover, .wc-block-product .wc-block-components-product-button a:hover, .wc-block-product .wc-block-components-product-button button:hover, li.product a.button:hover, li.product .wp-block-button__link:hover { background: var(--blue-dark); color: #fff !important; } /* ===================================================================== Single product page: tame gallery scale, tighten info column, theme purchase controls in dark mode, stack controls on mobile. ===================================================================== */ .wp-block-woocommerce-product-gallery, .woocommerce-product-gallery { max-width: 520px; margin-left: auto; margin-right: auto; } .wc-block-product-gallery-large-image img, .woocommerce-product-gallery__image img { border-radius: 10px; } /* Quantity stepper + add-to-cart on one row on desktop, stacked on mobile. */ .wc-block-add-to-cart-form .quantity, .woocommerce div.product form.cart .quantity { max-width: 100%; } .wc-block-components-quantity-selector { border-color: var(--border) !important; } .single_add_to_cart_button, .wc-block-components-product-button__button { color: #fff !important; } /* Dark-mode purchase controls: quantity stepper + inputs were baked #fff. */ :root[data-theme="dark"] .wc-block-components-quantity-selector, :root[data-theme="dark"] .wc-block-components-quantity-selector__input, :root[data-theme="dark"] .quantity input.qty, :root[data-theme="dark"] .woocommerce div.product form.cart .quantity { background: var(--card) !important; color: var(--ink) !important; border-color: var(--border) !important; } :root[data-theme="dark"] .wc-block-components-quantity-selector__button { color: var(--ink) !important; background: transparent !important; } /* ===================================================================== Sticky footer: short pages (empty cart, thin content) should pin the footer to the viewport bottom instead of floating mid-screen. ===================================================================== */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main, .wp-site-blocks > .wp-block-group:not(.fro-shop-bar), .wp-site-blocks > .wp-block-woocommerce-product-collection { flex: 1 0 auto; } .wp-site-blocks > footer { flex-shrink: 0; margin-top: auto; } /* ===================================================================== Mobile: stop Woo blocks overflowing the viewport, restructure the shop bar into rows, keep the mini-cart visible. ===================================================================== */ .fro-shop-inner > *, .wc-block-product, li.product, .wc-block-add-to-cart-form, .woocommerce div.product form.cart { max-width: 100%; } @media (max-width: 782px) { /* Shop bar becomes two rows: search full width, then nav + cart. */ .fro-shop-inner { flex-wrap: wrap; gap: 0.5rem; } .fro-shop-inner .wp-block-search { flex: 1 1 100%; order: 1; } .fro-shop-inner .wp-block-navigation { order: 2; flex: 1 1 auto; } .fro-shop-inner .wc-block-mini-cart { order: 3; margin-left: auto; } /* Single product: stack quantity above the add-to-cart button. The Woo block ships `form.cart` as a 3-track grid (grid-auto-flow:column) which squeezes the button until its text wraps to 3 lines on narrow screens; collapse it to a single column instead. */ .wp-block-woocommerce-add-to-cart-form form.cart, .wp-block-woocommerce-add-to-cart-form .variations_button, .woocommerce div.product form.cart { display: flex !important; flex-direction: column; align-items: stretch; gap: 0.75rem; } .wp-block-woocommerce-add-to-cart-form form.cart .quantity, .wp-block-woocommerce-add-to-cart-form .variations_button .quantity, .woocommerce div.product form.cart .quantity { width: 100% !important; margin-right: 0 !important; } .wp-block-woocommerce-add-to-cart-form .variations_button > .single_add_to_cart_button { grid-column: auto; justify-self: stretch; } .single_add_to_cart_button, .wc-block-add-to-cart-form button.single_add_to_cart_button { width: 100%; white-space: nowrap; } /* Single product columns stack (gallery above info). */ .wp-block-columns.alignwide { gap: 1.5rem; } } @media (max-width: 480px) { /* Compact card padding on the smallest screens. */ .wc-block-product, li.product { padding: 0.6rem 0.6rem 0.75rem; } .wc-block-product .wp-block-button__link, li.product a.button { min-width: 0; width: 100%; } }