supergraphics.css

/* Generated by build-design-package.mjs - DO NOT EDIT BY HAND.
   Canon: shared/supergraphics.css (@mfb/shared) + token prelude from tokens.json. */
:root {
  --mfb-purple-300: #422C70;
  --mfb-purple-400: #2B1C58;
  --mfb-purple-200: #5E378E;
  --mfb-orange-300: #F7941F;
  --mfb-orange-400: #EF7B00;
  --mfb-orange-200: #FBB040;
  --mfb-black: #000000;
  --mfb-white: #FFFFFF;
  --mfb-gray-900: #25252B;
  --mfb-gray-800: #4F4F5D;
  --mfb-gray-700: #6C6C7D;
  --mfb-gray-600: #88889C;
  --mfb-gray-500: #ADADBE;
  --mfb-gray-400: #C0C0D0;
  --mfb-gray-300: #D8D8E7;
  --mfb-gray-200: #EAEAF4;
  --mfb-gray-100: #F3F3FA;
  --mfb-gradient: linear-gradient(135deg, #2B1C58 0%, #5E378E 100%);
}

/* MFB Supergraphics — Brand Visual Elements Layer */
/* Builds on brand.css variables. Prefix: sg- to avoid collisions. */

/* ═══════════════════════════════════════════════════════════════════
   PARALLELOGRAM FRAMES
   Brand book Rule 7 (p.30) — Skew always -13deg (left-to-right tilt),
   the same 13° angle as the MFB logo icon. Base height = 2x logo-icon
   height. Never alter angle. Vary scale. Never uniform spacing.
   ═══════════════════════════════════════════════════════════════════ */

.sg-para {
  transform: skewX(-13deg);
}
.sg-para-content {
  transform: skewX(13deg);
}

/* Photo frame — clips content into parallelogram shape */
.sg-para-frame {
  transform: skewX(-13deg);
  overflow: hidden;
  border-radius: 6px;
}
.sg-para-frame img,
.sg-para-frame .sg-photo-zone {
  transform: skewX(13deg) scale(1.12);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Decorative accent parallelograms (absolute positioned) */
.sg-para-accent {
  position: absolute;
  transform: skewX(-13deg);
  border-radius: 6px;
  pointer-events: none;
}
/* Solid palette fills only — Rule 3 bans opacity/rgba on brand shapes.
   The book's pattern pages layer solid lighter/darker tones of one hue. */
.sg-para-accent--purple-light {
  background: var(--mfb-purple-200);
}
.sg-para-accent--purple-dark {
  background: var(--mfb-purple-400);
}
.sg-para-accent--orange-light {
  background: var(--mfb-orange-200);
}
.sg-para-accent--white {
  background: var(--mfb-gray-400);
}

/* ═══════════════════════════════════════════════════════════════════
   SPOTLIGHTS & BOOKS — Brand book p.35 "Spotlights & Books Construction"
   Shared geometry vars. The 13° base angle (same as the logo icon) is
   written literally via CSS tan() so the book value lives in the code.
   --sg-aspect must be set to the container's W/H ratio for true angles
   (default 1.5 = 3:2).
   Rule 3: solid palette fills only — no opacity/rgba layering.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sg-angle-base: 13deg;  /* book-mandated base angle (= logo icon) */
  --sg-angle-alt: 24deg;   /* spotlight second cut — MUST differ from base */
  --sg-aspect: 1.5;        /* container width/height; override per usage */
  --sg-logo-icon-h: 40px;  /* logo icon height (= .sg-logo) — brand base unit */
  --sg-base-h: calc(2 * var(--sg-logo-icon-h)); /* Rules 6+7: base height = 2x logo icon */
}

.sg-spotlight {
  position: relative;
  overflow: hidden;
}

/* Purple spotlight — two solid beams, edges 13° / 24° from vertical.
   Horizontal run of a beam edge = tan(angle)/aspect (as % of width). */
.sg-spotlight--purple {
  background: var(--mfb-purple-400);
}
.sg-spotlight--purple::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--mfb-purple-300);
  clip-path: polygon(0 0, 66% 0,
    calc(66% - tan(var(--sg-angle-base)) / var(--sg-aspect) * 100%) 100%,
    0 100%);
  pointer-events: none;
}
.sg-spotlight--purple::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--mfb-purple-200);
  clip-path: polygon(0 0, 44% 0,
    calc(44% - tan(var(--sg-angle-alt)) / var(--sg-aspect) * 100%) 100%,
    0 100%);
  pointer-events: none;
}

