@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&display=swap'); /* static/css/components.css Componenti condivisi desktop+mobile. Regole BASE per pattern HTML riusabili in tutto il sito, fuori da qualsiasi media query. Caricato in base.html.j2 SENZA attributo media (= tutti i viewport), dopo main.css e prima di mobile.css. Estensibile: aggiungi qui regole base di nuovi componenti condivisi. Override size-specific (mobile <768px) restano in mobile.css dentro @media. NOTA STORICA: queste regole erano scritte in mobile.css:1733-1758 "fuori da @media" come default per tutti i viewport, ma il file mobile.css ha media="(max-width: 767px)" sul , quindi a desktop NON veniva mai caricato. Spostandole qui (file caricato sempre) si rispetta l'intento originale dell'autore. Le righe in mobile.css restano come duplicato benigno (regole identiche). */ /* === CSS variables brand (globali) === Spostate da mobile.css :root: erano caricate solo <768px, ma sono usate anche da regole desktop-only (es. #mainNavigation .menu-item-season > a { color: var(--brand-coral) }). Servono globali. */ :root { --brand-red: #C0392B; --brand-coral: #D85A30; --brand-dark: #2C2C2C; --brand-text: #1a1a1a; --brand-muted: #666; --brand-bg: #ffffff; --brand-bg-soft:#faf7f3; --brand-border: #e8e4dd; } /* === Ingredienti di stagione (.l-mod-ingredient) === Pattern usato da: home, event body (layout='inline'), category/ region/event/ingredient sidebar (layout='grid'), ricetta sidebar (layout='grid'). Cerchio + label sotto, layout block. Mobile.css:1708 override width/height a 60×60 + font 11px dentro media query. */ .l-mod-ingredient .ingredient { display: block; text-align: center; } .l-mod-ingredient .img-circle { display: block !important; width: 80px; height: 80px; margin: 0 auto 4px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--brand-bg-soft, #f0f0f0); } .l-mod-ingredient .name { display: block; font-size: 13px; text-align: center; max-width: 100px; line-height: 1.2; margin: 0 auto; } .l-mod-ingredient .name a { color: var(--brand-text, #333); text-decoration: none; } /* === Bootstrap 3.0 grid xs (mobile) — necessario perche' bootstrap.min.css e main.css legacy sono caricati con media="(min-width: 768px)" e quindi NON forniscono `.col-xs-*` a mobile. Senza queste regole il markup
si rendererizza come
block (1 colonna stretchata). Valori copiati 1:1 da output/bundles/web/css/compiled/main.css. IMPORTANTE: regole wrappate in @media (max-width: 767px) altrimenti a desktop il `.col-xs-6 { width:50% }` di components.css (caricato dopo bootstrap.min.css nel cascade) batte il `.col-sm-4 { width:33.33% }` di Bootstrap per ordine cascade -> 2 colonne desktop invece di 3. */ @media (max-width: 767px) { .row { margin-left: 0; margin-right: 0; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { position: relative; min-height: 1px; padding-left: 0; padding-right: 0; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 { float: left; } .col-xs-1 { width: 8.333333333333332%; } .col-xs-2 { width: 16.666666666666664%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333333333%; } .col-xs-5 { width: 41.66666666666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.333333333333336%; } .col-xs-8 { width: 66.66666666666666%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333333334%; } .col-xs-11 { width: 91.66666666666666%; } .col-xs-12 { width: 100%; } } /* === Menu globale (drawer mobile + nav desktop) === Markup .menu-item è condiviso tra