/* ========================================== ROSA CREAZIONI · THEME (SCOPED) ✅ Applica SOLO dentro ========================================== */ .rc-site{ --rc-bg-main: #F5F2EB; --rc-bg-soft: #E8DFD3; --rc-bg-card: #FFFFFF; --rc-text-main: #2D2A27; --rc-text-soft: #5A4632; --rc-accent: #C56E47; /* terracotta */ --rc-accent-soft: #CBA35C; /* ocra */ --rc-border-soft: rgba(0,0,0,.08); --rc-shadow-soft: 0 10px 30px rgba(0,0,0,0.08); } /* base */ .rc-site{ background: var(--rc-bg-main); color: var(--rc-text-main); } .rc-site a{ color: var(--rc-accent); } .rc-site a:hover{ color: var(--rc-accent-soft); } /* HEADER SOLO DEL SITO (non generico "header") */ .rc-site .site-header{ position: sticky; top: 0; z-index: 3000; background: rgba(245,242,235,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,.06); } .rc-site .site-header__inner{ max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .rc-site .site-logo img{ height: 64px; width: auto; display:block; } .rc-site .site-nav{ display:flex; gap: 18px; align-items:center; } .rc-site .site-nav a{ text-decoration:none; color: var(--rc-text-main); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; padding: 10px 10px; border-radius: 999px; } .rc-site .site-nav a:hover{ background: rgba(0,0,0,.04); } .rc-site .site-nav a.is-active{ background: rgba(197,110,71,.10); border: 1px solid rgba(197,110,71,.25); } .rc-site .nav-burger{ display:none; width:46px;height:46px; border-radius: 14px; border: 1px solid rgba(0,0,0,.10); background:#fff; align-items:center; justify-content:center; gap: 4px; flex-direction: column; } .rc-site .nav-burger span{ width:60%; height:2px; background:#5c554b; border-radius: 999px; } .rc-site .site-nav-mobile{ display:none; padding: 10px 16px 16px; background: rgba(245,242,235,.98); border-top: 1px solid rgba(0,0,0,.06); } .rc-site .site-nav-mobile a{ display:block; padding: 10px 0; text-decoration:none; color: var(--rc-text-main); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; } .rc-site .site-nav-mobile.is-open{ display:block; } @media (max-width: 992px){ .rc-site .site-nav{ display:none; } .rc-site .nav-burger{ display:flex; } .rc-site .site-logo img{ height: 54px; } } /* =============================== BOTTONI – ROSA CREAZIONI (FIX) =============================== */ .rc-site .btn{ border-radius: 999px; font-weight: 700; } /* Bottone principale */ .rc-site .btn-primary{ background: var(--rc-accent) !important; border-color: var(--rc-accent) !important; color: #fff !important; box-shadow: var(--rc-shadow-soft); } .rc-site .btn-primary:hover{ background: #A6452F !important; border-color: #A6452F !important; } /* Bottone secondario (outline chiaro SU SFONDO CHIARO) */ .rc-site .btn-outline-light, .rc-site .btn-secondary{ background: transparent !important; color: var(--rc-text-soft) !important; border: 1px solid rgba(0,0,0,.18) !important; } /* HOVER visibile */ .rc-site .btn-outline-light:hover, .rc-site .btn-secondary:hover{ background: rgba(0,0,0,.05) !important; color: var(--rc-text-main) !important; } /* CARD (bootstrap) */ .rc-site .card{ background: var(--rc-bg-card) !important; border-radius: 18px; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: var(--rc-shadow-soft); overflow: hidden; } /* FIX CARD PRODOTTI */ .rc-site .card-img-wrapper{ position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.04); } .rc-site .card-img-wrapper img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } .rc-site .product-badge{ position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.86); border: 1px solid rgba(0,0,0,.10); backdrop-filter: blur(8px); } .rc-site .card-body{ display: flex; flex-direction: column; } .rc-site .card-text{ flex: 1; } .rc-site .card .btn{ margin-top: .75rem; } /* FORM (solo bootstrap control) */ .rc-site .form-control, .rc-site .form-select, .rc-site textarea{ border-radius: 12px; border: 1px solid rgba(0,0,0,.12); } .rc-site .form-control:focus, .rc-site .form-select:focus, .rc-site textarea:focus{ border-color: var(--rc-accent-soft); box-shadow: 0 0 0 2px rgba(203,163,92,0.18); } /* FOOTER (solo footer del sito) */ .rc-site footer.site-footer, .rc-site footer{ background: #0F2C3F !important; color: rgba(245, 242, 235, 0.9) !important; border-top: 1px solid rgba(245, 242, 235, 0.12); } /* ========================= FIX SLIDER FULL-WIDTH + CENTER (incolla in fondo a assets/style.css) ========================= */ .hero-carousel{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .hero-carousel .carousel-inner, .hero-carousel .carousel-item{ width: 100% !important; } /* il contenitore della slide deve essere largo 100% */ .hero-slide{ width: 100% !important; max-width: none !important; margin: 0 !important; overflow: hidden; } /* picture/img devono coprire e stare centrati */ .hero-media{ display: block; width: 100% !important; height: 100%; } .hero-media img{ display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* se avevi in giro width:100vw sullo slider, questa evita lo “shift” */ .rc-site, body{ overflow-x: hidden; } /* ========================= ALLINEAMENTO TESTI SEZIONE + CARDS ========================= */ #novita .section-title, #novita .section-subtitle{ margin-left: 0 !important; padding-left: 0 !important; } #novita .d-flex{ padding-left: 0; } /* respiro coerente con le card */ #novita .section-title{ margin-bottom: .25rem; } #novita .section-subtitle{ margin-bottom: 0; max-width: 520px; color: rgba(45,42,39,.75); } /* ========================= ALLINEA "ULTIMI ARRIVI" ALLA GRIGLIA PRODOTTI ========================= */ /* Assicura che titolo/sottotitolo partano EXACT come la row */ #novita .d-flex{ margin-left: 0 !important; padding-left: 0 !important; } /* Reset di eventuali rientri su titoli */ #novita .section-title, #novita .section-subtitle{ margin-left: 0 !important; padding-left: 0 !important; } /* Se per caso la row ha padding/margin strani ereditati */ #novita .row{ margin-left: 0 !important; margin-right: 0 !important; } /* Mantieni gutters bootstrap corretti: compenso con padding sui col */ #novita .row > *{ padding-left: 12px !important; padding-right: 12px !important; } #novita .d-flex{ align-items: center !important; /* invece di align-items-end */ } /* ========================= FIX: container tornano centrati (override bootstrap) ========================= */ .container, .container-fluid, [class*="container-"]{ margin-left: auto !important; margin-right: auto !important; } /* se qualche regola ha tolto padding laterale */ .container, [class*="container-"]{ padding-left: 16px !important; padding-right: 16px !important; } /* opzionale: limita larghezza come bootstrap e centra sempre */ .container{ max-width: 1200px; /* puoi mettere 1140 o 1320 se preferisci */ } /* la sezione novità: centrata e coerente */ #novita{ width: 100%; } /* ========================= RC FIX: Bootstrap container centrato ========================= */ .rc-site .container, .rc-site [class*="container-"]{ width: 100%; margin-left: auto !important; margin-right: auto !important; } /* padding laterale stabile */ .rc-site .container, .rc-site [class*="container-"]{ padding-left: 16px !important; padding-right: 16px !important; } /* (opzionale) stessa “sensazione” bootstrap */ @media (min-width: 1200px){ .rc-site .container{ max-width: 1140px; /* puoi mettere 1200 se vuoi più largo */ } } /* Se qualche regola ha messo flex e ha “spinto” la pagina */ .rc-site{ display: block !important; } /* ========================================= FIX: allineamento titolo + card (no card “strette” al centro) ========================================= */ .rc-site #novita .col-md-4{ display: flex; /* la card può stretchare */ } .rc-site #novita .card{ width: 100% !important; /* RIEMPI la colonna */ max-width: none !important; /* annulla eventuali max-width */ margin: 0 !important; /* annulla eventuali margin:auto */ } /* Se hai immagini o wrapper che limitano la larghezza */ .rc-site #novita .card-img-wrapper, .rc-site #novita .card-img-wrapper img{ width: 100% !important; } /* (opzionale) allinea header sopra alle card in modo pulito */ .rc-site #novita .d-flex{ align-items: flex-end; } /* =============================== PRODOTTI SENZA CARD =============================== */ .rc-products{ margin-top: 3rem; } .rc-products-head{ display:flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; } /* singolo prodotto */ .rc-product{ width:100%; } .rc-product-img{ aspect-ratio: 4 / 3; overflow:hidden; border-radius: 16px; background:#eee; margin-bottom: .75rem; } .rc-product-img img{ width:100%; height:100%; object-fit: cover; display:block; } /* testi */ .rc-product-title{ font-size: 1rem; font-weight: 700; margin: .25rem 0; } .rc-product-desc{ font-size: .85rem; color:#555; margin-bottom: .5rem; } /* footer prezzo + bottone */ .rc-product-foot{ display:flex; justify-content: space-between; align-items:center; margin-top: .25rem; } /* ALLINEAMENTO TESTO SLIDER AL CONTAINER SOTTO */ .hero-overlay{ position: absolute; inset: 0; display: flex; align-items: flex-end; /* se vuoi in basso */ padding-bottom: 28px; /* distanza dal bordo */ } .hero-inner{ width: 100%; } /* opzionale: se vuoi il box testo sempre a sinistra del container */ .hero-content{ margin-left: 0; } /* ========================== HERO: testo più leggibile ========================== */ /* overlay generale più scuro sulla foto */ .hero-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; /* testo in basso (se vuoi) */ padding: 24px 0; background: linear-gradient( to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.08) 100% ); } /* contenitore testo */ .hero-content{ background: rgba(255,255,255,.90); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 14px 40px rgba(0,0,0,.22); border-radius: 16px; padding: 16px 16px; max-width: 560px; } /* testo scuro dentro la card */ .hero-content, .hero-content *{ color:#2D2A27 !important; text-shadow: none !important; } /* titoli un filo più incisivi */ .hero-title{ font-weight: 900; line-height: 1.15; } /* mobile: più compatto */ @media (max-width: 768px){ .hero-overlay{ align-items:flex-end; padding: 14px 0; } .hero-content{ max-width: 92%; padding: 12px 12px; border-radius: 14px; } .hero-title{ font-size: 1.2rem; } .hero-subtitle{ font-size: .88rem; } } /* ========================= FIX WIDGET WHATSAPP (icona gigante) ========================= */ .wp-chat-widget{ position: fixed; bottom: 20px; left: 20px; z-index: 999999; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Montserrat", sans-serif; } /* pulsante */ .wp-chat-launcher{ background:#000; border-radius:999px; padding:10px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; border:1px solid #ebba26; box-shadow:0 0 14px rgba(0,0,0,0.45); } /* ✅ override della regola img{width:100%} */ .wp-chat-launcher img{ width:26px !important; height:26px !important; max-width:26px !important; max-height:26px !important; object-fit:contain !important; display:block !important; } /* box chat */ .wp-chat-box{ position:absolute; bottom:60px; left:0; width:310px; max-width:90vw; background:#111; border-radius:16px; border:1px solid #ebba26; box-shadow:0 18px 40px rgba(0,0,0,0.7); overflow:hidden; display:none; } /* header */ .wp-chat-header{ background:#000; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; } .wp-chat-title{ color:#ebba26; font-size:14px; font-weight:700; } .wp-chat-status{ color:#ccc; font-size:11px; } .wp-chat-close{ background:transparent;border:0;color:#ebba26;font-size:22px;cursor:pointer; } /* messaggi */ .wp-chat-messages{ padding:10px; background:#181818; max-height:220px; overflow:auto; } .wp-chat-bubble{ max-width:90%; padding:8px 10px; border-radius:10px; font-size:13px; line-height:1.4; margin-bottom:6px; } .wp-chat-bubble-left{ background:#262626; color:#f5f5f5; border-bottom-left-radius:2px; } /* footer */ .wp-chat-footer{ padding:10px; background:#121212; border-top:1px solid #333; text-align:center; } .wp-chat-whatsapp-btn{ display:inline-block; padding:8px 14px; border-radius:999px; text-decoration:none; background:#25d366; color:#000; font-size:14px; font-weight:700; box-shadow:0 0 12px rgba(37,211,102,0.6); } .wp-chat-note{ margin-top:6px; color:#aaa; font-size:11px; } /* HERO FULL HEIGHT (desktop) */ .hero-carousel .carousel-item, .hero-slide{ height: calc(100vh - 90px); /* 90px ≈ altezza header */ min-height: 520px; } .hero-media, .hero-media img{ width: 100%; height: 100%; } .hero-media img{ object-fit: cover; display: block; } /* Overlay e contenuto sempre leggibili */ .hero-overlay{ position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10), transparent); } .hero-content{ max-width: 560px; background: rgba(245,242,235,.86); border-radius: 16px; padding: 16px 16px; } /* Mobile: più “compatto” */ @media (max-width: 768px){ .hero-carousel .carousel-item, .hero-slide{ height: auto; min-height: 0; } .hero-media img{ height: auto; } } /* HERO / SLIDER */ .hero-carousel { margin-bottom: 3rem; } .hero-slide{ position: relative; height: clamp(420px, 72vh, 740px); /* più alto su schermi grandi */ overflow: hidden; } .hero-media, .hero-media img{ width: 100%; height: 100%; display: block; } .hero-media img{ object-fit: cover; object-position: center; } .hero-overlay{ position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 24px 0; background: linear-gradient( to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 75% ); } .hero-inner{ width: 100%; } .hero-card{ max-width: 520px; background: rgba(255,255,255,.82); color: #1f1d1a; border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 18px 44px rgba(0,0,0,.22); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,.08); } .hero-kicker{ font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; opacity: .75; margin-bottom: 6px; } .hero-title{ margin: 0 0 8px 0; line-height: 1.05; } .hero-subtitle{ margin: 0 0 10px 0; opacity: .88; } .hero-tag{ display: inline-block; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: rgba(197,110,71,.12); border: 1px solid rgba(197,110,71,.25); margin-bottom: 10px; } .hero-cta{ display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 768px){ .hero-slide{ height: 66vh; } .hero-card{ max-width: 92vw; } } /* ========================= ROSA CREAZIONI BASE ========================= */ .rc-site{ --rc-bg:#f5f2eb; --rc-ink:#2d2a27; --rc-muted:#6f665c; --rc-line:rgba(0,0,0,.10); --rc-accent:#c56e47; --rc-accent2:#a6452f; background: var(--rc-bg); color: var(--rc-ink); } .rc-site a{ color: var(--rc-accent); } .rc-site a:hover{ color: #cba35c; } /* HEADER */ .rc-header{ position: sticky; top:0; z-index: 3000; } .rc-navbar{ background: rgba(245,242,235,.92); border-bottom: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(10px); } .rc-logo{ height:72px; width:auto; display:block; } @media (max-width:768px){ .rc-logo{ height:54px; } } .rc-link{ color: var(--rc-muted) !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; padding: .55rem .8rem !important; border-radius: 999px; } .rc-link:hover{ background: rgba(197,110,71,.10); color: var(--rc-ink) !important; } .rc-cart{ border:1px solid rgba(197,110,71,.25); background: rgba(255,255,255,.55); } .rc-badge{ background: var(--rc-accent); color:#fff; font-weight: 900; } .rc-btn-admin{ background: var(--rc-accent); color:#fff !important; border-radius: 999px; font-weight: 900; padding: .55rem 1rem; border:1px solid rgba(0,0,0,.08); box-shadow: 0 10px 22px rgba(0,0,0,.10); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; } .rc-btn-admin:hover{ background: var(--rc-accent2); } /* ========================= HERO / SLIDER ========================= */ .rc-hero{ overflow:hidden; } .rc-hero .carousel-inner{ border-radius: 0; } .rc-hero-slide{ position: relative; height: clamp(460px, 72vh, 820px); /* più alto su desktop */ } @media (max-width: 768px){ .rc-hero-slide{ height: 78vh; min-height: 520px; } } .rc-hero-media, .rc-hero-media img{ width:100%; height:100%; display:block; } .rc-hero-media img{ object-fit: cover; } .rc-hero-overlay{ position:absolute; inset:0; /* gradient per far leggere SEMPRE il testo */ background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 45%); } .rc-hero-inner{ height:100%; display:flex; align-items:flex-end; padding-bottom: 34px; } .rc-hero-box{ max-width: 520px; background: rgba(245,242,235,.88); border: 1px solid rgba(255,255,255,.35); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.18); backdrop-filter: blur(8px); } .rc-hero-kicker{ font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; opacity: .75; margin-bottom: 6px; } .rc-hero-title{ font-weight: 900; line-height: 1.05; margin: 0 0 8px; } .rc-hero-subtitle{ margin: 0 0 10px; color: rgba(45,42,39,.88); } .rc-hero-tag{ font-size: 12px; font-weight: 800; opacity: .85; } /* ========================= CARDS PRODOTTI (NO MIX) ========================= */ .rc-card{ background:#fff; border-radius: 18px; overflow:hidden; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 26px rgba(0,0,0,.08); display:flex; flex-direction: column; height: 100%; } .rc-card-media{ aspect-ratio: 4/3; background: rgba(0,0,0,.04); overflow:hidden; } .rc-card-media img{ width:100%; height:100%; object-fit: cover; display:block; } .rc-card-body{ padding: 14px 14px 12px; display:flex; flex-direction: column; gap: 8px; flex: 1; } .rc-card-title{ font-size: 18px; font-weight: 900; margin: 0; line-height: 1.15; } .rc-card-desc{ margin: 0; color: rgba(45,42,39,.80); font-size: 13px; line-height: 1.35; min-height: 52px; /* mantiene allineamento */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .rc-card-foot{ margin-top: auto; display:flex; align-items:center; justify-content: space-between; gap: 10px; } .rc-price{ font-weight: 900; } /* bottoni */ .rc-site .btn-primary{ background: var(--rc-accent); border-color: var(--rc-accent); border-radius: 999px; font-weight: 900; } .rc-site .btn-primary:hover{ background: var(--rc-accent2); border-color: var(--rc-accent2); } /* soft cards sezioni */ .rc-softcard{ box-shadow: 0 10px 26px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.08); } /* FOOTER */ .site-footer{ background: #0F2C3F; color: rgba(245,242,235,.92); } .site-footer a{ color: rgba(245,242,235,.92); } .site-footer a:hover{ color: #cba35c; } /* ===== FIX DIMENSIONE LOGO HEADER (Bootstrap navbar) ===== */ .rc-navbar .rc-logo{ height: 96px; width: auto; display: block; } @media (max-width: 1200px){ .rc-navbar .rc-logo{ height: 84px; } } @media (max-width: 768px){ .rc-navbar .rc-logo{ height: 60px; } } /* =============================== OVERRIDE BOOTSTRAP – ROSA CREAZIONI =============================== */ :root{ --rc-terra: #c56e47; --rc-terra-hover: #b35f3c; } /* Pulsanti principali */ .btn-primary{ background-color: var(--rc-terra) !important; border-color: var(--rc-terra) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus{ background-color: var(--rc-terra-hover) !important; border-color: var(--rc-terra-hover) !important; } /* Pulsanti outline */ .btn-outline-primary{ color: var(--rc-terra) !important; border-color: var(--rc-terra) !important; } .btn-outline-primary:hover{ background-color: var(--rc-terra) !important; color: #fff !important; } /* =============================== HERO – Bottone secondario FIX =============================== */ .rc-site .btn-hero-secondary{ background: rgba(255,255,255,.85); color: var(--rc-text-main); border: 1px solid rgba(0,0,0,.15); font-weight: 700; backdrop-filter: blur(6px); } .rc-site .btn-hero-secondary:hover{ background: #fff; color: var(--rc-text-main); border-color: rgba(0,0,0,.25); } /* =============================== HERO – Bottone secondario VISIBILE =============================== */ .rc-site .btn-hero-secondary{ background: rgba(255,255,255,0.95); color: var(--rc-text-main); border: 2px solid var(--rc-accent); border-radius: 999px; padding: .45rem .9rem; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.12); } .rc-site .btn-hero-secondary:hover{ background: #fff; color: var(--rc-text-main); border-color: #A6452F; box-shadow: 0 8px 20px rgba(0,0,0,.18); } /* ========================== HERO: bottone secondario "Vedi le novità" (fix definitivo: sembra un pulsante, non un testo) ========================== */ /* prende qualunque bottone "non primario" dentro lo slider */ .rc-site .hero-content .btn:not(.btn-primary){ background: rgba(255,255,255,.92) !important; color: #2D2A27 !important; border: 2px solid #C56E47 !important; border-radius: 999px !important; padding: .55rem 1.05rem !important; font-weight: 800 !important; text-decoration: none !important; box-shadow: 0 10px 22px rgba(0,0,0,.12) !important; } .rc-site .hero-content .btn:not(.btn-primary):hover{ background: #ffffff !important; border-color: #A6452F !important; transform: translateY(-1px); } /* ===== RC PRODUCT CARD (coerente ovunque) ===== */ .rc-products { margin-top: 18px; } .rc-products-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; } .rc-product{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.08); height:100%; display:flex; flex-direction:column; } .rc-product-img{ aspect-ratio: 4 / 3; background: rgba(0,0,0,.04); overflow:hidden; } .rc-product-img img{ width:100%; height:100%; object-fit:cover; display:block; } /* corpo */ .rc-product-body{ padding:14px 14px 12px; display:flex; flex-direction:column; flex:1; gap:8px; } .rc-product-kicker{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.55; margin:0; } .rc-product-title{ font-size:16px; font-weight:900; line-height:1.15; margin:0; /* max 2 righe */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .rc-product-desc{ font-size:13px; opacity:.85; margin:0; /* max 3 righe */ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* footer sempre in basso */ .rc-product-foot{ margin-top:auto; padding:10px 14px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid rgba(0,0,0,.06); } .rc-product-price{ font-weight:900; } /* bottone sempre “terra” */ .rc-site .rc-product .btn-primary{ background: var(--rc-accent) !important; border-color: var(--rc-accent) !important; color:#fff !important; border-radius:999px; font-weight:800; } .rc-site .rc-product .btn-primary:hover{ background:#A6452F !important; border-color:#A6452F !important; } /* ===== PRODotti.php coerente con Home ===== */ .rc-site .rc-panel{ background: var(--rc-bg-card); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 16px; box-shadow: 0 10px 26px rgba(0,0,0,.08); } /* Card prodotti (stesso concetto home) */ .rc-site .rc-product-card{ background: var(--rc-bg-card); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.08); display: flex; flex-direction: column; height: 100%; } /* media 4:3, niente immagini enormi */ .rc-site .rc-product-media{ aspect-ratio: 4 / 3; background: rgba(0,0,0,.04); overflow: hidden; } .rc-site .rc-product-media img{ width: 100%; height: 100%; object-fit: cover; display: block; } .rc-site .rc-product-media--empty{ display:block; } /* body */ .rc-site .rc-product-body{ padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .rc-site .rc-product-cat{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.55); font-weight: 700; } /* titolo: max 2 righe */ .rc-site .rc-product-title{ font-size: 16px; line-height: 1.25; margin: 0; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* descrizione: max 3 righe */ .rc-site .rc-product-desc{ margin: 0; font-size: 13px; line-height: 1.35; opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* footer: prezzo + bottone sempre in basso */ .rc-site .rc-product-foot{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; } .rc-site .rc-price{ font-weight: 900; } /* ===== SINGOLO PRODOTTO (prodotto.php) ===== */ .rc-site .rc-h1{ font-size: 28px; line-height: 1.15; font-weight: 900; margin: 0; } .rc-site .rc-muted{ opacity:.75; color: var(--rc-text-soft); } .rc-site .rc-price-big{ font-size: 22px; font-weight: 900; color: var(--rc-text-main); } /* layout 2 colonne, poi stack su mobile */ .rc-site .rc-product-page{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 992px){ .rc-site .rc-product-page{ grid-template-columns: 1fr; } } /* pannello già usato altrove */ .rc-site .rc-panel{ background: var(--rc-bg-card); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 16px; box-shadow: 0 10px 26px rgba(0,0,0,.08); } /* gallery: media 4:3 coerente */ .rc-site .rc-product-gallery{ padding: 12px; } .rc-site .rc-product-media{ aspect-ratio: 4 / 3; background: rgba(0,0,0,.04); border-radius: 14px; overflow: hidden; } .rc-site .rc-product-media img{ width: 100%; height: 100%; object-fit: cover; display: block; } .rc-site .rc-product-media--empty{ height: 320px; } /* descrizione lunga */ .rc-site .rc-product-desc-long{ font-size: 14px; line-height: 1.55; opacity: .9; } /* qty input più “pulito” */ .rc-site .rc-qty input{ width: 140px; } /* frecce carousel un filo più leggibili */ .rc-site .carousel-control-prev-icon, .rc-site .carousel-control-next-icon{ filter: drop-shadow(0 3px 10px rgba(0,0,0,.35)); } /* ===== FIX LAYOUT PRODOTTO SINGOLO ===== */ .rc-site .rc-product-page{ max-width: 1100px; margin: 0 auto; } @media (max-width: 1200px){ .rc-site .rc-product-page{ max-width: 100%; } } .rc-site .rc-product-media{ aspect-ratio: 4 / 3; max-height: 420px; } .rc-site .rc-product-media img{ object-fit: contain; background: #fff; } .rc-site .rc-product-right h1{ font-size: 30px; font-weight: 900; margin-bottom: 6px; } .rc-site .rc-price-big{ font-size: 26px; margin-bottom: 6px; } .rc-site .rc-product-desc-long{ font-size: 15px; line-height: 1.6; max-width: 90%; } .rc-site .rc-form{ margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.08); } /* =========================== PRODUCT GRID – FIX DEFINITIVO =========================== */ /* Card prodotto */ .rc-product{ background:#fff; border-radius:18px; padding:12px; height:100%; display:flex; flex-direction:column; box-shadow:0 10px 26px rgba(0,0,0,.08); } /* Contenitore immagine */ .rc-product-img{ width:100%; aspect-ratio: 4 / 3; background:#f1f1f1; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:10px; } /* Immagine reale */ .rc-product-img img{ width:100%; height:100%; object-fit:cover; display:block; } /* Fallback se immagine mancante */ .rc-product-img img[src=""], .rc-product-img img:not([src]){ display:none; } /* Placeholder SOLO se NON c'è immagine */ .rc-product-img:has(img:not([src])), .rc-product-img:has(img[src=""]), .rc-product-img:not(:has(img)){ background:#f1f1f1; } .rc-product-img:has(img:not([src]))::after, .rc-product-img:has(img[src=""])::after, .rc-product-img:not(:has(img))::after{ content:"Nessuna immagine"; font-size:12px; color:#999; display:flex; align-items:center; justify-content:center; width:100%; height:100%; } /* Meta categoria */ .rc-product-meta{ font-size:11px; text-transform:uppercase; color:#777; margin-bottom:4px; } /* Titolo */ .rc-product-title{ font-size:16px; font-weight:700; margin:0 0 6px 0; } /* Descrizione */ .rc-product-desc{ font-size:13px; color:#555; flex-grow:1; margin-bottom:10px; } /* Footer prezzo + bottone */ .rc-product-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; } /* ===== Layout pagine interne: margini coerenti ===== */ .rc-page{ max-width: 1100px; margin: 24px auto 56px; padding: 0 16px; } /* HERO CARD – comportamento mobile */ @media (max-width: 768px){ .rc-hero-card{ opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .rc-hero-card.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; } } /* Desktop: sempre visibile */ @media (min-width: 769px){ .rc-hero-card{ opacity: 1 !important; transform: none !important; pointer-events: auto !important; } } /* HEADER LOGO – mobile */ @media (max-width: 768px) { .rc-header-logo img, .site-logo img { height: 42px; /* aumenta qui se vuoi ancora di più */ width: auto; max-width: none; } .rc-header, header { padding-top: 10px; padding-bottom: 10px; } } @media (max-width: 768px) { /* contenitore logo */ .rc-header-logo, .site-logo { height: 52px; /* QUI cresce davvero */ display: flex; align-items: center; } /* svg o img dentro */ .rc-header-logo svg, .rc-header-logo img, .site-logo svg, .site-logo img { height: 100%; width: auto; max-height: none; } } .rc-header-logo svg { width: auto !important; height: 100% !important; } /* LOGO MOBILE – versione definitiva */ @media (max-width: 768px){ /* NAVBAR più alta */ .navbar, header .navbar, .rc-header .navbar{ min-height: 88px !important; /* ⬅️ PIÙ ALTA */ } /* CONTENITORE LOGO */ .navbar-brand, header .navbar-brand, .rc-header-logo{ height: 72px !important; /* ⬅️ QUI DECIDI LA DIMENSIONE */ padding: 0 !important; display: flex !important; align-items: center !important; } /* IMG LOGO */ .navbar-brand img, .rc-header-logo img{ height: 132px !important; /* ⬅️ STESSA ALTEZZA */ width: auto !important; max-height: none !important; } } /* CARD PRODOTTI – IMMAGINI QUADRATE */ .rc-product-img { position: relative; width: 100%; aspect-ratio: 1 / 1; /* QUADRATO PERFETTO */ background: #f3f3f3; /* sfondo neutro elegante */ border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .rc-product-img img { width: 100%; height: 100%; object-fit: contain; /* NON TAGLIA */ padding: 12px; /* respiro interno */ } .rc-product-img { aspect-ratio: 1 / 1; overflow: hidden; background: #f5f5f5; } .rc-product-img img { width: 100%; height: 100%; object-fit: contain; /* ← NON TAGLIA */ }