Add manifest page and refine editorial landing pages
This commit is contained in:
@@ -892,28 +892,6 @@ html{ scroll-behavior: smooth; }
|
||||
border-top: 1px solid rgba(127,127,127,0.25);
|
||||
}
|
||||
|
||||
body[data-edition-key="commencer"] .commencer-title{
|
||||
font-size: clamp(2.6rem, 6vw, 4.8rem);
|
||||
line-height: .98;
|
||||
letter-spacing: -.055em;
|
||||
margin: 18px 0 28px;
|
||||
text-shadow: 0 0 34px rgba(0,217,255,.10);
|
||||
}
|
||||
|
||||
body[data-edition-key="commencer"] .reading h2{
|
||||
margin-top: 34px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(127,127,127,.18);
|
||||
font-size: clamp(1.35rem, 2.3vw, 1.85rem);
|
||||
letter-spacing: -.025em;
|
||||
}
|
||||
|
||||
body[data-edition-key="commencer"] .reading h2:first-of-type{
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.reading:has(> .landing){
|
||||
max-width: none;
|
||||
@@ -1032,4 +1010,358 @@ html{ scroll-behavior: smooth; }
|
||||
.search-hero h1{
|
||||
font-size: clamp(1.7rem, 7vw, 2.3rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* =========================================================
|
||||
MANIFESTE — page éditoriale intégrale
|
||||
Alignée sur les landing pages du corpus.
|
||||
========================================================= */
|
||||
|
||||
.manifeste-page{
|
||||
scroll-margin-top: 96px;
|
||||
}
|
||||
|
||||
.manifeste-hero h1{
|
||||
max-width: 18ch;
|
||||
}
|
||||
|
||||
.manifeste-note p:not(.landing-kicker){
|
||||
max-width: 78ch;
|
||||
}
|
||||
|
||||
/* ==========================
|
||||
Manifeste — texte intégral premium
|
||||
========================== */
|
||||
|
||||
.manifeste-article{
|
||||
padding-bottom: clamp(30px, 4vw, 52px);
|
||||
}
|
||||
|
||||
.manifeste-article .landing-kicker{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-body{
|
||||
width: min(100%, 92ch);
|
||||
max-width: 92ch;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-body p{
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0 0 20px;
|
||||
font-size: 1.035rem;
|
||||
line-height: 1.74;
|
||||
opacity: .91;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-body p:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-section-title{
|
||||
max-width: 34ch;
|
||||
margin: clamp(42px, 4.5vw, 62px) 0 18px;
|
||||
padding-top: 26px;
|
||||
border-top: 1px solid rgba(0,217,255,0.22);
|
||||
color: #f5f7fb;
|
||||
font-size: clamp(1.55rem, 2.45vw, 2.1rem);
|
||||
line-height: 1.08;
|
||||
font-weight: 850;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-section-title:first-child{
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-subsection-title{
|
||||
max-width: 38ch;
|
||||
margin: 32px 0 13px;
|
||||
color: #00d9ff;
|
||||
font-size: clamp(1.12rem, 1.55vw, 1.34rem);
|
||||
line-height: 1.16;
|
||||
font-weight: 850;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.manifeste-page .landing-section{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
EDITORIAL REVEAL — seuil de lecture définitif
|
||||
Manifeste + Commencer
|
||||
========================================================= */
|
||||
|
||||
/*
|
||||
Point critique :
|
||||
le paragraphe placé juste avant le reveal ne doit PAS ajouter
|
||||
sa marge basse habituelle. Sinon l’ouverture crée un trou.
|
||||
*/
|
||||
|
||||
.manifeste-article .manifest-body > p:has(+ .editorial-reveal),
|
||||
.commencer-genese > p:has(+ .editorial-reveal){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Reveal fermé : respiration courte avant le bouton */
|
||||
|
||||
.editorial-reveal{
|
||||
max-width: min(100%, 82ch);
|
||||
margin-top: clamp(6px, .75vw, 10px);
|
||||
}
|
||||
|
||||
/* Reveal ouvert : le composant devient transparent dans le flux */
|
||||
|
||||
.editorial-reveal.is-open{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Bouton fermé */
|
||||
|
||||
.editorial-reveal__button{
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
min-height: 42px;
|
||||
margin: 0;
|
||||
padding: 9px 17px;
|
||||
border: 1px solid rgba(0,217,255,0.36);
|
||||
border-radius: 999px;
|
||||
background: rgba(0,217,255,0.035);
|
||||
color: #00d9ff;
|
||||
font: inherit;
|
||||
font-weight: 850;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.012em;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
opacity 260ms var(--ease-out),
|
||||
transform 260ms var(--ease-out),
|
||||
max-height 420ms var(--ease-out),
|
||||
min-height 420ms var(--ease-out),
|
||||
padding 420ms var(--ease-out),
|
||||
margin 420ms var(--ease-out),
|
||||
border-width 420ms var(--ease-out),
|
||||
border-color 160ms var(--ease-out),
|
||||
background 160ms var(--ease-out);
|
||||
}
|
||||
|
||||
.editorial-reveal__button::before{
|
||||
content: "+";
|
||||
display: inline-block;
|
||||
color: #00d9ff;
|
||||
font-weight: 950;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.editorial-reveal__button:hover{
|
||||
background: rgba(0,217,255,0.06);
|
||||
border-color: rgba(0,217,255,0.58);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.editorial-reveal__label{
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Bouton effacé à l’ouverture */
|
||||
|
||||
.editorial-reveal.is-open > .editorial-reveal__button{
|
||||
max-height: 0;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-width: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/* Corps révélé : aucune boîte visuelle, aucune marge autonome */
|
||||
|
||||
.editorial-reveal__body{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
transition:
|
||||
height 820ms cubic-bezier(.22, 1, .36, 1),
|
||||
opacity 460ms var(--ease-out),
|
||||
transform 460ms var(--ease-out);
|
||||
}
|
||||
|
||||
.editorial-reveal.is-open > .editorial-reveal__body{
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Seuil révélé — Manifeste
|
||||
La suite commence par un h2 : respiration de section,
|
||||
mais sans trou typographique.
|
||||
========================================================= */
|
||||
|
||||
.manifeste-article .editorial-reveal__body > .manifest-section-title:first-child{
|
||||
margin-top: clamp(6px, 1vw, 12px) !important;
|
||||
padding-top: 0 !important;
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Les grands titres suivants du manifeste gardent leur hiérarchie normale */
|
||||
|
||||
.manifeste-article .editorial-reveal__body > .manifest-section-title:not(:first-child){
|
||||
margin-top: clamp(42px, 4.5vw, 62px);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Seuil révélé — Commencer
|
||||
La suite commence par un paragraphe : continuité directe.
|
||||
========================================================= */
|
||||
|
||||
.commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{
|
||||
margin-top: -6px !important;
|
||||
}
|
||||
|
||||
/* Titres internes de la genèse */
|
||||
|
||||
.commencer-reveal-heading{
|
||||
max-width: 42ch;
|
||||
margin: 34px 0 14px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(0,217,255,0.13);
|
||||
color: rgba(255,255,255,0.96);
|
||||
font-size: clamp(1.12rem, 1.45vw, 1.28rem);
|
||||
line-height: 1.14;
|
||||
font-weight: 850;
|
||||
letter-spacing: -0.024em;
|
||||
}
|
||||
|
||||
.commencer-reveal-heading:first-of-type{
|
||||
margin-top: clamp(28px, 3vw, 38px);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Mobile
|
||||
========================================================= */
|
||||
|
||||
@media (max-width: 760px){
|
||||
.manifeste-article .manifest-body{
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-body p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-section-title{
|
||||
max-width: none;
|
||||
margin-top: 36px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.manifeste-article .manifest-subsection-title{
|
||||
max-width: none;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.editorial-reveal{
|
||||
max-width: 100%;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.editorial-reveal.is-open{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.editorial-reveal__button{
|
||||
max-width: 100%;
|
||||
padding: 10px 15px;
|
||||
border-radius: 16px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.manifeste-article .editorial-reveal__body > .manifest-section-title:first-child{
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.commencer-genese .editorial-reveal__body > p:first-child{
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
|
||||
.commencer-reveal-heading{
|
||||
max-width: none;
|
||||
margin-top: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Landing pages — retrait éditorial interne
|
||||
Pages d’accueil, essai-thèse, cas pratique, manifeste, commencer
|
||||
========================================================= */
|
||||
|
||||
.landing-home{
|
||||
--landing-inner-inset: clamp(14px, 2vw, 28px);
|
||||
}
|
||||
|
||||
/* Notes au lecteur : on conserve le kicker comme repère,
|
||||
mais on décale légèrement le titre et le texte. */
|
||||
.landing-home .edition-note > h2,
|
||||
.landing-home .edition-note > p:not(.landing-kicker){
|
||||
margin-left: var(--landing-inner-inset);
|
||||
}
|
||||
|
||||
/* On évite que le retrait ne pousse les lignes trop loin à droite. */
|
||||
.landing-home .edition-note > p:not(.landing-kicker){
|
||||
max-width: min(78ch, calc(100% - var(--landing-inner-inset)));
|
||||
}
|
||||
|
||||
/* Sections d’index : même axe éditorial que les notes. */
|
||||
.landing-home .landing-section__head{
|
||||
margin-left: var(--landing-inner-inset);
|
||||
}
|
||||
|
||||
/* La grille suit le même retrait pour que le titre et les cartes respirent ensemble. */
|
||||
.landing-home .landing-grid{
|
||||
margin-left: var(--landing-inner-inset);
|
||||
width: calc(100% - var(--landing-inner-inset));
|
||||
}
|
||||
|
||||
/* Mobile : on supprime le retrait pour préserver la largeur utile. */
|
||||
@media (max-width: 760px){
|
||||
.landing-home{
|
||||
--landing-inner-inset: 0px;
|
||||
}
|
||||
|
||||
.landing-home .edition-note > h2,
|
||||
.landing-home .edition-note > p:not(.landing-kicker),
|
||||
.landing-home .landing-section__head,
|
||||
.landing-home .landing-grid{
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.landing-home .landing-grid{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user