/* styles.css */ 

/* ========================================================= 

   PROJECT FLOW — CALM SYSTEM (LOCKED) 

   ========================================================= */ 

 

/* 01) TOKENS */ 

:root { 

  --bg-fallback: #0f0c0a; 

  --overlay-warm: rgba(15, 12, 10, 0.58); 

 

  --text-cream: #f3eee7; 

  --text-parchment: #e7dfd6; 

  --text-soft: #d6ccc1; 

  --text-dim: #c7bdb3; 

 

  --accent: #5b6f86; 

  --accent-soft: rgba(91,111,134,0.22); 

  --accent-border: rgba(91,111,134,0.55); 

 

  --glass: rgba(30,24,20,0.58); 

  --glass-strong: rgba(30,24,20,0.70); 

  --glass-border: rgba(255,255,255,0.06); 

 

  --r-card: 20px; 

  --r-btn: 16px; 

  --r-chip: 999px; 

 

  --t: 200ms ease; 

} 

 

/* 02) BASE + BACKGROUND */ 

html, body { height: 100%; } 

 

body { 

  margin: 0; 

  min-height: 100vh; 

  overflow-x: hidden; 

  background-color: var(--bg-fallback); 

 

  background-image: url("cozy.jpg"); 

  background-size: cover; 

  background-position: center; 

  background-repeat: no-repeat; 

 

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 

  color: var(--text-cream); 

} 

 

body::before { 

  content: ""; 

  position: fixed; 

  inset: 0; 

  background: var(--overlay-warm); 

  pointer-events: none; 

  z-index: 0; 

} 

 

.screen, .container, .card, header, footer { position: relative; z-index: 1; } 

 

/* 03) FADE OVERLAY */ 

.fade-overlay { 

  position: fixed; 

  inset: 0; 

  background: rgba(10, 8, 7, 0.55); 

  opacity: 0; 

  pointer-events: none; 

  transition: opacity 180ms ease; 

  z-index: 50; 

} 

 

.fade-overlay.on { 

  opacity: 1; 

  pointer-events: auto; 

} 

 

/* 04) TYPOGRAPHY */ 

h1 { 

  font-size: 26px; 

  font-weight: 650; 

  letter-spacing: -0.3px; 

  margin: 0; 

} 

 

h2 { 

  font-size: 18px; 

  font-weight: 600; 

  margin: 0; 

} 

 

p { 

  font-size: 15px; 

  color: var(--text-parchment); 

  margin: 0; 

} 

 

.small { font-size: 13px; color: var(--text-dim); } 

 

.title { font-size: 14px; color: var(--text-cream); font-weight: 600; } 

.subline { font-size: 13px; color: var(--text-dim); margin-top: 6px; } 

 

.home-softline { 

  font-size: 14px; 

  color: var(--text-soft); 

  opacity: 0.92; 

  margin-top: 4px; 

} 

 

/* 05) LAYOUT */ 

.container { 

  width: min(540px, calc(100% - 32px)); 

  margin: 0 auto; 

  padding: 40px 0 44px; 

} 

 

.stack { 

  display: flex; 

  flex-direction: column; 

  gap: 22px; 

} 

 

.stack-tight { 

  display: flex; 

  flex-direction: column; 

  gap: 10px; 

} 

 

.center { text-align: center; } 

 

/* 06) NAV */ 

.nav-inner { 

  width: min(720px, calc(100% - 32px)); 

  margin: 0 auto; 

  padding: 18px 0; 

  display: flex; 

  justify-content: space-between; 

  align-items: center; 

} 

 

.brand { 

  display: flex; 

  align-items: center; 

  gap: 10px; 

  background: none; 

  border: none; 

  color: var(--text-cream); 

  cursor: pointer; 

  padding: 0; 

} 

 

.brand img { 

  width: 28px; 

  height: 28px; 

  border-radius: 8px; 

} 

 

.nav-right { display: flex; gap: 12px; align-items: center; } 

 

.subtle-link { 

  background: none; 

  border: none; 

  color: var(--text-soft); 

  font-size: 14px; 

  cursor: pointer; 

  opacity: 0.82; 

  transition: opacity var(--t); 

  text-decoration: none; 

  padding: 6px 4px; 

} 

 

.subtle-link:hover { opacity: 1; } 

 

.back-link { align-self: flex-start; } 

 

/* 07) CARDS */ 

.card { 

  background: var(--glass); 

  border: 1px solid var(--glass-border); 

  border-radius: var(--r-card); 

  padding: 22px; 

  backdrop-filter: blur(18px); 

  box-shadow: 0 10px 30px rgba(0,0,0,0.25); 

} 

 

.card.strong { background: var(--glass-strong); } 

 

.section-title { 

  font-size: 13px; 

  color: var(--text-soft); 

  margin-bottom: 12px; 

} 

 

/* 08) BUTTONS */ 

.primary-btn { 

  background: var(--accent); 

  border: none; 

  border-radius: var(--r-btn); 

  padding: 14px 18px; 

  color: var(--text-cream); 

  font-size: 15px; 

  cursor: pointer; 

  transition: var(--t); 

} 

 

