/* The webfont is self-hosted. The Google Fonts stylesheet was a render-blocking third-party request (about 0.8 s on mobile before the hero could paint). Same v20 files Google serves, latin + latin-ext subsets, variable weight. */ @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/inter-latin.woff2?v=v1) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/inter-latin-ext.woff2?v=v1) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* =========================================================================== LogBlues.com — one stylesheet for every page. The ground stays calm: one quiet page colour, hairlines between sections, hierarchy carried by size rather than colour. Nothing in the furniture is saturated, so the only loud things on the site are the products. What earns colour: the feature cards. Those are the shop window — a big picture, a short line, and the app it belongs to sitting underneath with a way in. Everything else stays out of their way. ONE MARK PER PAGE. The LogBlues wordmark owns the header everywhere; the LogBlues Practice lockup appears on its own page and nowhere else. =========================================================================== */ :root { --page:#f7f8f7; --surface:#ffffff; --raised:#f0f2f1; /* Apple never uses pure black for text. #1d1d1f is theirs. */ --ink:#1d1d1f; --ink-2:#2f2f33; --ink-3:#525c5a; --grid:#e2e6e5; --border:rgba(11,15,14,0.08); --accent:#14708f; --good:#0a7c5c; /* The splash. Lifted straight from the app so the site and the product agree with each other: the brand blue, the setup green, the violet the app uses for admin, and the magenta it uses to raise its voice. Used small -- eyebrows and markers -- never as a fill. */ --brand:#3162d8; --leaf:#0a68a8; --plum:#6b5ce7; --rose:#b3277f; --shadow:0 1px 2px rgba(11,15,14,.05), 0 8px 24px -12px rgba(11,15,14,.14); --shadow-lift:0 2px 4px rgba(11,15,14,.06), 0 26px 52px -26px rgba(11,15,14,.3); --r:14px; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } } body { margin:0; background:var(--page); color:var(--ink-2); /* Inter, from 7 Sep 2026. Drawn for screen rendering, metrics close to SF Pro's, so it reads native on a Mac and keeps its stems under ClearType on Windows, which is what the clinics run. THE HISTORY, so this does not go round a third time: Inter was tried here before and rejected as mechanical at UI sizes; Figtree was tried and rejected as soft; Manrope held the site until tonight. The owner asked for Inter again on 7 Sep after comparing against apple.com. ONE THING STILL OUT OF STEP: the app itself is set in Manrope, and the product screenshots on this site are captured in Manrope -- the capture harness loads Manrope Regular through ExtraBold before it takes a frame. So the page is now set in a different face from the pictures of the product on it. Either the app follows, or the screenshots are recaptured, or we accept the difference on purpose. Manrope's files are still in assets/fonts, so this is one edit to undo. */ font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* A small site-wide readability lift. Component labels that need tighter measurements keep their explicit sizes; all running copy inherits this larger base. */ font-size:18px; line-height:1.5; font-weight:400; /* Inter is a grotesque with SF Pro's proportions, so it takes the tighter tracking that collided in geometric Manrope. */ letter-spacing:-0.011em; /* No -webkit-font-smoothing:antialiased here, deliberately. Tried again on 7 Sep 2026 and reverted the same evening: on Windows it is worse, confirmed on the owner's own screen. Do not add it a third time. It was set alongside the Figtree change and it is the reason the type looked soft. On a Mac it is close to a no-op; on Windows -- which is what the clinics we sell to are running, and what this is read on -- it turns OFF subpixel rendering and draws every glyph in grey antialiasing instead. Stems lose the vertical crispness ClearType gives them and the whole page reads a weight lighter and slightly blurred. Letting the browser do what it does natively is what makes it sharp. text-rendering:optimizeLegibility went with it: the kerning and ligatures it enabled are already on through font-feature-settings, and it brings its own spacing quirks for nothing. */ font-optical-sizing:auto; font-feature-settings:"kern" 1,"liga" 1,"calt" 1; } a { color:var(--accent); font-weight:600; text-decoration:none; transition:color .22s ease; } /* An anchor that IS a block -- a whole card, a menu row -- is not a link in a sentence, so it does not take the inline link weight. Its own heading still gets 600 from the h3 rule (7 Sep 2026). */ a.card, a.doclink, a.today, .navdrop-cols a { font-weight:400; } a:hover { color:color-mix(in srgb,var(--accent) 72%,#fff); text-decoration:underline; } a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; } img { max-width:100%; } .wrap { max-width:1080px; margin:0 auto; padding:0 24px; } .narrow { max-width:980px; } /* `.wrap narrow` used to shrink the whole container to 980px. Because .wrap is centred, that pushed its left edge 50px inward from every .wrap above and below it, so the text on a page stepped right and then back again between sections -- visible on patient-privacy.html, where the hero copy starts at one margin and "Where a chart actually sits." starts at another. The container now keeps the shared left edge and the reading measure is applied to the prose instead, which is what `narrow` was ever for. Headings keep their own ch-based widths; only the running text is constrained, and nested `
` inside a plain .wrap is untouched. */ .wrap.narrow { max-width:1080px; } /* ------------------------------------------------------------- beta bar */ /* Above the sticky header, so it announces itself once and then gets out of the way. Muted on purpose -- the point is disclosure, not drama. */ .betabar { background:var(--raised); border-bottom:1px solid var(--border); font-size:13.5px; color:var(--ink-3); } .betabar .wrap { display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 24px; text-align:center; flex-wrap:wrap; } .betabar strong { color:var(--ink-2); font-weight:600; } .betabar a { color:var(--accent); font-weight:600; white-space:nowrap; } @media (max-width:600px) { .betabar .wrap { padding:8px 18px; font-size:13px; } } /* ---------------------------------------------------------------- top bar */ header.bar { position:sticky; top:0; z-index:30; background:rgba(247,248,247,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .bar .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; } .brand, .brand:hover { display:block; line-height:0; text-decoration:none; } /* 28px read small against the nav; +20% at the owner's request. */ .brand img { height:44px; width:auto; display:block; } /* was 34; too small beside the header buttons (owner, 7 Sep 2026) */ /* The top bar: each label sits in its own rounded plate that fills on mouse over, the way athenahealth's bar does (owner, 7 Sep 2026). The plates carry the spacing (11px each side = the old 22px gap) so nothing moves when the fill appears; the fill stays while a dropdown is open. */ /* 15px was tuned for Manrope; Inter sits a shade smaller at the same measurement in the bar (owner, 7 Sep 2026). */ nav.links { display:flex; gap:0; font-size:15.5px; } nav.links a { color:var(--ink-2); } nav.links > a, nav.links > .navdrop > .navdrop-top { padding:8px 11px; border-radius:10px; transition:background-color .15s ease, color .15s ease; } nav.links > a:hover, nav.links > a:focus-visible, nav.links > .navdrop:hover > .navdrop-top, nav.links > .navdrop:focus-within > .navdrop-top, nav.links > .navdrop.desktop-open > .navdrop-top { background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink); text-decoration:none; } nav.links > a:hover { text-decoration:none; } nav.links a[aria-current] { color:var(--accent); } nav.links > a[aria-current]:hover { color:var(--accent); } /* Burger only. Download is a destination you arrive at after the argument, not a tab competing with it -- it is already the button in every hero and at the foot of every page. On a phone there is no hero button in view when somebody goes looking, so the burger keeps it. */ nav.links a.only-sm { display:none; } @media (max-width:1100px) { nav.links a.only-sm { display:block; } } /* --- nav dropdowns ------------------------------------------------------ Added 31 Aug 2026. Fourteen feature pages and six clinic-type pages existed with nothing in the navigation pointing at them, so the site advertised a fraction of the product it had. Opens on hover for a pointer and on focus for a keyboard. JavaScript adds click-to-open, Escape/outside-click closing and smooth menu switching; the CSS states remain a complete no-script fallback. */ :root { --md-menu-container-color:color-mix(in srgb,var(--surface) 94%,var(--page)); --md-menu-container-shape:18px; --md-menu-item-min-height:36px; --md-menu-hover-state-opacity:8%; --md-menu-pressed-state-opacity:12%; } .navdrop { position:relative; display:inline-flex; } .navdrop-top { position:relative; display:inline-flex; align-items:center; gap:3px; cursor:pointer; } .navdrop-toggle { display:none; } .navdrop-caret { width:15px; height:15px; opacity:.55; transition:transform .18s ease, opacity .18s ease; } .navdrop:hover .navdrop-caret, .navdrop:focus-within .navdrop-caret, .navdrop.desktop-open .navdrop-caret { transform:rotate(180deg); opacity:.9; } /* Escape returns focus to the section label without immediately reopening the panel through the no-script :focus-within fallback. The class is removed on the next pointer or keyboard interaction with that section. */ .navdrop.desktop-dismissed .navdrop-caret { transform:none; opacity:.55; } /* A top-level menu label must never wrap. Spanish is longer than English and "Para quién" broke across two lines, which pushed the whole bar out of alignment and left a hole beside Recursos. */ .links > a, .navdrop-top { white-space:nowrap; } .navdrop-panel { --navdrop-x:0%; position:absolute; top:100%; left:-3px; /* was -14 against the label; the label now sits 11px inside its plate */ z-index:60; display:grid; gap:1px; min-width:236px; /* No gap at all, was 15px (owner, 9 Sep 2026: "REMOVE THE FUCKING GAP"). The owner asked for the gap under the bar closed (9 Sep 2026). The panel keeps its own 17px ::after bridge, which still covers this comfortably, so hovering down into it is unaffected. */ padding:8px; margin-top:0; /* Material 3 menu surface tokens: surface-container color, extra-small shape, 8px vertical inset, and level-2 elevation. */ background:var(--md-menu-container-color); border:1px solid var(--border); border-radius:var(--md-menu-container-shape); box-shadow:0 1px 2px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.18); /* One compositor transform owns the complete movement. Splitting the fixed horizontal anchor into `transform` and the animated vertical position into the newer `translate` longhand made some browsers reconcile two transform stacks mid-hover, producing the visible jitter. */ opacity:0; visibility:hidden; pointer-events:none; /* The curtain (owner, 4 Sep 2026: "slide down like SimplePractice"): the panel is anchored under its tab and its height unrolls from the top edge; nothing moves, the bottom edge travels down. The horizontal anchor stays constant in both states. */ transform:translateX(var(--navdrop-x)); clip-path:inset(0 0 100% 0); transform-origin:top center; will-change:clip-path,opacity; backface-visibility:hidden; transition:opacity .16s ease-out, clip-path .34s cubic-bezier(.22,1,.36,1), visibility .34s; } .navdrop:hover .navdrop-panel, .navdrop:focus-within .navdrop-panel, .navdrop.desktop-open .navdrop-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(var(--navdrop-x)); clip-path:inset(0); transition-duration:.16s,.34s,0s; } .navdrop.desktop-dismissed .navdrop-panel { opacity:0; visibility:hidden; pointer-events:none; transform:translateX(var(--navdrop-x)); clip-path:inset(0 0 100% 0); } /* Once the interaction script is active, its single open class becomes the desktop source of truth. This prevents a previously clicked tab from being kept open by :focus-within while the pointer switches to another panel. The rule is desktop-only so the mobile accordion keeps its own state. */ @media (min-width:1101px) { body.navmenu-enhanced .navdrop:not(.desktop-open) .navdrop-panel { opacity:0; visibility:hidden; pointer-events:none; transform:translateX(var(--navdrop-x)); clip-path:inset(0 0 100% 0); } body.navmenu-enhanced .navdrop:not(.desktop-open) .navdrop-caret { transform:none; opacity:.55; } } /* A hover bridge. Without it the gap between the tab and the panel closes the menu as the pointer travels down to it. This lives on ::after, not ::before, because the photo panels use ::before for their scrim. Both rules had equal specificity and the scrim came later, so on 'Who it's for' the bridge was silently replaced by the scrim and the 11px gap above the panel became dead ground - the menu shut while you were reaching for it. Two different jobs cannot share one pseudo-element. */ .navdrop-panel::after { content:''; position:absolute; left:0; right:0; top:-17px; height:17px; } .navdrop-panel > a, .navdrop-cols a { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:var(--md-menu-item-min-height); padding:5px 32px 5px 12px; border-radius:4px; font-size:15px; line-height:1.3; color:var(--ink-2); white-space:nowrap; text-decoration:none; } /* One marker only: the menu summary across the top. Destination rows stay clean and use their hover/focus treatment to show that they are links. */ .navdrop-promo-title::before { content:none; display:none; } /* Interactive menu rows. The state layer sweeps in from the left and a small arrow settles into the reserved right edge. Nothing changes the row's dimensions, so the pointer target never moves while somebody is aiming. */ .navdrop-panel > a, .navdrop-cols a { transition:color .18s ease; } .navdrop-panel > a::before, .navdrop-cols a::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:color-mix(in srgb,var(--accent) 11%,transparent); transform:scaleX(0); transform-origin:left center; transition:transform .20s cubic-bezier(.22,1,.36,1); } .navdrop-panel > a::after, .navdrop-cols a::after { content:"\2192"; position:absolute; right:10px; top:50%; color:var(--accent); opacity:0; pointer-events:none; transform:translate(-7px,-50%); transition:opacity .16s ease, transform .20s cubic-bezier(.22,1,.36,1); } .navdrop-panel > a:hover, .navdrop-panel > a:focus-visible, .navdrop-cols a:hover, .navdrop-cols a:focus-visible { color:var(--accent); text-decoration:none; } .navdrop-panel > a:hover::before, .navdrop-panel > a:focus-visible::before, .navdrop-cols a:hover::before, .navdrop-cols a:focus-visible::before { transform:scaleX(1); } .navdrop-panel > a:hover::after, .navdrop-panel > a:focus-visible::after, .navdrop-cols a:hover::after, .navdrop-cols a:focus-visible::after { opacity:1; transform:translate(0,-50%); } .navdrop-panel > a:focus-visible, .navdrop-cols a:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .navdrop-panel > a:active, .navdrop-cols a:active { color:var(--accent); } .navdrop-panel > a:active::before, .navdrop-cols a:active::before { background:color-mix(in srgb,var(--accent) var(--md-menu-pressed-state-opacity),transparent); } /* Somebody who has asked their computer to stop animating gets the same Material state layers with no motion. */ @media (prefers-reduced-motion: reduce) { .navdrop-panel, .navdrop-panel a, .navdrop-caret, .navdrop-panel .navdrop-group, .navdrop-panel .navdrop-note, .navdrop-panel .navdrop-promo { transition:none; transition-delay:0s; } } .navdrop-panel a[aria-current] { color:var(--accent); font-weight:600; } /* The first entry is the overview page the tab itself points at. */ .navdrop-panel:not(.navdrop-panel--wide) > a:first-child { margin-bottom:4px; padding-bottom:10px; border-bottom:1px solid var(--border); border-radius:9px 9px 0 0; } /* A grouped panel: two columns with headings, so sixteen entries can be scanned instead of scrolled. The columns are laid out by the browser, and break-inside keeps a heading attached to the links beneath it. */ /* A grouped panel: a promo across the top, then real columns. Columns are an explicit grid, not column-count. column-count picks its own break points, which is how a heading ended up at the foot of one column with its links at the head of the next -- and why the whole thing collapsed to a single stack when the panel could not reach its own min-width. */ .navdrop-panel--wide { display:block; padding:20px 24px 24px; } /* Centre the middle menus under their labels. Resources is the last dropdown, but it is followed by the theme, language and account tools; use that spare header width so its large panel opens toward the right instead of covering nearly the whole left side of the page. The clamp keeps the shift sensible across desktop widths. */ .navdrop-panel--wide { left:50%; --navdrop-x:-50%; } .links > .navdrop:last-of-type > .navdrop-panel--wide { left:auto; right:clamp(-210px,-12vw,-150px); --navdrop-x:0%; } /* Wider than the two columns need. The panel carries a photograph now, and at 520px she was cropped to a shoulder. */ .navdrop-panel--c2 { min-width:660px; min-height:290px; } .navdrop-panel--c3 { min-width:720px; } /* Four columns need the room, and the text has to stay on the scrim. Protection moved up to the top line as its own column (owner, 8 Sep 2026). */ /* .navdrop-panel--art-features sets an explicit width:min(960px,...) for the three-column layout, which a min-width cannot beat. Four columns plus the photograph need more, so the width itself is raised here. */ .navdrop-panel--c4.navdrop-panel--art-features { width:min(1200px,calc(100vw - 28px)); min-width:min(1200px,calc(100vw - 28px)); /* At 1280 the -40% anchor pushed the wider panel 2px past the right edge. Pulling it further left keeps it inside without moving it off its tab on a big screen. */ --navdrop-x:-46%; } /* The heart on the HIPAA row, matching the plan table. Sits on the text baseline and never takes a line of its own. */ /* The mark on the HIPAA row. Blue, from the site accent, so it matches in both themes; the plan table keeps its own pink. Aligned with vertical-align rather than by making the row a flex line -- that shrank the anchor to its content and the hover plate stopped covering the row like every other link does. */ .navdrop-cols a .navmark { margin-right:6px; /* Measured: this lands the mark's centre within a pixel of the text's. */ vertical-align:-0.16em; } .navdrop-panel--c4 .navdrop-cols { grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px 22px; } .navdrop-panel--c4 .navdrop-cols a { white-space:normal; overflow-wrap:anywhere; } .navdrop-panel--c4.navdrop-panel--art-features .navdrop-cols { max-width:80%; } .navdrop-panel--c4.navdrop-panel--art-features .navdrop-promo.navdrop-promo { max-width:78%; } .navdrop-panel.navdrop-panel--c4.navdrop-panel--art-features::before { background:linear-gradient(90deg, var(--navdrop-scrim-strong) 0%, var(--navdrop-scrim-strong) 74%, color-mix(in srgb,var(--navdrop-scrim-strong) 62%,transparent) 82%, color-mix(in srgb,var(--navdrop-scrim-soft) 55%,transparent) 90%, transparent 99%); } /* A second group stacked under the first inside one column, which is how Protection sits below Financials (owner, 8 Sep 2026). */ /* Enough air that PROTECTION reads as its own group rather than a row of Financials, plus a hairline so the break is visible at a glance. The selector is doubled up because .navdrop-panel--c3 .navdrop-group is more specific and was winning on margin (owner, 8 Sep 2026). */ .navdrop-cols .navdrop-col .navdrop-group--stacked { margin-top:20px; padding-top:14px; border-top:1px solid var(--border); } /* Artwork behind a whole panel. A light plate and a dark one, because this is a photograph rather than a tint: the dark image on a white menu would read as a hole punched in the page. Both put the clinician on the right and empty room on the left, which is where the links go -- and a scrim over that side keeps them legible whatever lands under them. Definitions live on bare :root-equivalent selectors first so a viewer on "system" gets a real background either way. */ .navdrop-panel--art { background-repeat:no-repeat; background-position:right center; background-size:cover; border-color:var(--border); } .navdrop-panel--art-who { width:min(960px,calc(100vw - 28px)); min-width:min(960px,calc(100vw - 28px)); background-image:url(nav/who-its-for-menu-light.webp?v=20260907d); /* The Who tab sits left of centre in the header. A 40% anchor keeps this wider directory inside the viewport while leaving it visually attached to its trigger. */ --navdrop-x:-40%; } /* Wider than the other two menus because it carries three full columns of links AND a photograph: at 960px the picture sat over the Financials column and the labels were unreadable (7 Sep 2026). The extra width is the picture's, not the links'. */ .navdrop-panel--art-features { width:min(960px,calc(100vw - 28px)); min-width:min(960px,calc(100vw - 28px)); min-height:330px; background-image:url(nav/features-menu-light.webp?v=20260907d); /* Sized by height, not cover: the panels are nearly square and covering a wide box cropped and stretched them (7 Sep 2026). */ background-position:right center; background-size:auto 100%; background-repeat:no-repeat; --navdrop-x:-40%; } .navdrop-panel--art-features .navdrop-cols { max-width:70%; } .navdrop-panel.navdrop-panel--art-features::before { /* Straight across, not on a slant. The diagonal cut put a leaning wedge of white over the lower left of the photograph and the owner asked for it cut straight (7 Sep 2026). The ramp still runs past the panel edge so no stop lands anywhere you can see it. */ background:linear-gradient(90deg, var(--navdrop-scrim-strong) 0%, var(--navdrop-scrim-strong) 66%, color-mix(in srgb,var(--navdrop-scrim-strong) 62%,transparent) 74%, color-mix(in srgb,var(--navdrop-scrim-soft) 55%,transparent) 84%, transparent 99%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navdrop-panel--art-features { background-image:url(nav/features-menu-dark.webp?v=20260907d); } } :root[data-theme="dark"] .navdrop-panel--art-features { background-image:url(nav/features-menu-dark.webp?v=20260907d); } .navdrop-panel--art-resources { width:min(960px,calc(100vw - 28px)); min-width:min(960px,calc(100vw - 28px)); min-height:310px; background-image:url(nav/resources-care-team-v3-light.webp?v=20260907d); background-position:right center; } .navdrop-panel--art::before { content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; /* The white has to stop before she does, not fade across her. The soft stop used to sit at 72% with the wash only clearing at 92%, which put a veil over her coat and face -- she looked washed out rather than lit. The links end at about 53% of the panel, so the cover holds solid to 52%, gives up over the next few percent, and is gone by 64%. Nothing is painted over the photograph. */ background:linear-gradient(100deg, var(--navdrop-scrim-strong) 0%, var(--navdrop-scrim-strong) 52%, var(--navdrop-scrim-soft) 58%, transparent 64%); } .navdrop-panel--art-resources::before { background:linear-gradient(96deg, var(--navdrop-scrim-strong) 0%, var(--navdrop-scrim-strong) 70%, var(--navdrop-scrim-soft) 80%, transparent 100%); } .navdrop-panel--art-who::before { background:linear-gradient(96deg, var(--navdrop-scrim-strong) 0%, var(--navdrop-scrim-strong) 64%, var(--navdrop-scrim-soft) 71%, transparent 80%); } .navdrop-panel--art > * { position:relative; z-index:1; } /* Text over a photograph needs more contrast than text over a flat surface, even with a scrim: the eye is competing with detail behind it. On the art panels the links go to full ink and the column headings drop their opacity dimming, so 'Behavioral health' reads as solidly as the heading above it. */ .navdrop-panel--art a { color:var(--ink); font-weight:400; } /* --ink, matching the flat panels. This was --ink-2 when the base rule below was --ink-3 at 75% opacity, so it was the darker of the two. The base went to full ink on 31 Aug, which left the art panel's headings the lighter ones -- backwards, and against the request that made the base darker in the first place. */ .navdrop-panel--art .navdrop-group { color:var(--ink); opacity:1; } .navdrop-panel--art .navdrop-promo p { color:var(--ink-2); } /* The links stay on the empty half. Stretching two columns across the whole panel would put the second one over her coat, and no amount of scrim makes small text on a photograph as easy to read as small text on a surface. */ .navdrop-panel--art.navdrop-panel--c2 .navdrop-cols { grid-template-columns:minmax(166px,1fr) minmax(190px,1.12fr); gap:2px 20px; max-width:382px; } .navdrop-panel--art-who .navdrop-cols { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 14px; max-width:650px; } .navdrop-panel--art-who .navdrop-cols a { white-space:normal; overflow-wrap:anywhere; } /* The promo marker establishes the left edge of this directory. Its column rows previously kept the generic 12px item inset, so every heading and link started to the right of that marker. Align the directory to the marker; the mobile accordion restores its own touch-target padding below. */ /* One indent across every wide menu, so the three panels line up with each other rather than at 0px, 4px and 12px (7 Sep 2026). */ .navdrop-panel--c3 .navdrop-cols a, .navdrop-panel--c4 .navdrop-cols a { font-size:15.5px; } .navdrop-panel--c3 .navdrop-group, .navdrop-panel--c3 .navdrop-cols a, .navdrop-panel--c4 .navdrop-group, .navdrop-panel--c4 .navdrop-cols a { padding-left:0; } .navdrop-promo.navdrop-promo--text { grid-template-columns:1fr; padding-left:0; } .navdrop-promo--text .navdrop-promo-title { padding-left:0; } .navdrop-panel--art .navdrop-promo.navdrop-promo { max-width:340px; border-bottom-color:var(--navdrop-rule); } .navdrop-panel--art-who .navdrop-promo.navdrop-promo { max-width:650px; } /* The Features intro was inheriting the 340px cap, so it ran to four lines and pushed the three columns 45px further down than the same columns in Who it's for. It gets the width the columns below it already use (7 Sep 2026). This has to stay after the --art rule above: same specificity, so the file order is what decides which one wins. */ .navdrop-panel--art-features .navdrop-promo.navdrop-promo { max-width:70%; } :root { /* Opaque, not nearly opaque. At 96% the photograph's blue still tinted the panel behind the words, so the half a reader reads was a wash rather than the plain surface every other menu has. It is the surface colour exactly, so the lit half and the picture half meet without a seam. */ --navdrop-scrim-strong:#ffffff; --navdrop-scrim-soft:rgba(255,255,255,.62); --navdrop-rule:rgba(15,23,42,.14); } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --navdrop-scrim-strong:#141c40; --navdrop-scrim-soft:rgba(20,28,64,.62); --navdrop-rule:rgba(255,255,255,.16); } :root:not([data-theme="light"]) .navdrop-panel--art-who { background-image:url(nav/who-its-for-menu-dark.webp?v=20260907d); } :root:not([data-theme="light"]) .navdrop-panel--art-resources { background-image:url(nav/resources-care-team-v3-dark.webp?v=20260907d); } } :root[data-theme="dark"] { --navdrop-scrim-strong:#141c40; --navdrop-scrim-soft:rgba(20,28,64,.62); --navdrop-rule:rgba(255,255,255,.16); } :root[data-theme="dark"] .navdrop-panel--art-who { background-image:url(nav/who-its-for-menu-dark.webp?v=20260907d); } :root[data-theme="dark"] .navdrop-panel--art-resources { background-image:url(nav/resources-care-team-v3-dark.webp?v=20260907d); } .navdrop-cols { display:grid; gap:2px 24px; } .navdrop-panel--c2 .navdrop-cols { grid-template-columns:repeat(2,minmax(150px,1fr)); } .navdrop-panel--c3 .navdrop-cols { grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr); gap:2px 24px; } .navdrop-panel--c3 .navdrop-cols a { white-space:normal; overflow-wrap:anywhere; } /* Features is the only flat three-column directory. Its first column sits beneath the left edge of the promo mark; the generic 12px row inset made the words look visibly stepped to the right of that edge. */ .navdrop-panel--c3:not(.navdrop-panel--art) .navdrop-col:first-child .navdrop-group, .navdrop-panel--c3:not(.navdrop-panel--art) .navdrop-col:first-child a { padding-left:4px; } .navdrop-panel--art-resources .navdrop-cols { max-width:640px; } .navdrop-panel--art-resources .navdrop-cols a { white-space:normal; } .navdrop-col { min-width:0; } /* The promo: what this menu is about, with a look at the product. */ .navdrop-promo { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:center; padding:0 0 16px; margin-bottom:16px; border-bottom:1px solid var(--border); } /* The app mark, not a screenshot. A screenshot shrunk to thumbnail size is a grey rectangle -- it shows there is a product without showing what it does, which is the worst of both. */ /* Two shapes of promo. Features carries the LogBlues mark; Who it's for carries a photograph, because a specialty is a room full of people and a logo says nothing about which one. */ .navdrop-promo-mark { width:42px; height:51px; display:block; margin:0 auto; color:var(--ink); } .navdrop-promo-photo { width:58px; height:58px; display:block; object-fit:cover; border-radius:10px; border:1px solid var(--border); } /* The overview link, top right of the summary. It used to be a row of its own above the columns, where it read as one more feature rather than the way out to all of them. */ .navdrop-promo { position:relative; } .navdrop-promo-title { display:inline-flex; align-items:center; min-height:0; padding:0; border-radius:4px; font-size:16px; line-height:1.3; font-weight:500; color:var(--ink); text-decoration:none; } .navdrop-promo-title:hover { background:transparent; color:var(--accent); text-decoration:none; } /* Standard menu-link blue, same as Features and Resources; the purple read too dark on the navy panel. Hover goes to the page's text colour. */ .navdrop-panel--art-who .navdrop-promo-title { color:var(--accent); } .navdrop-panel--art-who .navdrop-promo-title:hover, .navdrop-panel--art-who .navdrop-promo-title:focus-visible { color:var(--ink); } /* Same light blue as every other menu link; hover goes to the page's text colour (white in dark mode). The old hard-coded green matched nothing. */ .navdrop-panel[id="submenu-features"] .navdrop-promo-title { color:var(--accent); } .navdrop-panel[id="submenu-features"] .navdrop-promo-title:hover, .navdrop-panel[id="submenu-features"] .navdrop-promo-title:focus-visible { color:var(--ink); } .navdrop-panel--art-resources .navdrop-promo-title { color:var(--accent); } .navdrop-promo-title:focus-visible { background:transparent; outline:2px solid var(--accent); outline-offset:3px; } /* Only where the link actually sits. Applied to every promo it squeezed the Who-it's-for summary into a two-line heading for a link that menu does not have. */ .navdrop-promo--linked > div { padding-right:0; } .navdrop-promo-star { width:43px; height:43px; display:block; margin:0 auto; color:var(--accent); filter:none; } .navdrop-panel--art.navdrop-panel--art-resources .navdrop-promo.navdrop-promo { max-width:640px; } .navdrop-promo strong { display:block; font-size:16px; line-height:1.3; } .navdrop-promo p { margin:5px 0 0; font-size:15px; line-height:1.5; color:var(--ink-3); } .navdrop-group { margin:0 0 6px; padding:0 12px; /* Directory labels describe the links beneath them; they should not compete with those links or collide across the three-column menu. */ font-size:12px; line-height:1.25; font-weight:800; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; color:var(--ink); } /* The top heading of EVERY column, not just the first one -- otherwise the second column's heading sits 9px lower than its neighbour and the two lists start on different lines. */ .navdrop-col > .navdrop-group:first-child { margin-top:0; } .navdrop-note { margin:0 0 10px; padding:0 12px; color:var(--ink-2); font-size:15px; line-height:1.55; } .specialty-group { margin-top:46px; } .specialty-group:first-of-type { margin-top:30px; } .specialty-group > .eyebrow { margin-bottom:14px; } .specialty-more { margin-top:42px; } @media (max-width:1100px) { :root { --md-menu-item-min-height:48px; } /* Mobile uses a real disclosure button beside the overview link. The panel stays out of layout until that button opens it; desktop hover/focus rules above remain unchanged. */ .navdrop-panel { display:none; } .navdrop-caret { display:none; } } /* -------------------------------------------------- the opening of a page */ /* .band is itself a
, so it was taking the generic `section` padding AND the padding on `.band .wrap` underneath it -- 64+64 on desktop, 56+56 on a phone. That put ~112px of dead space above the first line of every band, which is most of a phone's first screen spent on nothing. The .wrap padding is the deliberate one (it carries the horizontal and bottom values too), so the section's own padding goes. */ .band { border-bottom:1px solid var(--border); padding:0; } .band .wrap { padding:64px 24px 58px; } /* The homepage band for the insurance guide: the one place the site points away from its own funnel and at something we give away, so it is tinted to read as an announcement rather than as another section (7 Sep 2026). */ /* No tinted band: the panels themselves carry the emphasis, and a grey stripe across the homepage flattened everything around it (owner, 7 Sep 2026: "that kills our whole design"). */ .band--guide { background:transparent; } .band--guide .wrap { padding:50px 24px 48px; } .band--guide h2 { margin:0 0 14px; max-width:none; } .band--guide p { max-width:64ch; } .band--guide .guide-free { margin-top:16px; font-weight:600; } /* Two panels: the guide we give away, and the trial that is twice the usual length (owner, 7 Sep 2026). They stack on a phone. */ .guidepair { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; } .guidepair-box { position:relative; padding:26px 26px 22px; background:var(--surface); /* No border: the tile is white on the page's grey ground, which is how the example does it. The shadow is almost nothing -- just enough to lift the white off the grey (7 Sep 2026). */ border-radius:20px; border:0; box-shadow:0 1px 2px rgba(11,15,14,.04); transition:transform .2s ease, box-shadow .2s ease; } .guidepair-box:hover { transform:translateY(-2px); box-shadow:0 2px 6px rgba(11,15,14,.07), 0 20px 40px -30px rgba(11,15,14,.34); } .guidepair-box p.eyebrow { color:var(--ink-3); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; margin:0 0 8px; } /* The offer box: the number is the message, so it is set big, and the software sits under it on four screens (owner, 7 Sep 2026). */ .guidepair-box p.offer-big { margin:0 0 12px; font-size:clamp(26px,2.7vw,36px); font-weight:600; white-space:nowrap; line-height:1.02; letter-spacing:-.028em; color:var(--ink); } .guidepair-box p.offer-big span { color:var(--good); } ul.offer-facts { list-style:none; margin:0 0 6px; padding:0; } .guidepair-box ul.offer-facts li { position:relative; padding-left:22px; margin:0 0 7px; font-size:16.5px; line-height:1.5; color:var(--ink-2); } ul.offer-facts li::before { content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:2px; background:var(--good); } /* One image, not a CSS device stack: the rig is built for a hero and at tile size its monitor came out 74px and its phone a 19px sliver (7 Sep 2026). */ .guidepair-box--offer { position:relative; overflow:hidden; padding-bottom:0; } /* The artwork follows the link in flow, so only the link carries the vertical nudge -- moving both shifted the picture twice and opened a gap that was not there (8 Sep 2026). */ .offer-shot { display:block; margin:12px -26px 0; } .offer-shot img { width:100%; height:auto; display:block; } /* The in the markup follows the operating system, but the tile it sits in follows the site's own theme toggle. A visitor on a dark OS reading the site in light mode got the dark line-up inside a white card (7 Sep 2026). These two rules pick the variant from the same signal the card uses. Both images carry a transparent ground as well, so the card colour is always the background either way. Cache note: these URLs are not versioned by bust_cache, which only rewrites references in HTML -- rename the file if its artwork ever changes. */ :root[data-theme="light"] .offer-shot img { content:url("app/lineup-light.webp"); } :root[data-theme="dark"] .offer-shot img { content:url("app/lineup-dark.webp"); } .guidepair-box--offer .guide-free { /* Bleeds to the same edges as the artwork, so "centre" means the centre of the picture and not of the narrower text column. 15px higher than it was (owner, 8 Sep 2026). */ /* Side bleed only. The vertical position and the padding are set at the bottom of this file, after the two later rules that share this selector's specificity and were winning on order. */ margin-left:-26px; margin-right:-26px; text-align:center; } /* The guide box has less to say, so it stretches to finish level with the offer beside it. */ .guidepair-box { display:flex; flex-direction:column; } .guidepair-box .guide-free { margin-top:auto; } .guidepair-box--offer .offer-rig { margin-top:14px; } /* The free-guide tile carries a picture in the band that was empty. "No sign-up, no email" is pushed to the bottom so both tiles finish level, which left a gap under the paragraph (owner, 8 Sep 2026). The picture takes the automatic margin instead, so the gap closes above it and the line below sits where it always did. Full bleed to the card edges, like the offer. */ .guide-shot { display:block; margin:16px -26px 0; } .guide-shot img { width:100%; height:auto; display:block; } /* The auto margin pushes the picture to the bottom of the tile, and when the paragraph above grows there is no slack left for it to be -- so the last line of text ended up touching the top of the photograph (owner, 8 Sep 2026). The padding is a gap the auto margin cannot eat. */ .guidepair-box--guide .guide-shot { margin-top:auto; padding-top:20px; } .guidepair-box--guide .guide-free { margin-top:14px; } /* A quiet aside under a lede: the reason a decision changed, told plainly. Smaller and greyer than body text because it is context, not the pitch (themes page, 8 Sep 2026). */ .note-line { margin:14px 0 0; font-size:15px; line-height:1.65; color:var(--ink-3); border-left:2px solid var(--border); padding-left:14px; } /* A daylit photograph sits hot on a dark card, the same way the product screenshots do. Same treatment they get. */ :root[data-theme="dark"] .guide-shot img { filter:brightness(.88) contrast(1.02); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide-shot img { filter:brightness(.88) contrast(1.02); } } @media (prefers-reduced-motion: reduce) { .guidepair-box:hover { transform:none; } } .guidepair-box h2 { font-size:26px; margin:0 0 12px; max-width:26ch; } .guidepair-box p { font-size:16.5px; line-height:1.55; margin:0; } @media (max-width:860px) { .guidepair { grid-template-columns:1fr; gap:16px; } } section { padding:64px 0; } section + section { border-top:1px solid var(--border); } /* ------------------------------------------------------------------- type */ .eyebrow { font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; } /* 600 not 700: Inter Bold is heavier than the semibold Apple sets display type in, and the old -.035em tracking was measured against semi-condensed Manrope -- in Inter it collides (7 Sep 2026). */ h1 { font-weight:600; font-size:clamp(30px,4.2vw,42px); line-height:1.06; letter-spacing:-.021em; color:var(--ink); margin:0; max-width:24ch; text-wrap:balance; } h2 { font-size:clamp(24px,3.4vw,34px); font-weight:600; line-height:1.14; letter-spacing:-.017em; color:var(--ink); margin:0 0 14px; max-width:30ch; text-wrap:balance; } h3 { font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-.008em; color:var(--ink); margin:0 0 6px; } /* The splash, applied. Eyebrows carry the colour so each section announces itself, and a card marks its subject with one small square. Two things only -- the moment a third element takes colour, the page starts shouting. */ .eyebrow.c-brand { color:var(--brand); } .eyebrow.c-leaf { color:var(--leaf); } .eyebrow.c-plum { color:var(--plum); } .eyebrow.c-rose { color:var(--rose); } .card.mark h3 { display:flex; align-items:flex-start; gap:10px; } .card.mark h3::before { content:""; width:10px; height:10px; border-radius:3px; margin-top:.42em; background:var(--dot,var(--accent)); flex:0 0 auto; } .card.c-brand { --dot:var(--brand); } .card.c-leaf { --dot:var(--leaf); } .card.c-plum { --dot:var(--plum); } .card.c-rose { --dot:var(--rose); } /* --leaf is blue despite its name; --good is the palette's green. */ .card.c-green { --dot:var(--good); } /* The three words a clinic mixes up, colour-coded so the page can point back at them: payer blue, clearinghouse green, the credentialing trio magenta (owner, 7 Sep 2026). */ .w-payer { color:var(--brand); font-weight:600; } .w-clearing { color:var(--good); font-weight:600; } .w-cred { color:var(--rose); font-weight:600; } /* Section headings on a long reference take a colour each, so the eye can find its way back to a part of the page (owner, 7 Sep 2026). Only used on the insurance guide; a page with five sections does not need it. */ h2.hc-brand { color:var(--brand); } h2.hc-leaf { color:var(--leaf); } h2.hc-plum { color:var(--plum); } h2.hc-rose { color:var(--rose); } h2.hc-green { color:var(--good); } h2.hc-accent { color:var(--accent); } /* On this trio only, the heading takes its mark colour too. */ .cards--trio .card.c-brand h3 { color:var(--brand); } .cards--trio .card.c-green h3 { color:var(--good); } .cards--trio .card.c-rose h3 { color:var(--rose); } /* No character cap on running text: every layout already sets its own measure, and the cap cut prose short of the blocks beside it on the wide pages (7 Sep 2026). */ /* No single word left alone on a last line. */ p { margin:0 0 16px; text-wrap:pretty; } p:last-child { margin-bottom:0; } .lede { font-size:clamp(17px,2.1vw,20px); color:var(--ink-2); margin:22px 0 0; text-wrap:pretty; } /* A new subsection inside the same section needs the same readable break whether it follows prose or a list. Previously a paragraph contributed only 16px and ul.facts contributed no bottom space at all, so headings could sit against the previous sentence or final bullet. Classless paragraphs are the site's running copy; labelled UI/eyebrow paragraphs keep their component-specific compact spacing. Article headings already use a more specific 44px rule below. */ p:not([class]) + h2, ul + h2, /* Room above a heading that follows content. Labels are excluded on purpose: a p.eyebrow, p.badge, span.meta or a step number belongs tight against the heading it introduces (7 Sep 2026). */ ol + h2, ul + h2, .faq + h2, .cards + h2, ul.steps + h2, .matrix-wrap + h2, p:not([class]) + h2 { margin-top:40px; } ol + h3, ul + h3, .faq + h3, .cards + h3, ul.steps + h3, .matrix-wrap + h3, p:not([class]) + h3 { margin-top:32px; } /* A quiet aside inside a narrow column. The class was written into services.html and never styled, so it rendered as plain body text with no room under it and the next heading landed on top of it (owner, 7 Sep 2026: "personal space"). */ .callout { margin:28px 0 38px; padding:18px 20px; border:1px solid var(--border); border-left:3px solid var(--brand); border-radius:12px; background:var(--raised); } .callout p { margin:0; color:var(--ink-2); } .callout p + p { margin-top:10px; } /* The same gap when running copy follows a list. ul.facts carries a top margin and no bottom one, so the sentence after the last bullet sat almost against it (owner, 4 Sep 2026: "there is a spacing problem right here"). */ ul.facts + p:not([class]), ul.facts + p.lede { margin-top:24px; } /* ---------------------------------------------------------------- actions */ .cta { display:inline-block; margin-top:28px; font-size:16px; font-weight:600; color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:3px; } .cta:hover { text-decoration:none; color:var(--ink); border-bottom-color:var(--ink); } .cta.second { margin-left:26px; color:var(--ink-2); border-bottom-color:var(--grid); } .pill { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--good); border:1px solid rgba(10,124,92,.28); border-radius:999px; padding:4px 12px; margin-bottom:16px; } .pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--good); } /* On the scenario pages the pill sits straight under the h1 with only the heading's own margin between them, so the badge crowded the last line of a two-line headline. It only needs room above when it follows a heading. */ h1 + .pill, h2 + .pill { margin-top:14px; } /* ---------------------------------------------- the App Store button pill */ .get { display:inline-flex; align-items:center; justify-content:center; min-width:92px; padding:9px 22px; border-radius:999px; background:var(--accent); color:#fff; font-size:15px; font-weight:600; letter-spacing:.01em; border:0; cursor:pointer; box-shadow:0 7px 18px -12px color-mix(in srgb,var(--accent) 72%,transparent); transition:background-color .30s cubic-bezier(.22,1,.36,1), color .30s cubic-bezier(.22,1,.36,1), box-shadow .30s cubic-bezier(.22,1,.36,1), transform .30s cubic-bezier(.22,1,.36,1); } .get:hover { text-decoration:none; color:#fff; background:color-mix(in srgb,var(--accent) 84%,#fff); box-shadow:0 14px 28px -15px color-mix(in srgb,var(--accent) 88%,transparent); transform:translateY(-2px) scale(1.015); } .get:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 42%,#fff); outline-offset:4px; } .get:active { transform:translateY(0) scale(.98); } /* Plan buttons take the plan's own colour (owner, 3 Sep 2026): Premium rose, Enterprise plum. The button reads its colour from --accent, so a local override is the whole change: hover, shadow and focus ring follow. */ .get.rose { --accent:var(--rose); } .get.plum { --accent:var(--plum); } .get.ghost { background:rgba(255,255,255,.22); backdrop-filter:blur(8px); color:#fff; } .get.ghost:hover { background:rgba(255,255,255,.32); } /* The inverted button (owner, 5 Sep 2026): the secondary action is an outline in the page's ink -- black border and black text on light, white on dark -- never a solid black pill. Hover fills it, which is the old look as the pressed state. --ink is black in light mode and white in dark, so one rule serves both. */ .get.soft { background:transparent; color:var(--ink); border:1.5px solid var(--ink); box-shadow:none; } /* Filling solid black on hover matched nothing else on the site. It takes the accent, like every other button (7 Sep 2026). */ .get.soft:hover { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 12px 24px -16px color-mix(in srgb,var(--accent) 80%,transparent); } /* A primary button following reading content needs its own row of air. Keep this structural rather than putting margin on every .get: buttons inside forms, cards and action groups already manage their own spacing. */ :where(p, ul, ol, .facts) + .get { margin-top:24px; } /* ------------------------------------------------------- the product head */ /* Icon, name, one line, and a way in -- the top of an App Store page. */ .producthead { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; } .producthead .iconwrap { position:relative; display:inline-grid; place-items:center; } .producthead .blues-icon-interactive::before, .producthead .blues-icon-interactive::after { position:absolute; z-index:2; pointer-events:none; color:var(--brand); line-height:1; opacity:.88; text-shadow:0 3px 12px color-mix(in srgb,var(--brand) 34%,transparent); transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .24s ease, color .24s ease; } .producthead .blues-icon-interactive::before { content:"♪"; font-size:20px; right:-13px; top:3px; transform:rotate(9deg); } .producthead .blues-icon-interactive::after { content:"♫"; font-size:15.5px; right:3px; top:-15px; color:var(--leaf); transform:rotate(-9deg); } .producthead .blues-icon-interactive:hover::before, .producthead .blues-icon-interactive:focus-visible::before { opacity:1; color:var(--plum); transform:translate(8px,-9px) rotate(17deg) scale(1.15); } .producthead .blues-icon-interactive:hover::after, .producthead .blues-icon-interactive:focus-visible::after { opacity:1; color:var(--brand); transform:translate(-4px,-8px) rotate(-17deg) scale(1.12); } .producthead .blues-icon-interactive:hover .appicon, .producthead .blues-icon-interactive:focus-visible .appicon { transform:translateY(-2px) rotate(-2deg); } .producthead .blues-icon-interactive .appicon { transition:transform .42s cubic-bezier(.22,1,.36,1), filter .3s ease; } /* THE SHADOW HAS TO FOLLOW THE ARTWORK, NOT THE BOX. All three product icons are shaped PNGs with transparent corners, and Blues is a full circle. A box-shadow is drawn around the element's rounded-square border box regardless of what is painted inside it, so a circular icon came with a square halo hanging off its four corners -- read on screen as the icon being broken. filter: drop-shadow() reads the alpha channel instead, so the shadow traces the circle on Blues and the rounded square on the other two, from one rule and with no per-image class to forget. Two stacked drop-shadows rather than one, for the same reason the old box-shadow had two layers: a tight contact shadow that seats the icon, and a wide soft one that lifts it. */ .appicon { width:104px; height:104px; border-radius:23px; display:block; filter:drop-shadow(0 1px 2px rgba(11,15,14,.10)) drop-shadow(0 12px 20px rgba(11,15,14,.26)); } /* On a near-black page a near-black shadow is invisible, so dark mode gets its own weights. Both dark states are covered: the media query for a phone set to dark, and the explicit toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appicon { filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 14px 24px rgba(0,0,0,.7)); } } :root[data-theme="dark"] .appicon { filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 14px 24px rgba(0,0,0,.7)); } .appicon.sm { width:52px; height:52px; border-radius:12px; } .producthead h1 { font-size:clamp(30px,4.2vw,42px); margin:0 0 4px; max-width:20ch; } /* matches the site h1: this used to cap at 44px, so the four pages using .producthead had a smaller headline than everywhere else. */ .producthead .sub { font-size:18px; color:var(--ink-3); margin:0; } .producthead .row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:16px; } .producthead .meta { font-size:14px; color:var(--ink-3); } /* ------------------------------------------------------ the feature cards */ /* The shop window. A picture, a short line, and the app underneath. */ .features { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; margin-top:40px; } .today { position:relative; display:block; border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); color:inherit; text-decoration:none; min-height:430px; transition:box-shadow .2s ease, transform .2s ease; } .today:hover { text-decoration:none; box-shadow:var(--shadow-lift); transform:translateY(-3px); } @media (prefers-reduced-motion: reduce) { .today:hover { transform:none; } } .today .art { position:absolute; inset:0 0 92px 0; overflow:hidden; } .today .art img { width:100%; height:100%; object-fit:cover; display:block; } /* Text sits on the picture, so the picture is damped only where the words are -- strong at the top, heaviest at the bottom edge. Same rule the app follows: protect the text, not the whole image. */ .today .art::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(6,10,20,.10) 0%, rgba(6,10,20,.30) 46%, rgba(6,10,20,.80) 100%); } .today .copy { position:absolute; left:0; right:0; bottom:92px; padding:0 24px 22px; color:#fff; } .today .copy .eyebrow { color:rgba(255,255,255,.86); margin:0 0 8px; } .today .copy h3 { color:#fff; font-size:clamp(23px,2.5vw,29px); font-weight:700; letter-spacing:-.024em; line-height:1.12; margin:0 0 7px; max-width:17ch; text-wrap:balance; } .today .copy p { color:rgba(255,255,255,.9); font-size:15.5px; margin:0; max-width:40ch; } /* The app row: icon, name, tagline, View. Sits on the surface, not the art. */ .today .app { position:absolute; left:0; right:0; bottom:0; height:92px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:0 20px; background:var(--surface); border-top:1px solid var(--border); } .today .app .name { font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.25; } .today .app .tag { font-size:14px; color:var(--ink-3); line-height:1.3; } .today .app .view { padding:7px 20px; border-radius:999px; background:var(--raised); color:var(--accent); font-size:14px; font-weight:600; border:1px solid var(--border); } .today:hover .app .view { background:var(--accent); color:#fff; border-color:var(--accent); } /* ------------------------------------------------------------------ cards */ .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin:40px 0 34px; } .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px; box-shadow:var(--shadow); } .card p { font-size:15.5px; color:var(--ink-3); margin:0; } .card p + p { margin-top:10px; } a.product { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); color:inherit; text-decoration:none; transition:box-shadow .18s ease, transform .18s ease; } a.product:hover { text-decoration:none; box-shadow:var(--shadow-lift); transform:translateY(-2px); } @media (prefers-reduced-motion: reduce) { a.product:hover { transform:none; } } .product .pad { padding:28px 28px 30px; } .product .shot { width:100%; height:260px; object-fit:cover; object-position:left top; display:block; border-top:1px solid var(--border); } .product .go { color:var(--accent); font-weight:600; font-size:15.5px; margin-top:16px; display:block; } /* Patient Privacy closes with a short index to the security page, the policy and the terms -- the three things a reader who got that far goes looking for next. They are cards rather than a link list because the one-line summary is what stops it being three identical blue links, and a card is already how this site offers a choice. Same shell as .card, made clickable. */ a.doclink { display:block; color:inherit; text-decoration:none; transition:box-shadow .18s ease, transform .18s ease; } a.doclink:hover { text-decoration:none; box-shadow:var(--shadow-lift); transform:translateY(-2px); } a.doclink:focus-visible { outline:3px solid var(--brand); outline-offset:3px; } a.doclink strong { display:block; font-size:18px; letter-spacing:-.015em; margin-bottom:8px; } @media (prefers-reduced-motion: reduce) { a.doclink:hover { transform:none; } } /* ------------------------------------------------------- product showcase */ /* A horizontal strip that snaps. Each shot sits in the app-window frame so the artwork themes read as the product rather than as page decoration. */ .showcase { display:grid; grid-auto-flow:column; grid-auto-columns:min(760px,88vw); gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0 14px; margin-top:36px; scrollbar-width:thin; } .showcase figure { margin:0; scroll-snap-align:center; } .showcase .window { border-radius:16px; } .showcase .screen img { width:100%; height:auto; display:block; } .showcase figcaption { padding:14px 18px; border-top:1px solid var(--border); background:var(--raised); font-size:14.5px; color:var(--ink-3); } .showcase figcaption strong { color:var(--ink-2); font-weight:600; } .showhint { font-size:14px; color:var(--ink-3); margin-top:10px; } /* --------------------------------------------------- the screenshot strip */ /* ------------------------------------------------- copy left, art right */ .split { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; } /* The marker is positioned rather than laid out as a grid column. A grid row would make every inline child its own grid item, so a list item containing plus trailing text broke into one word per line. */ ul.facts { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px; } ul.facts li { position:relative; padding-left:28px; font-size:15.5px; line-height:1.6; color:var(--ink-3); } ul.facts li::before { content:""; position:absolute; left:1px; top:8px; width:9px; height:9px; border-radius:50%; background:var(--leaf); } /* Green, blue, violet, repeating. */ ul.facts li:nth-child(3n+2)::before { background:var(--brand); } ul.facts li:nth-child(3n+3)::before { background:var(--plum); } ul.facts li strong { color:var(--ink-2); font-weight:600; } /* Facts kept clear of the artwork. The hero facts span the whole band, which is fine over a quiet painting and not fine over a photograph: on the failsafes page the third fact sat on top of the laptop and could not be read (7 Sep 2026). This keeps them on the copy side, where the hero mask has already faded the picture out. */ ul.facts--copyside { display:grid; max-width:min(56%, 660px); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } @media (max-width:900px) { ul.facts--copyside { max-width:none; } /* The hero lede carries a manual break so its second sentence starts clear of the artwork (owner, 7 Sep 2026). Below this width there is no artwork beside it and the break would only make a short line. */ .hero-band .lede br { display:none; } } /* --------------------------------------------------------- the app window */ .window { margin:0; padding:0; border-radius:var(--r); overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lift); } .chrome { display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--raised); border-bottom:1px solid var(--border); } .chrome span { width:10px; height:10px; border-radius:50%; background:var(--grid); } .screen img { width:100%; height:auto; display:block; } .window.bare picture, .window.bare picture img { width:100%; } /* display stays with the theme classes: this selector outranked .darkonly and painted both device plates, light on top of dark, in light mode (owner, 3 Sep). */ .window.bare picture img:not(.lightonly):not(.darkonly) { display:block; } .blues-theme-pair { display:flex; flex-direction:column; gap:12px; } .blues-theme-pair img { display:block; width:100%; height:auto; border-radius:16px; } .blues-device-light { order:1; } .blues-device-dark { order:2; } :root[data-theme="dark"] .blues-device-dark { order:1; } :root[data-theme="dark"] .blues-device-light { order:2; } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .blues-device-dark { order:1; } :root:not([data-theme="light"]) .blues-device-light { order:2; } } /* -------------------------------------------------- getting-started guide */ .getting-steps { display:grid; gap:22px; margin-top:34px; } /* Two parts text, one part picture (owner, 20 September 2026). The step was one column while there was nothing to put beside it; the illustrations put something there. Always text then picture, never alternating. The old CSS swapped sides on even steps, which suits equal halves and reads as a broken grid at 2:1 -- the eye loses the left edge it has been following down twelve cards. */ .getting-step { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:center; gap:clamp(22px,4vw,56px); overflow:hidden; padding:clamp(22px,3vw,36px); border:1px solid var(--border); border-radius:24px; background:var(--raised); box-shadow:var(--shadow-soft); } .getting-step-number { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:14px; border-radius:50%; background:color-mix(in srgb,var(--accent) 14%,var(--raised)); color:var(--accent); font-size:14px; font-weight:800; letter-spacing:.08em; } .getting-step h3 { margin:0 0 10px; } .getting-step p { margin:0; color:var(--ink-2); } .getting-step-screen { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--page); box-shadow:0 18px 42px rgba(10,20,48,.14); } .getting-step-screen img { display:block; width:100%; height:auto; } /* Each step ships both tones and CSS chooses, so the picture follows the page in all three states: the reader picked light, the reader picked dark, or the reader picked nothing and their system decides. A with a prefers-color-scheme source would only answer the third -- it cannot see the site's own theme toggle, so a reader who switched by hand would get a white illustration on a dark page. */ .step-shot-dark { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step-shot-light { display:none; } :root:not([data-theme="light"]) .step-shot-dark { display:block; } } :root[data-theme="dark"] .step-shot-light { display:none; } :root[data-theme="dark"] .step-shot-dark { display:block; } :root[data-theme="light"] .step-shot-light { display:block; } :root[data-theme="light"] .step-shot-dark { display:none; } @media (max-width:980px) { /* Below a laptop the picture column is too narrow to read, so the step stacks: words first, illustration under them. */ .getting-step { grid-template-columns:minmax(0,1fr); align-items:start; } .getting-step-screen { max-width:520px; } } @media (max-width:760px) { .getting-step { padding:18px; } } figcaption { padding:14px 18px; border-top:1px solid var(--border); background:var(--raised); font-size:13.5px; color:var(--ink-3); } /* --------------------------------------------------------------- security */ .security { display:grid; grid-template-columns:64px 1fr; gap:26px; align-items:start; } .shield { width:64px; height:64px; display:block; } .security ul { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px 26px; } .security li { font-size:15px; color:var(--ink-3); padding-left:16px; position:relative; } .security li::before { content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background:var(--leaf); } .security li:nth-child(3n+2)::before { background:var(--brand); } .security li:nth-child(3n+3)::before { background:var(--plum); } /* --------------------------------------------------------- layers + rows */ .layers { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:0; } .layers li { display:grid; grid-template-columns:150px 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--border); font-size:15.5px; color:var(--ink-3); } .layers li:last-child { border-bottom:1px solid var(--border); } .layers .who { font-size:15px; font-weight:600; color:var(--ink); } .status { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:0; } .status li { display:grid; grid-template-columns:104px 1fr; gap:20px; align-items:baseline; padding:15px 0; border-top:1px solid var(--border); font-size:15.5px; color:var(--ink-3); } .status li:last-child { border-bottom:1px solid var(--border); } .status .tag { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .status .now { color:var(--good); } .status .next { color:var(--accent); } .status .later { color:var(--ink-3); } .status strong { color:var(--ink); font-weight:600; } /* --------------------------------------------------------- price cards */ .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:38px; align-items:stretch; } /* The 38px above separates the grid from a heading. On pricing.html the grid is the first thing in its section, so that margin stacked on top of the band's 52px bottom padding and the section's 56px top padding -- 146px of nothing between the lede and the first plan, which reads as a broken page on a phone rather than as breathing room. */ .wrap > .plans:first-child { margin-top:0; } .plan { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 26px 30px; box-shadow:var(--shadow); display:flex; flex-direction:column; } /* The featured plan used to take a blue border, rgba(49,98,216,.35). Two problems with that: it did not match the grey border every other card has, which is what the owner spotted; and the value was hard-coded rather than a token, so the LIGHT theme's brand blue was painted in dark mode as well. The card is already marked out by its "Most practices" badge and the deeper shadow, so the border can simply be the same as everyone else's. */ .plan.featured { box-shadow:var(--shadow-lift); } .plan .badge { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); margin:0 0 12px; } .plan h3 { font-size:19px; margin:0 0 4px; } .plan .who { font-size:14px; color:var(--ink-3); margin:0 0 18px; } .plan .price { font-size:38px; font-weight:700; letter-spacing:-.035em; color:var(--ink); line-height:1; margin:0; font-variant-numeric:tabular-nums; } .plan .per { font-size:14.5px; color:var(--ink-3); margin:7px 0 20px; } .plan ul { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; } .plan li { position:relative; padding-left:26px; font-size:15px; line-height:1.55; color:var(--ink-3); } .plan li::before { content:""; position:absolute; left:1px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--leaf); } .plan li:nth-child(3n+2)::before { background:var(--brand); } .plan li:nth-child(3n+3)::before { background:var(--plum); } .plan li strong { color:var(--ink-2); font-weight:600; } .plan .foot { margin-top:auto; } .pricing-compare-link { max-width:none; margin:26px 0 0; text-align:center; font-size:18px; font-weight:600; } /* ------------------------------------------------------ comparison grid */ .matrix-wrap { overflow-x:auto; margin-top:34px; margin-bottom:30px; } table.matrix { border-collapse:collapse; table-layout:fixed; width:100%; min-width:640px; font-size:15.5px; } table.matrix th, table.matrix td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:top; } table.matrix thead th { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--grid); } table.matrix thead th:first-child, table.matrix tbody th { width:44%; } table.matrix thead th:not(:first-child), table.matrix td { width:18.666%; text-align:center; } table.matrix tbody th { font-weight:500; color:var(--ink-2); } table.matrix td { color:var(--ink-3); font-variant-numeric:tabular-nums; } table.matrix td.yes { color:var(--good); font-weight:700; } table.matrix td.no { color:var(--ink-3); opacity:.5; } /* Light white against light grey, so a long table is scannable by row (7 Sep 2026). Hover has to beat the stripe or the row under the cursor stops standing out. */ table.matrix tbody tr:nth-child(odd) { background:var(--surface); } table.matrix tbody tr:hover, table.matrix tbody tr:nth-child(odd):hover { background:var(--raised); } /* A matrix carrying sentences rather than ticks: the payer table and the Medicare fee table on the insurance guide (7 Sep 2026). */ table.matrix.wordy { table-layout:auto; min-width:1080px; font-size:14px; } table.matrix.wordy thead th, table.matrix.wordy td, table.matrix.wordy tbody th { width:auto; text-align:left; vertical-align:top; line-height:1.5; } table.matrix.wordy tbody th { width:15%; color:var(--ink); font-weight:600; } table.matrix.wordy td { color:var(--ink-2); font-variant-numeric:normal; } table.matrix.wordy td:last-child { width:16%; } table.matrix.wordy .muted { display:block; font-weight:400; font-size:13px; } /* A two-way comparison carrying phrases, not ticks (owner, 8 Sep 2026: "this section is terrible and needs to be cleaned up"). The base .matrix is built for three narrow tick columns beside a wide label, so a two-column table of sentences got 18.6% each and centred -- every cell wrapped mid-phrase and no two rows lined up. Here the label takes a quarter and the two answers split the rest, both left-aligned so the eye can run down either column. The LogBlues side carries a faint tint instead of bold green on every row: at thirteen rows the green read as shouting, and a column you can find is worth more than a column that shouts. */ table.matrix.versus { table-layout:fixed; min-width:0; font-size:15px; } table.matrix.versus thead th:first-child, table.matrix.versus tbody th { width:26%; } table.matrix.versus thead th:not(:first-child), table.matrix.versus td { width:37%; text-align:left; } table.matrix.versus tbody th { color:var(--ink); font-weight:600; } table.matrix.versus td { color:var(--ink-3); line-height:1.5; font-variant-numeric:normal; } table.matrix.versus thead th:last-child, table.matrix.versus td:last-child { background:color-mix(in srgb, var(--good) 7%, transparent); } table.matrix.versus thead th:last-child { color:var(--good); } table.matrix.versus td:last-child, table.matrix.versus td.yes { color:var(--ink); font-weight:600; } @media (max-width:700px) { table.matrix.versus { min-width:600px; font-size:14px; } } table.matrix.prices { min-width:0; } table.matrix.prices thead th, table.matrix.prices tbody th, table.matrix.prices td { text-align:left; } table.matrix.prices thead th:first-child, table.matrix.prices tbody th { width:40%; } table.matrix.prices thead th:not(:first-child), table.matrix.prices td { width:30%; } table.matrix.fees { min-width:0; } table.matrix.fees tbody th { width:58%; } @media (min-width:761px) { table.matrix.fees { min-width:560px; } } /* One card per payer on the insurance guide: where you apply, who to call, what they promise. A four-column table of sentences needed 1080px inside a 680px reading column, so it scrolled sideways on a desktop (7 Sep 2026). */ .cards.paycards { grid-template-columns:minmax(0,1fr); gap:14px; } /* One payer per full-width row, and three columns inside it: where to apply, who to call, what they promise (owner, 7 Sep 2026: "let's make each payer be its own horizontal box of 3 columns, this way it's clean and clear"). The label sits above its column, so nothing has to line up against a hanging indent. */ .card.paycard .payrows { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 44px; margin-top:16px; } .card.paycard .payrow { min-width:0; } .card.paycard .payrows .paylabel { display:block; width:auto; margin:0 0 6px; text-indent:0; } .card.paycard .payval { font-size:15.5px; line-height:1.6; color:var(--ink-3); text-wrap:pretty; } .card.paycard .payval strong { color:var(--ink-2); } .card.paycard ul.payextra { list-style:none; margin:9px 0 0; padding:0; } .card.paycard ul.payextra li { /* Stated in full on purpose: this list sits three levels inside a card and the base list styling was reaching it, at 18px with a 30px indent, which pushed numbers out of the column (7 Sep 2026). */ position:relative; margin:0 0 5px; padding:0 0 0 13px; font-size:15.5px; line-height:1.55; color:var(--ink-3); list-style:none; } .card.paycard ul.payextra li::before { content:""; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; } .card.paycard ul.payextra li strong { color:var(--ink-2); } .card.paycard .paywarnline { display:block; margin-top:9px; padding-top:9px; border-top:1px solid var(--border); color:var(--ink-2); } @media (max-width:820px) { .card.paycard .payrows { grid-template-columns:1fr; gap:14px; } } /* Three short definitions that must sit on one line rather than fall 2 + 1 and leave a hole in the reading column (7 Sep 2026). */ .cards.cards--trio { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .cards--trio .card { padding:18px; } .cards--trio .card h3 { font-size:16px; } .cards--trio .card p { font-size:14px; line-height:1.6; } @media (max-width:700px) { .cards.cards--trio { grid-template-columns:1fr; } } .card.paycard h3 { margin-bottom:10px; } .card.paycard p { margin:0 0 9px; font-size:15.5px; line-height:1.6; /* The indent and the label box are the same number on purpose: if they differ, a short label and a long one start their text in different places and the wrapped line lands in a third (7 Sep 2026). */ padding-left:92px; text-indent:-92px; } .card.paycard p:last-child { margin-bottom:0; } .card.paycard .paysub { font-weight:400; color:var(--ink-3); font-size:14px; } .card.paycard .paylabel { display:inline-block; width:92px; text-indent:0; font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; vertical-align:baseline; } /* One colour per row type, so the eye finds the number without reading the card (owner, 7 Sep 2026: make this part more colourful). */ .card.paycard .pl-apply { color:var(--brand); } .card.paycard .pl-phone { color:var(--good); } .card.paycard .pl-email { color:var(--accent); } .card.paycard .pl-say { color:var(--ink-3); } .card.paycard .pl-warn { color:var(--rose); } .card.paycard .nowrapmail { overflow-wrap:anywhere; } /* A payer card can carry several addresses or numbers. One per line beats three in a sentence (owner, 7 Sep 2026). */ .card.paycard ul.payemails { list-style:none; margin:2px 0 10px 92px; padding:0; font-size:15.5px; line-height:1.6; color:var(--ink-3); } .card.paycard ul.payemails li { margin:3px 0; } .card.paycard p.paywarn { color:var(--ink-2); } .card.paycard p.paywarn .paylabel { color:var(--rose); } table.matrix.fees tbody th { width:58%; } table.matrix caption { caption-side:bottom; padding-top:16px; font-size:14px; color:var(--ink-3); text-align:left; } .enterprise-contact { scroll-margin-top:110px; margin-top:48px; padding:32px 28px; border:1px solid var(--border); border-radius:20px; background:var(--raised); } .enterprise-contact h2 { margin:4px 0 8px; font-size:24px; } .enterprise-contact p { margin:0; } .enterprise-contact-action { margin-top:24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .enterprise-contact-action .get { white-space:nowrap; border:0; cursor:pointer; } .enterprise-copy-status { min-width:180px; color:var(--ink-3); font-size:14px; } /* ------------------------------------------------------------ contact */ .contact-safety { margin-bottom:28px; padding:18px 20px; border:1px solid var(--border); border-left:4px solid var(--rose); border-radius:14px; background:var(--raised); color:var(--ink-2); line-height:1.6; } .contact-form { display:grid; gap:22px; padding:30px; border:1px solid var(--border); border-radius:22px; background:var(--card); } .contact-form label { display:grid; gap:9px; color:var(--ink-2); font-size:14px; font-weight:600; } .contact-form input, .contact-form select, .contact-form textarea { width:100%; padding:13px 14px; border:1px solid var(--border); border-radius:12px; background:var(--raised); color:var(--ink); font:inherit; font-weight:400; } .contact-form textarea { resize:vertical; min-height:150px; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline:3px solid color-mix(in srgb,var(--brand) 22%,transparent); border-color:var(--brand); } .contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .contact-form .contact-confirm { display:flex; grid-template-columns:none; align-items:flex-start; gap:11px; font-weight:400; line-height:1.5; } .contact-confirm input { width:auto; margin-top:4px; } .contact-form .get { justify-self:start; border:0; cursor:pointer; } .contact-form .get:disabled { opacity:.55; cursor:wait; } .contact-status { min-height:24px; margin:0; color:var(--good); font-weight:600; } .contact-status.error { color:var(--rose); } .contact-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; } @media (max-width:650px) { .contact-fields { grid-template-columns:1fr; } .contact-form { padding:22px; } } /* ---------------------------------------------------------------- specs */ /* Facts, not prose. A buyer scanning for one number should find it without reading a paragraph to get there. */ .specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:0 36px; margin:30px 0 0; } .specs > div { padding:15px 0; border-top:1px solid var(--border); } .specs dt { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; } .specs dd { margin:5px 0 0; font-size:15.5px; color:var(--ink); line-height:1.5; } /* ------------------------------------------------------------------- faq */ .faq { margin-top:34px; } .faq details { border-top:1px solid var(--border); padding:17px 0; } .faq details:last-child { border-bottom:1px solid var(--border); } .faq summary { cursor:pointer; font-weight:600; color:var(--ink); font-size:18px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; color:var(--accent); font-size:21px; line-height:1; flex:0 0 auto; } .faq details[open] summary::after { content:"\2212"; } .faq summary:hover { color:var(--accent); } .faq p { margin:13px 0 0; font-size:15.5px; color:var(--ink-3); } .faq p + p { margin-top:10px; } .family { margin-top:56px; padding-top:26px; border-top:1px solid var(--border); color:var(--ink-3); font-size:15.5px; } .family strong { color:var(--ink); } .lockup { width:100%; max-width:280px; height:auto; display:block; margin:0 0 22px; } /* ---------------------------------------------------------------- articles */ .post { max-width:680px; } /* A reference rather than an essay: the insurance guide is eight ordered steps, a fee table, a document checklist and eleven payer cards. It keeps every article style and takes the full measure, so its cards sit three up and the page is not twelve thousand pixels tall (owner, 7 Sep 2026: "let's make this page 3 column because its long"). You read an article; you look things up in this one. */ .post--wide { max-width:none; } /* A wide article can carry a mark beside its headline. Below 820px the mark drops under the words rather than squeezing them (7 Sep 2026). */ .hero-split { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:34px; align-items:center; } .hero-split .hero-mark { margin:0; } .hero-split .hero-mark img { width:100%; height:auto; display:block; } @media (max-width:820px) { .hero-split { grid-template-columns:1fr; gap:18px; } .hero-split .hero-mark { max-width:180px; } } /* A reference on the wide measure takes the page heading size, not the smaller one meant for a 680px reading column, and the payer section opens on a photograph with room above it (owner, 7 Sep 2026). */ .post.post--wide article h2 { max-width:none; font-size:34px; margin-top:60px; } .post.post--wide article h2:first-child { margin-top:0; } figure.hero.payer-lead { margin:0 0 6px; padding-top:56px; border-top:1px solid var(--border); } figure.hero.payer-lead img { border-radius:16px; display:block; width:100%; height:auto; } figure.hero.payer-lead + h2 { margin-top:26px; } .post .kicker { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; margin:0 0 18px; } .post .kicker .date { color:var(--ink-3); letter-spacing:.04em; text-transform:none; font-weight:500; } .post h1 { max-width:26ch; } .post .standfirst { font-size:clamp(18px,2.2vw,21px); line-height:1.5; color:var(--ink-2); margin:24px 0 0; max-width:68ch; } .post article { margin-top:8px; } .post article h2 { font-size:clamp(20px,2.5vw,25px); margin:44px 0 12px; max-width:34ch; } .post article p { font-size:18px; line-height:1.72; margin:0 0 18px; } .post article ul { margin:22px 0; padding:0; list-style:none; display:grid; gap:13px; } /* Positioned marker, not a grid column -- see the note on ul.facts. */ .post article ul li { position:relative; padding-left:30px; font-size:18px; line-height:1.6; } .post article ul li::before { content:""; position:absolute; left:1px; top:10px; width:9px; height:9px; border-radius:50%; background:var(--leaf); } .post article ul li:nth-child(3n+2)::before { background:var(--brand); } .post article ul li:nth-child(3n+3)::before { background:var(--plum); } /* The lead photo now sits under the standfirst rather than above the first subheading, so the space it needs moved from below it to above it. */ /* The lead photograph, in a plain section directly under the title block. It is not banded: a second band here would repeat the background stripe and the hero artwork would have to stretch over the picture, which is what it was doing when the photo lived inside the title band. */ .photoband { padding:24px 0 0; } .photoband .post figure.hero { margin:0; } .post figure.hero { margin:24px 0 0; } .post figure.hero img { width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); } .post article strong { color:var(--ink); font-weight:600; } .postfoot { margin-top:52px; padding-top:26px; border-top:1px solid var(--border); font-size:15.5px; } /* --------------------------------------------------------- article index */ .posts { display:grid; gap:0; margin-top:36px; } a.postrow { display:grid; grid-template-columns:112px 1fr; gap:26px; align-items:start; padding:26px 0; border-top:1px solid var(--border); color:inherit; text-decoration:none; } .posts a.postrow:last-child { border-bottom:1px solid var(--border); } a.postrow:hover { text-decoration:none; } a.postrow:hover h3 { color:var(--accent); } a.postrow .tag { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; } a.postrow .tag img { width:20px; height:20px; flex:0 0 auto; } a.postrow h3 { font-size:21px; letter-spacing:-.018em; margin:0 0 7px; max-width:30ch; } a.postrow p { font-size:15.5px; color:var(--ink-3); margin:0; max-width:76ch; } a.postrow .more { display:inline-block; margin-top:11px; font-size:14.5px; font-weight:600; color:var(--accent); } /* ------------------------------------------------------- numbered layers */ /* The security layers are a real sequence, outside in, so they are numbered. Numbering anything that is not a sequence is decoration pretending to be information. */ .steps { list-style:none; padding:0; margin:34px 0 0; display:grid; gap:0; } .steps li { display:grid; grid-template-columns:52px 1fr; gap:22px; padding:24px 0; border-top:1px solid var(--border); align-items:start; } .steps li:last-child { border-bottom:1px solid var(--border); } .steps .num { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; background:var(--tint,rgba(20,112,143,.10)); color:var(--mark,var(--accent)); } .steps .head { display:flex; align-items:center; gap:10px; margin:9px 0 7px; } .steps .head svg { width:19px; height:19px; flex:0 0 auto; stroke:var(--mark,var(--accent)); } .steps .name { font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.012em; } .steps .desc { font-size:15.5px; line-height:1.65; color:var(--ink-3); margin:0; text-wrap:pretty; } /* Three of these in one step ran together as a single block with the line breaks in odd places (7 Sep 2026). */ .steps .desc + .desc { margin-top:11px; } .steps li.s-leaf { --mark:var(--leaf); --tint:rgba(10,104,168,.10); } .steps li.s-brand { --mark:var(--brand); --tint:rgba(49,98,216,.10); } .steps li.s-plum { --mark:var(--plum); --tint:rgba(107,92,231,.10); } .steps li.s-rose { --mark:var(--rose); --tint:rgba(179,39,127,.09); } @media (max-width:1100px) { .steps li { grid-template-columns:40px 1fr; gap:16px; } .steps .num { width:38px; height:38px; border-radius:11px; font-size:14px; } } /* ------------------------------------------------------------- legal docs */ .doc article { margin-top:8px; } .doc article h3 { font-size:17.5px; margin:32px 0 8px; } .doc article p { font-size:16.5px; margin:0 0 14px; max-width:90ch; } .doc .updated { font-size:14px; color:var(--ink-3); margin-top:12px; } .docnav { display:flex; flex-wrap:wrap; gap:18px; margin-top:44px; padding-top:24px; border-top:1px solid var(--border); font-size:14.5px; } /* ----------------------------------------------------------------- footer */ footer { border-top:1px solid var(--border); background:var(--raised); padding:52px 0; font-size:14.5px; color:var(--ink-3); } footer .cols { display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; } footer nav { display:flex; flex-wrap:wrap; gap:20px; } footer a { color:var(--ink-2); } footer .fine { margin:28px auto 0; font-size:13px; text-align:center; } /* Room under the last line (owner, 4 Oct 2026: keep all text visible on phones, least change). Below 1280px the rewards tab (bottom-left) and the round Blues button (bottom-right) are fixed over the page; without this the end of the footer -- the NVIDIA trademark line -- could never scroll clear of them. 112px covers the rewards tab even when it lifts above back-to-top. */ @media (max-width:1279px) { footer { padding-bottom:calc(52px + 112px + env(safe-area-inset-bottom)); } } @media (max-width:1100px) { .split { grid-template-columns:1fr; gap:36px; } .security { grid-template-columns:1fr; gap:14px; } .status li, .layers li { grid-template-columns:1fr; gap:4px; } .producthead { grid-template-columns:1fr; gap:18px; } .appicon { width:82px; height:82px; border-radius:19px; } section { padding:56px 0; } .band .wrap { padding:56px 24px 52px; } nav.links { gap:15px; font-size:14px; } nav.links a.hide-sm { display:none; } .cta.second { margin-left:0; display:block; width:fit-content; } } /* A placeholder that must be filled before launch. Deliberately ugly so it cannot survive a proofread unnoticed. */ .gap { display:inline-block; background:#fff3cd; color:#6b4b00; border:1px dashed #d9a520; border-radius:5px; padding:1px 8px; font-size:.92em; font-weight:600; } /* ------------------------------------------------------------- offer bar */ /* The one loud thing on the site, and it earns it: two months free is the reason to try rather than read. Borrowed from Blues' own gradient in the app so the site and the assistant look like the same company -- green leading, because this is an offer, not an AI feature. The sweep is slow on purpose. It sits above every page, and anything faster becomes something to look away from. */ .offerbar { position:relative; overflow:hidden; background:linear-gradient(96deg,#1d8752 0%,#27874e 26%,#14708f 62%,#3162d8 100%); background-size:220% 100%; animation:offerSweep 18s ease-in-out infinite; color:#fff; font-size:14.5px; } @keyframes offerSweep { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } } @media (prefers-reduced-motion: reduce) { .offerbar { animation:none; background-size:100% 100%; } } .offerbar .wrap { display:flex; align-items:center; justify-content:center; gap:14px; padding:11px 24px; text-align:center; flex-wrap:wrap; } .offerbar strong { font-weight:700; } .offerbar .sparkle { flex:0 0 auto; width:17px; height:17px; opacity:.95; } /* The AI sparkle that sits beside the first mention of Blues in a page's body. Sized in em so it tracks whatever type it lands in -- a heading, a bullet, a lede -- and nudged up a fraction because a glyph on the baseline reads as a full stop. currentColor so it inherits link blue inside a link and ink inside prose, and never needs a dark-mode variant of its own. */ .aimark { display:inline-block; width:1.02em; height:1.02em; vertical-align:-.14em; margin-right:.22em; color:var(--plum); flex:0 0 auto; } a .aimark, strong .aimark { color:inherit; } .offerbar a.go { color:#fff; font-weight:700; white-space:nowrap; border-bottom:2px solid rgba(255,255,255,.55); padding-bottom:1px; } .offerbar a.go:hover { text-decoration:none; border-bottom-color:#fff; } @media (max-width:640px) { .offerbar .wrap { padding:10px 18px; font-size:13.5px; gap:9px; } .offerbar .sparkle { display:none; } /* The bar is a flex row, so on a phone the link became a flex item of its own and dropped to a second line by itself -- an orphan under a centred sentence. Switching to normal inline flow lets "Start free" sit at the end of the sentence and wrap only when the words themselves run out of room, which is what the owner asked for and what reads properly. */ .offerbar .wrap { display:block; } .offerbar a.go { margin-left:7px; } } /* ----------------------------------------------------------- signup form */ .signup { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; max-width:560px; } .signup input[type="email"] { flex:1 1 260px; min-width:0; padding:13px 16px; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--grid); border-radius:11px; } .signup input[type="email"]::placeholder { color:var(--ink-3); } .signup input[type="email"]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(20,112,143,.14); } .signup button { padding:13px 26px; border:0; border-radius:11px; cursor:pointer; background:var(--accent); color:#fff; font:inherit; font-size:16px; font-weight:600; transition:filter .16s ease; } .signup button:hover { filter:brightness(1.08); } .signup button:active { transform:scale(.99); } .signup .note { flex:1 1 100%; font-size:13.5px; color:var(--ink-3); margin:0; } /* -------------------------------------------------------------- articles */ .dateline { font-size:14px; color:var(--ink-3); margin:14px 0 16px; letter-spacing:.01em; } /* Nineteen articles in one long list is a scroll. The filter turns the archive into "show me the four about billing" without a page load. */ .filters { display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 30px; } .filters button { padding:8px 15px; font:inherit; font-size:14.5px; font-weight:500; cursor:pointer; color:var(--ink-2); background:var(--surface); border:1px solid var(--grid); border-radius:999px; transition:background .15s ease, color .15s ease, border-color .15s ease; } .filters button:hover { border-color:var(--ink-3); color:var(--ink); } .filters button[aria-pressed="true"] { background:var(--ink); color:var(--page); border-color:var(--ink); } .archive { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); } .archive a { display:block; padding:19px 21px; text-decoration:none; background:var(--surface); border:1px solid var(--grid); border-radius:14px; transition:border-color .15s ease, transform .15s ease; } .archive a:hover { border-color:var(--ink-3); transform:translateY(-2px); text-decoration:none; } .archive .meta { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; margin-bottom:9px; } .archive .meta .when { color:var(--ink-3); font-weight:500; letter-spacing:.03em; text-transform:none; } .archive h3 { font-size:17.5px; line-height:1.34; margin:0 0 7px; color:var(--ink); } .archive p { font-size:14px; line-height:1.55; color:var(--ink-2); margin:0; } .archive a[hidden] { display:none; } .archive .none { grid-column:1/-1; color:var(--ink-3); padding:20px 2px; } /* ------------------------------------------------------------ trial signup */ .startbox { display:grid; gap:44px; align-items:start; grid-template-columns:1.05fr .95fr; padding:38px 40px; background:var(--surface); border:1px solid var(--grid); border-radius:20px; } .startbox h2 { margin-top:6px; } .startbox .signup { margin-top:8px; } @media (max-width:860px) { .startbox { grid-template-columns:1fr; gap:28px; padding:28px 24px; } } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------------------------------------------------------------- ask blues */ /* The launcher stays at the right edge so it remains visible when blue page artwork reaches the bottom. It returns to a compact bottom control on phones. */ .sc-launch { position:fixed; right:0; top:50%; bottom:auto; z-index:60; width:58px; min-height:152px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:16px 10px; border:0; border-radius:19px 0 0 19px; cursor:pointer; color:#fff; font:inherit; font-size:15.5px; font-weight:600; background:linear-gradient(122deg,#3162d8 0%,#6b5ce7 48%,#14708f 100%); background-size:180% 100%; box-shadow:0 6px 22px rgba(20,26,45,.24), 0 2px 6px rgba(20,26,45,.14); transform:translateY(-50%); transition:transform .18s ease, box-shadow .18s ease, background-position .5s ease; } .sc-launch::after { content:''; position:absolute; top:10px; right:9px; width:8px; height:8px; border:2px solid rgba(255,255,255,.9); border-radius:50%; background:#6fffc4; box-shadow:0 0 0 0 rgba(111,255,196,.55); animation:scBluesPulse 2s ease-out infinite; } .sc-launch-label { writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:.025em; white-space:nowrap; } .sc-launch:hover { transform:translateY(calc(-50% - 2px)); background-position:100% 50%; box-shadow:0 10px 28px rgba(20,26,45,.28), 0 3px 8px rgba(20,26,45,.16); } .sc-launch:active { transform:translateY(-50%); } .sc-launch:focus-visible { outline:3px solid var(--brand); outline-offset:3px; } .sc-launch svg { width:21px; height:21px; flex:0 0 auto; transform-origin:center; animation:scBluesListening 2.6s ease-in-out infinite; } /* Open and shut are the same button (20 Sep 2026). Which face shows is read straight off aria-expanded, so the picture and the state a screen reader announces cannot drift apart -- there is only one source for both. */ .sc-launch .sc-launch-x, .sc-launch .sc-launch-shut { display:none; } .sc-launch[aria-expanded="true"] .sc-launch-note, .sc-launch[aria-expanded="true"] .sc-launch-open { display:none; } .sc-launch[aria-expanded="true"] .sc-launch-x { display:block; } .sc-launch[aria-expanded="true"] .sc-launch-shut { display:inline; } /* The cross does not wiggle. That animation is Blues listening, and a close button that fidgets reads as a thing still thinking about something. */ .sc-launch[aria-expanded="true"] svg { animation:none; } /* Nothing is waiting for you once the panel is open, so the "I am here" dot goes with it. */ .sc-launch[aria-expanded="true"]::after { display:none; } /* A slow breath, so the button looks alive rather than painted on, the way the app's assistant does (owner, 20 Sep 2026: "bring the chat to life ... make it pulse slightly"). It animates box-shadow, never transform. The launcher is centred on the right edge with translateY(-50%) on desktop and transform:none on phones, so animating transform here would fight the positioning and the button would drift. Shadow costs no layout either, which keeps this off the critical path of a site that holds 99/100/100/100. */ .sc-launch { animation:scBluesBreathe 4.4s ease-in-out infinite; } .sc-launch:hover, .sc-launch[aria-expanded="true"] { animation:none; } @keyframes scBluesBreathe { 0%, 100% { box-shadow:0 6px 22px rgba(20,26,45,.24), 0 2px 6px rgba(20,26,45,.14), 0 0 0 0 rgba(107,92,231,0); } 50% { box-shadow:0 8px 26px rgba(20,26,45,.28), 0 2px 6px rgba(20,26,45,.14), 0 0 0 7px rgba(107,92,231,.16); } } /* Send says Send. It is a word now, not the note, so it is sized to its text rather than to a 42px icon square. */ .sc-send { font:inherit; font-size:14.5px; font-weight:700; letter-spacing:.01em; padding:0 18px; white-space:nowrap; } @keyframes scBluesPulse { 0% { box-shadow:0 0 0 0 rgba(111,255,196,.58); } 65%,100% { box-shadow:0 0 0 9px rgba(111,255,196,0); } } @keyframes scBluesListening { 0%,100% { transform:translateY(0) rotate(0); } 45% { transform:translateY(-2px) rotate(-5deg); } 60% { transform:translateY(-2px) rotate(4deg); } } .sc-panel { position:fixed; right:76px; top:50%; bottom:auto; z-index:61; display:flex; flex-direction:column; width:min(390px, calc(100vw - 44px)); height:min(780px, calc(100vh - 60px)); background:var(--page); border:1px solid var(--grid); border-radius:18px; box-shadow:0 18px 50px rgba(20,26,45,.22), 0 4px 14px rgba(20,26,45,.12); overflow:hidden; opacity:0; transform:translateY(calc(-50% + 10px)) scale(.985); transition:opacity .2s ease, transform .2s ease; } .sc-panel.sc-in { opacity:1; transform:translateY(-50%); } /* The closed panel was still swallowing clicks. * * blues-chat.js does `panel.hidden = true` on close, which looks like it hides * it -- but `[hidden]` is a user-agent rule and `.sc-panel { display:flex }` * is a class selector, so the class wins and the attribute does nothing. The * panel stayed laid out at up to 390x560, fixed over the bottom-right corner * of every page at z-index 61, with `opacity:0`. Opacity does not remove an * element from hit testing, so every click that landed in that rectangle went * to an invisible chat window instead of the page: buttons in the lower right * of a long page simply did nothing, while the same control higher up worked. * * This was twice misdiagnosed as a stale stylesheet. */ .sc-panel[hidden] { display:none; } /* Belt and braces for the 200ms between the class coming off and `hidden` * being set, when the panel is mid-fade and still hit-testable. */ .sc-panel:not(.sc-in) { pointer-events:none; } .sc-panel.sc-in { pointer-events:auto; } .sc-head { display:flex; align-items:center; gap:11px; padding:14px 14px 14px 16px; color:#fff; background:linear-gradient(122deg,#3162d8 0%,#6b5ce7 52%,#14708f 100%); } .sc-avatar { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.18); } .sc-avatar svg { width:19px; height:19px; } .sc-who { flex:1; min-width:0; line-height:1.3; } .sc-who strong { display:block; font-size:15.5px; font-weight:700; } .sc-who span { display:block; font-size:11.5px; opacity:.86; } .sc-close { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; cursor:pointer; color:#fff; background:rgba(255,255,255,.14); } .sc-close:hover { background:rgba(255,255,255,.26); } .sc-close svg { width:16px; height:16px; } .sc-log { flex:1; overflow-y:auto; padding:18px 16px 6px; } .sc-row { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:13px; } .sc-row.sc-me { justify-content:flex-end; } .sc-row.sc-me { align-items:flex-end; } .sc-message-meta { display:flex; align-items:center; gap:5px; max-width:85%; margin:0 4px 5px; color:var(--ink-3); font-size:10.5px; line-height:1; } .sc-message-meta .sc-mark { width:14px; height:14px; margin:0; vertical-align:0; } .sc-message-meta span { font-weight:700; color:var(--ink-2); } .sc-message-meta time { margin-left:3px; font-variant-numeric:tabular-nums; } .sc-bubble { max-width:85%; padding:11px 14px; border-radius:15px; font-size:14.7px; line-height:1.56; } .sc-blues .sc-bubble { color:var(--ink); background:var(--surface); border:1px solid var(--grid); border-bottom-left-radius:5px; } .sc-me .sc-bubble { color:#fff; background:var(--brand); border-bottom-right-radius:5px; } .sc-bubble a { color:var(--accent); font-weight:500; } .sc-me .sc-bubble a { color:#fff; } .sc-links { display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:10px; } .sc-links a { display:inline; padding:0; font-size:13.6px; font-weight:650; color:var(--accent); text-decoration:underline; text-underline-offset:3px; background:none; border:0; border-radius:0; } .sc-links a:hover { color:color-mix(in srgb,var(--accent) 70%,#fff); text-decoration-thickness:2px; } .sc-chips { display:flex; flex-wrap:wrap; gap:7px; position:relative; margin:0; padding:12px 14px 14px; border-top:1px solid var(--grid); } .sc-chips button { padding:7px 13px; font:inherit; font-size:13.4px; cursor:pointer; color:var(--ink-2); background:var(--surface); border:1px solid var(--grid); border-radius:999px; } .sc-chips button:hover { border-color:var(--accent); color:var(--accent); } .sc-dots { display:inline-flex; gap:4px; padding:2px 0; } /* The AI mark inside Blues' typing bubble. Sized in em so it matches whatever the bubble's type is, and tinted with the assistant's violet so it reads as him rather than as page furniture. */ .sc-mark { display:inline-block; width:1em; height:1em; vertical-align:-.15em; margin-right:.4em; color:var(--plum); } .sc-dots i { width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:scBlink 1.15s ease-in-out infinite; } .sc-dots i:nth-child(2) { animation-delay:.16s; } .sc-dots i:nth-child(3) { animation-delay:.32s; } @keyframes scBlink { 0%,80%,100% { opacity:.28; } 40% { opacity:1; } } @media (prefers-reduced-motion: reduce) { .sc-dots i { animation:none; opacity:.6; } .sc-panel { transition:none; } .sc-launch::after, .sc-launch svg { animation:none; } /* The breath goes too. Somebody who has asked the system for less motion has asked for this exactly. */ .sc-launch { animation:none; } } .sc-ask { position:relative; display:block; padding:12px 14px; border-top:1px solid var(--grid); background:var(--surface); } .sc-ask input { display:block; width:100%; min-width:0; padding:14px; font:inherit; font-size:15px; color:var(--ink); background:var(--page); border:1px solid var(--grid); border-radius:11px; transition:padding-right .16s ease; } /* Room for the word, not the note. "Send" is wider than a 42px icon square, and without this the last thing typed slides underneath it. */ .sc-ask.has-text input { padding-right:96px; } .sc-ask input:focus { outline:none; border-color:var(--accent); } .sc-ask button { position:absolute; right:21px; top:50%; height:40px; display:grid; place-items:center; transform:translateY(-50%) scale(.86); border:0; border-radius:11px; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--brand),var(--plum)); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease, visibility .15s; } .sc-ask.has-text button { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(-50%) scale(1); } .sc-ask button:hover { filter:brightness(1.09); } .sc-ask button svg { width:19px; height:19px; } /* Phones AND tablets (owner, 21 Sep 2026: "come out at the bottom of the site ... so it doesn't block stuff", "both mobile and tablet"): the launcher is a small round button in the bottom corner, and the chat opens as a sheet from the bottom edge instead of floating over the middle of the page. */ @media (max-width:1024px) { .sc-launch { right:max(16px, env(safe-area-inset-right)); top:auto; bottom:max(16px, env(safe-area-inset-bottom)); width:52px; min-height:52px; flex-direction:row; padding:14px; border-radius:50%; transform:none; } .sc-launch::after { top:4px; right:3px; } .sc-launch:hover { transform:translateY(-2px); } .sc-launch:active { transform:none; } .sc-launch-label { display:none; } .sc-panel { left:0; right:0; top:auto; bottom:0; width:auto; max-width:720px; margin:0 auto; height:min(72vh, calc(100vh - 72px)); padding-bottom:env(safe-area-inset-bottom); border-radius:18px 18px 0 0; border-bottom:0; transform:translateY(24px); } .sc-panel.sc-in { transform:none; } /* The sheet has its own close button; the round launcher would sit on top of the input, so it steps aside while the sheet is open. */ .sc-launch[aria-expanded="true"] { display:none; } } /* Small laptops too (owner, 4 Oct 2026, Option A): between 1025 and 1279px the tall side tab sat over page text on shorter screens, so the launcher is the same round bottom-right button. Only the launcher changes here; the chat still opens as the desktop panel on these widths. */ @media (min-width:1025px) and (max-width:1279px) { .sc-launch { right:max(16px, env(safe-area-inset-right)); top:auto; bottom:max(16px, env(safe-area-inset-bottom)); width:52px; min-height:52px; flex-direction:row; padding:14px; border-radius:50%; transform:none; } .sc-launch::after { top:4px; right:3px; } .sc-launch:hover { transform:translateY(-2px); } .sc-launch:active { transform:none; } .sc-launch-label { display:none; } } @media print { .sc-launch, .sc-panel, .offerbar { display:none !important; } } /* ---------------------------------------------------------- screenshot grid */ .shots { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); } .shots figure { margin:0; } .shots img { display:block; width:100%; height:auto; border-radius:13px; border:1px solid var(--grid); background:var(--surface); } .shots figcaption { margin-top:9px; font-size:14px; color:var(--ink-3); } /* -------------------------------------------------------- cards that link */ a.card { display:block; color:inherit; text-decoration:none; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; } a.card:hover { text-decoration:none; transform:translateY(-2px); border-color:var(--ink-3); box-shadow:0 8px 22px rgba(20,26,45,.09); } a.card h3 { color:var(--ink); } .card .more { display:inline-block; margin-top:13px; font-size:14px; font-weight:600; color:var(--accent); } /* =========================================================================== DEVICE RIGS --------------------------------------------------------------------------- Flat full-window screenshots tell a visitor almost nothing -- at page width the interface shrinks to grey confetti and reads as "some software". These put the app inside real device shells, angled, at several sizes at once, so the impression is "this runs everywhere and it is good-looking" before a single label is read. The shells are CSS rather than image mockups: they stay crisp on any display, they re-theme with the site, they cost no download, and swapping a screenshot is one src attribute rather than a new render. Every rig sits on the Founders Edition artwork -- the theme given to the practices who were here first -- so the mockups and the product share a palette. ======================================================================== */ .rig { position:relative; isolation:isolate; border-radius:24px; overflow:hidden; padding:clamp(38px,6vw,74px) clamp(18px,4vw,54px); background:#1a2352; box-shadow:0 22px 60px rgba(16,22,54,.28), 0 4px 14px rgba(16,22,54,.16); } .rig::before { /* the artwork */ content:""; position:absolute; inset:0; z-index:0; background:url("founders-landscape.webp?v=202608311652") center 34% / cover no-repeat; } .rig::after { /* scrim, so white device bezels separate */ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(120% 90% at 50% 108%, rgba(10,14,42,.62) 0%, rgba(10,14,42,0) 62%), linear-gradient(184deg, rgba(10,14,42,.30) 0%, rgba(10,14,42,.10) 42%, rgba(10,14,42,.48) 100%); } .rig > * { position:relative; z-index:2; } /* Perspective lives on the stage so every device shares one vanishing point; set it per-device and they each look bent their own way. */ .stage { display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2.4vw,30px); perspective:1900px; perspective-origin:50% 42%; transform-style:preserve-3d; } .dev { --rot:0deg; --tilt:0deg; --lift:0px; --z:0px; flex:0 0 auto; } .dev > .shell { transform:translateY(var(--lift)) rotateY(var(--rot)) rotateX(var(--tilt)) translateZ(var(--z)); transform-origin:50% 80%; transition:transform .55s cubic-bezier(.22,.7,.28,1); } .rig:hover .dev > .shell { transform:translateY(var(--lift)) rotateY(calc(var(--rot) * .45)) rotateX(calc(var(--tilt) * .45)) translateZ(var(--z)); } @media (prefers-reduced-motion: reduce) { .dev > .shell, .rig:hover .dev > .shell { transition:none; } } .dev .scr { overflow:hidden; background:#0d1330; } .dev .scr img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top; } /* ------------------------------------------------------------------ phone */ .dev.phone { width:var(--w,168px); } .dev.phone .shell { position:relative; border-radius:26px; padding:7px; background:linear-gradient(148deg,#f2f3f7 0%,#c9ccd8 38%,#8f94a8 62%,#e8eaf1 100%); box-shadow:0 26px 44px rgba(8,12,36,.42), 0 6px 14px rgba(8,12,36,.3); } .dev.phone .scr { border-radius:20px; aspect-ratio:9 / 19.5; } .dev.phone .shell::after { /* the pill cutout */ content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:31%; height:8px; border-radius:99px; background:#0b1024; z-index:2; } /* ----------------------------------------------------------------- tablet */ .dev.tablet { width:var(--w,320px); } .dev.tablet .shell { border-radius:20px; padding:11px; background:linear-gradient(148deg,#eef0f5 0%,#c6cad6 40%,#9297aa 64%,#e5e8ef 100%); box-shadow:0 30px 52px rgba(8,12,36,.42), 0 7px 16px rgba(8,12,36,.28); } .dev.tablet .scr { border-radius:11px; aspect-ratio:4 / 3; } /* ----------------------------------------------------------------- laptop */ .dev.laptop { width:var(--w,470px); } .dev.laptop .shell { position:relative; } .dev.laptop .lid { border-radius:12px 12px 4px 4px; padding:11px 11px 13px; background:linear-gradient(148deg,#eceef4 0%,#c3c7d4 42%,#8e93a6 66%,#e2e5ed 100%); box-shadow:0 26px 46px rgba(8,12,36,.4); } .dev.laptop .scr { border-radius:4px; aspect-ratio:16 / 10; } .dev.laptop .base { /* the wedge under the hinge */ height:11px; margin:0 -7%; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#d3d6e0 0%,#a8adbf 52%,#7d8296 100%); box-shadow:0 12px 22px rgba(8,12,36,.36); } .dev.laptop .base::after { /* the notch you open it by */ content:""; display:block; width:15%; height:3px; margin:0 auto; border-radius:0 0 4px 4px; background:rgba(10,14,38,.28); } /* ---------------------------------------------------------------- desktop */ .dev.desktop { width:var(--w,520px); } .dev.desktop .lid { border-radius:12px; padding:13px 13px 15px; background:linear-gradient(148deg,#e9ebf2 0%,#bfc3d1 42%,#8a8fa3 68%,#dfe2ea 100%); box-shadow:0 28px 50px rgba(8,12,36,.42); } .dev.desktop .scr { border-radius:5px; aspect-ratio:16 / 9; } .dev.desktop .stand { width:16%; height:24px; margin:0 auto; background:linear-gradient(180deg,#b9bdcb,#8f94a7); } .dev.desktop .foot { width:34%; height:7px; margin:0 auto; border-radius:99px; background:linear-gradient(180deg,#a9aebe,#7b8094); box-shadow:0 10px 20px rgba(8,12,36,.34); } /* -------------------------------------------------------------- rig label */ .rig .cap { margin:clamp(26px,4vw,44px) auto 0; max-width:60ch; text-align:center; color:rgba(255,255,255,.94); } .rig .cap .eyebrow { color:#ffd6a3; } .rig .cap h2, .rig .cap h3 { color:#fff; margin:0 0 10px; } .rig .cap p { color:rgba(255,255,255,.8); font-size:15.5px; margin:0 auto; max-width:56ch; } .rig .cap .badges { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:20px; } .rig .cap .badges span { padding:6px 14px; border-radius:999px; font-size:13.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); } /* Narrow screens cannot hold three angled devices. Rather than shrink them into illegibility, drop the supporting ones and keep the phone honest. */ @media (max-width:960px) { .stage { gap:14px; perspective:1200px; } .dev.laptop { width:min(58vw,380px); } .dev.tablet { width:min(30vw,190px); } .dev.phone { width:min(20vw,120px); } } @media (max-width:680px) { .rig { border-radius:18px; } .dev.tablet, .dev.desktop { display:none; } .dev.laptop { width:min(72vw,430px); } .dev.phone { width:min(28vw,132px); } .stage { align-items:flex-end; } } /* ---------------------------------------------------------------- the rig, on a phone. On a pointer device the devices straighten and draw together when the cursor enters the rig -- see `.rig:hover .dev > .shell` above. A phone has no cursor, so that never fired, and the two remaining devices sat frozen at full splay with a gap between them. The effect people see on a desktop was simply missing from the version most visitors get. Scroll is the phone's equivalent of hover, so the same movement is driven by the scroll position instead: as the rig travels up through the viewport the devices rotate toward square and slide toward each other, arriving composed by the time it is fully in view. `animation-timeline: view()` does this with no JavaScript and no scroll listener -- the browser ties the animation to the element's own progress through the viewport, which stays smooth because it never touches the main thread. It is wrapped in @supports so that a browser without it shows exactly what it shows today rather than something broken; the devices just stay splayed, which is the current behaviour and no worse. --conv is per device and signed: the laptop is on the left so it travels right, the phone is on the right so it travels left. They meet in between, closing the gap the way the hover state does. */ @media (max-width:960px) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .rig .dev.laptop { --conv:24px; } .rig .dev.phone { --conv:-24px; } .rig .dev.tablet, .rig .dev.desktop { --conv:0px; } /* The timeline is named and declared on .rig, not taken from view() on the shell itself. .rig sets overflow:hidden, which makes it a scroll container, so view() measured from inside it compares the shell against the rig's own box -- where the shell is always fully visible, so the animation sat permanently at 100% and the devices were simply frozen in their end position. Naming the timeline on .rig measures .rig against the viewport, which is the thing actually scrolling. */ .rig { view-timeline-name:--rig-view; } .rig .dev > .shell { animation:rig-converge linear both; animation-timeline:--rig-view; /* Starts once a fifth of the rig has entered, finishes before it is centred, so the movement is over while it is still being read. */ animation-range:entry 20% cover 45%; } } } @keyframes rig-converge { from { transform:translateX(0) translateY(var(--lift)) rotateY(var(--rot)) rotateX(var(--tilt)) translateZ(var(--z)); } to { transform:translateX(var(--conv,0px)) translateY(var(--lift)) rotateY(calc(var(--rot) * .28)) rotateX(calc(var(--tilt) * .28)) translateZ(var(--z)); } } /* =========================================================================== DARK MODE --------------------------------------------------------------------------- Not a grey inversion. The dark palette is the Founders Edition twilight -- the same deep indigo-into-violet the launch-year theme paints the app with -- so choosing dark on the site shows you a real thing the product does rather than a generic night mode. Three states, like every well-behaved site: an explicit choice stamps data-theme on and wins; with no choice, the operating system decides. Tokens are redefined, never individual colours, so anything built on the tokens follows without being touched. ======================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page:#0a1029; --surface:#141c40; --raised:#1b2450; --ink:#eef1fc; --ink-2:#c3ccea; --ink-3:#939dc4; --grid:#26305c; --border:rgba(226,232,255,0.13); --accent:#5ec8e8; --good:#4bd4a4; --brand:#7b9dff; --leaf:#5cc2f0; --plum:#a893ff; --rose:#ff6fc0; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 26px 52px -26px rgba(0,0,0,.8); color-scheme:dark; } } :root[data-theme="dark"] { --page:#0a1029; --surface:#141c40; --raised:#1b2450; --ink:#eef1fc; --ink-2:#c3ccea; --ink-3:#939dc4; --grid:#26305c; --border:rgba(226,232,255,0.13); --accent:#5ec8e8; --good:#4bd4a4; --brand:#7b9dff; --leaf:#5cc2f0; --plum:#a893ff; --rose:#ff6fc0; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 26px 52px -26px rgba(0,0,0,.8); color-scheme:dark; } /* The dark theme used to drop back to 400 because Manrope's light-theme text took an optical lift to 450. Inter runs at 400 in both themes, so the override would be a no-op and is gone (7 Sep 2026). */ /* The header's translucent fill is a literal colour rather than a token, because backdrop-filter needs an alpha the tokens do not carry. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.bar { background:rgba(10,16,41,.86); } } :root[data-theme="dark"] header.bar { background:rgba(10,16,41,.86); } /* Screenshots and artwork are lit for a white page. Take a little glare off them in the dark rather than leaving them burning a hole in the layout. */ :root[data-theme="dark"] .shots img, :root[data-theme="dark"] .window .screen img, :root[data-theme="dark"] .today .art img { filter:brightness(.9) contrast(1.02); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shots img, :root:not([data-theme="light"]) .window .screen img, :root:not([data-theme="light"]) .today .art img { filter:brightness(.9) contrast(1.02); } } /* --------------------------------------------------------- header controls */ .bartools { position:relative; z-index:70; display:flex; align-items:center; gap:8px; } .accountlogin, .themetoggle, .burger { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; padding:0; border:1px solid var(--grid); border-radius:10px; cursor:pointer; color:var(--ink-2); background:var(--surface); transition:border-color .15s ease, color .15s ease; } .accountlogin:hover, .themetoggle:hover, .burger:hover { border-color:var(--ink-3); color:var(--ink); text-decoration:none; } .accountlogin svg, .themetoggle svg, .burger svg { width:18px; height:18px; } /* One button, two glyphs: show the mode you would be switching to. */ .themetoggle .moon { display:block; } .themetoggle .sun { display:none; } :root[data-theme="dark"] .themetoggle .moon { display:none; } :root[data-theme="dark"] .themetoggle .sun { display:block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themetoggle .moon { display:none; } :root:not([data-theme="light"]) .themetoggle .sun { display:block; } } /* ------------------------------------------------------ accessibility panel */ /* Real controls, not a statement page pretending to be one. Three settings that actually change how this site reads, stored per browser and applied before first paint by the boot script in the head, so nothing flashes at the wrong size. These sit alongside the OS-level preferences rather than replacing them: a visitor whose system already asks for reduced motion gets it without touching this, and the panel only ever adds. */ /* Normal is the size the site was designed at. Large and Larger are the two steps the owner asked for: five and ten percent, applied to the whole page, so layouts do not break the way a 25% jump did. */ :root[data-textsize="large"] { zoom:1.05; } :root[data-textsize="larger"] { zoom:1.10; } /* High contrast means one thing: every word is pure black on the light palette and pure white on the dark one. No underlines, no rules. */ :root[data-contrast="high"] { --ink:#000000; --ink-2:#000000; --ink-3:#000000; --field:#000000; --grid:#8a9391; --border:rgba(0,0,0,0.6); } :root[data-contrast="high"][data-theme="dark"], :root[data-contrast="high"]:not([data-theme="light"]) { --ink:#ffffff; --ink-2:#ffffff; --ink-3:#ffffff; --field:#ffffff; --grid:#6c78a6; } @media (prefers-color-scheme: dark) { :root[data-contrast="high"]:not([data-theme="light"]) { --ink:#ffffff; --ink-2:#ffffff; --ink-3:#ffffff; --field:#ffffff; } } /* Reduced motion pauses the homepage slide (rules further down) and nothing else; the rest of the site has no motion worth switching off. */ .a11ybtn { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--grid); border-radius:9px; background:var(--surface); color:var(--ink-2); font-size:14px; font-family:inherit; cursor:pointer; transition:border-color .15s ease, color .15s ease; } .a11ybtn:hover { border-color:var(--ink-3); color:var(--ink); } .a11ybtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .a11ybtn svg { width:17px; height:17px; flex:0 0 auto; } .a11ypanel { position:fixed; inset:auto 16px 16px auto; z-index:60; width:min(320px, calc(100vw - 32px)); padding:16px 18px 18px; border:1px solid var(--grid); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lift); } .a11ypanel[hidden] { display:none; } .a11ypanel h2 { margin:0 0 2px; font-size:16px; } .a11ypanel p.hint { margin:0 0 14px; font-size:13px; color:var(--ink-3); } .a11ypanel fieldset { border:0; padding:0; margin:0 0 14px; } .a11ypanel legend { padding:0; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--ink-2); } .a11ypanel .opts { display:flex; gap:6px; flex-wrap:wrap; } .a11ypanel .opts button { flex:1 1 auto; padding:7px 10px; border:1px solid var(--grid); border-radius:8px; background:var(--page); color:var(--ink-2); font-size:13px; font-family:inherit; cursor:pointer; } .a11ypanel .opts button:hover { border-color:var(--ink-3); color:var(--ink); } .a11ypanel .opts button[aria-pressed="true"] { background:var(--raised); border-color:var(--accent); color:var(--accent); font-weight:600; } .a11ypanel .opts button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .a11ypanel .row { display:flex; justify-content:space-between; gap:10px; } .a11ypanel .row button { padding:7px 12px; border:1px solid var(--grid); border-radius:8px; background:var(--page); color:var(--ink-2); font-size:13px; font-family:inherit; cursor:pointer; } .a11ypanel .row button:hover { border-color:var(--ink-3); color:var(--ink); } .a11ypanel .row button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* --------------------------------------------------- footer language choice */ /* The header pill is the primary control, but a language selector in the footer is a convention people actively scroll to look for, and somebody who navigates by landmarks reaches the footer long before they find a 38px control in a toolbar. It is also the one place we can spell the language out -- "Espanol" rather than "ES" -- which is what a reader who cannot read the current language needs to see. Both entries carry lang and hreflang. lang is the accessibility half: a screen reader announces "Espanol" in a Spanish voice instead of reading it as mangled English. hreflang tells a crawler the same thing. */ .footerlang { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--grid); font-size:14px; color:var(--ink-3); } .footerlang .lbl { font-weight:600; color:var(--ink-2); } .footerlang a { color:var(--ink-2); text-decoration:none; } .footerlang a:hover { color:var(--ink); text-decoration:underline; } .footerlang a[aria-current="true"] { color:var(--accent); font-weight:600; } .footerlang a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* ----------------------------------------------------------- language pill */ /* A sibling of the theme toggle, and built to the same measurements: 38px tall, the same border, radius and surface tokens, sitting in the same group. It is not a dropdown, because a menu hides the thing it offers -- a reader who cannot read the current language has to open it to find out the site speaks theirs at all. Unlike the theme toggle it shows BOTH states rather than the one you would switch to. A sun glyph means the same thing in every language; the string "ES" does not, and the person most likely to need this control is exactly the person who cannot read the page it is currently rendered in. No flags. A flag is a country, not a language, and this site's Spanish is written for clinics in the United States -- the Mexican flag would be wrong and the Spanish flag would be wronger. The active half is filled with --raised, not --brand: the palette comment above says the brand colours are used small, as eyebrows and markers, never as a fill. The accent carries the emphasis instead. */ .langtoggle { display:flex; align-items:center; flex:0 0 auto; height:38px; padding:3px; gap:2px; border:1px solid var(--grid); border-radius:10px; background:var(--surface); } .langtoggle a { display:grid; place-items:center; min-width:28px; height:30px; padding:0 7px; border-radius:7px; font-size:12px; font-weight:600; letter-spacing:.02em; line-height:1; color:var(--ink-2); text-decoration:none; transition:background-color .15s ease, color .15s ease; } .langtoggle a:hover { color:var(--ink); text-decoration:none; } .langtoggle a[aria-current="true"] { background:var(--raised); color:var(--ink-2); cursor:default; } .langtoggle a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .burger { display:none; } .burger .x { display:none; } .burger[aria-expanded="true"] .bars { display:none; } .burger[aria-expanded="true"] .x { display:block; } /* ------------------------------------------------------------- mobile menu */ @media (max-width:1100px) { .burger { display:grid; } /* Menu button on the left, at the owner's request. .bar .wrap is a flex row of brand / nav / bartools, so the burger is moved out of the tools group to the front with order, rather than by rewriting the markup on every page. The brand follows it, and the remaining tools stay right. */ .bar .wrap { justify-content:flex-start; } .burger { order:-1; margin-right:2px; } .brand { order:0; } .bartools { order:1; margin-left:auto; display:contents; } .themetoggle, .langtoggle, .accountlogin { order:2; } /* The language pill leads the group (owner's order: language, colour, account), so it carries the auto margin that pushes the whole cluster to the right edge; the two after it just space. */ .langtoggle { margin-left:auto; } .themetoggle { margin-left:8px; } .accountlogin { margin-left:8px; } nav.links { /* Anchor below the actual header. A fixed 64px viewport offset overlapped the header while the offer bar was still above it, because the sticky header had not reached the top of the viewport yet. */ position:absolute; top:100%; left:0; right:0; z-index:19; display:block; padding:8px 0 14px; background:var(--page); border-bottom:1px solid var(--grid); box-shadow:0 18px 34px rgba(8,12,36,.16); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; /* Leave room for the offer bar when the menu opens at the top of a page. It is deliberately conservative after that bar scrolls away; the menu is short, and a little spare room is better than clipping its last row. */ max-height:calc(100vh - 112px); max-height:calc(100dvh - 112px); overflow-y:auto; } nav.links.open { transform:none; opacity:1; pointer-events:auto; } nav.links a { display:block; padding:13px 24px; font-size:17px; color:var(--ink); border-bottom:1px solid var(--grid); } nav.links a:last-child { border-bottom:0; } nav.links a:hover { background:var(--raised); text-decoration:none; } nav.links a[aria-current] { color:var(--accent); font-weight:600; } nav.links a.hide-sm { display:block; } /* Each dropdown owns a full drawer row. Previously .navdrop kept its desktop inline-flex display, so adjacent items shared a line and their panels either vanished or leaked behind the page. */ nav.links > .navdrop { display:grid; grid-template-columns:minmax(0,1fr) 56px; width:100%; border-bottom:1px solid var(--grid); } /* The desktop plate rule (padding 8px 11px, rounded) outranks the plain row rule here, which left the three menu labels 13px short of the other rows (owner, 7 Sep 2026: "not aligned properly on mobile menu"). Every row gets the same inset and no plate in the drawer. */ nav.links > a, nav.links > .navdrop > .navdrop-top { padding:13px 24px; border-radius:0; } nav.links > a:hover, nav.links > .navdrop:hover > .navdrop-top, nav.links > .navdrop:focus-within > .navdrop-top { background:var(--raised); color:var(--ink); } nav.links > .navdrop > .navdrop-top { min-width:0; border-bottom:0; padding-right:8px; } .navdrop-toggle { display:grid; place-items:center; width:56px; min-height:50px; padding:0; border:0; border-left:1px solid var(--grid); background:transparent; color:var(--ink-2); cursor:pointer; } .navdrop-toggle[hidden] { display:none; } .navdrop-toggle:hover { background:var(--raised); color:var(--accent); } .navdrop-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; } .navdrop-toggle-caret { width:18px; height:18px; transition:transform .18s ease; } .navdrop.mobile-open > .navdrop-toggle .navdrop-toggle-caret { transform:rotate(180deg); } /* Flatten the desktop mega-menu into an in-drawer accordion. Artwork and sales copy are useful on a wide hover panel but crowd the phone menu, so mobile keeps the navigational groups and links only. */ .navdrop.mobile-open > .navdrop-panel { position:static; grid-column:1 / -1; display:block; width:auto; min-width:0; min-height:0; margin:0; padding:8px 12px 12px; opacity:1; visibility:visible; transform:none; translate:none; background:var(--raised); background-image:none; border:0; border-top:1px solid var(--grid); border-radius:0; box-shadow:none; will-change:auto; } .navdrop.mobile-open > .navdrop-panel::before, .navdrop.mobile-open > .navdrop-panel::after, .navdrop.mobile-open > .navdrop-panel > .navdrop-promo { display:none; } .navdrop.mobile-open .navdrop-cols { display:block; } .navdrop.mobile-open .navdrop-col { margin:0; } .navdrop.mobile-open .navdrop-panel .navdrop-col .navdrop-group { /* Readable as headings on a phone, not footnotes over the links (owner, 2 Sep 2026: "slightly bigger"). One left edge for every heading and link in the drawer: the desktop rules that nudge the first column of Features and the Who-it's-for directory (4px, 0px) do not apply here, otherwise the columns step right of each other. */ margin:14px 0 10px; padding:0 12px; color:var(--ink); font-size:15px; letter-spacing:.04em; } .navdrop.mobile-open .navdrop-panel .navdrop-col a { padding-left:12px; } .navdrop.mobile-open .navdrop-note { margin:2px 12px 4px; padding:0; font-size:15px; } .navdrop.mobile-open .navdrop-panel a { display:block; min-height:40px; margin:0; padding:6px 32px 6px 12px; border:0; border-radius:8px; font-size:16px; white-space:normal; opacity:1; transform:none; transition:background-color .12s ease, color .12s ease; } .navdrop.mobile-open .navdrop-panel a:hover, .navdrop.mobile-open .navdrop-panel a:focus-visible { background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent); text-decoration:none; transform:none; } } @media (max-width:460px) { /* Five header controls do not fit at their desktop measurements on a 320-390px phone. Keep every control, but tighten the furniture. */ .bar .wrap { padding-inline:10px; gap:4px; } .brand img { height:31px; } .accountlogin, .themetoggle, .burger { width:34px; height:34px; border-radius:9px; } .burger { margin-right:0; } /* The language pill leads the right-hand group, so it keeps the auto margin that pushes the group to the edge; the two after it just space. */ .langtoggle { height:34px; padding:2px; gap:1px; margin-left:auto; } .langtoggle a { min-width:26px; height:28px; padding-inline:5px; } .themetoggle { margin-left:2px; } .accountlogin { margin-left:2px; } } @media (prefers-reduced-motion: reduce) { nav.links, .navdrop-toggle-caret { transition:none; } } /* -------------------------------------------------------- theme showcase */ .swatchrow { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; } .swatchrow span { width:26px; height:26px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 1px 3px rgba(11,15,14,.16); } .themegrid { display:grid; gap:20px; margin-top:36px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); } .theme { position:relative; margin:0; overflow:hidden; background:var(--surface); border:1px solid var(--grid); border-radius:15px; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .theme:hover { transform:translateY(-3px); border-color:var(--accent-theme); box-shadow:0 12px 28px rgba(11,15,14,.12); } .theme .tart { display:block; aspect-ratio:16 / 10; overflow:hidden; background:var(--raised); } .theme .tart img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.7,.28,1); } .theme:hover .tart img { transform:scale(1.045); } @media (prefers-reduced-motion: reduce) { .theme, .theme .tart img { transition:none; } .theme:hover { transform:none; } .theme:hover .tart img { transform:none; } } .theme figcaption { display:block; padding:15px 17px 17px; } .theme .tname { display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:600; color:var(--ink); } .theme .tname .dot { width:11px; height:11px; flex:0 0 auto; border-radius:50%; background:var(--accent-theme); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-theme) 18%, transparent); } .theme .tdesc { display:block; margin-top:7px; font-size:14px; line-height:1.55; color:var(--ink-3); } .theme .tflag { position:absolute; top:12px; right:12px; z-index:2; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(12,18,42,.62); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.24); } .theme .tflag.prem { background:rgba(12,18,42,.5); } /* A row of phones, each turned slightly more than the last, so a set of screens reads as a set rather than a contact sheet. The devices overlap by a negative gap; z-index counts down from the middle so the near ones sit in front the way they would on a desk. */ .stage.fan { gap:clamp(-30px,-2.2vw,-10px); align-items:center; perspective:2200px; } .stage.fan .dev.phone { width:clamp(112px,12.5vw,166px); } .stage.fan .dev:nth-child(1) { --rot:32deg; --tilt:3deg; --lift:16px; --z:-140px; z-index:1; } .stage.fan .dev:nth-child(2) { --rot:19deg; --tilt:2deg; --lift:2px; --z:-70px; z-index:2; } .stage.fan .dev:nth-child(3) { --rot:0deg; --tilt:0deg; --lift:-16px; --z:0; z-index:3; } .stage.fan .dev:nth-child(4) { --rot:-19deg; --tilt:2deg; --lift:2px; --z:-70px; z-index:2; } .stage.fan .dev:nth-child(5) { --rot:-32deg; --tilt:3deg; --lift:16px; --z:-140px; z-index:1; } @media (max-width:1100px) { .stage.fan { gap:-14px; } .stage.fan .dev:nth-child(1), .stage.fan .dev:nth-child(5) { display:none; } } @media (max-width:520px) { .stage.fan .dev:nth-child(2), .stage.fan .dev:nth-child(4) { display:none; } .stage.fan .dev.phone { width:min(46vw,190px); } } /* A quieter rig for use inside a split, where the artwork backdrop would fight the text beside it. */ .rig.plain { background:transparent; box-shadow:none; padding:0; overflow:visible; } .rig.plain::before, .rig.plain::after { display:none; } .rig.plain .stage { perspective:1500px; } /* --------------------------------------------------------- reversed mark */ /* The wordmark's ink is near-black, so on the dark page it disappears into the header. Same mark, same geometry, same green and blue bars -- only the ink is reversed, which is what a reversed lockup is for. */ /* ONE IMAGE IN THE PAGE, NOT TWO. Google's result card was showing the reversed mark on a white tile: white ink, white bar, two bars visible -- "our logo is 2 lines". A crawler renders in light mode and indexes every it finds, hidden or not, so the reversed version is no longer an at all: dark mode swaps the light image's source with `content`, which browsers apply and crawlers never see. The schema.org logo is a light PNG on solid white for the same reason. */ .brand .rev { display:none; } :root[data-theme="dark"] .brand .std { content: url("logblues-wordmark-reversed.svg?v=7279ec1869"); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .std { content: url("logblues-wordmark-reversed.svg?v=7279ec1869"); } } /* Sizes tuned so three angled devices fit inside the rig's padding at 1080px without the outer two being sliced off by overflow:hidden. */ .dev.desktop { width:clamp(280px,32vw,404px); } .dev.laptop { width:clamp(230px,26vw,330px); } .dev.tablet { width:clamp(170px,19vw,246px); } .dev.phone { width:clamp(96px,11vw,142px); } /* The fan is one device type repeated, so it can run wider. */ .stage.fan .dev.tablet { width:clamp(128px,15vw,208px); } .rig .cap .rignote { margin-top:14px; font-size:14px; color:rgba(255,255,255,.62); } /* --------------------------------------------------- rig sizing, corrected */ /* Earlier values let the outer two devices run under the rig's overflow:hidden at 1080px. These are sized so the widest arrangement clears the padding with room to spare. */ .rig { padding:clamp(34px,5vw,64px) clamp(14px,2.6vw,34px); } .dev.desktop { width:clamp(240px,27vw,350px); } .dev.laptop { width:clamp(200px,22vw,280px); } .dev.tablet { width:clamp(150px,16vw,205px); } .dev.phone { width:clamp(94px,10vw,132px); } /* The fan overlaps its devices. `gap` cannot take a negative length -- the declaration is simply dropped -- so the overlap has to come from margins, and the angles have to be steep enough to read as a fan rather than a row. */ .stage.fan { gap:0; align-items:center; perspective:2400px; } .stage.fan .dev + .dev { margin-left:-5.5%; } .stage.fan .dev.tablet { width:clamp(150px,19vw,262px); } .stage.fan .dev:nth-child(1) { --rot:44deg; --tilt:6deg; --lift:22px; --z:-190px; z-index:1; } .stage.fan .dev:nth-child(2) { --rot:27deg; --tilt:4deg; --lift:4px; --z:-92px; z-index:2; } .stage.fan .dev:nth-child(3) { --rot:0deg; --tilt:0deg; --lift:-24px; --z:40px; z-index:3; } .stage.fan .dev:nth-child(4) { --rot:-27deg; --tilt:4deg; --lift:4px; --z:-92px; z-index:2; } .stage.fan .dev:nth-child(5) { --rot:-44deg; --tilt:6deg; --lift:22px; --z:-190px; z-index:1; } .stage.fan .dev > .shell { transform-origin:50% 50%; } /* Two rigs in a row would otherwise show the same picture twice. */ .rig.alt::before { background-position:center 78%; transform:scaleX(-1); } /* --------------------------------------------------------- fan, sized right */ /* Five devices at width w overlapping by f take 5w - 4fw across. At the rig's usable ~968px that means w must stay near 200px with a 12% overlap, or the outer two run off both edges -- which is what was happening. */ .stage.fan .dev.tablet { width:clamp(118px,14.5vw,200px); } .stage.fan .dev + .dev { margin-left:-12%; } /* The middle screen is the one you are meant to read. */ .stage.fan .dev:nth-child(3) .shell { scale:1.1; } .stage.fan .dev:nth-child(3) { --lift:-18px; } /* Give the fan's backdrop a crop with sky behind the devices and water behind the caption, so neither sits on a busy part of the picture. */ .rig.alt::before { background-position:center 30%; } .rig.alt::after { background: radial-gradient(130% 80% at 50% 118%, rgba(10,14,42,.74) 0%, rgba(10,14,42,0) 58%), linear-gradient(182deg, rgba(10,14,42,.16) 0%, rgba(10,14,42,.06) 34%, rgba(10,14,42,.62) 100%); } /* ------------------------------------------------------------ fan, opened */ /* At 44 degrees the outer two screens foreshortened to almost nothing and the 12% overlap finished them off -- five screens read as three. Gentler angles and a smaller overlap keep all five legible as separate screens, which is the only reason to show five. */ .stage.fan .dev.tablet { width:clamp(132px,16vw,200px); } .stage.fan .dev + .dev { margin-left:-4%; } .stage.fan .dev:nth-child(1) { --rot:31deg; --tilt:5deg; --lift:20px; --z:-150px; } .stage.fan .dev:nth-child(2) { --rot:17deg; --tilt:3deg; --lift:4px; --z:-70px; } .stage.fan .dev:nth-child(3) { --rot:0deg; --tilt:0deg; --lift:-20px; --z:50px; } .stage.fan .dev:nth-child(4) { --rot:-17deg; --tilt:3deg; --lift:4px; --z:-70px; } .stage.fan .dev:nth-child(5) { --rot:-31deg; --tilt:5deg; --lift:20px; --z:-150px; } .stage.fan .dev:nth-child(3) .shell { scale:1.14; } /* =========================================================================== CONTRAST CORRECTIONS --------------------------------------------------------------------------- Measured with _build/check_contrast.py rather than eyeballed. Six things failed WCAG AA and are corrected here: --ink-3 at 3.10:1 secondary text was decorative-grey, not readable text --leaf at 3.20:1 the green eyebrow, same problem white on the dark --accent (1.93:1) -- a bright cyan button cannot carry white text; in dark mode the label goes near-black instead the offer bar's two green stops (4.10 and 3.41) against its white text form-input borders, which need 3:1 as interactive boundaries Hue and saturation are preserved in every case; only lightness moved, so nothing changes colour, it just stops being too pale to read. ======================================================================== */ :root { --ink-3:#525c5a; --leaf:#0a68a8; --field:#83938f; --on-accent:#ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-3:#939dc4; --leaf:#5cc2f0; --field:#5164b7; --on-accent:#0a1029; } } :root[data-theme="dark"] { --ink-3:#939dc4; --leaf:#5cc2f0; --field:#5164b7; --on-accent:#0a1029; } :root[data-theme="dark"] a:hover { color:#fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a:hover { color:#fff; } } /* Anything filled with --accent takes the matching label colour. White on a pale cyan is the single worst pairing in the dark palette. */ .signup button, .sc-ask button, .startbox .signup button { color:var(--on-accent); } :root[data-theme="dark"] .get, :root[data-theme="dark"] a.get { color:var(--on-accent); } /* The inverted button keeps its ink in dark mode (white text, white border); the solid buttons above keep --on-accent. */ :root[data-theme="dark"] a.get.soft { color:var(--ink); } :root[data-theme="dark"] a.get.soft:hover { color:#fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .get, :root:not([data-theme="light"]) a.get { color:var(--on-accent); } :root:not([data-theme="light"]) a.get.soft { color:var(--ink); } :root:not([data-theme="light"]) a.get.soft:hover { color:var(--page); } } /* Decorative hairlines can stay quiet; the edge of a control someone has to find and click cannot. */ .signup input[type="email"], .sc-ask input { border-color:var(--field); } /* Cards size to their own text instead of stretching to the tallest in the row, which was leaving a pale strip under the shorter descriptions. */ .themegrid { align-items:start; } /* ------------------------------------------------- disclosure hit area fix */ /* The padding used to sit on
, which meant the 17px above and below every summary belonged to the container rather than the control. Clicking there — including on plenty of the whitespace beside the + — did nothing, because only the summary toggles. Moving the padding onto the summary makes the entire row the target, edge to edge. The row also now lights up on hover, so it reads as clickable before you find that out by clicking. */ .faq details { padding:0; } .faq summary { z-index:1; padding:18px 20px 18px 8px; margin:-2px -20px -2px -8px; border-radius:11px; transition:background-color .14s ease; } .faq summary:hover { background:color-mix(in srgb, var(--accent) 6%, var(--page)); } .faq summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; background:color-mix(in srgb, var(--accent) 9%, var(--page)); } /* The answer needs the breathing room the container padding used to give it. */ .faq details[open] > :last-child { margin-bottom:17px; } .feature-detail-link { margin-top:12px; } .feature-detail-link a { display:inline-flex; align-items:center; width:fit-content; color:var(--accent); font-size:15.5px; font-weight:800; text-decoration:none; transition:color .22s ease, transform .22s ease; } .feature-detail-link a:hover, .feature-detail-link a:focus-visible { color:var(--brand); transform:translateX(3px); } :root[data-theme="dark"] .feature-detail-link a:hover, :root[data-theme="dark"] .feature-detail-link a:focus-visible { color:#fff; } @media (prefers-reduced-motion: reduce) { .faq summary { transition:none; } } @media (prefers-reduced-motion: reduce) { .feature-detail-link a { transition:none; } .feature-detail-link a:hover { transform:none; } } /* ------------------------------------------------------- store badges */ /* "Coming soon" rather than a live Play link, because the listing does not exist yet and a badge that 404s is worse than one that is honest. Swap the href and drop .soon when it goes live. */ .stores { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:26px; } .storebadge { display:inline-flex; align-items:center; gap:11px; padding:11px 18px 11px 15px; border-radius:12px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--grid); transition:border-color .15s ease, transform .15s ease; } .storebadge:hover { text-decoration:none; border-color:var(--ink-3); transform:translateY(-1px); } .storebadge svg { width:24px; height:24px; flex:0 0 auto; } .storebadge .lines { display:block; line-height:1.25; } .storebadge .small { display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; } .storebadge .big { display:block; font-size:16px; font-weight:700; } .storebadge.soon { cursor:default; opacity:.92; } .storebadge.soon:hover { transform:none; border-color:var(--grid); } .storebadge .tag { margin-left:4px; padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--leaf); } /* --------------------------------------------------- Blues musical-note mark */ /* The note distinguishes the assistant from the LogBlues product wordmark. */ .notemark { display:inline-flex; align-items:center; gap:6px; } .notemark svg { width:14px; height:14px; flex:0 0 auto; color:var(--leaf); } nav.links a .notemark svg { width:13px; height:13px; } /* The old mood preview was one dark English screenshot. This is the same interface as live HTML, so it follows the selected theme, translates with the page, and lets each register demonstrate its state. */ .blues-mood-preview { position:relative; overflow:hidden; padding:34px 40px 30px; min-height:420px; color:var(--ink-2); background: radial-gradient(circle at 84% 9%, color-mix(in srgb,var(--brand) 11%,transparent) 0 15%, transparent 15.2%), radial-gradient(circle at 91% 88%, color-mix(in srgb,var(--plum) 11%,transparent) 0 19%, transparent 19.2%), color-mix(in srgb,var(--surface) 94%,var(--brand)); } .blues-mood-preview h3 { margin:0 0 24px; font-size:clamp(28px,4vw,42px); font-weight:500; } .blues-mood-status { display:flex; align-items:center; gap:16px; width:min(72%,720px); padding:17px 22px; border:1px solid color-mix(in srgb,var(--brand) 45%,var(--grid)); border-radius:16px; background:color-mix(in srgb,var(--surface) 88%,var(--brand)); font-size:clamp(17px,2.4vw,25px); color:var(--ink-2); transition:border-color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22,1,.36,1); } .blues-mood-status.is-changing { transform:translateY(-2px); box-shadow:var(--shadow-lift); } .blues-mood-note { display:grid; place-items:center; flex:0 0 auto; width:54px; height:54px; border-radius:50%; color:#fff; font-size:29px; line-height:1; background:linear-gradient(145deg,var(--brand),var(--plum)); box-shadow:0 10px 22px -14px var(--brand); } .blues-mood-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 14px; margin-top:28px; } .blues-mood-chip { min-height:44px; padding:8px 11px; border-radius:999px; cursor:pointer; border:1px solid color-mix(in srgb,var(--brand) 58%,var(--grid)); background:color-mix(in srgb,var(--surface) 96%,var(--brand)); color:var(--ink-2); font:inherit; font-size:14px; font-weight:600; transition:background-color .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22,1,.36,1); } .blues-mood-chip:hover, .blues-mood-chip:focus-visible, .blues-mood-chip[aria-pressed="true"] { border-color:var(--brand); color:var(--accent); background:color-mix(in srgb,var(--surface) 82%,var(--brand)); box-shadow:0 9px 20px -15px var(--brand); transform:translateY(-2px); } .blues-mood-chip:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .blues-mood-foot { margin:30px 0 0; padding-top:22px; border-top:1px solid var(--grid); color:var(--ink-3); font-size:14px; } @media (max-width:700px) { .blues-mood-preview { padding:26px 22px 24px; min-height:0; } .blues-mood-status { width:100%; } .blues-mood-chips { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* --------------------------------------------- email capture inside the chat */ .sc-capture-note { margin:12px 0 0; font-weight:600; } .sc-capture { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .sc-capture input[type="email"] { flex:1 1 100%; min-width:0; padding:10px 13px; font:inherit; font-size:15px; color:var(--ink); background:var(--page); border:1px solid var(--field); border-radius:10px; } .sc-capture input[type="email"]:focus { outline:none; border-color:var(--accent); } .sc-capture button { flex:1 1 100%; padding:10px 16px; border:0; border-radius:10px; cursor:pointer; background:var(--accent); color:var(--on-accent); font:inherit; font-size:15px; font-weight:600; } .sc-capture button:hover { filter:brightness(1.08); } /* --------------------------------------------- disclosure rows, more obvious */ /* The hit area was already the full row, but there was nothing to tell you that before you clicked. Now the row lifts on hover, the marker grows and takes a tinted disc, and the cursor is a pointer across the whole bar. */ .faq summary { position:relative; cursor:pointer; } .faq summary::after { content:""; display:block; width:30px; height:30px; margin-right:-4px; border-radius:50%; background-color:color-mix(in srgb, var(--accent) 12%, transparent); background-image:linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor); background-position:center; background-size:12px 2px, 2px 12px; background-repeat:no-repeat; transition:background-color .14s ease, transform .14s ease; } .faq summary:hover::after { background-color:color-mix(in srgb, var(--accent) 26%, transparent); transform:scale(1.08); } .faq details[open] summary::after { content:""; background-color:color-mix(in srgb, var(--accent) 20%, transparent); background-image:linear-gradient(currentColor,currentColor); background-size:12px 2px; } @media (prefers-reduced-motion: reduce) { .faq summary::after { transition:none; } } @media (prefers-reduced-motion: reduce) { .get, .producthead .blues-icon-interactive::before, .producthead .blues-icon-interactive::after, .producthead .blues-icon-interactive .appicon, .blues-mood-status, .blues-mood-chip { transition:none; transform:none !important; } } /* ------------------------------------------------ selective card artwork Each card now uses purposeful artwork with restrained overlays so the row remains coherent rather than reading as three competing billboards. */ .today .art img { display:none; } .today .art { background:#111c33; } .features .today:nth-child(2) .art { background:#132538; } .features .today:nth-child(3) .art { background:#1a1b33; } .today .art::after { background:linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 55%); } .features .clinic-arrival .art img, .features .blues-brand .art img, .features .today:nth-child(3) .art img { display:block; } .features .clinic-arrival .art img { object-position:center 46%; } .features .today:nth-child(3) .art img { object-fit:cover; object-position:center; } .features .clinic-arrival .art::after { background:linear-gradient(to bottom, rgba(5,9,18,.04) 0%, rgba(5,9,18,.18) 42%, rgba(5,9,18,.88) 100%); } .features .blues-brand .art::after { background:linear-gradient(to bottom, rgba(5,9,18,.02) 0%, rgba(5,9,18,.12) 48%, rgba(5,9,18,.78) 100%); } .features .today:nth-child(3) .art::after { background:linear-gradient(to bottom, rgba(5,9,18,.01) 0%, rgba(5,9,18,.08) 58%, rgba(5,9,18,.48) 100%); } /* The three card footers carried the same app icon three times over, which read as a row of identical logos rather than as three products. The name already says which app it is. */ .today .app { grid-template-columns:1fr auto; } .today .app .appicon { display:none; } /* ------------------------------------------------- homepage hero artwork */ /* The right half of the hero was empty. It has been through three answers: the Founders landscape photograph, which was the same file .rig already used for the device mockups so the picture appeared three times; a drawn mountain silhouette, which read as landscape photography rather than clinic; and a drawn schedule column, which was honest but plain. It is now its own artwork, painted once per theme -- see .hero-art below. The inline SVG that used to live in the markup was removed with it. It had been left behind when the CSS moved to the photographs, and with its fill rules gone it fell back to solid black: a black clock and a stack of grey bars sitting on top of the picture. Scoped to .hero-band, never .band -- forty-eight pages share that class. */ .hero-band { position:relative; overflow:hidden; } .hero-band > .wrap { position:relative; z-index:1; } /* Hero copy stops before the artwork. The text ran the full width of the band and straight across the picture, so the last third of every line sat on mountains and flowers (owner, 8 Sep 2026: "push over after 2 columns ... its perfect if it fits on 3 or 4 lines"). The cap is on the column, not the sentence: three lines is the target, four the limit, and any lede that still runs longer than four gets its copy trimmed rather than its measure widened. Scoped by `.hero-art + .wrap` so it only applies where there is a picture to avoid -- a hero band with no artwork keeps the full width it has always had. The artwork is masked transparent for its first third, so copy ending at 56% is over the faded part, not the painting. */ .hero-band > .hero-art + .wrap > .eyebrow, .hero-band > .hero-art + .wrap > h1, .hero-band > .hero-art + .wrap > .lede, .hero-band > .hero-art + .wrap > p:not([class]), .hero-band > .hero-art + .wrap > .note-line, .hero-band > .hero-art + .wrap > ul.facts, /* The security page puts its shield and its heading in a .producthead, so the heading is not a direct child of the wrap and escaped the cap above. */ .hero-band > .hero-art + .wrap > .producthead { max-width:min(56%, 680px); } @media (max-width:900px) { /* The artwork is out of the way at this width, so the copy takes the room. */ .hero-band > .hero-art + .wrap > .eyebrow, .hero-band > .hero-art + .wrap > h1, .hero-band > .hero-art + .wrap > .lede, .hero-band > .hero-art + .wrap > p:not([class]), .hero-band > .hero-art + .wrap > .note-line, .hero-band > .hero-art + .wrap > ul.facts, .hero-band > .hero-art + .wrap > .producthead { max-width:none; } } /* The homepage alternates between two clean source stills from the approved hero shoot. The swap is deliberately discrete: no crossfade means faces never overlap, morph or ghost during the change. */ .hero-band--video .hero-video-poster, .hero-band--video .hero-video, .hero-band--video .hero-video-wash { position:absolute; inset:0; height:100%; pointer-events:none; } .hero-band--video .hero-video-poster { /* Extend the photograph beneath the opaque part of the wash. At 68% its left edge landed exactly where the wash began to clear, exposing a hard vertical seam on desktop. The subject remains composed on the right. */ z-index:0; inset:0 0 0 auto; width:82%; background-position:center 44%; background-size:cover; background-repeat:no-repeat; } .hero-slide--woman { opacity:1; background-image:url("hero-still-woman-v4.webp"); animation:hero-still-woman 24s ease-in-out infinite; } .hero-slide--man { z-index:0; opacity:0; animation:hero-still-man 24s ease-in-out infinite; } .hero-slide--team { z-index:0; opacity:0; animation:hero-still-team 24s ease-in-out infinite; } /* The second and third stills stay invisible for the first 7.8 s of the cycle, yet as plain CSS backgrounds all three (about 380 KB) downloaded before the hero text could count as painted. site.js adds this class once the page has loaded, so the first still and the copy arrive first. */ :root.hero-slides-ready .hero-slide--man { background-image:url("hero-still-man-v4.webp"); } :root.hero-slides-ready .hero-slide--team { background-image:url("hero-still-team-v5.webp"); } /* Slide three is the family visit (owner, 7 Sep 2026: "3rd slide was supposed to go in between"), in a day and a dusk version so it sits with the theme like the other pages' heroes; the team is slide four. */ .hero-slide--visit { z-index:0; opacity:0; animation:hero-still-visit 24s ease-in-out infinite; } :root.hero-slides-ready .hero-slide--visit { background-image:url("hero-still-visit-light.webp?v=22c57560d4"); } @media (prefers-color-scheme: dark) { :root.hero-slides-ready:not([data-theme="light"]) .hero-slide--visit { background-image:url("hero-still-visit-dark.webp?v=f31a1f9d12"); } } :root.hero-slides-ready[data-theme="dark"] .hero-slide--visit { background-image:url("hero-still-visit-dark.webp?v=f31a1f9d12"); } /* The wash is heaviest at the left, and the nurse standing there was losing to it (owner, 7 Sep 2026: "I want to see more of the nurse, she is too faded"). This still zooms a little and anchors right, so the group sits clear of the wash instead of under it. */ @media (min-width:701px) { .hero-band--video > .hero-slide--visit.hero-video-poster { background-size:auto 124% !important; background-position:right center !important; } } /* The dark stills are zoomed to 115% and anchored at 81% (the dark rules below); the dusk family painting keeps its provider at the far right, so it shows whole, anchored to the right edge. */ @keyframes hero-still-woman { 0%,21.5% { opacity:1; } 25%,96.5% { opacity:0; } 100% { opacity:1; } } @keyframes hero-still-man { 0%,21.5% { opacity:0; } 25%,46.5% { opacity:1; } 50%,100% { opacity:0; } } @keyframes hero-still-visit { 0%,46.5% { opacity:0; } 50%,71.5% { opacity:1; } 75%,100% { opacity:0; } } @keyframes hero-still-team { 0%,71.5% { opacity:0; } 75%,96.5% { opacity:1; } 100% { opacity:0; } } 75%,96% { opacity:1; } 100% { opacity:0; } } 77%,96% { opacity:1; } 100% { opacity:0; } } 70%,94% { opacity:1; } 100% { opacity:0; } } .hero-band--video .hero-video { z-index:0; inset:0 0 0 auto; width:82%; display:block; border:0; object-fit:cover; object-position:center 44%; } .hero-band--video .hero-video-wash { z-index:0; width:100%; background: linear-gradient(to right, var(--page) 0%, var(--page) 18%, transparent 78%), linear-gradient(to bottom, transparent 56%, color-mix(in srgb,var(--page) 68%,transparent) 78%, color-mix(in srgb,var(--page) 92%,transparent) 100%); } /* hipaa-compliance.html carries a long lede over a bright photograph, so its wash stays opaque further across and the paragraph is capped rather than running to the busy side of the picture (7 Sep 2026). */ .hero-band--hipaa .hero-video-wash { background: linear-gradient(to right, var(--page) 0%, var(--page) 40%, color-mix(in srgb,var(--page) 62%,transparent) 66%, transparent 94%), linear-gradient(to bottom, transparent 52%, color-mix(in srgb,var(--page) 72%,transparent) 78%, color-mix(in srgb,var(--page) 94%,transparent) 100%); } .hero-band--hipaa .lede { max-width:54ch; } .hero-band--hipaa h1 { max-width:22ch; } /* The hero's opening paragraph stops short of the photograph rather than running across the subject's face (7 Sep 2026). */ .hero-band--video .lede { max-width:68ch; } .hero-band--video ul.facts li { color:var(--ink-2); font-weight:500; } @media (max-width:700px) { .hero-band--video .hero-video, .hero-band--video .hero-video-poster { inset:4% -4% auto auto; width:64%; height:88%; object-position:78% center; background-position:78% center; } .hero-band--video .hero-video-wash { background: linear-gradient(to right, color-mix(in srgb,var(--page) 96%,transparent) 0%, color-mix(in srgb,var(--page) 88%,transparent) 36%, color-mix(in srgb,var(--page) 58%,transparent) 58%, color-mix(in srgb,var(--page) 18%,transparent) 80%, transparent 100%), linear-gradient(to bottom, transparent 54%, color-mix(in srgb,var(--page) 72%,transparent) 78%, color-mix(in srgb,var(--page) 94%,transparent) 100%); } } :root[data-motion="reduced"] .hero-band--video .hero-video, :root[data-motion="reduced"] .hero-slide--man, :root[data-motion="reduced"] .hero-slide--team, :root[data-motion="reduced"] .hero-slide--visit { display:none; } :root[data-motion="reduced"] .hero-slide--woman { opacity:1; animation:none; } @media (prefers-reduced-motion:reduce) { .hero-slide--woman { opacity:1; animation:none; } .hero-slide--man, .hero-slide--visit, .hero-slide--team { display:none; animation:none; } } .hero-art { position:absolute; inset:0 0 0 auto; width:min(62%, 860px); pointer-events:none; z-index:0; /* The Founders Edition landscape, the same artwork the product wears. It replaced an inline SVG of a schedule column: that drawing inherited `color` and so needed no second asset, which was the right trade while there was no artwork. There is now, in both themes, painted with its left side already falling away to nothing so the words have somewhere quiet to sit. */ /* Each page names its own pair through these two variables; everything else about the artwork -- size, position, mask, both dark states -- is shared. Adding a page is two lines in a modifier class, not a copy of this block. These defaults are the homepage's. */ --hero-light:url("founders-light.webp?v=202608311652"); --hero-dark:url("founders-dark.webp?v=202608311652"); /* Where the crop sits. `cover` fills the panel and throws away the rest, so a picture whose subject is low in the frame loses it to the bottom edge -- which is what happened on the download page, where the tree was cropped away and only sky was left. Per page, like the images. */ --hero-pos:right center; background:var(--hero-light) var(--hero-pos) / cover no-repeat; /* The mask does the melting-into-the-page part, left into the text and down into the section border, so the artwork never has a visible edge. It matters more here than it did for the drawing: a photograph with a hard left edge reads as a pasted rectangle. */ -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 34%, #000 74%), linear-gradient(to bottom, #000 66%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 34%, #000 74%), linear-gradient(to bottom, #000 66%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* Dark theme gets its own painting rather than a filtered one: the dusk version is a different picture, not the day one dimmed. Both dark states are covered -- the media query for a phone set to dark, and the explicit toggle -- because this site supports both and a rule that only handles one leaves half the readers looking at a daylit lake on a navy page. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-art { background-image:var(--hero-dark); } } :root[data-theme="dark"] .hero-art { background-image:var(--hero-dark); } /* Per page, from here down. Same lake, a different vantage -- the hero and the .rig mockups must never show the same frame twice. */ .hero-art--logblues { --hero-light:url("hero-logblues-light.webp?v=202608311652"); --hero-dark:url("hero-logblues-dark.webp?v=202608311652"); } .hero-art--download { --hero-light:url("hero-download-light.webp?v=202608311652"); --hero-dark:url("hero-download-dark.webp?v=202608311652"); --hero-pos:right bottom; /* The download hero is 860x890 -- nearly square -- while the painting is 1.777 wide, so `cover` scales it by HEIGHT and crops the width. The whole image height was already on the page; the tree was not missing, it was behind the email-capture card, which covers the lower half of the band. Vertical anchoring could never have fixed that, because there was no vertical crop to move. Ending the artwork above the card is what fixes it: a shorter panel means `cover` scales the picture down, and the tree rises into the part of the hero anyone actually sees. */ bottom:auto; height:clamp(300px, 42vw, 540px); } .hero-art--assistant { --hero-light:url("hero-assistant-light.webp?v=202608311652"); --hero-dark:url("hero-assistant-dark.webp?v=202608311652"); } .hero-art--patient-replies { --hero-light:url("hero-patient-replies-light.webp?v=20260902"); --hero-dark:url("hero-patient-replies-dark.webp?v=20260902"); } .hero-art--who { --hero-light:url("hero-who-light.webp?v=202608311652"); --hero-dark:url("hero-who-dark.webp?v=202608311652"); } .hero-art--articles { --hero-light:url("hero-articles-light.webp?v=202608311652"); --hero-dark:url("hero-articles-dark.webp?v=202608311652"); } .hero-art--pricing { --hero-light:url("hero-pricing-light.webp?v=202608311652"); --hero-dark:url("hero-pricing-dark.webp?v=202608311652"); } .hero-art--account { --hero-light:url("hero-account-light.webp?v=202608311652"); --hero-dark:url("hero-account-dark.webp?v=202608311652"); } .hero-art--jp { --hero-light:url("hero-jp-light.webp?v=202608311652"); --hero-dark:url("hero-jp-dark.webp?v=202608311652"); } .hero-art--why { --hero-light:url("hero-why-light.webp?v=202608311652"); --hero-dark:url("hero-why-dark.webp?v=202608311652"); } .hero-art--features { --hero-light:url("hero-features-light.webp?v=202608311652"); --hero-dark:url("hero-features-dark.webp?v=202608311652"); } .hero-art--scenarios { --hero-light:url("hero-scenarios-light.webp?v=202608311652"); --hero-dark:url("hero-scenarios-dark.webp?v=202608311652"); } .hero-art--privacy { --hero-light:url("hero-privacy-light.webp?v=202608311652"); --hero-dark:url("hero-privacy-dark.webp?v=202608311652"); } .hero-art--security { --hero-light:url("hero-security-light.webp?v=202608311652"); --hero-dark:url("hero-security-dark.webp?v=202608311652"); } .hero-art--themes { --hero-light:url("hero-themes-light.webp?v=202608311652"); --hero-dark:url("hero-themes-dark.webp?v=202608311652"); } .hero-art--newsroom { --hero-light:url("hero-newsroom-light.webp?v=202608311652"); --hero-dark:url("hero-newsroom-dark.webp?v=202608311652"); } /* thanks.html was the last major page with no artwork, which is a poor place for it: someone reaches it seconds after handing over their email, and it was the plainest page on the site. */ .hero-art--thanks { --hero-light:url("hero-thanks-light.webp?v=202608311652"); --hero-dark:url("hero-thanks-dark.webp?v=202608311652"); } .hero-art--contact { --hero-light:url("hero-contact-light.webp?v=202608311652"); --hero-dark:url("hero-contact-dark.webp?v=202608311652"); --hero-pos:right 32%; } /* The shared wash for the interior pages -- features, scenarios, articles. They already carry their own photograph below the headline, so a painting here would be a second picture competing with the first. This is the site's accent colours as soft overlapping light, with no subject to look at. */ /* A portrait plate, for title blocks that are only a few lines deep. Every other modifier here names a landscape picture, which `cover` then crops to a strip. On a block this shallow that threw the pebbles off the bottom and left plain sky. This artwork is painted tall for exactly that box, so the shore is still in frame when the block is a headline, a pill and four lines. Used by the scenario pages and by the feature pages whose photograph now sits below the title rather than inside it. */ .hero-art--tall { --hero-light:url("hero-scenario-light-landscape-v2.webp"); --hero-dark:url("hero-scenario-dark-landscape-v2.webp"); /* Centre, not top. `cover` on a portrait plate in a shallow box takes a horizontal strip, and the top of this painting is empty sky -- the shoreline a reader is meant to see is halfway down. */ --hero-pos:right center; } /* Real clinic lifestyle heroes for interior pages that previously reused the same moonlit landscape. Each modifier supplies a light/dark photograph; the shared hero mask keeps the copy side quiet and the people on the right. */ .hero-art--clinic { --hero-pos:right center; } /* The failsafes page had been borrowing the moonlit landscape. It now shows a finished backup on a laptop, which is what the page is about. The sources are square and the band is wide and shallow, so they were cropped to the band rather than left for `cover` to take a strip out of (7 Sep 2026). */ .hero-art--failsafes { --hero-light:url("hero-failsafes-light.webp"); --hero-dark:url("hero-failsafes-dark.webp"); --hero-pos:right center; } .hero-art--clinic-billing { --hero-light:url("hero-clinic/billing_staff_question_light-v2.webp"); --hero-dark:url("hero-clinic/billing_staff_question_dark-v2.webp"); } .hero-art--clinic-insurance { --hero-light:url("hero-clinic/insurance_claim_handoff_light-v2.webp"); --hero-dark:url("hero-clinic/insurance_claim_handoff_dark-v2.webp"); } .hero-art--clinic-payment-processing { --hero-light:url("hero-clinic/modern_clinic_reception_consultation.webp"); --hero-dark:url("hero-clinic/modern_clinic_reception_payment.webp"); } .hero-art--clinic-practice-launch { --hero-light:url("hero-clinic/modern_clinic_reception_with_smiling_doctor.webp"); --hero-dark:url("hero-clinic/modern_blue_purple_clinic_welcome.webp"); } .hero-art--clinic-services { --hero-light:url("hero-clinic/smiling_doctor_with_tablet_in_modern_clinic.webp"); --hero-dark:url("hero-clinic/modern_reception_consultation.webp"); } .hero-art--clinic-plastic-surgery { --hero-light:url("hero-clinic/luxury_aesthetic_consultation_in_a_spa_clinic.webp"); --hero-dark:url("hero-clinic/luxury_spa_consultation_in_moody_blue_light.webp?v=20260902"); } .hero-art--clinic-dialysis { --hero-light:url("hero-clinic/dialysis_conversation_team_light-v2.webp"); --hero-dark:url("hero-clinic/dialysis_conversation_team_dark-v2.webp"); } .hero-art--clinic-eye-care { --hero-light:url("hero-clinic/modern_clinic_lobby_doctor_with_tablet.webp"); --hero-dark:url("hero-clinic/eye_care_single_eye_monitor_dark-v3.webp"); } .hero-art--clinic-internal-medicine { --hero-light:url("hero-clinic/internal_medicine_older_patient_light-v2.webp"); --hero-dark:url("hero-clinic/internal_medicine_older_patient_dark-v2.webp"); } .hero-art--clinic-mens-health { --hero-light:url("hero-clinic/hair_consultation_in_a_modern_clinic.webp"); --hero-dark:url("hero-clinic/high_tech_scalp_consultation_clinic.webp"); } .hero-art--clinic-pediatrics { --hero-light:url("hero-clinic/pediatrics_landscape_light_matched-v4.webp"); --hero-dark:url("hero-scenario-dark-landscape-v2.webp"); } .hero-art--clinic-primary-care { --hero-light:url("hero-clinic/primary_care_patient_consultation_light-v2.webp"); --hero-dark:url("hero-clinic/primary_care_patient_consultation_dark-v2.webp"); } .hero-art--clinic-procedure-center { --hero-light:url("hero-clinic/procedure_center_patient_prep_light-v2.webp"); --hero-dark:url("hero-clinic/procedure_center_patient_prep_dark-v2.webp"); } .hero-art--clinic-rehabilitation { --hero-light:url("hero-clinic/rehab_recovery_walk_light-v2.webp"); --hero-dark:url("hero-clinic/rehab_recovery_walk_dark-v2.webp"); } .hero-art--clinic-residential-care { --hero-light:url("hero-clinic/nursing_assisted_living_patient_light-v2.webp"); --hero-dark:url("hero-clinic/nursing_assisted_living_patient_dark-v2.webp"); } .hero-art--clinic-urgent-care { --hero-light:url("hero-clinic/urgent_care_ambulance_arrival_light-v2.webp"); --hero-dark:url("hero-clinic/urgent_care_ambulance_arrival_dark-v2.webp"); } .hero-art--clinic-vein-vascular { --hero-light:url("hero-clinic/smiling_aesthetician_in_modern_spa_clinic.webp"); --hero-dark:url("hero-clinic/modern_purple_lit_spa_clinic.webp"); } .hero-art--clinic-wellness { --hero-light:url("hero-clinic/luxury_aesthetic_consultation_in_a_spa_clinic.webp"); --hero-dark:url("hero-clinic/luxury_spa_consultation_in_moody_blue_light.webp"); } /* Incontinence and pelvic health (8 Sep 2026). A conversation, not a machine: the light photograph is a clinician and a nurse with a seated patient, and the dark twin is the same frame dimmed to the mean of the other dark clinic heroes so the set matches. */ .hero-art--clinic-incontinence { /* Was a generic "doctor and nurse" stock frame in light and a young patient in dark, so the page for a condition that is overwhelmingly older adults showed a young woman (owner, 9 Sep 2026: "shouldn't the incontinence image be a doctor with an old lady not a young woman?"). Now a clinician with an older woman, consistent across both themes. This pair is shared with residential care for the moment; a purpose-made incontinence frame is briefed in App Docs/LogBlues.com/_build/briefs/2026-09-09-incontinence-hero.md. */ --hero-light:url("hero-clinic/nursing_assisted_living_patient_light-v2.webp"); --hero-dark:url("hero-clinic/nursing_assisted_living_patient_dark-v2.webp"); } .hero-art--clinic-womens-pelvic-health { --hero-light:url("hero-clinic/womens_pelvic_health_consultation_light-v2.webp"); --hero-dark:url("hero-clinic/womens_pelvic_health_consultation_dark-v2.webp"); } .hero-art--patient-check-in { --hero-light:url("hero-clinic/patient_check_in_family_light-v2.webp"); --hero-dark:url("hero-clinic/patient_check_in_family_dark-v2.webp"); --hero-pos:right center; } .hero-art--inventory { --hero-light:url("hero-clinic/inventory_medical_closet_light-v2.webp"); --hero-dark:url("hero-clinic/inventory_medical_closet_dark-v2.webp"); --hero-pos:right center; } .hero-art--reports { --hero-light:url("app/reports-mellow.png"); --hero-dark:url("app/reports-mellow.png"); --hero-pos:right center; background-size:contain; } /* Real product screens arranged in responsive device frames. Reports uses these in the hero; Dashboard repeats the pattern lower on its own page. */ .device-showcase { position:relative; margin:0; isolation:isolate; } .device-showcase--hero { position:absolute; z-index:0; inset:7% 2.5% 5% auto; width:min(57%,820px); pointer-events:none; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 100%); mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 100%); } .device-frame { position:absolute; overflow:hidden; background:#07122f; border:clamp(3px,.45vw,7px) solid #111a31; box-shadow:0 24px 58px rgba(3,10,28,.3),0 5px 16px rgba(3,10,28,.18); } .device-frame img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; } .device-frame--desktop { width:72%; height:62%; top:4%; right:4%; border-radius:14px; } .device-frame--desktop::after { content:""; position:absolute; left:42%; bottom:-18%; width:16%; height:18%; background:#111a31; border-radius:0 0 7px 7px; } .device-frame--tablet { width:42%; height:57%; left:19%; bottom:4%; border-radius:18px; transform:rotate(-2deg); } .device-frame--phone { width:19%; height:49%; right:2%; bottom:2%; border-radius:22px; transform:rotate(2deg); } .device-frame--phone::before { content:""; position:absolute; z-index:2; top:6px; left:38%; width:24%; height:5px; border-radius:999px; background:#111a31; } .hero-band--devices .wrap { position:relative; z-index:1; } .hero-band--devices h1, .hero-band--devices .lede { max-width:52%; } .reports-facts { display:grid; max-width:52%; grid-template-columns:1fr; } .dashboard-screens-section { overflow:hidden; } .dashboard-screens-section .lede { max-width:70ch; } .device-showcase--section { height:clamp(340px,48vw,650px); margin-top:32px; } .device-showcase--section .device-frame--desktop { width:70%; height:72%; right:8%; top:2%; } .device-showcase--section .device-frame--tablet { width:38%; height:62%; left:10%; bottom:2%; } .device-showcase--section .device-frame--phone { width:17%; height:54%; right:2%; bottom:1%; } @media (max-width:800px) { .hero-band--devices { padding-bottom:280px; } .hero-band--devices h1, .hero-band--devices .lede, .reports-facts { max-width:none; } .device-showcase--hero { inset:auto 1.5% 8px auto; width:96%; height:260px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%); } .device-showcase--section { height:340px; } } .hero-art--generic { --hero-light:url("hero-generic-light.webp?v=202608311652"); --hero-dark:url("hero-generic-dark.webp?v=202608311652"); } /* On a phone the artwork was hidden entirely. That was right when it was a flat drawing that would have sat behind the words as clutter, and wrong once it became a painting -- the phone is where most people meet the site, and they were getting the plainest version of it. It now runs full-bleed behind the hero instead of beside it, because at this width there is no beside: the lede uses the whole column. Three things keep the text readable on top of it, and all three are needed. 1. The image is dropped to a low opacity so it reads as atmosphere. 2. A vertical mask fades it out downward, so it is strongest at the top where there is sky and weakest by the time the copy and buttons arrive. 3. The crop centres rather than hugging the right edge, since the right third of these paintings is the busiest part and the whole width is in view here. */ @media (max-width:1050px) { .hero-art { /* Moved right 30%: the element starts three-tenths in and runs to the right edge. This is the box moving, not the crop -- background-position only chooses which part of the picture shows inside the box. */ inset:0 0 0 30%; width:auto; opacity:1; /* Scaled back from `cover` so slightly more of each painting is in view, and anchored right so what shows is the side the artwork was composed around. `cover` was filling the height and cropping the width hard, which on a phone left a narrow vertical slice. */ background-size:auto 132%; /* 120% pushed the picture off the right edge of the panel and left a hard seam with bare page behind it. It stays pinned to the right; the extra image comes from scaling instead, which shows more without ever leaving a gap. */ background-position:right center; /* Left to right, not top to bottom. The first version faded the whole picture down the page, which kept the text readable but left every phone hero looking washed out -- the colour never arrived. The text column only reaches about two-thirds across, so the fade now runs sideways: nothing on the left where the words are, full strength on the right where there is nothing to read. The picture gets to be a picture again on the side that is free. A short fade off the bottom stays, so the artwork meets the section border rather than stopping at a line. */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.75) 75%, rgba(0,0,0,1) 100%), linear-gradient(to bottom, #000 94%, transparent 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.75) 75%, rgba(0,0,0,1) 100%), linear-gradient(to bottom, #000 94%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* who-we-serve is the one hero with a person in it, and the shared phone crop was hiding her. The rule above pins every painting to its right edge, which suits a landscape -- the busy side is the right side. This picture is composed differently: the receptionist sits about four-fifths across, so pinning right put her at roughly 37% of the panel, which is precisely where the left-to-right mask fades the artwork out. She was in frame and painted over. Anchoring at 81% instead slides the window left through the picture, which carries her rightward into the panel's full-strength zone at about three-quarters of the screen. The zoom comes back from 132% to 115% so the desk and laptop arrive with her rather than a shoulder on its own. Per page, deliberately: the other twelve heroes are landscapes and the shared rule is right for them. */ .hero-art--who { background-size:auto 115%; background-position:81% center; } .hero-art--clinic { inset:0 0 0 34%; background-size:auto 106%; background-position:right center; } } } /* Mobile and tablet hero framing ------------------------------------------------ Keep every hero photograph on the right, using the same framing that makes the Who it's for page work. Several page-specific rules (and the homepage slideshow) used to bypass the shared mask, exposing a hard vertical edge in the middle of the screen. This final breakpoint deliberately normalizes all hero artwork without changing desktop composition. */ @media (max-width:1050px) { .hero-band > .hero-art, .hero-band--video > .hero-video-poster, .hero-band--video > .hero-video { inset:0 0 0 30% !important; width:auto !important; height:100% !important; opacity:1; background-size:auto 115% !important; background-position:81% center !important; background-repeat:no-repeat !important; object-fit:cover; object-position:81% center; -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.75) 75%, #000 100%), linear-gradient(to bottom, #000 94%, transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0%, transparent 30%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.75) 75%, #000 100%), linear-gradient(to bottom, #000 94%, transparent 100%) !important; -webkit-mask-composite:source-in; mask-composite:intersect; } .hero-band--video > .hero-video-wash { background: linear-gradient(to right, var(--page) 0%, var(--page) 28%, transparent 92%), linear-gradient(to bottom, transparent 82%, color-mix(in srgb,var(--page) 76%,transparent) 94%, var(--page) 100%); } /* The slideshow already has its own wash, so it must not begin as a narrow masked rectangle. Run the image beneath the full hero and let the single continuous wash reveal only the right side. */ .hero-band--video > .hero-video-poster, .hero-band--video > .hero-video { inset:0 !important; width:100% !important; background-size:cover !important; background-position:78% center !important; object-position:78% center; -webkit-mask-image:none !important; mask-image:none !important; } } /* ------------------------------------------------ the Blues mark, assistant */ /* The Blues icon is drawn once per theme, and the notes are part of the artwork now. The separate flying-notes SVG that used to sit above this icon has gone with it: the mark already has three notes rising out of it, and two sets of notes on one icon is not twice the idea, it is a mistake. Two rather than one element with a swapped background, because .appicon earns its shadow from filter: drop-shadow(), which reads the image's alpha channel and so traces the circle instead of boxing it. That only works on real image content. Both files are tiny -- 11 and 17 KB. */ .lightonly { display:block; } .darkonly { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lightonly { display:none; } :root:not([data-theme="light"]) .darkonly { display:block; } } :root[data-theme="dark"] .lightonly { display:none; } :root[data-theme="dark"] .darkonly { display:block; } .appicon--blues { border-radius:50%; } /* ------------------------------ hero text sitting over the artwork, light */ /* White behind the LETTERS, not a box behind the paragraph. A panel was the first attempt and it was wrong: it draws a shape that was never part of the design and it fences the words off from the picture they are supposed to sit in. Stacked white text-shadows bleed a halo around each glyph instead, so the artwork still runs right up to the letterforms and the text stays readable on the pale end of a painting. Several shadows rather than one: a single blur is too thin to lift grey off cloud, and going bigger on one makes a smudge. Layered small ones read as a clean edge. Light only. The dark paintings are dark where this text sits. */ .hero-band .lede, .hero-band .producthead .sub, .hero-band .eyebrow, .hero-band h1, .hero-band ul.facts li { /* One soft lift, not four stacked haloes. The old stack -- 0 0 4px twice, 0 0 8px, plus 0 1px 2px, all in white -- fattened every hero headline and read heavier over a photograph than over a flat gradient, which is why two heroes with identical CSS looked like different weights (7 Sep 2026). */ text-shadow:0 1px 10px rgba(255,255,255,.72); } /* Dark mode gets the same trick in reverse: the page's own deep blue bled around the glyphs, so light text keeps its ground once the artwork is at full colour behind it. It was set to none while the mobile heroes were faded almost to nothing; now that they carry real colour, the text needs the same help the light theme already had. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-band .lede, :root:not([data-theme="light"]) .hero-band .producthead .sub, :root:not([data-theme="light"]) .hero-band .eyebrow, :root:not([data-theme="light"]) .hero-band h1, :root:not([data-theme="light"]) .hero-band ul.facts li { text-shadow:0 0 5px #0a1029, 0 0 5px #0a1029, 0 0 12px #0a1029, 0 1px 2px rgba(10,16,41,.95); } } :root[data-theme="dark"] .hero-band .lede, :root[data-theme="dark"] .hero-band .producthead .sub, :root[data-theme="dark"] .hero-band .eyebrow, :root[data-theme="dark"] .hero-band h1, :root[data-theme="dark"] .hero-band ul.facts li { text-shadow:0 0 5px #0a1029, 0 0 5px #0a1029, 0 0 12px #0a1029, 0 1px 2px rgba(10,16,41,.95); } /* ------------------------------------------------- the theme lightbox */ /* Twenty-one themes were already on the page as thumbnails; the only thing missing was being able to see one properly. Clicking a preview opens it full size with its name and description. The trigger is a