460 lines
11 KiB
Plaintext
460 lines
11 KiB
Plaintext
---
|
||
export interface Props {
|
||
kicker?: string;
|
||
title?: string;
|
||
intro?: string;
|
||
}
|
||
|
||
const {
|
||
kicker = "Référentiel terminologique",
|
||
title = "Glossaire archicratique",
|
||
intro = "Ce glossaire n’est pas seulement un index de définitions. Il constitue une porte d’entrée dans la pensée archicratique : une cartographie raisonnée des concepts fondamentaux, des scènes, des dynamiques et des méta-régimes à partir desquels une société peut être décrite comme organisation de tensions et recherche de co-viabilité.",
|
||
} = Astro.props;
|
||
---
|
||
|
||
<header class="glossary-hero" id="glossary-hero">
|
||
<p class="glossary-kicker">{kicker}</p>
|
||
<h1>{title}</h1>
|
||
|
||
<div class="glossary-hero__collapsible">
|
||
<p
|
||
class="glossary-intro"
|
||
id="glossary-hero-intro"
|
||
aria-hidden="false"
|
||
>
|
||
{intro}
|
||
</p>
|
||
|
||
<button
|
||
class="glossary-hero__toggle"
|
||
id="glossary-hero-toggle"
|
||
type="button"
|
||
aria-controls="glossary-hero-intro"
|
||
aria-expanded="false"
|
||
hidden
|
||
>
|
||
lire la suite
|
||
</button>
|
||
</div>
|
||
|
||
<h2
|
||
class="glossary-hero-follow"
|
||
id="glossary-hero-follow"
|
||
aria-hidden="true"
|
||
></h2>
|
||
</header>
|
||
|
||
<style>
|
||
.glossary-hero{
|
||
position: sticky;
|
||
top: var(--glossary-sticky-top);
|
||
z-index: 12;
|
||
margin-bottom: 28px;
|
||
padding: 14px 16px 18px;
|
||
border: 1px solid rgba(127,127,127,0.18);
|
||
border-radius: 28px;
|
||
background:
|
||
linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.90)),
|
||
radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
|
||
transition:
|
||
padding 220ms cubic-bezier(.22,.8,.22,1),
|
||
border-radius 220ms cubic-bezier(.22,.8,.22,1),
|
||
background 300ms cubic-bezier(.22,.8,.22,1),
|
||
border-color 300ms cubic-bezier(.22,.8,.22,1),
|
||
box-shadow 300ms cubic-bezier(.22,.8,.22,1);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
display: grid;
|
||
row-gap: 12px;
|
||
min-width: 0;
|
||
overflow: clip;
|
||
}
|
||
|
||
.glossary-kicker{
|
||
margin: 0;
|
||
font-size: 12px;
|
||
letter-spacing: .12em;
|
||
text-transform: uppercase;
|
||
opacity: .72;
|
||
}
|
||
|
||
.glossary-hero h1{
|
||
margin: 0;
|
||
font-size: clamp(2.2rem, 4vw, 3.15rem);
|
||
line-height: 1.02;
|
||
letter-spacing: -.04em;
|
||
font-weight: 850;
|
||
transition:
|
||
font-size 220ms cubic-bezier(.22,.8,.22,1),
|
||
line-height 220ms cubic-bezier(.22,.8,.22,1);
|
||
min-width: 0;
|
||
}
|
||
|
||
.glossary-hero__collapsible{
|
||
display: grid;
|
||
row-gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.glossary-intro{
|
||
margin: 0;
|
||
max-width: 72ch;
|
||
font-size: 1.05rem;
|
||
line-height: 1.55;
|
||
opacity: .94;
|
||
min-width: 0;
|
||
transition:
|
||
font-size 220ms cubic-bezier(.22,.8,.22,1),
|
||
line-height 220ms cubic-bezier(.22,.8,.22,1),
|
||
max-height 220ms cubic-bezier(.22,.8,.22,1),
|
||
opacity 180ms ease;
|
||
}
|
||
|
||
:global(body[data-edition-key="glossaire"] .glossary-hero p#glossary-hero-intro){
|
||
padding-right: 0;
|
||
scroll-margin-top: 0;
|
||
}
|
||
|
||
.glossary-hero__toggle{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: fit-content;
|
||
min-height: 30px;
|
||
padding: 3px 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
color: inherit;
|
||
font-size: 12px;
|
||
line-height: 1.2;
|
||
letter-spacing: .01em;
|
||
opacity: .72;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 2px;
|
||
transition:
|
||
opacity 120ms ease,
|
||
transform 120ms ease;
|
||
}
|
||
|
||
.glossary-hero__toggle:hover{
|
||
opacity: .92;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.glossary-hero__toggle:focus-visible{
|
||
outline: 2px solid rgba(0,217,255,0.24);
|
||
outline-offset: 4px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.glossary-hero__toggle[hidden]{
|
||
display: none !important;
|
||
}
|
||
|
||
.glossary-hero-follow{
|
||
margin: 2px 0 0;
|
||
min-height: var(--glossary-follow-height);
|
||
display: block;
|
||
max-width: min(100%, 22ch);
|
||
opacity: 0;
|
||
transform: translateY(10px) scale(.985);
|
||
filter: blur(6px);
|
||
transition:
|
||
opacity 220ms cubic-bezier(.22,1,.36,1),
|
||
transform 320ms cubic-bezier(.22,1,.36,1),
|
||
filter 320ms cubic-bezier(.22,1,.36,1);
|
||
pointer-events: none;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
will-change: opacity, transform, filter;
|
||
min-width: 0;
|
||
}
|
||
|
||
.glossary-hero-follow.is-visible{
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
filter: blur(0);
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on) .glossary-hero{
|
||
padding: 12px 14px 14px;
|
||
border-bottom-left-radius: 18px;
|
||
border-bottom-right-radius: 18px;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on) .glossary-hero h1{
|
||
font-size: clamp(1.7rem, 3.2vw, 2.2rem);
|
||
line-height: 1.02;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
|
||
font-size: .94rem;
|
||
line-height: 1.34;
|
||
max-height: 2.7em;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero__toggle{
|
||
display: inline-flex;
|
||
}
|
||
|
||
@media (max-width: 760px){
|
||
.glossary-hero{
|
||
top: calc(var(--glossary-sticky-top) - 2px);
|
||
padding: 12px 14px 16px;
|
||
border-radius: 22px;
|
||
row-gap: 10px;
|
||
}
|
||
|
||
.glossary-hero h1{
|
||
font-size: clamp(1.9rem, 8vw, 2.45rem);
|
||
line-height: 1.02;
|
||
letter-spacing: -.03em;
|
||
}
|
||
|
||
.glossary-hero__collapsible{
|
||
row-gap: 7px;
|
||
}
|
||
|
||
.glossary-intro{
|
||
max-width: 100%;
|
||
width: 100%;
|
||
font-size: .98rem;
|
||
line-height: 1.44;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on) .glossary-hero{
|
||
padding: 10px 13px 12px;
|
||
border-radius: 18px;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on) .glossary-hero h1{
|
||
font-size: clamp(1.45rem, 6vw, 1.8rem);
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
|
||
max-width: 100%;
|
||
width: 100%;
|
||
font-size: .86rem;
|
||
line-height: 1.24;
|
||
max-height: 2.48em;
|
||
-webkit-line-clamp: 2;
|
||
opacity: .9;
|
||
}
|
||
|
||
.glossary-hero__toggle{
|
||
min-height: 28px;
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.glossary-hero-follow{
|
||
max-width: min(100%, 24ch);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 520px){
|
||
.glossary-hero{
|
||
padding: 11px 12px 14px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.glossary-intro{
|
||
max-width: 100%;
|
||
width: 100%;
|
||
font-size: .94rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on) .glossary-hero{
|
||
padding: 9px 11px 11px;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
|
||
max-width: 100%;
|
||
width: 100%;
|
||
font-size: .84rem;
|
||
line-height: 1.22;
|
||
}
|
||
}
|
||
|
||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||
.glossary-hero{
|
||
padding: 10px 12px 12px;
|
||
border-radius: 16px;
|
||
row-gap: 8px;
|
||
}
|
||
|
||
.glossary-kicker{
|
||
font-size: 10px;
|
||
letter-spacing: .1em;
|
||
}
|
||
|
||
.glossary-hero h1{
|
||
font-size: clamp(1.35rem, 4vw, 1.8rem);
|
||
line-height: 1;
|
||
}
|
||
|
||
.glossary-intro{
|
||
font-size: .84rem;
|
||
line-height: 1.24;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on) .glossary-hero{
|
||
padding: 9px 11px 10px;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on) .glossary-hero h1{
|
||
font-size: clamp(1.1rem, 3vw, 1.35rem);
|
||
}
|
||
|
||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
|
||
font-size: .8rem;
|
||
line-height: 1.18;
|
||
max-height: 2.36em;
|
||
-webkit-line-clamp: 2;
|
||
opacity: .88;
|
||
}
|
||
|
||
.glossary-hero__toggle{
|
||
min-height: 24px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.glossary-hero-follow{
|
||
max-width: min(100%, 26ch);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 860px){
|
||
.glossary-hero{
|
||
position: static !important;
|
||
top: auto !important;
|
||
z-index: auto !important;
|
||
margin-bottom: 18px !important;
|
||
}
|
||
|
||
.glossary-hero-follow{
|
||
display: none !important;
|
||
min-height: 0 !important;
|
||
opacity: 0 !important;
|
||
transform: none !important;
|
||
filter: none !important;
|
||
}
|
||
}
|
||
|
||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||
.glossary-hero{
|
||
position: static !important;
|
||
top: auto !important;
|
||
z-index: auto !important;
|
||
margin-bottom: 14px !important;
|
||
}
|
||
|
||
.glossary-hero-follow{
|
||
display: none !important;
|
||
min-height: 0 !important;
|
||
opacity: 0 !important;
|
||
transform: none !important;
|
||
filter: none !important;
|
||
}
|
||
}
|
||
|
||
/* Neutralisation mobile/tablette : le hero n'est plus sticky, donc aucun état condensé. */
|
||
@media (max-width: 860px){
|
||
.glossary-hero{
|
||
position: static !important;
|
||
top: auto !important;
|
||
z-index: auto !important;
|
||
margin-bottom: 18px !important;
|
||
padding: 12px 14px 16px !important;
|
||
border-radius: 22px !important;
|
||
row-gap: 8px !important;
|
||
}
|
||
|
||
.glossary-hero h1,
|
||
:global(body.glossary-home-follow-on) .glossary-hero h1{
|
||
font-size: clamp(2rem, 6.2vw, 2.75rem) !important;
|
||
line-height: 1.04 !important;
|
||
letter-spacing: -.035em !important;
|
||
max-width: 100%;
|
||
overflow-wrap: normal;
|
||
word-break: normal;
|
||
hyphens: none;
|
||
text-wrap: balance;
|
||
}
|
||
|
||
.glossary-intro,
|
||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
|
||
max-width: 100% !important;
|
||
width: 100% !important;
|
||
max-height: none !important;
|
||
overflow: visible !important;
|
||
display: block !important;
|
||
-webkit-line-clamp: unset !important;
|
||
-webkit-box-orient: unset !important;
|
||
font-size: .94rem !important;
|
||
line-height: 1.4 !important;
|
||
opacity: .94 !important;
|
||
padding-right: 0 !important;
|
||
scroll-margin-top: 0 !important;
|
||
}
|
||
|
||
.glossary-hero__toggle,
|
||
.glossary-hero-follow{
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* Mobile paysage compact : même logique, mais plus dense. */
|
||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||
.glossary-hero{
|
||
padding: 8px 10px 9px !important;
|
||
border-radius: 14px !important;
|
||
row-gap: 5px !important;
|
||
margin-bottom: 10px !important;
|
||
}
|
||
|
||
.glossary-kicker{
|
||
font-size: 9px !important;
|
||
letter-spacing: .11em !important;
|
||
}
|
||
|
||
.glossary-hero h1,
|
||
:global(body.glossary-home-follow-on) .glossary-hero h1{
|
||
font-size: clamp(1.55rem, 4.2vw, 1.9rem) !important;
|
||
line-height: 1.03 !important;
|
||
letter-spacing: -.025em !important;
|
||
}
|
||
|
||
.glossary-intro,
|
||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-intro{
|
||
font-size: .72rem !important;
|
||
line-height: 1.18 !important;
|
||
}
|
||
}
|
||
|
||
/* Tablette large / iPad landscape : le follow reste lisible, jamais tronqué brutalement. */
|
||
@media (min-width: 861px) and (max-width: 1240px){
|
||
.glossary-hero h1{
|
||
font-size: clamp(2.35rem, 4.2vw, 3.05rem) !important;
|
||
line-height: 1.03 !important;
|
||
}
|
||
|
||
.glossary-hero-follow{
|
||
max-width: 100% !important;
|
||
white-space: normal !important;
|
||
overflow: visible !important;
|
||
text-overflow: clip !important;
|
||
font-size: clamp(1.55rem, 3.1vw, 2.05rem) !important;
|
||
line-height: 1.08 !important;
|
||
}
|
||
}
|
||
</style> |