/* Vanderbilt stats-homework theme — built directly on the Repped Labs Design System tokens (github.com/Repped-Labs/repped-studio, PR #39, "design_handoff_repped_labs/Repped Labs Design System/tokens.css"). Black-first, neon-accented, glass surfaces. Three selectable accent variants via [data-theme] on (toggled by theme-switcher.html); default = "acid". */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&family=Caveat:wght@600;700&display=swap'); :root { /* ---- Surfaces (near-black — black always leads) ---- */ --bg: #0a0a0a; --bg-deep: #050505; --bg-mid: #0c0c0c; --surface: rgba(15, 15, 16, .5); --surface-2: rgba(16, 16, 16, .55); --surface-3: rgba(20, 20, 20, .7); --surface-opaque: #141414; --glass-blur: blur(24px) saturate(150%); /* ---- Text (warm off-white on black, AA alpha ladder) ---- */ --text: #f7f1e6; --text-strong: #ffffff; --text-lead: rgba(247, 241, 230, .86); --text-body: rgba(247, 241, 230, .82); --text-muted: rgba(247, 241, 230, .74); --text-faint: rgba(247, 241, 230, .68); /* ---- The graffiti palette (six neons, ~6:1 on --bg) ---- */ --acid: #d4ff00; --acid-hi: #e6ff4d; --orange: #ff9e2c; --pink: #ff3da6; --pink-soft: #ff7cc4; --cyan: #5bcefa; --violet: #c56bff; --mint: #3ee88f; --cream: #e9e2d0; /* ---- Borders / glass / shadows ---- */ --border: rgba(247, 241, 230, .14); --border-emphasis: rgba(247, 241, 230, .2); --border-featured: rgba(212, 255, 0, .6); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .14); --glass: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.01) 60%); --shadow-md: 0 12px 32px rgba(0, 0, 0, .65); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .7); /* ---- Typography ---- */ --font-display: 'Montserrat', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; --font-hand: 'Caveat', 'Segoe Script', cursive; /* ---- Radii ---- */ --r-md: 14px; --r-lg: 16px; --r-xl: 20px; --r-pill: 99px; /* Primary accent — swapped per theme, everything else stays the same six-neon set */ --primary: var(--acid); --primary-ink: #0a0a0a; } /* ---- Accent variants: pick which neon owns primary/active affordances ---- */ html[data-theme="acid"] { --primary: var(--acid); --primary-ink: #0a0a0a; } html[data-theme="pink"] { --primary: var(--pink); --primary-ink: #1a0410; } html[data-theme="cyan"] { --primary: var(--cyan); --primary-ink: #04141c; } /* ================================================================== */ * { box-sizing: border-box; } html { color-scheme: dark; background: var(--bg); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { position: relative; background: var(--bg); background-image: linear-gradient(180deg, var(--bg), var(--bg-mid) 40%, var(--bg)); background-attachment: fixed; color: var(--text-body); font-family: var(--font-body); font-weight: 400; min-height: 100vh; max-width: 1180px; width: 100%; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 48px) 8rem; line-height: 1.7; font-size: 18px; -webkit-font-smoothing: antialiased; } /* Pandoc's default title block — replaced by our .doc-header */ h1.title, .title, .author, .date { display: none; } /* ---------------- Ambient decoration layer (behind content) ---------------- */ #rl-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #rl-ambient .blob { position: absolute; border-radius: 9999px; filter: blur(56px); } #rl-ambient .blob.a { animation: rl-blobA 9s ease-in-out infinite; } #rl-ambient .blob.b { animation: rl-blobB 11s ease-in-out infinite; } #rl-ambient .twinkle { position: absolute; font-size: 15px; animation: rl-twinkle 3.2s ease-in-out infinite; user-select: none; } #rl-glow { position: absolute; top: 0; left: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 9999px; opacity: 0; transition: opacity 1.2s ease; background: radial-gradient(circle at 50% 50%, rgba(255,158,44,.14), rgba(212,255,0,.07) 45%, transparent 68%); will-change: transform, opacity; } #rl-glow[data-active="true"] { opacity: 1; } @keyframes rl-blobA { 0%,100% { transform: none; } 50% { transform: translate(24px, -18px) scale(1.06); } } @keyframes rl-blobB { 0%,100% { transform: none; } 50% { transform: translate(-20px, 16px) scale(1.05); } } @keyframes rl-twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } #rl-glow, #rl-ambient { display: none !important; } } /* ---------------- Content sits above the ambient layer ---------------- */ body > * { position: relative; z-index: 1; } /* ---------------- Doc header (title block) — floats free, no card ---------------- */ .doc-header { text-align: center; padding: clamp(20px, 4vw, 32px) 0 clamp(28px, 5vw, 40px); margin-bottom: 1.5rem; } .doc-footer-logo { display: flex; justify-content: center; padding: 3rem 1rem 1rem; } .doc-footer-logo img.doc-logo { max-width: 340px; width: 45%; height: auto; opacity: .9; filter: drop-shadow(0 14px 26px rgba(0,0,0,.75)); } .doc-header .doc-byline { font-family: var(--font-display); font-weight: 700; color: var(--text); line-height: 1.4; letter-spacing: -0.005em; margin-bottom: 0.5rem; } .doc-header .doc-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; font-size: clamp(2.6rem, 5.5vw, 3.6rem); color: var(--text-strong); margin: 0.25rem 0; } .doc-header .doc-course { font-family: var(--font-body); font-weight: 600; color: var(--primary); font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin-top: 0.6rem; letter-spacing: 0.01em; } .doc-header .doc-affiliation { font-family: var(--font-body); font-weight: 600; color: var(--text); font-size: clamp(1.15rem, 1.8vw, 1.3rem); margin-top: 0.4rem; } .doc-header .doc-date { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .24em; color: var(--text-muted); font-size: 13px; margin-top: 1.25rem; } /* ---------------- Table of contents ---------------- */ .doc-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; background: var(--glass), var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.5rem; margin: 2rem 0; } .doc-toc .doc-toc-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; color: var(--text-muted); margin-right: 0.25rem; } .doc-toc a { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.5rem 1.1rem; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; } .doc-toc a span { color: var(--primary); font-weight: 700; margin-left: 0.35rem; } .doc-toc a:hover { border-color: var(--primary); color: var(--text-strong); } /* ---------------- Back-to-top links ---------------- */ a.back-to-top { display: inline-block; margin-top: 1.75rem; font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); text-decoration: none; } a.back-to-top:hover { color: var(--primary); } /* ---------------- Collapsible sections (e.g. Reflection), collapsed by default ---------------- */ details.collapsible { width: 100%; box-sizing: border-box; margin: 2.5rem 0; } details.collapsible summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--text-strong); letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } details.collapsible[open] summary { padding-bottom: 0.75rem; border-bottom: 1.5px solid var(--border-featured); margin-bottom: 1.25rem; } details.collapsible summary::-webkit-details-marker { display: none; } details.collapsible summary::after { content: "Show ▾"; font-family: var(--font-body); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); flex-shrink: 0; } details.collapsible[open] summary::after { content: "Hide ▴"; } /* ---------------- Section glass cards (pandoc --section-divs) ---------------- */ div.section.level2, details.section.level2 { background: var(--glass), var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-emphasis); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px); margin: 2.5rem 0; box-shadow: var(--shadow-md), var(--glass-edge); transition: transform .25s ease, border-color .25s ease; } div.section.level2:hover { transform: translateY(-3px); border-color: var(--cream); } div.section.level3 { background: var(--glass), var(--surface-3); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; color: var(--text-strong); letter-spacing: -0.01em; text-wrap: balance; line-height: 1.2; } h2 { font-size: 28px; margin: 0 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1.5px solid var(--border-featured); } h3 { font-size: 20px; color: var(--primary); margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } p, li { font-size: 18px; color: var(--text-body); } a { color: var(--cream); text-decoration: underline; text-decoration-thickness: 1.5px; } a:hover { color: var(--text-strong); } strong { color: var(--text-strong); font-weight: 700; } em { color: var(--text-muted); font-style: italic; } /* Disclosure note — quiet card, not a glass panel (it's a footnote, not content) */ p:has(> em:only-child) { background: var(--surface-3); border: 1px solid var(--border); border-left: 3px solid var(--violet); border-radius: var(--r-md); padding: 1.1rem 1.4rem; font-size: 15px; color: var(--text-muted); } /* R code chunks + printed output */ pre, pre.r, pre.sourceCode { background: var(--glass), var(--surface-3) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; overflow-x: auto; font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 1.01em; line-height: 1.7; margin: 1.5rem 0; box-shadow: var(--shadow-md), var(--glass-edge); } code { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; background-color: var(--surface-3); color: var(--acid); padding: 0.18rem 0.5rem; border-radius: 6px; font-size: 0.95em; font-weight: 500; } pre code { background-color: transparent; color: var(--text); padding: 0; font-size: 1em; } table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 100%; margin: 2.25rem 0 20px; padding: 20px; border: 1px solid var(--border-emphasis); border-radius: var(--r-xl); overflow: hidden; font-size: 1.15rem; box-shadow: var(--shadow-md), var(--glass-edge); } th, td { border-bottom: 1px solid var(--border); padding: 1.35rem 1.6rem; text-align: left; line-height: 1.5; } tr:last-child td { border-bottom: none; } th { /* background: var(--glass), var(--surface-3); */ backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--primary); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 16px; } td { background: var(--glass), var(--surface-2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text-body); font-size: 1.5em; } blockquote { border-left: 3px solid var(--pink); background: var(--surface-3); border-radius: 0 var(--r-md) var(--r-md) 0; margin: 1.5rem 0; padding: 1rem 1.4rem; color: var(--text-muted); } hr { border: none; border-top: 1px solid var(--border); margin: 3rem 0; } ::selection { background-color: var(--primary); color: var(--primary-ink); }