/* ============================================================ Precision Editing Studio — RefineAnything Design system: dark #13131b, violet #7c3aed, amber #ffb95f ============================================================ */ /* -- Google Fonts loaded in -- */ /* ---- Custom Properties ---- */ :root { --bg: #13131b; --surface-low: #1b1b23; --surface: #1f1f27; --surface-high: #292932; --surface-highest: #34343d; --primary: #7c3aed; --primary-light: #d2bbff; --secondary: #ffb95f; --text-primary: #e4e1ed; --text-secondary: #ccc3d8; --outline: #4a4455; --radius: 4px; --font-heading: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Mono', monospace; --glow-violet: 0 0 24px rgba(124, 58, 237, 0.12); --section-pad: 64px; --container-max: 1120px; --card-gap: 32px; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); } a { color: var(--primary-light); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; } /* ---- Layout ---- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } section { padding: var(--section-pad) 0; } /* Section-specific backgrounds per design system */ #hero { background: var(--bg); } #abstract { background: var(--surface-low); } #introduction{ background: var(--bg); } #related-work{ background: var(--surface-low); } #method { background: var(--bg); } #experiments { background: var(--surface-low); } #ablation { background: var(--bg); } #conclusion { background: var(--surface-low); } #references { background: var(--bg); } /* ---- Sticky Flecto Header ---- */ .site-header { position: sticky; top: 0; z-index: 9999; background: #1a1a2e; padding: 6px 16px; font-family: system-ui, sans-serif; font-size: 13px; border-bottom: 1px solid #333; } .site-header a { color: #8b8bcd; text-decoration: none; } .site-header a:hover { color: var(--primary-light); } /* ---- Section Headings ---- */ .section-label { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 8px; } h2.section-title { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin-bottom: 32px; } h3.subsection-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; } /* ---- Hero ---- */ #hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: var(--bg); padding: 80px 0 64px; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-overlay { position: absolute; inset: 0; background: rgba(19, 19, 27, 0.72); } /* Radial violet glow top-right */ #hero::after { content: ''; position: absolute; top: -120px; right: -120px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 760px; } .hero-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; background: var(--surface-highest); color: var(--text-secondary); padding: 4px 12px; border-radius: var(--radius); margin-bottom: 20px; letter-spacing: 0.04em; } #hero h1 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.15; } .hero-authors { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 28px; } .hero-metrics { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; } .metric-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .metric-value { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: var(--primary); line-height: 1; } .metric-label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); } .hero-teaser { font-size: 1rem; color: var(--text-primary); max-width: 680px; line-height: 1.7; margin-bottom: 32px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: var(--radius); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: opacity 0.18s ease-out; } .btn:hover { opacity: 0.85; text-decoration: none; } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #9d5ff3 100%); color: #fff; } .btn-ghost { background: transparent; color: var(--primary-light); border: 1px solid var(--outline); } /* ---- Abstract ---- */ .abstract-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 768px) { .abstract-two-col { grid-template-columns: 1fr; } } .abstract-text p { color: var(--text-primary); margin-bottom: 16px; } .abstract-text p:last-child { margin-bottom: 0; } .innovation-card { background: var(--surface-high); border-left: 4px solid var(--secondary); border-radius: var(--radius); padding: 24px; box-shadow: var(--glow-violet); } .innovation-card .card-title { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--secondary); margin-bottom: 16px; } .innovation-card ul { list-style: none; padding: 0; } .innovation-card li { color: var(--text-primary); padding: 6px 0; padding-left: 20px; position: relative; font-size: 0.9rem; line-height: 1.5; } .innovation-card li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: 700; } /* ---- Contribution Cards ---- */ .contributions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: 32px; } @media (max-width: 900px) { .contributions-grid { grid-template-columns: 1fr; } } .contribution-card { background: var(--surface-high); border-radius: var(--radius); padding: 24px; position: relative; } .contribution-card .card-number { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; background: linear-gradient(135deg, var(--primary), #9d5ff3); color: #fff; padding: 3px 10px; border-radius: 2px; margin-bottom: 14px; letter-spacing: 0.06em; } .contribution-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: var(--text-primary); } .contribution-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } /* ---- Pipeline Step Cards ---- */ .pipeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin: 32px 0; } @media (max-width: 900px) { .pipeline-grid { grid-template-columns: 1fr; } } .pipeline-card { background: var(--surface-high); border-radius: var(--radius); padding: 24px; box-shadow: var(--glow-violet); } .pipeline-card .step-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; background: linear-gradient(135deg, var(--primary), #5b21b6); color: #fff; padding: 3px 10px; border-radius: 2px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.08em; } .pipeline-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; color: var(--primary-light); } .pipeline-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } /* ---- Dataset Card ---- */ .dataset-card { background: var(--surface-high); border-radius: var(--radius); padding: 28px; margin-top: 32px; } .dataset-card .dataset-title { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--secondary); margin-bottom: 12px; } .dataset-splits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } @media (max-width: 640px) { .dataset-splits { grid-template-columns: 1fr; } } .dataset-split { background: var(--surface-highest); border-radius: var(--radius); padding: 16px; } .dataset-split .split-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--secondary); margin-bottom: 6px; } .dataset-split p { font-size: 0.875rem; color: var(--text-secondary); } .pill { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; background: var(--secondary); color: #1a1a2e; padding: 2px 8px; border-radius: 12px; margin-right: 6px; vertical-align: middle; } /* ---- Ablation Cards ---- */ .ablation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-bottom: 32px; } @media (max-width: 900px) { .ablation-grid { grid-template-columns: 1fr; } } .ablation-card { background: var(--surface-high); border-radius: var(--radius); padding: 24px; } .ablation-card .component-badge { display: inline-block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: var(--secondary); color: #1a1a2e; padding: 3px 10px; border-radius: 2px; margin-bottom: 14px; } .ablation-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; } .ablation-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } /* ---- Figures ---- */ .figure-container { background: var(--surface); border-radius: var(--radius); padding: 20px; margin: 24px 0; } .figure-container img { width: 100%; height: auto; border-radius: var(--radius); } .figure-container figcaption { font-size: 0.875rem; color: var(--text-secondary); margin-top: 12px; line-height: 1.5; } .figure-container figcaption strong { color: var(--primary-light); } .figures-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; } @media (max-width: 700px) { .figures-row { grid-template-columns: 1fr; } } /* ---- Tables (image tables) ---- */ .table-container { background: var(--surface); border-radius: var(--radius); padding: 20px; margin: 24px 0; overflow-x: auto; } .table-container img { width: 100%; height: auto; } .table-container .table-caption { font-size: 0.875rem; color: var(--text-secondary); margin-top: 10px; } .table-container .table-caption strong { color: var(--primary-light); } /* ---- References ---- */ #references { background: var(--bg); } details > summary { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); cursor: pointer; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: '▶'; font-size: 0.75rem; color: var(--primary); transition: transform 0.18s ease-out; display: inline-block; } details[open] > summary::before { transform: rotate(90deg); } .references-list { list-style: decimal; padding-left: 20px; margin-top: 16px; } .references-list li { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; } /* ---- Intro problem text ---- */ .problem-text { background: var(--surface-low); border-left: 4px solid var(--primary); padding: 24px; border-radius: var(--radius); margin-bottom: 32px; } .problem-text p { margin-bottom: 12px; } .problem-text p:last-child { margin-bottom: 0; } /* ---- flecto-note/callout/card/panel ---- */ .flecto-note, .flecto-callout, .flecto-card, .flecto-panel { border-radius: var(--radius); padding: 16px 20px; margin: 20px 0; position: relative; } .flecto-note::before, .flecto-callout::before, .flecto-card::before, .flecto-panel::before { content: '🤖 AI explanation'; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #60a5fa; letter-spacing: 0.06em; display: block; margin-bottom: 0.5em; } .flecto-note { background: var(--surface); border-left: 3px solid var(--primary); font-size: 0.9rem; } .flecto-callout { background: rgba(124, 58, 237, 0.08); border: 1px solid var(--outline); } .flecto-card { background: var(--surface-high); border: 1px solid var(--outline); box-shadow: var(--glow-violet); } .flecto-panel { background: var(--surface-high); border: 1px solid var(--primary); padding: 24px; } /* ---- Lead text ---- */ .lead { font-size: 1.05rem; color: var(--text-primary); max-width: 800px; margin-bottom: 24px; } /* ---- Reveal animation (class added by JS) ---- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Footer ---- */ footer { background: var(--surface-low); padding: 32px 0; text-align: center; font-size: 0.875rem; color: var(--text-secondary); } footer a { color: var(--primary-light); } /* ---- Utility ---- */ .text-violet { color: var(--primary); } .text-amber { color: var(--secondary); } .mono { font-family: var(--font-mono); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }