/*
Theme Name: I Am Super Mom
Theme URI: https://iamsupermom.com
Description: A modern, editorial food blog child theme for Kadence — high-protein recipes for busy moms. Clean, magazine-inspired design with beautiful typography and responsive layouts.
Author: I Am Super Mom
Author URI: https://iamsupermom.com
Template: kadence
Version: 1.2.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supermom
Tags: food-blog, recipes, modern, responsive, high-protein, health
*/
/* ============================================
I AM SUPER MOM — Modern Food Blog Theme
A Kadence Child Theme
============================================ */
/* --------------------------------------------
CSS CUSTOM PROPERTIES
-------------------------------------------- */
:root {
/* Primary Palette — Warm Coral & Mint Sage */
--sm-white: #FFFFFF;
--sm-snow: #FAF8F5;
--sm-cream: #F5F2ED;
--sm-coral: #E86B4A;
--sm-coral-dark: #D45A30;
--sm-coral-light: #FBDDD2;
--sm-coral-pale: #FFF0EB;
--sm-forest: #4A9B6F;
--sm-forest-dark: #358756;
--sm-forest-light: #6AB889;
--sm-forest-pale: #E8F5ED;
--sm-charcoal: #1D1D1D;
--sm-graphite: #3D3D3D;
--sm-slate: #6B6B6B;
--sm-silver: #9B9B9B;
--sm-mist: #E5E5E5;
--sm-cloud: #F0F0F0;
--sm-gold: #F2C94C;
--sm-gold-light: #FDF6E0;
--sm-blush: #FFF0EB;
--sm-blush-dark: #FFD6C7;
/* Semantic */
--sm-success: #2D5A3D;
--sm-warning: #E8A32E;
--sm-error: #DC3545;
--sm-info: #3B82F6;
/* Typography — DM Serif Display + Nunito Sans */
--sm-font-display: 'DM Serif Display', 'Georgia', serif;
--sm-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--sm-font-accent: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--sm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Font Sizes — Fluid Scale */
--sm-text-xs: 0.75rem;
--sm-text-sm: 0.8125rem;
--sm-text-base: 0.9375rem;
--sm-text-md: 1rem;
--sm-text-lg: 1.125rem;
--sm-text-xl: 1.25rem;
--sm-text-2xl: 1.5rem;
--sm-text-3xl: 1.875rem;
--sm-text-4xl: 2.25rem;
--sm-text-5xl: 3rem;
--sm-text-6xl: 3.75rem;
--sm-text-7xl: 4.5rem;
/* Spacing */
--sm-sp-1: 0.25rem;
--sm-sp-2: 0.5rem;
--sm-sp-3: 0.75rem;
--sm-sp-4: 1rem;
--sm-sp-5: 1.25rem;
--sm-sp-6: 1.5rem;
--sm-sp-8: 2rem;
--sm-sp-10: 2.5rem;
--sm-sp-12: 3rem;
--sm-sp-16: 4rem;
--sm-sp-20: 5rem;
--sm-sp-24: 6rem;
--sm-sp-32: 8rem;
/* Container */
--sm-container-sm: 640px;
--sm-container-md: 768px;
--sm-container-lg: 1024px;
--sm-container-xl: 1200px;
--sm-container-2xl: 1400px;
/* Borders & Radius */
--sm-radius-xs: 4px;
--sm-radius-sm: 6px;
--sm-radius-md: 10px;
--sm-radius-lg: 14px;
--sm-radius-xl: 20px;
--sm-radius-2xl: 28px;
--sm-radius-full: 9999px;
/* Shadows — Layered for depth */
--sm-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
--sm-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--sm-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
--sm-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);
--sm-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
--sm-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.12);
--sm-shadow-card: 0 2px 8px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.08);
--sm-shadow-card-hover: 0 12px 24px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.08);
--sm-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.04);
/* Transitions */
--sm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--sm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--sm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--sm-transition-fast: 150ms var(--sm-ease-in-out);
--sm-transition-base: 250ms var(--sm-ease-out);
--sm-transition-slow: 400ms var(--sm-ease-out);
--sm-transition-spring: 500ms var(--sm-ease-spring);
/* Z-Index */
--sm-z-dropdown: 100;
--sm-z-sticky: 200;
--sm-z-fixed: 300;
--sm-z-overlay: 400;
--sm-z-modal: 500;
--sm-z-toast: 600;
/* Grid */
--sm-grid-columns: 3;
}
/* --------------------------------------------
RESET & BASE
-------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--sm-snow);
color: var(--sm-charcoal);
font-family: var(--sm-font-body);
font-size: 16px;
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
::selection {
background: var(--sm-coral-light);
color: var(--sm-charcoal);
}
::-moz-selection {
background: var(--sm-coral-light);
color: var(--sm-charcoal);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--sm-coral);
text-decoration: none;
transition: color var(--sm-transition-fast);
}
a:hover {
color: var(--sm-coral-dark);
}
/* Focus styles */
:focus-visible {
outline: 2px solid var(--sm-coral);
outline-offset: 2px;
border-radius: var(--sm-radius-xs);
}
/* Skip link */
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: var(--sm-coral);
color: #fff;
padding: 8px 16px;
z-index: 9999;
font-weight: 600;
}
.skip-link:focus {
top: 0;
}
/* --------------------------------------------
TYPOGRAPHY
-------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--sm-font-display);
font-weight: 700;
line-height: 1.2;
color: var(--sm-charcoal);
margin-top: 0;
}
h1 { font-size: var(--sm-text-5xl); letter-spacing: -0.02em; }
h2 { font-size: var(--sm-text-4xl); letter-spacing: -0.015em; }
h3 { font-size: var(--sm-text-2xl); letter-spacing: -0.01em; }
h4 { font-size: var(--sm-text-xl); }
h5 { font-size: var(--sm-text-lg); }
h6 { font-size: var(--sm-text-md); }
p {
margin-top: 0;
margin-bottom: 1em;
color: var(--sm-graphite);
}
/* --------------------------------------------
KADENCE OVERRIDES
-------------------------------------------- */
.site-header {
background: var(--sm-white) !important;
border-bottom: 1px solid var(--sm-mist) !important;
}
.site-header .site-branding .site-title {
font-family: var(--sm-font-display) !important;
font-weight: 700 !important;
color: var(--sm-charcoal) !important;
font-size: 1.5rem !important;
letter-spacing: -0.02em !important;
}
/* Color the last word coral to match the footer logo - bulletproof selectors */
body .site-title a .sm-title-accent,
body .site-branding .site-title a .sm-title-accent,
body .kadence-logo a .sm-title-accent,
body .header-titles .site-title a .sm-title-accent,
body .site-mobile-header-logo a .sm-title-accent,
body .site-mobile-logo-link .sm-title-accent,
body a .sm-title-accent {
color: var(--sm-coral) !important;
}
.site-header .header-navigation .menu > li > a {
font-family: var(--sm-font-body) !important;
font-weight: 500 !important;
font-size: 0.875rem !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: var(--sm-graphite) !important;
transition: color var(--sm-transition-fast) !important;
}
.site-header .header-navigation .menu > li > a:hover {
color: var(--sm-coral) !important;
}
/* Remove default Kadence spacing on our pages */
.sm-homepage .entry-content-wrap,
.sm-single-recipe .entry-content-wrap,
.sm-recipe-index .entry-content-wrap,
.sm-about-page .entry-content-wrap,
.sm-category-archive .entry-content-wrap {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.sm-homepage .site-main,
.sm-single-recipe .site-main,
.sm-about-page .site-main {
padding: 0 !important;
}
/* Kadence single content reset */
body.single-post .entry-content {
max-width: 100% !important;
}
/* Remove default Kadence title area on pages using our templates */
.sm-homepage .entry-hero-container-inner,
.sm-about-page .entry-hero-container-inner,
.sm-recipe-index .entry-hero-container-inner {
display: none !important;
}
/* --------------------------------------------
CONTAINER
-------------------------------------------- */
.sm-container {
width: 100%;
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
.sm-container-narrow {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
.sm-container-wide {
max-width: var(--sm-container-2xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
/* --------------------------------------------
BUTTONS
-------------------------------------------- */
.sm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--sm-font-body);
font-weight: 600;
font-size: var(--sm-text-sm);
letter-spacing: 0.02em;
padding: 12px 24px;
border-radius: var(--sm-radius-full);
border: none;
cursor: pointer;
transition: all var(--sm-transition-base);
text-decoration: none;
line-height: 1;
white-space: nowrap;
}
.sm-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.sm-btn-primary {
background: var(--sm-coral);
color: var(--sm-white);
}
.sm-btn-primary:hover {
background: var(--sm-coral-dark);
color: var(--sm-white);
transform: translateY(-1px);
box-shadow: var(--sm-shadow-lg);
}
.sm-btn-secondary {
background: var(--sm-forest);
color: var(--sm-white);
}
.sm-btn-secondary:hover {
background: var(--sm-forest-dark);
color: var(--sm-white);
transform: translateY(-1px);
box-shadow: var(--sm-shadow-lg);
}
.sm-btn-outline {
background: transparent;
color: var(--sm-charcoal);
border: 1.5px solid var(--sm-mist);
}
.sm-btn-outline:hover {
border-color: var(--sm-coral);
color: var(--sm-coral);
background: var(--sm-coral-pale);
}
.sm-btn-ghost {
background: transparent;
color: var(--sm-coral);
padding: 8px 16px;
}
.sm-btn-ghost:hover {
background: var(--sm-coral-pale);
}
.sm-btn-lg {
padding: 16px 32px;
font-size: var(--sm-text-base);
}
.sm-btn-sm {
padding: 8px 16px;
font-size: var(--sm-text-xs);
}
/* --------------------------------------------
BADGES & TAGS
-------------------------------------------- */
.sm-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--sm-font-body);
font-weight: 600;
font-size: var(--sm-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: var(--sm-radius-full);
line-height: 1.4;
}
.sm-badge-easy {
background: var(--sm-forest-pale);
color: var(--sm-forest);
}
.sm-badge-medium {
background: var(--sm-gold-light);
color: #8B6914;
}
.sm-badge-hard {
background: var(--sm-coral-pale);
color: var(--sm-coral-dark);
}
.sm-section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sm-font-body);
font-weight: 700;
font-size: var(--sm-text-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sm-coral);
margin-bottom: var(--sm-sp-4);
}
.sm-section-label::before {
content: '';
display: inline-block;
width: 24px;
height: 2px;
background: var(--sm-coral);
border-radius: 1px;
}
/* --------------------------------------------
SECTION LAYOUT
-------------------------------------------- */
.sm-section {
padding: var(--sm-sp-20) 0;
}
.sm-section-header {
text-align: center;
margin-bottom: var(--sm-sp-12);
}
.sm-section-title {
font-size: var(--sm-text-4xl);
margin-bottom: var(--sm-sp-3);
}
.sm-section-subtitle {
font-size: var(--sm-text-lg);
color: var(--sm-slate);
max-width: 560px;
margin: 0 auto;
line-height: 1.6;
}
.sm-section-cta {
text-align: center;
margin-top: var(--sm-sp-10);
}
/* Divider */
.sm-divider {
width: 48px;
height: 3px;
background: var(--sm-coral);
border-radius: 2px;
margin: var(--sm-sp-6) auto;
}
/* ============================================
HOMEPAGE HERO
============================================ */
.sm-hero {
position: relative;
background: var(--sm-white);
padding: var(--sm-sp-12) 0 var(--sm-sp-16);
overflow: hidden;
}
.sm-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom, var(--sm-white), var(--sm-snow));
pointer-events: none;
}
.sm-hero-inner {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sm-sp-12);
align-items: center;
position: relative;
z-index: 1;
}
.sm-hero-content {
max-width: 540px;
}
.sm-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sm-font-body);
font-weight: 700;
font-size: var(--sm-text-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sm-coral);
margin-bottom: var(--sm-sp-6);
padding: 6px 14px;
background: var(--sm-coral-pale);
border-radius: var(--sm-radius-full);
}
.sm-hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.08;
letter-spacing: -0.03em;
margin-bottom: var(--sm-sp-6);
color: var(--sm-charcoal);
}
.sm-hero-title em {
font-style: italic;
color: var(--sm-coral);
}
.sm-hero-subtitle {
font-size: var(--sm-text-lg);
line-height: 1.7;
color: var(--sm-slate);
margin-bottom: var(--sm-sp-8);
max-width: 440px;
}
/* Hero Search */
.sm-hero-search {
position: relative;
max-width: 480px;
margin-bottom: var(--sm-sp-8);
z-index: 20;
}
/* Use a strong selector so Kadence's input reset doesn't win the cascade */
.sm-hero-search input[type="search"],
.sm-hero-search input[type="text"],
.sm-hero-search input {
width: 100%;
height: 60px;
padding: 0 64px 0 24px;
margin: 0;
font-family: var(--sm-font-body);
font-size: var(--sm-text-base);
font-weight: 500;
color: var(--sm-charcoal);
background: var(--sm-white);
border: 1.5px solid var(--sm-mist);
border-radius: var(--sm-radius-full);
outline: none;
box-shadow: 0 4px 16px -6px rgba(15, 23, 42, 0.10);
transition: border-color var(--sm-transition-base),
box-shadow var(--sm-transition-base);
-webkit-appearance: none;
appearance: none;
}
.sm-hero-search input::placeholder {
color: var(--sm-silver);
font-weight: 400;
opacity: 1;
}
.sm-hero-search input:hover {
border-color: #d1d1d1;
box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.14);
}
.sm-hero-search input:focus,
.sm-hero-search input:focus-visible {
border-color: var(--sm-coral);
box-shadow:
0 0 0 4px var(--sm-coral-pale),
0 6px 20px -6px rgba(232, 107, 74, 0.18);
}
/* Kill the browser's native search clear-X / decoration that draws a 2nd icon */
.sm-hero-search input[type="search"]::-webkit-search-decoration,
.sm-hero-search input[type="search"]::-webkit-search-cancel-button,
.sm-hero-search input[type="search"]::-webkit-search-results-button,
.sm-hero-search input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
display: none;
}
.sm-hero-search button {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
background: var(--sm-coral);
color: var(--sm-white);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--sm-transition-fast),
transform var(--sm-transition-fast),
box-shadow var(--sm-transition-fast);
box-shadow: 0 4px 12px -2px rgba(232, 107, 74, 0.35);
z-index: 2;
}
.sm-hero-search button:hover {
background: var(--sm-coral-dark);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 16px -2px rgba(232, 107, 74, 0.45);
}
.sm-hero-search button svg {
width: 18px;
height: 18px;
}
/* Hero Category Pills */
.sm-hero-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
position: relative;
z-index: 1;
}
/* Hero Visual */
.sm-hero-visual {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: var(--sm-sp-4);
padding-bottom: 64px; /* room for the floating stat badge below the cards */
}
.sm-hero-visual .sm-hero-card {
border-radius: var(--sm-radius-xl);
overflow: hidden;
background: var(--sm-white);
box-shadow: var(--sm-shadow-card);
transition: all var(--sm-transition-slow);
}
.sm-hero-visual .sm-hero-card:nth-child(2) {
margin-top: 40px;
}
.sm-hero-visual .sm-hero-card:hover {
transform: translateY(-4px);
box-shadow: var(--sm-shadow-card-hover);
}
.sm-hero-card-img {
aspect-ratio: 3/4;
overflow: hidden;
}
.sm-hero-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--sm-ease-out);
}
.sm-hero-card:hover .sm-hero-card-img img {
transform: scale(1.05);
}
.sm-hero-card-info {
padding: 14px 16px;
}
.sm-hero-card-info h3 {
font-family: var(--sm-font-body);
font-weight: 600;
font-size: var(--sm-text-sm);
margin-bottom: 4px;
line-height: 1.3;
}
.sm-hero-card-info span {
font-size: var(--sm-text-xs);
color: var(--sm-slate);
}
/* Hero floating stat */
.sm-hero-stat {
position: absolute;
bottom: 8px;
left: -10px;
background: var(--sm-white);
border-radius: var(--sm-radius-lg);
padding: 14px 20px;
box-shadow: var(--sm-shadow-xl);
display: flex;
align-items: center;
gap: 12px;
z-index: 2;
}
.sm-hero-stat-icon {
width: 44px;
height: 44px;
background: var(--sm-forest-pale);
border-radius: var(--sm-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--sm-forest);
}
.sm-hero-stat-text {
font-size: var(--sm-text-xs);
color: var(--sm-slate);
line-height: 1.3;
}
.sm-hero-stat-text strong {
display: block;
font-size: var(--sm-text-lg);
color: var(--sm-charcoal);
font-weight: 700;
}
/* ============================================
CATEGORY PILLS
============================================ */
.sm-category-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
font-family: var(--sm-font-body);
font-weight: 500;
font-size: var(--sm-text-sm);
color: var(--sm-graphite);
background: var(--sm-white);
border: 1.5px solid var(--sm-mist);
border-radius: var(--sm-radius-full);
cursor: pointer;
transition: all var(--sm-transition-base);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.sm-category-pill:hover {
border-color: var(--sm-coral);
color: var(--sm-coral);
background: var(--sm-coral-pale);
}
.sm-category-pill.active {
background: var(--sm-coral);
color: var(--sm-white);
border-color: var(--sm-coral);
}
.sm-category-pill .sm-pill-count {
font-size: var(--sm-text-xs);
opacity: 0.7;
}
/* ============================================
RECIPE CARDS
============================================ */
.sm-recipe-card {
position: relative;
background: var(--sm-white);
border-radius: var(--sm-radius-xl);
overflow: hidden;
box-shadow: var(--sm-shadow-card);
transition: all var(--sm-transition-slow);
}
.sm-recipe-card:hover {
transform: translateY(-6px);
box-shadow: var(--sm-shadow-card-hover);
}
.sm-recipe-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.sm-recipe-card-image {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--sm-cream);
}
.sm-recipe-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--sm-ease-out);
}
.sm-recipe-card:hover .sm-recipe-card-image img {
transform: scale(1.06);
}
.sm-recipe-card-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
font-family: var(--sm-font-body);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: var(--sm-radius-full);
z-index: 2;
}
.sm-recipe-card-badge.sm-badge-easy {
background: var(--sm-forest-pale);
color: var(--sm-forest);
}
.sm-recipe-card-badge.sm-badge-medium {
background: var(--sm-gold-light);
color: #8B6914;
}
.sm-recipe-card-badge.sm-badge-hard {
background: var(--sm-coral-pale);
color: var(--sm-coral-dark);
}
.sm-recipe-card-diet-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
font-family: var(--sm-font-body);
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: var(--sm-radius-full);
background: var(--sm-white);
color: var(--sm-forest);
box-shadow: var(--sm-shadow-sm);
}
.sm-recipe-card-content {
padding: 20px 20px 24px;
}
.sm-recipe-card-category {
display: inline-block;
font-family: var(--sm-font-body);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sm-coral);
margin-bottom: 8px;
}
.sm-recipe-card-title {
font-family: var(--sm-font-display);
font-size: var(--sm-text-xl);
font-weight: 700;
line-height: 1.25;
margin-bottom: 8px;
color: var(--sm-charcoal);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-recipe-card-excerpt {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
line-height: 1.5;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-recipe-card-meta {
display: flex;
align-items: center;
gap: 16px;
padding-top: 16px;
border-top: 1px solid var(--sm-cloud);
}
.sm-recipe-card-meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--sm-text-xs);
font-weight: 500;
color: var(--sm-slate);
}
.sm-recipe-card-meta-item svg {
width: 14px;
height: 14px;
color: var(--sm-silver);
}
/* Save Button */
/* Scoped to .sm-recipe-card so the single-page Save button (.sm-save-recipe-btn)
and the sticky-bar Save button don't inherit the absolute / circular styling. */
.sm-recipe-card .sm-recipe-card-save {
position: absolute;
bottom: 20px;
right: 16px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sm-white);
border: 1.5px solid var(--sm-mist);
border-radius: 50%;
cursor: pointer;
transition: all var(--sm-transition-base);
z-index: 5;
}
.sm-recipe-card .sm-recipe-card-save svg {
width: 16px;
height: 16px;
color: var(--sm-slate);
transition: all var(--sm-transition-base);
}
.sm-recipe-card .sm-recipe-card-save:hover {
border-color: var(--sm-coral);
background: var(--sm-coral-pale);
}
.sm-recipe-card .sm-recipe-card-save:hover svg {
color: var(--sm-coral);
}
.sm-recipe-card .sm-recipe-card-save.saved {
background: var(--sm-coral);
border-color: var(--sm-coral);
}
.sm-recipe-card .sm-recipe-card-save.saved svg {
color: var(--sm-white);
fill: var(--sm-white);
}
/* Placeholder */
.sm-placeholder-image {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--sm-cream);
color: var(--sm-silver);
}
/* ============================================
RECIPE GRIDS
============================================ */
.sm-recipes-grid {
display: grid;
grid-template-columns: repeat(var(--sm-grid-columns, 3), 1fr);
gap: 28px;
}
.sm-recipes-grid-2 {
--sm-grid-columns: 2;
}
.sm-recipes-grid-4 {
--sm-grid-columns: 4;
}
/* ============================================
FEATURED RECIPE
============================================ */
.sm-featured-section {
padding: var(--sm-sp-16) 0;
}
/* Wrapper handles the page-width container padding so the card itself can be flush */
.sm-featured-recipe-wrap {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
.sm-featured-recipe {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0;
background: var(--sm-white);
border-radius: var(--sm-radius-2xl);
overflow: hidden;
box-shadow: var(--sm-shadow-lg);
/* Make sure both grid cells stretch to the same height */
align-items: stretch;
}
.sm-featured-recipe-image {
position: relative;
min-height: 420px;
overflow: hidden;
background: var(--sm-cloud);
align-self: stretch;
/* Make the cell itself a positioning context — eliminates any inherited padding/margin */
margin: 0;
padding: 0;
}
.sm-featured-recipe-image img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
display: block;
margin: 0;
padding: 0;
border-radius: 0;
}
/* Defensive: WP often wraps img in for permalinks */
.sm-featured-recipe-image a {
position: absolute;
inset: 0;
display: block;
}
.sm-featured-recipe-image a img {
position: absolute;
inset: 0;
}
.sm-featured-recipe-content {
padding: var(--sm-sp-10) var(--sm-sp-10);
display: flex;
flex-direction: column;
justify-content: center;
}
.sm-featured-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sm-font-body);
font-weight: 700;
font-size: var(--sm-text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sm-coral);
margin-bottom: var(--sm-sp-4);
padding: 6px 14px;
background: var(--sm-coral-pale);
border-radius: var(--sm-radius-full);
width: fit-content;
}
.sm-featured-tag svg {
width: 14px;
height: 14px;
}
.sm-featured-recipe-title {
font-size: var(--sm-text-4xl);
line-height: 1.15;
margin-bottom: var(--sm-sp-4);
letter-spacing: -0.02em;
}
.sm-featured-recipe-excerpt {
font-size: var(--sm-text-base);
color: var(--sm-slate);
line-height: 1.7;
margin-bottom: var(--sm-sp-6);
}
.sm-featured-recipe-meta {
display: flex;
gap: 20px;
margin-bottom: var(--sm-sp-8);
}
.sm-featured-recipe-meta .sm-recipe-card-meta-item {
font-size: var(--sm-text-sm);
}
.sm-featured-recipe-meta .sm-recipe-card-meta-item svg {
width: 18px;
height: 18px;
color: var(--sm-coral);
}
/* ============================================
CATEGORY CARDS
============================================ */
.sm-category-showcase {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
.sm-category-card {
position: relative;
border-radius: var(--sm-radius-xl);
overflow: hidden;
aspect-ratio: 1;
display: block;
text-decoration: none;
box-shadow: var(--sm-shadow-card);
transition: all var(--sm-transition-slow);
}
.sm-category-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: var(--sm-shadow-xl);
}
.sm-category-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--sm-ease-out);
}
.sm-category-card:hover img {
transform: scale(1.1);
}
.sm-category-card-content {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.65) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
color: var(--sm-white);
}
.sm-category-card-title {
font-family: var(--sm-font-display);
font-size: var(--sm-text-lg);
font-weight: 700;
color: var(--sm-white);
margin-bottom: 2px;
line-height: 1.2;
}
.sm-category-card-count {
font-size: var(--sm-text-xs);
font-weight: 500;
opacity: 0.85;
}
/* ============================================
ABOUT SECTION (Homepage)
============================================ */
.sm-about-section {
background: var(--sm-white);
padding: var(--sm-sp-20) 0;
}
.sm-about-wrapper {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
display: grid;
grid-template-columns: 400px 1fr;
gap: var(--sm-sp-16);
align-items: center;
}
.sm-about-image {
border-radius: var(--sm-radius-2xl);
overflow: hidden;
aspect-ratio: 3/4;
box-shadow: var(--sm-shadow-xl);
}
.sm-about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sm-about-content h2 {
font-size: var(--sm-text-4xl);
margin-bottom: var(--sm-sp-6);
letter-spacing: -0.02em;
}
.sm-about-content p {
font-size: var(--sm-text-base);
color: var(--sm-slate);
line-height: 1.8;
margin-bottom: var(--sm-sp-4);
max-width: 520px;
}
.sm-signature {
font-family: var(--sm-font-display);
font-style: italic;
font-size: var(--sm-text-2xl);
color: var(--sm-coral);
margin-top: var(--sm-sp-6);
}
.sm-about-placeholder {
min-height: 400px;
border-radius: var(--sm-radius-2xl);
}
/* ============================================
NEWSLETTER
============================================ */
.sm-newsletter {
background: var(--sm-forest);
padding: var(--sm-sp-16) var(--sm-sp-6);
text-align: center;
position: relative;
overflow: hidden;
}
.sm-newsletter::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
pointer-events: none;
}
.sm-newsletter::after {
content: '';
position: absolute;
bottom: -150px;
left: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
pointer-events: none;
}
.sm-newsletter-content {
position: relative;
z-index: 1;
max-width: 560px;
margin: 0 auto;
}
.sm-newsletter h2 {
font-size: var(--sm-text-4xl);
color: var(--sm-white);
margin-bottom: var(--sm-sp-4);
letter-spacing: -0.02em;
}
.sm-newsletter p {
color: rgba(255,255,255,0.8);
font-size: var(--sm-text-base);
line-height: 1.7;
margin-bottom: var(--sm-sp-8);
}
.sm-newsletter-form {
display: flex;
gap: 10px;
max-width: 460px;
margin: 0 auto var(--sm-sp-4);
}
.sm-newsletter-form input[type="email"] {
flex: 1;
padding: 14px 20px;
border: 2px solid rgba(255,255,255,0.2);
border-radius: var(--sm-radius-full);
background: rgba(255,255,255,0.1);
color: var(--sm-white);
font-family: var(--sm-font-body);
font-size: var(--sm-text-base);
outline: none;
transition: all var(--sm-transition-base);
}
.sm-newsletter-form input::placeholder {
color: rgba(255,255,255,0.5);
}
.sm-newsletter-form input:focus {
border-color: var(--sm-coral);
background: rgba(255,255,255,0.15);
}
.sm-newsletter-form button {
padding: 14px 28px;
background: var(--sm-coral);
color: var(--sm-white);
border: none;
border-radius: var(--sm-radius-full);
font-family: var(--sm-font-body);
font-weight: 600;
font-size: var(--sm-text-sm);
cursor: pointer;
transition: all var(--sm-transition-base);
white-space: nowrap;
}
.sm-newsletter-form button:hover {
background: var(--sm-coral-dark);
transform: translateY(-1px);
}
.sm-newsletter-note {
font-size: var(--sm-text-xs) !important;
color: rgba(255,255,255,0.5) !important;
margin: 0 !important;
}
.sm-newsletter-light {
background: var(--sm-cream);
}
.sm-newsletter-light h2 {
color: var(--sm-charcoal);
}
.sm-newsletter-light p {
color: var(--sm-slate);
}
.sm-newsletter-light .sm-newsletter-form input[type="email"] {
border-color: var(--sm-mist);
background: var(--sm-white);
color: var(--sm-charcoal);
}
.sm-newsletter-light .sm-newsletter-form input::placeholder {
color: var(--sm-silver);
}
.sm-newsletter-light .sm-newsletter-note {
color: var(--sm-silver) !important;
}
/* ============================================
SINGLE RECIPE PAGE
============================================ */
.sm-single-recipe {
padding: 0;
}
.sm-recipe-header {
background: var(--sm-white);
padding: var(--sm-sp-10) 0 var(--sm-sp-8);
border-bottom: 1px solid var(--sm-cloud);
}
.sm-recipe-header-inner {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
/* Breadcrumbs */
.sm-breadcrumbs {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--sm-text-xs);
font-weight: 500;
color: var(--sm-silver);
margin-bottom: var(--sm-sp-6);
flex-wrap: wrap;
}
.sm-breadcrumbs a {
color: var(--sm-slate);
text-decoration: none;
transition: color var(--sm-transition-fast);
}
.sm-breadcrumbs a:hover {
color: var(--sm-coral);
}
.sm-breadcrumb-sep {
color: var(--sm-mist);
margin: 0 2px;
}
.sm-breadcrumb-current {
color: var(--sm-charcoal);
font-weight: 600;
}
.sm-recipe-page-title {
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.12;
margin-bottom: var(--sm-sp-6);
letter-spacing: -0.025em;
max-width: 800px;
}
/* Recipe Author */
.sm-recipe-page-meta {
display: flex;
align-items: center;
gap: var(--sm-sp-6);
flex-wrap: wrap;
}
.sm-recipe-author {
display: flex;
align-items: center;
gap: 12px;
}
.sm-recipe-author img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.sm-author-name {
display: block;
font-weight: 600;
font-size: var(--sm-text-sm);
color: var(--sm-charcoal);
}
.sm-post-date {
display: block;
font-size: var(--sm-text-xs);
color: var(--sm-slate);
}
.sm-recipe-quick-stats {
display: flex;
gap: 12px;
}
.sm-stat {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
font-weight: 500;
}
/* Jump to Recipe */
.sm-jump-to-recipe {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: var(--sm-sp-4);
padding: 10px 20px;
background: var(--sm-forest-pale);
color: var(--sm-forest);
font-weight: 600;
font-size: var(--sm-text-sm);
border-radius: var(--sm-radius-full);
text-decoration: none;
transition: all var(--sm-transition-base);
}
.sm-jump-to-recipe:hover {
background: var(--sm-forest);
color: var(--sm-white);
}
.sm-jump-to-recipe svg {
width: 16px;
height: 16px;
}
/* Recipe Featured Image */
.sm-recipe-featured-image {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
.sm-recipe-featured-image img {
width: 100%;
max-height: 600px;
object-fit: cover;
border-radius: var(--sm-radius-2xl);
margin-top: var(--sm-sp-8);
}
/* Content Wrapper */
.sm-recipe-content-wrapper {
max-width: var(--sm-container-xl);
margin: var(--sm-sp-10) auto var(--sm-sp-16);
padding: 0 var(--sm-sp-6);
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--sm-sp-10);
align-items: start;
}
@media (max-width: 1024px) {
.sm-recipe-content-wrapper {
grid-template-columns: 1fr;
max-width: 800px;
}
}
.sm-recipe-sidebar {
position: sticky;
top: 100px;
}
.sm-sidebar-widget {
background: var(--sm-snow);
border-radius: var(--sm-radius-xl);
padding: var(--sm-sp-6);
margin-bottom: var(--sm-sp-6);
}
.sm-sidebar-title {
font-family: var(--sm-font-display);
font-size: var(--sm-text-lg);
margin-bottom: var(--sm-sp-4);
}
/* ============================================
SHARE SECTION (single recipe)
============================================ */
.sm-share-section {
margin: var(--sm-sp-10) 0;
padding: var(--sm-sp-6) 0;
border-top: 1px solid var(--sm-mist);
border-bottom: 1px solid var(--sm-mist);
}
.sm-share-section h3 {
font-family: var(--sm-font-display);
font-size: var(--sm-text-xl);
margin-bottom: var(--sm-sp-5);
}
.sm-share-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ============================================
SHARE BUTTONS — bulletproof against Kadence/WP Rocket
Uses .sm-share-grid as parent selector to boost specificity,
plus !important on the critical layout properties. Without these,
Kadence's reset wins and the icons stack on top of the text.
============================================ */
.sm-share-grid .sm-share-btn,
.sm-share-grid a.sm-share-btn,
.sm-share-grid button.sm-share-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 42px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 18px !important;
color: #fff !important;
background: var(--sm-charcoal);
border-radius: 999px !important;
font-family: var(--sm-font-body) !important;
font-size: var(--sm-text-sm) !important;
font-weight: 600 !important;
line-height: 1 !important;
text-decoration: none !important;
text-align: center !important;
border: none !important;
cursor: pointer !important;
white-space: nowrap !important;
box-sizing: border-box !important;
box-shadow: none !important;
transform: none !important;
transition: transform var(--sm-transition-fast),
box-shadow var(--sm-transition-fast),
filter var(--sm-transition-fast) !important;
/* Reset anything Kadence might inject */
flex-direction: row !important;
flex-wrap: nowrap !important;
vertical-align: middle !important;
position: relative !important;
top: auto !important;
left: auto !important;
margin: 0 !important;
}
.sm-share-grid .sm-share-btn > svg,
.sm-share-grid .sm-share-btn svg {
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
display: block !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
fill: currentColor;
}
.sm-share-grid .sm-share-btn > span {
display: inline !important;
color: inherit !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
line-height: 1 !important;
}
.sm-share-grid .sm-share-btn:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.25) !important;
filter: brightness(1.05);
color: #fff !important;
}
.sm-share-grid .sm-share-btn:active {
transform: translateY(0) !important;
}
/* Brand colors — apply to specific button classes */
.sm-share-grid .sm-share-pinterest { background: #E60023 !important; }
.sm-share-grid .sm-share-facebook { background: #1877F2 !important; }
.sm-share-grid .sm-share-x { background: #000000 !important; }
.sm-share-grid .sm-share-email { background: var(--sm-forest) !important; }
.sm-share-grid .sm-share-copy { background: var(--sm-charcoal) !important; }
/* The grid container itself */
.sm-share-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
}
/* ============================================
COMMENTS
============================================ */
.sm-comments {
margin-top: var(--sm-sp-12);
padding-top: var(--sm-sp-10);
border-top: 1px solid var(--sm-mist);
}
.sm-comments-title {
font-family: var(--sm-font-display);
font-size: var(--sm-text-2xl);
color: var(--sm-charcoal);
margin-bottom: var(--sm-sp-8);
letter-spacing: -0.01em;
}
.sm-comments-title .sm-comment-count-num {
color: var(--sm-coral);
}
.sm-comment-list,
.sm-comment-list .children {
list-style: none;
padding: 0;
margin: 0;
}
.sm-comment-list .children {
margin-left: var(--sm-sp-8);
margin-top: var(--sm-sp-6);
padding-left: var(--sm-sp-6);
border-left: 2px solid var(--sm-mist);
}
.sm-comment-list > li {
margin-bottom: var(--sm-sp-8);
}
.sm-comment-body {
background: var(--sm-snow);
border-radius: var(--sm-radius-xl);
padding: var(--sm-sp-6);
border: 1px solid transparent;
}
.sm-comment-pending .sm-comment-body {
background: #FFF8E6;
border-color: #FBD89D;
}
.sm-comment-pending-notice {
color: #8B6914;
font-size: var(--sm-text-sm);
font-style: italic;
margin: 0 0 var(--sm-sp-3);
padding: 8px 12px;
background: #FFF3D0;
border-radius: var(--sm-radius-md);
display: inline-block;
}
.sm-comment-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: var(--sm-sp-4);
}
.sm-comment-avatar img {
border-radius: 50%;
display: block;
}
.sm-comment-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.sm-comment-author,
.sm-comment-author a {
font-weight: 700;
color: var(--sm-charcoal);
text-decoration: none;
}
.sm-comment-author a:hover {
color: var(--sm-coral);
}
.sm-comment-date {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
}
.sm-comment-content {
color: var(--sm-charcoal);
line-height: 1.7;
}
.sm-comment-content p:last-child {
margin-bottom: 0;
}
.sm-comment-footer {
margin-top: var(--sm-sp-3);
display: flex;
gap: 16px;
font-size: var(--sm-text-sm);
}
.sm-comment-reply a,
.sm-comment-edit a {
color: var(--sm-coral);
font-weight: 600;
text-decoration: none;
}
.sm-comment-reply a:hover,
.sm-comment-edit a:hover {
text-decoration: underline;
}
/* ============================================
COMMENT FORM
============================================ */
.sm-comment-form,
#commentform {
margin-top: var(--sm-sp-10);
padding-top: var(--sm-sp-8);
border-top: 1px solid var(--sm-mist);
}
.comment-reply-title,
#reply-title {
font-family: var(--sm-font-display);
font-size: var(--sm-text-2xl);
color: var(--sm-charcoal);
margin-bottom: var(--sm-sp-2);
letter-spacing: -0.01em;
}
.sm-comment-notes,
.comment-notes {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
margin-bottom: var(--sm-sp-6);
}
.sm-comment-notes .required,
.comment-notes .required,
.sm-form-field .required {
color: var(--sm-coral);
}
.sm-form-field {
display: block;
margin-bottom: var(--sm-sp-5);
}
.sm-form-field label {
display: block;
font-weight: 600;
color: var(--sm-charcoal);
margin-bottom: 6px;
font-size: var(--sm-text-sm);
}
.sm-form-field input[type="text"],
.sm-form-field input[type="email"],
.sm-form-field input[type="url"],
.sm-form-field textarea {
width: 100%;
padding: 12px 16px;
font-family: var(--sm-font-body);
font-size: var(--sm-text-base);
color: var(--sm-charcoal);
background: var(--sm-white);
border: 1.5px solid var(--sm-mist);
border-radius: var(--sm-radius-lg);
outline: none;
transition: border-color var(--sm-transition-base),
box-shadow var(--sm-transition-base);
-webkit-appearance: none;
appearance: none;
}
.sm-form-field textarea {
resize: vertical;
min-height: 120px;
font-family: var(--sm-font-body);
}
.sm-form-field input:focus,
.sm-form-field textarea:focus {
border-color: var(--sm-coral);
box-shadow: 0 0 0 3px var(--sm-coral-pale);
}
/* Half-width fields side by side on desktop */
.sm-comment-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--sm-sp-4);
}
.sm-comment-form > .comment-form-comment,
.sm-comment-form > .sm-form-field-textarea,
.sm-comment-form > .comment-form-url,
.sm-comment-form > .sm-form-field-checkbox,
.sm-comment-form > .form-submit,
.sm-comment-form > .comment-notes,
.sm-comment-form > .sm-comment-notes,
.sm-comment-form > .logged-in-as,
.sm-comment-form > .comment-respond-title,
.sm-comment-form > #reply-title,
.sm-comment-form > .comment-reply-title {
grid-column: 1 / -1;
}
.sm-form-field-checkbox {
display: flex !important;
align-items: center;
gap: 10px;
}
.sm-form-field-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--sm-coral);
}
.sm-form-field-checkbox label {
margin: 0;
font-weight: 400;
font-size: var(--sm-text-sm);
color: var(--sm-slate);
}
.form-submit {
margin-top: var(--sm-sp-4);
}
.form-submit .submit {
/* Already styled via .sm-btn classes from the comment_form args */
}
/* Mobile: stack the form */
@media (max-width: 640px) {
.sm-comment-form {
grid-template-columns: 1fr;
}
.sm-comment-list .children {
margin-left: var(--sm-sp-4);
padding-left: var(--sm-sp-4);
}
.sm-comment-body {
padding: var(--sm-sp-4);
}
}
/* ============================================
PLUGIN-INJECTED COMMENT RATING STARS
WP Recipe Maker and similar plugins inject a "Recipe Rating" star
selector into the comment form. Style them to match the theme.
============================================ */
.comment-form-rating,
.wprm-comment-rating-form,
.wprm-recipe-rating-input,
.commentratingbox {
margin-bottom: var(--sm-sp-5);
padding: var(--sm-sp-4);
background: var(--sm-snow);
border-radius: var(--sm-radius-lg);
border: 1px solid var(--sm-mist);
grid-column: 1 / -1;
}
.comment-form-rating label,
.commentratingbox > label {
display: block;
font-weight: 600;
color: var(--sm-charcoal);
margin-bottom: 8px;
font-size: var(--sm-text-sm);
}
/* Star icons — color them gold like our rating display */
.comment-form-rating .star,
.comment-form-rating .dashicons-star-empty,
.commentratingbox .star {
color: var(--sm-mist);
font-size: 28px;
cursor: pointer;
transition: color var(--sm-transition-fast);
}
.comment-form-rating .star.selected,
.comment-form-rating .star:hover,
.comment-form-rating .star:hover ~ .star,
.commentratingbox .star.active,
.commentratingbox .star.selected {
color: #F5B431; /* gold */
}
/* WPRM star icons */
.wprm-rating-star,
.wprm-rating-star-full,
.wprm-rating-stars svg {
color: #F5B431 !important;
fill: #F5B431 !important;
}
.wprm-rating-star-empty {
color: var(--sm-mist) !important;
fill: var(--sm-mist) !important;
}
/* ============================================
WP ULTIMATE REVIEW STYLING
The "Be the first to rate!" / "Rate this recipe" box at the bottom of
single posts is rendered by Wp Ultimate Review plugin. Style it so
it matches the theme instead of looking like unstyled raw output.
============================================ */
.wpur-rating-block,
.wpur-review-content,
.wpur-frontend-rating,
div[class*="wpur-"] {
font-family: var(--sm-font-body);
color: var(--sm-charcoal);
}
.wpur-rating-block {
background: #FFF8E6;
border: 1px solid #FBD89D;
border-radius: var(--sm-radius-xl);
padding: var(--sm-sp-6);
margin: var(--sm-sp-8) 0;
}
.wpur-rating-block h3,
.wpur-rating-block h4,
.wpur-rating-title {
font-family: var(--sm-font-display);
font-size: var(--sm-text-xl);
color: var(--sm-charcoal);
margin: 0 0 var(--sm-sp-3);
}
/* Stars: gold when filled, mist gray when empty */
.wpur-stars,
.wpur-rating-stars,
.wpur-frontend-stars {
display: inline-flex;
gap: 4px;
font-size: 0;
}
.wpur-stars i,
.wpur-stars .star,
.wpur-rating-stars i,
.wpur-rating-stars .star,
.wpur-frontend-stars i,
.wpur-frontend-stars .star,
.wpur-rating-block i.fa-star,
.wpur-rating-block i.fa-star-o {
color: var(--sm-mist) !important;
font-size: 26px !important;
transition: color var(--sm-transition-fast);
}
.wpur-stars i.filled,
.wpur-stars i.fa-star,
.wpur-stars .star.filled,
.wpur-stars .star.selected,
.wpur-rating-stars i.filled,
.wpur-rating-stars .star.filled,
.wpur-rating-stars .star.selected,
.wpur-frontend-stars i.filled,
.wpur-frontend-stars .star.filled,
.wpur-frontend-stars .star.selected {
color: #F5B431 !important;
}
/* Hover-to-fill interaction for interactive star rows */
.wpur-frontend-stars .star,
.wpur-frontend-rating .star {
cursor: pointer;
}
.wpur-frontend-stars:hover .star,
.wpur-frontend-rating:hover .star {
color: #F5B431 !important;
}
.wpur-frontend-stars .star:hover ~ .star,
.wpur-frontend-rating .star:hover ~ .star {
color: var(--sm-mist) !important;
}
/* Rating display number */
.wpur-rating-number,
.wpur-average-rating {
font-family: var(--sm-font-display);
font-size: var(--sm-text-3xl);
font-weight: 700;
color: var(--sm-charcoal);
}
.wpur-rating-count,
.wpur-total-ratings {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
}
/* "Be the first to rate" / call-to-action text */
.wpur-be-the-first,
.wpur-no-ratings {
color: var(--sm-slate);
font-size: var(--sm-text-sm);
}
/* ============================================
ADDTOANY HARD HIDE
Apply everywhere (not just single recipes) with body specificity so
it wins against the plugin's own inline styles. The theme provides
its own share section; we never want AddToAny's auto-injection.
============================================ */
body .a2a_kit,
body .addtoany_share_save_container,
body .addtoany_list,
body .addtoany_shortcode,
body .addtoany_floating_style,
body .a2a_floating_style,
body .a2a_full_footer,
body div[class*="addtoany"],
body div[class*="a2a_kit"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
.sm-related-section {
max-width: var(--sm-container-xl);
margin: 0 auto var(--sm-sp-16);
padding: 0 var(--sm-sp-6);
}
.sm-related-section .sm-recipes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sm-sp-6);
}
@media (max-width: 768px) {
.sm-related-section .sm-recipes-grid {
grid-template-columns: 1fr;
}
}
.sm-recipe-main-content {
font-size: var(--sm-text-md);
line-height: 1.8;
color: var(--sm-graphite);
}
.sm-recipe-main-content h2 {
font-size: var(--sm-text-3xl);
margin: var(--sm-sp-10) 0 var(--sm-sp-4);
}
.sm-recipe-main-content h3 {
font-size: var(--sm-text-xl);
margin: var(--sm-sp-8) 0 var(--sm-sp-3);
}
.sm-recipe-main-content img {
border-radius: var(--sm-radius-lg);
margin: var(--sm-sp-6) 0;
}
.sm-recipe-main-content a {
color: var(--sm-coral);
text-decoration: underline;
text-decoration-color: var(--sm-coral-light);
text-underline-offset: 3px;
transition: all var(--sm-transition-fast);
}
.sm-recipe-main-content a:hover {
text-decoration-color: var(--sm-coral);
}
/* Recipe Info Box */
.sm-recipe-info-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1px;
background: var(--sm-mist);
border-radius: var(--sm-radius-xl);
overflow: hidden;
margin: var(--sm-sp-8) 0;
box-shadow: var(--sm-shadow-card);
}
.sm-recipe-info-item {
background: var(--sm-white);
padding: var(--sm-sp-5) var(--sm-sp-4);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.sm-recipe-info-item svg {
width: 22px;
height: 22px;
color: var(--sm-coral);
}
.sm-recipe-info-label {
font-size: var(--sm-text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sm-silver);
}
.sm-recipe-info-value {
font-family: var(--sm-font-display);
font-size: var(--sm-text-lg);
font-weight: 700;
color: var(--sm-charcoal);
}
/* Recipe Actions */
.sm-recipe-actions {
display: flex;
gap: 10px;
margin-top: var(--sm-sp-6);
flex-wrap: wrap;
}
.sm-save-recipe-btn {
gap: 6px;
}
/* ============================================
RECIPE INDEX / CATEGORY ARCHIVE
============================================ */
.sm-recipe-index,
.sm-category-archive {
padding-bottom: var(--sm-sp-16);
}
.sm-page-header {
position: relative;
padding: var(--sm-sp-16) 0 var(--sm-sp-12);
margin-bottom: var(--sm-sp-10);
background:
radial-gradient(circle at 20% 0%, var(--sm-coral-pale) 0%, transparent 45%),
radial-gradient(circle at 80% 100%, var(--sm-forest-pale) 0%, transparent 50%),
linear-gradient(180deg, var(--sm-snow) 0%, var(--sm-white) 100%);
border-bottom: 1px solid var(--sm-cloud);
overflow: hidden;
}
.sm-page-header::after {
/* subtle bottom fade so the section blends with the page */
content: '';
position: absolute;
inset: auto 0 0 0;
height: 60px;
background: linear-gradient(180deg, transparent, var(--sm-snow));
pointer-events: none;
}
.sm-page-header-content {
position: relative;
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
text-align: center;
z-index: 1;
}
.sm-page-header .sm-section-label {
margin-bottom: var(--sm-sp-3);
}
.sm-page-header .sm-section-label::before {
/* center the decorator for centered page heads */
width: 32px;
}
.sm-page-title {
font-size: var(--sm-text-5xl);
margin-bottom: var(--sm-sp-4);
letter-spacing: -0.025em;
line-height: 1.1;
}
.sm-page-subtitle {
font-size: var(--sm-text-lg);
color: var(--sm-slate);
max-width: 560px;
margin: 0 auto var(--sm-sp-8);
line-height: 1.6;
}
/* Index Search */
.sm-index-search {
max-width: 480px;
margin: 0 auto;
}
/* Recipe count line under filter bar */
.sm-recipe-count {
text-align: center;
padding: var(--sm-sp-4) 0;
font-size: var(--sm-text-sm);
color: var(--sm-slate);
}
.sm-recipe-count strong {
color: var(--sm-charcoal);
font-weight: 700;
}
/* Empty state when no recipes exist yet */
.sm-no-results {
grid-column: 1 / -1;
text-align: center;
padding: var(--sm-sp-16) var(--sm-sp-6);
color: var(--sm-slate);
}
.sm-no-results h2 {
font-family: var(--sm-font-display);
font-size: var(--sm-text-2xl);
color: var(--sm-charcoal);
margin-bottom: var(--sm-sp-3);
}
/* WordPress standard a11y utility — visually hides text while keeping it
readable by screen readers. Defensive in case the active theme/plugin
stack doesn't provide it. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* Filter Bar */
.sm-filter-bar {
max-width: var(--sm-container-xl);
margin: 0 auto var(--sm-sp-10);
padding: 0 var(--sm-sp-6);
}
.sm-filter-wrapper {
display: flex;
flex-direction: column;
gap: var(--sm-sp-4);
}
.sm-filter-group {
min-width: 0;
width: 100%;
}
.sm-filter-label {
display: block;
font-size: var(--sm-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sm-slate);
margin-bottom: var(--sm-sp-3);
}
.sm-filter-pills {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
gap: 8px;
}
/* Sort */
.sm-sort-select {
padding: 10px 16px;
font-family: var(--sm-font-body);
font-size: var(--sm-text-sm);
border: 1.5px solid var(--sm-mist);
border-radius: var(--sm-radius-full);
background: var(--sm-white);
color: var(--sm-charcoal);
cursor: pointer;
outline: none;
transition: border-color var(--sm-transition-fast);
}
.sm-sort-select:focus {
border-color: var(--sm-coral);
}
/* Results info */
.sm-results-info {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
margin-bottom: var(--sm-sp-6);
max-width: var(--sm-container-xl);
margin-left: auto;
margin-right: auto;
padding: 0 var(--sm-sp-6);
}
/* Recipe grid on index */
.sm-index-grid {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
/* Load More */
.sm-load-more-wrap {
text-align: center;
margin-top: var(--sm-sp-10);
}
.sm-load-more {
position: relative;
overflow: hidden;
}
.sm-load-more.loading {
color: transparent !important;
pointer-events: none;
}
.sm-load-more.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--sm-coral-light);
border-top-color: var(--sm-coral);
border-radius: 50%;
animation: sm-spin 0.6s linear infinite;
}
@keyframes sm-spin {
to { transform: rotate(360deg); }
}
/* No results */
.sm-no-recipes {
text-align: center;
padding: var(--sm-sp-16) var(--sm-sp-6);
color: var(--sm-slate);
font-size: var(--sm-text-lg);
}
/* ============================================
ABOUT PAGE
============================================ */
.sm-about-page .sm-about-hero {
background: var(--sm-white);
padding: var(--sm-sp-16) 0 var(--sm-sp-12);
text-align: center;
border-bottom: 1px solid var(--sm-cloud);
}
.sm-about-hero-title {
font-size: var(--sm-text-5xl);
margin-bottom: var(--sm-sp-4);
}
.sm-about-hero-title span {
color: var(--sm-coral);
font-style: italic;
}
.sm-about-hero-subtitle {
font-size: var(--sm-text-lg);
color: var(--sm-slate);
max-width: 500px;
margin: 0 auto;
}
.sm-about-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--sm-sp-16);
align-items: start;
}
.sm-about-image-large {
border-radius: var(--sm-radius-2xl);
overflow: hidden;
aspect-ratio: 3/4;
box-shadow: var(--sm-shadow-xl);
position: sticky;
top: 100px;
}
.sm-about-image-large img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sm-about-text h2 {
font-size: var(--sm-text-3xl);
margin-bottom: var(--sm-sp-6);
}
.sm-about-text h3 {
font-size: var(--sm-text-xl);
margin: var(--sm-sp-8) 0 var(--sm-sp-4);
}
.sm-about-text p {
font-size: var(--sm-text-base);
color: var(--sm-graphite);
line-height: 1.85;
}
/* Stats */
.sm-about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: var(--sm-sp-10) 0;
}
.sm-about-stat-item {
text-align: center;
padding: var(--sm-sp-6);
background: var(--sm-cream);
border-radius: var(--sm-radius-xl);
}
.sm-about-stat-number {
font-family: var(--sm-font-display);
font-size: var(--sm-text-4xl);
font-weight: 700;
color: var(--sm-coral);
display: block;
line-height: 1;
margin-bottom: 8px;
}
.sm-about-stat-desc {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
font-weight: 500;
}
/* ============================================
FOOTER
============================================ */
.sm-footer {
background: var(--sm-charcoal);
color: rgba(255,255,255,0.7);
font-size: var(--sm-text-sm);
}
.sm-footer a {
color: rgba(255,255,255,0.7);
transition: color var(--sm-transition-fast);
}
.sm-footer a:hover {
color: var(--sm-white);
}
.sm-footer-main {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: var(--sm-sp-16) var(--sm-sp-6) var(--sm-sp-12);
}
.sm-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--sm-sp-10);
}
.sm-footer-brand {
max-width: 280px;
}
.sm-footer-logo {
font-family: var(--sm-font-display);
font-size: var(--sm-text-xl);
font-weight: 700;
color: var(--sm-white) !important;
display: inline-block;
margin-bottom: var(--sm-sp-4);
}
.sm-footer-logo span {
color: var(--sm-coral);
}
.sm-footer-brand p {
color: rgba(255,255,255,0.5);
line-height: 1.6;
margin-bottom: var(--sm-sp-6);
}
.sm-footer-social {
display: flex;
gap: 10px;
}
.sm-footer-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.08);
border-radius: 50%;
color: rgba(255,255,255,0.6);
transition: all var(--sm-transition-base);
}
.sm-footer-social a:hover {
background: var(--sm-coral);
color: var(--sm-white);
transform: translateY(-2px);
}
.sm-footer-heading {
font-family: var(--sm-font-body);
font-size: var(--sm-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.4);
margin-bottom: var(--sm-sp-5);
}
.sm-footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.sm-footer-column ul li {
margin-bottom: 10px;
}
.sm-footer-column ul li a {
font-size: var(--sm-text-sm);
padding: 2px 0;
display: inline-block;
}
.sm-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: var(--sm-sp-6) var(--sm-sp-6);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--sm-sp-4);
}
.sm-footer-copyright {
font-size: var(--sm-text-xs);
color: rgba(255,255,255,0.35);
}
.sm-footer-legal {
display: flex;
gap: var(--sm-sp-6);
}
.sm-footer-legal a {
font-size: var(--sm-text-xs);
color: rgba(255,255,255,0.35);
}
.sm-footer-legal a:hover {
color: rgba(255,255,255,0.7);
}
/* Saved Recipes FAB */
.sm-saved-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 52px;
height: 52px;
background: var(--sm-coral);
color: var(--sm-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--sm-shadow-xl);
z-index: var(--sm-z-fixed);
transition: bottom 400ms var(--sm-ease-out), background var(--sm-transition-base), transform var(--sm-transition-base);
}
/* Lift the FAB above the sticky bar when it's visible (mobile).
Two selectors: :has() for modern browsers, body class for older ones (set by JS). */
body:has(.sm-sticky-bar.visible) .sm-saved-fab,
body.sm-sticky-bar-visible .sm-saved-fab {
bottom: 84px;
}
/* ============================================
BACK TO TOP BUTTON
============================================ */
.sm-back-to-top {
position: fixed;
bottom: 24px;
right: 88px; /* sits to the LEFT of the FAB so they don't stack */
width: 48px;
height: 48px;
background: var(--sm-charcoal);
color: var(--sm-white);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: var(--sm-z-fixed);
box-shadow: 0 6px 20px -4px rgba(15, 23, 42, 0.30);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 250ms var(--sm-ease-out),
visibility 0s linear 250ms,
transform 250ms var(--sm-ease-out),
background var(--sm-transition-fast),
box-shadow var(--sm-transition-fast);
}
.sm-back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 250ms var(--sm-ease-out),
visibility 0s linear 0s,
transform 250ms var(--sm-ease-out),
background var(--sm-transition-fast),
box-shadow var(--sm-transition-fast);
}
.sm-back-to-top:hover {
background: var(--sm-coral);
box-shadow: 0 8px 24px -4px rgba(232, 107, 74, 0.45);
}
.sm-back-to-top:focus-visible {
outline: 3px solid var(--sm-coral-pale);
outline-offset: 2px;
}
.sm-back-to-top svg {
width: 22px;
height: 22px;
display: block;
}
/* Lift back-to-top above sticky bar too */
body:has(.sm-sticky-bar.visible) .sm-back-to-top,
body.sm-sticky-bar-visible .sm-back-to-top {
bottom: 84px;
}
/* Touch device touch-target safety */
@media (pointer: coarse) {
.sm-back-to-top {
width: 52px;
height: 52px;
}
}
/* Mobile: shift to the left edge if right side gets crowded */
@media (max-width: 480px) {
.sm-back-to-top {
right: 80px;
}
}
.sm-saved-fab:hover {
background: var(--sm-coral-dark);
transform: translateY(-2px) scale(1.05);
color: var(--sm-white);
}
.sm-fab-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 20px;
height: 20px;
background: var(--sm-forest);
color: var(--sm-white);
font-size: 10px;
font-weight: 700;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border: 2px solid var(--sm-white);
}
/* ============================================
TOAST NOTIFICATIONS
============================================ */
.sm-toast {
position: fixed;
bottom: 90px;
right: 24px;
padding: 14px 24px;
background: var(--sm-charcoal);
color: var(--sm-white);
font-family: var(--sm-font-body);
font-size: var(--sm-text-sm);
font-weight: 500;
border-radius: var(--sm-radius-lg);
box-shadow: var(--sm-shadow-2xl);
z-index: var(--sm-z-toast);
opacity: 0;
transform: translateY(10px);
transition: all var(--sm-transition-base);
pointer-events: none;
}
.sm-toast.visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================
RELATED RECIPES
============================================ */
.sm-related-recipes {
background: var(--sm-cream);
padding: var(--sm-sp-16) 0;
}
.sm-related-recipes .sm-recipes-grid {
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
/* ============================================
CONTACT PAGE
============================================ */
.sm-contact-page {
padding-bottom: var(--sm-sp-16);
}
.sm-contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--sm-sp-12);
max-width: var(--sm-container-xl);
margin: 0 auto;
padding: 0 var(--sm-sp-6);
}
.sm-contact-info-card {
background: var(--sm-white);
border-radius: var(--sm-radius-xl);
padding: var(--sm-sp-8);
box-shadow: var(--sm-shadow-card);
}
.sm-contact-form-card {
background: var(--sm-white);
border-radius: var(--sm-radius-xl);
padding: var(--sm-sp-8);
box-shadow: var(--sm-shadow-card);
}
.sm-form-group {
margin-bottom: var(--sm-sp-5);
}
.sm-form-group label {
display: block;
font-size: var(--sm-text-sm);
font-weight: 600;
color: var(--sm-charcoal);
margin-bottom: 6px;
}
.sm-form-control {
width: 100%;
padding: 12px 16px;
font-family: var(--sm-font-body);
font-size: var(--sm-text-base);
border: 1.5px solid var(--sm-mist);
border-radius: var(--sm-radius-md);
background: var(--sm-snow);
color: var(--sm-charcoal);
outline: none;
transition: all var(--sm-transition-fast);
}
.sm-form-control:focus {
border-color: var(--sm-coral);
box-shadow: 0 0 0 3px var(--sm-coral-pale);
background: var(--sm-white);
}
textarea.sm-form-control {
min-height: 140px;
resize: vertical;
}
/* ============================================
SAVED RECIPES PAGE
============================================ */
.sm-saved-page {
padding-bottom: var(--sm-sp-16);
}
.sm-saved-empty {
text-align: center;
padding: var(--sm-sp-20);
color: var(--sm-slate);
}
.sm-saved-empty svg {
width: 64px;
height: 64px;
color: var(--sm-mist);
margin-bottom: var(--sm-sp-6);
}
/* ============================================
ANIMATIONS
============================================ */
.sm-animate-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms var(--sm-ease-out), transform 600ms var(--sm-ease-out);
}
.sm-animate-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered delays */
.sm-animate-in:nth-child(2) { transition-delay: 80ms; }
.sm-animate-in:nth-child(3) { transition-delay: 160ms; }
.sm-animate-in:nth-child(4) { transition-delay: 240ms; }
.sm-animate-in:nth-child(5) { transition-delay: 320ms; }
.sm-animate-in:nth-child(6) { transition-delay: 400ms; }
/* Hero animations */
@keyframes sm-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.sm-hero-content > * {
animation: sm-fade-up 700ms var(--sm-ease-out) both;
}
.sm-hero-content > *:nth-child(1) { animation-delay: 100ms; }
.sm-hero-content > *:nth-child(2) { animation-delay: 200ms; }
.sm-hero-content > *:nth-child(3) { animation-delay: 300ms; }
.sm-hero-content > *:nth-child(4) { animation-delay: 400ms; }
.sm-hero-content > *:nth-child(5) { animation-delay: 500ms; }
.sm-hero-visual {
animation: sm-fade-up 700ms var(--sm-ease-out) 300ms both;
}
/* ============================================
RESPONSIVE — TABLET
============================================ */
@media (max-width: 1024px) {
:root {
--sm-text-5xl: 2.5rem;
--sm-text-6xl: 3rem;
}
.sm-hero-inner {
grid-template-columns: 1fr;
gap: var(--sm-sp-10);
}
.sm-hero-content {
max-width: 100%;
text-align: center;
}
.sm-hero-search {
margin-left: auto;
margin-right: auto;
}
.sm-hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.sm-hero-categories {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
/* Fade-out edges so cut-off pills look intentional */
mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 24px), transparent 100%);
}
.sm-hero-categories::-webkit-scrollbar {
display: none;
}
.sm-hero-categories .sm-category-pill {
scroll-snap-align: start;
}
.sm-hero-visual {
max-width: 500px;
margin: 0 auto;
}
.sm-hero-stat {
left: 20px;
}
.sm-featured-recipe {
grid-template-columns: 1fr;
}
.sm-featured-recipe-image {
min-height: 280px;
height: 280px;
max-height: 50vh;
}
.sm-about-wrapper {
grid-template-columns: 1fr;
gap: var(--sm-sp-10);
}
.sm-about-image {
max-width: 400px;
margin: 0 auto;
}
.sm-recipes-grid {
--sm-grid-columns: 2;
}
.sm-recipes-grid-4 {
--sm-grid-columns: 2;
}
.sm-category-showcase {
grid-template-columns: repeat(3, 1fr);
}
.sm-footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--sm-sp-8);
}
.sm-footer-brand {
grid-column: 1 / -1;
max-width: 100%;
}
.sm-about-grid {
grid-template-columns: 1fr;
gap: var(--sm-sp-10);
}
.sm-about-image-large {
position: static;
max-width: 450px;
margin: 0 auto;
}
.sm-contact-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
RESPONSIVE — MOBILE
============================================ */
@media (max-width: 640px) {
:root {
--sm-text-4xl: 1.875rem;
--sm-text-5xl: 2.25rem;
}
.sm-container,
.sm-container-narrow,
.sm-container-wide {
padding: 0 var(--sm-sp-4);
}
.sm-section {
padding: var(--sm-sp-12) 0;
}
.sm-hero {
padding: var(--sm-sp-8) 0 var(--sm-sp-10);
}
.sm-hero-inner {
padding: 0 var(--sm-sp-4);
}
.sm-hero-visual {
gap: 10px;
padding-bottom: var(--sm-sp-4); /* stat is hidden on mobile, restore standard padding */
}
.sm-hero-stat {
display: none;
}
.sm-hero-eyebrow {
font-size: 10px;
}
.sm-recipes-grid {
--sm-grid-columns: 1;
gap: 20px;
}
.sm-recipes-grid-4 {
--sm-grid-columns: 1;
}
.sm-category-showcase {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.sm-featured-recipe-content {
padding: var(--sm-sp-6);
}
.sm-featured-recipe-title {
font-size: var(--sm-text-2xl);
}
.sm-newsletter {
padding: var(--sm-sp-10) var(--sm-sp-4);
}
.sm-newsletter-form {
flex-direction: column;
}
.sm-newsletter-form button {
width: 100%;
}
.sm-footer-grid {
grid-template-columns: 1fr;
gap: var(--sm-sp-8);
}
.sm-footer-bottom {
flex-direction: column;
text-align: center;
}
.sm-recipe-header {
padding: var(--sm-sp-6) 0;
}
.sm-recipe-featured-image img {
border-radius: var(--sm-radius-lg);
}
.sm-recipe-info-box {
grid-template-columns: repeat(2, 1fr);
}
.sm-about-stats {
grid-template-columns: 1fr;
}
.sm-page-header {
padding: var(--sm-sp-8) 0 var(--sm-sp-6);
}
.sm-page-title {
font-size: var(--sm-text-3xl);
}
.sm-btn-lg {
padding: 14px 24px;
}
/* Fix hero title breaking */
.sm-hero-title {
hyphens: none !important;
word-break: normal !important;
}
}
/* Print styles moved to enhanced section above */
/* ============================================
STAR RATINGS
============================================ */
.sm-stars {
display: inline-flex;
align-items: center;
gap: 2px;
}
.sm-stars svg {
width: 14px;
height: 14px;
color: var(--sm-mist);
transition: color var(--sm-transition-fast);
cursor: pointer;
}
.sm-stars svg.filled {
color: var(--sm-gold);
fill: var(--sm-gold);
}
.sm-stars svg.half-filled {
color: var(--sm-gold);
}
.sm-stars-static svg {
cursor: default;
}
.sm-rating-display {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--sm-text-xs);
color: var(--sm-slate);
}
.sm-rating-display .sm-rating-count {
font-weight: 500;
}
.sm-recipe-card .sm-rating-display {
margin-top: 8px;
padding-top: 0;
border-top: none;
}
/* Large rating for single recipe */
.sm-rating-large {
display: flex;
align-items: center;
gap: 12px;
padding: var(--sm-sp-6);
background: var(--sm-gold-light);
border-radius: var(--sm-radius-xl);
margin: var(--sm-sp-8) 0;
}
.sm-rating-large .sm-stars svg {
width: 24px;
height: 24px;
}
.sm-rating-large .sm-rating-value {
font-family: var(--sm-font-display);
font-size: var(--sm-text-3xl);
font-weight: 700;
color: var(--sm-charcoal);
line-height: 1;
}
.sm-rating-large .sm-rating-text {
font-size: var(--sm-text-sm);
color: var(--sm-slate);
}
/* ============================================
STICKY RECIPE ACTION BAR
============================================ */
.sm-sticky-bar {
position: fixed;
bottom: -80px;
left: 0;
right: 0;
background: var(--sm-white);
border-top: 1px solid var(--sm-mist);
padding: 10px var(--sm-sp-4);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: var(--sm-z-fixed);
transition: bottom 400ms var(--sm-ease-out);
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.sm-sticky-bar.visible {
bottom: 0;
}
.sm-sticky-bar .sm-sticky-title {
font-family: var(--sm-font-display);
font-size: var(--sm-text-sm);
font-weight: 700;
color: var(--sm-charcoal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
margin-right: auto;
}
.sm-sticky-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 14px;
font-family: var(--sm-font-body);
font-weight: 600;
font-size: 12px;
border: 1.5px solid var(--sm-mist);
border-radius: var(--sm-radius-full);
background: var(--sm-white);
color: var(--sm-graphite);
cursor: pointer;
transition: all var(--sm-transition-base);
white-space: nowrap;
}
.sm-sticky-btn:hover {
border-color: var(--sm-coral);
color: var(--sm-coral);
}
.sm-sticky-btn svg {
width: 14px;
height: 14px;
}
.sm-sticky-btn-primary {
background: var(--sm-coral);
color: var(--sm-white);
border-color: var(--sm-coral);
}
.sm-sticky-btn-primary:hover {
background: var(--sm-coral-dark);
border-color: var(--sm-coral-dark);
color: var(--sm-white);
}
/* Hide sticky bar on desktop by default, show on mobile or when scrolled */
@media (min-width: 641px) {
.sm-sticky-bar { display: none; }
.sm-sticky-bar.visible.desktop-show { display: flex; }
}
/* ============================================
MACRO NUTRITION VISUAL BARS
============================================ */
.sm-macro-bars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: var(--sm-sp-6) 0;
}
.sm-macro-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.sm-macro-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.sm-macro-label {
font-size: var(--sm-text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sm-slate);
}
.sm-macro-value {
font-family: var(--sm-font-display);
font-size: var(--sm-text-lg);
font-weight: 700;
color: var(--sm-charcoal);
}
.sm-macro-track {
height: 8px;
background: var(--sm-cloud);
border-radius: 4px;
overflow: hidden;
}
.sm-macro-fill {
height: 100%;
border-radius: 4px;
transition: width 800ms var(--sm-ease-out);
}
.sm-macro-fill.protein { background: var(--sm-coral); }
.sm-macro-fill.carbs { background: var(--sm-gold); }
.sm-macro-fill.fat { background: var(--sm-forest); }
.sm-macro-fill.fiber { background: #85B7EB; }
/* ============================================
WAVE / CURVE SECTION DIVIDERS
============================================ */
.sm-wave-divider {
position: relative;
height: 60px;
overflow: hidden;
margin-top: -1px;
}
.sm-wave-divider svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
}
.sm-wave-divider-top {
margin-bottom: -1px;
margin-top: 0;
}
.sm-wave-divider-top svg {
top: 0;
bottom: auto;
transform: rotate(180deg);
}
/* ============================================
BACKGROUND TEXTURES & DECORATIONS
============================================ */
.sm-section-textured {
position: relative;
}
.sm-section-textured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
.sm-section-textured > * {
position: relative;
z-index: 1;
}
/* Organic blob decorations */
.sm-blob-decoration {
position: absolute;
border-radius: 50%;
opacity: 0.04;
pointer-events: none;
}
/* Grain overlay for sections */
.sm-grain-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.015;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
/* ============================================
COOK MODE
============================================ */
.sm-cook-mode-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--sm-white);
z-index: 9999;
overflow-y: auto;
padding: var(--sm-sp-6);
}
.sm-cook-mode-overlay.active {
display: block;
}
.sm-cook-mode-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sm-sp-4) 0;
border-bottom: 2px solid var(--sm-coral);
margin-bottom: var(--sm-sp-6);
}
.sm-cook-mode-header h2 {
font-size: var(--sm-text-xl);
margin: 0;
}
.sm-cook-mode-close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sm-cloud);
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: var(--sm-graphite);
}
.sm-cook-mode-step {
padding: var(--sm-sp-6);
background: var(--sm-snow);
border-radius: var(--sm-radius-xl);
margin-bottom: var(--sm-sp-4);
font-size: var(--sm-text-lg);
line-height: 1.8;
}
.sm-cook-mode-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--sm-coral);
color: var(--sm-white);
font-weight: 700;
font-size: var(--sm-text-base);
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
}
.sm-cook-mode-nav {
display: flex;
gap: 12px;
justify-content: center;
padding: var(--sm-sp-6) 0;
position: sticky;
bottom: 0;
background: var(--sm-white);
}
/* Keep screen awake indicator */
.sm-cook-mode-overlay .sm-cook-awake {
text-align: center;
font-size: var(--sm-text-xs);
color: var(--sm-silver);
padding-bottom: var(--sm-sp-4);
}
/* ============================================
VIDEO PLAYER EMBED
============================================ */
.sm-video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--sm-radius-xl);
margin: var(--sm-sp-8) 0;
box-shadow: var(--sm-shadow-lg);
}
.sm-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: var(--sm-radius-xl);
}
/* ============================================
PRINT STYLES (Enhanced)
============================================ */
.sm-print-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media print {
.sm-footer,
.sm-newsletter,
.sm-recipe-card-save,
.sm-saved-fab,
.sm-hero-search,
.sm-recipe-actions,
.sm-jump-to-recipe,
.sm-filter-bar,
.sm-load-more-wrap,
.sm-sticky-bar,
.sm-cook-mode-overlay,
.sm-related-recipes,
.site-header,
.sm-video-wrapper,
.sm-print-btn,
.comments-area {
display: none !important;
}
body {
font-size: 11pt;
color: #000;
background: #fff;
}
.sm-recipe-info-box {
box-shadow: none;
border: 1px solid #ddd;
page-break-inside: avoid;
}
.sm-recipe-featured-image img {
max-height: 300px;
border-radius: 0;
}
.sm-recipe-page-title {
font-size: 24pt;
}
.sm-macro-bars {
page-break-inside: avoid;
}
.sm-rating-large {
background: #f5f5f5;
}
}
/* ============================================
ENHANCED CARD HOVER INTERACTIONS
============================================ */
.sm-recipe-card {
position: relative;
background: var(--sm-white);
border-radius: var(--sm-radius-xl);
overflow: hidden;
box-shadow: var(--sm-shadow-card);
transition: all 400ms var(--sm-ease-out);
}
.sm-recipe-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.03) 100%);
opacity: 0;
transition: opacity 400ms var(--sm-ease-out);
pointer-events: none;
z-index: 1;
}
.sm-recipe-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.08);
}
.sm-recipe-card:hover::after {
opacity: 1;
}
.sm-recipe-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms var(--sm-ease-out);
}
.sm-recipe-card:hover .sm-recipe-card-image img {
transform: scale(1.08);
}
/* Save button heart animation (cards only) */
.sm-recipe-card .sm-recipe-card-save.saved {
background: var(--sm-coral);
border-color: var(--sm-coral);
animation: sm-save-pop 400ms var(--sm-ease-spring);
}
@keyframes sm-save-pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* ============================================
CATEGORY ICONS / EMOJI
============================================ */
.sm-cat-icon {
font-size: 16px;
line-height: 1;
margin-right: 2px;
}
.sm-category-pill .sm-cat-icon {
font-size: 14px;
}
/* ============================================
SOCIAL PROOF BADGES
============================================ */
.sm-social-proof {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--sm-text-xs);
color: var(--sm-silver);
}
.sm-social-proof svg {
width: 12px;
height: 12px;
}
.sm-recipe-card-meta .sm-social-proof {
margin-left: auto;
}
/* ============================================
DECORATIVE SECTION SEPARATOR
============================================ */
.sm-section-separator {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: var(--sm-sp-4) 0;
color: var(--sm-mist);
}
.sm-section-separator::before,
.sm-section-separator::after {
content: '';
flex: 1;
height: 1px;
background: var(--sm-mist);
max-width: 120px;
}
.sm-section-separator svg {
width: 20px;
height: 20px;
color: var(--sm-coral-light);
}
/* ============================================
LIVE SEARCH OVERLAY
============================================ */
.sm-search-results {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--sm-white);
border-radius: var(--sm-radius-lg);
box-shadow: var(--sm-shadow-2xl);
max-height: 400px;
overflow-y: auto;
z-index: var(--sm-z-dropdown);
display: none;
}
.sm-search-results.active {
display: block;
}
.sm-search-result-item {
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--sm-cloud);
text-decoration: none;
color: inherit;
transition: background var(--sm-transition-fast);
}
.sm-search-result-item:hover {
background: var(--sm-cream);
}
.sm-search-result-item:last-child {
border-bottom: none;
}
.sm-search-result-thumb {
width: 56px;
height: 56px;
border-radius: var(--sm-radius-sm);
overflow: hidden;
flex-shrink: 0;
}
.sm-search-result-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sm-search-result-info h4 {
font-family: var(--sm-font-body);
font-size: var(--sm-text-sm);
font-weight: 600;
margin-bottom: 2px;
line-height: 1.3;
}
.sm-search-result-info span {
font-size: var(--sm-text-xs);
color: var(--sm-slate);
}
/* ============================================
RESPONSIVE — NEW FEATURES
All new component responsive rules
============================================ */
/* ---- TABLET (≤1024px) ---- */
@media (max-width: 1024px) {
/* Rating large box */
.sm-rating-large {
flex-direction: column;
text-align: center;
gap: var(--sm-sp-4);
}
/* Macro bars */
.sm-macro-bars {
grid-template-columns: repeat(2, 1fr);
}
/* Recipe actions — wrap */
.sm-recipe-actions {
flex-wrap: wrap;
}
/* Sticky bar — full width buttons */
.sm-sticky-bar .sm-sticky-title {
max-width: 140px;
font-size: var(--sm-text-xs);
}
/* Cook mode */
.sm-cook-mode-step {
font-size: var(--sm-text-base);
}
/* Wave dividers — shorter */
.sm-wave-divider {
height: 40px;
}
.sm-wave-divider svg {
height: 40px;
}
}
/* ---- MOBILE (≤640px) ---- */
@media (max-width: 640px) {
/* Tighter page-header padding on mobile (gradient background made it feel tall) */
.sm-page-header {
padding: var(--sm-sp-6) 0 var(--sm-sp-5);
margin-bottom: var(--sm-sp-6);
}
.sm-page-subtitle {
font-size: var(--sm-text-base);
margin-bottom: var(--sm-sp-5);
}
/* Star ratings — slightly smaller on cards */
.sm-recipe-card .sm-rating-display {
display: none; /* hide on mobile cards to save space */
}
.sm-recipe-card-meta {
gap: 10px;
flex-wrap: wrap;
}
/* Rating large box — stack vertically */
.sm-rating-large {
flex-direction: column;
text-align: center;
padding: var(--sm-sp-4);
gap: var(--sm-sp-3);
}
.sm-rating-large .sm-rating-value {
font-size: var(--sm-text-2xl);
}
.sm-rating-large .sm-stars svg {
width: 20px;
height: 20px;
}
/* Macro bars — single column */
.sm-macro-bars {
grid-template-columns: 1fr;
gap: 12px;
}
/* Recipe actions — 2x2 grid on mobile for tidy alignment */
.sm-recipe-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.sm-recipe-actions .sm-btn,
.sm-recipe-actions .sm-jump-to-recipe {
font-size: 12px;
padding: 10px 12px;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide cook mode button text on very small screens */
.sm-cook-mode-btn span {
display: inline;
}
/* Sticky bar — compact */
.sm-sticky-bar {
padding: 8px var(--sm-sp-3);
gap: 6px;
}
.sm-sticky-bar .sm-sticky-title {
max-width: 100px;
font-size: 11px;
}
.sm-sticky-btn {
padding: 7px 10px;
font-size: 11px;
}
/* Ensure sticky bar doesn't block content at bottom */
.sm-single-recipe {
padding-bottom: 70px;
}
/* Cook mode — full mobile optimization */
.sm-cook-mode-overlay {
padding: var(--sm-sp-4);
}
.sm-cook-mode-header {
padding: var(--sm-sp-3) 0;
}
.sm-cook-mode-header h2 {
font-size: var(--sm-text-lg);
}
.sm-cook-mode-step {
padding: var(--sm-sp-4);
font-size: var(--sm-text-base);
line-height: 1.7;
}
.sm-cook-mode-step-number {
width: 30px;
height: 30px;
font-size: var(--sm-text-sm);
}
.sm-cook-mode-nav {
gap: 8px;
}
.sm-cook-mode-nav .sm-btn {
flex: 1;
justify-content: center;
}
/* Video — tighter margins */
.sm-video-wrapper {
margin: var(--sm-sp-4) 0;
border-radius: var(--sm-radius-lg);
}
.sm-video-wrapper iframe {
border-radius: var(--sm-radius-lg);
}
/* Wave dividers — even shorter on mobile */
.sm-wave-divider {
height: 30px;
}
.sm-wave-divider svg {
height: 30px;
}
/* Section separator — smaller */
.sm-section-separator::before,
.sm-section-separator::after {
max-width: 60px;
}
/* Featured recipe meta — wrap */
.sm-featured-recipe-meta {
flex-wrap: wrap;
gap: 12px;
}
/* Recipe page meta — stack on mobile */
.sm-recipe-page-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--sm-sp-3);
}
.sm-recipe-quick-stats {
flex-wrap: wrap;
gap: 8px;
}
/* Breadcrumbs — smaller font */
.sm-breadcrumbs {
font-size: 11px;
}
/* Search results dropdown */
.sm-search-results {
max-height: 300px;
}
/* Category pills — ensure scrollable */
.sm-hero-categories {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
justify-content: flex-start;
}
.sm-category-pill {
flex-shrink: 0;
}
/* Social proof on mobile — hide to save space */
.sm-social-proof {
display: none;
}
/* About section image */
.sm-about-image {
max-width: 100%;
aspect-ratio: 4/3;
}
/* Newsletter on mobile */
.sm-newsletter h2 {
font-size: var(--sm-text-2xl);
}
/* Contact cards */
.sm-contact-info-card,
.sm-contact-form-card {
padding: var(--sm-sp-5);
}
/* Print button — icon only on mobile */
.sm-print-btn {
padding: 8px 12px;
}
/* Hero visual cards */
.sm-hero-card-info {
padding: 10px 12px;
}
.sm-hero-card-info h3 {
font-size: 12px;
}
}
/* ---- VERY SMALL SCREENS (≤380px) ---- */
@media (max-width: 380px) {
.sm-hero-title {
font-size: 1.75rem;
}
.sm-hero-visual {
grid-template-columns: 1fr;
gap: 12px;
}
.sm-hero-visual .sm-hero-card:nth-child(2) {
margin-top: 0;
}
.sm-hero-card-img {
aspect-ratio: 16/9;
}
.sm-category-showcase {
grid-template-columns: 1fr;
}
.sm-recipe-info-box {
grid-template-columns: 1fr;
}
.sm-sticky-bar .sm-sticky-title {
display: none;
}
.sm-featured-recipe-title {
font-size: var(--sm-text-xl);
}
.sm-page-title {
font-size: var(--sm-text-2xl);
}
.sm-about-stats {
grid-template-columns: 1fr;
}
.sm-recipe-actions .sm-btn {
font-size: 10px;
padding: 6px 10px;
}
/* Share buttons: icon-only at very small widths to avoid 3-row wrap */
.sm-share-btn {
gap: 0;
padding: 0;
width: 44px;
}
.sm-share-btn span {
display: none;
}
}
/* ---- TOUCH TARGET SAFETY ---- */
@media (pointer: coarse) {
/* Ensure minimum 44px tap targets on touch devices */
.sm-category-pill {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.sm-recipe-card .sm-recipe-card-save {
width: 44px;
height: 44px;
}
.sm-sticky-btn {
min-height: 44px;
}
.sm-stars svg {
min-width: 28px;
min-height: 28px;
padding: 4px;
}
.sm-sort-select {
min-height: 44px;
}
.sm-jump-to-recipe {
min-height: 44px;
}
.sm-share-btn {
height: 44px;
}
.sm-cook-mode-close {
width: 48px;
height: 48px;
}
/* Larger tap targets for footer links */
.sm-footer-column ul li a {
padding: 6px 0;
display: inline-block;
}
}
/* ---- LANDSCAPE PHONE ---- */
@media (max-height: 500px) and (orientation: landscape) {
.sm-hero {
padding: var(--sm-sp-6) 0;
}
.sm-hero-visual {
display: none;
}
.sm-sticky-bar {
padding: 6px var(--sm-sp-3);
}
.sm-cook-mode-step {
padding: var(--sm-sp-3);
font-size: var(--sm-text-sm);
}
.sm-wave-divider {
height: 20px;
}
.sm-wave-divider svg {
height: 20px;
}
}
/* ---- PREFERS REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
.sm-recipe-card,
.sm-recipe-card-image img,
.sm-category-card img,
.sm-hero-card-img img,
.sm-recipe-card-save,
.sm-animate-in {
transition: none !important;
animation: none !important;
}
.sm-hero-content > * {
animation: none !important;
opacity: 1;
}
.sm-hero-visual {
animation: none !important;
opacity: 1;
}
.sm-recipe-card:hover {
transform: none;
}
.sm-sticky-bar {
transition: none;
}
}
/* ---- HIGH CONTRAST / FORCED COLORS ---- */
@media (forced-colors: active) {
.sm-recipe-card-badge,
.sm-recipe-card-diet-badge,
.sm-badge,
.sm-category-pill.active,
.sm-featured-tag,
.sm-hero-eyebrow {
border: 1px solid;
}
.sm-macro-fill {
forced-color-adjust: none;
}
.sm-stars svg.filled {
forced-color-adjust: none;
}
}