/* =============================================================
TR Creations — v2.3 Targeted Fixes
Only the blog/recipe section and pagination are changed.
Hero, footer, navbar, products: untouched.
============================================================= */
/* ----------------------------------------------------------
CSS CUSTOM PROPERTIES
---------------------------------------------------------- */
:root {
--trc-bg: #F9F7F2;
--trc-surface: #FFFFFF;
--trc-surface-alt: #EFF5E8;
--trc-ink: #1A1F14;
--trc-ink-muted: #5A6350;
--trc-accent: #a0ce4e;
--trc-accent-dark: #7BA33A;
--trc-dark: #1E2E16;
--trc-font: 'Plus Jakarta Sans', sans-serif;
--trc-radius-sm: 4px;
--trc-radius-md: 10px;
--trc-radius-lg: 20px;
--trc-radius-pill: 999px;
--trc-shadow-card: 0 2px 16px rgba(26, 47, 20, 0.09);
--trc-shadow-hover: 0 8px 28px rgba(26, 47, 20, 0.17);
--trc-max-width: 1200px;
--trc-nav-height: 72px;
}
/* ----------------------------------------------------------
BASE
---------------------------------------------------------- */
.trc-navbar, .trc-hero, .trc-section, .trc-footer, .trc-products-section {
box-sizing: border-box;
font-family: var(--trc-font);
}
.trc-container {
max-width: var(--trc-max-width);
margin: 0 auto;
padding: 0 24px;
}
/* ----------------------------------------------------------
GLOBAL PAGE SCOPE
---------------------------------------------------------- */
body.trc-redesign .fusion-header-wrapper { display: none !important; }
body.trc-redesign .fusion-footer,
body.trc-redesign .fusion-footer-widget-area,
body.trc-redesign .fusion-footer-copyright-area { display: none !important; }
body.trc-redesign .fusion-page-title-bar { display: none !important; }
body.trc-redesign { padding-top: 0 !important; }
body.trc-redesign #wrapper_all {
padding-top: 0 !important;
margin-top: 0 !important;
background: var(--trc-bg) !important;
}
body.trc-redesign #main { background: var(--trc-bg) !important; }
/* Hide old 3-image section */
body.trc-redesign .fusion-fullwidth.fusion-builder-row-1 { display: none !important; }
/* ----------------------------------------------------------
NAVBAR
---------------------------------------------------------- */
.trc-navbar {
position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;
background: var(--trc-surface);
box-shadow: 0 1px 0 rgba(26,47,20,0.08);
height: var(--trc-nav-height);
transition: box-shadow 0.3s ease;
}
.trc-navbar.scrolled { box-shadow: 0 2px 20px rgba(26,47,20,0.12); }
.trc-navbar__inner {
max-width: var(--trc-max-width); margin: 0 auto; padding: 0 24px;
height: 100%; display: flex; align-items: center;
justify-content: space-between; gap: 16px;
}
.trc-navbar__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; }
.trc-navbar__logo img { height: 48px; width: auto; display: block; }
.trc-navbar__menu {
display: flex; align-items: center; gap: 2px;
list-style: none; margin: 0; padding: 0;
flex: 1; justify-content: flex-end;
}
.trc-navbar__menu > li > a {
font-family: var(--trc-font); font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--trc-ink); text-decoration: none;
padding: 6px 10px; border-radius: var(--trc-radius-sm);
transition: color 0.2s, background 0.2s; white-space: nowrap; display: block;
}
.trc-navbar__menu > li > a:hover { color: var(--trc-accent-dark); background: var(--trc-surface-alt); }
.trc-nav-shop { margin-left: 6px; }
.trc-nav-shop-btn {
display: inline-block; font-family: var(--trc-font); font-size: 0.78rem;
font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
text-decoration: none; background: var(--trc-accent); color: var(--trc-ink) !important;
padding: 8px 16px; border-radius: var(--trc-radius-pill);
transition: background 0.2s, color 0.2s; white-space: nowrap;
}
.trc-nav-shop-btn:hover { background: var(--trc-accent-dark); color: #fff !important; }
.trc-nav-cart { margin-left: 4px; }
.trc-nav-cart-link {
display: flex; align-items: center; justify-content: center;
position: relative; width: 38px; height: 38px; border-radius: 50%;
text-decoration: none; color: var(--trc-ink); transition: background 0.2s, color 0.2s;
}
.trc-nav-cart-link:hover { background: var(--trc-surface-alt); color: var(--trc-accent-dark); }
.trc-cart-icon { display: block; flex-shrink: 0; }
.trc-cart-count {
position: absolute; top: 2px; right: 2px;
background: var(--trc-accent); color: var(--trc-ink);
font-family: var(--trc-font); font-size: 0.6rem; font-weight: 800;
min-width: 16px; height: 16px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
padding: 0 3px; line-height: 1;
}
.trc-navbar__right-mobile { display: none; align-items: center; gap: 4px; }
.trc-cart-mobile {
display: flex; align-items: center; justify-content: center;
position: relative; width: 38px; height: 38px; border-radius: 50%;
text-decoration: none; color: var(--trc-ink); transition: background 0.2s;
}
.trc-cart-mobile:hover { background: var(--trc-surface-alt); }
.trc-navbar__hamburger {
display: flex; flex-direction: column; gap: 5px;
cursor: pointer; background: none; border: none; padding: 8px;
border-radius: var(--trc-radius-sm);
}
.trc-navbar__hamburger span {
display: block; width: 22px; height: 2px; background: var(--trc-ink);
border-radius: 2px; transition: transform 0.28s, opacity 0.28s;
}
.trc-navbar__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.trc-navbar__hamburger.open span:nth-child(2) { opacity: 0; }
.trc-navbar__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.trc-navbar__drawer {
display: none; position: fixed; top: var(--trc-nav-height); left: 0; width: 100%;
background: var(--trc-surface); box-shadow: 0 8px 32px rgba(26,47,20,0.12);
padding: 12px 20px 20px; z-index: 9998; flex-direction: column; gap: 2px;
}
.trc-navbar__drawer.open { display: flex; }
.trc-navbar__drawer a {
font-family: var(--trc-font); font-size: 0.9375rem; font-weight: 600;
color: var(--trc-ink); text-decoration: none; padding: 11px 14px;
border-radius: var(--trc-radius-md); transition: background 0.2s; display: block;
}
.trc-navbar__drawer a:hover { background: var(--trc-surface-alt); }
.trc-drawer-shop-btn {
background: var(--trc-accent) !important; color: var(--trc-ink) !important;
font-weight: 700 !important; text-align: center; margin-top: 6px;
border-radius: var(--trc-radius-pill) !important;
}
.trc-drawer-shop-btn:hover { background: var(--trc-accent-dark) !important; color: #fff !important; }
/* ----------------------------------------------------------
HERO (unchanged)
---------------------------------------------------------- */
.trc-hero {
position: relative; width: 100%; min-height: 100vh;
display: flex; align-items: center; overflow: hidden;
background-color: var(--trc-dark); margin-top: 0 !important;
}
.trc-hero__bg {
position: absolute; inset: 0;
background-image: url('https://trcreations.co/wp-content/uploads/2026/06/Pineapple-Jerk.png');
background-size: cover; background-position: center; z-index: 0;
transform: scale(1.04); transition: transform 8s ease-out;
}
.trc-hero__bg.loaded { transform: scale(1); }
.trc-hero__overlay {
position: absolute; inset: 0;
background: linear-gradient(105deg, rgba(26,47,20,0.88) 0%, rgba(26,47,20,0.60) 55%, rgba(26,47,20,0.20) 100%);
z-index: 1;
}
.trc-hero__content {
position: relative; z-index: 2;
max-width: var(--trc-max-width); margin: 0 auto;
padding: 120px 24px 80px; width: 100%;
}
.trc-hero__inner { max-width: 580px; }
.trc-hero__tag {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--trc-font); font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--trc-accent); margin-bottom: 20px;
}
.trc-hero__tag::before { content: ''; display: block; width: 24px; height: 2px; background: var(--trc-accent); border-radius: 2px; }
.trc-hero__heading {
font-family: var(--trc-font); font-weight: 800;
font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.08;
color: #FFFFFF; margin: 0 0 20px; letter-spacing: -0.025em;
}
.trc-hero__heading .trc-accent-word { color: var(--trc-accent); }
.trc-hero__desc {
font-family: var(--trc-font); font-size: 1.0625rem; font-weight: 400;
line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 0 36px; max-width: 440px;
}
.trc-hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.trc-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--trc-font); font-size: 0.875rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
border-radius: var(--trc-radius-md); padding: 14px 28px; cursor: pointer;
border: 2px solid transparent;
transition: background 0.22s, color 0.22s, border-color 0.22s, box-shadow 0.22s; white-space: nowrap;
}
.trc-btn-primary { background: var(--trc-accent); color: var(--trc-ink); border-color: var(--trc-accent); }
.trc-btn-primary:hover { background: var(--trc-accent-dark); border-color: var(--trc-accent-dark); color: #fff; box-shadow: 0 4px 16px rgba(122,163,58,0.35); }
.trc-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.trc-btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.trc-btn-outline { background: transparent; color: var(--trc-dark); border-color: var(--trc-dark); }
.trc-btn-outline:hover { background: var(--trc-dark); color: #fff; }
/* ----------------------------------------------------------
SECTION SHARED
---------------------------------------------------------- */
.trc-section { padding: 80px 0; background: var(--trc-bg); }
.trc-eyebrow {
font-family: var(--trc-font); font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--trc-accent-dark); margin: 0 0 10px;
}
.trc-section-title {
font-family: var(--trc-font) !important;
font-weight: 800 !important;
font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
line-height: 1.1 !important;
color: var(--trc-ink) !important;
letter-spacing: -0.02em !important;
margin: 0 0 40px !important;
}
/* ----------------------------------------------------------
AVADA BLOG SECTION HEADINGS
---------------------------------------------------------- */
.fusion-title h1, .fusion-title h2 {
font-family: var(--trc-font) !important;
font-weight: 800 !important; line-height: 1.1 !important;
letter-spacing: -0.02em !important; color: var(--trc-ink) !important;
}
/* Blog section containers */
.fusion-fullwidth.fusion-builder-row-2,
.fusion-fullwidth.fusion-builder-row-3 {
background: var(--trc-bg) !important;
padding-top: 64px !important;
padding-bottom: 64px !important;
}
/* ==========================================================
BLOG / RECIPE CARDS — COMPLETE TARGETED OVERRIDE
Target: .fusion-blog-shortcode (both blog instances)
========================================================== */
/*
* STEP 1: Defeat Avada's masonry/isotope float layout.
* The container has: isotope, fusion-blog-layout-masonry, fusion-blog-layout-grid-3
* Avada uses inline margins (-20px -20px 0) and floats/absolute positioning via Isotope JS.
* We override with a real CSS grid that JS cannot touch at the column level.
*/
.fusion-blog-shortcode .fusion-posts-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
/* Kill Avada's inline margin hack */
margin: 0 !important;
/* Block Isotope from repositioning items with absolute positioning */
position: static !important;
height: auto !important;
min-height: 0 !important;
}
/*
* STEP 2: Block Isotope's JS-applied absolute positioning on article items.
* Isotope sets position:absolute + top/left on each .fusion-post-masonry.
* We force them back to static flow so the grid works.
*/
.fusion-blog-shortcode .fusion-post-masonry,
.fusion-blog-shortcode .fusion-post-grid,
.fusion-blog-shortcode .fusion-element-grid {
position: static !important;
left: auto !important;
top: auto !important;
width: auto !important; /* Kill Isotope's inline width */
float: none !important; /* Kill any remaining float */
display: flex !important;
flex-direction: column !important;
}
/* Hide Isotope's ghost grid-sizer element */
.fusion-blog-shortcode .fusion-grid-sizer,
.fusion-blog-shortcode .fusion-post-masonry.fusion-grid-sizer {
display: none !important;
grid-column: unset !important;
}
/* CARD: Clean white card — same design as archive recipes page */
/* [style] selector defeats Avada inline border on fusion-post-wrapper */
.fusion-blog-shortcode .fusion-post-wrapper[style],
.fusion-blog-shortcode .fusion-post-wrapper {
background: var(--trc-surface) !important;
background-color: var(--trc-surface) !important;
border-radius: var(--trc-radius-lg) !important;
overflow: hidden !important;
border: none !important;
border-bottom: none !important;
box-shadow: var(--trc-shadow-card) !important;
transition: box-shadow 0.25s ease, transform 0.25s ease !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.fusion-blog-shortcode .fusion-post-wrapper:hover {
box-shadow: var(--trc-shadow-hover) !important;
transform: translateY(-5px) !important;
}
/* IMAGE: grid layout uses fusion-post-slideshow + flexslider (same as archive)
Apply same fixed-height approach as recipes page */
.fusion-blog-shortcode .fusion-post-slideshow,
.fusion-blog-shortcode .fusion-post-slideshow.flexslider {
display: block !important;
width: 100% !important;
height: 260px !important;
flex-shrink: 0 !important;
overflow: hidden !important;
position: relative !important;
background: var(--trc-surface-alt) !important;
box-shadow: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
.fusion-blog-shortcode .fusion-post-slideshow ul.slides {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: block !important;
overflow: visible !important;
}
.fusion-blog-shortcode .fusion-post-slideshow ul.slides > li {
height: 100% !important;
margin: 0 !important;
display: block !important;
}
.fusion-blog-shortcode .fusion-post-slideshow .fusion-image-wrapper {
display: block !important;
width: 100% !important;
height: 100% !important;
position: relative !important;
cursor: default !important;
}
.fusion-blog-shortcode .fusion-post-slideshow .fusion-image-wrapper > a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.fusion-blog-shortcode .fusion-post-slideshow img.wp-post-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
transition: transform 0.4s ease !important;
margin: 0 !important;
max-width: none !important;
}
.fusion-blog-shortcode .fusion-post-wrapper:hover .fusion-post-slideshow img.wp-post-image {
transform: scale(1.05) !important;
}
/* Also keep masonry rules as fallback */
.fusion-blog-shortcode .fusion-masonry-element-container {
padding-top: 0 !important;
background-image: none !important;
height: 260px !important;
overflow: hidden !important;
position: relative !important;
background-color: var(--trc-surface-alt) !important;
flex-shrink: 0 !important;
}
/* Kill rollover overlay */
.fusion-blog-shortcode .fusion-rollover,
.fusion-blog-shortcode .fusion-rollover-content,
.fusion-blog-shortcode .fusion-rollover-title,
.fusion-blog-shortcode .fusion-rollover-link,
.fusion-blog-shortcode .fusion-rollover-gallery,
.fusion-blog-shortcode .fusion-rollover-categories,
.fusion-blog-shortcode .fusion-link-wrapper {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* CONTENT WRAPPER */
.fusion-blog-shortcode .fusion-post-content-wrapper {
padding: 18px 20px 22px !important;
background: var(--trc-surface) !important;
background-color: var(--trc-surface) !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-height: 120px !important;
}
.fusion-blog-shortcode .fusion-post-content { display: block !important; }
/* DATE */
.fusion-blog-shortcode .fusion-single-line-meta {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
margin: 0 0 6px !important;
padding: 0 !important;
}
.fusion-blog-shortcode .fusion-single-line-meta > span:not(.vcard):not(.updated):not(.fusion-inline-sep) {
font-family: var(--trc-font) !important;
font-size: 0.6875rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--trc-accent-dark) !important;
display: inline !important;
}
.fusion-blog-shortcode .fusion-single-line-meta .fusion-inline-sep,
.fusion-blog-shortcode .fusion-single-line-meta .vcard,
.fusion-blog-shortcode .fusion-single-line-meta .updated { display: none !important; }
/* TITLE */
.fusion-blog-shortcode .blog-shortcode-post-title,
.fusion-blog-shortcode .entry-title {
font-family: var(--trc-font) !important;
font-weight: 700 !important;
font-size: 1.0625rem !important;
line-height: 1.35 !important;
color: var(--trc-ink) !important;
letter-spacing: -0.01em !important;
margin: 0 0 8px !important;
padding: 0 !important;
display: block !important;
}
.fusion-blog-shortcode .blog-shortcode-post-title a,
.fusion-blog-shortcode .entry-title a {
color: var(--trc-ink) !important;
text-decoration: none !important;
transition: color 0.2s !important;
font-family: var(--trc-font) !important;
}
.fusion-blog-shortcode .blog-shortcode-post-title a:hover,
.fusion-blog-shortcode .entry-title a:hover {
color: var(--trc-accent-dark) !important;
}
/* EXCERPT — 2 lines clamped, same as archive */
.fusion-blog-shortcode .fusion-post-content-container {
display: block !important;
margin-top: 0 !important;
}
.fusion-blog-shortcode .fusion-post-content-container p {
font-family: var(--trc-font) !important;
font-size: 0.9rem !important;
font-weight: 400 !important;
line-height: 1.55 !important;
color: var(--trc-ink-muted) !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Hide Avada clearfix */
.fusion-blog-shortcode .fusion-clearfix { display: none !important; }
/* ----------------------------------------------------------
PAGINATION — Clean, no overlapping
Avada outputs:
---------------------------------------------------------- */
/* Container */
.fusion-blog-shortcode .pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
margin-top: 48px !important;
margin-bottom: 0 !important;
padding: 0 !important;
list-style: none !important;
/* Kill Avada's clearfix float */
float: none !important;
clear: both !important;
overflow: visible !important;
}
/* All items: number, prev, next */
.fusion-blog-shortcode .pagination > span,
.fusion-blog-shortcode .pagination > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 42px !important;
height: 42px !important;
padding: 0 14px !important;
font-family: var(--trc-font) !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
color: var(--trc-ink) !important;
border-radius: var(--trc-radius-md) !important;
text-decoration: none !important;
border: 1.5px solid rgba(26,47,20,0.12) !important;
background: var(--trc-surface) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
line-height: 1 !important;
/* Kill any nested absolute positioning */
position: relative !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
/* Active page */
.fusion-blog-shortcode .pagination > span.current {
background: var(--trc-accent) !important;
color: var(--trc-ink) !important;
border-color: var(--trc-accent) !important;
font-weight: 800 !important;
box-shadow: 0 2px 8px rgba(160,206,78,0.35) !important;
cursor: default !important;
}
/* Hover on page numbers */
.fusion-blog-shortcode .pagination > a:not(.pagination-prev):not(.pagination-next):hover,
.fusion-blog-shortcode .pagination > a.inactive:hover {
border-color: var(--trc-accent) !important;
color: var(--trc-accent-dark) !important;
background: var(--trc-surface-alt) !important;
}
/*
* Prev / Next links — Avada wraps two spans inside:
*
* The .page-next empty span is what causes the double/overlapping look.
* We hide it and show only the text.
*/
.fusion-blog-shortcode .pagination .pagination-prev,
.fusion-blog-shortcode .pagination .pagination-next {
gap: 6px !important;
font-weight: 700 !important;
color: var(--trc-ink-muted) !important;
min-width: auto !important;
padding: 0 16px !important;
}
.fusion-blog-shortcode .pagination .pagination-prev:hover,
.fusion-blog-shortcode .pagination .pagination-next:hover {
color: var(--trc-accent-dark) !important;
border-color: var(--trc-accent) !important;
background: var(--trc-surface-alt) !important;
}
/* Show only the text span, hide the icon span */
.fusion-blog-shortcode .pagination .page-text {
display: inline !important;
font-family: var(--trc-font) !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
}
/* Kill the empty .page-prev / .page-next spans that cause double rendering */
.fusion-blog-shortcode .pagination .page-prev,
.fusion-blog-shortcode .pagination .page-next {
display: none !important;
}
/* ----------------------------------------------------------
PRODUCTS SECTION (unchanged from v2.2)
---------------------------------------------------------- */
.trc-products-section {
background: var(--trc-surface-alt); padding: 80px 0;
width: 100vw; position: relative;
left: 50%; transform: translateX(-50%);
}
.trc-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-bottom: 44px;
}
.trc-product-card {
background: var(--trc-surface); border-radius: var(--trc-radius-lg);
overflow: hidden; box-shadow: var(--trc-shadow-card);
text-decoration: none; display: flex; flex-direction: column;
transition: box-shadow 0.25s ease, transform 0.25s ease; color: inherit;
}
.trc-product-card:hover { box-shadow: var(--trc-shadow-hover); transform: translateY(-5px); }
.trc-product-img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--trc-surface-alt); flex-shrink: 0; }
.trc-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.trc-product-card:hover .trc-product-img img { transform: scale(1.05); }
.trc-product-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #eff5e8 0%, #d0e8b0 100%); }
.trc-product-body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.trc-product-name {
font-family: var(--trc-font) !important; font-weight: 700 !important;
font-size: 1rem !important; line-height: 1.35 !important;
color: var(--trc-ink) !important; margin: 0 0 8px !important; letter-spacing: -0.01em !important;
}
.trc-product-price { font-family: var(--trc-font); font-size: 1.0625rem; font-weight: 800; color: var(--trc-accent-dark); margin-bottom: 16px; }
.trc-product-price .woocommerce-Price-amount { color: var(--trc-accent-dark); }
.trc-product-cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
font-family: var(--trc-font); font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase; color: var(--trc-accent-dark);
border-bottom: 1.5px solid var(--trc-accent); padding-bottom: 2px;
width: fit-content; transition: color 0.2s, border-color 0.2s;
}
.trc-product-cta::after { content: '\2192'; }
.trc-product-card:hover .trc-product-cta { color: var(--trc-ink); border-color: var(--trc-ink); }
.trc-products-footer { text-align: center; }
/* ----------------------------------------------------------
FOOTER (unchanged from v2.2)
---------------------------------------------------------- */
.trc-footer { background: var(--trc-dark); color: rgba(255,255,255,0.75); padding: 64px 0 0; font-family: var(--trc-font); }
.trc-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.trc-footer__brand img { height: 48px; width: auto; margin-bottom: 16px; filter: brightness(10); opacity: 0.9; }
.trc-footer__tagline { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.60); margin-bottom: 24px; }
.trc-footer__socials { display: flex; align-items: center; gap: 12px; }
.trc-footer__socials a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); text-decoration: none; transition: background 0.2s, color 0.2s; }
.trc-footer__socials a:hover { background: var(--trc-accent); color: var(--trc-ink); }
.trc-footer__col-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--trc-accent); margin-bottom: 20px; display: block; }
.trc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trc-footer__links li a { font-size: 0.9rem; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; display: block; line-height: 1.4; }
.trc-footer__links li a:hover { color: var(--trc-accent); }
.trc-footer__contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.5; }
.trc-footer__contact-item svg { flex-shrink: 0; margin-top: 2px; opacity: 0.7; }
.trc-footer__bottom { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.trc-footer__copy { font-size: 0.8125rem; color: rgba(255,255,255,0.40); }
.trc-footer__bottom-links { display: flex; gap: 20px; }
.trc-footer__bottom-links a { font-size: 0.8125rem; color: rgba(255,255,255,0.40); text-decoration: none; transition: color 0.2s; }
.trc-footer__bottom-links a:hover { color: rgba(255,255,255,0.75); }
/* ----------------------------------------------------------
RESPONSIVE
---------------------------------------------------------- */
/* Tablet: 2 columns */
@media (max-width: 1080px) {
.trc-product-grid { grid-template-columns: repeat(2, 1fr); }
.fusion-blog-shortcode .fusion-posts-container {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Mobile: 1 column */
@media (max-width: 640px) {
.trc-hero__heading { font-size: 2.25rem; }
.trc-hero__content { padding: 96px 20px 60px; }
.trc-hero__actions { flex-direction: column; align-items: flex-start; }
.trc-btn { width: 100%; justify-content: center; }
.fusion-blog-shortcode .fusion-posts-container {
grid-template-columns: 1fr !important;
}
.trc-product-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.trc-footer__grid { grid-template-columns: 1fr; gap: 28px; }
.trc-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
.trc-container { padding: 0 16px; }
.trc-navbar__inner { padding: 0 16px; }
}
/* Mobile nav */
@media (max-width: 900px) {
.trc-navbar__menu { display: none !important; }
.trc-navbar__right-mobile { display: flex !important; }
.trc-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (prefers-reduced-motion: reduce) {
.trc-hero__bg, .trc-product-card,
.fusion-blog-shortcode .fusion-post-wrapper,
.trc-product-img img,
.fusion-blog-shortcode .fusion-masonry-element-container img {
transition: none !important; transform: none !important;
}
}
/* ==========================================================
RECIPES ARCHIVE PAGE - Safe overrides only
Posts are rendered by Avada flexslider JS.
We only style the container, card shell, text, and pagination.
We do NOT touch the slideshow/flexslider/image structure at all.
========================================================== */
body.trc-redesign.category-recipes #wrapper_all,
body.trc-redesign.category-recipes #main {
background: var(--trc-bg) !important;
}
/* Hero banner */
.trc-recipes-hero {
width: 100%;
background: #1E2E16;
padding: 80px 24px 72px;
}
/* Section wrapper */
#posts-container.fusion-blog-layout-grid-wrapper {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 48px 24px 64px !important;
box-sizing: border-box !important;
}
/* 3-col grid - defeat Isotope */
#posts-container .fusion-posts-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 28px !important;
margin: 0 !important;
position: static !important;
height: auto !important;
min-height: 0 !important;
}
/* Each article - defeat Isotope absolute positioning */
#posts-container .fusion-post-grid {
position: static !important;
left: auto !important;
top: auto !important;
width: auto !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
}
/* Hide Isotope sizer ghost */
#posts-container .fusion-grid-sizer {
display: none !important;
}
/* Card shell */
#posts-container .fusion-post-wrapper {
background: var(--trc-surface) !important;
border-radius: var(--trc-radius-lg) !important;
overflow: hidden !important;
border: none !important;
box-shadow: var(--trc-shadow-card) !important;
transition: box-shadow 0.25s ease, transform 0.25s ease !important;
display: flex !important;
flex-direction: column !important;
}
#posts-container .fusion-post-wrapper:hover {
box-shadow: var(--trc-shadow-hover) !important;
transform: translateY(-5px) !important;
}
/* Kill rollover overlay */
#posts-container .fusion-rollover { display: none !important; }
/* Content wrapper — fixed min-height so short titles never collapse the card */
#posts-container .fusion-post-content-wrapper {
padding: 18px 20px 22px !important;
background: var(--trc-surface) !important;
min-height: 120px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Title */
#posts-container .fusion-post-title {
font-family: var(--trc-font) !important;
font-weight: 700 !important;
font-size: 1.0625rem !important;
line-height: 1.35 !important;
color: var(--trc-ink) !important;
letter-spacing: -0.01em !important;
margin: 0 0 8px !important;
}
#posts-container .fusion-post-title a {
color: var(--trc-ink) !important;
text-decoration: none !important;
}
#posts-container .fusion-post-title a:hover {
color: var(--trc-accent-dark) !important;
}
/* Hide date/category meta entirely - show excerpt instead */
#posts-container .fusion-single-line-meta { display: none !important; }
/* Hide separator and bottom meta-info (read more, comments) */
#posts-container .fusion-content-sep,
#posts-container .fusion-meta-info { display: none !important; }
/* SHOW excerpt - 2 lines clamped */
#posts-container .fusion-post-content-container {
display: block !important;
margin-top: 8px !important;
}
#posts-container .fusion-post-content-container p {
font-family: var(--trc-font) !important;
font-size: 0.9rem !important;
font-weight: 400 !important;
line-height: 1.55 !important;
color: var(--trc-ink-muted) !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Pagination */
.fusion-blog-archive .pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
margin: 40px auto 0 !important;
padding: 0 24px 64px !important;
float: none !important;
clear: both !important;
}
.fusion-blog-archive .pagination > span,
.fusion-blog-archive .pagination > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 42px !important;
height: 42px !important;
padding: 0 14px !important;
font-family: var(--trc-font) !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
color: var(--trc-ink) !important;
border-radius: var(--trc-radius-md) !important;
text-decoration: none !important;
border: 1.5px solid rgba(26,47,20,0.12) !important;
background: var(--trc-surface) !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
}
.fusion-blog-archive .pagination > span.current {
background: var(--trc-accent) !important;
color: var(--trc-ink) !important;
border-color: var(--trc-accent) !important;
font-weight: 800 !important;
}
.fusion-blog-archive .pagination > a:hover {
border-color: var(--trc-accent) !important;
color: var(--trc-accent-dark) !important;
background: var(--trc-surface-alt) !important;
}
.fusion-blog-archive .pagination .page-prev,
.fusion-blog-archive .pagination .page-next { display: none !important; }
.fusion-blog-archive .pagination .page-text {
font-family: var(--trc-font) !important;
font-weight: 700 !important;
}
/* Responsive */
@media (max-width: 1080px) {
#posts-container .fusion-posts-container {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 900px) {
#posts-container.fusion-blog-layout-grid-wrapper {
padding: 32px 20px 48px !important;
width: 100% !important;
box-sizing: border-box !important;
}
#posts-container .fusion-posts-container {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.trc-recipes-hero { padding: 60px 20px 52px !important; }
#posts-container, #posts-container .fusion-posts-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 600px) {
/* Full width, 20px padding each side */
body.category-recipes #main,
body.category-recipes .fusion-row,
body.category-recipes #content {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#posts-container.fusion-blog-layout-grid-wrapper {
padding: 24px 20px 40px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#posts-container .fusion-posts-container {
grid-template-columns: 1fr !important;
gap: 14px !important;
width: 100% !important;
}
#posts-container .fusion-post-grid {
width: 100% !important;
max-width: 100% !important;
}
}