/* ========================================================= Doposcuola — design tokens These custom properties are the source of truth for color, type and spacing. When this UI is ported to React/Flutter, this block maps directly onto a shared theme/tokens file. ========================================================= */ :root { --color-bg: #FBF7F0; --color-ink: #241F1A; --color-subtext: #6B5F52; --color-card-subtitle: #443C31; --color-surface: #FFFFFF; --color-hairline: rgba(36, 31, 26, 0.1); --color-cta-disabled-bg: #E7E0D6; --color-cta-disabled-text: #A89C8D; --topic-finance: #FFB066; --topic-law: #6FC3E8; --topic-soft: #FFD666; --topic-work: #B98CEE; --topic-mental: #93E2A8; --topic-tech: #6FE0D6; --topic-food: #FDA0C6; --topic-practical: #8FA3C7; --font-serif: 'Spectral', Georgia, serif; --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --radius-card: 20px; --radius-cta: 14px; --radius-check: 999px; --shadow-selected: 0 4px 14px rgba(36, 31, 26, 0.18); --shadow-cta-float: 0 10px 28px rgba(36, 31, 26, 0.14); --safe-bottom: env(safe-area-inset-bottom, 0px); /* CTA bar height is used to reserve scroll space below the card list so the last card is never hidden behind the fixed bar. */ --cta-bar-height: 84px; /* Bottom navigation bar (solo lettore, solo mobile — vedi .bottom-nav): stessa idea di --cta-bar-height, per riservare spazio di scroll sotto l'ultimo contenuto della lezione (quiz, bottone "completata") così non finisce coperto dalla barra fissa. */ --bottom-nav-height: 62px; /* Lesson reader — semantic colors (topic-independent) and a default accent (finance). The accent is overridden per lesson via an inline style on #lesson-view, so future topics reuse this same CSS. */ --lesson-accent: #C97A2E; --lesson-accent-soft: #FFE7CC; --lesson-accent-soft-line: #F0C795; --lesson-warn: #B34B3C; --lesson-warn-soft: #FBE4DE; --lesson-err: #A23E3E; --lesson-ok: #3E7A52; --lesson-ok-soft: #E1F0E4; /* Dimensione testo del lettore (controlli A-/A+, vedi changeTextScale() in app.js): moltiplica solo le dimensioni del testo di lettura vero e proprio (titolo, sottotitolo, paragrafi, callout, quiz, glossario) — non la UI di contorno (eyebrow, bottoni, badge). 1 = dimensione base. */ --text-scale: 1; } /* ========================================================= Dark mode — automatica (prefers-color-scheme) e manuale (classe .dark-theme su , gestita da toggleTheme() in app.js). :root:not(.light-theme) nella media query lascia comunque vincere una scelta manuale "chiaro" anche quando il sistema è in dark mode. Le variabili --topic-*/--lesson-accent* non cambiano qui: sono colori d'accento pensati per restare leggibili su entrambi gli sfondi. */ @media (prefers-color-scheme: dark) { :root:not(.light-theme) { --color-bg: #1B1815; --color-ink: #F3EDE4; --color-subtext: #B9AA98; --color-card-subtitle: #D8CBB9; --color-surface: #26221D; --color-hairline: rgba(255, 255, 255, 0.12); --color-cta-disabled-bg: #3A3229; --color-cta-disabled-text: #8A7C6C; --shadow-selected: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-cta-float: 0 10px 28px rgba(0, 0, 0, 0.5); --lesson-warn-soft: rgba(179, 75, 60, 0.22); --lesson-ok-soft: rgba(62, 122, 82, 0.24); --lesson-accent-soft: rgba(201, 122, 46, 0.22); --lesson-accent-soft-line: rgba(201, 122, 46, 0.45); } } :root.dark-theme { --color-bg: #1B1815; --color-ink: #F3EDE4; --color-subtext: #B9AA98; --color-card-subtitle: #D8CBB9; --color-surface: #26221D; --color-hairline: rgba(255, 255, 255, 0.12); --color-cta-disabled-bg: #3A3229; --color-cta-disabled-text: #8A7C6C; --shadow-selected: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-cta-float: 0 10px 28px rgba(0, 0, 0, 0.5); --lesson-warn-soft: rgba(179, 75, 60, 0.22); --lesson-ok-soft: rgba(62, 122, 82, 0.24); --lesson-accent-soft: rgba(201, 122, 46, 0.22); --lesson-accent-soft-line: rgba(201, 122, 46, 0.45); } /* ========================================================= Reset / base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background-color 150ms ease, color 150ms ease; } h1, p { margin: 0; } button { font: inherit; color: inherit; } /* Sprite SVG delle icone di area (Step 7, vedi index.html subito dopo ): l'attributo HTML "hidden" da solo NON nasconde un elemento — a differenza degli elementi HTML normali, l'SVG ha un proprio foglio di stile utente (UA) che non eredita la regola "[hidden] { display: none }" dell'HTML, quindi senza questa regola esplicita la sprite resterebbe un riquadro vuoto 300×150 in cima alla pagina (verificato: getComputedStyle restituiva display:"inline"). Stessa famiglia del bug SVG/hidden già noto in questo progetto (vedi ".theme-toggle-btn svg[hidden]" più sotto), qui in una forma diversa: lì l'attributo veniva impostato da JS e falliva per un motivo diverso (IDL .hidden assente su SVGElement); qui l'attributo è scritto correttamente e statico nell'HTML, ma è la regola CSS del browser a non applicarsi agli SVG — quindi la sprite va nascosta esplicitamente e sempre, non solo quando l'attributo [hidden] è presente. */ .icon-sprite { display: none; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-ink); color: var(--color-bg); padding: 12px 18px; border-radius: 0 0 10px 0; z-index: 100; } .skip-link:focus { left: 0; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= Touch & mobile ergonomics (apply everywhere — a desktop trackpad tap benefits from these too, and they cost nothing) ========================================================= */ .topic-card, .cta-bar__button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } /* ========================================================= Layout shell ========================================================= */ .page { max-width: 1120px; margin: 0 auto; padding: 28px 20px calc(var(--cta-bar-height) + 24px + var(--safe-bottom)); } .hero { padding: 8px 4px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero__eyebrow { font-weight: 800; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; opacity: 0.55; } .hero__kicker { font-family: var(--font-serif); font-style: normal; font-weight: 700; font-size: 23px; line-height: 1.3; color: var(--color-ink); max-width: 320px; margin: 14px 0 4px; text-wrap: balance; } .hero__title { font-family: var(--font-serif); font-weight: 600; font-size: 26px; line-height: 1.2; margin: 8px 0 8px; text-wrap: balance; } .hero__subtitle { font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--color-subtext); max-width: 40ch; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================= Barra di ricerca nella home — cerca su titolo/sottotitolo/ modulo/area di ogni lezione (tutte le aree) e apre quella scelta direttamente, senza passare dalla selezione argomenti. ========================================================= */ .hero__search { position: relative; width: 100%; max-width: 440px; margin: 22px 0 4px; } .search-box { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: 14px; padding: 4px 6px 4px 14px; transition: border-color 120ms ease, box-shadow 120ms ease; } .search-box:focus-within { border-color: var(--color-ink); box-shadow: var(--shadow-selected); } .search-box__icon { flex: none; display: flex; color: var(--color-subtext); opacity: 0.7; } .search-box__input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 14.5px; color: var(--color-ink); padding: 11px 0; } .search-box__input::placeholder { color: var(--color-subtext); opacity: 0.65; } .search-box__input:focus { outline: none; } .search-box__clear[hidden] { display: none; } .search-box__clear { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: var(--color-bg); color: var(--color-subtext); border-radius: 999px; font-size: 16px; line-height: 1; cursor: pointer; } .search-box__clear:hover { color: var(--color-ink); } .search-results[hidden] { display: none; } .search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 25; max-height: min(360px, calc(100vh - 200px)); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 14px; box-shadow: var(--shadow-cta-float); padding: 6px; text-align: left; } .search-results__item { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: none; font: inherit; text-align: left; padding: 10px 10px; border-radius: 10px; cursor: pointer; min-height: 44px; } .search-results__item:hover, .search-results__item.is-active { background: var(--color-bg); } .search-results__dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--dot-color, var(--color-ink)); margin-top: 2px; } .search-results__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .search-results__title { font-weight: 700; font-size: 13.5px; color: var(--color-ink); line-height: 1.35; } .search-results__meta { font-size: 11.5px; color: var(--color-subtext); opacity: 0.85; } .search-results__empty { font-size: 13px; color: var(--color-subtext); padding: 14px 12px; margin: 0; text-align: center; } /* ---- Filtri di ricerca avanzati ---------------------------------- Bottone "imbuto" dentro .search-box (stesso trattamento circolare di .search-box__clear) + pannello a comparsa in flusso normale, non position:absolute: quando si apre fa crescere .hero__search (il suo antenato position:relative), e #search-results — che si posiziona già a "top: 100%" di quell'antenato — scende di conseguenza da solo. */ .search-filters-toggle { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: var(--color-bg); color: var(--color-subtext); border-radius: 999px; cursor: pointer; } .search-filters-toggle:hover, .search-filters-toggle[aria-expanded="true"], .search-filters-toggle.is-active { color: var(--color-ink); } .search-filters-toggle__badge[hidden] { display: none; } .search-filters-toggle__badge { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--lesson-accent, #C97A2E); color: #FFFFFF; font-size: 9.5px; font-weight: 800; line-height: 1; } .search-filters-panel[hidden] { display: none; } .search-filters-panel { margin-top: 10px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; text-align: left; } .search-filters-panel__group { display: flex; flex-direction: column; gap: 8px; } .search-filters-panel__label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-subtext); opacity: 0.8; } .search-filters-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; } .search-filters-panel__chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--color-hairline); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; transition: border-color 120ms ease, background 120ms ease; } .search-filters-panel__chip:hover { border-color: var(--color-ink); } .search-filters-panel__chip.is-active { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); } .search-filters-panel__chip-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--dot-color, var(--color-ink)); } .search-filters-panel__reset[hidden] { display: none; } .search-filters-panel__reset { align-self: flex-start; border: none; background: none; color: var(--color-subtext); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 2px; } .search-filters-panel__reset:hover { color: var(--color-ink); } @media (min-width: 640px) { .hero__search { max-width: 520px; margin-top: 28px; } } /* ========================================================= "Le mie lezioni" — bottone in home + dialog con Recenti e Già affrontate (vedi renderMyLessons() in app.js). ========================================================= */ /* Contenitore di "Le mie lezioni" + "Accedi": stessa riga quando c'è spazio, a capo su schermi molto stretti — nessuno dei due bottoni ha bisogno di più spazio di quanto già abbia singolarmente. */ .hero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 18px; } .my-lessons-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; border: none; background: none; font: inherit; font-weight: 700; font-size: 12.5px; color: var(--color-subtext); cursor: pointer; padding: 8px 4px; min-height: 44px; } .my-lessons-btn:hover, .my-lessons-btn[aria-expanded="true"] { color: var(--color-ink); } .my-lessons-btn__icon { display: flex; opacity: 0.75; } /* #auth-btn riusa questa classe (stesso trattamento visivo) mentre auth.js lo nasconde/mostra via `hidden` — serve la stessa guardia già necessaria per .theme-toggle-btn/.cta-bar/.search-box__clear: `display: inline-flex` qui sopra vince altrimenti sull'attributo. */ .my-lessons-btn[hidden] { display: none; } .auth-btn__icon { font-size: 9px; opacity: 0.6; } .my-lessons[hidden] { display: none; } .my-lessons { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(36, 31, 26, 0.35); padding: 20px; } @media (min-width: 640px) { .my-lessons { align-items: center; } } .my-lessons__card { width: 100%; max-width: 420px; max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-cta-float); overflow: hidden; } .my-lessons__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 8px 12px 20px; border-bottom: 1px solid var(--color-hairline); } .my-lessons__title { font-family: var(--font-serif); font-weight: 700; font-size: 17px; } .my-lessons__close { display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-subtext); font-size: 18px; line-height: 1; padding: 10px; cursor: pointer; min-height: 44px; min-width: 44px; } .my-lessons__close:hover { color: var(--color-ink); } .my-lessons__body { overflow-y: auto; padding: 8px 12px 16px; } .my-lessons__body section:not(:first-child) { margin-top: 6px; } .my-lessons__section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-subtext); padding: 12px 8px 4px; } .my-lessons__list { text-align: left; } .my-lessons__empty { font-size: 13px; color: var(--color-subtext); padding: 8px 8px 14px; margin: 0; line-height: 1.5; } /* Streak di lettura — solo utenti con account cloud, vedi renderMyLessons(). Dalla Step 3 il contenitore ospita anche il calendario mensile (vedi .streak-calendar più sotto): la pillola di testo tiene lo stile che prima stava sul contenitore stesso, il contenitore è solo margine. */ .my-lessons__streak { margin: 0 12px 4px; } .my-lessons__streak-text { font-size: 12.5px; font-weight: 700; color: var(--lesson-accent, #C97A2E); background: var(--lesson-accent-soft, #FFE7CC); border-radius: 10px; padding: 9px 14px; margin: 0 0 10px; } /* ---- Calendario mensile dello streak ------------------------------ Griglia compatta 7 colonne (Lunedì-Domenica), giorno corrente cerchiato, giorni con almeno una lezione aperta colorati con l'accento — vedi buildStreakCalendarHtml() in app.js. */ .streak-calendar { padding: 2px 2px 4px; } .streak-calendar__month { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-subtext); margin: 0 0 8px; } .streak-calendar__weekdays, .streak-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .streak-calendar__weekdays { margin-bottom: 4px; } .streak-calendar__weekdays span { text-align: center; font-size: 10px; font-weight: 800; color: var(--color-subtext); opacity: 0.6; } .streak-calendar__day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--color-subtext); background: var(--color-bg); } .streak-calendar__day--empty { background: none; } .streak-calendar__day.is-active { background: var(--lesson-accent, #C97A2E); color: #FFFFFF; } .streak-calendar__day.is-today { box-shadow: 0 0 0 1.5px var(--lesson-accent, #C97A2E) inset; } .streak-calendar__day.is-today:not(.is-active) { color: var(--lesson-accent, #C97A2E); } /* ========================================================= Modale Accedi/Registrati (auth.js) — stesso pattern di dialog leggero di #my-lessons/#area-chooser: overlay fisso, card centrata su ≥640px, ancorata in basso su mobile. ========================================================= */ .auth-modal[hidden] { display: none; } .auth-modal { position: fixed; inset: 0; z-index: 65; display: flex; align-items: flex-end; justify-content: center; background: rgba(36, 31, 26, 0.4); padding: 20px; } @media (min-width: 640px) { .auth-modal { align-items: center; } } .auth-modal__card { width: 100%; max-width: 380px; max-height: min(620px, calc(100vh - 60px)); overflow-y: auto; background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-cta-float); } .auth-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 8px 8px 20px; } .auth-modal__title { font-family: var(--font-serif); font-weight: 700; font-size: 18px; } .auth-modal__close { display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-subtext); font-size: 18px; line-height: 1; padding: 10px; cursor: pointer; min-height: 44px; min-width: 44px; } .auth-modal__close:hover { color: var(--color-ink); } .auth-modal__tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--color-hairline); } .auth-modal__tab { flex: 1; border: none; background: none; font: inherit; font-weight: 700; font-size: 13px; color: var(--color-subtext); padding: 10px 4px 12px; cursor: pointer; border-bottom: 2px solid transparent; min-height: 44px; } .auth-modal__tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-ink); } .auth-modal__body { padding: 16px 20px 20px; } .auth-modal__msg { font-size: 12.5px; font-weight: 600; line-height: 1.5; background: var(--lesson-accent-soft, #FFE7CC); color: var(--color-ink); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; } .auth-modal__msg.is-error { background: var(--lesson-warn-soft, #FBE4DE); color: var(--lesson-warn, #B34B3C); } .auth-modal__form { display: flex; flex-direction: column; gap: 6px; } .auth-modal__label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-subtext); margin-top: 8px; } .auth-modal__input { font: inherit; font-size: 14px; color: var(--color-ink); background: var(--color-bg); border: 1.5px solid var(--color-hairline); border-radius: 10px; padding: 11px 12px; min-height: 44px; } .auth-modal__input:focus { outline: none; border-color: var(--color-ink); } .auth-modal__submit { margin-top: 14px; border: none; border-radius: var(--radius-cta, 14px); background: var(--color-ink); color: var(--color-bg); font-weight: 800; font-size: 14px; padding: 14px 0; cursor: pointer; min-height: 44px; } .auth-modal__submit:disabled { opacity: 0.6; cursor: default; } .auth-modal__linklike { display: block; width: 100%; border: none; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--lesson-accent, #C97A2E); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; padding: 12px 4px; min-height: 44px; text-align: center; } .auth-modal__divider { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; color: var(--color-subtext); font-size: 11px; font-weight: 700; text-transform: uppercase; } .auth-modal__divider::before, .auth-modal__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-hairline); } .auth-modal__google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 1.5px solid var(--color-hairline); background: var(--color-bg); color: var(--color-ink); font: inherit; font-weight: 700; font-size: 13.5px; border-radius: var(--radius-cta, 14px); padding: 12px 0; cursor: pointer; min-height: 44px; } .auth-modal__google:hover { border-color: var(--color-ink); } .auth-modal__fineprint { font-size: 11px; color: var(--color-subtext); line-height: 1.5; margin: 14px 0 0; text-align: center; } .auth-modal__terms { margin: 14px 0 0; } .auth-modal__terms-label { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--color-card-subtitle); cursor: pointer; } .auth-modal__terms-label input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--color-ink); } .auth-modal__terms-label a { color: var(--color-ink); } /* ========================================================= Footer del sito — solo i link legali (Step 9) + copyright. Vive dentro .page, che ha già un padding-bottom che tiene conto di --cta-bar-height, quindi non serve altra gestione per non finire sotto la barra fissa di selezione argomenti. ========================================================= */ .site-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-hairline); text-align: center; } .site-footer__links { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--color-subtext); margin: 0 0 6px; } .site-footer__links a { color: var(--color-subtext); text-decoration: underline; text-decoration-color: var(--color-hairline); } .site-footer__links a:hover { color: var(--color-ink); } .site-footer__copy { font-family: var(--font-sans); font-size: 11.5px; color: var(--color-subtext); opacity: 0.75; margin: 0; } /* ========================================================= Selettore tema chiaro/scuro — vedi toggleTheme() in app.js. Un'istanza fissa in alto a destra (sempre raggiungibile, home e lettore) più una copia compatta nella topbar del lettore; entrambe condividono la classe .theme-toggle-btn e restano sincronizzate da updateThemeToggleUI(). */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-hairline); background: var(--color-surface); color: var(--color-ink); border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-cta-float); transition: border-color 120ms ease, transform 120ms ease; } .theme-toggle-btn:hover { border-color: var(--lesson-accent, var(--color-ink)); } .theme-toggle-btn:active { transform: scale(0.92); } .theme-toggle-btn svg { display: block; } /* Bug reale (stesso pattern di Version 55): l'attributo [hidden] da solo perde contro ".theme-toggle-btn svg" per specificità CSS, quindi un'icona interna nascosta via JS (icona on/off del tema, play/pausa TTS, on/off modalità lettura) restava comunque visibile. Regola più specifica per correggerlo una volta per tutte. */ .theme-toggle-btn svg[hidden] { display: none; } .theme-toggle-btn[hidden] { display: none; } #theme-toggle-home { position: fixed; top: 14px; right: 14px; z-index: 70; } @media (min-width: 640px) { #theme-toggle-home { top: 20px; right: 20px; } } .theme-toggle-btn--compact { width: 36px; height: 36px; border: none; box-shadow: none; background: none; } /* ========================================================= Selettore dimensione testo (A- / A+) — vedi changeTextScale() in app.js. Vive nella topbar del lettore, accanto a Precedente/ Successiva: la dimensione riguarda solo il testo di lettura (title/subtitle/paragrafi/callout/quiz), non la UI di contorno. ========================================================= */ .text-size-group { display: flex; align-items: center; border: 1px solid var(--color-hairline); border-radius: 10px; overflow: hidden; } .text-size-btn { display: flex; align-items: center; justify-content: center; width: 36px; min-height: 44px; border: none; background: var(--color-surface); color: var(--color-ink); font: inherit; font-weight: 800; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .text-size-btn:first-child { font-size: 11px; border-right: 1px solid var(--color-hairline); } .text-size-btn:last-child { font-size: 15px; } .text-size-btn:hover:not(:disabled) { background: var(--color-bg); } .text-size-btn:disabled { color: var(--color-cta-disabled-text); cursor: default; } /* ========================================================= Topic grid — mobile-first: single column stack (<640px) ========================================================= */ .topics-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } /* ========================================================= Topic card — the one reusable "component". Rendered identically for all 7 topics by app.js; only the per-topic content and --card-bg custom property change. Ports 1:1 to a TopicCard component with props {title, description, icon, color, isSelected, onClick}. ========================================================= */ .topic-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon text check"; align-items: center; column-gap: 13px; width: 100%; padding: 14px 15px; border-radius: var(--radius-card); background: var(--card-bg); border: 2px solid transparent; box-shadow: none; cursor: pointer; text-align: left; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; min-height: 44px; /* tap-target floor */ } /* Micro-interazione al passaggio del mouse — solo su dispositivi con hover reale (desktop), mai su touch, dove :hover resterebbe "appiccicato" dopo il tocco. */ @media (hover: hover) { .topic-card:hover { transform: translateY(-2px); } } .topic-card__icon { grid-area: icon; } .topic-card__text { grid-area: text; } .topic-card__check { grid-area: check; } .topic-card.is-selected { border-color: var(--color-ink); box-shadow: var(--shadow-selected); } .topic-card:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; } .topic-card__icon { flex: none; width: 27px; height: 27px; color: var(--color-ink); display: flex; align-items: center; justify-content: center; } .topic-card__icon svg { display: block; } .topic-card__text { flex: 1; min-width: 0; } .topic-card__title { display: block; font-weight: 800; font-size: 14.5px; line-height: 1.25; color: var(--color-ink); } .topic-card__subtitle { display: block; font-weight: 500; font-size: 11.5px; line-height: 1.4; color: var(--color-card-subtitle); opacity: 0.75; margin-top: 2px; } /* Piccolo conta-lezioni per area: quante lezioni sono state marcate come completate rispetto al totale (vedi renderTopicCard() in app.js). */ .topic-card__progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .topic-card__progress-track { flex: 1; max-width: 90px; height: 4px; border-radius: 999px; background: rgba(36, 31, 26, 0.14); overflow: hidden; } .topic-card__progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-ink); opacity: 0.55; } .topic-card__progress-label { flex: none; font-size: 10.5px; font-weight: 700; color: var(--color-card-subtitle); opacity: 0.7; } .topic-card__check { flex: none; width: 25px; height: 25px; border-radius: var(--radius-check); border: 1.5px solid rgba(36, 31, 26, 0.35); background: rgba(255, 255, 255, 0.75); display: flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease; } .topic-card.is-selected .topic-card__check { background: var(--color-ink); border-color: var(--color-ink); } .topic-card__check svg { opacity: 0; transform: scale(0.6); transition: opacity 120ms ease, transform 120ms ease; } .topic-card.is-selected .topic-card__check svg { opacity: 1; transform: scale(1); } /* ========================================================= CTA bar — mobile & tablet default: fixed full-width bottom bar ========================================================= */ .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-bg); border-top: 1px solid var(--color-hairline); padding: 14px 20px calc(20px + var(--safe-bottom)); } .cta-bar[hidden] { display: none; } .cta-bar__count { font-size: 12px; font-weight: 600; color: var(--color-subtext); } .cta-bar__button { flex: 1; max-width: 190px; padding: 16px 0; border: none; border-radius: var(--radius-cta); background: var(--color-cta-disabled-bg); color: var(--color-cta-disabled-text); font-weight: 800; font-size: 14.5px; text-align: center; cursor: pointer; min-height: 44px; transition: background 120ms ease, color 120ms ease; } .cta-bar__button:not(.is-inactive) { background: var(--color-ink); color: var(--color-bg); } /* Non è mai `disabled` (vedi app.js): resta cliccabile anche "spento", così un tocco senza selezione dà sempre un feedback invece di restare muto. */ .cta-bar__button.is-inactive { background: var(--color-cta-disabled-bg); color: var(--color-cta-disabled-text); } @keyframes cta-nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .cta-bar.is-shaking { animation: cta-nudge 380ms ease; } /* ========================================================= Tablet: 640px–1023px — 2-column grid, CTA stays a full-width fixed bar but with more breathing room ========================================================= */ @media (min-width: 640px) { .page { padding-left: 40px; padding-right: 40px; } .hero__kicker { font-size: 29px; max-width: 460px; } .hero__title { font-size: 32px; } .hero__subtitle { font-size: 15.5px; max-width: 56ch; } .topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .topic-card { grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "icon check" "text text"; align-items: start; row-gap: 14px; column-gap: 0; padding: 20px; min-height: 140px; } .cta-bar { padding-left: 40px; padding-right: 40px; } .cta-bar__button { max-width: none; padding: 16px 32px; } } /* ========================================================= Desktop: ≥1024px — 3-column grid, floating CTA pill bottom-right instead of a fixed full-width bar ========================================================= */ @media (min-width: 1024px) { .page { padding-top: 56px; padding-bottom: 40px; /* CTA no longer reserves bar height — it floats */ } .hero { max-width: 620px; } .hero__kicker { font-size: 33px; max-width: 480px; } .hero__title { font-size: 36px; } .hero__subtitle { font-size: 16px; max-width: none; } .topics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 12px; } .topic-card { padding: 22px; min-height: 158px; } .cta-bar { position: fixed; left: auto; right: 40px; bottom: 36px; width: auto; background: var(--color-surface); border: none; border-radius: 18px; box-shadow: var(--shadow-cta-float); padding: 14px 16px 14px 22px; } .cta-bar__button { padding: 14px 26px; } } /* ========================================================= Toast — confirmation / nudge messages shown on "Continua" (still used as a placeholder for topics with no lessons yet) ========================================================= */ .toast { position: fixed; left: 50%; bottom: calc(var(--cta-bar-height) + 16px + var(--safe-bottom)); transform: translateX(-50%) translateY(10px) scale(0.97); max-width: min(420px, calc(100vw - 40px)); background: var(--color-ink); color: var(--color-bg); font-size: 13.5px; font-weight: 600; line-height: 1.4; padding: 14px 18px; border-radius: 14px; box-shadow: var(--shadow-cta-float); z-index: 30; text-align: center; opacity: 0; transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.4, 1); } /* Classe aggiunta/tolta da showToast()/hideToast() in app.js: [hidden] resta il modo in cui il toast esce dall'albero di accessibilità (tolto solo dopo la fine della transizione, vedi TOAST_TRANSITION_MS), mentre questa classe guida l'animazione di entrata/uscita vera e propria. */ .toast.toast--show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } @media (min-width: 1024px) { .toast { bottom: 112px; } } .toast[hidden] { display: none; } /* ========================================================= Lesson reader — shown instead of the home page once a topic with real content is opened. Same design tokens as the rest of the site; --lesson-accent/-soft/-soft-line are overridden inline per topic (see renderLessonView() in app.js) so every future area reuses this exact CSS with its own color. ========================================================= */ .lesson-view[hidden] { display: none; } .lesson-view__topbar { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; row-gap: 10px; background: var(--color-bg); border-bottom: 1px solid var(--color-hairline); padding: 14px 20px; } /* Dimensione testo + tema: sulla stessa riga di Precedente/Successiva su schermi larghi; va a capo su una riga propria sotto <640px, dove lo spazio della topbar è già occupato da "← Home"/"Lezione X di Y"/nav. */ .lesson-view__tools { display: flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .lesson-view__tools { flex-basis: 100%; justify-content: center; } } .lesson-view__back { display: flex; align-items: center; gap: 6px; border: none; background: none; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--color-ink); cursor: pointer; padding: 8px 4px; min-height: 44px; } .lesson-view__back:hover { color: var(--lesson-accent); } .lesson-view__progress { border: none; background: none; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--color-subtext); cursor: pointer; padding: 8px 6px; min-height: 44px; border-radius: 8px; display: flex; align-items: center; gap: 4px; } .lesson-view__progress:hover, .lesson-view__progress[aria-expanded="true"] { color: var(--lesson-accent); } .lesson-view__progress::after { content: "▾"; font-size: 10px; } /* ---- Indice delle lezioni -------------------------------- Pannello a comparsa dal bottone "Lezione X di Y": elenca tutte le lezioni dell'area, spunta quelle già viste, permette di saltare direttamente a una qualsiasi. Stesso trattamento visivo del popover del glossario (posizione fissa, ombra, transizione), per coerenza tra i due pannelli a comparsa del lettore. */ #lesson-index[hidden] { display: none; } #lesson-index { position: fixed; z-index: 40; min-width: 240px; max-width: min(320px, calc(100vw - 24px)); max-height: min(360px, calc(100vh - 100px)); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 12px; box-shadow: var(--shadow-cta-float); padding: 6px; } .lesson-index__item { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 13.5px; text-align: left; border: none; background: none; color: var(--color-ink); padding: 10px 10px; border-radius: 8px; cursor: pointer; min-height: 44px; } .lesson-index__item:hover { background: var(--color-bg); } .lesson-index__item.is-current { font-weight: 800; color: var(--lesson-accent); background: var(--lesson-accent-soft); } .lesson-index__check { flex: none; width: 16px; color: var(--lesson-ok); font-weight: 800; } /* Lucchetto per le lezioni oltre l'anteprima gratuita (vedi isLessonLocked() in app.js): stessa posizione dello spunta, colore neutro invece del verde "visitata" — non è un errore, è un confine di prodotto. */ .lesson-index__item.is-locked .lesson-index__label { color: var(--color-subtext); } /* Etichetta di gruppo tra filoni paralleli nella stessa area (es. "Finanza & Lavoro" = Il Mondo del Lavoro Dipendente + Lavoro Autonomo, P.IVA & Impresa). Solo testo, non interattiva: role="presentation" in app.js. */ .lesson-index__group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-subtext); padding: 10px 10px 4px; } .lesson-index__group:first-child { padding-top: 6px; } /* ---- Scelta area -------------------------------------------- Overlay leggero mostrato da "Continua" quando più aree selezionate hanno tutte contenuti: mai scegliere al posto dell'utente. */ .area-chooser[hidden] { display: none; } .area-chooser { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(36, 31, 26, 0.35); padding: 20px; } @media (min-width: 640px) { .area-chooser { align-items: center; } } .area-chooser__card { width: 100%; max-width: 360px; background: var(--color-surface); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-cta-float); } .area-chooser__title { font-family: var(--font-serif); font-weight: 700; font-size: 17px; margin: 0 0 12px; } .area-chooser__item { display: block; width: 100%; font: inherit; font-weight: 700; font-size: 14px; text-align: left; border: 1px solid var(--color-hairline); background: var(--color-bg); color: var(--color-ink); padding: 12px 14px; border-radius: 10px; cursor: pointer; min-height: 44px; margin-bottom: 8px; } .area-chooser__item:last-child { margin-bottom: 0; } .area-chooser__item:hover { border-color: var(--color-ink); } .lesson-view__nav { display: flex; gap: 8px; } .lesson-view__navbtn { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-hairline); background: var(--color-surface); color: var(--color-ink); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer; min-height: 44px; transition: border-color 120ms ease; } .lesson-view__navbtn:hover:not(:disabled) { border-color: var(--lesson-accent); } .lesson-view__navbtn:disabled { opacity: 0.35; cursor: default; } @media (max-width: 640px) { .lesson-view__topbar { padding: 12px 16px; } .lesson-view__navbtn span { display: none; } /* Spazio di scroll in più sotto l'ultimo contenuto della lezione (quiz, bottone "completata"), altrimenti finirebbe coperto dal bottom-nav fisso — vedi --bottom-nav-height e .bottom-nav sotto. */ .lesson { padding-bottom: calc(var(--bottom-nav-height) + 24px + var(--safe-bottom)); } } /* ---- Lesson article ------------------------------------- */ .lesson { max-width: 660px; margin: 0 auto; padding: 32px 22px 90px; } /* ---- Breadcrumb dinamiche --------------------------------------- Home › Area › (Filone) › Modulo, generata da insertBreadcrumb() in app.js e inserita come primo elemento di ogni lezione (bloccata o no) — prima ancora dell'eyebrow statica già presente nel testo, di cui è un complemento interattivo, non un doppione: l'eyebrow non cambia mai a seconda del filone, questa riga sì. */ .lesson-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 16px; font-size: 12px; } .lesson-breadcrumb__item { border: none; background: none; font: inherit; font-size: inherit; font-weight: 600; color: var(--color-subtext); cursor: pointer; padding: 2px 3px; border-radius: 4px; } .lesson-breadcrumb__item:hover { color: var(--lesson-accent); text-decoration: underline; } .lesson-breadcrumb__sep { color: var(--color-subtext); opacity: 0.5; font-size: 11px; } .lesson-breadcrumb__current { font-weight: 700; color: var(--lesson-accent); } .lesson .eyebrow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--lesson-accent); text-transform: uppercase; margin-bottom: 14px; } .lesson .eyebrow span:not(:last-child)::after { content: "→"; margin-left: 10px; color: var(--color-subtext); opacity: 0.5; font-weight: 500; } .lesson .title { font-family: var(--font-serif); font-weight: 700; font-size: calc(28px * var(--text-scale, 1)); line-height: 1.22; text-wrap: balance; margin: 0 0 10px; } .lesson .subtitle { font-family: var(--font-serif); font-style: italic; font-size: calc(15.5px * var(--text-scale, 1)); line-height: 1.55; color: var(--color-subtext); max-width: 52ch; margin: 0 0 20px; } /* ---- Tempo di lettura stimato ------------------------------- Inserito via JS subito dopo .subtitle (insertReadingTimeBadge() in app.js, per lezioni sbloccate E bloccate): parole del testo della lezione diviso ~200 parole/minuto, calcolato una volta in SEARCH_INDEX (vedi buildSearchIndex()) invece che a ogni render. */ .lesson-reading-time { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; font-size: 12px; font-weight: 700; color: var(--color-subtext); margin: 0 0 20px; } .lesson-reading-time__text { display: flex; align-items: center; gap: 5px; } /* Raggruppa i badge (freschezza + Free/Premium) a destra del tempo di lettura, con wrap indipendente dal testo a sinistra su schermi stretti (vedi .lesson-reading-time flex-wrap qui sopra) — vedi insertReadingTimeBadge() in app.js. */ .lesson-reading-time__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* ---- Micro-card "In sintesi" (Step 3) ----------------------------- Stesso pattern a tendina di .term-toggle/.term-panel più sotto (chiusa di default, icona che ruota) — vedi insertLessonSummary() in app.js. Estrae il "Riepilogo" già scritto in coda a ogni lezione invece di duplicarlo, quindi vive qui, appena sotto il tempo di lettura. */ .lesson-summary { margin: 0 0 20px; } .lesson-summary__toggle { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-weight: 700; font-size: 13px; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 10px; padding: 11px 13px; cursor: pointer; text-align: left; min-height: 44px; } .lesson-summary__toggle:hover { border-color: var(--lesson-accent); } .lesson-summary__count { font-size: 10.5px; font-weight: 800; color: var(--color-bg); background: var(--lesson-accent); border-radius: 999px; padding: 2px 7px; } .lesson-summary__icon { margin-left: auto; flex: none; color: var(--color-subtext); transition: transform 150ms ease; } .lesson-summary__toggle[aria-expanded="true"] .lesson-summary__icon { transform: rotate(180deg); } .lesson-summary__list[hidden] { display: none; } .lesson-summary__list { list-style: none; margin: 8px 0 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--lesson-accent-soft); border: 1px solid var(--lesson-accent-soft-line); border-radius: 10px; font-size: 13px; line-height: 1.55; } .lesson-summary__list li { display: flex; gap: 8px; } .lesson-summary__list li::before { content: "•"; color: var(--lesson-accent); font-weight: 800; flex: none; } .lesson .hint { font-size: 12.5px; color: var(--color-subtext); background: var(--color-surface); border: 1px dashed var(--color-hairline); border-radius: 10px; padding: 10px 12px; margin: 0 0 28px; } /* ---- Anteprima sfocata + Paywall ------------------------------ Mostrati al posto del contenuto completo per le lezioni oltre i primi 2 moduli di ciascuna area/filone, finché isPremiumUnlocked() è false (vedi isLessonLocked(), buildLockedLessonHtml() in app.js). Il testo sotto il blur è vero testo della lezione (selezionabile da chi disabilita il CSS), solo reso illeggibile visivamente — non un lorem ipsum finto. */ .content-preview-blur { position: relative; margin: 0 0 4px; max-height: 4.6em; overflow: hidden; } .content-preview-blur p { filter: blur(5px); -webkit-user-select: none; user-select: none; line-height: 1.65; font-size: calc(15px * var(--text-scale, 1)); color: var(--color-ink); margin: 0; } .content-preview-blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--color-bg) 92%); } .paywall-card { margin: 18px 0 32px; padding: 22px 20px; text-align: center; background: var(--color-surface); border: 1px solid var(--lesson-accent-soft-line); border-radius: 16px; box-shadow: var(--shadow-cta-float); } .paywall-card__icon { font-size: 22px; margin: 0 0 8px; } .paywall-card__headline { font-family: var(--font-serif); font-weight: 700; font-size: 19px; line-height: 1.3; margin: 0 0 8px; text-wrap: balance; } .paywall-card__body { font-size: 13.5px; line-height: 1.55; color: var(--color-subtext); margin: 0 0 18px; } .paywall-card__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; padding: 14px 20px; border: none; border-radius: 12px; background: var(--lesson-accent); color: #FFFFFF; font: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; min-height: 44px; transition: filter 120ms ease, transform 120ms ease; } .paywall-card__cta:hover { filter: brightness(1.08); } .paywall-card__cta:active { transform: scale(0.98); } .paywall-card__benefits { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--color-hairline); display: flex; flex-direction: column; gap: 9px; text-align: left; } .paywall-card__benefits li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--color-ink); } .paywall-card__benefit-icon { flex: none; width: 18px; height: 18px; border-radius: 999px; background: var(--lesson-ok-soft); color: var(--lesson-ok); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* ---- "Cosa leggere per capire meglio l'argomento" -------------- Inserito via JS subito dopo .hint (vedi insertRecommendations() in app.js): 2-3 lezioni scelte per sovrapposizione di termini di glossario con quella aperta, anche di altre aree. */ .lesson .lesson-recs { margin: 0 0 32px; padding: 15px 16px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 12px; } .lesson .lesson-recs__heading { font-size: 12.5px; font-weight: 800; color: var(--color-subtext); margin: 0 0 10px; } .lesson .lesson-recs__list { display: flex; flex-direction: column; gap: 8px; } .lesson .lesson-recs__item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; border: 1px solid var(--color-hairline); border-left: 3px solid var(--rec-accent, var(--lesson-accent)); background: var(--color-bg); border-radius: 4px 10px 10px 4px; padding: 9px 12px; cursor: pointer; min-height: 44px; justify-content: center; transition: border-color 120ms ease, background 120ms ease; } .lesson .lesson-recs__item:hover { background: var(--lesson-accent-soft); } .lesson .lesson-recs__area { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--rec-accent, var(--lesson-accent)); } .lesson .lesson-recs__title { font-size: 13.5px; font-weight: 700; color: var(--color-ink); line-height: 1.4; } /* ---- Segna come completata --------------------------------- Bottone in fondo alla lezione (inserito via insertCompletionToggle() in app.js, dopo quiz/riepilogo/fonti): stato esplicito e reversibile, distinto da `visited` (marcato in automatico all'apertura). È la fonte usata dal conta-lezioni delle card in home e da "Le mie lezioni". */ .lesson .lesson-complete { margin: 32px 0 0; } .lesson .lesson-complete__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font: inherit; font-weight: 700; font-size: 13.5px; text-align: center; color: var(--color-ink); background: var(--color-surface); border: 1.5px dashed var(--color-hairline); border-radius: 12px; padding: 14px 16px; cursor: pointer; min-height: 44px; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; } .lesson .lesson-complete__btn:hover { border-color: var(--lesson-accent); } .lesson .lesson-complete__check { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--color-hairline); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: transparent; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .lesson .lesson-complete__btn.is-done { border-style: solid; border-color: var(--lesson-ok); background: var(--lesson-ok-soft); color: var(--lesson-ok); } .lesson .lesson-complete__btn.is-done .lesson-complete__check { background: var(--lesson-ok); border-color: var(--lesson-ok); color: #fff; } /* Micro-animazione al click (vedi il listener su #lesson-complete-btn in app.js: aggiunge .is-animating e la toglie a fine animazione, così può ripartire identica a ogni toggle, sia nel marcare sia nello smarcare). */ @media (prefers-reduced-motion: no-preference) { .lesson .lesson-complete__btn.is-animating { animation: lesson-complete-pulse 380ms ease; } .lesson .lesson-complete__btn.is-animating .lesson-complete__check { animation: lesson-complete-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1); } } @keyframes lesson-complete-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.015); } 100% { transform: scale(1); } } @keyframes lesson-complete-pop { 0% { transform: scale(0.6) rotate(-8deg); } 55% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1) rotate(0deg); } } .lesson section.step { margin: 0 0 32px; } .lesson section.step:last-of-type { margin-bottom: 0; } .lesson .step__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; } .lesson .step__num { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--lesson-accent); flex: none; } .lesson .step__title { font-family: var(--font-serif); font-weight: 600; font-size: calc(18px * var(--text-scale, 1)); line-height: 1.3; margin: 0; text-wrap: balance; } .lesson p { line-height: 1.65; font-size: calc(15px * var(--text-scale, 1)); margin: 0 0 14px; } .lesson p:last-child { margin-bottom: 0; } .lesson strong { font-weight: 700; } .lesson .callout { border-left: 3px solid var(--lesson-accent); background: var(--lesson-accent-soft); border-radius: 4px 10px 10px 4px; padding: 13px 15px; margin: 0 0 14px; font-size: calc(14px * var(--text-scale, 1)); line-height: 1.6; } .lesson .callout__label { font-weight: 800; letter-spacing: 0.2px; } .lesson .callout--warn { border-left-color: var(--lesson-warn); background: var(--lesson-warn-soft); } .lesson .errori { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .lesson .errori li { display: flex; gap: 10px; font-size: calc(14px * var(--text-scale, 1)); line-height: 1.6; padding: 11px 13px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 10px; } .lesson .errori li::before { content: "✕"; color: var(--lesson-err); font-weight: 800; flex: none; } .lesson .table-wrap { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--color-hairline); border-radius: 10px; } .lesson table { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--color-surface); } .lesson caption { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--color-subtext); padding: 10px 13px 0; } .lesson th, .lesson td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--color-hairline); vertical-align: top; } .lesson thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-subtext); font-weight: 700; } .lesson tbody tr:last-child td { border-bottom: none; } .lesson td { font-variant-numeric: tabular-nums; } .lesson button.term { font: inherit; color: var(--color-ink); background: none; border: none; padding: 0; cursor: pointer; font-weight: 700; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--lesson-accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; -webkit-tap-highlight-color: transparent; } .lesson button.term:hover, .lesson button.term:focus-visible { color: var(--lesson-accent); } .lesson button.term:focus-visible { outline: 2px solid var(--lesson-accent); outline-offset: 2px; border-radius: 2px; } #glossary-pop { position: fixed; max-width: 300px; background: var(--color-ink); color: var(--color-bg); font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow-cta-float); z-index: 50; opacity: 0; transform: translateY(4px) scale(0.98); pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; } #glossary-pop.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } #glossary-pop .pop__term { font-family: var(--font-serif); font-weight: 700; font-size: 13px; color: var(--lesson-accent); margin: 0 0 4px; } #glossary-pop .pop__close { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-bg); opacity: 0.6; font-size: 15px; line-height: 1; padding: 4px; cursor: pointer; } #glossary-pop .pop__close:hover { opacity: 1; } @media (max-width: 640px) { #glossary-pop { left: 12px !important; right: 12px; bottom: 14px !important; top: auto !important; max-width: none; transform: translateY(100%); } #glossary-pop.is-open { transform: translateY(0); } } .lesson .esercizio { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 12px; padding: 15px 17px; } .lesson .esercizio .extra { color: var(--color-subtext); font-style: italic; font-size: 13px; margin-top: 10px; } .lesson .quiz { display: flex; flex-direction: column; gap: 18px; } .lesson .question { border: 1px solid var(--color-hairline); border-radius: 12px; padding: 15px 15px 13px; background: var(--color-surface); } .lesson .question__text { font-weight: 700; font-size: calc(14.5px * var(--text-scale, 1)); margin: 0 0 12px; line-height: 1.45; } .lesson .options { display: flex; flex-direction: column; gap: 8px; } .lesson .option { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%; font: inherit; font-size: calc(13.5px * var(--text-scale, 1)); line-height: 1.45; padding: 10px 12px; border: 1px solid var(--color-hairline); border-radius: 9px; background: var(--color-bg); color: var(--color-ink); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .lesson .option:hover:not(:disabled) { border-color: var(--lesson-accent); } .lesson .option:disabled { cursor: default; } .lesson .option__letter { flex: none; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--color-hairline); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--color-subtext); } .lesson .option.is-correct { border-color: var(--lesson-ok); background: var(--lesson-ok-soft); } .lesson .option.is-correct .option__letter { border-color: var(--lesson-ok); background: var(--lesson-ok); color: #fff; } .lesson .option.is-wrong { border-color: var(--lesson-err); } .lesson .option.is-wrong .option__letter { border-color: var(--lesson-err); background: var(--lesson-err); color: #fff; } /* Step 6: l'icona è un secondo canale oltre al colore del bordo — chi non distingue verde/rosso vede comunque ✅/❌, non solo un bordo diverso (aria-hidden perché puramente ridondante: stato "disabled" + la spiegazione subito sotto bastano già a chi usa uno screen reader). */ .lesson .option__icon { margin-left: auto; flex: none; font-size: 15px; line-height: 1; padding-left: 8px; } .lesson .question__explain { margin-top: 10px; font-size: calc(13px * var(--text-scale, 1)); line-height: 1.55; color: var(--color-subtext); display: none; } .lesson .question.is-answered .question__explain { display: block; } /* Bottone "leggero" per azzerare le risposte salvate di questo quiz e riprovare — testo sottolineato invece di un bottone pieno, per restare secondario rispetto a "Segna come completata". */ .lesson .quiz-retry { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--lesson-accent); background: none; border: none; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; } .lesson .quiz-retry:hover { opacity: 0.75; } /* Badge "Quiz superato" (>=70% di risposte corrette): stessa palette verde di .lesson-complete__btn.is-done, coerente visivamente con "completata". */ .lesson .quiz-status-badge { display: flex; align-items: center; gap: 10px; margin: 32px 0 0; padding: 12px 16px; border: 1.5px solid var(--lesson-ok); border-radius: 12px; background: var(--lesson-ok-soft); color: var(--lesson-ok); font-weight: 700; font-size: 13.5px; } .lesson .quiz-status-badge__icon { flex: none; font-size: 16px; } .lesson .quiz-status-badge + .lesson-complete { margin-top: 12px; } .lesson .riepilogo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .lesson .riepilogo li { display: flex; gap: 10px; font-size: calc(14.5px * var(--text-scale, 1)); line-height: 1.55; padding: 11px 13px; background: var(--lesson-accent-soft); border: 1px solid var(--lesson-accent-soft-line); border-radius: 10px; } .lesson .riepilogo li::before { content: "✓"; color: var(--lesson-accent); font-weight: 800; flex: none; } .lesson hr.div { border: none; border-top: 1px solid var(--color-hairline); margin: 30px 0; } .lesson .sources { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--color-subtext); line-height: 1.8; } .lesson .sources a { color: var(--color-subtext); } .lesson .sources a:hover { color: var(--lesson-accent); } /* ---- Termine tecnico: tendina + accordio ----------------- Il punto 4 di ogni lezione elenca ogni termine di gergo usato (non solo 2-3 principali): per non stare "in mezzo" al testo, sta chiuso di default dentro un'unica tendina (.term-toggle), e ogni termine al suo interno è un mini-accordio (.term-item): un click sulla parola mostra subito la sua definizione, senza aprire tutte le altre. */ .lesson .term-toggle-wrap { margin: 0 0 14px; } .lesson .term-toggle { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--lesson-accent); background: var(--lesson-accent-soft); border: 1px solid var(--lesson-accent-soft-line); border-radius: 10px; padding: 12px 14px; cursor: pointer; text-align: left; min-height: 44px; } .lesson .term-toggle__count { font-size: 11px; font-weight: 800; color: var(--color-bg); background: var(--lesson-accent); border-radius: 999px; padding: 2px 8px; margin-left: auto; } .lesson .term-toggle__icon { flex: none; transition: transform 150ms ease; } .lesson .term-toggle[aria-expanded="true"] .term-toggle__icon { transform: rotate(180deg); } .lesson .term-panel[hidden] { display: none; } .lesson .term-panel { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .lesson .term-item { border: 1px solid var(--color-hairline); border-radius: 10px; background: var(--color-surface); overflow: hidden; } .lesson .term-item__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font: inherit; font-family: var(--font-serif); font-weight: 700; font-size: 14px; color: var(--color-ink); background: none; border: none; text-align: left; padding: 11px 13px; cursor: pointer; min-height: 44px; } .lesson .term-item__q::after { content: "+"; flex: none; color: var(--lesson-accent); font-weight: 800; font-size: 16px; line-height: 1; } .lesson .term-item__q[aria-expanded="true"]::after { content: "–"; } .lesson .term-item__a[hidden] { display: none; } .lesson .term-item__a { padding: 0 13px 13px; font-size: calc(13px * var(--text-scale, 1)); line-height: 1.55; color: var(--color-subtext); } /* ========================================================= PWA — banner "Installa app" e "Nuova versione disponibile" (vedi initInstallPrompt()/initServiceWorker() in app.js). Stessa forma per entrambi (.pwa-banner), una striscia sottile in cima alla pagina, sempre dismissibile e mai invadente: niente overlay/blocco dell'interfaccia sottostante, a differenza dei dialog (.my-lessons/.auth-modal). Vive a livello body come #auth-modal, quindi resta visibile sia in home sia nel lettore (dove .page è display:none). */ .pwa-banner[hidden] { display: none; } .pwa-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 45; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; background: var(--color-ink); color: var(--color-bg); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; font-size: 12.5px; box-shadow: var(--shadow-cta-float); } .pwa-banner--update { background: var(--lesson-accent); } /* Grigio/ardesia neutro, volutamente non rosso/arancio: "sei offline" non è un errore da correggere (il sito funziona comunque, è il punto del messaggio), quindi non merita un colore da allarme. */ .pwa-banner--offline { background: #4A5568; } .pwa-banner__text { margin: 0; font-weight: 600; line-height: 1.4; max-width: 52ch; text-align: center; } .pwa-banner__icon { width: 18px; height: 18px; flex: none; } .pwa-banner__actions { display: flex; align-items: center; gap: 6px; flex: none; } .pwa-banner__btn { border: none; border-radius: 10px; background: var(--color-bg); color: var(--color-ink); font: inherit; font-weight: 800; font-size: 12.5px; padding: 9px 14px; cursor: pointer; min-height: 36px; } .pwa-banner__btn:hover { opacity: 0.85; } .pwa-banner__dismiss { border: none; background: none; color: inherit; opacity: 0.75; font-size: 20px; line-height: 1; cursor: pointer; padding: 6px 8px; min-width: 36px; min-height: 36px; } .pwa-banner__dismiss:hover { opacity: 1; } /* Quando c'è un banner in cima, sposta giù il bottone tema (sempre fixed in alto a destra) invece di lasciarcelo sovrapposto sopra: la classe è aggiunta/tolta da updateBannerSpacing() in app.js ad ogni apertura/chiusura banner (non un semplice :has(), per funzionare anche sui browser che non lo supportano ancora). Il valore è pensato per il caso "due righe" (testo + bottoni a capo su schermi stretti): un margine leggermente abbondante su schermi larghi è meno grave di un bottone coperto su uno stretto. */ .has-pwa-banner #theme-toggle-home { margin-top: 64px; } /* ========================================================= Streak di lettura in header (vedi updateStreakBadgeUI() in app.js) — pillola sempre visibile accanto ad "Accedi"/"Le mie lezioni" invece di essere confinata dentro il pannello. Riusa --lesson-accent/-soft di default (definiti in :root, non solo dentro il lettore) così non serve una palette dedicata. ========================================================= */ .streak-badge[hidden] { display: none; } .streak-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 12px; border-radius: 999px; background: var(--lesson-accent-soft, #FFE7CC); color: var(--lesson-accent, #C97A2E); font-weight: 800; font-size: 12.5px; } .streak-badge__icon { font-size: 13px; } /* Streak "a rischio" (ultima lettura ieri, non oggi): un impulso discreto per attirare l'attenzione senza essere invadente — si neutralizza da solo per chi preferisce prefers-reduced-motion (vedi la regola globale in cima a questo file). */ @keyframes streak-risk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .streak-badge.is-at-risk { background: var(--lesson-warn-soft, #FBE4DE); color: var(--lesson-warn, #B34B3C); animation: streak-risk-pulse 1.6s ease-in-out infinite; } /* ========================================================= Footer del pannello "Le mie lezioni" — newsletter + gestione abbonamento (vedi index.html/app.js). ========================================================= */ .my-lessons__footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--color-hairline); } .my-lessons__footer-btn[hidden] { display: none; } .my-lessons__footer-btn { flex: 1; min-width: 140px; border: 1px solid var(--color-hairline); background: var(--color-bg); color: var(--color-subtext); font: inherit; font-weight: 700; font-size: 12px; border-radius: 10px; padding: 10px 10px; cursor: pointer; min-height: 40px; } .my-lessons__footer-btn:hover { color: var(--color-ink); border-color: var(--color-ink); } /* Righe "attestati guadagnati" — stessa forma di .search-results__item (icona + testo, hover), classe dedicata solo per il trofeo a sinistra. */ .my-lessons__cert-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--color-ink); text-align: left; padding: 10px 10px; border-radius: 10px; cursor: pointer; min-height: 44px; } .my-lessons__cert-item:hover { background: var(--color-bg); } .my-lessons__cert-icon { flex: none; font-size: 15px; } /* ========================================================= Modale attestato di completamento (vedi gamification.js) — estende .auth-modal con una card leggermente più larga per ospitare l'anteprima dell'immagine. ========================================================= */ .certificate-modal__card { max-width: 440px; } .certificate-modal__preview { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--color-hairline); box-shadow: var(--shadow-cta-float); margin: 0 0 16px; background: var(--color-bg); } .certificate-modal__name-row { display: flex; gap: 8px; align-items: flex-end; } .certificate-modal__name-row .auth-modal__input { flex: 1; } .certificate-modal__regen-btn { flex: none; border: 1.5px solid var(--color-hairline); background: var(--color-bg); color: var(--color-ink); font: inherit; font-weight: 700; font-size: 12.5px; border-radius: 10px; padding: 0 14px; min-height: 44px; cursor: pointer; } .certificate-modal__regen-btn:hover { border-color: var(--color-ink); } .certificate-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .certificate-modal__action[hidden] { display: none; } .certificate-modal__action { flex: 1; min-width: 130px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--color-hairline); background: var(--color-bg); color: var(--color-ink); font: inherit; font-weight: 700; font-size: 12.5px; border-radius: 10px; padding: 12px 10px; min-height: 44px; cursor: pointer; text-decoration: none; text-align: center; } .certificate-modal__action:hover { border-color: var(--color-ink); } .certificate-modal__action--primary { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); } .certificate-modal__action--primary:hover { filter: brightness(1.1); } /* ========================================================= Calcolatori interattivi dentro le lezioni (calculators.js) ========================================================= */ .calc-card { background: var(--color-surface); border: 1px solid var(--lesson-accent-soft-line); border-radius: 14px; padding: 18px 18px 16px; } .calc-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 16px; margin: 0 0 6px; } .calc-card__note { font-size: 12px; line-height: 1.55; color: var(--color-subtext); margin: 0 0 16px; } .calc-card__row { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--color-subtext); margin-bottom: 12px; } .calc-card__input { font: inherit; font-size: 14px; font-weight: 600; color: var(--color-ink); background: var(--color-bg); border: 1.5px solid var(--color-hairline); border-radius: 10px; padding: 10px 12px; min-height: 44px; } .calc-card__input:focus { outline: none; border-color: var(--lesson-accent); } .calc-card__result { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-hairline); } .calc-card__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .calc-card__stat-label { font-size: 12.5px; font-weight: 700; color: var(--color-subtext); } .calc-card__stat-value { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--lesson-accent); } .calc-card__breakdown { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--color-subtext); } /* ========================================================= Risorse scaricabili Premium dentro le lezioni (resources.js) ========================================================= */ .resource-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: 14px; padding: 18px; } .resource-card__icon, .resource-card__lock { font-size: 22px; margin: 0 0 4px; } .resource-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 15.5px; margin: 0; } .resource-card__desc { font-size: 13px; line-height: 1.55; color: var(--color-subtext); margin: 2px 0 12px; } .resource-card__tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #A9781C; background: #FBF0D6; border-radius: 999px; padding: 4px 10px; margin: 0 0 12px; } :root.dark-theme .resource-card__tag { color: #F3D98B; background: rgba(243, 217, 139, 0.16); } @media (prefers-color-scheme: dark) { :root:not(.light-theme) .resource-card__tag { color: #F3D98B; background: rgba(243, 217, 139, 0.16); } } .resource-card__download-btn, .resource-card__unlock-btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 12px; background: var(--color-ink); color: var(--color-bg); font: inherit; font-weight: 800; font-size: 13.5px; text-decoration: none; padding: 12px 20px; cursor: pointer; min-height: 44px; transition: filter 120ms ease; } .resource-card__download-btn:hover, .resource-card__unlock-btn:hover { filter: brightness(1.1); } /* Bottone audio-lettura (tts.js): stesso trattamento visivo degli altri bottoni compatti della topbar lettore, con uno stato "attivo" (in riproduzione o in pausa) evidenziato nel colore d'accento dell'area. */ .theme-toggle-btn--compact.is-active { color: var(--lesson-accent); border-color: var(--lesson-accent); } /* ========================================================= Bottom navigation bar — solo dentro il lettore di lezioni, solo a larghezza mobile (vedi @media sotto). Non esiste nessun'altra barra fissa in basso lì dentro (.cta-bar è nascosta durante la lettura), quindi zero rischio di sovrapposizione: mostrata/nascosta via l'attributo hidden da openLessons()/closeLessons() in app.js, la media query decide se e quando renderla visibile davvero. ========================================================= */ .bottom-nav[hidden] { display: none; } .bottom-nav { display: none; } @media (max-width: 640px) { .bottom-nav:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: stretch; justify-content: space-around; background: var(--color-bg); border-top: 1px solid var(--color-hairline); padding: 6px 6px calc(6px + var(--safe-bottom)); } } .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: none; color: var(--color-subtext); cursor: pointer; padding: 6px 2px; border-radius: 10px; min-height: 48px; } .bottom-nav__item:hover, .bottom-nav__item:active { color: var(--color-ink); background: var(--color-hairline); } .bottom-nav__icon { display: flex; } .bottom-nav__label { font-size: 10.5px; font-weight: 700; } /* ========================================================= Distinzione visiva Free/Premium (Step 3) — vedi tierBadgeHtml() in app.js. Stessa coppia di colori già validata per .resource-card__tag (oro/Premium, incluso dark mode), più una variante verde per "Gratis" sugli stessi due token semantici (--lesson-ok/--lesson-ok-soft) già usati da riepilogo/quiz corretto. Comparsa in 4 punti: header del lettore (accanto al tempo di lettura), indice lezioni, risultati di ricerca, "Le mie lezioni". ========================================================= */ .tier-badge { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .tier-badge--free { color: var(--lesson-ok); background: var(--lesson-ok-soft); } .tier-badge--premium { color: #A9781C; background: #FBF0D6; } :root.dark-theme .tier-badge--premium { color: #F3D98B; background: rgba(243, 217, 139, 0.16); } @media (prefers-color-scheme: dark) { :root:not(.light-theme) .tier-badge--premium { color: #F3D98B; background: rgba(243, 217, 139, 0.16); } } .tier-badge--compact { font-size: 9px; padding: 3px 8px; } /* Nell'indice lezioni e nelle righe di ricerca/"Le mie lezioni" il badge è l'ultimo figlio di un contenitore flex: lo spinge sempre a destra senza dover toccare il resto del layout, qualunque sia la lunghezza del titolo. */ .lesson-index__item .tier-badge, .search-results__item .tier-badge { margin-left: auto; } /* Badge "Aggiornato al 2026" (Step 4) — stessa forma a pillola di .tier-badge ma colore neutro (non verde/oro) per non essere scambiato per un indicatore Free/Premium: è solo un promemoria di freschezza dei contenuti, vive nella stessa riga del tempo di lettura — vedi insertReadingTimeBadge() in app.js. */ .updated-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.2px; border-radius: 999px; padding: 4px 10px; white-space: nowrap; color: var(--color-subtext); background: var(--color-hairline); } /* ========================================================= Modalità lettura senza distrazioni (Step 3) — vedi updateFocusModeUI()/#lesson-focus-btn in app.js. Nasconde solo la navigazione secondaria (breadcrumb, "Leggi anche", bottom-nav su mobile): resta tutto ciò che serve a leggere davvero (testo, quiz, Precedente/Successiva, dimensione testo, tema, completamento). ========================================================= */ .lesson-view.is-focus-mode .lesson-breadcrumb, .lesson-view.is-focus-mode .lesson-recs { display: none; } /* #bottom-nav è il fratello immediato di #lesson-view nel DOM (vedi index.html): il combinatore "+" evita di dover toccare bottomNav da JS solo per la modalità lettura, che già gestisce da sé il proprio attributo hidden in apertura/chiusura del lettore. */ .lesson-view.is-focus-mode + .bottom-nav { display: none !important; } /* ========================================================= Font per dislessia (Step 4) — vedi updateDyslexicFontUI()/ #lesson-dyslexic-btn in app.js. OpenDyslexic autoospitato in fonts/ (licenza libera, vedi sito-home-produzione.md): dichiarato con 4 @font-face (regular/bold/italic/bold-italic) così il browser sceglie da solo il file giusto in base a font-weight/font-style già presenti nel markup (es. , .subtitle in corsivo) — nessuna regola CSS aggiuntiva serve per quello. I file vengono scaricati dal browser solo quando il font è davvero applicato a testo a schermo (comportamento nativo di @font-face): se il toggle non è mai attivato, zero richieste di rete in più rispetto a prima di questo step. ========================================================= */ @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-BoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; } /* ".lesson" = #lesson-content (classe assegnata da renderLesson() in app.js): applicare a lui e a ogni discendente copre in un colpo solo titolo, sottotitolo, badge, "In sintesi", paragrafi, callout, liste, tabelle, quiz e bottone di completamento — tutto il contenuto di lettura, senza dover elencare ogni selettore separatamente e senza doverlo tenere allineato a ogni nuovo componente futuro della lezione. */ .lesson-view.is-dyslexic-font .lesson, .lesson-view.is-dyslexic-font .lesson * { font-family: 'OpenDyslexic', var(--font-sans); } /* Lo stato attivo (bordo/colore accento) arriva già gratis da ".theme-toggle-btn--compact.is-active", condivisa con TTS/focus. */ /* ========================================================= Tutor AI "Doposcuola Bot" (Step 5) — vedi ai-tutor-ui.js. ========================================================= */ /* ---- FAB (floating action button) --------------------------------- Fisso in basso a destra, solo dentro il lettore di lezioni (mostrato/ nascosto via JS, vedi syncFabVisibility() in ai-tutor-ui.js). Offset maggiore su mobile per restare sopra .bottom-nav (fissa anch'essa in basso, solo <640px, vedi la nota dedicata più sopra nel file). */ .tutor-fab[hidden] { display: none; } .tutor-fab { position: fixed; right: 16px; bottom: calc(72px + var(--safe-bottom)); z-index: 68; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--color-ink); color: var(--color-bg); box-shadow: var(--shadow-cta-float); cursor: pointer; } .tutor-fab:hover { filter: brightness(1.1); } @media (min-width: 640px) { .tutor-fab { right: 24px; bottom: 24px; } } .tutor-fab__badge[hidden] { display: none; } .tutor-fab__badge { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--lesson-warn, #B34B3C); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; } /* ---- Drawer di chat: estende .auth-modal (overlay + card) --------- */ .tutor-drawer { z-index: 72; align-items: flex-end; } @media (min-width: 640px) { .tutor-drawer { align-items: center; } } .tutor-drawer__card { max-width: 420px; max-height: min(680px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; /* lo scroll vive solo in .tutor-drawer__messages */ } .tutor-drawer__head { align-items: flex-start; } .tutor-drawer__head-actions { display: flex; gap: 2px; } .tutor-drawer__status { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--color-subtext); } .tutor-drawer__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-hairline); flex: none; } .tutor-drawer__status-dot.is-on { background: var(--lesson-ok, #3E7A52); } .tutor-drawer__status-dot.is-off { background: var(--lesson-warn, #B34B3C); } .tutor-drawer__messages { flex: 1; overflow-y: auto; padding: 4px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; } .tutor-msg { max-width: 88%; } .tutor-msg p { margin: 0 0 6px; line-height: 1.5; } .tutor-msg p:last-child { margin-bottom: 0; } .tutor-msg ul { margin: 0 0 6px; padding-left: 18px; } .tutor-msg ul:last-child { margin-bottom: 0; } .tutor-msg li { margin-bottom: 3px; line-height: 1.45; } .tutor-msg--user { align-self: flex-end; background: var(--color-ink); color: var(--color-bg); border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 13.5px; } .tutor-msg--bot { align-self: flex-start; background: var(--color-bg); border: 1px solid var(--color-hairline); border-radius: 14px 14px 14px 4px; padding: 10px 13px; font-size: 13.5px; } .tutor-msg--bot a { color: inherit; text-decoration-color: var(--color-subtext); } /* Avviso onesto (non configurato / errore) — deliberatamente diverso da una bolla di risposta vera del Tutor, mai un finto successo. */ .tutor-msg--notice { align-self: center; max-width: 100%; background: var(--lesson-accent-soft, #FFE7CC); color: var(--color-ink); border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 600; text-align: center; } .tutor-msg--notice-error { background: var(--lesson-warn-soft); color: var(--lesson-warn); } .tutor-msg__sources { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-hairline); } .tutor-msg__source-btn { text-align: left; border: 1px solid var(--color-hairline); background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 7px 10px; cursor: pointer; } .tutor-msg__source-btn:hover { border-color: var(--color-ink); } /* Indicatore di digitazione — tre puntini animati, rispetta prefers-reduced-motion (regola globale già in cima al file). */ .tutor-msg--typing { align-self: flex-start; display: flex; gap: 4px; background: var(--color-bg); border: 1px solid var(--color-hairline); border-radius: 14px 14px 14px 4px; padding: 12px 14px; } .tutor-msg--typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-subtext); animation: tutor-typing-bounce 1.1s ease-in-out infinite; } .tutor-msg--typing span:nth-child(2) { animation-delay: 0.15s; } .tutor-msg--typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes tutor-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tutor-msg--typing span { animation: none; opacity: 0.8; } } /* ---- Box di invito Premium (limite domande gratuite raggiunto) ---- */ .tutor-upgrade-box[hidden] { display: none; } .tutor-upgrade-box { margin: 4px 20px 16px; padding: 14px 16px; border-radius: 12px; background: var(--lesson-accent-soft, #FFE7CC); text-align: center; } .tutor-upgrade-box__title { margin: 0 0 4px; font-family: var(--font-serif); font-weight: 700; font-size: 14.5px; } .tutor-upgrade-box__desc { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--color-ink); } .tutor-upgrade-box .auth-modal__submit { margin-top: 0; } /* ---- Riga di input ------------------------------------------------- */ .tutor-drawer__form[hidden] { display: none; } .tutor-drawer__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--color-hairline); } .tutor-drawer__input { flex: 1; resize: none; font: inherit; font-size: 13.5px; color: var(--color-ink); background: var(--color-bg); border: 1.5px solid var(--color-hairline); border-radius: 14px; padding: 10px 13px; max-height: 108px; min-height: 44px; } .tutor-drawer__input:focus { outline: none; border-color: var(--color-ink); } .tutor-drawer__send { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--color-ink); color: var(--color-bg); font-size: 16px; cursor: pointer; } .tutor-drawer__send:disabled { opacity: 0.6; cursor: default; } /* ========================================================= Percorsi Personalizzati (Step 8, Parte 1) — vedi paths.js e renderPathsSection()/buildPathCardHtml() in app.js. Card a scroll orizzontale su mobile/tablet (lo spazio verticale è più prezioso lì, e la home è già lunga), a griglia su desktop (spazio orizzontale abbondante — uno scroll nascosto lì sarebbe solo scomodo da scoprire, non un vantaggio). L'intera sezione resta hidden via HTML se PATHS_DATA è vuoto (vedi index.html/app.js) — mai un titolo "Percorsi consigliati" sopra il vuoto. Posizionata sotto la griglia delle 8 aree (vedi index.html): il margine superiore è più ampio di quello inferiore proprio per staccarla visivamente dalla griglia di card che la precede, invece del piccolo margine "4px" pensato per quando stava subito sotto la ricerca in hero. ========================================================= */ .paths-section[hidden] { display: none; } .paths-section { margin: 32px 0 24px; } .paths-section__heading { font-family: var(--font-serif); font-weight: 700; font-size: 15px; margin: 0 0 10px; padding: 0 2px; } .paths-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -2px; -webkit-overflow-scrolling: touch; } /* Scrollbar sottile solo dove il browser la supporta (progressive enhancement — senza queste due regole l'area resta comunque scrollabile con la scrollbar di sistema). */ .paths-scroll::-webkit-scrollbar { height: 6px; } .paths-scroll::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 999px; } .path-card { flex: 0 0 236px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: var(--color-surface); border: 1.5px solid var(--color-hairline); border-radius: var(--radius-card); padding: 14px 15px; cursor: pointer; font: inherit; color: inherit; transition: border-color 120ms ease, transform 120ms ease; min-height: 44px; } @media (hover: hover) { .path-card:hover { border-color: var(--color-ink); transform: translateY(-2px); } } .path-card__icon { color: var(--color-ink); opacity: 0.85; } .path-card__icon svg { display: block; } .path-card__title { font-weight: 800; font-size: 14px; color: var(--color-ink); } .path-card__desc { font-size: 11.5px; line-height: 1.4; color: var(--color-subtext); opacity: 0.85; } /* Stesso identico trattamento visivo di .topic-card__progress-track/ -fill/-label (vedi più sopra) — un secondo blocco perché i Percorsi non condividono il markup delle topic-card, non perché lo stile debba differire. */ .path-card__progress { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; } .path-card__progress-track { flex: 1; height: 4px; border-radius: 999px; background: rgba(36, 31, 26, 0.14); overflow: hidden; } .path-card__progress-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-ink); opacity: 0.55; } .path-card__progress-label { flex: none; font-size: 10px; font-weight: 700; color: var(--color-subtext); opacity: 0.7; white-space: nowrap; } @media (min-width: 1024px) { /* Desktop: spazio orizzontale abbondante — niente scroll nascosto, le card vanno a capo come una piccola griglia. */ .paths-scroll { overflow-x: visible; flex-wrap: wrap; } .path-card { flex: 1 1 236px; } } /* ---- Dettaglio di un Percorso -------------------------------------- Condivide la "chrome" di dialog di .my-lessons (vedi index.html, #path-detail porta entrambe le classi), solo il contenuto interno è dedicato. Le righe riusano .search-results__text/__title/__meta (stesso stile di testo già validato per ricerca/"Le mie lezioni") con un numero di posizione al posto del pallino colorato per area — qui l'ordine conta più della provenienza. */ .path-detail__desc { font-size: 12.5px; line-height: 1.5; color: var(--color-subtext); padding: 10px 16px 0; margin: 0; } .path-detail__list { padding: 4px 0; } .path-detail__item { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: none; font: inherit; text-align: left; padding: 10px 10px; border-radius: 10px; cursor: pointer; min-height: 44px; } .path-detail__item:hover { background: var(--color-bg); } .path-detail__item-num { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-hairline); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--color-subtext); } .path-detail__item-num.is-done { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); } .path-detail__item .tier-badge { margin-left: auto; } /* "Inizia il percorso": variante piena (sfondo scuro/chiaro invertito) di .my-lessons__footer-btn, per distinguerla visivamente dalle azioni secondarie di quel footer altrove nel sito (es. "Iscriviti alla newsletter" in #my-lessons, sempre in stile outline). */ .my-lessons__footer-btn--primary { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); } .my-lessons__footer-btn--primary:hover { color: var(--color-bg); } /* ========================================================= Notifiche push — toggle di opt-in "Ricordami di leggere domani" (Step 8, Parte 2) — vedi push.js e renderMyLessons() in app.js. Vive dentro #my-lessons-streak, subito sotto il calendario mensile dello streak: un'azione di valore dichiarato ("mantieni lo streak"), non un permesso chiesto a freddo al caricamento della pagina. ========================================================= */ .push-optin-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; border: 1px solid var(--color-hairline); background: var(--color-bg); color: var(--color-subtext); font: inherit; font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 7px 12px; cursor: pointer; min-height: 32px; } .push-optin-btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); } .push-optin-btn:disabled { opacity: 0.6; cursor: default; } /* ========================================================= Pagine legali statiche (privacy.html, termini.html) — Step 9 "Prima di pubblicare". Pagine indipendenti da app.js/auth.js di proposito: devono restare leggibili/linkabili (footer, Google Play Console, checkbox di registrazione) anche se lo script principale fallisse a caricare, e non hanno bisogno di nessuna delle sue funzionalità interattive. Solo styles.css + prefers-color-scheme per il tema scuro (nessun toggle manuale qui: non vale la pena caricare app.js intero solo per quello su una pagina di testo). ========================================================= */ .legal-page { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; } .legal-page__back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: var(--color-subtext); text-decoration: none; margin-bottom: 20px; } .legal-page__back:hover { color: var(--color-ink); } .legal-page__eyebrow { font-family: var(--font-sans); font-weight: 800; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-subtext); margin: 0 0 6px; } .legal-page__title { font-family: var(--font-serif); font-size: clamp(28px, 5vw, 38px); line-height: 1.15; margin: 0 0 6px; color: var(--color-ink); } .legal-page__updated { font-family: var(--font-sans); font-size: 13px; color: var(--color-subtext); margin: 0 0 32px; } .legal-page__intro { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--color-card-subtitle); background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); padding: 16px 18px; margin: 0 0 32px; } .legal-page h2 { font-family: var(--font-serif); font-size: 21px; color: var(--color-ink); margin: 36px 0 12px; padding-top: 4px; border-top: 1px solid var(--color-hairline); } .legal-page h2:first-of-type { border-top: none; margin-top: 0; } .legal-page h3 { font-family: var(--font-sans); font-weight: 800; font-size: 14.5px; color: var(--color-ink); margin: 20px 0 8px; } .legal-page p, .legal-page li { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.7; color: var(--color-card-subtitle); margin: 0 0 12px; } .legal-page ul, .legal-page ol { margin: 0 0 16px; padding-left: 22px; } .legal-page li { margin-bottom: 6px; } .legal-page strong { color: var(--color-ink); } .legal-page a { color: var(--color-ink); text-decoration-color: var(--color-hairline); } .legal-page a:hover { text-decoration-color: var(--color-ink); } .legal-page table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-family: var(--font-sans); font-size: 13.5px; } .legal-page th, .legal-page td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-hairline); vertical-align: top; color: var(--color-card-subtitle); } .legal-page th { color: var(--color-ink); font-weight: 800; } .legal-page__footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-hairline); font-family: var(--font-sans); font-size: 13px; color: var(--color-subtext); } .legal-page__footer a { color: var(--color-subtext); }