/* ╔══════════════════════════════════════════════════════════════════╗ ║ I FONT SONO DENTRO IL SITO, NON DA GOOGLE ║ ║ ║ ║ Scaricarli da Google Fonts manderebbe l'indirizzo di ogni ║ ║ visitatore a un terzo prima ancora che legga una riga (c'è un ║ ║ test: `test_nessuna_risorsa_di_terze_parti_nelle_pagine`). ║ ║ Licenza SIL Open Font License, in `static/fonts/OFL-*.txt`. ║ ║ `font-display: swap`: il testo si vede subito con il font del ║ ║ sistema e cambia appena arriva il nostro. ║ ╚══════════════════════════════════════════════════════════════════╝ */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/nunito-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/nunito-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/nunito-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/nunito-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/nunito-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/nunito-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/nunito-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/nunito-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lora-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lora-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lora-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lora-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lora-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lora-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lora-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lora-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lora-latin-500-italic.woff2") format("woff2"); } /* SideraMea Web — foglio di stile. * * Identità visiva ereditata dall'app desktop: accento viola/indaco, card * arrotondate, motivo "ruota zodiacale + stella". Sul desktop le card erano * disegnate a mano su Canvas perché Tkinter non ha angoli arrotondati; qui * sono tre righe di CSS. * * Il tema è uno solo, scuro. La ruota zodiacale e le letture restano su * fondo chiaro: i colori degli elementi e delle icone * dei pianeti (in chart_draw.py) sono tarati per fondo chiaro, e una card * chiara su pagina scura legge come una scelta grafica — come una stampa * appesa a una parete scura — non come una toppa. */ :root { --accento: #7c5cff; --accento-scuro: #5b3fd6; --accento-tenue: rgba(124, 92, 255, 0.14); /* Due accenti secondari. Servono alle tre card della home, che nel progetto grafico hanno ciascuna una dominante diversa — viola, blu, magenta — e a tutte le sfumature che attraversano più di un colore. */ --accento-blu: #4aa8ff; /* Oro caldo, non magenta: la figura delle letture è un libro illuminato a candela, e una cornice magenta su un'immagine ambrata litiga. Il colore segue l'immagine, non il contrario. */ --accento-oro: #e8a33d; --sfondo: #0e0c18; --sfondo-alt: #16132a; --card: #1b1733; --card-bordo: rgba(255, 255, 255, 0.08); --testo: #ece9f7; --testo-tenue: #a49fc4; /* Era #6f6a92: sul fondo delle schede faceva 3,4:1, sotto il 4,5:1 consigliato per il testo piccolo — e il testo «debole» è quasi sempre piccolo («da 2 aspetti», le date, le etichette). Così fa circa 5:1 e resta ben distinto da --testo-tenue. */ --testo-debole: #8a85ad; --successo: #2a9d8f; --errore: #e5566d; --attenzione: #e9b949; --raggio: 16px; --raggio-piccolo: 10px; /* Spazio fra la barra in cima e il contenuto. Sta in una variabile perché l'eroe della home deve annullarlo esattamente per stare attaccato alla barra: due numeri uguali scritti in due punti diversi prima o poi smettono di esserlo. */ --spazio-sopra: 32px; --ombra: 0 10px 40px rgba(0, 0, 0, 0.45); /* Superficie "vetro": fondo semitrasparente più sfocatura di quello che ci passa sotto. È quello che dà profondità alla barra in cima quando il contenuto le scorre dietro. */ --vetro: rgba(22, 19, 42, 0.72); --alone: 0 8px 30px rgba(124, 92, 255, 0.35); /* I font del sito (6/10/2026): Nunito per l'interfaccia, morbido e arrotondato ma chiaro anche piccolo; Lora per titoli e letture, un serif caldo fatto per leggere a lungo. Prima erano quelli del dispositivo (Corbel su Windows, San Francisco su iPhone, Roboto su Android) e il sito cambiava faccia da uno all'altro. */ --serif: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ UN TEMA SOLO, SCURO ║ ║ ║ ║ C'era anche un tema chiaro, tolto il 03/10/2026. Il sito è ║ ║ disegnato per il buio — i cieli dietro le schede, il quadrante, ║ ║ le icone lucide, i segni — e nel chiaro ogni figura diventava ║ ║ un'eccezione: pastiglie e quadrante restavano scuri lo stesso, ║ ║ i segni chiedevano un'ombra apposta per non sparire. Ogni cosa ║ ║ nuova andava controllata due volte, e la versione guardata ║ ║ meno era quella dove i difetti restavano più a lungo. ║ ║ ║ ║ Il caso serio per un fondo chiaro — leggere un testo lungo — è ║ ║ già coperto: le letture sono «pagina di libro» su carta chiara, ║ ║ e i PDF hanno la loro tavolozza. `color-scheme` dice al browser ║ ║ di disegnare scuri anche i suoi controlli: barre di ║ ║ scorrimento, calendari, menu a tendina. ║ ╚══════════════════════════════════════════════════════════════════╝ */ :root { color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--sfondo); color: var(--testo); font-family: var(--sans); font-size: 16px; line-height: 1.6; /* ── Il piede resta in fondo alla finestra ──────────────────────── Su una pagina corta — una scheda chiusa, un modulo di accesso, un messaggio d'errore — il piede si fermava subito sotto il contenuto, lasciando sotto di sé una fascia di sfondo vuota. Non è un difetto di allineamento: è l'impressione di una pagina interrotta a metà, ed è proprio sulle pagine corte che si presenta — quelle che vede chi non si è ancora registrato. Tre righe, e nessuna posizione fissa: il piede **non** è incollato allo schermo. Sta in fondo quando il contenuto non riempie la finestra, e scorre via normalmente quando la riempie. Un piede `position: fixed` ruberebbe spazio a ogni pagina lunga. `flex: 1` sta su `.contenuto` più sotto: è lui a gonfiarsi per occupare lo spazio che avanza. */ min-height: 100vh; display: flex; flex-direction: column; /* Le fasce a tutta larghezza (l'eroe della home) escono dal contenitore centrato con un margine negativo: senza questo comparirebbe una barra di scorrimento orizzontale di pochi pixel. */ overflow-x: hidden; } /* Cielo sullo sfondo, fisso: scorrendo la pagina il contenuto si muove e il cielo no, che è il motivo per cui sembra lontano. * * Solo sfumature, nessuna immagine: le scintille stanno nel livello * separato qui sotto. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 15% 12%, rgba(124, 92, 255, 0.20), transparent 45%), radial-gradient(circle at 85% 6%, rgba(74, 168, 255, 0.13), transparent 42%), radial-gradient(circle at 60% 90%, rgba(232, 163, 61, 0.08), transparent 45%); } /* Le scintille in un livello tutto suo, e non insieme alle sfumature qui * sopra, per una ragione precisa: `opacity` agisce sull'intero elemento, * quindi finché stavano nello stesso strato non si poteva attenuare le * une senza spegnere anche le altre. * * `stelle.png` non è una trama di stelle fini ma un pugno di scintille * dorate grandi: ripetuta fitta e a piena intensità coprirebbe la pagina * di riflessi. Tassello largo e opacità bassa la rendono un luccichio * appena percepibile. Se anche così disturba, si toglie cancellando * questo blocco — niente altro ci fa affidamento. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("/static/img/stelle.png"); background-repeat: repeat; /* Il tassello fa due cose insieme: decide la densità *e* la dimensione delle scintille. Allargarlo per diradarle le ingrandiva anche, e da stelle diventavano aloni sfocati. Rimpicciolirlo sotto la misura originale (1000px) le riduce a punti luminosi: più fitte, ma molto meno ingombranti. L'opacità va tarata sulla pagina più spoglia — la prova, l'accesso — non sulla home, dove il contenuto le nasconde comunque. */ background-size: 620px 620px; opacity: 0.03; } .contenuto { position: relative; z-index: 1; padding-top: var(--spazio-sopra); flex: 1; } a { color: var(--accento); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.01em; margin: 0 0 0.5em; } h1 { font-size: 2.1rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.1rem; } /* `width: 100%` accanto a `max-width`, e non solo `max-width`. * * Senza, il contenitore si comportava da «largo quanto il contenuto»: su * una pagina piena arrivava a 1180 px e sembrava giusto, su una pagina * corta — l'area personale senza il profilo del giorno scelto — si * accartocciava a metà larghezza, con le schede strette in mezzo a due * fasce di vuoto. Lo stesso foglio di stile dava due larghezze diverse a * seconda di quanto testo c'era dentro, ed è il motivo per cui il * difetto non si è visto finché la pagina aveva il pannello. * * `box-sizing` c'è già globale, ma vale la pena ricordarlo qui: senza, * il 100% più i 40 px di padding farebbe comparire una barra di * scorrimento orizzontale. */ .contenitore { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; } .stretto { max-width: 460px; } /* --- Barra superiore --- * Fissata in cima e semitrasparente: il contenuto le scorre dietro * sfocato. `position: sticky` invece di `fixed` perché sticky continua a * occupare il suo spazio nel flusso, e non serve compensare con un * padding sul contenuto — compensazione che si dimentica di aggiornare * ogni volta che cambia l'altezza della barra. */ .barra { position: sticky; top: 0; z-index: 50; background: var(--vetro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--card-bordo); margin-bottom: 0; } .barra-interno { display: flex; align-items: center; gap: 20px; padding: 14px 20px; } .marchio { display: flex; align-items: center; gap: 12px; color: var(--testo); } .marchio:hover { text-decoration: none; } .marchio .logo-marchio { width: 38px; height: 38px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(124, 92, 255, 0.35)); } .marchio-testo { display: flex; flex-direction: column; line-height: 1.1; } .marchio-nome { font-family: var(--serif); font-size: 1.45rem; } .marchio-slogan { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--testo-debole); } .barra nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .barra nav a { color: var(--testo-tenue); font-size: 0.94rem; padding: 8px 14px; border-radius: 999px; } .barra nav a:hover { color: var(--testo); background: var(--accento-tenue); text-decoration: none; } /* La voce della pagina in cui ci si trova: evidenziata, con una riga sotto. Serve a sapere dove si è senza doverlo dedurre dall'URL. */ .barra nav a.attivo { color: var(--testo); position: relative; } .barra nav a.attivo::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accento); } /* Il pulsante dell'area personale: un'immagine disegnata, con il testo dentro. Niente sfondo al passaggio del mouse — ce l'ha già suo — e la riga sotto della voce attiva non serve: si illumina appena. */ .barra nav a.menu-area { padding: 0 2px; display: inline-flex; align-items: center; } .barra nav a.menu-area img { display: block; height: 38px; width: auto; transition: filter 0.15s ease, transform 0.15s ease; } .barra nav a.menu-area:hover { background: transparent; } .barra nav a.menu-area:hover img { filter: brightness(1.12); transform: translateY(-1px); } .barra nav a.menu-area.attivo img { filter: brightness(1.18) drop-shadow(0 0 6px rgba(124, 92, 255, 0.55)); } .barra nav a.menu-area.attivo::after { display: none; } /* Lingua e tema: due pastiglie discrete, staccate dalla navigazione. */ .pillola { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--card-bordo); border-radius: 999px; padding: 7px 13px !important; font-size: 0.85rem !important; } .pillola:hover { border-color: var(--accento); } /* Il ☰ e la sua casella: spenti su schermo largo, dove le voci stanno in fila. La spiegazione è in base.html, sopra la casella. */ .menu-interruttore { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .menu-pulsante { display: none; } @media (max-width: 760px) { .barra-interno { flex-wrap: wrap; gap: 0 10px; padding: 10px 16px; } .marchio .logo-marchio { width: 34px; height: 34px; } .marchio-nome { font-size: 1.3rem; } .marchio-slogan { display: none; } .menu-pulsante { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; /* 44: il dito, non il mouse */ border-radius: 12px; cursor: pointer; margin-bottom: 0; border: 1px solid var(--card-bordo); } .menu-interruttore:focus-visible + .menu-pulsante { outline: 2px solid var(--accento); outline-offset: 2px; } /* Tre righe disegnate, non il carattere ☰: quello cambia spessore da un telefono all'altro. Aperto diventano una croce. */ .menu-righe, .menu-righe::before, .menu-righe::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: #c4b5fd; transition: transform 0.2s ease, opacity 0.2s ease; } .menu-righe { position: relative; } .menu-righe::before, .menu-righe::after { content: ""; position: absolute; left: 0; } .menu-righe::before { top: -6px; } .menu-righe::after { top: 6px; } .menu-interruttore:checked + .menu-pulsante .menu-righe { background: transparent; } .menu-interruttore:checked + .menu-pulsante .menu-righe::before { transform: translateY(6px) rotate(45deg); } .menu-interruttore:checked + .menu-pulsante .menu-righe::after { transform: translateY(-6px) rotate(-45deg); } /* Le voci: chiuse finché non si tocca ☰, poi in colonna a tutta larghezza, una per riga — più facili da prendere col pollice di una fila di parole. Lingua ed Esci in fondo, affiancati. */ .barra nav { display: none; } .menu-interruttore:checked ~ nav { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin: 10px 0 6px; padding-top: 8px; gap: 2px 8px; border-top: 1px solid var(--card-bordo); } .menu-interruttore:checked ~ nav > a:not(.pillola):not(.btn) { flex: 1 1 100%; padding: 12px; border-radius: 10px; font-size: 1rem; } .menu-interruttore:checked ~ nav > a.attivo::after { left: 12px; right: auto; width: 24px; } /* Nel menu a colonna il pulsante disegnato resta della sua misura, un po' più grande, allineato a sinistra come le altre voci. */ .menu-interruttore:checked ~ nav > a.menu-area { padding: 8px 0; } .menu-interruttore:checked ~ nav > a.menu-area img { height: 44px; } /* Nel menu a colonna il pulsante disegnato va per primo: «Area personale» per chi è entrato, «Accedi» per chi deve farlo. Solo qui: sullo schermo grande «Accedi» resta accanto a «Registrati». */ .menu-interruttore:checked ~ nav > a.menu-area { order: -1; } .menu-interruttore:checked ~ nav > .pillola, .menu-interruttore:checked ~ nav > form, .menu-interruttore:checked ~ nav > .btn { margin-top: 10px; } } /* --- Card --- * Una sfumatura appena percettibile invece di un colore piatto: dà alla * superficie l'aria di essere illuminata dall'alto. La differenza fra i * due estremi è di pochi punti di luminosità — se si nota, è troppa. */ .card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), transparent 55%), var(--card); border: 1px solid var(--card-bordo); border-radius: var(--raggio); padding: 24px; box-shadow: var(--ombra); } .card + .card { margin-top: 20px; } .card-titolo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .card-titolo h2, .card-titolo h3 { margin: 0; } /* --- Moduli --- */ label { display: block; font-size: 0.86rem; color: var(--testo-tenue); margin-bottom: 6px; } .campo { margin-bottom: 18px; } .aiuto { font-size: 0.8rem; color: var(--testo-debole); margin-top: 4px; } /* Le scelte che servono a pochi, ripiegate (vedi persona_form.html). Il sommario sembra un collegamento e non un titolo: è un invito ad aprire, non una sezione da compilare. */ .campo-avanzato > summary { cursor: pointer; width: fit-content; list-style: none; font-size: 0.86rem; color: var(--testo-tenue); } .campo-avanzato > summary::-webkit-details-marker { display: none; } .campo-avanzato > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform 0.15s ease; color: var(--accento); } .campo-avanzato[open] > summary { margin-bottom: 12px; } .campo-avanzato[open] > summary::before { transform: rotate(90deg); } .campo-avanzato > summary:hover { color: var(--testo); } /* I campi dove si scrive. * * Erano `--sfondo-alt`, un blu-grigio che accanto al viola delle schede * leggeva grigio e basta — Giulio l'ha notato nel modulo di accesso, che * e' la prima cosa che un cliente tocca. Ora e' viola notte con un velo * di accento in alto e il bordo appena violetto: lo stesso vetro delle * pastiglie, non un rettangolo di un altro colore. * * Anche number, search, url e tel: non erano nell'elenco e il browser li * disegnava a modo suo — il campo «Anno» del ritorno solare era grigio * chiaro in mezzo a una pagina scura. */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], select, textarea { width: 100%; padding: 11px 13px; background: linear-gradient(180deg, rgba(124, 92, 255, 0.10), rgba(124, 92, 255, 0.03) 60%), #100d20; border: 1px solid color-mix(in srgb, var(--accento) 26%, var(--card-bordo)); border-radius: var(--raggio-piccolo); color: var(--testo); font-family: inherit; font-size: 0.97rem; } /* Il browser, compilando da solo email e password, colora il campo di un azzurro chiaro che non c'entra niente: si rimette il nostro fondo e il nostro testo. */ input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--testo); -webkit-box-shadow: 0 0 0 1000px #15112a inset; caret-color: var(--testo); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); } input:disabled, select:disabled { opacity: 0.45; cursor: not-allowed; } /* L'occhio dentro il campo password (lo aggiunge static/js/password.js). Il campo lascia spazio a destra perché il testo non ci finisca sotto; il pulsante è 36 px, abbastanza per il pollice senza ingombrare. La sbarra sull'occhio dice «adesso è nascosta»: tolta, si vede. */ .campo-password { position: relative; display: block; } .campo-password input { padding-right: 46px; } .mostra-password { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--testo-debole); cursor: pointer; } .mostra-password:hover { color: var(--testo); background: var(--accento-tenue); } .mostra-password:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; } .mostra-password[aria-pressed="true"] { color: #c4b5fd; } .mostra-password[aria-pressed="true"] .sbarra { display: none; } /* I selettori nativi di data/ora sono bianchi su fondo scuro: va invertita l'icona, altrimenti sparisce. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.75); } .riga { display: flex; gap: 16px; flex-wrap: wrap; } .riga > * { flex: 1 1 180px; } .checkbox { display: flex; align-items: center; gap: 9px; } .checkbox input { width: auto; } .checkbox label { margin: 0; font-size: 0.92rem; color: var(--testo); } /* --- Pulsanti --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--accento), #9b6cff 55%, var(--accento-scuro)); color: #fff; font-family: inherit; font-size: 0.96rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(124, 92, 255, 0.28); transition: box-shadow 0.18s, transform 0.08s, filter 0.18s; } .btn:hover { filter: brightness(1.08); box-shadow: var(--alone); text-decoration: none; color: #fff; } .btn:active { transform: translateY(1px); } .btn-secondario { background: transparent; border: 1px solid var(--card-bordo); color: var(--testo); box-shadow: none; } .btn-secondario:hover { background: var(--accento-tenue); color: var(--testo); box-shadow: none; filter: none; } .btn-piccolo { padding: 7px 15px; font-size: 0.86rem; } .btn-pericolo { background: transparent; border: 1px solid rgba(229, 86, 109, 0.4); color: var(--errore); box-shadow: none; } .btn-pericolo:hover { background: rgba(229, 86, 109, 0.12); color: var(--errore); box-shadow: none; filter: none; } /* --- Avvisi --- */ .avviso { padding: 13px 16px; border-radius: var(--raggio-piccolo); border-left: 3px solid; font-size: 0.9rem; margin-bottom: 18px; } .avviso-errore { background: rgba(229, 86, 109, 0.1); border-color: var(--errore); color: #ffb3c0; } .avviso-attenzione { background: rgba(233, 185, 73, 0.1); border-color: var(--attenzione); color: #f2d79a; } .avviso-info { background: var(--accento-tenue); border-color: var(--accento); color: var(--testo); } /* Marchio usato come illustrazione in un riquadro ancora vuoto. La misura sta qui e non nell'SVG perché lo stesso file serve anche da logo nella barra e nel piè di pagina, a tre grandezze diverse: dimensioni scritte dentro il file le fisserebbe per tutti. */ .segnaposto-vuoto .logo-marchio { width: 84px; height: 84px; opacity: 0.4; } /* --- Ruota zodiacale: sempre su fondo chiaro --- */ .ruota-contenitore { background: #ffffff; border-radius: var(--raggio); padding: 12px; display: flex; justify-content: center; align-items: center; } .ruota-svg { width: 100%; height: auto; max-width: 620px; display: block; } /* --- Tabelle --- */ table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th { text-align: left; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--testo-debole); padding: 8px 10px; border-bottom: 1px solid var(--card-bordo); } td { padding: 9px 10px; border-bottom: 1px solid var(--card-bordo); } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--accento-tenue); } .simbolo { font-size: 1.12rem; color: var(--accento); width: 1.6em; display: inline-block; } .retrogrado { color: var(--errore); font-size: 0.78rem; font-weight: 600; } .mono { font-variant-numeric: tabular-nums; } /* Un aspetto con orbo stretto conta più di uno largo: si vede dal peso. */ .forza-forte { font-weight: 600; } .forza-media { opacity: 0.88; } .forza-debole { opacity: 0.62; } .pallino { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; } /* --- Griglie --- */ .griglia { display: grid; gap: 20px; } .griglia-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .griglia-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .griglia-tema { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; } /* `minmax(0, 1fr)` e non `1fr`. Sembrano la stessa cosa e non lo sono: le colonne di una griglia hanno `min-width: auto`, cioè **non si restringono sotto il contenuto che contengono**. Con dentro la ruota o una tabella, la colonna resta larga quanto quelle, e a trascinarsi dietro tutta la pagina. `minmax(0, …)` toglie quel pavimento e permette di rimpicciolire. */ @media (max-width: 900px) { .griglia-tema { grid-template-columns: minmax(0, 1fr); } } /* --- Schede --- */ .schede { display: flex; gap: 4px; border-bottom: 1px solid var(--card-bordo); margin-bottom: 20px; flex-wrap: wrap; } .scheda { padding: 10px 17px; color: var(--testo-tenue); border-bottom: 2px solid transparent; font-size: 0.93rem; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; } .scheda:hover { color: var(--testo); text-decoration: none; } .scheda.attiva { color: var(--accento); border-bottom-color: var(--accento); font-weight: 600; } .scheda.bloccata { opacity: 0.4; cursor: not-allowed; } .scheda.bloccata:hover { color: var(--testo-tenue); } /* L'icona nella scheda del pannello. Sta un gradino sotto l'etichetta — più tenue e leggermente più piccola — perché il suo lavoro è aiutare a ritrovare la scheda giusta con la coda dell'occhio, non farsi leggere. Un'icona che compete con la parola accanto rallenta invece di aiutare: l'occhio deve decidere due volte. */ .scheda { display: inline-flex; align-items: center; gap: 7px; } .scheda-icona { font-size: 0.95em; opacity: 0.75; line-height: 1; } .scheda.attiva .scheda-icona { opacity: 1; } /* Le intestazioni ordinabili. Restano collegamenti veri: l'ordinamento finisce nell'indirizzo, quindi si ricarica, si mette fra i preferiti e funziona anche senza JavaScript — che in questa pagina non c'è. */ th a.ordina { color: inherit; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } th a.ordina:hover { color: var(--accento); text-decoration: none; } .freccia-ordine { font-size: 0.75em; opacity: 0.45; } th a.ordina.attivo { color: var(--accento); } th a.ordina.attivo .freccia-ordine { opacity: 1; } .pannello { display: none; } .pannello.attivo { display: block; } /* --- Elenco persone --- */ .persona-riga { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--card-bordo); border-radius: var(--raggio-piccolo); margin-bottom: 10px; background: var(--sfondo-alt); } .persona-riga:hover { border-color: var(--accento); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ IL TUO PROFILO, NELL'ELENCO ║ ║ ║ ║ La riga del titolare sta in cima, con bordo e velatura oro e il ║ ║ distintivo accanto al nome; sotto, l'etichetta «Familiari e ║ ║ amici» e le altre righe come sempre, con in più il piccolo ║ ║ «Questo sono io» per spostare il distintivo. L'oro è lo stesso ║ ║ della testa della scheda Oggi e del diario dei sogni. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .persona-riga.persona-tu { border-color: rgba(232, 184, 74, 0.55); background: linear-gradient(150deg, rgba(232, 184, 74, 0.10), transparent 60%), var(--sfondo-alt); } .persona-riga.persona-tu:hover { border-color: #e8b84a; } .badge-tu { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; vertical-align: middle; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2a1d0a; background: linear-gradient(135deg, #ffe9a8, #e8b84a 60%, #c9962a); } .persone-gruppo { margin: 18px 0 8px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--testo-debole); } .sono-io-modulo { display: inline; } .sono-io { white-space: nowrap; } .sono-io .btn-ico { color: #c4b5fd; } .sono-io:hover { border-color: #e8b84a; } .sono-io:hover .btn-ico { color: #e8b84a; } /* Il legame (partner, famiglia, amicizia, lavoro): un'icona piccola accanto al nome nell'elenco e una fila di scelte nel modulo. L'icona arriva da `static/img/legame-*.png`; finché il file non c'è si vede il segno tipografico in `data-glifo`, come per i pianeti. */ .legame-icona { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--icona, none) center / contain no-repeat; color: #e8b84a; font-size: 0.9rem; line-height: 1; } .legame-icona::before { content: attr(data-glifo); } .legame-icona[style*="url"]::before { content: ""; } .badge-legame { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 1px 9px 1px 3px; border-radius: 999px; vertical-align: middle; font-size: 0.74rem; color: var(--testo-tenue); border: 1px solid var(--card-bordo); } /* Accanto al titolo della pagina della persona: stessi distintivi dell'elenco, un po' più grandi perché il titolo è grande. */ .titolo-persona { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .titolo-persona .badge-tu { margin-left: 0; font-size: 0.72rem; padding: 3px 12px; font-family: var(--sans); font-weight: 600; } .badge-legame-grande { margin-left: 0; font-size: 0.86rem; padding: 3px 12px 3px 5px; gap: 7px; font-family: var(--sans); font-weight: 500; } .badge-legame-grande .legame-icona { width: 28px; height: 28px; } .legami { display: flex; flex-wrap: wrap; gap: 8px; } .legame-voce { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; cursor: pointer; border: 1px solid var(--card-bordo); font-size: 0.9rem; margin: 0; } .legame-voce input { width: auto; margin: 0; accent-color: #e8b84a; position: absolute; opacity: 0; pointer-events: none; } .legame-voce:has(input:checked) { border-color: #e8b84a; background: rgba(232, 184, 74, 0.10); } .legame-voce:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; } .legame-voce .legame-icona { width: 26px; height: 26px; font-size: 1rem; } .legame-nessuno { color: var(--testo-debole); } /* La nota sotto «Il tuo profilo» nel modulo della prima persona. */ .prima-persona { margin: -6px 0 16px; padding: 8px 12px; border-left: 2px solid #e8b84a; border-radius: 0 8px 8px 0; background: rgba(232, 184, 74, 0.08); line-height: 1.5; } .persona-info { flex: 1; min-width: 0; } .persona-nome { font-weight: 600; } .persona-dettaglio { font-size: 0.85rem; color: var(--testo-tenue); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ SUL TELEFONO I PULSANTI VANNO SOTTO, NON ACCANTO ║ ║ ║ ║ In fila, i tre pulsanti (Apri, Modifica, Elimina) non si ║ ║ restringono e prendono quasi tutta la larghezza: su un iPhone ║ ║ alla colonna del testo restavano una trentina di pixel. Le ║ ║ parole andavano a capo una per riga, e quelle più lunghe di ║ ║ così — «Rimini,», «Emilia-» — uscivano dalla colonna e finivano ║ ║ sotto «Apri». Visto su un telefono vero, non in prova. ║ ║ ║ ║ Sotto i 620 px il testo prende la riga intera e i pulsanti ║ ║ scendono sotto. Elimina va in fondo a destra, staccato dagli ║ ║ altri: è l'unico che non si annulla, e accanto a «Modifica» si ║ ║ preme per sbaglio. Vale anche per le righe dell'archivio, che ║ ║ usano la stessa classe. ║ ╚══════════════════════════════════════════════════════════════════╝ */ @media (max-width: 620px) { .persona-riga { flex-wrap: wrap; gap: 12px 8px; } .persona-info { flex: 1 1 100%; } .persona-riga > form { margin: 0 0 0 auto; } /* Il titolo della scheda e i suoi comandi: con «Persone salvate» e «Aggiungi persona» affiancati il titolo andava su due righe e il conteggio restava sospeso a metà. Il titolo prende la sua riga, i comandi stanno sotto. */ .card-titolo { flex-wrap: wrap; row-gap: 10px; } } /* --- Stato "in caricamento" di HTMX --- */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-flex; } .htmx-request.htmx-indicator { display: inline-flex; } .rotella { width: 15px; height: 15px; border: 2px solid var(--accento-tenue); border-top-color: var(--accento); border-radius: 50%; animation: gira 0.7s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } /* --- Blocchi bloccati (demo) --- */ .bloccato { position: relative; opacity: 0.55; pointer-events: none; user-select: none; } .etichetta-blocco { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--accento); background: var(--accento-tenue); padding: 3px 11px; border-radius: 999px; } /* =========================================================================== * Home pubblica * ======================================================================== */ /* Una fascia che esce dal contenitore centrato e arriva ai bordi dello schermo. `50% - 50vw` è la distanza fra il centro del contenitore e il bordo della finestra: come margine negativo, annulla esattamente l'incolonnamento. Funziona solo con `overflow-x: hidden` sul body, impostato più sopra. */ .a-tutta-larghezza { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* --- Eroe --- * Lo sfondo ha tre strati sovrapposti, dal primo piano allo sfondo: * 1. una sfumatura scura da sinistra, che protegge la leggibilità del * titolo qualunque cosa ci sia sotto; * 2. la fotografia `eroe-cielo.jpg`, se presente; * 3. sfumature radiali che imitano una nebulosa. * Se la fotografia manca, lo strato 2 semplicemente non viene disegnato e * restano gli altri due: la pagina resta coerente, più sobria. Per questo * l'immagine può essere aggiunta in qualsiasi momento senza toccare nulla. * * Sui valori dello strato 1: l'immagine in uso è luminosa su tutta la * larghezza — a sinistra c'è una galassia a spirale, non il vuoto. Serve * quindi una copertura forte proprio dove va il titolo, al prezzo di * sacrificare quella parte della figura. È uno scambio voluto: un titolo * illeggibile è un difetto, una galassia in ombra no. Alzare questi * valori scurisce e mette al sicuro, abbassarli scopre l'immagine e * rischia — e il punto di rottura si vede solo guardando la pagina. */ .eroe { position: relative; overflow: hidden; padding: 0; /* Attaccato alla barra: annulla lo spazio che `.contenuto` mette sopra a tutto il resto. */ margin-top: calc(-1 * var(--spazio-sopra)); text-align: left; background-color: #0a0817; background-image: linear-gradient(100deg, rgba(10, 8, 23, 0.93) 0%, rgba(10, 8, 23, 0.82) 34%, rgba(10, 8, 23, 0.40) 62%, rgba(10, 8, 23, 0.52) 100%), url("/static/img/eroe-cielo.jpg"), radial-gradient(ellipse 70% 90% at 68% 45%, rgba(124, 92, 255, 0.45), transparent 70%), radial-gradient(ellipse 50% 60% at 88% 20%, rgba(74, 168, 255, 0.30), transparent 70%), radial-gradient(ellipse 60% 50% at 78% 85%, rgba(224, 92, 158, 0.28), transparent 70%); background-size: cover, cover, auto, auto, auto; background-position: center, center, center, center, center; background-repeat: no-repeat; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ IL CIELO SI DISSOLVE NELLA PAGINA, NON SI TAGLIA ║ ║ ║ ║ Stesso difetto della fascia «Domani», e per la stessa ragione: ║ ║ la velatura dell'eroe è diagonale da sinistra, quindi sul bordo ║ ║ **basso** l'immagine è ancora al 50% della sua luce. Lì sotto ║ ║ comincia la pagina, scura: il risultato era una striscia chiara ║ ║ che finiva di netto, separata da una riga di bordo che ║ ║ sottolineava il taglio invece di nasconderlo. ║ ║ ║ ║ Adesso l'ultimo tratto sfuma fino al colore della pagina, e il ║ ║ bordo non serve più: fra l'eroe e il contenuto non c'è una ║ ║ linea, c'è un passaggio. ║ ║ ║ ║ Il colore della sfumatura è `var(--sfondo)`, non un valore ║ ║ scritto a mano: se il fondo della pagina cambia, la sfumatura ║ ║ lo segue invece di lasciare una banda del colore vecchio. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .eroe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sfondo) 55%, transparent) 55%, var(--sfondo) 100%); } /* Velatura aggiuntiva, uniforme, solo per gli schermi stretti. * * La velatura principale (lo strato 1 qui sopra) è diagonale da sinistra, * perché su schermo largo il testo sta a sinistra. Su un telefono succede * il contrario di quello che serve: il testo si centra e l'immagine, per * via di `cover`, si ingrandisce mostrando proprio la sua parte più * luminosa — la ruota accesa — esattamente sotto al paragrafo. La * velatura diagonale lì non copre niente. * Una velatura piatta non ha un lato preferito, quindi non può sbagliarlo. */ .eroe::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; } @media (max-width: 900px) { .eroe::before { background: rgba(10, 8, 23, 0.58); } } .eroe-interno { position: relative; /* sopra la velatura */ z-index: 1; max-width: 1180px; margin: 0 auto; padding: 92px 20px 104px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; } .eroe-testo { max-width: 560px; } /* Occhiello: la righina in alto, maiuscoletto spaziato seguito da un filo e una stella. */ .occhiello { display: flex; align-items: center; gap: 14px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.26em; color: #b9b2e0; margin-bottom: 22px; } .occhiello::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, rgba(185, 178, 224, 0.5), transparent); } .titolo-eroe { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; font-weight: 600; color: #fff; margin: 0 0 22px; } /* La seconda riga del titolo, sfumata. Il testo fa da maschera alla sfumatura: `background-clip: text` ritaglia lo sfondo sulla forma delle lettere, e il colore trasparente lo lascia vedere. */ .titolo-sfumato { display: block; background: linear-gradient(100deg, #c9b6ff 0%, #9b8cff 38%, #6fb4ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .eroe p { color: #c4bee0; font-size: 1.05rem; line-height: 1.65; max-width: 500px; margin: 0 0 32px; } .azioni-eroe { display: flex; gap: 14px; flex-wrap: wrap; } .azioni-eroe .btn { padding: 14px 28px; font-size: 1rem; } .azioni-eroe .btn-secondario { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.22); color: #ece9f7; } .azioni-eroe .btn-secondario:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.4); color: #fff; } /* La citazione sul fianco destro. Sparisce presto restringendo: è un ornamento, e in poco spazio toglierebbe posto al titolo. */ .citazione-eroe { font-family: var(--serif); font-size: 1.04rem; line-height: 1.75; color: #d8d2f0; text-align: center; max-width: 210px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); /* Due righe per lo stesso scopo: portare il bordo destro della citazione sullo stesso asse su cui finiscono le card sotto. `margin: 0` toglie il margine che i browser danno di loro iniziativa a ogni
— `1em 40px` — e che qui rientrava la citazione di quaranta pixel esatti da entrambi i lati. Era l'unico elemento della pagina a non toccare né il margine sinistro né il destro, e bastava a far sembrare storto tutto il resto benché tutto il resto fosse allineato. Il numero tondo era il primo indizio: quaranta pixel tondi non sono mai una scelta di qualcuno, sono un valore predefinito. `justify-self: end` la incolla poi al fondo della sua colonna, che è più larga di lei. */ margin: 0; justify-self: end; } .citazione-eroe::after { content: "✦"; display: block; margin-top: 18px; font-size: 0.8rem; color: var(--accento); opacity: 0.8; } @media (max-width: 1080px) { .citazione-eroe { display: none; } .eroe-interno { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .eroe-interno { padding: 56px 20px 62px; } .eroe { text-align: center; } .eroe-testo { margin: 0 auto; } .occhiello { justify-content: center; } .occhiello::after { display: none; } .azioni-eroe { justify-content: center; } .eroe p { margin-left: auto; margin-right: auto; } } /* --- Clima lunare: le stellette dell'oroscopo --- */ /* =================================================================== L'oroscopo della settimana: sette caselle, poi l'elenco =================================================================== La striscia è il calendario della settimana: il segno della Luna disegnato, le stelle, il cambio di segno. Oggi acceso con la tinta dell'accento, i giorni passati attenuati — dove si è lo dice il colore prima della data. Sotto, l'elenco con gli aspetti uno per uno segue la stessa logica: la riga di oggi staccata, quelle passate smorzate. */ .settimana-nav { display: flex; align-items: center; gap: 12px; } .settimana-nav > .btn { padding: 6px 13px; font-size: 1.1rem; line-height: 1; } .settimana-nav > .freccia-spenta { opacity: 0.35; cursor: not-allowed; box-shadow: none; } .settimana-nav > .freccia-spenta:hover { filter: none; transform: none; } .settimana-intervallo { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .settimana-intervallo strong { font-family: var(--serif); font-size: 1.05rem; } .settimana-luna { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 18px; } .giorno-luna { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 9px; border-radius: 12px; border: 1px solid var(--card-bordo); background: rgba(255, 255, 255, 0.025); text-align: center; min-width: 0; } .giorno-luna.passato { opacity: 0.5; } .giorno-luna.oggi { border-color: var(--accento); background: linear-gradient(180deg, color-mix(in srgb, var(--accento) 22%, transparent), transparent 80%); box-shadow: 0 0 0 3px var(--accento-tenue); } .giorno-luna-nome { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--testo-debole); } .giorno-luna.oggi .giorno-luna-nome { color: #c4b5fd; } .giorno-luna-numero { font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; } .giorno-luna-segno { width: 40px; height: 40px; margin: 4px 0 2px; } .giorno-luna-nome-segno { font-size: 0.72rem; color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .giorno-luna-stelle { font-size: 0.72rem !important; letter-spacing: 0 !important; } .giorno-luna-stelle-breve { display: none; font-size: 0.8rem !important; letter-spacing: 0 !important; font-weight: 600; } /* «cambia»: il giorno in cui la Luna entra in un segno nuovo. Un bollino piccolo sopra la casella, non una riga: in sette caselle strette una parola in più per casella non ci sta. */ .giorno-luna-cambio { position: absolute; top: -8px; right: 6px; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; background: var(--accento); color: #fff; } .riga-giorno { padding: 14px 0; border-bottom: 1px solid var(--card-bordo); } .riga-giorno.passato { opacity: 0.6; } .riga-giorno.oggi { padding-left: 12px; margin-left: -12px; border-left: 3px solid var(--accento); } @media (max-width: 620px) { .settimana-luna { gap: 4px; } .giorno-luna { padding: 8px 2px 7px; border-radius: 10px; } .giorno-luna-segno { width: 30px; height: 30px; } .giorno-luna-nome-segno { display: none; } /* a 50 px non ci sta: il segno si vede, il nome è sotto nell'elenco */ .giorno-luna-stelle { display: none; } .giorno-luna-stelle-breve { display: block; } /* Il bollino «cambia» senza parola: un punto acceso nell'angolo. */ .giorno-luna-cambio { top: 5px; right: 5px; width: 8px; height: 8px; padding: 0; font-size: 0; } } .stelle { white-space: nowrap; letter-spacing: 0.06em; font-size: 0.95rem; } .stella.piena { color: var(--attenzione); } .stella.vuota { color: var(--testo-debole); opacity: 0.45; } /* I due estremi si distinguono anche dal colore, non solo dal numero: cinque simboli in fila si contano male con la coda dell'occhio. */ .stelle-1 .stella.piena { color: var(--errore); } .stelle-5 .stella.piena { color: var(--successo); } /* Visibile agli screen reader, non a schermo: un glifo non è un testo. */ .solo-lettori { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Glossario --- */ /* Due colonne dove c'è spazio: trenta voci in colonna singola fanno una pagina che si scorre a lungo e in cui non si trova niente a colpo d'occhio. Griglia e non colonne CSS, perché quelle spezzerebbero una voce a metà fra il fondo di una colonna e la cima dell'altra. */ .elenco-voci { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 30px; } .voce-glossario { display: block; padding: 13px 4px; border-bottom: 1px solid var(--card-bordo); color: var(--testo); } .voce-glossario:hover { text-decoration: none; background: var(--accento-tenue); } .voce-titolo { display: block; font-weight: 600; margin-bottom: 2px; } .voce-breve { display: block; color: var(--testo-tenue); font-size: 0.9rem; line-height: 1.5; } .definizione-breve { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; color: var(--testo); margin: 0 0 18px; } .definizione-lunga { color: var(--testo-tenue); line-height: 1.75; margin: 0; } .vedi-anche { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--card-bordo); } .vedi-anche .pillola { color: var(--accento); } /* Un termine collegato dentro una pagina. Sottolineatura punteggiata e non colore pieno: dentro una tabella di undici righe, undici parole azzurre sarebbero rumore. */ .termine { border-bottom: 1px dotted var(--testo-debole); cursor: help; } .termine:hover { border-bottom-color: var(--accento); color: var(--accento); } .bolla-glossario { display: block; background: var(--sfondo-alt); border: 1px solid var(--accento); border-radius: var(--raggio-piccolo); padding: 14px 16px; margin: 10px 0; max-width: 460px; } .bolla-titolo { font-weight: 600; margin-bottom: 4px; } .bolla-testo { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.55; color: var(--testo-tenue); } .bolla-oltre { font-size: 0.85rem; } /* --- Astrocartografia --- */ /* La mappa, a differenza della ruota, sta bene sul fondo scuro: le terre sono già disegnate con un colore proprio e non hanno bisogno della "stampa appesa alla parete" che serve alla ruota. */ /* Nessun `max-width`, al contrario della ruota: qui più grande significa davvero più leggibile, perché le linee si distinguono meglio e le etichette dei pianeti smettono di accavallarsi. */ .mappa-svg, .mappa-contenitore svg { width: 100%; height: auto; display: block; max-width: none; } .scelta-pianeti { display: flex; flex-wrap: wrap; gap: 8px; } .pillola-pianeta { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--card-bordo); color: var(--testo-tenue); font-size: 0.88rem; cursor: pointer; margin: 0; transition: border-color 0.15s, color 0.15s, background 0.15s; } .pillola-pianeta input { width: auto; margin: 0; } .pillola-pianeta.accesa { border-color: var(--tinta); color: var(--testo); background: color-mix(in srgb, var(--tinta) 14%, transparent); } .nome-luogo { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 4px; } /* Una linea vicina. Il bordo colorato a sinistra riprende il colore che quella stessa linea ha sulla mappa: è il collegamento fra il disegno e il testo, senza bisogno di una legenda da consultare. */ .linea-vicina { border-left: 3px solid var(--tinta); background: var(--sfondo-alt); border-radius: var(--raggio-piccolo); padding: 14px 16px; margin-top: 12px; } .linea-vicina.stretta { background: color-mix(in srgb, var(--tinta) 10%, var(--sfondo-alt)); } .linea-intestazione { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .linea-nome { font-weight: 600; color: var(--tinta); } .linea-distanza { font-variant-numeric: tabular-nums; color: var(--testo-debole); font-size: 0.86rem; white-space: nowrap; } .linea-significato { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--testo-tenue); } .zona-linea { border-left: 3px solid var(--tinta); padding: 10px 14px; margin-top: 10px; } .zona-territori { color: var(--testo-tenue); font-size: 0.9rem; } /* --- Pagina Esempio --- */ .intestazione-esempio { margin-bottom: 22px; } .intestazione-esempio .occhiello { color: var(--testo-debole); } .scheda-persona-esempio { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 20px; } .nome-esempio { font-family: var(--serif); font-size: 1.35rem; } /* Che la persona sia inventata va detto subito e a chiare lettere. Scoprirlo a metà pagina fa sentire presi in giro, e questa pagina esiste per costruire fiducia. */ .etichetta-finta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--attenzione); background: rgba(233, 185, 73, 0.12); border: 1px solid rgba(233, 185, 73, 0.35); padding: 5px 13px; border-radius: 999px; white-space: nowrap; } /* La ruota resta agganciata mentre si scorrono le tavole. * * Non è un vezzo: nella pagina dell'esempio la colonna di sinistra è * alta 700 px e quella di destra 2.600, quindi sotto alla ruota restava * un vuoto di quasi duemila pixel. Così quello spazio serve a qualcosa — * si legge «Marte in Vergine, casa 7» e lo si vede sulla carta senza * risalire. * * `top` tiene conto della barra in cima, che è anch'essa appiccicata: * senza, la ruota le finirebbe sotto. Disattivato in colonna singola, * dove non c'è niente accanto da scorrere. */ @media (min-width: 901px) { /* `sticky` scorre solo dentro il proprio genitore. `.griglia-tema` ha `align-items: start`, quindi ogni colonna si accorcia fino al suo contenuto: la colonna della ruota resterebbe alta quanto la ruota, e non ci sarebbe un centimetro in cui scorrere. Va quindi riportata ad altezza piena — solo questa colonna, non la regola generale. */ .colonna-piena { align-self: stretch; } .ruota-appiccicata { position: sticky; top: 86px; } } .invito-finale { text-align: center; margin-top: 46px; padding: 42px 26px; background: radial-gradient(ellipse at 50% 0%, var(--accento-tenue), transparent 65%), var(--card); border-color: color-mix(in srgb, var(--accento) 30%, transparent); } /* --- Titolo di sezione della home --- */ .titolo-sezione { display: flex; align-items: center; gap: 14px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--testo-debole); margin: 54px 0 22px; } .titolo-sezione::before { content: "✦"; color: var(--accento); letter-spacing: 0; } .titolo-sezione::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-bordo), transparent); } /* --- Card delle funzionalità --- * Ognuna ha una dominante diversa, passata come `--tinta` dal template: * così il colore sta in un posto solo e le regole qui sotto non sanno * quale sia. L'immagine di sfondo segue la stessa logica dell'eroe — * opzionale, e se manca resta la sfumatura. */ .card-funzione { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 260px; padding: 26px; border-radius: var(--raggio); border: 1px solid var(--card-bordo); background-color: var(--card); background-image: linear-gradient(145deg, color-mix(in srgb, var(--tinta, var(--accento)) 26%, transparent), rgba(12, 10, 26, 0.92) 62%); background-size: cover; background-position: center; box-shadow: var(--ombra); color: var(--testo); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } /* Il collegamento si ferma prima della figura: è l'unica riga che le sta accanto. Titolo e paragrafo stanno sopra e non la incontrano. */ .card-funzione .link-funzione { padding-right: 120px; } .card-funzione:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tinta, var(--accento)) 55%, transparent); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5); text-decoration: none; } /* L'immagine e la sua velatura, nello stesso strato e in quest'ordine. * * L'ordine conta ed è già stato sbagliato una volta: tenendo la velatura * sul fondo dell'elemento e la fotografia in questo pseudo-elemento, la * fotografia finiva *sopra* la velatura — che quindi non velava niente, e * il testo delle card si leggeva a fatica sopra ruote e pianeti. In CSS * il primo strato dichiarato è il più vicino a chi guarda: la velatura va * scritta per prima. * * La velatura porta con sé un po' di `--tinta` in alto, così ogni card * resta riconoscibile anche dove l'immagine è coperta. Niente `opacity` * sull'intero strato: schiarirebbe anche la velatura, che è esattamente * ciò che non deve succedere. L'intensità della fotografia si regola * invece dalla velatura stessa. */ .card-funzione::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(165deg, color-mix(in srgb, var(--tinta, var(--accento)) 22%, rgba(10, 8, 23, 0.74)) 0%, rgba(10, 8, 23, 0.90) 58%, rgba(10, 8, 23, 0.95) 100%), var(--figura, none); background-size: cover, cover; background-position: center, center; } .card-funzione > * { position: relative; z-index: 1; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ L'ICONA VA DOVE C'È SPAZIO, NON IN FILA COL TESTO ║ ║ ║ ║ Stava in alto a sinistra, sopra il titolo, dentro una pastiglia ║ ║ da 56 px: tutto il contenuto incolonnato a sinistra e metà ║ ║ scheda occupata dal solo sfondo. Una figura disegnata con ║ ║ questo dettaglio, grande come un bollino, non la guarda ║ ║ nessuno. ║ ║ ║ ║ Spostata nell'angolo in alto a destra può essere **il doppio** ║ ║ e non toglie niente al testo: lì sotto non c'era che il cielo. ║ ║ Niente più pastiglia — a questa misura la cornice stringerebbe ║ ║ la figura invece di darle risalto — ma resta il bagliore nella ║ ║ tinta della scheda, che la lega al resto. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .icona-funzione { position: absolute; /* In basso a destra, non in alto. In alto l'ho provata e il paragrafo le passava sopra: «in sei sistemi diversi» si leggeva sulla rosa dei venti. Lo spazio vuoto di queste schede sta sotto, accanto al collegamento, che è corto e sta a sinistra. */ bottom: 16px; right: 16px; width: 112px; height: 112px; background: var(--icona) center / contain no-repeat; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tinta, var(--accento)) 55%, transparent)); pointer-events: none; } .card-funzione h3 { font-size: 1.32rem; margin: 0 0 10px; color: #fff; } .card-funzione p { color: #d9d4ee; font-size: 0.93rem; margin: 0 0 20px; } .link-funzione { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: color-mix(in srgb, var(--tinta, var(--accento)) 70%, white); } .freccia-funzione { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tinta, var(--accento)) 50%, transparent); transition: transform 0.2s, background 0.2s; } .card-funzione:hover .freccia-funzione { transform: translateX(4px); background: color-mix(in srgb, var(--tinta, var(--accento)) 30%, transparent); } /* --- Fascia dei segni (Sole, Ascendente, Luna) --- * Il dato che chiunque cerca per primo apriendo un tema natale era finito * in mezzo a una tabella di undici righe, indistinguibile da Plutone. * Qui sta in cima, grande. */ .fascia-segni { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(135deg, var(--accento-tenue), transparent 70%); border: 1px solid var(--card-bordo); border-radius: var(--raggio); padding: 20px 26px; margin-bottom: 20px; } .segno-grande { display: flex; align-items: center; gap: 18px; } .glifo-grande { font-family: "DejaVu Sans", "Segoe UI Symbol", sans-serif; font-size: 3.4rem; line-height: 1; color: var(--accento); } .segno-nome { font-family: var(--serif); font-size: 1.9rem; line-height: 1.15; color: var(--testo); } .segno-etichetta { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--testo-debole); } .segni-secondari { display: flex; gap: 26px; flex-wrap: wrap; } .segno-piccolo { display: flex; align-items: center; gap: 10px; } .glifo-piccolo { font-family: "DejaVu Sans", "Segoe UI Symbol", sans-serif; font-size: 1.7rem; color: var(--accento); } .segno-nome-piccolo { display: block; font-family: var(--serif); font-size: 1.02rem; color: var(--testo); } @media (max-width: 620px) { .fascia-segni { padding: 16px 18px; } .glifo-grande { font-size: 2.6rem; } .segno-nome { font-size: 1.5rem; } } /* Glifo del segno al posto del logo, in cima a una lettura. */ .glifo-lettura { font-family: "DejaVu Sans", "Segoe UI Symbol", sans-serif; font-size: 2.6rem; line-height: 1; color: var(--accento); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ I SEGNI DISEGNATI AL POSTO DEI CARATTERI ♈ ♉ ♊ ║ ║ ║ ║ Il carattere cambiava faccia da un sistema all'altro — sottile ║ ║ su Windows, a fumetto su certi telefoni — ed era l'unica cosa ║ ║ della fascia che non sembrava disegnata apposta. Le figure sono ║ ║ di Giulio, lavanda lucido come il quadrante del clima. ║ ║ ║ ║ Una scatola quadrata con la figura come sfondo: la misura la ║ ║ decide la classe di posizione (grande, piccolo, lettura), qui ║ ║ si decide solo come la figura la riempie. Il bagliore la lega ║ ║ all'accento del sito. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .glifo-segno { display: inline-block; flex: 0 0 auto; background: var(--segno) center / contain no-repeat; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accento) 45%, transparent)); } .glifo-grande.glifo-segno { width: 64px; height: 64px; } .glifo-piccolo.glifo-segno { width: 34px; height: 34px; } .glifo-lettura.glifo-segno { width: 52px; height: 52px; } @media (max-width: 620px) { .glifo-grande.glifo-segno { width: 52px; height: 52px; } } /* --- Letture interpretative: "pagina di libro" --- * Come la ruota, resta su fondo chiaro. Qui però non * è un vincolo tecnico: è che un testo lungo da leggere per intero si * legge meglio su carta chiara, e lo stile tipografico "libro antico" * dell'app desktop dipende proprio da quel contrasto. */ .pagina-libro { background: #fbf7ef; color: #2c2618; border-radius: var(--raggio-piccolo); padding: 30px 34px; font-family: var(--serif); font-size: 1.03rem; line-height: 1.78; min-height: 120px; box-shadow: inset 0 0 60px rgba(120, 96, 50, 0.07); } .pagina-libro-ampia { padding: 46px 56px; font-size: 1.08rem; } @media (max-width: 700px) { .pagina-libro-ampia { padding: 26px 22px; } } .titoletto-lettura { font-family: var(--serif); font-size: 0.84rem; letter-spacing: 0.16em; color: #8a6d2f; margin: 1.7em 0 0.5em; font-weight: 600; } .titoletto-lettura:first-child { margin-top: 0; } .paragrafo-lettura { margin: 0 0 1.05em; text-align: justify; hyphens: auto; } .paragrafo-lettura:last-child { margin-bottom: 0; } /* La nota sotto ogni lettura. Fuori dalla «pagina di libro» e in corpo minore: deve leggersi se la si cerca, senza competere con il testo che accompagna. Un'avvertenza che grida viene saltata come una pubblicità, e questa va letta. */ .nota-lettura { margin: 16px 2px 0; font-size: 0.8rem; line-height: 1.55; color: var(--testo-debole); border-top: 1px solid var(--card-bordo); padding-top: 12px; } /* Il cursore che lampeggia mentre il testo arriva: piccolo segnale che qualcosa sta succedendo, senza bisogno di una barra di avanzamento che non potremmo comunque calcolare (non sappiamo quanto sarà lungo). */ .cursore-scrittura { display: inline-block; width: 2px; height: 1.05em; background: #8a6d2f; vertical-align: text-bottom; animation: lampeggia 1s steps(2, start) infinite; } @keyframes lampeggia { to { visibility: hidden; } } .lettura-card { padding: 18px; } /* --- Pannello amministratore --- */ .riquadro-stat { background: var(--sfondo-alt); border: 1px solid var(--card-bordo); border-radius: var(--raggio-piccolo); padding: 18px; text-align: center; } .riquadro-stat .valore { font-family: var(--serif); font-size: 2.1rem; color: var(--accento); line-height: 1.2; } .riquadro-stat .etichetta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--testo-debole); } .chiave-mascherata { font-family: ui-monospace, monospace; background: var(--accento-tenue); padding: 3px 10px; border-radius: 6px; font-size: 0.88rem; } /* --- Piè di pagina --- */ footer { margin-top: 72px; border-top: 1px solid var(--card-bordo); background: linear-gradient(180deg, transparent, rgba(124, 92, 255, 0.05)); color: var(--testo-debole); font-size: 0.85rem; } .piede-interno { max-width: 1180px; margin: 0 auto; padding: 26px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .piede-marchio { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.05rem; color: var(--testo-tenue); } .piede-marchio .logo-marchio { width: 22px; height: 22px; opacity: 0.8; } /* Da solo in una scheda vuota o in una pagina d'errore: grande e tenue. */ .logo-marchio { width: 72px; height: 72px; opacity: 0.85; } .piede-slogan { flex: 1; text-align: center; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.22em; min-width: 220px; } /* Le fasi lunari: puro ornamento, come nel progetto grafico. Nascoste allo screen reader — non dicono niente a chi non le vede. */ .piede-lune { letter-spacing: 0.4em; opacity: 0.55; font-size: 0.95rem; } .piede-legale { display: flex; gap: 16px; } .piede-legale a { color: var(--testo-debole); text-decoration: none; border-bottom: 1px solid transparent; } .piede-legale a:hover { color: var(--testo-tenue); border-bottom-color: var(--card-bordo); } /* --- Pagine legali --- Misura di riga corta e interlinea larga: sono testi che nessuno legge per piacere, e l'unica cortesia possibile è renderli scorribili. */ .testo-legale { max-width: 68ch; line-height: 1.75; } .testo-legale h3 { margin: 34px 0 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accento); } .testo-legale h3:first-of-type { margin-top: 18px; } .testo-legale p, .testo-legale li { color: var(--testo-tenue); } .testo-legale ul { padding-left: 20px; } .testo-legale li { margin-bottom: 8px; } .testo-legale table { font-size: 0.86rem; } .testo-legale td { vertical-align: top; } /* Gli estremi del venditore: blocco compatto, monospaziato nei numeri, perché è l'unica parte della pagina che si va a cercare apposta. */ .estremi-venditore { border-left: 2px solid var(--accento); padding: 4px 0 4px 14px; margin: 0 0 16px; line-height: 1.6; color: var(--testo-tenue); } .estremi-venditore strong { color: var(--testo); } @media (max-width: 680px) { .piede-legale { order: 4; flex-basis: 100%; justify-content: center; } } @media (max-width: 680px) { .piede-interno { justify-content: center; text-align: center; } .piede-slogan { order: 3; flex-basis: 100%; } } /* --- Archivio: calcoli e letture nello stesso elenco --- L'etichetta del genere apre la riga e ha larghezza fissa, così le voci si incolonnano e l'occhio scorre una colonna sola invece di leggere ogni titolo: quasi tutte le righe si chiamano «Tema natale». La lettura è accesa perché è la cosa che costa e che non si rigenera; il calcolo resta smorto perché si rifà in 21 ms. */ .genere-voce { display: inline-block; min-width: 5.6em; margin-right: 10px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; } .genere-lettura { color: var(--accento); } .genere-calcolo { color: var(--testo-debole); } .dettaglio-voce { color: var(--testo-tenue); font-weight: 400; } /* Sotto i 600 px l'etichetta a larghezza fissa ruberebbe metà riga al titolo: va a capo e il titolo si riprende lo spazio. */ @media (max-width: 600px) { .genere-voce { display: block; min-width: 0; margin: 0 0 3px; } } /* --- Pannello utenti: controlli in linea nelle celle --- Ruolo e abbonamento si cambiano dalla riga stessa. I pulsanti sono testuali e non bottoni pieni: in una tabella di sei colonne tre bottoni per riga diventano una parete di rettangoli in cui non si distingue più quale sia l'azione pericolosa. */ .riga-compatta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-testo { background: none; border: 0; padding: 0; font: inherit; font-size: 0.78rem; color: var(--accento); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .btn-testo:hover { color: var(--testo); } .data-compatta { font-size: 0.78rem; padding: 3px 6px; width: auto; } .etichetta-omaggio { background: rgba(42, 157, 143, .15); color: var(--successo); } /* --- Funzionalità chiuse --- La scheda chiusa resta al suo posto e resta cliccabile: una funzione che sparisce non si desidera, e chi non sa che esiste non ha motivo di abbonarsi. Smorzata, non barrata — l'invito è a entrare, non a rinunciare. */ .scheda-chiusa { opacity: 0.62; } .scheda-chiusa:hover { opacity: 1; } .lucchetto { opacity: 0.9; } /* Il lucchetto a linee di Giulio (7/10/2026) al posto dell'emoji, che su ogni sistema aveva una faccia diversa e nessuna nello stile del sito. Una maschera: prende il colore del testo intorno. */ .ico-lucchetto { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; background: currentColor; -webkit-mask: url('/static/img/ico-lucchetto.png') center / contain no-repeat; mask: url('/static/img/ico-lucchetto.png') center / contain no-repeat; } .card-chiusa { text-align: center; max-width: 620px; margin: 40px auto; padding: 40px 30px; } .lucchetto-grande { display: block; width: 46px; height: 46px; margin: 0 auto 16px; background: #cdbfff; opacity: 0.85; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; } /* «Fatto»: email confermata, grazie dell'abbonamento. Un cerchio con la spunta d'oro, disegnato qui finché non c'è un'icona apposta. (La classe del lucchetto è una maschera: con un carattere dentro e senza `--icona` diventava un quadrato lilla pieno.) */ .segno-ok { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; font-size: 1.5rem; font-weight: 700; color: #f3cf7a; border: 1.5px solid rgba(240, 194, 79, 0.65); background: radial-gradient(circle, rgba(240, 194, 79, 0.18), rgba(14, 11, 34, 0.9) 70%); box-shadow: 0 0 16px rgba(240, 194, 79, 0.3); } .descrizione-chiusa { color: var(--testo-tenue); max-width: 46ch; margin: 0 auto; line-height: 1.65; } .azioni-chiuse { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } /* --- Pagina dell'abbonamento --- */ .prezzo { font-size: 2.3rem; font-weight: 600; letter-spacing: -0.02em; } .prezzo-periodo { font-size: 1rem; font-weight: 400; color: var(--testo-tenue); } .elenco-incluso { line-height: 1.8; padding-left: 1.1em; } /* --- Contatori delle letture --- Quello del mese è la quota comprata, quello del giorno il freno anti-abuso: il secondo è più smorto perché non è una promessa fatta al cliente, è una protezione nostra. */ .contatori-lettura { font-size: 0.8rem; color: var(--testo-tenue); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .contatore-giorno { color: var(--testo-debole); } .quota-esaurita { color: var(--errore); font-weight: 600; } /* I contatori grandi (partials/_contatori_lettura.html): due riquadri, mese e giorno, con numero in evidenza e una barra sottile. Il mese è la quota comprata e ha l'oro; il giorno è il freno nostro ed è viola tenue. A quota finita la barra e il numero diventano rossi. */ .contatori { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; } .contatore { flex: 1 1 200px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(124, 92, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid color-mix(in srgb, var(--accento) 18%, var(--card-bordo)); } /* L'icona del contatore, in un quadratino di vetro: il grafico per il mese, il calendario per il giorno. */ .contatore-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #c9bbff; background: rgba(124, 92, 255, 0.16); border: 1px solid rgba(167, 139, 250, 0.25); } .contatore-ico .btn-ico { width: 19px; height: 19px; } .contatore-etichetta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--testo-tenue); } .contatore-numero { font-size: 0.95rem; color: var(--testo-tenue); font-variant-numeric: tabular-nums; } .contatore-numero strong { font-family: var(--serif); font-size: 1.5rem; color: var(--testo); font-weight: 600; margin-right: 2px; } .contatore-barra { grid-column: 1 / -1; margin-top: 6px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .contatore-barra span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #e8a33d, #f3cf6b); box-shadow: 0 0 8px rgba(243, 207, 107, 0.45); transition: width 0.4s ease; } .contatore-oggi .contatore-barra span { background: linear-gradient(90deg, #7c5cff, #b9a6ff); box-shadow: 0 0 8px rgba(167, 139, 250, 0.5); } .contatore-nota { grid-column: 1 / -1; font-size: 0.76rem; color: var(--testo-debole); } .contatori-esauriti .contatore-mese .contatore-barra span, .contatore-pieno .contatore-barra span { background: var(--errore); box-shadow: none; } .contatori-esauriti .contatore-mese .contatore-numero strong, .contatore-pieno .contatore-numero strong { color: var(--errore); } .sogno-lettura-contatori { margin-top: 12px; } .sogno-lettura-contatori .contatori { margin-bottom: 0; } /* --- Cancellazione dell'account --- In fondo all'area personale, smorzata: è un diritto e deve esserci, ma non deve competere con quello per cui si viene qui. Nella pagina di conferma invece il tono cambia del tutto. */ .riga-cancella { margin-top: 34px; font-size: 0.85rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .riga-cancella a { color: var(--errore); opacity: 0.8; } .riga-cancella a:hover { opacity: 1; } .riga-cancella span { color: var(--testo-debole); } .card-cancella { max-width: 560px; margin: 30px auto; } .card-cancella .elenco-perdite { line-height: 2; padding-left: 1.2em; margin: 10px 0 18px; } .avviso-grave { border-left: 3px solid var(--errore); background: rgba(229, 86, 109, .08); } .avviso-errore { border-left: 3px solid var(--errore); background: rgba(229, 86, 109, .14); color: var(--errore); } .btn-testo-pericolo { color: var(--errore); } /* --- Il nome della persona come collegamento --- Un titolo cliccabile non si vede che è cliccabile: senza un segno, metà delle persone cerca un pulsante e non lo trova. La sottolineatura compare al passaggio del mouse e il colore vira sull'accento, così a riposo la riga resta pulita ma chi ci passa sopra capisce subito. */ .persona-apri { display: inline-block; color: inherit; text-decoration: none; } .persona-apri:hover, .persona-apri:focus-visible { color: var(--accento); text-decoration: underline; text-underline-offset: 3px; } /* --- Vetrina della home: quattro card in due file --- Con `griglia-3` la quarta card si sarebbe messa in fila alle altre, stringendo tutto a un quarto di schermo: immagini francobollo e testo su sei righe. Due per fila lasciano a ciascuna lo spazio che serve. */ .griglia-vetrina { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .griglia-vetrina { grid-template-columns: minmax(0, 1fr); } } /* Il cuore della scheda Coppia: più discreto del lucchetto, che deve farsi notare, e della stella della Lettura, che segnala la funzione di punta. Qui basta un accenno. */ .cuore { margin-right: 5px; opacity: 0.8; } /* --- Stato dell'abbonamento --- */ .riga-abbonamento { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 0.9rem; margin: 0; } .riga-abbonamento .fino-al { color: var(--testo-debole); font-size: 0.85em; } /* Vicino alla scadenza il tono cambia: ambra e non rosso, perché non è un guasto — è una cosa da fare, e c'è ancora tempo per farla. */ .avviso-scadenza { border-left: 3px solid var(--attenzione); background: rgba(232, 163, 61, .10); margin-bottom: 18px; } .avviso-scadenza a { margin-left: 6px; white-space: nowrap; } /* --- Astrocartografia: le linee per area di vita --- Il titolo dell'area è quello che si legge scorrendo; la descrizione tecnica lo segue in tono minore, per chi vuole sapere da dove viene. */ .area-vita { margin-bottom: 26px; } .area-vita:last-child { margin-bottom: 0; } .area-intestazione { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--card-bordo); padding-bottom: 8px; margin-bottom: 12px; } .area-intestazione h4 { margin: 0; font-size: 1.02rem; } .area-descrizione { color: var(--testo-debole); font-size: 0.82rem; } .zona-riga-alta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } /* La scelta dei pianeti, richiusa in fondo. */ .dettaglio-pianeti > summary { cursor: pointer; font-weight: 600; list-style: none; } .dettaglio-pianeti > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--testo-debole); transition: transform .15s; } .dettaglio-pianeti[open] > summary::before { transform: rotate(90deg); } .dettaglio-pianeti > summary::-webkit-details-marker { display: none; } /* --- Piani di abbonamento --- Due sole colonne, larghe: il confronto fra due prezzi si fa in un colpo d'occhio, e una griglia più fitta lo renderebbe una tabella. */ .griglia-piani { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 18px; } .piano { position: relative; display: flex; flex-direction: column; gap: 12px; } /* L'annuale è messo in evidenza perché è quello che conviene a entrambi: su 6,99 € i 25 centesimi fissi di commissione pesano il 3,6% e si pagano dodici volte l'anno. */ .piano-consigliato { border-color: var(--accento); } .piano-nastro { position: absolute; top: -11px; right: 16px; background: var(--accento); color: #fff; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 3px 10px; border-radius: 999px; } .piano-prezzo { display: flex; align-items: baseline; gap: 8px; } .piano-cifra { font-family: var(--serif); font-size: 2.4rem; color: var(--testo); } .piano-periodo { color: var(--testo-debole); font-size: 0.9rem; } .piano-risparmio { margin: 0; color: var(--accento); font-size: 0.88rem; } .piano-prova { margin: 0; color: #e8c46a; font-size: 0.9rem; font-weight: 600; } .piano form { margin-top: auto; } /* La spunta sui Termini prima del pulsante. Sta nella card, non in fondo pagina, perche' va letta nel momento in cui si decide; il quadratino prende l'accento viola come il resto dei campi. */ .consenso { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--testo-debole); cursor: pointer; } .consenso input { width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; flex-shrink: 0; accent-color: var(--accento); cursor: pointer; } .consenso a { color: var(--accento); } .consenso-nota { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--testo-debole); } /* Il collegamento alla disdetta nella riga dell'abbonamento. Discreto di proposito: deve esserci ed essere trovabile, non invitare ad andarsene. `margin-left: auto` lo spinge all'estremo opposto della riga, lontano dal dito di chi sta solo controllando quanti giorni restano. */ .gestisci-abbonamento { margin-left: auto; font-size: 0.85rem; color: var(--testo-tenue); } .gestisci-abbonamento:hover { color: var(--accento); } /* La fascia di preavviso della manutenzione. Attraversa tutta la finestra e sta sopra la barra: deve essere la prima cosa che si legge, perché avvisa di qualcosa che succederà. Colori dell'attenzione, non dell'errore — non è ancora successo niente. */ .fascia-preavviso { position: relative; z-index: 2; padding: 10px 20px; text-align: center; font-size: 0.9rem; background: rgba(233, 185, 73, 0.14); border-bottom: 1px solid var(--attenzione); color: #f2d79a; } /* Gli estremi del venditore, in fondo al piede. Piccoli e tenui: devono esserci ed essere leggibili, non competere col resto. Chi li cerca sa cosa cerca; a chi non li cerca non devono togliere attenzione. */ .piede-estremi { max-width: 1180px; margin: 14px auto 0; padding: 14px 20px 0; border-top: 1px solid var(--card-bordo); text-align: center; font-size: 0.8rem; line-height: 1.7; color: var(--testo-debole); } .piede-estremi a { color: inherit; text-decoration: underline; } .piede-estremi a:hover { color: var(--accento); } /* Il sito è chiuso, avviso per l'amministratore. Rosso e a tutta larghezza: è l'unica fascia che deve dare fastidio, perché segnala uno stato in cui i clienti non entrano. */ .fascia-chiuso { position: relative; z-index: 3; padding: 10px 20px; text-align: center; font-size: 0.9rem; font-weight: 600; background: rgba(229, 86, 109, 0.18); border-bottom: 1px solid var(--errore); color: #ffb3c0; } .fascia-chiuso a { color: inherit; text-decoration: underline; margin-left: 8px; } /* ── Schermi stretti: niente deve sbordare ────────────────────────────── Misurato su iPhone e riprodotto a 375 px: la pagina era larga 525 e il titolo usciva a destra tagliato. Tre cause sovrapposte, tutte da chiudere, perché basta una a rompere la pagina intera. **1. `min-width: 0` sui contenitori.** Il corpo pagina è un contenitore flessibile — lo abbiamo reso tale per tenere il piede in fondo — e un elemento flessibile non si restringe sotto la larghezza minima del suo contenuto. Il risultato è controintuitivo: invece di essere la tabella a sbordare, si allarga *tutta la pagina*, e il testo normale finisce fuori schermo insieme a lei. **2. Le tabelle scorrono da sole.** Le posizioni dei pianeti hanno colonne che a 375 px non entrano, e non si possono accorciare senza renderle inutili. Meglio una tabella che scorre in orizzontale dentro la sua scheda che una pagina intera spostata. **3. Gli SVG non superano il contenitore.** Ruota e mappa hanno una dimensione naturale di qualche centinaio di pixel. */ @media (max-width: 620px) { .contenuto, main, .card { min-width: 0; } table { display: block; overflow-x: auto; } main svg { max-width: 100%; height: auto; } } /* =================================================================== La scheda «Oggi» =================================================================== Un riquadro unico diviso da righe sottili, non quattro card con il vuoto in mezzo: separate, si leggevano come quattro cose diverse messe vicine, e lo spazio fra loro era l'elemento più grande della pagina. Le zone restano distinte, la scheda resta una. */ .oggi-pannello { position: relative; padding: 0; overflow: hidden; background: radial-gradient(120% 90% at 12% 0%, rgba(124, 92, 255, 0.16), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 55%), var(--card); } /* Il cielo dietro tutta la scheda, non solo dietro il titolo. * * Stava solo nella fascia in alto, che è alta un decimo della sua * larghezza: l'immagine veniva ingrandita fino a mostrarne una striscia, * e sotto restava il viola piatto. Dietro al pannello intero si vede per * quello che è. * * Opacità bassa perché qui sopra ci sono paragrafi interi, non due * parole: un cielo che si fa notare più del testo renderebbe la scheda * bella e illeggibile. La fascia «Domani» non ne risente — ha un fondo * suo quasi opaco e il suo cielo. */ .oggi-pannello::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/static/img/fascia-cielo.jpg") center / cover; opacity: 0.3; pointer-events: none; } .oggi-pannello > * { position: relative; z-index: 1; } .oggi-testa { position: relative; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; padding: 22px 26px 18px; border-bottom: 1px solid var(--card-bordo); /* Niente immagine propria: il cielo adesso sta dietro tutto il pannello, e ripeterlo qui avrebbe creato una giuntura visibile dove finisce. Resta una velatura, perché il titolo è la cosa che si legge per prima e deve staccare. */ background: linear-gradient(180deg, rgba(16, 13, 38, 0.55), rgba(16, 13, 38, 0.30)); } .oggi-testa > * { position: relative; } /* Il marchio della scheda: luna d'oro a sinistra, titolo con «oggi» in corsivo oro, data con una lineetta oro accanto. */ .oggi-marchio { display: flex; align-items: center; gap: 14px; } .oggi-luna { width: 56px; height: 56px; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(232, 184, 74, 0.45)); } .oggi-titolo { margin: 0; font-size: 1.6rem; line-height: 1.1; letter-spacing: 0.01em; } .oggi-titolo em { font-style: italic; color: #f0c24f; font-weight: 400; } .oggi-data { margin: 6px 0 0; font-size: 0.86rem; color: var(--testo-tenue); text-transform: capitalize; display: flex; align-items: center; gap: 12px; } .oggi-data-riga { display: inline-block; width: 44px; height: 1px; background: #f0c24f; opacity: 0.8; } /* Il tuo profilo, in testa alla scheda: un'etichetta oro con il nome, dove prima c'era il menu per cambiare persona. L'oro è il colore di tutto ciò che è «personale» nel sito (il distintivo nell'elenco, il diario dei sogni). Cliccabile: porta all'elenco, dove il profilo si cambia. */ .oggi-titolare { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; color: var(--testo); } .oggi-titolare:hover { text-decoration: none; } .oggi-titolare-etichetta { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #e8b84a; } .oggi-titolare-nome { font-family: var(--serif); font-size: 1.05rem; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(232, 184, 74, 0.45); background: rgba(232, 184, 74, 0.08); transition: border-color 0.15s ease, background 0.15s ease; } .oggi-titolare:hover .oggi-titolare-nome { border-color: #e8b84a; background: rgba(232, 184, 74, 0.16); } /* «Qual è il tuo profilo?»: la domanda che chi aveva già più persone vede una volta sola, al posto della scheda. */ .scelta-tu { display: flex; gap: 16px; align-items: flex-start; text-align: left; } .scelta-tu-modulo { flex: 1; min-width: 0; } .scelta-tu-titolo { margin: 0 0 4px; font-size: 1.15rem; } .scelta-tu-voce { display: flex; gap: 10px; align-items: center; padding: 8px 12px; margin: 6px 0; cursor: pointer; border: 1px solid var(--card-bordo); border-radius: 10px; } .scelta-tu-voce:has(input:checked) { border-color: #e8b84a; background: rgba(232, 184, 74, 0.08); } .scelta-tu-voce input { accent-color: #e8b84a; width: auto; margin: 0; } .scelta-tu .btn { margin-top: 8px; } @media (max-width: 560px) { .scelta-tu { flex-direction: column; align-items: center; } .scelta-tu-modulo { width: 100%; } } /* =================================================================== Gli eventi rari della scheda «Oggi» =================================================================== Una fila di schede piccole fra la testa e il quadrante, una per evento: figura a sinistra, due righe di testo, freccia. Compaiono solo quando c'è qualcosa (vedi `services/oggi.eventi`), e stanno prima del quadrante perché sono la notizia; il quadrante è il meteo. Il transito lento ha la figura nella tinta dell'accento piena: è l'unico evento per cui si suggerisce una lettura. */ .oggi-eventi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 16px 26px 0; } .oggi-evento { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accento) 35%, var(--card-bordo)); background: linear-gradient(135deg, color-mix(in srgb, var(--accento) 16%, transparent), transparent 70%), rgba(255, 255, 255, 0.03); color: var(--testo); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease; } .oggi-evento:hover { transform: translateY(-2px); border-color: var(--accento); text-decoration: none; } .oggi-evento-figura { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .oggi-evento-glifo { border-radius: 12px; font-size: 1.4rem; line-height: 1; color: #e4dcff; font-family: "DejaVu Sans", "Segoe UI Symbol", sans-serif; background: linear-gradient(150deg, color-mix(in srgb, var(--accento) 42%, transparent), color-mix(in srgb, var(--accento) 16%, transparent)), #1a1630; border: 1px solid color-mix(in srgb, var(--accento) 45%, transparent); } /* La figura disegnata: stesso fondo scuro delle pastiglie, il disegno dentro con un filo di bagliore. «Importante» (il transito lento) ha il fondo pieno nell'accento, come il carattere avrebbe avuto. */ .oggi-evento-disegno { border-radius: 12px; background: linear-gradient(150deg, color-mix(in srgb, var(--accento) 42%, transparent), color-mix(in srgb, var(--accento) 16%, transparent)), #1a1630; border: 1px solid color-mix(in srgb, var(--accento) 45%, transparent); } .oggi-evento-disegno::before { content: ""; display: block; width: 34px; height: 34px; background: var(--figura) center / contain no-repeat; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accento) 55%, transparent)); } .oggi-evento-importante { background: var(--accento); color: #fff; box-shadow: var(--alone); } .oggi-evento-disegno.oggi-evento-importante::before { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); } .oggi-evento-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .oggi-evento-testo strong { font-size: 0.95rem; line-height: 1.25; } .oggi-evento-testo span { font-size: 0.78rem; color: var(--testo-tenue); line-height: 1.3; } .oggi-evento-freccia { color: var(--accento); flex: 0 0 auto; } /* La colonna del transito per chi non e' abbonato: il paragrafo finto sfocato sotto, l'invito sopra. Lo sfocato e' forte apposta — nessuna parola deve potersi leggere, perche' sono parole finte e lette sembrerebbero una lettura. Il lucchetto nelle schede degli eventi prende il posto della freccia, e la scheda si attenua come le schede chiuse del tema. */ .oggi-corpo-chiuso { position: relative; display: block; overflow: hidden; } .oggi-corpo-chiuso .oggi-chiuso-finto { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); filter: blur(5px); opacity: 0.7; user-select: none; pointer-events: none; } @media (max-width: 900px) { .oggi-corpo-chiuso .oggi-chiuso-finto { grid-template-columns: minmax(0, 1fr); } .oggi-corpo-chiuso .oggi-zona-transito { display: none; } /* sotto sarebbe solo altezza vuota */ /* Sul telefono quadrante e barre impilati fanno una colonna alta un metro: si taglia, perche' e' uno sfondo e l'invito deve stare nella prima schermata. */ .oggi-corpo-chiuso { max-height: 520px; } } .oggi-chiuso-invito { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 18px; border-radius: 14px; background: radial-gradient(80% 80% at 50% 50%, color-mix(in srgb, var(--card) 85%, transparent), transparent); } .oggi-chiuso-lucchetto { font-size: 1.6rem; color: #d9ccff; filter: drop-shadow(0 0 8px var(--accento)); } .oggi-chiuso-invito strong { font-family: var(--serif); font-size: 1.15rem; } .oggi-chiuso-invito p { margin: 0 0 8px; font-size: 0.86rem; color: var(--testo-tenue); max-width: 34ch; } .oggi-chiuso-esempio { font-size: 0.82rem; color: var(--accento); margin-top: 2px; } .oggi-evento-chiuso { opacity: 0.78; } .oggi-evento-chiuso:hover { opacity: 1; } .oggi-evento-chiuso .oggi-evento-freccia { font-size: 0.9rem; } /* Il corpo: due zone affiancate, divise da una riga e non da un vuoto. */ .oggi-corpo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } .oggi-zona { padding: 22px 26px; } .oggi-zona-transito { border-left: 1px solid var(--card-bordo); } .oggi-zona-clima { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: center; } .oggi-zona-clima .oggi-momento { grid-column: 1 / -1; } .oggi-cerchio { display: block; width: 100%; max-width: 240px; overflow: visible; } /* Colori fissi, non le variabili del tema: il quadrante è un oggetto disegnato, e deve restare com'è anche se un giorno cambiano i fondi. */ .oggi-cerchio-titolo { fill: #cfc4ff; font-family: var(--serif); font-size: 14px; letter-spacing: 0.02em; } .oggi-cerchio-numero { fill: #fff; font-family: var(--serif); font-size: 76px; font-weight: 400; font-variant-numeric: lining-nums; } .oggi-cerchio-segno { font-size: 30px; fill: #e4dcff; } .oggi-cerchio-tacche line { stroke-linecap: round; } .oggi-cerchio-tacche .corta { stroke: rgba(205, 191, 255, 0.32); stroke-width: 1; } .oggi-cerchio-tacche .lunga { stroke: rgba(225, 216, 255, 0.75); stroke-width: 1.6; } .oggi-cerchio-stelle .piena { fill: #c9b8ff; filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.9)); } .oggi-cerchio-stelle .vuota { fill: none; stroke: #a99bdc; stroke-width: 0.9; } /* Le quattro aree: pastiglia colorata come le schede della vetrina, così la scheda parla la stessa lingua grafica del resto del sito. */ .oggi-aree { display: grid; gap: 0; } .oggi-area { display: flex; gap: 14px; align-items: center; padding: 12px 0; } /* Una riga sottile fra un'area e l'altra: senza, quattro barre colorate una sotto l'altra si leggono come un grafico solo. */ .oggi-area + .oggi-area { border-top: 1px solid var(--card-bordo); } .oggi-area:first-child { padding-top: 0; } .oggi-area:last-child { padding-bottom: 0; } /* La pastiglia con l'icona. * * 52 px: le figure hanno dentro un anello orbitale e due scintille, e * sotto i 36 diventavano una macchia colorata senza forma. A 38 si * riconoscevano ma non si guardavano; accanto al quadrante ingrandito * sembravano bollini. * * Il fondo è un colore fisso e scuro, non una variabile del tema. Le * icone sono illustrazioni a colori fissi, chiare e lucide: su una * pastiglia chiara l'oro del lavoro e il verde sparivano. Una figura che * non si vede non è un'icona. */ .oggi-area-icona { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--tinta) 42%, transparent), color-mix(in srgb, var(--tinta) 16%, transparent)), #1a1630; border: 1px solid color-mix(in srgb, var(--tinta) 45%, transparent); } .oggi-area-icona::before { content: ""; width: 44px; height: 44px; background: var(--icona) center / contain no-repeat; /* Un filo di bagliore nel colore dell'area: lega la figura alla pastiglia, che altrimenti sembrano due cose sovrapposte. */ filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tinta) 55%, transparent)); } .oggi-area-dati { flex: 1 1 auto; min-width: 0; } .oggi-area-riga { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; margin-bottom: 5px; } /* Il numero in lavanda, come quello del quadrante: è il dato, e il nome accanto è la sua etichetta. */ .oggi-area-riga strong { color: #c4b5fd; font-weight: 600; /* Cifre allineate e tutte della stessa larghezza. Corbel, il font del sito su Windows, di suo disegna le cifre «all'antica» — il 3 e il 5 scendono sotto la riga, il 6 sale — e «36%» sembrava storto. Con larghezze uguali le quattro percentuali stanno anche in colonna. */ font-variant-numeric: lining-nums tabular-nums; } /* Alta 6px e non 3: sotto i 4 non si distingue un 2% da uno zero, e lo zero è proprio il caso che va capito. */ .oggi-barra { height: 6px; border-radius: 3px; background: var(--bordo); overflow: hidden; } .oggi-barra i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--tinta) 55%, transparent), var(--tinta)); } .oggi-area-quanti { display: block; margin-top: 4px; font-size: 0.71rem; color: var(--testo-debole); } .oggi-momento { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 0; padding: 11px 14px; border: 1px solid var(--card-bordo); border-radius: 10px; background: rgba(255, 255, 255, 0.02); font-size: 0.9rem; } .oggi-momento span { color: var(--testo-tenue); } .oggi-occhiello { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-debole); margin-bottom: 10px; } .oggi-transito-titolo { margin: 0; font-size: 1.3rem; font-weight: 600; color: #9b8cff; } .oggi-transito-sotto { margin: 2px 0 0; font-size: 0.98rem; } .oggi-orbo { margin: 6px 0 14px; font-size: 0.76rem; color: var(--testo-debole); } .oggi-testo { margin: 0; font-size: 0.93rem; line-height: 1.65; } .oggi-link { display: inline-block; margin-top: 16px; font-size: 0.85rem; color: var(--accento); } .oggi-link:hover .oggi-freccia { margin-left: 4px; } .oggi-freccia { transition: margin-left 0.15s ease; display: inline-block; } /* ─── La fascia di domani ─────────────────────────────────────────── Era un paragrafo in corpo piccolo in fondo al riquadro, e si leggeva male: è il pezzo che dà la ragione per tornare domani, e stava lì come una nota a piè di pagina. Ora è una fascia con la sua immagine — il cielo notturno che il sito usa già in copertina — sfumata verso sinistra così il testo resta sempre su fondo pieno. L'immagine è decorazione: se il file non ci fosse, resta la sfumatura e non cambia niente di leggibile. */ .oggi-domani { position: relative; overflow: hidden; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: center; padding: 20px 26px; border-top: 1px solid var(--card-bordo); background: rgba(14, 11, 33, 0.96); } /* ╔══════════════════════════════════════════════════════════════════╗ ║ L'IMMAGINE SI DISSOLVE, NON SI TAGLIA ║ ║ ║ ║ Prima era un velo scuro sopra l'immagine, con l'opacità che ║ ║ calava da sinistra a destra. Conseguenza: il punto più ║ ║ luminoso del cielo cadeva esattamente sul bordo destro, dove ║ ║ la fascia finisce — una striscia chiara interrotta di netto, ║ ║ che sembra un errore di disegno più che una decorazione. ║ ║ ║ ║ Adesso l'immagine ha una maschera radiale centrata a destra: ║ ║ è più visibile al centro della sua area e svanisce in tutte le ║ ║ direzioni, bordi compresi. Non c'è nessun punto in cui ║ ║ qualcosa si interrompe. ║ ║ ║ ║ `-webkit-mask-image` accanto a `mask-image`: Safari lo chiede ║ ║ ancora. Dove la maschera non fosse supportata l'immagine ║ ║ resterebbe visibile per intero, e per quello l'opacità è bassa ║ ║ — il ripiego è un cielo un po' più presente, non testo ║ ║ illeggibile. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .oggi-domani::before { content: ""; position: absolute; inset: 0; z-index: 0; /* Il cielo della copertina, non quello nuovo: quello sta in testa al pannello. Due immagini diverse sopra e sotto danno profondità alla scheda; la stessa due volte la farebbe sembrare una ripetizione. */ background: url("/static/img/eroe-cielo.jpg") right center / cover; opacity: 0.5; /* Maschera radiale ancorata a destra: l'immagine è più presente nel suo ultimo terzo e svanisce in tutte le direzioni, bordi compresi. Larga com'era prima, il cielo arrivava sotto al paragrafo e lo rendeva faticoso. */ -webkit-mask-image: radial-gradient(58% 130% at 100% 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 76%); mask-image: radial-gradient(58% 130% at 100% 50%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 76%); pointer-events: none; } .oggi-domani > * { position: relative; z-index: 1; } .oggi-domani-chi { display: flex; gap: 14px; align-items: center; } .oggi-domani-icona { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; color: #cfc6ff; background: rgba(124, 92, 255, 0.22); border: 1px solid rgba(124, 92, 255, 0.45); } .oggi-domani-chi h3 { margin: 0; font-size: 1.3rem; } .oggi-domani-chi p { margin: 3px 0 0; font-size: 0.85rem; color: var(--testo-tenue); } .oggi-domani-cosa strong { display: block; margin-bottom: 6px; font-size: 1.02rem; } .oggi-domani-cosa p { margin: 0; font-size: 0.95rem; line-height: 1.6; } .oggi-fondale { margin-top: 18px; font-size: 0.86rem; } .oggi-fondale summary { cursor: pointer; color: var(--testo-tenue); list-style: none; } .oggi-fondale summary::before { content: "▸ "; color: var(--testo-debole); } .oggi-fondale[open] summary::before { content: "▾ "; } .oggi-fondale summary span { color: var(--testo-debole); } .oggi-fondale ul { margin: 6px 0 0; padding-left: 22px; color: var(--testo-tenue); } .oggi-tenue { color: var(--testo-tenue); font-size: 0.92rem; } /* Il menu a tendina del ramo «scegli un profilo». Esisteva, ed e' sparito riscrivendo da capo questo blocco: la regola stava insieme alle altre e il template ha continuato a chiamarla senza che niente protestasse. Un nome di classe che non corrisponde a nessuna regola non e' un errore per il browser, e' solo un elemento senza stile — qui un menu largo quanto tutta la scheda. E' lo stesso ramo che non avevo mai visto reso, perche' in locale il profilo principale era gia' scelto. */ .campo-stretto { max-width: 220px; } /* Il riquadro che chiede quale profilo guardare. E' la prima cosa che vede un account nuovo, al posto del cielo del giorno: vale un filo di colore invece del fondo delle altre schede, perche' li' si deve rispondere a una domanda. */ .oggi-invito { background: radial-gradient(120% 90% at 10% 0%, rgba(124, 92, 255, 0.14), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 55%), var(--card); } .oggi-come { margin: 0; padding: 12px 26px 16px; font-size: 0.76rem; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LE SCHEDE ILLUSTRATE DELL'AREA VUOTA ║ ║ ║ ║ Chi è appena entrato trova tre riquadri e nessun dato: la ║ ║ sfera celeste, i due profili e la bussola di Giulio stanno a ║ ║ destra, a 120 px, e il testo si ferma prima. Sono immagini di ║ ║ sfondo e non : non entrano nel flusso, non spostano i ║ ║ pulsanti, e sul telefono si riducono a 60 px in alto a destra. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .card-illustrata { position: relative; padding-right: 170px; } .card-illustrata::after { content: ""; position: absolute; z-index: 0; right: 24px; top: 50%; transform: translateY(-50%); width: 120px; height: 120px; background: var(--figura) center / contain no-repeat; filter: drop-shadow(0 0 16px rgba(124, 92, 255, 0.35)); pointer-events: none; } .card-illustrata > * { position: relative; z-index: 1; } .card-illustrata-piccola { padding-right: 150px; } .card-illustrata-piccola::after { width: 96px; height: 96px; } @media (max-width: 760px) { .card-illustrata, .card-illustrata-piccola { padding-right: 24px; padding-top: 22px; } .card-illustrata::after, .card-illustrata-piccola::after { width: 60px; height: 60px; top: 16px; right: 16px; transform: none; } .card-illustrata .card-titolo, .card-illustrata h1 { padding-right: 70px; } } .oggi-come a { color: var(--testo-debole); } @media (max-width: 900px) { .oggi-corpo { grid-template-columns: minmax(0, 1fr); } .oggi-domani { grid-template-columns: minmax(0, 1fr); gap: 14px; } /* Su schermo stretto l'immagine starebbe sotto il testo e basta: si spegne, perché una decorazione che non si vede non vale il peso di 300 kB su una connessione di telefono. */ .oggi-domani { background-image: none; } .oggi-zona-transito { border-left: 0; border-top: 1px solid var(--card-bordo); } .oggi-eventi { padding: 14px 16px 0; grid-template-columns: minmax(0, 1fr); } .oggi-zona-clima { grid-template-columns: minmax(0, 1fr); justify-items: center; } .oggi-zona-clima .oggi-aree { width: 100%; } .oggi-titolare { align-items: flex-start; } .oggi-luna { width: 46px; height: 46px; } .oggi-titolo { font-size: 1.4rem; } } /* =================================================================== Le scorciatoie di chi è entrato =================================================================== Sono le schede della vetrina in home, rimpicciolite e messe in fila. Stessa lingua grafica — pastiglia colorata, `--tinta`, figura di sfondo — perché un terzo stile inventato per questa riga renderebbe la pagina più ricca e meno coerente. La figura è mascherata dall'angolo in alto a destra e svanisce prima del testo: è la lezione della fascia «Domani», dove una maschera troppo larga aveva messo la ruota dello zodiaco sotto al paragrafo. */ .griglia-scorciatoie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; } .card-scorciatoia { position: relative; overflow: hidden; display: block; padding: 16px 16px 18px; border-radius: var(--raggio); border: 1px solid color-mix(in srgb, var(--tinta) 32%, var(--card-bordo)); background: linear-gradient(150deg, color-mix(in srgb, var(--tinta) 16%, transparent), transparent 70%), var(--card); color: var(--testo); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease; } .card-scorciatoia::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--figura) center / cover; opacity: 0.16; -webkit-mask-image: radial-gradient(70% 120% at 100% 0%, rgba(0, 0, 0, 0.9) 0%, transparent 72%); mask-image: radial-gradient(70% 120% at 100% 0%, rgba(0, 0, 0, 0.9) 0%, transparent 72%); } .card-scorciatoia > * { position: relative; z-index: 1; } .card-scorciatoia:hover { transform: translateY(-2px); border-color: var(--tinta); text-decoration: none; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ L'ICONA A DESTRA, COME NELLA VETRINA ║ ║ ║ ║ Stava sopra il titolo in una pastiglia da 40 px: tutto ║ ║ incolonnato a sinistra e la metà destra della scheda vuota. ║ ║ Titolo e sottotitolo qui sono corti, quindi a destra lo spazio ║ ║ c'è: l'icona ci sta grande quasi il doppio, centrata in ║ ║ altezza, e il testo si ferma prima di incontrarla. ║ ║ Niente pastiglia, per la stessa ragione delle schede in home: ║ ║ a questa misura la cornice stringerebbe la figura. Resta il ║ ║ bagliore nella tinta, che la lega alla scheda. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .card-scorciatoia { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding-right: 80px; } .card-scorciatoia > .icona-scorciatoia { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 68px; height: 68px; background: var(--icona) center / contain no-repeat; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tinta) 55%, transparent)); pointer-events: none; transition: transform 0.15s ease; } .card-scorciatoia:hover .icona-scorciatoia { transform: translateY(-50%) scale(1.06); } .card-scorciatoia h3 { margin: 0; font-size: 1.02rem; } .card-scorciatoia p { margin: 3px 0 0; font-size: 0.82rem; color: var(--testo-tenue); } /* Cinque schede da quando c'è l'annuncio del diario: su schermo largo stanno in fila, sotto i 900 px tornano a due per riga e l'annuncio, che è l'ultimo e resterebbe solo, prende tutta la riga. */ .griglia-scorciatoie { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1100px) { .griglia-scorciatoie { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .griglia-scorciatoie { grid-template-columns: repeat(2, minmax(0, 1fr)); } .griglia-scorciatoie > .card-presto { grid-column: 1 / -1; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ «PRESTO…»: LA SCHEDA DI UNA FUNZIONE CHE NON C'È ANCORA ║ ║ ║ ║ Stessa scheda delle altre — stessa tinta, stessa icona a ║ ║ destra — ma con un nastro dorato in alto che dice che non è ║ ║ ancora un posto dove andare. Il nastro è testo e non parte ║ ║ dell'immagine: così dice «Presto…» in italiano e «Soon…» in ║ ║ inglese. Il bordo tratteggiato e il cursore normale dicono il ║ ║ resto. All'amministratore la scheda si apre: dietro c'è il ║ ║ cantiere, e il tratteggio resta a ricordarglielo. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .card-presto { border-style: dashed; cursor: default; } .card-presto:hover { transform: none; } a.card-presto:hover { transform: translateY(-2px); } .card-presto h3, .card-presto p { opacity: 0.85; } .nastro-presto { position: absolute; top: 10px; left: 12px; z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2a1d0a; background: linear-gradient(135deg, #ffe9a8, #e8b84a 60%, #c9962a); box-shadow: 0 0 10px rgba(232, 184, 74, 0.45); } .card-scorciatoia.card-presto { padding-top: 30px; } .card-funzione.card-presto .nastro-presto { top: 16px; left: 20px; font-size: 0.72rem; } .card-funzione.card-presto { padding-top: 26px; min-height: 0; } /* La scheda larga in home: l'icona con la targa «Soon…» sta nella metà destra, grande e centrata in altezza, e il testo si ferma prima. */ .card-presto-larga, .card-funzione-larga { grid-column: 1 / -1; min-height: 300px; justify-content: center; } .card-presto-larga .icona-funzione, .card-funzione-larga .icona-funzione { width: 290px; height: 238px; top: 50%; bottom: auto; right: 7%; transform: translateY(-50%); filter: drop-shadow(0 0 22px rgba(232, 184, 74, 0.35)); } /* Il testo sta nella metà sinistra: niente max-width, che con box-sizing: border-box conterebbe anche il padding e strozzerebbe il paragrafo a una colonna di poche parole. */ .card-presto-larga h3, .card-presto-larga p, .card-funzione-larga h3, .card-funzione-larga p, .card-funzione-larga .link-funzione { padding-right: 46%; } /* Il libro con la Luna è quadrato, non largo come la targa «Soon…». */ .card-funzione-larga .icona-funzione { width: 230px; height: 230px; right: 9%; filter: drop-shadow(0 0 22px rgba(232, 184, 74, 0.35)); } @media (max-width: 760px) { .card-presto-larga, .card-funzione-larga { padding-top: 20px; } .card-presto-larga .icona-funzione, .card-funzione-larga .icona-funzione { position: static; transform: none; display: block; width: 200px; height: 164px; margin: 0 auto 6px; } .card-funzione-larga .icona-funzione { width: 150px; height: 150px; } .card-presto-larga h3, .card-presto-larga p, .card-funzione-larga h3, .card-funzione-larga p, .card-funzione-larga .link-funzione { padding-right: 0; } } /* =================================================================== Il diario dei sogni =================================================================== L'oro è il colore di ciò che è personale, e qui lo è tutto: il libro in testa, le etichette, i numeri dei giorni. Il resto resta nel viola del sito, così la sezione si riconosce senza staccarsi. */ .sogni-testa { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } .sogni-libro { width: 72px; height: 72px; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(232, 184, 74, 0.35)); } .sogni-testa-testo { flex: 1 1 240px; min-width: 0; } .sogni-titolo { margin: 0; font-size: 1.7rem; line-height: 1.1; } .sogni-sotto { margin: 4px 0 0; color: var(--testo-tenue); font-size: 0.9rem; } .sogni-azioni { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sogni-cerca input { margin: 0; width: 220px; max-width: 100%; padding: 9px 14px; border-radius: 999px; font-size: 0.9rem; } .sogni-cantiere { margin: -6px 0 16px; padding: 8px 12px; font-size: 0.78rem; line-height: 1.5; color: var(--testo-debole); border-left: 2px dashed #e8b84a; border-radius: 0 8px 8px 0; background: rgba(232, 184, 74, 0.06); } /* Il diario vuoto: il libro al centro, come una copertina. */ .sogni-vuoto { text-align: center; padding: 44px 24px; } .sogni-vuoto img { filter: drop-shadow(0 0 24px rgba(232, 184, 74, 0.35)); } .sogni-vuoto h2 { margin: 14px 0 6px; } .sogni-vuoto p { max-width: 52ch; margin: 0 auto 18px; color: var(--testo-tenue); } /* Il mese con le frecce, come la settimana nell'oroscopo. */ .sogni-mese { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; } .sogni-mese-nome { margin: 0; font-size: 1.15rem; } .sogni-mese-nome::first-letter { text-transform: uppercase; } .sogni-mese-link { margin-left: auto; font-size: 0.86rem; } /* Le frecce sono le icone 3D di Giulio: niente cerchio intorno, solo l'oggetto, che al passaggio si illumina e scivola nella sua direzione. */ .sogni-freccia { display: inline-grid; place-items: center; width: 40px; height: 40px; text-decoration: none; transition: transform 0.18s ease, filter 0.18s ease; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); } .sogni-freccia img { width: 34px; height: 34px; display: block; } .sogni-freccia:hover { filter: drop-shadow(0 0 10px rgba(192, 160, 255, 0.75)); } .sogni-freccia:first-child:hover { transform: translateX(-3px); } .sogni-freccia:last-child:hover { transform: translateX(3px); } .sogni-torna { display: inline-flex; align-items: center; gap: 8px; color: var(--testo-tenue); text-decoration: none; transition: color 0.18s ease; } .sogni-torna .mese { text-transform: capitalize; } .sogni-torna img { width: 28px; height: 28px; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); transition: transform 0.18s ease; } .sogni-torna:hover { color: var(--testo); text-decoration: none; } .sogni-torna:hover img { transform: translateX(-3px); } .sogni-mese-vuoto { text-align: center; color: var(--testo-tenue); padding: 30px 24px; } .sogni-mese-vuoto p { margin: 0 0 12px; } /* Le righe: il giorno grande a sinistra, come un'agenda. */ .sogni-elenco { display: flex; flex-direction: column; gap: 12px; } .sogno-riga { display: flex; gap: 18px; align-items: flex-start; padding: 16px 20px; text-decoration: none; color: var(--testo); border-left: 3px solid transparent; transition: transform 0.15s ease, border-color 0.15s ease; } .sogno-riga:hover { transform: translateY(-2px); border-color: var(--accento); text-decoration: none; } .sogno-giorno { flex-shrink: 0; width: 58px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1; } .sogno-giorno-numero { font-family: var(--serif); font-size: 2rem; color: #f0c24f; } .sogno-giorno-nome { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-debole); margin-top: 4px; } .sogno-giorno-mese { font-size: 0.66rem; color: var(--testo-debole); margin-top: 3px; text-transform: capitalize; } .sogno-corpo { flex: 1; min-width: 0; } .sogno-titolo-riga { margin: 0 0 4px; font-size: 1.05rem; } .sogno-anteprima { margin: 0; font-size: 0.88rem; color: var(--testo-tenue); line-height: 1.5; } .sogno-etichette { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; } .sogno-etichetta { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 3px; border-radius: 999px; font-size: 0.74rem; color: var(--testo-tenue); border: 1px solid var(--card-bordo); } .sogno-etichetta img { width: 20px; height: 20px; } .sogno-umore { font-size: 0.74rem; color: var(--testo-debole); } /* L'umore colora appena il bordo sinistro della riga e della pagina: sereno in verde acqua, inquieto in rosso spento, neutro niente. */ .umore-sereno { border-left-color: rgba(42, 157, 143, 0.7) !important; } .umore-inquieto { border-left-color: rgba(224, 92, 110, 0.7) !important; } .umore-voce .umore-pallino { width: 12px; height: 12px; border-radius: 50%; background: var(--testo-debole); } .umore-voce.umore-sereno .umore-pallino { background: #2a9d8f; } .umore-voce.umore-inquieto .umore-pallino { background: #e05c6e; } .umore-voce { border-left: 1px solid var(--card-bordo) !important; } /* La pagina del sogno. */ .sogno-pagina { border-left: 3px solid transparent; } .sogno-pagina-testa { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .sogno-pagina-data { margin: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #e8b84a; } .sogno-pagina-titolo { margin: 4px 0 0; font-size: 1.6rem; } .sogno-testo { margin-top: 18px; max-width: 68ch; font-size: 1.02rem; line-height: 1.75; } .sogno-testo p { margin: 0 0 1em; } .sogni-contatore { text-align: right; font-variant-numeric: tabular-nums; } .sogni-riservatezza { margin: 4px 0 16px; padding: 8px 12px; border-left: 2px solid #e8b84a; border-radius: 0 8px 8px 0; background: rgba(232, 184, 74, 0.08); line-height: 1.5; } /* Il calendario del mese: sette colonne, la Luna in filigrana su ogni notte, una stella sulle notti sognate. Le caselle sono quadrate e il disco lunare le riempie quasi tutte, tenue, così il numero resta leggibile sopra e il mese si legge come un cielo. */ .sogni-calendario { padding: 18px 18px 14px; margin-bottom: 18px; } .sogni-cal-intestazione, .sogni-cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .sogni-cal-intestazione span { text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--testo-tenue); padding-bottom: 6px; } .sogni-cal-casella, .sogni-cal-fuori { position: relative; aspect-ratio: 5 / 4; border-radius: 12px; display: block; } .sogni-cal-casella { background: rgba(255, 255, 255, 0.03); border: 1px solid transparent; color: var(--testo); text-decoration: none; overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } a.sogni-cal-casella:hover { transform: translateY(-2px); border-color: rgba(192, 160, 255, 0.5); background: rgba(255, 255, 255, 0.06); text-decoration: none; } .sogni-cal-casella .luna { position: absolute; left: 50%; top: 52%; height: 70%; width: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px rgba(241, 228, 184, 0.12)); } .luna-scura { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.10); stroke-width: 0.6; } .luna-chiara { fill: rgba(241, 228, 184, 0.42); } .sogni-cal-numero { position: absolute; top: 6px; left: 8px; font-family: var(--serif); font-size: 0.95rem; line-height: 1; color: var(--testo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .sogni-cal-stella { position: absolute; right: 6px; bottom: 4px; color: #e8b84a; font-size: 0.95rem; line-height: 1; text-shadow: 0 0 8px rgba(232, 184, 74, 0.8); } .sogni-cal-stella.statico { position: static; } /* La notte sognata: la Luna si accende e il bordo prende l'oro tenue. */ .sogni-cal-casella.sognata { background: rgba(232, 184, 74, 0.07); border-color: rgba(232, 184, 74, 0.28); } .sogni-cal-casella.sognata .luna-chiara { fill: rgba(241, 228, 184, 0.85); } .sogni-cal-casella.sognata .luna { filter: drop-shadow(0 0 8px rgba(241, 228, 184, 0.35)); } .sogni-cal-casella.sognata .sogni-cal-numero { color: #f3e7c0; } /* Oggi: un anello viola, lo stesso del pulsante. */ .sogni-cal-casella.oggi { box-shadow: inset 0 0 0 2px rgba(167, 139, 250, 0.9); } .sogni-cal-casella.oggi .sogni-cal-numero { color: #cdbcff; } .sogni-cal-casella.futura { cursor: default; background: transparent; } .sogni-cal-casella.futura .sogni-cal-numero { color: var(--testo-tenue); opacity: 0.7; } .sogni-cal-casella.futura .luna-chiara { fill: rgba(241, 228, 184, 0.26); } .sogni-cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 0.78rem; color: var(--testo-tenue); } .sogni-cal-legenda > span { display: inline-flex; align-items: center; gap: 6px; } .sogni-cal-legenda .luna { width: 16px; height: 16px; } .sogni-cal-legenda .luna-chiara { fill: rgba(241, 228, 184, 0.85); } .sogni-cal-oggi-punto { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(167, 139, 250, 0.9); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Il cielo di quella notte, in fondo alla scheda del sogno: la Luna grande col segno, poi gli aspetti come righe sottili con la figura del pianeta e un filo del colore dell'aspetto. */ .sogno-cielo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--card-bordo); } .sogno-cielo-titolo { margin: 0 0 12px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #e8b84a; font-family: var(--sans); font-weight: 600; } .sogno-cielo-luna { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .sogno-cielo-luna .luna-grande { flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(241, 228, 184, 0.35)); } .sogno-cielo-luna .luna-chiara { fill: #f1e4b8; } .sogno-cielo-luna .luna-scura { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.14); } .sogno-cielo-luna-testo { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; row-gap: 2px; } .sogno-cielo-luna-testo strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; } .sogno-cielo-segno { width: 26px; height: 26px; } .sogno-cielo-sotto { grid-column: 1 / -1; font-size: 0.86rem; color: var(--testo-tenue); } .sogno-cielo-aspetti { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sogno-cielo-aspetto { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border-left: 2px solid var(--colore, var(--card-bordo)); } .sogno-cielo-aspetto.luna-aspetto { background: rgba(241, 228, 184, 0.05); } .sogno-cielo-figura { flex: 0 0 auto; width: 26px; height: 26px; display: inline-grid; place-items: center; background: var(--figura) center / contain no-repeat; font-size: 1.1rem; color: var(--testo-tenue); filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)); } .sogno-cielo-frase { flex: 1; font-size: 0.95rem; } .sogno-cielo-orbo { font-size: 0.78rem; color: var(--testo-tenue); font-variant-numeric: tabular-nums; } .sogno-cielo-nota { margin: 6px 0 0; font-size: 0.84rem; color: var(--testo-tenue); line-height: 1.5; } /* La Luna piccola sotto il giorno, nell'elenco del mese. */ .sogno-giorno-luna { display: block; margin: 4px auto 0; width: 18px; height: 18px; opacity: 0.85; } .sogno-giorno-luna .luna-chiara { fill: rgba(241, 228, 184, 0.9); } .sogno-giorno-luna .luna { display: block; } /* La lettura del sogno: la scheda d'invito sotto il sogno, prima che la lettura arrivi. Il pulsante e la riga sulla quota stanno sulla stessa riga; sul telefono vanno a capo. */ .sogno-lettura { margin-top: 16px; } .sogno-lettura-intro { margin: -4px 0 14px; color: var(--testo-tenue); line-height: 1.55; } .sogno-lettura-invito form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sogno-lettura-quota { font-size: 0.82rem; color: var(--testo-tenue); } /* «Nuovo oroscopo», il pulsante del lunedì nella scheda Oggi: una riga centrata fra la testa e il quadrante — la stellina, il pulsante in vetro viola di Giulio, le stelle del clima della settimana. Al passaggio il pulsante si solleva e la stellina gira di un filo. */ .nuovo-oroscopo { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 26px 6px; text-decoration: none; } .nuovo-oroscopo-stella { width: 52px; height: 52px; filter: drop-shadow(0 0 10px rgba(232, 184, 74, 0.6)); transition: transform 0.25s ease; animation: nuovo-oroscopo-brilla 2.6s ease-in-out infinite; } .nuovo-oroscopo-pulsante { height: 62px; width: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); transition: transform 0.18s ease, filter 0.18s ease; } .nuovo-oroscopo:hover .nuovo-oroscopo-pulsante { transform: translateY(-2px); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(232, 184, 74, 0.35)); } .nuovo-oroscopo:hover .nuovo-oroscopo-stella { transform: rotate(15deg) scale(1.1); } .nuovo-oroscopo-clima { font-size: 1.15rem; letter-spacing: 0.04em; } .nuovo-oroscopo-clima .piena { color: #e8b84a; text-shadow: 0 0 8px rgba(232, 184, 74, 0.6); } .nuovo-oroscopo-clima .vuota { color: rgba(232, 184, 74, 0.35); } @keyframes nuovo-oroscopo-brilla { 0%, 100% { filter: drop-shadow(0 0 6px rgba(232, 184, 74, 0.45)); } 50% { filter: drop-shadow(0 0 14px rgba(232, 184, 74, 0.85)); } } @media (prefers-reduced-motion: reduce) { .nuovo-oroscopo-stella { animation: none; } } @media (max-width: 760px) { .nuovo-oroscopo { gap: 10px; padding: 12px 14px 2px; flex-wrap: wrap; } .nuovo-oroscopo-stella { width: 40px; height: 40px; } .nuovo-oroscopo-pulsante { height: 50px; } } /* Il pulsante «Leggi l'oroscopo della settimana» nella scheda Oroscopo: a tutta larghezza sotto la navigazione, è il passo successivo naturale e deve vedersi come tale. */ .oroscopo-leggi { display: block; text-align: center; margin-top: 14px; } @media (max-width: 760px) { .sogni-libro { width: 52px; height: 52px; } .sogni-titolo { font-size: 1.4rem; } .sogni-azioni { width: 100%; } .sogni-cerca { flex: 1; } .sogni-cerca input { width: 100%; } .sogno-riga { gap: 12px; padding: 14px; } .sogno-giorno { width: 46px; } .sogno-giorno-numero { font-size: 1.6rem; } .sogni-calendario { padding: 12px 10px 10px; } .sogni-cal-intestazione, .sogni-cal-griglia { gap: 4px; } .sogni-cal-casella, .sogni-cal-fuori { border-radius: 9px; aspect-ratio: 1; } .sogni-cal-numero { top: 3px; left: 5px; font-size: 0.78rem; } .sogni-cal-casella .luna { height: 60%; top: 58%; } .sogno-cielo-luna { gap: 10px; } .sogno-cielo-luna-testo strong { font-size: 1.02rem; } .sogno-cielo-frase { font-size: 0.88rem; } .sogni-cal-stella { right: 4px; bottom: 2px; font-size: 0.8rem; } .sogni-cal-intestazione span { font-size: 0.62rem; letter-spacing: 0.04em; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LA CLASSIFICA DEI SEGNI ║ ║ ║ ║ Il podio: tre gradini, il primo al centro e più alto, come ║ ║ sul podio vero. Le medaglie sono sfumature finché non arrivano ║ ║ quelle disegnate; le tinte sono oro, argento e bronzo caldi, ║ ║ accordati all'oro del sito e non a quello di una gara. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .classifica-date, .classifica-home-date { color: var(--accento-oro); font-family: var(--serif); font-size: 1.05rem; margin: 0 0 10px; } .classifica-home-date { text-align: center; margin: -6px 0 34px; } .classifica-settimane { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .classifica-settimane .pillola.attiva { background: var(--accento-tenue); border-color: var(--accento); color: var(--testo); } .classifica-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; margin: 8px 0 22px; } .podio-gradino { --medaglia: linear-gradient(145deg, #f6dc8c, #c9922f); position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 14px 18px; text-align: center; text-decoration: none; color: var(--testo); background: linear-gradient(180deg, rgba(232, 163, 61, 0.10), var(--card) 60%); border: 1px solid var(--card-bordo); border-radius: var(--raggio); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .podio-gradino:hover { transform: translateY(-3px); border-color: rgba(232, 163, 61, 0.45); box-shadow: var(--ombra); } .podio-1 { padding-top: 44px; padding-bottom: 30px; border-color: rgba(232, 163, 61, 0.40); box-shadow: 0 10px 40px rgba(232, 163, 61, 0.16); } .podio-2 { --medaglia: linear-gradient(145deg, #eef0f6, #9aa0b5); background: linear-gradient(180deg, rgba(200, 205, 225, 0.08), var(--card) 60%); } .podio-3 { --medaglia: linear-gradient(145deg, #f0b98a, #a3623a); background: linear-gradient(180deg, rgba(205, 127, 80, 0.09), var(--card) 60%); } .podio-medaglia { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--medaglia); color: #2a1d08; font-weight: 700; font-family: var(--serif); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .podio-1 .podio-medaglia { width: 46px; height: 46px; top: -22px; font-size: 1.2rem; } .podio-glifo { width: 64px; height: 64px; } .podio-1 .podio-glifo { width: 84px; height: 84px; } .podio-nome { font-family: var(--serif); font-size: 1.15rem; } .podio-1 .podio-nome { font-size: 1.35rem; } .podio-motivo { color: var(--testo-tenue); font-size: 0.86rem; line-height: 1.35; } .classifica-tuo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; background: var(--accento-tenue); color: #cfc3ff; border: 1px solid rgba(124, 92, 255, 0.45); } .podio-gradino.mio { border-color: rgba(124, 92, 255, 0.6); } .classifica-home-link { text-align: center; margin: -6px 0 30px; } .classifica-home-link a { color: var(--accento-oro); text-decoration: none; font-weight: 600; } .classifica-home-link a:hover { text-decoration: underline; } .classifica-elenco { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; } .classifica-riga { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--card); border: 1px solid var(--card-bordo); border-radius: var(--raggio-piccolo); scroll-margin-top: 90px; } .classifica-riga.sul-podio { border-color: rgba(232, 163, 61, 0.28); } .classifica-riga.mio { border-color: rgba(124, 92, 255, 0.6); background: linear-gradient(90deg, var(--accento-tenue), var(--card) 55%); } .classifica-riga:target { box-shadow: 0 0 0 2px var(--accento-oro); } .classifica-posto { flex: 0 0 34px; text-align: center; font-family: var(--serif); font-size: 1.35rem; color: var(--testo-debole); } .sul-podio .classifica-posto { color: var(--accento-oro); } .classifica-corpo { flex: 1 1 auto; min-width: 0; } .classifica-intestazione { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .classifica-intestazione strong { font-family: var(--serif); font-size: 1.1rem; } .classifica-intestazione .stelle { margin-left: auto; } .classifica-motivi { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 0.86rem; color: var(--testo-tenue); } .motivo::before { margin-right: 5px; } .motivo-pro::before { content: "▲"; color: var(--successo); font-size: 0.7em; } .motivo-contro::before { content: "▼"; color: var(--errore); font-size: 0.7em; } .motivo-giorno::before { content: "✦"; color: var(--accento-oro); } .classifica-nota p { color: var(--testo-tenue); } .classifica-come { margin-top: 16px; color: var(--testo-tenue); } .classifica-come summary { cursor: pointer; color: var(--testo); } @media (max-width: 620px) { .classifica-podio { gap: 8px; } .podio-gradino { padding: 28px 6px 12px; gap: 4px; } .podio-1 { padding-top: 36px; padding-bottom: 20px; } .podio-glifo { width: 46px; height: 46px; } .podio-1 .podio-glifo { width: 60px; height: 60px; } .podio-nome { font-size: 0.98rem; } .podio-1 .podio-nome { font-size: 1.1rem; } .podio-motivo { display: none; } .podio-gradino .stelle { font-size: 0.78rem; letter-spacing: 0; } .classifica-riga { padding: 12px; gap: 10px; align-items: flex-start; } .classifica-posto { flex-basis: 24px; font-size: 1.1rem; } .classifica-intestazione .stelle { margin-left: 0; width: 100%; } } /* La classifica nella scheda Oggi: il pulsante di Giulio e il posto del proprio segno, su una riga centrata come «Nuovo oroscopo». */ .oggi-classifica { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 12px 26px 4px; text-decoration: none; color: var(--testo); } .oggi-classifica-pulsante { height: 52px; width: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); transition: transform 0.18s ease, filter 0.18s ease; } .oggi-classifica:hover .oggi-classifica-pulsante { transform: translateY(-2px); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(124, 92, 255, 0.45)); } .oggi-classifica-testo-pulsante { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 600; background: linear-gradient(180deg, #3b2a78, #22184a); border: 1px solid rgba(160, 130, 255, 0.7); box-shadow: 0 0 14px rgba(124, 92, 255, 0.35); } .oggi-classifica-posto { display: flex; align-items: center; gap: 10px; } .oggi-classifica-posto > span:last-child { display: flex; flex-direction: column; gap: 2px; } .oggi-classifica-posto strong { font-family: var(--serif); font-size: 1.02rem; } .oggi-classifica-glifo { width: 36px; height: 36px; } .oggi-classifica-sotto { padding: 18px 0 4px; } /* Sotto i grafici occupa tutta la larghezza della zona, centrato: la zona è una griglia quadrante | aree, e da solo finirebbe nella prima cella. */ .oggi-zona-clima .oggi-pulsanti { grid-column: 1 / -1; justify-self: center; } .oggi-pulsanti { display: flex; flex-direction: column; align-items: center; gap: 4px; } .oggi-pulsanti .oggi-classifica-sotto { padding: 10px 0 0; } .oggi-pulsanti .oggi-classifica-pulsante { height: 56px; } @media (max-width: 760px) { .oggi-classifica { gap: 10px; padding: 12px 14px 2px; } .oggi-classifica-pulsante { height: 46px; } } /* Pannello, scheda Social: l'immagine della classifica accanto al testo del post. Sul telefono uno sotto l'altro. */ .social-anteprima { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 22px; align-items: start; } .social-anteprima img { width: 100%; height: auto; border-radius: var(--raggio-piccolo); box-shadow: var(--ombra); } .social-testo textarea { width: 100%; font-size: 0.9rem; } @media (max-width: 860px) { .social-anteprima { grid-template-columns: minmax(0, 1fr); } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LE SCHEDE DI UNA PERSONA, A PILLOLE (6/10/2026) ║ ║ ║ ║ Il disegno è di Giulio: un pannello con le schede a pillola, ║ ║ ognuna con la sua icona al tratto; quella aperta piena viola, ║ ║ la Lettura sempre un po' in evidenza. Solo qui: le barre del ║ ║ pannello e della coppia restano come sono (`.schede` liscia). ║ ╚══════════════════════════════════════════════════════════════════╝ */ .schede.schede-persona { gap: 8px; padding: 10px; margin-bottom: 22px; border: 1px solid var(--card-bordo); border-radius: 22px; background: rgba(27, 23, 51, 0.72); backdrop-filter: blur(6px); flex-wrap: wrap; } .schede-persona .scheda { gap: 9px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; color: var(--testo); background: rgba(255, 255, 255, 0.03); font-size: 0.88rem; white-space: nowrap; margin: 0; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .schede-persona .scheda:hover { border-color: rgba(160, 130, 255, 0.6); background: rgba(124, 92, 255, 0.10); } .schede-persona .scheda.attiva { color: #fff; font-weight: 600; border-color: rgba(190, 170, 255, 0.8); background: linear-gradient(180deg, #8a6cff, #5b3fd6); box-shadow: 0 0 18px rgba(124, 92, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .schede-persona .scheda-lettura:not(.attiva) { border-color: rgba(160, 130, 255, 0.65); background: rgba(124, 92, 255, 0.22); box-shadow: 0 0 12px rgba(124, 92, 255, 0.3); } .scheda-ico { display: inline-block; flex: 0 0 auto; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; } .schede-persona .scheda:not(.attiva) .scheda-ico { color: #d9ccff; } .btn-con-icona { display: inline-flex; align-items: center; gap: 9px; } @media (max-width: 760px) { .schede.schede-persona { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px; margin-right: -4px; -webkit-overflow-scrolling: touch; /* La sfumatura a destra dice che la barra continua. */ -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 36px; } .schede.schede-persona::-webkit-scrollbar { display: none; } .schede-persona .scheda { padding: 8px 14px; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LA BARRA IN ALTO CON LE ICONE (6/10/2026) ║ ║ ║ ║ Dal disegno di Giulio: ogni voce ha l'icona al tratto sopra la ║ ║ parola; una riga sottile la separa dai comandi, lingua ed Esci, ║ ║ che sono pastiglie con l'icona accanto. Le icone sono maschere ║ ║ (`static/img/nav-*.png`) e prendono il colore della voce. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .barra nav { gap: 2px; flex-wrap: nowrap; } .barra nav a.voce-ico { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 12px 8px; border-radius: 14px; font-size: 0.9rem; line-height: 1; white-space: nowrap; } .nav-ico { display: inline-block; flex-shrink: 0; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; } .barra nav a.voce-ico .nav-ico { color: #c9bcf8; transition: color 0.15s ease, transform 0.15s ease; } .barra nav a.voce-ico:hover .nav-ico { color: #fff; transform: translateY(-1px); } .barra nav a.voce-ico.attivo .nav-ico { color: #fff; filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.7)); } .barra nav a.voce-ico.attivo::after { left: 30%; right: 30%; bottom: -2px; } .barra-separatore { width: 1px; height: 44px; margin: 0 12px; flex-shrink: 0; background: linear-gradient(transparent, var(--card-bordo) 20%, var(--card-bordo) 80%, transparent); } .pillola-ico { gap: 8px; color: var(--testo-tenue); background: rgba(255, 255, 255, 0.025); padding: 9px 16px !important; font-size: 0.92rem !important; white-space: nowrap; } .pillola-ico .nav-ico { width: 20px; height: 20px; color: #c9bcf8; } .barra nav a.pillola-ico:hover { color: var(--testo); background: var(--accento-tenue); } .pulsante-esci { font: inherit; cursor: pointer; margin-left: 6px; color: var(--testo); } .pulsante-esci:hover { background: var(--accento-tenue); } /* «Registrati» è un pulsante pieno: il colore tenue delle voci e il loro sfondo al passaggio del mouse non devono toccarlo. */ .barra nav a.btn, .barra nav a.btn:hover { color: #fff; background: linear-gradient(135deg, var(--accento), #9b6cff 55%, var(--accento-scuro)); } /* Quando lo spazio manca, prima se ne va il motto sotto il nome (per l'amministratore, che ha una voce in più, già sotto i 1400 px), poi le parole delle voci: restano le icone, con il nome nel `title`. */ .marchio-slogan { white-space: nowrap; } @media (max-width: 1400px) and (min-width: 761px) { .barra-admin .marchio-slogan { display: none; } } @media (max-width: 1180px) and (min-width: 761px) { .marchio-slogan { display: none; } } @media (max-width: 1100px) and (min-width: 761px) { .barra nav a.voce-ico { padding: 9px 10px; } .barra nav a.voce-ico > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .barra nav a.voce-ico.attivo::after { bottom: 0; } .barra-separatore { margin: 0 8px; } } @media (max-width: 900px) and (min-width: 761px) { .pillola-ico { padding: 9px 12px !important; } .pulsante-esci > :not(.nav-ico) { display: none; } } /* Nel menu del telefono le voci sono righe intere: l'icona torna accanto alla parola, e la riga di separazione non serve. */ @media (max-width: 760px) { .menu-interruttore:checked ~ nav > a.voce-ico { flex-direction: row; justify-content: flex-start; gap: 14px; font-size: 1rem; } .menu-interruttore:checked ~ nav > a.voce-ico .nav-ico { width: 24px; height: 24px; } .menu-interruttore:checked ~ nav > a.voce-ico.attivo::after { display: none; } .barra-separatore { display: none; } .pulsante-esci { margin-left: 0; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PERSONE SALVATE (6/10/2026) ║ ║ ║ ║ Dal disegno di Giulio: icona e titolo con il conteggio sotto, ║ ║ «Aggiungi persona» pieno a destra; ogni riga ha l'avatar ║ ║ tondo e i pulsanti con l'icona. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .persone-testa { align-items: center; margin-bottom: 18px; } .persone-titolo { display: flex; align-items: center; gap: 16px; min-width: 0; } .persone-titolo-ico { width: 60px; height: 52px; flex-shrink: 0; background: #b9a6ff; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(124, 92, 255, 0.55)); } .persone-quota { margin-top: 4px; font-size: 0.9rem; color: var(--testo-debole); } .persone-aggiungi { padding: 12px 24px; } .btn-ico { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; } .btn-ico-largo { width: 30px; height: 21px; } .persona-riga { padding: 16px 20px; gap: 18px; } .persona-avatar { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; color: #d9cffc; background: radial-gradient(circle at 50% 40%, rgba(124, 92, 255, 0.35), rgba(40, 28, 92, 0.6) 70%); border: 1.5px solid rgba(167, 139, 250, 0.55); box-shadow: 0 0 14px rgba(124, 92, 255, 0.35), inset 0 0 10px rgba(124, 92, 255, 0.25); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .persona-riga:hover .persona-avatar { border-color: #c4b5fd; box-shadow: 0 0 18px rgba(124, 92, 255, 0.55); } .persona-avatar .btn-ico { width: 30px; height: 30px; } .persona-riga .persona-nome { font-size: 1.08rem; font-weight: 500; } .persona-riga .persona-dettaglio { margin-top: 3px; } .persona-riga .btn-piccolo { padding: 9px 18px; font-size: 0.9rem; } @media (max-width: 620px) { .persone-titolo-ico { width: 48px; height: 42px; } .persona-avatar { width: 46px; height: 46px; } .persona-avatar .btn-ico { width: 24px; height: 24px; } .persona-riga .persona-info { flex: 1 1 calc(100% - 64px); } .persone-aggiungi { padding: 10px 18px; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ PAGINA DEI TRANSITI (6/10/2026) ║ ║ ║ ║ Dal disegno di Giulio: ogni card ha in testa un'icona al tratto,║ ║ il titolo e una riga che spiega a cosa serve. La ruota è scura ║ ║ (vedi `wheel._scurisci`), con un alone viola dietro. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .transiti-alto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 22px; } .transiti-colonna { display: grid; gap: 22px; } .transiti-colonna > .card, .transiti-alto > .card, .transiti-basso > .card { margin-bottom: 0; } .transiti-basso { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } .segnaposto-durate { grid-column: span 2; } @media (max-width: 1080px) { .transiti-basso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .transiti-basso > .card:last-child { grid-column: 1 / -1; } } @media (max-width: 900px) { .transiti-alto, .transiti-basso { grid-template-columns: minmax(0, 1fr); } .transiti-basso > .card, .segnaposto-durate { grid-column: auto !important; } } /* La testa delle card: icona, titolo, riga di spiegazione. */ .testa-card { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .testa-card-testo { flex: 1; min-width: 0; } .testa-card h2 { margin: 0; font-size: 1.3rem; line-height: 1.25; } .testa-card p { margin: 4px 0 0; font-size: 0.86rem; color: var(--testo-tenue); } .card-ico { flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px; background: #b9a6ff; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(124, 92, 255, 0.5)); } /* La data in testa alla ruota: un calendario che cambia giorno subito. */ .data-veloce { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--card-bordo); background: rgba(255, 255, 255, 0.03); color: #c9bcf8; } .data-veloce input { width: auto; padding: 2px 0; margin: 0; border: 0; background: transparent; color: var(--testo); font-size: 0.88rem; color-scheme: dark; } .data-veloce input:focus { outline: none; box-shadow: none; } .data-veloce:focus-within { border-color: var(--accento); } /* Il calendarino del browser diventa invisibile e copre tutta la pastiglia: si clicca ovunque e si apre la scelta del giorno. */ .data-veloce { position: relative; cursor: pointer; } .data-veloce input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; } .data-veloce::after { content: "⌄"; margin: -6px 0 0 2px; color: var(--testo-debole); } /* La ruota scura, con l'alone. */ .ruota-scura { display: flex; justify-content: center; padding: 4px 0 8px; background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0.22), transparent 62%); } .ruota-scura .ruota-svg { max-width: 560px; filter: drop-shadow(0 0 18px rgba(124, 92, 255, 0.25)); } .legenda-ruota { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--card-bordo); font-size: 0.8rem; color: var(--testo-tenue); } .legenda-ruota span { display: inline-flex; align-items: center; gap: 8px; } .leg-punto { width: 11px; height: 11px; border-radius: 50%; } .leg-esterno { background: #f0a93a; box-shadow: 0 0 0 2px rgba(240, 169, 58, 0.25); } .leg-interno { background: #c8c2dc; box-shadow: 0 0 0 2px rgba(200, 194, 220, 0.25); } .leg-linea { width: 24px; height: 0; border-top: 2px solid; } .leg-armonici { border-color: #2dd4bf; } .leg-tensivi { border-color: #f472d0; border-top-style: dotted; } .nota-ruota { margin: 10px 0 0; text-align: center; font-size: 0.78rem; line-height: 1.6; color: var(--testo-debole); } /* Opzioni: la data a fianco dell'etichetta, i due pulsanti alla pari. */ .campo-in-linea { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; } .campo-in-linea label { margin: 0; font-size: 0.92rem; color: var(--testo); } .campo-in-linea input { color-scheme: dark; } /* La nota «la lettura guarda oggi», solo su una data diversa da oggi. */ .nota-data-lettura { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 16px; padding: 10px 14px; border-radius: 12px; background: rgba(232, 184, 74, 0.07); border: 1px solid rgba(232, 184, 74, 0.28); font-size: 0.8rem; line-height: 1.55; color: var(--testo-tenue); } .nota-data-lettura[hidden] { display: none; } .nota-data-lettura .btn-ico { flex: none; width: 17px; height: 17px; margin-top: 1px; color: #e8b84a; } .nota-data-lettura a { color: #e8c37a; white-space: nowrap; margin-left: 4px; } .azioni-opzioni { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .azioni-opzioni > *, .azioni-opzioni form .btn { width: 100%; } .azioni-opzioni .btn { padding: 13px 18px; justify-content: center; } .azioni-opzioni .gia-in-archivio { display: flex; align-items: center; justify-content: center; border-radius: 999px; } @media (max-width: 480px) { .azioni-opzioni { grid-template-columns: minmax(0, 1fr); } .campo-in-linea { grid-template-columns: minmax(0, 1fr); gap: 6px; } } /* Il conto degli aspetti: tutti, armonici, tensivi. */ .conta-aspetti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .conta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--card-bordo); background: rgba(255, 255, 255, 0.03); font-size: 0.82rem; color: var(--testo-tenue); line-height: 1.25; } .conta strong { display: block; font-size: 1.35rem; font-weight: 600; color: var(--testo); } .conta-segno { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; font-size: 1.25rem; line-height: 1; } .conta-segno .btn-ico { width: 22px; height: 22px; } .conta-tutti .conta-segno { color: #c4b5fd; background: rgba(124, 92, 255, 0.18); } .conta-armonici { border-color: rgba(45, 212, 191, 0.35); background: rgba(45, 212, 191, 0.06); } .conta-armonici .conta-segno, .conta-armonici strong { color: #2dd4bf; } .conta-armonici .conta-segno { background: rgba(45, 212, 191, 0.14); } .conta-tensivi { border-color: rgba(244, 114, 182, 0.35); background: rgba(244, 114, 182, 0.06); } .conta-tensivi .conta-segno, .conta-tensivi strong { color: #fb7185; } .conta-tensivi .conta-segno { background: rgba(244, 114, 182, 0.14); } @media (max-width: 480px) { .conta { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; } } /* Simboli dei pianeti nelle tabelle, sempre come testo e mai emoji. */ .glifo { display: inline-block; width: 1.5em; margin-right: 4px; color: #c4b5fd; font-size: 1.05rem; text-align: center; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols", "Noto Sans Symbols 2", sans-serif; } .segno-mini { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; } .tabella-aspetti th, .tabella-compatta th { font-size: 0.68rem; } .tabella-compatta th, .tabella-compatta td { padding-left: 6px; padding-right: 6px; } .tabella-compatta td.mono { white-space: nowrap; } .tabella-aspetti td { padding-top: 9px; padding-bottom: 9px; } .tabella-compatta td { padding-top: 8px; padding-bottom: 8px; font-size: 0.84rem; } /* L'aspetto come pillola colorata, con il suo punto. */ .pillola-aspetto { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 3px 11px 3px 8px; border-radius: 999px; font-size: 0.8rem; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); } .pillola-aspetto::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .asp-congiunzione { --c: #b39dff; } .asp-trigono { --c: #60a5fa; } .asp-sestile { --c: #34d399; } .asp-quadratura { --c: #fb7185; } .asp-opposizione { --c: #f43f5e; } .asp-trigono.pillola-aspetto::before { border-radius: 0; width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--c); } .asp-quadratura.pillola-aspetto::before { border-radius: 2px; } .pillola-piccola { padding: 1px 8px 1px 6px; font-size: 0.74rem; gap: 5px; } .pillola-piccola::before { width: 7px; height: 7px; } .asp-trigono.pillola-piccola::before { border-left-width: 4px; border-right-width: 4px; border-bottom-width: 7px; } .trattino-aspetto { color: var(--testo-debole); margin: 0 4px; } /* Fuori dalla pagina dei transiti la pillola sta accanto al pianeta natale, nella stessa cella: un po' d'aria fra i due. */ td > .pillola-aspetto + .glifo { margin-left: 6px; } /* Le durate: una riga per transito, con la barra dall'entrata all'uscita. */ .durate { display: grid; gap: 10px; } .durata { display: grid; grid-template-columns: minmax(0, 1fr) 12px; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; color: var(--testo); border: 1px solid var(--card-bordo); background: rgba(255, 255, 255, 0.025); transition: border-color 0.15s ease, background 0.15s ease; } .durata:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: rgba(255, 255, 255, 0.045); } .durata-titolo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; } .durata-pianeta { display: inline-flex; align-items: center; font-size: 0.94rem; white-space: nowrap; } .durata-pianeta .glifo { color: #e8c46a; } .durata-corpo { display: grid; gap: 6px; min-width: 0; } .durata-aspetto { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--c); } .pallino-aspetto { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } .durata-date { display: flex; justify-content: space-between; gap: 8px; font-size: 0.74rem; color: var(--testo-debole); font-variant-numeric: tabular-nums; } .durata-picco { color: var(--testo); font-weight: 600; } .durata-barra { position: relative; height: 4px; margin: 5px 0 3px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); } .durata-pieno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c); opacity: 0.85; } .durata-punto { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 0 10px var(--c); } .durata-oggi { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; opacity: 0.85; } .durata-freccia { font-size: 1.4rem; color: var(--testo-debole); line-height: 1; } /* Retrogradazioni: l'etichetta RX. */ .etichetta-rx { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: #fb7185; background: rgba(244, 63, 94, 0.14); border: 1px solid rgba(244, 63, 94, 0.35); } .altre-durate { margin-top: 10px; } .altre-durate > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 6px 2px; font-size: 0.86rem; color: #b39dff; } .altre-durate > summary::-webkit-details-marker { display: none; } .altre-durate > summary::after { content: "→"; transition: transform 0.15s ease; } .altre-durate[open] > summary::after { transform: rotate(90deg); } .altre-durate[open] > summary { margin-bottom: 8px; } .card-transiti .testa-card h2 { font-size: 1.22rem; } .legenda-ruota { gap: 8px 16px; font-size: 0.76rem; } .tabella-scorre { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } /* I nomi dei pianeti possono andare a capo: «Nodo Nord (medio)» su una riga sola spingeva l'orbo fuori dalla card. Il rientro sospeso tiene il glifo a sinistra e la seconda riga sotto il nome, non sotto il glifo. */ .tabella-aspetti td:first-child, .tabella-aspetti td:nth-child(2) { padding-left: 39px; text-indent: -29px; line-height: 1.35; } .tabella-aspetti .pillola-aspetto { text-indent: 0; } @media (max-width: 560px) { .card-transiti .testa-card { flex-wrap: wrap; } .card-transiti .testa-card-testo { flex-basis: calc(100% - 50px); } .card-transiti .data-veloce { margin-left: 44px; } .tabella-aspetti .glifo { display: none; } .tabella-aspetti td:first-child, .tabella-aspetti td:nth-child(2) { padding-left: 4px; text-indent: 0; } .tabella-aspetti th, .tabella-aspetti td { padding-left: 4px; padding-right: 4px; font-size: 0.84rem; } .tabella-aspetti th { font-size: 0.62rem; } .pillola-aspetto { padding: 2px 8px 2px 6px; font-size: 0.74rem; gap: 5px; } .col-stato { display: none; } .durata { padding: 11px 12px; } } /* Sul telefono, dopo la ruota vengono gli aspetti e poi le opzioni. */ @media (max-width: 900px) { .transiti-colonna { display: contents; } .transiti-alto > .card { order: 1; } .card-opzioni { order: 2; } } /* L'area personale: una voce come le altre, con l'icona al neon di Giulio. L'immagine ha l'alone dentro, per questo è più grande della maschera delle altre voci e sta un po' più in alto. */ .nav-ico-neon { display: block; width: 34px; height: 34px; margin: -4px 0 -4px; transition: filter 0.15s ease, transform 0.15s ease; } .barra nav a.voce-area { color: var(--testo); } .barra nav a.voce-area:hover .nav-ico-neon { filter: brightness(1.2); transform: translateY(-1px); } .barra nav a.voce-area.attivo .nav-ico-neon { filter: brightness(1.25) drop-shadow(0 0 6px rgba(167, 139, 250, 0.7)); } @media (max-width: 760px) { .menu-interruttore:checked ~ nav > a.voce-area { order: -1; } .menu-interruttore:checked ~ nav > a.voce-area .nav-ico-neon { width: 30px; height: 30px; margin: -3px; } } /* La mezza stella: la stella piena colorata solo nella metà sinistra. */ .stella.mezza { background: linear-gradient(90deg, var(--attenzione) 50%, rgba(160, 150, 200, 0.35) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } .giorno-percentuale { font-size: 0.8rem; font-weight: 600; color: #c4b5fd; font-variant-numeric: tabular-nums; } /* A quale momento si riferisce una lettura: sotto il titolo e nel modulo. */ .lettura-quando { margin-top: 4px; font-size: 0.84rem; color: #c4b5fd; } .lettura-quando-grande { font-size: 0.95rem; margin: 2px 0 4px; } #lettura-quando { margin-top: 6px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ NOVITÀ (6/10/2026) ║ ╚══════════════════════════════════════════════════════════════════╝ */ .novita-testa { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; } .novita-ico { width: 44px; height: 44px; } .novita-intro { margin: 4px 0 0; color: var(--testo-tenue); } .novita-elenco { display: grid; gap: 18px; max-width: 820px; } .novita-uscita { margin-bottom: 0; } .novita-data { margin: 0 0 12px; font-size: 1.2rem; color: #d9cffc; } .novita-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .novita-voce { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: baseline; line-height: 1.55; } .novita-tipo { justify-self: start; padding: 2px 10px; border-radius: 999px; white-space: nowrap; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); } .novita-tipo-novita { --c: #c4b5fd; } .novita-tipo-miglioramento { --c: #2dd4bf; } .novita-tipo-correzione { --c: #f0b45a; } .novita-invito { max-width: 820px; margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .novita-invito p { margin: 0; flex: 1 1 320px; } @media (max-width: 560px) { .novita-voce { grid-template-columns: minmax(0, 1fr); gap: 4px; } } /* Il segnale nell'area personale. */ .segnale-novita { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 10px 16px; border-radius: 14px; color: var(--testo); border: 1px solid rgba(167, 139, 250, 0.45); background: linear-gradient(90deg, rgba(124, 92, 255, 0.18), rgba(124, 92, 255, 0.05)); } .segnale-novita:hover { text-decoration: none; border-color: #c4b5fd; } .segnale-novita .card-ico { width: 24px; height: 24px; margin: 0; } .segnale-novita-freccia { margin-left: auto; color: #c4b5fd; } /* Sul telefono: Apri e Modifica in fila, sotto «Rendi profilo principale» ed Elimina, che resta in fondo a destra. */ @media (max-width: 620px) { .persona-riga > .btn { order: 2; } .persona-riga > .sono-io-modulo { order: 3; margin: 0; } .persona-riga > form:not(.sono-io-modulo) { order: 4; margin: 0 0 0 auto; } } /* Facebook e YouTube nel piede: accanto ai collegamenti legali, stesso tono; l'icona (se c'è) prende il colore della scritta. */ .piede-social { display: flex; gap: 16px; } .piede-social a { display: inline-flex; align-items: center; gap: 6px; color: var(--testo-debole); text-decoration: none; border-bottom: 1px solid transparent; } .piede-social a:hover { color: #c4b5fd; border-bottom-color: var(--card-bordo); } .piede-social-ico { width: 22px; height: 22px; display: block; opacity: 0.85; transition: opacity 0.15s ease, transform 0.15s ease; } .piede-social a:hover .piede-social-ico { opacity: 1; transform: translateY(-1px); } @media (max-width: 680px) { .piede-social { order: 5; flex-basis: 100%; justify-content: center; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ AREA PERSONALE: IL SALUTO E «COSA VUOI ESPLORARE OGGI?» ║ ║ Dal disegno di Giulio, 6/10/2026. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .saluto { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 250px; margin: 4px 0 30px; padding: 40px 44px 36px; border-radius: var(--raggio); border: 1px solid var(--card-bordo); background: linear-gradient(90deg, rgba(13, 9, 32, 0.92) 0%, rgba(13, 9, 32, 0.62) 38%, rgba(13, 9, 32, 0.05) 70%), linear-gradient(0deg, rgba(13, 9, 32, 0.75), transparent 45%), var(--sfondo) 70% 40% / cover no-repeat, #120c2b; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .saluto-data { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 0.9rem; color: var(--testo-tenue); text-transform: capitalize; } .saluto-titolo { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); } .saluto-sotto { margin: 8px 0 0; font-family: var(--serif); font-size: 1.2rem; color: #d9d2f5; } .saluto-citazione { margin: 0; max-width: 270px; align-self: center; text-align: right; text-wrap: balance; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.45; color: #f1ecff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); } .saluto-citazione p { margin: 0; } .saluto-citazione::after { content: ""; display: block; width: 36px; height: 2px; margin: 12px 0 0 auto; background: #f0c24f; opacity: 0.85; } .esplora { margin-bottom: 30px; } .esplora-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 18px; } .esplora-domanda { margin: 0; display: flex; align-items: center; gap: 16px; font-family: var(--serif); font-weight: 600; font-size: 1.65rem; } .esplora-sotto { margin: 0; color: var(--testo-tenue); font-size: 0.92rem; } .esplora-griglia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .esplora-scheda { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 290px; padding: 16px 16px 18px; border-radius: 16px; color: var(--testo); text-decoration: none; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tinta) 60%, transparent); background: radial-gradient(120% 70% at 50% 18%, color-mix(in srgb, var(--tinta) 34%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--tinta) 16%, #120c2b), #120c2b 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 26px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } a.esplora-scheda:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta), 0 14px 30px rgba(0, 0, 0, 0.35), 0 0 26px color-mix(in srgb, var(--tinta) 35%, transparent); } .esplora-figura { display: block; align-self: center; width: 116px; height: 116px; margin: 4px 0 14px; background: var(--figura) center / contain no-repeat; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tinta) 60%, transparent)); transition: transform 0.18s ease; } a.esplora-scheda:hover .esplora-figura { transform: scale(1.05); } .esplora-titolo { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.22rem; } .esplora-testo { margin: 6px 0 14px; font-size: 0.82rem; line-height: 1.45; color: var(--testo-tenue); } .esplora-freccia { margin-top: auto; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tinta) 75%, white 10%); color: #fff; font-size: 0.95rem; } a.esplora-scheda:hover .esplora-freccia { background: color-mix(in srgb, var(--tinta) 35%, transparent); } .esplora-presto { cursor: default; } .esplora-presto .esplora-freccia { opacity: 0.5; } .esplora-nastro { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #cfd0ff; border: 1px solid color-mix(in srgb, var(--tinta) 70%, transparent); background: rgba(18, 12, 43, 0.7); } @media (max-width: 1100px) { .esplora-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } .esplora-scheda { min-height: 0; } .saluto-citazione { max-width: 240px; font-size: 0.94rem; } } /* Sul telefono: saluto basso, senza citazione, e le schede in fila che scorrono di lato, così il cielo di oggi arriva presto. */ @media (max-width: 680px) { .saluto { min-height: 0; padding: 26px 22px 22px; margin-bottom: 22px; background-position: 0 0, 0 0, 78% 30%, 0 0; } .saluto-citazione { display: none; } .saluto-sotto { font-size: 1.02rem; } .esplora-domanda { font-size: 1.3rem; } .esplora-sotto { display: none; } .esplora-griglia { display: flex; overflow-x: auto; gap: 12px; padding: 2px 2px 10px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: none; } .esplora-griglia::-webkit-scrollbar { display: none; } .esplora-scheda { flex: 0 0 142px; scroll-snap-align: start; padding: 12px 12px 14px; } .esplora-figura { width: 76px; height: 76px; margin-bottom: 8px; } .esplora-titolo { font-size: 1.05rem; } .esplora-testo { font-size: 0.76rem; } .esplora-freccia { width: 30px; height: 30px; } } /* Fra telefono e computer (620-1000 px circa) i quattro pulsanti di una riga — Rendi profilo principale, Apri, Modifica, Elimina — non ci stavano accanto ai dati e uscivano dal riquadro: ora vanno a capo. */ @media (min-width: 621px) and (max-width: 1060px) { .persona-riga { flex-wrap: wrap; row-gap: 12px; } .persona-riga .persona-info { flex: 1 1 calc(100% - 80px); } .persona-riga > .persona-info + * { margin-left: 76px; } .persona-riga > form:not(.sono-io-modulo) { margin-left: auto; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ SUL TELEFONO NIENTE CHE SCORRE DI LATO (6/10/2026) ║ ║ ║ ║ Schede della persona e «Cosa vuoi esplorare oggi?» scorrevano ║ ║ di lato: col dito si capisce, ma con il mouse in una finestra ║ ║ stretta sembrava una pagina tagliata («non ridimensiona», ha ║ ║ detto Giulio). Ora vanno a capo: le schede della persona come ║ ║ pillole su più righe, le sei schede come nel disegno di Giulio ║ ║ per il telefono, due per riga, figura a sinistra e testo a ║ ║ destra. ║ ╚══════════════════════════════════════════════════════════════════╝ */ @media (max-width: 760px) { .schede.schede-persona { flex-wrap: wrap; overflow: visible; padding: 8px; margin-left: 0; margin-right: 0; gap: 6px; -webkit-mask-image: none; mask-image: none; } .schede-persona .scheda { padding: 7px 12px; font-size: 0.86rem; gap: 7px; } .schede-persona .scheda-ico { width: 17px; height: 17px; } } @media (max-width: 680px) { .esplora-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 10px; padding: 0; margin: 0; } .esplora-scheda { flex: none; min-height: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 12px; border-radius: 14px; } .esplora-figura { grid-row: 1 / 3; width: 50px; height: 50px; margin: 0; align-self: center; } .esplora-titolo { font-size: 0.98rem; align-self: end; } .esplora-testo { margin: 2px 0 0; font-size: 0.72rem; line-height: 1.35; align-self: start; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .esplora-freccia { display: none; } .esplora-nastro { top: 6px; right: 6px; font-size: 0.52rem; padding: 2px 6px; } } @media (max-width: 360px) { .esplora-griglia { grid-template-columns: minmax(0, 1fr); } } /* Sotto i 440 px il testo intero, senza puntini: la scheda si allunga di una riga, ma una frase troncata a metà sembra un errore. */ @media (max-width: 440px) { .esplora-scheda { grid-template-columns: 42px minmax(0, 1fr); column-gap: 9px; padding: 11px 10px; } .esplora-figura { width: 42px; height: 42px; } .esplora-titolo { font-size: 0.92rem; line-height: 1.2; } .esplora-testo { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 0.7rem; } .esplora-presto .esplora-titolo { margin-top: 14px; } } /* «Persone salvate» nel saluto: porta in fondo alla pagina senza scorrere. Lo scorrimento è morbido e si ferma un po' sotto la barra. */ html { scroll-behavior: smooth; } #persone { scroll-margin-top: 90px; } .saluto-persone { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 10px 8px 14px; border-radius: 999px; color: #efeaff; font-size: 0.9rem; font-weight: 500; text-decoration: none; border: 1px solid rgba(196, 181, 253, 0.45); background: rgba(18, 12, 43, 0.55); backdrop-filter: blur(6px); transition: border-color 0.15s ease, background 0.15s ease; } .saluto-persone:hover { text-decoration: none; border-color: #c4b5fd; background: rgba(124, 92, 255, 0.25); } .saluto-persone .btn-ico { width: 20px; height: 20px; color: #c4b5fd; } .saluto-persone-conto { min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center; font-size: 0.78rem; font-weight: 600; color: #1d1442; background: #c4b5fd; } @media (max-width: 680px) { .saluto-persone { margin-top: 14px; font-size: 0.84rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* «Persone salvate» nel saluto, dal disegno di Giulio: pillola di vetro con il bordo lilla luminoso, l'icona del gruppo, e il numero in una perla lilla a destra. Rifatta in CSS e non immagine perché il numero cambia da utente a utente. */ .saluto-persone { gap: 14px; margin-top: 20px; padding: 7px 7px 7px 18px; font-size: 1.02rem; font-weight: 500; letter-spacing: 0.01em; color: #f1edff; border: 1.5px solid rgba(167, 139, 250, 0.85); background: linear-gradient(180deg, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.03) 60%), rgba(17, 11, 40, 0.72); box-shadow: 0 0 14px rgba(124, 92, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .saluto-persone:hover { border-color: #c4b5fd; background: linear-gradient(180deg, rgba(167, 139, 250, 0.26), rgba(167, 139, 250, 0.06) 60%), rgba(17, 11, 40, 0.72); box-shadow: 0 0 20px rgba(124, 92, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .saluto-persone .btn-ico { width: 32px; height: 32px; color: #b9a6ff; filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.5)); } .saluto-persone-conto { display: grid; place-items: center; min-width: 0; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 1.02rem; font-weight: 600; color: #1b1240; background: radial-gradient(circle at 38% 32%, #f1ecff 0%, #c9b8ff 45%, #9d84f5 100%); box-shadow: 0 0 12px rgba(167, 139, 250, 0.7), inset 0 -2px 4px rgba(80, 50, 170, 0.35); } @media (max-width: 680px) { .saluto-persone { font-size: 0.92rem; padding: 5px 5px 5px 14px; gap: 10px; } .saluto-persone .btn-ico { width: 22px; height: 22px; } .saluto-persone-conto { width: 30px; height: 30px; font-size: 0.9rem; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LA STELLINA CHE BRILLA (6/10/2026, idea di Giulio) ║ ║ ║ ║ Sulla Lettura, quando oggi è cambiato qualcosa che non hai ║ ║ ancora letto (`services/segnale`). È la stellina dorata di ║ ║ «Nuovo Oroscopo»: ogni tre secondi scintilla — si allarga, si ║ ║ illumina, ruota appena — poi torna tranquilla. Chi ha chiesto ║ ║ meno movimento la vede ferma e luminosa. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .stellina-nuovo { display: inline-block; flex-shrink: 0; width: 26px; height: 26px; background: url('/static/img/stellina.png') center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(255, 214, 120, 0.85)); animation: stellina-brilla 3s ease-in-out infinite; pointer-events: auto; } @keyframes stellina-brilla { 0%, 62%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 4px rgba(255, 214, 120, 0.8)); opacity: 0.92; } 72% { transform: scale(1.35) rotate(18deg); filter: drop-shadow(0 0 10px rgba(255, 220, 130, 1)) drop-shadow(0 0 18px rgba(255, 190, 80, 0.7)); opacity: 1; } 82% { transform: scale(0.95) rotate(-6deg); } } @media (prefers-reduced-motion: reduce) { .stellina-nuovo { animation: none; filter: drop-shadow(0 0 8px rgba(255, 214, 120, 0.95)); } } /* Sulla scheda grande: in alto a destra, come un nastro. */ .esplora-scheda > .stellina-nuovo { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; } /* Sulla pillola Lettura: accanto alla parola, un po' sollevata. */ .schede-persona .scheda > .stellina-nuovo { width: 20px; height: 20px; margin: -6px -4px -6px 0; } @media (max-width: 680px) { .esplora-scheda > .stellina-nuovo { top: 6px; right: 6px; width: 24px; height: 24px; } } .esplora-scheda > .stellina-nuovo { width: 44px; height: 44px; top: 8px; right: 8px; } .esplora-novita { color: #f3cf7a; font-weight: 500; } .esplora-scheda:has(.stellina-nuovo) { border-color: color-mix(in srgb, #f0c24f 75%, transparent); animation: scheda-chiama 3s ease-in-out infinite; } @keyframes scheda-chiama { 0%, 62%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 26px rgba(0, 0, 0, 0.3); } 72% { box-shadow: 0 0 0 1px rgba(240, 194, 79, 0.7), 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 26px rgba(240, 194, 79, 0.35); } } @media (prefers-reduced-motion: reduce) { .esplora-scheda:has(.stellina-nuovo) { animation: none; } } @media (max-width: 680px) { .esplora-scheda > .stellina-nuovo { top: 5px; right: 5px; width: 26px; height: 26px; } } /* Il momento favorevole con l'icona di Giulio (6/10/2026): a sinistra l'icona al neon, poi la scritta, a destra il momento. Il riquadro prende un velo lilla, come la pillola delle persone nel saluto. */ .oggi-momento { justify-content: flex-start; gap: 12px; padding: 10px 16px 10px 12px; border-color: rgba(167, 139, 250, 0.4); border-radius: 14px; background: linear-gradient(90deg, rgba(124, 92, 255, 0.14), rgba(124, 92, 255, 0.03) 70%); } .oggi-momento-ico { width: 38px; height: 38px; flex-shrink: 0; margin: -4px 0; } .oggi-momento strong { margin-left: auto; font-size: 1rem; color: #f1edff; letter-spacing: 0.01em; } /* Sul telefono la colonna è stretta: il testo giustificato lasciava buchi larghi fra le parole. Allineato a sinistra si legge meglio. */ @media (max-width: 700px) { .paragrafo-lettura { text-align: left; } .pagina-libro, .pagina-libro-ampia { font-size: 1rem; line-height: 1.7; } } /* La citazione della home (6/10/2026): stava sopra la ruota dello zodiaco e si leggeva male. Ora scende in basso, sul cielo scuro, con un velo dietro come nel saluto dell'area personale. */ .citazione-eroe { align-self: end; max-width: 250px; padding: 16px 20px; text-align: right; font-style: italic; font-size: 1.06rem; line-height: 1.5; color: #f1ecff; border-radius: 14px; background: rgba(12, 8, 30, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); } .citazione-eroe::after { content: ""; width: 36px; height: 2px; margin: 12px 0 0 auto; background: #f0c24f; opacity: 0.85; font-size: 0; } /* L'OBE in vetrina: non porta ancora da nessuna parte. */ .card-funzione-presto { cursor: default; border-style: dashed; } .card-funzione-presto:hover { transform: none; } .card-funzione-presto .esplora-nastro { top: 14px; right: 14px; } /* Il testo delle schede in vetrina non deve finire sotto la figura, che sta in basso a destra: la colonna si ferma prima. */ .griglia-vetrina .card-funzione p { padding-right: 110px; } @media (max-width: 760px) { .griglia-vetrina .card-funzione p { padding-right: 0; margin-bottom: 56px; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ IL MODULO «GENERA LETTURA» (partials/_modulo_lettura.html) ║ ║ ║ ║ Tre passi con il numero in un cerchio, ogni selettore con ║ ║ l'icona della scelta a sinistra, i due modi come schede da ║ ║ toccare e il pulsante grande. Sotto, quanto costa. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .modulo-lettura { padding: 26px 26px 22px; background: radial-gradient(120% 60% at 0% 0%, rgba(124, 92, 255, 0.14), transparent 60%), var(--card); border-color: color-mix(in srgb, var(--accento) 22%, var(--card-bordo)); } .ml-testa { margin-bottom: 18px; } .ml-testa h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; } .ml-testa p { margin: 0; font-size: 0.9rem; color: var(--testo-tenue); } .modulo-lettura .contatori { margin-bottom: 8px; } .ml-sezione { margin-top: 22px; } .ml-passo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; } .ml-numero { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: 0.92rem; color: #e4dcff; background: radial-gradient(circle at 50% 35%, rgba(124, 92, 255, 0.35), rgba(40, 28, 92, 0.55) 75%); border: 1.5px solid rgba(167, 139, 250, 0.7); box-shadow: 0 0 12px rgba(124, 92, 255, 0.35); } .ml-passo-titolo { margin: 3px 0 2px; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--testo); } .ml-scintilla { color: #a78bfa; font-size: 0.8em; margin-left: 2px; } .ml-passo-aiuto { margin: 0; font-size: 0.82rem; color: var(--testo-debole); } /* Il selettore con l'icona: il campo è il solito, con spazio a sinistra per l'icona e la freccia disegnata da noi a destra, uguale in tutti i browser. */ .ml-scelta { position: relative; } .ml-scelta select { -webkit-appearance: none; appearance: none; cursor: pointer; padding: 14px 46px 14px 54px; font-size: 1rem; border-radius: 12px; } .ml-scelta-ico { position: absolute; left: 17px; top: 50%; width: 24px; height: 24px; margin-top: -12px; pointer-events: none; background: #cdbfff; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; } .ml-scelta::after { content: ""; position: absolute; right: 19px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--testo-tenue); border-bottom: 2px solid var(--testo-tenue); transform: rotate(45deg); pointer-events: none; } .ml-scelta select option { background: #15112a; color: var(--testo); } .ml-quando { display: flex; align-items: center; gap: 8px; margin: 10px 0 0 4px; font-size: 0.86rem; color: #c4b5fd; } .ml-quando .btn-ico { width: 16px; height: 16px; } .ml-anno { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .ml-anno label { margin: 0; font-size: 0.9rem; } .ml-anno input { width: 120px; } /* I due modi come schede. Il radio vero resta (tastiera, lettori di schermo), invisibile; si disegna il cerchietto accanto. */ .ml-modi { display: flex; flex-wrap: wrap; gap: 12px; } .ml-modo { position: relative; flex: 1 1 230px; min-width: 0; margin: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 16px 16px 16px 14px; border-radius: 14px; cursor: pointer; font-size: inherit; color: var(--testo); background: rgba(255, 255, 255, 0.025); border: 1px solid color-mix(in srgb, var(--accento) 20%, var(--card-bordo)); transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .ml-modo:hover { border-color: color-mix(in srgb, var(--accento) 50%, var(--card-bordo)); } .ml-modo input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .ml-radio { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--testo-debole); background: transparent; transition: border-color 0.18s, box-shadow 0.18s; } .ml-modo-ico { width: 21px; height: 21px; margin-top: 1px; background: #cdbfff; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; } .ml-modo-testo { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ml-modo-titolo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-weight: 700; font-size: 0.98rem; line-height: 1.3; } .ml-modo-aiuto { font-size: 0.82rem; line-height: 1.5; color: var(--testo-tenue); } .ml-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--accento), #9b6cff); box-shadow: 0 0 10px rgba(124, 92, 255, 0.45); } .ml-modo:has(input:checked) { background: linear-gradient(180deg, rgba(124, 92, 255, 0.16), rgba(124, 92, 255, 0.05)); border-color: rgba(185, 166, 255, 0.85); box-shadow: 0 0 0 1px rgba(185, 166, 255, 0.35), 0 0 22px rgba(124, 92, 255, 0.28); } .ml-modo:has(input:checked) .ml-radio { border-color: #fff; background: radial-gradient(circle, #fff 0 4px, transparent 4.5px); box-shadow: 0 0 8px rgba(185, 166, 255, 0.7); } .ml-modo:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; } .ml-modo:has(input:disabled) { cursor: not-allowed; opacity: 0.5; } .ml-modo:has(input:disabled):hover { border-color: color-mix(in srgb, var(--accento) 20%, var(--card-bordo)); } .ml-avviso { color: #d9cffc; } .ml-genera { width: 100%; margin-top: 24px; padding: 16px 24px; font-size: 1.08rem; gap: 12px; box-shadow: 0 6px 26px rgba(124, 92, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .ml-genera .btn-ico { width: 21px; height: 21px; } .ml-freccia { font-size: 1.15em; transition: transform 0.18s; } .ml-genera:hover .ml-freccia { transform: translateX(3px); } .ml-costo { margin-top: 12px; text-align: center; } .ml-costo p { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.86rem; color: var(--testo-tenue); } .ml-costo .btn-ico { width: 17px; height: 17px; color: #e8b84a; } .ml-costo .ml-costo-nota { margin-top: 4px; font-size: 0.78rem; color: var(--testo-debole); } @media (max-width: 560px) { .modulo-lettura { padding: 20px 16px 18px; } .ml-testa h3 { font-size: 1.35rem; } .ml-passo { gap: 12px; } } /* Il posto della lettura prima di generarla (partials/_lettura_attesa.html): l'immagine del cielo a tutta card, con il simbolo al centro, e l'invito in basso, sulla parte più scura dell'immagine. */ .lettura-attesa { position: relative; display: flex; align-items: center; justify-content: flex-start; aspect-ratio: 1400 / 661; padding: 0 24px 6%; overflow: hidden; background: #120e2a url('/static/img/lettura-attesa.jpg') center / cover no-repeat; border-color: color-mix(in srgb, var(--accento) 45%, var(--card-bordo)); box-shadow: var(--ombra), 0 0 30px rgba(124, 92, 255, 0.18); } .lettura-attesa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 62%, rgba(10, 8, 26, 0.55)); } .lettura-attesa p { position: relative; z-index: 1; margin: 0; text-align: center; font-size: 0.92rem; color: #d9d2f5; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); } /* Accanto a un modulo lungo resta in vista mentre si scorre: la colonna si allunga quanto il modulo, perché `sticky` scorre solo dentro il proprio genitore. */ @media (min-width: 901px) { #risultato-lettura:has(> .lettura-attesa) { align-self: stretch; } .lettura-attesa { position: sticky; top: 96px; } #risultato-lettura:has(> .lettura-pronta) { align-self: stretch; } .lettura-pronta { position: sticky; top: 96px; } } @media (max-width: 560px) { .lettura-attesa { aspect-ratio: 4 / 3; padding-bottom: 18px; } } /* Le tabelle degli aspetti sul telefono: con le pillole e i glifi non ci stavano più in 300 px e venivano tagliate a destra. I nomi vanno a capo (anche dove la cella diceva `nowrap`), il glifo resta. */ @media (max-width: 560px) { .card table td[style*="nowrap"], .card table th { white-space: normal !important; } .card table td, .card table th { padding-left: 4px; padding-right: 4px; } .card table th { font-size: 0.64rem; letter-spacing: 0.02em; } .card table .pillola-aspetto { padding: 2px 8px 2px 6px; font-size: 0.72rem; gap: 5px; } .card table .glifo { width: 1.2em; margin-right: 2px; } td > .pillola-aspetto + .glifo { margin-left: 0; } td > .pillola-aspetto { margin-bottom: 3px; } } /* Sotto i 400 px la sinastria, con quattro colonne, non ci sta nemmeno così: i glifi accanto ai nomi lasciano il posto (come nei transiti). */ @media (max-width: 400px) { .card table td .glifo { display: none; } /* E la pillola diventa punto e parola colorata, senza il suo fondo. */ .card table .pillola-aspetto { padding: 0; background: none; border: 0; gap: 4px; font-size: 0.72rem; } .card table td, .card table th { padding-left: 3px; padding-right: 3px; } .card table td.mono { font-size: 0.78rem; } } /* L'invito alla lettura sotto i dati di nascita (individuale/_invito_lettura.html): in alto una fascia del cielo di Giulio, lo stesso della lettura in attesa, sotto il testo e il pulsante. Aperta, la lettura di base prende il suo posto con l'invito alla lettura completa in fondo. */ .invito-lettura { padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--accento) 35%, var(--card-bordo)); } .invito-lettura-cielo { height: 132px; background: #120e2a url('/static/img/lettura-attesa.jpg') center 42% / cover no-repeat; -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); } .invito-lettura-corpo { padding: 0 24px 22px; margin-top: -18px; position: relative; } .invito-lettura-corpo h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.25rem; } .invito-lettura-corpo p { margin: 0 0 16px; font-size: 0.92rem; color: var(--testo-tenue); line-height: 1.55; } .invito-completa { margin-top: 20px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(180deg, rgba(124, 92, 255, 0.16), rgba(124, 92, 255, 0.05)); border: 1px solid rgba(185, 166, 255, 0.45); box-shadow: 0 0 22px rgba(124, 92, 255, 0.18); } .invito-completa h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.1rem; } .invito-completa p { margin: 0 0 14px; font-size: 0.9rem; line-height: 1.55; color: var(--testo-tenue); } .invito-completa .invito-completa-nota { margin: 12px 0 0; font-size: 0.78rem; color: var(--testo-debole); } /* Sulla Lettura chiusa, l'invito a quella libera e, sotto, la lettura che si apre senza cambiare pagina (errors/abbonamento.html). */ .lettura-libera-invito { margin: 26px 0 0; text-align: left; } .lettura-libera { max-width: 760px; margin: -16px auto 40px; } .lettura-libera:empty { display: none; } /* La prova gratuita nell'area personale (partials/_stato_abbonamento.html): una pillola come il segnale delle Novità, con l'orologio dorato, i giorni che restano e una barra sottile di quanto è passato. */ .prova-pillola { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(232, 184, 74, 0.38); background: linear-gradient(90deg, rgba(232, 184, 74, 0.12), rgba(124, 92, 255, 0.08) 60%, rgba(124, 92, 255, 0.03)); } .prova-ico { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; color: #f3cf6b; background: rgba(232, 184, 74, 0.14); border: 1px solid rgba(232, 184, 74, 0.35); box-shadow: 0 0 14px rgba(232, 184, 74, 0.18); } .prova-ico .btn-ico { width: 22px; height: 22px; } .prova-testo { display: grid; gap: 3px; min-width: 0; flex: 1; } .prova-testo strong { font-size: 0.98rem; color: var(--testo); } .prova-testo > span { font-size: 0.84rem; color: var(--testo-tenue); } .prova-barra { display: block; height: 4px; margin-top: 5px; max-width: 360px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .prova-barra i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #e8a33d, #f3cf6b); box-shadow: 0 0 8px rgba(243, 207, 107, 0.45); } .prova-gestisci { flex-shrink: 0; } @media (max-width: 560px) { .prova-pillola { flex-wrap: wrap; align-items: flex-start; } .prova-testo { flex-basis: calc(100% - 54px); } .prova-gestisci { margin-left: 54px; } } /* Prova disdetta: niente oro, che qui vorrebbe dire «sta per partire». */ .prova-disdetta { border-color: rgba(167, 139, 250, 0.35); background: linear-gradient(90deg, rgba(124, 92, 255, 0.12), rgba(124, 92, 255, 0.03)); } .prova-disdetta .prova-ico { color: #c4b5fd; background: rgba(124, 92, 255, 0.14); border-color: rgba(167, 139, 250, 0.35); box-shadow: none; } .prova-disdetta .prova-barra i { background: rgba(167, 139, 250, 0.7); box-shadow: none; } /* La pagina di una voce del glossario con gli approfondimenti (glossario/voce.html): la definizione, le sezioni, le domande frequenti, l'invito al sito e i rimandi. Una colonna di lettura, non più larga di una pagina di libro. */ .voce-pagina { display: grid; gap: 18px; max-width: 820px; } .voce-pagina .card { margin: 0; } .voce-sezione h2, .voce-domande h2, .voce-invito h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; } .voce-sezione p { margin: 0 0 12px; color: var(--testo-tenue); line-height: 1.8; } .voce-sezione p:last-child { margin-bottom: 0; } .voce-domanda { padding: 14px 0 14px 16px; border-left: 2px solid rgba(167, 139, 250, 0.45); } .voce-domanda + .voce-domanda { margin-top: 10px; } .voce-domanda h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--testo); } .voce-domanda p { margin: 0; color: var(--testo-tenue); line-height: 1.7; } .voce-invito { border-color: rgba(185, 166, 255, 0.45); background: radial-gradient(120% 90% at 100% 0%, rgba(124, 92, 255, 0.22), transparent 60%), var(--card); box-shadow: var(--ombra), 0 0 24px rgba(124, 92, 255, 0.15); } .voce-invito p { margin: 0 0 16px; color: var(--testo-tenue); line-height: 1.65; max-width: 60ch; } .voce-invito-azioni { display: flex; gap: 10px; flex-wrap: wrap; } .vedi-anche-card .vedi-anche { margin: 0; padding: 0; border: 0; } /* I titoletti dentro «Cosa è gratuito e cosa si paga»: un argomento per blocco, perché sette paragrafi di fila non si leggevano. */ .testo-legale .termini-sotto { margin: 22px 0 4px; font-size: 0.98rem; font-weight: 700; color: var(--testo); } .testo-legale h3 + .termini-sotto { margin-top: 8px; } .testo-legale .termini-sotto + p { margin-top: 4px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ LE DOMANDE DOPO LA LETTURA (7/10/2026) ║ ║ ║ ║ Una card scura sotto la lettura, con l'alone viola del modulo ║ ║ «Genera lettura». Le domande a destra, in viola; le risposte a ║ ║ sinistra, con l'avatar di Giulio, sulla carta color avorio ║ ║ della lettura: sono il seguito dello stesso libro. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .domande { margin-top: 18px; padding: 24px 26px 20px; background: radial-gradient(120% 90% at 0% 0%, rgba(124, 92, 255, 0.16), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(232, 163, 61, 0.08), transparent 60%), var(--card); border: 1px solid rgba(167, 139, 250, 0.22); } .lettura-card .domande { margin-top: 20px; } .dm-testa { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .dm-testa-ico { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; color: #e8b84a; background: radial-gradient(circle at 35% 30%, rgba(243, 207, 107, 0.22), rgba(124, 92, 255, 0.16) 70%); border: 1px solid rgba(232, 184, 74, 0.45); box-shadow: 0 0 18px rgba(232, 184, 74, 0.18); } .dm-testa-ico .btn-ico { width: 27px; height: 27px; filter: drop-shadow(0 0 4px rgba(243, 207, 107, 0.45)); } .dm-testa-testo { flex: 1 1 260px; min-width: 0; } .dm-testa-testo h3 { margin: 0 0 2px; font-size: 1.3rem; } .dm-testa-testo p { margin: 0; font-size: 0.9rem; color: var(--testo-tenue); } .dm-conta { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(232, 184, 74, 0.32); } .dm-punti { display: inline-flex; gap: 5px; } .dm-punti i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); } .dm-punti i.pieno { background: #f3cf6b; box-shadow: 0 0 6px rgba(243, 207, 107, 0.7); } .dm-conta-testo { font-size: 0.82rem; color: var(--testo-tenue); white-space: nowrap; } .dm-conta-finite { border-color: rgba(229, 86, 109, 0.4); } .dm-elenco { display: grid; gap: 14px; margin-top: 22px; } .dm-msg { display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .dm-utente { justify-content: flex-end; } .dm-utente .dm-bolla { max-width: min(78%, 560px); padding: 11px 16px; border-radius: 18px 18px 4px 18px; color: #fff; font-size: 0.97rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; background: linear-gradient(135deg, #7c5cff, #5b3fd6); box-shadow: 0 4px 18px rgba(124, 92, 255, 0.3); } .dm-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid #e8b84a; box-shadow: 0 0 12px rgba(232, 184, 74, 0.35); } .dm-ia .dm-bolla { min-width: 0; max-width: min(88%, 680px); padding: 12px 18px 4px; border-radius: 4px 18px 18px 18px; background: #fbf7ef; color: #2c2618; font-family: var(--serif); font-size: 1rem; line-height: 1.7; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); } .dm-nome { display: block; margin-bottom: 4px; font-family: var(--sans, inherit); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6d2f; font-weight: 600; } .dm-risposta p { margin: 0 0 0.75em; } .dm-risposta:empty { min-height: 1.7em; } /* «Sta scrivendo»: tre puntini d'oro che respirano. */ .dm-scrive { display: inline-flex; gap: 5px; padding: 6px 0 12px; } .dm-scrive i { width: 7px; height: 7px; border-radius: 50%; background: #c9a24a; animation: dm-respiro 1.2s ease-in-out infinite; } .dm-scrive i:nth-child(2) { animation-delay: 0.18s; } .dm-scrive i:nth-child(3) { animation-delay: 0.36s; } @keyframes dm-respiro { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .dm-avviso { margin: 18px 0 0; } .dm-suggerimenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; } .dm-suggerimenti-titolo { width: 100%; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-debole); } .dm-sugg { padding: 8px 14px; border-radius: 999px; cursor: pointer; text-align: left; font: inherit; font-size: 0.86rem; line-height: 1.35; color: #d9cffc; background: rgba(124, 92, 255, 0.1); border: 1px solid rgba(167, 139, 250, 0.35); transition: background 0.15s, border-color 0.15s; } .dm-sugg:hover { background: rgba(124, 92, 255, 0.2); border-color: #b9a6ff; } .dm-modulo { margin-top: 18px; } .dm-campo { display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 18px; background: rgba(10, 8, 22, 0.55); border: 1px solid rgba(167, 139, 250, 0.3); transition: border-color 0.15s, box-shadow 0.15s; } .dm-campo:focus-within { border-color: #b9a6ff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18); } .dm-campo textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 180px; margin: 0; padding: 10px 0; resize: none; border: 0; background: transparent; box-shadow: none; outline: none; color: var(--testo); font: inherit; font-size: 0.98rem; line-height: 1.45; } .dm-campo textarea:focus { box-shadow: none; border: 0; } .dm-campo textarea:disabled { opacity: 0.55; } .dm-invia { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(135deg, #8b6cff, #5b3fd6); box-shadow: 0 4px 16px rgba(124, 92, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; } .dm-invia .btn-ico { width: 22px; height: 22px; } .dm-invia:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(124, 92, 255, 0.6); } .dm-invia:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; } .dm-piede { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 0 6px; font-size: 0.76rem; color: var(--testo-debole); } .dm-caratteri { flex-shrink: 0; font-variant-numeric: tabular-nums; } .dm-nota-prova { margin: 8px 6px 0; font-size: 0.78rem; color: #e8b84a; } .dm-finite { margin: 20px 0 0; padding: 12px 16px; border-radius: 12px; text-align: center; font-size: 0.9rem; color: var(--testo-tenue); background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(167, 139, 250, 0.3); } /* Il pannello: il titoletto sopra i campi delle domande. */ .admin-sotto { margin: 22px 0 10px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-tenue); } @media (max-width: 560px) { .domande { padding: 18px 14px 16px; } .dm-testa { gap: 12px; align-items: flex-start; } .dm-testa-ico { width: 44px; height: 44px; } .dm-testa-ico .btn-ico { width: 23px; height: 23px; } .dm-testa-testo h3 { font-size: 1.12rem; } .dm-conta { order: 3; } .dm-avatar { width: 32px; height: 32px; } .dm-msg { gap: 8px; } .dm-utente .dm-bolla { max-width: 88%; } .dm-ia .dm-bolla { max-width: calc(100% - 40px); padding: 10px 14px 2px; font-size: 0.96rem; } .dm-piede { flex-direction: column; gap: 2px; } .dm-caratteri { align-self: flex-end; } } @media (prefers-reduced-motion: reduce) { .dm-scrive i { animation: none; opacity: 0.8; } } /* La voce (7/10/2026): «Ascolta» sulla carta della risposta, il microfono accanto a «Invia». Si vedono solo dove il browser li sa usare. */ .dm-bolla-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .dm-bolla-testa .dm-nome { margin-bottom: 0; } .dm-ascolta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 3px 11px 3px 8px; border-radius: 999px; cursor: pointer; font: inherit; font-family: var(--sans, inherit); font-size: 0.74rem; line-height: 1.5; color: #8a6d2f; background: transparent; border: 1px solid rgba(138, 109, 47, 0.35); transition: background 0.15s, color 0.15s, border-color 0.15s; } .dm-ascolta .btn-ico { width: 15px; height: 15px; } .dm-ascolta:hover { background: rgba(138, 109, 47, 0.08); border-color: #8a6d2f; } .dm-ascolta.in-lettura { color: #fbf7ef; background: #8a6d2f; border-color: #8a6d2f; } .dm-ascolta.in-lettura .btn-ico { animation: dm-onda 1.1s ease-in-out infinite; } @keyframes dm-onda { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.7; } } .dm-microfono { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer; color: #c4b5fd; background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(167, 139, 250, 0.35); transition: background 0.15s, border-color 0.15s, color 0.15s; } .dm-microfono .btn-ico { width: 22px; height: 22px; } .dm-microfono:hover { background: rgba(124, 92, 255, 0.18); border-color: #b9a6ff; color: #fff; } .dm-microfono:disabled { opacity: 0.45; cursor: default; } .dm-microfono.in-ascolto { color: #fff; background: #e5566d; border-color: #e5566d; animation: dm-ascolto 1.4s ease-out infinite; } @keyframes dm-ascolto { 0% { box-shadow: 0 0 0 0 rgba(229, 86, 109, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(229, 86, 109, 0); } } @media (max-width: 560px) { .dm-microfono, .dm-invia { width: 42px; height: 42px; } .dm-campo { gap: 8px; padding-left: 14px; } } @media (prefers-reduced-motion: reduce) { .dm-ascolta.in-lettura .btn-ico, .dm-microfono.in-ascolto { animation: none; } } /* Il gettone (7/10/2026): finite le domande, la proposta di continuare. L'oro della moneta, come nella riga del costo sotto «Genera lettura». */ .dm-continua { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(232, 163, 61, 0.1), rgba(124, 92, 255, 0.08)); border: 1px solid rgba(232, 184, 74, 0.4); } .dm-continua-ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; color: #e8b84a; background: rgba(232, 184, 74, 0.12); border: 1px solid rgba(232, 184, 74, 0.45); } .dm-continua-ico .btn-ico { width: 24px; height: 24px; } .dm-continua-testo { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; } .dm-continua-testo strong { font-family: var(--serif); font-size: 1.05rem; color: var(--testo); font-weight: 600; } .dm-continua-testo span { font-size: 0.87rem; color: var(--testo-tenue); } .dm-continua-btn { flex-shrink: 0; gap: 8px; } .dm-continua-btn .btn-ico { width: 18px; height: 18px; } @media (max-width: 560px) { .dm-continua-btn { width: 100%; justify-content: center; } } /* La pillola «Fai una domanda ad Astra» (7/10/2026): in fondo allo schermo quando il riquadro delle domande è ancora più in basso. */ .pillola-astra { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border: 1px solid rgba(232, 184, 74, 0.55); border-radius: 999px; font: inherit; font-size: 0.95rem; font-weight: 500; color: #fff; cursor: pointer; white-space: nowrap; background: linear-gradient(135deg, rgba(139, 108, 255, 0.96), rgba(91, 63, 214, 0.96)); box-shadow: 0 10px 30px rgba(10, 6, 30, 0.55), 0 0 22px rgba(124, 92, 255, 0.45); opacity: 0; transform: translate(-50%, 16px); transition: opacity 0.28s ease, transform 0.28s ease; } .pillola-astra.visibile { opacity: 1; transform: translate(-50%, 0); } .pillola-astra .btn-ico { width: 20px; height: 20px; color: #f3cf6b; } .pillola-astra-freccia { font-size: 1.1em; animation: pillola-giu 1.6s ease-in-out infinite; } @keyframes pillola-giu { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .domande, #risultato-lettura, #risultato-lettura-sogno { scroll-margin-top: 84px; } @media (prefers-reduced-motion: reduce) { .pillola-astra { transition: none; } .pillola-astra-freccia { animation: none; } } /* ╔══════════════════════════════════════════════════════════════════╗ ║ IL PANNELLO AMMINISTRATORE (7/10/2026, dal disegno di Giulio) ║ ║ ║ ║ Barra laterale con la luna sulle montagne, testata con l'orbita ║ ║ dorata, card con i numeri, tabella degli utenti a pillole. ║ ║ Sotto i 900 px la barra diventa una fascia in cima. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .admin { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; gap: 0; } .admin-lato { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 26px 18px 18px; margin: 12px 0 12px 12px; height: calc(100vh - 24px); top: 12px; border-radius: 22px; border: 1px solid rgba(167, 139, 250, 0.16); background: linear-gradient(180deg, rgba(22, 18, 44, 0.97) 0%, rgba(22, 18, 44, 0.9) 42%, rgba(22, 18, 44, 0.15) 75%, rgba(22, 18, 44, 0.55) 100%), #16122c url('/static/img/admin-lato.jpg') center bottom / cover no-repeat; box-shadow: 0 20px 60px rgba(5, 3, 18, 0.5); } .admin-marchio { display: flex; align-items: center; gap: 12px; padding: 0 8px; color: var(--testo); text-decoration: none; } .admin-marchio svg { width: 40px; height: 40px; flex-shrink: 0; } .admin-marchio > span { display: grid; line-height: 1.1; } .admin-marchio-nome { font-family: var(--serif); font-size: 1.45rem; } .admin-marchio-sotto { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #c9b8ff; margin-top: 4px; } .admin-nav { display: grid; gap: 4px; } .admin-voce { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; color: var(--testo-tenue); text-decoration: none; font-size: 0.98rem; border: 1px solid transparent; transition: background 0.15s, color 0.15s; } .admin-voce .btn-ico { width: 22px; height: 22px; } .admin-voce:hover { color: var(--testo); background: rgba(124, 92, 255, 0.1); } .admin-voce.attiva { color: #fff; background: linear-gradient(135deg, rgba(124, 92, 255, 0.5), rgba(91, 63, 214, 0.35)); border-color: rgba(185, 166, 255, 0.35); box-shadow: 0 6px 22px rgba(91, 63, 214, 0.3); } .admin-sottovoci { display: grid; gap: 2px; margin: 2px 0 6px 52px; } .admin-sottovoci a { padding: 6px 10px; border-radius: 8px; font-size: 0.88rem; color: var(--testo-tenue); text-decoration: none; } .admin-sottovoci a:hover { color: var(--testo); } .admin-sottovoci a.attiva { color: #f3cf6b; background: rgba(232, 184, 74, 0.08); } .admin-io { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(14, 11, 30, 0.72); border: 1px solid rgba(167, 139, 250, 0.2); backdrop-filter: blur(6px); } .admin-io-sigla { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; font-weight: 600; color: #fff; background: radial-gradient(circle at 35% 30%, #7c5cff, #3b2a8a); border: 1px solid rgba(185, 166, 255, 0.45); } .admin-io-testo { display: grid; min-width: 0; flex: 1; } .admin-io-mail { font-size: 0.85rem; color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-io-ruolo { font-size: 0.75rem; color: var(--testo-tenue); } .admin-io-esci { color: var(--testo-tenue); text-decoration: none; font-size: 1.1rem; padding: 4px 6px; border-radius: 8px; } .admin-io-esci:hover { color: #fff; background: rgba(124, 92, 255, 0.2); } .admin-principale { min-width: 0; padding: 30px 36px 48px; /* L'orbita dorata in alto a destra, che sfuma nel fondo: senza la sfumatura l'immagine finiva con un taglio netto a metà pagina. */ background: linear-gradient(180deg, rgba(14, 12, 24, 0.3) 0, rgba(14, 12, 24, 0.15) 160px, var(--sfondo) 520px), url('/static/img/admin-testata.jpg') right top / min(1400px, 110%) auto no-repeat; } .admin-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; } .admin-occhiello { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c4b5fd; } .admin-testa h1 { margin: 6px 0 6px; font-size: clamp(1.9rem, 3vw, 2.6rem); } .admin-testa p { margin: 0; color: var(--testo-tenue); font-size: 1.02rem; } .admin-data { text-align: right; font-size: 0.82rem; color: var(--testo-tenue); line-height: 1.6; white-space: nowrap; } .admin-contenuto > .card, .admin-contenuto > .avviso { backdrop-filter: blur(4px); } /* --- Le tre card dei numeri --- */ .cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; } .cifra { position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(27, 23, 51, 0.88)); border: 1px solid rgba(167, 139, 250, 0.3); box-shadow: 0 10px 34px rgba(5, 3, 18, 0.35); } .cifra-abbonamenti { background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(18, 30, 44, 0.9)); border-color: rgba(45, 212, 191, 0.35); } .cifra-ico { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; color: #c4b5fd; background: rgba(124, 92, 255, 0.18); } .cifra-abbonamenti .cifra-ico { color: #5eead4; background: rgba(45, 212, 191, 0.14); } .cifra-ico .btn-ico { width: 28px; height: 28px; } .cifra-testo { display: grid; gap: 2px; min-width: 0; flex: 1; } .cifra-titolo { font-size: 0.98rem; color: var(--testo); } .cifra-riga { display: flex; align-items: baseline; gap: 10px; } .cifra-riga strong { font-size: 2.1rem; font-weight: 600; line-height: 1.15; color: #fff; } .cifra-su { color: #2dd4bf; font-size: 0.9rem; } .cifra-tre { flex-wrap: wrap; gap: 4px 14px; font-size: 0.82rem; color: var(--testo-tenue); } .cifra-tre strong { font-size: 1.55rem; } .cifra-nota { font-size: 0.78rem; color: var(--testo-tenue); } .cifra-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; } .cifra-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; } .tipo-pagati { background: #2dd4bf; } .tipo-prova { background: #f3cf6b; } .tipo-omaggio { background: #b9a6ff; } .cifra-avviso { font-size: 0.76rem; color: #fda4af; margin-top: 2px; } .cifra-anello { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.35)); } .cifra-barre { display: flex; align-items: flex-end; gap: 3px; height: 54px; flex-shrink: 0; max-width: 40%; } .cifra-barre i { display: block; width: 4px; min-width: 3px; border-radius: 2px; background: linear-gradient(180deg, #b9a6ff, #7c5cff); } .cifra-barre i.vuota { background: rgba(255, 255, 255, 0.12); } /* --- Utenti: ricerca, filtri, tabella --- */ .utenti-strumenti { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .utenti-cerca { display: flex; gap: 10px; flex: 1 1 380px; max-width: 520px; } .utenti-cerca-campo { flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 14px; border-radius: 12px; background: rgba(14, 11, 30, 0.6); border: 1px solid rgba(167, 139, 250, 0.28); } .utenti-cerca-campo:focus-within { border-color: #b9a6ff; } .utenti-cerca-campo .btn-ico { width: 18px; height: 18px; color: var(--testo-tenue); } .utenti-cerca-campo input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 12px 0; margin: 0; color: var(--testo); } .utenti-cerca-campo input:focus { box-shadow: none; outline: none; } .utenti-filtri { display: flex; flex-wrap: wrap; gap: 8px; } .utenti-filtro { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 0.86rem; color: var(--testo-tenue); text-decoration: none; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(167, 139, 250, 0.22); } .utenti-filtro .btn-ico { width: 16px; height: 16px; } .utenti-filtro:hover { color: var(--testo); border-color: #b9a6ff; } .utenti-filtro.attivo { color: #fff; background: rgba(124, 92, 255, 0.25); border-color: #b9a6ff; } .pallino-filtro { width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; } .filtro-prova .pallino-filtro { background: #f3cf6b; } .filtro-senza .pallino-filtro { background: #fb7185; } .filtro-admin .btn-ico { color: #e8b84a; } .utenti-quanti { margin-left: auto; font-size: 0.86rem; color: var(--testo-tenue); } .utenti-tabella { padding: 8px 18px 14px; } .tabella-scorre { overflow-x: auto; } .utenti-tabella table { min-width: 860px; } .utenti-tabella th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-tenue); padding-top: 14px; } .utenti-tabella td { padding-top: 12px; padding-bottom: 12px; vertical-align: middle; } .riga-spenta { opacity: 0.5; } .utente-mail { font-size: 0.93rem; } .utente-tu { color: var(--testo-debole); font-size: 0.78rem; margin-left: 4px; } .utente-conti { text-align: center; } .utente-conti span { color: var(--testo-debole); margin: 0 4px; } .utente-accesso { font-size: 0.85rem; color: var(--testo-tenue); white-space: nowrap; } .pillola-ruolo, .pillola-abb { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; white-space: nowrap; color: #d9cffc; background: rgba(124, 92, 255, 0.16); border: 1px solid rgba(167, 139, 250, 0.3); } .pillola-ruolo .btn-ico, .pillola-abb .btn-ico { width: 16px; height: 16px; } .ruolo-admin { color: #f3cf6b; background: rgba(232, 163, 61, 0.14); border-color: rgba(232, 184, 74, 0.45); } .pillola-abb { margin-right: 8px; } .abb-pagato { color: #5eead4; background: rgba(45, 212, 191, 0.12); border-color: rgba(45, 212, 191, 0.4); } .abb-prova { color: #f3cf6b; background: rgba(232, 163, 61, 0.12); border-color: rgba(232, 184, 74, 0.45); } .abb-omaggio { color: #c4b5fd; } .abb-disdetto { color: #fda4af; background: rgba(244, 114, 182, 0.1); border-color: rgba(251, 113, 133, 0.4); } .abb-scaduto, .abb-nessuno { color: var(--testo-tenue); background: transparent; border-color: rgba(255, 255, 255, 0.16); } .abb-vuoto { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; } .abb-data { font-size: 0.8rem; color: var(--testo-tenue); white-space: nowrap; } .utente-azioni { text-align: right; } .menu-azioni { position: relative; display: inline-block; } .menu-azioni summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 34px; border-radius: 10px; color: var(--testo); font-size: 1.2rem; line-height: 1; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(167, 139, 250, 0.3); } .menu-azioni summary::-webkit-details-marker { display: none; } .menu-azioni[open] summary, .menu-azioni summary:hover { border-color: #b9a6ff; background: rgba(124, 92, 255, 0.18); } .menu-azioni-corpo { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; display: grid; gap: 2px; padding: 8px; text-align: left; border-radius: 14px; background: #1f1a3d; border: 1px solid rgba(167, 139, 250, 0.35); box-shadow: 0 16px 40px rgba(5, 3, 18, 0.6); } .menu-azioni-corpo form { margin: 0; } .menu-azioni-corpo a, .menu-azioni-corpo button { display: block; width: 100%; padding: 9px 12px; border-radius: 9px; border: 0; background: transparent; font: inherit; font-size: 0.88rem; text-align: left; color: var(--testo); text-decoration: none; cursor: pointer; } .menu-azioni-corpo a:hover, .menu-azioni-corpo button:hover { background: rgba(124, 92, 255, 0.18); } .menu-azioni-corpo .voce-pericolo { color: #fda4af; } .menu-concedi { display: grid; gap: 6px; padding: 6px 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 4px !important; } .menu-concedi label { margin: 0; font-size: 0.78rem; color: var(--testo-tenue); display: grid; gap: 4px; } .menu-concedi button { background: rgba(124, 92, 255, 0.25); text-align: center; } @media (max-width: 1200px) { .cifre { grid-template-columns: minmax(0, 1fr); } .utenti-quanti { margin-left: 0; } } @media (max-width: 900px) { .admin { grid-template-columns: minmax(0, 1fr); } .admin-lato { position: static; height: auto; margin: 10px 10px 0; padding: 16px; gap: 14px; background: linear-gradient(180deg, rgba(22, 18, 44, 0.92), rgba(22, 18, 44, 0.8)), #16122c url('/static/img/admin-lato.jpg') center 70% / cover no-repeat; } .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; } .admin-voce { padding: 8px 12px; font-size: 0.88rem; gap: 8px; } .admin-voce .btn-ico { width: 18px; height: 18px; } .admin-sottovoci { flex-basis: 100%; display: flex; flex-wrap: wrap; margin: 0; } .admin-io { margin-top: 0; padding: 8px 10px; } .admin-io-sigla { width: 34px; height: 34px; font-size: 0.85rem; } .admin-principale { padding: 22px 16px 40px; background-size: 900px auto; } .admin-testa { flex-direction: column; gap: 6px; } .admin-data { text-align: left; } .cifra { padding: 16px; } .cifra-barre { display: none; } .utenti-cerca { flex-basis: 100%; max-width: none; } } /* --- Dentro le pagine del pannello (7/10/2026) --- Le card prendono lo stile delle card dei numeri: vetro viola, bordo lilla, e in testa un'icona tonda con titolo e una riga di spiegazione. */ .admin-contenuto .card { border-radius: 18px; border: 1px solid rgba(167, 139, 250, 0.22); background: linear-gradient(160deg, rgba(124, 92, 255, 0.1), rgba(27, 23, 51, 0.92) 55%); box-shadow: 0 10px 34px rgba(5, 3, 18, 0.3); } .ac-testa { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: nowrap; } .ac-testa > div { flex: 1 1 auto; min-width: 0; } .ac-testa h3 { margin: 0; font-size: 1.15rem; } .ac-testa h2 { margin: 0; } .ac-sotto { margin: 2px 0 0; font-size: 0.84rem; color: var(--testo-tenue); } .ac-ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; color: #c4b5fd; background: rgba(124, 92, 255, 0.16); border: 1px solid rgba(167, 139, 250, 0.3); } .ac-ico .btn-ico { width: 22px; height: 22px; } .ac-ico-avatar { overflow: hidden; border: 1.5px solid #e8b84a; background: none; } .ac-ico-avatar img { width: 100%; height: 100%; object-fit: cover; } .ac-testa > :last-child:not(div):not(h3):not(h2):not(.ac-ico) { margin-left: auto; flex-shrink: 0; } .admin-contenuto .riquadro-stat { border-radius: 16px; border: 1px solid rgba(167, 139, 250, 0.22); background: linear-gradient(135deg, rgba(124, 92, 255, 0.14), rgba(14, 11, 30, 0.6)); } .admin-contenuto .riquadro-stat .valore { color: #fff; font-family: inherit; font-weight: 600; } .admin-contenuto .riquadro-stat .etichetta { color: var(--testo-tenue); } .pillola-stato { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; border: 1px solid transparent; } .pillola-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .stato-ok { color: #5eead4; background: rgba(45, 212, 191, 0.12); border-color: rgba(45, 212, 191, 0.4); } .stato-no { color: #fda4af; background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.4); } .stato-prova { color: #f3cf6b; background: rgba(232, 163, 61, 0.1); border-color: rgba(232, 184, 74, 0.4); } .stato-spento { color: var(--testo-tenue); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); } /* IA e Astra: il modulo a sinistra, il riepilogo a destra. */ .ia-griglia { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; } .ia-modulo { display: grid; gap: 0; } .ia-lato { position: sticky; top: 20px; display: grid; gap: 0; } .ia-riepilogo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; margin: 4px 0 0; font-size: 0.92rem; } .ia-riepilogo dt { color: var(--testo-tenue); } .ia-riepilogo dd { margin: 0; color: var(--testo); font-weight: 500; } .ia-note { font-size: 0.9rem; color: var(--testo-tenue); line-height: 1.75; } .barra-salva { position: sticky; bottom: 14px; z-index: 5; display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-top: -4px; border-radius: 16px; background: rgba(22, 18, 44, 0.9); border: 1px solid rgba(167, 139, 250, 0.3); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(5, 3, 18, 0.5); } /* Abbonamenti: lo stato di Stripe e la prova affiancati. */ .abb-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .stati-stripe { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; } .stati-stripe li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.92rem; } .stati-stripe li:last-child { border-bottom: 0; } /* Dashboard: gli ultimi iscritti. */ .ultimi { list-style: none; margin: 4px 0 0; padding: 0; display: grid; } .ultimi li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ultimi li:last-child { border-bottom: 0; } .ultimi .admin-io-sigla { width: 36px; height: 36px; font-size: 0.8rem; } .ultimi-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ultimi-quando { font-size: 0.82rem; color: var(--testo-tenue); white-space: nowrap; } .ultimi .pillola-abb { margin: 0; } @media (max-width: 1100px) { .ia-griglia, .abb-griglia { grid-template-columns: minmax(0, 1fr); } .ia-lato { position: static; } } @media (max-width: 560px) { .ultimi li { grid-template-columns: auto minmax(0, 1fr); } .ultimi .pillola-abb, .ultimi-quando { grid-column: 2; justify-self: start; } } .abb-griglia > .card, .ia-lato > .card:first-of-type { margin-top: 0; } .abb-griglia { margin-bottom: 20px; } .abb-griglia > .card { margin-bottom: 0; } /* Due card affiancate in griglia partono alla stessa altezza: il margine fra card una sotto l'altra non vale quando stanno di fianco. */ .admin-contenuto .griglia-tema > .card, .admin-contenuto .griglia-tema > div > .card:first-child, .admin-contenuto .griglia > .card { margin-top: 0; } /* La prova disdetta: il cliente che sta per andarsene, in rosa. */ .abb-prova_disdetta { color: #fda4af; background: rgba(244, 114, 182, 0.1); border-color: rgba(251, 113, 133, 0.4); } .abb-piano { font-size: 0.78rem; color: #c4b5fd; margin-right: 6px; white-space: nowrap; } /* «Rendi amministratore» bloccato: la voce resta, in grigio chiaro, con il lucchetto, e porta a dove lo si sblocca. */ .menu-azioni-corpo a.voce-spenta { display: flex; align-items: center; gap: 8px; color: var(--testo-debole); } .menu-azioni-corpo a.voce-spenta .btn-ico { width: 14px; height: 14px; } .menu-azioni-corpo a.voce-spenta:hover { color: var(--testo-tenue); background: rgba(255, 255, 255, 0.04); } .promozioni-apri { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } /* =================================================================== TIMELINE (7/10/2026, dal disegno di Giulio) Il cielo stellato con le montagne è lo sfondo della sezione intera: scuro in alto, dove stanno titolo e schede, e visibile in basso, dove c'è la citazione. Le schede sono vetro sopra il cielo, con il bordo e l'icona nel colore del loro tono. =================================================================== */ .tl { position: relative; overflow: hidden; border-radius: var(--raggio); border: 1px solid rgba(185, 166, 255, 0.16); padding: 34px 32px 0; background: linear-gradient(180deg, rgba(9, 7, 24, 0.94) 0%, rgba(9, 7, 24, 0.84) 46%, rgba(9, 7, 24, 0.42) 78%, rgba(9, 7, 24, 0.2) 100%), var(--sfondo-tl) center bottom / cover no-repeat, #0b0920; box-shadow: var(--ombra); } .tl-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; } .tl-titolo { font-family: var(--serif); font-weight: 400; margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; background: linear-gradient(90deg, #f6d7a8, #e9c8f2 70%, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .tl-sotto { font-family: var(--serif); color: #d8d2f0; font-size: 1.12rem; margin: 10px 0 0; } .tl-titoli { flex: 1 1 340px; } .tl-conti { display: flex; gap: 12px; flex-wrap: wrap; } .tl-conto { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; width: 206px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(24, 20, 52, 0.6); backdrop-filter: blur(6px); } .tl-conto strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1; color: #fff; } .tl-conto-nome { font-size: 0.84rem; color: #e6e1f7; white-space: nowrap; } .tl-conto p { grid-column: 1 / -1; margin: 10px 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--testo-tenue); } /* L'icona nel cerchio: la maschera prende la tinta, il cerchio un alone. */ .tl-ico { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tinta) 55%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 22%, transparent), rgba(15, 12, 36, 0.8) 70%); box-shadow: 0 0 18px color-mix(in srgb, var(--tinta) 35%, transparent); } .tl-ico > span { width: 26px; height: 26px; background: var(--tinta); -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; filter: drop-shadow(0 0 4px var(--tinta)); } /* --- La linea, su schermo largo --- */ .tl-linea { position: relative; padding: 4px 0 6px; } .tl-fila { display: grid; grid-template-columns: minmax(0, 1fr); } .tl-fila-sopra .tl-scheda { align-self: end; } .tl-fila-sotto .tl-scheda { align-self: start; } .tl-fila .tl-scheda { grid-area: 1 / 1; width: 23.5%; margin-left: var(--sinistra); } .tl-scheda { position: relative; z-index: 1; padding: 16px 16px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tinta) 38%, transparent); background: linear-gradient(160deg, rgba(40, 32, 84, 0.72), rgba(16, 13, 40, 0.82)); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: border-color 0.2s, transform 0.2s; } .tl-scheda:hover { border-color: color-mix(in srgb, var(--tinta) 70%, transparent); transform: translateY(-2px); } .tl-scheda-testa { display: flex; gap: 12px; align-items: flex-start; } .tl-scheda-titoli { min-width: 0; flex: 1; } .tl-scheda h3 { font-family: var(--serif); font-weight: 500; font-size: 1.04rem; line-height: 1.25; margin: 2px 0 2px; color: #fff; } .tl-scheda-sotto { margin: 0; font-size: 0.8rem; color: var(--tinta); letter-spacing: 0.01em; } .tl-per-tutti { font-style: italic; } .tl-date { margin: 3px 0 0; font-family: var(--serif); font-size: 0.84rem; color: #cfc8ea; } .tl-testo { margin: 12px 0 0; font-size: 0.86rem; line-height: 1.5; color: #d9d4ee; } .tl-scheda-piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-top: 10px; } .tl-esatto { font-size: 0.76rem; color: var(--testo-debole); } .tl-link { font-size: 0.8rem; color: var(--tinta); text-decoration: none; white-space: nowrap; margin-left: auto; } .tl-link:hover { text-decoration: underline; } .tl-asse { position: relative; height: 136px; } .tl-fili { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .tl-asse-linea { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(185, 166, 255, 0.7)); } .tl-tacca { stroke: rgba(220, 210, 255, 0.45); stroke-width: 1; vector-effect: non-scaling-stroke; } .tl-filo { fill: none; stroke-width: 1.2; opacity: 0.75; vector-effect: non-scaling-stroke; } .tl-mercurio { fill: rgba(240, 143, 191, 0.28); } .tl-mese { position: absolute; top: 80px; transform: translateX(-50%); font-family: var(--serif); font-size: 0.86rem; color: #d6d0ee; text-align: center; line-height: 1.1; } .tl-mese small { display: block; font-family: var(--sans); font-size: 0.66rem; color: var(--testo-debole); letter-spacing: 0.06em; } .tl-punto { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff8ec; border: 2px solid var(--tinta); box-shadow: 0 0 0 3px rgba(11, 9, 32, 0.9), 0 0 14px var(--tinta); } .tl-oggi { position: absolute; top: 50%; width: 2px; height: 26px; transform: translate(-50%, -50%); background: linear-gradient(180deg, transparent, #fff, transparent); } .tl-oggi span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-shadow: 0 0 6px rgba(185, 166, 255, 0.9); } /* --- Telefono: la linea verticale, mese per mese --- */ .tl-elenco { display: none; list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; } .tl-elenco::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #f2b85f, #b9a6ff 50%, #8fb0ff); box-shadow: 0 0 6px rgba(185, 166, 255, 0.6); } .tl-gruppo { position: relative; padding-bottom: 18px; } .tl-gruppo-mese { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; text-transform: capitalize; margin: 0 0 10px; color: #f0e6ff; } .tl-gruppo-mese::before { content: ""; position: absolute; left: -24px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff8ec; border: 2px solid #b9a6ff; box-shadow: 0 0 10px #b9a6ff; } .tl-gruppo .tl-scheda + .tl-scheda { margin-top: 12px; } .tl-riga-mercurio, .tl-legenda { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.8rem; color: #e7c3d8; } .tl-segno-mercurio { display: inline-block; width: 22px; height: 6px; border-radius: 3px; background: rgba(240, 143, 191, 0.55); } .tl-vuota { font-family: var(--serif); font-size: 1.05rem; color: #d9d4ee; max-width: 640px; margin: 10px 0 30px; } /* --- La citazione, sopra le montagne --- */ .tl-piede { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin: 30px -32px 0; padding: 70px 32px 28px; background: linear-gradient(180deg, transparent, rgba(9, 7, 24, 0.55)); } .tl-citazione { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: #f3eefc; } .tl-citazione span { display: inline-block; padding-left: 1.2em; } .tl-piede-destra { display: grid; gap: 10px; justify-items: end; } .tl-legenda { margin: 0; } .tl-motto { margin: 0; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; line-height: 2; color: #d6d0ee; } .tl-nota { margin: 12px 4px 0; } @media (max-width: 760px) { .tl { padding: 24px 16px 0; background: linear-gradient(180deg, rgba(9, 7, 24, 0.94) 0%, rgba(9, 7, 24, 0.86) 70%, rgba(9, 7, 24, 0.35) 100%), var(--sfondo-tl-piccolo) center bottom / cover no-repeat, #0b0920; } .tl-linea { display: none; } .tl-elenco { display: block; } .tl-conti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } .tl-conto { width: auto; padding: 10px; grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; row-gap: 6px; } .tl-conto .tl-ico { width: 36px; height: 36px; } .tl-conto .tl-ico > span { width: 20px; height: 20px; } .tl-conto p { display: none; } .tl-conto-nome { font-size: 0.72rem; line-height: 1.2; display: block; white-space: normal; } .tl-legenda { display: none; } .tl-piede { margin: 16px -16px 0; padding: 50px 16px 22px; } .tl-piede-destra { justify-items: start; } .tl-citazione { font-size: 1.1rem; } } /* --- L'anteprima nell'Area personale --- */ .tl-anteprima { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 20px; padding: 18px 22px; text-decoration: none; color: inherit; border-radius: var(--raggio); border: 1px solid rgba(185, 166, 255, 0.18); background: linear-gradient(90deg, rgba(9, 7, 24, 0.94) 30%, rgba(9, 7, 24, 0.6)), var(--sfondo-tl) center 70% / cover no-repeat, #0b0920; box-shadow: var(--ombra); transition: border-color 0.2s; } .tl-anteprima:hover { border-color: rgba(185, 166, 255, 0.45); } /* Sotto l'anteprima viene l'elenco delle persone: senza questo spazio le due schede si toccavano. */ .tl-anteprima + .card { margin-top: 20px; } .tl-anteprima-etichetta { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--testo-tenue); margin: 0; } .tl-anteprima h3 { font-family: var(--serif); font-weight: 500; margin: 4px 0 2px; font-size: 1.12rem; } .tl-anteprima-quando { margin: 0; font-size: 0.86rem; color: var(--tinta); } .tl-anteprima-sotto { font-family: var(--sans); font-size: 0.86rem; font-weight: 400; color: var(--testo-tenue); } .tl-anteprima-linea { position: relative; height: 18px; margin-top: 12px; max-width: 520px; } .tl-anteprima-linea::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, #f2b85f, #b9a6ff 50%, #8fb0ff); opacity: 0.8; } .tl-anteprima-linea .tl-punto { width: 9px; height: 9px; box-shadow: 0 0 0 2px rgba(11, 9, 32, 0.9), 0 0 8px var(--tinta); } .tl-anteprima-linea .tl-oggi { height: 16px; } .tl-anteprima-vai { white-space: nowrap; } @media (max-width: 760px) { .tl-anteprima { grid-template-columns: auto minmax(0, 1fr); padding: 16px; } .tl-anteprima-vai { grid-column: 1 / -1; justify-self: start; } } /* =================================================================== PERSONE: RICERCA, LEGAMI, RECENTI, TENDINA (7/10/2026, idea di Giulio) Oltre le sei persone, gli altri profili stanno in una tendina con sopra la ricerca e le pillole dei legami. Stesso vetro e stessi bordi viola delle altre schede; l'oro resta del titolare. =================================================================== */ .persone-altre { margin-top: 18px; } .persone-strumenti { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .persone-cerca { position: relative; flex: 1 1 280px; display: flex; align-items: center; margin: 0; } .persone-cerca .btn-ico { position: absolute; left: 14px; width: 18px; height: 18px; color: #b9a6ff; pointer-events: none; } .persone-cerca input { width: 100%; margin: 0; padding: 12px 16px 12px 42px; border-radius: 999px; background: rgba(14, 11, 34, 0.75); border: 1px solid rgba(167, 139, 250, 0.3); font-size: 0.95rem; color: var(--testo); transition: border-color 0.2s, box-shadow 0.2s; } .persone-cerca input:focus { outline: none; border-color: #b9a6ff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22), 0 0 18px rgba(124, 92, 255, 0.25); } .persone-cerca input::placeholder { color: var(--testo-debole); } .persone-filtri { display: flex; flex-wrap: wrap; gap: 8px; } .persone-filtro { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 0.85rem; color: var(--testo-tenue); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-bordo); transition: border-color 0.2s, background 0.2s, color 0.2s; } .persone-filtro .legame-icona { width: 20px; height: 20px; } .persone-filtro:hover { border-color: rgba(185, 166, 255, 0.55); color: var(--testo); } .persone-filtro.attivo { color: #fff; border-color: rgba(190, 170, 255, 0.8); background: linear-gradient(180deg, rgba(138, 108, 255, 0.45), rgba(91, 63, 214, 0.45)); box-shadow: 0 0 14px rgba(124, 92, 255, 0.35); } .persone-filtro-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center; font-size: 0.74rem; background: rgba(255, 255, 255, 0.08); } .persone-recenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .persone-recenti-titolo { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--testo-debole); margin-right: 4px; } .persone-recente { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; font-size: 0.88rem; color: var(--testo); text-decoration: none; background: rgba(124, 92, 255, 0.10); border: 1px solid rgba(167, 139, 250, 0.28); transition: border-color 0.2s, box-shadow 0.2s; } .persone-recente:hover { border-color: #b9a6ff; box-shadow: 0 0 12px rgba(124, 92, 255, 0.35); } .persone-recente-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(196, 181, 253, 0.5); background: rgba(14, 11, 34, 0.8); } .persone-recente-avatar .btn-ico { width: 16px; height: 16px; color: #c4b5fd; } .persone-tendina { margin-top: 14px; } .persone-tendina-testa { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 12px 16px; border-radius: var(--raggio-piccolo); border: 1px solid var(--card-bordo); background: rgba(255, 255, 255, 0.025); transition: border-color 0.2s, background 0.2s; } .persone-tendina-testa::-webkit-details-marker { display: none; } .persone-tendina-testa:hover { border-color: rgba(185, 166, 255, 0.5); background: rgba(124, 92, 255, 0.08); } .persone-conto { padding: 1px 9px; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.04em; color: #e6e1f7; background: rgba(124, 92, 255, 0.28); } .persone-freccia { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid #c4b5fd; border-bottom: 2px solid #c4b5fd; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s ease; } .persone-tendina[open] .persone-freccia { transform: rotate(-135deg) translate(-2px, -2px); } .persone-tendina[open] .persone-lista { animation: persone-apri 0.25s ease; } @keyframes persone-apri { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .persona-compatta { padding: 10px 14px; gap: 14px; margin-bottom: 8px; } .persona-compatta .persona-avatar { width: 40px; height: 40px; } .persona-compatta .persona-avatar .btn-ico { width: 22px; height: 22px; } .persona-compatta .persona-nome { font-size: 1rem; } .persona-compatta .persona-dettaglio { font-size: 0.8rem; } .persona-compatta[hidden] { display: none; } .persona-compatta .menu-azioni-corpo { min-width: 240px; } .voce-con-ico { display: flex !important; align-items: center; gap: 10px; } .voce-con-ico .btn-ico { width: 17px; height: 17px; flex: none; color: #c4b5fd; } .voce-pericolo.voce-con-ico .btn-ico { color: #fda4af; } .persone-vuoto { margin: 6px 4px 4px; color: var(--testo-tenue); } .persone-vuoto a { color: #c4b5fd; margin-left: 6px; } @media (max-width: 620px) { /* Sul telefono la riga compatta è tutta un collegamento: il nome si allarga a coprirla, «Apri» sparisce perché toccare la riga basta, e resta solo il ⋯ sopra, per le altre azioni. Due righe di testo invece di sei. */ .persona-compatta { position: relative; flex-wrap: nowrap; gap: 12px; padding: 10px 10px 10px 12px; } .persona-compatta .persona-info { flex: 1 1 auto; } .persona-compatta > .btn { display: none; } .persona-compatta .persona-apri::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .persona-compatta .menu-azioni { position: relative; z-index: 2; } .persona-compatta .menu-azioni summary { width: 38px; height: 34px; } .persona-compatta .persona-avatar { width: 34px; height: 34px; } .persona-compatta .persona-avatar .btn-ico { width: 19px; height: 19px; } /* Sul telefono il simbolo del legame resta, senza la parola: si riconosce al volo ed è più bello di una riga di luogo che va a capo. Il luogo di nascita sparisce qui; c'è comunque aprendo la persona. */ .persona-compatta .badge-legame { margin-left: 6px; padding: 0; border: 0; } .persona-compatta .badge-legame .legame-icona { width: 20px; height: 20px; } .persona-compatta .badge-legame-testo, .persona-compatta .persona-luogo { display: none; } .persona-compatta .persona-dettaglio { font-size: 0.76rem; line-height: 1.35; } .persone-filtri, .persone-recenti { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; } .persone-filtri::-webkit-scrollbar, .persone-recenti::-webkit-scrollbar { display: none; } .persone-filtro, .persone-recente { flex: none; } .persone-recenti-titolo { flex: none; } } /* =================================================================== AFFINITÀ (7/10/2026, idea di Giulio) Lo stesso cielo della Timeline in testa, cinque schede per ambito con l'anello che si riempie nel colore dell'ambito. =================================================================== */ .af { position: relative; overflow: hidden; border-radius: var(--raggio); border: 1px solid rgba(185, 166, 255, 0.16); padding: 32px 30px 30px; background: linear-gradient(180deg, rgba(9, 7, 24, 0.55) 0%, rgba(9, 7, 24, 0.9) 260px, rgba(9, 7, 24, 0.96) 100%), var(--sfondo-af) center 35% / cover no-repeat, #0b0920; box-shadow: var(--ombra); } .af-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; } .af-titolo { font-family: var(--serif); font-weight: 400; margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.05; background: linear-gradient(90deg, #f6d7a8, #f0b6d6 55%, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .af-sotto { font-family: var(--serif); color: #d8d2f0; font-size: 1.05rem; margin: 10px 0 0; max-width: 620px; } .af-filtri a { text-decoration: none; } .af-vuota { font-family: var(--serif); font-size: 1.05rem; color: #d9d4ee; } .af-vuota a { color: #c4b5fd; } .af-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; } .af-ambito { padding: 20px 18px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--tinta, #b9a6ff) 34%, transparent); background: linear-gradient(160deg, rgba(40, 32, 84, 0.66), rgba(16, 13, 40, 0.86)); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .af-ambito-testa { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; } .af-ambito h2 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 2px 0 4px; color: #fff; } .af-ambito-testa p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--testo-tenue); } .af-primi { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .af-persona { display: grid; grid-template-columns: 18px 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; color: inherit; text-decoration: none; transition: background 0.2s; } .af-persona:hover { background: color-mix(in srgb, var(--tinta) 12%, transparent); } .af-posto { font-family: var(--serif); font-size: 1.05rem; color: var(--tinta); text-align: center; } .af-anello { position: relative; display: grid; place-items: center; width: 52px; height: 52px; } .af-anello svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .af-anello-fondo { fill: rgba(14, 11, 34, 0.7); stroke: rgba(255, 255, 255, 0.08); stroke-width: 4; } .af-anello-pieno { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--tinta)); } .af-anello-n { position: relative; font-family: var(--serif); font-size: 1rem; color: #fff; } .af-persona-testo { display: grid; gap: 2px; min-width: 0; } .af-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; } .af-legame { width: 18px; height: 18px; } .af-frase { font-size: 0.8rem; line-height: 1.4; color: #d9d4ee; } .af-tono { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--testo-debole); } .af-tono-armoniosa { color: #a7f3d0; } .af-tono-vivace { color: #fbb6ce; } .af-nessuno { margin: 4px 0 8px; font-size: 0.86rem; color: var(--testo-tenue); } .af-come { --tinta: #b9a6ff; align-self: start; } .af-come p { font-size: 0.86rem; line-height: 1.55; color: #d9d4ee; margin: 8px 0 0; } .af-come .af-come-nota { color: var(--testo-tenue); } .af-invito { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 6px 0 22px; padding: 16px 20px; border-radius: var(--raggio); color: inherit; text-decoration: none; border: 1px solid rgba(240, 143, 191, 0.35); background: linear-gradient(110deg, rgba(240, 143, 191, 0.14), rgba(124, 92, 255, 0.10) 60%, transparent), var(--card); transition: border-color 0.2s, box-shadow 0.2s; } .af-invito:hover { border-color: rgba(240, 143, 191, 0.7); box-shadow: 0 0 22px rgba(240, 143, 191, 0.25); } .af-invito strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; } .af-invito span span { color: var(--testo-tenue); font-size: 0.9rem; } .af-invito-freccia { font-size: 1.2rem; color: #f0b6d6; } @media (max-width: 760px) { .af { padding: 22px 14px 18px; } .af-filtri { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .af-filtri .persone-filtro { flex: none; } } /* «Ordina per affinità» nell'elenco: il numero accanto al nome compare solo con l'ordinamento attivo, dentro un piccolo anello rosa. */ .persone-ordina .btn-ico { width: 16px; height: 16px; color: #f08fbf; } .persone-ordina.attivo .btn-ico { color: #fff; } .persona-affinita { display: none; } .per-affinita .persona-affinita { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font-family: var(--serif); font-size: 0.92rem; color: #fff; background: radial-gradient(circle, rgba(16, 13, 40, 1) 62%, transparent 63%), conic-gradient(#f08fbf calc(var(--quota) * 1%), rgba(255, 255, 255, 0.08) 0); box-shadow: 0 0 10px rgba(240, 143, 191, 0.3); } @media (max-width: 620px) { .per-affinita .persona-affinita { width: 34px; height: 34px; font-size: 0.82rem; } } /* Il cuore delle affinità: accanto a «Persone salvate» nel saluto, e nella testa dell'elenco. Stessa luce delle pillole lilla, ma rosa. */ .saluto-affinita { position: relative; display: inline-grid; place-items: center; vertical-align: top; width: 50px; height: 50px; margin: 20px 0 0 10px; border-radius: 50%; border: 1.5px solid rgba(240, 143, 191, 0.8); background: radial-gradient(circle, rgba(240, 143, 191, 0.22), rgba(17, 11, 40, 0.78) 70%); box-shadow: 0 0 14px rgba(240, 143, 191, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: box-shadow 0.2s, transform 0.2s; } .saluto-affinita:hover { box-shadow: 0 0 22px rgba(240, 143, 191, 0.7); transform: translateY(-1px); } .saluto-affinita .btn-ico { width: 26px; height: 26px; color: #f6b3d3; filter: drop-shadow(0 0 4px rgba(240, 143, 191, 0.7)); } .saluto-affinita-lucchetto { position: absolute; right: -3px; bottom: -3px; font-size: 15px; color: #f1edff; padding: 3px; border-radius: 50%; box-sizing: content-box; background: #1d1442; } .saluto-persone { vertical-align: top; } @media (max-width: 680px) { .saluto-affinita { width: 44px; height: 44px; margin-top: 14px; } } .persone-testa-azioni { display: flex; align-items: center; gap: 10px; margin-left: auto; } .persone-affinita-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; text-decoration: none; font-size: 0.92rem; font-weight: 500; color: #f6d5e6; border: 1px solid rgba(240, 143, 191, 0.45); background: rgba(240, 143, 191, 0.08); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .persone-affinita-btn:hover { border-color: rgba(240, 143, 191, 0.85); background: rgba(240, 143, 191, 0.16); box-shadow: 0 0 14px rgba(240, 143, 191, 0.35); } .persone-affinita-btn .btn-ico { width: 20px; height: 20px; color: #f08fbf; } @media (max-width: 620px) { /* Sul telefono il titolo prende la sua riga e sotto, insieme, il cuore e «Aggiungi persona»: prima il cuore restava da solo a sinistra e il pulsante scivolava a destra, su due altezze diverse. */ .persone-testa-azioni { width: 100%; margin-left: 0; } .persone-testa-azioni .persone-aggiungi { flex: 1; justify-content: center; } .persone-affinita-btn { padding: 11px; } .persone-affinita-testo { display: none; } } /* Colleghi e aziende nelle affinità: l'avviso sta sopra le schede, in piccolo e con il bordo dell'ambito del lavoro. */ .af-avviso-lavoro { margin: -8px 0 18px; padding: 10px 14px; border-radius: 0 10px 10px 0; border-left: 2px solid #8fe3c4; background: rgba(143, 227, 196, 0.07); font-size: 0.86rem; color: var(--testo-tenue); } .nota-azienda { margin: -6px 0 16px; padding: 8px 12px; border-left: 2px solid #8fe3c4; border-radius: 0 8px 8px 0; background: rgba(143, 227, 196, 0.07); line-height: 1.5; } .azienda-avviso-lettura { margin: 0 0 18px; } /* Il palazzo delle aziende accanto al cuore: stesso cerchio, in oro. */ .saluto-aziende { border-color: rgba(232, 184, 74, 0.85); background: radial-gradient(circle, rgba(232, 184, 74, 0.2), rgba(17, 11, 40, 0.78) 70%); box-shadow: 0 0 14px rgba(232, 184, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .saluto-aziende:hover { box-shadow: 0 0 22px rgba(232, 184, 74, 0.65); } .saluto-aziende .btn-ico { color: #f3cf7a; filter: drop-shadow(0 0 4px rgba(232, 184, 74, 0.7)); } /* «Mostra tutti» nella testa della tendina, quando un filtro arriva dall'indirizzo e la fila dei filtri non c'è. */ .persone-mostra-tutti { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: none; color: #e6e1f7; border: 1px solid rgba(185, 166, 255, 0.45); background: rgba(124, 92, 255, 0.14); transition: border-color 0.2s, background 0.2s; } .persone-mostra-tutti[hidden] { display: none; } .persone-mostra-tutti:hover { border-color: #b9a6ff; background: rgba(124, 92, 255, 0.26); } .persone-mostra-tutti .btn-ico { width: 16px; height: 16px; color: #c4b5fd; } /* =================================================================== AFFINITÀ PER PERSONA (8/10/2026, dal disegno di Giulio) Una persona alla volta: la fila in alto per sceglierla, la scheda grande con il totale, e sotto tutti gli ambiti affiancati. =================================================================== */ .af-viste { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 999px; border: 1px solid rgba(185, 166, 255, 0.25); background: rgba(14, 11, 34, 0.6); } .af-vista { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 0.9rem; color: var(--testo-tenue); text-decoration: none; transition: background 0.2s, color 0.2s; } .af-vista .btn-ico { width: 17px; height: 17px; } .af-vista:hover { color: var(--testo); } .af-vista.attiva { color: #fff; background: linear-gradient(180deg, rgba(138, 108, 255, 0.55), rgba(91, 63, 214, 0.55)); box-shadow: 0 0 14px rgba(124, 92, 255, 0.35); } .af-fila { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 14px; scrollbar-width: thin; } .af-chip { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 250px; padding: 10px 12px; border-radius: 14px; color: inherit; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(24, 20, 52, 0.7); transition: border-color 0.2s, box-shadow 0.2s; } .af-chip:hover { border-color: rgba(185, 166, 255, 0.5); } .af-chip.attiva { border-color: rgba(190, 170, 255, 0.85); box-shadow: 0 0 18px rgba(124, 92, 255, 0.4); background: rgba(56, 42, 120, 0.55); } .af-chip-avatar, .af-scelta-avatar { display: grid; place-items: center; border-radius: 50%; flex: none; border: 1px solid rgba(196, 181, 253, 0.55); background: radial-gradient(circle, rgba(124, 92, 255, 0.25), rgba(14, 11, 34, 0.9) 70%); } .af-chip-avatar { width: 44px; height: 44px; } .af-chip-avatar .btn-ico { width: 24px; height: 24px; color: #c4b5fd; } .af-chip-testo { display: grid; gap: 2px; min-width: 0; } .af-chip-nome { font-family: var(--serif); font-size: 1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .af-chip-legame { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--testo-tenue); } .af-chip-legame .legame-icona { width: 18px; height: 18px; } .af-cerchio { position: relative; display: inline-grid; place-items: center; flex: none; } .af-cerchio svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .af-cerchio .af-anello-fondo { fill: rgba(14, 11, 34, 0.7); stroke: rgba(255, 255, 255, 0.08); } .af-cerchio .af-anello-pieno { fill: none; stroke: var(--tinta); stroke-linecap: round; filter: drop-shadow(0 0 5px var(--tinta)); } .af-cerchio-n { position: relative; display: grid; justify-items: center; font-family: var(--serif); font-size: 1rem; color: #fff; line-height: 1; } .af-cerchio-n small { font-family: var(--sans); font-size: 0.68rem; color: var(--testo-tenue); margin-top: 4px; } .af-cerchio-grande .af-cerchio-n { font-size: 3rem; } .af-cerchio-grande .af-cerchio-n small { font-size: 0.95rem; margin-top: 6px; } .af-scelta { display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px; border-radius: 18px; margin-bottom: 30px; border: 1px solid rgba(185, 166, 255, 0.22); background: linear-gradient(160deg, rgba(40, 32, 84, 0.7), rgba(16, 13, 40, 0.85)); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } .af-scelta-chi { display: flex; gap: 22px; align-items: flex-start; } .af-scelta-avatar { width: 110px; height: 110px; border-color: rgba(242, 184, 95, 0.6); box-shadow: 0 0 24px rgba(242, 184, 95, 0.25); } .af-scelta-avatar .btn-ico { width: 56px; height: 56px; color: #e9d5ff; } .af-scelta-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 2rem; color: #fff; } .af-scelta-nome .legame-icona { width: 28px; height: 28px; } .af-scelta-con { margin: 4px 0 10px; color: #c4b5fd; font-weight: 600; } .af-scelta-sintesi { margin: 0 0 16px; color: #d9d4ee; line-height: 1.55; } .af-incerta { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--testo-debole); } .af-scelta-azioni { display: flex; flex-wrap: wrap; gap: 10px; } .af-scelta-totale { display: grid; justify-items: center; text-align: center; padding: 0 10px; border-left: 1px solid rgba(255, 255, 255, 0.08); border-right: 1px solid rgba(255, 255, 255, 0.08); } .af-scelta-etichetta { margin: 0 0 12px; font-family: var(--serif); font-size: 1.05rem; color: #fff; } .af-scelta-forza { margin: 12px 0 0; font-family: var(--serif); font-size: 1.35rem; } .af-scelta-tono { margin: 2px 0 0; color: var(--testo-tenue); font-size: 0.9rem; } .af-legenda { padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(14, 11, 34, 0.45); } .af-legenda-titolo { margin: 0 0 10px; font-family: var(--serif); color: #fff; } .af-legenda-riga { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); gap: 10px; align-items: center; margin: 10px 0; font-size: 0.8rem; color: var(--testo-tenue); line-height: 1.35; } .af-legenda-pallino { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--tinta); box-shadow: 0 0 8px var(--tinta); vertical-align: middle; } .af-legenda-da { color: #e6e1f7; } .af-legenda-nota { margin: 10px 0 0; font-size: 0.76rem; color: var(--testo-debole); } .af-legenda-breve { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 16px; font-size: 0.84rem; color: var(--testo-tenue); } .af-legenda-breve .af-legenda-pallino { width: 12px; height: 12px; border-width: 2px; margin-right: 6px; } .af-dimensioni-titolo { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 0; color: #fff; } .af-dimensioni-sotto { margin: 4px 0 18px; color: var(--testo-tenue); } .af-dimensioni { display: grid; grid-template-columns: repeat(var(--colonne, 5), minmax(0, 1fr)); gap: 16px; } .af-dim { /* Colonna e non griglia: quando una card si apre con «Scopri di più» la riga si allunga, e le altre tengono il contenuto in alto e il pulsante in fondo invece di spargere tutto nello spazio. */ min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--tinta) 40%, transparent); background: linear-gradient(160deg, rgba(40, 32, 84, 0.66), rgba(16, 13, 40, 0.86)); } .af-dim-testa { display: flex; align-items: center; gap: 10px; align-self: stretch; min-height: 2.9em; margin-bottom: 10px; text-align: left; } .af-dim-testa .tl-ico { width: 40px; height: 40px; } .af-dim-testa .tl-ico > span { width: 22px; height: 22px; } .af-dim h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: #fff; line-height: 1.2; } .af-dim .af-cerchio-n { font-size: 1.7rem; } .af-dim-forza { margin: 10px 0 0; font-family: var(--serif); font-size: 1.1rem; } .af-dim-tono { margin: 0; font-size: 0.78rem; } .af-dim-frase { margin: 6px 0 12px; font-size: 0.82rem; line-height: 1.45; color: #d9d4ee; min-height: 2.9em; } .af-dim-dettaglio { margin-top: auto; align-self: stretch; text-align: left; } .af-dim-vai { list-style: none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; align-self: end; justify-self: stretch; padding: 9px 12px; border-radius: 999px; font-size: 0.84rem; color: #f1edff; text-decoration: none; border: 1px solid color-mix(in srgb, var(--tinta) 55%, transparent); transition: background 0.2s; } .af-dim-vai:hover { background: color-mix(in srgb, var(--tinta) 18%, transparent); } @media (max-width: 1180px) { .af-scelta { grid-template-columns: minmax(0, 1fr) auto; } .af-legenda { grid-column: 1 / -1; } .af-dimensioni { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .af-scelta { grid-template-columns: minmax(0, 1fr); padding: 18px; } .af-scelta-chi { gap: 14px; } .af-scelta-avatar { width: 64px; height: 64px; } .af-scelta-avatar .btn-ico { width: 34px; height: 34px; } .af-scelta-nome { font-size: 1.5rem; } .af-scelta-totale { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 16px; } .af-dimensioni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .af-chip { min-width: 220px; } .af-viste { display: flex; } .af-vista { flex: 1; justify-content: center; padding: 8px 8px; font-size: 0.8rem; white-space: nowrap; } .af-scelta-chi { flex-direction: column; align-items: center; text-align: center; } .af-scelta-nome { justify-content: center; } .af-scelta-azioni { justify-content: center; } .af-cerchio-grande { width: 132px !important; height: 132px !important; } .af-cerchio-grande .af-cerchio-n { font-size: 2.3rem; } .af-legenda-riga { grid-template-columns: 22px 56px minmax(0, 1fr); } /* Due colonne strette: l'icona sopra il titolo, così «Comunicazione» non esce dalla scheda. */ .af-dim { padding: 14px 10px; } .af-dim-testa { flex-direction: column; justify-self: center; text-align: center; gap: 6px; } .af-dim h3 { font-size: 0.95rem; overflow-wrap: anywhere; } .af-dim-frase { font-size: 0.78rem; } } .af-dim-vai::-webkit-details-marker { display: none; } .af-dim-freccia { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; } .af-dim-dettaglio[open] .af-dim-freccia { transform: rotate(-135deg) translate(-2px, -2px); } .af-dim-dettaglio[open] .af-dim-vai { background: color-mix(in srgb, var(--tinta) 16%, transparent); } .af-dim-spiega { margin-top: 12px; font-size: 0.8rem; line-height: 1.5; color: #d9d4ee; animation: persone-apri 0.25s ease; } .af-dim-sintesi { margin: 0 0 8px; color: #f1edff; } .af-dim-spiega ul { margin: 0 0 10px; padding-left: 16px; } .af-dim-spiega li { margin: 4px 0; } .af-dim-spiega strong { color: var(--tinta); font-weight: 600; } .af-dim-sinastria { display: inline-block; font-size: 0.8rem; color: #c4b5fd; } .af-cerca { margin: 0 0 12px; max-width: 420px; } .af-chip[hidden] { display: none; } /* =================================================================== LA COLONNA DELLA LETTURA, PRIMA DEL CLIC (8/10/2026, disegno di Giulio) Il cielo più basso con il titolo, «Cosa contiene» e un suggerimento. =================================================================== */ .lettura-pronta { display: grid; gap: 16px; } .lettura-pronta .card + .card { margin-top: 0; } .lettura-pronta .lettura-attesa { aspect-ratio: auto; min-height: 210px; padding: 28px 30px; align-items: center; background-color: #0d0a22; background-size: auto 100%; background-position: right center; } .lettura-pronta .lettura-attesa::after { background: linear-gradient(90deg, #0d0a22 0%, #0d0a22 30%, rgba(13, 10, 34, 0.6) 48%, transparent 62%); } .lettura-attesa-testo { position: relative; z-index: 1; max-width: 46%; } .lettura-attesa-testo h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; color: #fff; } .lettura-pronta .lettura-attesa p { text-align: left; font-size: 0.9rem; line-height: 1.5; } .lettura-contiene { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; } .lettura-contiene-ico, .lettura-suggerita-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(196, 181, 253, 0.5); background: radial-gradient(circle, rgba(124, 92, 255, 0.25), rgba(14, 11, 34, 0.9) 70%); } .lettura-contiene-ico .btn-ico, .lettura-suggerita-ico .btn-ico { width: 24px; height: 24px; color: #e9d5ff; } /* L'icona di «Cosa contiene» in oro, come i distintivi del titolare. */ .lettura-contiene-ico { width: 52px; height: 52px; border-color: rgba(232, 184, 74, 0.7); background: radial-gradient(circle, rgba(232, 184, 74, 0.22), rgba(14, 11, 34, 0.9) 70%); box-shadow: 0 0 16px rgba(232, 184, 74, 0.3); } .lettura-contiene-ico .btn-ico { width: 28px; height: 28px; color: #f3cf7a; filter: drop-shadow(0 0 4px rgba(232, 184, 74, 0.6)); } .lettura-contiene h4 { margin: 2px 0 6px; font-family: var(--serif); font-weight: 500; font-size: 1.08rem; color: #c4b5fd; } .lettura-contiene p { margin: 0; color: #d9d4ee; line-height: 1.55; font-size: 0.92rem; } .lettura-suggerita { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; color: inherit; text-decoration: none; transition: border-color 0.2s; background: linear-gradient(90deg, var(--card) 55%, rgba(27, 23, 51, 0.6)), url('/static/img/timeline-sfondo-piccolo.webp') right center / cover no-repeat; } .lettura-suggerita:hover { border-color: rgba(185, 166, 255, 0.55); } .lettura-suggerita-testo { display: grid; gap: 3px; min-width: 0; } .lettura-suggerita-testo strong { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: #fff; } .lettura-suggerita-testo span { font-size: 0.85rem; color: var(--testo-tenue); } .lettura-suggerita-freccia { font-size: 1.6rem; color: #c4b5fd; } .ml-contiene { display: none; } @media (max-width: 900px) { /* Sul telefono: la frase corta sopra il pulsante, e nella colonna sotto niente cielo grande e niente «Cosa contiene» ripetuto. */ .ml-contiene { display: block; margin: 4px 0 14px; padding: 10px 12px; border-left: 2px solid #b9a6ff; border-radius: 0 8px 8px 0; background: rgba(124, 92, 255, 0.08); font-size: 0.86rem; line-height: 1.5; color: #d9d4ee; } .lettura-pronta .lettura-attesa, .lettura-pronta .lettura-contiene { display: none; } } /* Le fasi disegnate da Giulio al posto dell'SVG (8/10/2026). Nel calendario le notti senza sogno restano in filigrana, quelle sognate si accendono, quelle future si spengono di più. */ img.luna-foto { display: block; object-fit: contain; } .sogni-cal-casella img.luna-foto { opacity: 0.5; filter: none; } .sogni-cal-casella.sognata img.luna-foto { opacity: 1; filter: drop-shadow(0 0 8px rgba(241, 228, 184, 0.35)); } .sogni-cal-casella.futura img.luna-foto { opacity: 0.28; } a.sogni-cal-casella:hover img.luna-foto { opacity: 0.85; } .sogni-cal-legenda img.luna-foto, .sogno-giorno-luna img.luna-foto { width: 18px; height: 18px; } /* Domande e risposte a fisarmonica (8/10/2026). La domanda è il sommario: toccandola si apre o chiude la risposta di Astra. */ .dm-elenco-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 -8px; font-size: 0.82rem; color: var(--testo-tenue); } .dm-tutte { padding: 5px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.8rem; color: #e6e1f7; border: 1px solid rgba(185, 166, 255, 0.4); background: rgba(124, 92, 255, 0.12); } .dm-tutte:hover { border-color: #b9a6ff; background: rgba(124, 92, 255, 0.24); } .dm-scambio { display: grid; gap: 14px; } .dm-scambio > summary { list-style: none; cursor: pointer; align-items: center; } .dm-scambio > summary::-webkit-details-marker { display: none; } .dm-scambio-freccia { order: -1; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid #c4b5fd; border-bottom: 2px solid #c4b5fd; transform: rotate(-45deg); transition: transform 0.2s; } .dm-scambio[open] .dm-scambio-freccia { transform: rotate(45deg); } .dm-scambio:not([open]) > summary .dm-bolla { opacity: 0.78; } .dm-scambio > summary:hover .dm-bolla { opacity: 1; box-shadow: 0 0 16px rgba(124, 92, 255, 0.45); } .dm-scambio[open] > .dm-ia { animation: persone-apri 0.25s ease; } /* Lo sfondo del calendario dei sogni (8/10/2026, Giulio): il cielo con le nebulose agli angoli, che lascia il centro libero per le lune. */ .card.sogni-calendario { background: linear-gradient(180deg, rgba(14, 11, 34, 0.15), rgba(14, 11, 34, 0.35)), url('/static/img/sogni-calendario-sfondo.webp') center / cover no-repeat, #120f2c; } .sogni-calendario .sogni-cal-casella { background: rgba(14, 11, 34, 0.35); backdrop-filter: blur(1px); } .sogni-calendario a.sogni-cal-casella:hover { background: rgba(124, 92, 255, 0.14); } .sogni-calendario .sogni-cal-casella.sognata { background: rgba(232, 184, 74, 0.10); } .sogni-calendario .sogni-cal-casella.futura { background: transparent; } /* La stellina dentro i Transiti (8/10/2026, Giulio): un riquadro d'oro sopra il conto degli aspetti, che respira con la stellina. */ .transiti-nuova-lettura { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; color: inherit; text-decoration: none; border: 1px solid rgba(240, 194, 79, 0.55); background: radial-gradient(circle at 0% 50%, rgba(240, 194, 79, 0.18), transparent 45%), linear-gradient(90deg, rgba(240, 194, 79, 0.08), rgba(124, 92, 255, 0.06)); animation: scheda-chiama 3s ease-in-out infinite; transition: border-color 0.2s, background 0.2s; } .transiti-nuova-lettura:hover { border-color: #f0c24f; } .transiti-nuova-lettura .stellina-nuovo { width: 34px; height: 34px; } .tnl-testo { display: grid; gap: 2px; min-width: 0; } .tnl-testo strong { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: #f3cf7a; } .tnl-testo span { font-size: 0.85rem; line-height: 1.45; color: #d9d4ee; } .tnl-azione { padding: 7px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; white-space: nowrap; color: #1d1442; background: linear-gradient(180deg, #f6d98c, #e8b84a); box-shadow: 0 0 12px rgba(240, 194, 79, 0.35); } @media (prefers-reduced-motion: reduce) { .transiti-nuova-lettura { animation: none; } } @media (max-width: 480px) { .transiti-nuova-lettura { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 12px 14px; } .transiti-nuova-lettura .stellina-nuovo { width: 28px; height: 28px; } .tnl-azione { grid-column: 1 / -1; justify-self: stretch; text-align: center; } } /* L'avviso quotidiano nella scheda Oggi: al posto del pianeta, la stellina che brilla (8/10/2026). */ .oggi-evento-stellina { display: grid; place-items: center; background: none; border: 0; } .oggi-evento-stellina .stellina-nuovo { width: 30px; height: 30px; } .oggi-evento-transiti_giorno { border-color: rgba(240, 194, 79, 0.45); } .oggi-evento-transiti_giorno .oggi-evento-freccia { color: #f0c24f; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ «COSA GUARDARE OGGI» (8/10/2026, con l'occhio di Giulio) ║ ║ ║ ║ Pannello di vetro con il bordo lilla luminoso, come la pillola ║ ║ delle persone: a sinistra l'occhio, a destra titolo, conto e ║ ║ le voci in due colonne (una sul telefono). Le voci fatte si ║ ║ attenuano e prendono la spunta d'oro; fatto tutto, il pannello ║ ║ si stringe e l'occhio si accende. ║ ╚══════════════════════════════════════════════════════════════════╝ */ .guarda { --accento: #8b6cff; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; margin: 22px 0 26px; padding: 20px 24px 22px; border-radius: 20px; border: 1.5px solid rgba(167, 139, 250, 0.55); background: radial-gradient(120% 140% at 0% 0%, rgba(139, 108, 255, 0.22), transparent 55%), linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(167, 139, 250, 0.02) 60%), rgba(17, 11, 40, 0.78); box-shadow: 0 0 22px rgba(124, 92, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .guarda-occhio { width: 110px; height: auto; margin-top: 4px; filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.55)); animation: guarda-respira 5s ease-in-out infinite; } @keyframes guarda-respira { 0%, 100% { filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.45)); } 50% { filter: drop-shadow(0 0 16px rgba(190, 165, 255, 0.85)); } } .guarda-corpo { min-width: 0; } .guarda-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .guarda-testa h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; color: #f4f0ff; letter-spacing: 0.01em; } .guarda-sotto { margin: 3px 0 0; font-size: 0.86rem; color: var(--testo-tenue); } .guarda-conto { display: inline-flex; align-items: center; gap: 6px; flex: none; margin: 4px 0 0; padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: #e9e2ff; border: 1px solid rgba(167, 139, 250, 0.4); background: rgba(124, 92, 255, 0.12); } .guarda-conto > span:last-child { margin-left: 4px; font-variant-numeric: tabular-nums; } .guarda-punto { width: 8px; height: 8px; border-radius: 50%; background: rgba(196, 181, 253, 0.25); } .guarda-punto.acceso { background: #f0c24f; box-shadow: 0 0 6px rgba(240, 194, 79, 0.8); } .guarda-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .guarda-lista > li { min-width: 0; display: flex; } .guarda-voce { flex: 1 1 auto; min-width: 0; min-height: 66px; } .guarda-voce .oggi-evento-testo strong { color: #f4f0ff; } .guarda-voce-fatta { opacity: 0.62; } .guarda-voce-fatta:hover { opacity: 0.9; } .guarda-voce-fatta .oggi-evento-testo strong { color: var(--testo-tenue); } .guarda-spunta { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.8rem; font-weight: 700; color: #1d1442; background: linear-gradient(180deg, #f6d98c, #e8b84a); box-shadow: 0 0 8px rgba(240, 194, 79, 0.5); } .guarda-figura-stellina, .guarda-figura-tl { border-radius: 12px; border: 1px solid rgba(240, 194, 79, 0.45); background: radial-gradient(circle, rgba(240, 194, 79, 0.2), rgba(26, 22, 48, 0.95) 70%); } .guarda-figura-stellina .stellina-nuovo { width: 30px; height: 30px; } .guarda-figura-stellina .btn-ico { width: 24px; height: 24px; color: #f3cf7a; } .guarda-figura-tl { border-color: color-mix(in srgb, var(--tinta) 55%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 22%, transparent), rgba(26, 22, 48, 0.95) 70%); } .guarda-figura-tl .btn-ico { width: 24px; height: 24px; color: var(--tinta); } .guarda-figura-img { object-fit: contain; filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.45)); } .guarda-voce-lettura_transiti:not(.guarda-voce-fatta) { border-color: rgba(240, 194, 79, 0.5); } .guarda-voce-lettura_transiti:not(.guarda-voce-fatta) .oggi-evento-freccia { color: #f0c24f; } /* Fatto tutto: il pannello si stringe, l'occhio si accende d'oro. */ .guarda-tutto-fatto { align-items: center; padding: 14px 22px; } .guarda-tutto-fatto .guarda-occhio { width: 76px; filter: drop-shadow(0 0 12px rgba(240, 194, 79, 0.55)); animation: none; } .guarda-tutto-fatto .guarda-testa { margin-bottom: 0; } .guarda-tutto-fatto .guarda-testa h2 { font-size: 1.15rem; } .guarda-rivedi > summary { cursor: pointer; margin-top: 8px; font-size: 0.82rem; color: #c4b5fd; list-style: none; } .guarda-rivedi > summary::-webkit-details-marker { display: none; } .guarda-rivedi > summary::after { content: " ›"; } .guarda-rivedi[open] > summary { margin-bottom: 10px; } @media (prefers-reduced-motion: reduce) { .guarda-occhio { animation: none; } } /* Sul telefono l'occhio sta accanto al titolo, e le voci prendono tutta la larghezza sotto. */ @media (max-width: 760px) { .guarda { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 16px 18px; } .guarda-corpo { display: contents; } .guarda-occhio { width: 58px; margin: 0; } .guarda-testa { flex-direction: column; gap: 8px; margin: 0; } .guarda-testa h2 { font-size: 1.22rem; } .guarda-sotto { font-size: 0.8rem; } .guarda-conto { margin: 0; padding: 3px 10px; } .guarda-lista, .guarda-rivedi { grid-column: 1 / -1; } .guarda-lista { grid-template-columns: minmax(0, 1fr); margin-top: 12px; } .guarda-rivedi > summary { margin-top: 6px; } .guarda-tutto-fatto .guarda-occhio { width: 50px; } } /* Il benvenuto dopo il primo profilo: vetro lilla con il bordo d'oro, l'icona a sinistra e il pulsante verso l'Area personale. */ .benvenuto-profilo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 0 18px; padding: 16px 22px; border-radius: 18px; border: 1.5px solid rgba(240, 194, 79, 0.5); background: radial-gradient(120% 160% at 0% 50%, rgba(240, 194, 79, 0.14), transparent 50%), linear-gradient(90deg, rgba(139, 108, 255, 0.16), rgba(139, 108, 255, 0.04)), rgba(17, 11, 40, 0.8); box-shadow: 0 0 20px rgba(240, 194, 79, 0.18); animation: benvenuto-entra 0.6s ease-out both; } @keyframes benvenuto-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .benvenuto-ico { width: 92px; height: auto; filter: drop-shadow(0 0 10px rgba(190, 165, 255, 0.5)); animation: benvenuto-stella 1.1s ease-out both; } /* La stella cadente arriva da sinistra in basso, una volta sola. */ @keyframes benvenuto-stella { from { opacity: 0; transform: translate(-14px, 10px) rotate(-8deg) scale(0.85); } to { opacity: 1; transform: none; } } .benvenuto-testo h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: #f3cf7a; } .benvenuto-testo p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #d9d4ee; } .benvenuto-vai { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .benvenuto-profilo, .benvenuto-ico { animation: none; } } @media (max-width: 720px) { .benvenuto-profilo { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 14px 16px; } .benvenuto-ico { width: 64px; } .benvenuto-testo h2 { font-size: 1.12rem; } .benvenuto-vai { grid-column: 1 / -1; justify-content: center; } }