/* ========================================================= Percorso: /wp-content/themes/snapbrainy-website/assets/css/sb-categories.css Nome file: sb-categories.css SnapBrainy — Categories (Isolated) • Fixed Gradient Backdrop Update: Tipografia “high-contrast” per categorie (leggibile su chiaro/scuro) ========================================================= */ /* --------------------------------- 0) Brand Tokens (isolati) --------------------------------- */ :root{ --sb-brand: #FDB813; /* Gold */ --sb-navy: #0E1B35; /* Deep navy */ --sb-ink: #0B0F19; /* Text */ --sb-ink-2: #2A3447; --sb-line: rgba(18,27,45,.14); --sb-ivory: #FDFDFD; /* kept for future */ --sb-surface:#FFFFFF; --sb-shadow: 0 6px 18px rgba(11,15,25,.10); --sb-shadow-md: 0 16px 36px rgba(11,15,25,.18); --sb-radius: 20px; --sb-hero-blend: 108px; --sb-focus: 0 0 0 3px rgba(253,184,19,.28), 0 0 1px 1px rgba(253,184,19,.55); --sb-texture: 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='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* Rimosso blocco A) FIXED GRADIENT BACKDROP per usare lo sfondo globale in style.css */ /* body.sb-categories-page{ background: transparent; position: relative; } body.sb-categories-page::before{ ... } */ /* ========================================================= B) Wrapper puliti SOLO per il contenuto della pagina ========================================================= */ body.sb-categories-page .site, body.sb-categories-page .content-bg, body.sb-categories-page .entry.content-bg, body.sb-categories-page #inner-wrap, body.sb-categories-page .content-container, body.sb-categories-page .site-main, body.sb-categories-page .content-area, body.sb-categories-page #primary, body.sb-categories-page .wrap, body.sb-categories-page .content-wrap, body.sb-categories-page .site-container{ background: transparent !important; box-shadow: none !important; border: 0 !important; } body.sb-categories-page .kadence-shop-top-row, body.sb-categories-page .woocommerce-breadcrumb{ display:none !important; } .sb-wrap{ max-width:1200px; margin:0 auto; padding:0 16px; } /* ========================================================= C) HERO — content-only (nessun segno giallo) + spazio ridotto ========================================================= */ .sb-archive-hero.sb-categories-hero{ background: transparent; color: #E9EEFF; padding: 16px 0 6px; position: relative; z-index: 10; } .sb-archive-hero .sb-wrap::after{ content: none !important; } .sb-eyebrow{ margin:0 0 4px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:#C6D4EE; opacity:.92; } .sb-archive-title{ margin:.1rem 0 .25rem; font-size:clamp(1.7rem, 3.2vw, 2.3rem); line-height:1.12; color:#FFFFFF; text-shadow:0 1px 0 rgba(0,0,0,.25); } .sb-social-proof{ margin-top:6px; font-size:.95rem; font-weight:700; color:#B7C6E6; } /* ========================================================= D) CONTENUTO — nessun “sheet” bianco + Spazio inferiore aumentato ========================================================= */ .sb-categories-main-content{ position: relative; z-index: 20; background: transparent !important; margin-top: 0; border-radius: 0 !important; box-shadow: none !important; /* Aumento il padding bottom per spazio extra dato che non c'è footer/CTA */ padding-bottom: 80px; } @media (max-width:1023.98px){ /* Aggiungi spazio per il dock su mobile */ .sb-categories-main-content{ padding-bottom: calc(var(--sb-dock-h, 72px) + env(safe-area-inset-bottom,0px) + 32px); } } /* ========================================================= E) LISTA — avvicinata all'hero e tipografia “glow/outline” ========================================================= */ .sb-categories-grid-section .sb-wrap{ padding-top: 0; } .sb-modern-category-grid{ display:block; max-width:1100px; margin: 4px auto 0; border-top: 1px solid rgba(0,0,0,.08); background: transparent; } .sb-modern-category-grid .sb-category-pill{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 24px 16px; text-decoration:none; background: transparent !important; border: 0; border-bottom: 1px solid rgba(0,0,0,.08); border-radius: 0 !important; box-shadow: none !important; overflow: hidden; transition: color .3s ease-out; } /* Overlay navy + texture su hover */ .sb-modern-category-grid .sb-category-pill::before{ content:""; position:absolute; inset:0; background-color: var(--sb-navy); background-image: var(--sb-texture); z-index:0; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(0.25, 0.8, 0.25, 1); } /* ---------- Tipografia ad alto contrasto (come screenshot) ---------- */ .sb-modern-category-grid .sb-category-name{ position:relative; z-index:1; flex: 1 1 auto; text-align:left; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; font-size: clamp(1.35rem, 4.6vw, 2.1rem); line-height:1.15; /* Bianco con outline morbido per leggere su chiaro/scuro */ color: #FFFFFF; -webkit-text-stroke: 0.35px rgba(0,0,0,.35); /* WebKit/Chromium */ text-shadow: 0 1px 0 rgba(0,0,0,.45), /* bordo vicino */ 0 0 14px rgba(0,0,0,.25), /* glow soft */ 0 2px 8px rgba(0,0,0,.35); /* profondità */ } .sb-modern-category-grid .sb-category-name span{ font: inherit; } /* Freccia: chiara + ombra per contrasto */ .sb-modern-category-grid .sb-pill-arrow{ position:relative; z-index:1; font-size: 1.1rem; font-weight:900; color: #E9EEF9; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 8px rgba(0,0,0,.25); transition: transform .25s ease, opacity .25s ease; opacity:.95; flex:0 0 auto; } /* Hover: gold ma leggibile (manteniamo l’outline) */ .sb-modern-category-grid .sb-category-pill:hover .sb-category-name{ color: var(--sb-brand); -webkit-text-stroke: 0.35px rgba(0,0,0,.28); text-shadow: 0 1px 0 rgba(0,0,0,.40), 0 0 12px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.32); } .sb-modern-category-grid .sb-category-pill:hover .sb-pill-arrow{ transform: translateX(6px); color:#FFFFFF; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(0,0,0,.3); } /* Focus a11y */ .sb-modern-category-grid .sb-category-pill:focus-visible{ outline:none; box-shadow: var(--sb-focus); } /* Entrata dolce */ @keyframes sb-slideUpFade { to { opacity: 1; transform: translateY(0); } } .sb-modern-category-grid .sb-category-pill{ opacity:0; transform: translateY(20px); animation: sb-slideUpFade .5s ease forwards; } .sb-modern-category-grid .sb-category-pill:nth-child(2){ animation-delay:.04s; } .sb-modern-category-grid .sb-category-pill:nth-child(3){ animation-delay:.08s; } .sb-modern-category-grid .sb-category-pill:nth-child(4){ animation-delay:.12s; } .sb-modern-category-grid .sb-category-pill:nth-child(5){ animation-delay:.16s; } /* Rimosso blocco F) CTA (stili duplicati) */ /* ========================================================= G) Responsive & Motion safety ========================================================= */ @media (max-width: 768px){ .sb-archive-hero.sb-categories-hero{ padding: 14px 0 4px; } .sb-modern-category-grid{ margin-top: 2px; } .sb-modern-category-grid .sb-category-pill{ padding: 22px 12px; } } @media (prefers-reduced-motion: reduce){ .sb-modern-category-grid .sb-category-pill, .sb-modern-category-grid .sb-category-pill::before, .sb-modern-category-grid .sb-pill-arrow{ transition: none; } } /* EOF */