tlig-theme/src/demo/demo.scss

// -----------------------------------------------------------------------------
// Demo chrome — NOT part of the shipped stylesheet.
//
// Everything here exists to frame the foundation in something that looks like
// the real site (wood ground, papyrus scroll) and to give the page its toolbar
// and swatch grid. It is reached only from src/index.html, which is not a build
// input, so none of it can reach dist/tlig.css.
//
// The scroll frame is deliberately here and not in components/: page layout is
// still on the "not done" list, and a demo is not the place to quietly ship it.
// -----------------------------------------------------------------------------

@use '../sass/abstracts' as *;

$img: '/wp-content/includes/images';

// -- The page ground ---------------------------------------------------------

html {
  background: url('#{$img}/background_planche_1920.jpg') top center / contain fixed;
}

body {
  min-height: 100vh;
}

// The scroll: a head image, a vertically repeating middle, a foot image.
.scroll {
  max-width: 1200px;
  margin-inline: auto;
}

.scroll__head,
.scroll__foot {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.scroll__head {
  height: 140px;
  background-image: url('#{$img}/page/background-message-entete_cnd.png.webp');
  background-position: bottom;
}

.scroll__body {
  margin-block-start: -1px;
  padding: 0 clamp(#{space-raw('md')}, 5vw, 5rem) space('xl');
  background: url('#{$img}/page/background-message-milieux1200x190-4_cnd.png.webp') repeat-y top / 100% auto;
}

.scroll__foot {
  // The top 18px of this image ramp from alpha 15 up to its 242 plateau — it
  // fades in. Butted against the body, that ramp composites over bare wood and
  // reads as a hard line at the body's bottom edge. The overlap below is the
  // measured ramp height plus a little, so the whole fade lands on papyrus.
  //
  // `top` cannot do this: the element is static, and only a positioned box
  // moves. `position`/`z-index` pin the paint order the effect depends on —
  // tree order already gives it, but silently.
  position: relative;
  z-index: 1;
  margin-block-start: -20px;
  height: 114px;
  background-image: url('#{$img}/page/background-message-footer-1200x114_cnd.png.webp');
  background-position: top;
}

// Below the tablet breakpoint the site swaps in narrower scroll images, which
// are not mirrored into this project. Rather than stretch the wide ones, the
// demo falls back to a plain parchment panel.
@include down('tablet') {
  .scroll__head,
  .scroll__foot { display: none; }

  .scroll__body {
    margin: space('md');
    padding: space('lg');
    border-radius: radius('md');
    background: rgba(247, 240, 224, 0.92);
  }
}

// -- Section scaffolding -----------------------------------------------------

.demo-section {
  padding-block: space('xl');

  & + & {
    border-block-start: 1px solid rgba(145, 116, 85, 0.35);
  }
}

.demo-label {
  display: flex;
  align-items: baseline;
  gap: space('sm');
  margin-block-end: space('lg');
  font-family: font('body');
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: $brown-600;

  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
  }
}

.demo-note {
  margin-block-start: space('sm');
  font-family: font('body');
  font-size: 13px;
  font-style: italic;
  color: $brown-600;
}

// A row of specimens that should sit side by side and wrap sanely.
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: space('md');
  align-items: center;
}

// -- Swatches ----------------------------------------------------------------

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: space('sm');
}

.swatch {
  overflow: hidden;
  border: 1px solid rgba(72, 32, 32, 0.15);
  border-radius: radius('sm');
  background: $white;
  font-family: font('body');
  font-size: 11px;
  line-height: 1.5;

  // Checkerboard, so an alpha token reads as translucent rather than as a
  // slightly different flat colour.
  &__chip {
    height: 56px;
    background-image:
      linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
      linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
  }

  &__fill { height: 100%; }

  &__meta { padding: space('2xs') space('xs'); }
  &__name { font-weight: 700; color: $brown-900; }
  &__value { color: $grey-500; font-variant-numeric: tabular-nums; }
}

// -- Type specimen table -----------------------------------------------------

.specimen {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: space('sm') space('lg');
  align-items: baseline;

  @include down('phone') {
    grid-template-columns: 1fr;
    gap: space('2xs');
  }
}

.specimen__key {
  font-family: font('body');
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: $brown-600;
}

// -- Dark-ground demo --------------------------------------------------------

.demo-dark {
  padding: space('lg');
  border-radius: radius('md');
  background: $brown-900;
}

// -- Toolbar -----------------------------------------------------------------

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: space('md');
  align-items: center;
  padding: space('xs') space('md');
  background: rgba(30, 14, 14, 0.94);
  color: #f0e6d2;
  font-family: font('body');
  font-size: 12px;
  backdrop-filter: blur(6px);

  &__brand {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  &__group {
    display: flex;
    gap: space('2xs');
    align-items: center;
  }

  &__spacer { flex: 1; }

  button {
    padding: 3px 10px;
    border: 1px solid rgba(240, 230, 210, 0.3);
    border-radius: radius('pill');
    background: transparent;
    color: inherit;
    font-size: 12px;

    &[aria-pressed='true'] {
      background: #f0e6d2;
      color: #1e0e0e;
      border-color: #f0e6d2;
    }
  }

  code {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
  }
}

// "Show the boxes" — outlines every component so the structure is visible.
.show-boxes {
  .site-footer__col,
  .demo-row > *,
  .field-group,
  .scroll__body > * {
    outline: 1px dashed rgba(202, 74, 31, 0.6);
    outline-offset: 2px;
  }
}