/* ===== Ritocchi della pagina d'ingresso — SOLO telefono ===== PC e tablet non sono toccati: tutto sta dentro la media query. Installato da script/casa_ritocchi.py. ==================================================================== */ /* 600px et non 900 : au-dessus commence l'iPad (768 en portrait, 820 sur les modèles récents), qui a la place d'un écran d'ordinateur et n'a pas besoin de ces réglages. Le seuil isole les téléphones — le plus large, l'iPhone Pro Max, fait 430px. */ @media (max-width: 600px) { /* --- 1. le foto prodotto più grandi --- La scheda mostrava un quadrato di 211px con quasi 150px di testo sotto: la scarpa, che è quello che si guarda, occupava meno della metà. Il rapporto passa a 1/1.22, come sulle schede prodotto. */ .swiper-slide.sf-column .sf-image, .swiper-slide.sf-column .sf-image img { aspect-ratio: 1 / 1.22 !important; height: auto !important; } .swiper-slide.sf-column .sf-image img { object-fit: cover !important; } /* --- 2. meno aria fra la foto e il titolo --- Marca, nome e prezzo erano distanziati come tre blocchi separati; qui diventano un gruppo unico sotto la foto. */ .swiper-slide.sf-column .sf__pcard-info, .swiper-slide.sf-column .sf-prod-info { padding-top: 6px !important; } .swiper-slide.sf-column .sf__pcard-vendor, .swiper-slide.sf-column [class*="vendor"] { font-size: 10px !important; margin-bottom: 3px !important; } .swiper-slide.sf-column .sf__pcard-name, .swiper-slide.sf-column .sf-prod-title, .swiper-slide.sf-column h3 { font-size: 12px !important; line-height: 1.35 !important; margin-bottom: 4px !important; } .swiper-slide.sf-column .sf__pcard-price, .swiper-slide.sf-column [class*="price"] { font-size: 12px !important; } /* --- 3. il bottone « Tutti i prodotti » --- 30px di stacco aprivano un vuoto fra i prodotti e la fascia immagine che segue. Il testo scende da 16 a 12px: il bottone pesa meno senza scendere sotto la soglia comoda per il dito. */ .sf__featured-collection-button { margin-top: 10px !important; } .sf__featured-collection-button .sf__btn { font-size: 12px !important; letter-spacing: .1em; padding: 13px 24px !important; } /* --- 4. le fasce di collezione piu alte --- 524px su uno schermo di 932: la foto era tagliata cosi corta che il modello si vedeva a meta e il titolo le stava quasi addosso. 620px lasciano respirare la scena senza spingere fuori la sezione seguente. Riguarda solo `--adapt`, cioe le fasce di collezione: la copertina in cima e `--fullscreen` e non e toccata. L'altezza va sulla DIAPOSITIVA, non sul contenitore. Messa sul contenitore (`.sf__slider--adapt`, cioe `.swiper-wrapper`) alzava la scatola ma non la foto: la diapositiva restava alla sua altezza naturale e sotto restava il bianco. Misurato: 620 contro 524 a 430px (96px di vuoto), 620 contro 476 a 390px (144px) — e tre volte nella pagina, una per fascia. `min(620px, 144vw)`: 144vw fa esattamente 620px a 430px, la larghezza su cui l'altezza e stata scelta. Sotto, l'altezza scende con lo schermo invece di restare fissa — 620px su un telefono largo 320 darebbero una striscia altissima e ritagliata all'osso. */ .sf__slider--adapt { height: auto !important; } .sf__slider--adapt .swiper-slide { height: min(620px, 144vw) !important; } /* …e la scatola DENTRO la diapositiva deve seguire. Il tema la marca `md:h-full`: un'altezza piena che parte solo da 768px. Sotto, resta all'altezza naturale della foto — 524px contro i 619 della diapositiva — e i 95px di scarto tornavano bianchi, esattamente come prima. Il difetto sembrava non corretto perche si era spostato di un livello, non perche fosse rimasto. Misurato con `vuoti.py`, che conta il bianco sull'immagine renderizzata invece che nel DOM: 2 vuoti di ~150px a 390 e 430px, nessuno a 768 e 1440 — il bug non e mai esistito su computer. Il tema tiene DUE alberi nella stessa diapositiva: `.hidden md:block` per il computer (altezza 0 sul telefono) e `.md:hidden` per il telefono. Alzare solo `.position` non basta: l'albero mobile resta appeso sotto, alla sua altezza naturale. Va seguito fino all'immagine. */ .sf__slider--adapt .swiper-slide > *, .sf__slider--adapt .swiper-slide .position, .sf__slider--adapt .swiper-slide .position > .md\:hidden, .sf__slider--adapt .swiper-slide .sf__slide-image, .sf__slider--adapt .swiper-slide .sf-image, .sf__slider--adapt .swiper-slide .sf-image > img { height: 100% !important; } } /* ---- il cuore dei preferiti, anche in home ------------------------------- `preferiti.js` gira sulla home (posato da ripara_home.py) e crea i suoi 36 bottoni nei caroselli. Ma il loro stile vive in `griglia-5.css` (le collezioni) e in `scheda.css` (le schede) — e nessuna delle due e collegata a index.html. Misurato a 390 e 768px: 36 `.pref__btn` nel DOM, `position: static` invece di `absolute`, larghezza e altezza 0. I cuori c'erano davvero, ma invisibili e intoccabili. Il blocco e copiato tale e quale da `griglia-5.css`, media compresi: tre copie della stessa regola sono un debito, ma spostare lo stile in un foglio dedicato vorrebbe dire ricollegare 813 pagine — un rischio che non si prende per un bottone. Se una di queste regole cambia, cambiala nei tre posti: griglia-5.css, scheda.css, e qui. */ .pref__btn{position:absolute;top:12px;right:12px;z-index:3; width:32px;height:32px;display:flex;align-items:center;justify-content:center; background:none;border:none;padding:0;cursor:pointer;color:#000; opacity:.75;transition:opacity .2s,transform .2s} .pref__btn:hover{opacity:1;transform:scale(1.12)} .pref__btn svg{width:21px;height:21px;display:block; fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .pref__btn--on{opacity:1} .pref__btn--on svg{fill:currentColor} @media(max-width:767px){ .pref__btn{top:8px;right:8px;width:28px;height:28px} .pref__btn svg{width:18px;height:18px} } @media(prefers-reduced-motion:reduce){ .pref__btn{transition:none} .pref__btn:hover{transform:none} } /* ===== L'accueil au-dessus de 600px ================================== Tout ce qui precede vit dans `@media (max-width:600px)`. Le seuil isolait les telephones — le plus large, l'iPhone Pro Max, fait 430px. Consequence non prevue : entre 601px et l'ordinateur, l'accueil restait celui du theme, sans aucune des retouches. Mesure a 691px avant correction : 36px entre la photo et le titre, 82px de blanc avant le bouton « Tutti i prodotti », 30px sous l'intitule de section. A 430px, les memes mesures donnaient 31 et 66. Les ESPACEMENTS sont donc etendus a toutes les largeurs. Les TAILLES DE TEXTE, non : 10px pour la marque et 12px pour le titre conviennent a un telephone tenu a trente centimetres, pas a un ecran regarde de loin — et le controle d'entretien signalait deja ces 10px comme trop petits. Selecteurs prefixes par `.sf__featured-collection` : `[class*="vendor"]` sans prefixe toucherait aussi les fiches produit et les collections. */ @media (min-width: 601px) { .sf__featured-collection .sf__pcard-info, .sf__featured-collection .sf-prod-info { padding-top: 8px !important; } .sf__featured-collection .sf__pcard-vendor { margin-bottom: 3px !important; } .sf__featured-collection .sf__pcard-name { margin-bottom: 4px !important; } .sf__featured-collection .section__header { margin-bottom: 18px !important; } .sf__featured-collection .sf__featured-collection-button { margin-top: 18px !important; } } /* ---- les commandes de carrousel, vides, prenaient 40px -------------------- Sous chaque carrousel de l'accueil : Le div est VIDE — pas une puce, pas une fleche — et le theme l'a lui-meme marque `hidden`. Mais il porte aussi `flex`, et des deux classes c'est `display:flex` qui l'emporte : l'element s'affiche quand meme, avec ses 20px de hauteur, ses 20px de `mt-5` et son `pb-5`. Mesure a 691px : la grille finit a 1692, le conteneur a 1732. 40px de blanc par carrousel, sur un element que personne ne voit. MAIS le `hidden` ne suffit pas a le retrouver. Mesure de la classe reelle au moment du rendu, et non dans le HTML source : 1440px « … --full hidden pb-5 lg:pb-0 » display:none 0 enfant 691px « … --full pb-5 lg:pb-0 » display:flex 0 enfant 430px « … --full pb-5 lg:pb-0 » display:flex 0 enfant Sous 1024px, le JS du theme RETIRE lui-meme le `hidden` — il prepare la place des fleches de navigation — puis n'y met aucun bouton, parce qu'a cette largeur le carrousel est rendu en grille et n'a rien a faire defiler. Le div reste donc vide ET visible. Une regle qui vise `.hidden` ne peut pas l'attraper la ou le defaut existe : il fallait mesurer le DOM rendu pour le voir, le HTML source disait le contraire. D'ou les deux regles. La premiere fait respecter le `hidden` la ou il subsiste. La seconde vise le div qui n'a aucun element enfant — et seulement lui : le jour ou Swiper y injecte de vraies fleches, elles reapparaissent sans qu'on ait a revenir ici. `:empty` ne conviendrait pas, le div contient une espace. Les regles vivent dans `casa-ritocchi.css`, feuille liee a la seule page d'accueil : leur portee est bornee par le fichier, pas par le selecteur. */ .sf-slider__controls.hidden { display: none !important; } .sf-slider__controls:not(:has(*)) { display: none !important; } /* ===== Promotion : prix barre + prix remise ========================== Pose par script/prezzi.py le 1er aout 2026. Le theme attribue #666666 a `.text-color-sale-price` et #000000 au prix normal. Applique tel quel, cela grise le prix qu'on veut mettre en avant et laisse le prix barre en noir plein : exactement l'inverse de ce qu'on cherche. On reprend donc la main sur les deux couleurs plutot que de renommer les classes, pour que le JS du theme continue de reconnaitre ses propres selecteurs. */ .product-prices .prod__price{ color:#000; font-weight:500; } .product-prices .prod__compare_price{ color:#8a8a8a; text-decoration:line-through; font-size:.875em; font-weight:400; margin-left:8px; } /* Sous 480px la carte est etroite : on resserre l'ecart plutot que de laisser le prix barre pousser le prix remise hors de la carte. */ @media (max-width:480px){ .product-prices{row-gap:2px} .product-prices .prod__compare_price{margin-left:6px} }