thefoldwithin-earth/public/styles.css

/* ============================================================
   The Fold Within — Styles v2.6 Independent Scroll
   ============================================================ */

:root {
  --bg:#0b0c10;
  --fg:#f3f3f3;
  --accent:#d0aa5b;
  --muted:#8d8f95;
  --line:#2a2d34;
}

html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--fg);
  font-family:system-ui,sans-serif;
  height:100%;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;
  height:48px;display:flex;align-items:center;
  gap:1em;background:#111;padding:0 1em;
  z-index:300;box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.topbar a{color:var(--accent);text-decoration:none;font-weight:500;}
.topbar a:hover{color:var(--fg);}
.topbar button{
  font-size:24px;background:transparent;color:var(--accent);
  border:none;padding:4px 8px;cursor:pointer;
}
.topbar button:hover{color:var(--fg);}

/* Layout container */
.page{
  display:flex;
  position:relative;
  height:calc(100vh - 48px);
  margin-top:48px;
  overflow:hidden;
}

/* Sidebar base */
.sidebar{
  background:#111;
  width:85%;
  max-width:320px;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .3s ease;
  padding:10px;
  z-index:200;
  border-right:1px solid var(--line);
}
.sidebar.open{transform:translateX(0);}
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;
  transition:opacity .3s ease;z-index:150;
}
.sidebar.open ~ .overlay{opacity:1;pointer-events:all;}

/* Desktop sidebar */
@media(min-width:900px){
  .sidebar{
    position:fixed;top:48px;bottom:0;left:0;
    width:280px;transform:none!important;
    overflow-y:auto;overflow-x:hidden;
    border-right:1px solid var(--line);
  }
}

/* Content area */
.content{
  flex:1;position:relative;
  overflow-y:auto;overflow-x:hidden;
  padding:16px;box-sizing:border-box;
  max-width:960px;margin-left:0;
  transition:margin-left .3s ease;
}
@media(min-width:900px){
  .content{margin-left:280px;height:calc(100vh - 48px);}
}
@media(max-width:899px){
  .content{margin-left:0;padding:12px;}
}

/* Viewer / HTML */
.viewer,#htmlView{
  display:block;width:100%;
  flex:1 1 auto;
  margin-top:0;padding-top:0;
  min-height:calc(100vh - 48px);
  overflow-y:auto;
  transition:opacity .25s ease;
}
.viewer.fade-in,#htmlView.fade-in{opacity:1;}
.viewer:not(.fade-in),#htmlView:not(.fade-in){opacity:0;}
#htmlView{border:none;background:#0b0c10;}

/* Markdown formatting */
#mdView h1,#mdView h2,#mdView h3{color:var(--accent);}
#mdView pre,#mdView code{
  overflow-x:auto;background:#111;padding:.5em;border-radius:4px;color:var(--accent);
}
#mdView blockquote{
  border-left:3px solid var(--accent);
  padding-left:12px;color:var(--muted);font-style:italic;
}
#mdView a{color:var(--accent);}
#mdView img{max-width:100%;border-radius:8px;}

/* Warning + Meta */
.md-warn{
  background:#3b0c0c;color:#ffd4d4;
  border:1px solid #6c1f1f;border-radius:8px;
  padding:10px 12px;margin:10px auto;max-width:820px;
}
.meta{color:var(--muted);margin-bottom:12px;font-size:.9em;}

/* Pager */
.pager{display:flex;justify-content:space-between;padding:8px 0;}
button#prev,button#next{
  background:transparent;border:1px solid var(--line);color:var(--fg);
  border-radius:8px;padding:4px 10px;cursor:pointer;
}
button#prev:hover,button#next:hover{
  border-color:var(--accent);color:var(--accent);
}

/* Tree + controls */
.controls{display:flex;gap:.5em;margin-bottom:8px;}
select,#search{
  background:#0b0c10;color:var(--fg);border:1px solid var(--line);
  border-radius:4px;padding:6px;
}
.dir .label{display:flex;align-items:center;cursor:pointer;
  padding:4px 6px;color:var(--accent);font-weight:600;}
.dir .label::before{content:"▶";margin-right:6px;font-size:.8em;color:var(--muted);}
.dir.open .label::before{content:"▼";}