docs/static/css/style.css

/* ═══════════════════════════════════════════════
   ϕ-Noise Project Page — Main Stylesheet (cleaned)
   - reorganized, deduplicated, and formatted for readability
   ═══════════════════════════════════════════════ */

/* ─── Design tokens ─── */
:root {
  --bg:            #f7f5f0;
  --surface:       #ffffff;
  --ink:           #1a1714;
  --ink-muted:     #5c564e;
  --accent:        #2d6a4f;
  --accent-light:  #d8f3e3;
  --accent-border: #a8d5bc;
  --accent2:       #b5451b;
  --border:        #e0dbd4;
  --code-bg:       #1a1714;
  --code-fg:       #d4c5a9;

  --font-mono:   'DM Mono', monospace;
  --font-serif:  'EB Garamond', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --shadow-sm:  0 2px 10px rgba(0,0,0,.04);
  --shadow-md:  0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.09);
}

/* ─── Base / Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

section { padding: 2rem; }

/* ─── Typography ─── */
h1 { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 500; line-height: 1.18; max-width: 1080px; margin-bottom: 0.5rem; }
h1 .phi { color: var(--accent); font-style: italic;}

h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; margin-bottom: 1.5rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--accent-light); }

h3 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; margin: 2rem 0 0.8rem; }

.underlined { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }

p { margin-bottom: 1rem; }
em { font-style: italic; }
strong { font-weight: 600; }

code { font-family: var(--font-mono); background: #f0ece6; padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.88em; }

/* ─── Containers ─── */
.container       { max-width: 860px;  margin: 0 auto; }
.container-wide  { max-width: 1100px; margin: 0 auto; }
.container-inner { max-width: 860px;  margin: 0 auto; }

/* ─── Navigation ─── */
#navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(247,245,240,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 2.5rem;
  padding: 0.75rem 2rem; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
#navbar a { color: var(--ink-muted); text-decoration: none; transition: color .2s; }
#navbar a:hover, #navbar a.active { color: var(--accent); }

/* ─── Hero ─── */
#hero { min-height: 50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:7rem 2rem 2rem; text-align:center; background: radial-gradient(ellipse 80% 60% at 50% 40%, #e8f5ee 0%, var(--bg) 70%); }
.venue-badge { display:inline-block; background:var(--accent-light); color:var(--accent); border:1px solid var(--accent-border); border-radius:50px; padding:0.25rem 1rem; font-size:0.78rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1.8rem; }
.subtitle { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--ink-muted); font-style: italic; max-width: 680px; margin: 0.5rem auto 2.5rem; }

/* utility */
.text-center { text-align: center; }
.muted-strong { font-weight: 600; font-size: 1.2rem; }

/* teaser layout helpers */
.teaser-row { display:flex; gap:1rem; justify-content:space-between; align-items:flex-end; flex-wrap:nowrap; }
.teaser-item { display:flex; flex-direction:column; width:32%; }
.teaser-item h3 { margin-top: 0; margin-bottom: 0.5rem; text-align: center; }

/* Authors */
.authors { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.8rem; margin-bottom:0.6rem; }
.author { font-size:1rem; }
.author a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--border); transition:border-color .2s, color .2s; }
.author a:hover { border-color:var(--accent); color:var(--accent); }
sup { color:var(--accent); font-size:0.65em; }
.affiliations { font-size:0.85rem; color:var(--ink-muted); margin-bottom:2rem; }
.equal-contrib { font-size:0.78rem; color:var(--ink-muted); font-style:italic; margin-bottom:2.5rem; }

/* CTA Buttons */
.ctas { display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center; }
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.2rem 1.0rem; border-radius:var(--radius-sm); font-size:0.88rem; font-weight:500; text-decoration:none; transition: background .18s, color .18s, border-color .18s; border:1.5px solid transparent; cursor:pointer; }
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:hover { background:var(--accent); }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.site-icon { width:30px; height:30px; vertical-align:middle; margin-right:0.5rem; display:inline-block; }

/* ─── Teaser ─── */
#teaser { max-width:960px; margin:0 auto 5rem; padding:0 2rem; }
.teaser-frame { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow-md); }
.teaser-caption { margin-top:1rem; font-size:0.88rem; color:var(--ink-muted); text-align:center; font-style:italic; }

/* Video gallery styles */
.gallery-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1rem; }
.gallery-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.6rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; }
.gallery-video { width:100%; height:auto; border-radius:6px; display:block; }
.card-caption { margin-top:0.5rem; font-size:0.9rem; color:var(--ink-muted); }

