/* Tereso — layouts.css Stili dei 3 chassis intermedi (_layout_admin.html, _layout_app.html, _layout_cinema.html). Caricato dopo tokens.css e prima di components.css (vedi base.html). Scaffolding US-002 (#115): solo placeholder commentati, le regole reali atterrano in US-003+. */ /* ----------------------------------------------------------------------------- Breakpoint — definiti in :root come variabili nominative (US-017 [UI] #130). 3 fasce, allineate ai breakpoint del DS: - Mobile : <768px - Tablet : 768-1279px - Desktop : >=1280px I valori sono solo documentazione (le @media queries usano i numeri letterali perche' CSS non supporta var() dentro @media). Mantenuti qui come SSOT. */ :root { --bp-tablet: 768px; --bp-desktop: 1280px; } /* ----------------------------------------------------------------------------- Body shell — sfondo pagina per area utente - .shell-app -> sfondo paper-white per area utente standard (catalog, home, sessioni, certificati, quiz, hr dashboard, admin) - .shell-cinema -> sfondo cinema-black per pagine immersive (es. player pillola, hero episodio fullscreen) Le classi vengono applicate sul `` dai layout intermedi tramite `{% block body_class %}` di base.html. ----------------------------------------------------------------------------- */ /* .shell-app { } */ /* US-005 (#118): cinema shell — body nero full-viewport, logo wordmark centrato in alto, content centrato verticalmente/orizzontalmente. Usato dalle 4 pagine auth pre-login (login, reset_request, set_password, verify_error) e dal player pillola. */ .shell-cinema { min-height: 100vh; background: var(--bg-cinema); color: var(--fg-on-dark); display: flex; flex-direction: column; align-items: center; } .shell-cinema .cinema-header { padding-top: 96px; display: flex; justify-content: center; width: 100%; } .shell-cinema .cinema-wordmark { width: 200px; height: auto; /* L'asset wordmark e' su sfondo chiaro: invert per renderizzarlo bianco sopra il cinema-black senza richiedere un secondo file. */ filter: brightness(0) invert(1); } .shell-cinema .cinema-main { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-9) var(--space-5); } /* ----------------------------------------------------------------------------- Container — wrapper di contenuto principale Padding orizzontale desktop ~65px (token --space-*), si riduce su mobile. ----------------------------------------------------------------------------- */ /* .container { } */ /* ----------------------------------------------------------------------------- NavPill — posizionamento del menu pillola - sulle pagine con hero (es. dettaglio episodio): position absolute sovrapposta all'hero, sfondo trasparente fino allo scroll - sulle pagine senza hero (catalog list, sessioni, ecc.): position sticky in alto, sfondo paper-white Le regole estetiche del componente .nav-pill vivono in components.css; qui solo il *positioning* dipendente dal layout/chassis. ----------------------------------------------------------------------------- */ /* .layout-with-hero .nav-pill { position: absolute; } */ /* .layout-no-hero .nav-pill { position: sticky; } */ /* ----------------------------------------------------------------------------- Hero scrim — gradient di leggibilita' sopra l'hero immagine/video linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%, var(--tereso-paper) 100%) Garantisce contrasto del titolo bianco e fade verso il body paper. ----------------------------------------------------------------------------- */ /* .hero-scrim { } */ /* ----------------------------------------------------------------------------- Footer leggero — barra di chiusura pagina (legal links, copyright) Tipografia ridotta, padding verticale generoso, allineamento centrato. ----------------------------------------------------------------------------- */ /* .site-footer { } */ /* ----------------------------------------------------------------------------- .home-dashboard — pattern di pagina Home dipendente (US-006 [UI] #119) Pattern misto da Figma render-truth (audit visivo 2026-05-13): - Padding 72px lateral (= `.hero-episode__inner left:72`) per allineare hero content e dashboard elements a SX - Niente max-width: capsule, h2 e shelf occupano il content-box pieno (= viewport - 144), risultando molto larghi su viewport ampi - SearchBar override locale (sotto): centrata max 1080, più stretta degli altri elementi (pattern Figma esplicito) ----------------------------------------------------------------------------- */ .home-dashboard { padding: 0 72px var(--space-9); } /* ProgressCapsule: navy 1080x300 r:42 (var(--r-3xl), DS Figma render-truth), ombra DS, in-flow sotto l'hero centrata in `.home-dashboard` content-box. Stessa larghezza della SearchBar (anche `max-width 1080` centrata), pattern colonna stretta condivisa per i due elementi navy. Fallback width 100% sui viewport <1080. */ .home-progress-capsule { width: 100%; max-width: 1080px; height: 300px; border-radius: var(--r-3xl); background: var(--tereso-navy); box-shadow: var(--shadow-l); display: flex; align-items: center; padding: 0 110px; gap: var(--space-7); font-family: var(--font-sans); color: var(--fg-on-dark); margin: var(--space-11) auto 0; box-sizing: border-box; } /* Override scope-locale. - SearchBar (DRIFT-13): max-width 1080 centrata (pattern Figma render-truth — SearchBar visibilmente più stretta di capsule/shelf, NON allineata al bordo SX del content-box). - content-shelf (DRIFT-14): padding 0 per allineare le tile al bordo SX del content-box di `.home-dashboard` (regola base `.content-shelf` ha padding 40 72 0, invariata per altre pagine). - h2 + empty: padding 0 (ereditato), margin verticale dedicato. */ .home-dashboard .search-bar { max-width: 1080px; margin: var(--space-12) auto 0; } .home-dashboard .home-pillole__title { margin: var(--space-12) 0 var(--space-7); } .home-dashboard .home-pillole__empty { margin: var(--space-7) 0 0; color: var(--fg-3); text-align: center; } .home-dashboard .content-shelf { padding: 0; margin-top: var(--space-10); } .home-progress-capsule__title { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: var(--size-h2); line-height: 1.1; max-width: 320px; color: var(--fg-on-dark); } .home-progress-capsule__rings { display: flex; gap: var(--space-8); margin-left: auto; } /* Ring: SVG 110x110 (r=48 stroke 14) + label sopra + value centrato dentro. 2 varianti (orange/blue) — il colore della corona attiva, lo sfondo del track e il colore del testo seguono la palette DS. */ .home-progress-ring { text-align: center; color: var(--fg-on-dark); font-family: var(--font-sans); } .home-progress-ring__label { font-size: var(--size-caption); font-weight: 500; margin-bottom: var(--space-2); } .home-progress-ring__svg-wrap { position: relative; width: 110px; height: 110px; margin: 0 auto; } .home-progress-ring__svg { transform: rotate(-90deg); } .home-progress-ring__track { /* Track ring (sfondo): tono pastello variant-specifico. */ } .home-progress-ring__bar { /* Bar ring (corona attiva): colore brand variant-specifico, linecap round. */ } .home-progress-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Nunito, var(--font-sans), sans-serif; font-weight: 900; font-size: 22px; } .home-progress-ring--orange .home-progress-ring__track { stroke: var(--tereso-orange-soft); } .home-progress-ring--orange .home-progress-ring__bar { stroke: var(--tereso-orange); } .home-progress-ring--orange .home-progress-ring__value { color: var(--tereso-orange); } .home-progress-ring--blue .home-progress-ring__track { stroke: #C8D9EA; } .home-progress-ring--blue .home-progress-ring__bar { stroke: #65AAEF; } .home-progress-ring--blue .home-progress-ring__value { color: var(--fg-on-dark); } /* ----------------------------------------------------------------------------- .catalog-detail-header — pattern di pagina dettaglio categoria (US-008 [UI] issue #121). Header con strip top color-flag (h:8 categoria, riusa pattern `.category-card__strip` di components.css) + body con h1 + h3 description. Composizione di pagina (non componente riusabile): risiede qui in layouts.css coerente con `.home-dashboard` e `.catalog-header`. .catalog-breadcrumb e' un elemento testuale semplice (link separati da "/"): layout inline-flex con gap minimo, padding orizzontale allineato al resto della pagina. ----------------------------------------------------------------------------- */ .catalog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-6) 65px 0; color: var(--fg-2); } .catalog-breadcrumb a { color: var(--fg-2); text-decoration: none; } .catalog-breadcrumb a:hover { text-decoration: underline; } .catalog-detail-header { margin: var(--space-5) 65px var(--space-5); background: var(--tereso-paper-3); border-radius: var(--r-l); box-shadow: var(--shadow-card); overflow: hidden; } .catalog-detail-header__strip { display: block; height: 8px; width: 100%; background: var(--tereso-green); } .catalog-detail-header__body { padding: var(--space-7) var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .catalog-detail-header__intro { margin: 0; color: var(--fg-2); } /* ----------------------------------------------------------------------------- Responsive — pattern di pagina (US-017 [UI] #130). Tablet 768-1279: padding orizzontale ridotto a 48px sui pattern principali. Mobile <768 : padding orizzontale ridotto a 24px + ProgressCapsule collassata a stack column (titolo sopra, ring sotto), max-width 100%. ----------------------------------------------------------------------------- */ /* Tablet */ @media (max-width: 1279px) and (min-width: 768px) { .catalog-breadcrumb { padding: var(--space-6) 48px 0; } .catalog-detail-header { margin: var(--space-5) 48px var(--space-5); } .home-dashboard { padding: 0 48px var(--space-9); } .home-progress-capsule { width: 100%; max-width: 100%; height: 240px; border-radius: var(--r-2xl); padding: 0 48px; margin-top: var(--space-7); } } /* Mobile */ @media (max-width: 767px) { .catalog-breadcrumb { padding: var(--space-5) 24px 0; } .catalog-detail-header { margin: var(--space-5) 24px var(--space-5); } .home-dashboard { padding: 0 24px var(--space-9); } .home-progress-capsule { width: 100%; max-width: 100%; height: auto; border-radius: var(--r-xl); padding: var(--space-6); flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); margin-top: var(--space-6); } .home-progress-capsule__title { max-width: 100%; text-align: center; } .home-progress-capsule__rings { margin-left: 0; flex-direction: row; justify-content: center; gap: var(--space-6); } } /* ----------------------------------------------------------------------------- Cinema shell — auth pages (US-017 [UI] #130). Su mobile ridurre il padding verticale dell'header (96px e' troppo ingombrante su 812px viewport) e il padding orizzontale del main per dare piu' spazio alla card. ----------------------------------------------------------------------------- */ @media (max-width: 767px) { .shell-cinema .cinema-header { padding-top: var(--space-7); } .shell-cinema .cinema-main { padding: var(--space-6) var(--space-4); } }