/* Theme Name: Flag Swag Child Theme URI: https://flagswag.ca Description: Child theme for Flag Swag — safe customization layer. All overrides go here. Author: Dominion Flag Swag Incorporated Author URI: https://flagswag.ca Template: flagswag Version: 1.0.17 License: Proprietary Text Domain: flagswag-child */ /* ================================================================ CHILD THEME OVERRIDES — v1.0.7 ================================================================ */ /* ── 1. Header positioning — WP Admin bar ───────────────────────── WordPress adds margin-top: 32px to when the admin bar is visible. The fixed header is positioned relative to the viewport so it overlaps the admin bar. These rules push it down correctly. ──────────────────────────────────────────────────────────────── */ .admin-bar .site-header { top: calc(32px + var(--banner-h, 0px)); } @media screen and (max-width: 782px) { /* WP admin bar is 46px tall on mobile */ .admin-bar .site-header { top: calc(46px + var(--banner-h, 0px)); } } /* ── 2. Header positioning — announcement bar ───────────────────── child.js measures the real rendered height of the announcement bar and writes it to --banner-h on . The parent header rule `top: var(--banner-h, 0px)` already reads this variable. This transition ensures the header glides smoothly when the bar is dismissed rather than snapping. ──────────────────────────────────────────────────────────────── */ .site-header { transition: top var(--t-mid) var(--ease), background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), backdrop-filter var(--t-mid) var(--ease); } /* ── 3. Footer logo — "Flag Swag" text forced white ─────────────── The parent CSS sets .site-logo__text .logo-swag { color: var(--c-blue) } which overrides the inline color:var(--c-white) on the footer logo wrapper. Scoping to .site-footer ensures the header logo is untouched. ──────────────────────────────────────────────────────────────── */ .site-footer .site-logo__text .logo-swag, .site-footer .site-logo__text .logo-flag { color: var(--c-white) !important; } /* Keep "Dominion" in the lighter red so it still pops */ .site-footer .site-logo__text .logo-flag { color: var(--c-red-light) !important; } /* ── 4. Shop-by-category card — title turns red on hover ────────── Cards are elements; the h4 inside is green by default. ──────────────────────────────────────────────────────────────── */ .card:hover h3, .card:hover h4, .card:hover h5 { color: var(--c-red); transition: color var(--t-fast) var(--ease); } /* ── 5. Newsletter — wider email input, narrower button ─────────── Raises flex-basis so the input claims the majority of row space. Button padding trimmed so it doesn't crowd the input at mid widths. ──────────────────────────────────────────────────────────────── */ /* ── 6. Flagswag Swatches plugin — design system integration ────── These rules style the custom swatch output from the flagswag-swatches plugin to match the theme design system. ──────────────────────────────────────────────────────────────── */ /* Swatch row container */ .fgs-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-sm) 0 var(--space-md); } /* Base swatch */ .fgs-swatch { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid var(--c-border); border-radius: var(--r-sm); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); position: relative; user-select: none; -webkit-user-select: none; } .fgs-swatch:hover { border-color: var(--c-red); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .fgs-swatch.selected { border-color: var(--c-red) !important; box-shadow: 0 0 0 2px var(--c-red-muted), var(--shadow-sm); } .fgs-swatch.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .fgs-swatch.disabled::after { content: ''; position: absolute; inset: 3px; background: linear-gradient( 135deg, transparent 45%, var(--c-text3) 45%, var(--c-text3) 55%, transparent 55% ); border-radius: 1px; } /* Color swatch — round circle */ .fgs-swatch--color { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; } .fgs-swatch--color .fgs-swatch__color { display: block; width: 100%; height: 100%; border-radius: 50%; } /* Bi-color (two-tone) swatch */ .fgs-swatch--color .fgs-swatch__bicolor { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--fgs-c1, #ccc) 50%, var(--fgs-c2, #999) 50%); } /* Label swatch — pill shape */ .fgs-swatch--label { height: 34px; padding: 0 12px; border-radius: var(--r-full); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--c-text); background: var(--c-surface); letter-spacing: 0.02em; } .fgs-swatch--label.selected { background: var(--c-red-muted); color: var(--c-red); } /* Tooltip */ .fgs-swatch[title]:hover::before { content: attr(title); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--c-text); color: var(--c-white); font-size: 0.72rem; font-family: var(--font-body); white-space: nowrap; padding: 3px 8px; border-radius: var(--r-sm); pointer-events: none; z-index: 100; } .fgs-swatch[title]:hover::after { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--c-text); pointer-events: none; z-index: 100; } /* Dark mode swatch adjustments */ [data-theme="dark"] .fgs-swatch--label { background: var(--c-surface2); color: var(--c-text); } [data-theme="dark"] .fgs-swatch--label.selected { background: var(--c-red-muted); color: var(--c-red-light); } /* Clear selection link */ .fgs-clear-swatch { font-size: 0.78rem; color: var(--c-text3); cursor: pointer; text-decoration: underline; display: inline-block; margin-top: var(--space-xs); } .fgs-clear-swatch:hover { color: var(--c-red); } /* Hide the native WC select when swatches are rendered */ .fgs-has-swatches select.fgs-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } /* Admin — swatch manager page */ .fgs-admin-wrap .fgs-color-preview { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; vertical-align: middle; margin-right: 6px; } /* ================================================================ CHILD OVERRIDES — v1.0.8 ================================================================ */ /* ── 1. "View All Products" button — white text ──────────────────── A stray `.btn--primary:hover { color:#000 }` in the parent overrides the base white. Restore it with higher specificity. ──────────────────────────────────────────────────────────────── */ .mega-menu .btn--primary, .mega-menu .btn--primary:hover, .mega-menu .btn--primary:focus { color: #fff !important; } /* ── 2. Shop search — move icon to right, don't cover text ───────── Parent puts icon at left:20px and adds padding-left:52px. We flip the icon to the right side so it never overlaps text. ──────────────────────────────────────────────────────────────── */ .shop-search__input { padding-left: 20px !important; padding-right: 52px !important; } .shop-search__icon { left: auto !important; right: 16px !important; } /* ── 3. Shop page — 4 products per row, wider usable area ────────── Shrink the filter sidebar slightly so the product area gains width. The product grid uses repeat(4,1fr) at full width, stepping down gracefully on smaller screens. We keep horizontal margin so vertical ad banners have room on each side. ──────────────────────────────────────────────────────────────── */ .woocommerce-page .container, .woocommerce-shop .container { max-width: 1420px; } /* Sidebar narrower → product area wider */ .shop-layout { grid-template-columns: 220px 1fr !important; gap: var(--space-lg) !important; } /* Force 4-column product grid (WC filter also set in woocommerce.php) */ .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; gap: var(--space-md) !important; } /* Step down gracefully */ @media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 780px) { .shop-layout { grid-template-columns: 1fr !important; } .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } } /* ── 4. Pagination — horizontal across entire theme ──────────────── WordPress `the_posts_pagination()` outputs: The nav-links div is block by default, stacking items vertically. ──────────────────────────────────────────────────────────────── */ .navigation.pagination, .navigation.posts-navigation, .navigation.post-navigation { display: flex; justify-content: center; margin-top: var(--space-3xl); } .navigation.pagination .nav-links, .navigation.posts-navigation .nav-links, .navigation.post-navigation .nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; } .navigation.pagination .page-numbers, .nav-links .page-numbers, .nav-links a, .nav-links span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text2); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all var(--t-fast); } .navigation.pagination .page-numbers:hover, .nav-links a:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-red-muted); } .nav-links .page-numbers.current, .nav-links span.current { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-red-muted); pointer-events: none; } .nav-links .prev, .nav-links .next { font-weight: 600; padding: 0 14px; } /* ── 5. YITH swatch CSS — remove rules that affect native WC selects ─ The parent theme contains YITH compatibility CSS including `.select_option_label { display:inline-flex !important }` which is a class WooCommerce also adds to native