@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ─── Abstract / Overview / Method ─── */
.overview-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1.5rem; align-items:start; }
.overview-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:2rem; box-shadow:var(--shadow-sm); }
.overview-card .teaser-caption { margin-bottom:0; }
.abstract-text { font-size:1.12rem; line-height:1.85; color:#2d2a26; }

#abstract #method { background: var(--surface); }
.method-figure { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:2rem; box-shadow:var(--shadow-sm); margin:2rem 0; }
.pipeline-diagram { background:linear-gradient(135deg,#eef7f1,#fdf9f7); border-radius:8px; padding:2rem; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.5rem; min-height:180px; }
.pipe-row { width:100%; display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; }
.pipe-box { background:white; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:0.6rem 1rem; font-size:0.82rem; font-family:var(--font-mono); text-align:center; min-width:110px; }
.pipe-box.highlight { border-color:var(--accent); background:var(--accent-light); color:var(--accent); font-weight:500; }
.pipe-arrow { color:var(--ink-muted); font-size:1.1rem; }
.fig-caption { font-size:0.85rem; color:var(--ink-muted); margin-top:1rem; text-align:center; font-style:italic; }

/* ─── Video Components ─── */
.video-placeholder { position:relative; width:100%; border-radius:var(--radius-md); background:linear-gradient(135deg,#e8f5ee 0%,#eee8e2 100%); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; color:var(--ink-muted); aspect-ratio:16/9; }
.video-placeholder .play-icon { width:52px; height:52px; border-radius:50%; background:rgba(45,106,79,0.12); border:2px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.3rem; transition: background .2s, transform .2s; }
.video-placeholder:hover .play-icon { background:rgba(45,106,79,0.22); transform:scale(1.08); }
.video-placeholder .ph-label { font-size:0.78rem; font-family:var(--font-mono); opacity:0.6; max-width:160px; text-align:center; }

.responsive-video { width:100%; border-radius:8px; display:block; margin:0 auto; height:auto; }
.comparison-video { width:80%; height:auto; display:block; margin:0 auto; border-radius:8px; }
.figure-image { width:70%; height:auto; border-radius:6px; display:block; margin:0 auto; }
.teaser-placeholder { height:360px; background:linear-gradient(135deg,#e8f5ee 0%,#d4eddb 100%); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; color:var(--accent); font-size:0.9rem; }
.teaser-placeholder i { font-size:3rem; opacity:0.45; }

/* ─── Comparison grid ─── */
.comparison-row { display:grid; gap:0.2rem; margin:1.5rem 0; }
.comparison-row.cols-2 { grid-template-columns: 1fr 1fr; }
.comparison-row.cols-3 { grid-template-columns: repeat(3,1fr); }
.comparison-row.cols-4 { grid-template-columns: repeat(4,1fr); }

.video-cell { display:flex; flex-direction:column; gap:0; }
.video-cell .cell-label { font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-muted); text-align:center; }
.video-cell .cell-label.label-ours { color:var(--accent); }
.video-cell .cell-label.label-ref  { color:var(--accent2); }
.video-cell .video-placeholder { aspect-ratio:16/9; }

.prompt-tag { font-size:0.82rem; color:var(--ink-muted); font-style:italic; text-align:center; margin-top:0.5rem; margin-bottom:1.5rem; }
.prompt-tag strong { color:var(--ink); font-style:normal; }

/* Tabs */
.tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:2rem; }
.tab-btn { padding:0.55rem 1.2rem; font-size:0.85rem; font-weight:500; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; color:var(--ink-muted); margin-bottom:-2px; white-space:nowrap; transition: color .15s, border-color .15s; }
.tab-btn:hover { color:var(--ink); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.results-subhead { margin-top:2rem; font-size:1rem; color:var(--ink-muted); }
.muted-small { font-size:0.85rem; color:var(--ink-muted); }

/* Comparisons / Results */
#comparisons { background: var(--bg); }
#abstract, #method, #analysis, #comparisons { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.results-table-wrap { overflow-x:auto; margin:2rem 0; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
table { width:100%; border-collapse:collapse; font-size:0.88rem; font-family:var(--font-mono); background:var(--surface); }
thead { background:#f0ece6; }
th { padding:0.8rem 1.1rem; text-align:center; font-weight:500; letter-spacing:0.02em; border-bottom:2px solid var(--border); font-family:var(--font-sans); font-size:0.8rem; text-transform:uppercase; }
td { padding:0.65rem 1.1rem; text-align:center; border-bottom:1px solid #f0ece6; }
tr:last-child td { border-bottom:none; }
tr.ours td { background:#f0faf4; font-weight:500; }
tr.ours td:first-child { color:var(--accent); border-left:3px solid var(--accent); }
.best { color:var(--accent); font-weight:700; }

/* BibTeX */
#bibtex { background:var(--surface); border-top:1px solid var(--border); }
.bibtex-block { position:relative; background:var(--code-bg); color:var(--code-fg); border-radius:var(--radius-md); padding:1.5rem 1.8rem; font-family:var(--font-mono); font-size:0.82rem; line-height:1.8; overflow-x:auto; }
.bibtex-block .kw { color:#7ec8a0; }
.bibtex-block .val { color:#f0b87a; }
.copy-btn { position:absolute; top:0.8rem; right:0.8rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:var(--code-fg); border-radius:4px; padding:0.3rem 0.7rem; font-size:0.75rem; cursor:pointer; transition:background .15s; font-family:var(--font-sans); }
.copy-btn:hover { background:rgba(255,255,255,.2); }

/* Footer */
footer { background:var(--ink); color:rgba(255,255,255,.45); text-align:center; padding:2rem; font-size:0.82rem; }
footer a { color:rgba(255,255,255,.7); text-decoration:none; }
footer a:hover { color:#fff; }
footer p + p { margin-top:0.4rem; }

/* Utilities */
.text-red { color:#c62828; font-weight:500; font-style:italic; font-size:0.85rem; }
.project-video-container { max-width:1000px; margin:0 auto; text-align:center; }
.project-video { width:100%; height:auto; border-radius:8px; box-shadow:var(--shadow-md); }
.project-video + .card-caption { color:var(--ink-muted); font-size:0.9rem; }

/* Responsive */
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) {
  #navbar { gap:1.2rem; font-size:0.75rem; }
  .comparison-row.cols-4 { grid-template-columns: repeat(2,1fr); }
  .comparison-row.cols-3 { grid-template-columns: 1fr 1fr; }
  .pipeline-diagram { flex-direction: column; }
  .overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .comparison-row.cols-3, .comparison-row.cols-4 { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: 1fr; } }

/* Narrow containers for readability */
#abstract .method-figure, #analysis .method-figure, #method .method-figure, #results .method-figure, #comparisons .method-figure { max-width:1200px; margin-left:auto; margin-right:auto; padding-left:0.75rem; padding-right:0.75rem; }
#comparisons .method-figure, #comparisons .container { max-width:1200px !important; margin-left:auto; margin-right:auto; padding-left:1.5rem; padding-right:1.5rem; }

/* ─── Mobile-specific enhancements (preserve desktop styles) ─── */
/* These rules only override layout/spacing for small viewports. */
@media (max-width: 700px) {
  /* Navbar: reduce padding and allow wrapping for many links */
  #navbar {
    padding: 0.6rem 1rem;
    gap: 0.8rem;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* Teasers: stack and allow wrapping */
  .teaser-row { flex-wrap: wrap; gap: 1rem; }
  .teaser-item { width: 100% !important; }
  .teaser-placeholder { height: 220px; }

  /* CTA buttons: larger touch targets and stacked */
  .ctas { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .btn { padding: 0.6rem 0.9rem; font-size: 1rem; border-radius: 10px; }

  /* Authors and small utilities */
  .authors { gap: 0.4rem 1rem; justify-content: center; }
  .affiliations { text-align: center; }

  /* Grids collapse to single column where appropriate */
  .overview-grid { grid-template-columns: 1fr; }
  .pipeline-diagram { padding: 1rem; min-height: 140px; }

  /* Comparison and gallery collapse */
  .comparison-row.cols-2, .comparison-row.cols-3, .comparison-row.cols-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  /* Ensure media scale nicely */
  .figure-image, .comparison-video, .responsive-video, .project-video { width: 100%; height: auto; }

  /* Narrow containers padding for comfortable margins */
  .container, .container-wide, .container-inner { padding-left: 1rem; padding-right: 1rem; }
}

/* Applications heading: keep left-aligned and slightly inset on all viewports */
#applications > h2 {
  text-align: left;
  margin: 1.25rem 0 0.75rem 1rem;
  max-width: 1200px;
}

@media (min-width: 900px) {
  /* on wide desktops keep existing spacing but ensure heading sits above content */
  #applications > h2 { margin-left: 0; padding-left: 2rem; }
}

@media (max-width: 480px) {
  /* Slightly smaller base type for small phones */
  body { font-size: 15px; line-height: 1.6; }

  /* Hero: reduce top padding and left-align for easier reading */
  #hero { padding: 5.5rem 1.25rem 1.25rem; text-align: left; }
  h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); text-align: left; }
  .subtitle { text-align: left; max-width: 100%; }

  /* Navbar: compact and horizontally scrollable when necessary */
  #navbar { padding: 0.5rem 0.75rem; gap: 0.6rem; overflow-x: auto; justify-content: flex-start; }
  #navbar a { padding: 0.45rem 0.6rem; display: inline-block; }

  /* Teasers and galleries fully stacked */
  .teaser-row { flex-direction: column; }
  .teaser-item { width: 100% !important; }
  .gallery-grid { grid-template-columns: 1fr; }

  /* Tabs and tab-bar scrollable */
  .tab-bar { overflow-x: auto; }
  .tab-btn { padding: 0.55rem 0.9rem; white-space: nowrap; }

  /* Make CTAs fill width for easy tapping */
  .btn-primary, .btn-outline { width: 100%; justify-content: center; }

  /* Footer compact */
  footer { padding: 1.25rem; font-size: 0.78rem; }
}