@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --ink:#1f2a37; --muted:#718096; --line:#e6ebf1; --canvas:#f7f9fb; --card:#fff; --blue:#3167d5; --teal:#168d83; --soft-blue:#eef3ff; font-family:'DM Sans',system-ui,sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; } body { margin:0; background:var(--canvas); } a { color:var(--blue); text-decoration:none; } button,.button { font:inherit; cursor:pointer; } h1,h2,h3 { font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-.025em; } h1 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.05; } h2 { font-size:1.45rem; } h3 { font-size:1.1rem; } p { line-height:1.55; }
.topbar { height:74px; padding:0 clamp(1.25rem,4vw,4rem); border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:.7rem; color:var(--ink); font:700 1.15rem 'Space Grotesk',sans-serif; } .brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--ink); } .signed-in,.sign-in { font-size:.86rem; color:var(--muted); }
.body-grid { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 74px); } .sidebar { padding:2.2rem 1.3rem; border-right:1px solid var(--line); background:#fbfcfd; } .eyebrow { margin:0 0 .65rem; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; font-weight:700; color:var(--muted); } nav { display:grid; gap:.3rem; } nav a { padding:.75rem .8rem; border-radius:10px; color:#647285; font-size:.9rem; font-weight:600; } nav a.active { color:var(--ink); background:#eaf0fb; } .sidebar-note { margin:4rem .8rem 0; padding:1rem; border-left:2px solid #a9c7ef; color:var(--muted); font-size:.78rem; line-height:1.6; } .main-content { max-width:1280px; width:100%; padding:clamp(2rem,5vw,4.8rem) clamp(1.25rem,5vw,5rem); }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.2rem; } .lede { max-width:580px; color:var(--muted); margin:.9rem 0 0; font-size:1.04rem; } .button { border:0; border-radius:9px; padding:.75rem 1.05rem; font-size:.86rem; font-weight:700; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; } .button.primary { color:#fff; background:var(--blue); box-shadow:0 4px 12px #3167d52c; } .button.secondary { color:var(--ink); background:#fff; border:1px solid var(--line); } .button.quiet { color:var(--blue); background:transparent; }
.status-strip { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; border:1px solid #d9e6ee; border-radius:12px; background:#f2f8f8; font-size:.86rem; } .status-strip div { display:flex; align-items:center; gap:.65rem; } .status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; } .status-dot.good { background:var(--teal); } .muted { color:var(--muted); } .section-heading,.panel-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin:3rem 0 1.1rem; } .section-heading a { font-size:.82rem; font-weight:700; }
.event-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:1rem; } .event-card,.panel,.empty-card,.integration-card { border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:0 5px 20px #233a5b08; } .event-card { padding:1.25rem; } .event-card-top,.agenda-title { display:flex; justify-content:space-between; align-items:center; gap:.7rem; } .date-pill { color:var(--blue); font-size:.76rem; font-weight:700; } .state { padding:.3rem .55rem; border-radius:99px; background:#f1f4f7; color:#667386; font-size:.68rem; font-weight:700; text-transform:capitalize; } .state.open { background:#e7f6f0; color:#147b62; } .state.cancelled { background:#fff0f0; color:#b15252; } .event-card h3 { margin-top:1.6rem; } .event-time { color:var(--muted); font-size:.83rem; margin:.4rem 0 1.5rem; } .attendance { display:flex; flex-direction:column; gap:.2rem; margin-bottom:.6rem; } .attendance strong { font:700 1.5rem 'Space Grotesk',sans-serif; } .attendance span { color:var(--muted); font-size:.75rem; } .progress { height:5px; overflow:hidden; border-radius:10px; background:#e9edf2; } .progress span { display:block; height:100%; background:var(--teal); border-radius:inherit; } .card-link { display:block; margin-top:1.2rem; font-size:.79rem; font-weight:700; }
.calendar-toolbar { display:flex; align-items:center; gap:.25rem; padding:.4rem; border-bottom:1px solid var(--line); margin-bottom:1rem; } .calendar-toolbar button:not(.button) { border:0; padding:.55rem .75rem; color:var(--muted); background:transparent; border-radius:7px; font-size:.8rem; } .calendar-toolbar .toolbar-active { color:var(--ink); background:#e8eef9; font-weight:700; } .toolbar-spacer { flex:1; } .agenda-list { border-top:1px solid var(--line); } .agenda-row { display:grid; grid-template-columns:58px minmax(0,1fr) 80px 30px; gap:1.2rem; align-items:center; padding:1.15rem .4rem; border-bottom:1px solid var(--line); } .agenda-date { display:flex; flex-direction:column; align-items:center; color:var(--muted); } .agenda-date strong { font:700 1.45rem 'Space Grotesk',sans-serif; color:var(--ink); } .agenda-date span { font-size:.7rem; text-transform:uppercase; } .agenda-main p { margin:.35rem 0 0; color:var(--muted); font-size:.8rem; } .cancel-note { color:#b15252 !important; } .agenda-count { text-align:right; font:700 1.1rem 'Space Grotesk',sans-serif; } .agenda-count span { color:var(--muted); font-size:.8rem; font-weight:500; } .agenda-count small { display:block; color:var(--muted); font:400 .68rem 'DM Sans',sans-serif; } .icon-button { border:0; color:var(--blue); background:transparent; font-size:1.8rem; }
.split-grid,.integration-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .panel { padding:1.25rem; } .panel-heading { margin:0 0 1rem; align-items:center; } .panel-heading h2 { margin-top:.15rem; } .count { color:var(--muted); font-size:.8rem; } .person-row,.group-row,.setting-row { display:flex; align-items:center; gap:.8rem; padding:.85rem .2rem; border-top:1px solid var(--line); } .person-row div,.group-row div,.setting-row div { display:flex; flex:1; flex-direction:column; gap:.2rem; } .person-row small,.group-row small,.setting-row small { color:var(--muted); font-size:.74rem; } .avatar,.group-icon,.integration-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--blue); background:var(--soft-blue); font-weight:700; } .presence { color:var(--teal); font-size:.8rem; } .group-icon { border-radius:50%; color:var(--teal); background:#e6f5f1; font-size:1.2rem; } .empty-card { padding:3rem 2rem; text-align:center; color:var(--muted); } .empty-card h3 { color:var(--ink); margin:.7rem 0 .3rem; } .empty-icon { font-size:2rem; color:var(--blue); } .integration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .integration-card { padding:1.4rem; } .integration-card h3 { margin-top:1.2rem; } .integration-card p { color:var(--muted); font-size:.82rem; } .setting-row { justify-content:space-between; padding:1.2rem .3rem; }
@media (max-width:800px) { .body-grid { display:block; } .sidebar { padding:1rem 1.25rem; border-right:0; border-bottom:1px solid var(--line); } .sidebar .eyebrow,.sidebar-note { display:none; } nav { display:flex; overflow-x:auto; gap:.15rem; } nav a { white-space:nowrap; } .main-content { padding:2rem 1.1rem; } .page-intro { align-items:flex-start; flex-direction:column; } .split-grid,.integration-grid { grid-template-columns:1fr; } .agenda-row { grid-template-columns:45px minmax(0,1fr) 55px 20px; gap:.6rem; } .agenda-count { font-size:.9rem; } }
.status-dot.warn { background:#c88a23; } .recovery-strip { background:#fff7e8; border-color:#f0d6a0; } .notice-card { margin-top:1rem; padding:1rem 1.2rem; border:1px solid #f0d6a0; border-radius:12px; background:#fffaf0; } .notice-card p { color:var(--muted); font-size:.84rem; } .recovery-panel { margin-top:1rem; max-width:760px; } .recovery-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:.8rem 0; } .form-field { display:flex; flex-direction:column; gap:.35rem; color:var(--muted); font-size:.76rem; font-weight:700; } .form-field.wide { grid-column:1/-1; } .form-field input,.form-field select { width:100%; border:1px solid var(--line); border-radius:8px; padding:.65rem .7rem; color:var(--ink); background:#fff; font:inherit; font-weight:400; } .check-row { display:flex; flex-wrap:wrap; gap:.8rem; margin:.8rem 0; } .check-field { display:inline-flex; gap:.45rem; align-items:center; margin:.35rem 0; color:var(--muted); font-size:.82rem; } .selectable { width:100%; border:0; background:transparent; text-align:left; } .selectable:hover,.selectable.selected { background:#f1f5fb; } .month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); } .month-cell { min-height:110px; padding:.55rem; background:#fff; } .month-cell strong { color:var(--muted); font-size:.75rem; } .mini-event { display:block; margin-top:.35rem; padding:.25rem .35rem; overflow:hidden; border-radius:5px; background:#edf3ff; font-size:.68rem; white-space:nowrap; text-overflow:ellipsis; } .week-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.6rem; } .week-column { min-height:170px; padding:.7rem; border:1px solid var(--line); border-radius:10px; background:#fff; } .week-column h3 { margin-bottom:.65rem; font-size:.85rem; } .agenda-row.compact { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; padding:.55rem; } .identity-list { display:grid; gap:.35rem; margin:1rem 0 0; padding:0; list-style:none; color:var(--muted); font-size:.8rem; } .identity-list span { float:right; } .review-list { display:grid; grid-template-columns:max-content 1fr; gap:.55rem 1rem; } .review-list dt { color:var(--muted); font-weight:700; } .review-list dd { margin:0; }
.public-hero { align-items:center; padding:clamp(1rem,4vw,3rem) 0; } .hero-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.35rem; } .hero-panel { min-width:230px; padding:1.3rem; border:1px solid #d9e6ee; border-radius:14px; background:#f2f8f8; } .hero-panel strong { display:block; margin-top:.65rem; } .hero-panel p { margin-bottom:0; color:var(--muted); font-size:.82rem; } .public-cards .event-card p { color:var(--muted); font-size:.88rem; }
@media (max-width:800px) { .form-grid { grid-template-columns:1fr; } .month-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .week-grid { overflow-x:auto; grid-template-columns:repeat(7,minmax(130px,1fr)); } }