thefoldwithin-earth/public/styles.css

:root{
  --bg:#0b0b0b;
  --fg:#e6e3d7;
  --accent:#e0b84b;
  --topbar-h:52px;
  --transition: .3s ease;
}

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

.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  background:#111;
  color:var(--accent);
  z-index:1000;
  border-bottom:1px solid #222;
  padding:0 1rem;
}

#menuBtn{
  font-size:1.4rem;
  background:none;
  border:0;
  color:var(--accent);
  cursor:pointer;
  margin-right:1rem;
}

.primary-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
}

.primary-nav a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  transition: text-shadow var(--transition);
}

.primary-nav a:hover{ text-shadow:0 0 5px var(--accent); }

#sidebar{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  width:280px;
  bottom:0;
  overflow:auto;
  background:#111;
  border-right:1px solid #222;
  transform:translateX(-100%);
  transition:transform var(--transition);
  z-index:900;
}

body.sidebar-open #sidebar{ transform:translateX(0); }

.sidebar-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:1rem;
}

.sidebar-controls label {
  font-size:0.8rem;
  color:var(--accent);
  margin-bottom:-4px;
}

.sidebar-controls select[multiple] {
  height:100px; /* Elegant fixed height for multi */
}

#postList{
  list-style:none;
  margin:0;
  padding:0 1rem 2rem;
}

#postList li{
  margin:.5rem 0;
  transition: color var(--transition);
}

#postList a{
  color:var(--fg);
  text-decoration:none;
}
#postList a:hover{ color:var(--accent); }

.content{
  margin-top:var(--topbar-h);
  margin-left:0;
  transition:margin-left var(--transition);
  min-height:calc(100vh - var(--topbar-h));
}
@media(min-width:1024px){
  #sidebar{ transform:translateX(0); }
  .content{ margin-left:280px; }
}

.viewer > *{
  max-width:720px;
  margin:auto;
  padding:2rem 1rem;
  opacity:1;
  transition: opacity var(--transition);
}

.viewer.fade-in > * {
  opacity:0;
  animation: fadeIn var(--transition) forwards;
}

@keyframes fadeIn {
  to { opacity:1; }
}

/* iframe resets */
.viewer iframe{
  width:100%;
  border:0;
  margin:0;
  min-height:calc(100vh - var(--topbar-h) - 40px);
  border-radius:12px;
  background: #fff;
}