/* ============================================================ * v2.css — Lemma v2 tokens, mirroring getcracked.io exactly. * * Token values lifted from the live cracked stylesheet so any * `bg-bg-primary` / `text-text-secondary` / `border-border-primary` * arbitrary-value Tailwind class resolves identically to the * reference. * * Scoped to [data-skin="v2"]. Wrap any v2 surface in *
to activate. * ============================================================ */ [data-skin="v2"] { /* Light-mode tokens (default). Dark variant overrides below. */ --bg-primary: 255 255 255; /* #fff */ --bg-secondary: 245 245 245; /* #f5f5f5 */ --bg-tertiary: 229 229 229; /* #e5e5e5 */ --text-primary: 10 10 10; /* #0a0a0a */ --text-secondary: 115 115 115; /* #737373 */ --text-tertiary: 161 161 161; /* #a1a1a1 */ --border-primary: 229 229 229; /* #e5e5e5 */ --border-secondary: 212 212 212; /* #d4d4d4 */ --foreground: 10 10 10; --primary: 23 23 23; /* #171717 */ --accent: 245 245 245; /* #f5f5f5 */ --card: 255 255 255; --ring: 161 161 161; --success: 36 197 95; /* #24c55f */ --destructive: 228 0 20; /* #e40014 */ --warning: 228 158 33; /* #e49e21 */ --platinum: 98 99 102; /* #626366 */ --platinum-sheen: 157 158 160; /* #9d9ea0 */ --platinum-light: 127 128 131; /* #7f8083 */ --platinum-border: 98 99 102; /* with /25 opacity in CSS */ --platinum-grid-line: 34 34 34; /* with /10 opacity in CSS */ --platinum-btn-bg: 26 26 28; /* #1a1a1c — primary CTA bg */ --platinum-btn-bg-hover: 45 46 48;/* #2d2e30 */ --platinum-btn-text: 228 228 231; /* #e4e4e7 — primary CTA text */ } /* ============================================================ * Dark mode — activated by setting `data-theme="dark"` anywhere * up the tree (root is recommended). Token names stay the * same so component code doesn't have to branch. * ============================================================ */ [data-theme="dark"][data-skin="v2"], [data-theme="dark"] [data-skin="v2"] { --bg-primary: 10 10 10; /* #0a0a0a */ --bg-secondary: 23 23 23; /* #171717 */ --bg-tertiary: 38 38 38; /* #262626 */ --text-primary: 250 250 250; /* #fafafa */ --text-secondary: 161 161 161; /* #a1a1a1 */ --text-tertiary: 115 115 115; /* #737373 */ --border-primary: 38 38 38; /* #262626 */ --border-secondary: 82 82 82; /* #525252 */ --foreground: 250 250 250; --primary: 250 250 250; --accent: 38 38 38; --card: 23 23 23; --ring: 115 115 115; --platinum-btn-bg: 50 51 53; /* #323335 */ --platinum-btn-bg-hover: 71 72 74;/* #47484a */ --platinum-btn-text: 214 215 217; /* #d6d7d9 */ } [data-skin="v2"] { --radius: 0.625rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --motion-fast: 120ms; --motion-med: 200ms; --motion-slow: 320ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Legacy aliases so old v2 components that referenced `var(--bg)` / `var(--text)` / `var(--border)` etc. still work. */ --bg: var(--bg-primary); --bg-elev: var(--bg-primary); --bg-muted: var(--bg-secondary); --text: var(--text-primary); --text-muted: var(--text-secondary); --text-faint: var(--text-tertiary); --border: var(--border-primary); --border-strong: var(--border-secondary); --accent-hover: var(--platinum-btn-bg-hover); --accent-soft: var(--bg-secondary); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1); font-family: 'Geist Sans', 'Geist', system-ui, -apple-system, sans-serif; background-color: rgb(var(--bg-primary)); color: rgb(var(--text-primary)); font-feature-settings: 'cv11'; } /* ============================================================ * Typography utilities — the three cracked.io text classes. * Sizes follow Tailwind 4's text-Nxl scale exactly. * ============================================================ */ [data-skin="v2"] .header-text { font-family: 'Geist Sans', 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 2.25rem; /* text-4xl */ line-height: 1.1; letter-spacing: -0.025em; /* tracking-tight */ color: rgb(var(--text-primary)); text-wrap: balance; } @media (min-width: 40rem) { [data-skin="v2"] .header-text { font-size: 3rem; /* text-5xl */ line-height: 1.1; } } @media (min-width: 64rem) { [data-skin="v2"] .header-text { font-size: 3.75rem; /* text-6xl */ line-height: 1.05; } } [data-skin="v2"] .secondary-text { font-family: 'Geist Sans', 'Geist', system-ui, sans-serif; font-size: 0.875rem; /* text-sm */ line-height: 1.5; color: rgb(var(--text-secondary)); text-wrap: balance; } [data-skin="v2"] .normal-text { font-family: 'Geist Sans', 'Geist', system-ui, sans-serif; font-size: 0.875rem; /* text-sm */ line-height: 1.6; color: rgb(var(--text-primary)); text-wrap: balance; } [data-skin="v2"] .v2-mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; font-feature-settings: 'ss01', 'ss02'; } /* ============================================================ * Inline code — `` inside prose, KaTeX, etc. Subtle bg * pill so it reads as a token without screaming. * ============================================================ */ /* ============================================================ * Glassy surfaces — used on the sticky top-bar pill and on * dropdown panels. Replicates the platinum frosted-glass look. * ============================================================ */ [data-skin="v2"] .v2-glass { backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); background-color: rgb(var(--bg-primary) / 0.72); } [data-theme="dark"] [data-skin="v2"] .v2-glass { background-color: rgb(var(--bg-primary) / 0.6); } [data-skin="v2"] .v2-glass-strong { backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); background-color: rgb(var(--bg-tertiary) / 0.78); border: 1px solid rgb(var(--border-primary)); box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16); } [data-theme="dark"] [data-skin="v2"] .v2-glass-strong { background-color: rgb(var(--bg-tertiary) / 0.7); box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.4); } /* ============================================================ * University logo treatment. * * Light mode: monochrome-on-paper, lightly faded so the wall of * logos doesn't fight the rest of the page. * * Dark mode: invert + grayscale + small brightness lift so dark-ink * marks remain legible against the dark canvas (otherwise the SVG/PNG * crests render as solid black blocks on a near-black background). * ============================================================ */ [data-skin="v2"] .v2-uni-logo { filter: grayscale(1) contrast(0.95); opacity: 0.78; } [data-theme="dark"] [data-skin="v2"] .v2-uni-logo { filter: grayscale(1) invert(1) brightness(0.92) contrast(0.95); opacity: 0.85; mix-blend-mode: normal !important; } /* ============================================================ * Dropdown / menu items — the cracked menu pattern. * ============================================================ */ [data-skin="v2"] .v2-menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: rgb(var(--text-primary)); cursor: pointer; user-select: none; outline: none; transition: background-color 120ms var(--ease), color 120ms var(--ease); text-align: left; background: transparent; border: none; } [data-skin="v2"] .v2-menu-item:hover, [data-skin="v2"] .v2-menu-item:focus-visible { background-color: rgb(var(--bg-tertiary)); color: rgb(var(--text-primary)); } [data-skin="v2"] .v2-menu-item[data-muted="true"] { color: rgb(var(--text-tertiary)); } [data-skin="v2"] code, [data-skin="v2"] .v2-inline-code { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.9em; padding: 0.12em 0.45em; border-radius: 6px; background-color: rgb(var(--bg-secondary)); color: rgb(var(--text-primary)); border: 1px solid rgb(var(--border-primary)); font-feature-settings: 'ss01'; white-space: nowrap; } /* `
` blocks shouldn't get the inline pill — they have their own card. */
[data-skin="v2"] pre code,
[data-skin="v2"] pre .v2-inline-code {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* Force Geist Sans on body text inside the v2 subtree. v1 page
 * components routed into v2 chrome would otherwise inherit Lemma Sans /
 * Inter from --font-body. */
[data-skin="v2"],
[data-skin="v2"] body,
[data-skin="v2"] input,
[data-skin="v2"] textarea,
[data-skin="v2"] select,
[data-skin="v2"] button {
  font-family: 'Geist Sans', 'Geist', system-ui, -apple-system, sans-serif;
}

/* ============================================================
 * Base resets for [data-skin="v2"] subtree.
 * ============================================================ */

[data-skin="v2"] a {
  color: inherit;
  text-decoration: none;
}

[data-skin="v2"] *,
[data-skin="v2"] *::before,
[data-skin="v2"] *::after {
  border-color: rgb(var(--border-primary));
}

[data-skin="v2"] table {
  border-collapse: collapse;
}

[data-skin="v2"] tr {
  border-color: rgb(var(--border-primary));
}

/* ============================================================
 * Motion.
 * ============================================================ */

@keyframes v2-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v2-hero-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes v2-fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v2-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes v2-bar-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes v2-type-in {
  from {
    opacity: 0;
    transform-origin: left;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform-origin: left;
    transform: scaleX(1);
  }
}

@keyframes v2-blink {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes v2-pulse-soft {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

[data-skin="v2"] .v2-enter {
  animation: v2-fade-up var(--motion-slow) var(--ease) both;
}

[data-skin="v2"] .v2-hero-in {
  animation: v2-hero-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[data-skin="v2"] .v2-hero-in[data-delay="1"] {
  animation-delay: 100ms;
}
[data-skin="v2"] .v2-hero-in[data-delay="2"] {
  animation-delay: 200ms;
}
[data-skin="v2"] .v2-hero-in[data-delay="3"] {
  animation-delay: 300ms;
}
[data-skin="v2"] .v2-hero-in[data-delay="4"] {
  animation-delay: 400ms;
}

[data-skin="v2"] .v2-fade-slide {
  animation: v2-fade-slide-in 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[data-skin="v2"] .v2-draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: v2-draw 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

[data-skin="v2"] .v2-bar-rise {
  transform-origin: bottom;
  animation: v2-bar-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[data-skin="v2"] .v2-type-in {
  animation: v2-type-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[data-skin="v2"] .v2-blink {
  animation: v2-blink 1.2s ease-in-out infinite;
}

[data-skin="v2"] .v2-pulse-soft {
  animation: v2-pulse-soft 3s ease-in-out infinite;
}

/* Continuous, looping bar-chart ripple — used in the "where you stand" cell. */
@keyframes v2-bar-ripple {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.78);
  }
}

[data-skin="v2"] .v2-bar-ripple {
  transform-origin: bottom;
  animation: v2-bar-ripple 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="v2"] .v2-enter,
  [data-skin="v2"] .v2-hero-in,
  [data-skin="v2"] .v2-fade-slide,
  [data-skin="v2"] .v2-draw,
  [data-skin="v2"] .v2-bar-rise,
  [data-skin="v2"] .v2-type-in,
  [data-skin="v2"] .v2-blink,
  [data-skin="v2"] .v2-pulse-soft,
  [data-skin="v2"] .v2-bar-ripple {
    animation: none !important;
  }
}

/* ============================================================
 * Decorative platinum grid + soft fade mask.
 * ============================================================ */

[data-skin="v2"] .platinum-grid {
  background-image:
    linear-gradient(rgb(var(--platinum-grid-line) / 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--platinum-grid-line) / 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

[data-skin="v2"] .platinum-fade {
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ============================================================
 * Article body markdown — Theory pages + IDE Editorial tab.
 *
 * The markdown renderer emits raw h1/h2/h3/p elements; without
 * explicit font-family they inherit whichever sans font the browser
 * picked last (often Lemma Sans, not Geist). Force Geist on every
 * heading inside .v2-article-body so admissions + quant theory pages
 * agree typographically.
 * ============================================================ */
[data-skin="v2"] .v2-article-body h1,
[data-skin="v2"] .v2-article-body h2,
[data-skin="v2"] .v2-article-body h3,
[data-skin="v2"] .v2-article-body h4 {
  font-family: 'Geist Sans', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgb(var(--text-primary));
}
[data-skin="v2"] .v2-article-body h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
[data-skin="v2"] .v2-article-body h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  border-top: 1px solid rgb(var(--border-primary));
  padding-top: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
[data-skin="v2"] .v2-article-body h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
[data-skin="v2"] .v2-article-body h3 {
  font-size: 1.125rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
[data-skin="v2"] .v2-article-body p {
  font-size: 0.9375rem;
  line-height: 1.75;
  margin-bottom: 1rem;
  color: rgb(var(--text-primary));
}
[data-skin="v2"] .v2-article-body ul,
[data-skin="v2"] .v2-article-body ol {
  font-size: 0.9375rem;
  line-height: 1.75;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
[data-skin="v2"] .v2-article-body li {
  margin-bottom: 0.25rem;
}
[data-skin="v2"] .v2-article-body blockquote {
  border-left: 3px solid rgb(var(--border-primary));
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 1.5rem 0;
  color: rgb(var(--text-secondary));
  font-style: italic;
}

/* ============================================================
 * Comments — thread connectors, avatars, and rows. Mirrors
 * getcracked.io's comment chrome. Scoped to the v2 skin so v1
 * surfaces remain untouched.
 * ============================================================ */

/* Vertical connector line through the avatar column, drawn down
 * to the bottom of the wrapper so children threads stay visually
 * linked to their parent. Cracked uses `bg-border-secondary` but
 * Lemma reserves that token for stronger separators — we use a
 * 60% alpha of `--border-primary` for the resting state and
 * `--border-secondary` on hover. */
[data-skin="v2"] .v2-comment-line {
  background-color: rgb(var(--border-primary) / 0.6);
}

[data-skin="v2"] .group\/comment:hover .v2-comment-line {
  background-color: rgb(var(--border-secondary));
}

/* Corner bend where a reply joins its parent's vertical line. */
[data-skin="v2"] .v2-comment-corner {
  border-color: rgb(var(--border-primary) / 0.6);
}

[data-skin="v2"] .group\/comment:hover .v2-comment-corner {
  border-color: rgb(var(--border-secondary));
}

/* Indent nested replies so each reply's avatar sits roughly under
 * its parent's avatar center, letting the corner-bend connect. */
[data-skin="v2"] .v2-comment-children {
  padding-left: 32px;
}

[data-skin="v2"] .v2-comment-row .v2-comment-row .v2-comment-children {
  padding-left: 28px;
}

[data-skin="v2"] .v2-comment-row .v2-comment-row .v2-comment-row .v2-comment-children {
  padding-left: 24px;
}

/* Avatar — neutral monogram pill, used when we don't have a
 * real profile image to render. */
[data-skin="v2"] .v2-comment-avatar {
  font-family: 'Geist Sans', 'Geist', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

/* LatexRenderer emits raw 
 tags inside the body. Tighten the
 * vertical rhythm so the comment reads as a single prose block. */
[data-skin="v2"] .v2-comment-row p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

[data-skin="v2"] .v2-comment-row p:last-child {
  margin-bottom: 0;
}