/* ===================================================================== Anthemon Fellowship — HOME, parte bassa — motto, lead magnet, community --------------------------------------------------------------------- Mobile-first: le regole base valgono per gli schermi piccoli, i blocchi @media (min-width: …) aggiungono quelle per i grandi. Contenuto: 8. About + motto (tornata chiara, vedi il blocco 8) 9. Lead magnet 10. Community L'ORDINE DEI FILE CONTA. Questo foglio era uno solo e la cascata ne dipende: piu' di una regola vince per posizione, non per specificita'. I file vanno caricati nell'ordine del numero in testa al nome, ed e' quello che fa includes/header.php. Vedi css/README.md prima di aggiungerne, rinominarne o riordinarne uno. ===================================================================== */ /* ---------- 8. ABOUT + MOTTO ---------- UN EMBLEMA SU UN ASSE SOLO, QUELLO CENTRALE. COM'ERA. Dalla revisione 9 la sezione stava su un asse a sinistra: il motto in corsivo su due righe, la frase sullo studio sotto, e il fiore tagliato dal bordo DESTRO — cioe' dalla parte opposta al testo, che era anche cio' che garantiva che le due cose non si toccassero mai. Tutta la matematica di quella versione (il fiore ancorato col bordo sinistro al 66%, il clamp del verso tarato sullo spazio che restava) esisteva per tenere separate due colonne. Non serve piu': ora c'e' una colonna sola. COM'E'. Simmetrica, e si legge dall'alto in basso: il sigillo dorato -> il motto -> la frase sullo studio -> il pulsante, e dietro a tutto il fiore che sboccia dal bordo di sotto e ci viene tagliato. Il fiore non deve piu' schivare il testo perche' gli sta DIETRO, ed e' per questo che puo' essere insieme piu' grande e piu' marcato di prima senza diventare un problema: la verifica non e' piu' geometrica (si toccano?) ma di contrasto, ed e' misurata piu' sotto. LO SFONDO E' --warm-white E NON PIU' --ivory. Sono i due chiari della tavolozza e distano poco (#FCF9F5 contro #F7F3EA), ma la differenza fa un lavoro preciso: il lead magnet e la community, le altre due sezioni chiare della home, restano avorio, e il motto diventa il piu' chiaro di tutti. Fra Naos e Homefrost non e' piu' solo "una sezione chiara": e' LA radura, il punto in cui la pagina si apre di piu'. */ .about-motto { background: var(--warm-white); color: var(--ink); /* Tutto centrato. Al centro il motto in Cinzel, il sigillo e il pulsante stanno sullo stesso asse verticale del fiore dietro, e la sezione si legge come un emblema invece che come una pagina di testo. */ text-align: center; padding-block: clamp(5rem, 10vw, 7.5rem); /* PIU' ALTA DELLE SEZIONI LUOGO, che stanno a 58vh. Relativa come loro e non in px, cosi' il rapporto fra i due numeri e' scritto una volta sola e non va rifatto a ogni schermo. Misurato a 1440x900: la sezione fa 666px contro i 522 delle tre sezioni luogo, rapporto 1,28. Sotto il buio della revisione 11 bastavano 66vh perche' meta' del peso lo dava il colore; sul chiaro no. */ min-height: 74vh; min-height: 74svh; /* IL BLOCCO STA IN MEZZO. Con la sola min-height il contenuto restava incollato in cima e sotto avanzavano duecento pixel di niente. La filigrana e' fuori dal flusso (position: absolute) e non partecipa; l'unico figlio in flusso e' .container, che si centra da solo in orizzontale con i suoi margini auto. */ display: flex; align-items: center; /* position: la filigrana e' assoluta e si ancora qui. overflow: e' cio' che TAGLIA il fiore sul bordo di sotto — senza, sborda davvero e si porta dietro una barra di scroll verticale. */ position: relative; overflow: hidden; } /* LA FILIGRANA — il fiore grande che sboccia dal bordo di sotto. Il fiore col cuore sfrangiato (logo-mark-detail.php): un tracciato solo con fill-rule="evenodd", quindi il cuore e' un buco vero che lascia passare il fondo della sezione, e fill="currentColor", quindi il colore lo decide questa regola. PERCHE' TAGLIATO E NON INTERO. Un fiore intero e centrato e' un francobollo. Tagliato dal bordo e' una filigrana: la sezione sembra una finestra su qualcosa di piu' grande di lei, che e' esattamente cio' che la pagina fa altrove (le batterie fuori dalla cornice di Epteka, la copertina fuori dal telaio del lead magnet). QUANTO PUO' CRESCERE ANCORA. Il tetto e' 1104px, cioe' 713 di altezza contro i 666 della sezione: il fiore e' gia' piu' alto di cio' che lo contiene. Ingrandirlo ancora non lo fa vedere di piu', gli fa solo uscire dall'alto la parte che si vedeva — e sopra il sigillo non c'e' piu' niente da guadagnare, ci sono solo i 179px di aria che tengono staccata la sezione da Naos. Se un giorno serve piu' fiore, quello che va cambiato e' il taglio (bottom), non la larghezza. IL PESO. logo-mark-detail.php sono ~15 KB di SVG inline. In home si aggiungono al documento: e' una scelta, non una distrazione. Gzip comprime molto un tracciato di questo tipo, e in cambio non entra in pagina nessuna richiesta di rete nuova e il fiore prende il colore dal CSS invece che da un file esportato. */ .motto-mark { position: absolute; /* CENTRATO SULL'ASSE DEL TESTO. Prima era ancorato col bordo sinistro al 66% perche' doveva stare dalla parte opposta alle parole; adesso ci sta esattamente sotto, quindi si ancora al centro e ci resta a qualunque larghezza. left+translate e non margin-left negativo: la larghezza e' un min() e un margine fisso non la seguirebbe. */ left: 50%; right: auto; transform: translateX(-50%); /* ANCORATO IN BASSO, e il numero negativo E' il taglio: il fiore e' alto quanto la sua larghezza diviso 1,548 (viewBox 390x252), e -34% della sezione lo spinge sotto il bordo di tanto. Misurato a 1440x900: largo 1104px (il tetto del min), quindi alto 713; -34% di 666 sono -226; ne restano visibili 487, che partono da 179 — cioe' da poco sopra il sigillo — e arrivano al bordo di sotto. Il fiore attraversa quindi TUTTA la sezione dietro il testo, non solo la meta' bassa: e' cresciuto del 20% in larghezza a parita' di taglio, e il taglio essendo fisso in percentuale della sezione, tutto quello che cresce esce dall'alto. Perche' un tetto in px oltre alla percentuale: senza, su uno schermo largo il fiore cresceva insieme alla finestra mentre il testo si fermava a 1120, e a 1900 era una macchia larga il doppio del motto. */ top: auto; bottom: -34%; width: min(89%, 1104px); /* PIU' MARCATO: 0,28, contro lo 0,22 di prima e lo 0,14 della versione a sinistra. Li' il fiore stava accanto al testo e doveva sparire per non disturbare; qui gli sta dietro, quindi il limite non e' piu' il fastidio ma la leggibilita', ed e' misurata sul rendering, non calcolata: la frase sullo studio, che e' il testo piu' esposto perche' e' anche l'unico smorzato (opacita' 0,86), sta a 6,38:1 nel punto peggiore — check.py contrast .about-motto 1440 — contro gli 8,32:1 che avrebbe sul fondo pulito. Il 4,5 che serve resta lontano. Il motto ci passa sopra a colore pieno e sta molto piu' su; il pulsante ci passa sopra col suo bordo d'oro e resta staccato. DOVE SI ROMPE, misurato rendendo la sezione a opacita' crescenti: 0,22 -> 6,82:1 0,28 -> 6,38:1 0,34 -> 5,92:1 0,42 -> 5,34:1 0,55 -> 4,50:1 0,70 -> 3,58:1 Cioe' il contrasto NON e' il limite: si potrebbe arrivare allo 0,55 prima di sfondare l'AA, il doppio di dove siamo. Il limite vero e' d'occhio, e arriva molto prima — passato circa lo 0,30 il fiore smette di essere una filigrana e diventa un'illustrazione, e allora il sigillo dorato in cima non ha piu' niente da dire, perche' diventano due volte lo stesso disegno alla stessa voce. Utile saperlo perche' vuol dire che il margine per crescere ancora c'e' tutto: se un giorno si vuole il fiore piu' presente, il numero da guardare non e' il contrasto. */ color: var(--bronze); opacity: 0.1; pointer-events: none; z-index: 0; } .motto-mark .logo-mark { width: 100%; height: auto; display: block; } /* Il contenuto sta davanti alla filigrana. Senza z-index il testo vincerebbe lo stesso (e' dopo nel flusso), ma dichiararlo rende la pila esplicita. */ .about-motto .container { position: relative; z-index: 1; } /* IL SIGILLO — il marchio pieno, dorato, in cima all'asse. E' logo-mark.php, la silhouette senza cuore: vedi il commento sopra la sezione in index.php per il perche' non sia la versione col dettaglio. Oro e non bronzo: il bronzo e' il colore dei dettagli scritti (i titoletti sulle sezioni chiare) e qui sarebbe un marrone spento, mentre l'oro e' il segno di casa — lo stesso filo della cornice di Epteka e del bordo del pulsante che chiude la sezione. Alla stessa opacita' del testo, cioe' piena: e' un marchio, non una filigrana. Quella e' l'altro fiore. */ .motto-sigil { color: var(--gold); /* Medio: piu' del logo della navbar (44px) e molto meno della filigrana. Il tetto a 88px e' il punto oltre il quale la silhouette piena comincia a leggersi come una macchia invece che come un marchio — sopra quella taglia servirebbe il cuore sfrangiato, cioe' l'altro file. */ width: clamp(58px, 7vw, 88px); margin: 0 auto 2rem; } .motto-sigil .logo-mark { width: 100%; height: auto; display: block; } /* IL MOTTO. Una riga sola, e da qui in avanti e' tutta la citazione: la seconda riga ("quando l'ho capito, al momento ero felice") non c'e' piu', e con lei sono spariti .motto-line-2 e il media query che ne accorciava il rientro sui telefoni. Se un giorno torna, torna anche quella regola — non e' commentata da nessuna parte, e' proprio via. NIENTE max-width IN px. Quello di prima (780) era il verso vecchio misurato in EB Garamond corsivo, tarato sullo spazio che restava a sinistra del fiore. Adesso il limite e' il container e basta: il testo e' centrato e non ha piu' niente da schivare. */ .motto { margin: 0 0 2.25rem; /* aria fra il motto e la frase sullo studio */ padding: 0; border: 0; } .motto-line { /* EB GARAMOND CORSIVO, NON PIU' CINZEL. Il motto ha attraversato quattro registri: Caveat inclinato (mano finta, si vedeva che era finta), EB Garamond corsivo su due righe disallineate, Cinzel, e adesso di nuovo il corsivo del corpo — ma su UNA riga centrata, che e' la differenza per cui la prima volta non aveva funzionato. Scelto fra sei candidati confrontati in motto-varianti.php (Cormorant Garamond, Sorts Mill Goudy, Petit Formal Script, Fleur De Leah e Cinzel stessa). PERCHE' VIA DA CINZEL. Cinzel e' cio' con cui la pagina scrive i nomi propri — EPTEKA nell'hero, AETHERIA, NAOS, HOMEFROST. L'argomento di prima era che il motto e' un nome proprio anche lui; il difetto e' che sei parole nel carattere dei toponimi, in una pagina piena di toponimi, si leggono come un altro toponimo invece che come la voce dello studio. Il corsivo del corpo e' un terzo registro — non i nomi, non i paragrafi — e la sezione torna a distinguersi da sola. FONT-WEIGHT 400 E NON 500, e non e' una preferenza: includes/header.php chiede EB Garamond come ital,wght@0,400;0,500;1,400, cioe' il corsivo esiste SOLO a 400. Chiedendone 500 il browser se lo ingrassa da solo, e su un corsivo con questi sottili si vede. Nessun font nuovo in pagina, e nemmeno un taglio nuovo: EB Garamond corsivo 400 e' gia' in quel link. Delle sei candidate era l'unica a costo zero sulla home, che e' la pagina davanti al Kickstarter. */ font-family: var(--font-body); font-style: italic; font-weight: 400; line-height: 1.25; color: var(--ink); margin: 0; text-wrap: balance; /* progressive: ignored where unsupported */ /* Maiuscolo/minuscolo com'e' scritto, NIENTE text-transform: uppercase. I nomi dei luoghi sono in maiuscolo perche' sono parole singole; una frase di sei parole tutta maiuscola diventa lunga il doppio e urla. SPAZIATURA A ZERO, era 0.04em. Quei quattro centesimi servivano a dare a Cinzel l'aria lapidaria al posto del maiuscolo. Un corsivo non la vuole: le sue lettere sono legate da un gesto continuo e allargarle lo spezza — e' lo stesso motivo per cui gli script veri (Fleur De Leah, Petit Formal Script) in motto-varianti.php stanno tutti a 0. Vale anche per i conti qui sotto: la larghezza misurata e' a spaziatura zero. */ letter-spacing: 0; } /* I TRE NUMERI SONO RIFATTI PER IL CORSIVO. I precedenti — 1,35rem / 3,6vw / 2,75rem — erano misurati su Cinzel 500 con 0,04em di spaziatura, dove "Storie fiorite tra gli alberi" era largo 16,01 volte il corpo. In EB Garamond corsivo, spaziatura zero, la stessa frase e' larga 9,504 volte il corpo: misurato con HarfBuzz (lo stesso motore di forme che usa il browser, quindi crenatura inclusa) su EBGaramond12-Italic. Un terzo e mezzo piu' stretta a parita' di corpo, perche' Cinzel e' una lapidaria larga e i quattro centesimi di spaziatura si sommavano su 28 lettere. AVVERTENZA SULLA FONTE: la misura viene dal taglio di sistema (Debian fonts-ebgaramond 0.016), non dal file che serve Google. Il disegno e' lo stesso, ma se un giorno un numero non torna di un paio di punti percentuali e' qui che si guarda; la controprova sul rendering vero e' `python3 tools/verify/check.py shot .about-motto 1440`. IL FATTORE 1,30 — LETTERE, NON LARGHEZZA. Tenere i 705px di prima avrebbe voluto dire 4,64rem, cioe' lettere enormi: e' il tranello di pareggiare la larghezza fra due caratteri di larghezza diversa. Si pareggia invece l'altezza di quel che si legge davvero. In Cinzel la frase la portano i maiuscoletti; in EB Garamond corsivo la porta l'altezza x, che l'OS/2 del file da a 0,400em. Da li' il fattore 1,30, applicato a tutti e tre i numeri perche' la curva di crescita resti la stessa di prima. NOTA: 0,400em e' letto dal file, il maiuscoletto di Cinzel e' invece una stima — Cinzel non e' fra i font di sistema e il proxy blocca Google Fonts, quindi quel termine non l'ho potuto leggere. E' l'unico numero assunto di tutto il blocco: se il motto ti sembra un filo grande o un filo piccolo, e' questo che va corretto, ed e' un cursore in motto-varianti.php. COSA FA IL CLAMP, ricalcolato: a 1440 il motto e' largo 532px dentro i 1120 del container, UNA riga — che resta il punto, una frase detta d'un fiato e non una pila. Finche' comanda il 4,7vw il testo cresce come 0,447 volte la finestra e il container come 0,92: rapporto fisso a 0,49, non puo' peggiorare (con Cinzel era 0,63, quindi ora c'e' piu' margine, non meno). Il termine vw comanda fra 596px e 1191px di finestra. Sotto i 596 entra il pavimento di 1,75rem e il testo si inchioda a 266px: andrebbe a capo sotto i 289px di finestra, cioe' piu' stretto di qualunque telefono esistente. A 390px il container fa 359 e il testo 266 — una riga sola. */ .motto-line-1 { font-size: clamp(1.75rem, 4.7vw, 3.5rem); } /* La nota della dichiarazione, non una seconda dichiarazione — ma nota non vuol dire illeggibile. NIENTE font-size E NIENTE line-height, ed e' voluto: cosi' eredita da body ed e' ESATTAMENTE il corpo del sito — 18px sul telefono, 19px sopra i 900, interlinea 1,7 — cioe' lo stesso testo dei paragrafi delle sezioni luogo ("Citta' tempio degli elfi silvani..."). Legarla per eredita' invece che ricopiare 1,1875rem vuol dire che se un giorno il corpo del sito cambia, questa frase lo segue senza che nessuno se ne ricordi. Non rischia di competere col motto: il motto sta a 2,75rem, cioe' quasi il triplo, ed e' in un altro carattere. */ .about-text { /* 0,86: sull'avorio e' gia' "sottovoce", e sotto — ora che la frase e' grande quanto il corpo del sito e sta al centro, dove la si guarda — comincia a costare fatica invece di dare gerarchia. */ opacity: 0.; /* auto sui lati: la misura resta di 48ch, ma il blocco si centra invece di restare appeso a sinistra dentro un container centrato. */ max-width: 48ch; margin: 0 auto 2.25rem; } /* LA FILIGRANA SI RITIRA SUL PICCOLO. Non sparisce piu' come faceva prima dei 700px: quella regola esisteva perche' il fiore, restringendo, finiva SOTTO il testo da una parte sola e diventava una macchia sporca. Adesso ci sta sotto per costruzione ed e' centrato come lui, quindi il difetto non puo' presentarsi. Si ritira lo stesso, per due ragioni diverse dal caso di prima: la sezione sul telefono e' molto piu' bassa (min-height: auto, vedi sotto), quindi un fiore tarato sui 666px di desktop ne coprirebbe piu' di meta'; e in colonna stretta il testo sta addosso al fondo, quindi lo 0,22 che sul largo e' aria qui diventa rumore dietro le parole. */ @media (max-width: 899.98px) { /* NIENTE ALTEZZA RELATIVA SUL TELEFONO. 74vh su un telefono alto sono trecento pixel di vuoto sotto quattro righe di testo: la sezione diventa un buco in mezzo alla pagina. Qui non c'e' niente da cui staccarsi in orizzontale, e il lavoro lo fa gia' il padding-block. */ .about-motto { min-height: auto; } .motto-mark { /* Cresciuto del 20% come quello del desktop, e sbiadito quanto quello in proporzione (0,20 contro 0,28): sono la stessa decisione presa due volte, e se una cambia deve cambiare anche l'altra. */ width: min(96%, 552px); /* In percentuale sarebbe una percentuale di un'altezza che qui non e' piu' fissa (min-height: auto): il taglio verrebbe diverso a ogni lunghezza di testo. In px e' sempre lo stesso pezzo di fiore, e va giu' con la larghezza — 132 e non piu' 110, cosi' del fiore piu' grande resta visibile la stessa fascia di prima. */ bottom: -132px; opacity: 0.20; } } /* ---------- 9. LEAD MAGNET ---------- */ /* The homepage's main conversion element after the hero: a full section, ivory with gold details. Cover mockup left, pitch + button right. */ .lead-magnet { background: var(--ivory); padding-block: var(--section-pad); } .magnet-grid { display: grid; gap: 3rem; align-items: center; text-align: center; } /* Book-cover placeholder: rounded, gold hairline, soft shadow. The variant classes below pick the artwork: a real mockup layered over a world-color fallback gradient — drop the file in assets/img/ and it appears by itself, no code changes. */ .cover-ph { aspect-ratio: 3 / 4; max-width: 320px; margin-inline: auto; border-radius: var(--radius-card); border: 1px solid rgba(184, 152, 104, 0.5); background-size: cover; background-position: center; box-shadow: 0 24px 48px rgba(31, 46, 53, 0.18); } /* Forest Companions / Compagni della Foresta — the lead magnet. It carries its own ratio, and that overrides the 3/4 of .cover-ph on purpose: the file is A4, 2480x3508, and `cover` inside a 3/4 box would have shaved about three percent off the top and the foot — which on this cover is "Chronicles of Phalia" at one end and the strapline at the other. Matching the ratio means nothing is cropped at all. The fallback gradient stays underneath: it costs nothing and it is what shows if the file ever goes missing. */ .cover-forest-companions { aspect-ratio: 2480 / 3508; background-image: url("../assets/img/cover-forest-companions.webp"), radial-gradient(ellipse at 30% 25%, rgba(178, 202, 107, 0.25), transparent 60%), linear-gradient(160deg, #10231a, var(--dasos) 55%, var(--dasos-teal)); } /* The Epteka Preview. TODO(asset): assets/img/cover-epteka-preview.jpg */ .cover-epteka-preview { background-image: url("../assets/img/cover-epteka-preview.jpg"), radial-gradient(ellipse at 70% 20%, rgba(127, 184, 216, 0.3), transparent 60%), linear-gradient(160deg, #1a2c34, var(--epteka) 55%, var(--epteka-steel)); } .magnet-body p:not(.eyebrow) { max-width: 52ch; margin: 0 auto 2rem; } @media (min-width: 900px) { .magnet-grid { grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; text-align: left; } .magnet-body p:not(.eyebrow) { margin-inline: 0; } /* left-aligned column → the ornament sits left too, not centered */ .magnet-body .ornament { margin-inline: 0; } /* .flip mirrors the block: cover on the right, text on the left */ .magnet-grid.flip .magnet-cover { order: 2; } } /* ---------- 10. COMMUNITY ---------- */ /* Its own light section now (Revision 2). Ivory: both neighbors (Homefrost and the footer) are dark, and ivory varies from the warm-white About+Motto. */ .community { background: var(--ivory); padding-block: var(--section-pad); text-align: center; } .community-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: 0.06em; margin: 0 0 0.75rem; } .community p { max-width: 48ch; margin: 0 auto; } .community-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: 2.25rem; } /* Big near-square social cards (not .btn): a logo slot on top, the label below. Each carries its platform's own colour, so the label and icon are always white and the two cards read as a matching pair. */ .community-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: clamp(148px, 40vw, 196px); aspect-ratio: 1 / 0.92; /* almost square, a touch wider than tall */ padding: 1.25rem 1rem; border-radius: var(--radius-card); text-decoration: none; color: #fff; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.35; transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft); } .community-btn:hover { transform: translateY(-3px); } /* The logo slot. An dropped in here instead of the inline SVG inherits this box and needs no extra CSS. */ .community-btn-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; } .community-btn-icon > svg, .community-btn-icon > img { width: 100%; height: 100%; } .cb-discord { background: var(--discord); box-shadow: 0 10px 24px rgba(88, 101, 242, 0.22); } .cb-discord:hover { box-shadow: 0 18px 34px rgba(88, 101, 242, 0.34); } /* Instagram's brand gradient, straight from --instagram in :root */ .cb-instagram { background: var(--instagram); box-shadow: 0 10px 24px rgba(214, 36, 159, 0.22); } .cb-instagram:hover { box-shadow: 0 18px 34px rgba(214, 36, 159, 0.34); }