835 lines
26 KiB
Plaintext
835 lines
26 KiB
Plaintext
---
|
||
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
|
||
import GlossaryHomeAside from "../../components/GlossaryHomeAside.astro";
|
||
import { getCollection } from "astro:content";
|
||
import {
|
||
buildGlossaryBySlug,
|
||
countGlossaryEntriesByKind,
|
||
familyOf,
|
||
getGlossaryEntriesByFamily,
|
||
hrefOfGlossaryEntry,
|
||
sortGlossaryEntries,
|
||
} from "../../lib/glossary";
|
||
|
||
const entries = await getCollection("glossaire");
|
||
|
||
const bySlug = buildGlossaryBySlug(entries);
|
||
|
||
const fondamentaux = getGlossaryEntriesByFamily(entries, "concept-fondamental");
|
||
const scenes = getGlossaryEntriesByFamily(entries, "scene");
|
||
const dynamiques = sortGlossaryEntries(
|
||
entries.filter((entry) =>
|
||
["dynamique", "pathologie"].includes(familyOf(entry)),
|
||
),
|
||
);
|
||
const metaRegimes = getGlossaryEntriesByFamily(entries, "meta-regime");
|
||
|
||
const paradigmesCount = countGlossaryEntriesByKind(entries, "paradigme");
|
||
const doctrinesCount = countGlossaryEntriesByKind(entries, "doctrine");
|
||
|
||
const metaRegimesPreview = metaRegimes.slice(0, 6);
|
||
|
||
const arcalite = bySlug.get("arcalite");
|
||
const cratialite = bySlug.get("cratialite");
|
||
const tension = bySlug.get("tension");
|
||
const sceneDepreuve = bySlug.get("scene-depreuve");
|
||
const archicration = bySlug.get("archicration");
|
||
|
||
const paradigmeArchicratiquePageHref = "/glossaire/paradigme-archicratique/";
|
||
const metaRegimesPageHref = "/glossaire/archicrations/";
|
||
const tensionsPageHref = "/glossaire/tensions-irreductibles/";
|
||
const verbesPageHref = "/glossaire/verbes-de-la-scene/";
|
||
const paradigmesPageHref = "/glossaire/paradigmes/";
|
||
const indexCompletPageHref = "/glossaire/index-complet/";
|
||
---
|
||
|
||
<GlossaryLayout
|
||
title="Glossaire archicratique"
|
||
version="1.0"
|
||
stickyMode="glossary-home"
|
||
>
|
||
<Fragment slot="aside">
|
||
<GlossaryHomeAside allEntries={entries} />
|
||
</Fragment>
|
||
|
||
<section class="glossary-home">
|
||
<header class="glossary-hero" id="glossary-hero">
|
||
<p class="glossary-kicker">Référentiel terminologique</p>
|
||
<h1>Glossaire archicratique</h1>
|
||
<p class="glossary-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é.
|
||
</p>
|
||
<h2
|
||
class="glossary-hero-follow"
|
||
id="glossary-hero-follow"
|
||
aria-hidden="true"
|
||
></h2>
|
||
</header>
|
||
|
||
<section class="glossary-map-block glossary-section" aria-labelledby="glossary-map-title">
|
||
<div class="glossary-map-block__head">
|
||
<h2 id="glossary-map-title" data-follow-section="Cartographie du système archicratique">
|
||
Cartographie du système archicratique
|
||
</h2>
|
||
<p>
|
||
La lecture la plus simple du système part de deux vecteurs premiers,
|
||
l’arcalité et la cratialité, dont la rencontre produit des tensions.
|
||
Ces tensions doivent être mises en scène, traitées par l’archicration,
|
||
puis stabilisées dans des méta-régimes de co-viabilité.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="glossary-map" aria-label="Carte conceptuelle du glossaire">
|
||
<div class="glossary-map__stage">
|
||
<div class="glossary-map__title">Forces en composition</div>
|
||
<div class="glossary-map__roots">
|
||
{arcalite ? (
|
||
<a class="glossary-map__node" href={hrefOfGlossaryEntry(arcalite)}>ARCALITÉ</a>
|
||
) : (
|
||
<span class="glossary-map__node">ARCALITÉ</span>
|
||
)}
|
||
|
||
{cratialite ? (
|
||
<a class="glossary-map__node" href={hrefOfGlossaryEntry(cratialite)}>CRATIALITÉ</a>
|
||
) : (
|
||
<span class="glossary-map__node">CRATIALITÉ</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||
|
||
<div class="glossary-map__stage">
|
||
<div class="glossary-map__title">Phénomène transversal</div>
|
||
{tension ? (
|
||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(tension)}>
|
||
TENSION
|
||
</a>
|
||
) : (
|
||
<span class="glossary-map__node glossary-map__node--wide">TENSION</span>
|
||
)}
|
||
</div>
|
||
|
||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||
|
||
<div class="glossary-map__stage">
|
||
<div class="glossary-map__title">Comparution</div>
|
||
{sceneDepreuve ? (
|
||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(sceneDepreuve)}>
|
||
MISE EN SCÈNE
|
||
</a>
|
||
) : (
|
||
<span class="glossary-map__node glossary-map__node--wide">MISE EN SCÈNE</span>
|
||
)}
|
||
</div>
|
||
|
||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||
|
||
<div class="glossary-map__stage">
|
||
<div class="glossary-map__title">Opérateur régulateur</div>
|
||
{archicration ? (
|
||
<a class="glossary-map__node glossary-map__node--wide" href={hrefOfGlossaryEntry(archicration)}>
|
||
ARCHICRATION
|
||
</a>
|
||
) : (
|
||
<span class="glossary-map__node glossary-map__node--wide">ARCHICRATION</span>
|
||
)}
|
||
</div>
|
||
|
||
<div class="glossary-map__arrow" aria-hidden="true">↓</div>
|
||
|
||
<div class="glossary-map__stage">
|
||
<div class="glossary-map__title">Formes de stabilisation</div>
|
||
<a class="glossary-map__node glossary-map__node--wide" href={metaRegimesPageHref}>
|
||
MÉTA-RÉGIMES
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{fondamentaux.length > 0 && (
|
||
<section id="concepts-fondamentaux" class="glossary-section">
|
||
<div class="glossary-section__head">
|
||
<div>
|
||
<h2 data-follow-section="Concepts fondamentaux">Concepts fondamentaux</h2>
|
||
<p class="glossary-intro">
|
||
Ces notions forment la grammaire minimale de l’archicratie.
|
||
Elles donnent accès à la structure générale du système.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glossary-cards">
|
||
{fondamentaux.map((entry) => (
|
||
<a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
|
||
<strong>{entry.data.term}</strong>
|
||
<span>{entry.data.definitionShort}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
<section id="paradigme-archicratique" class="glossary-section">
|
||
<div class="glossary-section__head">
|
||
<div>
|
||
<h2 data-follow-section="Paradigme archicratique">Paradigme archicratique</h2>
|
||
<p class="glossary-intro">
|
||
Cette page de synthèse offre une vue d’ensemble du système
|
||
archicratique. Elle articule le noyau conceptuel, les scènes de
|
||
comparution, les dynamiques, les tensions irréductibles, les
|
||
méta-régimes de co-viabilité et le paysage théorique dans lequel
|
||
l’archicratie se situe et se distingue.
|
||
</p>
|
||
</div>
|
||
|
||
<a class="glossary-cta" href={paradigmeArchicratiquePageHref}>
|
||
Ouvrir la synthèse
|
||
</a>
|
||
</div>
|
||
|
||
<div class="glossary-portals">
|
||
<a class="glossary-portal-card" href={paradigmeArchicratiquePageHref}>
|
||
<strong>Paradigme archicratique</strong>
|
||
<span>
|
||
Saisir la logique d’ensemble du système archicratique : de
|
||
l’arcalité et de la cratialité jusqu’aux scènes, aux tensions, aux
|
||
formes de co-viabilité et aux traditions de comparaison
|
||
mobilisées.
|
||
</span>
|
||
<small>Portail de synthèse générale</small>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
{scenes.length > 0 && (
|
||
<section id="scenes-archicratiques" class="glossary-section">
|
||
<div class="glossary-section__head">
|
||
<div>
|
||
<h2 data-follow-section="Scènes archicratiques">Scènes archicratiques</h2>
|
||
<p class="glossary-intro">
|
||
Les scènes archicratiques rendent possible la comparution des
|
||
architectures de régulation. Elles sont le lieu où l’ordre peut
|
||
être exposé, discuté et révisé.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glossary-cards">
|
||
{scenes.map((entry) => (
|
||
<a class="glossary-card glossary-card--wide" href={hrefOfGlossaryEntry(entry)}>
|
||
<strong>{entry.data.term}</strong>
|
||
<span>{entry.data.definitionShort}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{dynamiques.length > 0 && (
|
||
<section id="dynamiques-archicratiques" class="glossary-section">
|
||
<div class="glossary-section__head">
|
||
<div>
|
||
<h2 data-follow-section="Dynamiques archicratiques">Dynamiques archicratiques</h2>
|
||
<p class="glossary-intro">
|
||
Cette famille rassemble les processus de déplacement, les dérives
|
||
et les formes de pathologisation de la régulation archicratique.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glossary-cards">
|
||
{dynamiques.map((entry) => (
|
||
<a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
|
||
<strong>{entry.data.term}</strong>
|
||
<span>{entry.data.definitionShort}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
<section id="meta-regimes-archicratiques" class="glossary-section">
|
||
<div class="glossary-section__head">
|
||
<div>
|
||
<h2 data-follow-section="Méta-régimes archicratiques">Méta-régimes archicratiques</h2>
|
||
<p class="glossary-intro">
|
||
Les méta-régimes décrivent les grandes formes historiques et
|
||
topologiques par lesquelles une société organise durablement ses
|
||
tensions et sa co-viabilité.
|
||
</p>
|
||
</div>
|
||
|
||
<a class="glossary-cta" href={metaRegimesPageHref}>
|
||
Explorer la cartographie complète
|
||
</a>
|
||
</div>
|
||
|
||
{metaRegimesPreview.length > 0 && (
|
||
<div class="glossary-cards">
|
||
{metaRegimesPreview.map((entry) => (
|
||
<a class="glossary-card" href={hrefOfGlossaryEntry(entry)}>
|
||
<strong>{entry.data.term}</strong>
|
||
<span>{entry.data.definitionShort}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
<section id="approfondir" class="glossary-section">
|
||
<div class="glossary-section__head">
|
||
<div>
|
||
<h2 data-follow-section="Prolonger la lecture">Prolonger la lecture</h2>
|
||
<p class="glossary-intro">
|
||
Quatre parcours complémentaires permettent d’élargir la lecture :
|
||
l’un vers les tensions irréductibles, l’un vers les verbes de la scène
|
||
archicratique, l’un vers le paysage théorique dans lequel l’archicratie
|
||
se situe et se distingue, l’autre vers l’ensemble alphabétique complet
|
||
des entrées du glossaire.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glossary-portals glossary-portals--secondary">
|
||
<a class="glossary-portal-card" href={tensionsPageHref}>
|
||
<strong>Tensions irréductibles</strong>
|
||
<span>
|
||
Parcourir les dix tensions ontologiquement irréductibles et
|
||
politiquement fondatrices à partir desquelles la co-viabilité doit
|
||
être pensée.
|
||
</span>
|
||
<small>10 tensions structurantes</small>
|
||
</a>
|
||
|
||
<a class="glossary-portal-card" href={verbesPageHref}>
|
||
<strong>Verbes de la scène</strong>
|
||
<span>
|
||
Disposer d’un mini-glossaire opératoire pour décrire l’ouverture,
|
||
l’entrave, la capture, la fermeture ou la remise en scène des
|
||
architectures régulatrices.
|
||
</span>
|
||
<small>19 verbes d’analyse</small>
|
||
</a>
|
||
|
||
<a class="glossary-portal-card" href={paradigmesPageHref}>
|
||
<strong>Cartographie théorique</strong>
|
||
<span>
|
||
Situer l’archicratie dans son paysage de doctrines fondatrices et de
|
||
paradigmes régulateurs.
|
||
</span>
|
||
<small>{doctrinesCount} doctrine{doctrinesCount > 1 ? "s" : ""} · {paradigmesCount} paradigme{paradigmesCount > 1 ? "s" : ""}</small>
|
||
</a>
|
||
|
||
<a class="glossary-portal-card" href={indexCompletPageHref}>
|
||
<strong>Index complet</strong>
|
||
<span>
|
||
Retrouver l’ensemble des entrées du glossaire dans une navigation
|
||
alphabétique intégrale.
|
||
</span>
|
||
<small>{entries.length} entrée{entries.length > 1 ? "s" : ""}</small>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<script is:inline>
|
||
(() => {
|
||
const header = document.querySelector("header");
|
||
const hero = document.getElementById("glossary-hero");
|
||
const follow = document.getElementById("glossary-hero-follow");
|
||
const headings = Array.from(document.querySelectorAll("[data-follow-section]"));
|
||
|
||
if (!header || !hero || !follow || headings.length === 0) return;
|
||
|
||
let raf = 0;
|
||
let activeHeading = null;
|
||
let clearTimer = 0;
|
||
|
||
function syncStickyTop() {
|
||
const headerHeight = header.getBoundingClientRect().height || 0;
|
||
document.documentElement.style.setProperty(
|
||
"--glossary-sticky-top",
|
||
`${Math.round(headerHeight + 8)}px`
|
||
);
|
||
}
|
||
|
||
function applyHeadingMetrics(fromEl, toEl) {
|
||
const cs = window.getComputedStyle(fromEl);
|
||
|
||
const sourceFontSize = Number.parseFloat(cs.fontSize) || 40;
|
||
const sourceLineHeight =
|
||
Number.parseFloat(cs.lineHeight) ||
|
||
Math.round(sourceFontSize * 1.06 * 100) / 100;
|
||
|
||
const scaledFontSize = Math.max(28, sourceFontSize * 0.9);
|
||
const scaledLineHeight = Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);
|
||
|
||
toEl.style.fontSize = `${scaledFontSize}px`;
|
||
toEl.style.lineHeight = `${scaledLineHeight}px`;
|
||
toEl.style.fontWeight = cs.fontWeight;
|
||
toEl.style.letterSpacing = cs.letterSpacing;
|
||
toEl.style.fontFamily = cs.fontFamily;
|
||
|
||
document.documentElement.style.setProperty(
|
||
"--glossary-follow-height",
|
||
`${Math.ceil(scaledLineHeight)}px`
|
||
);
|
||
}
|
||
|
||
function getCurrentHeading() {
|
||
const heroRect = hero.getBoundingClientRect();
|
||
let candidate = null;
|
||
|
||
for (const heading of headings) {
|
||
const rect = heading.getBoundingClientRect();
|
||
const trigger = heroRect.bottom - Math.min(rect.height * 0.42, 18);
|
||
|
||
if (rect.top <= trigger) {
|
||
candidate = heading;
|
||
} else {
|
||
break;
|
||
}
|
||
}
|
||
|
||
return candidate;
|
||
}
|
||
|
||
function hideFollow() {
|
||
if (!follow.classList.contains("is-visible")) return;
|
||
|
||
follow.classList.remove("is-visible");
|
||
follow.setAttribute("aria-hidden", "true");
|
||
|
||
window.clearTimeout(clearTimer);
|
||
clearTimer = window.setTimeout(() => {
|
||
if (!follow.classList.contains("is-visible")) {
|
||
follow.textContent = "";
|
||
}
|
||
}, 260);
|
||
}
|
||
|
||
function showFollow(heading) {
|
||
const nextText = (heading.dataset.followSection || heading.textContent || "").trim();
|
||
if (!nextText) {
|
||
hideFollow();
|
||
return;
|
||
}
|
||
|
||
if (activeHeading !== heading) {
|
||
activeHeading = heading;
|
||
follow.textContent = nextText;
|
||
applyHeadingMetrics(heading, follow);
|
||
}
|
||
|
||
window.clearTimeout(clearTimer);
|
||
|
||
if (!follow.classList.contains("is-visible")) {
|
||
requestAnimationFrame(() => {
|
||
follow.classList.add("is-visible");
|
||
follow.setAttribute("aria-hidden", "false");
|
||
});
|
||
} else {
|
||
follow.setAttribute("aria-hidden", "false");
|
||
}
|
||
}
|
||
|
||
function updateFollow() {
|
||
syncStickyTop();
|
||
|
||
const active = getCurrentHeading();
|
||
|
||
if (!active) {
|
||
activeHeading = null;
|
||
hideFollow();
|
||
return;
|
||
}
|
||
|
||
const heroRect = hero.getBoundingClientRect();
|
||
const activeRect = active.getBoundingClientRect();
|
||
const showThreshold = heroRect.bottom - Math.min(activeRect.height * 0.34, 14);
|
||
const shouldShow = activeRect.top <= showThreshold;
|
||
|
||
if (!shouldShow) {
|
||
activeHeading = null;
|
||
hideFollow();
|
||
return;
|
||
}
|
||
|
||
showFollow(active);
|
||
}
|
||
|
||
function schedule() {
|
||
if (raf) return;
|
||
raf = requestAnimationFrame(() => {
|
||
raf = 0;
|
||
updateFollow();
|
||
});
|
||
}
|
||
|
||
window.addEventListener("scroll", schedule, { passive: true });
|
||
window.addEventListener("resize", schedule);
|
||
|
||
if (document.fonts?.ready) {
|
||
document.fonts.ready.then(schedule).catch(() => {});
|
||
}
|
||
|
||
schedule();
|
||
})();
|
||
</script>
|
||
|
||
<style>
|
||
:root{
|
||
--glossary-accent: #00d9ff;
|
||
--glossary-bg-soft: rgba(127,127,127,0.05);
|
||
--glossary-bg-soft-strong: rgba(127,127,127,0.08);
|
||
--glossary-border: rgba(127,127,127,0.22);
|
||
--glossary-border-strong: rgba(127,127,127,0.30);
|
||
--glossary-sticky-top: 64px;
|
||
--glossary-follow-height: 2.5rem;
|
||
}
|
||
|
||
.glossary-home-shell__main,
|
||
.glossary-home-shell__aside{
|
||
grid-column: auto;
|
||
}
|
||
|
||
.glossary-home-shell__aside-inner{
|
||
position: static;
|
||
}
|
||
|
||
.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:
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.glossary-intro{
|
||
margin: 0;
|
||
max-width: 72ch;
|
||
font-size: 1.05rem;
|
||
line-height: 1.55;
|
||
opacity: .94;
|
||
}
|
||
|
||
.glossary-hero-follow{
|
||
margin: 2px 0 0;
|
||
min-height: var(--glossary-follow-height);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
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;
|
||
}
|
||
|
||
.glossary-hero-follow.is-visible{
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
filter: blur(0);
|
||
}
|
||
|
||
.glossary-map-block__head h2,
|
||
.glossary-section h2{
|
||
margin: 0;
|
||
font-size: clamp(2rem, 3vw, 2.55rem);
|
||
line-height: 1.06;
|
||
letter-spacing: -.03em;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.glossary-section{
|
||
margin-top: 42px;
|
||
scroll-margin-top: calc(var(--glossary-sticky-top) + 190px);
|
||
}
|
||
|
||
.glossary-section__head{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: start;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.glossary-map-block{
|
||
padding: 18px 18px 20px;
|
||
border: 1px solid var(--glossary-border);
|
||
border-radius: 24px;
|
||
background: rgba(127,127,127,0.04);
|
||
}
|
||
|
||
.glossary-map-block__head p{
|
||
max-width: 76ch;
|
||
margin: 12px 0 0;
|
||
font-size: 1rem;
|
||
line-height: 1.55;
|
||
opacity: .94;
|
||
}
|
||
|
||
.glossary-map{
|
||
display: grid;
|
||
justify-items: center;
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.glossary-map__stage{
|
||
width: min(580px, 100%);
|
||
display: grid;
|
||
justify-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.glossary-map__title{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 1.08rem;
|
||
line-height: 1.25;
|
||
font-weight: 800;
|
||
letter-spacing: -.01em;
|
||
opacity: .96;
|
||
}
|
||
|
||
.glossary-map__roots{
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 8px;
|
||
}
|
||
|
||
.glossary-map__node{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 50px;
|
||
padding: 10px 14px;
|
||
border: 1px solid var(--glossary-border-strong);
|
||
border-radius: 999px;
|
||
background: var(--glossary-bg-soft);
|
||
color: var(--glossary-accent);
|
||
text-decoration: none;
|
||
text-align: center;
|
||
font-size: .99rem;
|
||
font-weight: 800;
|
||
letter-spacing: .04em;
|
||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||
}
|
||
|
||
.glossary-map__node:hover{
|
||
background: var(--glossary-bg-soft-strong);
|
||
border-color: rgba(0,217,255,0.22);
|
||
text-decoration: none;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.glossary-map__node--wide{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.glossary-map__arrow{
|
||
font-size: 1.45rem;
|
||
line-height: 1;
|
||
opacity: .72;
|
||
}
|
||
|
||
.glossary-cta{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 40px;
|
||
border: 1px solid var(--glossary-border-strong);
|
||
border-radius: 999px;
|
||
padding: 7px 14px;
|
||
color: var(--glossary-accent);
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
transition: transform 120ms ease, background 120ms ease;
|
||
}
|
||
|
||
.glossary-cta:hover{
|
||
background: var(--glossary-bg-soft-strong);
|
||
text-decoration: none;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.glossary-cards{
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.glossary-card{
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 14px 16px;
|
||
border: 1px solid var(--glossary-border);
|
||
border-radius: 18px;
|
||
background: var(--glossary-bg-soft);
|
||
text-decoration: none;
|
||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||
}
|
||
|
||
.glossary-card:hover{
|
||
transform: translateY(-1px);
|
||
background: var(--glossary-bg-soft-strong);
|
||
border-color: rgba(0,217,255,0.16);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.glossary-card--wide{
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.glossary-card strong{
|
||
color: var(--glossary-accent);
|
||
font-size: 1.04rem;
|
||
line-height: 1.28;
|
||
}
|
||
|
||
.glossary-card span{
|
||
color: inherit;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
opacity: .94;
|
||
}
|
||
|
||
.glossary-portals{
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 14px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.glossary-portal-card{
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 16px 18px;
|
||
border: 1px solid var(--glossary-border);
|
||
border-radius: 18px;
|
||
background: var(--glossary-bg-soft);
|
||
text-decoration: none;
|
||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||
}
|
||
|
||
.glossary-portal-card:hover{
|
||
transform: translateY(-1px);
|
||
background: var(--glossary-bg-soft-strong);
|
||
border-color: rgba(0,217,255,0.16);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.glossary-portal-card strong{
|
||
color: var(--glossary-accent);
|
||
font-size: 1.08rem;
|
||
line-height: 1.28;
|
||
}
|
||
|
||
.glossary-portal-card span{
|
||
color: inherit;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
opacity: .94;
|
||
}
|
||
|
||
.glossary-portal-card small{
|
||
color: var(--glossary-accent);
|
||
font-size: .94rem;
|
||
line-height: 1.35;
|
||
opacity: .9;
|
||
}
|
||
|
||
@media (max-width: 980px){
|
||
.glossary-home-shell{
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.glossary-home-shell__aside-inner{
|
||
position: static;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px){
|
||
.glossary-hero{
|
||
top: calc(var(--glossary-sticky-top) - 2px);
|
||
padding: 12px 14px 16px;
|
||
}
|
||
|
||
.glossary-map__roots{
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.glossary-section__head{
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.glossary-cta{
|
||
width: fit-content;
|
||
}
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark){
|
||
.glossary-map-block,
|
||
.glossary-map__node,
|
||
.glossary-card,
|
||
.glossary-portal-card{
|
||
background: rgba(255,255,255,0.04);
|
||
}
|
||
|
||
.glossary-map__node:hover,
|
||
.glossary-card:hover,
|
||
.glossary-portal-card:hover,
|
||
.glossary-cta:hover{
|
||
background: rgba(255,255,255,0.07);
|
||
}
|
||
}
|
||
</style>
|
||
</GlossaryLayout> |