/* ========================================================================== TUTTI INSIEME — base.css · socle du design system Propriétaire : [design-system]. Les agents d'écran importent ce fichier et n'y touchent pas ; ils étendent les classes tt-* dans leur propre CSS. Références : docs/CONVENTIONS-THEME.md (tokens imposés) · docs/INVENTAIRE-MAQUETTES.md §1 (géométries exactes). Breakpoint unique : @media (max-width: 700px). Composants fournis ici : .tt-lisere (alias .tt-liserè) · .tt-masthead (+ --home) · .tt-langswitch · .tt-nav (+ --home) · .tt-footer (+ --home) · .tt-tirage (+ --sm, ratios, __scotch) · .tt-chip-persona (+ --crema) · .tt-cta (+ --su-blu, --blocco) · .tt-bottone-secondario (+ --quadrato) · .tt-label (modificateurs = couleur seulement) · .tt-riquadro · .tt-link-blu · .tt-container · .tt-sr-solo · variantes sépia body.tema-sepia-a / body.tema-sepia-b (prévisualisation) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset minimal maison (pas de reset externe) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } /* -------------------------------------------------------------------------- 2. Tokens (liste imposée par CONVENTIONS-THEME.md — ne pas renommer) -------------------------------------------------------------------------- */ :root { --tt-crema:#F7F0E2; --tt-bianco:#FFFDF7; --tt-banda:#EFE3CB; --tt-backing:#E8DCC6; --tt-inchiostro:#33261A; --tt-corpo:#4A3A29; --tt-corpo-racconto:#3D2F20; --tt-meta:#8A7157; --tt-didascalia:#6E573F; --tt-footer:#7A6449; --tt-terracotta:#A6512F; --tt-terracotta-hover:#8E4326; --tt-terracotta-su-blu:#B0562F; --tt-terracotta-su-blu-hover:#9A4728; --tt-maiolica:#2F6486; --tt-maiolica-hover:#24506C; --tt-banda-albero:#29536D; --tt-oro:#E8C98A; --tt-crema-su-blu:#F7F0E2; --tt-azzurro:#5BA8CB; --tt-label-su-banda:#8A6A3E; --tt-iniziali:#5C4630; --tt-testo-cta:#FBF4E6; --tt-bordo-neutro:rgba(51,38,26,.35); --tt-bordo-carta:rgba(122,90,52,.4); --tt-ombra-tirage:0 14px 32px rgba(70,45,20,.20),0 2px 6px rgba(70,45,20,.12); --tt-ombra-tirage-sm:0 10px 24px rgba(70,45,20,.16); --tt-ombra-carta:0 3px 10px rgba(70,45,20,.08); --tt-ombra-selezione:0 8px 22px rgba(47,100,134,.28); --tt-font-titoli:'Cormorant Garamond',Georgia,serif; --tt-font-corpo:'Source Serif 4','Source Serif Pro',Georgia,serif; } /* -------------------------------------------------------------------------- 2bis. Variantes sépia — PRÉVISUALISATION client uniquement (retour V1 nº6), jamais actives par défaut. Classes posées sur par le hook JS d'ancre d'URL (#sepia-a / #sepia-b — hook hors de ce fichier). Seuls les fonds sont réchauffés ; toutes les surfaces (tirages, cartes, bandeaux, liseré, nav mobile) suivent via les tokens — aucun fond opaque n'est codé en dur dans le socle, les rgba() translucides dérivés de l'encre teintent naturellement les nouveaux fonds. Deux encres sont assombries pour tenir AA (≥ 4.5:1) sur fonds réchauffés : meta et label-su-banda étaient déjà sous 4.5 dans la palette d'origine. Ratios calculés (WCAG) : inchiostro 12.4 · corpo 9.2 · footer 4.7 sur crema ; didascalia 6.6 · meta 5.5 sur bianco ; meta 4.8 sur crema ; label-su-banda 5.0 · iniziali 6.8 sur banda. -------------------------------------------------------------------------- */ body.tema-sepia-a, body.tema-sepia-b { --tt-crema: #F5EBD5; --tt-bianco: #FFFBF0; --tt-banda: #EDE0C4; --tt-backing: #E5D7B8; --tt-meta: #7A6345; --tt-label-su-banda: #755834; } /* Variante B : même palette + grain « papier ancien » à peine perceptible (l'effet se sent sans se voir). Bruit feTurbulence désaturé en data-URI, tuile 260px sans raccord (stitchTiles). Voile fixe non interactif (pointer-events none), SOUS les surcouches interactives — bottom sheet et panneau de l'albero à z-index 60. */ body.tema-sepia-b::after { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 3. Base — corps ≥ 18px, titres Cormorant, liens toujours soulignés -------------------------------------------------------------------------- */ body { background: var(--tt-crema); color: var(--tt-inchiostro); font-family: var(--tt-font-corpo); font-size: 19px; line-height: 1.7; } h1, h2, h3, h4, h5, h6 { font-family: var(--tt-font-titoli); font-weight: 600; line-height: 1.1; } /* Graisses chargées : Source Serif 400/600 — éviter le 700 synthétisé */ b, strong { font-weight: 600; } a { color: var(--tt-terracotta); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--tt-terracotta-hover); } /* Lien « univers bleu » (retour à l'arbre, auteur du kicker racconto) */ .tt-link-blu { color: var(--tt-maiolica); } .tt-link-blu:hover { color: var(--tt-maiolica-hover); } /* Focus visible partout (clavier) */ :focus-visible { outline: 2px solid var(--tt-maiolica); outline-offset: 2px; } /* -------------------------------------------------------------------------- 4. Utilitaires -------------------------------------------------------------------------- */ .tt-container { max-width: 1200px; margin-inline: auto; } /* Label petites capitales. Modificateurs = COULEUR uniquement, les écrans ajustent taille (13–15px) et letter-spacing (.13–.18em). */ .tt-label { font-size: 13.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tt-maiolica); } .tt-label--su-banda { color: var(--tt-label-su-banda); } .tt-label--oro { color: var(--tt-oro); } .tt-label--meta { color: var(--tt-meta); } /* Texte pour lecteurs d'écran uniquement */ .tt-sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 5. Liseré majolique (haut de chaque page) — azzurro ornemental .tt-liserè = orthographe du contrat, .tt-lisere = alias sans accent Retour V1 nº7 : collés au bord du viewport, les carreaux semblaient tronqués. 3px d'air (fond de page, via background-clip: content-box, suit les variantes sépia) + carreaux rehaussés 6→8px. Le gradient (périodes) ne change pas. box-sizing global border-box : height inclut le padding-top. -------------------------------------------------------------------------- */ .tt-lisere, .tt-liserè { height: 11px; /* 3px d'air + 8px de carreaux */ padding-top: 3px; background: repeating-linear-gradient(90deg, var(--tt-terracotta) 0 26px, var(--tt-crema) 26px 30px, var(--tt-maiolica) 30px 56px, var(--tt-crema) 56px 60px, var(--tt-azzurro) 60px 86px, var(--tt-crema) 86px 90px); background-clip: content-box; } @media (max-width: 700px) { .tt-lisere, .tt-liserè { height: 8px; /* 2px d'air + 6px de carreaux */ padding-top: 2px; background: repeating-linear-gradient(90deg, var(--tt-terracotta) 0 22px, var(--tt-crema) 22px 26px, var(--tt-maiolica) 26px 48px, var(--tt-crema) 48px 52px, var(--tt-azzurro) 52px 74px, var(--tt-crema) 74px 78px); /* le shorthand background réinitialise le clip : à redéclarer ici */ background-clip: content-box; } } /* -------------------------------------------------------------------------- 6. Masthead — défaut = pages internes (36px), --home = accueil (42px) Structure : .tt-masthead > div (logotipo + sottotitolo) + .tt-langswitch -------------------------------------------------------------------------- */ .tt-masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 52px 18px; } .tt-masthead--home { padding: 26px 52px 22px; } .tt-masthead__logotipo { display: inline-block; font-family: var(--tt-font-titoli); font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: .01em; color: var(--tt-inchiostro); text-decoration: none; } .tt-masthead__logotipo:hover { color: var(--tt-inchiostro); } .tt-masthead--home .tt-masthead__logotipo { font-size: 42px; } .tt-masthead__sottotitolo { margin-top: 6px; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--tt-meta); } .tt-masthead--home .tt-masthead__sottotitolo { margin-top: 7px; font-size: 14.5px; } @media (max-width: 700px) { /* Pages internes : rangée compacte logotype + pilules, sans sous-titre */ .tt-masthead { padding: 12px 16px; border-bottom: 1px solid rgba(51,38,26,.2); } .tt-masthead__logotipo { font-size: 25px; } .tt-masthead__sottotitolo { display: none; } /* Accueil : masthead centré, sélecteur pleine largeur dessous */ .tt-masthead--home { display: block; text-align: center; padding: 18px 18px 12px; border-bottom: none; } .tt-masthead--home .tt-masthead__logotipo { font-size: 31px; } .tt-masthead--home .tt-masthead__sottotitolo { display: block; margin-top: 5px; font-size: 13.5px; letter-spacing: .14em; } } /* -------------------------------------------------------------------------- 7. Sélecteur de langue — pilules « Italiano / Français » en toutes lettres Active : pleine encre. Inactive : bordée ; hover fond + bordure foncée. -------------------------------------------------------------------------- */ .tt-langswitch { display: flex; align-items: center; gap: 10px; } .tt-langswitch__pill { display: inline-flex; align-items: center; height: 47px; padding: 0 24px; border: 2px solid rgba(51,38,26,.5); border-radius: 999px; font-size: 18px; font-weight: 600; color: var(--tt-inchiostro); text-decoration: none; } .tt-langswitch__pill:hover { background: rgba(51,38,26,.08); border-color: var(--tt-inchiostro); color: var(--tt-inchiostro); } .tt-langswitch__pill--active, .tt-langswitch__pill--active:hover { background: var(--tt-inchiostro); border-color: var(--tt-inchiostro); color: var(--tt-crema); } @media (max-width: 700px) { .tt-langswitch { gap: 6px; } .tt-langswitch__pill { height: 40px; padding: 0 14px; font-size: 15.5px; } /* Accueil mobile : 2 boutons pleine largeur sous le masthead centré */ .tt-masthead--home .tt-langswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .tt-masthead--home .tt-langswitch__pill { height: 48px; justify-content: center; padding: 0 18px; font-size: 17.5px; } } /* -------------------------------------------------------------------------- 8. Nav — 4 entrées en toutes lettres, jamais de hamburger Actif : le texte RESTE encre, seul le soulignement est azzurro (ornemental) -------------------------------------------------------------------------- */ .tt-nav { display: flex; flex-wrap: wrap; /* le FR plus long peut passer sur 2 lignes */ justify-content: center; gap: 10px; border-top: 1px solid rgba(51,38,26,.22); border-bottom: 1px solid rgba(51,38,26,.22); } .tt-nav__item { padding: 15px 26px; font-size: 19px; font-weight: 600; color: var(--tt-inchiostro); text-decoration: none; } .tt-nav--home .tt-nav__item { padding: 16px 26px; } .tt-nav__item:hover { color: var(--tt-terracotta); text-decoration: underline; text-underline-offset: 3px; } .tt-nav__item--active, .tt-nav__item--active:hover { color: var(--tt-inchiostro); text-decoration: underline; text-decoration-color: var(--tt-azzurro); text-decoration-thickness: 3px; text-underline-offset: 8px; } @media (max-width: 700px) { /* Grille 2×2 de boutons (h 50), cibles tactiles larges */ .tt-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 16px; border-top: none; } .tt-nav__item, .tt-nav--home .tt-nav__item { display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 8px; border: 1.5px solid var(--tt-bordo-neutro); border-radius: 10px; background: var(--tt-bianco); font-size: 16.5px; text-align: center; } } /* -------------------------------------------------------------------------- 9. Footer -------------------------------------------------------------------------- */ .tt-footer { border-top: 1px solid rgba(51,38,26,.22); padding: 26px 56px; text-align: center; font-size: 16px; color: var(--tt-footer); } .tt-footer--home { padding: 30px 56px; } /* macros.footer() émet deux

: exclusion mutuelle au breakpoint 700px */ .tt-footer__testo--mobile { display: none; } @media (max-width: 700px) { .tt-footer, .tt-footer--home { margin-top: 22px; padding: 18px 20px; font-size: 14.5px; } .tt-footer__testo--desktop { display: none; } .tt-footer__testo--mobile { display: block; } } /* -------------------------------------------------------------------------- 10. Tirage papier — LE cadre photo du site (bords francs : radius 0) La figure entière (fond blanc, padding, ombre, légende) porte la rotation, passée en variable : style="--rot:-1.6deg". Ratio : classe modificatrice ou style="--ratio:3/4". Défaut = grand tirage (padding 12, ombre pleine). Structure :

-------------------------------------------------------------------------- */ .tt-tirage { position: relative; background: var(--tt-bianco); border-radius: 0; padding: 12px 12px 13px; box-shadow: var(--tt-ombra-tirage); transform: rotate(var(--rot, 0deg)); } .tt-tirage--sm { padding: 10px 10px 11px; box-shadow: var(--tt-ombra-tirage-sm); } .tt-tirage--ritratto { --ratio: 3/4; } .tt-tirage--paesaggio { --ratio: 4/3; } .tt-tirage--largo { --ratio: 16/9; } .tt-tirage__foto { aspect-ratio: var(--ratio, 3/4); background: var(--tt-backing); /* backing visible tant que la photo manque */ overflow: hidden; } .tt-tirage__foto img { width: 100%; height: 100%; object-fit: cover; } .tt-tirage__didascalia { margin-top: 11px; font-style: italic; font-size: 16px; line-height: 1.45; text-align: center; color: var(--tt-didascalia); } .tt-tirage--sm .tt-tirage__didascalia { margin-top: 9px; font-size: 15.5px; } /* Variante « scotch » (tirage paysage du hero) : bande semi-transparente */ .tt-tirage__scotch { position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 98px; height: 28px; background: rgba(208,186,144,.58); box-shadow: 0 1px 3px rgba(70,45,20,.12); } /* -------------------------------------------------------------------------- 11. Chip-personne — pilule cliquable avatar + prénom + années Défaut : fond blanc (posée sur bandeau crème/banda). --crema : fond crème, avatar 34px (posée sur carte blanche, ex. encadré du racconto). -------------------------------------------------------------------------- */ .tt-chip-persona { display: inline-flex; align-items: center; gap: 10px; background: var(--tt-bianco); border: 1px solid var(--tt-bordo-carta); border-radius: 999px; padding: 7px 18px 7px 8px; color: var(--tt-inchiostro); text-decoration: none; } .tt-chip-persona:hover { border-color: var(--tt-maiolica); box-shadow: 0 3px 10px rgba(47,100,134,.15); color: var(--tt-inchiostro); } .tt-chip-persona__avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tt-banda); border: 1px solid rgba(122,90,52,.35); overflow: hidden; font-family: var(--tt-font-titoli); font-weight: 600; font-size: 16px; color: var(--tt-iniziali); } .tt-chip-persona__avatar img { width: 100%; height: 100%; object-fit: cover; /* visages dans le tiers haut des photos (retour V1) */ object-position: 50% 30%; } .tt-chip-persona__nome { font-size: 17.5px; font-weight: 600; } .tt-chip-persona__anni { font-size: 15px; font-weight: 400; color: var(--tt-meta); } .tt-chip-persona--crema { background: var(--tt-crema); padding: 6px 16px 6px 7px; } .tt-chip-persona--crema .tt-chip-persona__avatar { width: 34px; height: 34px; font-size: 15px; } .tt-chip-persona--crema .tt-chip-persona__nome { font-size: 17px; } /* -------------------------------------------------------------------------- 12. Boutons — l'action est TOUJOURS terracotta, jamais azzurro -------------------------------------------------------------------------- */ .tt-cta { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 36px; border: none; border-radius: 8px; background: var(--tt-terracotta); color: var(--tt-testo-cta); font-family: var(--tt-font-corpo); font-size: 19px; font-weight: 600; text-decoration: none; cursor: pointer; } .tt-cta:hover { background: var(--tt-terracotta-hover); color: var(--tt-testo-cta); } /* Sur bandeau bleu majolique : terracotta réchauffé pour le contraste */ .tt-cta--su-blu { background: var(--tt-terracotta-su-blu); } .tt-cta--su-blu:hover { background: var(--tt-terracotta-su-blu-hover); } .tt-cta--blocco { display: flex; width: 100%; } @media (max-width: 700px) { .tt-cta { border-radius: 10px; } } /* Bouton secondaire bordé (base des boutons zoom, actions neutres) */ .tt-bottone-secondario { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; background: var(--tt-bianco); border: 1.5px solid rgba(51,38,26,.45); border-radius: 8px; font-size: 18px; font-weight: 600; color: var(--tt-inchiostro); text-decoration: none; cursor: pointer; } .tt-bottone-secondario:hover { background: rgba(51,38,26,.06); border-color: var(--tt-inchiostro); color: var(--tt-inchiostro); } /* 48×48 pour les boutons zoom « − / + » (glyphe 26px, pas d'icône) */ .tt-bottone-secondario--quadrato { width: 48px; padding: 0; font-size: 26px; font-weight: 400; line-height: 1; } /* -------------------------------------------------------------------------- 13. Encadré à filet supérieur azzurro (« Le persone di questo racconto ») Seul emploi de l'azzurro sur un encadré : le filet, jamais le texte. -------------------------------------------------------------------------- */ .tt-riquadro { background: var(--tt-bianco); border: 1px solid rgba(47,100,134,.4); border-top: 3px solid var(--tt-azzurro); padding: 22px 26px; } @media (max-width: 700px) { .tt-riquadro { padding: 16px 18px; } } /* Nav mobile à 3 entrées : la 1re (la plus longue) prend toute la largeur */ @media (max-width: 700px) { .tt-nav__item:first-child:nth-last-child(3) { grid-column: 1 / -1; } }