/* ───────────────────────────────────────────────────────────────────────────── FONTS · Kindred Edit this block to change fonts and heading sizes. HEADING FONT (brand-font) ────────────────────────── Used for: the "Kindred" logo, all page titles (h1), and the nav logo. Current font: Noto Serif SC (Chinese-style serif) To change it: 1. Go to fonts.google.com, pick a font, copy its name exactly. 2. Replace 'Playfair Display' in the @import URL below AND in --brand-font. 3. Save and refresh. Popular alternatives: Lora · Libre Baskerville · Cormorant Garamond (other elegant serifs) Nunito · Poppins · DM Sans (friendly sans-serifs) HEADING SIZES ────────────── --brand-font-hero : giant title on the login page --brand-font-header : h1 at the top of every page --brand-font-nav : app name in the sidebar BODY FONT ────────── The body font (used for all normal text) is set in the `body` rule below. Current font: Inter (clean system font — usually no import needed) ───────────────────────────────────────────────────────────────────────────── */ /* Load heading + body fonts from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Raleway:wght@400;500;600;700&display=swap'); :root { /* Colors — set here as fallbacks; theme.js overrides these at runtime. To change colors, edit client/js/theme.js instead of here. */ --brand-green: #96AA9A; --brand-blue: #7FB3C8; --brand-warm: #DCC8A6; --brand-accent: #E6C15D; /* Button color — light sage; intentionally NOT overridden by theme.js so modal/form buttons stay soft regardless of which theme is active. --brand-green is the theme's primary accent (can be dark); --btn-action is specifically the light sage used for Save / confirm buttons. */ --btn-action: #95AA9B; --btn-action-hover: #849A8A; /* Habit/goal image-reveal "covered" tile color -- also used as the kiosk student nav button color. */ --reveal-cover: #cbd5d1; --bg: #FAFAF7; --sidebar-bg: #ffffff; --sidebar-border: #E4E0D8; --nav-link-color: #3F463A; --nav-hover-bg: #EAF1E4; --nav-active-bg: #EAF1E4; --nav-active-color: #2F3A2E; --nav-section-color: #A6B193; --logo-color: #2F3A2E; --logo-icon-color: var(--brand-green); /* ── Shared card/surface tokens ── */ --card-border: rgba(216,213,203,0.18); /* barely-there warm edge */ --card-shadow: none; /* flat — no elevation shadow */ /* ── Edit these to change fonts and heading sizes ── */ --brand-font: 'Cormorant Garamond', serif; /* heading/logo font */ --brand-font-hero: 3rem; /* login page title size */ --brand-font-header: 1.8rem; /* page h1 size */ --brand-font-nav: 1.4rem; /* sidebar logo size */ } /* Body font — used for all normal text. Replace 'Inter' to change it. */ body { /* Browsers apply an implicit ~8px margin to by default. Left in place, it pushes sticky elements down at rest, then they visibly "snap" up by that amount the instant scrolling engages them — reset to 0 so sticky headers sit at the same spot at rest and while stuck. */ margin: 0; font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif; background-color: var(--bg); } /* Pinch-to-zoom is too easy to trigger by accident on a shared kiosk tablet during normal touch use -- pan-x pan-y allows ordinary scrolling but drops the pinch/multi-touch zoom gesture. Scoped to body.kiosk-device (nav.js) only, not app-wide -- regular users may genuinely rely on pinch-zoom for readability/accessibility, so this shouldn't touch them. */ body.kiosk-device { touch-action: pan-x pan-y; } /* Tried cross-document View Transitions here (@view-transition {navigation: auto}) to smooth the full-page-reload nav flash -- reverted: dashboard.html does enough JS work before its first paint (calendar grid, weather widget, data fetches) that the crossfade couldn't start until that finished, so its old-page snapshot sat frozen and read as a slowdown specifically entering the dashboard, even though it helped on lighter pages. Revisit the nav flash a different way later if it still bothers you. */ button { cursor: default !important; } /* Breezy card */ .card { background: white; border-radius: 1.125rem; box-shadow: var(--card-shadow); border: 1px solid var(--card-border); padding: 1.5rem; } /* ── Dark tooltip — add data-tooltip="text" to any element ──────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 0.7rem; font-weight: 500; white-space: nowrap; padding: 0.25rem 0.5rem; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 200; } [data-tooltip]:hover::after { opacity: 1; } [data-tooltip][data-tooltip-pos="top"]::after { top: auto; bottom: calc(100% + 6px); } .admin-badge { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 0.1rem 0.35rem; vertical-align: middle; line-height: 1.4; } .settings-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #9ca3af; margin-bottom: 0.9rem; } /* Accordion chevron -- mobile-only (see @media max-width:900px below); hidden here so it doesn't show as an inert decoration on desktop, where the label isn't a toggle. */ .settings-acc-chevron-circle { display: none; } /* Checkboxes + radio buttons — use brand sage */ input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-green); width: auto; } /* Large input feel */ input, select, textarea { /* Form controls don't inherit body's font by default in browsers' UA stylesheets — without this they render in the system font instead of Raleway, which is what made notes/textarea fields look mismatched. */ font-family: inherit; font-size: 1rem; padding: 0.65rem 0.9rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; width: 100%; box-sizing: border-box; transition: border-color 0.15s; background: white; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(123,172,196,0.15); } /* Buttons */ .btn-primary { background: var(--btn-action); color: white; padding: 0.45rem 1.1rem; border-radius: 999px; font-weight: 500; font-size: 0.88rem; border: none; cursor: pointer; transition: background 0.15s; letter-spacing: 0.01em; } .btn-primary:hover { background: var(--btn-action-hover); } .btn-secondary { background: transparent; color: var(--btn-action); padding: 0.42rem 1rem; border-radius: 999px; font-weight: 500; font-size: 0.88rem; border: 1px solid var(--btn-action); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .btn-secondary:hover { border-color: var(--btn-action-hover); background: rgba(149,170,155,0.1); } /* Branded focus ring instead of the browser's raw black default outline -- same soft-blue box-shadow convention as .select-pill:focus below. Most noticeable on showConfirm()'s dialog, which deliberately auto-focuses Cancel on open (safer default for destructive confirms) -- without this, that focus flashed as an out-of-theme black outline the instant the dialog appeared. */ .btn-primary:focus, .btn-secondary:focus { outline: none; box-shadow: 0 0 0 3px rgba(123,172,196,0.35); } .select-pill { padding: 0.42rem 0.9rem; border-radius: 999px; border: 1px solid #A6B193; font-size: 0.88rem; font-weight: 500; color: var(--brand-green); background: white; width: auto; cursor: pointer; } .select-pill:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(123,172,196,0.15); } .btn-sm { padding: 0.25rem 0.75rem !important; font-size: 0.8rem !important; } .icon-btn { background: none; border: none; color: #6b7280; padding: 0.25rem; border-radius: 0.25rem; transition: color 0.12s, background 0.12s; cursor: default; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { color: var(--brand-green); background: rgba(85,107,79,0.1); } .btn-danger { background: transparent; color: #9ca3af; padding: 0.42rem 1rem; border-radius: 999px; font-weight: 500; font-size: 0.88rem; border: 1px solid #e5e7eb; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .btn-danger:hover { color: #6b7280; border-color: #9ca3af; } /* ── Sidebar shell ─────────────────────────────────────────────────────────── */ .sidebar { width: 220px; height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--card-border); display: flex; flex-direction: column; padding: 0; position: fixed; top: 0; left: 0; overflow: hidden; transition: background 0.2s, border-color 0.2s; z-index: 100; } /* ── Read-only demo banner (Anderson family onboarding preview) ─────────── */ #demo-banner { position: fixed; top: 0; left: 0; right: 0; height: 36px; background: #2F3A2E; color: #F7F4EE; z-index: 500; display: flex; align-items: center; justify-content: center; gap: 0.85rem; font-size: 0.8rem; font-weight: 600; } #demo-banner button { background: none; border: 1px solid rgba(247,244,238,0.4); color: #F7F4EE; border-radius: 999px; padding: 0.15rem 0.75rem; font-size: 0.75rem; font-weight: 700; cursor: pointer; } body.demo-mode { padding-top: 36px; } body.demo-mode .sidebar { top: 36px; height: calc(100vh - 36px); } body.demo-mode #floating-status { top: calc(1.5rem + 36px); } /* Logo row */ .sidebar-logo { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 0.75rem 0.15rem; flex-shrink: 0; } .logo-mark { width: 82.5%; height: auto; flex-shrink: 0; } /* Mobile drawer swaps this for the tree-only mark (favicon.svg) -- hidden here, turned on inside the max-width:900px block below. */ .logo-mark-tree { display: none; } /* Full-width profile band */ .sidebar-profile-band { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.85rem 0.9rem; flex-shrink: 0; position: relative; } .profile-band-avatar-wrap { position: relative; flex-shrink: 0; } .profile-band-avatar { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .profile-band-color-dot { position: absolute; bottom: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--sidebar-bg); } .profile-band-info { flex: 1; min-width: 0; } .profile-band-name { font-size: 0.92rem; font-weight: 700; color: var(--logo-color); line-height: 1.2; word-break: break-word; } .profile-band-role { font-size: 0.72rem; color: var(--nav-section-color); margin-top: 0.1rem; } .profile-band-edit { color: var(--nav-section-color); text-decoration: none; display: inline-flex; align-items: center; margin-top: 0.3rem; padding: 0.1rem 0.2rem; border-radius: 0.25rem; font-size: 0.7rem; transition: color 0.12s; } .profile-band-edit:hover { color: var(--brand-green); } /* Two-column body */ .sidebar-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* ── Avatar rail (left strip) ─────────────────────────────────────────────── */ .avatar-rail { width: 70px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 0.85rem 0 0.75rem; border-right: 1.5px solid var(--sidebar-border); overflow-y: auto; overflow-x: hidden; gap: 0.6rem; } .avatar-rail::-webkit-scrollbar { display: none; } /* Active profile card — green tile at top of rail */ .active-profile-card { width: 40px; min-height: 40px; background: var(--brand-green); border-radius: 0.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: opacity 0.15s; padding: 0.4rem; } .active-profile-card:hover { opacity: 0.85; } /* Member circles in rail */ .rail-members-list { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .rail-member { position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; transition: transform 0.12s; } .rail-member.rail-clickable { cursor: pointer; } .rail-member.rail-clickable:hover { transform: scale(1.1); } .rail-member--active { box-shadow: 0 0 0 2.5px var(--sidebar-bg), 0 0 0 3.75px var(--brand-green); cursor: default; } .rail-member--fm { border-radius: 28% !important; } .rail-ini { font-size: 0.65rem; font-weight: 700; color: white; line-height: 1; } /* Color dot in lower-right corner */ .rail-dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sidebar-bg); flex-shrink: 0; } .rail-spacer { flex: 1; } .rail-add-btn { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; background: none; border: 1.5px dashed var(--sidebar-border); border-radius: 50%; width: 42px; height: 42px; cursor: pointer; color: var(--nav-section-color); justify-content: center; transition: border-color 0.12s, color 0.12s; flex-shrink: 0; } .rail-add-btn:hover { border-color: var(--brand-green); color: var(--brand-green); } .rail-label { display: none; } /* ── Nav section (right of avatar rail) ────────────────────────────────────── */ .nav-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--sidebar-bg); } /* Active profile header strip */ .nav-profile-header { padding: 0.65rem 0.85rem 0.6rem; background: rgba(var(--brand-green-rgb, 85,107,79), 0.06); flex-shrink: 0; } .nav-profile-name { font-size: 0.82rem; font-weight: 700; color: var(--logo-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-profile-role { font-size: 0.7rem; color: var(--nav-section-color); margin-top: 0.1rem; line-height: 1.3; } .nav-profile-edit { color: var(--nav-section-color); text-decoration: none; display: flex; align-items: center; padding: 0.1rem; border-radius: 0.25rem; transition: color 0.12s; flex-shrink: 0; } .nav-profile-edit:hover { color: var(--brand-green); } /* Scrollable nav links */ .nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 0.35rem 0; gap: 0.5rem; } .nav-scroll::-webkit-scrollbar { width: 3px; } .nav-scroll::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 9999px; } .nav-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.65rem; box-sizing: border-box; border-radius: 0; color: var(--nav-link-color); font-size: 0.82rem; text-decoration: none; transition: background 0.1s, color 0.1s; width: 100%; border: none; background: none; font-family: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; /* Touch devices (kiosk/iPad) show a default gray/blue tap-highlight overlay on /