/* Theme Name: BoreLogix Theme URI: https://www.borelogix.com/ Author: BoreLogix Author URI: https://www.borelogix.com/ Description: The BoreLogix block theme — a purpose-built marketing and documentation front for Waterwell IQ, the system of record for water well lifecycle, performance and compliance. Engineered for speed, accessibility (WCAG 2.1 AA) and public-agency procurement. Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.0 Version: 2.6.44 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: borelogix Tags: full-site-editing, block-patterns, accessibility-ready, wide-blocks, custom-colors, custom-logo, translation-ready */ /* ========================================================================== 0 · SELF-HOSTED FONTS -------------------------------------------------------------------------- Saira, IBM Plex Sans and IBM Plex Mono are served from /assets/fonts/, not from Google. Both families are SIL OFL 1.1 and the licenses ship beside the files. Self-hosting removes two third-party origins from the critical path, removes a DNS + TLS handshake before first paint, lets the CSP drop its Google allowances, and removes the GDPR exposure that hot-linking Google Fonts carries in the EU. To go back to Google, put this in wp-config.php: define( 'BORELOGIX_SELF_HOST_FONTS', false ); …which enqueues Google's stylesheet and stops the rules below from being used. Note that these two must never both be live: they declare the same families, the later declaration wins, and the loser's files are requested and thrown away. That is what put four 404s on every page before 2.4.0. url() comes before local() on purpose. local() first meant a machine with some other cut of "Saira" installed rendered the site in it. ========================================================================== */ @font-face{font-family:"Saira";font-style:normal;font-weight:600 800;font-display:swap; src:url("assets/fonts/saira-variable.woff2") format("woff2-variations");} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap; src:url("assets/fonts/plex-sans-400.woff2") format("woff2");} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap; src:url("assets/fonts/plex-sans-600.woff2") format("woff2");} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400 500;font-display:swap; src:url("assets/fonts/plex-mono-400.woff2") format("woff2");} /* Metric-matched fallbacks kill layout shift while webfonts load. */ @font-face{font-family:"Saira Fallback";src:local("Arial"); size-adjust:96%;ascent-override:96%;descent-override:24%;line-gap-override:0%;} @font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial"); size-adjust:101%;ascent-override:94%;descent-override:25%;line-gap-override:0%;} /* ========================================================================== 1 · TOKENS ========================================================================== */ :root{ --blx-navy-900:#061229; --blx-navy-800:#0A1B3D; --blx-navy-700:#12305F; --blx-blue-600:#0E63D6; --blx-blue-500:#1E86F0; --blx-cyan-400:#22B8DC; --blx-cyan-300:#6EDDF3; --blx-chrome-400:#A9BBD1; --blx-chrome-300:#C9D6E6; --blx-chrome-200:#E2EAF4; --blx-paper:#F5F8FC; --blx-white:#FFFFFF; --blx-ink:#0B1526; --blx-ink-2:#3C5170; --blx-ink-3:#566B89; /* 2.6.37: was #697F9C (4.1:1 on white, 3.9:1 on paper — under AA for the byline, share label and fine print); now 5.4:1 and 5.1:1 */ --blx-ink-label:#4E6485; /* uppercase micro-labels on --blx-chrome-200; ink-3 there is 3.4:1 and fails AA */ --blx-ok:#12775A; --blx-warn:#9A6612; --blx-bad:#B03A2E; --blx-current:linear-gradient(96deg,#0E63D6 0%,#1E86F0 46%,#39D2EE 100%); --blx-rule:rgba(11,21,38,.10); --blx-rule-strong:rgba(11,21,38,.17); --blx-shadow-card:0 1px 2px rgba(6,18,41,.05),0 10px 28px -14px rgba(6,18,41,.20); --blx-shadow-lift:0 2px 6px rgba(6,18,41,.07),0 24px 48px -20px rgba(6,18,41,.28); --blx-mark-void:#F5F8FC; --blx-header-h:74px; --blx-maxw:1220px; --blx-radius:8px; --blx-font-display:Saira,"Saira Fallback","Segoe UI",system-ui,sans-serif; --blx-font-body:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif; --blx-font-data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ========================================================================== 2 · BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--blx-paper); color:var(--blx-ink); font-family:var(--blx-font-body); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{max-width:100%;height:auto} img{border-style:none} :where(h1,h2,h3,h4,h5,h6){font-family:var(--blx-font-display);text-wrap:balance} :where(p,li){text-wrap:pretty;overflow-wrap:break-word} :where(h1,h2,h3,h4){overflow-wrap:break-word} ::selection{background:var(--blx-blue-500);color:#fff} :focus-visible{ outline:2px solid var(--blx-blue-500); outline-offset:3px; border-radius:3px; } .blx-deep :focus-visible, .blx-section--deep :focus-visible{outline-color:var(--blx-cyan-300)} /* Skip link — required for keyboard and screen-reader users. */ .blx-skip{ position:absolute;left:-9999px;top:0;z-index:9999; background:var(--blx-navy-900);color:#fff; padding:.9rem 1.4rem;border-radius:0 0 6px 0; font-family:var(--blx-font-display);font-weight:600;font-size:.875rem; letter-spacing:.04em;text-transform:uppercase;text-decoration:none; } .blx-skip:focus{left:0} .screen-reader-text{ border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%); height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal; } .screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;position:static} /* ========================================================================== 3 · LAYOUT SHELLS ========================================================================== */ .blx-wrap{width:100%;max-width:var(--blx-maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem)} /* * A section authored without .blx-wrap still reads at the theme's measure. * * WordPress's constrained layout centres a section's loose children at * contentSize — 760px — while every themed section measures --blx-maxw with * the wrap's inner padding, 1156px of text. On /platform/ the closing section * was authored without the wrap, so its heading sat 188px to the right of every * other section on the page and 376px narrower. Alignment should not depend on * remembering a class, so loose children inherit the wrap's own measure. */ .blx-section.is-layout-constrained > :where(.wp-block-heading,.wp-block-paragraph,p,ul,ol,figure,.wp-block-buttons,.wp-block-columns){ max-width:calc(var(--blx-maxw) - 2 * clamp(1.25rem,4vw,2rem)); margin-inline:auto; } .blx-wrap--narrow{max-width:820px} .blx-wrap--mid{max-width:1000px} .blx-section{padding-block:clamp(3.5rem,8vw,7rem);position:relative} .blx-section--tight{padding-block:clamp(2.5rem,5vw,4rem)} .blx-section--paper{background:var(--blx-paper)} .blx-section--white{background:var(--blx-white)} .blx-section--deep{ background:linear-gradient(168deg,#0A1B3D 0%,#061229 62%,#08183A 100%); color:var(--blx-chrome-200); --blx-mark-void:#0A1B3D; --blx-rule:rgba(201,214,230,.16); --blx-rule-strong:rgba(201,214,230,.28); } .blx-section--deep :where(h1,h2,h3,h4){color:#fff} .blx-section--deep a{color:var(--blx-cyan-300)} /* * Text tokens, redefined for a dark ground. * * The section sets its own colour, but any component inside it that names an * ink token directly — a lede, a caption, a section head — keeps the value it * was given for a white background. On /well-report/ that put --blx-ink-2 * (#3C5170) at 20px on the #061229 gradient: a contrast ratio of 2.3:1, where * WCAG AA asks 4.5:1 at that size. It was not a fade-in artefact; it was the * computed colour. * * Redefining the tokens fixes every component that lands in a dark section, * including ones not written yet — patching the one paragraph would not. * #D7E2F0 gives 14.2:1 here and #A7B9D0 gives 9.3:1. */ .blx-section--deep{ --blx-ink:#FFFFFF; --blx-ink-2:#D7E2F0; --blx-ink-3:#A7B9D0; } /* A hairline grid texture that reads as engineering paper, not decoration. */ .blx-section--deep::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(110,221,243,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(110,221,243,.055) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 20%,transparent 78%); } .blx-section--deep > *{position:relative;z-index:1} /* ========================================================================== 4 · BRAND LOCKUPS ========================================================================== */ .blx-lockup{display:inline-flex;align-items:center;gap:.7rem;color:var(--blx-navy-900);text-decoration:none} .blx-lockup--inverse{color:#fff} .blx-lockup__text{display:flex;flex-direction:column;gap:.2rem;line-height:1} .blx-wordmark{ font-family:var(--blx-font-display); font-weight:800; font-size:1.32rem; letter-spacing:.055em; line-height:1; color:currentColor; white-space:nowrap; } .blx-wordmark__x{ background:var(--blx-current); -webkit-background-clip:text;background-clip:text; color:transparent; /* Fallback for the rare engine that ignores background-clip. */ -webkit-text-fill-color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .blx-wordmark__x{color:var(--blx-blue-500);-webkit-text-fill-color:currentColor} } .blx-lockup__tagline{ font-family:var(--blx-font-display); font-size:.5625rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--blx-ink-3);display:flex;gap:.5rem; } .blx-lockup--inverse .blx-lockup__tagline{color:var(--blx-chrome-400)} .blx-lockup__tagline i{opacity:.45;font-style:normal} .blx-mark{flex:none;display:block} .wwiq-lockup{display:inline-flex;flex-direction:column;gap:.35rem} .wwiq-lockup__name{font-family:var(--blx-font-display);font-weight:700;letter-spacing:-.01em;line-height:1; font-size:1.5rem;color:var(--blx-navy-900);display:inline-flex;align-items:baseline;gap:.4rem} .wwiq-lockup--inverse .wwiq-lockup__name{color:#fff} .wwiq-lockup__iq{ font-weight:800;background:var(--blx-current); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; } .wwiq-lockup__byline{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.18em; text-transform:uppercase;color:var(--blx-ink-3)} .wwiq-lockup--inverse .wwiq-lockup__byline{color:var(--blx-chrome-400)} .wwiq-lockup__tm{font-family:var(--blx-font-body);font-weight:600;font-size:.42em;letter-spacing:0;vertical-align:top;position:relative;top:.05em;margin-left:.12em;opacity:.75} /* ========================================================================== 5 · SITE HEADER ========================================================================== */ .blx-header{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--blx-rule); transition:box-shadow .2s ease,background .2s ease; } .blx-header.is-stuck{box-shadow:0 6px 24px -18px rgba(6,18,41,.55)} @supports not (backdrop-filter:blur(2px)){.blx-header{background:#fff}} /* On the front page the header floats over the hero until you scroll, then lands as the solid bar. The hero is pulled up under it so there is no strip of pale background above the dark section. The paint order has to be defended in three places, because WordPress puts wrappers around a template that a theme cannot fully predict — and a pale sliver above a dark hero is the most visible flaw a page can have. 1. The canvas itself is dark on the front page, so anything that manages to show through shows navy rather than paper. This also covers the strip the admin bar reserves with `html { margin-top: 32px }` when you are logged in. 2. The root block wrapper contributes no top padding. 3. The first block gets no block-gap margin above it. */ body.blx-front{background:var(--blx-navy-800)} .blx-front .wp-site-blocks{padding-top:0} .blx-front .wp-site-blocks > *{margin-block-start:0} .blx-front .wp-site-blocks > *:first-child{margin-top:0} .blx-front .blx-hero{ margin-top:calc(var(--blx-header-h) * -1); padding-top:calc(var(--blx-header-h) + clamp(3rem,7vw,6rem)); } /* When logged in, WordPress reserves the top 32px with html{margin-top}. The admin bar paints over it, but on a dark hero the seam is visible, so the bar is given the hero's own ground. */ .admin-bar.blx-front #wpadminbar{background:var(--blx-navy-900)} .blx-front .blx-header:not(.is-stuck){ background:transparent;border-bottom-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none; } .blx-front .blx-header:not(.is-stuck) .blx-lockup{color:#fff;--blx-mark-void:#0A1B3D} .blx-front .blx-header:not(.is-stuck) .blx-lockup__tagline{color:var(--blx-chrome-400)} .blx-front .blx-header:not(.is-stuck) .blx-nav__link{color:rgba(226,234,244,.90)} .blx-front .blx-header:not(.is-stuck) .blx-nav__link:hover, .blx-front .blx-header:not(.is-stuck) .blx-nav__link:focus-visible{color:#fff;background:rgba(255,255,255,.12)} .blx-front .blx-header:not(.is-stuck) .blx-burger{background:rgba(255,255,255,.08);border-color:rgba(201,214,230,.34)} .blx-front .blx-header:not(.is-stuck) .blx-burger span, .blx-front .blx-header:not(.is-stuck) .blx-burger span::before, .blx-front .blx-header:not(.is-stuck) .blx-burger span::after{background:#fff} .blx-front .blx-header:not(.is-stuck) :focus-visible{outline-color:var(--blx-cyan-300)} .blx-header__inner{ display:flex;align-items:center;gap:1.5rem; min-height:var(--blx-header-h); max-width:var(--blx-maxw);margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2rem); } .blx-site-logo{text-decoration:none;flex:none} .blx-nav{margin-left:auto;display:flex;align-items:center;gap:.25rem} .blx-nav__list{list-style:none;display:flex;align-items:center;gap:.15rem;margin:0;padding:0} .blx-nav__link{ display:inline-block; font-family:var(--blx-font-display);font-size:.875rem;font-weight:600;letter-spacing:.005em; color:var(--blx-ink-2);text-decoration:none; padding:.55rem .8rem;border-radius:6px; transition:color .15s ease,background .15s ease; } .blx-nav__link:hover,.blx-nav__link:focus-visible{color:var(--blx-navy-900);background:var(--blx-chrome-200)} .blx-nav__link[aria-current="page"]{color:var(--blx-blue-600)} .blx-nav__cta{margin-left:.6rem} .blx-burger{ display:none;margin-left:auto; width:44px;height:44px;border:1px solid var(--blx-rule-strong);border-radius:7px; background:#fff;cursor:pointer;align-items:center;justify-content:center; } .blx-burger span{display:block;width:19px;height:2px;background:var(--blx-navy-900);position:relative} .blx-burger span::before,.blx-burger span::after{ content:"";position:absolute;left:0;width:19px;height:2px;background:var(--blx-navy-900); transition:transform .2s ease,top .2s ease} .blx-burger span::before{top:-6px} .blx-burger span::after{top:6px} .blx-burger[aria-expanded="true"] span{background:transparent} .blx-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .blx-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} @media (max-width:1120px){ .blx-burger{display:flex} .blx-nav{ position:fixed;inset:var(--blx-header-h) 0 auto 0; background:#fff;border-bottom:1px solid var(--blx-rule); flex-direction:column;align-items:stretch;gap:0; padding:.75rem clamp(1.25rem,4vw,2rem) 1.5rem; max-height:calc(100vh - var(--blx-header-h));overflow-y:auto; transform:translateY(-8px);opacity:0;visibility:hidden; transition:opacity .18s ease,transform .18s ease,visibility .18s; box-shadow:var(--blx-shadow-card); } .blx-nav.is-open{transform:none;opacity:1;visibility:visible} .blx-nav__list{flex-direction:column;align-items:stretch;gap:0} .blx-nav__link{padding:.85rem .25rem;border-bottom:1px solid var(--blx-rule);border-radius:0;font-size:1rem} .blx-nav__cta{margin:1rem 0 0} .blx-nav__cta .blx-btn{width:100%;justify-content:center} } /* ========================================================================== 6 · BUTTONS ========================================================================== */ .blx-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--blx-font-display);font-size:.8125rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; padding:.95rem 1.5rem;border-radius:6px;border:1px solid transparent; cursor:pointer;transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease; line-height:1;white-space:nowrap; } .blx-btn:active{transform:translateY(1px)} .blx-btn--primary{background:var(--blx-blue-600);color:#fff} .blx-btn--primary:hover{background:var(--blx-navy-800);color:#fff} .blx-btn--current{background:var(--blx-current);color:#fff;box-shadow:0 10px 30px -14px rgba(14,99,214,.85)} .blx-btn--current:hover{filter:brightness(1.06);color:#fff} .blx-btn--ghost{background:transparent;color:var(--blx-navy-800);border-color:var(--blx-rule-strong)} .blx-btn--ghost:hover{border-color:var(--blx-navy-800);background:var(--blx-chrome-200)} .blx-btn--on-deep{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(201,214,230,.32)} .blx-btn--on-deep:hover{background:rgba(255,255,255,.16);color:#fff} .blx-btn--sm{padding:.65rem 1rem;font-size:.75rem} .blx-btnrow{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center} /* Below roughly 520px a long uppercase label is wider than the viewport, and a nowrap button then drags the entire page sideways. */ @media (max-width:560px){ .blx-btn{white-space:normal;text-align:center;line-height:1.25} .blx-btnrow .blx-btn{width:100%} } /* ========================================================================== 7 · TYPE HELPERS ========================================================================== */ .blx-eyebrow{ font-family:var(--blx-font-display);font-size:.6875rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--blx-blue-600); margin:0 0 1rem;display:flex;align-items:center;gap:.6rem; } .blx-eyebrow::before{content:"";width:26px;height:2px;background:var(--blx-current);border-radius:2px;flex:none} .blx-section--deep .blx-eyebrow{color:var(--blx-cyan-300)} .blx-sectionhead{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)} .blx-sectionhead h2{margin:0 0 .85rem;font-size:clamp(1.75rem,3.4vw,2.625rem);font-weight:700;letter-spacing:-.024em;line-height:1.08} .blx-sectionhead p{margin:0;font-size:clamp(1.0625rem,1.6vw,1.1875rem);color:var(--blx-ink-2);line-height:1.55} .blx-section--deep .blx-sectionhead p{color:var(--blx-chrome-300)} .blx-lead{font-size:clamp(1.0625rem,1.7vw,1.25rem);line-height:1.55;color:var(--blx-ink-2)} .blx-mono{font-family:var(--blx-font-data);font-variant-numeric:tabular-nums} /* An inner-page head: the same dark band as the hero but shorter and quieter, because the pattern below it carries the actual argument. */ .blx-section--pagehead{padding-block:clamp(2.5rem,6vw,4.25rem)} /* The h1 has to stay visibly above the pattern h2 that follows it, or the page reads as two competing titles. The pattern h2 tops out at 2.625rem, so this sits deliberately above it at every width. */ .blx-section--pagehead h1{font-size:clamp(2.25rem,4.6vw,3.25rem);font-weight:800; letter-spacing:-.03em;line-height:1.03;margin:0 0 .9rem;color:#fff; max-width:24ch;text-wrap:balance} .blx-section--pagehead .blx-lead{color:var(--blx-chrome-300);max-width:58ch;margin:0} /* ========================================================================== 8 · HERO ========================================================================== */ .blx-hero{ position:relative;overflow:hidden; background:linear-gradient(162deg,#0A1B3D 0%,#061229 58%,#0A2148 100%); color:var(--blx-chrome-200); --blx-mark-void:#0A1B3D; padding-block:clamp(4rem,10vw,7.5rem); } .blx-hero::before{ content:"";position:absolute;inset:0; background-image: linear-gradient(rgba(110,221,243,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(110,221,243,.06) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 70% at 30% 10%,#000 10%,transparent 72%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 10%,#000 10%,transparent 72%); pointer-events:none; } /* A single cyan light source, low and to the right — the aquifer glow. */ .blx-hero::after{ content:"";position:absolute;right:-12%;bottom:-38%;width:70%;aspect-ratio:1; background:radial-gradient(circle,rgba(34,184,220,.30) 0%,rgba(14,99,214,.12) 42%,transparent 68%); pointer-events:none; } .blx-hero__inner{position:relative;z-index:2;max-width:var(--blx-maxw);margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2rem); display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr} @media (min-width:980px){.blx-hero__inner{grid-template-columns:1.08fr .92fr;align-items:center}} .blx-hero h1{ color:#fff;margin:0 0 1.25rem; font-size:clamp(2.375rem,5.4vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.03em; } .blx-hero h1 em{ font-style:normal; background:var(--blx-current);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .blx-hero h1 em{color:var(--blx-cyan-300);-webkit-text-fill-color:currentColor} } .blx-hero__lede{font-size:clamp(1.0625rem,1.9vw,1.3125rem);line-height:1.55;color:var(--blx-chrome-300); max-width:56ch;margin:0 0 2rem} .blx-hero__meta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem; font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase; color:var(--blx-chrome-400)} .blx-hero__meta b{color:var(--blx-cyan-300);font-weight:500} /* Instrument panel — the hero's right-hand proof object. */ .blx-panel{ background:linear-gradient(180deg,rgba(18,48,95,.72) 0%,rgba(10,27,61,.86) 100%); border:1px solid rgba(110,221,243,.20); border-radius:12px; box-shadow:0 30px 70px -30px rgba(0,0,0,.75); overflow:hidden; } .blx-panel__bar{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.85rem 1.1rem;border-bottom:1px solid rgba(110,221,243,.18); background:rgba(6,18,41,.5); font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase; color:var(--blx-chrome-400); } .blx-panel__live{display:inline-flex;align-items:center;gap:.45rem;color:var(--blx-cyan-300)} .blx-panel__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blx-cyan-300); box-shadow:0 0 0 0 rgba(110,221,243,.7);animation:blxPulse 2.4s ease-out infinite} @keyframes blxPulse{ 0%{box-shadow:0 0 0 0 rgba(110,221,243,.55)} 70%{box-shadow:0 0 0 9px rgba(110,221,243,0)} 100%{box-shadow:0 0 0 0 rgba(110,221,243,0)} } @media (prefers-reduced-motion:reduce){.blx-panel__live::before{animation:none}} .blx-panel__body{padding:1.35rem 1.35rem 1.5rem} .blx-panel__rows{display:grid;gap:.55rem;margin-top:1.25rem} .blx-panel__row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline; padding:.6rem .1rem;border-bottom:1px solid rgba(201,214,230,.11)} .blx-panel__row:last-child{border-bottom:0} .blx-panel__k{font-size:.8125rem;color:var(--blx-chrome-300)} .blx-panel__v{font-family:var(--blx-font-data);font-size:.9375rem;color:#fff;font-variant-numeric:tabular-nums} .blx-panel__v small{color:var(--blx-chrome-400);font-size:.75rem} /* ========================================================================== 9 · GAUGE ========================================================================== */ .blx-gauge{display:flex;align-items:center;gap:1.25rem} .blx-gauge__dial{flex:none;position:relative;width:132px;height:132px} .blx-gauge__num{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; font-family:var(--blx-font-display);line-height:1; } .blx-gauge__score{font-size:2.25rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .blx-gauge__grade{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase; color:var(--blx-cyan-300);margin-top:.4rem} .blx-gauge__legend{display:grid;gap:.45rem;font-size:.8125rem;color:var(--blx-chrome-300)} .blx-gauge__legend b{color:#fff;font-weight:600} /* ========================================================================== 10 · CARDS & GRIDS ========================================================================== */ .blx-grid{display:grid;gap:1.125rem} .blx-grid--2{grid-template-columns:1fr} .blx-grid--3{grid-template-columns:1fr} .blx-grid--4{grid-template-columns:1fr} .blx-grid--5,.blx-grid--6{grid-template-columns:1fr} @media (min-width:640px){ .blx-grid--2,.blx-grid--4{grid-template-columns:repeat(2,1fr)} .blx-grid--5,.blx-grid--6{grid-template-columns:repeat(2,1fr)} } @media (min-width:900px){ .blx-grid--3{grid-template-columns:repeat(3,1fr)} .blx-grid--4{grid-template-columns:repeat(4,1fr)} /* Three, not five. A card needs roughly 45 characters of measure before the copy stops reading and starts stacking. */ .blx-grid--5,.blx-grid--6{grid-template-columns:repeat(3,1fr)} /* A row of three never ends on a lone card (2.6.18). The grid runs on six tracks and every card takes two; when the count leaves one over, the first card leads across the full width, and when it leaves two over, the first two share the first row. Works for any count, including a growing blog. */ .blx-grid.blx-grid--3{grid-template-columns:repeat(6,minmax(0,1fr))} .blx-grid.blx-grid--3>*{grid-column:span 2} .blx-grid.blx-grid--3>:first-child:nth-last-child(3n+1){grid-column:1/-1} .blx-grid.blx-grid--3>:first-child:nth-last-child(3n+2), .blx-grid.blx-grid--3>:first-child:nth-last-child(3n+2)+*{grid-column:span 3} .blx-grid.blx-grid--3>:first-child:nth-last-child(3n+1) p{max-width:72ch} } @media (min-width:1500px){ .blx-grid--5{grid-template-columns:repeat(5,1fr)} } .blx-card{ background:var(--blx-white); border:1px solid var(--blx-rule); border-radius:var(--blx-radius); padding:1.6rem 1.5rem; box-shadow:var(--blx-shadow-card); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; position:relative; } .blx-card--link:hover{transform:translateY(-3px);box-shadow:var(--blx-shadow-lift);border-color:var(--blx-chrome-300)} .blx-card h3{margin:0 0 .6rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.005em; min-height:1.2em;text-wrap:balance} .blx-card p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--blx-ink-2)} .blx-card p + p{margin-top:.7rem} .blx-section--deep .blx-card{ background:rgba(18,48,95,.42); border-color:rgba(110,221,243,.18); box-shadow:none; } .blx-section--deep .blx-card p{color:var(--blx-chrome-300)} .blx-card__icon{ width:46px;height:46px;border-radius:10px;margin-bottom:1.15rem; display:grid;place-items:center; background:linear-gradient(150deg,rgba(14,99,214,.14),rgba(34,184,220,.20)); border:1px solid rgba(14,99,214,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.65); color:var(--blx-navy-700); } .blx-section--deep .blx-card__icon{ background:linear-gradient(150deg,rgba(30,134,240,.22),rgba(34,184,220,.20)); border-color:rgba(110,221,243,.28);color:var(--blx-cyan-300); } .blx-card__icon svg{width:23px;height:23px;stroke-width:1.75} /* Stat tile */ .blx-stat{background:var(--blx-white);border:1px solid var(--blx-rule);border-radius:var(--blx-radius); padding:1.35rem 1.4rem;box-shadow:var(--blx-shadow-card)} .blx-section--deep .blx-stat{background:rgba(18,48,95,.42);border-color:rgba(110,221,243,.18);box-shadow:none} .blx-stat__n{display:block;font-family:var(--blx-font-display);font-size:2.1rem;font-weight:800; line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--blx-navy-900)} .blx-section--deep .blx-stat__n{color:#fff} .blx-stat__n--accent{background:var(--blx-current);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} .blx-stat__l{display:block;margin-top:.65rem;font-family:var(--blx-font-data);font-size:.625rem; letter-spacing:.1em;text-transform:uppercase;color:var(--blx-ink-3);line-height:1.55} .blx-section--deep .blx-stat__l{color:var(--blx-chrome-400)} /* Pills */ .blx-pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--blx-font-data); font-size:.625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; padding:.3rem .6rem;border-radius:4px;white-space:nowrap} .blx-pill--ok{background:rgba(18,119,90,.12);color:var(--blx-ok)} .blx-pill--warn{background:rgba(154,102,18,.13);color:var(--blx-warn)} .blx-pill--bad{background:rgba(176,58,46,.12);color:var(--blx-bad)} .blx-pill--info{background:rgba(14,99,214,.10);color:var(--blx-blue-600)} .blx-section--deep .blx-pill--info{background:rgba(110,221,243,.14);color:var(--blx-cyan-300)} /* ========================================================================== 11 · STANDARDS BAR ========================================================================== */ .blx-standards{border-block:1px solid var(--blx-rule);background:var(--blx-white)} .blx-standards__inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem; padding-block:1.35rem} .blx-standards__label{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.16em; text-transform:uppercase;color:var(--blx-ink-3);flex:none} .blx-standards__list{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;list-style:none;margin:0;padding:0} .blx-standards__list li{font-family:var(--blx-font-display);font-size:.8125rem;font-weight:600; color:var(--blx-ink-2);letter-spacing:.01em;white-space:nowrap} .blx-standards__list li span{color:var(--blx-ink-3);font-weight:400} /* ========================================================================== 12 · FIGURE / DIAGRAM ========================================================================== */ .blx-figure{margin:2rem 0} .blx-figure__frame{ overflow-x:auto;background:var(--blx-white);border:1px solid var(--blx-rule); border-radius:var(--blx-radius);padding:1.5rem 1.25rem;box-shadow:var(--blx-shadow-card); } .blx-section--deep .blx-figure__frame{background:rgba(18,48,95,.36);border-color:rgba(110,221,243,.18);box-shadow:none} .blx-figure__frame svg{width:100%;height:auto;max-width:960px;margin-inline:auto} .blx-figure figcaption{margin-top:.75rem;font-family:var(--blx-font-data);font-size:.625rem; letter-spacing:.09em;text-transform:uppercase;color:var(--blx-ink-3)} .blx-section--deep .blx-figure figcaption{color:var(--blx-chrome-400)} .dg-box{fill:var(--blx-chrome-200);stroke:var(--blx-chrome-400)} .dg-box-warn{fill:rgba(154,102,18,.12);stroke:var(--blx-warn)} .dg-box-bad{fill:rgba(176,58,46,.10);stroke:var(--blx-bad)} .dg-box-ok{fill:rgba(18,119,90,.10);stroke:var(--blx-ok)} .dg-lbl{fill:var(--blx-navy-900);font-family:var(--blx-font-display);font-size:12.5px;font-weight:700} .dg-sub{fill:var(--blx-ink-3);font-family:var(--blx-font-data);font-size:9px;letter-spacing:.05em} .dg-line{stroke:var(--blx-chrome-400);fill:none} .dg-head{fill:var(--blx-chrome-400)} .dg-yes{fill:var(--blx-bad);font-family:var(--blx-font-data);font-size:9.5px;font-weight:600;letter-spacing:.09em} .dg-no{fill:var(--blx-blue-600);font-family:var(--blx-font-data);font-size:9.5px;font-weight:600;letter-spacing:.09em} .blx-section--deep .dg-box{fill:rgba(201,214,230,.10);stroke:rgba(201,214,230,.35)} .blx-section--deep .dg-lbl{fill:#fff} .blx-section--deep .dg-sub{fill:var(--blx-chrome-400)} .blx-section--deep .dg-line,.blx-section--deep .dg-head{stroke:rgba(201,214,230,.4);fill:none} .blx-section--deep .dg-head{fill:rgba(201,214,230,.4)} /* ========================================================================== 13 · TABLES ========================================================================== */ .blx-tablewrap{overflow-x:auto;border:1px solid var(--blx-rule);border-radius:var(--blx-radius); background:var(--blx-white);margin:1.75rem 0} .blx-table{border-collapse:collapse;width:100%;min-width:620px;font-size:.875rem} .blx-table th{ font-family:var(--blx-font-display);font-size:.625rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;text-align:left;color:var(--blx-ink-3); padding:.85rem 1.1rem;background:var(--blx-chrome-200); border-bottom:1px solid var(--blx-rule-strong);white-space:nowrap; } .blx-table td{padding:.85rem 1.1rem;border-bottom:1px solid var(--blx-rule);vertical-align:top;color:var(--blx-ink-2)} .blx-table tr:last-child td{border-bottom:0} .blx-table td:first-child{color:var(--blx-navy-900);font-weight:600} .blx-table .num{font-family:var(--blx-font-data);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8125rem} /* Footnote markers in a table cell. Used where a date on the compliance calendar is the statutory default and a basin order can override it — the marker has to read as deliberate, not as a stray asterisk. */ .blx-table abbr{ text-decoration:none;border-bottom:0;cursor:help; color:var(--blx-blue-600);font-weight:700;font-size:.8em;vertical-align:super;line-height:0; } /* -------------------------------------------------------------------------- Tables written in the block editor. WordPress core ships `wp-block-table` with a 1px box border on every cell and no header treatment, which is the one piece of default-WordPress styling that survived into an otherwise fully themed site — the subprocessor table on /privacy/ rendered as a bare grid. Map the core block onto the same treatment as `.blx-table` so anything added through the editor is styled without anyone having to remember a class. The core figure already carries `overflow-x:auto`, so narrow screens scroll rather than overflow. -------------------------------------------------------------------------- */ .wp-block-table{margin:1.75rem 0} .wp-block-table > table{ border-collapse:collapse;width:100%;font-size:.875rem; background:var(--blx-white);border:1px solid var(--blx-rule);border-radius:var(--blx-radius); overflow:hidden; } .wp-block-table > table th, .wp-block-table > table td{border:0} .wp-block-table > table th{ font-family:var(--blx-font-display);font-size:.75rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;text-align:left;color:var(--blx-ink-3); padding:.85rem 1.1rem;background:var(--blx-chrome-200); border-bottom:1px solid var(--blx-rule-strong); } .wp-block-table > table td{ padding:.85rem 1.1rem;border-bottom:1px solid var(--blx-rule); vertical-align:top;color:var(--blx-ink-2); } .wp-block-table > table tr:last-child td{border-bottom:0} .wp-block-table > table td:first-child{color:var(--blx-navy-900);font-weight:600} .wp-block-table figcaption{ margin-top:.65rem;font-size:.8125rem;color:var(--blx-ink-3);text-align:left; } /* A deep section re-points --blx-ink-* at light values for text on navy. The table above paints its own white surface, so those inherited values would be white-on-white. Restore the light-surface ink on the table itself. */ .blx-section--deep .wp-block-table > table{ --blx-ink-2:#3C5170; --blx-ink-3:#697F9C; } .blx-section--deep .wp-block-table figcaption{color:var(--blx-chrome-400)} /* ========================================================================== 14 · CALCULATOR ========================================================================== */ .blx-calc{ display:grid;gap:1.5rem;grid-template-columns:1fr; background:var(--blx-white);border:1px solid var(--blx-rule); border-radius:12px;padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--blx-shadow-lift); } @media (min-width:900px){.blx-calc{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:2.5rem}} .blx-calc__fields{display:grid;gap:1.1rem} .blx-field{display:grid;gap:.4rem} .blx-field label{font-family:var(--blx-font-display);font-size:.8125rem;font-weight:600;color:var(--blx-navy-800)} .blx-field__hint{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--blx-ink-3);letter-spacing:.02em} .blx-field input,.blx-field select,.blx-field textarea{ font-family:var(--blx-font-data);font-size:.9375rem; padding:.75rem .85rem;border:1px solid var(--blx-rule-strong);border-radius:6px; background:var(--blx-white);color:var(--blx-ink);width:100%; transition:border-color .15s ease,box-shadow .15s ease; } .blx-field input:focus,.blx-field select:focus,.blx-field textarea:focus{ outline:none;border-color:var(--blx-blue-500);box-shadow:0 0 0 3px rgba(30,134,240,.16); } .blx-field input[aria-invalid="true"]{border-color:var(--blx-bad)} .blx-field__err{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--blx-bad)} /* A label row with a small unit switch at its right (Calculator 03's speed pair, 2.6.14). The radios stay in the tab order and are read by assistive technology; the ring on focus lands on the visible option. */ .blx-field__labelrow{display:flex;align-items:center;justify-content:space-between;gap:.75rem} .blx-seg{display:inline-flex;border:1px solid var(--blx-rule-strong);border-radius:6px;overflow:hidden;background:var(--blx-white)} .blx-field .blx-seg__opt{position:relative;display:inline-flex;cursor:pointer;font-family:var(--blx-font-data);font-size:.6875rem;font-weight:500;letter-spacing:.04em;color:var(--blx-ink-3)} .blx-field .blx-seg__opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:pointer} .blx-seg__opt span{padding:.28rem .6rem;line-height:1;transition:background .15s ease,color .15s ease} .blx-seg__opt input:checked + span{background:var(--blx-navy-800);color:#fff} .blx-seg__opt input:focus-visible + span{outline:2px solid var(--blx-blue-500);outline-offset:-2px} .blx-calc__out{ background:linear-gradient(170deg,#0A1B3D 0%,#061229 100%); border-radius:10px;padding:1.5rem;color:var(--blx-chrome-200); display:flex;flex-direction:column;gap:1rem;justify-content:center; } .blx-calc__big{font-family:var(--blx-font-display);font-size:clamp(2rem,5vw,2.75rem);font-weight:800; line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums} .blx-calc__big.is-good{background:var(--blx-current);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} .blx-calc__cap{font-family:var(--blx-font-data);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase; color:var(--blx-chrome-400)} .blx-calc__line{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem; padding-block:.5rem;border-bottom:1px solid rgba(201,214,230,.14)} .blx-calc__line:last-of-type{border-bottom:0} .blx-calc__line b{font-family:var(--blx-font-data);color:#fff;font-weight:500;font-variant-numeric:tabular-nums} .blx-calc__note{font-size:.75rem;color:var(--blx-chrome-400);line-height:1.5;margin:0} /* ========================================================================== 15 · PRICING ========================================================================== */ .blx-tier{background:var(--blx-white);border:1px solid var(--blx-rule);border-radius:10px; padding:1.8rem 1.6rem;display:flex;flex-direction:column;box-shadow:var(--blx-shadow-card);position:relative} .blx-tier--feature{border:1.5px solid var(--blx-blue-500);box-shadow:var(--blx-shadow-lift)} .blx-tier__flag{position:absolute;top:-11px;left:1.6rem;background:var(--blx-current);color:#fff; font-family:var(--blx-font-display);font-size:.625rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;padding:.28rem .6rem;border-radius:4px} .blx-tier__name{font-family:var(--blx-font-display);font-size:.75rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--blx-blue-600);margin-bottom:.9rem} .blx-tier__price{font-family:var(--blx-font-display);font-size:1.75rem;font-weight:800;letter-spacing:-.03em; line-height:1.1;color:var(--blx-navy-900);font-variant-numeric:tabular-nums} .blx-tier__price span{font-size:.8125rem;font-weight:500;color:var(--blx-ink-3);letter-spacing:0} .blx-tier__desc{font-size:.9rem;color:var(--blx-ink-2);line-height:1.6;margin:1rem 0 1.25rem} .blx-tier__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.55rem;font-size:.875rem;color:var(--blx-ink-2)} .blx-tier__list li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.5} .blx-tier__list li::before{content:"";flex:none;width:15px;height:15px;margin-top:.2rem;border-radius:50%; background:rgba(18,119,90,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.4' fill='none' stroke='%2312775A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:contain} .blx-tier .blx-btn{margin-top:auto;width:100%} /* ========================================================================== 16 · STEPS / TIMELINE ========================================================================== */ .blx-steps{display:grid;gap:0;margin:2rem 0} .blx-step{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.35rem 0; border-top:1px solid var(--blx-rule)} .blx-step:last-child{border-bottom:1px solid var(--blx-rule)} .blx-step__n{font-family:var(--blx-font-data);font-size:.6875rem;font-weight:600;letter-spacing:.09em; color:var(--blx-blue-600);padding-top:.35rem;min-width:2.2rem} .blx-section--deep .blx-step__n{color:var(--blx-cyan-300)} .blx-step h3{margin:0 0 .4rem;font-size:1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} .blx-step p{margin:0;font-size:.9rem;color:var(--blx-ink-2);line-height:1.6} .blx-section--deep .blx-step p{color:var(--blx-chrome-300)} /* ========================================================================== 17 · NOTE / CALLOUT ========================================================================== */ .blx-note{border-left:3px solid var(--blx-blue-500);background:var(--blx-white); padding:1.15rem 1.4rem;border-radius:0 8px 8px 0;margin:1.75rem 0; font-size:.9375rem;color:var(--blx-ink-2);box-shadow:var(--blx-shadow-card)} .blx-note b{color:var(--blx-navy-900)} .blx-note p{margin:0} .blx-note p + p{margin-top:.75rem} .blx-note--ok{border-left-color:var(--blx-ok)} .blx-note--warn{border-left-color:var(--blx-warn)} .blx-note--bad{border-left-color:var(--blx-bad)} .blx-note--cta{border-left-color:var(--blx-cyan-400);background:var(--blx-paper);color:var(--blx-navy-900);font-weight:500} .blx-note--cta a{font-weight:700;white-space:nowrap} .blx-glossary-index{display:flex;flex-wrap:wrap;gap:.4rem .45rem;margin:1.5rem 0 .5rem;font-family:var(--blx-font-data);font-size:.8125rem;line-height:1.2} .blx-glossary-index a{display:inline-block;padding:.32rem .6rem;border:1px solid var(--blx-rule);border-radius:999px;background:var(--blx-white);color:var(--blx-navy-900);text-decoration:none;white-space:nowrap;transition:border-color .15s ease,background .15s ease} .blx-glossary-index a:hover,.blx-glossary-index a:focus-visible{border-color:var(--blx-cyan-400);background:var(--blx-paper)} /* The glossary as a reference page (2.6.25). The white section carries .blx-glossary (set on the page). The A–Z index becomes a columned list of the terms; each group heading is numbered; each term sits beside its definition on a ruled two-column grid, so the page reads like a printed glossary rather than a run of headings. Under 720px it folds to one column. */ .blx-glossary .blx-wrap{max-width:1120px} .blx-glossary.blx-section{padding-top:3.5rem} .blx-glossary .blx-prose{max-width:none;display:grid;grid-template-columns:minmax(220px,30%) minmax(0,1fr);column-gap:0;row-gap:0;align-items:start;counter-reset:blx-gl} .blx-glossary .blx-prose > *{grid-column:1 / -1;margin:0} .blx-glossary .blx-prose > h2{counter-increment:blx-gl;margin:3.5rem 0 .5rem;padding-top:1.75rem;border-top:2px solid var(--blx-navy-900);font-size:1.5rem;letter-spacing:-.012em} .blx-glossary .blx-prose > h2::before{content:counter(blx-gl,decimal-leading-zero);display:block;margin-bottom:.35rem;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.14em;color:var(--blx-blue-600)} .blx-glossary .blx-prose > h2:first-of-type{margin-top:2.25rem} .blx-glossary .blx-prose > h3{grid-column:1;margin:0;padding:1.15rem 3rem 1.15rem 0;border-top:1px solid var(--blx-rule);font-size:1.0625rem;line-height:1.35;letter-spacing:-.005em;color:var(--blx-navy-900)} .blx-glossary .blx-prose > h3 + p,.blx-glossary .blx-prose > h3 + p + p{grid-column:2;margin:0;padding:1.15rem 0;border-top:1px solid var(--blx-rule);font-size:.9375rem;line-height:1.65;color:var(--blx-ink-2)} .blx-glossary .blx-prose > h3 + p + p{border-top:0;padding-top:0} .blx-glossary .blx-prose > h2 + h3,.blx-glossary .blx-prose > h2 + h3 + p{border-top:0} .blx-glossary .blx-prose > h3[id]:target,.blx-glossary .blx-prose > h3[id]:target + p{background:var(--blx-paper);box-shadow:0 0 0 .6rem var(--blx-paper)} .blx-glossary .blx-glossary-index{display:block;columns:4;column-gap:2rem;margin:0 0 1rem;padding:1.5rem 0 1.75rem;border-top:2px solid var(--blx-navy-900);border-bottom:1px solid var(--blx-rule);font-family:var(--blx-font-body);font-size:.9375rem;line-height:1.35} .blx-glossary .blx-glossary-index::before{content:"Every term, A to Z";display:block;column-span:all;margin:0 0 1rem;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blx-ink-3)} .blx-glossary .blx-glossary-index a{display:flex;justify-content:flex-start;min-height:24px;padding:.28rem 0;margin:0;border:0;border-bottom:1px dotted var(--blx-rule);border-radius:0;background:none;white-space:normal;color:var(--blx-ink);break-inside:avoid;text-decoration:none} .blx-glossary .blx-glossary-index a:hover,.blx-glossary .blx-glossary-index a:focus-visible{color:var(--blx-blue-600);background:none;border-bottom-color:var(--blx-blue-600)} @media (max-width:980px){.blx-glossary .blx-glossary-index{columns:3}} @media (max-width:720px){ .blx-glossary .blx-prose{display:block} .blx-glossary .blx-prose > h3{padding-bottom:.35rem} .blx-glossary .blx-prose > h3 + p{border-top:0;padding-top:0} .blx-glossary .blx-glossary-index{columns:2;column-gap:1.25rem} } @media (max-width:480px){.blx-glossary .blx-glossary-index{columns:2;column-gap:1rem;font-size:.875rem}} .blx-prose h2[id],.blx-prose h3[id],.blx-prose [id]{scroll-margin-top:5.5rem} .blx-prose h3[id]:target{color:var(--blx-blue-600)} .wp-block-post-content.blx-prose{max-width:none} /* the template group sets the measure; keep title and body on one left edge */ .blx-section--deep .blx-note{background:rgba(18,48,95,.42);color:var(--blx-chrome-300);box-shadow:none} .blx-section--deep .blx-note b{color:#fff} /* ========================================================================== 18 · FORM (demo request) ========================================================================== */ .blx-form{display:grid;gap:1.1rem;max-width:640px} .blx-form__row{display:grid;gap:1.1rem} @media (min-width:640px){.blx-form__row--2{grid-template-columns:1fr 1fr}} .blx-form__consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.8125rem;color:var(--blx-ink-3);line-height:1.5} .blx-form__consent input{margin-top:.25rem;flex:none;width:auto} /* Honeypot — hidden from people, irresistible to bots. */ .blx-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .blx-form__head h3{margin:0 0 .3rem;font-size:1.3125rem;font-weight:800;letter-spacing:-.012em} .blx-form__head p{margin:0;font-size:.875rem;color:var(--blx-ink-3)} .blx-field__opt{font-family:var(--blx-font-data);font-weight:500;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blx-ink-3);margin-left:.35rem} .blx-field.is-invalid input,.blx-field.is-invalid textarea{border-color:var(--blx-bad);box-shadow:0 0 0 3px rgba(176,58,46,.12)} .blx-field.is-invalid label{color:var(--blx-bad)} .blx-field__err{margin:0;display:flex;gap:.4rem;align-items:flex-start;font-family:var(--blx-font-body);font-size:.75rem;line-height:1.45;color:var(--blx-bad)} .blx-field__err[hidden],.blx-form__status[hidden]{display:none!important} .blx-field__err::before{content:"!";flex:none;width:.95rem;height:.95rem;margin-top:.1rem;border-radius:50%;background:var(--blx-bad);color:#fff;font:700 .62rem/.95rem var(--blx-font-data);text-align:center} .blx-field.is-invalid .blx-form__consent{color:var(--blx-bad)} .blx-form__status{margin:0;padding:.8rem 1rem;border-radius:8px;background:rgba(176,58,46,.08);border:1px solid rgba(176,58,46,.28);color:var(--blx-bad);font-size:.875rem;line-height:1.5;font-weight:500} .blx-form__fine{display:inline-flex;gap:.4rem;align-items:center;font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.02em;color:var(--blx-ink-3)} .blx-form__fine svg{flex:none;opacity:.75} .blx-form.is-busy .blx-btn--current{position:relative;color:transparent!important} .blx-form.is-busy .blx-btn--current::after{content:"";position:absolute;inset:0;margin:auto;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:blx-spin .7s linear infinite} @keyframes blx-spin{to{transform:rotate(360deg)}} .blx-form.is-shaking{animation:blx-shake .32s cubic-bezier(.36,.07,.19,.97)} @keyframes blx-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}} @media (prefers-reduced-motion:reduce){.blx-form.is-shaking{animation:none}} .blx-form__done{display:grid;gap:.9rem;outline:none;animation:blx-rise .45s cubic-bezier(.2,.7,.2,1) both} @keyframes blx-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .blx-form__done-mark{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--blx-current);box-shadow:0 10px 30px -14px rgba(14,99,214,.85)} .blx-form__done h3{margin:.2rem 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.015em} .blx-form__done p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--blx-ink-2)} .blx-form__done-ref{font-family:var(--blx-font-data);font-size:.75rem!important;letter-spacing:.06em;text-transform:uppercase;color:var(--blx-ink-3)!important} .blx-form__done-ref strong{color:var(--blx-navy-900);font-weight:700;letter-spacing:.08em} .blx-form__done-steps{list-style:none;margin:.3rem 0 .2rem;padding:0;display:grid;gap:.6rem;font-size:.875rem;line-height:1.5;color:var(--blx-ink-2)} .blx-form__done-steps li{display:flex;gap:.7rem;align-items:flex-start} .blx-form__done-steps li span{flex:none;width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font-family:var(--blx-font-data);font-size:.6875rem;font-weight:700;color:var(--blx-navy-900);background:var(--blx-paper);border:1px solid var(--blx-rule-strong)} .blx-form__plain{margin:0;font-size:1.0625rem;color:var(--blx-ink-2)} /* ========================================================================== 19 · FOOTER ========================================================================== */ .blx-footer{ background:linear-gradient(180deg,#061229 0%,#040D1E 100%); color:var(--blx-chrome-300); --blx-mark-void:#061229; padding-block:clamp(3rem,6vw,4.5rem) 0; } /* Five cells: the brand, then four link columns. The brand takes a row of its own from 600px up — the lockup with its tagline is 380px wide and will not share a 1220px row with four link columns without one of them wrapping a label mid-phrase (tried; "Well performance calculators" broke in two). On its own row the lockup and the blurb sit side by side when there is room and stack when there is not. Link columns pair up at 600px and go four across at 940px, where each is at least 190px: wider than the longest label. Rendered and measured at 640, 1000 and 1280px, not guessed. */ .blx-footer__grid{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr)} .blx-footer__brand{display:flex;flex-wrap:wrap;gap:1.25rem 3.5rem;align-items:center} /* The statement beside the lockup takes the rest of the row. It was capped at 38ch, which at 1220px left the right half of the brand row empty and broke a two-line sentence into four (2.6.14). It now grows to fill and stops at a measure a reader can still follow, centered against the two-line lockup; under about 920px it drops below the lockup as before. */ .blx-footer__brand .blx-footer__blurb{margin:0;flex:1 1 30rem;max-width:68ch;font-size:.95rem;line-height:1.7} @media (min-width:600px){.blx-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blx-footer__brand{grid-column:1/-1}} @media (min-width:940px){.blx-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}} .blx-footer h2{font-family:var(--blx-font-display);font-size:.6875rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--blx-chrome-400);margin:0 0 1rem} .blx-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .blx-footer a{color:var(--blx-chrome-300);text-decoration:none;font-size:.9rem} .blx-footer a:hover{color:#fff;text-decoration:underline} .blx-footer__blurb{font-size:.9rem;line-height:1.65;color:var(--blx-chrome-400);max-width:38ch;margin:1.25rem 0 0} .blx-footer__bar{margin-top:3rem;padding-block:1.5rem;border-top:1px solid rgba(201,214,230,.13); display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between; font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.06em;color:var(--blx-chrome-400)} .blx-footer__legal{display:flex;flex-wrap:wrap;gap:1.25rem} /* ========================================================================== 20 · POST / EDITOR CONTENT ========================================================================== */ .blx-prose{max-width:72ch} .blx-prose > * + *{margin-top:1.15rem} .blx-prose h2{margin-top:2.75rem;font-size:1.75rem} .blx-prose h3{margin-top:2rem;font-size:1.3125rem} .blx-prose ul,.blx-prose ol{padding-left:1.35rem} .blx-prose li + li{margin-top:.5rem} .blx-prose img{border-radius:8px} .blx-prose code{font-family:var(--blx-font-data);font-size:.875em;background:var(--blx-chrome-200); padding:.14em .4em;border-radius:4px} .blx-prose pre{background:var(--blx-navy-900);color:var(--blx-chrome-200);padding:1.25rem; border-radius:8px;overflow-x:auto;font-family:var(--blx-font-data);font-size:.8125rem;line-height:1.65} .blx-prose pre code{background:none;padding:0;color:inherit} .blx-prose blockquote{border-left:3px solid var(--blx-blue-500);padding-left:1.25rem;margin-left:0; color:var(--blx-ink-2);font-size:1.0625rem} .blx-postmeta{font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--blx-ink-3);margin-bottom:1rem} /* 2.6.23: the small provenance links (category, byline, "Tell us") keep their quiet size but gain a 24 px touch target; the negative margin keeps the line height where it was, so nothing else moves. */ .blx-postmeta a,.taxonomy-category a,.blx-byline__by a,.blx-editorial__correct a{display:inline-block;padding:.3rem 0;margin:-.3rem 0} /* --------------------------------------------------------------------------- Field-note editorial furniture (inc/editorial.php) The byline is quiet — it is provenance, not a headline — and the standard at the foot is set apart from the article so it never reads as more of the argument. Both inherit the page's ink so they stay legible in print. --------------------------------------------------------------------------- */ .blx-byline{font-family:var(--blx-font-data);font-size:.75rem;color:var(--blx-ink-3); margin:0 0 2rem;line-height:1.6} .blx-byline a{color:var(--blx-ink-label);text-decoration:none; border-bottom:1px solid var(--blx-rule)} .blx-byline a:hover,.blx-byline a:focus-visible{color:var(--blx-navy-900); border-bottom-color:currentColor} .blx-byline__sep{margin:0 .5rem;color:var(--blx-rule)} .blx-editorial{margin:3rem 0 0;padding:1.5rem 1.75rem;background:var(--blx-paper); border:1px solid var(--blx-rule);border-radius:8px} .blx-editorial h2{margin:0 0 .75rem;font-size:.75rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;font-family:var(--blx-font-data);color:var(--blx-ink-label)} .blx-editorial p{margin:0 0 .75rem;font-size:.875rem;line-height:1.65;color:var(--blx-ink-2)} .blx-editorial p:last-child{margin-bottom:0} .blx-editorial__correct{color:var(--blx-ink-3)} .blx-editorial a{color:var(--blx-ink-label)} /* Who wrote it. Sits between the note and the standing editorial policy, so a reader meets the person before they meet the disclaimer. The portrait is a fixed 120px column that drops away under 520px rather than shrinking to a thumbnail nobody can read a face in. */ .blx-authorbox{margin:3rem 0 0;padding:1.5rem 1.75rem;display:flex;gap:1.5rem; align-items:flex-start;background:#fff;border:1px solid var(--blx-rule);border-radius:8px} .blx-authorbox__img{flex:none;width:120px;height:150px;object-fit:cover;object-position:50% 15%; border-radius:8px;background:var(--blx-paper)} .blx-authorbox__body{min-width:0} .blx-authorbox__eyebrow{margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;font-family:var(--blx-font-data);color:var(--blx-ink-3)} .blx-authorbox__name,.blx-prose .blx-authorbox__name,.blx-prose .blx-authorbox h2{margin:.3rem 0 0;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em} /* 2.6.25: the prose h2 rule (margin-top 2.75rem) opened a gap under "Written by" */ .blx-authorbox__name a{color:var(--blx-navy-900);text-decoration:none} .blx-authorbox__name a:hover,.blx-authorbox__name a:focus-visible{text-decoration:underline} .blx-authorbox__role{margin:.15rem 0 .6rem;font-size:.8125rem;color:var(--blx-ink-3); font-family:var(--blx-font-data)} .blx-authorbox__bio{margin:0;font-size:.875rem;line-height:1.65;color:var(--blx-ink-2)} @media (max-width:520px){ .blx-authorbox{flex-direction:column;gap:1rem;padding:1.25rem} .blx-authorbox__img{width:96px;height:120px} } /* The author archive head. The bio box repeats here deliberately: this page is the one a search engine follows from the Person node, so it must stand alone rather than assume the reader arrived from an article. */ .blx-authorhead__role{margin:.35rem 0 0;font-family:var(--blx-font-data); font-size:.9375rem;color:var(--blx-ink-3)} .blx-authorhead .blx-authorbox{margin-top:2rem} /* The per-article Sources list, written into the post content. */ .blx-prose .blx-sources{margin:2.5rem 0 0;padding:0;list-style:none; border-top:1px solid var(--blx-rule);padding-top:1rem} .blx-prose .blx-sources li{margin:0 0 .6rem;font-size:.8125rem;line-height:1.55; color:var(--blx-ink-2);padding-left:1.35rem;text-indent:-1.35rem} .blx-prose .blx-sources li:last-child{margin-bottom:0} .blx-prose h2.blx-sources__h{font-size:.75rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;font-family:var(--blx-font-data);color:var(--blx-ink-label); margin:2.5rem 0 0} .blx-prose .blx-sources__note{font-size:.75rem;color:var(--blx-ink-3);margin:.75rem 0 0} @media print{ .blx-editorial{border-color:#999;background:none} .blx-byline{color:#000} /* The credentials are the point of the box on paper; the portrait is not. */ .blx-authorbox{border-color:#999;background:none;page-break-inside:avoid} .blx-authorbox__img{display:none} } .blx-postcard{display:flex;flex-direction:column;gap:.6rem;background:var(--blx-white); border:1px solid var(--blx-rule);border-radius:8px;padding:1.5rem;box-shadow:var(--blx-shadow-card); transition:transform .2s ease,box-shadow .2s ease} .blx-postcard:hover{transform:translateY(-3px);box-shadow:var(--blx-shadow-lift)} .blx-postcard h2,.blx-postcard h3{margin:0;font-size:1.0625rem;font-weight:700;letter-spacing:-.005em} .blx-postcard h2 a,.blx-postcard h3 a{color:var(--blx-navy-900);text-decoration:none} .blx-postcard p{margin:0;font-size:.9rem;color:var(--blx-ink-2)} /* Home — from the field notes (patterns/home-notes.php). A card is one link: the title's ::after stretches over the card, and the category link sits above it so both targets stay reachable by mouse and by keyboard. */ .blx-notes__card{display:flex;flex-direction:column;gap:.55rem} .blx-notes__card .blx-postmeta{margin:0} .blx-notes__card .blx-postmeta a{position:relative;z-index:1;text-decoration:none} .blx-notes__card .blx-postmeta a:hover{text-decoration:underline} .blx-notes__card h3{margin:0;min-height:0} .blx-notes__card h3 a{color:inherit;text-decoration:none} .blx-notes__card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit} .blx-notes__card h3 a:focus-visible{outline:none} .blx-notes__card:has(h3 a:focus-visible){outline:2px solid var(--blx-cyan-300);outline-offset:2px} /* The date sits on the card's bottom edge whatever the summary's length, so three cards in a row read as one line of dates. */ .blx-notes__date{margin-top:auto;padding-top:1rem;font-family:var(--blx-font-data);font-size:.6875rem; letter-spacing:.1em;text-transform:uppercase;color:var(--blx-ink-3)} .blx-section--deep .blx-postmeta,.blx-section--deep .blx-notes__date{color:var(--blx-chrome-400)} .blx-section--deep .blx-notes__card h3 a{color:#fff} .blx-notes__more{display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin:clamp(1.75rem,3vw,2.5rem) 0 0;font-weight:600;font-size:.95rem} .blx-notes__more a{text-decoration:none} .blx-notes__more a:hover{text-decoration:underline} .blx-pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.5rem;font-family:var(--blx-font-data);font-size:.8125rem} .blx-pagination a,.blx-pagination span{padding:.55rem .85rem;border:1px solid var(--blx-rule); border-radius:6px;text-decoration:none;color:var(--blx-ink-2);background:#fff} .blx-pagination .current{background:var(--blx-navy-800);color:#fff;border-color:var(--blx-navy-800)} /* ========================================================================== 21 · MOTION ========================================================================== */ .blx-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)} .blx-reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .blx-reveal{opacity:1!important;transform:none!important;transition:none!important} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ========================================================================== 22 · PRINT ========================================================================== */ @media print{ .blx-header,.blx-footer,.blx-burger,.blx-nav,.blx-btn,.blx-skip{display:none!important} body{background:#fff;color:#000;font-size:11pt} .blx-section{padding-block:1rem} .blx-section--deep,.blx-hero{background:#fff!important;color:#000!important} .blx-section--deep :where(h1,h2,h3,h4),.blx-hero h1{color:#000!important;-webkit-text-fill-color:#000!important} .blx-card,.blx-stat,.blx-tier{box-shadow:none;border:1px solid #999;break-inside:avoid} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} } /* ========================================================================== 23 · WORDPRESS HOUSEKEEPING ========================================================================== */ .alignleft{float:left;margin:.4rem 1.5rem 1rem 0} .alignright{float:right;margin:.4rem 0 1rem 1.5rem} .aligncenter{margin-inline:auto;display:block} .wp-caption-text,.wp-element-caption{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--blx-ink-3)} .sticky{position:relative} .admin-bar .blx-header{top:32px} @media (max-width:782px){.admin-bar .blx-header{top:46px}} /* ========================================================================== 16 · LIVE SIMULATIONS -------------------------------------------------------------------------- Every figure inside .blx-sim is computed by the engine bundle from the visitor's inputs. Two series colors, validated for color-vision deficiency on both surfaces: blue for the well (capacity), amber for the pump (efficiency). Text never wears a series color. ========================================================================== */ :root{ --sim-well:#1E86F0; --sim-pump:#C27F3A; --sim-aquifer:#6EDDF3; } .blx-section--deep{--sim-paper:#F8FAFD;--sim-surface:rgba(255,255,255,.035);--sim-rule:rgba(201,214,230,.16);--sim-ink:#fff;--sim-ink-2:var(--blx-chrome-300);--sim-ink-3:var(--blx-chrome-400)} .blx-section--white,.blx-section--paper{--sim-surface:#fff;--sim-rule:var(--blx-rule);--sim-ink:var(--blx-ink);--sim-ink-2:var(--blx-ink-2);--sim-ink-3:var(--blx-ink-3)} .blx-sim-host{position:relative;container-type:inline-size} .blx-sim-host .blx-sim-fallback{display:block} .blx-sim-host.is-live .blx-sim-fallback{display:none} .blx-sim{display:grid;gap:clamp(1.25rem,3vw,2.25rem);align-items:start; border:1px solid var(--sim-rule);border-radius:14px;background:var(--sim-surface); padding:clamp(1rem,2.5vw,1.75rem);box-shadow:var(--blx-shadow-card)} /* Layout follows the container, not the viewport: the same simulation sits in a full-width home section and an 820px documentation column. */ @container (min-width:860px){ .blx-sim--well{grid-template-columns:minmax(300px,460px) 1fr} .blx-sim--ingest{grid-template-columns:minmax(260px,340px) 1fr} .blx-sim--lifecycle{grid-template-columns:1fr minmax(280px,360px)} } .blx-sim__stage{min-width:0;container-type:inline-size} .blx-sim__stage--split{display:grid;gap:1.5rem} @container (min-width:640px){.blx-sim__stage--split{grid-template-columns:minmax(260px,300px) minmax(0,1fr)}} /* Fallback for browsers without container queries. */ @supports not (container-type:inline-size){ @media (min-width:1100px){ .blx-sim--well,.blx-sim--ingest{grid-template-columns:minmax(260px,340px) 1fr} .blx-sim--lifecycle{grid-template-columns:minmax(280px,360px) 1fr} .blx-sim__stage--split{grid-template-columns:minmax(260px,300px) minmax(0,1fr)} } } .blx-sim__section,.blx-sim__page,.blx-sim__chart,.blx-sim__flow{display:block;width:100%;height:auto} .blx-sim__panel{min-width:0;display:flex;flex-direction:column;gap:.9rem} .blx-sim__panel:not(.blx-sim__panel--row)>*{flex-shrink:0} /* a scrolling column panel must scroll, never squeeze its children */ .blx-sim__panel--row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem} .blx-sim__lede{margin:0;font-size:.9375rem;color:var(--sim-ink-2);line-height:1.5} .blx-sim__h{margin:0 0 .25rem;font-family:var(--blx-font-display);font-size:.9375rem;font-weight:700;color:var(--sim-ink);letter-spacing:.01em} .blx-sim__cap{margin:0 0 .75rem;font-size:.75rem;color:var(--sim-ink-3);line-height:1.45} .blx-sim__note,.blx-sim__status{margin:0;font-size:.875rem;color:var(--sim-ink-2)} .blx-sim__note b{color:var(--sim-ink)} /* Sliders */ .blx-sim__slider{display:block} .blx-sim__slider-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.8125rem;font-weight:600;color:var(--sim-ink);margin-bottom:.25rem} .blx-sim__val{font-family:var(--blx-font-data);font-weight:500;font-size:.8125rem;color:var(--sim-ink-2)} .blx-sim__slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;cursor:pointer} .blx-sim__slider input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--sim-rule)} .blx-sim__slider input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--sim-rule)} .blx-sim__slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--sim-ink);border:3px solid var(--sim-accent,var(--blx-blue-500));box-shadow:0 1px 4px rgba(6,18,41,.35)} .blx-sim__slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--sim-ink);border:3px solid var(--sim-accent,var(--blx-blue-500))} .blx-sim__slider input[type=range]:focus-visible{outline:2px solid var(--blx-cyan-300);outline-offset:4px;border-radius:4px} .blx-sim__slider--well{--sim-accent:var(--sim-well)} .blx-sim__slider--pump{--sim-accent:var(--sim-pump)} .blx-sim__slider--aquifer{--sim-accent:var(--sim-aquifer)} /* Mode tabs and typed fields — 'your well' takes two real tests */ .blx-sim__tabs{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;background:rgba(201,214,230,.08);border:1px solid var(--sim-rule)} .blx-sim__tab{appearance:none;border:0;background:transparent;color:var(--sim-ink-2);font:600 .75rem/1 var(--blx-font-display);letter-spacing:.06em;text-transform:uppercase;padding:.55rem .95rem;border-radius:999px;cursor:pointer;transition:background .18s,color .18s} .blx-sim__tab.is-on{background:var(--sim-ink);color:var(--blx-navy-900,#0A1B3D)} .blx-section--white .blx-sim__tab.is-on,.blx-section--paper .blx-sim__tab.is-on{background:var(--blx-ink);color:#fff} .blx-sim__tab:focus-visible{outline:2px solid var(--blx-cyan-300);outline-offset:2px} .blx-sim__mode{display:flex;flex-direction:column;gap:.9rem} .blx-sim__mode[hidden]{display:none} .blx-sim__fieldgroups{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .blx-sim__fieldgroup{display:grid;gap:.45rem} .blx-sim__fieldgroup--row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:.5rem} .blx-sim__group-h{margin:0 0 .15rem;font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sim-ink-3)} .blx-sim__field{display:grid;gap:.2rem;font-size:.75rem;color:var(--sim-ink-2)} .blx-sim__field-box{display:flex;align-items:center;border:1px solid var(--sim-rule);border-radius:8px;background:rgba(201,214,230,.06);transition:border-color .15s,box-shadow .15s} .blx-section--white .blx-sim__field-box,.blx-section--paper .blx-sim__field-box{background:#fff} .blx-sim__field-box:focus-within{border-color:var(--blx-blue-500);box-shadow:0 0 0 3px rgba(30,134,240,.22)} .blx-sim__field input{appearance:textfield;-moz-appearance:textfield;width:100%;min-width:0;border:0;background:transparent;color:var(--sim-ink);font:500 .9375rem/1 var(--blx-font-data);padding:.5rem .55rem;outline:none} .blx-sim__field input::-webkit-outer-spin-button,.blx-sim__field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .blx-sim__field input::placeholder{color:var(--sim-ink-3)} .blx-sim__field-u{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--sim-ink-3);padding:0 .55rem 0 .25rem;white-space:nowrap} .blx-sim__more{border-top:1px solid var(--sim-rule);padding-top:.5rem} .blx-sim__more>.blx-sim__mode{margin-top:.75rem} .blx-sim__more summary{cursor:pointer;font-size:.75rem;color:var(--sim-ink-2);list-style:none;display:flex;align-items:center;gap:.4rem} .blx-sim__more summary::-webkit-details-marker{display:none} .blx-sim__more summary::before{content:"";width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s} .blx-sim__more[open] summary::before{transform:rotate(45deg)} .blx-sim__status--treat{min-height:1.2em;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.02em;color:var(--sim-aquifer);opacity:0;transition:opacity .2s} .blx-sim__status--treat.is-on{opacity:1} .blx-sim__status--treat.is-on::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:currentColor;margin-right:.45rem;vertical-align:middle;animation:blx-pulse 1s ease-in-out infinite} @keyframes blx-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}} @media (prefers-reduced-motion:reduce){.blx-sim__status--treat.is-on::before{animation:none}} .blx-sim__note--small{font-size:.75rem;color:var(--sim-ink-3);line-height:1.45} .blx-sim__presets,.blx-sim__btnrow{display:flex;flex-wrap:wrap;gap:.5rem} .blx-sim__preset{font:600 .75rem/1 var(--blx-font-display);letter-spacing:.04em;text-transform:uppercase; padding:.55rem .8rem;border-radius:999px;border:1px solid var(--sim-rule);background:transparent;color:var(--sim-ink-2);cursor:pointer; transition:border-color .15s,color .15s,background .15s} .blx-sim__preset:hover{border-color:var(--blx-blue-500);color:var(--sim-ink)} .blx-sim__preset.is-on{background:var(--blx-blue-600);border-color:var(--blx-blue-600);color:#fff} .blx-sim__go{padding-block:.7rem} /* Readouts */ .blx-sim__ros{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem} .blx-sim__ros--3{grid-template-columns:1fr} @media (min-width:600px){.blx-sim__ros{grid-template-columns:repeat(3,1fr)}.blx-sim__ros--3{grid-template-columns:repeat(3,1fr)}} .blx-sim__ro{border:1px solid var(--sim-rule);border-radius:8px;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.15rem;transition:border-color .2s} .blx-sim__ro.is-flag{border-color:var(--blx-warn)} .blx-sim__ro-k{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sim-ink-3)} .blx-sim__ro-num{font-family:var(--blx-font-data);font-size:1.125rem;font-weight:500;color:var(--sim-ink);line-height:1.1} .blx-sim__ro-num small{font-size:.6875rem;color:var(--sim-ink-3);font-family:var(--blx-font-body)} /* Diagnosis and recommendation cards */ .blx-sim__diag,.blx-sim__rec{border-left:3px solid var(--blx-blue-500);padding:.75rem 1rem;background:var(--sim-surface);border-radius:0 8px 8px 0;border-top:1px solid var(--sim-rule);border-right:1px solid var(--sim-rule);border-bottom:1px solid var(--sim-rule)} .blx-sim__diag-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .blx-sim__diag-top .blx-eyebrow{margin:0} .blx-sim__diag-conf{font-family:var(--blx-font-data);font-size:.75rem;color:var(--sim-ink-3)} .blx-sim__diag-cause,.blx-sim__rec-title{font-family:var(--blx-font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:.3rem 0 .35rem;color:var(--sim-ink)} .blx-sim__diag-head{margin:0 0 .4rem;font-size:.9375rem;color:var(--sim-ink)} .blx-sim__diag-why{margin:0;padding-left:1.1rem;font-size:.8125rem;color:var(--sim-ink-2);line-height:1.45} .blx-sim__diag-why li+li{margin-top:.2rem} .blx-sim__rec-state{margin:0;font-size:.8125rem;color:var(--sim-ink-2)} .blx-sim__diag-cause.is-pump-wear,.blx-sim__rec-title.is-replace_pump{color:#E6A867} .blx-sim__diag-cause.is-screen-fouling,.blx-sim__rec-title.is-rehabilitate{color:#7DB8FF} .blx-sim__diag-cause.is-aquifer-decline{color:var(--sim-aquifer)} .blx-section--white .blx-sim__diag-cause.is-pump-wear,.blx-section--paper .blx-sim__diag-cause.is-pump-wear, .blx-section--white .blx-sim__rec-title.is-replace_pump,.blx-section--paper .blx-sim__rec-title.is-replace_pump{color:#9A5F1F} .blx-section--white .blx-sim__diag-cause.is-screen-fouling,.blx-section--paper .blx-sim__diag-cause.is-screen-fouling, .blx-section--white .blx-sim__rec-title.is-rehabilitate,.blx-section--paper .blx-sim__rec-title.is-rehabilitate{color:var(--blx-blue-600)} .blx-section--white .blx-sim__diag-cause.is-aquifer-decline,.blx-section--paper .blx-sim__diag-cause.is-aquifer-decline{color:#0E7C9A} /* The well section */ .sim-sky{fill:transparent} .sim-formation{fill:rgba(201,214,230,.06)} .sim-ground{stroke:var(--sim-ink-3);stroke-width:1.2} .sim-gravel{fill:rgba(201,214,230,.35)} .sim-annulus{stroke:none} .sim-seal{fill:rgba(201,214,230,.28)} .sim-casing{fill:#1a2f57;stroke:var(--sim-ink-3);stroke-width:1} .sim-water{fill:rgba(30,134,240,.55)} .sim-slot{fill:rgba(201,214,230,.9)} .sim-screen{stroke:var(--sim-ink-3);stroke-width:1} .sim-foul{fill:url(#simGravel);fill:#C27F3A;mix-blend-mode:screen;transition:opacity .3s} .sim-column{fill:#31456d} .sim-bowl rect{fill:var(--sim-pump);transition:opacity .3s} .sim-motor{fill:#31456d;stroke:var(--sim-ink-3);stroke-width:1} .sim-kw{font-family:var(--blx-font-data);font-size:12px;fill:var(--sim-ink)} .sim-static{stroke:var(--sim-aquifer);stroke-width:1.6;transition:y1 .35s,y2 .35s} .sim-pumping{stroke:var(--sim-well);stroke-width:1.6} .sim-cone{fill:rgba(30,134,240,.16);stroke:none;transition:d .35s} .sim-lbl{font-family:var(--blx-font-data);font-size:9.5px;fill:var(--sim-ink-3);letter-spacing:.04em;text-transform:uppercase} .sim-lbl--pumping{fill:var(--sim-well)} .sim-lbl--dd{fill:var(--sim-ink-2);text-transform:none;font-size:10px} .sim-lbl--strong{fill:var(--sim-ink);font-weight:700} .sim-ticks line{stroke:var(--sim-ink-3);stroke-width:1} .sim-ticks text{font-family:var(--blx-font-data);font-size:9px;fill:var(--sim-ink-3)} @media (prefers-reduced-motion:no-preference){ .sim-static,.sim-pumping,.sim-water,.sim-saturated{transition:all .35s ease-out} } /* Policy grid */ .blx-sim__grid{display:grid;grid-template-columns:auto repeat(5,minmax(34px,44px));gap:3px;align-items:center} .blx-sim__grid-corner{width:2rem} .blx-sim__grid-h{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--sim-ink-3);text-align:center;padding:.2rem} .blx-sim__cell{aspect-ratio:1;border-radius:6px;border:1px solid var(--sim-rule);background:transparent; font:700 .875rem/1 var(--blx-font-display);color:var(--sim-ink-2);cursor:pointer;transition:transform .12s,box-shadow .12s} .blx-sim__cell:hover{transform:translateY(-1px)} .blx-sim__cell.is-wait{color:var(--sim-ink-3)} .blx-sim__cell.is-rehabilitate{background:rgba(30,134,240,.22);color:var(--sim-ink)} .blx-sim__cell.is-replace_pump{background:rgba(194,127,58,.28);color:var(--sim-ink)} .blx-sim__cell.is-rehabilitate_and_replace_pump{background:linear-gradient(135deg,rgba(30,134,240,.25) 50%,rgba(194,127,58,.3) 50%);color:var(--sim-ink)} .blx-sim__cell.is-replace_well{background:rgba(176,58,46,.28);color:var(--sim-ink)} .blx-sim__cell.is-here{box-shadow:0 0 0 2px var(--sim-ink),0 0 0 4px var(--blx-blue-500);z-index:1} .blx-section--white .blx-sim__cell.is-rehabilitate,.blx-section--paper .blx-sim__cell.is-rehabilitate{background:rgba(30,134,240,.16)} .blx-section--white .blx-sim__cell.is-replace_pump,.blx-section--paper .blx-sim__cell.is-replace_pump{background:rgba(194,127,58,.22)} /* Forecast chart */ .blx-sim__chartwrap{margin-bottom:1rem} .sim-grid line{stroke:var(--sim-rule);stroke-width:1} .sim-grid text,.sim-axis text{font-family:var(--blx-font-data);font-size:9.5px;fill:var(--sim-ink-3)} .sim-line{fill:none;stroke:var(--sim-well);stroke-width:2;stroke-linejoin:round;transition:d .3s} .sim-area{fill:rgba(30,134,240,.12);transition:d .3s} .sim-marker{fill:var(--sim-ink);stroke:var(--sim-well);stroke-width:2;transition:cx .3s,cy .3s,opacity .2s} .sim-crosshair{stroke:var(--sim-ink-3);stroke-width:1;stroke-dasharray:3 3} .sim-tip{fill:var(--sim-ink);opacity:.92} .sim-tip-t{font-family:var(--blx-font-data);font-size:10px;fill:var(--sim-surface);} .blx-section--deep .sim-tip-t{fill:var(--blx-navy-900)} .blx-section--white .sim-tip-t,.blx-section--paper .sim-tip-t{fill:#fff} /* Cost bars — one axis, best marked */ .blx-sim__bars{display:flex;flex-direction:column;gap:.4rem} .blx-sim__bar{display:grid;grid-template-columns:9.5rem 1fr auto;align-items:center;gap:.6rem;font-size:.8125rem;color:var(--sim-ink-2)} .blx-sim__bar-k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blx-sim__bar-track{display:block;height:8px;border-radius:4px;background:var(--sim-rule);overflow:hidden} .blx-sim__bar-fill{display:block;height:100%;border-radius:4px;background:var(--sim-ink-3);transition:width .3s} .blx-sim__bar.is-best .blx-sim__bar-fill{background:var(--sim-well)} .blx-sim__bar.is-best .blx-sim__bar-k{color:var(--sim-ink);font-weight:600} .blx-sim__bar-v{font-family:var(--blx-font-data);color:var(--sim-ink);min-width:6.5rem;text-align:right} /* Ingestion */ .sim-paper{fill:var(--sim-paper,#fff);stroke:var(--blx-rule-strong);stroke-width:1;filter:drop-shadow(0 6px 18px rgba(6,18,41,.18))} .sim-paper-h{font-family:var(--blx-font-data);font-size:12px;font-weight:600;fill:#1A2432;letter-spacing:.06em} .sim-paper-s{font-family:var(--blx-font-data);font-size:9.5px;fill:#697F9C} .sim-paper-k{font-family:var(--blx-font-body);font-size:11px;fill:#3C5170} .sim-paper-v{font-family:var(--blx-font-data);font-size:11px;fill:#0B1526} .sim-paper-rule{stroke:#C8D4E4;stroke-width:1} .sim-hl{fill:rgba(30,134,240,.14);stroke:var(--sim-well);stroke-width:1.2;transition:opacity .25s} .sim-hl--gap{fill:rgba(154,102,18,.12);stroke:var(--blx-warn);stroke-dasharray:4 3} .blx-sim__record{display:flex;flex-direction:column;gap:.35rem} .blx-sim__rec-row{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;padding:.5rem .7rem;border-radius:6px;border:1px solid var(--sim-rule);font-size:.875rem;color:var(--sim-ink-2);opacity:.55;transition:opacity .25s,border-color .25s} .blx-sim__rec-row.is-in,.blx-sim__rec-row.is-gap,.blx-sim__rec-row.is-derived{opacity:1} .blx-sim__rec-row.is-in{border-color:var(--sim-well)} .blx-sim__rec-row.is-review{border-color:var(--blx-warn)} .blx-sim__rec-row.is-gap{border-style:dashed;border-color:var(--blx-warn)} .blx-sim__rec-row.is-derived{border-color:var(--sim-rule);background:rgba(30,134,240,.06)} .blx-sim__rec-k{color:var(--sim-ink)} .blx-sim__rec-v{font-family:var(--blx-font-data);color:var(--sim-ink)} .blx-sim__conf{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--sim-ink-3);min-width:5.5rem;text-align:right} .blx-sim__derived{margin-top:.75rem;display:flex;flex-direction:column;gap:.35rem} /* SCADA */ .blx-sim__stage--wide{grid-column:1/-1} .sim-zone{fill:rgba(255,255,255,.03);stroke:var(--sim-rule);stroke-width:1;stroke-dasharray:5 4} .sim-zone--cloud{fill:rgba(30,134,240,.05)} .sim-node rect{fill:#122a52;stroke:var(--sim-ink-3);stroke-width:1.2;transition:opacity .3s} .sim-node--agent rect{stroke:var(--sim-well);stroke-width:1.6} .sim-node--cloud rect{fill:#0d2a5e;stroke:var(--blx-blue-500)} .sim-node.is-off rect{opacity:.35} .sim-node.is-off text{opacity:.5} .sim-node-t{font-family:var(--blx-font-display);font-size:14px;font-weight:700;fill:var(--sim-ink)} .sim-node-s{font-family:var(--blx-font-data);font-size:10px;fill:var(--sim-ink-3)} .sim-link{fill:none;stroke:var(--sim-ink-3);stroke-width:1.5} .sim-link--out{stroke:var(--sim-well);stroke-width:2} .sim-arrhead{fill:var(--sim-ink-3)} .sim-wall{fill:var(--blx-chrome-300);opacity:.9} .sim-packet rect{fill:var(--sim-well)} .sim-packet text{font-family:var(--blx-font-data);font-size:10px;fill:#fff} .sim-packet--bad rect{fill:var(--blx-bad)} .sim-packet.is-blocked{animation:simBounce .5s ease-out forward} @keyframes simBounce{0%{transform:translateX(0)}40%{transform:translateX(18px);opacity:1}100%{transform:translateX(30px);opacity:0}} @media (prefers-reduced-motion:reduce){.sim-packet.is-blocked{animation:none;opacity:0}} .sim-lbl--static{fill:var(--sim-aquifer)} .blx-sim__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:.6rem 0 0;padding:0;list-style:none;font-size:.75rem;color:var(--sim-ink-3)} .blx-sim__legend li{display:flex;align-items:center;gap:.4rem} .blx-sim__legend i{display:inline-block;width:14px;height:0;border-top:2px solid currentColor} .blx-sim__legend .is-static{color:var(--sim-aquifer)} .blx-sim__legend .is-pumping{color:var(--sim-well)} .blx-sim__legend .is-pumping i{border-top-style:dashed} .blx-sim__legend .is-pump{color:var(--sim-pump)} .blx-sim__legend .is-pump i{height:8px;border:0;background:currentColor;border-radius:2px} /* The footer lockup's tagline is one line by design; under 400px that line is wider than the column and drags the page sideways, so it may wrap there. */ @media (max-width:400px){ .blx-footer .blx-lockup__tagline{white-space:normal;line-height:1.5;letter-spacing:.14em;flex-wrap:wrap;row-gap:0} .blx-footer .blx-lockup{align-items:flex-start;max-width:100%} .blx-footer .blx-lockup__text{min-width:0} } /* Cost-bar values may shrink with the column rather than push past it. */ .blx-sim__bar-v{min-width:0} @container (max-width:520px){ .blx-sim__bar{grid-template-columns:7.5rem 1fr auto;font-size:.75rem} } /* Rehabilitation — downhole */ @container (min-width:860px){.blx-sim--rehab{grid-template-columns:minmax(300px,460px) 1fr}} @supports not (container-type:inline-size){@media (min-width:1100px){.blx-sim--rehab{grid-template-columns:minmax(260px,360px) 1fr}}} .rh-formation{fill:rgba(201,214,230,.05)} .rh-annulus{fill:rgba(201,214,230,.04)} .rh-grain{fill:rgba(201,214,230,.22);stroke:rgba(201,214,230,.28);stroke-width:.6} .rh-inside{fill:rgba(30,134,240,.16)} .rh-wall{fill:#31456d} .rh-slot{fill:rgba(201,214,230,.75)} .rh-deposit{fill:#C27F3A;opacity:.85;transition:r .25s} .rh-deposit--bio{fill:#7E9E5A} .rh-deposit--silt{fill:#A39B8B} .rh-tool rect{fill:#0d2a5e;stroke:var(--sim-well);stroke-width:1.2} .rh-wave{fill:none;stroke:var(--sim-aquifer);stroke-width:2.5} .rh-particle{fill:#C27F3A} .rh-bubble{fill:none;stroke:var(--sim-aquifer);stroke-width:1} .rh-cap{font-family:var(--blx-font-data);font-size:10px;fill:var(--sim-ink-2);letter-spacing:.03em} .rh-curve{fill:none;stroke:var(--sim-well);stroke-width:2;stroke-linejoin:round} .rh-pt{fill:var(--sim-ink);stroke:var(--sim-well);stroke-width:1.5} .rh-base{stroke:var(--sim-ink-3);stroke-width:1;stroke-dasharray:2 3} .rh-trigger{stroke:var(--blx-warn);stroke-width:1;stroke-dasharray:5 3;opacity:.9} .rh-event{stroke:var(--sim-aquifer);stroke-width:1.5;stroke-dasharray:3 3} .rh-cursor{stroke:var(--sim-ink);stroke-width:1;opacity:.5} .blx-sim__legend .is-mineral{color:#C27F3A} .blx-sim__legend .is-mineral i,.blx-sim__legend .is-bio i{width:10px;height:10px;border:0;border-radius:50%;background:currentColor} .blx-sim__legend .is-bio{color:#7E9E5A} .blx-sim__legend .is-silt{color:#A39B8B} .blx-sim__legend .is-silt i{width:10px;height:10px;border:0;border-radius:50%;background:currentColor} .blx-sim__diag-cause.is-no-degradation{color:var(--sim-ink)} /* Process strip — the lifecycle in eight steps */ .blx-process{display:grid;gap:.75rem;margin-top:clamp(2rem,4vw,3rem);grid-template-columns:repeat(2,1fr)} @media (min-width:700px){.blx-process{grid-template-columns:repeat(4,1fr)}} @media (min-width:1100px){.blx-process{grid-template-columns:repeat(8,1fr)}} .blx-process__step{position:relative;padding:1rem .9rem .95rem;border:1px solid rgba(201,214,230,.14);border-radius:10px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:.45rem;color:var(--blx-chrome-300);transition:border-color .2s,transform .2s} .blx-process__step:hover{border-color:var(--blx-blue-500);transform:translateY(-2px)} .blx-process__n{font-family:var(--blx-font-data);font-size:.6875rem;color:var(--blx-cyan-300);letter-spacing:.06em} .blx-process__step svg{color:#fff} .blx-process__step b{font-family:var(--blx-font-display);font-size:.9375rem;color:#fff;letter-spacing:.01em} .blx-process__step span:last-child{font-size:.75rem;line-height:1.4;color:var(--blx-chrome-400)} @media (min-width:1100px){ .blx-process__step:not(:last-child)::after{content:"";position:absolute;right:-.55rem;top:1.55rem;width:.45rem;height:1px;background:rgba(201,214,230,.35)} } /* 3D well (three.js) — sits where the SVG was; the SVG stays as the fallback */ .blx-3d{position:relative;width:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden; background:radial-gradient(120% 90% at 50% 20%,rgba(30,134,240,.10),rgba(6,18,41,0) 60%)} .blx-sim--rehab .blx-3d{aspect-ratio:1/1} .blx-3d__canvas{width:100%;height:100%;display:block} .blx-sim__stage.is-3d>.blx-sim__section{display:none} .blx-3d__labels{position:absolute;inset:0;pointer-events:none} .blx-3d__label{position:absolute;left:0;top:0;transform:translate(-9999px,-9999px); font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase; color:var(--sim-ink-2);white-space:nowrap;padding:.15rem .4rem;border-radius:4px;background:rgba(6,18,41,.55);backdrop-filter:blur(3px); margin:-.7rem 0 0 .4rem;transition:opacity .2s} .blx-3d__label.is-static{color:var(--sim-aquifer)} .blx-3d__label.is-pumping{color:#7DB8FF} .blx-3d__label.is-dd{color:var(--sim-ink);text-transform:none;letter-spacing:0;margin-left:-6.5rem} .blx-sim__legend .is-note{color:var(--sim-ink-3);font-style:italic} /* Cinematic mode — once the scene is live the card becomes a frame. Three regions: the stage (the 3D, full-bleed), the controls (inputs only) and the telemetry bar (every number that answers the inputs). Wide (≥1180px and a viewport at least 640px tall): controls float right, telemetry runs across the foot of the stage, the subject is framed in the space left over — nothing scrolls while a slider moves. Otherwise: stage, then controls, then telemetry, stacked. */ .blx-sim--cine{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0; --sim-paper:#F8FAFD;--sim-surface:rgba(255,255,255,.035);--sim-rule:rgba(201,214,230,.16);--sim-ink:#fff;--sim-ink-2:var(--blx-chrome-300);--sim-ink-3:var(--blx-chrome-400);color:var(--sim-ink); width:calc(100vw - var(--blx-sbw,0px));margin-left:calc(50% - 50vw + var(--blx-sbw,0px) / 2);border:0;border-radius:0;padding:0;background:none;box-shadow:none; isolation:isolate} .blx-section--white .blx-sim--cine,.blx-section--paper .blx-sim--cine{background:radial-gradient(80% 60% at 50% 30%,#12305F 0%,#0A1B3D 60%,#061229 100%);padding-top:clamp(1rem,2vw,1.5rem);padding-bottom:clamp(1rem,2vw,1.5rem)} .blx-section--white .blx-sim--cine .blx-sim__tab.is-on,.blx-section--paper .blx-sim--cine .blx-sim__tab.is-on{background:var(--sim-ink);color:var(--blx-navy-800)} .blx-section--white .blx-sim--cine .blx-sim__field-box,.blx-section--paper .blx-sim--cine .blx-sim__field-box{background:rgba(201,214,230,.06)} .blx-sim--cine>.blx-sim__stage{position:relative;min-height:0;aspect-ratio:3/4;max-height:78vh;overflow:visible;display:flex;flex-direction:column;justify-content:flex-end; background: radial-gradient(60% 50% at 50% 42%,rgba(30,134,240,.16),rgba(30,134,240,0) 70%), linear-gradient(180deg,rgba(6,18,41,0),rgba(6,18,41,.35) 100%)} .blx-sim--rehab.blx-sim--cine>.blx-sim__stage{aspect-ratio:1/1} .blx-sim--cine>.blx-sim__stage::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(110,221,243,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(110,221,243,.06) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000 30%,transparent 100%)} .blx-sim--cine .blx-3d,.blx-sim--cine .blx-2d{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:none} .blx-2d{position:relative;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden} .blx-2d__canvas{display:block;width:100%;height:100%} .blx-sim--lifecycle.blx-sim--cine>.blx-sim__stage{aspect-ratio:16/10} /* On a phone the two panels stack: lattice above, futures below. */ @media (max-width:700px){.blx-sim--lifecycle.blx-sim--cine>.blx-sim__stage{aspect-ratio:3/4;max-height:none}} .blx-sim--lifecycle .blx-sim__tele-grid .blx-sim__grid{margin-top:.25rem} .blx-sim--lifecycle .blx-sim__tele-bars{min-width:0} .blx-sim--lifecycle .blx-sim__tele .blx-sim__cap{margin:0 0 .35rem} .blx-sim--lifecycle .blx-sim__rec{margin:0} .blx-sim--cine>.blx-sim__stage>.blx-sim__legend{position:relative;margin:0 clamp(1rem,4vw,3rem);z-index:2;display:inline-flex;width:max-content;max-width:calc(100% - 2*clamp(1rem,4vw,3rem)); padding:.5rem .85rem;border-radius:999px;background:rgba(6,18,41,.78);border:1px solid rgba(201,214,230,.14)} /* Glass: one surface for the controls and the telemetry */ .blx-sim--cine>.blx-sim__panel,.blx-sim--cine>.blx-sim__tele{position:relative;z-index:2; background:linear-gradient(180deg,rgba(13,30,66,.92),rgba(6,18,41,.9));border:1px solid rgba(201,214,230,.18);border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)} .blx-sim--cine>.blx-sim__panel{gap:.75rem;margin:1rem clamp(1rem,4vw,3rem) 0;padding:clamp(1rem,2.5vw,1.4rem)} .blx-sim--cine>.blx-sim__tele{margin:.75rem clamp(1rem,4vw,3rem) 0;padding:clamp(.9rem,2vw,1.1rem)} .blx-sim__tele{display:grid;gap:.75rem;grid-column:1/-1;min-width:0} .blx-sim:not(.blx-sim--cine)>.blx-sim__tele{border-top:1px solid var(--sim-rule);padding-top:1rem} @media (min-width:700px){.blx-sim:not(.blx-sim--cine)>.blx-sim__tele{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}} .blx-sim__tele-ros{margin:0} .blx-sim__tele-verdict{display:grid;gap:.6rem;min-width:0} .blx-sim__tele-chart{min-width:0} .blx-sim__tele-chart svg{display:block;width:100%;height:auto} /* Stacked (tablet, or a short window): telemetry two-up, the verdict full width */ @media (min-width:700px){ .blx-sim--cine:not(.is-wide)>.blx-sim__tele{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} .blx-sim--rehab.blx-sim--cine:not(.is-wide)>.blx-sim__tele>.blx-sim__tele-verdict{grid-column:1/-1} .blx-sim--cine:not(.is-wide)>.blx-sim__panel .blx-sim__slidergrid{grid-template-columns:repeat(4,minmax(0,1fr))} } /* Compact controls: sliders two-up, a sub-heading, the mode note small */ .blx-sim__slidergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.4rem 1rem} .blx-sim__h--sub{margin-top:.25rem;color:var(--sim-ink-2);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase} .blx-sim--cine .blx-sim__lede{font-size:.8125rem;line-height:1.45} /* Wide: the composition — instruments left, the subject center, controls right. The stage takes the full height, so the well is as large as the window allows. */ .blx-sim--cine.is-wide{align-items:stretch;grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(300px,380px);grid-template-rows:minmax(0,1fr); grid-template-areas:"tele stage panel";height:clamp(640px,calc(100vh - 5rem),1000px); column-gap:0;row-gap:0;padding:0 clamp(1rem,2vw,2rem) clamp(1rem,2vw,1.5rem)} .blx-sim--cine.is-wide>.blx-sim__stage{grid-area:stage;aspect-ratio:auto;max-height:none;min-height:0;height:100%;align-self:stretch;overflow:visible} .blx-sim--cine.is-wide .blx-3d,.blx-sim--cine.is-wide .blx-2d{inset:clamp(.5rem,1.5vw,1rem) 0 0 0} .blx-sim--cine.is-wide>.blx-sim__tele>.blx-sim__legend{position:static;margin:0;width:auto;max-width:none;display:flex;flex-wrap:wrap;gap:.35rem .9rem;padding:.6rem .8rem;border-radius:10px;font-size:.7rem} .blx-sim--cine.is-wide>.blx-sim__tele>.blx-sim__legend li{white-space:nowrap} .blx-sim--cine.is-wide>.blx-sim__tele>.blx-sim__legend .is-note{white-space:normal;flex-basis:100%} .blx-sim--cine.is-wide>.blx-sim__panel{grid-area:panel;align-self:stretch;margin:clamp(1rem,2vw,1.5rem) 0 0 clamp(1rem,2vw,1.75rem);padding:clamp(1.25rem,4vh,2.75rem) clamp(1.1rem,2vw,1.5rem); max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;gap:.65rem;justify-content:flex-start;padding-top:clamp(1.25rem,4vh,2.75rem)} /* anchored at the top: nothing below a control moves it */ .blx-sim--cine.is-wide>.blx-sim__tele{grid-area:tele;align-self:stretch;margin:clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.75rem) 0 0;padding:clamp(1.25rem,4vh,2.75rem) clamp(1.1rem,2vw,1.5rem); grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;gap:.7rem;overflow:auto;scrollbar-width:thin} .blx-sim--cine.is-wide .blx-sim__tele-ros{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem} .blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__tele-ros{grid-template-columns:repeat(3,minmax(0,1fr))} .blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__cell{font-size:.7rem;min-height:0;padding:.3rem 0} .blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__grid{grid-template-columns:auto repeat(5,minmax(24px,34px));gap:2px} .blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__bar{font-size:.7rem} .blx-sim--cine.is-wide .blx-sim__tele-chart{border:1px solid var(--sim-rule);border-radius:8px;padding:.35rem .35rem 0} .blx-sim--cine.is-wide .blx-sim__tele-ros .blx-sim__ro{padding:.55rem .65rem} .blx-sim--cine.is-wide .blx-sim__tele-ros .blx-sim__ro-num{font-size:1.05rem} .blx-sim--cine.is-wide .blx-sim__tele-verdict .blx-sim__diag{padding:.7rem .85rem} .blx-sim--cine.is-wide .blx-sim__diag-cause{font-size:1.15rem} .blx-sim--cine.is-wide .blx-sim__diag-head{font-size:.8125rem} .blx-sim--cine.is-wide .blx-sim__diag-why{font-size:.75rem;margin:.25rem 0 0} .blx-sim--cine.is-wide .blx-sim__diag-why li:nth-child(n+3){display:none} .blx-sim--cine.is-wide .blx-sim__tele-verdict .blx-sim__note{font-size:.8125rem} .blx-sim--cine.is-wide>.blx-sim__panel>.blx-sim__lede{display:none} /* Short screens: the stage gives way before the numbers do */ @media (max-height:820px){ /* A short laptop screen: the instruments keep their numbers and headline, lose the prose */ .blx-sim--cine.is-wide>.blx-sim__panel,.blx-sim--cine.is-wide>.blx-sim__tele{padding-top:1rem;padding-bottom:1rem} .blx-sim--cine.is-wide>.blx-sim__panel{gap:.5rem} .blx-sim--cine.is-wide>.blx-sim__panel .blx-sim__note--small{display:none} .blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__tele .blx-sim__cap{display:none} .blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__grid{grid-template-columns:auto repeat(5,minmax(20px,28px))} .blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__bar{font-size:.65rem} .blx-sim--cine.is-wide .blx-sim__diag-why{display:none} .blx-sim--cine.is-wide>.blx-sim__tele>.blx-sim__legend .is-note{display:none} .blx-sim--cine.is-wide .blx-sim__tele-verdict .blx-sim__note{display:none} .blx-sim--cine.is-wide>.blx-sim__tele{gap:.5rem} } @media (max-height:760px){ .blx-sim--cine.is-wide{height:640px} /* fixed: an auto height followed the panels' content, so the stage reshaped as numbers arrived */ .blx-sim--cine.is-wide .blx-sim__tele-ros .blx-sim__ro-num{font-size:.95rem} .blx-sim--cine.is-wide .blx-sim__tele-ros .blx-sim__ro{padding:.45rem .55rem} } .blx-sim--cine .blx-sim__ros{gap:.55rem .9rem} /* 2.6.31 — the lifecycle instruments: three readouts with their values on one line (labels balanced to two lines, the number pinned to the foot of each tile), and a key for the policy squares in place of a run of glyphs in the caption. */ .blx-sim__ro-num{margin-top:auto} .blx-sim--lifecycle .blx-sim__tele-ros .blx-sim__ro-k{font-size:.625rem;letter-spacing:.03em;line-height:1.3;text-wrap:balance} .blx-sim__key{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin:.55rem 0 0;padding:0;list-style:none;font-size:.6875rem;color:var(--sim-ink-3)} .blx-sim__key li{display:flex;align-items:center;gap:.35rem;white-space:nowrap} .blx-sim--lifecycle .blx-sim__tele .blx-sim__key .blx-sim__cell{display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;min-height:0;padding:0;aspect-ratio:auto;font-size:.6rem;font-weight:700;border-radius:4px;pointer-events:none} @media (max-height:820px){.blx-sim--lifecycle.blx-sim--cine.is-wide .blx-sim__key{gap:.25rem .6rem;margin-top:.4rem}} /* The aquifer — ambient shader behind the hero. The gradient beneath is the design; this is the light on it. Fades in only once it has a frame. */ .blx-hero__aquifer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s ease;z-index:0} .blx-hero__aquifer.is-on{opacity:1} .blx-hero::before{z-index:1} .blx-hero__inner{position:relative;z-index:2} /* ========================================================================== SEE THE PLATFORM — the product tour and the door into the demo district ========================================================================== */ .blx-showcase__tour{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)} .blx-showcase__tabs{display:flex;flex-wrap:wrap;gap:.4rem;padding:.35rem;border-radius:12px; background:rgba(6,18,41,.55);border:1px solid rgba(110,221,243,.16);width:max-content;max-width:100%} .blx-showcase__tab{appearance:none;border:0;background:transparent;color:var(--blx-chrome-300);cursor:pointer; font:600 .875rem/1 var(--blx-font-body,inherit);letter-spacing:.01em;padding:.7rem 1rem;border-radius:9px; display:inline-flex;align-items:center;gap:.6rem;transition:background .18s ease,color .18s ease} .blx-showcase__tab:hover{color:#fff;background:rgba(255,255,255,.06)} .blx-showcase__tab.is-on{background:var(--blx-current);color:#fff;box-shadow:0 8px 24px -12px rgba(14,99,214,.9)} .blx-showcase__tabnum{font-family:var(--blx-font-data);font-size:.6875rem;letter-spacing:.1em;opacity:.7} .blx-showcase__tab.is-on .blx-showcase__tabnum{opacity:.9} .blx-showcase__view{display:grid;gap:1.5rem;align-items:start;grid-template-columns:minmax(0,1fr)} .blx-showcase__view[hidden]{display:none} @media (min-width:980px){.blx-showcase__view{grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:clamp(1.5rem,3vw,2.75rem)}} .blx-showcase__frame{margin:0;border-radius:14px;overflow:hidden;min-width:0; background:#0B1F45;border:1px solid rgba(110,221,243,.22); box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4),0 0 80px -20px rgba(30,134,240,.35)} .blx-showcase__chrome{display:flex;align-items:center;gap:.4rem;padding:.55rem .85rem;background:rgba(6,18,41,.75);border-bottom:1px solid rgba(110,221,243,.14)} .blx-showcase__chrome span{width:9px;height:9px;border-radius:50%;background:rgba(201,214,230,.28)} .blx-showcase__chrome b{margin-left:.6rem;font:500 .6875rem/1 var(--blx-font-data);letter-spacing:.08em;text-transform:uppercase;color:var(--blx-chrome-400)} .blx-showcase__frame img{display:block;width:100%;height:auto;background:#fff} .blx-showcase__copy h3{margin:0 0 .6rem;font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.015em;line-height:1.15} .blx-showcase__copy p{margin:0 0 1rem;color:var(--blx-chrome-300);line-height:1.6} .blx-showcase__facts{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .blx-showcase__facts li{position:relative;padding-left:1.35rem;color:var(--blx-chrome-200);font-size:.9375rem;line-height:1.5} .blx-showcase__facts li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;height:2px;border-radius:2px;background:var(--blx-cyan-300)} .blx-showcase__cta{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:1.25rem;align-items:center; padding:clamp(1.25rem,3vw,2rem);border-radius:14px;background:rgba(18,48,95,.42);border:1px solid rgba(110,221,243,.2)} @media (min-width:900px){.blx-showcase__cta{grid-template-columns:minmax(0,1fr) auto}} .blx-showcase__cta h3{margin:0 0 .4rem;font-size:1.25rem;letter-spacing:-.01em} .blx-showcase__cta p{margin:0;color:var(--blx-chrome-300);max-width:62ch;line-height:1.55} .blx-showcase__ext{margin-left:.35rem;opacity:.85} @media (max-width:560px){.blx-showcase__tabs{width:100%;display:grid;grid-template-columns:1fr 1fr}.blx-showcase__tab{justify-content:center}} /* Header: the demo door sits beside the walkthrough button */ .blx-nav__cta{display:inline-flex;gap:.5rem;align-items:center} .blx-front .blx-header:not(.is-stuck) .blx-btn--ghost{color:#fff;border-color:rgba(201,214,230,.38)} .blx-front .blx-header:not(.is-stuck) .blx-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff} @media (max-width:1120px){.blx-nav__cta{display:grid;gap:.5rem}} .blx-nav__link{white-space:nowrap} /* Header fit (2.6.14). Eight links and two buttons measured 1107px against the 1018px the 1220px column leaves beside the lockup, so from 1381px up the walkthrough button ran 152px past the column: clipped by the viewport at 1440, overhanging the hero grid on wider screens (the column is capped, so no screen width cured it). The desktop links now sit a step tighter, the demo door shows only once the column is at full width, and the row was measured to fit inside the column at every desktop width with margin to spare for differences in font rendering. */ @media (min-width:1121px){ .blx-header__inner{gap:1rem} .blx-nav__list{gap:0} .blx-nav__link{padding:.55rem .5rem;font-size:.8125rem;letter-spacing:.01em} .blx-nav__cta{margin-left:.4rem;gap:.4rem} .blx-nav__cta .blx-btn--sm{padding-inline:.85rem} } @media (min-width:1121px) and (max-width:1283px){.blx-nav__demo{display:none}} /* The pump curve stage section (Platform, Methodology) */ .blx-pcstage__frame{max-width:1120px;margin:0 auto} .blx-pcstage__rows{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:1.25rem 2rem} @media (min-width:760px){.blx-pcstage__rows{grid-template-columns:1fr 1fr}} @media (min-width:1100px){.blx-pcstage__rows{grid-template-columns:1fr 1fr 1fr}} .blx-pcstage__row{padding:1.1rem 1.2rem;border-radius:12px;background:rgba(18,48,95,.36);border:1px solid rgba(110,221,243,.16)} .blx-pcstage__row h3{margin:0 0 .45rem;font-size:1rem;letter-spacing:.01em} .blx-pcstage__row p{margin:0;color:var(--blx-chrome-300);font-size:.9375rem;line-height:1.55} /* ========================================================================== THE ASSISTANT — launcher and panel ========================================================================== */ .blx-assist__launch{position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:120; display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.1rem .75rem .85rem;border:0;border-radius:999px;cursor:pointer; background:var(--blx-current);color:#fff;font:600 .9rem/1 var(--blx-font-body);letter-spacing:.01em; box-shadow:0 18px 40px -16px rgba(14,99,214,.85),0 0 0 1px rgba(110,221,243,.25);transition:transform .18s ease,box-shadow .18s ease} .blx-assist__launch:hover{transform:translateY(-1px);box-shadow:0 22px 46px -16px rgba(14,99,214,.95),0 0 0 1px rgba(110,221,243,.4)} .blx-assist__launch:focus-visible{outline:3px solid var(--blx-cyan-300);outline-offset:3px} .blx-assist__launch-mark{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(6,18,41,.55);color:var(--blx-cyan-300)} .blx-assist__launch-mark svg,.blx-assist__head-mark svg{width:.9rem;height:.9rem} .blx-assist__launch.is-busy .blx-assist__launch-mark{animation:blxAssistSpin 1.2s linear infinite} @keyframes blxAssistSpin{to{transform:rotate(360deg)}} .blx-assist__launch.is-open .blx-assist__launch-text{display:none} .blx-assist__launch.is-open{padding:.75rem .85rem} @media (max-width:560px){.blx-assist__launch-text{display:none}.blx-assist__launch{padding:.85rem}} .blx-assist{position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:calc(clamp(1rem,2.5vw,1.75rem) + 4rem);z-index:119; width:min(420px,calc(100vw - 2rem));height:min(640px,calc(100vh - 7rem));display:flex;flex-direction:column; background:#fff;color:var(--blx-ink);border:1px solid var(--blx-rule);border-radius:18px;overflow:hidden; box-shadow:0 40px 90px -30px rgba(6,18,41,.6),0 0 0 1px rgba(6,18,41,.04); animation:blxAssistIn .22s ease-out} .blx-assist[hidden]{display:none} @keyframes blxAssistIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .blx-assist__wait{font-size:.85rem;color:var(--blx-ink-3);margin-left:.35rem} @media (prefers-reduced-motion:reduce){.blx-assist{animation:none}.blx-assist__launch.is-busy .blx-assist__launch-mark{animation:none}} @media (max-width:560px){.blx-assist{right:.5rem;left:.5rem;width:auto;bottom:4.6rem;height:min(72vh,calc(100vh - 6rem))}} .blx-assist__head{display:flex;align-items:flex-start;gap:.75rem;padding:.95rem 1rem .85rem;background:linear-gradient(168deg,#0A1B3D 0%,#061229 62%,#08183A 100%);color:#fff} .blx-assist__head b{display:block;font-size:.95rem;letter-spacing:.005em} .blx-assist__head small{display:block;color:var(--blx-chrome-300);font-size:.75rem;line-height:1.4;margin-top:.15rem} .blx-assist__head-mark{flex:none;display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:9px;background:rgba(110,221,243,.14);border:1px solid rgba(110,221,243,.3);color:var(--blx-cyan-300)} .blx-assist__close{margin-left:auto;flex:none;width:2rem;height:2rem;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center} .blx-assist__close svg{width:1rem;height:1rem} .blx-assist__close:hover{background:rgba(255,255,255,.16)} .blx-assist__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem;background:#F8FAFD;scroll-behavior:smooth} .blx-assist__msg{max-width:92%;font-size:.9rem;line-height:1.5} .blx-assist__msg--user{align-self:flex-end} .blx-assist__msg--user .blx-assist__body{background:var(--blx-current);color:#fff;border-radius:14px 14px 4px 14px;padding:.6rem .85rem} .blx-assist__msg--assistant .blx-assist__body{background:#fff;border:1px solid var(--blx-rule);border-radius:14px 14px 14px 4px;padding:.65rem .9rem} .blx-assist__body p{margin:0 0 .55rem}.blx-assist__body p:last-child{margin-bottom:0} .blx-assist__body ul{margin:.2rem 0 .5rem 1.1rem;padding:0}.blx-assist__body li{margin:.15rem 0} .blx-assist__body code{font-family:var(--blx-font-data);font-size:.82em;background:var(--blx-chrome-200);padding:.05rem .3rem;border-radius:4px} .blx-assist__body a{color:var(--blx-blue-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} .blx-assist__dots{display:inline-flex;gap:.28rem;padding:.2rem 0} .blx-assist__dots i{width:.42rem;height:.42rem;border-radius:50%;background:var(--blx-blue-600);opacity:.35;animation:blxDots 1.1s infinite ease-in-out} .blx-assist__dots i:nth-child(2){animation-delay:.15s}.blx-assist__dots i:nth-child(3){animation-delay:.3s} @keyframes blxDots{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} .blx-assist__thumbs{display:flex;gap:.25rem;margin-top:.3rem} .blx-assist__thumb{border:0;background:transparent;cursor:pointer;font-size:.85rem;opacity:.45;padding:.1rem .3rem;border-radius:6px;filter:grayscale(1)} .blx-assist__thumb:hover,.blx-assist__thumb.is-on{opacity:1;filter:none;background:var(--blx-chrome-200)} .blx-assist__calc{align-self:stretch;background:#0A1B3D;color:#fff;border-radius:12px;padding:.75rem .9rem;border:1px solid rgba(110,221,243,.25)} .blx-assist__calc-h{font-family:var(--blx-font-data);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blx-cyan-300);margin-bottom:.5rem} .blx-assist__calc dl{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;margin:0} .blx-assist__calc dt{color:var(--blx-chrome-300);font-size:.82rem} .blx-assist__calc dd{margin:0;font-family:var(--blx-font-data);font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums} .blx-assist__calc small{display:block;margin-top:.5rem;color:var(--blx-chrome-400);font-size:.7rem;line-height:1.35} .blx-assist__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .6rem;background:#F8FAFD} .blx-assist__chips[hidden]{display:none} .blx-assist__chip{border:1px solid var(--blx-rule-strong);background:#fff;color:var(--blx-navy-800);border-radius:999px;padding:.4rem .75rem;font:500 .8rem/1.2 var(--blx-font-body);cursor:pointer;transition:border-color .15s,background .15s} .blx-assist__chip:hover{border-color:var(--blx-blue-600);background:var(--blx-chrome-200)} .blx-assist__form{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem .75rem;border-top:1px solid var(--blx-rule);background:#fff} .blx-assist__input{flex:1;resize:none;border:1px solid var(--blx-rule-strong);border-radius:12px;padding:.6rem .8rem;font:inherit;font-size:.9rem;line-height:1.4;max-height:140px;color:var(--blx-ink);background:#fff} .blx-assist__input:focus{outline:none;border-color:var(--blx-blue-600);box-shadow:0 0 0 4px rgba(30,134,240,.14)} .blx-assist__send{flex:none;width:2.5rem;height:2.5rem;border:0;border-radius:10px;background:var(--blx-current);color:#fff;cursor:pointer;display:grid;place-items:center} .blx-assist__send svg{width:1.1rem;height:1.1rem} .blx-assist__send:disabled{opacity:.45;cursor:default} .blx-assist__foot{margin:0;padding:.45rem .9rem .6rem;font-size:.66rem;line-height:1.4;color:var(--blx-ink-3);background:#fff} .blx-assist__foot a,.blx-assist__foot{text-decoration:none} @media print{.blx-assist,.blx-assist__launch{display:none!important}} /* ========================================================================== REPORT TOUR — /well-report/ -------------------------------------------------------------------------- The board report, rebuilt in the site's own markup rather than screenshotted. Rendering it as real elements keeps it readable to a screen reader, indexable, reflowable on a phone, and — the part that matters commercially — impossible to leave showing last quarter's figures. ========================================================================== */ .blx-rt{display:grid;gap:2rem} .blx-rt__frame{ border:1px solid var(--blx-rule-strong);border-radius:14px;overflow:hidden;background:var(--blx-white); box-shadow:0 18px 44px -30px rgba(6,18,41,.55); } .blx-rt__head{ display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap; background:var(--blx-navy-900);color:#fff;padding:.85rem 1.25rem; } .blx-rt__mark{font-family:var(--blx-font-display);font-weight:800;letter-spacing:.13em;font-size:.9rem} .blx-rt__mark i{color:var(--blx-cyan-400);font-style:normal} .blx-rt__sub{font-family:var(--blx-font-data);font-size:.7rem;color:var(--blx-chrome-300)} .blx-rt__title{padding:1.15rem 1.25rem .5rem} .blx-rt__district{ font-family:var(--blx-font-data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--blx-ink-3);margin:0 0 .3rem; } .blx-rt__title h3{margin:0;font-size:1.5rem;line-height:1.15} .blx-rt__meta{font-family:var(--blx-font-data);font-size:.72rem;color:var(--blx-ink-3);margin:.3rem 0 0} .blx-rt__kpis{ list-style:none;margin:0;padding:1rem 1.25rem 1.25rem; display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); } .blx-rt__kpi{ border:1px solid var(--blx-rule);border-radius:9px;padding:.6rem .7rem; border-top:2px solid var(--blx-chrome-300);display:grid;gap:.25rem;align-content:start; } .blx-rt__kpi.is-warn{border-top-color:#D9A441} .blx-rt__kpi.is-bad{border-top-color:#C9564F} .blx-rt__kl{ font-family:var(--blx-font-data);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase; color:var(--blx-ink-3);line-height:1.3; } .blx-rt__kv{ font-family:var(--blx-font-display);font-weight:700;font-size:1.35rem;color:var(--blx-navy-900); line-height:1.05;font-variant-numeric:tabular-nums; } .blx-rt__kv small{font-size:.62rem;font-weight:600;color:var(--blx-ink-3);margin-left:.2rem;letter-spacing:.02em} .blx-rt__ks{font-size:.72rem;color:var(--blx-ink-2);line-height:1.35} .blx-rt__caption{ margin:0;padding:.85rem 1.25rem;border-top:1px solid var(--blx-rule); background:var(--blx-paper);font-size:.8125rem;color:var(--blx-ink-2); } .blx-rt__pages{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem} .blx-rt__page{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start} .blx-rt__n{ flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center; background:var(--blx-navy-800);color:#fff;font-family:var(--blx-font-display);font-weight:700;font-size:.85rem; } .blx-rt__page h4{margin:.2rem 0 .3rem;font-size:1.0625rem} .blx-rt__page p{margin:0;color:var(--blx-ink-2)} .blx-rt__cta{display:flex;flex-wrap:wrap;gap:.7rem} .blx-rt__fine{margin:0;font-size:.8125rem;color:var(--blx-ink-3)} @media (max-width:600px){ .blx-rt__kpis{grid-template-columns:repeat(2,1fr)} .blx-rt__title h3{font-size:1.25rem} } /* ========================================================================== ACCESSIBILITY CORRECTIONS — 2.4.0 -------------------------------------------------------------------------- Two findings from the site audit, both site-wide and both invisible on a desktop, which is why they survived this long. ========================================================================== */ /* * WCAG 2.2 AA §2.5.8 (Target Size, Minimum) asks for 24 x 24 CSS px on any * pointer target. Every link in the footer navigation measured 17px tall on a * 390px viewport — twenty-one failing targets on every page of the site, and * the glossary's A–Z index was ninety more. The text stays the size it was; * the target grows around it. */ .blx-footer__grid a, .blx-footer__legal a, .blx-glossary-index a{ display:inline-flex;align-items:center;min-height:24px; } .blx-glossary-index a{min-width:24px;justify-content:center} /* * Nothing carrying meaning goes below 11px, and nothing a reader has to read * a row of goes below 12px. * * The audit found content — table headers, figure captions, the lockup * tagline at 9px — set smaller than the interface labels around it. 10px is * defensible for a status pill you glance at; it is not defensible for a * column header somebody reads eight times down a table. */ .blx-lockup__tagline{font-size:.6875rem} /* was 9px */ .blx-table th, .blx-prose table th{font-size:.75rem} /* was 10px */ /* * ...and the colour it left behind. F28 raised the size of these headers and * stopped there. Measured on the shipped stylesheet, every table header on the * site sat at 3.38:1 against its own tinted background — 12px bold is small * text, so AA wants 4.5:1. --blx-ink-label is the same family, two steps * darker, and measures ~5:1 while staying clearly lighter than body ink. */ .blx-table th, .blx-prose table th, .wp-block-table > table th{color:var(--blx-ink-label)} figcaption,.blx-figcaption{font-size:.75rem} /* was 10px */ .blx-calc__cap,.blx-stat__l,.blx-standards__label{font-size:.6875rem} /* --------------------------------------------------------------------------- How long each step takes. The walkthrough asks a district to go and find decades of paper, which is the real cost of saying yes and the real reason people do not. So each step states its own cost in time, in the card, above the description — and the one that matters reads "none of them yours". --------------------------------------------------------------------------- */ /* .blx-card p already claims these paragraphs, so match its specificity. */ .blx-card p.blx-step-time, .blx-step-time{ font-family:var(--blx-font-data); font-size:.75rem;letter-spacing:.02em; color:var(--blx-blue-600); margin:-.35rem 0 .6rem; } .blx-section--deep .blx-step-time{color:var(--blx-cyan-400)} /* ====================================================================== THE FREE CALCULATORS Three cards, each one an input grid over an answer block. Built to be USED rather than admired: every field is labelled and hinted, every answer is live, and the note underneath is the part that matters — the caveat is the product here, so it gets the weight of body copy rather than the size of a footnote. ====================================================================== */ .blx-tools{display:grid;gap:1.5rem} .blx-t{display:grid;gap:1.1rem;padding:1.5rem 1.5rem 1.35rem;scroll-margin-top:calc(var(--blx-header-h) + 1rem)} .blx-t__head h3{margin:.15rem 0 .4rem;font-size:1.375rem;letter-spacing:-.012em} .blx-t__lede{margin:0;font-size:.9375rem;line-height:1.6;color:var(--blx-ink-2);max-width:64ch} .blx-t__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.85rem 1.1rem} .blx-t__out{border-top:1px solid var(--blx-rule,rgba(201,214,230,.5));padding-top:.95rem;display:grid;gap:.3rem} .blx-t__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; font-size:.9375rem;padding:.22rem 0;border-bottom:1px dotted rgba(140,155,175,.35)} .blx-t__row:last-of-type{border-bottom:0} .blx-t__k{color:var(--blx-ink-2)} .blx-t__k i{font-style:normal;color:var(--blx-ink-3);font-size:.8125rem} /* Answers are a data face so decimal points line up down the column. */ .blx-t__v{font-family:var(--blx-data,ui-monospace,SFMono-Regular,Menlo,monospace); font-weight:700;font-size:1rem;color:var(--blx-ink);white-space:nowrap} .blx-t__v.is-hero{font-size:1.5rem;letter-spacing:-.01em} /* Status colours are text, so they clear the 4.5:1 floor for body copy — the bright status fills are for marks, not for words. */ .blx-t__v.is-good{color:#1E7A57} .blx-t__v.is-warn{color:#9A6207} .blx-t__v.is-bad{color:#C4262B} /* A figure shown for contrast rather than for use — the cube-law number the rest of the internet would have quoted. Set back so the eye lands on the answer above it. */ .blx-t__v.is-quiet{font-weight:600;color:var(--blx-ink-3);font-size:.9375rem} .blx-t__note{margin:.7rem 0 0;font-size:.875rem;line-height:1.62;color:var(--blx-ink-2); display:none;padding:.8rem .9rem;border-radius:10px;border:1px solid transparent} .blx-t__note.is-on{display:block} .blx-t__note--ok{background:rgba(30,122,87,.06);border-color:rgba(30,122,87,.22)} .blx-t__note--warn{background:rgba(154,98,7,.06);border-color:rgba(154,98,7,.24)} .blx-t__note--bad{background:rgba(196,38,43,.05);border-color:rgba(196,38,43,.22)} .blx-t__note b{color:var(--blx-ink)} /* The return path (2.6.15): actions under every answer block, the mail-me form, the toast, the install bar, and a print layout that is just the card with a stamp. */ .blx-t__actions{display:flex;flex-wrap:wrap;gap:.45rem .5rem;margin-top:.35rem} .blx-t__act{appearance:none;cursor:pointer;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.03em; padding:.45rem .7rem;border-radius:6px;border:1px solid var(--blx-rule-strong);background:var(--blx-white);color:var(--blx-navy-800); transition:background .15s ease,border-color .15s ease} .blx-t__act:hover,.blx-t__act:focus-visible{background:var(--blx-chrome-200);border-color:var(--blx-navy-800)} .blx-t__act--quiet{color:var(--blx-ink-3);border-color:transparent} .blx-t__mail{margin-top:.6rem;padding:.9rem 1rem;border-radius:10px;background:rgba(14,99,214,.05);border:1px solid rgba(14,99,214,.18)} .blx-t__mailform{display:grid;gap:.55rem} .blx-t__maillab{font-size:.875rem;color:var(--blx-ink-2);line-height:1.5} .blx-t__mailrow{display:flex;gap:.5rem;align-items:stretch} .blx-t__mailrow input{flex:1 1 14rem;min-width:0} .blx-t__consent{display:flex;gap:.45rem;align-items:flex-start;font-size:.8125rem;color:var(--blx-ink-2);font-family:var(--blx-font-body)} .blx-t__consent input{margin-top:.2rem} .blx-t__mailmsg{margin:0;font-size:.8125rem;color:var(--blx-ink-2);min-height:1.2em} .blx-t__mailmsg.is-ok{color:#1E7A57} .blx-t__mailmsg.is-bad{color:#C4262B} .blx-t__toast{margin:.4rem 0 0;font-size:.8125rem;color:var(--blx-ink-2);opacity:0;transition:opacity .2s ease;min-height:1.2em} .blx-t__toast.is-on{opacity:1} .blx-t__toast.is-ok{color:#1E7A57} .blx-tools__bar{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:space-between; padding:.9rem 1.1rem;border-radius:12px;background:var(--blx-navy-900,#061229);color:#fff;margin-bottom:1.25rem} .blx-tools__bartext{margin:0;font-size:.9375rem;line-height:1.5;color:var(--blx-chrome-200,#DCE4EF);flex:1 1 26rem} .blx-t__printhead,.blx-t__printstamp{display:none} /* Print one card (2.6.25). Until 2.6.24 this hid the rest of the page with visibility:hidden, which keeps every hidden box's height — the header, the other calculators, the footer — so a one-card print ran to five pages, four of them blank. Now tools.js marks the card's ancestors .blx-print-keep and everything outside that chain leaves the layout with display:none. The card prints under a BoreLogix header (mark, wordmark, product line) and a stamp with the date and the link that reopens the numbers. */ @media print{ body.blx-print-card *:not(.blx-print-keep):not(.blx-t.is-printing *){display:none!important} body.blx-print-card .blx-print-keep{display:block!important;position:static!important;margin:0!important;padding:0!important;min-height:0!important;height:auto!important;max-width:none!important;width:auto!important; background:#fff!important;color:#000!important;box-shadow:none!important;border:0!important;transform:none!important;overflow:visible!important;float:none!important} body.blx-print-card .blx-print-keep:not(.blx-t)::before,body.blx-print-card .blx-print-keep:not(.blx-t)::after{content:none!important;display:none!important} body.blx-print-card .blx-t.is-printing{display:grid!important;gap:9pt;padding:0!important;box-shadow:none;border:0;background:#fff;color:#000;break-inside:auto} body.blx-print-card .blx-t.is-printing .blx-t__actions,body.blx-print-card .blx-t.is-printing .blx-t__mail,body.blx-print-card .blx-t.is-printing .blx-t__toast,body.blx-print-card .blx-t.is-printing .blx-seg{display:none!important} body.blx-print-card .blx-t__printhead{display:flex!important;align-items:center;justify-content:space-between;gap:12pt;padding:0 0 8pt;margin:0 0 2pt;border-bottom:1.5pt solid #0B1A33;color:#0B1A33} body.blx-print-card .blx-t__printhead .blx-lockup{display:inline-flex;align-items:center;gap:7pt;color:#0B1A33} body.blx-print-card .blx-t__printhead .blx-mark{width:26pt;height:26pt;color:#0B1A33} body.blx-print-card .blx-t__printhead .blx-wordmark{font-family:var(--blx-font-display);font-weight:800;font-size:15pt;letter-spacing:.055em;line-height:1;color:#0B1A33} body.blx-print-card .blx-t__printhead .blx-wordmark__x{background:none;-webkit-text-fill-color:#0E63D6;color:#0E63D6} body.blx-print-card .blx-t__printhead__product{margin:0;font-family:var(--blx-font-data);font-size:8pt;letter-spacing:.14em;text-transform:uppercase;color:#3A4A66;text-align:right;white-space:nowrap} body.blx-print-card .blx-t__printstamp{display:block!important;font-family:var(--blx-font-data);font-size:8pt;line-height:1.5;color:#555;margin:0 0 6pt;word-break:break-all} body.blx-print-card .blx-t__note{display:block;border:1px solid #bbb} body.blx-print-card .blx-t input,body.blx-print-card .blx-t select{border:1px solid #999;background:#fff;color:#000;font-size:10pt;padding:4pt 6pt;min-height:0;height:auto} body.blx-print-card .blx-t a[href]::after{content:none!important} /* Sized so the tallest card — wire-to-water with its two-paragraph note — sits on one Letter page. */ body.blx-print-card .blx-t__head h3{font-size:15pt;margin:0 0 3pt} body.blx-print-card .blx-t__lede{font-size:9.5pt;line-height:1.45;max-width:none} body.blx-print-card .blx-t__grid{gap:6pt 10pt} body.blx-print-card .blx-t label,body.blx-print-card .blx-t .blx-field__label{font-size:9pt} body.blx-print-card .blx-t .blx-field__hint{font-size:7.5pt;line-height:1.35} body.blx-print-card .blx-t__out{padding-top:6pt;gap:1pt} body.blx-print-card .blx-t__row{font-size:9.5pt;padding:2pt 0} body.blx-print-card .blx-t__v{font-size:10pt} body.blx-print-card .blx-t__v.is-hero{font-size:15pt} body.blx-print-card .blx-t__note{font-size:9pt;line-height:1.45;padding:6pt 8pt;margin-top:5pt;break-inside:avoid} html.blx-print-card,html.blx-print-card body{height:auto!important;min-height:0!important;overflow:visible!important;margin:0!important} } /* What's new (2.6.15): one file, newest first. */ .blx-wn{display:grid;gap:2.25rem;max-width:72ch} .blx-wn__stamp{margin:0;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blx-ink-3)} .blx-wn__rel{padding-top:1.5rem;border-top:1px solid var(--blx-rule)} .blx-wn__head h2{margin:.2rem 0 .5rem;font-size:1.5rem;letter-spacing:-.015em} .blx-wn__date{display:block;font-family:var(--blx-font-data);font-size:.8125rem;color:var(--blx-ink-3);margin-bottom:.35rem} .blx-wn__lede{margin:0 0 .9rem;font-size:1.0625rem;line-height:1.6;color:var(--blx-ink-2)} .blx-wn__items{margin:0;padding-left:1.15rem;display:grid;gap:.55rem;font-size:.9375rem;line-height:1.6} .blx-wn__proof{margin:1rem 0 0;font-size:.875rem;line-height:1.6;color:var(--blx-ink-2);padding:.75rem .9rem;border-radius:10px;background:rgba(30,122,87,.06);border:1px solid rgba(30,122,87,.22)} .blx-wn__foot{margin:0;font-size:.9375rem;line-height:1.6;color:var(--blx-ink-2);padding-top:1.5rem;border-top:1px solid var(--blx-rule)} @media (max-width:600px){ .blx-t{padding:1.15rem 1.1rem} .blx-t__head h3{font-size:1.1875rem} .blx-t__row{flex-wrap:wrap;gap:.15rem} .blx-t__v.is-hero{font-size:1.3125rem} } /* Share rows and social profiles (2.6.16). Plain links, the site's own glyphs. */ .blx-share{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;margin:2.25rem 0 0;padding:1rem 0 0;border-top:1px solid var(--blx-rule,#DCE4EE);position:relative} /* 2.6.25: on a landing (page-full) page the row gets its own section — a compact band after the closing CTA, aligned with the page column rather than the viewport. */ .blx-share__section{padding-block:1.75rem 2.25rem;border-top:1px solid var(--blx-rule,#DCE4EE)} .blx-share__section .blx-share{margin:0;padding:0;border-top:0} .blx-share__label{font-family:var(--blx-data,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blx-ink-3,#606E83);font-weight:700} .blx-share__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem} .blx-share__list li,.blx-social li{margin:0;padding:0;display:inline-flex;line-height:1} /* 2.6.25: the prose rule ".blx-prose li + li{margin-top:.5rem}" outranks the line above and pushed every pill but the first down 8px — LinkedIn sat high. Same specificity, later. */ .blx-share__list li + li,.blx-social li + li,.blx-prose .blx-share__list li + li,.blx-prose .blx-social li + li{margin-top:0} .blx-share__list li::before,.blx-social li::before,.blx-share__list li::marker,.blx-social li::marker{content:none} .blx-share__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .75rem;border:1px solid var(--blx-rule,#DCE4EE);border-radius:999px;background:#fff;color:var(--blx-ink-2,#2A3A55);font:inherit;font-size:.85rem;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s} .blx-share__btn:hover,.blx-share__btn:focus-visible{border-color:var(--blx-blue-600,#0E63D6);color:var(--blx-blue-600,#0E63D6);background:#F3F7FD;text-decoration:none} .blx-share__ico{flex:none} .blx-share__toast{position:absolute;right:0;bottom:calc(100% + .35rem);padding:.3rem .6rem;border-radius:6px;background:var(--blx-navy-900,#061229);color:#fff;font-size:.78rem;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none} .blx-share__toast.is-on{opacity:1;transform:none} .blx-social,.blx-footer ul.blx-social{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem} .blx-social a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.82rem;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s} .blx-social a:hover,.blx-social a:focus-visible{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);text-decoration:none} .blx-social--footer{flex:1 1 100%} .blx-social--inline a{border-color:var(--blx-rule,#DCE4EE);color:var(--blx-ink-2,#2A3A55);background:#fff} .blx-social--inline a:hover,.blx-social--inline a:focus-visible{border-color:var(--blx-blue-600,#0E63D6);color:var(--blx-blue-600,#0E63D6);background:#F3F7FD} @media print{.blx-share,.blx-social{display:none}} /* Consulting call to action at the end of every field note (inc/consult-cta.php). */ .blx-consult{margin:3rem 0 2.25rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:14px;background:radial-gradient(120% 140% at 100% 0%,rgba(57,210,238,.18) 0%,rgba(57,210,238,0) 55%),linear-gradient(160deg,var(--blx-navy-800) 0%,var(--blx-navy-900) 100%);color:#fff;box-shadow:var(--blx-shadow-lift)} .blx-consult .blx-consult__eyebrow{margin:0 0 .6rem;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blx-cyan-300)} .blx-consult .blx-consult__title{margin:0 0 .9rem;font-family:var(--blx-font-display);font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.2;color:#fff} .blx-consult .blx-consult__lead{margin:0 0 1.15rem;color:var(--blx-chrome-200);line-height:1.65} .blx-consult .blx-consult__intro{margin:0 0 .7rem;color:#fff;font-weight:600} .blx-consult .blx-consult__list{list-style:none;margin:0 0 1.35rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem} .blx-consult .blx-consult__list li{margin:0;padding:.45rem .85rem;border:1px solid rgba(201,214,230,.28);border-radius:999px;background:rgba(255,255,255,.05);font-size:.875rem;line-height:1.35;color:var(--blx-chrome-200)} .blx-consult .blx-consult__close{margin:0 0 1.1rem;font-family:var(--blx-font-display);font-size:1.125rem;line-height:1.3;color:#fff} .blx-consult .blx-consult__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0} .blx-consult a.blx-btn{white-space:normal;text-align:center;text-decoration:none} .blx-consult a.blx-btn:hover{text-decoration:none} @media (max-width:560px){.blx-consult .blx-consult__actions a.blx-btn{flex:1 1 100%}} @media print{.blx-consult{display:none}} /* 2.6.32: the compact card beside the home page's "The gap" heading — the heading left, the offer right, one row */ .blx-gaphead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(2rem,4vw,3rem)} .blx-gaphead .blx-sectionhead{margin-bottom:0} .blx-gaphead .blx-consult{margin:0} .blx-consult--compact .blx-consult__title{font-size:clamp(1.35rem,2.3vw,1.7rem);margin-bottom:.75rem} .blx-consult--compact .blx-consult__close{font-size:1rem;color:var(--blx-chrome-200);margin-bottom:1.15rem} .blx-consult--compact .blx-consult__actions a.blx-btn{flex:1 1 100%} @media (max-width:980px){.blx-gaphead{grid-template-columns:minmax(0,1fr)}} .blx-consult-band .blx-consult{margin:0} /* ------------------------------------------------------------------------ * 2.6.37 — The field notes list: the /join page, the box under every note, * and the thank-you card. The form reuses .blx-form / .blx-field; these rules * only place it. The join card is white inside a deep section, so it resets * the ink tokens the section redefined for a dark ground. * --------------------------------------------------------------------- */ .blx-join{padding-block:clamp(2.5rem,6vw,5rem)} .blx-join__grid{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:start} .blx-join__grid{grid-template-areas:"head" "card" "more"} .blx-join__head{grid-area:head}.blx-join__card{grid-area:card}.blx-join__more{grid-area:more} @media (min-width:960px){.blx-join__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head card" "more card";grid-template-rows:auto 1fr;row-gap:0}} /* The site assistant's button floats over the form on a phone; on the sign-up page it is not shown. */ .blx-join-page .blx-assist__launch{display:none!important} .blx-join__preview{margin:0 0 1rem;padding:.55rem .8rem;border-radius:8px;border:1px dashed rgba(110,221,243,.5);font-family:var(--blx-font-data);font-size:.75rem;color:var(--blx-cyan-300)} .blx-join__title{margin:0 0 1rem;font-family:var(--blx-font-display);font-weight:800;font-size:clamp(2.25rem,6vw,3.75rem);line-height:1.02;letter-spacing:-.01em;color:#fff} .blx-join__title span{display:block;color:var(--blx-cyan-300)} .blx-join__lede{margin:0 0 .5rem;font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.6;color:var(--blx-ink-2);max-width:38rem} .blx-join__gets{list-style:none;margin:1.25rem 0 1.5rem;padding:0;display:grid;gap:.8rem;max-width:38rem} .blx-join__gets li{position:relative;padding-left:2rem;line-height:1.55;color:var(--blx-ink-2)} .blx-join__gets strong{color:#fff;font-weight:600} .blx-join__tick{position:absolute;left:0;top:.18rem;width:1.2rem;height:1.2rem;border-radius:50%;display:grid;place-items:center;background:var(--blx-current)} .blx-join__by{margin:0;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.02em;color:var(--blx-ink-3)} .blx-join__card{background:#fff;border-radius:16px;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 24px 60px -28px rgba(0,0,0,.65);color:#0B1526;scroll-margin-top:calc(var(--blx-header-h) + 1rem); --blx-ink:#0B1526;--blx-ink-2:#3C5170;--blx-ink-3:#566B89;--blx-rule:rgba(11,21,38,.10);--blx-rule-strong:rgba(11,21,38,.17)} .blx-join__card a{color:var(--blx-blue-600)} .blx-join__card a.blx-btn--current{color:#fff} .blx-join__card a.blx-btn--ghost{color:var(--blx-navy-800)} .blx-join__card h3{color:var(--blx-navy-900)} .blx-sub{max-width:none;gap:1rem} .blx-sub__consent{margin:0;font-size:.75rem;line-height:1.55;color:var(--blx-ink-3)} .blx-sub__consent a{white-space:nowrap} .blx-sub__done .blx-btnrow{margin-top:.25rem} .blx-sub__follow{font-size:.875rem!important} .blx-sub__next{font-family:var(--blx-font-data);font-size:.8125rem!important;color:var(--blx-ink-3)!important} .blx-sub__closed{margin:2rem auto;max-width:40rem;padding:1rem 1.25rem;border-radius:10px;background:var(--blx-paper);border:1px solid var(--blx-rule);color:var(--blx-ink-2)} .blx-subbox{margin:3rem 0 0;padding:clamp(1.25rem,3.5vw,2rem);border-radius:14px;background:var(--blx-paper);border:1px solid var(--blx-rule);display:grid;gap:1.25rem;scroll-margin-top:calc(var(--blx-header-h) + 1rem)} @media (min-width:900px){.blx-subbox{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:2rem}} .blx-subbox__eyebrow{margin:0 0 .5rem;font-family:var(--blx-font-data);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blx-blue-600)} .blx-subbox__title{margin:0 0 .5rem;font-family:var(--blx-font-display);font-size:clamp(1.25rem,2.4vw,1.5rem);line-height:1.2;color:var(--blx-navy-900)} .blx-subbox__lede{margin:0;font-size:.9375rem;line-height:1.6;color:var(--blx-ink-2)} .blx-subbox .blx-form__done{background:#fff;border:1px solid var(--blx-rule);border-radius:12px;padding:1.25rem} @media print{.blx-subbox{display:none}} .blx-sub__consent a{text-decoration:underline;text-underline-offset:2px} .blx-sub .blx-form__row--2{align-items:start}