layout.css

/* ============================================================
   OpenFeature Slidev Theme - Design Tokens & Global Styles
   Extracted from: Kubecon OpenFeature Maintainer Track (ODP)
   Supports: Light & Dark mode (via Slidev's .dark class)
   ============================================================ */

/* ----------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------------------------- */

:root {
  /* Brand colors (base palette) */
  --of-accent-green: #00c800;
  --of-lime: #cff56a;
  --of-teal: #76a5af;

  /* Light mode defaults */
  --of-accent-purple: #4040e0;
  --of-bg: #f5f5f7;
  --of-bg-soft: #eaeaec;
  --of-text: #1a1a2e;
  --of-text-secondary: #4a4a5a;
  --of-text-muted: #6e6e7a;
  --of-card-bg: rgba(0, 0, 0, 0.05);
  --of-card-border: var(--of-accent-purple);
  --of-code-bg: #e8e8ec;
  --of-wave-opacity: 1;
  --of-green-text: #007a00;
  --of-logo-fill: #231f20;
  --of-logo-circle: #f5f5f5;
  --of-divider: rgba(0, 0, 0, 0.1);

  /* Theme primary (used by Slidev internals) */
  --slidev-theme-primary: var(--of-accent-purple);
}

.dark {
  --of-accent-purple: #7b7bff;
  --of-bg: #3c3f47;
  --of-bg-soft: #33363d;
  --of-text: #ffffff;
  --of-text-secondary: #e3e3e3;
  --of-text-muted: #999999;
  --of-card-bg: rgba(255, 255, 255, 0.08);
  --of-card-border: var(--of-accent-purple);
  --of-code-bg: #2d2f36;
  --of-wave-opacity: 1;
  --of-green-text: #3ddc3d;
  --of-logo-fill: #ffffff;
  --of-logo-circle: #f5f5f5;
  --of-divider: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------------------------
   Global Base Styles
   ---------------------------------------------------------- */

.slidev-layout {
  background-color: var(--of-bg);
  color: var(--of-text);
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

/* ----------------------------------------------------------
   Typography
   ---------------------------------------------------------- */

.slidev-layout h1 {
  @apply font-bold;
  color: var(--of-text);
  line-height: 1.2;
}

.slidev-layout h2 {
  @apply font-semibold;
  color: var(--of-text);
  line-height: 1.3;
}

.slidev-layout h3 {
  @apply font-semibold;
  color: var(--of-text-secondary);
}

.slidev-layout p,
.slidev-layout li {
  color: var(--of-text-secondary);
}

.slidev-layout a {
  color: var(--of-accent-purple);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.slidev-layout a:hover {
  border-bottom-color: var(--of-accent-purple);
}

.slidev-layout strong {
  color: var(--of-text);
  font-weight: 600;
}

.slidev-layout blockquote {
  border-left: 4px solid var(--of-accent-purple);
  padding-left: 1rem;
  color: var(--of-text-secondary);
  font-style: italic;
}

/* Accent text utilities */
.slidev-layout .text-accent {
  color: var(--of-accent-purple);
  font-weight: 600;
}

.slidev-layout .text-green {
  color: var(--of-green-text);
  font-weight: 600;
}

.slidev-layout .text-muted {
  color: var(--of-text-muted);
}

.slidev-layout .text-handwritten {
  font-family: "Architects Daughter", cursive;
}

/* ----------------------------------------------------------
   Code Blocks
   ---------------------------------------------------------- */

.slidev-layout :not(pre) > code {
  background-color: var(--of-code-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ----------------------------------------------------------
   Tables
   ---------------------------------------------------------- */

.slidev-layout table {
  width: 100%;
  border-collapse: collapse;
}

.slidev-layout th {
  color: var(--of-text);
  font-weight: 600;
  border-bottom: 2px solid var(--of-accent-purple);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.slidev-layout td {
  color: var(--of-text-secondary);
  border-bottom: 1px solid var(--of-divider);
  padding: 0.5rem 0.75rem;
}

/* ----------------------------------------------------------
   Cards (matching ODP card pattern: #eeeeee fill + #5d5dff stroke)
   ---------------------------------------------------------- */

.slidev-layout .card {
  background-color: var(--of-card-bg);
  border: 2px solid var(--of-card-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

/* ----------------------------------------------------------
   Wave Animation Keyframes
   Each pseudo-element is taller than the container and
   extends below it, so the bottom edge is never visible.
   Multi-stop 2D translate paths create organic side-to-side
   drift. Green and purple counter-phase at different speeds.
   ---------------------------------------------------------- */

@keyframes green-drift {
  0%   { transform: translate(0%, 0%) scale(1); }
  20%  { transform: translate(-6%, -1%) scale(1.02); }
  40%  { transform: translate(-12%, 0.5%) scale(1.01); }
  60%  { transform: translate(-4%, -0.5%) scale(1.03); }
  80%  { transform: translate(-10%, 0%) scale(1.01); }
  100% { transform: translate(0%, 0%) scale(1); }
}

@keyframes purple-drift {
  0%   { transform: translate(-15%, 0%) scale(1); }
  25%  { transform: translate(-8%, -1%) scale(1.02); }
  50%  { transform: translate(0%, 0.5%) scale(1.01); }
  75%  { transform: translate(-10%, -0.5%) scale(1.03); }
  100% { transform: translate(-15%, 0%) scale(1); }
}

@keyframes green-drift-prominent {
  0%   { transform: translate(0%, 0%) scale(1); }
  15%  { transform: translate(-8%, -1%) scale(1.03); }
  35%  { transform: translate(-16%, 0.5%) scale(1.01); }
  55%  { transform: translate(-5%, -1%) scale(1.04); }
  75%  { transform: translate(-14%, 0%) scale(1.02); }
  100% { transform: translate(0%, 0%) scale(1); }
}

@keyframes purple-drift-prominent {
  0%   { transform: translate(-15%, 0%) scale(1); }
  20%  { transform: translate(-6%, -1%) scale(1.03); }
  45%  { transform: translate(0%, 0.5%) scale(1.01); }
  70%  { transform: translate(-12%, -1%) scale(1.04); }
  100% { transform: translate(-15%, 0%) scale(1); }
}

/* ----------------------------------------------------------
   Wave Background Decoration
   Pseudo-elements are 130% wide x 120% tall, positioned so
   they overhang on the right and below. overflow:hidden on
   the parent clips them. No hard edges are ever visible
   because gradients fade to transparent well inside the
   element boundaries.
   ---------------------------------------------------------- */

.wave-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.wave-bg::before,
.wave-bg::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 0;
  width: 130%;
  height: 120%;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
  transform-origin: center bottom;
}

/* Green wave layer */
.wave-bg::before {
  background:
    radial-gradient(
      ellipse 80% 50% at 5% 85%,
      rgba(0, 200, 0, calc(0.55 * var(--of-wave-opacity))) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 40% at 25% 80%,
      rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 70% 35% at 75% 85%,
      rgba(0, 200, 0, calc(0.3 * var(--of-wave-opacity))) 0%,
      transparent 50%
    );
  animation: green-drift 8s ease-in-out infinite;
}

/* Blue/purple wave layer */
.wave-bg::after {
  background:
    radial-gradient(
      ellipse 70% 45% at 30% 85%,
      rgba(123, 123, 255, calc(0.55 * var(--of-wave-opacity))) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 80% 35% at 70% 85%,
      rgba(123, 123, 255, calc(0.45 * var(--of-wave-opacity))) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 30% at 50% 80%,
      rgba(123, 123, 255, calc(0.3 * var(--of-wave-opacity))) 0%,
      transparent 50%
    );
  animation: purple-drift 10s ease-in-out infinite;
}

/* Cover/section slides get more prominent waves with wider drift */
.wave-bg-prominent::before {
  background:
    radial-gradient(
      ellipse 90% 60% at 5% 85%,
      rgba(0, 200, 0, calc(0.7 * var(--of-wave-opacity))) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 50% at 30% 80%,
      rgba(0, 200, 0, calc(0.5 * var(--of-wave-opacity))) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 45% at 75% 85%,
      rgba(0, 200, 0, calc(0.4 * var(--of-wave-opacity))) 0%,
      transparent 55%
    );
  animation: green-drift-prominent 7s ease-in-out infinite;
}

.wave-bg-prominent::after {
  background:
    radial-gradient(
      ellipse 80% 55% at 25% 85%,
      rgba(123, 123, 255, calc(0.7 * var(--of-wave-opacity))) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 90% 45% at 65% 85%,
      rgba(123, 123, 255, calc(0.55 * var(--of-wave-opacity))) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 35% at 50% 80%,
      rgba(123, 123, 255, calc(0.4 * var(--of-wave-opacity))) 0%,
      transparent 50%
    );
  animation: purple-drift-prominent 9s ease-in-out infinite;
}

/* ----------------------------------------------------------
   Layout: Cover (maps to ODP TITLE master)
   Full-height centered content, prominent waves, no logo
   ---------------------------------------------------------- */

.slidev-layout.cover {
  @apply h-full grid;
  place-items: center;

  h1 {
    @apply text-5xl leading-tight;
  }

  h1 + p {
    @apply -mt-2 opacity-60 mb-4 text-xl;
    color: var(--of-text-secondary);
  }

  p + h2,
  ul + h2,
  table + h2 {
    @apply mt-10;
  }
}

/* ----------------------------------------------------------
   Layout: Default (maps to ODP TITLE_AND_BODY master)
   Title bar at top + body content area
   ---------------------------------------------------------- */

.slidev-layout.default {
  @apply h-full px-12 py-10;
  display: flex;
  flex-direction: column;

  h1 {
    @apply text-3xl mb-6 pb-2;
    border-bottom: 2px solid var(--of-divider);
  }

  .default-content {
    @apply flex-1;
  }
}

/* ----------------------------------------------------------
   Layout: Section (maps to ODP SECTION_HEADER master)
   Large centered text for section dividers
   ---------------------------------------------------------- */

.slidev-layout.section {
  @apply h-full grid;
  place-items: center;
  text-align: center;

  h1 {
    @apply text-5xl leading-tight;
  }

  p {
    @apply text-xl mt-4;
    color: var(--of-text-secondary);
  }
}

/* ----------------------------------------------------------
   Layout: Intro (introduction / about slide)
   ---------------------------------------------------------- */

.slidev-layout.intro {
  @apply h-full grid;
  place-items: center;

  h1 {
    @apply text-5xl leading-tight;
  }

  h1 + p {
    @apply -mt-2 opacity-60 mb-4 text-lg;
    color: var(--of-text-secondary);
  }

  p + h2,
  ul + h2,
  table + h2 {
    @apply mt-10;
  }
}

/* ----------------------------------------------------------
   Layout: Two Columns
   ---------------------------------------------------------- */

.slidev-layout.two-cols {
  @apply h-full px-12 py-10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 2rem;

  .two-cols-header {
    grid-column: 1 / -1;
  }

  h1 {
    @apply text-3xl mb-6 pb-2;
    border-bottom: 2px solid var(--of-divider);
    grid-column: 1 / -1;
  }
}

/* ----------------------------------------------------------
   Layout: Image Right / Image Left
   ---------------------------------------------------------- */

.slidev-layout.image-right,
.slidev-layout.image-left {
  @apply h-full;
  display: grid;
  grid-template-columns: 1fr 1fr;

  .content {
    @apply px-10 py-10 flex flex-col justify-center;
  }

  .image-container {
    @apply h-full w-full;
    background-size: cover;
    background-position: center;
  }

  h1 {
    @apply text-3xl mb-4;
  }
}

.slidev-layout.image-left {
  grid-template-columns: 1fr 1fr;

  .image-container {
    order: -1;
  }
}

/* ----------------------------------------------------------
   Layout: End (closing slide)
   ---------------------------------------------------------- */

.slidev-layout.end {
  @apply h-full grid;
  place-items: center;
  text-align: center;

  h1 {
    @apply text-4xl leading-tight mb-4;
  }

  p {
    @apply text-lg;
    color: var(--of-text-secondary);
  }
}

/* ----------------------------------------------------------
   List Styling (matching ODP bullet hierarchy)
   ---------------------------------------------------------- */

.slidev-layout ul {
  list-style: none;
  padding-left: 0;
}

.slidev-layout ul > li {
  position: relative;
  padding-left: 1.5em;
}

.slidev-layout ul > li::before {
  content: "\2022";
  position: absolute;
  left: 0.25em;
  color: var(--of-accent-purple);
  font-weight: bold;
}

.slidev-layout ul ul > li::before {
  content: "\2013";
  color: var(--of-text-muted);
}

.slidev-layout ol {
  padding-left: 1.5em;
}

.slidev-layout ol > li::marker {
  color: var(--of-accent-purple);
  font-weight: 600;
}