/* app.css — Furever's single stylesheet. Self-contained (no import from the breeder app): Furever is a separate app on its own origin. The warm palette matches the placeholder front door; the badge-* class names match vocab.js so dropdowns and badges read from one source and never drift. Light + dark. */ :root { color-scheme: light dark; --bg: #fbfaf8; --fg: #2a2620; --muted: #7a7267; --accent: #b06a4f; --accent-dark: #8a4f38; --accent-soft: #f3e6df; --card: #ffffff; --surface-2: #f4f1ec; --border: #ece7e0; --danger: #b3402f; --danger-soft: #f7e4e0; --warn: #a3701a; --warn-soft: #f6ecd6; --ok: #3f7d54; --ok-soft: #e4efe7; --shadow: 0 12px 40px rgba(0, 0, 0, .06); } @media (prefers-color-scheme: dark) { :root { --bg: #1a1815; --fg: #efe9e1; --muted: #a49a8d; --accent: #d68a6e; --accent-dark: #e6a488; --accent-soft: #3a2c24; --card: #232019; --surface-2: #2b2720; --border: #322d25; --danger: #e98d7d; --danger-soft: #3a2420; --warn: #d6b26a; --warn-soft: #352c1c; --ok: #8fc7a2; --ok-soft: #223026; --shadow: 0 12px 40px rgba(0, 0, 0, .35); } } /* --- Theme palettes ------------------------------------------------------- */ /* A simple palette switcher (Family & Settings page). The default is Warm (the base :root above, no attribute). Each theme just re-tints the accent family; the light/dark base carries everything else, so every palette works in both. Applied by setting data-theme on (bootcheck.js, from the saved pref). */ :root[data-theme="ocean"] { --accent: #2f7ca8; --accent-dark: #205e82; --accent-soft: #e0edf5; } :root[data-theme="forest"] { --accent: #4c8a5d; --accent-dark: #366b45; --accent-soft: #e4efe7; } :root[data-theme="berry"] { --accent: #a6518f; --accent-dark: #803a6f; --accent-soft: #f3e5ef; } :root[data-theme="slate"] { --accent: #5b6b86; --accent-dark: #414f66; --accent-soft: #e7eaf0; } @media (prefers-color-scheme: dark) { :root[data-theme="ocean"] { --accent: #61a9d1; --accent-dark: #82c1e5; --accent-soft: #21343f; } :root[data-theme="forest"] { --accent: #79c08e; --accent-dark: #94d4a6; --accent-soft: #1f3025; } :root[data-theme="berry"] { --accent: #d68ac6; --accent-dark: #e7a7db; --accent-soft: #382435; } :root[data-theme="slate"] { --accent: #93a1bd; --accent-dark: #b0bcd4; --accent-soft: #252b38; } } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent-dark); } /* --- App frame: constant banner over a left sidebar + content column ------ */ /* A CONSTANT BANNER sits on top of everything (the app title left, the family's name right). Below it, Furever's primary navigation is a LEFT SIDEBAR: At A Glance, one entry per pet, and Add New Pet. On narrow screens the sidebar becomes an off-canvas drawer that slides in from the left (never a drop-down), opened from the ☰ in the banner. The per-pet page tabs (Profile / Reminders / Log) live in a top sub-nav under a border, in the content column. */ :root { --banner-h: 4rem; } body { min-height: 100vh; } /* Constant banner */ #app-banner { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--border); } .banner-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--banner-h); padding: .4rem clamp(.75rem, 4vw, 2rem); } .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--fg); } .brand-paw { font-size: 1.6rem; line-height: 1; } .brand-name { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; } .brand-by { display: flex; flex-direction: column; justify-content: center; font-size: .62rem; font-weight: 700; line-height: 1.18; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .family-badge { margin-left: auto; text-decoration: none; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); padding: .4rem .9rem; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; } .family-badge:hover { filter: brightness(.97); } .family-badge.family-unset { color: var(--muted); background: var(--surface-2); font-weight: 500; } /* Sidebar + content row */ .app-body { display: flex; align-items: flex-start; } #app-nav { flex: none; width: 15rem; background: var(--card); border-right: 1px solid var(--border); position: sticky; top: var(--banner-h); align-self: flex-start; height: calc(100vh - var(--banner-h)); overflow-y: auto; display: flex; flex-direction: column; padding: 1rem .75rem; z-index: 30; } .side-link { display: flex; align-items: center; gap: .6rem; color: var(--fg); text-decoration: none; font-weight: 500; padding: .55rem .7rem; border-radius: 10px; white-space: nowrap; border: none; background: none; font: inherit; text-align: left; width: 100%; cursor: pointer; } .side-link:hover { background: var(--surface-2); } .side-link.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; } .side-link .side-ava { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; display: grid; place-items: center; font-size: .95rem; } .side-link .side-name { overflow: hidden; text-overflow: ellipsis; } .side-sep { height: 1px; background: var(--border); margin: .6rem .35rem; } .side-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .5rem .7rem .2rem; } .side-add { margin-top: auto; padding-top: .6rem; } .side-add .side-link { color: var(--accent-dark); font-weight: 600; } /* Content column */ .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Top sub-nav — the pet-scoped page tabs, under a border. Sticks just below the constant banner. Collapses to nothing on At A Glance (no other pages for now). */ #app-subnav { position: sticky; top: var(--banner-h); z-index: 20; background: var(--bg); } #app-subnav:empty { display: none; } .subnav-inner { display: flex; gap: .25rem; align-items: center; border-bottom: 1px solid var(--border); padding: .5rem clamp(.75rem, 4vw, 2rem); overflow-x: auto; } .subnav-link { color: var(--muted); text-decoration: none; font-weight: 500; padding: .4rem .9rem; border-radius: 999px; white-space: nowrap; } .subnav-link:hover { background: var(--surface-2); color: var(--fg); } .subnav-link.active { background: var(--accent-soft); color: var(--accent-dark); } /* Mobile drawer toggle (lives in the banner) + backdrop */ .nav-toggle { display: none; margin: -.2rem .1rem -.2rem -.3rem; width: 2.4rem; height: 2.4rem; border-radius: 10px; flex: none; background: none; border: 1px solid var(--border); color: var(--fg); font-size: 1.25rem; line-height: 1; cursor: pointer; } .nav-toggle:hover { background: var(--surface-2); } .nav-backdrop { display: none; } @media (max-width: 720px) { :root { --banner-h: 3.4rem; } #app-nav { position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: min(16rem, 80vw); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow); z-index: 50; } body.nav-open #app-nav { transform: translateX(0); } .nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 45; } body.nav-open .nav-backdrop { display: block; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .brand-name { font-size: 1.45rem; } } /* --- Layout -------------------------------------------------------------- */ main { width: 100%; max-width: 52rem; margin: 0 auto; padding: clamp(1rem, 4vw, 2rem) clamp(.75rem, 4vw, 2rem) 4rem; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .page-header h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.01em; } .page-subtitle { color: var(--muted); margin: .15rem 0 0; } /* --- Cards --------------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; } .card h2 { font-size: 1.05rem; margin: 0 0 .6rem; } .empty-state { text-align: center; color: var(--muted); padding: 2rem 1rem; } .empty-state .big { font-size: 2.5rem; line-height: 1; display: block; margin-bottom: .5rem; } /* --- Pre-pickup countdown card (profile.js) ------------------------------ */ /* The breeder-authored "it's almost time" lead-in; accent-tinted so it reads as a warm moment, distinct from the plain detail cards below it. */ .countdown-card { border: 1px solid var(--accent); border-radius: 14px; overflow: hidden; background: var(--accent-soft); box-shadow: var(--shadow); margin-bottom: 1rem; } .countdown-photo { display: block; width: 100%; max-height: 15rem; object-fit: cover; } .countdown-body { padding: 1.1rem 1.2rem; } .countdown-badge { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .7rem; border-radius: 999px; margin-bottom: .5rem; background: var(--accent); color: #fff; } .countdown-headline { margin: 0; font-size: 1.3rem; line-height: 1.25; color: var(--accent-dark); } .countdown-details { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .6rem; } .countdown-detail { font-size: .95rem; color: var(--fg); } .countdown-note { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--border); white-space: pre-wrap; color: var(--fg); } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-weight: 600; font-size: .95rem; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; background: var(--card); color: var(--fg); border: 1px solid var(--border); text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--surface-2); } .btn:disabled { opacity: .55; cursor: default; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-dark); } .btn-sm { padding: .3rem .7rem; font-size: .85rem; } .pill-row { display: flex; gap: .5rem; flex-wrap: wrap; } /* --- Badges (values from vocab.js) --------------------------------------- */ .badge { display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1.4; padding: .1rem .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .badge-neutral { background: var(--surface-2); color: var(--muted); border-color: var(--border); } .badge-green { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); } .badge-blue { background: #e3edf7; color: #275580; border-color: #c3d7ea; } .badge-amber { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .badge-red { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .badge-purple { background: #efe6f6; color: #6a3d90; border-color: #dbc7ea; } .badge-gray { background: var(--surface-2); color: var(--muted); border-color: var(--border); } @media (prefers-color-scheme: dark) { .badge-blue { background: #22303f; color: #9cc4e6; border-color: #33506a; } .badge-purple { background: #302340; color: #c6a6e2; border-color: #4a3560; } } /* --- Schedule list (the derived reminders) ------------------------------- */ .sched-list { list-style: none; margin: 0; padding: 0; } .sched-item { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--border); } .sched-item:first-child { border-top: none; } .sched-main { flex: 1; min-width: 12rem; } .sched-label { font-weight: 600; } .sched-meta { color: var(--muted); font-size: .85rem; } .sched-note { color: var(--muted); font-size: .85rem; margin-top: .1rem; } .status-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; align-self: center; } .status-overdue .status-dot { background: var(--danger); } .status-due_soon .status-dot { background: var(--warn); } .status-upcoming .status-dot { background: var(--muted); } .status-done .status-dot { background: var(--ok); } .status-unscheduled .status-dot { background: var(--border); } .status-done .sched-label { color: var(--muted); } /* --- Forms --------------------------------------------------------------- */ .form-grid { display: grid; gap: .85rem; } .field { display: grid; gap: .25rem; } .field label { font-weight: 600; font-size: .9rem; } .field input, .field select, .field textarea { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .65rem; width: 100%; } .field .hint { color: var(--muted); font-size: .8rem; } .joined-inputs { display: flex; gap: .5rem; } .joined-inputs select { flex: 1.3; } .joined-inputs input { flex: 1; } .form-actions { display: flex; gap: .5rem; margin-top: .5rem; } /* --- Misc ---------------------------------------------------------------- */ .error-box { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; padding: .6rem .8rem; margin-bottom: 1rem; } .error-box:empty { display: none; } .list-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--border); } .list-row:first-child { border-top: none; } .list-row .grow { flex: 1; min-width: 10rem; } .avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; display: grid; place-items: center; font-size: 1.2rem; } .muted { color: var(--muted); } .section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.25rem 0 .35rem; } /* --- Theme switcher swatches (Family & Settings) ------------------------- */ .theme-swatches { display: flex; gap: .6rem; flex-wrap: wrap; } .theme-swatch { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; padding: .4rem .7rem .4rem .45rem; border-radius: 999px; background: var(--card); color: var(--fg); border: 1px solid var(--border); } .theme-swatch:hover { background: var(--surface-2); } .theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .theme-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .12); } /* --- Pet profile (the pet's landing page) -------------------------------- */ /* An "Add Picture" box on top, then the pet's details at a much larger size than a compact list — this page is the pet's face in the app. */ .photo-box { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 24rem; border: 2px dashed var(--border); border-radius: 18px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; text-align: center; cursor: pointer; overflow: hidden; margin-bottom: 1.75rem; } .photo-box:hover { border-color: var(--accent); color: var(--accent-dark); } .photo-box.has-photo { border-style: solid; border-color: var(--border); } .photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-box .ph-inner { padding: 2rem; } .photo-box .ph-icon { font-size: 3.2rem; display: block; line-height: 1; } .photo-box .ph-text { font-weight: 600; font-size: 1.05rem; margin-top: .5rem; } .photo-box .ph-change { position: absolute; right: .75rem; bottom: .75rem; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; opacity: 0; transition: opacity .15s; } .photo-box.has-photo:hover .ph-change { opacity: 1; } .profile-name { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 .35rem; letter-spacing: -.02em; line-height: 1.05; } .profile-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; font-size: 1.1rem; } .profile-age { color: var(--muted); font-weight: 600; } .profile-breeder { color: var(--muted); font-weight: 600; text-align: right; } .detail-list { display: grid; gap: 0; } .detail-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-top: 1px solid var(--border); padding: 1rem 0; font-size: 1.35rem; } .detail-row:first-child { border-top: none; } .detail-key { color: var(--muted); font-size: 1.05rem; font-weight: 600; } .detail-val { font-weight: 600; text-align: right; }