/* Orange spotlight — same construction, warm palette */
.sg-spotlight--orange {
  background: var(--mfb-orange-400);
}
.sg-spotlight--orange::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--mfb-orange-300);
  clip-path: polygon(0 0, 66% 0,
    calc(66% - tan(var(--sg-angle-base)) / var(--sg-aspect) * 100%) 100%,
    0 100%);
  pointer-events: none;
}
.sg-spotlight--orange::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--mfb-orange-200);
  clip-path: polygon(0 0, 44% 0,
    calc(44% - tan(var(--sg-angle-alt)) / var(--sg-aspect) * 100%) 100%,
    0 100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SPOTLIGHT FRAME (image content frame)
   Per Brand Book Rule 5: spotlight = lifestyle / event / community /
   social-promotional content (NOT educational — that's parallelogram).
   Per Rule 6: "two diagonal cuts at different angles" creates the
   wedge shape. Logo B icon's 13° angle is the canonical tilt.
   Use:
     <div class="sg-spotlight-frame sg-spotlight-frame--purple">
       <img src="..."/>
     </div>
   Renders the image clipped into the spotlight wedge over a colored bg.
   ═══════════════════════════════════════════════════════════════════ */

.sg-spotlight-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: var(--sg-base-h);
  /* Spotlight wedge — Rule 6 (p.35): two diagonal cuts at DIFFERENT angles
     (24° top-left cut, 13° bottom-right cut), corner cuts as drawn in the
     book. Angle math: cut depth on an edge = tan(angle) * aspect * run. */
  --sg-wedge: polygon(
    0 calc(tan(var(--sg-angle-alt)) * var(--sg-aspect) * 50%),
    50% 0,
    100% 0,
    100% calc(100% - tan(var(--sg-angle-base)) * var(--sg-aspect) * 65%),
    35% 100%,
    0 100%
  );
}
.sg-spotlight-frame--purple { background: var(--mfb-purple-400, #2B1C58); }
.sg-spotlight-frame--orange { background: var(--mfb-orange-300, #F7941F); }
.sg-spotlight-frame--white  { background: var(--mfb-white, #FFFFFF); }

.sg-spotlight-frame > img,
.sg-spotlight-frame > .sg-photo-zone {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: var(--sg-wedge);
}

/* ═══════════════════════════════════════════════════════════════════
   BOOK PANEL — Brand book p.35: "two diagonal cuts with the SAME angle."
   Stable, structured, stackable — distinct from the Spotlight (different
   angles). Both cuts run at the 13° base angle, so the cut edges are
   parallel. Base height = 2x logo icon (--sg-base-h).
   ═══════════════════════════════════════════════════════════════════ */

.sg-book-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: var(--sg-base-h);
  --sg-book-cut: polygon(
    0 calc(tan(var(--sg-angle-base)) * var(--sg-aspect) * 60%),
    60% 0,
    100% 0,
    100% calc(100% - tan(var(--sg-angle-base)) * var(--sg-aspect) * 60%),
    40% 100%,
    0 100%
  );
}
.sg-book-frame--purple { background: var(--mfb-purple-400, #2B1C58); }
.sg-book-frame--orange { background: var(--mfb-orange-300, #F7941F); }
.sg-book-frame--white  { background: var(--mfb-white, #FFFFFF); }

.sg-book-frame > img,
.sg-book-frame > .sg-photo-zone {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: var(--sg-book-cut);
}

/* Solid book band (no photo) — for Book Patterns */
.sg-book {
  clip-path: polygon(
    0 calc(tan(var(--sg-angle-base)) * var(--sg-aspect) * 60%),
    60% 0,
    100% 0,
    100% calc(100% - tan(var(--sg-angle-base)) * var(--sg-aspect) * 60%),
    40% 100%,
    0 100%
  );
  background: var(--mfb-purple-300);
}

/* Book Pattern (p.35) — books stacked vertically at VARYING heights.
   Callers set per-child heights; defaults give the book's varied rhythm. */
.sg-book-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-book-stack > .sg-book { height: var(--sg-base-h); }
.sg-book-stack > .sg-book:nth-child(2n) { height: calc(var(--sg-base-h) * 0.65); }
.sg-book-stack > .sg-book:nth-child(3n) { height: calc(var(--sg-base-h) * 1.3); }

/* ═══════════════════════════════════════════════════════════════════
   HALFTONE CUTOUT (portrait inside spotlight + halftone treatment)
   Per Brand Book Rule 4: photos go INSIDE spotlight (or parallelogram)
   frames, halftone-treated. Cutout portraits use highlights #F7E6FF and
   shadows #45265B — book-specified standalone values, NOT palette tokens
   (they are not purple-200/purple-400; do not "correct" them to tokens).

   Construction (exact book colors, layered blend):
     ::before  — solid #45265B underlay (screen-blend floor = shadows)
     img       — grayscale, mix-blend-mode: screen over the underlay
     ::after   — #F7E6FF field + #45265B dot grid, multiply (= highlight
                 cap + newspaper-dot texture; Rule 4 forbids smooth duotone)
   All three layers share the spotlight wedge clip.
   Use:
     <div class="sg-halftone-cutout">
       <img src="<portrait>"/>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

.sg-halftone-cutout {
  position: relative;
  overflow: hidden;
  /* Rule 4: cutouts sit on purple-300 or orange-300 */
  background: var(--mfb-purple-300, #422C70);
  isolation: isolate;
  --sg-wedge: polygon(
    0 calc(tan(var(--sg-angle-alt)) * var(--sg-aspect) * 50%),
    50% 0,
    100% 0,
    100% calc(100% - tan(var(--sg-angle-base)) * var(--sg-aspect) * 65%),
    35% 100%,
    0 100%
  );
}
.sg-halftone-cutout--orange-bg { background: var(--mfb-orange-300, #F7941F); }
.sg-halftone-cutout--deep-bg { background: var(--mfb-purple-400, #2B1C58); }
/* legacy alias (was mislabeled "purple-light"); kept for consumers */
.sg-halftone-cutout--purple-light-bg { background: var(--mfb-purple-300, #422C70); }

.sg-halftone-cutout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #45265B; /* book-specified shadow value (not a palette token) */
  clip-path: var(--sg-wedge);
}

.sg-halftone-cutout > img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: var(--sg-wedge);
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: screen; /* blacks fall to the #45265B floor below */
}

.sg-halftone-cutout::after {
  content: '';
  position: absolute;
  inset: 0;
  /* highlight cap + dot texture: whites multiply down to #F7E6FF,
     dot grid adds the newspaper-print texture (Halftone Scale ~2.5) */
  background-color: #F7E6FF; /* book-specified highlight value */
  background-image: radial-gradient(circle, #45265B 0.8px, transparent 1px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
  clip-path: var(--sg-wedge);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   COLOR BLOCKS
   Solid backgrounds and split-tone compositions.
   ═══════════════════════════════════════════════════════════════════ */

.sg-bg-purple  { background: var(--mfb-purple-400); color: var(--mfb-white); }
.sg-bg-orange  { background: var(--mfb-orange-300); color: var(--mfb-white); }
.sg-bg-gray    { background: var(--mfb-gray-200);   color: var(--mfb-gray-900); }
.sg-bg-white   { background: var(--mfb-white);      color: var(--mfb-gray-900); }
.sg-bg-gradient { background: var(--mfb-gradient);  color: var(--mfb-white); }

/* ═══════════════════════════════════════════════════════════════════
   EVENT INFO BAR
   Consistent bottom bar: bold orange date left, location right.
   Thin orange border-top separator.
   ═══════════════════════════════════════════════════════════════════ */

.sg-info-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px 48px;
  font-family: 'IBM Plex Sans', sans-serif;
  border-top: 3px solid var(--mfb-orange-300);
  z-index: 10;
}
/* Solid fills — Rule 3 bans translucent brand fills */
.sg-info-bar--on-dark {
  color: var(--mfb-white);
  background: var(--mfb-purple-400);
}
.sg-info-bar--on-light {
  color: var(--mfb-gray-900);
  background: var(--mfb-white);
}
.sg-info-bar__date {
  font-size: 32px;
  font-weight: 600; /* book allows max 600 */
  color: var(--mfb-orange-300);
  line-height: 1.1;
}
.sg-info-bar__date small {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: inherit;
  opacity: 0.75;
  margin-top: 2px;
}
.sg-info-bar__location {
  text-align: right;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════
   PHOTO ZONE — placeholder for future photo integration
   ═══════════════════════════════════════════════════════════════════ */

.sg-photo-zone {
  background: linear-gradient(135deg, var(--mfb-purple-300), var(--mfb-purple-200));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
   Large-format typography for social graphics.
   ═══════════════════════════════════════════════════════════════════ */

.sg-headline {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em; /* book heading tracking */
}
.sg-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  line-height: 1.2; /* book specimen body LH */
}
.sg-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  /* no text-transform — brand book p.26 forbids uppercase */
  letter-spacing: 1.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGO POSITIONING
   ═══════════════════════════════════════════════════════════════════ */

.sg-logo {
  position: absolute;
  z-index: 10;
  height: 40px;
  width: auto;
}
.sg-logo--top-left { top: 40px; left: 44px; }
.sg-logo--top-right { top: 40px; right: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   CTA BUTTON
   ═══════════════════════════════════════════════════════════════════ */

.sg-cta {
  display: inline-block;
  background: var(--mfb-orange-300);
  color: var(--mfb-white);
  padding: 14px 40px;
  border-radius: 40px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  /* no text-transform — brand book p.26 forbids uppercase */
  letter-spacing: 1px;
}
/* CTA on orange backgrounds — use white/purple instead */
.sg-cta--on-orange {
  background: var(--mfb-white);
  color: var(--mfb-purple-400);
}

/* ═══════════════════════════════════════════════════════════════════
   HIGHLIGHTER VARIANT — for orange backgrounds where default is invisible
   ═══════════════════════════════════════════════════════════════════ */

.sg-spotlight--orange .highlighter {
  background-image: linear-gradient(transparent 80%, var(--mfb-white) 80%);
  color: var(--mfb-white);
}
.sg-bg-orange .highlighter {
  background-image: linear-gradient(transparent 80%, var(--mfb-white) 80%);
  color: var(--mfb-white);
}

/* ═══════════════════════════════════════════════════════════════════
   COVER — Brand book Rule 8 (cover master):
   solid flat fill, tiny logo in the top corner, short Title-Case title
   near the bottom, left-aligned. Optional 6px orange top rule.
   Use:
     <div class="sg-cover sg-cover--rule" style="width:...;height:...">
       <img class="sg-cover__logo" src="<logo white svg>"/>
       <h1 class="sg-cover__title">Education That Empowers</h1>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

.sg-cover {
  position: relative;
  overflow: hidden;
  background: var(--mfb-purple-300);
  color: var(--mfb-white);
}
.sg-cover--orange { background: var(--mfb-orange-300); }
.sg-cover--deep { background: var(--mfb-purple-400); }
.sg-cover--rule { border-top: 6px solid var(--mfb-orange-300); }

.sg-cover__logo {
  position: absolute;
  top: 40px;
  left: 44px;
  height: var(--sg-logo-icon-h);
  width: auto;
}
.sg-cover__title {
  position: absolute;
  bottom: 44px;
  left: 44px;
  right: 18%;
  margin: 0;
  color: inherit; /* beat brand.css h1 color */
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: var(--mfb-font-h2, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* Title Case, short — no text-transform (p.26 forbids uppercase) */
}

/* ═══════════════════════════════════════════════════════════════════
   PARALLELOGRAM PATTERN — Brand book p.30 "Parallelogram Patterns":
   horizontal rows of parallelograms; small positional offsets between
   rows create rhythm; rows may scale progressively; staggered/irregular
   layouts allowed. Spacing must NOT be uniform.
   Use:
     <div class="sg-para-pattern">
       <div class="sg-para-pattern__row">
         <div class="sg-para" style="width:80px"></div>
         <div class="sg-para" style="width:140px"></div>
         ...
       </div>
       <div class="sg-para-pattern__row">...</div>
     </div>
   Children default to solid brand fills; override background per child.
   ═══════════════════════════════════════════════════════════════════ */

.sg-para-pattern {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.sg-para-pattern__row {
  display: flex;
  align-items: stretch;
  height: var(--sg-base-h);
}
.sg-para-pattern__row > .sg-para {
  background: var(--mfb-purple-200);
  margin-right: 18px;
}
/* non-uniform spacing + positional offsets between rows (book: "small
   positional offsets ... create visual rhythm") */
.sg-para-pattern__row > .sg-para:nth-child(2n) { margin-right: 34px; }
.sg-para-pattern__row > .sg-para:nth-child(3n) { margin-right: 10px; }
.sg-para-pattern__row:nth-child(2n) { margin-left: 26px; }
.sg-para-pattern__row:nth-child(3n) { margin-left: 52px; }
/* progressive scale option (book: "rows can scale progressively") */
.sg-para-pattern--progressive .sg-para-pattern__row:nth-child(2) { height: calc(var(--sg-base-h) * 1.25); }
.sg-para-pattern--progressive .sg-para-pattern__row:nth-child(3) { height: calc(var(--sg-base-h) * 1.55); }