/* Fonts (Bagel Fat One, Figtree) are linked from each page's so they load in parallel with this file. */ /* ============================================================ DoggyDiet — flat colour, fat type, capsule shapes. Ground + cards (no boxes inside boxes). One hot orange for action; a small set of spot colours that mean something (each dog and each tracked thing has its own). ============================================================ */ :root{ --bg:#E8E7E2; --paper:#FFFFFF; --paper-2:#F4F3EF; --ink:#17120F; --ink-2:#5D5750; --line:rgba(23,18,15,.14); --orange:#FF5B14; --butter:#FFD84D; --lilac:#CDB6F2; --aqua:#A6DFD8; --pink:#F9B5C2; --sky:#B6C9F2; --lime:#D6E96F; --red:#BC1D09; --red-soft:#FFD9CF; --good:#0E7C55; --good-soft:#BFEBD3; --warn:#8A5A00; --warn-soft:#FFE9A6; /* names the older markup still uses */ --surface:var(--paper); --surface-2:var(--paper-2); --ink-dim:var(--ink-2); --border:var(--line); --accent:var(--orange); --accent-ink:#17120F; --accent-soft:#FFD8C4; --accent2:#17120F; --accent2-soft:var(--paper-2); --critical:var(--red); --critical-soft:var(--red-soft); --water:#2C5BC4; --water-soft:var(--sky); --display:'Bagel Fat One','Figtree',system-ui,sans-serif; --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Figtree',system-ui,sans-serif; --r-xl:34px; --r-lg:26px; --r-md:18px; --r-sm:12px; --page-w:1120px; color-scheme:light dark; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#100E0D; --paper:#1E1A18; --paper-2:#2A2522; --ink:#F6F2EA; --ink-2:#B9B1A7; --line:rgba(246,242,234,.16); --red:#FF7A5E; --red-soft:#4A1F17; --good:#7EE0AC; --good-soft:#17382A; --warn:#FFD24D; --warn-soft:#3F3210; --accent-soft:#4A2313; --water:#9DB8FF; } } :root[data-theme="dark"]{ --bg:#100E0D; --paper:#1E1A18; --paper-2:#2A2522; --ink:#F6F2EA; --ink-2:#B9B1A7; --line:rgba(246,242,234,.16); --red:#FF7A5E; --red-soft:#4A1F17; --good:#7EE0AC; --good-soft:#17382A; --warn:#FFD24D; --warn-soft:#3F3210; --accent-soft:#4A2313; --water:#9DB8FF; } /* Anything sitting on a spot colour keeps the light-theme palette, whatever the page theme is. */ .hero, .stat, .dog-card, .share-hero, .tracker-card[data-tone], .banner, .birthday-banner, .gate-card, .due-panel, .import-banner, .install-hint, .give-intro, .callout-emergency{ --ink:#17120F; --ink-2:#4A443E; --line:rgba(23,18,15,.18); --paper:#FFFFFF; --paper-2:#F4F3EF; --red:#BC1D09; --red-soft:#FFD9CF; --good:#0E7C55; --good-soft:#BFEBD3; --warn:#8A5A00; --warn-soft:#FFE9A6; --border:var(--line); --surface:var(--paper); --surface-2:var(--paper-2); --ink-dim:var(--ink-2); color:var(--ink); } *{ box-sizing:border-box; } [hidden]{ display:none !important; } html, body{ margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; } body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.5; min-height:100vh; padding-bottom:104px; /* room for the floating tab bar */ } .num{ font-variant-numeric:tabular-nums; } a{ color:inherit; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--orange); } a:hover{ text-decoration-color:currentColor; } h1, h2, h3{ font-family:var(--display); font-weight:400; letter-spacing:-.005em; line-height:1.04; margin:0; } h4{ font-family:var(--sans); font-weight:800; margin:0; } p{ margin:0; } :focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:8px; } .tab-bar :focus-visible, .auth-wrap :focus-visible{ outline-color:var(--orange); } .auth-wrap :focus-visible{ outline-color:#17120F; } img{ max-width:100%; } /* ---------- icons: one drawn set, inheriting colour ---------- */ .ic{ width:1.25em; height:1.25em; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.28em; } .ic-fill{ fill:currentColor; stroke:none; } .ic{ pointer-events:none; } .ic-disc{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--bg); flex:0 0 auto; } .ic-disc .ic{ width:20px; height:20px; } /* ---------- Top bar ---------- */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:var(--page-w); margin:0 auto; padding:18px 20px 8px; } .brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-size:27px; line-height:1; color:var(--ink); text-decoration:none; letter-spacing:-.01em; } .brand-mark{ width:38px; height:38px; flex:0 0 auto; } .topbar .who{ display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; flex-wrap:wrap; font-size:14px; font-weight:700; color:var(--ink-2); } .who-name{ min-width:0; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--paper); color:var(--ink); border-radius:999px; padding:6px 14px; } .who a{ font-weight:800; color:var(--ink); } .who .btn{ white-space:nowrap; } .page{ max-width:var(--page-w); margin:0 auto; padding:8px 20px 40px; } /* ---------- Buttons: capsules with a hard drop, like a key you can press ---------- */ button{ font-family:inherit; cursor:pointer; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px; border:2px solid var(--ink); background:var(--paper); color:var(--ink); font:800 14px/1 var(--sans); text-decoration:none; white-space:nowrap; box-shadow:0 3px 0 var(--ink); transition:transform .09s ease, box-shadow .09s ease, background-color .12s ease; } a.btn{ display:inline-flex; } .btn:hover{ transform:translateY(-1px); box-shadow:0 4px 0 var(--ink); } .btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); } .btn-primary{ background:var(--orange); color:#17120F; } .btn-danger{ background:var(--red); color:#fff; border-color:var(--ink); } .btn-small{ min-height:36px; padding:0 15px; font-size:13px; box-shadow:0 2px 0 var(--ink); } .btn-small:hover{ box-shadow:0 3px 0 var(--ink); } .btn-small:active{ transform:translateY(2px); box-shadow:0 0 0 var(--ink); } .btn-ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-2); padding:0 12px; } .btn-ghost:hover{ background:rgba(127,127,127,.16); box-shadow:none; transform:none; color:var(--ink); } .btn-ghost:active{ transform:none; } .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; } .btn .ic{ width:1.15em; height:1.15em; } /* ---------- Tab bar: a floating capsule at the bottom on phones, docked at the top on wide screens ---------- */ .tab-bar{ position:fixed; z-index:60; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; gap:4px; padding:6px; border-radius:999px; background:var(--ink); box-shadow:0 12px 30px -8px rgba(0,0,0,.35); max-width:calc(100vw - 20px); } .tab-bar button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; min-width:48px; height:48px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--bg); opacity:.72; font:800 14px/1 var(--sans); } .tab-bar button:hover{ opacity:1; } .tab-bar button .ic{ width:22px; height:22px; } .tab-bar button > span:not(.tab-badge){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .tab-bar button.active{ background:var(--orange); color:#17120F; opacity:1; } .tab-bar button.active > span:not(.tab-badge){ position:static; width:auto; height:auto; overflow:visible; clip:auto; } .tab-badge{ position:absolute; top:2px; right:2px; min-width:19px; height:19px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:var(--butter); color:#17120F; font:800 11px/1 var(--sans); border:2px solid var(--ink); } .tab-badge.is-overdue{ background:var(--red); color:#fff; } .tab-panel{ display:block; } @media (prefers-reduced-motion: no-preference){ .tab-panel:not([hidden]){ animation:rise .32s cubic-bezier(.2,.8,.2,1) both; } .dd-chart rect{ transform-box:fill-box; transform-origin:50% 100%; animation:grow .5s cubic-bezier(.2,.8,.2,1) both; } @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @keyframes grow{ from{ transform:scaleY(.15); } to{ transform:none; } } } .signed-in .hero{ padding:24px 28px 22px; } .signed-in .hero h1{ font-size:clamp(30px,6vw,48px); margin-bottom:8px; } .signed-in .hero .tagline{ font-size:16px; } .signed-in .hero-art{ width:150px; } @media (min-width:900px){ body{ padding-bottom:40px; } .tab-bar{ position:sticky; top:12px; bottom:auto; left:auto; transform:none; margin:6px auto 24px; width:fit-content; max-width:none; } .tab-bar button{ padding:0 20px; opacity:.8; } .tab-bar button > span:not(.tab-badge){ position:static; width:auto; height:auto; overflow:visible; clip:auto; } } /* ---------- Hero and the numbers under it ---------- */ .hero{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:8px 24px; align-items:center; background:var(--orange); border-radius:var(--r-xl); padding:32px 32px 30px; margin-bottom:12px; overflow:hidden; } .hero-copy{ min-width:0; } .hero h1{ font-size:clamp(38px,8.4vw,68px); margin:0 0 14px; text-wrap:balance; } .hero .tagline{ font-size:17px; font-weight:600; max-width:44ch; color:rgba(23,18,15,.82); } .hero-art{ margin:0; align-self:end; justify-self:end; width:210px; margin-right:-6px; margin-bottom:-14px; } .hero-art img{ transform:rotate(3deg); } .art-print{ display:block; width:100%; height:auto; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.9) brightness(1.18); } body[data-tab]:not([data-tab="calculator"]) .hero, body[data-tab]:not([data-tab="calculator"]) .summary-strip{ display:none; } .summary-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:34px; } .stat{ border-radius:var(--r-lg); padding:16px 18px 15px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:92px; } .stat .label{ font-size:14px; font-weight:700; color:var(--ink-2); order:2; } .stat .value{ font:400 34px/1 var(--display); font-variant-numeric:tabular-nums; order:1; } .stat:nth-child(1){ background:var(--lilac); } .stat:nth-child(2){ background:var(--butter); } .stat:nth-child(3){ background:#17120F; grid-column:1 / -1; flex-direction:row; align-items:flex-end; justify-content:space-between; } .stat:nth-child(3) .label{ color:#E8E7E2; } .stat:nth-child(3) .value{ color:var(--orange); font-size:46px; } .stat:nth-child(4){ background:var(--aqua); } .stat:nth-child(5){ background:var(--pink); } .stat.alert{ background:var(--red); color:#fff; } .stat.alert .label{ color:#fff; } @media (min-width:760px){ .summary-strip{ grid-template-columns:repeat(5,1fr); } .stat:nth-child(3){ grid-column:auto; flex-direction:column; align-items:stretch; justify-content:space-between; } .stat:nth-child(3) .value{ font-size:34px; } } @media (max-width:700px){ .hero{ grid-template-columns:1fr; padding:26px 22px 24px; } .hero-art{ position:absolute; right:-14px; top:10px; width:96px; margin:0; } .hero h1{ padding-right:64px; } .hero .tagline{ position:relative; } } /* ---------- Sections on the ground ---------- */ .panel{ margin:0 0 36px; } .panel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px; } .panel-head .btn{ flex:0 0 auto; } .panel-head h2{ font-size:clamp(30px,6vw,42px); } .panel-sub{ color:var(--ink-2); font-size:15px; font-weight:600; margin-top:6px; max-width:60ch; } /* ---------- Forms ---------- */ form.entry-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 16px; background:var(--paper); border-radius:var(--r-lg); padding:22px; margin-bottom:18px; } .field{ display:flex; flex-direction:column; gap:6px; min-width:0; } .field.span2{ grid-column:span 2; } .field label, .health-form label, .account-sub label, .account-delete label{ font-size:14px; font-weight:800; color:var(--ink); text-transform:none; letter-spacing:0; } .field-row{ display:flex; gap:8px; } .field-row input{ flex:1 1 64px; min-width:64px; } .field-row select{ flex:0 0 auto; width:auto; max-width:96px; } input, select, textarea{ width:100%; min-height:46px; padding:0 14px; border-radius:16px; background:var(--paper-2); color:var(--ink); border:2px solid transparent; font:600 16px/1.2 var(--sans); } form.entry-form input, form.entry-form select, .health-form input, .health-form select{ background:var(--paper-2); } .dog-card input, .dog-card select, .tracker-card input, .tracker-card select{ background:var(--paper); } textarea{ padding:12px 14px; min-height:88px; line-height:1.4; } input::placeholder{ color:var(--ink-2); opacity:.7; } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--ink); box-shadow:0 3px 0 var(--ink); } input[type="checkbox"]{ width:22px; height:22px; min-height:0; padding:0; accent-color:var(--orange); } input[type="range"]{ min-height:34px; padding:0; background:transparent; accent-color:var(--orange); } input[type="file"]{ padding:10px 12px; min-height:0; font-size:14px; } .form-actions{ grid-column:1/-1; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; } .checkline{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--ink); } .form-error{ grid-column:1/-1; background:var(--red); color:#fff; border-radius:14px; padding:10px 14px; font-size:14px; font-weight:700; } .form-hint{ grid-column:1/-1; font-size:13px; color:var(--ink-2); font-weight:600; line-height:1.4; } .quickpick{ grid-column:1/-1; } .bcs-form{ align-items:center; } .bcs-readout{ font-weight:800; font-size:14px; flex:0 0 auto; min-width:92px; text-align:right; } /* ---------- Banners ---------- */ .banner, .import-banner, .install-hint, .guest-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-radius:var(--r-md); padding:14px 18px; margin-bottom:14px; font-size:15px; font-weight:700; line-height:1.4; } .guest-banner{ display:block; background:var(--paper); color:var(--ink-2); font-weight:600; font-size:14px; } .guest-banner a{ color:var(--ink); font-weight:800; } .import-banner{ background:var(--aqua); } .install-hint{ background:var(--sky); } .recovery-prompt{ background:var(--butter); } .import-banner-actions, .install-actions{ display:flex; gap:8px; flex:0 0 auto; } /* ---------- Food cards ---------- */ .food-list{ display:flex; flex-direction:column; gap:10px; } .food-card{ background:var(--paper); border-radius:var(--r-lg); padding:16px 20px; display:flex; align-items:center; gap:12px 24px; flex-wrap:wrap; } .food-card .name{ font-weight:800; font-size:17px; flex:1 1 100%; line-height:1.25; } .food-card .name .sub{ display:block; font-weight:600; font-size:14px; color:var(--ink-2); margin-top:3px; } .food-metric{ flex:1 1 auto; text-align:left; min-width:0; } .food-card .card-actions{ margin-left:auto; } @media (min-width:820px){ .food-card .name{ flex:1 1 240px; } .food-metric{ flex:0 0 auto; text-align:right; min-width:100px; } } .food-metric .m-label{ font-size:13px; color:var(--ink-2); font-weight:700; } .food-metric .m-value{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; } .food-metric .m-value.best{ display:inline-block; background:var(--butter); color:#17120F; border-radius:999px; padding:1px 12px; } .card-actions{ display:flex; gap:4px; } .empty{ color:var(--ink-2); font-size:15px; font-weight:600; padding:22px 18px; text-align:center; background:var(--paper); border-radius:var(--r-lg); } /* ---------- Dog cards: one colour per dog ---------- */ .dog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; align-items:start; } .dog-card{ --dog:var(--lilac); background:var(--dog); border-radius:var(--r-xl); padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px; } .dog-card[data-tone="lilac"]{ --dog:var(--lilac); } .dog-card[data-tone="butter"]{ --dog:var(--butter); } .dog-card[data-tone="aqua"]{ --dog:var(--aqua); } .dog-card[data-tone="pink"]{ --dog:var(--pink); } .dog-card[data-tone="sky"]{ --dog:var(--sky); } .dog-card[data-tone="lime"]{ --dog:var(--lime); } .dog-card .head{ display:flex; align-items:center; gap:14px; } .dog-card .head-text{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; } .dog-card h3{ font-size:38px; min-width:0; overflow-wrap:break-word; hyphens:auto; } .dog-card .card-actions{ margin-left:-12px; gap:10px; } /* Delete looks like what it is, and sits a little apart from Edit */ .btn-ghost[data-del-dog]:hover, .btn-ghost[data-del-food]:hover, .btn-ghost[data-del-cond]:hover, .btn-ghost[data-del-med]:hover, .btn-ghost[data-del-care]:hover, .btn-ghost[data-del-symptom]:hover{ color:var(--red); background:var(--red-soft); } .dog-card .card-actions .btn{ min-height:30px; padding:0 12px; } .dog-avatar{ flex:0 0 auto; width:58px; height:58px; border-radius:50%; background:var(--paper); box-shadow:0 3px 0 var(--ink); overflow:hidden; } .dog-avatar svg{ width:100%; height:100%; display:block; } .dog-card .dog-meta{ margin-top:-6px; } .dog-card .meta{ color:var(--ink-2); font-size:14px; margin-top:2px; font-weight:600; } .dog-card .no-food{ background:var(--paper); border-radius:16px; padding:12px 14px; font-size:14px; font-weight:700; } .dog-add-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:180px; background:transparent; border:3px dashed var(--ink); border-radius:var(--r-xl); color:var(--ink); font:400 26px/1.1 var(--display); text-align:center; padding:20px; cursor:pointer; } .dog-add-tile .ic{ width:38px; height:38px; stroke-width:2.6; } .dog-add-tile:hover{ background:var(--paper); } .dog-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; } .dog-tabs button{ --dog:var(--paper); min-height:42px; padding:0 18px; border-radius:999px; border:2px solid transparent; background:var(--paper); color:var(--ink); font:800 14px/1 var(--sans); } .dog-tabs button:hover{ border-color:var(--ink); } .dog-tabs button.active{ background:var(--dog); color:#17120F; border-color:var(--ink); box-shadow:0 3px 0 var(--ink); } .dog-tabs button::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--dog, var(--ink)); border:2px solid var(--ink); margin-right:8px; vertical-align:0; } .kv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; } .kv{ display:flex; flex-direction:column; gap:2px; } .kv .k{ font-size:13px; font-weight:700; color:var(--ink-2); } .kv .v{ font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; } .kv .v.big{ font:400 38px/1 var(--display); color:var(--ink); } .dog-card .kv-grid{ grid-template-columns:1fr 1fr; gap:8px; } .dog-card .kv{ background:rgba(255,255,255,.6); border-radius:16px; padding:10px 14px; } .dog-card .kv .v{ font-size:19px; } .dog-card .kv-portion{ grid-column:1/-1; background:transparent; padding:0; } .dog-card .kv-portion .v.big{ font-size:68px; } .dog-card .kv-energy{ grid-column:1/-1; order:5; flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; background:transparent; padding:2px 4px 0; } .dog-card .kv-energy .v{ font-size:15px; } .meter-wrap{ display:flex; flex-direction:column; gap:7px; } .meter-label{ display:flex; justify-content:space-between; gap:10px; font-size:14px; color:var(--ink); font-weight:700; } .meter-label .days{ font-weight:800; white-space:nowrap; } .meter{ height:16px; border-radius:999px; background:rgba(255,255,255,.65); overflow:hidden; } .meter > span{ display:block; height:100%; border-radius:999px; } .status-pill{ display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:13px; font-weight:800; padding:5px 13px; border-radius:999px; border:2px solid #17120F; box-shadow:0 2px 0 #17120F; transform:rotate(-2deg); } .status-pill.good{ background:var(--good-soft); color:#0B5A3C; } .status-pill.warn{ background:var(--butter); color:#17120F; } .status-pill.critical{ background:var(--red); color:#fff; } .rer-note{ font-size:13px; color:var(--ink-2); font-weight:600; border-top:2px solid rgba(23,18,15,.14); padding-top:10px; line-height:1.4; } .rer-note .num{ color:var(--ink); font-weight:800; } .treat-note{ margin-top:-4px; } /* ---------- Meals: the day's portion split into feeds ---------- */ .meal-split{ display:flex; flex-direction:column; gap:8px; } .meal-split-head{ font-size:14px; font-weight:800; color:var(--ink); } .meal-split ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .meal-split li{ display:flex; align-items:baseline; gap:10px; padding:7px 14px; border-radius:999px; background:var(--paper); font-size:14px; } .meal-name{ font-weight:800; } .meal-name small{ font-weight:600; color:var(--ink-2); font-size:12.5px; } .meal-grams{ font-weight:800; font-variant-numeric:tabular-nums; } #mealsField{ grid-column:1/-1; } #mealsField select{ max-width:280px; } .meal-times{ margin-top:6px; } .meal-times > summary, .add-form > summary, .past-meds summary, .howto-details summary{ cursor:pointer; font-size:14px; font-weight:800; } .meal-times-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:10px; } .meal-time{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-2); font-weight:700; } .meal-time input{ min-width:0; } /* ---------- Tracker & health cards ---------- */ .tracker-grid, .health-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px; align-items:start; } .tracker-card{ --tone:var(--paper); background:var(--tone); border-radius:var(--r-xl); padding:22px; display:flex; flex-direction:column; gap:14px; color:var(--ink); } .tracker-card[data-tone="lilac"]{ --tone:var(--lilac); } .tracker-card[data-tone="butter"]{ --tone:var(--butter); } .tracker-card[data-tone="aqua"]{ --tone:var(--aqua); } .tracker-card[data-tone="pink"]{ --tone:var(--pink); } .tracker-card[data-tone="sky"]{ --tone:var(--sky); } .tracker-card[data-tone="lime"]{ --tone:var(--lime); } .tracker-card[data-tone="orange"]{ --tone:var(--orange); --ink-2:rgba(23,18,15,.85); } .tracker-card[data-tone="paper"]{ --tone:var(--paper); } .tracker-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .tracker-card-head h3{ font-size:26px; display:flex; align-items:center; gap:10px; min-width:0; } .tracker-card-head h3 .ic-disc{ width:40px; height:40px; background:#17120F; color:#fff; } .goal-chip{ font-size:13px; font-weight:800; background:var(--paper); border-radius:999px; padding:5px 12px; white-space:nowrap; } .goal-chip.over{ background:var(--warn-soft); color:var(--warn); } .chart-wrap{ background:var(--paper); border-radius:20px; padding:12px 12px 8px; } .dd-chart{ width:100%; height:auto; display:block; } .dd-chart text{ font-family:var(--sans); font-weight:700; fill:var(--ink-2); } .chart-empty{ color:var(--ink-2); font-size:14px; font-weight:600; padding:26px 8px; text-align:center; } .log-rows{ display:flex; flex-direction:column; max-height:160px; overflow-y:auto; } .log-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; font-weight:600; padding:7px 2px; border-bottom:2px solid rgba(23,18,15,.1); } .log-row:last-child{ border-bottom:none; } .log-row .del{ color:var(--ink-2); cursor:pointer; font-size:14px; background:none; border:none; padding:4px 8px; border-radius:999px; } .log-row .del:hover{ background:var(--red); color:#fff; } .mini-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .mini-form input, .mini-form select{ min-height:42px; font-size:15px; flex:1 1 84px; min-width:76px; border-radius:14px; } .mini-form input[type="date"]{ flex:1 1 150px; min-width:140px; } .mini-form select{ flex:1 1 110px; max-width:none; } .mini-form button{ flex:0 0 auto; } .tracker-card[data-tone="orange"] .btn-primary{ background:#17120F; color:#fff; } .tracker-card-head{ flex-wrap:wrap; } .exercise-total{ font-size:14px; color:var(--ink-2); font-weight:700; } .bcs-howto{ background:var(--paper); border-radius:16px; padding:12px 14px; font-size:14px; color:var(--ink-2); display:flex; flex-direction:column; gap:6px; font-weight:600; } .bcs-howto strong{ color:var(--ink); } .tracker-card .kv .v.big{ font:400 44px/1 var(--display); } .tracker-card .kv-portion{ grid-column:1/-1; } .tracker-card .kv-grid{ gap:12px 18px; } .share-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; background:var(--orange); border-radius:var(--r-xl); padding:26px 28px 24px; margin-bottom:14px; } .share-hero h2{ font-size:clamp(46px,11vw,76px); } .share-hero .panel-sub{ color:rgba(23,18,15,.8); font-size:16px; } .share-hero .btn{ flex:0 0 auto; } .share-view .empty{ background:rgba(255,255,255,.55); padding:14px; } /* ---------- Gate card (sign-in needed) ---------- */ .gate-card{ background:var(--butter); border-radius:var(--r-xl); text-align:center; max-width:520px; margin:8px auto 24px; padding:26px 26px 28px; } .gate-card h3{ font-size:30px; margin:0 0 10px; } .gate-card p{ font-size:15.5px; line-height:1.5; margin:0 0 16px; font-weight:600; color:rgba(23,18,15,.8); } .gate-art{ width:min(240px,70%); margin:0 auto 12px; } .gate-actions{ margin-bottom:14px; } .gate-note{ font-size:13.5px !important; margin-bottom:0 !important; } /* ---------- Library ---------- */ .ref-tabs{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; } .ref-tab-group{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .ref-tab-label{ flex:0 0 auto; font-size:14px; font-weight:800; color:var(--ink-2); width:64px; } .ref-tabs button, .sub-tabs button{ min-height:40px; padding:0 17px; border-radius:999px; border:2px solid transparent; background:var(--paper); color:var(--ink); font:800 14px/1 var(--sans); cursor:pointer; } .ref-tabs button:hover, .sub-tabs button:hover{ border-color:var(--ink); } .ref-tabs button.active, .sub-tabs button.active{ background:var(--ink); color:var(--bg); } .est-tag{ font-size:11.5px; font-weight:800; color:#17120F; background:var(--butter); border-radius:999px; padding:1px 8px; white-space:nowrap; } .est-note{ font-size:14px; font-weight:600; color:var(--ink-2); margin:-4px 0 14px; max-width:65ch; } .ref-blurb{ color:var(--ink-2); font-size:15px; margin:0 0 14px; max-width:65ch; font-weight:600; } .ref-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; } .ref-item, .exercise-energy-card, .bcs-howto-card, .avoid-card, .charity-card, .vetdiet-area{ background:var(--paper); border-radius:var(--r-md); padding:14px 16px; } .ref-item .rn{ font-weight:800; font-size:15px; line-height:1.3; } .ref-item .rb{ color:var(--ink-2); font-size:13.5px; margin-top:3px; font-weight:600; } .ref-item .rk{ color:var(--ink); font-size:14px; margin-top:7px; font-weight:800; font-variant-numeric:tabular-nums; } .ref-item a{ font-weight:800; font-size:14px; } .ref-list-plain{ margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:9px; font-size:15px; line-height:1.5; font-weight:600; } .ref-list-plain.danger li::marker{ color:var(--red); } .ref-note-block{ background:var(--red-soft); border-radius:var(--r-lg); padding:18px 20px; margin-bottom:14px; } .ref-note-block h3{ margin:0 0 8px; font-size:22px; color:var(--red); } .disclaimer-box{ font-size:14px; color:var(--ink-2); background:var(--paper); border-radius:var(--r-md); padding:12px 16px; margin-bottom:20px; font-weight:600; line-height:1.45; } .exercise-energy-grid, .bcs-howto-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; } .bcs-howto-grid{ margin-top:14px; } .exercise-energy-card .lvl{ font:400 21px/1.1 var(--display); } .exercise-energy-card .mins{ color:var(--ink); font-weight:800; font-size:14px; margin:4px 0 8px; } .exercise-energy-card ul{ margin:0; padding-left:1.1em; font-size:14px; font-weight:600; color:var(--ink-2); display:flex; flex-direction:column; gap:4px; } .bcs-scale{ display:flex; flex-direction:column; gap:4px; background:var(--paper); border-radius:var(--r-lg); padding:8px 20px; } .bcs-scale-row{ display:grid; grid-template-columns:34px 130px 1fr; gap:12px; align-items:baseline; padding:10px 0; border-bottom:2px solid var(--line); font-size:14.5px; } .bcs-scale-row:last-child{ border-bottom:none; } .bcs-scale-row .n{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--paper-2); font:400 18px/1 var(--display); } .bcs-scale-row:has(.band.ideal){ background:var(--good-soft); border-radius:18px; margin:2px -12px; padding:10px 12px; border-bottom:none; } .bcs-scale-row:has(.band.ideal) .n{ background:var(--paper); } .bcs-scale-row:has(.band.ideal) .desc{ color:#17120F; } .bcs-scale-row .band{ font-weight:800; } .bcs-scale-row .band.ideal{ color:var(--good); } .bcs-scale-row .desc{ color:var(--ink-2); font-weight:600; } .bcs-howto-card h4{ margin:0 0 6px; font-size:16px; } .bcs-howto-card p{ margin:0 0 4px; font-size:14px; color:var(--ink-2); font-weight:600; line-height:1.5; } .avoid-title{ display:flex; align-items:center; gap:10px; margin:26px 0 12px; font-family:var(--display); font-size:24px; } .avoid-title::before{ content:""; flex:0 0 auto; width:14px; height:14px; border-radius:50%; background:var(--red); } .avoid-title.level-avoid::before{ background:var(--orange); } .avoid-title.level-caution::before, .avoid-title.level-info::before{ background:var(--ink-2); } .avoid-title.level-best::before{ background:var(--good); } .avoid-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px; } .avoid-card{ border-left:8px solid var(--red); } .avoid-card.level-avoid{ border-left-color:var(--orange); } .avoid-card.level-caution, .avoid-card.level-info{ border-left-color:var(--ink-2); } .avoid-card.level-best{ border-left-color:var(--good); } .avoid-card .rn{ font-weight:800; font-size:15px; line-height:1.3; } .avoid-card p{ margin:5px 0 0; font-size:14px; line-height:1.5; color:var(--ink-2); font-weight:600; } .avoid-card p strong{ color:var(--ink); } .vetdiet-head{ display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:20px; align-items:start; margin-bottom:8px; } .vetdiet-area{ margin-bottom:12px; scroll-margin-top:90px; } .vetdiet-area.flash, .h-row.flash{ animation:flash 1.8s ease; } @keyframes flash{ 0%{ box-shadow:0 0 0 5px var(--orange); } 100%{ box-shadow:0 0 0 5px transparent; } } .vetdiet-area h3{ margin:0 0 6px; font-size:22px; } .vetdiet-area p{ margin:0 0 8px; font-size:14.5px; line-height:1.55; color:var(--ink-2); font-weight:600; } .vetdiet-area p strong{ color:var(--ink); } .vetdiet-brands{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:8px; } .brand-col h4{ margin:0 0 6px; font-size:14px; color:var(--ink-2); } .brand-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; } .brand-col li{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:14px; font-weight:700; } .brand-col li .num{ font-size:13px; color:var(--ink); white-space:nowrap; font-weight:800; } .brand-col li small{ color:var(--ink-2); font-weight:600; } .legal-note{ margin-top:14px; font-size:13px; line-height:1.55; color:var(--ink-2); font-weight:600; max-width:75ch; } .range-links{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px; } /* ---------- Art: old engravings, printed onto colour ---------- */ .art-color{ display:block; width:100%; height:auto; } .art-frame, .give-art{ margin:0; } /* Old prints keep a paper plate of their own, so they read on the dark theme too. */ .art-frame{ background:#F4F3EF; border-radius:22px; padding:8px; --ink:#17120F; } .art-frame img, .give-art img{ width:100%; } .give-art{ width:200px; } .give-art img{ transform:rotate(-2deg); } .empty.has-art{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 12px 24px; background:var(--lilac); color:#17120F; } .empty-art{ width:170px; } /* ---------- Birthday ---------- */ .birthday-banner{ position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; padding:34px 20px 20px 18px; margin-bottom:16px; background:var(--pink); border-radius:var(--r-xl); } .bday-bunting{ position:absolute; left:0; top:0; width:100%; height:26px; pointer-events:none; } .bday-hat{ flex:0 0 auto; width:56px; height:64px; transform:rotate(-9deg); } .bday-text{ flex:1 1 auto; min-width:0; position:relative; z-index:1; } .bday-text h2{ font-size:28px; margin:0 0 4px; } .bday-text p{ font-size:15px; font-weight:600; color:rgba(23,18,15,.8); } .bday-pic{ flex:0 0 auto; width:96px; height:70px; object-fit:cover; border-radius:14px; transform:rotate(3deg); } .bday-close{ flex:0 0 auto; align-self:flex-start; position:relative; z-index:1; } .confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .confetti i{ position:absolute; top:-14px; width:8px; height:12px; border-radius:3px; opacity:0; } @media (prefers-reduced-motion: no-preference){ .confetti i{ animation:confetti-fall 3s ease-in both; } } @keyframes confetti-fall{ 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 12%{ opacity:.9; } 100%{ transform:translateY(170px) rotate(320deg); opacity:0; } } @media (max-width:560px){ .bday-pic{ display:none; } .bday-text h2{ font-size:23px; } } /* ---------- Callouts ---------- */ .callout{ border-radius:var(--r-md); padding:14px 18px; font-size:15px; line-height:1.5; font-weight:600; margin:0 0 16px; } .callout strong{ color:var(--ink); } .callout-note{ background:var(--paper); color:var(--ink-2); } .callout-warn{ background:var(--warn-soft); color:var(--ink); } .callout-emergency{ background:var(--red); color:#fff; } .callout-emergency, .callout-emergency strong, .callout-emergency h3, .callout-emergency a{ color:#fff; } .callout-emergency h3{ margin:0 0 8px; font-size:24px; color:#fff; } .callout-emergency ol{ margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:6px; } .callout-emergency a{ font-weight:800; color:#fff; text-decoration-color:#fff; } .callout-emergency strong{ color:#fff; } /* ---------- Health ---------- */ .cond-list, .med-list{ display:flex; flex-direction:column; gap:10px; } .h-row{ background:var(--paper); border-radius:var(--r-md); padding:13px 16px; display:flex; flex-direction:column; gap:7px; } .h-row.ended{ opacity:.7; } .h-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; } .h-title{ font-weight:800; font-size:16px; } .h-dose{ font-size:14px; color:var(--ink); font-weight:800; } .h-meta{ font-size:14px; color:var(--ink-2); font-weight:600; line-height:1.45; } .h-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .status-pill.s-active{ background:var(--butter); color:#17120F; } .status-pill.s-managed{ background:var(--good-soft); color:#0B5A3C; } .status-pill.s-resolved{ background:var(--paper-2); color:var(--ink-2); box-shadow:none; } .diet-link{ font-size:14px; font-weight:800; } .health-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px 12px; background:var(--paper); border-radius:var(--r-md); padding:14px; margin-top:4px; } .health-form .wide{ grid-column:1 / -1; } .health-form label{ display:block; margin-bottom:4px; } .health-form input, .health-form select{ min-height:42px; font-size:15px; border-radius:14px; } .health-form .form-actions{ grid-column:1 / -1; } .dose-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; font-weight:700; } .dose-count{ font-weight:800; } .dose-count.done{ color:var(--good); } .dose-chips{ display:flex; gap:6px; flex-wrap:wrap; } .dose-chip{ display:inline-flex; align-items:center; gap:2px; font-size:13px; font-weight:800; background:var(--good-soft); color:#0B5A3C; border-radius:999px; padding:3px 5px 3px 11px; } .dose-chip .del{ color:inherit; opacity:.7; background:none; border:none; padding:1px 5px; font-size:12px; cursor:pointer; } .dose-chip .del:hover{ opacity:1; } .past-meds summary{ color:var(--ink-2); padding:4px 0; } .past-meds .med-list{ margin-top:8px; } .med-add-title{ margin:12px 0 0; font-size:14px; font-weight:800; color:var(--ink); } .sub-tabs{ display:flex; gap:8px; margin:0 0 18px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; } .sub-tabs::-webkit-scrollbar{ display:none; } .sub-tabs:empty{ display:none; } .sub-tabs button{ flex:0 0 auto; white-space:nowrap; } .due-panel{ background:var(--butter); border-radius:var(--r-xl); padding:18px 22px; margin-bottom:18px; } .due-panel.has-overdue{ background:var(--red-soft); } .due-panel.due-clear{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--good-soft); padding:14px 20px; font-size:15px; font-weight:700; } .due-panel.due-clear span{ flex:1 1 220px; } .due-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; margin-bottom:6px; flex-wrap:wrap; } .due-head h3{ font-size:26px; display:flex; align-items:center; gap:10px; } .due-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .due-item{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; border-top:2px solid rgba(23,18,15,.14); font-size:15px; font-weight:700; } .due-item:first-child{ border-top:none; } .due-what{ flex:1 1 220px; min-width:0; } .due-dog{ font-family:var(--display); font-weight:400; font-size:18px; margin-right:6px; } .due-item.is-overdue .due-dog{ color:var(--red); } .due-cal{ display:flex; gap:8px; flex-wrap:wrap; } .add-form{ margin-top:2px; } .add-form > summary{ list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 16px; border-radius:999px; border:2px dashed var(--ink); background:transparent; } .add-form > summary::-webkit-details-marker{ display:none; } .add-form > summary:hover{ background:rgba(255,255,255,.55); } .add-form[open] > summary{ margin-bottom:10px; border-style:solid; background:var(--paper); } .care-guide-hint{ margin-top:14px; } .diary-summary{ font-size:14px; background:var(--paper); border-radius:14px; padding:9px 13px; font-weight:600; } .call-links{ display:flex; gap:10px 16px; flex-wrap:wrap; } .call-link{ font-weight:800; font-size:15px; display:inline-flex; align-items:center; gap:6px; } .saved-note{ align-self:center; margin-right:auto; color:var(--good); font-weight:800; font-size:14px; } .print-actions{ display:flex; gap:8px; flex-wrap:wrap; } .print-help{ font-size:14px; margin:0; padding-left:1.2em; } /* ---------- Water, plans, treats, supply, sharing ---------- */ .chart-legend{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--ink-2); font-weight:700; } .chart-legend .lg{ display:inline-block; width:16px; height:9px; margin-right:6px; border-radius:999px; } .lg-band{ background:var(--good-soft); border:2px solid var(--good); } .lg-limit{ height:0 !important; border-top:3px dashed var(--red); border-radius:0 !important; } .water-avg{ font-size:14px; font-weight:700; } .water-alert{ margin:0; } .water-days{ display:flex; flex-direction:column; gap:6px; } .water-day{ background:var(--paper); border-radius:14px; padding:9px 12px; display:flex; flex-direction:column; gap:5px; } .wd-top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:14px; font-weight:800; } .wd-total{ font-size:13px; color:var(--ink-2); font-weight:600; } .water-chip{ background:var(--sky); color:#17120F; } .water-quick{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:700; } .howto-details summary{ color:var(--ink-2); padding:2px 0; } .howto-details ol{ margin:6px 0; } .howto-details a{ font-size:14px; font-weight:800; } .guide-link{ margin:8px 0 0; font-weight:800; font-size:14.5px; } .plan-box{ background:var(--paper); border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:9px; } .plan-box.plan-done{ font-size:15px; font-weight:600; color:var(--ink-2); } .plan-box.plan-done strong{ color:var(--good); } .plan-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:16px; } .plan-bar, .treat-meter{ height:14px; border-radius:999px; background:var(--paper-2); overflow:hidden; } .plan-bar span, .treat-meter span{ display:block; height:100%; border-radius:999px; background:var(--ink); } .treat-meter.over span{ background:var(--red); } .plan-note{ font-size:14px; color:var(--ink-2); font-weight:600; } .plan-grid{ gap:8px 14px; } .plan-grid .v{ font-size:16px; } .plan-small{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-2); font-weight:600; } .treat-form .tf-name{ flex:2 1 130px; } .treat-form .tf-grams, .treat-form .tf-kcal{ flex:1 1 64px; } .supply-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .share-warn{ margin-bottom:10px; } .share-url-row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } .share-url{ flex:1 1 200px; min-width:0; font-size:14px; } .new-share{ margin:10px 0 0; } .subscribe-box ul{ margin:10px 0 6px; font-size:14px; } .share-warn-text{ font-size:13.5px; margin:8px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } a.btn{ text-decoration:none; } .share-view{ display:flex; flex-direction:column; gap:14px; } .share-table{ font-size:14.5px; } .share-table th, .share-table td{ padding:8px 12px; text-align:left; } .share-table th{ font-size:13px; color:var(--ink-2); font-weight:800; } .share-table td{ border-top:2px solid var(--line); font-weight:600; } .share-table-wrap{ overflow-x:auto; background:var(--paper); border-radius:18px; padding:4px 6px; } .ps-table{ border-collapse:collapse; width:100%; } /* ---------- Give ---------- */ .give-intro{ display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; align-items:center; margin-bottom:20px; background:var(--pink); border-radius:var(--r-xl); padding:22px 26px; } .give-intro h3{ margin:0 0 8px; font-size:28px; } .give-intro p{ font-size:15.5px; line-height:1.55; color:rgba(23,18,15,.85); font-weight:600; max-width:60ch; } .give-tips{ margin:0 0 22px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } .give-tips li{ background:var(--paper); border-radius:var(--r-md); padding:12px 16px; font-size:15px; line-height:1.5; font-weight:600; color:var(--ink-2); } .give-tips li a{ font-weight:800; margin-left:6px; white-space:nowrap; color:var(--ink); } .give-group-title{ font-family:var(--display); font-size:26px; margin:26px 0 12px; } .charity-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; } .charity-card{ padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .charity-card .rn{ font-weight:800; font-size:16px; } .charity-card p{ flex:1; font-size:14.5px; line-height:1.5; color:var(--ink-2); font-weight:600; } .charity-links{ display:flex; gap:8px; flex-wrap:wrap; } .credits{ margin-top:30px; padding-top:16px; border-top:2px solid var(--line); } .credits h3{ margin:0 0 6px; font-size:22px; } .credits > p{ margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--ink-2); font-weight:600; max-width:70ch; } .credits ul{ margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:4px; font-size:13.5px; color:var(--ink-2); font-weight:600; line-height:1.5; } footer.note{ color:var(--ink-2); font-size:13.5px; text-align:center; margin-top:8px; line-height:1.6; font-weight:600; max-width:80ch; margin-left:auto; margin-right:auto; } /* ---------- Your data ---------- */ .account-panel{ background:var(--paper-2); border-radius:var(--r-xl); padding:20px 24px; margin-bottom:16px; font-size:15px; } .account-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; } .account-head h3, .account-panel > h3{ margin:0; font-size:26px; } .account-panel p{ margin:8px 0 12px; color:var(--ink-2); font-weight:600; line-height:1.5; } .account-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .account-sub, .account-delete{ margin-top:14px; padding:16px 18px; border-radius:var(--r-md); background:var(--paper); } .account-delete{ background:var(--red-soft); } .account-delete p{ color:var(--ink); margin-top:0; } .account-sub p{ margin-top:0; } .account-sub label, .account-delete label{ display:block; margin:8px 0 5px; } .account-sub input, .account-delete input{ max-width:340px; margin-bottom:10px; } .account-sub input[type="file"]{ max-width:none; } .account-signin{ font-size:14px; font-weight:700; color:var(--ink-2); } .google-btn{ display:flex; justify-content:center; min-height:44px; color-scheme:light; } .account-sub .google-btn, .account-delete .google-btn{ justify-content:flex-start; margin:8px 0; } /* ---------- Auth pages ---------- */ .auth-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px 20px 40px; background:var(--orange); position:relative; overflow:hidden; --ink:#17120F; --ink-2:#4A443E; --paper:#fff; --paper-2:#F4F3EF; --line:rgba(23,18,15,.18); color:var(--ink); } .auth-brand{ align-self:center; color:#17120F; } .auth-card{ width:100%; max-width:420px; background:var(--paper); border-radius:var(--r-xl); padding:30px 28px 26px; position:relative; z-index:1; } .auth-card h1{ font-size:38px; margin-bottom:8px; } .auth-card .tagline{ margin-bottom:22px; font-size:15.5px; color:var(--ink-2); font-weight:600; line-height:1.5; } .auth-card .eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; font-size:14px; font-weight:800; background:var(--butter); border-radius:999px; padding:5px 14px; } .auth-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } .auth-field label{ font-size:14px; font-weight:800; } .auth-submit{ width:100%; margin-top:6px; min-height:50px; font-size:15px; } .auth-switch{ text-align:center; font-size:15px; color:var(--ink-2); margin-top:18px; font-weight:600; } .auth-switch a, .auth-guest a{ color:var(--ink); font-weight:800; } .auth-error{ background:var(--red); color:#fff; border-radius:14px; padding:10px 14px; font-size:14px; margin-bottom:14px; font-weight:700; } .auth-guest{ text-align:center; font-size:14px; margin-top:10px; font-weight:700; } .auth-art{ width:190px; margin:-6px auto 6px; } .auth-hint{ font-size:13px; color:var(--ink-2); font-weight:600; } .auth-forgot{ margin-top:6px; } .auth-google{ margin-top:18px; } .auth-divider{ display:flex; align-items:center; gap:12px; color:var(--ink-2); font-size:14px; font-weight:800; margin-bottom:14px; } .auth-divider::before, .auth-divider::after{ content:""; flex:1; border-top:2px solid var(--line); } .auth-google .auth-hint{ text-align:center; margin-top:10px; } .code-card{ max-width:440px; } .recovery-code{ font:400 clamp(20px,5.4vw,28px)/1.2 var(--display); letter-spacing:.04em; text-align:center; background:var(--butter); border-radius:var(--r-md); padding:18px 10px; margin:6px 0 14px; word-break:break-all; user-select:all; } .code-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; } .code-warn{ font-size:14px; color:var(--ink-2); font-weight:600; margin:0 0 12px; } .code-confirm{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; margin-bottom:14px; } .code-result .recovery-code{ margin-top:8px; } /* ---------- Responsive ---------- */ @media (max-width:700px){ .give-intro{ grid-template-columns:1fr; } .give-art{ width:170px; } .vetdiet-head{ grid-template-columns:1fr; } .vetdiet-head .art-frame{ display:none; } } @media (max-width:600px){ .ref-tab-group{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; } .ref-tab-group::-webkit-scrollbar{ display:none; } .ref-tab-group button{ flex:0 0 auto; white-space:nowrap; } .ref-tab-label{ display:none; } .due-item .btn{ margin-left:auto; } .panel-head{ flex-direction:column; align-items:stretch; } .panel-head .btn{ align-self:flex-start; } form.entry-form{ padding:18px; } .field.span2{ grid-column:span 1; } } @media (max-width:520px){ .topbar{ padding:14px 14px 4px; } .page{ padding:6px 14px 32px; } .topbar .who{ gap:6px; flex-wrap:nowrap; } .who-name{ display:none; } .brand{ font-size:24px; } .install-hint, .import-banner{ font-size:14px; } .code-actions .btn{ flex:1 1 auto; } .dog-card h3{ font-size:31px; } .dog-card .kv-portion .v.big{ font-size:58px; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ---------- "Are you sure?" ---------- */ dialog.confirm{ border:0; border-radius:var(--r-xl); padding:26px 26px 22px; width:min(460px, calc(100vw - 32px)); background:var(--paper); color:var(--ink); box-shadow:0 30px 70px -20px rgba(0,0,0,.55); } dialog.confirm::backdrop{ background:rgba(23,18,15,.6); } @media (prefers-reduced-motion: no-preference){ dialog.confirm[open]{ animation:rise .22s cubic-bezier(.2,.8,.2,1) both; } dialog.confirm[open]::backdrop{ animation:fade .22s ease both; } @keyframes fade{ from{ opacity:0; } to{ opacity:1; } } } dialog.confirm h3{ font-size:30px; margin:0 0 10px; overflow-wrap:anywhere; } .confirm-body{ font-size:15.5px; line-height:1.5; font-weight:600; color:var(--ink-2); } .confirm-body p{ margin:0 0 10px; } .confirm-body strong{ color:var(--ink); } .confirm-body ul{ margin:0 0 12px; padding:12px 16px 12px 34px; background:var(--paper-2); border-radius:var(--r-md); color:var(--ink); } .confirm-body li{ margin:2px 0; } .confirm-actions{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px; } .confirm-actions .btn{ min-height:48px; } #confirmNo{ background:var(--ink); color:var(--bg); } /* ---------- Printable sheets (health record, pet-sitter sheet) ---------- */ .print-sheet{ display:none; } @media print{ @page{ margin:14mm; } html, body{ background:#fff !important; color:#000 !important; } body{ padding:0 !important; } body > *:not(.print-sheet){ display:none !important; } .print-sheet{ display:block !important; font:11pt/1.45 "Figtree","Segoe UI",Arial,sans-serif; color:#000; } .ps-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; border-bottom:3px solid #000; padding-bottom:6px; margin-bottom:8px; } .print-sheet h1{ font:400 26pt/1.1 "Bagel Fat One","Figtree",Arial,sans-serif; margin:0; color:#000; } .ps-sub{ color:#444; font-size:11pt; margin-top:2px; } .ps-date{ font-size:9.5pt; color:#444; white-space:nowrap; } .print-sheet h2{ font:800 12pt/1.2 "Figtree",Arial,sans-serif; margin:14px 0 5px; padding-bottom:2px; border-bottom:1px solid #999; break-after:avoid; color:#000; } .ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; } .ps-kv{ display:flex; flex-direction:column; padding:3px 0; break-inside:avoid; } .ps-kv span{ font-size:9pt; color:#555; font-weight:700; } .ps-kv strong{ font-size:11pt; font-weight:800; } .ps-kv-wide{ grid-column:1/-1; } .ps-table{ width:100%; border-collapse:collapse; font-size:10pt; } .ps-table th, .ps-table td{ border:1px solid #bbb; padding:3px 6px; text-align:left; vertical-align:top; } .ps-table th{ background:#eee; font-size:9pt; } .ps-table tr{ break-inside:avoid; } .ps-none{ color:#555; font-style:italic; margin:2px 0; } .ps-note{ font-size:10pt; color:#333; } .print-sheet p{ margin:4px 0; } .ps-blank{ display:flex; gap:8px; align-items:flex-end; margin:12px 0; } .ps-blank span{ flex:1; border-bottom:1px solid #000; height:16px; } .ps-foot{ margin-top:16px; font-size:8.5pt; color:#555; border-top:1px solid #bbb; padding-top:5px; } } /* ---------- Lost-dog poster (print only) ---------- */ .lost-poster{ display:none; } @media print{ .lost-poster{ display:flex !important; flex-direction:column; height:100%; text-align:center; font-family:"Figtree","Segoe UI",Arial,sans-serif; color:#000; } .lost-title{ font:400 64pt/1 "Bagel Fat One","Figtree",Arial,sans-serif; letter-spacing:.01em; } .lost-name{ font:400 32pt/1.1 "Bagel Fat One","Figtree",Arial,sans-serif; margin-top:2mm; } .lost-photo{ flex:1 1 auto; min-height:70mm; border:3px dashed #555; border-radius:4mm; margin:4mm 0; display:flex; align-items:center; justify-content:center; } .lost-photo span{ font-size:12pt; color:#777; } .lost-desc{ font-size:15pt; font-weight:800; } .lost-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2mm 6mm; margin:3mm 0; text-align:left; } .lost-kv{ display:flex; flex-direction:column; } .lost-kv span{ font-size:9pt; color:#555; font-weight:700; } .lost-blank{ border-bottom:1.5px solid #000; min-height:7mm; display:block; } .lost-call{ border:3px solid #000; border-radius:3mm; padding:3mm; margin:2mm 0; } .lost-call-label{ font-size:13pt; font-weight:800; } .lost-phone{ min-height:13mm; margin:2mm 6mm; } .lost-second{ font-size:10.5pt; color:#333; } .lost-chip{ font-size:11pt; font-weight:800; } .lost-advice{ font-size:9.5pt; color:#333; margin:2mm 4mm; line-height:1.4; } .lost-tabs{ display:flex; gap:1mm; border-top:2px dashed #666; padding-top:2mm; margin-top:auto; } .lost-tab{ flex:1; border-left:1px dashed #999; padding:1mm; display:flex; flex-direction:column; gap:1mm; font-size:8pt; } .lost-tab:first-child{ border-left:none; } .lost-tab-name{ font-weight:800; } .lost-tab .lost-blank{ min-height:14mm; } .print-sheet:has(.lost-poster){ height:100vh; } .print-sheet:has(.lost-poster) .ps-head{ display:none; } }