/* BP & Sugar Tracker — the thin layer on top of ab-design-system.css. * * Nothing may be added inside ab-design-system.css (its closing brace is a hard * boundary — an unlayered rule after it outranks the whole system), so anything * this product needs beyond the shared vocabulary lives here. * * Every value is an AB token. Fallbacks are the AB values, not the old product * palette that died with base.css — a stale fallback is a colour that only * appears when something else has already gone wrong, which is the worst time * to be showing the wrong one. * * ONE coherent section per concern. Do not append a second block for the same * component; consolidate into the existing one (rulebook §10). */ /* ========================================================================== RULE 8, second half — the visitor badge is hidden site-wide. The numbers still collect server-side; only the badge goes. ========================================================================== */ #ab-visitor-counter { display: none !important; } /* ========================================================================== The keep-this-site prompt (install on desktop, bookmark on a phone). It is injected INSIDE .ab-page by install-prompt.js so the AB tokens resolve — appended to it would sit outside the token scope. ========================================================================== */ .keep-prompt { position: fixed; left: 50%; bottom: 18px; z-index: 90; width: min(560px, calc(100vw - 28px)); transform: translate(-50%, 140%); transition: transform .38s cubic-bezier(.2, .8, .25, 1), opacity .38s; opacity: 0; } .keep-prompt[data-open="1"] { transform: translate(-50%, 0); opacity: 1; } .keep-prompt__in { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card-surface, #FFFFFF); border: 1px solid var(--line, #E7E2D6); border-radius: var(--r-md, 18px); box-shadow: var(--shadow-lift, 0 18px 45px rgba(27, 42, 94, .16)); } .keep-prompt__ico { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold-ink, #8A6D1F); filter: drop-shadow(0 0 12px rgba(201, 168, 76, .45)); } .keep-prompt__ico svg { width: 22px; height: 22px; } .keep-prompt__txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .keep-prompt__txt b { font-family: var(--font-nav, sans-serif); font-size: 14.5px; color: var(--ink, #1C2130); } .keep-prompt__txt span { font-size: 13px; color: var(--muted, #6B7280); } .keep-prompt__act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .keep-prompt__no { font: 500 13px/1 var(--font-nav, sans-serif); cursor: pointer; padding: 9px 10px; border: 0; background: none; color: var(--muted, #6B7280); text-decoration: underline; } @media (max-width: 560px) { .keep-prompt__in { flex-wrap: wrap; } .keep-prompt__act { width: 100%; justify-content: flex-end; } } /* ========================================================================== The medical notice. Kept as its own component rather than .ab-callout because it must read as a standing safety statement, not an aside. ========================================================================== */ .bps-med { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 22px; border: 1px solid var(--line, #E7E2D6); border-left: 4px solid var(--gold, #C9A84C); border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0; background: var(--paper, #FAF9F6); font-size: 14px; color: var(--body-c, #3A4152); } .bps-med > span:first-child { color: var(--gold-ink, #8A6D1F); font-size: 17px; line-height: 1.2; } /* ========================================================================== Forms — the auth pages and the contact page share one set of controls. Scoped to .ab-page so a form dropped into any section is styled, and to AB tokens so it matches the panel it sits in. ========================================================================== */ .bps-auth { max-width: 460px; margin: 0 auto; } .bps-auth .ab-panel { padding: clamp(24px, 4vw, 34px); } .bps-auth__foot, .auth__foot { margin: 16px 0 0; text-align: center; font-size: 14px; } /* No ab-btn--wide exists in the system; full width is this product's need. */ .bps-auth .ab-btn { width: 100%; justify-content: center; } .auth__alt { display: grid; gap: 10px; margin-top: 4px; } .auth__sep { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; font: 500 12px/1 var(--font-nav, sans-serif); letter-spacing: var(--track-label, .14em); text-transform: uppercase; color: var(--muted, #6B7280); } .auth__sep::before, .auth__sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line, #E7E2D6); } .ab-page .input { width: 100%; font: 400 15px/1.5 var(--font-body, system-ui, sans-serif); padding: 11px 13px; color: var(--ink, #1C2130); border: 1px solid var(--line, #E7E2D6); border-radius: var(--r-sm, 10px); background: var(--card, #FFFFFF); } .ab-page .field + .field { margin-top: 14px; } .ab-page .field label, .ab-page label { display: block; font: 600 13.5px/1.4 var(--font-nav, sans-serif); margin-bottom: 5px; color: var(--ink, #1C2130); } .ab-page .hint, .ab-page .formnote { font-size: 12.5px; color: var(--muted, #6B7280); margin-top: 5px; } .ab-page .field-error { display: none; font-size: 12.5px; color: #B42318; margin-top: 5px; } .ab-page .field-error[data-show="1"] { display: block; } .ab-page .alert { display: none; padding: 11px 13px; border-radius: var(--r-sm, 10px); font-size: 13.5px; margin-bottom: 14px; } .ab-page .alert[data-show="1"] { display: block; } .ab-page .alert--error { background: #FDECEA; color: #8E241C; } .ab-page .alert--ok { background: #E8F5EE; color: #14603E; } .ab-page .row-2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .ab-page .auth__card, .ab-page .prose { max-width: 100%; } @media (max-width: 560px) { .ab-page .row-2 { grid-template-columns: 1fr; } } /* ========================================================================== Prose inside an AB panel. The system justifies panel prose (owner's call); these only set the rhythm the legal pages need. ========================================================================== */ .bps-prose > h2:first-child, .bps-prose > h3:first-child { margin-top: 0; } .bps-prose h2 { font-size: var(--fs-3, clamp(22px, 2.3vw, 28px)); margin: 26px 0 8px; } .bps-prose p { margin: 0 0 14px; } .bps-prose ul { margin: 0 0 14px; padding-left: 20px; } .bps-prose li { margin-bottom: 7px; } .bps-prose__updated { font-size: 13px; } /* ========================================================================== The day tape — the product's signature readout, kept from the original design because it is the one visual that says what this product is. Re-pointed at AB tokens so it belongs on an AB page. ========================================================================== */ .hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .panel { background: var(--card-surface, #FFFFFF); border: 1px solid var(--line, #E7E2D6); border-radius: var(--r-md, 18px); padding: 22px 20px; box-shadow: var(--shadow-soft, 0 10px 30px rgba(27, 42, 94, .10)); } .panel__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .panel__label { font: 600 11.5px/1 var(--font-nav, sans-serif); text-transform: uppercase; letter-spacing: var(--track-label, .14em); color: var(--muted, #6B7280); } .panel__time { font-size: 12.5px; color: var(--muted, #6B7280); } .panel__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--muted, #6B7280); align-items: center; } .panel__legend b { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--gold, #C9A84C); } .readout { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .readout__value { font-family: var(--font-display, Georgia, serif); font-size: clamp(32px, 5vw, 46px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink, #1C2130); } .readout__unit, .readout__delta { font-size: 13px; color: var(--muted, #6B7280); } .tape { position: relative; overflow-x: auto; padding-bottom: 4px; margin-top: 16px; } .tape__h { font: 600 11.5px/1 var(--font-nav, sans-serif); text-transform: uppercase; letter-spacing: var(--track-label, .14em); color: var(--muted, #6B7280); margin: 0 0 8px; } .spark, .scatter { display: block; width: 100%; height: auto; max-width: 100%; } .spark path, .scatter path { fill: none; stroke-width: 2; } .band { fill: currentColor; opacity: .07; } /* ========================================================================== R1 — REPAIR FOR A BUG IN THE MASTER PACKAGE ITSELF. ========================================================================== ab-design-system.css line 378 declares .ab-base a, .ab-page a { color: var(--navy); } (0,1,1) while every button variant and every dark-panel link declares its colour at (0,1,0): .ab-btn--gold/--navy/--ghost {color:#fff}, .ab-credit__site {color:#E9C25F}, .ab-stage__link. The link reset therefore WINS on every , so gold/navy/ghost buttons render navy — invisible on the navy hero and CTA panels — and the credit bar's site link disappears into its own bar. (.ab-btn--line was unaffected only because its intended colour IS --navy.) This file is unlayered, so it outranks the layered package without !important. The values below are the package's own intended ones, restored verbatim — nothing new is invented here. THIS BUG IS IN THE MASTER PACKAGE AND WILL REACH EVERY FUTURE ADOPTION. Fix it at source in ab-design-system.css (raise the variants to `a.ab-btn--x` or lower the reset to `:where(a)`), then this block can be deleted. ========================================================================== */ .ab-base a.ab-btn--gold, .ab-page a.ab-btn--gold, .ab-base a.ab-btn--navy, .ab-page a.ab-btn--navy, .ab-base a.ab-btn--ghost, .ab-page a.ab-btn--ghost { color: #fff; } .ab-base a.ab-btn--ghost:hover, .ab-page a.ab-btn--ghost:hover { color: var(--gold-soft); } .ab-base a.ab-btn--line, .ab-page a.ab-btn--line, .ab-base a.ab-btn--line:hover, .ab-page a.ab-btn--line:hover { color: var(--navy); } .ab-base a.ab-credit__site { color: #E9C25F; } .ab-base a.ab-credit__site:hover, .ab-base a.ab-credit__site:focus-visible { color: #F7E7B2; } /* ========================================================================== R3 — an interactive card must actually go somewhere. The card lifts and glows, which promises a destination; the stretched link is what makes the whole card clickable rather than just its text. ========================================================================== */ .ab-page .ab-card__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; text-indent: -9999px; overflow: hidden; } .ab-page .ab-card__link:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; } /* ========================================================================== R4 — the five-step rail reads 3 + 2, not 2 + 2 + 1. The package's auto-fit minmax wraps by available width; the owner asked for three on the first row. Only the desktop tier is pinned; the package's tablet and phone tiers are left alone. ========================================================================== */ @media (min-width: 1100px) { .ab-page .ab-timeline--steps { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== R5 — every drawer tile is the same size, at BOTH levels. Columns were already right (3 per row, 110px wide); the heights were not — top-level tiles measured 112px and submenu tiles 120px, which is the size change the owner saw when opening a parent. ========================================================================== */ @media (max-width: 1239.98px) { .nav__list > .nav__item > .nav__link, .nav__mega .nav__sublink { min-height: 116px; padding: 12px 8px; box-sizing: border-box; justify-content: flex-start; align-content: start; } } /* ========================================================================== R6 — the site must not open looking dark on a phone. The default theme IS light; what fills the first screen is index's full navy hero. Only its padding is cut, so light content is visible without scrolling. The theme default is untouched. ========================================================================== */ @media (max-width: 760px) { .ab-hero:not(.ab-hero--compact) .ab-hero__panel { padding-top: clamp(24px, 6vw, 34px); padding-bottom: clamp(24px, 6vw, 34px); } } /* ========================================================================== R7 — a card that is the target of a jump link should not sit welded to the very top edge of the viewport. Found live: features.html's twelve measurement cards sit in a section with NO heading of its own (the page's original design — index.html's matching grid has "02 · What you can record" above it, features.html's never did). Landing flush at pixel 0 with the site header scrolled fully out of view above it (measured: header at top:-466px) reads as a rendering glitch — nothing above the card to say what page or section it belongs to. This does not try to keep the header visible (it is not sticky, and pinning it would be a separate, larger change) — it just gives the target a small breathing gap so the scroll clearly settles rather than looking cut off. `scroll-margin-top` is honoured by BOTH the JS `scrollIntoView()` fix in ab-site.js and any native browser fragment scroll, so one rule covers both. ========================================================================== */ .ab-page .ab-card[id] { scroll-margin-top: 32px; }