design-tokens.css

/**
 * Design Tokens — SebastienDegodez.github.io
 * Thème Tech Glass inspiré des présentations meetup
 * Utilisable en CSS natif ou importable dans Figma via un plugin tokens.
 *
 * Source : SebastienDegodez/slide-marp & SebastienDegodez/MCP.Pack
 */

:root {
  /* ─────────────────────────────────────────────────────────────
   * PALETTE DE COULEURS
   * ───────────────────────────────────────────────────────────── */

  /* Couleurs de base Tech Glass */
  --color-light:     #eef6ff;
  --color-dark:      #0f1722;
  --color-primary:   #24b5ff;
  --color-secondary: #7fd3ff;

  /* Couleurs dérivées */
  --color-dimmed:    #b7c6d8;
  --color-stripe:    rgba(127, 211, 255, 0.16);

  /* Alias sémantiques (mode principal = invert/sombre) */
  --color-background:        var(--color-dark);      /* #0f1722 */
  --color-foreground:        var(--color-light);     /* #eef6ff */
  --color-highlight:         var(--color-secondary); /* #7fd3ff */
  --color-code-bg:           var(--color-dimmed);    /* #b7c6d8 */
  --color-code-text:         var(--color-dark);      /* #0f1722 */
  --color-pre-bg:            var(--color-foreground);/* #eef6ff */
  --color-link:              var(--color-secondary); /* #7fd3ff */
  --color-heading-strong:    var(--color-secondary); /* #7fd3ff */
  --color-muted:             var(--color-dimmed);    /* #b7c6d8 */

  /* Variante slide accent */
  --color-gaia-bg:           var(--color-primary);
  --color-gaia-fg:           var(--color-light);
  --color-gaia-highlight:    var(--color-secondary);
  --color-gaia-dimmed:       #c8d8e6;

  /* Accent secondaire technique (inspire des slides meetup) */
  --color-tech-mint:         #80cbc4;

  /* ─────────────────────────────────────────────────────────────
   * TOKENS GLASS V2
   * ───────────────────────────────────────────────────────────── */

  --glass-bg:                rgba(17, 28, 40, 0.88);
  --glass-bg-strong:         rgba(12, 22, 33, 0.94);
  --glass-border:            rgba(127, 211, 255, 0.26);
  --glass-border-strong:     rgba(127, 211, 255, 0.4);
  --glass-highlight:         rgba(238, 246, 255, 0.12);
  --glass-shadow:            0 18px 60px rgba(0, 0, 0, 0.42);
  --glass-shadow-hover:      0 24px 70px rgba(0, 0, 0, 0.55);
  --glass-blur:              14px;

  --motion-fast:             160ms ease;
  --motion-medium:           260ms ease;

  /* ─────────────────────────────────────────────────────────────
   * FONDS DE PAGE
   * ───────────────────────────────────────────────────────────── */

  /* Fond principal des pages */
  --bg-slide:        var(--color-dark);   /* #0f1722 */

  /* Gradient subtil appliqué sur chaque section */
  --bg-gradient: linear-gradient(
    135deg,
    rgba(136, 136, 136, 0)    0%,
    rgba(136, 136, 136, 0.02) 50%,
    rgba(255, 255, 255, 0)    50%,
    rgba(255, 255, 255, 0.05) 100%
  );

  /* Image de fond (slides titre / fin) */
  --bg-image-title: url('https://raw.githubusercontent.com/SebastienDegodez/slide-marp/refs/heads/main/presentation/images/bg.jpg');
  --bg-image-opacity: 0.7; /* opacité appliquée via Marp `![bg opacity:.7]` */

  /* ─────────────────────────────────────────────────────────────
   * TYPOGRAPHIE
   * ───────────────────────────────────────────────────────────── */

  /* Familles de police */
  --font-sans:  Lato, 'Avenir Next', Avenir, 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-mono:  'Fira Code', 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Tailles (base 35 px — slides 1280×720) */
  --font-size-base:   35px;
  --font-size-h1:     1.8em;   /* ~63px */
  --font-size-h2:     1.5em;   /* ~52px */
  --font-size-h3:     1.3em;   /* ~45px */
  --font-size-h4:     1.1em;   /* ~38px */
  --font-size-h5:     1em;     /* ~35px */
  --font-size-h6:     0.9em;   /* ~31px */
  --font-size-code-inline: 0.8em;  /* ~28px — valeur Gaia native (inline `code`) */
  --font-size-code-block:  0.6em;  /* ~21px — surcharge MCP.Pack (code dans pre) */
  --font-size-pre:         0.6em;  /* ~21px — même surcharge custom-default MCP.Pack */
  --font-size-footer: 66%;     /* ~23px */

  /* Espacement texte */
  --line-height:     1.35;
  --letter-spacing:  1.25px;

  /* ─────────────────────────────────────────────────────────────
   * DIMENSIONS DES SLIDES
   * ───────────────────────────────────────────────────────────── */

  --slide-width-16-9:  1280px;
  --slide-height-16-9: 720px;
  --slide-width-4-3:   960px;
  --slide-height-4-3:  720px;
  --slide-padding:     70px;

  /* ─────────────────────────────────────────────────────────────
   * ARRONDIS & OMBRES
   * ───────────────────────────────────────────────────────────── */

  /* Avatar / photo de profil */
  --radius-avatar:  50%;         /* cercle parfait — div#presentation > img */
  --size-avatar:    5rem;        /* 80px */

  /* Pas de box-shadow défini dans les thèmes source */

  /* ─────────────────────────────────────────────────────────────
   * ESPACEMENTS
   * ───────────────────────────────────────────────────────────── */

  --spacing-header-footer-height: 70px;
  --spacing-header-footer-line:   50px;
  --spacing-columns-gap:          1rem;
  --margin-avatar-right:          1.1em;

  /* ─────────────────────────────────────────────────────────────
   * ICÔNES
   * ───────────────────────────────────────────────────────────── */
  /* Font Awesome 6.7.2 */
  /* @import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css' */
}

/* ─────────────────────────────────────────────────────────────────
 * CLASSES UTILITAIRES DÉRIVÉES DU THÈME
 * ───────────────────────────────────────────────────────────────── */

/* Carte présentateur */
.presentation-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.presentation-card__avatar {
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-avatar);
  margin-right: var(--margin-avatar-right);
  vertical-align: middle;
}

.presentation-card__name {
  margin-top: 0;
  text-align: left;
  font-size: var(--font-size-h1);
}

.presentation-card__title {
  text-align: left;
  font-size: var(--font-size-h5);
}

/* Grille 2 colonnes (avantages, features…) */
.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-columns-gap);
}

/* Slide de fin (QR code centré) */
.end-card {
  display: flex;
  justify-content: center;
}

/*
 * Fallback utilitaire quand backdrop-filter n'est pas disponible.
 * A utiliser sur les surfaces glass du layout.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface-fallback {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
    box-shadow: var(--glass-shadow);
  }
}