:root{ --bg:#0F1117; --panel:#141824; --ink:#E8E6E3; --muted:#A6ADBD; --edge:#2A2F3A; --rose:#E9B4B7; --gold:#C9A86A; --radius:14px; --shadow:0 16px 44px rgba(0,0,0,.35); --maxw:1100px; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial} a{color:var(--ink);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:var(--maxw);margin:auto;padding:20px} /* Page header (sticky) */ .sitebar{position:sticky;top:0;background:rgba(20,24,36,.8);backdrop-filter:blur(8px); border-bottom:1px solid var(--edge);z-index:5} .sitebar .wrap{display:flex;align-items:center;justify-content:space-between} .brand{display:flex;gap:10px;align-items:center} .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--rose);box-shadow:0 0 18px rgba(233,180,183,.5)} h1{font-size:clamp(18px,2.6vw,24px);margin:0} .note{font-size:13px;color:var(--muted)} .card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px} /* Controls row */ .controls{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center} .group{display:flex;gap:8px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #394356;background:#111523;color:var(--ink);cursor:pointer} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)} input[type="date"]{background:#111523;border:1px solid #394356;border-radius:999px;color:var(--ink);padding:10px 12px} .week-title{margin:10px 0 0 0;color:var(--muted)} /* Weekly list */ .list{margin-top:14px;display:grid;gap:10px} .day{border:1px solid #2a3040;border-radius:12px;overflow:hidden} /* Use .head (NOT
) to avoid sticky header styles colliding from main site */ .day .head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#101624;border-bottom:1px solid #2a3040} .day .head .left{display:flex;gap:10px;align-items:baseline} .dow{font-weight:700} .date{color:var(--muted)} .count{font-size:12px;padding:3px 9px;border-radius:999px;background:#182035;border:1px solid #2a3040;color:#cfd6e4} .roster{padding:10px;display:flex;flex-wrap:wrap;gap:8px} .pill{ font-size:14px;line-height:1;border:1px solid #2a3040;background:#121726;color:#e8e6e3; border-radius:999px;padding:7px 10px;display:inline-flex;gap:8px;align-items:center } .pill img{width:22px;height:22px;border-radius:6px;object-fit:cover;border:1px solid #2a3040} .empty{padding:10px;color:#9aa0a6;font-style:italic} footer{padding:24px 0;color:var(--muted);text-align:center} @media (max-width:640px){ .controls{grid-template-columns:1fr} .group{justify-content:space-between} } /* Pink-neon calendar icon for the date picker */ input[type="date"]{ appearance: none; -webkit-appearance: none; position: relative; padding-right: 42px; /* room for the icon */ background: url('data:image/svg+xml;utf8,') no-repeat right 12px center #111523; background-size: 20px 20px; box-shadow: 0 0 0 2px rgba(233,180,183,.20) inset, 0 0 12px rgba(255, 0, 170, .45); } input[type="date"]::-webkit-calendar-picker-indicator{ opacity: 0; /* hide native icon; we’re using our own */ } input[type="date"]:hover{ box-shadow: 0 0 0 2px rgba(233,180,183,.28) inset, 0 0 16px rgba(255, 0, 170, .65); } /* Calendar intro spacing */ .calendar-intro{ padding-top: calc(var(--header-h, 70px) + 12px); padding-bottom: 6px; } .calendar-intro .section-title{ margin: 0 0 6px; } /* Sticky week nav (phones) */ .week-sticky-nav{ position: fixed; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 120; display: none; gap: 10px; background: rgba(16,18,27,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--edge, rgba(255,255,255,.12)); border-radius: 16px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .week-sticky-nav .btn{ min-width: 108px; } @media (max-width: 640px){ .week-sticky-nav{ display: flex; } .controls .group:first-child{ display: none; } /* hide top week nav on phones */ .controls{ grid-template-columns: 1fr auto; } } /* Day header tidy stack (date under day, chip on right) */ .head{ display:grid; grid-template-columns: 1fr auto; gap:.25rem .75rem; align-items:start; } .head .left{ display:flex; flex-direction:column; gap:2px; min-width:0; } .head .count{ justify-self:end; white-space:nowrap; align-self:start; } /* Footer quick links */ .footer-quick{ display:flex; justify-content:flex-end; } .footer-quick nav{ display:flex; gap:10px; flex-wrap:wrap; } .footer-quick a{ color:var(--ink); text-decoration:none; font-weight:600; } .footer-quick a:hover{ text-decoration:underline; } @media (max-width: 680px){ .footer-quick{ justify-content:center; } } /* Normalize date input spacing (no extra gaps) */ input[type="date"]{ letter-spacing: normal !important; font-variant-numeric: tabular-nums; padding-left: 12px; } .date-field{ letter-spacing: normal !important; font-variant-numeric: tabular-nums; } /* Breathing room under sticky header */ .calendar-intro{ padding-top: calc(var(--header-h, 70px) + 14px); padding-bottom: 8px; } .calendar-intro .section-title{ margin-bottom: 6px; } /* ==== Controls gap fix: force flex row (overrides old grid) ==== */ .controls{ display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; justify-content: flex-start !important; } .controls .group{ display:flex; gap:8px; flex-wrap:wrap; } /* Make sure the date label/input don't stretch away */ .controls label[for="datePick"]{ margin-right: 6px; } .controls input#datePick{ min-width: 140px; }