/* ═══════════════════════════════════════════════════════════════════════════ * HOMEPAGE STYLES (TCT — S149 non-Elementor rebuild) * * The homepage is rendered by `front-page.php` as static PHP markup using * the .tct-home-* design language. Both light and dark modes are baked in: * - dark mode is the default (--tct-home-* tokens below define dark surfaces) * - light mode overrides at the bottom of this file flip cards back to white * * The data-theme attribute is set on by header.php's no-FOUC inline JS * and persisted in localStorage via the .tc-theme-toggle button in the header. * * Wrapper system: .tct-home-container (max-width centered) and .tct-home-col * (flex/grid item). No Elementor classes are used — this is theme-native. * * All component classes namespaced .tct-home-* to avoid colliding with * anything else on the site. This file enqueues site-wide so the design * tokens are globally available, but the actual visual rules only fire on * the homepage where .tct-home-* sections exist. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens (dark-mode-first SaaS spec) ───────────────────────────── */ :root { /* Card surfaces (product, blog, why-choose, trust bar) */ --tct-home-card-bg: linear-gradient(145deg, #111827, #1F2937); --tct-home-card-border: rgba(255, 255, 255, 0.06); /* Flat surfaces (image placeholders inside cards) */ --tct-home-feature-bg: #111827; --tct-home-feature-border: rgba(255, 255, 255, 0.05); /* Primary CTA gradient (hero Shop Now, Add to Cart, Shop New) */ --tct-home-primary: linear-gradient(135deg, #4F46E5, #3B82F6); --tct-home-primary-hover: linear-gradient(135deg, #6366F1, #60A5FA); --tct-home-primary-glow: 0 10px 25px rgba(79, 70, 229, 0.35); /* Promo / newsletter banner gradient */ --tct-home-promo: linear-gradient(135deg, #3C357E, #0B0C1B); } /* ── Theme-native wrapper system ────────────────────────────────────────── * .tct-home-container — max-width centered wrapper (replaces what * Elementor's .elementor-container provided). Default 1140px to match * Bootstrap nav at xl, widens to 1320px at xxl (≥1400px) to match the * site nav's container width on widescreen monitors. * .tct-home-col — flex/grid item; per-section CSS sets the parent to * flex or grid as needed (see each section's rules below). */ .tct-home-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; width: 100%; } @media (min-width: 1400px) { .home .tct-home-container { max-width: 1320px; } } .tct-home-col { box-sizing: border-box; min-width: 0; /* allow flex/grid items to shrink below content size */ } /* ── Section header (title + view-all link) ─────────────────────────────── * Single row: title on the left, link on the right, vertically centered. * Used by Featured Products, Shop by Category, From the Blog. */ .tct-home-section-header { margin-bottom: 12px; padding-bottom: 0; } .tct-home-section-header > .tct-home-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 1rem; } .tct-home-section-header > .tct-home-container > .tct-home-col { flex: 0 0 auto; } .tct-home-section-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--tct-text); margin: 0; } .tct-home-section-title--center { text-align: center; width: 100%; } .tct-home-section-link-col { text-align: right; } .tct-home-section-link { font-size: 0.875rem; font-weight: 600; color: var(--tct-brand); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .tct-home-section-link:hover { color: var(--tct-brand); filter: brightness(1.15); transform: translateX(2px); } .tct-home-section-link span { transition: transform 0.15s ease; } .tct-home-section-link:hover span { transform: translateX(2px); } /* ── Hero ───────────────────────────────────────────────────────────────── * Full-bleed banner with bg image set inline by functions.php for both * light and dark variants. Subject typically right-aligned in the image, * scrim on the left for text contrast. */ .tct-home-hero { position: relative; background-color: var(--tct-bg); background-size: cover; background-position: center right; background-repeat: no-repeat; min-height: 720px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 60px 0; } /* Left-fading scrim for text contrast. Pseudo-element layered between bg image and text content via z-index. Gradient fades from rgba(11,15,26,0.85) at left edge to fully transparent roughly at the section's horizontal midpoint — text reads cleanly, product photography remains untouched. */ .tct-home-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(11, 15, 26, 0.85) 0%, rgba(11, 15, 26, 0.55) 30%, rgba(11, 15, 26, 0) 60%); pointer-events: none; z-index: 1; } .tct-home-hero > .tct-home-container { position: relative; z-index: 2; display: flex; align-items: center; } .tct-home-hero-text { flex: 1 1 50%; max-width: 50%; padding: 60px 0; } .tct-home-hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; color: var(--tct-text); letter-spacing: -0.03em; margin: 0 0 1rem 0; } .tct-home-hero-sub p { font-size: 1.0625rem; color: var(--tct-text-secondary); line-height: 1.6; margin: 0 0 2rem 0; max-width: 480px; } .tct-home-cta-primary { display: inline-flex; align-items: center; background: var(--tct-home-primary); color: #fff; padding: 0.875rem 2rem; border-radius: 10px; font-weight: 600; font-size: 0.9375rem; border: none; text-decoration: none; box-shadow: var(--tct-home-primary-glow); transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; } .tct-home-cta-primary:hover { background: var(--tct-home-primary-hover); color: #fff; filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(79, 70, 229, 0.45); } /* ── Trust bar ───────────────────────────────────────────────────────────── * 4-up flex row with vertical dividers between items. Card surface lives * on an inner wrapper (.tct-home-trust-card) — NOT on .tct-home-container — * so the card's left/right edges align with the content edges of the * Featured Products / Categories / Blog grids in other sections. (If the * card lived on the container itself, it would extend 20px wider on each * side because grids live INSIDE the container's 20px padding while the * container's outer edges sit flush with the card border.) Same pattern * as Why-Choose. */ .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card { display: flex; flex-direction: row; background: var(--tct-home-card-bg); border: 1px solid var(--tct-home-card-border); border-radius: 20px; padding: 1.25rem 1.5rem; } .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card > .tct-home-col { flex: 1 1 0; } .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card > .tct-home-col:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.08); } .tct-home-trust-item { display: flex; align-items: center; gap: 12px; padding: 0.5rem; } .tct-home-trust-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--tct-brand-soft); color: var(--tct-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.0625rem; } .tct-home-trust-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; } .tct-home-trust-text strong { font-size: 0.9375rem; font-weight: 600; color: var(--tct-text); } .tct-home-trust-text span { font-size: 0.8125rem; color: var(--tct-text-secondary); } /* ── Featured Products grid (4-up) ─────────────────────────────────────── */ .tct-home-products-grid > .tct-home-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .tct-home-product-card { background: var(--tct-home-card-bg); border: 1px solid var(--tct-home-card-border); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; height: 100%; display: flex; flex-direction: column; } .tct-home-product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.12); } .tct-home-product-image { /* Inherits site-wide thumbnail ratio set by the plugin's StorefrontModule at :root (Settings → Thumbnails → Product Image Shape). Fallback 3/4 matches the plugin default ('tall'). Keeping this in sync with the plugin means the homepage product cards always render at the same ratio as the shop archive / PDP / cart / checkout images. */ aspect-ratio: var(--tc-img-ratio, 3 / 4); background: var(--tct-home-feature-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tct-home-product-image-placeholder { color: var(--tct-text-secondary); font-size: 2.25rem; opacity: 0.55; } .tct-home-product-image img { width: 100%; height: 100%; object-fit: cover; /* Hide alt text on broken images; parent shows the colored placeholder bg. */ color: transparent; font-size: 0; transition: filter 0.3s ease; } .tct-home-product-body { padding: 1rem 1.125rem 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .tct-home-product-name { font-size: 0.9375rem; font-weight: 600; color: var(--tct-text); margin: 0; line-height: 1.35; } .tct-home-product-price { font-size: 1rem; font-weight: 700; color: var(--tct-text); margin: 0; } .tct-home-product-price-now { color: var(--tct-text); } .tct-home-product-price-was { margin-left: 0.5rem; color: var(--tct-text-secondary); font-weight: 500; text-decoration: line-through; font-size: 0.875rem; } .tct-home-product-cta { margin-top: auto; background: var(--tct-home-primary); color: #fff; border: none; border-radius: 10px; padding: 0.625rem 1rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; } .tct-home-product-cta:hover { background: var(--tct-home-primary-hover); filter: brightness(1.05); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3); } .tct-home-product-cta:active { transform: translateY(1px); } /* ── Promo banners (gradient + dark) ───────────────────────────────────── */ /* CSS Grid for 2-up equal-height row. align-items: stretch makes both cards auto-equalize to whichever has more content. Mobile drops to 1-col via the responsive block below. */ .tct-home-promo-row > .tct-home-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; } .tct-home-promo { border-radius: 18px; padding: 2rem 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 220px; height: 100%; overflow: hidden; position: relative; box-sizing: border-box; } .tct-home-promo--gradient { background: var(--tct-home-promo); color: #fff; border: 1px solid var(--tct-home-card-border); } .tct-home-promo--dark { background: var(--tct-home-card-bg); color: var(--tct-text); border: 1px solid var(--tct-home-card-border); } .tct-home-promo-text { flex: 1 1 60%; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .tct-home-promo-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; } .tct-home-promo-eyebrow--accent { color: var(--tct-brand); opacity: 1; } .tct-home-promo-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0.25rem 0; line-height: 1.1; letter-spacing: -0.02em; } .tct-home-promo-sub { font-size: 0.9375rem; margin: 0 0 1rem 0; opacity: 0.9; max-width: 28em; } .tct-home-promo-btn { display: inline-flex; align-items: center; align-self: flex-start; padding: 0.625rem 1.5rem; border-radius: 10px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .tct-home-promo-btn--white { background: #fff; color: #4f46e5; } .tct-home-promo-btn--white:hover { background: #f3f4f6; color: #4338ca; transform: translateY(-1px); } .tct-home-promo-btn--accent { background: var(--tct-home-primary); color: #fff; } .tct-home-promo-btn--accent:hover { background: var(--tct-home-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3); } .tct-home-promo-art { flex: 0 0 35%; display: flex; align-items: center; justify-content: center; } .tct-home-promo-art img { max-width: 160px; width: 100%; height: auto; border-radius: 12px; /* Hide alt text on broken images. */ color: transparent; font-size: 0; line-height: 1.4; max-height: 160px; object-fit: cover; } /* Gradient banner art override: transparent PNG (3D discount ticket), contain not cover, no border-radius, drop-shadow + slight tilt. */ .tct-home-promo--gradient .tct-home-promo-art img { max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: contain; border-radius: 0; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25)); transform: rotate(-8deg); background: transparent; } /* ── Shop by Category tiles (4-up grid) ────────────────────────────────── */ .tct-home-cats-grid > .tct-home-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; } .tct-home-cat-tile { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; background: var(--tct-home-card-bg); border: 1px solid var(--tct-home-card-border); border-radius: 12px; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; height: 100%; box-sizing: border-box; } .tct-home-cat-tile:hover { border-color: var(--tct-brand); transform: translateY(-2px); } .tct-home-cat-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; background: var(--tct-bg-tertiary); display: inline-flex; align-items: center; justify-content: center; color: var(--tct-text-secondary); font-size: 1.5rem; } .tct-home-cat-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; transition: filter 0.3s ease; } .tct-home-cat-tile:hover .tct-home-cat-thumb { color: var(--tct-brand); } .tct-home-cat-text { display: flex; flex-direction: column; gap: 2px; } .tct-home-cat-text h4 { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--tct-text); } .tct-home-cat-text span { font-size: 0.8125rem; color: var(--tct-text-secondary); } /* ── Why Choose card ────────────────────────────────────────────────────── * Title row sits bare on body bg. The grid section gets the card surface * via an inner wrapper (.tct-home-why-card) — same alignment-with-content * rationale as Trust Bar. The card's left/right edges sit at the same * content-area boundary as the Featured Products / Categories / Blog grids * (1100px inside a 1140px container) instead of bulging 20px wider on each * side as it would if the card surface were on .tct-home-container. */ .tct-home-why-title-row { padding: 40px 0 30px; } .tct-home-why-title-row > .tct-home-container { display: flex; justify-content: center; } .tct-home-why-grid { margin-bottom: 40px; padding-bottom: 40px; } .tct-home-why-grid > .tct-home-container > .tct-home-why-card { display: flex; flex-direction: row; background: var(--tct-home-card-bg); border: 1px solid var(--tct-home-card-border); border-radius: 20px; } .tct-home-why-grid > .tct-home-container > .tct-home-why-card > .tct-home-col { flex: 1 1 0; } .tct-home-why-grid > .tct-home-container > .tct-home-why-card > .tct-home-col:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.08); } .tct-home-why-item { text-align: center; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .tct-home-why-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--tct-brand-soft); color: var(--tct-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: 0.25rem; } .tct-home-why-title { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--tct-text); } .tct-home-why-desc { margin: 0; font-size: 0.8125rem; color: var(--tct-text-secondary); line-height: 1.5; max-width: 18em; } /* ── From the Blog (3-up grid) ─────────────────────────────────────────── */ .tct-home-blog-grid > .tct-home-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .tct-home-blog-card { display: flex; flex-direction: column; background: var(--tct-home-card-bg); border: 1px solid var(--tct-home-card-border); border-radius: 16px; overflow: hidden; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; height: 100%; } .tct-home-blog-card:hover { border-color: rgba(255, 255, 255, 0.12); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } .tct-home-blog-image { aspect-ratio: 16 / 10; background: var(--tct-home-feature-bg); overflow: hidden; } .tct-home-blog-image img { width: 100%; height: 100%; object-fit: cover; /* Hide alt text on broken images. */ color: transparent; font-size: 0; transition: transform 0.4s ease, filter 0.3s ease; } .tct-home-blog-card:hover .tct-home-blog-image img { transform: scale(1.04); } .tct-home-blog-body { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .tct-home-blog-cat { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--tct-brand); text-transform: uppercase; } .tct-home-blog-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--tct-text); line-height: 1.35; } .tct-home-blog-excerpt { margin: 0; font-size: 0.8125rem; color: var(--tct-text-secondary); line-height: 1.55; flex: 1; } .tct-home-blog-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--tct-text-tertiary); } .tct-home-blog-dot { opacity: 0.5; } /* ── Newsletter banner ─────────────────────────────────────────────────── */ .tct-home-newsletter-section { padding: 0 0 60px 0; } .tct-home-newsletter { background: var(--tct-home-promo); border-radius: 18px; border: 1px solid var(--tct-home-card-border); padding: 2rem 2.5rem; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 2rem; box-shadow: 0 10px 32px rgba(67, 56, 202, 0.3); } .tct-home-newsletter-left { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 50%; } .tct-home-newsletter-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; } .tct-home-newsletter-text h3 { margin: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.2; color: #fff; letter-spacing: -0.02em; } .tct-home-newsletter-text p { margin: 4px 0 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); line-height: 1.5; max-width: 32em; } .tct-home-newsletter-form { display: flex; gap: 0.5rem; flex: 1 1 40%; max-width: 480px; } .tct-home-newsletter-input { flex: 1; background: #fff; border: 1px solid transparent; border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.875rem; color: #0a0a0f; outline: none; transition: box-shadow 0.15s ease; } .tct-home-newsletter-input::placeholder { color: #9ca3af; } .tct-home-newsletter-input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); } .tct-home-newsletter-btn { background: var(--tct-home-primary); color: #fff; border: none; border-radius: 10px; padding: 0 1.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; box-shadow: var(--tct-home-primary-glow); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; white-space: nowrap; } .tct-home-newsletter-btn:hover { background: var(--tct-home-primary-hover); filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(79, 70, 229, 0.45); } .tct-home-newsletter-btn:disabled { background: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.7); cursor: default; transform: none; box-shadow: none; filter: none; } /* ── Section spacing rhythm (40px between sections) ─────────────────────── */ .tct-home-hero, .tct-home-trust-bar, .tct-home-products-grid, .tct-home-promo-row, .tct-home-cats-grid, .tct-home-blog-grid { margin-bottom: 40px; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .tct-home-hero { padding-top: 40px; padding-bottom: 40px; min-height: 440px; } .tct-home-promo { padding: 1.75rem 1.75rem; min-height: 200px; } .tct-home-newsletter { padding: 1.75rem 2rem; } } @media (max-width: 767.98px) { /* Hero: shrink min-height, center bg, full-width scrim. */ .tct-home-hero { min-height: 360px; background-position: center center; } .tct-home-hero::before { background: linear-gradient(to right, rgba(11, 15, 26, 0.85) 0%, rgba(11, 15, 26, 0.65) 60%, rgba(11, 15, 26, 0.5) 100%); } .tct-home-hero-text { flex: 1 1 100%; max-width: 100%; padding: 20px 0; } .tct-home-hero-sub p { max-width: 100%; } /* Section header: stack title + link vertically. */ .tct-home-section-header > .tct-home-container { flex-direction: column; align-items: flex-start; gap: 8px; } .tct-home-section-link-col { text-align: left; } /* Trust bar: stack vertically, swap right-borders for bottom-borders. */ .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card { flex-direction: column; padding: 1rem 1rem; } .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card > .tct-home-col:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tct-home-trust-item { padding: 0.75rem 0.5rem; } /* Featured Products: 1-up. */ .tct-home-products-grid > .tct-home-container { grid-template-columns: 1fr; } /* Promo row: 1-up. Each banner becomes column-stack with centered text. */ .tct-home-promo-row > .tct-home-container { grid-template-columns: 1fr; } .tct-home-promo { flex-direction: column; text-align: center; align-items: center; padding: 1.75rem 1.5rem; } .tct-home-promo-text { align-items: center; } .tct-home-promo-art { font-size: 3rem; } .tct-home-promo-btn { align-self: center; } /* Categories grid: 2-up. */ .tct-home-cats-grid > .tct-home-container { grid-template-columns: repeat(2, 1fr); } .tct-home-cat-tile { padding: 0.875rem 1rem; } .tct-home-cat-thumb { width: 44px; height: 44px; flex-basis: 44px; font-size: 1.125rem; } /* Why grid: stack vertically with bottom-borders. */ .tct-home-why-grid > .tct-home-container > .tct-home-why-card { flex-direction: column; } .tct-home-why-grid > .tct-home-container > .tct-home-why-card > .tct-home-col:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Blog grid: 1-up. */ .tct-home-blog-grid > .tct-home-container { grid-template-columns: 1fr; } /* Newsletter: stack, center. Form input + button also stack vertically on mobile so the Subscribe button can't overflow the card on narrow viewports. Default `align-items: stretch` makes both children fill the form width. */ .tct-home-newsletter { flex-direction: column; text-align: center; gap: 1.5rem; padding: 1.75rem 1.5rem; } .tct-home-newsletter-left { flex-direction: column; text-align: center; gap: 0.75rem; } .tct-home-newsletter-form { width: 100%; max-width: none; flex-direction: column; gap: 0.625rem; } .tct-home-newsletter-btn { padding: 0.75rem 1.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ * LIGHT MODE OVERRIDES * The SaaS refactor is dark-mode-first — cards default to dark gradients * defined in --tct-home-card-bg. Light mode flips all those cards back to * white/light-grey on the white body so dark gradients on white don't look * broken. Same shapes/borders, just inverted surfaces. * ═══════════════════════════════════════════════════════════════════════════ */ /* Hero scrim: white-fading gradient for legibility against light pages. */ [data-theme="light"] .tct-home-hero::before { background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 60%); } [data-theme="light"] .tct-home-hero { /* Border-bottom seam darkens for visibility on lighter pages. Do NOT use the `background` shorthand — would reset background-image to none and kill the inline-set hero image. */ border-bottom-color: rgba(0, 0, 0, 0.06); } /* ── Hero: bottom-seam glow in dark mode (S152 R3.5) ─────────────────────── The base rule at line 129 sets a 6%-white border-bottom that reads as a hairline separator. Adding a soft glow below it in dark mode for a more polished "light bleeding through the seam" effect. The next section (.tct-home-trust-bar) has no outer-section background — only its inner card has bg — so the box-shadow renders cleanly against the page bg without being clipped. Mirrors the same treatment applied to .tc-shop__banner in shop.css. */ [data-theme="dark"] .tct-home-hero { border-bottom-color: rgba(255, 255, 255, 0.10); box-shadow: 0 4px 24px rgba(255, 255, 255, 0.05); } @media (max-width: 767.98px) { [data-theme="light"] .tct-home-hero::before { background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 60%, rgba(255, 255, 255, 0.5) 100%); } } /* Product cards: white surface, dark text, light grey image area. */ [data-theme="light"] .tct-home-product-card { background: #ffffff; border-color: var(--tct-border); } [data-theme="light"] .tct-home-product-card:hover { border-color: var(--tct-border-strong); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); } [data-theme="light"] .tct-home-product-image { background: #f3f4f6; } [data-theme="light"] .tct-home-product-name, [data-theme="light"] .tct-home-product-price { color: #0a0a0f; } /* Trust bar: off-white surface, dark dividers, soft drop-shadow. */ [data-theme="light"] .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card { background: #eef0f7; border-color: var(--tct-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } [data-theme="light"] .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card > .tct-home-col:not(:last-child) { border-right-color: rgba(0, 0, 0, 0.08); } @media (max-width: 767.98px) { [data-theme="light"] .tct-home-trust-bar > .tct-home-container > .tct-home-trust-card > .tct-home-col:not(:last-child) { border-right: none; border-bottom-color: rgba(0, 0, 0, 0.08); } } /* Just Dropped (dark promo variant): flip to light surface in light mode. Save Up to 30% (--gradient) keeps its purple gradient regardless of mode. */ [data-theme="light"] .tct-home-promo--dark { background: #f8f9fb; color: #0a0a0f; border-color: var(--tct-border); } /* Category tiles: white card, stronger border. */ [data-theme="light"] .tct-home-cat-tile { background: #ffffff; border-color: var(--tct-border-strong); } [data-theme="light"] .tct-home-cat-tile:hover { background: #fafbfd; } [data-theme="light"] .tct-home-cat-thumb { background: #f3f4f6; } /* Blog cards: white card, light grey image area. */ [data-theme="light"] .tct-home-blog-card { background: #ffffff; border-color: var(--tct-border-strong); } [data-theme="light"] .tct-home-blog-image { background: #f3f4f6; } /* Why-Choose card: off-white surface, dark dividers, drop shadow. */ [data-theme="light"] .tct-home-why-grid > .tct-home-container > .tct-home-why-card { background: #eef0f7; border: 1px solid var(--tct-border); border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } [data-theme="light"] .tct-home-why-grid > .tct-home-container > .tct-home-why-card > .tct-home-col:not(:last-child) { border-right-color: rgba(0, 0, 0, 0.08); } @media (max-width: 767.98px) { [data-theme="light"] .tct-home-why-grid > .tct-home-container > .tct-home-why-card > .tct-home-col:not(:last-child) { border-right: none; border-bottom-color: rgba(0, 0, 0, 0.08); } } /* ── Dark-mode image color treatment ───────────────────────────────────── * S153 — In dark mode, dim and desaturate the homepage's product, category, * and blog images so they integrate with the dark theme aesthetic; restore * full color + brightness on parent-card hover for a "reveal on hover" * effect. Light mode is untouched (images render at native color always). * * Filter applied to the rather than via a pseudo-overlay so the * existing :hover scale on blog images continues to compose cleanly with * the filter transition (different properties = independent animations). * * Transition is declared on the base img selectors above (mode-agnostic); * only the filter VALUE switches per mode, so transitions only run when * the user toggles modes or hovers, never on initial paint. */ [data-theme="dark"] .tct-home-product-image img, [data-theme="dark"] .tct-home-cat-thumb img, [data-theme="dark"] .tct-home-blog-image img { filter: brightness(0.6) saturate(0.7); } [data-theme="dark"] .tct-home-product-card:hover .tct-home-product-image img, [data-theme="dark"] .tct-home-cat-tile:hover .tct-home-cat-thumb img, [data-theme="dark"] .tct-home-blog-card:hover .tct-home-blog-image img { filter: none; }