/*
Theme Name: Ruthless RC (Storefront Child)
Theme URI: https://ruthlessrc.com
Template: storefront
Author: Ruthless RC
Description: Ruthless RC child theme built on Storefront. Gold/cream/near-black brand palette with automatic (prefers-color-scheme) and manual light/dark mode toggle, Kaushan Script display font + Inter body font.
Version: 1.0.4
Text Domain: storefront-child
*/
/* ------------------------------------------------------------------ */
/* Brand color tokens */
/* ------------------------------------------------------------------ */
:root {
/* Light mode (default) */
--rrc-bg: #f7f3e8;
--rrc-bg-alt: #efe8d4;
--rrc-text: #0d0d0d;
--rrc-accent: #d4af37;
--rrc-border: #ddd3b6;
/* Same values as an R,G,B triplet (no hex/no color-mix()) so the hero
overlay below can use them inside rgba() at a chosen opacity - plain
rgba(var(--x), alpha) works in every browser, including older Safari. */
--rrc-overlay-rgb: 247, 243, 232;
/* Fixed logo-badge colors, independent of light/dark mode */
--rrc-logo-bg: #0d0d0d;
--rrc-logo-fg: #d4af37;
}
/* Automatic dark mode via OS/browser preference, unless a manual choice overrides it */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--rrc-bg: #0d0d0d;
--rrc-bg-alt: #1a1a1a;
--rrc-text: #f2ead2;
--rrc-accent: #d4af37;
--rrc-border: #3a3a3a;
--rrc-overlay-rgb: 13, 13, 13;
}
}
/* Manual toggle overrides, set via [data-theme] on by theme-toggle.js */
:root[data-theme="dark"] {
--rrc-bg: #0d0d0d;
--rrc-bg-alt: #1a1a1a;
--rrc-text: #f2ead2;
--rrc-accent: #d4af37;
--rrc-border: #3a3a3a;
--rrc-overlay-rgb: 13, 13, 13;
}
:root[data-theme="light"] {
--rrc-bg: #f7f3e8;
--rrc-bg-alt: #efe8d4;
--rrc-text: #0d0d0d;
--rrc-accent: #d4af37;
--rrc-border: #ddd3b6;
--rrc-overlay-rgb: 247, 243, 232;
}
/* ------------------------------------------------------------------ */
/* Base + typography */
/* ------------------------------------------------------------------ */
body {
background-color: var(--rrc-bg);
color: var(--rrc-text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
transition: background-color 0.15s ease, color 0.15s ease;
}
a {
color: var(--rrc-accent);
}
.site-header,
.site-footer,
#content,
.site-content,
.woocommerce-page,
.storefront-primary-navigation {
background-color: var(--rrc-bg);
color: var(--rrc-text);
border-color: var(--rrc-border);
}
.site-header {
border-bottom: 1px solid var(--rrc-border);
}
h1, h2, h3,
.site-title,
.woocommerce div.product .product_title,
.page-title,
.widget-title {
font-family: 'Kaushan Script', 'Inter', cursive;
color: var(--rrc-text);
font-weight: 400;
}
/* ------------------------------------------------------------------ */
/* Logo placeholder (swap for a real ![]()
later - see .site-logo) */
/* ------------------------------------------------------------------ */
.site-logo-link {
display: inline-block;
text-decoration: none;
}
.site-logo {
display: inline-block;
font-family: 'Kaushan Script', cursive;
font-size: clamp(1.5rem, 4vw, 2.4rem);
line-height: 1;
color: var(--rrc-logo-fg);
background-color: var(--rrc-logo-bg);
padding: 0.4em 0.7em;
border-radius: 6px;
max-width: 100%;
}
/* When a real image logo is uploaded via the Customizer, let it render plainly */
.site-logo-link img.site-logo,
.custom-logo-link img {
max-width: 100%;
height: auto;
border-radius: 0;
background: none;
padding: 0;
}
/* ------------------------------------------------------------------ */
/* Prices / sale badges / buttons - gold accent */
/* ------------------------------------------------------------------ */
.woocommerce .price,
.woocommerce-Price-amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--rrc-accent);
font-weight: 600;
}
.woocommerce span.onsale {
background-color: var(--rrc-accent);
color: var(--rrc-logo-bg);
font-weight: 600;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart,
.woocommerce ul.products li.product .button {
background-color: var(--rrc-accent);
border-color: var(--rrc-accent);
color: var(--rrc-logo-bg);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
background-color: var(--rrc-text);
border-color: var(--rrc-accent);
color: var(--rrc-accent);
}
/* ------------------------------------------------------------------ */
/* Dark-mode toggle button (header) */
/* ------------------------------------------------------------------ */
.rrc-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4em;
height: 2.4em;
margin: 0.5em;
border: 1px solid var(--rrc-border);
border-radius: 50%;
background-color: var(--rrc-bg-alt);
color: var(--rrc-accent);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
}
.rrc-theme-toggle:hover {
border-color: var(--rrc-accent);
}
/* ------------------------------------------------------------------ */
/* Social links row (footer) */
/* ------------------------------------------------------------------ */
.ruthless-rc-social-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 1.5rem 1rem;
border-top: 1px solid var(--rrc-border);
}
.rrc-social-link {
display: inline-flex;
align-items: center;
gap: 0.5em;
color: var(--rrc-text);
text-decoration: none;
font-weight: 500;
}
.rrc-social-link:hover {
color: var(--rrc-accent);
}
.rrc-social-link svg {
width: 1.25em;
height: 1.25em;
fill: currentColor;
flex-shrink: 0;
}
/* ------------------------------------------------------------------ */
/* Homepage hero banner */
/* ------------------------------------------------------------------ */
.rrc-hero {
position: relative;
width: 100%;
height: clamp(420px, 70vh, 720px);
overflow: hidden;
background-color: var(--rrc-logo-bg);
}
.rrc-hero-media {
position: absolute;
inset: 0;
}
.rrc-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.2s ease;
}
.rrc-hero-slide.is-active {
opacity: 1;
z-index: 1;
}
.rrc-hero-media-el {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
/* Semi-transparent scrim between the busy shop photos/video and the
foreground text, tinted with the current theme's own background color so
it automatically looks right in both light and dark mode - text on top
uses the same --rrc-text color the rest of the site uses on --rrc-bg, so
contrast stays consistent with the rest of the page. */
.rrc-hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background-color: rgba(var(--rrc-overlay-rgb), 0.62);
}
.rrc-hero-content {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
gap: 0.75rem;
}
.rrc-hero-wordmark {
font-family: 'Kaushan Script', cursive;
font-size: clamp(2.5rem, 8vw, 5rem);
line-height: 1.05;
color: var(--rrc-text);
}
.rrc-hero-tagline {
font-family: 'Inter', sans-serif;
font-size: clamp(1rem, 2.4vw, 1.375rem);
font-weight: 500;
color: var(--rrc-text);
max-width: 42rem;
margin: 0;
}
.rrc-hero-cta {
display: inline-block;
margin-top: 0.5rem;
padding: 0.9em 2.2em;
min-height: 44px;
font-size: clamp(1rem, 2vw, 1.15rem);
font-weight: 600;
font-family: 'Inter', sans-serif;
background-color: var(--rrc-accent);
color: var(--rrc-logo-bg);
border-radius: 6px;
text-decoration: none;
line-height: 1.4;
}
.rrc-hero-cta:hover,
.rrc-hero-cta:focus {
background-color: var(--rrc-text);
color: var(--rrc-accent);
}
@media (prefers-reduced-motion: reduce) {
.rrc-hero-slide {
transition: none;
}
}
@media (max-width: 480px) {
.rrc-hero {
height: clamp(380px, 80vh, 560px);
}
}
/* ------------------------------------------------------------------ */
/* Homepage below-hero content */
/* ------------------------------------------------------------------ */
.rrc-home-primary {
width: 100%;
max-width: none;
float: none;
}
.rrc-home-intro {
max-width: 46rem;
margin: 2.5rem auto 1rem;
padding: 0 1rem;
text-align: center;
font-size: 1.1rem;
}
.rrc-home-categories-title {
text-align: center;
margin-top: 1rem;
}
.rrc-home-categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
padding: 0 1rem 3rem;
}
.rrc-home-category {
display: inline-block;
padding: 0.6em 1.2em;
border: 1px solid var(--rrc-border);
border-radius: 999px;
color: var(--rrc-text);
text-decoration: none;
font-weight: 500;
background-color: var(--rrc-bg-alt);
}
.rrc-home-category:hover {
border-color: var(--rrc-accent);
color: var(--rrc-accent);
}
/* ------------------------------------------------------------------ */
/* Behind the Scenes gallery ([rrc_gallery] shortcode) */
/* ------------------------------------------------------------------ */
.rrc-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
padding: 0.5rem 1rem 3rem;
max-width: 72rem;
margin: 0 auto;
}
.rrc-gallery-item {
border-radius: 8px;
overflow: hidden;
background-color: var(--rrc-bg-alt);
border: 1px solid var(--rrc-border);
aspect-ratio: 4 / 3;
}
.rrc-gallery-media {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rrc-gallery-empty {
text-align: center;
padding: 2rem 1rem 3rem;
color: var(--rrc-text);
}
/* ------------------------------------------------------------------ */
/* Responsive safety net */
/* ------------------------------------------------------------------ */
img,
.site-logo,
.woocommerce ul.products li.product img {
max-width: 100%;
height: auto;
}
@media (max-width: 480px) {
.ruthless-rc-social-links {
gap: 1rem;
flex-direction: column;
align-items: center;
}
.site-logo {
font-size: 1.5rem;
}
}
/* ------------------------------------------------------------------ */
/* Header redesign - one compact row (2026-08-27) */
/* */
/* Storefront's stock header is two stacked bands: */
/* row 1 (#masthead > .col-full): .site-branding (logo) + .site-search */
/* row 2 (#masthead .storefront-primary-navigation > .col-full): */
/* the dark-mode toggle + .main-navigation + #site-header-cart */
/* Verified via header.php + storefront-template-functions.php + */
/* storefront-woocommerce-template-functions.php (parent theme) - this */
/* is the real hook order, not guessed. Combined with a logo image */
/* that was only constrained by width (never height), a tall */
/* badge-shaped logo produced a huge near-empty top block, then a */
/* second near-empty row just for the nav. */
/* */
/* Fix, in two parts: */
/* 1. The logo gets a real HEIGHT cap (not just max-width), so its */
/* footprint is predictable no matter the source image's aspect */
/* ratio. */
/* 2. At >=768px - Storefront's own breakpoint for switching the */
/* mobile hamburger nav to its expanded form, chosen deliberately */
/* so mobile's existing nav-toggle behaviour is untouched - both of */
/* Storefront's wrapper divs get `display: contents`. That removes */
/* their boxes without touching the DOM or any action hook, so the */
/* five real header pieces (logo, nav, search, toggle, cart) become */
/* direct flex children of #masthead and can be reordered with */
/* `order` into one row. CSS-only on purpose: WooCommerce's cart- */
/* fragment-refresh JS targets #site-header-cart by selector, not */
/* DOM position, so it keeps working untouched. */
/* ------------------------------------------------------------------ */
/* Logo: height-capped everywhere (mobile default below, larger at
desktop further down). #masthead is an id, so it reliably beats
Storefront's own .site-header-scoped class rules regardless of
stylesheet load order. */
#masthead .site-branding .custom-logo-link img,
#masthead .site-branding img.custom-logo {
width: auto;
height: 60px;
max-height: 60px;
max-width: 65vw;
}
#masthead {
padding-top: 1em;
padding-bottom: 1em;
}
/* Storefront's .col-full clearfix (::after{content:"";display:table;clear:both})
was not actually containing .site-branding's float at narrow widths on this
site (verified via computed styles - .col-full reported 0 height with the
floated logo escaping into the next row and shoving the nav/cart/toggle
out of position below 768px). display:flow-root establishes a real block
formatting context, which contains floated children unconditionally - no
dependency on a pseudo-element clearfix actually matching. Superseded by
`display: contents` below at >=768px once these wrappers get unwrapped. */
#masthead > .col-full,
#masthead .storefront-primary-navigation > .col-full {
display: flow-root;
}
@media (min-width: 768px) {
#masthead .site-branding .custom-logo-link img,
#masthead .site-branding img.custom-logo {
height: 88px;
max-height: 88px;
max-width: 320px;
}
#masthead {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
padding-top: 0.75em;
padding-bottom: 0.75em;
/* A header nav bar can reasonably use more width than the
narrower reading-content column (.col-full's own 66.5em max),
which matters here since it's what keeps logo+nav+search+
toggle+cart on one line instead of wrapping on wide screens.
clamp() keeps it from ever feeling cramped on a narrow tablet
or absurdly padded on an ultrawide monitor. */
padding-left: clamp(1.25rem, 4vw, 3rem);
padding-right: clamp(1.25rem, 4vw, 3rem);
}
#masthead::before,
#masthead::after {
content: none;
}
/* Unwrap Storefront's two stacked header wrappers - no DOM/hook
changes, just letting their real children lay out directly. */
#masthead > .col-full,
#masthead .storefront-primary-navigation,
#masthead .storefront-primary-navigation > .col-full {
display: contents;
}
#masthead .col-full::before,
#masthead .col-full::after,
#masthead .storefront-primary-navigation::before,
#masthead .storefront-primary-navigation::after {
content: none;
}
/* The five real pieces, in one row: logo, nav, (flexible space),
search, dark/light toggle, cart. */
#masthead .site-branding {
order: 1;
float: none;
width: auto;
max-width: none;
margin: 0;
display: flex;
align-items: center;
gap: 0.6rem;
}
#masthead .main-navigation {
order: 2;
float: none;
width: auto;
clear: none;
margin: 0;
border-left: 1px solid var(--rrc-border);
padding-left: 1.25rem;
}
#masthead .main-navigation ul.menu > li > a:hover,
#masthead .main-navigation ul.menu > li > a:focus {
text-decoration: underline;
text-underline-offset: 4px;
}
#masthead .site-search {
order: 3;
float: none;
clear: none;
width: auto;
max-width: 200px;
min-width: 140px;
margin: 0 0 0 auto;
}
#masthead .site-search .widget_product_search,
#masthead .site-search form {
margin: 0;
}
#masthead .site-search input[type="search"] {
width: 100%;
border-radius: 999px;
background-color: var(--rrc-bg-alt);
border: 1px solid var(--rrc-border);
color: var(--rrc-text);
box-shadow: none;
}
#masthead .site-search input[type="search"]:focus {
border-color: var(--rrc-accent);
}
#masthead .rrc-theme-toggle {
order: 4;
margin: 0;
}
#masthead .site-header-cart {
order: 5;
float: none;
width: auto;
margin: 0;
display: flex;
align-items: center;
}
}
/* ------------------------------------------------------------------ */
/* Mobile header - one compact row (2026-08-27, second pass) */
/* (real iPhone screenshot, not a 375px devtools guess) */
/* */
/* First pass here only reflowed row 2 (toggle + nav + cart) into one */
/* line at <768px, leaving row 1 (the logo, in #masthead > .col-full) */
/* as its own separate stacked block above it - so mobile still showed */
/* two full-width rows stacked (logo alone, then toggle+hamburger), */
/* which reads as an oversized/thick header next to desktop's single */
/* unified row. Second pass: reuse the exact >=768px `display: contents`*/
/* technique (see that section's comment above) at mobile widths too, */
/* so the logo joins the toggle + hamburger button on ONE row. This */
/* does NOT touch the collapsed