/*
* Lewis-Linear Design System
* Derived from Linear.app design tokens and components
* Version: 1.0.0
*/
/* =============================================================================
DESIGN TOKENS
============================================================================= */
:root {
/* Layout & Containers */
--ll-page-max-width: 1024px;
--ll-prose-max-width: 624px;
--ll-page-padding-inline: 24px;
--ll-page-padding-block: 64px;
--ll-header-height: 64px;
/* Color Tokens - Dark Theme (Default) */
--ll-bg-primary: var(--color-woodsmoke);
--ll-bg-primary-rgb: 8, 9, 10;
--ll-bg-secondary: #1c1c1f;
--ll-bg-secondary-rgb: 28, 28, 31;
--ll-bg-tertiary: #232326;
--ll-bg-quaternary: #28282c;
--ll-bg-glass: hsla(0, 0%, 100%, 0.05);
--ll-text-primary: #f7f8f8;
--ll-text-secondary: #d0d6e0;
--ll-text-tertiary: #8a8f98;
--ll-text-quaternary: #62666d;
--ll-border-primary: #23252a;
--ll-border-secondary: #34343a;
--ll-border-tertiary: #3e3e44;
--ll-border-glass: hsla(0, 0%, 100%, 0.05);
--ll-accent: #7170ff;
--ll-accent-rgb: 113, 112, 255;
--ll-accent-hover: #828fff;
--ll-accent-tint: #18182f;
--ll-link-primary: #828fff;
--ll-link-hover: var(--color-white);
--ll-brand-bg: #5e6ad2;
--ll-brand-text: var(--color-white);
/* Color Tokens - Semantic */
--ll-color-blue: #4ea7fc;
--ll-color-red: #eb5757;
--ll-color-green: #4cb782;
--ll-color-orange: #fc7840;
--ll-color-yellow: #f2c94c;
--ll-color-indigo: #5e6ad2;
/* Typography - Font Families */
--ll-font-sans: "InterVariable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
--ll-font-mono: "Berkeley Mono", ui-monospace, "SF Mono", "Menlo", monospace;
/* Typography - Font Weights */
--ll-weight-light: 300;
--ll-weight-normal: 400;
--ll-weight-medium: 510;
--ll-weight-semibold: 590;
--ll-weight-bold: 680;
/* Typography - Font Sizes */
--ll-text-micro: 0.75rem; /* 12px */
--ll-text-mini: 0.8125rem; /* 13px */
--ll-text-sm: 0.875rem; /* 14px */
--ll-text-base: 0.9375rem; /* 15px */
--ll-text-lg: 1.0625rem; /* 17px */
--ll-text-xl: 1.3125rem; /* 21px */
--ll-text-2xl: 1.5rem; /* 24px */
--ll-text-3xl: 2rem; /* 32px */
--ll-text-4xl: 2.5rem; /* 40px */
--ll-text-5xl: 3rem; /* 48px */
--ll-text-6xl: 3.5rem; /* 56px */
--ll-text-7xl: 4rem; /* 64px */
--ll-text-8xl: 4.5rem; /* 72px */
/* Typography - Line Heights */
--ll-lh-tight: 1.1;
--ll-lh-snug: 1.2;
--ll-lh-normal: 1.5;
--ll-lh-relaxed: 1.6;
/* Typography - Letter Spacing */
--ll-ls-tighter: -0.022em;
--ll-ls-tight: -0.012em;
--ll-ls-normal: -0.011em;
--ll-ls-wide: 0;
/* Spacing Scale (8px grid) */
--ll-space-1: 4px;
--ll-space-2: 8px;
--ll-space-3: 12px;
--ll-space-4: 16px;
--ll-space-5: 24px;
--ll-space-6: 32px;
--ll-space-7: 48px;
--ll-space-8: 64px;
--ll-space-9: 96px;
--ll-space-10: 128px;
/* Radius Scale */
--ll-radius-sm: 4px;
--ll-radius: 6px;
--ll-radius-md: 8px;
--ll-radius-lg: 12px;
--ll-radius-xl: 16px;
--ll-radius-2xl: 24px;
--ll-radius-3xl: 32px;
--ll-radius-full: 9999px;
/* Shadow/Elevation Scale */
--ll-shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
--ll-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);
--ll-shadow-lg: 0px 7px 32px rgba(0, 0, 0, 0.35);
--ll-shadow-stack:
0px 8px 2px 0px transparent,
0px 5px 2px 0px rgba(0, 0, 0, 0.01),
0px 3px 2px 0px rgba(0, 0, 0, 0.04),
0px 1px 1px 0px rgba(0, 0, 0, 0.07),
0px 0px 1px 0px rgba(0, 0, 0, 0.08);
/* Motion */
--ll-duration-fast: 0.1s;
--ll-duration: 0.25s;
--ll-duration-slow: 0.35s;
--ll-ease-linear: linear;
--ll-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ll-ease-out-strong: cubic-bezier(0.215, 0.61, 0.355, 1);
--ll-ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
/* Focus Ring */
--ll-focus-ring-color: var(--ll-color-indigo);
--ll-focus-ring-width: 2px;
--ll-focus-ring-offset: 2px;
/* Z-Index Scale */
--ll-z-base: 1;
--ll-z-elevated: 10;
--ll-z-sticky: 100;
--ll-z-overlay: 500;
--ll-z-modal: 1000;
--ll-z-max: 9999;
}
/* Light Theme Override */
[data-theme="light"] {
--ll-bg-primary: var(--color-white);
--ll-bg-primary-rgb: 255, 255, 255;
--ll-bg-secondary: #f9f8f9;
--ll-bg-secondary-rgb: 249, 248, 249;
--ll-bg-tertiary: #f4f2f4;
--ll-bg-quaternary: #eeedef;
--ll-bg-glass: rgba(0, 0, 0, 0.02);
--ll-text-primary: #282a30;
--ll-text-secondary: var(--color-mako);
--ll-text-tertiary: #6f6e77;
--ll-text-quaternary: #86848d;
--ll-border-primary: #e9e8ea;
--ll-border-secondary: #e4e2e4;
--ll-border-tertiary: #dcdbdd;
--ll-border-glass: rgba(0, 0, 0, 0.05);
--ll-accent: #7170ff;
--ll-accent-rgb: 113, 112, 255;
--ll-accent-hover: #8989f0;
--ll-accent-tint: #f1f1ff;
--ll-link-primary: #7070ff;
--ll-link-hover: var(--ll-text-primary);
--ll-shadow-sm: 0px 1px 4px -1px rgba(0, 0, 0, 0.09);
--ll-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
--ll-shadow-lg: 0px 7px 24px rgba(0, 0, 0, 0.06);
}
/* =============================================================================
FONT LOADING
============================================================================= */
@font-face {
font-family: "InterVariable";
src: url("../fonts/SuisseIntl-Regular.otf") format("opentype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* =============================================================================
BASE STYLES
============================================================================= */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-family: var(--ll-font-sans);
font-size: 100%;
font-weight: var(--ll-weight-normal);
scroll-behavior: smooth;
scroll-padding-top: calc(var(--ll-header-height) + 36px);
scroll-padding-bottom: 32px;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: var(--ll-bg-primary);
color: var(--ll-text-primary);
line-height: var(--ll-lh-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "cv01", "ss03";
overflow-x: hidden;
}
/* Focus Management */
*:focus {
outline: none;
}
*:focus-visible {
outline: var(--ll-focus-ring-width) solid var(--ll-focus-ring-color);
outline-offset: var(--ll-focus-ring-offset);
}
/* Selection */
::selection {
background: var(--ll-accent-tint);
color: var(--ll-text-primary);
}
/* =============================================================================
LAYOUT COMPONENTS
============================================================================= */
/* Core Container System - Hard Rebuild */
.ll-container {
max-width: var(--ll-prose-max-width, 72rem);
margin-inline: auto;
padding-inline: var(--ll-space-4);
}
.ll-container-wide {
max-width: var(--ll-container-wide, 96rem);
margin-inline: auto;
padding-inline: var(--ll-space-4);
}
/* Article Layout */
.ll-article {
overflow: visible;
}
/* Article Grid Layout with Sidebar */
.ll-article-grid {
display: block;
max-width: var(--ll-container-wide, 96rem);
margin-inline: auto;
padding-inline: var(--ll-space-4);
position: relative;
}
.ll-prose {
max-width: var(--ll-prose-max-width, 72rem);
margin-inline: auto;
overflow: visible;
}
/* Legacy prose container - maps to new system */
.ll-prose-container {
max-width: var(--ll-prose-max-width, 72rem);
margin-inline: auto;
padding-inline: var(--ll-space-4);
overflow: visible;
}
/* Sticky Header Component */
.ll-section {
padding-block: var(--ll-space-2);
position: sticky;
top: 0;
z-index: 1000;
background: rgba(var(--ll-bg-primary-rgb, 255, 255, 255), 0.95);
border-bottom: 1px solid var(--ll-border-primary);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
/* Dark theme header background */
[data-theme="dark"] .ll-section {
background: rgba(var(--ll-bg-primary-rgb, 0, 0, 0), 0.95);
}
/* Navigation styling */
.ll-navbar {
font-size: var(--ll-text-sm);
display: flex;
align-items: center;
}
.ll-navbar a {
color: var(--ll-text-primary);
}
.ll-prose-container {
max-width: var(--ll-prose-max-width);
margin-inline: auto;
padding-inline: var(--ll-page-padding-inline);
}
.ll-section + .ll-section {
border-top: 1px solid var(--ll-border-primary);
}
/* Grid System */
.ll-grid {
display: grid;
gap: var(--ll-space-4);
}
.ll-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.ll-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.ll-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.ll-grid--2,
.ll-grid--3,
.ll-grid--4 {
grid-template-columns: 1fr;
}
}
/* =============================================================================
TYPOGRAPHY COMPONENTS
============================================================================= */
/* Headings */
.ll-h1, h1.ll-heading {
font-size: var(--ll-text-5xl);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-tight);
letter-spacing: var(--ll-ls-tighter);
color: var(--ll-text-primary);
margin: 0;
}
.ll-h2, h2.ll-heading {
font-size: var(--ll-text-3xl);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-snug);
letter-spacing: var(--ll-ls-tight);
color: var(--ll-text-primary);
margin: 0;
}
.ll-h3, h3.ll-heading {
font-size: var(--ll-text-2xl);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-snug);
letter-spacing: var(--ll-ls-tight);
color: var(--ll-text-primary);
margin: 0;
}
.ll-h4, h4.ll-heading {
font-size: var(--ll-text-xl);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-snug);
letter-spacing: var(--ll-ls-normal);
color: var(--ll-text-primary);
margin: 0;
}
.ll-h5, h5.ll-heading {
font-size: var(--ll-text-lg);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-snug);
letter-spacing: var(--ll-ls-normal);
color: var(--ll-text-primary);
margin: 0;
}
.ll-h6, h6.ll-heading {
font-size: var(--ll-text-base);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-snug);
letter-spacing: var(--ll-ls-normal);
color: var(--ll-text-primary);
margin: 0;
}
/* Text Variants */
.ll-lead {
font-size: var(--ll-text-lg);
color: var(--ll-text-secondary);
line-height: var(--ll-lh-relaxed);
}
.ll-text-large {
font-size: var(--ll-text-lg);
line-height: var(--ll-lh-relaxed);
}
.ll-text-small {
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
}
.ll-text-muted {
color: var(--ll-text-tertiary);
}
.ll-text-subtle {
color: var(--ll-text-quaternary);
}
/* Links */
a:not([class]) {
color: var(--ll-link-primary);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--ll-text-quaternary);
text-underline-offset: 2.5px;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
a:not([class]):hover {
color: var(--ll-link-hover);
text-decoration-color: var(--ll-link-hover);
}
/* =============================================================================
COMPONENT LIBRARY
============================================================================= */
/* Button Component */
.ll-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ll-space-2);
padding: 10px 14px;
border-radius: var(--ll-radius-md);
border: 1px solid transparent;
font-family: var(--ll-font-sans);
font-size: var(--ll-text-sm);
font-weight: var(--ll-weight-medium);
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
user-select: none;
white-space: nowrap;
}
.ll-btn:focus-visible {
outline-offset: 2px;
}
.ll-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Button Variants */
.ll-btn--primary {
background: var(--ll-brand-bg);
color: var(--ll-brand-text) !important;
border-color: var(--ll-brand-bg);
}
.ll-btn--primary:hover:not(:disabled) {
background: var(--ll-accent-hover);
border-color: var(--ll-accent-hover);
transform: translateY(-1px);
}
.ll-btn--secondary {
background: var(--ll-bg-secondary);
color: var(--ll-text-primary);
border-color: var(--ll-border-secondary);
box-shadow: var(--ll-shadow-sm);
}
.ll-btn--secondary:hover:not(:disabled) {
background: var(--ll-bg-tertiary);
transform: translateY(-1px);
}
.ll-btn--ghost {
background: transparent;
color: var(--ll-text-tertiary);
border-color: transparent;
}
.ll-btn--ghost:hover:not(:disabled) {
background: var(--ll-bg-quaternary);
color: var(--ll-text-primary);
}
.ll-btn--glass {
background: var(--ll-bg-glass);
color: var(--ll-text-primary);
border-color: var(--ll-border-glass);
backdrop-filter: blur(20px);
}
.ll-btn--glass:hover:not(:disabled) {
background: var(--ll-bg-secondary);
}
/* Button Sizes */
.ll-btn--sm {
padding: 6px 10px;
font-size: var(--ll-text-micro);
}
.ll-btn--lg {
padding: 14px 20px;
font-size: var(--ll-text-base);
}
/* Card Component */
.ll-card {
background: var(--ll-bg-primary);
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-lg);
padding: var(--ll-space-5);
box-shadow: var(--ll-shadow-sm);
transition: all var(--ll-duration) var(--ll-ease-out);
}
.ll-card:hover {
box-shadow: var(--ll-shadow);
transform: translateY(-2px);
}
.ll-card--glass {
background: var(--ll-bg-glass);
border-color: var(--ll-border-glass);
backdrop-filter: blur(20px);
}
.ll-card--elevated {
box-shadow: var(--ll-shadow);
}
.ll-card--elevated:hover {
box-shadow: var(--ll-shadow-lg);
}
/* Card Sections */
.ll-card__header {
margin-bottom: var(--ll-space-4);
}
.ll-card__title {
font-size: var(--ll-text-lg);
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
margin: 0 0 var(--ll-space-2) 0;
}
.ll-card__description {
color: var(--ll-text-secondary);
margin: 0;
}
.ll-card__content {
margin-bottom: var(--ll-space-4);
}
.ll-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ll-space-3);
}
/* Badge Component */
.ll-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
background: var(--ll-bg-secondary);
border: 1px solid var(--ll-border-primary);
color: var(--ll-text-tertiary);
font-weight: 600;
font-size: var(--ll-text-micro);
line-height: 1.3;
white-space: nowrap;
}
.ll-badge--accent {
background: var(--ll-accent-tint);
color: var(--ll-accent);
border-color: var(--ll-accent);
}
.ll-badge--success {
background: rgba(76, 183, 130, 0.1);
color: var(--ll-color-green);
border-color: var(--ll-color-green);
}
.ll-badge--warning {
background: rgba(252, 120, 64, 0.1);
color: var(--ll-color-orange);
border-color: var(--ll-color-orange);
}
.ll-badge--error {
background: rgba(235, 87, 87, 0.1);
color: var(--ll-color-red);
border-color: var(--ll-color-red);
}
/* Code Component */
.ll-code {
background: var(--ll-bg-secondary);
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius-md);
padding: var(--ll-space-4);
font-family: var(--ll-font-mono);
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
color: var(--ll-text-secondary);
overflow-x: auto;
white-space: pre;
}
.ll-code--inline {
display: inline;
padding: 2px 6px;
border-radius: var(--ll-radius-sm);
font-size: 0.875em;
white-space: nowrap;
}
/* Blockquote Component */
.ll-blockquote {
margin: var(--ll-space-6) 0;
padding-left: var(--ll-space-4);
border-left: 3px solid var(--ll-border-tertiary);
color: var(--ll-text-secondary);
font-style: italic;
}
.ll-blockquote p {
margin: 0;
}
.ll-blockquote cite {
display: block;
margin-top: var(--ll-space-3);
color: var(--ll-text-tertiary);
font-style: normal;
font-size: var(--ll-text-sm);
}
/* =============================================================================
PROSE STYLING
============================================================================= */
.ll-prose {
color: var(--ll-text-secondary);
line-height: var(--ll-lh-relaxed);
}
.ll-prose > * + * {
margin-top: var(--ll-space-4);
}
.ll-prose h1,
.ll-prose h2,
.ll-prose h3,
.ll-prose h4,
.ll-prose h5,
.ll-prose h6 {
color: var(--ll-text-primary);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-snug);
margin-top: var(--ll-space-6);
margin-bottom: var(--ll-space-3);
}
.ll-prose h1 { font-size: var(--ll-text-4xl); }
.ll-prose h2 { font-size: var(--ll-text-3xl); }
.ll-prose h3 { font-size: var(--ll-text-2xl); }
.ll-prose h4 { font-size: var(--ll-text-xl); }
.ll-prose h5 { font-size: var(--ll-text-lg); }
.ll-prose h6 { font-size: var(--ll-text-base); }
.ll-prose p {
margin: 0 0 var(--ll-space-4) 0;
}
.ll-prose ul,
.ll-prose ol {
margin: var(--ll-space-4) 0;
padding-left: var(--ll-space-5);
}
.ll-prose li {
margin-bottom: var(--ll-space-2);
}
.ll-prose strong {
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
}
.ll-prose code {
font-family: var(--ll-font-mono);
font-size: 0.875em;
background: var(--ll-bg-tertiary);
padding: 2px 6px;
border-radius: var(--ll-radius-sm);
border: 1px solid var(--ll-border-secondary);
}
.ll-prose pre {
background: var(--ll-bg-secondary);
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius-md);
overflow-x: auto;
font-size: var(--ll-text-sm);
}
.ll-prose pre code {
background: none;
border: none;
padding: 0;
}
/* =============================================================================
HERO COMPONENT
============================================================================= */
.ll-hero {
padding: var(--ll-space-4) 0 var(--ll-space-3) 0;
text-align: center;
}
.ll-hero__badge {
margin-bottom: var(--ll-space-4);
}
.ll-hero__title {
font-size: var(--ll-text-4xl);
font-weight: var(--ll-weight-semibold);
line-height: var(--ll-lh-tight);
letter-spacing: var(--ll-ls-tighter);
color: var(--ll-text-primary);
margin: 0 0 var(--ll-space-5) 0;
}
.ll-hero__description {
font-size: var(--ll-text-lg);
color: var(--ll-text-secondary);
line-height: var(--ll-lh-relaxed);
margin: 0 0 var(--ll-space-6) 0;
max-width: var(--ll-prose-max-width, 72rem);
margin-left: auto;
margin-right: auto;
}
.ll-hero__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ll-space-3);
flex-wrap: wrap;
}
@media (max-width: 768px) {
.ll-hero__title {
font-size: var(--ll-text-2xl);
}
.ll-hero__description {
font-size: var(--ll-text-base);
}
.ll-hero__actions {
flex-direction: column;
width: 100%;
}
.ll-hero__actions .ll-btn {
width: 100%;
}
}
/* =============================================================================
MISSING COMPONENTS (QA FIX PASS)
============================================================================= */
/* Breadcrumbs Component */
.ll-breadcrumbs {
margin: var(--ll-space-7) 0 var(--ll-space-4);
}
.ll-breadcrumbs .ll-container {
display: flex;
justify-content: center;
}
.ll-breadcrumbs ol {
display: flex;
gap: 10px;
align-items: center;
font-size: var(--ll-text-sm);
color: var(--ll-text-tertiary);
list-style: none;
padding: 0;
margin: 0;
}
.ll-breadcrumbs li + li::before {
content: "/";
opacity: 0.6;
margin-right: 10px;
}
.ll-breadcrumbs a {
color: inherit;
text-decoration: none;
transition: color var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-breadcrumbs a:hover {
color: var(--ll-text-primary);
}
/* Theme Toggle Component - Linear's exact classes */
.ThemeToggle_toggleGroup__LYapn {
padding: 2px;
display: flex;
gap: 0;
border: 1px solid var(--ll-border-primary);
border-radius: 8px;
overflow: hidden;
background: var(--ll-bg-primary);
}
.ThemeToggle_toggleGroupItem__ypyhs {
border-radius: 5px;
width: 24px;
height: 22px;
background: transparent;
border: 0;
display: grid;
align-items: center;
justify-content: center;
color: var(--ll-text-tertiary);
cursor: pointer;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
.ThemeToggle_toggleGroupItem__ypyhs[aria-checked="true"] {
background: var(--ll-bg-quaternary);
color: var(--ll-text-primary);
}
.ThemeToggle_toggleGroupItem__ypyhs:hover:not([aria-checked="true"]) {
background: var(--ll-bg-tertiary);
color: var(--ll-text-secondary);
}
.ThemeToggle_toggleGroupItem__ypyhs svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* Meta Component */
.ll-meta {
display: flex;
gap: 10px;
align-items: center;
color: var(--ll-text-tertiary);
font-size: var(--ll-text-sm);
line-height: 1.4;
}
.ll-meta--center {
justify-content: center;
margin: var(--ll-space-3) 0 var(--ll-space-5);
}
.ll-meta__dot {
opacity: 0.5;
}
.ll-meta__author {
line-height: var(--ll-lh-normal);
}
/* Link Button Component */
.ll-linkbtn,
a.ll-linkbtn {
background: none;
border: 0;
color: var(--ll-text-tertiary);
cursor: pointer;
text-decoration: none;
font-size: inherit;
font-family: inherit;
padding: 0;
transition: color var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-linkbtn:hover {
color: var(--ll-text-primary);
}
.ll-linkbtn:focus-visible {
outline: 2px solid var(--ll-focus-ring-color);
outline-offset: 2px;
border-radius: 2px;
}
/* Linear-Exact Anchor System */
h1::before,
h2::before,
h3::before {
content: none !important;
}
/* Anchor reveal & micro-interaction */
.LinkAnchor_inline__sY3ns {
display: inline-flex;
vertical-align: baseline;
opacity: 0;
transform: translateY(2px) scale(0.96);
transition: opacity var(--ll-duration-fast) var(--ll-ease-out),
transform var(--ll-duration-fast) var(--ll-ease-out);
margin-left: 8px;
cursor: pointer;
}
.LinkAnchor_positioner__MMZ1Z {
display: inline-flex;
align-items: center;
}
.LinkAnchor_icon__5L0U7 {
width: 16px;
height: 16px;
color: var(--ll-text-tertiary);
fill: currentColor;
transition: color var(--ll-duration-fast) var(--ll-ease-out);
}
.InlineIcon_root__o2HZo {
display: inline-flex;
vertical-align: baseline;
}
@media (any-hover: hover) {
h2:hover .LinkAnchor_inline__sY3ns,
h3:hover .LinkAnchor_inline__sY3ns,
h2:focus-within .LinkAnchor_inline__sY3ns,
h3:focus-within .LinkAnchor_inline__sY3ns {
opacity: 1;
transform: translateY(0) scale(1);
}
h2:hover .LinkAnchor_icon__5L0U7,
h3:hover .LinkAnchor_icon__5L0U7,
h2:focus-within .LinkAnchor_icon__5L0U7,
h3:focus-within .LinkAnchor_icon__5L0U7 {
color: var(--ll-text-primary);
}
}
/* Never show on H1 */
h1 .LinkAnchor_inline__sY3ns {
display: none !important;
}
/* Focus states for accessibility */
.LinkAnchor_inline__sY3ns:focus {
opacity: 1;
transform: translateY(0) scale(1);
outline: 2px solid var(--ll-focus-ring-color, var(--ll-accent));
outline-offset: 2px;
border-radius: 2px;
}
/* Toast System */
.ll-toast {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
background: #111;
color: #eaeaea;
border: 1px solid var(--ll-border-primary);
border-radius: 12px;
padding: 10px 12px;
box-shadow: var(--ll-shadow-lg);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.18s var(--ll-ease-out), transform 0.18s var(--ll-ease-out);
font-size: var(--ll-text-sm);
white-space: nowrap;
pointer-events: none;
}
.ll-toast.show {
opacity: 1;
transform: translateY(0);
}
/* Figure Component */
.ll-figure {
margin: var(--ll-space-4) 0;
text-align: center;
}
.ll-figure img {
left: 50%;
border: none;
border-radius: 12px;
transition: all var(--ll-duration) var(--ll-ease-out);
max-width: 100%;
height: auto;
}
/* Base figcaption styles with fallbacks */
figcaption {
color: var(--ll-text-tertiary);
margin-top: 5px;
font-size: var(--ll-text-mini);
margin-inline: auto;
text-align: center;
line-height: var(--ll-lh-normal);
letter-spacing: 0.025em;
font-weight: var(--font-weight-regular);
opacity: 0.9;
}
/* Enhanced figcaption for better visual hierarchy */
.ll-figure figcaption {
color: var(--ll-text-tertiary);
margin-top: var(--ll-space-4);
font-size: var(--ll-text-mini);
margin-inline: auto;
text-align: center;
line-height: var(--ll-lh-normal);
letter-spacing: 0.025em;
font-weight: var(--font-weight-regular);
opacity: 0.9;
}
/* Ensure figcaption is visible in all contexts */
figure figcaption,
.ll-figure figcaption,
.ll-prose figcaption {
display: block !important;
visibility: visible !important;
opacity: 0.9 !important;
}
/* Image Gallery Styles */
.ll-image-gallery {
display: flex;
gap: 0.5rem;
margin: 1.5rem 0;
}
.ll-image-gallery .ll-gallery-item {
margin: 0;
flex: 1;
min-width: 0;
position: relative;
}
.ll-image-gallery .ll-gallery-item img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 0.1rem;
transition: none;
cursor: default;
}
/* Remove hover effects */
.ll-image-gallery .ll-gallery-item img:hover {
transform: none;
box-shadow: none;
}
/* Magnifying glass icon for expandable images */
.ll-image-gallery .ll-gallery-item .ll-gallery-expand-icon {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10;
}
.ll-image-gallery .ll-gallery-item:hover .ll-gallery-expand-icon {
opacity: 1;
}
.ll-image-gallery .ll-gallery-item .ll-gallery-expand-icon svg {
width: 16px;
height: 16px;
color: white;
}
/* Remove old expandable functionality */
.ll-image-gallery .ll-gallery-expandable {
cursor: default;
}
.ll-image-gallery .ll-gallery-expandable.ll-gallery-expanded {
position: static;
transform: none;
z-index: auto;
max-width: none;
max-height: none;
object-fit: cover;
background: none;
border-radius: 0.1rem;
padding: 0;
}
/* Responsive design */
@media (max-width: 768px) {
.ll-image-gallery {
flex-direction: column;
gap: 1rem;
}
.ll-image-gallery .ll-gallery-item img {
max-width: 100%;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.ll-image-gallery .ll-gallery-item img:hover {
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
}
/* Gallery variants */
.ll-image-gallery.ll-gallery-compact {
gap: 0.25rem;
margin: 1rem 0;
}
.ll-image-gallery.ll-gallery-wide {
gap: 1rem;
margin: 2rem 0;
}
.ll-image-gallery.ll-gallery-stacked {
flex-direction: column;
}
.ll-image-gallery.ll-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
}
/* Hero image: absolutely no hover effects or interactions */
.article-hero-image {
border: none;
border-radius: var(--ll-radius-md);
margin-bottom: var(--ll-space-6);
cursor: default;
transition: none !important;
transform: none !important;
max-width: 150%;
height: auto;
}
.article-hero-image:hover {
filter: none !important;
transform: none !important;
box-shadow: none !important;
opacity: 1 !important;
scale: 1 !important;
}
/* Ensure no parent card hover affects hero image */
.ll-card:hover .article-hero-image,
.ll-card .article-hero-image:hover {
transform: none !important;
}
/* Hero image width (match live) */
.ll-hero .ll-figure img,
.article-hero-image {
width: 150%;
width: min(1200px, 92vw);
height: auto;
display: block;
margin-inline: auto;
}
/* Media Breakout Utilities - Hard Rebuild */
.ll-breakout {
position: relative;
transform: translateX(-50%);
width: 150%;
max-width: none;
left: 50%;
}
@media (min-width: 1200px) {
.ll-breakout {
width: min(150%, 1600px);
}
}
/* Media-wide inherits breakout behavior */
.ll-media-wide {
left:-25%;
position: relative;
transform: translateX(-50%);
width: 150%;
max-width: none;
}
@media (min-width: 1200px) {
.ll-media-wide {
width: min(150%, 1600px);
}
}
/* Lightbox Component - Linear's Exact Structure */
.lightbox_overlay__G7d_b {
position: fixed;
inset: 0;
z-index: var(--layer-dialog-overlay);
background: rgba(0, 0, 0, 0.97);
opacity: 0;
transition: opacity 0.2s var(--ll-ease-out);
z-index: 10000;
}
.lightbox_lightbox__LjKmD {
position: fixed;
inset: 0;
display: grid;
place-items: center;
z-index: 10001;
cursor: zoom-out;
}
.lightbox_frame {
max-width: min(92vw, 1600px);
max-height: 88vh;
}
.lightbox_lightbox__LjKmD img.Image_root__UkRqc {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
object-fit: contain;
}
/* Hide/show states */
.lightbox_overlay__G7d_b[hidden],
.lightbox_lightbox__LjKmD[hidden] {
display: none;
}
/* Body lock when lightbox is open - prevents scrollbars */
body.ll-lock {
overflow: hidden;
}
/* Table of Contents Sidebar */
.ll-toc-sidebar {
display: none; /* Hidden by default on mobile */
}
/* Desktop: Show sidebar */
@media (min-width: 1280px) {
.ll-toc-sidebar {
display: block; /* Always visible on desktop */
position: absolute;
top: 0; /* Will be positioned by JavaScript */
left: var(--ll-space-4);
width: 280px;
height: calc(100vh - var(--ll-header-height) - var(--ll-space-8));
z-index: 1000;
pointer-events: none; /* Allow clicks to pass through to content */
transition: top var(--ll-duration-fast) var(--ll-ease-out);
}
/* Sticky state when TOC reaches nav */
.ll-toc-sidebar.sticky {
position: fixed;
top: calc(var(--ll-header-height) + var(--ll-space-4));
}
}
.ll-toc-container {
background: transparent;
border: none;
border-radius: var(--ll-radius-lg);
padding: var(--ll-space-4);
max-height: calc(100vh - var(--ll-header-height) - var(--ll-space-8));
overflow-y: auto;
pointer-events: auto; /* Re-enable clicks on the container */
}
.ll-toc-title {
font-size: var(--ll-text-lg);
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
margin: 0 0 var(--ll-space-3) 0;
padding-bottom: var(--ll-space-2);
border-bottom: 1px solid var(--ll-border-secondary);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ll-toc-nav {
display: flex;
flex-direction: column;
gap: var(--ll-space-1);
}
.ll-toc-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ll-space-1);
}
.ll-toc-nav li {
margin: 0;
padding: 0;
}
.ll-toc-nav a {
display: block;
padding: var(--ll-space-2) var(--ll-space-3);
color: var(--ll-text-tertiary);
text-decoration: none;
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-snug);
border-radius: var(--ll-radius);
transition: all var(--ll-duration-fast) var(--ll-ease-out);
position: relative;
}
.ll-toc-nav a:hover {
color: var(--ll-accent);
background: rgba(var(--ll-accent-rgb, 113, 112, 255), 0.05);
}
.ll-toc-nav a.active {
color: var(--ll-accent);
background: rgba(var(--ll-accent-rgb, 113, 112, 255), 0.15);
font-weight: var(--ll-weight-medium);
}
/* Indent subsections (H3) */
.ll-toc-nav .toc-h3 {
margin-left: var(--ll-space-4);
}
/* Scrollbar styling for TOC */
.ll-toc-container::-webkit-scrollbar {
width: 4px;
}
.ll-toc-container::-webkit-scrollbar-track {
background: transparent;
}
.ll-toc-container::-webkit-scrollbar-thumb {
background: var(--ll-border-tertiary);
border-radius: 2px;
}
.ll-toc-container::-webkit-scrollbar-thumb:hover {
background: var(--ll-border-secondary);
}
/* Cursor states for lightbox images */
.ll-figure img {
}
.lightbox_lightbox__LjKmD {
}
/* Rule Component */
.ll-rule {
border: 0;
height: 1px;
background: var(--ll-border-primary);
margin: var(--ll-space-6) 0 var(--ll-space-3);
}
/* Prose Footer Component */
.ll-prose-footer {
color: var(--ll-text-tertiary);
}
.ll-prose-footer .ll-meta {
justify-content: flex-start;
gap: 10px;
}
.ll-prose-footer .ll-meta [data-copylink] {
margin-left: auto;
}
/* Skip Link Component */
.ll-skip {
position: absolute;
left: -9999px;
top: -9999px;
background: var(--ll-bg-primary);
border: 1px solid var(--ll-border-primary);
padding: 8px 12px;
border-radius: 8px;
color: var(--ll-text-primary);
text-decoration: none;
font-weight: var(--ll-weight-medium);
z-index: 10002;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
font-size: var(--ll-text-sm);
}
.ll-skip:focus {
left: 12px;
top: 12px;
}
/* Navigation Link Component */
.ll-nav {
padding: 8px 10px;
border-radius: var(--ll-radius-md);
transition: background var(--ll-duration-fast) var(--ll-ease-out);
color: var(--ll-text-tertiary);
text-decoration: none;
font-family: 'Satoshi-Variable', sans-serif;
font-weight: var(--font-weight-regular);
font-size: 0.875rem;
}
@media (any-hover: hover) {
.ll-nav:hover {
background: var(--ll-bg-secondary);
color: var(--ll-text-primary);
}
}
/* =============================================================================
ENHANCED PROSE STYLES
============================================================================= */
/* Enhanced List Styling */
.ll-prose ul {
list-style: disc;
padding-left: 1.25rem;
margin: var(--ll-space-3) 0;
}
.ll-prose ol {
list-style: decimal;
padding-left: 1.25rem;
margin: var(--ll-space-3) 0;
}
.ll-prose li + li {
margin-top: 0.35rem;
}
.ll-prose li {
margin-bottom: 0.35rem;
line-height: var(--ll-lh-relaxed);
}
.ll-prose strong {
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
}
/* Enhanced Link Styles */
.ll-prose a {
color: var(--ll-link-primary);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--ll-text-quaternary);
text-underline-offset: 2.5px;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-prose a:not([class]):hover {
color: var(--ll-link-hover);
text-decoration-color: var(--ll-link-hover);
}
/* Quote/Testimonial Component Styles - Enhanced Design */
.ll-quote-testimonial {
background: var(--ll-bg-primary);
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-sm);
padding: var(--ll-space-5);
margin: var(--ll-space-6) 0;
position: relative;
box-shadow: var(--ll-shadow-sm);
}
.ll-quote-testimonial .not-prose {
margin-bottom: var(--ll-space-4);
}
.ll-quote-testimonial .avatar-container {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--ll-border-secondary);
background: var(--ll-bg-secondary);
}
.ll-quote-testimonial .avatar-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ll-quote-testimonial .flex {
display: flex;
}
.ll-quote-testimonial .flex-wrap {
flex-wrap: wrap;
}
.ll-quote-testimonial .items-center {
align-items: center;
}
.ll-quote-testimonial .gap-3 {
gap: var(--ll-space-3);
}
.ll-quote-testimonial .gap-2 {
gap: var(--ll-space-2);
}
.ll-quote-testimonial .gap-4 {
gap: var(--ll-space-4);
}
.ll-quote-testimonial .justify-between {
justify-content: space-between;
}
.ll-quote-testimonial .leading-snug {
line-height: 1.375;
}
.ll-quote-testimonial .font-medium {
font-weight: var(--ll-weight-medium);
}
.ll-quote-testimonial .font-normal {
font-weight: var(--ll-weight-normal);
}
.ll-quote-testimonial .opacity-70 {
opacity: 0.7;
}
.ll-quote-testimonial .opacity-80 {
opacity: 0.8;
}
.ll-quote-testimonial .text-sm {
font-size: var(--ll-text-sm);
}
.ll-quote-testimonial .text-xs {
font-size: var(--ll-text-micro);
}
.ll-quote-testimonial .ml-1 {
margin-left: var(--ll-space-1);
}
.ll-quote-testimonial .my-6 {
margin-top: var(--ll-space-6);
margin-bottom: var(--ll-space-6);
}
.ll-quote-testimonial .mx-auto {
margin-left: auto;
margin-right: auto;
}
.ll-quote-testimonial .flex-col {
flex-direction: column;
}
.ll-quote-testimonial .gap-y-4 {
row-gap: var(--ll-space-4);
}
.ll-quote-testimonial .p-4 {
padding: var(--ll-space-4);
}
.ll-quote-testimonial .border {
border: 1px solid var(--ll-border-primary);
}
.ll-quote-testimonial .rounded-full {
border-radius: 50%;
}
.ll-quote-testimonial .overflow-hidden {
overflow: hidden;
}
.ll-quote-testimonial .aspect-square {
aspect-ratio: 1 / 1;
}
.ll-quote-testimonial .size-12 {
width: 48px;
height: 48px;
}
.ll-quote-testimonial .size-full {
width: 100%;
height: 100%;
}
.ll-quote-testimonial .flex-col {
flex-direction: column;
}
.ll-quote-testimonial .flex-wrap {
flex-wrap: wrap;
}
.ll-quote-testimonial .gap-2 {
gap: var(--ll-space-2);
}
.ll-quote-testimonial .font-medium {
font-weight: var(--ll-weight-medium);
}
.ll-quote-testimonial .font-normal {
font-weight: var(--ll-weight-normal);
}
.ll-quote-testimonial .opacity-70 {
opacity: 0.7;
}
.ll-quote-testimonial .opacity-80 {
opacity: 0.8;
}
/* Content styling */
.ll-quote-testimonial .quote-content {
margin-top: var(--ll-space-4);
}
.ll-quote-testimonial .quote-content > *:first-child {
margin-top: 0;
}
.ll-quote-testimonial .quote-content > *:last-child {
margin-bottom: 0;
}
.ll-quote-testimonial p {
line-height: var(--ll-lh-relaxed);
margin-bottom: var(--ll-space-4);
color: var(--ll-text-primary);
}
.ll-quote-testimonial p:last-child {
margin-bottom: 0;
}
.ll-quote-testimonial blockquote {
border-left: 3px solid var(--ll-border-primary);
padding-left: var(--ll-space-4);
margin: var(--ll-space-4) 0;
font-style: italic;
opacity: 0.9;
color: var(--ll-text-secondary);
}
.ll-quote-testimonial blockquote p {
margin-bottom: var(--ll-space-2);
}
.ll-quote-testimonial blockquote p:last-child {
margin-bottom: 0;
}
.ll-quote-testimonial strong {
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
}
/* Link styling */
.ll-quote-testimonial a {
color: var(--ll-accent);
text-decoration: none;
transition: color var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-quote-testimonial a:hover {
color: var(--ll-accent-hover);
text-decoration: underline;
}
/* External link icon */
.ll-quote-testimonial .external-icon {
display: inline-block;
margin-left: var(--ll-space-1);
font-size: var(--ll-text-micro);
opacity: 0.6;
transition: opacity var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-quote-testimonial a:hover .external-icon {
opacity: 0.8;
}
/* =============================================================================
UTILITIES
============================================================================= */
/* Responsive Utilities */
@media (max-width: 768px) {
:root {
--ll-page-padding-inline: 16px;
--ll-page-padding-block: 48px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.ll-btn:hover:not(:disabled) {
transform: none;
}
.ll-card:hover {
transform: none;
}
}
/* Print Styles */
@media print {
.ll-btn,
.ll-badge {
print-color-adjust: exact;
}
.ll-card {
break-inside: avoid;
}
}
/* =============================================================================
SIMPLE FOOTER COMPONENT
============================================================================= */
.ll-footer-simple {
padding: var(--ll-space-4) 0;
border-top: 1px solid var(--ll-border-primary);
background: var(--ll-bg-primary);
}
.ll-footer-simple__container {
max-width: var(--ll-container-lg);
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--ll-space-2);
}
@media (min-width: 640px) {
.ll-footer-simple__container {
flex-direction: row;
justify-content: space-between;
}
}
.ll-footer-simple__copyright {
color: var(--ll-text-secondary);
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
}
.ll-footer-simple__social {
display: flex;
flex-wrap: wrap;
gap: var(--ll-space-2);
list-style: none;
padding: 0;
margin: 0;
}
.ll-footer-simple__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius);
background: var(--ll-bg-secondary);
color: var(--ll-text-secondary);
text-decoration: none;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
outline: none;
}
.ll-footer-simple__social-link:hover {
background: var(--ll-bg-tertiary);
color: var(--ll-text-primary);
border-color: var(--ll-border-primary);
}
.ll-footer-simple__social-link:focus-visible {
outline: 2px solid var(--ll-accent);
outline-offset: 2px;
}
.ll-footer-simple__social-icon {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =============================================================================
POST NAVIGATION COMPONENT
============================================================================= */
.ll-post-nav {
margin: var(--ll-space-7) 0 var(--ll-space-6);
display: grid;
grid-template-columns: 1fr;
gap: var(--ll-space-4);
}
@media (min-width: 640px) {
.ll-post-nav {
grid-template-columns: 1fr 1fr;
}
}
.ll-post-nav__link {
display: flex;
align-items: center;
padding: var(--ll-space-2) var(--ll-space-2);
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius);
background: var(--ll-bg-primary);
color: var(--ll-text-primary);
text-decoration: none;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
outline: none;
min-height: 80px;
position: relative;
overflow: hidden;
}
.ll-post-nav__link:hover:not(.ll-post-nav__link--disabled) {
background: var(--ll-bg-tertiary);
border-color: var(--ll-border-primary);
transform: translateY(-1px);
}
.ll-post-nav__link:focus-visible {
outline: 2px solid var(--ll-accent);
outline-offset: 2px;
}
.ll-post-nav__link--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.ll-post-nav__link--disabled:hover {
transform: none;
background: var(--ll-bg-secondary);
border-color: var(--ll-border-secondary);
}
.ll-post-nav__link--previous {
justify-content: flex-start;
}
.ll-post-nav__link--next {
justify-content: flex-end;
}
.ll-post-nav__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-post-nav__link--previous .ll-post-nav__icon {
margin-right: var(--ll-space-2);
}
.ll-post-nav__link--next .ll-post-nav__icon {
margin-left: var(--ll-space-2);
}
.ll-post-nav__link:hover:not(.ll-post-nav__link--disabled) .ll-post-nav__icon {
transform: translateX(var(--ll-space-1));
}
.ll-post-nav__link--previous:hover:not(.ll-post-nav__link--disabled) .ll-post-nav__icon {
transform: translateX(calc(-1 * var(--ll-space-1)));
}
.ll-post-nav__content {
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1;
}
.ll-post-nav__label {
color: var(--ll-text-tertiary);
font-size: var(--ll-text-mini);
line-height: var(--ll-lh-normal);
margin-bottom: var(--ll-space-1);
}
.ll-post-nav__title {
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
font-weight: var(--ll-weight-medium);
color: var(--ll-text-primary);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* =============================================================================
HERO SECTION VARIANTS (simple surface + highlight)
============================================================================= */
.ll-hero-experimental {
margin: var(--ll-space-7) 0 var(--ll-space-6);
}
.ll-hero-surface {
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-2xl);
background: radial-gradient(1200px 400px at 50% 0%, rgba(var(--ll-accent-rgb), 0.09), transparent 60%), var(--ll-bg-primary);
padding: var(--ll-space-7) var(--ll-space-6);
box-shadow: var(--ll-shadow-sm);
}
@media (max-width: 768px) {
.ll-hero-surface {
padding: var(--ll-space-6) var(--ll-space-4);
border-radius: var(--ll-radius-xl);
}
}
.ll-hero-surface__content {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.ll-hero-surface__title {
margin: 0 0 var(--ll-space-3) 0;
font-size: var(--ll-text-3xl);
color: var(--ll-text-primary);
letter-spacing: var(--ll-ls-tight);
}
.ll-hero-surface__desc {
margin: 0 0 var(--ll-space-4) 0;
color: var(--ll-text-secondary);
font-size: var(--ll-text-lg);
line-height: var(--ll-lh-relaxed);
}
.ll-hero-surface__actions {
display: flex;
gap: var(--ll-space-2);
justify-content: center;
flex-wrap: wrap;
}
.ll-hero-highlight {
position: relative;
display: grid;
place-items: center;
margin-top: var(--ll-space-5);
}
.ll-hero-highlight__pulse {
position: absolute;
width: 380px;
height: 120px;
border-radius: 999px;
filter: blur(30px);
background: radial-gradient(closest-side, rgba(var(--ll-accent-rgb), 0.2), transparent 70%);
opacity: 0.8;
}
.ll-hero-highlight__text {
position: relative;
padding: 6px 12px;
border-radius: 12px;
background: rgba(var(--ll-accent-rgb), 0.12);
border: 1px solid rgba(var(--ll-accent-rgb), 0.35);
color: var(--ll-text-primary);
font-weight: var(--ll-weight-medium);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
/* =============================================================================
CARD STACK
============================================================================= */
.ll-card-stack {
margin: var(--ll-space-8) 0 var(--ll-space-7);
}
.ll-card-stack__stack {
position: relative;
width: min(760px, 92vw);
margin: 0 auto;
height: 360px;
perspective: 1200px;
}
.ll-card-stack__card {
position: absolute;
inset: 0;
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-2xl);
background: linear-gradient(180deg, rgba(var(--ll-bg-primary-rgb), 0.02), rgba(var(--ll-bg-primary-rgb), 0) 70%), var(--ll-bg-primary);
padding: var(--ll-space-6);
box-shadow: var(--ll-shadow-sm);
transform: translateZ(0) rotateX(0deg) translateY(0) scale(1);
transition: transform var(--ll-duration) var(--ll-ease-out), box-shadow var(--ll-duration) var(--ll-ease-out);
}
.ll-card-stack__card:nth-child(1) { transform: translateY(0) scale(1); z-index: 4; }
.ll-card-stack__card:nth-child(2) { transform: translateY(14px) scale(0.995); z-index: 3; }
.ll-card-stack__card:nth-child(3) { transform: translateY(28px) scale(0.99); z-index: 2; }
.ll-card-stack__card:nth-child(4) { transform: translateY(42px) scale(0.985); z-index: 1; }
.ll-card-stack__stack:hover .ll-card-stack__card:nth-child(1) { transform: translateY(-4px) scale(1.005); box-shadow: var(--ll-shadow); }
.ll-card-stack__stack:hover .ll-card-stack__card:nth-child(2) { transform: translateY(10px) scale(0.997); }
.ll-card-stack__stack:hover .ll-card-stack__card:nth-child(3) { transform: translateY(22px) scale(0.992); }
.ll-card-stack__stack:hover .ll-card-stack__card:nth-child(4) { transform: translateY(36px) scale(0.987); }
.ll-card-stack__title {
margin: 0 0 var(--ll-space-2) 0;
font-size: var(--ll-text-xl);
color: var(--ll-text-primary);
}
.ll-card-stack__desc {
margin: 0;
color: var(--ll-text-secondary);
}
/* =============================================================================
TRACING BEAM
============================================================================= */
.ll-tracing-beam {
margin: var(--ll-space-8) 0 var(--ll-space-7);
}
.ll-tracing-surface {
position: relative;
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-lg);
background: var(--ll-bg-primary);
overflow: hidden;
}
.ll-tracing-surface::before {
content: "";
position: absolute;
top: var(--beam-y, -100px);
left: -10%;
right: -10%;
height: 90px;
pointer-events: none;
background: radial-gradient(600px 60px at 50% 50%, rgba(var(--ll-accent-rgb), 0.10), transparent 60%);
filter: blur(10px);
transition: top var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-tracing-content {
position: relative;
padding: var(--ll-space-6);
display: grid;
gap: var(--ll-space-4);
color: var(--ll-text-secondary);
}
/* =============================================================================
FEATURE SECTION (Aceternity-inspired, adapted to ll- styles)
============================================================================= */
.ll-feature-section {
margin: var(--ll-space-8) 0 var(--ll-space-7);
}
.ll-feature-section__header {
text-align: center;
margin-bottom: var(--ll-space-6);
}
.ll-feature-section__header .ll-heading {
font-size: var(--ll-text-3xl);
margin-top: var(--ll-space-3);
margin-bottom: var(--ll-space-2);
}
.ll-feature-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ll-space-4);
}
@media (max-width: 1024px) {
.ll-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.ll-feature-grid {
grid-template-columns: 1fr;
}
}
.ll-feature-card {
position: relative;
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-lg);
background: linear-gradient(180deg, rgba(var(--ll-bg-primary-rgb), 0.02), rgba(var(--ll-bg-primary-rgb), 0) 70%), var(--ll-bg-primary);
padding: var(--ll-space-5);
transition: border-color var(--ll-duration-fast) var(--ll-ease-out), transform var(--ll-duration-fast) var(--ll-ease-out), box-shadow var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-feature-card:hover {
border-color: var(--ll-border-secondary);
transform: translateY(-2px);
box-shadow: var(--ll-shadow);
}
.ll-feature-card__icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--ll-accent-tint);
color: var(--ll-accent);
border: 1px solid rgba(var(--ll-accent-rgb), 0.25);
box-shadow: 0 1px 0 rgba(0,0,0,0.3) inset;
margin-bottom: var(--ll-space-3);
}
.ll-feature-card__icon svg {
width: 18px;
height: 18px;
}
.ll-feature-card__title {
margin: 0 0 var(--ll-space-2) 0;
font-size: var(--ll-text-lg);
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
}
.ll-feature-card__desc {
margin: 0;
color: var(--ll-text-secondary);
font-size: var(--ll-text-base);
line-height: var(--ll-lh-relaxed);
}
/* =============================================================================
APPLE CARDS CAROUSEL (horizontal scroll, snapping)
============================================================================= */
.ll-apple-carousel {
margin: var(--ll-space-8) 0 var(--ll-space-7);
}
.ll-apple-carousel__scroller {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 360px);
gap: var(--ll-space-4);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding: var(--ll-space-2) var(--ll-space-4);
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-lg);
background: var(--ll-bg-primary);
}
.ll-apple-card {
scroll-snap-align: start;
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius-lg);
background: linear-gradient(180deg, rgba(var(--ll-bg-primary-rgb), 0.02), rgba(var(--ll-bg-primary-rgb), 0) 70%), var(--ll-bg-primary);
padding: var(--ll-space-5);
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform var(--ll-duration-fast) var(--ll-ease-out), box-shadow var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-apple-card:hover {
transform: translateY(-2px);
box-shadow: var(--ll-shadow);
}
.ll-apple-card__eyebrow {
color: var(--ll-text-tertiary);
font-size: var(--ll-text-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ll-apple-card__title {
margin: var(--ll-space-1) 0 var(--ll-space-2) 0;
font-size: var(--ll-text-xl);
color: var(--ll-text-primary);
}
.ll-apple-card__desc {
color: var(--ll-text-secondary);
margin: 0;
}
.ll-apple-card__footer {
margin-top: var(--ll-space-4);
}
.ll-apple-card__tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background: var(--ll-bg-secondary);
border: 1px solid var(--ll-border-secondary);
color: var(--ll-text-tertiary);
font-size: var(--ll-text-xs);
}
/* =============================================================================
EXPANDABLE CARDS (details/summary)
============================================================================= */
.ll-expandable-cards {
margin: var(--ll-space-8) 0 var(--ll-space-7);
}
.ll-expandable-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ll-space-4);
}
@media (max-width: 768px) {
.ll-expandable-grid {
grid-template-columns: 1fr;
}
}
.ll-expandable-card {
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-lg);
background: var(--ll-bg-primary);
overflow: hidden;
transition: box-shadow var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-expandable-card[open] {
box-shadow: var(--ll-shadow);
}
.ll-expandable-card__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ll-space-2);
padding: var(--ll-space-4);
cursor: pointer;
list-style: none;
}
.ll-expandable-card__summary::-webkit-details-marker { display: none; }
.ll-expandable-card__title {
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
}
.ll-expandable-card__chevron {
width: 18px;
height: 18px;
color: var(--ll-text-tertiary);
transition: transform var(--ll-duration) var(--ll-ease-out);
}
.ll-expandable-card[open] .ll-expandable-card__chevron {
transform: rotate(180deg);
}
.ll-expandable-card__content {
padding: 0 var(--ll-space-4) var(--ll-space-4);
color: var(--ll-text-secondary);
line-height: var(--ll-lh-relaxed);
}
.ll-post-nav__link--previous .ll-post-nav__content {
align-items: flex-start;
text-align: left;
}
.ll-post-nav__link--next .ll-post-nav__content {
align-items: flex-end;
text-align: right;
}
/* =============================================================================
READING TIME & PROGRESS COMPONENTS
============================================================================= */
.reading-time {
line-height: var(--ll-lh-normal);
}
/**
/* Reading Progress Bar - Removed */
/* Progress indication now provided by mobile TOC progress circle */
/* =============================================================================
SCROLL TO TOP BUTTON
============================================================================= */
.ll-scroll-to-top {
position: fixed;
right: 16px;
bottom: var(--ll-space-4);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius);
background: var(--ll-bg-secondary);
color: var(--ll-text-secondary);
text-decoration: none;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
outline: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}
.ll-scroll-to-top:hover {
background: var(--ll-bg-tertiary);
color: var(--ll-text-primary);
border-color: var(--ll-border-primary);
transform: translateY(-2px);
}
.ll-scroll-to-top:focus-visible {
outline: 2px solid var(--ll-accent);
outline-offset: 2px;
}
.ll-scroll-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ll-scroll-to-top__icon {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-scroll-to-top:hover .ll-scroll-to-top__icon {
transform: translateY(-2px);
}
/* =============================================================================
ENHANCED BLOCKQUOTE COMPONENT
============================================================================= */
.ll-blockquote {
margin: var(--ll-space-6) 0;
padding: var(--ll-space-4) var(--ll-space-5);
padding-left: var(--ll-space-6);
border-left: 3px solid var(--ll-border-tertiary);
color: var(--ll-text-secondary);
font-style: italic;
background: var(--ll-bg-secondary);
border-radius: 0 var(--ll-radius-lg) var(--ll-radius-lg) 0;
position: relative;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-blockquote:hover {
background: var(--ll-bg-tertiary);
border-left-color: var(--ll-accent);
}
.ll-blockquote p {
margin: 0 0 var(--ll-space-3) 0;
line-height: var(--ll-lh-relaxed);
}
.ll-blockquote p:last-child {
margin-bottom: 0;
}
.ll-blockquote cite {
display: block;
margin-top: var(--ll-space-3);
color: var(--ll-text-tertiary);
font-style: normal;
font-size: var(--ll-text-sm);
font-weight: var(--ll-weight-medium);
}
.ll-blockquote cite::before {
content: "— ";
color: var(--ll-text-quaternary);
}
/* Blockquote with icon */
.ll-blockquote__icon {
position: absolute;
top: var(--ll-space-4);
left: var(--ll-space-4);
width: 20px;
height: 20px;
color: var(--ll-accent);
opacity: 0.6;
}
.ll-blockquote:has(.ll-blockquote__icon) {
padding-left: calc(var(--ll-space-6) + 24px);
}
/* Interactive blockquote */
.ll-blockquote[data-interactive="true"] {
cursor: pointer;
transition: all var(--ll-duration) var(--ll-ease-out);
}
.ll-blockquote[data-interactive="true"]:hover {
transform: translateY(-2px);
box-shadow: var(--ll-shadow);
}
/* Blockquote variants */
.ll-blockquote--accent {
border-left-color: var(--ll-accent);
background: var(--ll-accent-tint);
}
.ll-blockquote--warning {
border-left-color: var(--ll-color-orange);
background: rgba(252, 120, 64, 0.05);
}
.ll-blockquote--info {
border-left-color: var(--ll-color-blue);
background: rgba(78, 167, 252, 0.05);
}
.ll-blockquote--success {
border-left-color: var(--ll-color-green);
background: rgba(76, 183, 130, 0.05);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ll-blockquote {
padding: var(--ll-space-3) var(--ll-space-4);
padding-left: var(--ll-space-5);
margin: var(--ll-space-4) 0;
}
.ll-blockquote:has(.ll-blockquote__icon) {
padding-left: calc(var(--ll-space-5) + 20px);
}
.ll-blockquote__icon {
top: var(--ll-space-3);
left: var(--ll-space-3);
width: 16px;
height: 16px;
}
}
/* =============================================================================
CHALLENGE TABLE COMPONENT
============================================================================= */
.ll-challenge-table {
margin: var(--ll-space-6) auto;
display: flex;
flex-direction: column;
gap: var(--ll-space-4);
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-lg);
padding: var(--ll-space-4);
max-width: var(--ll-prose-max-width);
background: var(--ll-bg-secondary);
}
.ll-challenge-table__title {
font-size: var(--ll-text-xl);
font-weight: var(--ll-weight-medium);
color: var(--ll-text-primary);
line-height: var(--ll-lh-snug);
}
.ll-challenge-table__list {
display: flex;
flex-direction: column;
gap: 0;
}
.ll-challenge-table__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ll-space-4);
padding: var(--ll-space-2) 0;
border-bottom: 1px solid var(--ll-border-secondary);
}
.ll-challenge-table__row:first-child {
padding-top: 0;
}
.ll-challenge-table__row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.ll-challenge-table__label {
color: var(--ll-text-tertiary);
display: flex;
flex: 1;
align-items: center;
gap: var(--ll-space-2);
font-size: var(--ll-text-micro);
font-weight: var(--ll-weight-medium);
min-width: 80px;
}
.ll-challenge-table__icon {
width: 1em;
height: 1em;
flex-shrink: 0;
color: var(--ll-text-quaternary);
}
.ll-challenge-table__value {
flex: 1;
font-size: var(--ll-text-mini);
color: var(--ll-text-primary);
display: flex;
flex-wrap: wrap;
gap: var(--ll-space-2);
align-items: center;
}
/* Flag value styling */
.ll-challenge-table__value--flag code {
background: var(--ll-bg-tertiary);
color: var(--ll-text-primary);
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius-sm);
padding: 2px 6px;
font-size: var(--ll-text-mini);
font-weight: var(--ll-weight-medium);
cursor: pointer;
user-select: all;
transition: all var(--ll-duration) var(--ll-ease-out);
filter: blur(2px);
font-family: var(--ll-font-mono);
}
.ll-challenge-table__value--flag code:hover,
.ll-challenge-table__value--flag code.ll-flag--revealed {
filter: blur(0);
background: var(--ll-bg-quaternary);
border-color: var(--ll-border-primary);
}
/* Badge value styling */
.ll-challenge-table__value--badge {
display: flex;
flex-wrap: wrap;
gap: var(--ll-space-2);
}
.ll-challenge-table__value--badge .ll-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: var(--ll-accent-tint);
color: var(--ll-accent);
border: 1px solid var(--ll-accent);
font-size: var(--ll-text-mini);
font-weight: var(--ll-weight-medium);
white-space: nowrap;
}
/* Link value styling */
.ll-challenge-table__value--link a {
color: var(--ll-link-primary);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--ll-text-quaternary);
text-underline-offset: 2.5px;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
display: inline-flex;
align-items: center;
gap: var(--ll-space-1);
}
.ll-challenge-table__value--link a:hover {
color: var(--ll-link-hover);
text-decoration-color: var(--ll-link-hover);
}
.ll-challenge-table__value--link .ll-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
}
/* Description section */
.ll-challenge-table__description {
color: var(--ll-text-secondary);
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-relaxed);
margin-top: var(--ll-space-3);
padding-top: var(--ll-space-3);
border-top: 1px solid var(--ll-border-secondary);
}
.ll-challenge-table__description p {
margin: 0 0 var(--ll-space-3) 0;
}
.ll-challenge-table__description p:last-child {
margin-bottom: 0;
}
.ll-challenge-table__description code {
font-family: var(--ll-font-mono);
font-size: 0.875em;
background: var(--ll-bg-tertiary);
padding: 2px 6px;
border-radius: var(--ll-radius-sm);
border: 1px solid var(--ll-border-secondary);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ll-challenge-table {
padding: var(--ll-space-3);
margin: var(--ll-space-4) auto;
}
.ll-challenge-table__row {
flex-direction: column;
align-items: flex-start;
gap: var(--ll-space-2);
}
.ll-challenge-table__label {
min-width: auto;
font-size: var(--ll-text-sm);
}
.ll-challenge-table__value {
font-size: var(--ll-text-sm);
width: 100%;
}
}
/* Icon definitions */
.ll-icon-users {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M16 3.128a4 4 0 0 1 0 7.744M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
}
.ll-icon-pen-tool {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z'/%3E%3Cpath d='m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
}
.ll-icon-tag {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='currentColor'/%3E%3C/svg%3E");
}
.ll-icon-star {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
.ll-icon-check-circle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11l3 3L22 4'/%3E%3C/svg%3E");
}
.ll-icon-flag {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1s5 2 8 2s4-1 4-1V3s-1 1-4 1s-5-2-8-2s-4 1-4 1zm0 7v-7'/%3E%3C/svg%3E");
}
.ll-icon-code {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}
/* =============================================================================
ICON PATTERNS - STANDARDIZED SVG ICONS
============================================================================= */
/* Books Icon Pattern */
.ll-icon-books {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
}
/* Resume Icon Pattern */
.ll-icon-resume {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E");
}
/* Icon Usage Guidelines */
.ll-icon {
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.ll-icon--sm {
width: 16px;
height: 16px;
}
.ll-icon--lg {
width: 24px;
height: 24px;
}
/*
* ICON GENERATION PATTERNS
*
* When creating new icons, follow these patterns:
*
* 1. Use Heroicons/Lucide style with stroke-based design
* 2. Standard viewBox: "0 0 24 24"
* 3. Stroke width: 1.5 for 20px icons, 2 for 16px icons
* 4. Use fill="none" and stroke="currentColor"
* 5. Encode SVG as data URI for background-image
*
* Example usage:
*
*
*
* For inline SVG (when background-image doesn't work):
*
*/
/* =============================================================================
CODE BLOCK COMPONENT - EXACT ENSCRIBE.DEV DESIGN
============================================================================= */
.ll-code-block {
margin: var(--ll-space-6) 0;
border: 1px solid var(--ll-border-primary);
border-radius: var(--ll-radius-lg);
background: var(--ll-bg-secondary);
overflow: hidden;
position: relative;
}
.ll-code-block__header {
background-color: var(--ll-bg-secondary);
border: 1px solid var(--ll-border);
border-bottom: none;
border-radius: var(--ll-radius-lg) var(--ll-radius-lg) 0 0;
padding: var(--ll-space-3) var(--ll-space-4);
margin: 0;
font-family: var(--ll-font-mono);
font-size: var(--ll-text-xs);
font-weight: 500;
color: var(--ll-text-secondary);
text-align: left;
opacity: 1;
}
.ll-code-block__title {
font-size: var(--ll-text-sm);
font-weight: var(--ll-weight-medium);
color: var(--ll-text-primary);
line-height: var(--ll-lh-snug);
font-family: var(--ll-font-mono);
}
.ll-code-block__pre {
margin: 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
overflow-x: auto;
position: relative;
}
.ll-code-block__pre--wrap {
white-space: pre-wrap;
word-wrap: break-word;
}
.ll-code-block__code {
display: block;
padding: 0;
font-family: var(--ll-font-mono);
background: transparent;
border: none;
border-radius: 0;
font-size: inherit;
line-height: inherit;
color: var(--ll-text-secondary);
}
.ll-code-block__line {
display: flex;
align-items: flex-start;
min-height: 1.5em;
}
.ll-code-block__gutter {
display: flex;
align-items: stretch;
background: var(--ll-bg-tertiary);
border-right: 1px solid var(--ll-border-secondary);
padding-right: var(--ll-space-3);
margin-right: var(--ll-space-4);
min-width: 3.5em;
flex-shrink: 0;
}
.ll-code-block__line-number {
color: var(--ll-text-quaternary);
font-size: var(--ll-text-xs);
font-weight: var(--ll-weight-medium);
text-align: right;
width: 100%;
padding: 0 var(--ll-space-2);
user-select: none;
font-family: var(--ll-font-mono);
}
.ll-code-block__code-content {
flex: 1;
padding: var(--ll-space-4) var(--ll-space-4) var(--ll-space-4) 0;
white-space: pre;
overflow-x: auto;
font-family: var(--ll-font-mono);
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
}
.ll-code-block__code-content .indent {
color: var(--ll-text-quaternary);
}
/* Copy button */
.ll-code-block__copy {
position: absolute;
top: var(--ll-space-3);
right: var(--ll-space-3);
display: flex;
align-items: center;
gap: var(--ll-space-1);
padding: var(--ll-space-1) var(--ll-space-2);
background: var(--ll-bg-primary);
border: 1px solid var(--ll-border-secondary);
border-radius: var(--ll-radius);
color: var(--ll-text-tertiary);
font-size: var(--ll-text-xs);
font-weight: var(--ll-weight-medium);
cursor: pointer;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
opacity: 0;
z-index: 10;
}
.ll-code-block:hover .ll-code-block__copy {
opacity: 1;
}
.ll-code-block__copy:hover {
background: var(--ll-bg-tertiary);
color: var(--ll-text-primary);
border-color: var(--ll-border-primary);
}
.ll-code-block__copy svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ll-code-block {
margin: var(--ll-space-4) 0;
border-radius: var(--ll-radius-md);
}
.ll-code-block__header {
padding: var(--ll-space-2) var(--ll-space-3);
}
.ll-code-block__code {
padding: var(--ll-space-3);
font-size: var(--ll-text-mini);
}
.ll-code-block__gutter {
min-width: 3em;
margin-right: var(--ll-space-3);
}
.ll-code-block__line-number {
font-size: 10px;
}
.ll-code-block__copy {
top: var(--ll-space-2);
right: var(--ll-space-2);
padding: 4px 6px;
font-size: 10px;
}
}
/* Ensure code blocks don't interfere with existing prose styles */
.ll-prose .ll-code-block {
margin: var(--ll-space-6) 0;
}
.ll-prose .ll-code-block:first-child {
margin-top: 0;
}
.ll-prose .ll-code-block:last-child {
margin-bottom: 0;
}
/* =============================================================================
TABLE COMPONENTS - REFERENCE AND DATA TABLES
============================================================================= */
/* Table wrapper for responsive design */
.ll-table-wrapper {
overflow-x: auto;
margin: var(--ll-space-6) 0;
border-radius: var(--ll-radius-lg);
border: 1px solid var(--ll-border-primary);
background: var(--ll-bg-primary);
}
/* Reference Table Styles */
.ll-reference-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
}
.ll-reference-table thead {
background: var(--ll-bg-secondary);
border-bottom: 1px solid var(--ll-border-primary);
}
.ll-reference-table th {
padding: var(--ll-space-3) var(--ll-space-4);
text-align: left;
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
font-size: var(--ll-text-sm);
letter-spacing: 0.025em;
}
.ll-reference-table td {
padding: var(--ll-space-3) var(--ll-space-4);
border-bottom: 1px solid var(--ll-border-primary);
color: var(--ll-text-primary);
vertical-align: top;
}
.ll-reference-table tbody tr:last-child td {
border-bottom: none;
}
.ll-reference-table tbody tr:hover {
background: var(--ll-bg-secondary);
}
.ll-table-striped {
background: var(--ll-bg-secondary);
}
.ll-table-link {
color: var(--ll-link-primary);
text-decoration: none;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-table-link:hover {
color: var(--ll-link-hover);
text-decoration: underline;
}
/* Data Table Styles - Enhanced for images and inline elements */
.ll-data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-normal);
}
.ll-data-table thead {
background: var(--ll-bg-secondary);
border-bottom: 2px solid var(--ll-border-primary);
}
.ll-data-table th {
padding: var(--ll-space-3) var(--ll-space-4);
text-align: left;
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
font-size: var(--ll-text-sm);
letter-spacing: 0.025em;
white-space: nowrap;
}
.ll-data-table td {
padding: var(--ll-space-3) var(--ll-space-4);
border-bottom: 1px solid var(--ll-border-primary);
color: var(--ll-text-primary);
vertical-align: middle;
}
.ll-data-table tbody tr:last-child td {
border-bottom: none;
}
.ll-data-table tbody tr:hover {
background: var(--ll-bg-secondary);
}
/* Flag image styling */
.ll-flag-image {
width: 20px;
height: 15px;
margin-right: var(--ll-space-2);
vertical-align: middle;
border: none;
border-radius: 0;
display: inline-block;
}
/* Inline code styling */
.ll-inline-code {
background: var(--ll-bg-tertiary);
color: var(--ll-text-primary);
padding: var(--ll-space-1) var(--ll-space-2);
border-radius: var(--ll-radius);
font-family: var(--ll-font-mono);
font-size: var(--ll-text-xs);
border: 1px solid var(--ll-border-secondary);
}
/* Compact variant */
.ll-data-table.ll-compact {
font-size: var(--ll-text-xs);
}
.ll-data-table.ll-compact th,
.ll-data-table.ll-compact td {
padding: var(--ll-space-2) var(--ll-space-3);
}
.ll-data-table.ll-compact .ll-flag-image {
width: 16px;
height: 12px;
margin-right: var(--ll-space-1);
}
/* Responsive design */
@media (max-width: 768px) {
.ll-reference-table,
.ll-data-table {
font-size: var(--ll-text-xs);
}
.ll-reference-table th,
.ll-reference-table td,
.ll-data-table th,
.ll-data-table td {
padding: var(--ll-space-2) var(--ll-space-3);
}
.ll-flag-image {
width: 16px;
height: 12px;
margin-right: var(--ll-space-1);
}
}
/* =============================================================================
AUTHOR TOOLTIP COMPONENT - LINEAR STYLE
============================================================================= */
/* Author trigger */
.ll-author-trigger {
cursor: help;
position: relative;
height: fit-content;
}
.ll-author-trigger.ll-author-stacked {
margin-left: calc(var(--ll-space-2) * -1);
}
.ll-author-trigger.ll-author-stacked::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--ll-bg-primary);
}
.ll-author-trigger-content {
display: flex;
align-items: center;
gap: var(--ll-space-2);
}
.ll-author-name {
color: var(--ll-text-primary);
font-weight: var(--ll-weight-medium);
font-size: var(--ll-text-sm);
}
.ll-author-question {
color: var(--ll-text-quaternary);
opacity: 0;
transition: opacity var(--ll-duration-fast) var(--ll-ease-out);
margin-left: var(--ll-space-1);
flex-shrink: 0;
}
.ll-author-trigger:hover .ll-author-question {
opacity: 1;
}
/* Author content (tooltip) */
.ll-author-content {
position: fixed;
background: var(--ll-bg-tertiary);
box-shadow: var(--ll-shadow-high);
padding: var(--ll-space-2) var(--ll-space-4);
border-radius: var(--ll-radius-lg);
border: 1px solid var(--ll-bg-primary);
z-index: var(--ll-z-tooltip);
transform-origin: top left;
display: none;
min-width: 200px;
max-width: 280px;
pointer-events: auto;
}
.ll-author-content[data-state="delayed-open"],
.ll-author-content[data-state="instant-open"] {
animation: ll-author-open 0.16s var(--ll-ease-out) forwards;
}
.ll-author-content[data-state="closed"] {
animation: ll-author-close 0.16s var(--ll-ease-out) forwards;
}
/* Author profile layout */
.ll-author-profile {
display: flex;
align-items: center;
gap: var(--ll-space-3);
}
.ll-author-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.ll-author-info {
flex: 1;
min-width: 0;
}
.ll-author-info .ll-author-name {
font-weight: var(--ll-weight-semibold);
font-size: var(--ll-text-sm);
color: var(--ll-text-primary);
margin-bottom: var(--ll-space-1);
line-height: var(--ll-lh-tight);
}
.ll-author-role {
font-size: var(--ll-text-xs);
color: var(--ll-text-secondary);
line-height: var(--ll-lh-tight);
}
.ll-author-social {
display: flex;
gap: var(--ll-space-2);
align-items: center;
}
.ll-author-social-link {
color: var(--ll-text-tertiary);
transition: color var(--ll-duration-fast) var(--ll-ease-out);
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
.ll-author-social-link:hover {
color: var(--ll-text-primary);
}
/* Link Tooltip Component */
.ll-tooltip {
color: var(--ll-text-primary);
font-weight: var(--ll-weight-medium);
font-size: var(--ll-text-sm);
background-color: var(--ll-bg-tertiary);
border-radius: 12px;
padding: 10px 12px;
z-index: 9999;
max-width: 400px;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.18s var(--ll-ease-out), transform 0.18s var(--ll-ease-out);
pointer-events: none;
box-shadow: var(--ll-shadow-lg);
border: 1px solid var(--ll-border-primary);
}
.ll-tip-inner {
display: grid;
grid-template-columns: 32px auto;
gap: 10px;
align-items: center;
}
.ll-domain {
font-weight: 600;
color: var(-ll-text-secondary);
}
.ll-title {
color: var(--ll-text-secondary);
}
.ll-title.ll-loading {
opacity: 0.6;
}
.ll-favicon {
border-radius: 8px;
}
/* Enhanced tooltip with screenshot preview */
.ll-tooltip--enhanced {
width: 320px;
max-width: calc(100vw - 32px);
padding: 0;
}
.ll-tooltip--enhanced .ll-tip-inner {
display: flex;
flex-direction: column;
gap: 0;
}
.ll-tip-preview {
width: 100%;
height: 180px;
background: var(--ll-bg-secondary);
border-radius: 12px 12px 0 0;
overflow: hidden;
position: relative;
border-bottom: 1px solid var(--ll-border-primary);
}
.ll-preview-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--ll-duration-normal) var(--ll-ease-out);
}
.ll-preview-image.loaded {
opacity: 1;
}
.ll-preview-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--ll-bg-secondary);
}
.ll-spinner {
width: 24px;
height: 24px;
color: var(--ll-text-tertiary);
opacity: 0.5;
}
.ll-tip-meta {
padding: var(--ll-space-3);
display: grid;
grid-template-columns: 16px auto;
gap: 10px;
align-items: flex-start;
background: var(--ll-bg-primary);
border-radius: 0 0 12px 12px;
}
.ll-tip-meta .ll-text {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Graceful degradation: hide preview on error */
.ll-tooltip--enhanced .ll-tip-preview[style*="display: none"] ~ .ll-tip-meta {
border-radius: 12px;
}
/* Mobile optimization for enhanced tooltips */
@media (max-width: 768px) {
.ll-tooltip--enhanced {
width: 280px;
}
.ll-tip-preview {
height: 150px;
}
}
/* Hover animations - subtle parallax effect */
.ll-tooltip--enhanced {
transform-style: preserve-3d;
}
.ll-tip-preview {
transition: transform var(--ll-duration-fast) var(--ll-ease-out);
}
/* Dark mode adjustments for enhanced tooltips */
[data-theme="dark"] .ll-preview-loading {
background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .ll-tip-preview {
background: rgba(255, 255, 255, 0.02);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
/* Remaining authors indicator */
.ll-author-remaining {
height: 18px;
width: 18px;
background-color: var(--ll-bg-quaternary);
font-size: 8px;
color: var(--ll-text-quaternary);
border-radius: 100%;
display: grid;
place-items: center;
margin-left: calc(var(--ll-space-2) * -1);
position: relative;
font-weight: var(--ll-weight-medium);
border: 1px solid var(--ll-bg-primary);
}
.ll-author-remaining::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--ll-bg-primary);
}
/* Author animations */
@keyframes ll-author-open {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes ll-author-close {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ll-author-content {
min-width: 180px;
max-width: 240px;
padding: var(--ll-space-2) var(--ll-space-3);
}
.ll-author-avatar {
width: 28px;
height: 28px;
}
.ll-author-profile {
gap: var(--ll-space-2);
}
}
/* =============================================================================
ACCORDION COMPONENT - ALL VARIANTS
============================================================================= */
.ll-accordion {
position: relative;
margin: var(--ll-space-6) 0;
border-left: 4px solid var(--ll-color-blue);
background: rgba(78, 167, 252, 0.02);
border-radius: 0 var(--ll-radius-lg) var(--ll-radius-lg) 0;
overflow: hidden;
transition: all var(--ll-duration) var(--ll-ease-out);
}
.ll-accordion[open] {
background: rgba(78, 167, 252, 0.05);
}
.ll-accordion__summary {
display: flex;
align-items: center;
cursor: pointer;
padding: var(--ll-space-3) var(--ll-space-4);
font-weight: var(--ll-weight-medium);
font-size: var(--ll-text-sm);
color: var(--ll-color-blue);
transition: all var(--ll-duration-fast) var(--ll-ease-out);
user-select: none;
position: relative;
}
.ll-accordion__summary:hover {
background: rgba(78, 167, 252, 0.05);
}
.ll-accordion__summary:focus {
outline: none;
background: rgba(78, 167, 252, 0.1);
}
.ll-accordion__summary::-webkit-details-marker {
display: none;
}
.ll-accordion__icon {
width: 1em;
height: 1em;
margin-right: var(--ll-space-2);
flex-shrink: 0;
color: var(--ll-color-blue);
}
.ll-accordion__title {
font-weight: var(--ll-weight-medium);
color: var(--ll-color-blue);
margin-right: var(--ll-space-2);
}
.ll-accordion__subtitle {
font-weight: var(--ll-weight-normal);
opacity: 0.7;
color: var(--ll-color-blue);
}
.ll-accordion__chevron {
width: 1em;
height: 1em;
margin-left: auto;
flex-shrink: 0;
color: var(--ll-color-blue);
transition: transform var(--ll-duration) var(--ll-ease-out);
}
.ll-accordion[open] .ll-accordion__chevron {
transform: rotate(180deg);
}
.ll-accordion__content {
padding: 0 var(--ll-space-4) var(--ll-space-4);
color: var(--ll-text-secondary);
font-size: var(--ll-text-sm);
line-height: var(--ll-lh-relaxed);
}
.ll-accordion__content > *:first-child {
margin-top: 0;
}
.ll-accordion__content > *:last-child {
margin-bottom: 0;
}
.ll-accordion__content p {
margin: 0 0 var(--ll-space-3) 0;
}
.ll-accordion__content p:last-child {
margin-bottom: 0;
}
.ll-accordion__content ol,
.ll-accordion__content ul {
margin: var(--ll-space-3) 0;
padding-left: var(--ll-space-5);
}
.ll-accordion__content li {
margin-bottom: var(--ll-space-2);
}
.ll-accordion__content a {
color: var(--ll-link-primary);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-decoration-color: var(--ll-text-quaternary);
text-underline-offset: 2.5px;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-accordion__content a:hover {
color: var(--ll-link-hover);
text-decoration-color: var(--ll-link-hover);
}
.ll-accordion__content strong {
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
}
.ll-accordion__content em {
font-style: italic;
color: var(--ll-text-secondary);
}
/* =============================================================================
ACCORDION VARIANTS
============================================================================= */
/* Blue variants (Info, Note, Recall) */
.ll-accordion--info,
.ll-accordion--note,
.ll-accordion--recall {
border-left-color: var(--ll-color-blue);
background: rgba(78, 167, 252, 0.02);
}
.ll-accordion--info .ll-accordion__summary,
.ll-accordion--info .ll-accordion__title,
.ll-accordion--info .ll-accordion__subtitle,
.ll-accordion--info .ll-accordion__icon,
.ll-accordion--info .ll-accordion__chevron,
.ll-accordion--note .ll-accordion__summary,
.ll-accordion--note .ll-accordion__title,
.ll-accordion--note .ll-accordion__subtitle,
.ll-accordion--note .ll-accordion__icon,
.ll-accordion--note .ll-accordion__chevron,
.ll-accordion--recall .ll-accordion__summary,
.ll-accordion--recall .ll-accordion__title,
.ll-accordion--recall .ll-accordion__subtitle,
.ll-accordion--recall .ll-accordion__icon,
.ll-accordion--recall .ll-accordion__chevron {
color: var(--ll-color-blue);
}
.ll-accordion--info .ll-accordion__summary:hover,
.ll-accordion--note .ll-accordion__summary:hover,
.ll-accordion--recall .ll-accordion__summary:hover {
background: rgba(78, 167, 252, 0.05);
}
/* Teal variants (Theorem, Definition) */
.ll-accordion--theorem,
.ll-accordion--definition {
border-left-color: #14b8a6;
background: rgba(20, 184, 166, 0.02);
}
.ll-accordion--theorem .ll-accordion__summary,
.ll-accordion--theorem .ll-accordion__title,
.ll-accordion--theorem .ll-accordion__subtitle,
.ll-accordion--theorem .ll-accordion__icon,
.ll-accordion--theorem .ll-accordion__chevron,
.ll-accordion--definition .ll-accordion__summary,
.ll-accordion--definition .ll-accordion__title,
.ll-accordion--definition .ll-accordion__subtitle,
.ll-accordion--definition .ll-accordion__icon,
.ll-accordion--definition .ll-accordion__chevron {
color: #14b8a6;
}
.ll-accordion--theorem .ll-accordion__summary:hover,
.ll-accordion--definition .ll-accordion__summary:hover {
background: rgba(20, 184, 166, 0.05);
}
/* Green variants (Success, Tip, Check, Proof) */
.ll-accordion--success,
.ll-accordion--tip,
.ll-accordion--check,
.ll-accordion--proof {
border-left-color: var(--ll-color-green);
background: rgba(76, 183, 130, 0.02);
}
.ll-accordion--success .ll-accordion__summary,
.ll-accordion--success .ll-accordion__title,
.ll-accordion--success .ll-accordion__subtitle,
.ll-accordion--success .ll-accordion__icon,
.ll-accordion--success .ll-accordion__chevron,
.ll-accordion--tip .ll-accordion__summary,
.ll-accordion--tip .ll-accordion__title,
.ll-accordion--tip .ll-accordion__subtitle,
.ll-accordion--tip .ll-accordion__icon,
.ll-accordion--tip .ll-accordion__chevron,
.ll-accordion--check .ll-accordion__summary,
.ll-accordion--check .ll-accordion__title,
.ll-accordion--check .ll-accordion__subtitle,
.ll-accordion--check .ll-accordion__icon,
.ll-accordion--check .ll-accordion__chevron,
.ll-accordion--proof .ll-accordion__summary,
.ll-accordion--proof .ll-accordion__title,
.ll-accordion--proof .ll-accordion__subtitle,
.ll-accordion--proof .ll-accordion__icon,
.ll-accordion--proof .ll-accordion__chevron {
color: var(--ll-color-green);
}
.ll-accordion--success .ll-accordion__summary:hover,
.ll-accordion--tip .ll-accordion__summary:hover,
.ll-accordion--check .ll-accordion__summary:hover,
.ll-accordion--proof .ll-accordion__summary:hover {
background: rgba(76, 183, 130, 0.05);
}
/* Orange variants (Warning, Exercise) */
.ll-accordion--warning,
.ll-accordion--exercise {
border-left-color: var(--ll-color-orange);
background: rgba(252, 120, 64, 0.02);
}
.ll-accordion--warning .ll-accordion__summary,
.ll-accordion--warning .ll-accordion__title,
.ll-accordion--warning .ll-accordion__subtitle,
.ll-accordion--warning .ll-accordion__icon,
.ll-accordion--warning .ll-accordion__chevron,
.ll-accordion--exercise .ll-accordion__summary,
.ll-accordion--exercise .ll-accordion__title,
.ll-accordion--exercise .ll-accordion__subtitle,
.ll-accordion--exercise .ll-accordion__icon,
.ll-accordion--exercise .ll-accordion__chevron {
color: var(--ll-color-orange);
}
.ll-accordion--warning .ll-accordion__summary:hover,
.ll-accordion--exercise .ll-accordion__summary:hover {
background: rgba(252, 120, 64, 0.05);
}
/* Red variants (Error, Danger) */
.ll-accordion--error,
.ll-accordion--danger {
border-left-color: var(--ll-color-red);
background: rgba(235, 87, 87, 0.02);
}
.ll-accordion--error .ll-accordion__summary,
.ll-accordion--error .ll-accordion__title,
.ll-accordion--error .ll-accordion__subtitle,
.ll-accordion--error .ll-accordion__icon,
.ll-accordion--error .ll-accordion__chevron,
.ll-accordion--danger .ll-accordion__summary,
.ll-accordion--danger .ll-accordion__title,
.ll-accordion--danger .ll-accordion__subtitle,
.ll-accordion--danger .ll-accordion__icon,
.ll-accordion--danger .ll-accordion__chevron {
color: var(--ll-color-red);
}
.ll-accordion--error .ll-accordion__summary:hover,
.ll-accordion--danger .ll-accordion__summary:hover {
background: rgba(235, 87, 87, 0.05);
}
/* Purple variants (Lemma, Example) */
.ll-accordion--lemma,
.ll-accordion--example {
border-left-color: #a855f7;
background: rgba(168, 85, 247, 0.02);
}
.ll-accordion--lemma .ll-accordion__summary,
.ll-accordion--lemma .ll-accordion__title,
.ll-accordion--lemma .ll-accordion__subtitle,
.ll-accordion--lemma .ll-accordion__icon,
.ll-accordion--lemma .ll-accordion__chevron,
.ll-accordion--example .ll-accordion__summary,
.ll-accordion--example .ll-accordion__title,
.ll-accordion--example .ll-accordion__subtitle,
.ll-accordion--example .ll-accordion__icon,
.ll-accordion--example .ll-accordion__chevron {
color: #a855f7;
}
.ll-accordion--lemma .ll-accordion__summary:hover,
.ll-accordion--example .ll-accordion__summary:hover {
background: rgba(168, 85, 247, 0.05);
}
/* Indigo variants */
.ll-accordion--indigo {
border-left-color: var(--ll-color-indigo);
background: rgba(94, 106, 210, 0.02);
}
.ll-accordion--indigo .ll-accordion__summary,
.ll-accordion--indigo .ll-accordion__title,
.ll-accordion--indigo .ll-accordion__subtitle,
.ll-accordion--indigo .ll-accordion__icon,
.ll-accordion--indigo .ll-accordion__chevron {
color: var(--ll-color-indigo);
}
.ll-accordion--indigo .ll-accordion__summary:hover {
background: rgba(94, 106, 210, 0.05);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ll-accordion {
margin: var(--ll-space-4) 0;
}
.ll-accordion__summary {
padding: var(--ll-space-2) var(--ll-space-3);
font-size: var(--ll-text-xs);
}
.ll-accordion__content {
padding: 0 var(--ll-space-3) var(--ll-space-3);
font-size: var(--ll-text-xs);
}
}
/* Dark theme adjustments */
[data-theme="dark"] .ll-accordion {
background: rgba(78, 167, 252, 0.05);
}
[data-theme="dark"] .ll-accordion[open] {
background: rgba(78, 167, 252, 0.1);
}
[data-theme="dark"] .ll-accordion__summary:hover {
background: rgba(78, 167, 252, 0.1);
}
/* =============================================================================
MOBILE TABLE OF CONTENTS COMPONENT
============================================================================= */
.ll-mobile-toc {
width: 100%;
position: sticky;
top: calc(var(--ll-header-height) - var(--ll-space-3)); /* Position below the main header height */
z-index: 998; /* Below header (1000) but above content */
background: var(--ll-bg-primary);
border-bottom: 1px solid var(--ll-border-primary);
margin-top: 0;
margin-bottom: 0;
}
@media (min-width: 1280px) {
.ll-mobile-toc {
display: none;
}
}
/* Ensure proper sticky behavior */
.ll-mobile-toc {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
/* Ensure the background is solid and covers content */
background: var(--ll-bg-primary);
/* Add backdrop filter for better visibility */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* Add smooth transition for sticky behavior */
.ll-mobile-toc__summary {
transition: background-color 0.2s ease;
}
.ll-mobile-toc__summary {
display: flex;
width: 100%;
cursor: pointer;
align-items: center;
justify-content: space-between;
outline: none;
}
.ll-mobile-toc__summary::-webkit-details-marker {
display: none;
}
.ll-mobile-toc__header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--ll-prose-max-width, 72rem);
margin: 0 auto;
padding: var(--ll-space-3) var(--ll-space-4);
}
.ll-mobile-toc__progress {
position: relative;
margin-right: var(--ll-space-2);
width: 16px;
height: 16px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ll-mobile-toc__progress-svg {
width: 16px;
height: 16px;
transform: rotate(0deg);
}
.ll-mobile-toc__progress-bg {
color: var(--ll-text-quaternary);
opacity: 0.2;
}
.ll-mobile-toc__progress-circle {
color: var(--ll-accent);
transition: stroke-dashoffset 0.3s ease-out, color 0.3s ease-out;
stroke-linecap: round;
filter: drop-shadow(0 0 2px rgba(113, 112, 255, 0.3));
}
/* Progress states for visual feedback */
.ll-mobile-toc__progress-circle.progress-low {
color: var(--ll-accent);
filter: drop-shadow(0 0 2px rgba(113, 112, 255, 0.3));
}
.ll-mobile-toc__progress-circle.progress-medium {
color: var(--ll-accent);
filter: drop-shadow(0 0 3px rgba(113, 112, 255, 0.4));
}
.ll-mobile-toc__progress-circle.progress-high {
color: var(--ll-color-green);
filter: drop-shadow(0 0 4px rgba(76, 183, 130, 0.6));
animation: progress-glow 2s ease-in-out infinite alternate;
}
/* Glow animation for high progress */
@keyframes progress-glow {
0% { filter: drop-shadow(0 0 4px rgba(76, 183, 130, 0.6)); }
100% { filter: drop-shadow(0 0 6px rgba(76, 183, 130, 0.8)); }
}
/* Progress text styling */
.ll-mobile-toc__progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8px;
font-weight: var(--ll-weight-semibold);
color: var(--ll-text-primary);
opacity: 0;
transition: opacity 0.3s ease-out;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 2;
}
/* Show progress text on hover */
.ll-mobile-toc__progress:hover .ll-mobile-toc__progress-text {
opacity: 1;
}
.ll-mobile-toc__current-section {
color: var(--ll-text-tertiary);
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--ll-text-base);
line-height: var(--ll-lh-normal);
font-weight: var(--ll-weight-semibold);
}
.ll-mobile-toc__chevron {
color: var(--ll-text-tertiary);
margin-left: var(--ll-space-2);
transition: transform var(--ll-duration-fast) var(--ll-ease-out);
flex-shrink: 0;
}
details[open] .ll-mobile-toc__chevron {
transform: rotate(180deg);
}
.ll-mobile-toc__content {
max-height: 30vh;
overflow: hidden;
/* Ensure content area has proper background */
background: var(--ll-bg-primary);
position: relative;
}
.ll-mobile-toc__scroll-area {
max-width: var(--ll-prose-max-width, 72rem);
margin: 0 auto;
}
.ll-mobile-toc__list-container {
max-height: 30vh;
overflow-y: auto;
position: relative;
}
/* Progressive disclosure blur effect at bottom */
.ll-mobile-toc__list-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(
to bottom,
transparent 0%,
var(--ll-bg-primary) 100%
);
pointer-events: none;
z-index: 1;
}
/* Also apply blur effect to the content area for better visibility */
.ll-mobile-toc__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(
to bottom,
transparent 0%,
var(--ll-bg-primary) 100%
);
pointer-events: none;
z-index: 1;
}
.ll-mobile-toc__list {
display: flex;
list-style: none;
flex-direction: column;
gap: var(--ll-space-2);
padding: 0 var(--ll-space-4) var(--ll-space-4);
margin: 0;
}
.ll-mobile-toc__item {
display: block;
padding: var(--ll-space-2);
font-size: var(--ll-text-sm);
color: var(--ll-text-tertiary);
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: all var(--ll-duration-fast) var(--ll-ease-out);
border-radius: var(--ll-radius-sm);
line-height: var(--ll-lh-normal);
}
.ll-mobile-toc__item:hover {
color: var(--ll-text-primary);
background: var(--ll-bg-secondary);
}
.ll-mobile-toc__item.active {
color: var(--ll-accent);
font-weight: var(--ll-weight-normal);
background: var(--ll-accent-tint);
}
/* Active state transitions */
.ll-mobile-toc__item {
transition: all var(--ll-duration-fast) var(--ll-ease-out);
}
.ll-mobile-toc__item.active {
transform: translateX(2px);
}
/* Scrollbar styling for TOC */
.ll-mobile-toc__list-container::-webkit-scrollbar {
width: 4px;
}
.ll-mobile-toc__list-container::-webkit-scrollbar-track {
background: transparent;
}
.ll-mobile-toc__list-container::-webkit-scrollbar-thumb {
background: var(--ll-border-tertiary);
border-radius: 2px;
}
.ll-mobile-toc__list-container::-webkit-scrollbar-thumb:hover {
background: var(--ll-border-secondary);
}
/* Firefox scrollbar */
.ll-mobile-toc__list-container {
scrollbar-width: thin;
scrollbar-color: var(--ll-border-tertiary) transparent;
}
/* Group hover effects */
.group:hover .ll-mobile-toc__current-section {
color: var(--ll-text-secondary);
}
.group:hover .ll-mobile-toc__chevron {
color: var(--ll-text-secondary);
}
/* Focus states for accessibility */
.ll-mobile-toc__summary:focus-visible {
outline: 2px solid var(--ll-focus-ring-color);
outline-offset: 2px;
border-radius: var(--ll-radius-sm);
}
.ll-mobile-toc__item:focus-visible {
outline: 2px solid var(--ll-focus-ring-color);
outline-offset: 2px;
border-radius: var(--ll-radius-sm);
}
/* Automatic heading hierarchy indentation */
.ll-mobile-toc__item--h2 {
margin-left: var(--ll-space-4);
}
.ll-mobile-toc__item--h3 {
margin-left: var(--ll-space-6);
}
.ll-mobile-toc__item--h4 {
margin-left: var(--ll-space-8);
}
.ll-mobile-toc__item--h5 {
margin-left: var(--ll-space-10);
}
.ll-mobile-toc__item--h6 {
margin-left: var(--ll-space-10);
}
/* Responsive adjustments */
@media (max-width: 768px) {
/* Mobile header height reduction - override sticky header */
.ll-section {
padding-block: var(--ll-space-3) !important; /* 12px top/bottom - force override */
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
}
.ll-navbar {
padding: var(--ll-space-3) var(--ll-space-4) !important; /* 12px top/bottom, 16px left/right */
}
.ll-navbar a {
height: 20px !important;
line-height: 20px !important;
display: flex;
align-items: center;
}
/* Mobile TOC positioning override for mobile */
.ll-mobile-toc { /* Account for reduced mobile header height */
z-index: 998 !important; /* Ensure it stays below header but above content */
}
.ll-mobile-toc__header {
padding: var(--ll-space-3) var(--ll-space-4);
}
.ll-mobile-toc__list {
padding: 0 var(--ll-space-3) var(--ll-space-4);
gap: var(--ll-space-1);
}
.ll-mobile-toc__item {
padding: var(--ll-space-2);
font-size: var(--ll-text-sm);
}
.ll-mobile-toc__content {
max-height: 25vh;
position: relative; /* Ensure blur effect works */
}
.ll-mobile-toc__list-container {
max-height: 30vh;
position: relative; /* Ensure blur effect works */
}
/* Adjust indentation for mobile */
.ll-mobile-toc__item--h3 {
margin-left: var(--ll-space-4);
}
.ll-mobile-toc__item--h4 {
margin-left: var(--ll-space-6);
}
.ll-mobile-toc__item--h5,
.ll-mobile-toc__item--h6 {
margin-left: var(--ll-space-6);
}
}
/* Animation for smooth transitions */
.ll-mobile-toc__content {
transition: max-height var(--ll-duration-fast) var(--ll-ease-out);
}
/* Progress circle pulse animation for updates */
@keyframes progress-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.ll-mobile-toc__progress-circle.updating {
animation: progress-pulse 0.3s ease-out;
}
details:not([open]) .ll-mobile-toc__content {
max-height: 0;
}
/* Ensure proper spacing in the layout */
.ll-mobile-toc + .ll-prose {
margin-top: var(--ll-space-4);
}
/* Ensure mobile TOC doesn't interfere with content flow */
.ll-mobile-toc {
margin: 0;
padding: 0;
}
/* Add proper spacing after mobile TOC when it's sticky */
.ll-mobile-toc + main,
.ll-mobile-toc + .ll-article {
margin-top: 0;
}
/* Dark theme adjustments */
[data-theme="dark"] .ll-mobile-toc__progress-bg {
color: var(--ll-text-quaternary);
opacity: 0.3;
}
[data-theme="dark"] .ll-mobile-toc__progress-circle {
color: var(--ll-accent);
}