/* ============================================================
FABIOLA ROMANO ACADEMY — Custom CSS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800;900&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
/* ============================================================
TOKENS — Scala Bianco/Nero + Font FRA
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
:root {
/* ── Colori principali ────────────────────── */
--fra-nero: #0a0a0a;
--fra-nero-soft: #1a1a1a;
--fra-grafite: #2e2e2e;
--fra-medio: #5a5a5a;
--fra-grigio: #8a8a8a;
--fra-grigio-lt: #c4c4c4;
--fra-border: #e4e4e4;
--fra-off: #f7f7f7;
--fra-grey: #f0f0f0;
--fra-white: #ffffff;
/* ── Accento (usato con parsimonia) ──────── */
--fra-accent: #0a0a0a;
--fra-accent-lt: #f0f0f0;
/* ── Alias semantici ─────────────────────── */
--fra-blu: var(--fra-nero);
--fra-blu-deep: var(--fra-nero-soft);
--fra-blu-mid: var(--fra-grafite);
--fra-blu-soft: var(--fra-grey);
--fra-giallo: var(--fra-white);
--fra-giallo-dk: var(--fra-grigio-lt);
--fra-cil: var(--fra-grafite);
--fra-cil-soft: var(--fra-grey);
--fra-text: var(--fra-nero);
--fra-text-2: var(--fra-grafite);
--fra-text-3: var(--fra-grigio);
/* ── Ombre ───────────────────────────────── */
--fra-sh1: 0 1px 4px rgba(0,0,0,.06);
--fra-sh2: 0 4px 20px rgba(0,0,0,.10);
--fra-sh3: 0 16px 48px rgba(0,0,0,.15);
/* ── Border radius ───────────────────────── */
--fra-r-sm: .25rem;
--fra-r-md: .375rem;
--fra-r-lg: .5rem;
--fra-r-xl: .75rem;
--fra-r-2xl: 1rem;
--fra-r-full: 9999px;
/* ── Font ────────────────────────────────── */
--fra-ft: 'League Spartan', sans-serif; /* titoli */
--fra-fb: 'Red Hat Display', sans-serif; /* testi */
/* ── Dimensioni testo ────────────────────── */
--fra-xs: clamp(.72rem, .68rem + .2vw, .82rem);
--fra-sm: clamp(.85rem, .80rem + .28vw, .98rem);
--fra-base: clamp(.98rem, .92rem + .28vw, 1.1rem);
--fra-lg: clamp(1.1rem, 1rem + .65vw, 1.45rem);
--fra-xl: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
--fra-2xl: clamp(1.9rem, 1rem + 3vw, 3.1rem);
/* ── Spaziatura ──────────────────────────── */
--fra-s1:.25rem; --fra-s2:.5rem; --fra-s3:.75rem; --fra-s4:1rem;
--fra-s5:1.25rem;--fra-s6:1.5rem; --fra-s8:2rem; --fra-s10:2.5rem;
--fra-s12:3rem; --fra-s16:4rem; --fra-s20:5rem;
--fra-wrap: 1060px;
--fra-ease: 200ms cubic-bezier(.16,1,.3,1);
}
/* ── Font weights ridotti ─────────────────────────────────── */
#fra-login-page h1,
#fra-dashboard h1,
#fra-single-course h1,
#fra-lesson h1,
.fra-hero__title,
.fsc-hero__title,
.fsl-lesson-title {
font-weight: 300 !important;
letter-spacing: -.015em;
}
#fra-dashboard h2,
#fra-single-course h2,
.fra-section-ttl,
.fsc-card-title,
.fra-card__title,
.fsl-sb-head {
font-weight: 500 !important;
}
.fra-eyebrow,
.fra-section-lbl,
.fsc-hero__cat,
.fsl-lesson-num,
.fra-card__cat {
font-weight: 500 !important;
letter-spacing: .06em;
}
/* Bottoni e label UI */
.fra-btn-login,
.fsc-btn-start,
.fra-card__cta,
.fsl-btn-complete,
.fra-header__nav-link,
.fra-header__username,
.fra-header__logout {
font-weight: 500 !important;
}
/* ============================================================
MODALE LOGOUT
============================================================ */
.fra-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .25s ease, visibility .25s ease;
}
.fra-modal.open {
opacity: 1; visibility: visible; pointer-events: auto;
}
.fra-modal__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.fra-modal__box {
position: relative; z-index: 1;
background: var(--fra-white);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-2xl);
padding: var(--fra-s8);
width: min(400px, calc(100vw - var(--fra-s8)));
box-shadow: var(--fra-sh3);
text-align: center;
transform: translateY(12px) scale(.97);
transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.fra-modal.open .fra-modal__box {
transform: translateY(0) scale(1);
}
.fra-modal__icon {
width: 52px; height: 52px; border-radius: 50%;
background: var(--fra-off); border: 1px solid var(--fra-border);
display: flex; align-items: center; justify-content: center;
color: var(--fra-grafite);
margin: 0 auto var(--fra-s5);
}
.fra-modal__title {
font-family: var(--fra-ft); font-size: var(--fra-lg);
font-weight: 600; color: var(--fra-nero);
margin: 0 0 var(--fra-s2); letter-spacing: -.015em;
}
.fra-modal__sub {
font-size: var(--fra-sm); color: var(--fra-grigio);
margin: 0 0 var(--fra-s6); line-height: 1.6;
}
.fra-modal__actions {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--fra-s3);
}
.fra-modal__btn {
padding: var(--fra-s3) var(--fra-s4);
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 500;
border-radius: var(--fra-r-lg); cursor: pointer;
text-decoration: none; text-align: center;
transition: background var(--fra-ease), box-shadow var(--fra-ease), transform var(--fra-ease);
border: none; display: inline-flex; align-items: center; justify-content: center;
}
.fra-modal__btn--cancel {
background: var(--fra-off); color: var(--fra-grafite);
border: 1.5px solid var(--fra-border);
}
.fra-modal__btn--cancel:hover {
background: var(--fra-grey);
border: 1.5px solid var(--fra-border) !important;
color: #666 !important;
}
.fra-modal__btn--confirm {
background: var(--fra-nero); color: var(--fra-white);
}
.fra-modal__btn--confirm:hover {
background: var(--fra-grafite);
box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.fra-modal__btn:active { transform: scale(.97); }
/* Stat numeri hero */
.fra-stat__num,
.fsc-sb-prog__num {
font-weight: 600 !important;
}
/* ── Overrides scala B/N ──────────────────────────────────── */
input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="reset"]:focus, input[type="search"]:focus, input[type="number"]:focus, textarea:focus, .wp-block-search__input:focus, [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus, .ast-mobile-popup-drawer.active .menu-toggle-close:focus, #ast-scroll-top:focus, #coupon_code:focus, #ast-coupon-code:focus {
border-style: none !important;
}
/* Header */
.fra-header {
background: var(--fra-nero) !important;
box-shadow: 0 1px 0 #333, 0 4px 20px rgba(0,0,0,.25) !important;
}
.fra-header__nav-link--active {
color: var(--fra-white) !important;
background: rgba(255,255,255,.1) !important;
}
.fra-header__login-btn,
.fra-btn-login,
.fsc-btn-start,
.fsl-btn-complete {
background: var(--fra-white) !important;
color: var(--fra-nero) !important;
border: 1.5px solid var(--fra-nero) !important;
}
.fra-btn-login:hover,
.fsc-btn-start:hover,
.fsl-btn-complete:hover {
background: var(--fra-grey) !important;
box-shadow: none !important;
}
/* Hero dashboard e corso */
.fra-hero,
.fsc-hero,
.fra-login-page,
body.page-template-home {
background: var(--fra-nero) !important;
}
.fra-hero__radial--tr,
.fra-hero__radial--bl,
.fsc-hero__radial--tr,
.fra-bg-radial--top,
.fra-bg-radial--bottom,
.lp-skeleton-animation {
display: none !important; /* rimuove i radiali colorati */
}
/* Barre progresso */
.fsc-prog-fill,
.fra-card__prog,
.fsc-sb-prog__fill,
.fsl-prog-fill {
background: var(--fra-accent-lt) !important;
}
/* Dot status */
.fra-dot--on { background: var(--fra-nero) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.1) !important; }
.fra-dot--ok { background: #555 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important; }
.fra-dot--new { background: var(--fra-grigio) !important;box-shadow: none !important; }
/* Badge */
.fra-badge--y { background: var(--fra-nero); color: var(--fra-white) !important; }
.fra-badge--g { background: var(--fra-grey); color: var(--fra-grafite) !important; border-color: var(--fra-border) !important; }
/* Topbar lezione */
.fsl-topbar {
background: var(--fra-nero) !important;
box-shadow: 0 1px 0 #333 !important;
}
/* Sidebar lezione attiva */
.fsl-sb-lesson--active {
background: var(--fra-grey) !important;
border-left: 3px solid var(--fra-nero) !important;
}
.fsl-sb-lesson--active .fsl-sb-lesson__num {
background: var(--fra-nero) !important;
color: var(--fra-white) !important;
}
.fsl-sb-head {
background: var(--fra-nero) !important;
}
/* Card hover */
.fra-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}
.fra-play-btn {
background: var(--fra-white) !important;
box-shadow: 0 0 0 10px rgba(255,255,255,.15) !important;
}
.fra-play-btn svg { color: var(--fra-nero) !important; fill: var(--fra-nero) !important; }
/* Done badge */
.fsl-done-badge {
color: var(--fra-grafite) !important;
background: var(--fra-grey) !important;
border-color: var(--fra-border) !important;
}
/* Login card */
body.page-template-home { background: var(--fra-nero-soft) !important; }
.fra-fgrp input:focus {
border-color: var(--fra-nero) !important;
box-shadow: 0 0 0 3px rgba(0,0,0,.07) !important;
}
/* Footer */
.fra-footer {
background: var(--fra-nero-soft) !important;
border-top: 1px solid #222 !important;
}
/* Completate — verde → grigio scuro */
.fsc-lesson--done .fsc-lesson__num,
.fsl-sb-lesson--done .fsl-sb-lesson__num {
background: var(--fra-grey) !important;
color: var(--fra-grafite) !important;
}
.fra-module__done,
.fsc-module__done { color: var(--fra-grafite) !important; }
.learn-press-breadcrumb {
display: none !important;
}
/* ============================================================
RESET SELETTIVO
============================================================ */
#fra-login-page *,
#fra-dashboard * {
box-sizing: border-box;
}
#fra-login-page,
#fra-dashboard {
width: 100% !important;
font-family: var(--fra-fb);
color: var(--fra-text);
-webkit-font-smoothing: antialiased;
}
#fra-login-page h1,
#fra-login-page h2,
#fra-login-page h3,
#fra-dashboard h1,
#fra-dashboard h2,
#fra-dashboard h3 {
font-family: var(--fra-ft);
line-height: 1.1;
}
#fra-login-page p,
#fra-dashboard p {
color: var(--fra-text-2);
}
/* Nasconde header/footer Astra nella pagina login */
body.page-template-home .site-header,
body.page-template-home .site-footer,
body.page-template-home footer.site-footer {
display: none !important;
}
body.page-template-home {
background: var(--fra-blu-deep) !important;
margin: 0 !important;
padding: 0 !important;
}
/* Rimuove padding Astra dal content wrapper nella login */
body.page-template-home .ast-container,
body.page-template-home #content,
body.page-template-home .entry-content,
body.page-template-home .ast-article-single,
body.page-template-home #primary {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
/* ============================================================
WRAP
============================================================ */
.fra-wrap {
max-width: var(--fra-wrap);
margin-inline: auto;
padding-inline: var(--fra-s6);
}
@media (max-width: 480px) {
.fra-wrap { padding-inline: var(--fra-s4); }
}
/* ============================================================
LOGIN PAGE
============================================================ */
#fra-login-page {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--fra-s8) var(--fra-s4);
background: var(--fra-blu-deep);
position: relative;
overflow: hidden;
width: 100%;
}
.fra-bg-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.fra-bg-radial {
position: absolute;
pointer-events: none;
border-radius: 50%;
}
.fra-bg-radial--top {
top: -160px; right: -160px;
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(250,240,45,.07), transparent 65%);
}
.fra-bg-radial--bottom {
bottom: -100px; left: -80px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(177,0,94,.09), transparent 65%);
}
.fra-login-box {
position: relative; z-index: 1;
width: 100%; max-width: 420px;
}
.fra-login-logo {
text-align: center;
margin-bottom: var(--fra-s10);
}
.fra-logo-img {
height: 40px; width: auto;
filter: brightness(0) invert(1);
margin: auto;
display: block;
}
.fra-logo-text {
font-family: var(--fra-ft);
font-weight: 900;
font-size: var(--fra-lg);
color: white;
letter-spacing: -.02em;
}
.fra-login-card {
background: var(--fra-white);
border-radius: var(--fra-r-2xl);
padding: clamp(var(--fra-s8), 5vw, var(--fra-s10))
clamp(var(--fra-s6), 5vw, var(--fra-s10));
box-shadow:
0 32px 96px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.05);
}
.fra-login-title {
font-size: var(--fra-xl);
font-weight: 800;
color: var(--fra-blu);
margin: 0 0 var(--fra-s2);
}
.fra-login-sub {
font-size: var(--fra-sm);
color: var(--fra-text-3);
margin: 0 0 var(--fra-s8);
}
.fra-fgrp { margin-bottom: var(--fra-s5); }
.fra-fgrp label {
display: block;
font-family: var(--fra-ft);
font-size: var(--fra-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--fra-blu);
margin-bottom: var(--fra-s2);
}
.fra-fgrp input {
width: 100%;
padding: var(--fra-s3) var(--fra-s4);
background: var(--fra-grey);
border: 1.5px solid transparent;
border-radius: var(--fra-r-lg);
font-family: var(--fra-fb);
font-size: var(--fra-base);
color: var(--fra-text);
outline: none;
transition:
border-color var(--fra-ease),
background var(--fra-ease),
box-shadow var(--fra-ease);
}
.fra-fgrp input:focus {
background: white;
border-color: var(--fra-blu);
box-shadow: 0 0 0 4px rgba(9,40,96,.08);
}
.fra-fgrp input::placeholder { color: var(--fra-text-3); }
.fra-login-err {
font-size: var(--fra-sm);
color: var(--fra-cil);
background: var(--fra-cil-soft);
border: 1px solid rgba(177,0,94,.18);
border-radius: var(--fra-r-lg);
padding: var(--fra-s3) var(--fra-s4);
margin-bottom: var(--fra-s5);
}
.fra-login-notice {
font-size: var(--fra-sm);
color: #16a34a;
background: rgba(34,160,90,.08);
border: 1px solid rgba(34,160,90,.18);
border-radius: var(--fra-r-lg);
padding: var(--fra-s3) var(--fra-s4);
margin-bottom: var(--fra-s5);
}
.fra-btn-login {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--fra-s2);
font-family: var(--fra-ft);
font-size: var(--fra-base);
font-weight: 700;
background: var(--fra-giallo);
color: var(--fra-blu);
border: none;
cursor: pointer;
border-radius: var(--fra-r-lg);
padding: var(--fra-s4);
margin-top: var(--fra-s2);
transition:
background var(--fra-ease),
box-shadow var(--fra-ease),
transform var(--fra-ease);
}
.fra-btn-login:hover {
background: var(--fra-giallo-dk);
box-shadow: 0 6px 20px rgba(250,240,45,.35);
}
.fra-btn-login:active { transform: scale(.97); }
.fra-login-support {
margin-top: var(--fra-s6);
text-align: center;
font-size: var(--fra-xs);
color: var(--fra-text-3);
}
.fra-login-support a {
color: var(--fra-cil);
text-decoration: none;
transition: opacity var(--fra-ease);
}
.fra-login-support a:hover { opacity: .75; }
/* ============================================================
HERO DASHBOARD
============================================================ */
.fra-hero {
background: var(--fra-blu);
padding: var(--fra-s12) 0 var(--fra-s16);
position: relative;
overflow: hidden;
}
.fra-hero__radial {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.fra-hero__radial--tr {
top: -120px; right: -80px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(250,240,45,.05), transparent 60%);
}
.fra-hero__radial--bl {
bottom: -80px; left: 25%;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(177,0,94,.07), transparent 60%);
}
.fra-hero__inner { position: relative; z-index: 1; }
.fra-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--fra-s3);
font-family: var(--fra-ft);
font-size: var(--fra-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(250,240,45,.8);
margin-bottom: var(--fra-s5);
}
.fra-eyebrow::before {
content: '';
display: block;
width: 28px; height: 2px;
background: var(--fra-giallo);
border-radius: var(--fra-r-full);
}
.fra-hero__title {
font-family: var(--fra-ft);
font-size: var(--fra-2xl);
font-weight: 300 !important;
color: var(--fra-white);
margin: 0 0 var(--fra-s3);
letter-spacing: -.02em;
}
.fra-hero__name { color: var(--fra-giallo); font-weight: 600; }
.fra-hero__sub {
font-size: var(--fra-base);
color: rgba(255,255,255,.6);
max-width: 50ch;
margin: 0;
}
.fra-stats {
display: flex;
flex-wrap: wrap;
gap: var(--fra-s6);
margin-top: var(--fra-s10);
padding-top: var(--fra-s8);
border-top: 1px solid rgba(255,255,255,.09);
}
.fra-stat { display: flex; align-items: center; gap: var(--fra-s3); }
.fra-stat__ico {
width: 44px; height: 44px;
border-radius: var(--fra-r-lg);
background: rgba(250,240,45,.1);
display: flex; align-items: center; justify-content: center;
color: var(--fra-giallo);
flex-shrink: 0;
}
.fra-stat__num {
font-family: var(--fra-ft);
font-size: var(--fra-lg);
font-weight: 900;
color: var(--fra-white);
line-height: 1;
}
.fra-stat__lbl {
font-size: var(--fra-xs);
color: rgba(255,255,255,.5);
margin-top: 2px;
}
/* ============================================================
SEZIONE CORSI
============================================================ */
.fra-courses-section {
padding: var(--fra-s12) 0 var(--fra-s20);
background: var(--fra-off);
}
.fra-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--fra-s4);
margin-bottom: var(--fra-s8);
}
.fra-section-lbl {
font-family: var(--fra-ft);
font-size: var(--fra-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--fra-cil);
margin-bottom: var(--fra-s2);
}
.fra-section-ttl {
font-family: var(--fra-ft);
font-size: var(--fra-xl);
font-weight: 800;
color: var(--fra-blu);
margin: 0;
}
.fra-section-count {
font-family: var(--fra-ft);
font-size: var(--fra-sm);
font-weight: 600;
color: var(--fra-text-3);
white-space: nowrap;
}
/* GRID */
.fra-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--fra-s6);
}
@media (max-width: 840px) {
.fra-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.fra-grid { grid-template-columns: 1fr; }
}
/* CARD */
.fra-card {
background: var(--fra-white);
border-radius: var(--fra-r-2xl);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--fra-border);
box-shadow: var(--fra-sh1);
transition:
box-shadow var(--fra-ease),
transform var(--fra-ease);
}
.fra-card:hover {
box-shadow: var(--fra-sh2);
transform: translateY(-4px);
}
.fra-card:active { transform: translateY(-1px); }
.fra-card__link {
display: flex;
flex-direction: column;
flex: 1;
text-decoration: none;
color: inherit;
}
/* Thumbnail */
.fra-card__thumb {
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--fra-grey);
}
.fra-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--fra-ease);
}
.fra-card:hover .fra-card__img { transform: scale(1.04); }
.fra-card__thumb-fallback {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.fra-card__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%);
opacity: 0;
transition: opacity var(--fra-ease);
z-index: 1;
}
.fra-card:hover .fra-card__overlay { opacity: 1; }
.fra-card__play {
position: absolute; inset: 0;
z-index: 2;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity var(--fra-ease);
}
.fra-card:hover .fra-card__play { opacity: 1; }
.fra-play-btn {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--fra-giallo);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 12px rgba(250,240,45,.18);
transition: transform var(--fra-ease);
}
.fra-card:hover .fra-play-btn { transform: scale(1.08); }
.fra-card__badges {
position: absolute;
top: .75rem; left: .75rem;
z-index: 3;
display: flex; gap: .5rem;
}
.fra-badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 3px 10px;
border-radius: var(--fra-r-full);
font-family: var(--fra-ft);
font-size: var(--fra-xs);
font-weight: 700;
letter-spacing: .03em;
backdrop-filter: blur(8px);
}
.fra-badge--y { background: var(--fra-giallo); color: var(--fra-blu); }
.fra-badge--g {
background: rgba(34,160,90,.15);
color: #16a34a !important;
border: 1px solid rgba(34,160,90,.2);
}
/* Thumb fallback colori */
.fra-tb-blu { background: linear-gradient(140deg, #050e28, #0c2e78); }
.fra-tb-cil { background: linear-gradient(140deg, #42001e, #a0005a); }
.fra-tb-mix { background: linear-gradient(140deg, #05102a, #620035); }
.fra-tb-gld { background: linear-gradient(140deg, #1a1000, #5a3c00); }
.fra-tb-tel { background: linear-gradient(140deg, #001c20, #005060); }
/* Body card */
.fra-card__body {
padding: var(--fra-s5);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--fra-s3);
}
.fra-card__cat {
font-family: var(--fra-ft);
font-size: var(--fra-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--fra-cil);
}
.fra-card__title {
font-family: var(--fra-ft);
font-size: var(--fra-base);
font-weight: 700;
color: var(--fra-blu);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fra-card__desc {
font-size: var(--fra-sm);
color: var(--fra-text-3);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fra-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--fra-s4);
font-size: var(--fra-xs);
color: var(--fra-text-3);
padding-top: var(--fra-s3);
border-top: 1px solid var(--fra-border);
margin-top: auto;
}
.fra-card__meta span {
display: flex; align-items: center; gap: 4px;
}
.fra-card__prog-wrap {
height: 4px;
background: var(--fra-grey);
border-radius: var(--fra-r-full);
overflow: hidden;
margin-top: var(--fra-s2);
}
.fra-card__prog {
height: 100%;
background: linear-gradient(90deg, var(--fra-cil), rgba(177,0,94,.55));
border-radius: var(--fra-r-full);
transition: width .7s ease;
}
.fra-card__prog-lbl {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--fra-text-3);
margin-top: 3px;
}
/* Footer card */
.fra-card__foot {
padding: var(--fra-s4) var(--fra-s5);
border-top: 1px solid var(--fra-border);
background: var(--fra-grey);
display: flex;
align-items: center;
justify-content: space-between;
}
.fra-card__status {
display: flex; align-items: center; gap: var(--fra-s2);
font-family: var(--fra-ft);
font-size: var(--fra-xs);
font-weight: 700;
color: var(--fra-text-2);
}
.fra-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fra-dot--on { background: var(--fra-cil); box-shadow: 0 0 0 3px rgba(177,0,94,.15); }
.fra-dot--ok { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.fra-dot--new { background: var(--fra-giallo); box-shadow: 0 0 0 3px rgba(250,240,45,.2); }
.fra-card__cta {
font-family: var(--fra-ft);
font-size: var(--fra-xs);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fra-blu);
display: flex; align-items: center; gap: 4px;
transition: gap var(--fra-ease), color var(--fra-ease);
}
.fra-card:hover .fra-card__cta {
gap: var(--fra-s2);
color: var(--fra-cil);
}
/* Empty state */
.fra-empty {
display: flex; flex-direction: column;
align-items: center; text-align: center;
padding: var(--fra-s20) var(--fra-s8);
}
.fra-empty svg { color: var(--fra-text-3); margin-bottom: var(--fra-s5); }
.fra-empty h3 { font-size: var(--fra-lg); color: var(--fra-blu); margin-bottom: var(--fra-s3); }
.fra-empty p { font-size: var(--fra-sm); color: var(--fra-text-3); max-width: 36ch; margin-bottom: var(--fra-s6); }
.fra-btn-cta {
display: inline-flex; align-items: center; gap: var(--fra-s2);
font-family: var(--fra-ft);
font-size: var(--fra-sm); font-weight: 700;
background: var(--fra-giallo); color: var(--fra-blu);
padding: var(--fra-s3) var(--fra-s6);
border-radius: var(--fra-r-lg);
text-decoration: none;
transition: background var(--fra-ease);
}
.fra-btn-cta:hover { background: var(--fra-giallo-dk); }
/* ============================================================
SINGOLO CORSO
============================================================ */
/* Hero */
.fsc-hero {
background: var(--fra-blu);
padding: var(--fra-s10) 0 var(--fra-s12);
position: relative; overflow: hidden;
}
.fsc-hero__radial--tr {
position: absolute; pointer-events: none; border-radius: 50%;
top: -100px; right: -80px; width: 440px; height: 440px;
background: radial-gradient(circle, rgba(250,240,45,.05), transparent 60%);
}
.fsc-hero__inner { position: relative; z-index: 1; }
.fsc-wrap {
max-width: var(--fra-wrap);
margin-inline: auto;
padding-inline: var(--fra-s6);
}
.fsc-breadcrumb {
display: flex; align-items: center; gap: var(--fra-s2);
font-size: var(--fra-xs); color: rgba(255,255,255,.5);
margin-bottom: var(--fra-s6);
}
.fsc-breadcrumb a {
color: rgba(250,240,45,.8); text-decoration: none;
transition: color var(--fra-ease);
}
.fsc-breadcrumb a:hover { color: var(--fra-giallo); }
.fsc-hero__cat {
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--fra-giallo); opacity: .8; margin-bottom: var(--fra-s3);
}
.fsc-hero__title {
font-family: var(--fra-ft); font-size: var(--fra-2xl); font-weight: 900;
color: var(--fra-white); margin: 0 0 var(--fra-s4); letter-spacing: -.02em;
}
.fsc-hero__desc {
font-size: var(--fra-base); color: rgba(255,255,255,.6);
max-width: 60ch; margin: 0 0 var(--fra-s6);
}
.fsc-hero__meta {
display: flex; flex-wrap: wrap; gap: var(--fra-s5);
font-size: var(--fra-sm); color: rgba(255,255,255,.55);
}
.fsc-hero__meta span { display: flex; align-items: center; gap: var(--fra-s2); }
.fsc-prog-row {
display: flex; align-items: center; gap: var(--fra-s5);
margin-top: var(--fra-s8); padding-top: var(--fra-s6);
border-top: 1px solid rgba(255,255,255,.09);
}
.fsc-prog-bar {
flex: 1; height: 6px;
background: rgba(255,255,255,.12);
border-radius: var(--fra-r-full); overflow: hidden;
}
.fsc-prog-fill {
height: 100%;
background: linear-gradient(90deg, var(--fra-giallo), rgba(250,240,45,.55));
border-radius: var(--fra-r-full);
transition: width .8s ease;
}
.fsc-prog-lbl {
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 700;
color: var(--fra-giallo); white-space: nowrap;
}
/* Layout */
.fsc-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--fra-s8);
padding-top: var(--fra-s10);
padding-bottom: var(--fra-s20);
align-items: start;
}
@media (max-width: 840px) {
.fsc-layout { grid-template-columns: 1fr; }
.fsc-sidebar { order: -1; }
}
/* Thumb */
.fsc-thumb-wrap {
border-radius: var(--fra-r-2xl); overflow: hidden;
margin-bottom: var(--fra-s6);
box-shadow: var(--fra-sh2);
}
.fsc-thumb { width: 100%; height: auto; display: block; }
/* Card generica */
.fsc-desc-card, .fsc-curriculum {
background: var(--fra-white);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-2xl);
padding: var(--fra-s6);
margin-bottom: var(--fra-s6);
box-shadow: var(--fra-sh1);
}
.fsc-card-title {
font-family: var(--fra-ft); font-size: var(--fra-lg); font-weight: 800;
color: var(--fra-blu); margin: 0 0 var(--fra-s5);
}
.fsc-desc-content { font-size: var(--fra-sm); color: var(--fra-text-2); line-height: 1.7; }
.fsc-desc-content p { margin-bottom: var(--fra-s4); }
/* Moduli curriculum */
.fsc-module {
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-xl);
overflow: hidden;
margin-bottom: var(--fra-s3);
}
.fsc-module__head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--fra-s4) var(--fra-s5);
background: var(--fra-grey);
border-bottom: 1px solid var(--fra-border);
}
.fsc-module__title {
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 700;
color: var(--fra-blu);
}
.fsc-module__count {
font-size: var(--fra-xs); color: var(--fra-text-3); margin-top: 2px; display: block;
}
.fsc-module__done { color: #16a34a; }
.fsc-module__toggle {
width: 28px; height: 28px; border-radius: var(--fra-r-md);
background: none; border: none; cursor: pointer;
color: var(--fra-text-3);
display: flex; align-items: center; justify-content: center;
transition: background var(--fra-ease), transform var(--fra-ease);
}
.fsc-module__toggle:hover { background: var(--fra-border); }
.fsc-module__toggle.collapsed svg { transform: rotate(180deg); }
.fsc-module__lessons { transition: max-height .3s ease; overflow: hidden; }
.fsc-module__lessons.collapsed { max-height: 0 !important; }
/* Singola lezione */
.fsc-lesson {
display: flex; align-items: center; gap: var(--fra-s3);
padding: var(--fra-s3) var(--fra-s5);
border-bottom: 1px solid var(--fra-border);
text-decoration: none; color: var(--fra-text);
transition: background var(--fra-ease);
font-size: var(--fra-sm);
}
.fsc-lesson:last-child { border-bottom: none; }
a.fsc-lesson:hover { background: var(--fra-blu-soft); }
.fsc-lesson--done { color: var(--fra-text-3); }
.fsc-lesson__num {
width: 26px; height: 26px; border-radius: 50%;
background: var(--fra-grey);
display: flex; align-items: center; justify-content: center;
font-family: var(--fra-ft); font-size: 10px; font-weight: 800;
color: var(--fra-text-3); flex-shrink: 0;
}
.fsc-lesson--done .fsc-lesson__num {
background: rgba(22,163,74,.1); color: #16a34a;
}
.fsc-lesson__icon { color: var(--fra-text-3); flex-shrink: 0; }
.fsc-lesson__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsc-lesson--done .fsc-lesson__title { text-decoration: line-through; opacity: .6; }
.fsc-lesson__dur { font-size: var(--fra-xs); color: var(--fra-text-3); white-space: nowrap; }
/* Sidebar cards */
.fsc-sidebar { display: flex; flex-direction: column; gap: var(--fra-s4); }
.fsc-sb-card {
background: var(--fra-white);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-xl);
overflow: hidden;
box-shadow: var(--fra-sh1);
}
.fsc-sb-card--blu {
background: var(--fra-blu);
border-color: transparent;
padding: var(--fra-s5);
}
.fsc-sb-prog__lbl {
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.6); margin-bottom: var(--fra-s3);
}
.fsc-sb-prog__num {
font-family: var(--fra-ft); font-size: var(--fra-xl); font-weight: 900;
color: var(--fra-giallo); margin-bottom: var(--fra-s3);
}
.fsc-sb-prog__bar {
height: 6px; background: rgba(255,255,255,.12);
border-radius: var(--fra-r-full); overflow: hidden;
}
.fsc-sb-prog__fill {
height: 100%;
background: linear-gradient(90deg, var(--fra-giallo), rgba(250,240,45,.5));
border-radius: var(--fra-r-full);
transition: width .8s ease;
}
.fsc-sb-prog__sub {
font-size: var(--fra-xs); color: rgba(255,255,255,.4);
margin-top: var(--fra-s2);
}
.fsc-btn-start {
display: flex; align-items: center; justify-content: center; gap: var(--fra-s2);
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 700;
background: var(--fra-giallo); color: var(--fra-blu);
border-radius: var(--fra-r-lg); padding: var(--fra-s3) var(--fra-s5);
margin-top: var(--fra-s5); text-decoration: none;
transition: background var(--fra-ease);
}
.fsc-btn-start:hover { background: var(--fra-giallo-dk); }
.fsc-sb-mod-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--fra-s3) var(--fra-s4);
background: var(--fra-grey);
border-bottom: 1px solid var(--fra-border);
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; color: var(--fra-blu);
}
.fsc-sb-mod-count {
font-size: 10px; color: var(--fra-text-3); font-weight: 600;
}
.fsc-sb-lesson {
display: flex; align-items: center; gap: var(--fra-s3);
padding: var(--fra-s3) var(--fra-s4);
border-bottom: 1px solid var(--fra-border);
font-size: var(--fra-xs); color: var(--fra-text);
text-decoration: none;
transition: background var(--fra-ease);
}
.fsc-sb-lesson:last-child { border-bottom: none; }
a.fsc-sb-lesson:hover { background: var(--fra-off); }
.fsc-sb-lesson--done { color: var(--fra-text-3); }
.fsc-sb-lesson__num {
width: 22px; height: 22px; border-radius: 50%;
background: var(--fra-grey);
display: flex; align-items: center; justify-content: center;
font-family: var(--fra-ft); font-size: 10px; font-weight: 800;
color: var(--fra-text-3); flex-shrink: 0;
}
.fsc-sb-lesson--done .fsc-sb-lesson__num { background: rgba(22,163,74,.1); color: #16a34a; }
.fsc-sb-lesson__name {
flex: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.fsc-sb-lesson--done .fsc-sb-lesson__name { text-decoration: line-through; opacity: .6; }
.fsc-sb-lesson__dur { color: var(--fra-text-3); white-space: nowrap; }
/* ============================================================
SINGOLA LEZIONE
============================================================ */
/* Nascondi header/footer Astra nella lezione */
body.single-lp_lesson .site-header,
body.single-lp_lesson .site-footer,
body.single-lp_lesson footer.site-footer {
display: none !important;
}
body.single-lp_lesson {
background: var(--fra-off) !important;
}
body.single-lp_lesson .ast-container,
body.single-lp_lesson #content,
body.single-lp_lesson .entry-content,
body.single-lp_lesson .ast-article-single,
body.single-lp_lesson #primary {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
/* Topbar */
.fsl-topbar {
position: sticky; top: 0; z-index: 200;
background: var(--fra-blu);
box-shadow: 0 2px 0 var(--fra-giallo), 0 4px 20px rgba(9,40,96,.3);
height: 60px;
display: flex; align-items: center;
padding: 0 var(--fra-s6);
gap: var(--fra-s4);
}
.fsl-topbar__left { flex: 1; }
.fsl-topbar__center{ flex: 1; text-align: center; }
.fsl-topbar__right { flex: 1; display: flex; justify-content: flex-end; }
.fsl-back {
display: inline-flex; align-items: center; gap: var(--fra-s2);
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 700;
color: rgba(255,255,255,.7); text-decoration: none;
transition: color var(--fra-ease);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 240px;
}
.fsl-back:hover { color: var(--fra-giallo); }
.fsl-topbar__lesson {
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 600;
color: rgba(255,255,255,.45); white-space: nowrap;
}
.fsl-btn-complete {
display: inline-flex; align-items: center; gap: var(--fra-s2);
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 700;
background: var(--fra-giallo); color: var(--fra-blu);
border: none; cursor: pointer;
border-radius: var(--fra-r-lg); padding: var(--fra-s2) var(--fra-s4);
transition: background var(--fra-ease), transform var(--fra-ease);
white-space: nowrap;
}
.fsl-btn-complete:hover { background: var(--fra-giallo-dk); }
.fsl-btn-complete:active { transform: scale(.96); }
.fsl-btn-complete.loading { opacity: .6; pointer-events: none; }
.fsl-done-badge {
display: inline-flex; align-items: center; gap: var(--fra-s2);
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 700;
color: #16a34a;
background: rgba(22,163,74,.1);
border: 1px solid rgba(22,163,74,.2);
border-radius: var(--fra-r-lg); padding: var(--fra-s2) var(--fra-s4);
}
@media (max-width: 600px) {
.fsl-topbar { padding: 0 var(--fra-s4); }
.fsl-topbar__center { display: none; }
.fsl-back span { display: none; }
}
/* Layout */
.fsl-layout {
display: grid;
/*grid-template-columns: 1fr 300px; sidebar dx*/
grid-template-columns: 320px 1fr; /* sidebar sx, contenuto dx */
min-height: calc(100dvh - 60px);
align-items: start;
}
@media (max-width: 900px) {
.fsl-layout { grid-template-columns: 1fr; }
}
/* Main */
.fsl-main {
padding: var(--fra-s10) var(--fra-s8);
max-width: 100%;
}
@media (max-width: 600px) {
.fsl-main { padding: var(--fra-s6) var(--fra-s4); }
}
/* Intestazione lezione */
.fsl-lesson-head { margin-bottom: var(--fra-s8); }
.fsl-lesson-num {
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--fra-cil); margin-bottom: var(--fra-s2);
}
.fsl-lesson-title {
font-family: var(--fra-ft); font-size: var(--fra-xl); font-weight: 900;
color: var(--fra-blu); margin: 0 0 var(--fra-s3); letter-spacing: -.02em;
}
.fsl-lesson-meta {
display: inline-flex; align-items: center; gap: var(--fra-s2);
font-size: var(--fra-sm); color: var(--fra-text-3);
}
/* Contenuto */
.fsl-content {
font-family: var(--fra-fb);
font-size: var(--fra-base);
color: var(--fra-text-2);
line-height: 1.75;
margin-bottom: var(--fra-s10);
}
.fsl-content p { margin-bottom: var(--fra-s5); }
.fsl-content h2, .fsl-content h3 {
font-family: var(--fra-ft);
color: var(--fra-blu);
margin: var(--fra-s8) 0 var(--fra-s4);
}
.fsl-content ul, .fsl-content ol {
padding-left: var(--fra-s6); margin-bottom: var(--fra-s5);
}
.fsl-content li { margin-bottom: var(--fra-s2); }
/* Video embed responsive */
.fsl-content iframe,
.fsl-content .wp-block-embed__wrapper iframe {
width: 100%; aspect-ratio: 16/9;
height: auto !important;
border-radius: var(--fra-r-xl);
display: block; margin-bottom: var(--fra-s6);
}
.fsl-content .wp-block-embed { margin-bottom: var(--fra-s6); }
/* Navigazione prev/next */
.fsl-nav {
display: flex; align-items: stretch; gap: var(--fra-s4);
padding-top: var(--fra-s8);
border-top: 1px solid var(--fra-border);
}
.fsl-nav__btn {
flex: 1; display: flex; align-items: center; gap: var(--fra-s4);
padding: var(--fra-s4) var(--fra-s5);
background: var(--fra-white); border: 1px solid var(--fra-border);
border-radius: var(--fra-r-xl); text-decoration: none;
color: var(--fra-text);
transition: box-shadow var(--fra-ease), transform var(--fra-ease), border-color var(--fra-ease);
box-shadow: var(--fra-sh1);
}
.fsl-nav__btn:hover {
box-shadow: var(--fra-sh2);
border-color: var(--fra-blu);
transform: translateY(-2px);
}
.fsl-nav__btn--next { justify-content: flex-end; text-align: right; }
.fsl-nav__label {
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 700;
letter-spacing: .07em; text-transform: uppercase; color: var(--fra-text-3);
margin-bottom: 2px;
}
.fsl-nav__name {
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 700;
color: var(--fra-blu);
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 520px) {
.fsl-nav { flex-direction: column; }
}
/* Sidebar */
.fsl-sidebar {
border-left: 1px solid var(--fra-border);
background: var(--fra-white);
min-height: calc(100dvh - 60px);
position: sticky; top: 60px;
overflow-y: auto;
max-height: calc(100dvh - 60px);
}
.fsl-sb-head {
padding: var(--fra-s4) var(--fra-s5);
background: var(--fra-blu);
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.7);
position: sticky; top: 0; z-index: 1;
}
.fsl-sb-module__title {
display: flex; align-items: center; justify-content: space-between;
padding: var(--fra-s3) var(--fra-s5);
background: var(--fra-grey);
border-bottom: 1px solid var(--fra-border);
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; color: var(--fra-blu);
}
.fsl-sb-module__count {
font-size: 10px; color: var(--fra-text-3); font-weight: 600;
}
.fsl-sb-lesson {
display: flex; align-items: center; gap: var(--fra-s3);
padding: var(--fra-s3) var(--fra-s5);
border-bottom: 1px solid var(--fra-border);
font-size: var(--fra-xs); color: var(--fra-text);
text-decoration: none;
transition: background var(--fra-ease);
}
.fsl-sb-lesson:hover { background: var(--fra-off); }
.fsl-sb-lesson--active {
background: var(--fra-blu-soft) !important;
border-left: 3px solid var(--fra-blu);
}
.fsl-sb-lesson--done { color: var(--fra-text-3); }
.fsl-sb-lesson__num {
width: 22px; height: 22px; border-radius: 50%;
background: var(--fra-grey);
display: flex; align-items: center; justify-content: center;
font-family: var(--fra-ft); font-size: 10px; font-weight: 800;
color: var(--fra-text-3); flex-shrink: 0;
}
.fsl-sb-lesson--active .fsl-sb-lesson__num { background: var(--fra-blu); color: white; }
.fsl-sb-lesson--done .fsl-sb-lesson__num { background: rgba(22,163,74,.1); color: #16a34a; }
.fsl-sb-lesson__name {
flex: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.fsl-sb-lesson--active .fsl-sb-lesson__name { color: var(--fra-blu); font-weight: 700; }
.fsl-sb-lesson--done .fsl-sb-lesson__name { text-decoration: line-through; opacity: .6; }
.fsl-sb-lesson__dur { color: var(--fra-text-3); white-space: nowrap; }
@media (max-width: 900px) {
.fsl-sidebar { display: none; }
}
/* ============================================================
HEADER
============================================================ */
.fra-header {
position: sticky; top: 0; z-index: 500;
background: var(--fra-blu);
box-shadow: 0 2px 0 var(--fra-giallo), 0 4px 24px rgba(9,40,96,.25);
height: 66px;
}
.fra-header__inner {
max-width: var(--fra-wrap);
margin-inline: auto;
padding-inline: var(--fra-s6);
height: 100%;
display: flex;
align-items: center;
gap: var(--fra-s6);
}
/* Logo */
.fra-header__logo {
display: flex; align-items: center;
text-decoration: none; flex-shrink: 0;
}
.fra-header__logo-img {
height: 36px; width: auto;
filter: brightness(0) invert(1);
display: block;
}
.fra-header__logo-txt {
font-family: var(--fra-ft);
font-size: var(--fra-lg); font-weight: 900;
color: var(--fra-white); letter-spacing: -.02em;
}
/* Nav */
.fra-header__nav {
display: flex; align-items: center; gap: var(--fra-s2);
flex: 1;
}
.fra-header__nav-link {
display: inline-flex; align-items: center; gap: var(--fra-s2);
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 600;
color: rgba(255,255,255,.65);
text-decoration: none; padding: var(--fra-s2) var(--fra-s3);
border-radius: var(--fra-r-lg);
transition: color var(--fra-ease), background var(--fra-ease);
}
.fra-header__nav-link:hover {
color: var(--fra-white);
background: rgba(255,255,255,.08);
}
.fra-header__nav-link--active {
color: var(--fra-giallo) !important;
background: rgba(250,240,45,.08) !important;
}
/* Right */
.fra-header__right {
display: flex; align-items: center; gap: var(--fra-s4);
margin-left: auto; flex-shrink: 0;
}
/* Avatar */
.fra-header__user { position: relative; }
.fra-header__avatar {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(250,240,45,.15);
border: 2px solid rgba(250,240,45,.3);
cursor: pointer; overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: 0; transition: border-color var(--fra-ease), box-shadow var(--fra-ease);
}
.fra-header__avatar:hover {
border-color: var(--fra-giallo);
box-shadow: 0 0 0 4px rgba(250,240,45,.15);
}
.fra-avatar__img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.fra-avatar__initials {
font-family: var(--fra-ft); font-size: var(--fra-xs); font-weight: 900;
color: var(--fra-giallo); line-height: 1;
}
/* Dropdown */
.fra-header__dropdown {
position: absolute; top: calc(100% + 10px); right: 0;
min-width: 220px;
background: var(--fra-white);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-xl);
box-shadow: var(--fra-sh3);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-8px);
transition:
opacity var(--fra-ease),
transform var(--fra-ease),
visibility var(--fra-ease);
z-index: 600;
}
.fra-header__dropdown.open {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
}
.fra-dd__head { padding: var(--fra-s4) var(--fra-s5); }
.fra-dd__name {
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 800;
color: var(--fra-blu); margin-bottom: 2px;
}
.fra-dd__email { font-size: var(--fra-xs); color: var(--fra-text-3); }
.fra-dd__sep { height: 1px; background: var(--fra-border); }
.fra-dd__item {
display: flex; align-items: center; gap: var(--fra-s3);
padding: var(--fra-s3) var(--fra-s5);
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 600;
color: var(--fra-text); text-decoration: none;
transition: background var(--fra-ease), color var(--fra-ease);
}
.fra-dd__item:hover { background: var(--fra-off); color: var(--fra-blu); }
.fra-dd__item--red { color: var(--fra-cil); }
.fra-dd__item--red:hover { background: var(--fra-cil-soft); color: var(--fra-cil); }
/* Login btn */
.fra-header__login-btn {
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 700;
background: var(--fra-giallo); color: var(--fra-blu);
padding: var(--fra-s2) var(--fra-s5);
border-radius: var(--fra-r-lg); text-decoration: none;
transition: background var(--fra-ease);
}
.fra-header__login-btn:hover { background: var(--fra-giallo-dk); }
/* Nascondi header su login e lezione */
body.page-template-home .fra-header,
body.single-lp_lesson .fra-header { display: none; }
/* Page wrap — chiude il div aperto nell'header */
#fra-page-wrap { min-height: 100dvh; }
/* Mobile */
@media (max-width: 600px) {
.fra-header__nav { display: none; }
.fra-header__inner { padding-inline: var(--fra-s4); }
}
.fra-header__username {
font-family: var(--fra-ft);
font-size: var(--fra-sm);
font-weight: 700;
color: rgba(255,255,255,.85);
white-space: nowrap;
}
.fra-header__logout {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 600;
color: rgba(255,255,255,.5);
text-decoration: none;
background-color: transparent !important;
padding: var(--fra-s2) var(--fra-s3);
border-radius: var(--fra-r-lg);
transition: color var(--fra-ease), background var(--fra-ease);
}
.fra-header__logout:hover {
color: var(--fra-white);
background: rgba(255,255,255,.08);
}
@media (max-width: 600px) {
.fra-header__username { display: none; }
}
/* Footer */
.fra-footer {
background: var(--fra-blu-deep);
border-top: 1px solid rgba(255,255,255,.06);
padding: var(--fra-s6) 0;
}
.fra-footer__inner {
max-width: var(--fra-wrap);
margin-inline: auto; padding-inline: var(--fra-s6);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--fra-s4);
}
.fra-footer__copy {
font-size: var(--fra-xs); color: rgba(255,255,255,.35);
}
.fra-footer__link {
font-size: var(--fra-xs); color: rgba(255,255,255,.4);
text-decoration: none; transition: color var(--fra-ease);
}
.fra-footer__link:hover { color: var(--fra-giallo); }
/* ============================================================
PAGINA CONTATTI
============================================================ */
#fra-contatti {
font-family: var(--fra-fb);
-webkit-font-smoothing: antialiased;
}
/* Wrap */
.fco-wrap {
max-width: var(--fra-wrap);
margin-inline: auto;
padding-inline: var(--fra-s6);
}
@media (max-width: 480px) {
.fco-wrap { padding-inline: var(--fra-s4); }
}
/* Hero */
.fco-hero {
background: var(--fra-nero);
padding: var(--fra-s12) 0 var(--fra-s16);
}
.fco-eyebrow {
font-family: var(--fra-ft);
font-size: var(--fra-xs); font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.45);
margin-bottom: var(--fra-s4);
display: flex; align-items: center; gap: var(--fra-s3);
}
.fco-eyebrow::before {
content: '';
display: block; width: 24px; height: 1px;
background: rgba(255,255,255,.3);
}
.fco-hero__title {
font-family: var(--fra-ft);
font-size: var(--fra-2xl); font-weight: 600;
color: var(--fra-white);
margin: 0 0 var(--fra-s4);
letter-spacing: -.02em; line-height: 1.05;
}
.fco-hero__sub {
font-size: var(--fra-base); font-weight: 400;
color: rgba(255,255,255,.5);
max-width: 52ch; margin: 0;
line-height: 1.65;
}
/* Layout due colonne */
.fco-layout {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--fra-s12);
padding-top: var(--fra-s12);
padding-bottom: var(--fra-s20);
align-items: start;
}
@media (max-width: 860px) {
.fco-layout {
grid-template-columns: 1fr;
gap: var(--fra-s10);
}
}
/* Colonna info */
.fco-info { display: flex; flex-direction: column; gap: var(--fra-s8); }
.fco-info__label {
font-family: var(--fra-ft);
font-size: var(--fra-xs); font-weight: 500;
letter-spacing: .09em; text-transform: uppercase;
color: var(--fra-grigio);
margin-bottom: var(--fra-s4);
padding-bottom: var(--fra-s3);
border-bottom: 1px solid var(--fra-border);
}
.fco-info__text {
font-size: var(--fra-sm); font-weight: 400;
color: var(--fra-medio);
line-height: 1.75; margin: 0;
}
/* Contatti diretti */
.fco-contacts { display: flex; flex-direction: column; gap: var(--fra-s3); }
.fco-contact-row {
display: flex; align-items: center; gap: var(--fra-s4);
padding: var(--fra-s4);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-xl);
text-decoration: none; color: var(--fra-nero);
transition: background var(--fra-ease), border-color var(--fra-ease), box-shadow var(--fra-ease);
background: var(--fra-white);
}
.fco-contact-row:not(.fco-contact-row--plain):hover {
background: var(--fra-off);
border-color: var(--fra-nero);
box-shadow: var(--fra-sh1);
}
.fco-contact-row--plain { cursor: default; }
.fco-contact-ico {
width: 38px; height: 38px;
border-radius: var(--fra-r-lg);
background: var(--fra-off);
border: 1px solid var(--fra-border);
display: flex; align-items: center; justify-content: center;
color: var(--fra-grafite); flex-shrink: 0;
}
.fco-contact-lbl {
font-family: var(--fra-ft);
font-size: 10px; font-weight: 500;
letter-spacing: .07em; text-transform: uppercase;
color: var(--fra-grigio); margin-bottom: 2px;
}
.fco-contact-val {
font-size: var(--fra-sm); font-weight: 500;
color: var(--fra-nero);
}
/* Social */
.fco-socials { display: flex; flex-direction: column; gap: var(--fra-s2); }
.fco-social {
display: flex; align-items: center; gap: var(--fra-s4);
padding: var(--fra-s4);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-xl);
text-decoration: none; color: var(--fra-nero);
background: var(--fra-white);
transition: background var(--fra-ease), border-color var(--fra-ease), transform var(--fra-ease);
}
.fco-social:hover {
background: var(--fra-off);
border-color: var(--fra-nero);
transform: translateX(3px);
}
.fco-social__ico {
width: 38px; height: 38px;
border-radius: var(--fra-r-lg);
background: var(--fra-off);
border: 1px solid var(--fra-border);
display: flex; align-items: center; justify-content: center;
color: var(--fra-grafite); flex-shrink: 0;
}
.fco-social__name {
font-family: var(--fra-ft);
font-size: var(--fra-sm); font-weight: 500;
color: var(--fra-nero);
}
.fco-social__handle {
font-size: var(--fra-xs); color: var(--fra-grigio);
margin-top: 1px;
}
.fco-social__arr {
margin-left: auto; color: var(--fra-grigio-lt);
transition: color var(--fra-ease), transform var(--fra-ease);
flex-shrink: 0;
}
.fco-social:hover .fco-social__arr {
color: var(--fra-nero);
transform: translate(2px,-2px);
}
/* Card form */
.fco-form-card {
background: var(--fra-white);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-2xl);
overflow: hidden;
box-shadow: var(--fra-sh2);
}
.fco-form-card__head {
padding: var(--fra-s8) var(--fra-s8) 0;
}
.fco-form-card__title {
font-family: var(--fra-ft);
font-size: var(--fra-xl); font-weight: 600;
color: var(--fra-nero); margin: 0 0 var(--fra-s2);
letter-spacing: -.015em;
}
.fco-form-card__sub {
font-size: var(--fra-sm); color: var(--fra-grigio);
margin: 0;
}
.fco-form-wrap {
padding: var(--fra-s6) var(--fra-s8) var(--fra-s8);
}
/* ── Stile CF7 ──────────────────────────────────────────────── */
/* Struttura campi */
.fco-form-wrap .wpcf7-form {
display: flex; flex-direction: column; gap: var(--fra-s6);
}
/* Rimuovi stili sui generati da CF7 */
.fco-form-wrap .wpcf7-form p {
margin: 0 !important;
display: contents !important; /* ignora i
wrapper di CF7 */
}
.fco-field {
display: flex; flex-direction: column; gap: var(--fra-s2);
}
.fco-field label {
font-family: var(--fra-ft) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--fra-grigio) !important;
transition: color var(--fra-ease) !important;
}
.fco-field:focus-within label {
color: var(--fra-nero) !important;
}
/* Due colonne */
.fco-row-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--fra-s8) !important;
}
@media (max-width: 520px) {
.fco-row-2 { grid-template-columns: 1fr !important; gap: var(--fra-s6) !important; }
}
/* Input, textarea, select */
.fco-form-wrap input[type="text"],
.fco-form-wrap input[type="email"],
.fco-form-wrap input[type="tel"],
.fco-form-wrap textarea,
.fco-form-wrap select {
width: 100% !important;
padding: var(--fra-s3) var(--fra-s4) !important;
font-family: var(--fra-fb) !important;
font-size: var(--fra-base) !important;
font-weight: 400 !important;
color: var(--fra-nero) !important;
background: var(--fra-off) !important;
border: 1.5px solid var(--fra-border) !important;
border-radius: var(--fra-r-lg) !important;
outline: none !important;
transition: border-color var(--fra-ease), background var(--fra-ease), box-shadow var(--fra-ease) !important;
box-shadow: none !important;
-webkit-appearance: none !important;
}
.fco-form-wrap input[type="text"]:focus,
.fco-form-wrap input[type="email"]:focus,
.fco-form-wrap input[type="tel"]:focus,
.fco-form-wrap textarea:focus,
.fco-form-wrap select:focus {
background: var(--fra-white) !important;
border-color: var(--fra-nero) !important;
box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important;
}
.fco-form-wrap textarea {
resize: vertical !important;
min-height: 130px !important;
}
/* Placeholder */
.fco-form-wrap input::placeholder,
.fco-form-wrap textarea::placeholder {
color: var(--fra-grigio-lt) !important;
font-weight: 400 !important;
}
/* Submit */
.fco-form-wrap input[type="submit"],
.fco-form-wrap .wpcf7-submit {
width: 100% !important;
padding: var(--fra-s4) !important;
font-family: var(--fra-ft) !important;
font-size: var(--fra-base) !important;
font-weight: 500 !important;
letter-spacing: .03em !important;
background: var(--fra-nero) !important;
color: var(--fra-white) !important;
border: none !important;
border-radius: var(--fra-r-lg) !important;
cursor: pointer !important;
transition: background var(--fra-ease), transform var(--fra-ease), box-shadow var(--fra-ease) !important;
margin-top: var(--fra-s2) !important;
}
.fco-form-wrap input[type="submit"]:hover,
.fco-form-wrap .wpcf7-submit:hover {
background: var(--fra-grafite) !important;
box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}
.fco-form-wrap input[type="submit"]:active,
.fco-form-wrap .wpcf7-submit:active {
transform: scale(.98) !important;
}
/* Messaggi CF7 */
.fco-form-wrap .wpcf7-response-output {
margin: 0 !important;
padding: var(--fra-s3) var(--fra-s4) !important;
border-radius: var(--fra-r-lg) !important;
font-size: var(--fra-sm) !important;
border: 1px solid var(--fra-border) !important;
}
.fco-form-wrap .wpcf7-mail-sent-ok {
background: var(--fra-off) !important;
border-color: var(--fra-grigio-lt) !important;
color: var(--fra-grafite) !important;
}
.fco-form-wrap .wpcf7-validation-errors,
.fco-form-wrap .wpcf7-mail-sent-ng {
background: #fafafa !important;
border-color: var(--fra-grigio-lt) !important;
color: var(--fra-grafite) !important;
}
/* Errori inline */
.fco-form-wrap .wpcf7-not-valid-tip {
font-size: var(--fra-xs) !important;
color: var(--fra-grafite) !important;
margin-top: 4px !important;
}
.fco-form-wrap .wpcf7-not-valid {
border-color: var(--fra-nero) !important;
background: var(--fra-white) !important;
}
/* Due colonne su form (nome + email affiancati) */
.fco-form-wrap .fco-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fra-s5);
}
@media (max-width: 520px) {
.fco-form-wrap .fco-row-2 { grid-template-columns: 1fr; }
.fco-form-wrap { padding: var(--fra-s5) !important; }
.fco-form-card__head { padding: var(--fra-s5) var(--fra-s5) 0 !important; }
}
/* ── Stile CF7 — Underline Modern ──────────────────────────── */
.fco-form-wrap .wpcf7-form {
display: flex; flex-direction: column; gap: var(--fra-s6);
}
.fco-form-wrap .wpcf7-form p {
margin: 0 !important;
display: flex; flex-direction: column; gap: 0;
}
/* Labels */
.fco-form-wrap label {
font-family: var(--fra-ft) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--fra-grigio) !important;
margin-bottom: var(--fra-s2) !important;
transition: color var(--fra-ease) !important;
}
/* Wrapper input per la linea animata */
.fco-form-wrap .wpcf7-form-control-wrap {
position: relative;
display: block;
}
.fco-form-wrap .wpcf7-form-control-wrap::after {
content: '';
position: absolute; bottom: 0; left: 0;
width: 0; height: 2px;
background: var(--fra-nero);
transition: width .35s cubic-bezier(.16,1,.3,1);
}
.fco-form-wrap .wpcf7-form-control-wrap:focus-within::after {
width: 100%;
}
/* Input, textarea */
.fco-form-wrap input[type="text"],
.fco-form-wrap input[type="email"],
.fco-form-wrap input[type="tel"],
.fco-form-wrap textarea,
.fco-form-wrap select {
width: 100% !important;
padding: var(--fra-s3) 0 var(--fra-s3) !important;
font-family: var(--fra-fb) !important;
font-size: var(--fra-base) !important;
font-weight: 400 !important;
color: var(--fra-nero) !important;
background: transparent !important;
border: none !important;
border-bottom: 1.5px solid var(--fra-border) !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
transition: border-color var(--fra-ease) !important;
-webkit-appearance: none !important;
}
.fco-form-wrap input[type="text"]:focus,
.fco-form-wrap input[type="email"]:focus,
.fco-form-wrap input[type="tel"]:focus,
.fco-form-wrap textarea:focus,
.fco-form-wrap select:focus {
background: transparent !important;
border-bottom-color: transparent !important; /* la linea la fa ::after */
box-shadow: none !important;
}
.fco-form-wrap textarea {
resize: none !important;
min-height: 110px !important;
}
/* Placeholder */
.fco-form-wrap input::placeholder,
.fco-form-wrap textarea::placeholder {
color: var(--fra-grigio-lt) !important;
font-weight: 400 !important;
}
/* Label focus — diventa nera */
.fco-form-wrap .wpcf7-form-control-wrap:focus-within + label,
.fco-form-wrap p:focus-within > label {
color: var(--fra-nero) !important;
}
/* Submit */
.fco-form-wrap input[type="submit"],
.fco-form-wrap .wpcf7-submit {
width: 100% !important;
padding: var(--fra-s4) var(--fra-s6) !important;
font-family: var(--fra-ft) !important;
font-size: var(--fra-base) !important;
font-weight: 500 !important;
letter-spacing: .04em !important;
background: var(--fra-nero) !important;
color: var(--fra-white) !important;
border: none !important;
border-radius: var(--fra-r-lg) !important;
cursor: pointer !important;
margin-top: var(--fra-s4) !important;
position: relative; overflow: hidden !important;
transition: background var(--fra-ease), box-shadow var(--fra-ease), transform var(--fra-ease) !important;
}
/* Shimmer hover sul bottone */
.fco-form-wrap input[type="submit"]::before,
.fco-form-wrap .wpcf7-submit::before {
content: '';
position: absolute; top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
transition: left .5s ease !important;
}
.fco-form-wrap input[type="submit"]:hover::before,
.fco-form-wrap .wpcf7-submit:hover::before {
left: 150%;
}
.fco-form-wrap input[type="submit"]:hover,
.fco-form-wrap .wpcf7-submit:hover {
background: var(--fra-grafite) !important;
box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
}
.fco-form-wrap input[type="submit"]:active,
.fco-form-wrap .wpcf7-submit:active {
transform: scale(.98) !important;
}
/* Spinner CF7 */
.fco-form-wrap .wpcf7-spinner {
display: none !important; /* nascondi spinner default */
}
/* Messaggi risposta */
.fco-form-wrap .wpcf7-response-output {
margin: var(--fra-s2) 0 0 !important;
padding: var(--fra-s3) var(--fra-s4) !important;
border-radius: var(--fra-r-lg) !important;
font-size: var(--fra-sm) !important;
border: none !important;
background: var(--fra-off) !important;
color: var(--fra-grafite) !important;
border-left: 3px solid var(--fra-nero) !important;
}
.fco-form-wrap .wpcf7-mail-sent-ok {
border-left-color: var(--fra-nero) !important;
}
.fco-form-wrap .wpcf7-validation-errors,
.fco-form-wrap .wpcf7-mail-sent-ng {
border-left-color: var(--fra-grigio) !important;
}
/* Errori inline */
.fco-form-wrap .wpcf7-not-valid-tip {
font-size: var(--fra-xs) !important;
color: var(--fra-grafite) !important;
margin-top: var(--fra-s2) !important;
display: flex; align-items: center; gap: 4px !important;
}
.fco-form-wrap .wpcf7-not-valid-tip::before {
content: '—';
font-weight: 700;
}
.fco-form-wrap .wpcf7-not-valid {
border-bottom-color: var(--fra-nero) !important;
}
/* Card head ridisegnata */
.fco-form-card {
background: var(--fra-white);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-2xl);
box-shadow: var(--fra-sh2);
overflow: hidden;
}
.fco-form-card__head {
padding: var(--fra-s8) var(--fra-s8) var(--fra-s6);
border-bottom: 1px solid var(--fra-border);
background: var(--fra-off);
}
.fco-form-card__title {
font-family: var(--fra-ft);
font-size: var(--fra-xl); font-weight: 600;
color: var(--fra-nero); margin: 0 0 var(--fra-s2);
letter-spacing: -.015em;
}
.fco-form-card__sub {
font-size: var(--fra-sm); color: var(--fra-grigio);
margin: 0; line-height: 1.6;
}
.fco-form-wrap {
padding: var(--fra-s8) !important;
}
/* Due colonne */
.fco-form-wrap .fco-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fra-s8);
}
@media (max-width: 520px) {
.fco-form-wrap .fco-row-2 { grid-template-columns: 1fr; gap: var(--fra-s6); }
.fco-form-wrap { padding: var(--fra-s5) !important; }
.fco-form-card__head { padding: var(--fra-s5) var(--fra-s5) var(--fra-s4) !important; }
}
/* Privacy CF7 */
.fco-privacy {
padding-top: var(--fra-s2);
}
.fco-privacy .wpcf7-acceptance {
display: flex !important;
align-items: flex-start !important;
gap: var(--fra-s3) !important;
}
.fco-privacy .wpcf7-acceptance input[type="checkbox"] {
/* reset */
-webkit-appearance: none !important;
appearance: none !important;
width: 18px !important; height: 18px !important;
min-width: 18px !important;
border: 1.5px solid var(--fra-border) !important;
border-radius: var(--fra-r-sm) !important;
background: transparent !important;
cursor: pointer !important;
margin-top: 2px !important;
position: relative !important;
transition: border-color var(--fra-ease), background var(--fra-ease) !important;
padding: 0 !important;
}
.fco-privacy .wpcf7-acceptance input[type="checkbox"]:checked {
background: var(--fra-nero) !important;
border-color: var(--fra-nero) !important;
}
/* Checkmark */
.fco-privacy .wpcf7-acceptance input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: 2px solid var(--fra-white);
border-top: none; border-left: none;
transform: rotate(45deg);
}
.fco-privacy .wpcf7-acceptance .wpcf7-list-item-label {
font-size: var(--fra-xs) !important;
color: var(--fra-grigio) !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
.fco-privacy .wpcf7-acceptance .wpcf7-list-item-label a {
color: var(--fra-nero) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-color: var(--fra-border) !important;
transition: text-decoration-color var(--fra-ease) !important;
}
.fco-privacy .wpcf7-acceptance .wpcf7-list-item-label a:hover {
text-decoration-color: var(--fra-nero) !important;
}
/* Errore privacy */
.fco-privacy .wpcf7-not-valid-tip {
margin-left: calc(18px + var(--fra-s3)) !important;
}
/* ============================================================
PAGINA ACCOUNT
============================================================ */
#fra-account { font-family: var(--fra-fb); -webkit-font-smoothing: antialiased; }
.fac-wrap {
max-width: 780px;
margin-inline: auto;
padding-inline: var(--fra-s6);
}
/* Hero */
.fac-hero {
background: var(--fra-nero);
padding: var(--fra-s10) 0 var(--fra-s12);
}
.fac-breadcrumb {
display: flex; align-items: center; gap: var(--fra-s3);
font-size: var(--fra-xs); margin-bottom: var(--fra-s8);
}
.fac-breadcrumb a {
color: rgba(255,255,255,.45); text-decoration: none;
transition: color var(--fra-ease);
}
.fac-breadcrumb a:hover { color: rgba(255,255,255,.8); }
.fac-breadcrumb span { color: rgba(255,255,255,.25); }
.fac-hero__user {
display: flex; align-items: center; gap: var(--fra-s5);
}
.fac-avatar {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(255,255,255,.1);
border: 2px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
}
.fac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fac-avatar span {
font-family: var(--fra-ft); font-size: var(--fra-lg);
font-weight: 600; color: rgba(255,255,255,.7);
}
.fac-hero__name {
font-family: var(--fra-ft); font-size: var(--fra-xl);
font-weight: 600; color: var(--fra-white);
margin: 0 0 4px; letter-spacing: -.015em;
}
.fac-hero__email {
font-size: var(--fra-sm); color: rgba(255,255,255,.4);
}
/* Layout */
.fac-layout {
display: flex; flex-direction: column; gap: var(--fra-s6);
padding-top: var(--fra-s8);
padding-bottom: var(--fra-s16);
}
/* Card */
.fac-card {
background: var(--fra-white);
border: 1px solid var(--fra-border);
border-radius: var(--fra-r-2xl);
padding: var(--fra-s8);
box-shadow: var(--fra-sh1);
}
.fac-card__head {
display: flex; align-items: flex-start; gap: var(--fra-s4);
margin-bottom: var(--fra-s6);
padding-bottom: var(--fra-s6);
border-bottom: 1px solid var(--fra-border);
}
.fac-card__icon {
width: 40px; height: 40px; border-radius: var(--fra-r-lg);
background: var(--fra-off); border: 1px solid var(--fra-border);
display: flex; align-items: center; justify-content: center;
color: var(--fra-grafite); flex-shrink: 0;
}
.fac-card__title {
font-family: var(--fra-ft); font-size: var(--fra-base);
font-weight: 600; color: var(--fra-nero); margin-bottom: 2px;
}
.fac-card__sub {
font-size: var(--fra-xs); color: var(--fra-grigio);
}
/* Abbonamento */
.fac-sub-body {
display: flex; flex-direction: column; gap: var(--fra-s5);
}
.fac-sub-counter {
display: flex; align-items: baseline; gap: var(--fra-s3);
padding: var(--fra-s6);
border-radius: var(--fra-r-xl);
background: var(--fra-off);
border: 1px solid var(--fra-border);
}
.fac-sub-counter__num {
font-family: var(--fra-ft); font-size: clamp(2.5rem,5vw,4rem);
font-weight: 600; line-height: 1; color: var(--fra-nero);
}
.fac-sub-counter__lbl {
font-size: var(--fra-sm); color: var(--fra-grigio);
}
.fac-sub-counter--expiring .fac-sub-counter__num { color: var(--fra-grafite); }
.fac-sub-counter--expired .fac-sub-counter__num { color: var(--fra-grigio); }
.fac-sub-info {
display: flex; flex-direction: column; gap: var(--fra-s3);
}
.fac-sub-info__row {
display: flex; align-items: center; justify-content: space-between;
font-size: var(--fra-sm);
}
.fac-sub-info__row span { color: var(--fra-grigio); }
.fac-sub-info__row strong { font-weight: 500; color: var(--fra-nero); }
.fac-sub-badge {
display: inline-flex; align-items: center;
padding: 2px 10px; border-radius: var(--fra-r-full);
font-size: var(--fra-xs); font-weight: 500;
}
.fac-sub-badge--active { background: var(--fra-off); color: var(--fra-nero); border: 1px solid var(--fra-border); }
.fac-sub-badge--expiring { background: var(--fra-off); color: var(--fra-grafite); border: 1px solid var(--fra-grigio-lt); }
.fac-sub-badge--expired { background: var(--fra-grey); color: var(--fra-grigio); border: 1px solid var(--fra-border); }
.fac-btn-renew {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--fra-s2); width: 100%;
padding: var(--fra-s3) var(--fra-s5);
font-family: var(--fra-ft); font-size: var(--fra-sm); font-weight: 500;
background: var(--fra-off); color: var(--fra-grigio);
border: 1.5px solid var(--fra-border); border-radius: var(--fra-r-lg);
cursor: not-allowed;
}
.fac-renew-note {
font-size: var(--fra-xs); color: var(--fra-grigio-lt);
text-align: center;
}
/* Alerts */
.fac-alert {
display: flex; align-items: center; gap: var(--fra-s3);
padding: var(--fra-s3) var(--fra-s4);
border-radius: var(--fra-r-lg);
font-size: var(--fra-sm); margin-bottom: var(--fra-s5);
border-left: 3px solid;
}
.fac-alert--ok { background: var(--fra-off); color: var(--fra-grafite); border-left-color: var(--fra-nero); }
.fac-alert--err { background: var(--fra-off); color: var(--fra-grafite); border-left-color: var(--fra-grigio); }
/* Form password */
.fac-form { display: flex; flex-direction: column; gap: var(--fra-s5); }
.fac-field { display: flex; flex-direction: column; gap: var(--fra-s2); }
.fac-field label {
font-family: var(--fra-ft); font-size: 10px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--fra-grigio); transition: color var(--fra-ease);
}
.fac-field:focus-within label { color: var(--fra-nero); }
.fac-input-wrap { position: relative; }
.fac-input-wrap input {
width: 100%; padding: var(--fra-s3) var(--fra-s10) var(--fra-s3) 0;
font-family: var(--fra-fb); font-size: var(--fra-base); font-weight: 400;
color: var(--fra-nero); background: transparent;
border: none; border-bottom: 1.5px solid var(--fra-border);
border-radius: 0; outline: none;
transition: border-color var(--fra-ease);
}
.fac-input-wrap::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 2px; background: var(--fra-nero);
transition: width .35s cubic-bezier(.16,1,.3,1);
}
.fac-input-wrap:focus-within::after { width: 100%; }
.fac-input-wrap input:focus { border-bottom-color: transparent; }
.fac-input-wrap input::placeholder { color: var(--fra-grigio-lt); }
.fac-eye {
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; padding: var(--fra-s2);
color: var(--fra-grigio-lt); transition: color var(--fra-ease);
}
.fac-eye:hover { color: var(--fra-nero); }
/* Strength bar */
.fac-strength {
display: flex; align-items: center; gap: var(--fra-s3);
margin-top: var(--fra-s2); opacity: 0;
transition: opacity var(--fra-ease);
}
.fac-strength.visible { opacity: 1; }
.fac-strength__bar {
flex: 1; height: 3px; background: var(--fra-border);
border-radius: var(--fra-r-full); overflow: hidden;
}
.fac-strength__fill {
height: 100%; width: 0; border-radius: var(--fra-r-full);
background: var(--fra-nero);
transition: width .3s ease, background .3s ease;
}
.fac-strength__lbl {
font-size: var(--fra-xs); color: var(--fra-grigio);
white-space: nowrap; min-width: 60px; text-align: right;
}
/* Submit */
.fac-btn-submit {
width: 100%; padding: var(--fra-s4);
font-family: var(--fra-ft); font-size: var(--fra-base); font-weight: 500;
background: var(--fra-nero); color: var(--fra-white);
border: none; border-radius: var(--fra-r-lg);
cursor: pointer; margin-top: var(--fra-s2);
transition: background var(--fra-ease), box-shadow var(--fra-ease), transform var(--fra-ease);
}
.fac-btn-submit:hover {
background: var(--fra-grafite);
box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.fac-btn-submit:active { transform: scale(.98); }
@media (max-width: 480px) {
.fac-wrap { padding-inline: var(--fra-s4); }
.fac-card { padding: var(--fra-s5); }
}
/* ══ SINGLE COURSE ══════════════════════════════════════════ */
#fra-course {
--frc-black: #1e1e1e;
--frc-white: #ffffff;
--frc-accent: #1e1e1e;
--frc-muted: #64748b;
--frc-border: #e2e8f0;
--frc-bg: #f8fafc;
--frc-radius: 12px;
}
.frc-wrap {
max-width: 860px;
margin: 0 auto;
padding: 0 24px;
}
/* Hero */
.frc-hero {
position: relative;
background: #1e1e1e; /* nero fisso, niente thumbnail */
padding: 64px 0 48px;
color: var(--frc-white);
}
.frc-hero__overlay { display: none; }
/* Thumbnail sotto l'hero */
.frc-thumb-wrap {
margin-top: -32px; /* si sovrappone leggermente all'hero */
margin-bottom: 40px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.12);
aspect-ratio: 16 / 6;
}
.frc-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Mobile */
@media (max-width: 640px) {
.frc-thumb-wrap {
margin-top: -20px;
border-radius: 10px;
aspect-ratio: 16 / 7;
}
}
.frc-hero__inner { position: relative; z-index: 1; }
.frc-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
margin-bottom: 20px;
opacity: .75;
}
.frc-breadcrumb a { color: inherit; text-decoration: none; }
.frc-breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.frc-hero__title {
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
margin: 0 0 16px;
color: var(--frc-white);
}
.frc-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 28px;
}
.frc-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
opacity: .85;
}
/* Progress nell'hero */
.frc-hero__progress { margin-top: 8px; }
.frc-prog-track {
height: 6px;
background: rgba(255,255,255,.2);
border-radius: 99px;
overflow: hidden;
margin-bottom: 10px;
}
.frc-prog-fill {
height: 100%;
background: var(--frc-white);
border-radius: 99px;
transition: width .5s ease;
}
.frc-prog-info {
display: flex;
justify-content: space-between;
font-size: 13px;
opacity: .85;
margin-bottom: 16px;
}
.frc-done-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.3);
padding: 6px 14px;
border-radius: 99px;
font-size: 13px;
font-weight: 600;
}
.frc-btn-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--frc-white);
color: var(--frc-black) !important;
padding: 10px 22px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition: opacity .2s;
}
.frc-btn-cta:hover { opacity: .88; }
/* Body */
.frc-body {
padding-top: 48px;
padding-bottom: 80px;
}
/* Notice */
.frc-notice {
display: flex;
gap: 16px;
padding: 24px;
border-radius: var(--frc-radius);
margin-bottom: 36px;
}
.frc-notice--locked {
background: #fafafa;
border: 1.5px solid var(--frc-border);
}
.frc-notice--expired {
background: #fff8f0;
border: 1.5px solid #fbbf24;
}
.frc-notice__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.06);
display: flex;
align-items: center;
justify-content: center;
}
.frc-notice--expired .frc-notice__icon { background: #fef3c7; }
.frc-notice__title {
font-size: 15px;
font-weight: 700;
color: var(--frc-black);
margin-bottom: 6px;
}
.frc-notice__text {
font-size: 14px;
color: var(--frc-muted);
line-height: 1.6;
margin: 0 0 16px;
}
.frc-btn-contact {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--frc-black);
color: var(--frc-white) !important;
padding: 9px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: opacity .2s;
}
.frc-btn-contact:hover { opacity: .82; }
/* Sezioni */
.frc-section { margin-bottom: 48px; }
.frc-section__title {
font-size: 1.15rem;
font-weight: 800;
color: var(--frc-black);
letter-spacing: -.01em;
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--frc-black);
}
/* Descrizione */
.frc-desc {
font-size: 15px;
line-height: 1.8;
color: #334155;
}
/* Curriculum accordion (details/summary nativi) */
.frc-module {
border: 1.5px solid var(--frc-border);
border-radius: var(--frc-radius);
overflow: hidden;
margin-bottom: 10px;
}
.frc-module__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
cursor: pointer;
list-style: none;
background: #fff;
user-select: none;
}
.frc-module__head::-webkit-details-marker { display: none; }
.frc-module__info { flex: 1; }
.frc-module__title {
font-size: 14px;
font-weight: 700;
color: var(--frc-black);
display: block;
margin-bottom: 3px;
}
.frc-module__meta {
font-size: 12px;
color: var(--frc-muted);
}
.frc-module__done { color: #16a34a; font-weight: 600; }
.frc-module__chevron {
transition: transform .25s ease;
flex-shrink: 0;
margin-left: 12px;
color: var(--frc-muted);
}
details[open] .frc-module__chevron { transform: rotate(180deg); }
.frc-module__lessons {
border-top: 1px solid var(--frc-border);
background: #fff;
}
/* Lezione */
.frc-lesson {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 20px;
border-bottom: 1px solid var(--frc-border);
text-decoration: none !important;
color: var(--frc-black) !important;
transition: background .15s;
}
.frc-lesson:last-child { border-bottom: none; }
a.frc-lesson:hover { background: var(--frc-bg); }
.frc-lesson--done { color: var(--frc-muted) !important; }
.frc-lesson--done .frc-lesson__title { text-decoration: line-through; opacity: .65; }
.frc-lesson__num {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid var(--frc-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
color: var(--frc-muted);
}
.frc-lesson--done .frc-lesson__num {
background: #dcfce7;
border-color: #16a34a;
color: #16a34a;
}
.frc-lesson__icon { color: var(--frc-muted); flex-shrink: 0; }
.frc-lesson__title { flex: 1; font-size: 14px; }
.frc-lesson__dur { font-size: 12px; color: var(--frc-muted); flex-shrink: 0; }
.frc-lesson__lock { color: #cbd5e1; flex-shrink: 0; }
/* Mobile */
@media (max-width: 640px) {
.frc-hero { padding: 40px 0 36px; }
.frc-hero__title { font-size: 1.5rem; }
.frc-body { padding-top: 32px; }
.frc-module__head { padding: 14px 16px; }
.frc-lesson { padding: 12px 16px; }
}
/* ══════════════════════════════════════════════════════════════
LEARNPRESS MODERN LESSON — RESKIN COMPLETO
Sostituisce tutto il CSS LP precedentemente aggiunto
══════════════════════════════════════════════════════════════ */
/* ── TOPBAR ─────────────────────────────────────────────────── */
#popup-header {
background-color: #000 !important;
}
#popup-header .course-title a {
color: #fff !important;
font-size: 22px !important;
font-weight: 300 !important;
text-decoration: none !important;
}
#popup-header .number {
color: rgba(255,255,255,0.55) !important;
font-size: 12px !important;
}
#popup-header .learn-press-progress {
height: 4px !important;
background: rgba(255,255,255,0.2) !important;
border-radius: 99px !important;
overflow: hidden !important;
}
#popup-header .learn-press-progress .learn-press-progress__active {
background: #fff !important;
border-radius: 99px !important;
}
#popup-header .back-course {
color: rgba(255,255,255,0.6) !important;
font-size: 13px !important;
text-decoration: none !important;
padding: 6px 14px !important;
border-radius: 6px !important;
background: rgba(255,255,255,0.08) !important;
transition: background .15s !important;
}
#popup-header .back-course:hover {
background: rgba(255,255,255,0.16) !important;
color: #fff !important;
}
/* Titolo "Curriculum" */
.lp-course-curriculum__title {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
color: #94a3b8 !important;
padding: 16px 16px 6px !important;
margin: 0 !important;
}
#popup-sidebar .course-curriculum {
top: 0 !important;
}
.content-item-summary > h1.course-item-title.lesson-title {
display: none !important;
}
/* Info (4 Sections · 13 Lessons) */
.course-curriculum-info {
padding: 0 16px 12px !important;
display: none !important;
align-items: center !important;
border-bottom: 1px solid #eef0f4 !important;
}
.course-curriculum-info__left {
display: flex !important;
align-items: center !important;
gap: 0 !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex-wrap: wrap !important;
}
.course-curriculum-info__left li {
font-size: 12px !important;
color: #64748b !important;
font-weight: 500 !important;
}
.course-curriculum-info__left li::after {
content: "·" !important;
margin: 0 6px !important;
color: #cbd5e1 !important;
}
.course-curriculum-info__left li:last-child::after { display: none !important; }
.course-curriculum-info__right { display: none !important; }
/* Sezioni */
.course-sections { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.course-section { border-bottom: 1px solid #eef0f4 !important; }
.course-section-header {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 13px 16px !important;
background: #fafbfc !important;
cursor: pointer !important;
transition: background .15s !important;
}
.course-section-header:hover { background: #f1f4f8 !important; }
.section-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
color: #94a3b8 !important;
flex-shrink: 0 !important;
}
.section-toggle i { font-size: 16px !important; }
.course-section__title {
flex: 1 !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
color: #1a1a1a !important;
}
.course-section__description { display: none !important; }
.section-count-items {
font-size: 11px !important;
font-weight: 700 !important;
color: #64748b !important;
background: #e8ecf2 !important;
border-radius: 99px !important;
min-width: 22px !important;
height: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 7px !important;
flex-shrink: 0 !important;
}
/* Items lezione */
.course-section__items { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.course-item { border-bottom: 1px solid #f4f6f9 !important; position: relative !important; }
.course-item__link {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 11px 16px !important;
text-decoration: none !important;
color: #334155 !important;
transition: background .15s !important;
border-left: 3px solid transparent !important;
}
.course-item__link:hover { background: #f4f6f9 !important; color: #1a1a1a !important; }
.course-item.current .course-item__link {
background: #f0f4ff !important;
border-left-color: #1a1a1a !important;
color: #1a1a1a !important;
}
.course-item__info { flex-shrink: 0 !important; }
.course-item-ico.lp_lesson {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
border: 1.5px solid #d1d8e4 !important;
background: #fff !important;
font-size: 9px !important;
color: #94a3b8 !important;
transition: all .15s !important;
}
.course-item.current .course-item-ico.lp_lesson {
background: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #fff !important;
}
.course-item__link:hover .course-item-ico.lp_lesson {
border-color: #1a1a1a !important;
color: #1a1a1a !important;
}
.course-item-ico.in-progress { display: none !important; }
.course-item-order { display: none !important; }
.course-item__content {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 8px !important;
}
.course-item-title {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: inherit !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.course-item.current .course-item-title { font-weight: 700 !important; }
.course-item__right .duration {
font-size: 11px !important;
color: #94a3b8 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.course-item__status { display: none !important; }
/* ── CONTENUTO LEZIONE ──────────────────────────────────────── */
#popup-content {
background: #f4f6f9 !important;
margin: 50px 0 50px 0 !important;
padding-top: 70px;
}
.content-item-wrap {
background: #fff !important;
border-radius: 12px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
padding: 20px !important;
margin-bottom: 24px !important;
}
.content-item-wrap .course-item-title,
.content-item-wrap h1 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
color: #1a1a1a !important;
margin-bottom: 24px !important;
}
.content-item-wrap .content-item-description,
.content-item-wrap .entry-content {
font-size: 15px !important;
line-height: 1.8 !important;
color: #334155 !important;
}
.content-item-wrap iframe {
width: 100% !important;
border-radius: 10px !important;
aspect-ratio: 16/9 !important;
height: auto !important;
margin-bottom: 20px !important;
}
/* Bottone "Completa lezione" */
.lp-button.complete-item,
.lp-btn-complete-item,
button.complete-item {
background: #1a1a1a !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 28px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: opacity .2s !important;
display: inline-block !important;
}
.lp-button.complete-item:hover,
.lp-btn-complete-item:hover,
button.complete-item:hover {
opacity: .78 !important;
background: #1a1a1a !important;
color: #fff !important;
}
/* ── FOOTER NAVIGAZIONE ─────────────────────────────────────── */
#popup-footer {
background: #fff !important;
border-top: 1px solid #eef0f4 !important;
left: 320px !important;
}
body.lp-sidebar-toggle--close #popup-footer {
left: 0 !important;
}
#popup-footer .course-item-nav .prev a,
#popup-footer .course-item-nav .next a {
color: #64748b !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
#popup-footer .course-item-nav .prev:hover a,
#popup-footer .course-item-nav .next:hover a {
color: #1a1a1a !important;
}
/* ══ CONTENT ITEM SUMMARY — LISTE ══════════════════════════ */
.content-item-summary ul {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px !important;
}
.content-item-summary ul li {
position: relative !important;
padding: 6px 0 6px 20px !important;
font-size: 14px !important;
line-height: 1.75 !important;
color: #334155 !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.content-item-summary ul li:last-child {
border-bottom: none !important;
}
/* Pallino custom */
.content-item-summary ul li::before {
content: "" !important;
position: absolute !important;
left: 4px !important;
top: 14px !important;
width: 6px !important;
height: 6px !important;
background: #1a1a1a !important;
border-radius: 50% !important;
}
.content-item-summary ul li b {
color: #1a1a1a !important;
font-weight: 700 !important;
}
.content-item-summary ul li span {
color: #475569 !important;
}
/* ══ MODAL COMPLETE LESSON ══════════════════════════════════ */
.lp-modal-content {
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
border: none !important;
max-width: 420px !important;
width: 90% !important;
}
.lp-modal-header {
padding: 24px 28px 0 !important;
border-bottom: none !important;
background: #fff !important;
}
.lp-modal-header .modal-title {
font-size: 17px !important;
font-weight: 800 !important;
color: #1a1a1a !important;
letter-spacing: -.02em !important;
margin: 0 !important;
}
.lp-modal-body {
padding: 12px 28px 24px !important;
background: #fff !important;
}
.lp-modal-body .pd-2em {
font-size: 14px !important;
color: #475569 !important;
line-height: 1.6 !important;
padding: 0 !important;
}
.lp-modal-footer {
display: flex !important;
justify-content: flex-end !important;
gap: 10px !important;
padding: 16px 28px !important;
background: #f8fafc !important;
border-top: 1px solid #eef0f4 !important;
}
/* Bottone No */
.lp-modal-footer .btn-no {
background: transparent !important;
color: #64748b !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 10px 22px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all .15s !important;
}
.lp-modal-footer .btn-no:hover {
background: #f1f5f9 !important;
color: #1a1a1a !important;
border-color: #cbd5e1 !important;
}
/* Bottone Sì */
.lp-modal-footer .btn-yes {
background: #1a1a1a !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
padding: 10px 22px !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: opacity .15s !important;
}
.lp-modal-footer .btn-yes:hover {
opacity: .8 !important;
}
.content-item-summary .form-button {
display: block !important;
text-align: right !important;
}