/* ================================================================ MENU.CSS — pagine menu dei corsi (fdp.html, menu_algoritmi.html, Basi_dati.html) Richiede style.css (token) e brand.css (nav, reveal, footer). Il colore d'accento si sceglie con data-accent sul . ================================================================= */ body.page-menu { --accent: var(--c-fdp); --accent-rgb: var(--c-fdp-rgb); } body.page-menu[data-accent="asd"] { --accent: var(--c-asd); --accent-rgb: var(--c-asd-rgb); } body.page-menu[data-accent="bd"] { --accent: var(--c-bd); --accent-rgb: var(--c-bd-rgb); } /* L'alone principale dello sfondo prende il colore del corso */ body.page-menu .bg-decor { background: radial-gradient(620px 420px at 10% -4%, rgba(var(--accent-rgb), .18), transparent 70%), radial-gradient(540px 380px at 94% 10%, rgba(34, 197, 94, .11), transparent 70%); } .menu-main { max-width: 920px; margin: 0 auto; padding: 2em 1.5em 5em; } /* ---------------- Pulsante "Torna alla Home" ---------------- */ .back-link { display: inline-flex; align-items: center; gap: .5em; font-size: .9rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: .5em 1em .5em .8em; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-xs); transition: color .2s ease, border-color .2s ease, box-shadow .2s ease; } .back-link svg { width: 16px; height: 16px; transition: transform .25s ease; } .back-link:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); box-shadow: var(--shadow-sm); } .back-link:hover svg { transform: translateX(-3px); } /* ---------------- Intestazione del corso ---------------- */ .menu-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.6em; margin: 2.4em 0 2.8em; } .menu-badge { width: 84px; height: 84px; display: grid; place-items: center; color: #ffffff; border-radius: 24px; background: linear-gradient(145deg, rgba(var(--accent-rgb), .78), var(--accent)); box-shadow: 0 18px 36px -16px rgba(var(--accent-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .25); } .menu-badge svg { width: 38px; height: 38px; } .menu-header .eyebrow { margin-bottom: .9em; } body.page-menu .menu-header h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; color: var(--ink); margin: 0 0 .3em; } .menu-header p { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--muted); } /* ---------------- Elenco dei moduli ---------------- */ .module-list { display: flex; flex-direction: column; gap: 1em; } .module-card { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 1.3em; padding: 1.4em 1.6em; text-decoration: none; background: var(--paper-0); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* Filo verticale colorato che compare al passaggio */ .module-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), .3)); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; } .module-card:hover, .module-card:focus-visible { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .3); box-shadow: 0 20px 40px -22px rgba(var(--accent-rgb), .5); } .module-card:hover::before, .module-card:focus-visible::before { transform: scaleY(1); } .module-num { min-width: 2ch; font-family: var(--font-mono); font-size: .9rem; font-weight: 600; color: var(--subtle); transition: color .25s ease; } .module-card:hover .module-num { color: var(--accent); } .module-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .15); border-radius: 15px; transition: transform .3s ease, background-color .3s ease, color .3s ease; } .module-icon svg { width: 26px; height: 26px; } .module-card:hover .module-icon { color: #ffffff; background: var(--accent); transform: rotate(-5deg) scale(1.05); } body.page-menu .module-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); margin: 0 0 .3em; } .module-desc { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); } .module-go { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .08); border-radius: 50%; transition: transform .25s ease, background-color .25s ease, color .25s ease; } .module-go svg { width: 18px; height: 18px; } .module-card:hover .module-go { color: #ffffff; background: var(--accent); transform: translateX(3px); } /* ---------------- Suggerimento in fondo ---------------- */ .menu-tip { display: flex; align-items: flex-start; gap: .8em; margin: 2.2em 0 0; padding: 1em 1.2em; font-size: .92rem; line-height: 1.6; color: var(--muted); background: rgba(255, 255, 255, .6); border: 1px dashed var(--line-strong); border-radius: 14px; } .menu-tip svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .1em; color: var(--amber); } .menu-tip strong { color: var(--ink-soft); } /* ---------------- Responsive ---------------- */ @media (max-width: 640px) { .menu-main { padding: 1.4em 16px 3.5em; } .menu-header { grid-template-columns: 1fr; gap: 1.1em; margin: 1.8em 0 2em; } .menu-badge { width: 64px; height: 64px; border-radius: 19px; } .menu-badge svg { width: 30px; height: 30px; } .module-card { grid-template-columns: auto 1fr auto; gap: .9em; padding: 1.1em 1em 1.1em 1.1em; } .module-num { display: none; } .module-icon { width: 44px; height: 44px; border-radius: 12px; } .module-icon svg { width: 22px; height: 22px; } body.page-menu .module-title { font-size: 1.05rem; } .module-desc { font-size: .88rem; } .module-go { width: 34px; height: 34px; } } /* ================================================================ PAGINA RIPASSO + stato dei moduli ================================================================= */ .module-card.no-num { grid-template-columns: auto 1fr auto; } .ripasso-group { margin: 2em 0; } #ripresa { margin-top: 2.4em; } #ripresa .ripasso-titolo { margin-bottom: 1em; } body.page-menu .ripasso-titolo { display: flex; align-items: center; gap: .6em; margin: 0 0 .8em; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } body.page-menu .ripasso-titolo a { color: inherit; text-decoration: none; } body.page-menu .ripasso-titolo a:hover { color: var(--accent); } .pin-row { display: flex; align-items: center; gap: .8em; padding: .7em 1em; margin-bottom: .45em; text-decoration: none; background: var(--paper-0); border: 1px solid var(--line); border-left: 3px solid rgba(var(--accent-rgb), .45); border-radius: 11px; box-shadow: var(--shadow-xs); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .pin-row:hover { transform: translateX(3px); border-color: rgba(var(--accent-rgb), .4); border-left-color: var(--accent); box-shadow: var(--shadow-sm); } .pin-label { font-size: .96rem; color: var(--ink-soft); } .pin-when { margin-left: auto; font-family: var(--font-mono); font-size: .74rem; color: var(--subtle); } .pin-go { color: var(--accent); } .ripasso-azioni { margin: 1.6em 0 2.8em; } .ripasso-azioni button { cursor: pointer; font-family: inherit; } /* Etichette di stato sulle schede dei moduli */ .module-flags { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; } .mf { font-family: var(--font-mono); font-size: .68rem; padding: .2em .55em; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--paper); } .mf-seen { color: var(--accent); border-color: rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .07); } .mf-pins { color: #b45309; border-color: #fde68a; background: #fffbeb; }