/* ========================================================================== Roo-mate Reading modes live on : standard | easy | hc-light | hc-dark Light and dark for the standard palette follow the device, unless a high contrast mode is on, in which case that wins outright. ========================================================================== */ :root{ --ground:#F5F0E2; --ground-2:#EFE6D4; --card:#FFFDF9; --ink:#35251B; --ink-soft:#6A5849; --line:#DDD5C4; --line-strong:#CDC1AB; --earth:#8A3626; --earth-deep:#722C1F; --on-earth:#FDF7EC; --wattle:#E1B25F; --wattle-soft:#F4E3BE; --on-wattle:#3F2810; --leaf:#3F5E41; --leaf-soft:#DFE7DA; --on-leaf:#F6F9F3; --alert:#9C1F1F; --alert-soft:#F8E4E1; --link:#8A3626; /* what someone is looking for, solid so it reads at a glance */ --w-house-bg:#3F5E41; --w-house-fg:#F4F8F2; --w-friend-bg:#E1B25F; --w-friend-fg:#2A1C08; --w-pool-bg:#8A3626; --w-pool-fg:#FDF2E8; --w-room-bg:#3A5570; --w-room-fg:#F1F6FA; --w-any-bg:#5E5245; --w-any-fg:#FBF6EF; --bw:1px; --bw-2:1.5px; --r:16px; --r-lg:22px; --r-pill:999px; --shadow:0 1px 2px rgba(53,37,27,.05), 0 10px 26px -18px rgba(53,37,27,.45); --display:Fraunces,ui-serif,Georgia,serif; --body:"Atkinson Hyperlegible","DM Sans",ui-sans-serif,system-ui,sans-serif; --scale:1; /* set by the text size buttons */ --mode-scale:1; /* set by the reading mode */ --decor:block; /* artwork visibility */ --photo:block; /* photo avatar visibility */ --initial:none; /* letter avatar visibility */ } /* --- standard palette, dark device setting --- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-mode="hc-light"]):not([data-mode="hc-dark"]){ --ground:#241A14; --ground-2:#2C201A; --card:#31241C; --ink:#F2E9DB; --ink-soft:#C3B2A0; --line:#4A3729; --line-strong:#5C4634; --earth:#E08E71; --earth-deep:#EFA88C; --on-earth:#2A130C; --wattle:#E7BE71; --wattle-soft:#4A3822; --on-wattle:#2A1C08; --leaf:#8FB18F; --leaf-soft:#2E3A2E; --on-leaf:#0F1A0F; --alert:#F09A8A; --alert-soft:#3A211C; --link:#EFA88C; --w-house-bg:#7BA77E; --w-house-fg:#12220F; --w-friend-bg:#E7BE71; --w-friend-fg:#2A1C08; --w-pool-bg:#E59575; --w-pool-fg:#2E1007; --w-room-bg:#8FB4D0; --w-room-fg:#0E1E2A; --w-any-bg:#C3B2A0; --w-any-fg:#241A12; --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -18px rgba(0,0,0,.85); } } :root[data-theme="dark"]:not([data-mode="hc-light"]):not([data-mode="hc-dark"]){ --ground:#241A14; --ground-2:#2C201A; --card:#31241C; --ink:#F2E9DB; --ink-soft:#C3B2A0; --line:#4A3729; --line-strong:#5C4634; --earth:#E08E71; --earth-deep:#EFA88C; --on-earth:#2A130C; --wattle:#E7BE71; --wattle-soft:#4A3822; --on-wattle:#2A1C08; --leaf:#8FB18F; --leaf-soft:#2E3A2E; --on-leaf:#0F1A0F; --alert:#F09A8A; --alert-soft:#3A211C; --link:#EFA88C; --w-house-bg:#7BA77E; --w-house-fg:#12220F; --w-friend-bg:#E7BE71; --w-friend-fg:#2A1C08; --w-pool-bg:#E59575; --w-pool-fg:#2E1007; --w-room-bg:#8FB4D0; --w-room-fg:#0E1E2A; --w-any-bg:#C3B2A0; --w-any-fg:#241A12; --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -18px rgba(0,0,0,.85); } /* --- easy read: same warmth, bigger and simpler --- */ :root[data-mode="easy"]{ --mode-scale:1.18; --display:"Atkinson Hyperlegible","DM Sans",ui-sans-serif,system-ui,sans-serif; --r:20px; --r-lg:26px; } /* --- low vision, light: black on white, 21:1 --- */ :root[data-mode="hc-light"]{ --ground:#FFFFFF; --ground-2:#FFFFFF; --card:#FFFFFF; --ink:#000000; --ink-soft:#000000; --line:#000000; --line-strong:#000000; --earth:#000000; --earth-deep:#000000; --on-earth:#FFFFFF; --wattle:#000000; --wattle-soft:#FFFFFF; --on-wattle:#000000; --leaf:#000000; --leaf-soft:#FFFFFF; --on-leaf:#FFFFFF; --alert:#B10000; --alert-soft:#FFFFFF; --link:#0032B0; --w-house-bg:#FFFFFF; --w-house-fg:#000000; --w-friend-bg:#FFFFFF; --w-friend-fg:#000000; --w-pool-bg:#FFFFFF; --w-pool-fg:#000000; --w-room-bg:#FFFFFF; --w-room-fg:#000000; --w-any-bg:#FFFFFF; --w-any-fg:#000000; --bw:2px; --bw-2:3px; --r:8px; --r-lg:8px; --r-pill:8px; --shadow:none; --display:"Atkinson Hyperlegible","DM Sans",ui-sans-serif,system-ui,sans-serif; --body:"Atkinson Hyperlegible","DM Sans",ui-sans-serif,system-ui,sans-serif; --mode-scale:1.18; --decor:none; --photo:none; --initial:grid; } /* --- low vision, dark: white and yellow on black --- */ :root[data-mode="hc-dark"]{ --ground:#000000; --ground-2:#000000; --card:#000000; --ink:#FFFFFF; --ink-soft:#FFFFFF; --line:#FFFFFF; --line-strong:#FFFFFF; --earth:#FFDD00; --earth-deep:#FFE94D; --on-earth:#000000; --wattle:#FFDD00; --wattle-soft:#000000; --on-wattle:#FFDD00; --leaf:#3DF08A; --leaf-soft:#000000; --on-leaf:#000000; --alert:#FF8A7A; --alert-soft:#000000; --link:#7FD4FF; --w-house-bg:#000000; --w-house-fg:#FFDD00; --w-friend-bg:#000000; --w-friend-fg:#FFDD00; --w-pool-bg:#000000; --w-pool-fg:#FFDD00; --w-room-bg:#000000; --w-room-fg:#FFDD00; --w-any-bg:#000000; --w-any-fg:#FFDD00; --bw:2px; --bw-2:3px; --r:8px; --r-lg:8px; --r-pill:8px; --shadow:none; --display:"Atkinson Hyperlegible","DM Sans",ui-sans-serif,system-ui,sans-serif; --body:"Atkinson Hyperlegible","DM Sans",ui-sans-serif,system-ui,sans-serif; --mode-scale:1.18; --decor:none; --photo:none; --initial:grid; } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:calc(1.0625rem * var(--scale) * var(--mode-scale)); line-height:1.6; padding-bottom:96px; } img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;text-wrap:balance;margin:0} p{margin:0} a{color:var(--link);text-underline-offset:3px} button{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--earth);outline-offset:3px;border-radius:6px} :root[data-mode="hc-dark"] :focus-visible{outline-color:#FFDD00} :root[data-mode="hc-light"] :focus-visible{outline-color:#0032B0} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} a.sr:focus{ position:fixed;left:0;top:0;width:auto;height:auto;margin:0;clip:auto;z-index:60; background:var(--earth);color:var(--on-earth);padding:.7em 1.1em;font-weight:700; border-radius:0 0 10px 0; } input[type="file"]{ width:100%;font:inherit;padding:.7em;min-height:50px; border:var(--bw-2) dashed var(--line-strong);border-radius:var(--r); background:var(--ground); } .decor{display:var(--decor)} .wrap{width:100%;max-width:50rem;margin-inline:auto;padding-inline:18px} /* ---------- top bar ---------- */ .topbar{ position:sticky;top:0;z-index:40; background:var(--ground); border-bottom:var(--bw) solid var(--line); } .topbar .wrap{display:flex;align-items:center;gap:12px;padding-block:10px} .brand{display:flex;align-items:center;gap:10px;min-width:0} .brand img{width:40px;height:40px;flex:none;display:var(--decor)} .brand .mark{ display:none;width:40px;height:40px;flex:none; border:var(--bw-2) solid var(--line);border-radius:8px; place-items:center;font-weight:700;font-size:1.1rem; } :root[data-mode="hc-light"] .brand .mark, :root[data-mode="hc-dark"] .brand .mark{display:grid} .brand b{font-family:var(--display);font-size:1.2em;font-weight:600;display:block;line-height:1.1} .brand span{display:block;font-size:.74em;color:var(--ink-soft);line-height:1.3} .displaybtn{ margin-left:auto;flex:none; font-size:.82em;font-weight:700;cursor:pointer; background:var(--card);border:var(--bw-2) solid var(--line-strong); border-radius:var(--r-pill);padding:.5em .95em;min-height:44px; display:inline-flex;align-items:center;gap:.45em; } .displaybtn[aria-expanded="true"]{background:var(--earth);border-color:var(--earth);color:var(--on-earth)} .displaybtn svg{width:1.2em;height:1.2em;flex:none} /* ---------- display panel ---------- */ .display-panel{ background:var(--ground-2);border-bottom:var(--bw) solid var(--line); } .display-panel[hidden]{display:none} .display-panel .wrap{padding-block:16px;display:flex;flex-direction:column;gap:16px} .field-label{font-size:.78em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px} :root[data-mode="hc-light"] .field-label, :root[data-mode="hc-dark"] .field-label{color:var(--ink)} .opt-row{display:flex;flex-wrap:wrap;gap:8px} .opt{ cursor:pointer;font-size:.9em;font-weight:700; background:var(--card);color:var(--ink); border:var(--bw-2) solid var(--line-strong);border-radius:var(--r-pill); padding:.6em 1.05em;min-height:46px; } .opt:hover{border-color:var(--earth)} .opt[aria-pressed="true"],.opt[aria-checked="true"]{ background:var(--earth);border-color:var(--earth);color:var(--on-earth); } .panel-note{font-size:.88em;color:var(--ink-soft)} /* ---------- views ---------- */ .view{padding-block:22px 12px} .view[hidden]{display:none} .view-head{margin-bottom:6px} .eyebrow{ font-size:.75em;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--earth);margin-bottom:.5em; } h1{font-size:clamp(1.75rem,6vw,2.35rem)} h2{font-size:clamp(1.35rem,4.6vw,1.75rem)} h3{font-size:1.15em} .intro{color:var(--ink-soft);margin-top:.6em;max-width:36em} :root[data-mode="hc-light"] .intro, :root[data-mode="hc-dark"] .intro{color:var(--ink)} /* ---------- hero ---------- */ .hero-img{ width:100%;height:auto;display:var(--decor);margin-bottom:22px; border-radius:var(--r-lg);border:var(--bw) solid var(--line); box-shadow:var(--shadow); } .ava{ width:82px;height:82px;flex:none;border-radius:14px; object-fit:contain;background:var(--ground-2);padding:3px; border:var(--bw-2) solid var(--wattle);display:var(--photo); } /* avatar picker */ .picker{ display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px;margin-top:14px; } .pick{ background:var(--card);border:var(--bw-2) solid var(--line-strong); border-radius:var(--r);padding:5px;cursor:pointer; } .pick img{width:100%;height:auto;display:block;border-radius:9px;background:var(--ground-2)} .pick:hover{border-color:var(--earth)} .pick[aria-pressed="true"]{border-color:var(--earth);border-width:4px;padding:3px} .picked{ display:flex;align-items:center;gap:14px;margin-top:16px; background:var(--ground-2);border:var(--bw) solid var(--line); border-radius:var(--r);padding:12px 14px; } .picked img{width:82px;height:82px;flex:none;border-radius:14px;object-fit:contain; background:var(--ground-2);padding:3px;border:var(--bw-2) solid var(--wattle)} /* ---------- buttons ---------- */ .btn{ cursor:pointer;font-weight:700; display:inline-flex;align-items:center;justify-content:center;gap:.5em; min-height:50px;padding:.75em 1.3em;border-radius:var(--r-pill); text-decoration:none;border:var(--bw-2) solid transparent;text-align:center; } .btn svg{width:1.15em;height:1.15em;flex:none} .btn-primary{background:var(--earth);color:var(--on-earth);border-color:var(--earth)} .btn-primary:hover{background:var(--earth-deep);border-color:var(--earth-deep)} .btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{border-color:var(--earth)} .btn-block{width:100%} .btn-sm{min-height:44px;padding:.55em 1em;font-size:.92em} /* ---------- cards ---------- */ .stack{display:flex;flex-direction:column;gap:14px;margin-top:20px} .card{ background:var(--card);border:var(--bw) solid var(--line); border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow); } .stack{gap:18px} :root[data-mode="hc-light"] .card, :root[data-mode="hc-dark"] .card{border-width:var(--bw-2)} .card-top{display:flex;gap:14px;align-items:flex-start} .ava-initial{ display:var(--initial);width:82px;height:82px;flex:none; border:var(--bw-2) solid var(--line);border-radius:8px; place-items:center;font-size:1.5rem;font-weight:700; } .person-name{font-size:1.2em} .meta{font-size:.9em;color:var(--ink-soft)} :root[data-mode="hc-light"] .meta, :root[data-mode="hc-dark"] .meta{color:var(--ink)} .blurb{margin-top:12px} /* ---------- chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .chip{ font-size:.88em;font-weight:700;line-height:1.35; border:var(--bw-2) solid var(--line-strong);border-radius:var(--r-pill); padding:.34em .85em;background:var(--ground-2);color:var(--ink); } .chip-want{border-color:transparent} .w-housemate{background:var(--w-house-bg);color:var(--w-house-fg)} .w-friend{background:var(--w-friend-bg);color:var(--w-friend-fg)} .w-pool{background:var(--w-pool-bg);color:var(--w-pool-fg)} .w-room{background:var(--w-room-bg);color:var(--w-room-fg)} .w-unsure{background:var(--w-any-bg);color:var(--w-any-fg)} .chip-new{background:var(--earth);border-color:var(--earth);color:var(--on-earth)} :root[data-mode="hc-light"] .chip-want, :root[data-mode="hc-dark"] .chip-want{border-color:currentColor} :root[data-mode="hc-light"] .chip, :root[data-mode="hc-dark"] .chip{background:var(--card);color:var(--ink)} :root[data-mode="hc-light"] .chip-new, :root[data-mode="hc-dark"] .chip-new{background:var(--earth);color:var(--on-earth)} .support-line{ margin-top:12px;padding-top:12px;border-top:var(--bw) solid var(--line); font-size:.9em;color:var(--ink-soft); } :root[data-mode="hc-light"] .support-line, :root[data-mode="hc-dark"] .support-line{color:var(--ink);border-top-width:var(--bw-2)} .support-line b{color:var(--ink)} /* ---------- callouts ---------- */ .note{ margin-top:18px;padding:15px 17px;border-radius:var(--r); background:var(--wattle-soft);border:var(--bw) solid var(--wattle); } :root[data-mode="hc-light"] .note, :root[data-mode="hc-dark"] .note{border-width:var(--bw-2)} .note-leaf{background:var(--leaf-soft);border-color:var(--leaf)} .note-alert{background:var(--alert-soft);border-color:var(--alert)} .note h3{font-size:1.05em;margin-bottom:.3em} .note p{font-size:.94em} .note p + p{margin-top:.6em} /* ---------- category grid ---------- */ .cats{ display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:12px;margin-top:20px; } .cat{ background:var(--card);border:var(--bw-2) solid var(--line); border-radius:var(--r-lg);padding:16px;cursor:pointer;text-align:left; display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-height:96px; } .cat:hover{border-color:var(--earth)} .cat b{font-family:var(--display);font-size:1.05em;line-height:1.2} .cat small{color:var(--ink-soft);font-size:.86em;line-height:1.4} :root[data-mode="hc-light"] .cat small, :root[data-mode="hc-dark"] .cat small{color:var(--ink)} .cat-emergency{border-color:var(--alert);border-width:3px} /* ---------- provider bits ---------- */ .badge{ display:inline-block;font-size:.8em;font-weight:700; border-radius:var(--r-pill);padding:.22em .8em; border:var(--bw-2) solid transparent; } .badge-yes{background:var(--w-house-bg);color:var(--w-house-fg)} .badge-no{background:var(--w-any-bg);color:var(--w-any-fg)} :root[data-mode="hc-light"] .badge, :root[data-mode="hc-dark"] .badge{background:var(--card);color:var(--ink);border-color:currentColor} .listing{ border:var(--bw) solid var(--line);border-radius:var(--r); padding:14px;margin-top:12px;background:var(--ground-2); } :root[data-mode="hc-light"] .listing, :root[data-mode="hc-dark"] .listing{border-width:var(--bw-2)} .listing h4{font-size:1.02em;margin-bottom:.15em} .listing .kind{ font-size:.75em;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-soft); } :root[data-mode="hc-light"] .listing .kind, :root[data-mode="hc-dark"] .listing .kind{color:var(--ink)} .contact{ margin-top:14px;padding-top:14px;border-top:var(--bw) solid var(--line); font-size:.92em;display:flex;flex-direction:column;gap:3px; } :root[data-mode="hc-light"] .contact, :root[data-mode="hc-dark"] .contact{border-top-width:var(--bw-2)} .price{ background:var(--wattle-soft);border:var(--bw-2) solid var(--wattle); border-radius:var(--r-lg);padding:18px;margin-top:18px; } .price .amount{font-family:var(--display);font-size:1.9em;line-height:1.1;display:block} .price ul{margin:.7em 0 0;padding-left:1.2em} .price li{margin-top:.25em} .block-head{display:flex;align-items:center;gap:10px;margin-bottom:6px} .block-head h4{font-size:1.05em;font-family:var(--display)} .remove{ margin-left:auto;font-size:.85em;font-weight:700;cursor:pointer; background:none;border:var(--bw-2) solid var(--line-strong); border-radius:var(--r-pill);padding:.35em .85em;min-height:40px; } .remove:hover{border-color:var(--alert);color:var(--alert)} /* ---------- filters ---------- */ .filters{ background:var(--ground-2);border:var(--bw) solid var(--line); border-radius:var(--r-lg);padding:16px;margin-top:18px; display:flex;flex-direction:column;gap:14px; } :root[data-mode="hc-light"] .filters, :root[data-mode="hc-dark"] .filters{border-width:var(--bw-2)} .count{font-size:.9em;color:var(--ink-soft);margin-top:14px} :root[data-mode="hc-light"] .count, :root[data-mode="hc-dark"] .count{color:var(--ink)} /* ---------- forms ---------- */ fieldset{border:0;padding:0;margin:0} legend{font-family:var(--display);font-size:1.15em;font-weight:600;padding:0;margin-bottom:.2em} .form-section{ background:var(--card);border:var(--bw) solid var(--line); border-radius:var(--r-lg);padding:18px;margin-top:16px; } :root[data-mode="hc-light"] .form-section, :root[data-mode="hc-dark"] .form-section{border-width:var(--bw-2)} .form-section > p{color:var(--ink-soft);font-size:.94em;margin-top:.35em} :root[data-mode="hc-light"] .form-section > p, :root[data-mode="hc-dark"] .form-section > p{color:var(--ink)} .f{margin-top:18px} .f > label,.f .lbl{display:block;font-weight:700;margin-bottom:7px} .hint{display:block;font-weight:400;font-size:.9em;color:var(--ink-soft);margin-top:2px} :root[data-mode="hc-light"] .hint, :root[data-mode="hc-dark"] .hint{color:var(--ink)} input[type="text"],input[type="number"],select,textarea{ width:100%;font:inherit;color:var(--ink);background:var(--ground); border:var(--bw-2) solid var(--line-strong);border-radius:var(--r); padding:.7em .85em;min-height:50px; } textarea{min-height:120px;line-height:1.55;resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--earth)} .optional{ font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase; border:var(--bw-2) solid var(--leaf);color:var(--ink);background:var(--leaf-soft); border-radius:var(--r-pill);padding:.2em .6em;margin-left:.5em;vertical-align:middle; } .file-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .file-list li{position:relative} .file-list img{ width:88px;height:88px;object-fit:cover;border-radius:var(--r); border:var(--bw-2) solid var(--line-strong); } .file-list span{display:block;font-size:.78em;max-width:88px;margin-top:4px;word-break:break-word} .saved{ margin-top:16px;padding:15px 17px;border-radius:var(--r); background:var(--leaf-soft);border:var(--bw-2) solid var(--leaf); } .saved[hidden]{display:none} /* ---------- bottom nav ---------- */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:50; background:var(--ground);border-top:var(--bw-2) solid var(--line); padding-bottom:env(safe-area-inset-bottom); } .tabbar ul{ list-style:none;margin:0 auto;padding:0;max-width:50rem; display:grid;grid-template-columns:repeat(4,1fr); } .tabbar button{ width:100%;background:none;border:0;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:3px; padding:9px 4px;min-height:64px;font-size:.76em;font-weight:700; color:var(--ink-soft);border-top:4px solid transparent; } :root[data-mode="hc-light"] .tabbar button, :root[data-mode="hc-dark"] .tabbar button{color:var(--ink)} .tabbar button svg{width:24px;height:24px} .tabbar button[aria-current="page"]{color:var(--earth);border-top-color:var(--earth);background:var(--ground-2)} :root[data-mode="hc-dark"] .tabbar button[aria-current="page"]{background:#000;color:#FFDD00} @media (min-width:640px){ .wrap{padding-inline:26px} .stack{gap:16px} } /* ========================================================================== Additions for the real app ========================================================================== */ .booting{padding-block:80px;text-align:center;color:var(--ink-soft)} /* the tab bar is anchors now, not buttons */ .tabbar a{ width:100%;background:none;border:0;cursor:pointer;text-decoration:none; display:flex;flex-direction:column;align-items:center;gap:3px; padding:9px 4px;min-height:64px;font-size:.76em;font-weight:700; color:var(--ink-soft);border-top:4px solid transparent; } :root[data-mode="hc-light"] .tabbar a, :root[data-mode="hc-dark"] .tabbar a{color:var(--ink)} .tabbar a svg{width:24px;height:24px} .tabbar a[aria-current="page"]{color:var(--earth);border-top-color:var(--earth);background:var(--ground-2)} :root[data-mode="hc-dark"] .tabbar a[aria-current="page"]{background:#000;color:#FFDD00} .tabbar ul{grid-template-columns:repeat(5,1fr)} /* signed out screens */ .signed-out{padding-block:30px 40px} .signed-out .hero-img{margin-bottom:24px} .auth-card{ background:var(--card);border:var(--bw) solid var(--line); border-radius:var(--r-lg);padding:22px;margin-top:22px;box-shadow:var(--shadow); } :root[data-mode="hc-light"] .auth-card, :root[data-mode="hc-dark"] .auth-card{border-width:var(--bw-2)} .auth-card h2{font-size:1.4em} .auth-switch{ margin-top:18px;padding-top:16px;border-top:var(--bw) solid var(--line); font-size:.95em;color:var(--ink-soft); } .linkish{ background:none;border:0;padding:0;font:inherit;font-weight:700; color:var(--link);text-decoration:underline;text-underline-offset:3px;cursor:pointer; min-height:44px; } .or-line{ display:flex;align-items:center;gap:14px;margin-block:20px; color:var(--ink-soft);font-size:.8em;font-weight:700;letter-spacing:.12em;text-transform:uppercase; } .or-line::before,.or-line::after{content:"";height:1px;background:var(--line);flex:1} /* messages back to the person */ .msg{border-radius:var(--r);padding:14px 16px;margin-top:16px;border:var(--bw-2) solid transparent} .msg-ok{background:var(--leaf-soft);border-color:var(--leaf)} .msg-bad{background:var(--alert-soft);border-color:var(--alert)} .msg[hidden]{display:none} .toast{ position:fixed;left:50%;bottom:92px;transform:translateX(-50%); z-index:70;max-width:min(30rem,calc(100vw - 32px)); background:var(--ink);color:var(--ground); border-radius:var(--r);padding:13px 18px;font-weight:700;font-size:.95em; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); } :root[data-mode="hc-light"] .toast{background:#000;color:#fff;border:3px solid #fff} :root[data-mode="hc-dark"] .toast{background:#FFDD00;color:#000} .toast[hidden]{display:none} /* buttons that are working */ .btn[aria-busy="true"]{opacity:.65;pointer-events:none} /* the incomplete-profile nudge */ .nudge{ background:var(--wattle-soft);border:var(--bw-2) solid var(--wattle); border-radius:var(--r-lg);padding:18px;margin-bottom:20px; } .nudge h3{font-size:1.1em;margin-bottom:.3em} .nudge p{font-size:.95em} .nudge .btn{margin-top:14px} .field-error{color:var(--alert);font-weight:700;font-size:.9em;margin-top:6px;display:block} input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--alert)} .visibility-row{ display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px; background:var(--ground-2);border:var(--bw-2) solid var(--line);border-radius:var(--r); } .visibility-row input{ appearance:none;width:26px;height:26px;flex:none;margin-top:2px; border:2.5px solid var(--line-strong);border-radius:8px;background:var(--card);cursor:pointer; } .visibility-row input:checked{background:var(--leaf);border-color:var(--leaf)} .visibility-row input:checked::after{ content:"";display:block;width:7px;height:13px;margin:2px 0 0 7px; border:solid var(--card);border-width:0 3px 3px 0;transform:rotate(45deg); } .visibility-row b{display:block} .visibility-row span{color:var(--ink-soft);font-size:.93em} /* no tab bar when signed out, so nothing to make room for */ body:not(.signed-in){padding-bottom:24px} /* ========================================================================== Chat ========================================================================== */ .chat-row{text-decoration:none;color:inherit;display:block} .chat-row:hover{border-color:var(--earth)} .chat-row-head{display:flex;align-items:baseline;gap:10px} .chat-row-head .person-name{flex:1;min-width:0} .chat-when{font-size:.84em;color:var(--ink-soft);white-space:nowrap} :root[data-mode="hc-light"] .chat-when, :root[data-mode="hc-dark"] .chat-when{color:var(--ink)} .chat-preview{ margin-top:8px;color:var(--ink-soft);font-size:.95em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } :root[data-mode="hc-light"] .chat-preview, :root[data-mode="hc-dark"] .chat-preview{color:var(--ink)} .chat-header{display:flex;flex-direction:column;gap:14px;margin-bottom:16px} .chat-header .btn{align-self:flex-start} .chat-who{ display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit; background:var(--card);border:var(--bw) solid var(--line); border-radius:var(--r-lg);padding:12px 14px; } :root[data-mode="hc-light"] .chat-who, :root[data-mode="hc-dark"] .chat-who{border-width:var(--bw-2)} .chat-who:hover{border-color:var(--earth)} .chat-who b{display:block;font-family:var(--display);font-size:1.15em} .chat-who .meta{display:block;font-size:.88em} .contact-panel{margin-bottom:18px} .messages{ display:flex;flex-direction:column;gap:10px; min-height:220px;max-height:min(58vh,520px);overflow-y:auto; padding:14px;border:var(--bw) solid var(--line);border-radius:var(--r-lg); background:var(--ground-2); } :root[data-mode="hc-light"] .messages, :root[data-mode="hc-dark"] .messages{border-width:var(--bw-2)} .bubble{ max-width:min(85%,34rem);padding:11px 15px;border-radius:var(--r); border:var(--bw) solid var(--line); } .bubble p{line-height:1.5;white-space:pre-wrap;word-break:break-word} .bubble-when{display:block;font-size:.76em;color:var(--ink-soft);margin-top:5px} .bubble.mine{align-self:flex-end;background:var(--wattle-soft);border-color:var(--wattle)} .bubble.theirs{align-self:flex-start;background:var(--card)} :root[data-mode="hc-light"] .bubble, :root[data-mode="hc-dark"] .bubble{border-width:var(--bw-2)} :root[data-mode="hc-light"] .bubble.mine, :root[data-mode="hc-dark"] .bubble.mine{border-width:4px} :root[data-mode="hc-light"] .bubble-when, :root[data-mode="hc-dark"] .bubble-when{color:var(--ink)} .composer{display:flex;gap:10px;align-items:flex-end;margin-top:14px} .composer textarea{flex:1;min-height:52px;max-height:160px;resize:none;line-height:1.5} .composer .btn{flex:none;min-height:52px} /* ========================================================================== Providers and admin ========================================================================== */ .prov-listing{ border:var(--bw) solid var(--line);border-radius:var(--r); padding:14px;margin-top:12px;background:var(--ground-2); } :root[data-mode="hc-light"] .prov-listing, :root[data-mode="hc-dark"] .prov-listing{border-width:var(--bw-2)} .prov-listing h4{font-size:1.02em;margin-bottom:.15em} .prov-listing .kind{ font-size:.75em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft); } :root[data-mode="hc-light"] .prov-listing .kind, :root[data-mode="hc-dark"] .prov-listing .kind{color:var(--ink)} .report{ background:var(--card);border:var(--bw-2) solid var(--line); border-radius:var(--r-lg);padding:18px; } .report.open{border-color:var(--alert)} .report-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .report-head h3{font-size:1.1em} .report-when{margin-left:auto;font-size:.85em;color:var(--ink-soft)} .report dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;font-size:.94em} .report dt{font-weight:700} .report dd{margin:0} .report-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .report-actions .btn{flex:1 1 auto} .badge-dot{ position:absolute;top:5px;left:50%;margin-left:6px; min-width:20px;height:20px;padding:0 5px;border-radius:999px; background:var(--earth);color:var(--on-earth); font-size:.7rem;font-weight:700;line-height:20px;text-align:center; } .tabbar li{position:relative} :root[data-mode="hc-dark"] .badge-dot{background:#FFDD00;color:#000} :root[data-mode="hc-light"] .badge-dot{background:#000;color:#fff} /* The share-my-details button. It was inheriting nothing and rendering as a pale blob, which is not what you want on the most consequential button in the app. */ .btn-wattle{ background:var(--wattle); color:var(--on-wattle); border-color:var(--wattle); } .btn-wattle:hover{filter:brightness(.94)} :root[data-mode="hc-light"] .btn-wattle{background:#000;color:#fff;border-color:#000} :root[data-mode="hc-dark"] .btn-wattle{background:#FFDD00;color:#000;border-color:#FFDD00} /* Six tabs is tight on a small phone. Let the labels shrink rather than wrap. */ .tabbar a{font-size:.72em;text-align:center;line-height:1.2} @media (min-width:380px){ .tabbar a{font-size:.76em} }