/* ===================================================================== Anthemon Fellowship — SEZIONI LUOGO — Aetheria, Naos, Homefrost --------------------------------------------------------------------- Mobile-first: le regole base valgono per gli schermi piccoli, i blocchi @media (min-width: …) aggiungono quelle per i grandi. Contenuto: 7. I quattro modelli di sezione luogo. In uso in home: .place--gradient (Aetheria, Naos) e .place--veil (Homefrost). Tenuti ma non in uso: .place--window (rev. 7-10) e .place--card. Qui dentro anche le palette dei tre mondi e il capitolo Naos di dasos.php. 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. ===================================================================== */ /* ---------- 7. PLACE SECTIONS (full-bleed) ---------- */ /* The illustration IS the section background — no frame, no box. Layers, bottom to top: .place-bg (image, parallaxed by JS) → ::before (soft world-color scrim) → .place-content (text). */ .place { position: relative; overflow: hidden; color: var(--warm-white); } /* Extra 8% above/below gives the parallax room to move without ever exposing the image's edges */ .place-bg { position: absolute; top: -8%; right: 0; bottom: -8%; left: 0; background-size: cover; background-position: center; will-change: transform; /* the parallax animates transform */ z-index: 0; } /* Per-world scrim color as R,G,B parts, so rgba() below can reuse them */ .place-aetheria { --place-rgb: 46, 70, 80; } /* Epteka petrol */ .place-naos { --place-rgb: 21, 48, 42; } /* Dasos forest, = --dasos */ .place-homefrost { --place-rgb: 49, 57, 110; } /* Mosses indigo */ /* Mobile scrim: soft vertical veil, text reads over the whole image */ .place::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--place-rgb), 0.55), rgba(var(--place-rgb), 0.88)); } /* .place--gradient — for the sections built with a masked .place-photo. There the text does NOT sit on the illustration: on desktop the photo is masked away from the text column and only the gradient is left under it (see --text-edge further down). Which means the scrim no longer has to hide anything, so it gets much lighter and the gradient underneath — the radial glow and the 150deg ramp — is visible again instead of being flattened under an almost opaque veil. The default .place::before above stays as it is: the sections still using a url() background DO have their text over the image and need the heavy veil. Sections migrate to this class as they get a .place-photo. Phones keep the veil either way: the column is too narrow to put the text beside the artwork, so there it really does sit on top of it. */ .place--gradient::before { /* Phone-only veil, and the one number that has to be set per artwork: the text lies over the whole picture here, so a pale illustration needs a lot of it and an already-dark one needs very little — the default below suits daylight and would flatten a night scene into a solid block. Check the contrast after changing it (4.5:1 minimum). */ background: linear-gradient(180deg, rgba(var(--place-rgb), var(--scrim-top, 0.74)), rgba(var(--place-rgb), var(--scrim-bottom, 0.86))); } .place-content { position: relative; z-index: 2; /* Compact places (Revision 2 §2). svh with a vh fallback line for browsers that don't know svh units yet. */ min-height: 62vh; min-height: 62svh; display: flex; align-items: center; padding-block: 4rem; } .place-text { max-width: 34rem; } .place-text p:not(.eyebrow) { margin: 0 0 1.75rem; opacity: 0.94; } .place-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.1; margin: 0 0 1.25rem; } /* IL TITOLO INGRANDITO DELLA REVISIONE 7 E' STATO RITIRATO (richiesta di Francesco). Stava su .place--gradient e portava AETHERIA / NAOS / HOMEFROST a clamp(2.6rem, 5vw, 3.9rem), cioe' 62px a 1440: la stessa scala del titolo della fascia Epteka (.band-title). Era coerente, ma su tre sezioni di fila una dietro l'altra diventava molto, e i nomi dei mondi urlavano sopra il testo che dovevano introdurre. Ora vale la scala nuda qui sopra, clamp(2.25rem, 5vw, 3.25rem) — 52px a 1440, il 17% in meno — condivisa con contact.php, about.php, dasos.php e mosses.php. Un override in meno da tenere allineato. Se un giorno si rivuole grande: rimettere una regola sul MODELLO e non su .place-name nudo, che e' condiviso con quelle quattro pagine. E ora i modelli in home sono due (--gradient e --veil), quindi il selettore dovrebbe elencarli entrambi. */ /* Second line of a place name, smaller and underneath — the name stays the headline, the description sits under it instead of competing at the same size (Naos on dasos.php). */ .place-subtitle { display: block; font-size: 0.38em; letter-spacing: 0.14em; line-height: 1.35; opacity: 0.82; margin-top: 0.7em; } /* Each world recolors its own eyebrow with its accent */ .place-aetheria .eyebrow { color: var(--epteka-azure); } /* Naos fa eccezione: azzurro e non lime. Il lime resta l'accento di Dasos dappertutto (frecce, filetti, dasos.php), ma QUI stava sopra il fondo verde della sezione e i due verdi si azzuffavano — un verde chiaro su un verde scuro non e' un accento, e' lo stesso colore due volte. L'azzurro invece esiste davvero nel dipinto: le ombre di Naos sono blu (hue 203-210, misurato per la revisione 8, vedi il commento di --dasos in 01-base). Il titoletto prende quella nota li'. */ .place-naos .eyebrow { color: var(--dasos-azure); } .place-homefrost .eyebrow { color: var(--mosses-azure); } /* Backgrounds. The world-colour gradient is ALWAYS the base layer: it costs no download, it paints before anything else and it is what stays visible wherever the artwork is missing or faded out. The illustration itself is NOT here — it is an in the markup (see that block below), so it can be served as WebP, sized per screen and masked. Per-section knobs, all optional: --photo-pos which part of the artwork survives the crop --fade-span how much room the dissolve takes (see --photo-mask) */ /* Spires slightly above centre, and they run the full height of the picture, so the default centred crop keeps them whole. The phone veil is the heaviest of the three: white stone in daylight is the brightest thing any of these sections has to put white text on. */ .place-aetheria { /* Prima coppia = ritaglio orizzontale (conta sui telefoni, dove la fetta è verticale e stretta); seconda = verticale (conta sul desktop, dove il modello --card ritaglia sopra e sotto). */ --photo-pos: 58% 45%; /* La dissolvenza piu' LUNGA delle tre, ed e' il default del foglio (0.5) scritto per esteso, cosi' i tre valori si leggono uno accanto all'altro invece che due espliciti e uno implicito. Aetheria se lo puo' permettere: i palazzi stanno nella meta' destra del quadro e nella fascia di dissolvenza cade solo il cielo con le navi volanti, che sfumando nel petrolio non perde niente — anzi, e' proprio li' che il quadro sembra nascere dal colore. */ --fade-ratio: 0.5; --scrim-top: 0.80; --scrim-bottom: 0.88; } /* LA PALETTA STA SUL MONDO, NON SUL MODELLO (revisione 11). La revisione 10 aveva scritto queste tre rampe su .place-aetheria.place--window: giuste come colore, sbagliate come indirizzo. Al primo cambio di modello — cioe' adesso — avrebbero smesso di applicarsi in silenzio e le sezioni sarebbero tornate al fondo vecchio senza che niente segnalasse l'errore. Sono la tavolozza del mondo: valgono in qualunque modello, oggi e domani. Aetheria. L'azzurrino in alto a destra e' il radiale; la profondita' viene dalla rampa che finisce su #4A6890, l'acciaio di Epteka. Copiata da .lv-epteka (variante D di luoghi-varianti.php). */ .place-aetheria .place-bg { background-image: radial-gradient(ellipse at 70% 20%, rgba(127, 184, 216, 0.35), transparent 60%), linear-gradient(150deg, #1a2c34, #2E4650 55%, #4A6890); } /* The tree temple sits left of centre — right where the mirrored layout keeps the artwork — but its spire is near the top of the frame, so the crop is pulled up. A shorter fade brings the temple to full strength before the text column starts instead of leaving it half dissolved. */ .place-naos { /* Dark forest, but with bright mist at the top of the frame — which is where the heading sits, so the veil stays fairly even instead of deepening downward like the others */ --scrim-top: 0.72; --scrim-bottom: 0.74; /* 43% horizontally is for phones only — there the crop is a narrow slice and centring it lands on bare trunk instead of the temple. */ --photo-pos: 43% 38%; /* alzato: la guglia del tempio è in alto nel quadro */ /* Desktop: a negative length pushes the picture past the left edge of the section, which object-position: left cannot do on its own — it clamps at the edge. The overflow is clipped by .place (overflow: hidden), and the mask is unaffected because it lives on the element, not the image. Brings the tree temple in off the empty misty margin. */ --photo-pos-lg: -3.5vw center; --fade-ratio: 0.3; } /* Naos. Due sorgenti di luce in angoli opposti — una salvia e una teal — e una rampa a tre stop che scende quasi al nero. Copiata verbatim da .naos-chapter di dasos.php, che e' la sorgente: da li' si copia e non si modifica. NESSUN LIME, e la regola della revisione 8 regge: alone --dasos-lime (hue 79) su fondo hue 146 dava oliva, due verdi abbastanza lontani da litigare e abbastanza vicini perche' l'occhio li metta nella stessa categoria. Il lime resta dov'e' giusto, cioe' sull'occhiello. */ .place-naos .place-bg { background-image: radial-gradient(ellipse 52% 60% at 22% 40%, rgba(150, 168, 152, 0.22), transparent 70%), radial-gradient(ellipse 46% 54% at 86% 78%, rgba(77, 128, 152, 0.26), transparent 70%), linear-gradient(158deg, #2b473c 0%, #1d352c 44%, #101f19 100%); } /* The spectral dragon is painted dead centre, right where the text band falls, so it is the section most sensitive to how long the dissolve is. */ .place-homefrost { --photo-pos: 50% 35%; /* alzato: il drago vola nella metà alta */ /* LA DISSOLVENZA PIU' CORTA DELLE TRE, e da 0,3 scende a 0,22 (revisione 11). Non e' il drago il problema — quello sta al centro del quadro e a 0,3 era gia' a piena forza. E' il VILLAGGIO, che sta nella meta' sinistra: la folla, le lanterne gialle e la figura col mantello verde cadono tutte dentro la fascia di dissolvenza, e a 0,3 restavano grigie. A 0,22 il caldo delle lanterne torna, ed e' l'unica nota calda che questa sezione ha. Perche' non ancora piu' corta: sotto il 20% circa la fascia diventa stretta abbastanza che il quadro sembra appoggiato sul colore invece che emergerne, ed e' esattamente il difetto che la maschera esiste per evitare. Confrontate 0,20 · 0,22 · 0,30 · 0,50 a schermo intero. */ --fade-ratio: 0.22; /* Night scene: dark at the top where the dragon is, bright at the bottom from the lit windows and the magenta glare, so the veil deepens */ --scrim-top: 0.70; --scrim-bottom: 0.80; } /* Homefrost. Il viola #9058D1 e' la novita' della revisione 10: non compariva da nessuna parte prima. Copiata da .lv-mosses. 210deg E NON 150 e' l'unico valore non copiato delle tre, e serve al contrasto, non al gusto. A 150deg (l'angolo originale) il viola arriva in basso a DESTRA, cioe' sotto la colonna di testo. A 210deg cade in basso a sinistra, dalla parte del dipinto, e sotto le parole resta l'indaco scuro. Misurato campionando il fondo con il testo nascosto. */ .place-homefrost .place-bg { background-image: radial-gradient(ellipse at 65% 20%, rgba(135, 214, 252, 0.25), transparent 60%), linear-gradient(210deg, #1d2347, #31396E 55%, #9058D1); } /* === .place-photo — the illustration layer ============================ A real inside .place-bg instead of a CSS background-image. Why: • serves WebP with a JPEG fallback, and srcset can hand phones a small file instead of the full-bleed export; • loading="lazy" keeps the below-the-fold artwork out of the initial page load; • the parallax still works — the transform is on .place-bg, and the photo is its child, so it travels with it. The MASK is what marries the illustration to the gradient. The photo fades to nothing on the side where the text sits, and the world-colour gradient underneath simply takes over: one continuous surface, no visible edge, gradient and artwork both on show. This replaces the older trick of exporting the image with half of it already transparent (place-naos.webp). Same look on screen, but here the file stays opaque — so it compresses far better and carries no alpha channel — the fade is retuned by editing one line instead of re-exporting, and it mirrors itself on the .text-right sections. Under 900px there is no mask at all: the text sits over the whole image and the vertical ::before scrim does the legibility work. Two knobs, both settable per section: --photo-pos which part of the artwork survives the crop --photo-mask where the illustration dissolves into the gradient */ /* Phones: the artwork fills the section and is cropped to it (cover), since a 2:1 picture letterboxed into a portrait band would be a thin strip. Desktop overrides this below — see the block in the media query. */ .place-photo { position: absolute; top: 0; left: 0; width: 100%; max-width: none; /* the global img reset caps width at 100% */ height: 100%; object-fit: cover; object-position: var(--photo-pos, center); -webkit-mask-image: var(--photo-mask, none); mask-image: var(--photo-mask, none); } /* Desktop: taller sections, side scrim, text anchored to one side. Naos mirrors the layout (text right) so the two back-to-back dark sections read as a pair, not a repetition. */ @media (min-width: 900px) { /* Heights come from the :root variables — tune them there, by eye */ .place-content { min-height: var(--place-height-compact); } .place--grand .place-content { min-height: var(--place-height-grand); } /* --- the illustration is FITTED, not cropped ------------------------- A 2:1 picture stretched across a 2.8:1 section loses a quarter of its height, and that quarter is where the bottom of a composition lives: Naos' stair, Homefrost's villagers, the clouds under Aetheria. Making the section taller would fix it, but the sections are meant to be compact. So the artwork is scaled to the section's HEIGHT instead of its width. Whole picture, nothing cut, and it simply occupies less than the full width — about 72% of it. The rest is gradient, which is exactly where the text sits anyway, and the mask still dissolves the overlap. The picture also renders smaller, which is what "less zoomed" means. .place-bg is 116% of the section tall (headroom the parallax used); these two values bring the photo back to the section's own height, so the fit is against what is actually visible. Guarded by an aspect ratio, not just a width. Fitting by height only works while the section is wide enough to hold a 2:1 picture at that height: the section is 58vh, so the picture needs 116vh of width, and below a 1.16 viewport ratio it would be limited by the width instead and sit letterboxed, showing its own top and bottom edges as two hard lines across the gradient. Past that point the old full-bleed crop is the better failure. Every ordinary landscape screen (4:3 is 1.33, 16:10 is 1.6) is comfortably on the fitted side. */ @media (min-aspect-ratio: 118 / 100) { .place-photo { top: calc(100% * 8 / 116); height: calc(100% * 100 / 116); object-fit: contain; /* Anchored to the far side from the text, which is what leaves the whole picture clear of the words. Two levels on purpose: --photo-anchor is the mirror default and is set on the photo, while a section overriding --photo-pos-lg only inherits down to it. A rule on the element beats an inherited value, so if both named the same property the mirror default would silently win over the per-section one; going through the fallback keeps the override in charge. */ object-position: var(--photo-pos-lg, var(--photo-anchor, right center)); } .place.text-right .place-photo { --photo-anchor: left center; } } .place::before { background: linear-gradient(90deg, rgba(var(--place-rgb), 0.92) 0%, rgba(var(--place-rgb), 0.55) 45%, transparent 75%); } .place.text-right::before { background: linear-gradient(270deg, rgba(var(--place-rgb), 0.92) 0%, rgba(var(--place-rgb), 0.55) 45%, transparent 75%); } /* Much lighter than the default: nothing to hide here, the photo has already been masked out of the text column. What is left is a tone veil that keeps the two halves of the section in the same key, and it is gone by the time the illustration is at full strength. */ .place--gradient::before { background: linear-gradient(90deg, rgba(var(--place-rgb), 0.46) 0%, rgba(var(--place-rgb), 0.40) 44%, rgba(var(--place-rgb), 0.20) 66%, transparent 84%); } .place--gradient.text-right::before { background: linear-gradient(270deg, rgba(var(--place-rgb), 0.46) 0%, rgba(var(--place-rgb), 0.40) 44%, rgba(var(--place-rgb), 0.20) 66%, transparent 84%); } .place.text-right .place-text { margin-left: auto; } /* --- Naos: le righe allineate al bordo destro ------------------------ SOLO NAOS, e solo da 900px in su. Sotto i 900px il testo torna a colonna piena sopra il dipinto: li' allinearlo a destra vorrebbe dire leggere quattro blocchi col margine sinistro sfrangiato, che e' il contrario di quello che serve. PERCHE'. Con .text-right il blocco stava gia' a destra, ma le righe restavano allineate a sinistra: il bordo forte era quello INTERNO, dalla parte del dipinto, e cadeva in mezzo alla dissolvenza invece che su una linea. A destra restava un margine morto largo 160px (misurato a 1440: container 1120px centrato, quindi il testo finisce a x=1280 e la sezione a 1440). Allineando le righe a destra l'asse forte diventa il bordo del .container, cioe' la stessa colonna su cui si appoggia Aetheria dall'altra parte: le due sezioni tornano l'una lo specchio dell'altra invece di essere due impaginazioni diverse. COSA SI PERDE: il margine sinistro sfrangiato. Regge perche' il paragrafo e' di tre righe — piu' lunghe di cosi' e la bandiera sinistra si fa faticosa da rileggere. LE TRE RIENTRANZE NEGATIVE non sono un aggiustamento a occhio: ogni riga con letter-spacing porta lo spazio ANCHE dopo l'ultima lettera, e allineata a destra quello spazio la stacca dall'asse. NAOS ha 0,1em (5,2px sul suo corpo di 52px a 1440), l'occhiello 0,22em (2,9px su 13px), il link 0,18em (2,5px su 14px): senza compenso il bordo destro verrebbe una scaletta di tre gradini diversi. Il margine negativo di pari misura in em se lo riprende, e resta giusto a ogni corpo perche' e' espresso nella stessa unita' della spaziatura. */ .place-naos .place-text { text-align: right; } .place-naos .place-name { margin-right: -0.1em; } .place-naos .eyebrow { margin-right: -0.22em; } .place-naos .arrow-link { margin-right: -0.18em; } /* --- where the illustration starts --------------------------------- The fade begins exactly where the text column ends, so no word ever lands on the artwork however wide the window is. --text-edge is that point, worked out from the two rules that actually place the text: .container → width: min(1120px, 92%), centred .place-text → max-width: 34rem Below ~1217px the container is 92% wide, so the text ends at 4vw + 34rem; above it the container is capped at 1120px and centred, so the text ends at 50vw - 1rem. Whichever is further right wins. Keep these two values in step with the rules above if either changes. */ .place { --text-edge: max(4vw + 34rem, 50vw - 1rem); /* How long the dissolve takes: a share of whatever room is left between the end of the text and the right edge. A fixed vw span would get proportionally tighter on narrow windows — exactly where the seam shows most — while this keeps the same balance at every width. Lower --fade-ratio per section when the subject sits close to the text and needs to reach full strength sooner. */ --fade-span: calc((100vw - var(--text-edge)) * var(--fade-ratio, 0.5)); /* Black = photo at full strength, transparent = pure gradient. The stops trace a smoothstep (3t²-2t³) rather than a straight ramp: a plain two-stop gradient changes slope abruptly where it leaves 0 and where it reaches 1, and the eye reads those two kinks as faint vertical lines — very visible here, with a bright sky emerging from a dark gradient. Easing the ends flat makes the artwork appear out of the colour with no edge at all. To bring the illustration forward, raise the 0.5 in --fade-span; to soften the transition further, lower it. */ --photo-mask: linear-gradient(90deg, transparent 0, transparent var(--text-edge), rgba(0, 0, 0, 0.09) calc(var(--text-edge) + var(--fade-span) * 0.18), rgba(0, 0, 0, 0.32) calc(var(--text-edge) + var(--fade-span) * 0.36), rgba(0, 0, 0, 0.62) calc(var(--text-edge) + var(--fade-span) * 0.56), rgba(0, 0, 0, 0.88) calc(var(--text-edge) + var(--fade-span) * 0.78), #000 calc(var(--text-edge) + var(--fade-span))); } .place.text-right { /* 270deg measures the same stops from the right edge, and the mirrored layout puts the text exactly that far from it — one value, both sides */ --photo-mask: linear-gradient(270deg, transparent 0, transparent var(--text-edge), rgba(0, 0, 0, 0.09) calc(var(--text-edge) + var(--fade-span) * 0.18), rgba(0, 0, 0, 0.32) calc(var(--text-edge) + var(--fade-span) * 0.36), rgba(0, 0, 0, 0.62) calc(var(--text-edge) + var(--fade-span) * 0.56), rgba(0, 0, 0, 0.88) calc(var(--text-edge) + var(--fade-span) * 0.78), #000 calc(var(--text-edge) + var(--fade-span))); } } /* Companion chapters on the book pages reuse the whole .place machinery (full-bleed bg, scrim, parallax) at a compact height and in a slightly different shade of the world color, so they read as a sub-chapter. */ .place.companion .place-content { min-height: 48vh; min-height: 48svh; } /* --- Naos, capitolo di accompagnamento (dasos) --------------------------- Model E from luoghi-varianti.php: a wide band of artwork, then the text underneath on the gradient. Nothing sits on top of the painting, which is the point — the veiled version of this section tinted the whole forest a flat green and lost it. The band therefore carries NO veil across the image. Only its bottom few percent dissolve into the colour below, so the two halves join without a ruled line between them. */ .naos-chapter { --naos-rgb: 18, 40, 30; /* how far the cover rides up onto the band above */ --cover-rise: 3.5rem; position: relative; color: var(--warm-white); background-image: radial-gradient(ellipse 52% 60% at 22% 40%, rgba(150, 168, 152, 0.22), transparent 70%), radial-gradient(ellipse 46% 54% at 86% 78%, rgba(77, 128, 152, 0.26), transparent 70%), linear-gradient(158deg, #2b473c 0%, #1d352c 44%, #101f19 100%); } .naos-band { position: relative; /* Cinematic proportions need width to be cinematic. On a 390px phone 2.7:1 is a 144px slot, and with the cover riding up into it only about eighty pixels of painting were left showing — the band had effectively lost its illustration. Squarer here, wide again from 900px up. */ aspect-ratio: 4 / 3; overflow: hidden; } @media (min-width: 900px) { .naos-band { aspect-ratio: 2.7 / 1; } } .naos-band img { width: 100%; height: 100%; object-fit: cover; /* the tree temple sits left of centre and high in the frame */ object-position: 42% 34%; display: block; max-width: none; } /* No veil at the foot of the band. The gradient below meets the painting on a clean edge instead of climbing a quarter of the way up it, and the cover riding over the join is what keeps that edge from reading as a ruled line. */ .naos-body { display: grid; gap: 2.5rem; align-items: center; /* Shallower than a normal section: the band above already carries the section's weight, so the gradient underneath only has to hold the copy. */ padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 3.5vw, 3rem); } /* align-self: start pins the column to the top of the row, so the negative margin actually moves the cover instead of being swallowed by the vertical centring the row would otherwise apply. */ .naos-body > .naos-cover { align-self: start; margin-top: calc(var(--cover-rise) * -1); } .naos-cover { aspect-ratio: 3 / 5; width: min(100%, 340px); margin-inline: auto; /* position+z-index let it paint over the band: it sits outside that element, which is overflow:hidden, so it can overlap the artwork. */ position: relative; z-index: 2; background-image: url("../assets/img/mockup-naos.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.45)); } .naos-text .eyebrow { color: var(--dasos-lime); } .naos-text p { margin: 0 0 1.25rem; opacity: 0.94; } .naos-text .get-row { margin-top: 1.75rem; } @media (min-width: 900px) { /* Cover left, copy right — the mirror of "Il mondo", and the same cover size, so the two books read as a matching pair down the page. */ .naos-body { grid-template-columns: 0.72fr 1.28fr; gap: 4rem; } .naos-cover { margin-inline: 0 auto; } } /* Not-So-Useless After All (mosses.php). The artwork is a crop out of a tall painting of the tavern, taken around the woman raising her glass: she lands about seventy percent across, which is past where the scrim has faded, and the crowd on the left — all dark coats and backs — is what the copy sits on. */ .cp-nsu { --place-rgb: 34, 40, 82; } .cp-nsu .place-bg { background-image: url("../assets/img/companion-nsu.webp"), radial-gradient(ellipse at 70% 30%, rgba(142, 77, 102, 0.45), transparent 60%), linear-gradient(150deg, #171c3c, #2c3468 60%, var(--mosses-purple)); } .cp-nsu .eyebrow { color: var(--mosses-azure); } /* ===================================================================== I MODELLI DI SEZIONE LUOGO Si sceglie mettendo UNA di queste classi sulla
, accanto a .place. Cambiare modello è cambiare quella parola, niente altro: .place--gradient l'illustrazione è scalata sull'altezza e si dissolve nel gradiente prima del testo. Il gradiente resta protagonista. Va tarata per immagine (--fade-ratio, --photo-pos-lg). .place--card l'illustrazione copre tutto da bordo a bordo e il testo sta in una scheda di vetro smerigliato. La scheda si porta dietro il contrasto, quindi NON serve tarare niente per immagine. Non in uso: la scheda è un rettangolo appoggiato sull'opera, e il vocabolario della pagina dice che il testo sta FUORI dall'immagine o al massimo sopra un velo. .place--veil come sopra ma senza scheda: velo obliquo e testo direttamente sopra. Il più rispettoso del dipinto, ma il velo va ritarato per ogni illustrazione. IN USO su Homefrost in home. .place--window il quarto, aggiunto dalla revisione 7: il testo ESCE dal quadro. L'illustrazione torna un oggetto incorniciato tagliato dal bordo della pagina, il testo sta accanto sul colore del mondo e non c'è nessun velo. Fu il modello della home dalla revisione 7 alla 10; sta più in basso, nel suo blocco. Convivono tutti: la home ne usa DUE — .place--gradient su Aetheria e Naos, .place--veil su Homefrost — e gli altri due restano intatti perché sono il banco di prova di luoghi-varianti.php, la pagina di confronto, che ne mostra sette in tutto. PERCHE' DUE MODELLI E NON UNO. Non è una svista: il dipinto di Homefrost è l'unico dei tre che perde a essere dissolto, perché il villaggio con le lanterne cade proprio nella fascia di dissolvenza (la revisione 11 aveva già dovuto accorciarla a --fade-ratio 0,22 per salvarlo). Vedi il commento sopra la sezione 7 di index.php. ===================================================================== */ /* ---------- comune a --card e --veil: foto a tutto campo ---------- Annulla l'adattamento in altezza e la maschera del modello --gradient: qui l'illustrazione riempie la sezione e viene ritagliata. */ .place--card .place-photo, .place--veil .place-photo { top: 0; height: 100%; object-fit: cover; object-position: var(--photo-pos, center); -webkit-mask-image: none; mask-image: none; } /* ---------- MODELLO B: la scheda ---------- */ /* Velo leggero: non deve rendere leggibile niente (a quello pensa la scheda), serve solo a legare l'immagine al colore del mondo. */ .place--card::before { background: linear-gradient(180deg, rgba(var(--place-rgb), 0.30), rgba(var(--place-rgb), 0.52)); } .place--card .place-text { padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 2px; /* Due strati: una velatura scura sotto e il colore del mondo sopra. Il solo colore del mondo non basterebbe — l'indigo dei Muschi è chiaro, e sopra le finestre accese di Homefrost si fermava a 2,75:1. */ background: linear-gradient(165deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.30)), rgba(var(--place-rgb), 0.74); -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); border: 1px solid rgba(252, 249, 245, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30); } /* Senza backdrop-filter la scheda diventa opaca: meglio piena che illeggibile. Safari sotto la 9 e Firefox sotto la 103. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .place--card .place-text { background: rgba(var(--place-rgb), 0.93); } } .place--card .place-text p:not(.eyebrow):last-of-type { margin-bottom: 1.25rem; } /* ---------- MODELLO C: il velo obliquo ---------- */ .place--veil::before { background: linear-gradient(180deg, rgba(var(--place-rgb), 0.74), rgba(var(--place-rgb), 0.90)); } .place--veil .place-text { text-shadow: 0 1px 22px rgba(0, 0, 0, 0.45); } @media (min-width: 900px) { /* Questo blocco viene dopo quello del modello --gradient, quindi a parità di specificità vince: è voluto. */ .place--card::before { background: linear-gradient(90deg, rgba(var(--place-rgb), 0.34) 0%, rgba(var(--place-rgb), 0.10) 58%, transparent 82%); } .place--card.text-right::before { background: linear-gradient(270deg, rgba(var(--place-rgb), 0.34) 0%, rgba(var(--place-rgb), 0.10) 58%, transparent 82%); } .place--card .place-text { max-width: 33rem; } /* I quattro stop sono variabili perché è QUI che si paga il modello C: il velo va ritarato per ogni illustrazione. I valori di partenza reggono un dipinto scuro; sopra Aetheria, che è pietra bianca in pieno giorno, si fermavano a 3,9:1 e sono stati alzati sotto. */ .place--veil { --veil-1: 0.97; --veil-2: 0.93; --veil-3: 0.58; --veil-4: 0.14; } .place--veil::before { background: linear-gradient(105deg, rgba(var(--place-rgb), var(--veil-1)) 0%, rgba(var(--place-rgb), var(--veil-2)) 32%, rgba(var(--place-rgb), var(--veil-3)) 56%, rgba(var(--place-rgb), var(--veil-4)) 78%, transparent 91%), linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 42%); } .place--veil.text-right::before { background: linear-gradient(255deg, rgba(var(--place-rgb), var(--veil-1)) 0%, rgba(var(--place-rgb), var(--veil-2)) 32%, rgba(var(--place-rgb), var(--veil-3)) 56%, rgba(var(--place-rgb), var(--veil-4)) 78%, transparent 91%), linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 42%); } /* Aetheria: la più chiara delle tre, ha bisogno di molto più velo */ .place-aetheria.place--veil { --veil-2: 0.96; --veil-3: 0.80; --veil-4: 0.26; } } /* ===================================================================== MODELLO "FINESTRA" — .place--window (revisione 7) NON IN USO dalla revisione 11 — la home usa .place--gradient. PERCHE' E' STATO RITIRATO. Risolveva lo stesso problema della dissolvenza — il testo fuori dall'immagine — ma con proporzioni peggiori. Misurato a 1440 su una finestra alta 900: altezza sezione 640px fissi contro 522px (58vh, che si adatta) colonna del testo 399px (42ch) contro 544px (34rem) paragrafo Aetheria 6 righe contro 4 righe La cornice non e' sbagliata in se': e' sbagliata QUI. Resta dov'e' giusta, sui pannelli dei mondi della sezione 2 — quelli sono prodotti e vanno incorniciati, i luoghi sono atmosfera e possono sfumare. PERCHE' NON SI CANCELLA. Stessa logica dei quattro volumi sospesi: sono due revisioni di taratura (la 7 e la 10) e potrebbero servire alle pagine dei libri, dove una sezione singola incorniciata ha piu' senso che in una fila di tre. Se fra un mese non le usa nessuno, si buttano allora. Le tre palette invece NON sono rimaste qui: sono salite sul selettore del mondo, cosi' valgono in qualunque modello (vedi piu' su). Da qui in giu' e' il foglio della revisione 7, lasciato com'era. --------------------------------------------------------------------- E' un QUARTO modello, non la correzione dei tre di sopra. --gradient, --card e --veil restano intatti parola per parola: luoghi-varianti.php li mostra affiancati ed e' il banco di prova. Qui si aggiunge una classe alla
; per tornare indietro si toglie quella classe, e non c'e' nient'altro da disfare. PERCHE' UN MODELLO NUOVO E NON UNA TARATURA. Gli altri tre mettono il testo DENTRO il quadro. Metterlo dentro obbliga a velare il quadro per farlo leggere; il velo rovina il quadro; per leggere ancora meglio si rinforza il velo. E' un circolo che si combatte da solo, e su Aetheria era arrivato al punto che meta' dell'illustrazione era fango e il testo si leggeva comunque a fatica. Nessun numero lo risolve: va cambiata la costruzione. Qui il testo esce dal quadro. Il quadro torna un OGGETTO — bordo, angoli tondi, ombra — appoggiato sul colore del mondo, e le parole stanno accanto, sul colore. Nessun velo, da nessuna parte. E' la stessa grammatica della sezione 2 (i mondi), portata al buio invece che sull'avorio: immagine incorniciata invece che sfondo, testo fuori invece che dentro, velatura corta invece che campo pieno, e un secondo tono al posto della tinta unica. Il ritmo chiaro/scuro della pagina non cambia — il fondo resta il colore del mondo. L'ALTERNANZA: Aetheria lastra a sinistra, Naos a destra (.place--mirror), Homefrost a sinistra. ===================================================================== */ .place--window { /* La lastra. In percentuale della sezione da 900 in su, in vh sotto. 46 E NON PIU' 50 (revisione 10). Misurato a 1440 la lastra passa da 720 a 662px. E' l'unica leva che stringe la composizione senza allargare il vuoto fra lastra e testo: i punti ceduti li riprende la colonna, non l'aria in mezzo. L'altra meta' della stessa correzione e' il tetto di 760px, che sta nel blocco da 900 in su — senza, a 1920 la lastra arrivava a 960px e la sezione si leggeva sdraiata. SE SEMBRASSE ANCORA LARGA, la leva successiva NON e' stringere ancora la lastra: da li' in poi cresce il vuoto in mezzo e si torna al difetto della revisione 8. E' alzare il min-height da 640 a circa 700px, che cambia la proporzione invece della larghezza. */ --slab-w: 46%; --slab-h: 74%; --slab-h-sm: 46vh; } /* NIENTE PIU' --light-x, --bg-light-y, --halo-y, NE' --place-accent-rgb (revisione 10). Erano i numeri che tenevano insieme due cose che qui non ci sono piu': un fondo monocromo che si schiariva sotto la lastra, e l'alone dell'accento che cadeva dietro il testo. I loro due centri dovevano concordare, e per questo erano variabili invece che valori. Le rampe qui sotto portano la luce dentro di se' — una o due sorgenti negli angoli e una tinta d'arrivo diversa da quella di partenza — quindi non c'e' piu' niente da far concordare, e l'alone e' diventato una terza sorgente sopra due che c'erano gia'. Tolto l'alone, quelle variabili non le legge piu' nessuno: via anche loro invece di lasciarle a mentire. */ /* --- IL FONDO — le tre rampe definitive (revisione 10) --------------- Questa regola tiene solo la geometria del riquadro; il colore lo mettono le tre regole per mondo subito sotto. PERCHE' IL FONDO DI PRIMA ERA MOSCIO. Era una RAMPA MONOCROMA: radiale e lineare della stessa --place-rgb a opacita' diverse. Una sola tinta, piu' o meno scura. Per costruzione non puo' avere vibrazione, e nessun numero ci rimedia — si vedeva come un campo di vernice, non come profondita'. COSA FANNO INVECE QUELLE QUI SOTTO. Sono rampe A DUE TINTE: partono da un'ombra scura e ARRIVANO A UNA TINTA DIVERSA E PIU' CHIARA — acciaio, teal, viola — con una o due sorgenti di luce negli angoli. Le tinte d'arrivo sono in tavolozza da sempre (--epteka-steel, --dasos-teal, --mosses-purple) e il modello finestra non ne usava nessuna. La revisione 8 aveva la regola giusta ("l'alone non deve essere lo stesso verde del fondo") e lo strumento sbagliato: un alone solo, sopra una tinta piatta. Mancava la seconda tinta, non l'alone. I VALORI SONO COPIATI, NON INVENTATI. Aetheria viene da .lv-epteka (variante D di luoghi-varianti.php), Naos da .naos-chapter di dasos.php, Homefrost da .lv-mosses. Da li' si COPIA e non si modifica: sono l'archivio delle varianti gia' verificate in pagina. Per lo stesso motivo le tre NON vanno armonizzate fra loro — angoli, numero di sorgenti e opacita' sono diversi apposta, perche' ognuna e' tarata sul proprio quadro. L'unico ritocco e' i 210deg di Homefrost, spiegato li'. Specificita': le tre regole per mondo sono 0,3,0, come questa. Vincono perche' vengono dopo, ed e' voluto — qui sotto c'e' solo geometria, il colore lo decide il mondo. Piu' in su .place-aetheria .place-bg (0,2,0) assegna un altro background-image per gli altri modelli: perde di specificita', senza dipendere dall'ordine del file. */ .place.place--window .place-bg { /* Niente sbordo dell'8%: quello serviva al parallax, e queste tre sezioni non hanno data-parallax. Va rimesso a zero anche perche' la lastra qui sotto e' alta una PERCENTUALE di questo riquadro: se resta alto il 116% la lastra cresce con lui senza che si capisca perche'. */ inset: 0; /* E niente will-change: senza un transform da animare e' un layer del compositore buttato via — stessa ragione per cui non ce l'hanno le batterie di Epteka. */ will-change: auto; } /* LE TRE PALETTE NON SONO PIU' QUI (revisione 11). Stavano scritte su .place-aetheria.place--window & co., cioe' incollate a questo modello: sono state spostate piu' in su, su .place-aetheria .place-bg e sorelle, dove valgono per qualunque modello. I valori sono identici — se un giorno .place--window torna in uso, si ritrova le sue rampe senza fare niente. */ /* --- LA LASTRA — l'illustrazione tagliata dal bordo della pagina ------ fa il TELAIO (misura, angoli, ritaglio, ombra) e fa il VETRO. Non e' servito aggiungere un elemento al markup: era gia' li' e non aveva nessun ruolo grafico. Sul telefono la lastra sta SOPRA, da bordo a bordo, senza angoli e senza margini: a quella larghezza una cornice con l'aria intorno diventa un francobollo. Da 900 in su passa di lato, vedi in fondo. */ .place--window .place-bg picture { position: absolute; left: 0; top: 0; width: 100%; height: var(--slab-h-sm); display: block; overflow: hidden; /* e' questo che ritaglia la foto sugli angoli */ border-radius: 0; } /* Il vetro. Quasi tutte le proprieta' qui sotto AZZERANO qualcosa che arriva dai modelli precedenti — posizione assoluta, adattamento in altezza, maschera della dissolvenza, ritaglio: nel modello finestra il ritaglio lo fa il telaio, non la foto, e la dissolvenza non esiste piu' perche' non c'e' piu' niente da dissolvere nel gradiente. */ .place--window .place-photo { position: static; width: 100%; height: 100%; max-width: none; /* il reset globale sulle taglierebbe a 100% */ object-fit: cover; /* --photo-pos resta il knob per mondo, e adesso conta piu' di prima: la lastra e' circa 1,6:1 da 900 in su e quasi quadrata sul telefono, mentre i file sono 2:1 — qualcosa ai lati si perde sempre, ed e' questo numero a decidere cosa. I valori gia' in tavolozza (Aetheria 58% 45%, Naos 43% 38%, Homefrost 50% 35%) erano tarati sul ritaglio stretto dei telefoni e reggono anche qui. */ object-position: var(--photo-pos, center); opacity: 1; filter: none; transform: none; border-radius: 0; -webkit-mask-image: none; mask-image: none; } /* --- NIENTE VELO E NIENTE ALONE -------------------------------------- .place::before e' il velo comune a tutti i modelli, e qui non deve arrivare: non c'e' piu' niente da velare e passerebbe sopra la lastra. La regola percio' resta — e' lei a spegnerlo — ma non dipinge piu' nulla. VIA ANCHE L'ALONE (revisione 10). Fino a ieri questo pseudo-elemento cambiava mestiere e faceva da alone dell'accento dietro le parole: era il dispositivo delle batterie di Epteka, riusato per dare un secondo tono a un fondo che di suo era una tinta sola. Con le rampe a due tinte quel secondo tono ce l'ha gia' il fondo, e l'alone diventerebbe una TERZA sorgente di luce sopra due che ci sono gia': schiarisce il punto dove sta il testo, cioe' proprio dove il contrasto e' gia' al minimo. Se una sezione dovesse staccarsi poco dal fondo, la leva e' lo stop della rampa qui sopra, non un alone in piu'. Non si cancella la regola: senza, tornerebbe il velo di .place::before — e con lui il velo del blocco @media (min-width: 900px). La specificita' 0,2,1 e' li' per batterlo senza discussioni, visto che un ipotetico .place--window::before avrebbe la stessa (0,1,1) del velo. */ .place.place--window::before { background: none; } /* --- IL TESTO -------------------------------------------------------- Sul telefono sta SOTTO la lastra, sul fondo colorato, dentro il padding del .container che .place-content porta gia'. L'altezza della sezione diventa automatica: la lastra piu' il testo, niente altro. */ .place--window .place-content { /* Il min-height 62vh del modello base qui farebbe crescere la sezione oltre il suo contenuto e lascerebbe in fondo una fascia di colore vuota, che con la lastra ancorata in alto si legge come un errore. */ min-height: 0; /* La lastra e' fuori dal flusso (sta in .place-bg, che e' assoluto): e' questo padding a farle spazio. Un solo numero, --slab-h-sm, tiene insieme le due cose — se cambia l'altezza della lastra il testo la segue da solo. */ padding-top: calc(var(--slab-h-sm) + 2.5rem); padding-bottom: 3.5rem; } .place--window .place-text { /* Sotto i 900 il testo non ha nessuna lastra accanto: prende la larghezza del container, con un tetto che serve solo a non farne una riga lunga ottanta caratteri a 768, dove il container e' largo 706px. La misura stretta da 900 in su e' un'altra cosa e sta nel blocco in fondo. */ max-width: 60ch; /* Il velo non c'e' piu', quindi non serve piu' nemmeno la pezza che lo accompagnava nel modello --veil. */ text-shadow: none; } /* IL CORPO DEL TESTO NON HA PIU' UNA REGOLA (revisione 10). Qui c'erano un font-size: 1.0625rem (17px) e una line-height: 1.72. Il corpo del sito e' 1.1875rem, cioe' 19px da 900 in su (body, in cima al foglio): le sezioni luogo leggevano il 10,5% piu' piccolo di tutto il resto della pagina, e quel numero era arrivato dal prototipo del modello finestra, non da una scelta. Adesso il paragrafo eredita dal body come ogni altro paragrafo, e un blocco che si comporta come tutto il resto non ha bisogno di CSS. A 19px il paragrafo di Aetheria passa da cinque righe a sei: va bene. SE UN GIORNO IL BLOCCO RISULTASSE TROPPO ALTO rispetto alla lastra, la leva e' la misura in ch qui sotto, MAI la dimensione del carattere: rimpicciolire il corpo per far entrare il testo e' la scorciatoia che ci aveva portati qui. */ @media (min-width: 900px) { /* LA LASTRA PASSA DI LATO. Qui stavano anche i tre valori della luce (--light-x, --bg-light-y, --halo-y) che la seguivano di lato: con le rampe della revisione 10 la luce e' dentro il fondo e non ha piu' un centro da spostare, quindi non c'e' piu' niente da riallineare. LO SPECCHIO (.place--mirror). Classe nuova invece di riusare .text-right, di proposito: .text-right serve ancora agli altri tre modelli e li' vuol dire "il testo sta a destra SOPRA l'immagine", che qui non e' quello che succede — direbbe una cosa e ne farebbe un'altra. Due nomi diversi per due comportamenti diversi costano una classe e fanno risparmiare un malinteso. Vive solo da 900 in su: sotto, la lastra e' a tutta larghezza e non c'e' nessun lato da scambiare. Le due regole che la usano davvero sono piu' giu' — la lastra e la colonna del testo. */ .place--window .place-content { /* 640px fissi e non una quota di vh come il resto delle sezioni luogo: qui l'altezza non e' una scelta di respiro, e' un vincolo: la lastra e' alta il 74% della sezione e la colonna di testo e' lunga. Su un portatile basso 58vh sono meno di 400px, e la lastra diventerebbe una feritoia. */ min-height: 640px; padding-block: 4rem; } .place--window .place-bg picture { top: 50%; transform: translateY(-50%); /* Il min() e' il tetto di cui parla --slab-w: in percentuale la lastra cresce all'infinito, e su un monitor molto largo il 46% di 1920 sono 883px di illustrazione contro una colonna di testo che, essendo misurata in ch, resta ferma. Sopra i ~1650px di viewport la lastra si ferma e a crescere e' solo il vuoto ai lati, che e' il modo giusto di spendere una pagina larga. */ width: min(var(--slab-w), 760px); height: var(--slab-h); /* ANGOLI TONDI SOLO SUL LATO INTERNO. Il lato esterno resta a filo del viewport, senza margine e senza raggio. Perche' tagliata dal bordo e non appoggiata al centro con l'aria intorno: un'immagine incorniciata con quattro margini uguali si legge come una SLIDE; tagliata dal bordo si legge come una FINESTRA aperta su quel mondo. Ed e' la stessa mossa delle batterie che escono dalla cornice di Epteka — la pagina comincia ad avere un vocabolario suo. */ border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42); } .place--window.place--mirror .place-bg picture { /* left: auto e' obbligatorio: senza, left:0 del blocco base vince su right:0 e la lastra resta a sinistra, larga quanto --slab-w. */ left: auto; right: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); } /* Il testo dal lato opposto alla lastra, centrato in verticale (ci pensa gia' align-items: center di .place-content). */ .place--window .place-text { /* In ch e non in rem: la misura di una colonna si conta in caratteri, non in pixel. 42 E NON PIU' 33 (revisione 8). A 33ch, misurato a 1440, il testo era una striscia larga 314px accanto a una lastra di 778, con 188px di fondo vuoto in mezzo: il testo prendeva il 22% della sezione, e da li' veniva la sensazione di incolonnato e schiacciato. Il problema non era il testo troppo lungo in verticale, era la colonna troppo stretta in orizzontale — la diagnosi di prima era sbagliata. Adesso a 1440: testo 160->560, vuoto 218, lastra 778->1440. Il paragrafo perde tre o quattro righe senza che si tocchi una parola. LA MISURA E' L'UNICA LEVA sulla lunghezza del blocco. Il corpo non e' piu' una scelta di questo modello: dalla revisione 10 eredita i 19px del body, come tutto il resto della pagina. Se il testo dovesse risultare troppo lungo si cambia questo numero, non il carattere. */ max-width: 42ch; margin-left: auto; margin-right: 0; } .place--window.place--mirror .place-text { margin-left: 0; margin-right: auto; } } /* === .cutout — optional Palia-style floating element ================== A transparent PNG (a character, an object) absolutely positioned inside a .place section so it slightly overflows the section edge, drifting gently. Use SPARINGLY — one per page at most. Usage (uncomment the sample in index.php when a PNG arrives): */ .cutout { position: absolute; z-index: 3; animation: cutout-float 7s ease-in-out infinite alternate; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); pointer-events: none; } @keyframes cutout-float { from { transform: translateY(0); } to { transform: translateY(-16px); } }