/* ============================================================ paper.css — paper-site component library Pairs with paper.js. Each section below is a self-contained component; markup uses simple class names and data-* attributes (paper.js auto-discovers everything on DOMContentLoaded). THEMING — All themeable colours use CSS custom properties defined in themes.css. The three built-in themes are: light (default) · dark · paper Switch via `data-theme` on or PaperThemes.set('…'). ============================================================ */ /* Component-local knobs (not themable — layout / sizing only) */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--fg); background: var(--bg); line-height: 1.65; font-size: 17px; } h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; letter-spacing: -0.01em; } h1 { font-size: 48px; margin: 0 0 16px; } h2 { font-size: 32px; margin: 0 0 24px; } h3 { font-size: 22px; margin: 0 0 12px; } p { margin: 0 0 18px; } ::selection { background: var(--selection-bg, var(--accent-2)); color: var(--selection-fg, #ffffff); } .container { max-width: 980px; margin: 0 auto; padding: 0 24px; } .narrow { max-width: 720px; } .muted { color: var(--muted); } section { padding: 96px 0; } section.alt { background: var(--bg-soft); } /* ---------------- Reveal-on-scroll ---------------- */ .reveal { opacity: 0; transform: translateY(24px); } /* ---------------- Hero ---------------- */ .hero { position: relative; min-height: 90vh; min-height: 90svh; /* iOS Safari: avoid jump when address bar collapses */ display: flex; align-items: center; text-align: center; overflow: hidden; /* clip floating background shapes */ } .hero > .container { position: relative; z-index: 2; } .hero > .side-card { z-index: 2; } /* keeps the original position: absolute */ /* ---------------- Floating background geometry ---------------- Decorative shapes scattered around the hero edges. Each .shape-N is a *positioning slot* (top/left/size/colour/animation); the visual shape is whatever / you put inside. Built-in shapes use the `.outline` modifier so their inner primitives inherit fill:none + stroke: currentColor. Custom SVGs you drop in (without .outline) keep their own colours. Wrapper is aria-hidden + pointer-events:none — purely visual, never interferes. Animations are disabled for users who prefer reduced motion. --------------------------------------------------------------- */ .hero-bg { position: absolute; inset: 0; pointer-events: none; user-select: none; z-index: 0; } .hero-bg .shape { position: absolute; width: var(--shape-w, 60px); height: var(--shape-h, 60px); opacity: var(--shape-opacity, 0.18); will-change: transform; /* For custom SVGs: preserve aspect ratio inside the slot box. */ object-fit: contain; } /* Built-in "outline" styling — opt in via class="shape outline …". Custom SVGs you author yourself omit `.outline` and keep their own fill / stroke / colour. */ .hero-bg .shape.outline circle, .hero-bg .shape.outline polygon, .hero-bg .shape.outline rect, .hero-bg .shape.outline line, .hero-bg .shape.outline path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .hero-bg .shape.outline circle.dot { fill: currentColor; stroke: none; } .hero-bg .shape.dotgrid circle { fill: currentColor; stroke: none; } /* Positioning slots. Pick one per shape — independent of what's inside, so swapping the SVG content keeps the same position. */ .hero-bg .shape-1 { top: 9%; left: 6%; --shape-w: 90px; --shape-h: 90px; color: var(--accent-2); animation: float-a 18s ease-in-out infinite; } .hero-bg .shape-2 { top: 7%; right: 10%; --shape-w: 72px; --shape-h: 72px; color: var(--accent-1); animation: float-b 22s ease-in-out infinite; } .hero-bg .shape-3 { top: 42%; left: 3%; --shape-w: 56px; --shape-h: 56px; color: var(--accent-3); animation: float-c 26s ease-in-out infinite; } .hero-bg .shape-4 { top: 38%; right: 4%; --shape-w: 64px; --shape-h: 64px; color: var(--accent-2); --shape-opacity: 0.14; animation: float-d 20s ease-in-out infinite; } .hero-bg .shape-5 { bottom: 14%; left: 14%; --shape-w: 60px; --shape-h: 60px; color: var(--accent-4); animation: float-e 24s ease-in-out infinite; } .hero-bg .shape-6 { bottom: 10%; right: 12%; --shape-w: 100px; --shape-h: 100px; color: var(--accent-2); --shape-opacity: 0.20; animation: float-f 28s ease-in-out infinite; } .hero-bg .shape-7 { top: 22%; right: 28%; --shape-w: 36px; --shape-h: 36px; color: var(--accent-3); --shape-opacity: 0.16; animation: float-g 19s ease-in-out infinite; } .hero-bg .shape-8 { bottom: 32%; left: 22%; --shape-w: 50px; --shape-h: 50px; color: var(--accent-1); --shape-opacity: 0.14; animation: float-h 23s ease-in-out infinite; } .hero-bg .shape-9 { bottom: 26%; right: 26%; --shape-w: 46px; --shape-h: 46px; color: var(--accent-4); --shape-opacity: 0.16; animation: float-i 21s ease-in-out infinite; } .hero-bg .shape-10 { top: 5%; right: 30%; --shape-w: 140px; --shape-h: 38px; color: var(--accent-2); --shape-opacity: 0.45; animation: float-j 25s ease-in-out infinite; } @keyframes float-a { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate( 20px,-20px) rotate( 15deg); } } @keyframes float-b { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-18px, 22px) rotate(-12deg); } } @keyframes float-c { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate( 22px, 14px) rotate( 20deg); } } @keyframes float-d { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-20px,-16px) rotate(-15deg); } } @keyframes float-e { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate( 16px,-24px) rotate( 10deg); } } @keyframes float-f { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-22px,-12px) rotate(-18deg); } } @keyframes float-g { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate( 14px, 18px) rotate( 25deg); } } @keyframes float-h { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-16px, 20px) rotate(-22deg); } } @keyframes float-i { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate( 18px,-14px) rotate( 18deg); } } @keyframes float-j { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-12px, 16px) rotate(-25deg); } } @media (prefers-reduced-motion: reduce) { .hero-bg .shape { animation: none; } } @media (max-width: 720px) { .hero-bg .shape { --shape-opacity: 0.11; } .hero-bg .shape-3, .hero-bg .shape-4, .hero-bg .shape-7, .hero-bg .shape-10 { display: none; } /* trim a few on mobile to reduce clutter */ .hero-annot { white-space: normal; } } .hero-annot { position: relative; white-space: nowrap; } .hero h1 { position: relative; } /* positioning context for rough-notation SVGs */ .hero .authors { color: var(--muted); margin-bottom: 8px; } /* ---------------- Action buttons (arXiv / GitHub / LinkedIn / …) ---- Branded outline buttons. Each variant sets --btn-color, which is used for the border, icon, and label, and as the fill on hover. Add new variants the same way: .btn-link.openreview { --btn-color: #8c1b13; } --------------------------------------------------------------- */ .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .btn-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid var(--btn-color, var(--rule)); border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--btn-color, var(--fg)); background: var(--bg); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .btn-link:hover { background: var(--btn-color); color: #fff; } .btn-link svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; } .btn-link i { font-size: 18px; line-height: 1; } /* academicons / fontawesome */ .btn-link.arxiv { --btn-color: #B31B1B; } /* arXiv Cornell red */ .btn-link.github { --btn-color: #181717; } /* GitHub near-black */ .btn-link.linkedin { --btn-color: #0A66C2; } /* LinkedIn blue */ /* ---------------- Scroll cue (bouncy "↓ scroll" hint) ---------- Markup:

scroll

The label stays still; the arrow (rendered via ::after) bounces. The whole element fades in after the hero annotations finish. --------------------------------------------------------------- */ .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 64px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; opacity: 0; animation: scroll-cue-in 0.8s ease 3.4s forwards; } .scroll-cue::after { content: '↓'; display: block; font-size: 22px; line-height: 1; font-weight: 400; animation: scroll-cue-bounce 1.4s ease-in-out infinite; } @keyframes scroll-cue-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes scroll-cue-bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } } /* Hero side cards. Per-card knobs via inline `style="--card-*: ..."`. */ .side-card { --card-width: 240px; --card-padding: 14px 16px; --card-font-size: 13.5px; --card-line-height: 1.55; --card-radius: 10px; --card-border-accent: 4px; --kicker-font-size: 11px; --body-font-size: inherit; position: absolute; width: var(--card-width); background: var(--bg); border: 1px solid var(--rule); border-left-width: var(--card-border-accent); border-radius: var(--card-radius); padding: var(--card-padding); font-size: var(--card-font-size); line-height: var(--card-line-height); text-align: left; box-shadow: var(--card-shadow); opacity: 0; } .side-card .kicker { font-size: var(--kicker-font-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .side-card .body { color: var(--card-body-fg); margin: 0; font-size: var(--body-font-size); } .side-card .body p { margin: 0 0 8px; } .side-card .body p:last-child { margin: 0; } .side-card .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .side-card .mini-fig { margin-top: 10px; height: 60px; border-radius: 6px; background: linear-gradient(135deg, var(--card-color, #ef4444), var(--card-color-2, #f59e0b)); } @media (max-width: 1100px) { .side-card { position: static; width: auto; max-width: 420px; margin: 12px auto 0; display: block; } } /* Mobile (≤720px): cards stack inline as colored callouts visually linked to their annotated phrase via the kicker color and a "↳ " prefix. The data-annot-ref attribute is set by initHero(); cards without it (standalone cards in non-hero sections) just get the wider colored border. */ @media (max-width: 720px) { .side-card { position: static !important; width: auto !important; max-width: none; margin: 18px 0 0 !important; transform: none !important; opacity: 1 !important; border-left-width: 6px; border-left-color: var(--card-color, var(--rule)); } .side-card[data-annot-ref]::before { content: "↳ " attr(data-annot-ref); display: block; font-size: 12px; color: var(--card-color, var(--muted)); font-weight: 600; margin-bottom: 8px; letter-spacing: 0.02em; text-transform: none; line-height: 1.4; } } /* ---------------- Annotations ---------------- */ .annot { cursor: help; transition: background-color .25s ease; border-radius: 3px; padding: 0 2px; } .annot.is-active { background-color: var(--annot-bg, var(--annotation-highlight)); } /* ---------------- Scrollytelling ---------------- */ .scrolly { position: relative; } .scrolly .stage { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; min-height: 100vh; height: 100vh; } .scrolly .text-col { max-height: 100vh; overflow: hidden; padding: 0 8px; } .scrolly .text-col p { margin-bottom: 22px; transition: color .15s ease; } .scrolly .text-col [data-slide] { cursor: pointer; padding: 6px 10px; border-radius: 6px; color: color-mix(in srgb, var(--muted) 45%, transparent); transition: background-color .12s ease, color .15s ease; } .scrolly .text-col [data-slide]:hover { background-color: var(--hover-bg); } .scrolly .text-col .is-active-para { color: var(--fg); background-color: var(--hover-bg); font-weight: 500; } .scrolly .text-col .is-active-para strong { color: var(--accent, #3b82f6); } .scrolly .text-col [data-slide].is-skip { cursor: pointer; font-style: italic; } /* Prevent italic from inheriting into nested (non-skip) child items */ .scrolly .text-col [data-slide].is-skip [data-slide] { font-style: normal; } /* Nested-list scrolly text. Authors can use a real
    /