.primary-btn:hover { background: #6a7f98; } 

 

.secondary-btn { 

  background: rgba(255,255,255,0.08); 

  border: 1px solid rgba(255,255,255,0.08); 

  border-radius: var(--r-btn); 

  padding: 14px 18px; 

  color: var(--text-cream); 

  font-size: 15px; 

  cursor: pointer; 

  transition: var(--t); 

} 

 

.secondary-btn:hover { background: rgba(255,255,255,0.12); } 

 

.btn-block { width: 100%; } 

 

/* 09) CHIPS */ 

.chip-group { 

  display: flex; 

  flex-wrap: wrap; 

  gap: 10px; 

  margin-top: 12px; 

} 

 

.chip { 

  padding: 10px 16px; 

  border-radius: var(--r-chip); 

  border: 1px solid rgba(255,255,255,0.08); 

  background: rgba(255,255,255,0.07); 

  color: var(--text-cream); 

  font-size: 14px; 

  cursor: pointer; 

  transition: var(--t); 

} 

 

.chip:hover { background: rgba(255,255,255,0.10); } 

 

.chip.active { 

  background: var(--accent-soft); 

  border: 1px solid var(--accent-border); 

} 

 

/* 10) PICK SCREEN */ 

.pick-note { display: flex; flex-direction: column; gap: 16px; } 

 

.pick-label { 

  font-size: 12px; 

  text-transform: uppercase; 

  color: var(--text-dim); 

  letter-spacing: 0.8px; 

} 

 

.pick-title { font-size: 22px; font-weight: 700; } 

.pick-reason { color: var(--text-parchment); line-height: 1.45; } 

 

.pick-actions { display: flex; flex-direction: column; gap: 10px; } 

 

.divider { 

  height: 1px; 

  background: rgba(255,255,255,0.08); 

  width: 100%; 

} 

 

/* 11) QUICK CHECK-IN (SPACING FIX) */ 

.checkin { 

  display: flex; 

  flex-direction: column; 

  gap: 18px; 

  margin-top: 14px; 

  animation: fadeIn 220ms ease forwards; 

} 

 

.checkin-title { 

  font-size: 13px; 

  color: var(--text-soft); 

  margin-top: 6px; 

  margin-bottom: 8px; 

} 

 

.checkin-title + .chip-group { 

  margin-top: 6px; 

} 

 

/* space before the big button so it’s not kissing the title */ 

#pickAgainBtn { 

  margin-top: 10px; 

} 

 

/* keep the note from crowding */ 

#checkinNote { 

  margin-top: 10px; 

} 

 

@keyframes fadeIn { 

  from { opacity: 0; transform: translateY(4px); } 

  to { opacity: 1; transform: translateY(0); } 

} 

 

.note { 

  min-height: 80px; 

  resize: vertical; 

  border-radius: 14px; 

  border: 1px solid rgba(255,255,255,0.08); 

  background: rgba(30,24,20,0.70); 

  color: var(--text-cream); 

  padding: 12px; 

} 

 

/* Warm message */ 

.warm-msg { 

  margin-top: 12px; 

  padding: 12px 14px; 

  border-radius: 16px; 

  border: 1px solid rgba(255,255,255,0.08); 

  background: rgba(91,111,134,0.18); 

  color: var(--text-parchment); 

  font-size: 14px; 

  opacity: 0; 

  transform: translateY(4px); 

  transition: opacity var(--t), transform var(--t); 

} 

 

.warm-msg.show { 

  opacity: 1; 

  transform: translateY(0); 

} 

 

/* 12) WAITLIST FORM */ 

.form-row { 

  display: flex; 

  flex-direction: column; 

  gap: 12px; 

} 

 

.form-row input[type="email"] { 

  width: 100%; 

  box-sizing: border-box; 

  border-radius: 16px; 

  border: 1px solid rgba(255,255,255,0.10); 

  background: rgba(30,24,20,0.62); 

  color: var(--text-cream); 

  padding: 14px 14px; 

  font-size: 15px; 

  outline: none; 

} 

 

.form-row input::placeholder { color: rgba(243,238,231,0.65); } 

 

.form-help { 

  font-size: 13px; 

  color: var(--text-dim); 

  margin-top: 2px; 

} 

 

/* 13) FOOTER */ 

.footer { 

  text-align: center; 

  padding: 36px 0 22px; 

  color: var(--text-dim); 

} 

 

.footer-links { margin-bottom: 10px; } 

 

.footer a { 

  color: var(--text-dim); 

  text-decoration: none; 

  margin: 0 8px; 

  opacity: 0.85; 

} 

 

.footer a:hover { opacity: 1; } 

 

.copyright { font-size: 12px; opacity: 0.85; } 

 

/* 14) SCREEN SHOW/HIDE */ 

.screen { display: none; } 

.screen.active { display: block; } 

 

/* 15) MOBILE TUNE */ 

@media (max-width: 420px) { 

  .container { padding: 34px 0 40px; } 

  .card { padding: 18px; } 

  .chip { padding: 10px 14px; } 

} 

/* ========================================================= 

   SIMPLE PILL BUTTON (About / Privacy / Terms) 

   ========================================================= */ 

.pill-link { 

  display: inline-flex; 

  align-items: center; 

  justify-content: center; 

  width: auto; 

  align-self: flex-start; 

  padding: 10px 14px; 

  border-radius: 999px; 

  background: rgba(255,255,255,0.08); 

  border: 1px solid rgba(255,255,255,0.10); 

  color: var(--text-cream); 

  text-decoration: none; 

  font-size: 14px; 

  cursor: pointer; 

  transition: var(--t); 

} 

 

.pill-link:hover { 

  background: rgba(255,255,255,0.12); 

} 

.pill-link{ 

  display:inline-flex; 

  align-items:center; 

  justify-content:center; 

  width:fit-content; 

  padding:12px 18px; 

  border-radius:999px; 

}