:root{ /* ---------- HopeQure brand theme ------------------------------------------------ Teal for structure, warm cream for ground, orange for action. The brand values are used exactly as specified; where a pairing failed WCAG AA the FOREGROUND was moved rather than the brand colour, so the palette a person recognises is unchanged. Two of those decisions are worth knowing about, because they look like mistakes until the numbers are in front of you: * Button labels are near-black, not white. White on #E8673A is 3.26:1 — below the 4.5 needed for text — while near-black on the same orange is 5.33. Darkening the orange enough for white would have taken it to a brown nobody chose. The brand colour stays; the label moves. * Hover BRIGHTENS instead of darkening. With a dark label, a darker hover reduces contrast; the specified #D9573D lands at 4.46, just under. Lightening lifts it to 6.58 and reads as the button responding, which is what a hover is for. Everything here was measured, not eyeballed — see tools/ui-migration/contrast.py. */ /* These match the "Corporate" row in EnsureBuiltInThemesAsync, which is the system default. The theme script overwrites them a moment after load; keeping the two in step means the first paint is not a different palette that then swaps. */ --page:#F8F9FA; /* main background — clean off-white */ --cream:#F8F9FA; --card:#FFFFFF; /* cards, alternate sections */ --navy:#006D68; /* headings; legacy name, brand teal value */ --brand:#006D68; /* the same teal under its real name — several newer rules (chat send bubble, streak ring, birthday-today, share focus) were written against --brand while only --navy existed, and var() fails SILENTLY: white-on-white text, invisible rings. */ --navy-2:#6B6B6B; /* secondary text */ /* #5A7875 as supplied is 4.45:1 on the cream — 0.05 short. Two shades darker and it clears on both surfaces; the difference is not perceptible side by side. */ /* --ink is PRIMARY BODY TEXT: paragraphs, table cells, the value someone typed into a field. --heading is separate, because a heading colour applied to body text turns a whole screen one hue. Corporate's deep blue is the default here, matching the seeded theme. */ --ink:#0A2540; --heading:#0A2540; /* #6B6B6B, not #757575. The lighter grey was asked for and measured at 4.02-4.39:1 across the themes' tinted page and card colours — under the 4.5 that body text and form labels need. This is the nearest grey that clears it everywhere; the difference is barely visible side by side, and it is the one that people filling in a medical history can actually read. */ --muted:#6B6B6B; /* body, labels, inputs */ --line:#D8DDE3;--line-2:#EDF0F3; --field-line:#8A9099; /* solved for 3:1 against both backgrounds — this is what makes an input identifiable as a control (WCAG 1.4.11) */ --field:#F1F3F5; /* Action. Orange throughout, with a near-black label. */ --accent:#FF5C35;--accent-soft:#FFEDE8; --rose:#FF5C35;--rose-deep:#FF7A58;--rose-soft:#FFEDE8;--rose-track:#FFD9CE; --gold:#FF5C35;--gold-soft:#FFEDE8;--gold-text:#C9492A; --accent-btn:#C9492A; /* Corporate orange darkened until white reads on it */ --on-accent:#FFFFFF; /* Links: the darkened orange. #E8673A on cream is 3.03:1 — orange link text on a light background is one of the most common contrast failures there is. #B7512D is the same hue at 4.61 and stays unmistakably the brand orange next to a button. */ --link:#C9492A;--link-hover:#A63A21; --ok:#0E734F;--ok-soft:#E3F4EC; --whatsapp:#25D366; /* their brand green; label is near-black, since white on it is 1.98 */ --amber:#9A5B12;--amber-soft:#FBF0DF; --err:#B3261E;--maroon:#B3261E;--maroon-soft:#FBE9E7; /* ---------- Type ---------------------------------------------------------------- Merriweather for headings, Montserrat for everything else. Both self-hosted; see hq-fonts.css for why that matters more than it looks. One display face and one UI face, not three. Merriweather was also suggested — it is a fine reading serif, but a second serif next to Marcellus does the same job twice, and a third family is a third set of files to download before the page settles. */ --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; /* Merriweather and the generic serif only. Named fallbacks were removed on request — the trade is worth stating: if the face has not loaded yet, or fails to, headings render in whatever the browser calls "serif" rather than in Georgia. font-display:swap means that window is brief, but it exists. */ --display:"Merriweather",serif; /* --serif is referenced by ~40 existing rules, all of them headings. It now points at the display face, which is what those rules always meant. */ --serif:var(--display); --glass-border:var(--line); /* ---------- Aliases for names the markup already uses ----------------------------- Six variables were referenced across admin pages and defined nowhere. Four of them had no fallback, which means those declarations were simply invalid and never applied — a background that never painted, a colour that never took. Nothing errored, so nothing surfaced them. (--surface was a fifth, in the privacy page; that one DID have a #fff fallback, which is why it kept white cards on every dark theme instead of failing visibly.) Defined here as aliases rather than hunted down in six files, so they follow the theme like everything else. */ --surface:var(--card); --card-alt:var(--field); --navy-1:var(--ink); --rule:var(--line); --text:var(--muted); --warn:var(--amber); /* ---------- Spacing: 4pt grid ---------------------------------------------- The stylesheet had no scale — 14px, 5px, 12px, 10px, 16px, 8px, 6px, 13px and 18px were all in heavy use, which is a mix of 4pt, 5pt and improvisation. That is why things read as "slightly off" without anyone being able to say why. New rules use these; existing ones are left alone rather than churned. */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; /* ---------- Radius ---------- */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px; /* ---------- Elevation ------------------------------------------------------- Every shadow in the file was hardcoded rgba(20,18,68,…) — the OLD navy brand colour, from before the palette changed. They stayed navy-tinted through all four themes, which is why cards looked subtly wrong in Midnight and Eye Comfort. These derive from the theme's own ink colour instead. Two layers each: a tight contact shadow plus a wide ambient one, which is what separates a surface that looks placed from one that looks pasted. */ --shadow-ink:17,24,39; --e-1:0 1px 2px rgba(var(--shadow-ink),.05); --e-2:0 1px 2px rgba(var(--shadow-ink),.05), 0 4px 12px -4px rgba(var(--shadow-ink),.08); --e-3:0 2px 4px rgba(var(--shadow-ink),.05), 0 12px 28px -12px rgba(var(--shadow-ink),.14); --e-4:0 4px 8px rgba(var(--shadow-ink),.06), 0 24px 48px -20px rgba(var(--shadow-ink),.20); /* ---------- Motion ---------------------------------------------------------- Hand-written cubic-beziers were scattered through the file, all slightly different. Named curves keep motion feeling like one product. --ease-out for things entering, --ease-spring for anything the user directly caused (it overshoots very slightly, which reads as responsive). */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.4,.55,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --t-fast:.12s; --t-base:.2s; --t-slow:.32s; /* ---------- Layering ----------------------------------------------------- */ --z-sticky:20; --z-nav:71; --z-backdrop:70; --z-modal:100; --z-toast:120; /* ---------- Focus ring ---------------------------------------------------- */ --focus-ring:0 0 0 2px var(--card), 0 0 0 4px var(--accent); } /* ---------- Dark mode without anyone choosing it -------------------------------- Four themes existed but all four required a manual switch: someone whose phone is in dark mode still got a full-brightness white screen. This applies the Midnight values automatically — but ONLY when no theme has been chosen on this device, so a deliberate choice is never overridden by the OS. */ @media (prefers-color-scheme: dark){ html:not([data-theme]):not([style*="--page"]){ --page:#0C0C0F;--cream:#0C0C0F;--card:#18181D;--navy:#F1EFE9;--navy-2:#C7C4BA; --rose:#DDAB53;--rose-deep:#DDAB53;--rose-soft:#2C2413;--rose-track:#362C16; --ink:#EDEBE3;--heading:#EDEBE3;--muted:#9A968B;--line:#2B2B31;--line-2:#242429;--field-line:#6B6B6B; --ok:#6FBF73;--ok-soft:#152318;--accent:#DDAB53;--accent-soft:#2C2413; --amber:#DDAB53;--amber-soft:#2C2413;--field:#1F1F24;--err:#E2675C; --gold:#DDAB53;--gold-soft:#2C2413;--gold-text:#DDAB53;--on-accent:#FFFFFF; --maroon:#E2675C;--maroon-soft:#2B1917; --shadow-ink:0,0,0; } /* Surfaces no longer need listing here — every background:#fff in this file was converted to var(--card), so they follow the theme on their own. */ html:not([data-theme]):not([style*="--page"]) img:not([src*=".svg"]){filter:brightness(.92)} } /* ---------- Midnight (dark) ---------- */ html[data-theme="midnight"]{ --page:#0C0C0F;--cream:#0C0C0F;--card:#18181D;--navy:#F1EFE9;--navy-2:#C7C4BA; --rose:#DDAB53;--rose-deep:#DDAB53;--rose-soft:#2C2413;--rose-track:#362C16; --ink:#EDEBE3;--heading:#EDEBE3;--muted:#9A968B;--line:#2B2B31;--line-2:#242429;--field-line:#6B6B6B; --ok:#6FBF73;--ok-soft:#152318;--accent:#DDAB53;--accent-soft:#2C2413; --amber:#DDAB53;--amber-soft:#2C2413;--field:#1F1F24;--err:#E2675C; --gold:#DDAB53;--gold-soft:#2C2413;--gold-text:#DDAB53;--on-accent:#FFFFFF; --maroon:#E2675C;--maroon-soft:#2B1917; } /* ---------- Eye Comfort (warm sepia, reduced blue light) ---------- */ html[data-theme="eye-comfort"]{ --page:#F1E7D0;--cream:#F1E7D0;--card:#F8F0DE;--navy:#3A2E1F;--navy-2:#5C4E3A; --rose:#775320;--rose-deep:#775320;--rose-soft:#EAD9AE;--rose-track:#E3CE9E; --ink:#3A2E1F;--heading:#3A2E1F;--muted:#6B5C44;--line:#DDCBA3;--line-2:#E6D8B4;--field-line:#808080; --ok:#3F6634;--ok-soft:#E4EDD8;--accent:#775320;--accent-soft:#EAD9AE; --amber:#775320;--amber-soft:#EAD9AE;--field:#EDE2C4;--err:#8A3A2A; --gold:#775320;--gold-soft:#EAD9AE;--gold-text:#775320;--on-accent:#FFFFFF; --maroon:#8A3A2A;--maroon-soft:#EAD5C8; } /* ---------- Slate Pro (modern cool SaaS look) ---------- */ html[data-theme="slate"]{ --page:#F4F5F7;--cream:#F4F5F7;--card:#FFFFFF;--navy:#16181D;--navy-2:#4B5160; --rose:#4348D8;--rose-deep:#3A3FC4;--rose-soft:#E7E8FD;--rose-track:#DCDEFC; --ink:#16181D;--heading:#16181D;--muted:#5C6472;--line:#E4E6EB;--line-2:#EDEEF2;--field-line:#8A8A8A; --ok:#15803D;--ok-soft:#E7F7ED;--accent:#4348D8;--accent-soft:#E7E8FD; --amber:#B45309;--amber-soft:#FEF3E2;--field:#F0F1F4;--err:#DC2626; --gold:#4348D8;--gold-soft:#E7E8FD;--gold-text:#3A3FC4;--on-accent:#FFFFFF; --maroon:#B91C1C;--maroon-soft:#FDECEC; } html,body{transition:background-color .25s ease,color .25s ease} .card,.doc,.hq-side,.topbar{transition:background-color .25s ease,border-color .25s ease,color .25s ease} *{box-sizing:border-box}html,body{margin:0} body{font-family:var(--sans),"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;position:relative} /* Numbers in a column must line up: session counts, prices, remaining sessions, tax rows. Proportional figures make a table of numbers look hand-typed. This is a figure style, not a typeface change — it survived the 3.104.4 revert because nobody was complaining about it. */ table,.tdr,.cp-remain-row,.cp-bycond,.stat,.kpi,.money,.t-num{font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} h1{margin:0} /* Headings get focus programmatically after navigation (so screen readers announce the new page), and that focus should be silent — but ONLY for that case. `outline:none` on h1,h2,h3 used to apply to keyboard focus too. The real focus system is in hq-ui.css. */ h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus{outline:none} h1,h2,h3,.hello,.card h3,.pmeta h2,.eyebrow+h1{font-family:var(--serif);letter-spacing:-.01em;font-weight:600} /* A plain, quiet backdrop — a corporate admin tool should stay out of its own way. (Element kept in the DOM for compatibility; it now renders nothing decorative.) */ .hq-aurora-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page)} .hq-aurora-bg::before,.hq-aurora-bg::after,.hq-aurora-bg i{display:none} /* ---------- login ---------- */ .login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;position:relative;overflow:hidden; background:radial-gradient(1200px 500px at 90% -10%,var(--rose-soft),transparent 60%),radial-gradient(900px 500px at -10% 110%,var(--cream),transparent 55%),var(--cream)} .login-page::before,.login-page::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none;z-index:0} .login-page::before{width:420px;height:420px;background:var(--rose);top:-140px;right:-100px;animation:lp-float-a 14s ease-in-out infinite} .login-page::after{width:360px;height:360px;background:var(--gold);bottom:-120px;left:-90px;animation:lp-float-b 16s ease-in-out infinite} @keyframes lp-float-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.1)}} @keyframes lp-float-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.08)}} .shell{width:min(1120px,100%);background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px -24px rgba(17,24,39,.18);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:34px;position:relative;z-index:1;animation:lp-rise .5s cubic-bezier(.22,1,.36,1)} @keyframes lp-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} .visual{border-radius:16px;background:var(--accent-soft);padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;min-height:520px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)} .brand .dot{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 200deg,var(--rose),var(--navy));animation:lp-spin 5s linear infinite} @keyframes lp-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .visual h2{font-size:30px;line-height:1.2;margin:0;max-width:15ch;font-weight:800;color:var(--navy)} .visual p{color:var(--navy-2);opacity:.8;max-width:32ch;line-height:1.6;margin:14px 0 0} .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} /* Was rgba(255,255,255,.6) — a white pill on a dark surface. */ .chip{background:var(--card);background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid rgba(var(--shadow-ink),.08);padding:8px 14px;border-radius:999px;font-size:13px;color:var(--navy-2);transition:transform .15s ease,background .15s ease} @media (hover:hover){.chip:hover{background:var(--card);transform:translateY(-1px)}} .form{padding:16px 26px;display:flex;flex-direction:column;justify-content:center} /* ---------- public signup / referral pages ---------- /signup/client, /signup/employee/{token}, /signup/expert and /affiliate/refer/{code} were built against a `login-*` class set that was never written. They inherit .login-page from the block above (which is why the background gradients showed) and then rendered every panel inside it as an unstyled stack of divs — full-width, no card, no split layout, on the four pages an ad campaign actually lands on. Defined here rather than by renaming the markup to .shell/.visual/.form, because those names are generic enough that a future page could reasonably claim them for something else; and defined next to the login block so the two stay in step when either changes. */ /* Template preview. An iframe rather than a div because email HTML carries its own table layout and inline styles, and letting it inherit the admin theme's CSS would show the approver something no recipient will ever see. sandbox="" on the element blocks scripts and navigation. */ /* Profile photo preview. Fixed square with object-fit:cover so a portrait or landscape upload both crop to the same shape the directory card will show — an admin approving a photo should be looking at what visitors get, not at the original aspect ratio. */ /* Employer brand under the HopeQure logo in the sidebar. Deliberately quiet — smaller than our own mark, muted text — because who provides the benefit is context, not the headline. object-fit:contain, not cover: a logo cropped to fill a square is a mangled logo. */ .org-brand{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:9px 10px;background:var(--field);border:1px solid var(--line);border-radius:10px} .org-brand img{width:30px;height:30px;object-fit:contain;border-radius:6px;background:#fff;flex-shrink:0} .org-brand small{font-size:10.5px;line-height:1.35;color:var(--muted)} .org-brand small b{color:var(--navy-2);font-size:11.5px} /* Blog hero preview. Wide rather than square, because that is the shape it renders in at the top of the article — a square thumbnail would hide exactly the cropping problem an editor needs to see before publishing. */ /* Expert pricing form. The two figures that decide the commission sit side by side with the arithmetic beside them, because the person setting a rate is deciding a margin, not filling in two unrelated numbers. Collapses to stacked on narrow screens rather than squeezing three columns. */ /* Fixed input widths rather than 1fr. On a wide screen 1fr stretched each box to ~450px for a four-digit number and pushed the summary to the far edge, so the three things that belong together — paid, charged, kept — ended up spread across the whole page. justify-content keeps the group left-aligned instead of centring it in the leftover space. */ /* A hidden category's row, dimmed rather than removed. It has to stay on the page — this is the only screen that can bring it back — but it should not read as live. */ .row-off td:not(:first-child){opacity:.5} /* Also used on .doc rows, which have no cells — the td-only rule silently did nothing there, so a paused medicine and an active one looked identical. */ .doc.row-off > *:not(:last-child){opacity:.55} /* A review row is taller than a plain doc row — it carries a comment and a sub-score line — so it aligns to the top rather than centring a two-line block against a six-line one. */ /* WhatsApp label on a lead row. Green enough to be recognisable at a glance in a long list, quiet enough not to compete with the person's name above it. */ /* Test result, under the provider it belongs to rather than in a toast — an error message naming a wrong model or a 401 is something to read and act on, not something to dismiss. */ /* A dose already recorded. Faded rather than removed — seeing what has been taken today is half the reassurance of keeping the list at all. */ .items-end{align-items:flex-end} /* Long-form content inside a resource card. Only the tags an editor would reasonably use — arbitrary HTML from an admin field styled to blend into the app is how a page ends up with someone's pasted formatting fighting the theme. */ .docs-body{margin-top:10px;padding:12px 14px;background:var(--field);border-radius:10px;font-size:13.5px;line-height:1.65;color:var(--text)} .docs-body p{margin:0 0 10px} .docs-body ul,.docs-body ol{margin:0 0 10px;padding-left:20px} .docs-body li{margin-bottom:4px} .docs-body h3,.docs-body h4{margin:14px 0 6px;font-size:14px} .docs-body a{color:var(--accent);font-weight:600} .dose-taken{opacity:.6} .dose-taken .dinfo b{text-decoration:line-through;text-decoration-thickness:1px} /* Challenge progress and leaderboard. */ /* Challenge progress. Bars rather than a line, because a missed day should be a visible gap — seeing the gaps is most of what makes somebody log the next one. */ /* Challenge templates as cards. Colour-banded by level so the three tiers are legible before reading a word — which matters on a page listing fifty of them. */ .chal-tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:6px} .chal-tpl{position:relative;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:14px; padding:16px 18px;background:var(--card);display:flex;flex-direction:column;overflow:hidden; transition:transform .15s,box-shadow .15s,border-color .15s} /* The whole card lifts on hover, not just the button. These are twelve near-identical cards and the only way to tell which one the pointer is on is for it to answer. */ @media (hover:hover){ .chal-tpl:hover{transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(var(--shadow-ink),.45)} } /* A tint of the level colour bleeding from the left edge. Enough to group the four cards in a row as one difficulty band without a heading repeating what the colour already says. */ .chal-tpl::before{content:"";position:absolute;inset:0 auto 0 0;width:120px;pointer-events:none; background:linear-gradient(90deg,currentColor,transparent);opacity:.055} .chal-tpl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .chal-tpl-head b{font-size:15px;color:var(--heading);line-height:1.3} /* The target is the number somebody compares between cards, so it is the second-biggest thing on the card and set in tabular figures so the digits line up down the column. */ .chal-tpl-target{font-size:15px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums} .chal-tpl-days{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:11px; color:var(--muted);margin-top:6px;background:var(--field);padding:2px 8px;border-radius:999px} .chal-tpl-days::before{content:"\1F4C5";font-size:10px} .chal-tpl-desc{font-size:12.5px;line-height:1.55;margin:8px 0 6px;color:var(--text)} /* The reasoning set apart from the description — one says what the challenge is, the other says why to pick it, and run together they read as one long paragraph nobody finishes. */ .chal-tpl-why{font-size:11.5px;line-height:1.55;margin:0 0 12px;color:var(--muted);font-style:italic; padding-left:9px;border-left:2px solid var(--line-2)} .chal-tpl button{margin-top:auto} /* color is set on the card so the ::before gradient can pick it up with currentColor — one declaration per level instead of three. */ .chal-lvl-starter{border-left-color:#4E9A76;color:#4E9A76} .chal-lvl-starter .chal-tpl-target{color:#2F6B52} .chal-lvl-everyday{border-left-color:#D9A020;color:#D9A020} .chal-lvl-everyday .chal-tpl-target{color:#8A6512} .chal-lvl-committed{border-left-color:#C25A4A;color:#C25A4A} .chal-lvl-committed .chal-tpl-target{color:#8E3F32} /* The card sets `color` for the tint, so text inside has to state its own or it inherits the level colour and the whole card turns green. */ .chal-tpl-head b,.chal-tpl-desc{color:var(--heading)} .chal-tpl-desc{color:var(--ink)} /* HR "why it's for" panel — four cards in a 3-up grid left one orphan on its own row. */ .hr-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .hr-why-grid .card{margin:0} .chal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px} .chal-stat{padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#EEF4FF,#E4ECFF);text-align:center} .chal-stat-n{display:block;font-size:23px;font-weight:800;color:#2A4A8B;line-height:1.1} .chal-stat-l{display:block;font-size:11px;color:#5A6B8C;margin-top:2px} .chal-stat-goal{background:linear-gradient(135deg,#FFF3E0,#FFE7C4)} .chal-stat-goal .chal-stat-n{color:#8A5A12} .chal-stat-goal .chal-stat-l{color:#8A6B3C} .chal-chart{display:flex;align-items:flex-end;gap:3px;height:88px;padding:0 2px} .chal-bar-col{flex:1;height:100%;display:flex;align-items:flex-end;min-width:4px} .chal-bar-fill{width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#5B8DEF,#3563C9);transition:height .2s} /* An unlogged day is a faint stub, not nothing — a missing bar reads as the chart being shorter, a stub reads as a day you skipped. */ .chal-bar-fill.empty{background:var(--line)} .chal-bar-fill.today{background:linear-gradient(180deg,#F0A020,#D4820C)} .chal-chart-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px} /* The year bundle. Twelve tiles, coloured through the seasons so the shape of the year is legible at a glance rather than being twelve identical rows. */ .chal-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px} .chal-month{padding:12px 14px;border-radius:12px;color:#fff} .chal-month-name{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.82} .chal-month b{display:block;font-size:13.5px;margin-top:3px} .chal-month small{display:block;font-size:11px;opacity:.85;margin-top:3px} .chal-m-1{background:linear-gradient(135deg,#4A6FA5,#375280)} .chal-m-2{background:linear-gradient(135deg,#5B7FB5,#42618F)} .chal-m-3{background:linear-gradient(135deg,#4E9A76,#3A7458)} .chal-m-4{background:linear-gradient(135deg,#5FAE7E,#458960)} .chal-m-5{background:linear-gradient(135deg,#7FB84E,#5F8F38)} .chal-m-6{background:linear-gradient(135deg,#D9A020,#B07C10)} .chal-m-7{background:linear-gradient(135deg,#E28A2C,#B8681A)} .chal-m-8{background:linear-gradient(135deg,#DE7040,#B3512A)} .chal-m-9{background:linear-gradient(135deg,#C25A4A,#9B4234)} .chal-m-10{background:linear-gradient(135deg,#A0524F,#7D3C3A)} .chal-m-11{background:linear-gradient(135deg,#6B5580,#513F63)} .chal-m-12{background:linear-gradient(135deg,#54607F,#3E4960)} .card.chal-year{background:linear-gradient(180deg,var(--card),var(--field))} /* Metric tags, so the kind of challenge is readable without parsing the number. */ .rec-tag.chal-tag-steps{background:#E3ECFF;color:#2A4A8B} .rec-tag.chal-tag-minutes{background:#E6F5EC;color:#256B45} .rec-tag.chal-tag-workouts{background:#FFF0DC;color:#8A5A12} .rec-tag.chal-tag-distance{background:#F1E7FA;color:#5C3A80} .chal-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:8px} .chal-bar > span{display:block;height:100%;background:var(--accent);border-radius:999px} .chal-rank{min-width:38px;font-weight:700;color:var(--muted);text-align:right} .chal-me{background:var(--accent-soft);border-radius:10px} /* Financial wellbeing check. */ /* Two regimes side by side, the better one lifted. The whole question is "which", so the comparison has to be the shape of the answer rather than two numbers in a list. */ /* The optional Form 16 box. Visually set apart from the calculator, because it is a separate decision — the calculator works without it, and it should never read as a required step. */ .f16-box{border:1px dashed var(--line-2);border-radius:14px;padding:14px 16px;background:var(--field)} .flex-wrap{flex-wrap:wrap} .tax-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px} .tax-card{position:relative;padding:18px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--field);text-align:center} .tax-card.win{border-color:var(--ok);background:var(--ok-soft)} .tax-label{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .tax-card b{display:block;font-size:26px;font-weight:800;color:var(--navy);margin-top:4px} .tax-card.win b{color:var(--ok)} .tax-card small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px} .tax-badge{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:99px;background:var(--ok);color:#fff;font-size:10.5px;font-weight:700} @media(max-width:620px){.tax-compare{grid-template-columns:1fr}} /* The WhatsApp verification gate on the medicines page. */ /* The gate card. The link is a block inside the text column, not a flex sibling — as a sibling it sat on the same line as the reason and overlapped it at narrow widths. */ /* The suggestion list. Sits under the field rather than floating over the form — a dropdown inside a modal is one scroll away from being clipped by it. */ .med-suggest{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:230px;overflow-y:auto} .med-suggest-row{display:block;width:100%;text-align:left;padding:9px 12px;border:none; border-bottom:1px solid var(--line-2);background:var(--card);cursor:pointer;font-family:inherit} .med-suggest-row:last-child{border-bottom:none} @media (hover:hover){.med-suggest-row:hover{background:var(--field)}} .med-suggest-row b{display:block;font-size:13.5px;color:var(--navy)} .med-suggest-row small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px} .med-insight{margin:0 0 12px;padding:13px 15px;border-radius:12px;background:var(--field);border:1px solid var(--line-2)} .med-insight ul{margin:0;padding-left:19px} .med-insight li{margin-bottom:4px} /* Amber, not grey. This is the line that separates information about a drug from a decision about somebody's treatment, and grey small print is the shape people have learned to skip. */ .med-insight-warn{margin:11px 0 0;padding:8px 11px;border-radius:8px;background:var(--amber-soft); color:var(--amber);font-size:11.5px;line-height:1.55} .card.med-verify{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(135deg,#E8F6EE,#DCF0E4);border-color:#25D366} /* The text column only. `> div` matched the icon as well, so the icon took an equal share of the row and pushed every word to the far right with half a card of nothing beside it. */ .card.med-verify > div:last-child{flex:1;min-width:0} .card.med-verify .btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;background:#25D366;color:#fff;border-radius:12px;padding:12px 20px;font-weight:700;box-shadow:0 10px 20px -12px #25D366} .card.med-verify .btn::before{content:"\1F4AC";margin-right:8px;font-size:15px} .card.med-verify .btn:hover{filter:brightness(1.05);color:#fff} .card.med-verify .med-verify-icon{font-size:30px;flex:0 0 auto;line-height:1} .fin-score{font-size:46px;font-weight:800;line-height:1;color:var(--navy)} .fin-score small{font-size:16px;font-weight:600;color:var(--muted)} /* Options stack full-width rather than sitting as chips in a row. An answer scale is read top to bottom — "most days" through "rarely" — and a wrapped row of pills loses that order at the exact moment it carries the meaning. */ .fin-options{display:flex;flex-direction:column;gap:8px} .fin-option{text-align:left;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line); background:var(--card);font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;transition:border-color .12s,background .12s} .fin-option:hover{border-color:var(--gold)} .fin-option.sel{background:var(--rose-soft);border-color:var(--rose);color:var(--gold-text)} .fin-area{margin-bottom:14px} .fin-area-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin-bottom:4px} /* The how-it-works steps. Numbered because the order is the explanation — rules first, AI after — and that ordering is the reassurance. */ .fin-steps{display:flex;flex-direction:column;gap:14px} .fin-step{display:flex;gap:12px;align-items:flex-start} .fin-step-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700} .fin-step b{display:block;font-size:14px} .fin-step small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;line-height:1.55} .ai-test-result{margin:-4px 0 12px;padding:10px 14px;border-radius:10px;font-size:13px} .ai-test-result.ok{background:var(--ok-soft);border:1px solid var(--ok)} .ai-test-result.bad{background:var(--maroon-soft);border:1px solid var(--err)} .ai-test-raw{margin:8px 0 0;padding:8px 10px;background:rgba(0,0,0,.05);border-radius:8px;font-size:11px;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto} .wa-mark{display:inline-block;padding:1px 6px;border-radius:5px;background:#25D366;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;margin-right:4px;vertical-align:1px} .review-row{align-items:flex-start} .review-row .dinfo{gap:2px} .rate-row{display:grid;grid-template-columns:200px auto 200px minmax(170px,auto);gap:16px;align-items:end;justify-content:start} .rate-row-single{grid-template-columns:200px minmax(200px,auto)} .rate-arrow{padding-bottom:12px;color:var(--muted);font-size:18px} .rate-summary{padding:10px 14px;background:var(--field);border:1px solid var(--line);border-radius:10px;align-self:end} .rate-summary small{display:block;margin-top:2px;line-height:1.35} .tier-panel{border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;padding:16px 18px;background:var(--card)} .tier-dot{margin-right:6px;font-size:9px;color:var(--line-2)} .tier-dot.filled{color:var(--accent)} .rate-preview{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--field)} @media(max-width:820px){ .rate-row,.rate-row-single{grid-template-columns:1fr} .rate-arrow{display:none} } /* The preview table's numeric columns are narrow and right-aligned; without a width the Audience column took most of the row and the three figures crowded the right edge, which is what made the header text and the values look unrelated. */ .rate-preview .report-table th:first-child, .rate-preview .report-table td:first-child{width:auto} .rate-preview .report-table th:not(:first-child), .rate-preview .report-table td:not(:first-child){width:150px;white-space:nowrap} .blog-hero-preview{width:200px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--field);flex-shrink:0} .blog-hero-empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)} .profile-photo-preview{width:92px;height:92px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--field);flex-shrink:0} .profile-photo-empty{display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--muted)} .ml-2{margin-left:8px} .email-preview{width:100%;height:520px;border:1px solid var(--line);border-radius:12px;background:#fff} .login-card{width:min(1120px,100%);background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px -24px rgba(17,24,39,.18);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:34px;position:relative;z-index:1;animation:lp-rise .5s cubic-bezier(.22,1,.36,1)} .login-visual{border-radius:16px;background:var(--accent-soft);padding:34px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:520px} .login-logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)} .logo-dot{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 200deg,var(--rose),var(--navy));animation:lp-spin 5s linear infinite} .login-hero{font-size:30px;line-height:1.2;margin:0;max-width:15ch;font-weight:800;color:var(--navy)} .login-sub{color:var(--navy-2);opacity:.8;max-width:32ch;line-height:1.6;margin:0} .login-form{padding:16px 26px;display:flex;flex-direction:column;justify-content:center} .login-form h1{font-size:28px;margin:6px 0 20px;font-weight:800;color:var(--navy)} .eyebrow{color:var(--rose-deep);font-weight:700;letter-spacing:.5px;font-size:14px} .form h1{font-size:28px;margin:6px 0 20px;font-weight:800;color:var(--navy)} .toggle{background:var(--rose-track);border-radius:999px;padding:6px;display:grid;grid-template-columns:1fr 1fr;position:relative;margin-bottom:20px} .toggle button{border:0;background:transparent;padding:12px 0;border-radius:999px;font-weight:700;color:var(--navy);cursor:pointer;font-size:15px;z-index:1;transition:color .15s ease} .toggle .thumb{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);background:var(--card);border-radius:999px;box-shadow:0 6px 16px -8px rgba(var(--shadow-ink),.4);transition:transform .25s cubic-bezier(.4,0,.2,1)} .toggle.hr .thumb{transform:translateX(100%)} .field-label{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 7px 2px;display:block} /* The border was transparent, so a text input was identified only by its fill — 1.10:1 against a white card, which is essentially invisible. On a form, a field looked like a gap until you clicked it. WCAG 1.4.11 wants 3:1 for anything required to identify a control, and --field-line is set per theme to exactly that. 1px rather than the old 1.5px so the weight stays quiet now that it is actually visible. */ .field{width:100%;background:var(--field);border:1px solid var(--field-line);border-radius:14px;padding:15px 16px;font-size:15px;color:var(--navy);outline:none;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease} .field:focus{border-color:var(--rose-deep);background:var(--card);box-shadow:0 0 0 4px var(--rose-soft)} .field.otp{letter-spacing:8px;font-size:20px;font-weight:700;text-align:center} .row{margin-bottom:14px} .captcha{display:flex;align-items:center;gap:14px;margin-bottom:14px} .captcha .sum{font-size:22px;font-weight:800;white-space:nowrap;color:var(--navy)} .captcha .field{flex:1} .cta{width:100%;border:0;border-radius:12px;padding:16px;font-size:16px;font-weight:700;color:var(--on-accent);background:var(--accent-btn,var(--accent));cursor:pointer;box-shadow:0 8px 20px -10px rgba(79,70,229,.45);transition:transform .15s ease,box-shadow .15s ease} @media (hover:hover){.cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(var(--shadow-ink),.7)}} .cta:active:not(:disabled){transform:translateY(0)} .cta:disabled{opacity:.5;cursor:not-allowed} .divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)} .sso{display:flex;flex-direction:column;gap:10px} .sso button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:13px;font-size:14.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:border-color .15s ease,transform .1s ease} @media (hover:hover){.sso button:hover{border-color:var(--rose-deep);transform:translateY(-1px)}} .sso .company{background:var(--navy);color:#fff;border-color:var(--navy)} .otp-meta{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 16px;font-size:13px;color:var(--muted)} .otp-meta button{border:0;background:none;color:var(--rose-deep);font-weight:700;cursor:pointer;font-size:13px} .otp-meta button:disabled{color:#c9bdb8} .banner-ok{background:var(--ok-soft);border:1px solid var(--line);color:var(--ok);padding:12px 14px;border-radius:12px;font-size:13.5px;margin-bottom:14px} .back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;margin-bottom:10px;font-weight:600} .err{color:var(--err);font-size:13.5px;margin-top:14px;font-weight:600} .hint{font-size:13px;color:var(--muted);margin-top:16px;text-align:center} .hint a{color:var(--rose-deep);font-weight:600;position:relative} .hint a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--rose-deep);transform:scaleX(0);transform-origin:right;transition:transform .2s ease} @media (hover:hover){.hint a:hover::after{transform:scaleX(1);transform-origin:left}} @media(max-width:480px){ .login-page{padding:14px} .shell,.login-card{padding:16px;border-radius:20px} .form,.login-form{padding:10px 6px} .form h1,.login-form h1{font-size:23px} .field{padding:13px 14px;font-size:14.5px} .cta{padding:14px;font-size:15px} .captcha{flex-wrap:wrap} .captcha .sum{font-size:18px} } /* ---------- app shell + nav ---------- */ .hq-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh} /* The scroll container carries the surface colour and the divider, not the .nav inside it. Previously .hq-side was transparent and .nav painted the white — but .nav was height:100%, i.e. 100% of a 100vh container, while its own content (around forty menu items) is taller than that. Everything past the first viewport scrolled into an area the white never reached, so the lower half of the menu showed the page grey instead, and the right-hand divider stopped with it. A scroll container's own background is painted against its padding box and does not scroll away, which is exactly the behaviour wanted here. */ .hq-side{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin; background:var(--card);border-right:1px solid var(--line)} /* min-height, not height: the nav must still fill a short viewport (so .grow can push the footer down) while being free to grow past it when the menu is long. */ .nav{background:var(--card);color:var(--ink);padding:0 16px 22px;display:flex;flex-direction:column;min-height:100%} /* Pinned to the top of the scrolling sidebar. With around forty menu items the sidebar always scrolls, and the brand plus the employer's logo scrolled away with it — so the one fixed point on the page disappeared the moment somebody looked for anything below the fold, and there was nothing to tell them they had scrolled rather than landed somewhere odd. */ .nav .logo{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;font-weight:700; font-size:16px;margin:0 -16px 14px;padding:20px 22px 14px;color:var(--ink);background:var(--card); border-bottom:1px solid var(--line-2)} .nav .logo .dot{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} .nav .sect{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:16px 12px 6px;padding-top:14px;border-top:1px solid var(--line-2)} .nav .sect:first-of-type{border-top:none;padding-top:0;margin-top:4px} .nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--navy-2);font-size:13.5px;font-weight:500;transition:.15s} @media (hover:hover){.nav a:hover{background:var(--line-2);color:var(--ink)}} .nav a.active{background:var(--accent);color:var(--on-accent);font-weight:600} .nav a svg{width:17px;height:17px;flex:0 0 auto} .nav .grow{flex:1} .nav .foot{border-top:1px solid var(--line);padding-top:14px;margin-top:12px;display:flex;align-items:center;gap:10px} .nav .foot .av{width:34px;height:34px;border-radius:50%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px} .nav .foot .who{font-size:13px;line-height:1.3;color:var(--ink)}.nav .foot .who small{color:var(--muted);display:block} .crisis-link{color:var(--maroon)!important;font-weight:600!important;margin-top:10px} @media (hover:hover){.crisis-link:hover{background:var(--maroon-soft)!important}} .crisis-link.active{background:var(--maroon-soft)!important;color:var(--maroon)!important} .hq-main{min-width:0} /* The background was a hardcoded rgba(255,255,255,.92), so the header stayed white on every dark theme — the page went dark and a white band sat across the top of it. It was never an AI Studio problem specifically; Midnight had it too, and any dark theme a SuperAdmin creates would have inherited it. Solid --card first so an older browser gets a correct opaque header, then the translucent version where color-mix is understood — the blur needs something to see through. */ /* The language picker and bell are position:fixed at top-right, so anything a page puts on the right of its top bar slid underneath them. Every top bar now keeps that corner clear. */ .topbar{padding-right:190px!important} @media(max-width:900px){.topbar{padding-right:120px!important}} .topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 34px;border-bottom:1px solid var(--line);background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(150%) blur(8px);-webkit-backdrop-filter:saturate(150%) blur(8px);position:sticky;top:0;z-index:20;flex-wrap:wrap;gap:10px} .topbar .crumb{font-size:12.5px;color:var(--muted)} .topbar h1{font-size:20px;font-weight:700;color:var(--navy)} .wrap{padding:26px 34px 48px;max-width:1080px;margin:0 auto} /* ---------- cards / profile / dashboard ---------- */ .phead{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;gap:20px;align-items:flex-start;position:relative;overflow:hidden} .phead::before{content:"";position:absolute;inset:0 0 auto 0;height:70px;background:var(--accent-soft)} .photo{width:96px;height:96px;border-radius:20px;background:var(--rose-soft);position:relative;z-index:1;margin-top:16px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:var(--navy);border:4px solid #fff;box-shadow:0 8px 24px -12px rgba(var(--shadow-ink),.4)} .pmeta{flex:1;z-index:1;padding-top:40px} .pmeta .nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pmeta h2{font-size:23px;margin:0;font-weight:800;color:var(--navy)} .verified{display:inline-flex;align-items:center;gap:5px;background:var(--ok-soft);color:var(--ok);font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px} .badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px} .badge.emp{background:var(--accent-soft);color:var(--gold-text)} .role-line{color:var(--navy-2);font-weight:600;margin:6px 0 2px} .sub-line{color:var(--muted);font-size:13.5px;display:flex;gap:16px;flex-wrap:wrap;margin-top:6px} .pactions{z-index:1;display:flex;flex-direction:column;gap:10px;align-items:flex-end;padding-top:40px} .btn{border:0;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer} /* --accent-btn, not --accent: the fill is darkened where white would not read on the accent itself. See hqButtonFill in hq-theme.js. */ .btn.primary{background:var(--accent-btn,var(--accent));color:var(--on-accent)} .btn.rose{background:var(--accent-btn,var(--accent));color:var(--on-accent)}.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--navy)} @media (hover:hover){.btn.primary:hover:not(:disabled){background:var(--rose-deep)}} .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(17,24,39,.04)} .card.full{grid-column:1/-1} .card h3{font-size:14px;margin:0 0 16px;color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:space-between} .kv{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px} .kv .lbl{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px} .kv .val{font-size:14.5px;color:var(--navy);font-weight:600} .kv .full{grid-column:1/-1} .tags{display:flex;flex-wrap:wrap;gap:9px} .tag{background:var(--rose-soft);color:var(--gold-text);font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px} .doc{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2)} .doc:last-child{border-bottom:0}.doc .dinfo{flex:1;min-width:0}.doc .dinfo b{font-size:14px;color:var(--navy);display:block}.doc .dinfo small{color:var(--muted);font-size:12.5px;word-break:break-word;overflow-wrap:anywhere} /* ---------- expert admin card (pro-level, no overlap/wrap issues) ---------- */ .exp-card{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;background:var(--card);transition:box-shadow .15s,border-color .15s} @media (hover:hover){.exp-card:hover{box-shadow:0 14px 30px -18px rgba(var(--shadow-ink),.22);border-color:var(--gold-soft)}} .exp-card:last-child{margin-bottom:0} .exp-top{display:flex;gap:14px;align-items:flex-start} .exp-avatar{width:44px;height:44px;border-radius:12px;background:var(--rose-soft);color:var(--navy);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .exp-identity{flex:1;min-width:0} .exp-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px} .exp-name-row b{color:var(--navy)} .exp-badge-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px} .exp-meta-line{display:block;color:var(--muted);font-size:12.5px;margin-top:7px;line-height:1.5} .exp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)} .exp-actions .btn{font-size:12.5px;padding:8px 14px} .pill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px} .pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.pending{background:var(--amber-soft);color:var(--amber)} .hello{font-size:24px;font-weight:800;color:var(--navy);margin:0 0 4px} .hello-sub{color:var(--muted);margin:0 0 22px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px} .stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px} .stat .n{font-size:26px;font-weight:800;color:var(--navy);line-height:1} .stat .l{font-size:13px;color:var(--muted);margin-top:5px} .cols{display:grid;grid-template-columns:1.6fr 1fr;gap:20px} .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} /* Fixed column counts, collapsing on narrow screens. .card-grid auto-fills, which is right for a list of unknown length and wrong for two or three things that belong side by side. */ .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .srow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2)} .srow:last-child{border-bottom:0}.srow .time{width:60px;font-weight:700;color:var(--navy);font-size:13.5px} .srow .who{flex:1}.srow .who b{display:block;font-size:14px;color:var(--navy)}.srow .who small{color:var(--muted);font-size:12.5px} .srow .stag{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-text)} .srow .join{background:var(--ok-soft);color:var(--ok);font-weight:700;border:0;border-radius:10px;padding:8px 14px;font-size:12.5px;cursor:pointer} /* The banner gradient is permanently dark; its white label is the correct pairing and is not theme-derived for that reason. */ .banner{border-radius:16px;padding:20px 22px;color:#fff;background:linear-gradient(120deg,#201d5c,#3a3486);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px} .banner .h{font-size:16px;font-weight:700}.banner .t{font-size:13px;opacity:.85;margin-top:3px}.banner .btn{background:#fff;color:#111827} .bars{display:flex;align-items:flex-end;gap:10px;height:130px;margin-top:6px} .bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:flex-end;height:100%} .bars .b i{width:100%;max-width:26px;background:linear-gradient(180deg,var(--rose),#C88A8E);border-radius:7px 7px 0 0} .bars .b span{font-size:11px;color:var(--muted)} .prog .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}.prog .top b{color:var(--navy)}.prog .top span{color:var(--muted)} .prog .bar{height:9px;background:var(--line);border-radius:99px;overflow:hidden}.prog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#9b8ff0)} @media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}.grid{grid-template-columns:1fr}} @media(max-width:480px){ .stats{grid-template-columns:1fr} .admin-stat-grid{grid-template-columns:repeat(2,1fr)} .admin-quicklinks{flex-direction:column} .admin-quicklinks .btn{width:100%} .srow{flex-wrap:wrap;row-gap:8px} .srow .who{flex:1 1 100%;order:1} .srow .time{order:0} .srow .stag{order:2} .srow .join{order:3;margin-left:auto} } @media(max-width:900px){.hq-app{grid-template-columns:1fr}.shell{grid-template-columns:1fr}.visual{display:none} .login-card{grid-template-columns:1fr}.login-visual{display:none}} @media(max-width:640px){ .kv{grid-template-columns:1fr} .modal-card{width:94%;padding:20px;max-height:90vh} .doc{flex-wrap:wrap} .ic-tabbar{overflow-x:auto;flex-wrap:nowrap} } @media(max-width:600px){.topbar{padding:14px 16px}.hq-back-bar{padding:10px 16px 0}.wrap{padding:16px 16px 40px}.wrap-wide{padding:16px 16px 40px}.wiz-steps{top:58px}.phead{flex-direction:column}.pactions{align-items:flex-start!important;padding-top:0!important}.settings-row{flex-wrap:wrap;gap:8px}} /* ---------- real-time toasts ---------- */ .live-toasts{position:fixed;top:92px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:1200;max-width:340px;pointer-events:none} .live-toasts .toast{pointer-events:auto} .toast{background:var(--navy);color:#fff;padding:13px 16px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:0 12px 30px -10px rgba(var(--shadow-ink),.5);display:flex;align-items:center;gap:10px;animation:slidein .25s ease} .toast .dotlive{width:8px;height:8px;border-radius:50%;background:var(--rose);flex:0 0 auto} @keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}} .live-test{position:fixed;bottom:18px;right:18px;z-index:50;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 16px;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;box-shadow:0 10px 26px -12px rgba(var(--shadow-ink),.35);display:flex;align-items:center;gap:10px} .live-test .conn{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--amber-soft);color:var(--amber)} .live-test .conn.on{background:var(--ok-soft);color:var(--ok)} /* ---------- AI check-in ---------- */ .ai-card{background:linear-gradient(180deg,var(--card),var(--accent-soft));border-color:var(--line)} .ai-spark{color:var(--accent)} .ai-tag{font-size:11px;font-weight:800;letter-spacing:.5px;background:var(--accent-soft);color:var(--gold-text);padding:4px 10px;border-radius:999px} .ai-card textarea.field{resize:vertical;font-family:inherit} .ai-result{margin-top:16px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:16px} .ai-result.urgent{border-left-color:var(--err);background:var(--maroon-soft)} .ai-crisis{margin-top:12px;background:var(--maroon-soft);color:var(--maroon);border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600} .ai-disc{font-size:11.5px;color:var(--muted);margin:10px 2px 0} /* ---------- reviews ---------- */ .rev-summary{display:flex;gap:32px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line-2);margin-bottom:16px;flex-wrap:wrap} .rev-big{text-align:center} .rev-num{font-size:40px;font-weight:800;color:var(--navy);line-height:1} .rev-stars{color:#E8A93C;font-size:16px;letter-spacing:2px;margin-top:4px} .rev-stars.small{font-size:13px} .rev-count{font-size:12.5px;color:var(--muted);margin-top:4px} .rev-dist{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px} .rev-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)} .rev-row span:first-child{width:26px} .rev-bar{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden} .rev-bar i{display:block;height:100%;background:#E8A93C;border-radius:99px} .rev-card{padding:14px 0;border-bottom:1px solid var(--line-2)} .rev-card:last-child{border-bottom:0} .rev-head{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--navy)} .rev-date{margin-left:auto;font-size:12px;color:var(--muted);font-weight:400} .rev-comment{margin:8px 0;color:var(--navy-2);line-height:1.6;font-size:14px} .rev-subs{display:flex;gap:14px;font-size:12px;color:var(--muted)} .rev-reply{margin-top:10px;background:var(--field);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--navy-2)} .rev-reply b{color:var(--navy)} /* ---------- expert wizard ---------- */ .wiz-steps{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;position:sticky;top:66px;background:var(--page);padding:10px 0;z-index:10} .chk-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:10px} .wiz-step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;white-space:nowrap} .wiz-step .num{width:20px;height:20px;border-radius:50%;background:var(--field);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto} .wiz-step.on{border-color:var(--navy);color:var(--navy)} .wiz-step.on .num{background:var(--navy);color:#fff} .wiz-step.done .num{background:var(--ok);color:#fff} .chk{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--card)} .chk.sel{border-color:var(--rose);background:var(--rose-soft)} .chk input{margin-top:3px} .chk b{font-size:14px;color:var(--navy);display:block} .chk small{color:var(--muted);font-size:12px} .qual-row{display:flex;gap:8px;margin-bottom:8px} .qual-row .field{flex:1} .qual-row .btn{padding:11px 14px} @media(max-width:700px){.chk-grid{grid-template-columns:1fr}} /* ---------- chip select (consultation modes) ---------- */ .chip-select{display:flex;gap:10px;flex-wrap:wrap} .chip-opt{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;background:var(--card)} .chip-opt.sel{background:var(--rose-soft);border-color:var(--rose);color:var(--gold-text)} /* ---------- availability calendar ---------- */ .avail-day-card{padding:16px 0;border-bottom:1px solid var(--line-2);transition:background .15s} .avail-day-card:last-child{border-bottom:0} @media (hover:hover){.avail-day-card:hover{background:rgba(198,146,46,.03)}} .avail-day-name{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy);font-size:14px;margin-bottom:10px} .avail-day-off{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--field);padding:3px 9px;border-radius:999px} .avail-day-slots{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .avail-add{padding:8px 14px;font-size:12.5px;border-radius:10px} .copy-btn{border:0;background:none;color:var(--gold-text);font-size:11px;font-weight:600;cursor:pointer;margin-left:auto;padding:4px 8px;border-radius:8px;transition:background .15s} @media (hover:hover){.copy-btn:hover{background:var(--gold-soft)}} .avail-chip{display:flex;align-items:center;gap:6px;background:var(--field);border-radius:10px;padding:6px 10px} .avail-chip input[type="time"]{border:0;background:transparent;font-size:13px;color:var(--navy);font-weight:600} .avail-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px} .slot-preview{display:flex;flex-wrap:wrap;gap:8px} .slot-chip{background:var(--ok-soft);color:var(--ok);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px} /* ---------- location colors ---------- */ .avail-chip.loc-Online{background:var(--ok-soft)} .avail-chip.loc-Clinic{background:var(--accent-soft)} .avail-chip.loc-Hospital{background:var(--maroon-soft)} .avail-chip.loc-HomeVisit{background:var(--amber-soft)} .avail-chip select{border:0;background:transparent;font-size:11.5px;color:var(--navy);font-weight:600} .loc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:3px} .loc-dot.loc-Online{background:#2f8f6b} .loc-dot.loc-Clinic{background:#7A6CE0} .loc-dot.loc-Hospital{background:#c0473f} .loc-dot.loc-HomeVisit{background:#B5791A} /* ---------- public directory & doctor profile ---------- */ .pub-page{min-height:100vh;background:var(--page)} .pub-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 34px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10} .pub-topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)} .pub-topbar .brand .dot{width:24px;height:24px;border-radius:50%;background:conic-gradient(from 200deg,var(--rose),var(--navy))} .pub-wrap{max-width:1180px;margin:auto;padding:32px 34px 60px} .pub-h1{font-size:32px;font-weight:800;color:var(--navy);margin:0 0 8px} .pub-sub{color:var(--muted);margin:0 0 22px;font-size:15px} .pub-search{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap} .pub-search .field{flex:1;min-width:220px} .doc-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:18px} .doc-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:box-shadow .15s,border-color .15s} @media (hover:hover){.doc-card:hover{box-shadow:0 14px 30px -14px rgba(var(--shadow-ink),.25);border-color:var(--rose)}} .doc-card-top{display:flex;gap:12px;align-items:center;margin-bottom:12px} .doc-avatar{width:52px;height:52px;border-radius:14px;background:var(--rose-soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);flex:0 0 auto} .doc-name{font-size:15.5px;font-weight:700;color:var(--navy)} .v-badge{color:var(--ok);margin-left:4px} .doc-cat{font-size:12.5px;color:var(--muted)} .doc-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--navy-2);margin-bottom:8px} .doc-meta .muted{color:var(--muted)} .doc-langs{font-size:12px;color:var(--muted);margin-bottom:12px} .doc-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line-2)} .doc-bottom .muted{color:var(--muted);font-size:12px} .next-slot{margin-top:10px;font-size:11.5px;color:var(--ok);font-weight:600;background:var(--ok-soft);padding:6px 10px;border-radius:8px;display:inline-block} /* ---------- AI chat ---------- */ .chat-card{display:flex;flex-direction:column;height:520px} .chat-log{flex:1;overflow-y:auto;padding:8px 4px;display:flex;flex-direction:column;gap:12px} .chat-row{display:flex;flex-direction:column;max-width:75%} .chat-row.me{align-self:flex-end;align-items:flex-end} .chat-row.ai{align-self:flex-start;align-items:flex-start} .chat-bubble{padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5} /* The rendered reply. A ten-day plan arrived as one unbroken paragraph with literal ** around every heading — readable only if you already knew what it was going to say. */ .chat-bubble p{margin:0 0 9px} .chat-bubble p:last-child{margin-bottom:0} .chat-bubble strong{font-weight:700} .chat-bubble ul{margin:0 0 9px;padding-left:19px} .chat-bubble ul:last-child{margin-bottom:0} .chat-bubble li{margin-bottom:4px} .chat-bubble li:last-child{margin-bottom:0} .chat-row.me .chat-bubble{background:var(--navy);color:#fff;border-bottom-right-radius:4px} .chat-row.ai .chat-bubble{background:var(--field);color:var(--navy);border-bottom-left-radius:4px} .chat-bubble.crisis{background:var(--maroon-soft);color:var(--maroon);font-weight:600} /* Animated, and roomy enough for a line of text beside the dots. Static dots for fifteen seconds is indistinguishable from a page that has stopped. */ .chat-bubble.typing{color:var(--muted);display:flex;align-items:center;gap:10px} .typing-dots{display:inline-flex;gap:4px;align-items:center} .typing-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35; animation:typing-bounce 1.2s infinite ease-in-out} .typing-dots i:nth-child(2){animation-delay:.15s} .typing-dots i:nth-child(3){animation-delay:.3s} @keyframes typing-bounce{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .typing-note{font-size:12px} @media (prefers-reduced-motion:reduce){.typing-dots i{animation:none;opacity:.6}} .chat-time{font-size:10.5px;color:var(--muted);margin-top:4px} /* Always visible, not an empty-state message. What happens to what you type is something you need to know before the panel has anything in it — and after. */ /* The read-back view. Bounded height so a long conversation doesn't push the buttons under it off the modal, which is where a Save button most often gets lost. */ .session-chat-log{max-height:280px;overflow-y:auto;background:var(--field);border-radius:10px;padding:10px} .chat-file{display:flex;align-items:center;gap:7px;margin-top:7px;padding:6px 10px;border-radius:8px; border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:12px;font-weight:600;color:var(--navy)} .chat-file small{font-weight:400;color:var(--muted)} @media (hover:hover){.chat-file:hover{border-color:var(--gold)}} .chat-retention{margin:0 0 8px;padding:7px 10px;border-radius:8px;background:var(--ok-soft); color:var(--ok);font-size:11px;line-height:1.5;text-align:center} /* position:relative is load-bearing. .dropzone-input inside it is position:absolute; inset:0 at opacity:0, so without a positioned ancestor here it stretched to whatever was positioned further up — on the call page, most of the panel. An invisible file input covering the panel means every tap anywhere near the chat opened the photo picker, which on a phone is the whole screen and looks like the app doing something at random. overflow:hidden keeps it inside the 38px button even if a browser ignores the inset. */ .chat-attach{position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto; border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:16px;background:var(--card)} @media (hover:hover){.chat-attach:hover{border-color:var(--gold)}} .chat-attach.busy{opacity:.6;pointer-events:none} .chat-input-row{display:flex;gap:10px;margin-top:12px} .chat-input-row .field{flex:1} /* ---------- wellness widget ---------- */ .wellness-stats{display:flex;gap:20px;margin-bottom:16px} .w-stat{flex:1;background:var(--field);border-radius:12px;padding:14px;text-align:center} .w-num{font-size:22px;font-weight:800;color:var(--navy)} .w-lbl{font-size:12px;color:var(--muted);margin-top:2px} .badge-row{display:flex;flex-wrap:wrap;gap:8px} .badge-chip{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--field);color:var(--muted);font-size:12.5px;font-weight:600} .badge-chip.earned{background:var(--rose-soft);color:var(--gold-text)} .badge-ico{font-size:14px} .me-row{color:var(--rose-deep)} /* ---------- booking action panel ---------- */ .action-panel{width:100%;background:var(--field);border-radius:12px;padding:16px;margin-top:8px} /* ---------- document upload ---------- */ input[type="file"].field{display:flex;align-items:center;background:var(--field);border-radius:12px;padding:9px 12px;font-size:13px;cursor:pointer} /* ---------- date of birth picker ---------- */ .dob-row{display:flex;gap:10px} .dob-row select{flex:1;min-width:0} .msg-layout{display:flex;gap:20px;align-items:flex-start} .msg-contacts{width:260px;flex:0 0 auto} .msg-contact{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;cursor:pointer;margin-bottom:6px} @media (hover:hover){.msg-contact:hover{background:var(--field)}} .msg-contact.active{background:var(--rose-soft)} .msg-contact b{font-size:13.5px;color:var(--navy);display:block} .msg-contact small{font-size:11.5px;color:var(--muted)} @media(max-width:900px){.msg-layout{flex-direction:column}.msg-contacts{width:100%}} /* ---------- dashboard header + quick actions ---------- */ .dash-header{margin-bottom:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .quick-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px} .qa{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:box-shadow .15s} @media (hover:hover){.qa:hover{box-shadow:0 10px 22px -12px rgba(var(--shadow-ink),.25)}} .qa-ico{font-size:16px} .qa-emergency{background:var(--maroon-soft);color:var(--maroon);border-color:#f3c9c5} /* ---------- mood tracker ---------- */ .mood-row{display:flex;align-items:center;gap:12px;margin-bottom:12px} .mood-label{width:140px;font-size:13.5px;color:var(--navy);flex:0 0 auto} .mood-row input[type="range"]{flex:1;accent-color:var(--rose-deep)} .mood-val{width:20px;text-align:center;font-weight:700;color:var(--navy);font-size:13px} /* ---------- emergency modal ---------- */ .modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);display:flex;align-items:center;justify-content:center;z-index:100} .modal-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;max-width:420px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 44px -18px rgba(17,24,39,.28)} /* ---------- floating AI assistant ---------- */ .fab-wrap{position:fixed;left:270px;bottom:22px;z-index:60} @media(max-width:900px){.fab-wrap{left:16px}} .fab-btn{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;font-size:22px;border:0;cursor:pointer;box-shadow:0 14px 30px -10px rgba(var(--shadow-ink),.5)} .fab-panel{position:absolute;bottom:70px;left:0;width:320px;background:var(--card);border-radius:16px;box-shadow:0 20px 50px -15px rgba(var(--shadow-ink),.4);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)} .fab-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--line-2);font-size:14px} .fab-close{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px} .fab-log{height:260px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px} .fab-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line-2)} .fab-input .field{flex:1;padding:9px 12px;font-size:13px} .fab-full{display:block;text-align:center;font-size:12px;color:var(--rose-deep);padding:8px;font-weight:600;border-top:1px solid var(--line-2)} /* ---------- logout ---------- */ .nav .foot{position:relative} .logout-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:6px} @media (hover:hover){.logout-btn:hover{color:var(--ink)}} /* ---------- video call ---------- */ /* Guest call page. Dark and full-height with no app chrome — someone arriving on this link has no account and no reason to see a sidebar. The page is the call. */ /* Used on the guest call page while connecting. Something moving is the difference between "this is working" and "this has hung" — which on a page whose whole failure mode was looking hung is the point. */ .spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18); border-top-color:rgba(255,255,255,.75);animation:hq-spin .8s linear infinite} @keyframes hq-spin{to{transform:rotate(360deg)}} .guest-call{min-height:100vh;background:#0a0920;display:flex;flex-direction:column;color:#fff} .guest-call-head{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.08)} .guest-call-brand{font-family:var(--serif);font-size:17px;font-weight:700} .guest-call-name{font-size:12.5px;color:rgba(255,255,255,.6)} .guest-call-body{flex:1;display:flex;flex-direction:column;padding:14px;max-width:1100px;width:100%;margin:0 auto} /* The wrap is the positioning context; both need to fill so the stage isn't a strip at the top of a tall empty column. */ .guest-call-body .call-video-wrap{flex:1;min-height:0} .guest-call-body .call-stage{flex:1} .guest-call-centre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;color:rgba(255,255,255,.7)} .guest-call-card{background:#fff;color:var(--text);border-radius:16px;padding:28px;max-width:460px;text-align:center} .guest-call-card h3{margin:0 0 8px;font-size:16px} .guest-call-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6} .guest-call-warning{margin:12px 0 0;font-size:12.5px;color:#F0C674;text-align:center} .guest-call-note{margin:8px 0 0;font-size:11.5px;color:rgba(255,255,255,.4);text-align:center} /* ---------- the call surface ---------- Dark end to end, side panel included. Video surfaces stay dark in every theme on purpose: a tile sits on whatever colour is behind it, and a light frame around a face throws the exposure off and makes skin tones read wrong. The side panel was the light half of that — a white column beside a near-black video is the thing that made this look assembled rather than designed. Not part of the black-to-grey pass. */ /* Meet's own greys rather than near-black. #202124 is the page, #3c4043 is a control, and the difference matters: pure black makes every tile edge disappear and the control bar float in nothing, which is why the first attempt read as unfinished rather than dark. */ .call-layout{display:grid;grid-template-columns:1fr 340px;gap:12px;align-items:stretch; background:#202124;border-radius:16px;padding:12px} /* The video column is a positioning context and nothing else — the controls sit inside the stage rather than in a strip beneath it, which is what every video app does and what stops the bar from stealing a hundred pixels of face. */ .call-video-wrap{position:relative;display:flex;flex-direction:column;min-width:0} .call-stage{position:relative;flex:1;min-height:min(64vh,540px);background:#202124;border-radius:12px; overflow:hidden;display:flex;align-items:center;justify-content:center} /* ---------- tiles ---------- A grid rather than loose