/* ========================================================================== myk-btn — the Mykrobial button primitive ========================================================================== WHAT THIS IS ------------ A COPY of Salient's CTA button, relabelled into the Mykrobial namespace and retuned to the Figma comps. Not a wrapper around Salient's classes and not a from-scratch button: a copy we own, where every difference from the donor is a CSS custom property rather than a fork. This is the founder's stated method for any component with no one-for-one match: "start with the closest Salient button, then alter it just with CSS variables to get to the shape we want, so the functionality is still all there." Anything you need to change about a Mykrobial button should be reachable by setting a token on a scope. If it is not, add a token here — do not copy this block into a section sheet. That is how we ended up with three separate implementations of the same 1px stroke (see §4). THE DONOR --------- Salient's "Call To Action" element in its `basic` style, as served by the live mirror at http://127.0.0.1:5010 and vendored into this build. markup .nectar-cta > .nectar-button-type > .link_wrap > .link_text > .text primary [data-style="basic"][data-using-bg="true"] outline [data-style="basic"][data-using-bg="false"] .border_thickness_1px.border_color_ffffff.hover_border_color_ffffff Vendored donor rules, verbatim, with the file each came from: css/build/style.q-98889c766d.css .nectar-cta[class*=border_thickness] .link_wrap, .nectar-cta[data-using-bg=true] .link_wrap {display:inline-flex;align-items:center; cursor:pointer} .nectar-cta .link_wrap {position:relative;text-decoration:inherit; speak:none} .nectar-cta .link_wrap .link_text {padding-right:36px;position:relative; display:inline-block} <-- §3 .nectar-cta[data-using-bg=true] .text {margin-right:10px} <-- §3 .nectar-cta[data-style=basic] .link_wrap .link_text {padding-right:0} .nectar-cta[data-style=basic][data-using-bg=true] .text {margin-right:0} body[data-button-style^=rounded] .nectar-cta .link_wrap:before {border-radius:200px} uploads/sites/37/salient/salient-dynamic-styles-multi-id-37.q-6d7044fbbd.css body[data-button-style^="rounded"] .nectar-cta:not([data-style="material"]) .link_wrap {border-radius:200px!important; box-shadow:none; transition: … .45s cubic-bezier(0.25,1,0.33,1)} .nectar-cta .nectar-button-type {font-family:Inter; text-transform:uppercase!important; letter-spacing:.1em;font-size:14px; font-weight:600} <-- §3 WHY THE DONOR'S NESTING IS NOT REPRODUCED ----------------------------------------- Salient's five-level chain exists so its shortcode has hooks for the icon, arrow, underline and text-reveal styles. In the `basic` style — the one we are copying — every one of those hooks is switched OFF by Salient's own rules (`padding-right:0`, `margin-right:0`, no arrow, no underline). What is left is a single inline-flex box with a stadium radius and a label. So `.myk-btn` is that one box. The chain is still supported (§6) for markup that already carries it — `sections/18-cta-expand.html` uses the raw Salient chain and is correct — so a section can adopt this component without a markup rewrite. PROVENANCE NOTE, recorded because it is load-bearing --------------------------------------------------- The `.mk-pill` this component replaces was authored without a Salient ancestor (`sections/00-hero.html` line 281 says so). Transcribing the donor independently lands on the same declarations `.mk-pill` already had. That is evidence the pill was a correct reproduction of the donor all along, and it is why this migration is expected to be pixel-neutral at rest rather than an improvement. The value delivered here is ownership, one source of truth, and a token surface — not a fidelity gain. A NAIVE SWAP TO THE DONOR'S CLASSES HAS ALREADY BEEN TRIED AND FAILED -------------------------------------------------------------------- Provenance lane P1 replaced the hero CTA with the raw `.nectar-cta` chain and 00-hero REGRESSED +0.27 pp (4.352 -> 4.622); the patch was reverted. Root cause as filed: Salient's 36px `.link_text` padding — an icon gap for an icon our button does not have — pushed the label advance 173 -> 197.11. §3 neutralises that through a token. Note the donor's OWN `basic` style already zeroes it, so the regression means P1 landed on a non-`basic` style; either way the token makes the outcome independent of that guess. ========================================================================== */ /* ========================================================================== §1. TOKENS — the entire retune surface -------------------------------------------------------------------------- Set these on a scope (`:root`, a section, an element) to restyle a button. Every value below is the MYKROBIAL default; the donor's value is named in the comment wherever the two differ, so the delta is always visible. ========================================================================== */ .myk-btn { /* --- box ------------------------------------------------------------- */ --myk-btn-pad-y: var(--mk-pill-pad-y, 8px); --myk-btn-pad-x: var(--mk-pill-pad-x, 18px); /* Per-side x padding. Board `3269:5586` draws every CTA family symmetric (8/18), so both default to `--myk-btn-pad-x` and nothing changes for the seven CTAs. They exist because the board's GROUP family is NOT symmetric — `3269:5640`/`3269:5650` pad 18 left / 24 right to balance their icon (§3.5 BUILD RULE G2) — and the footer newsletter pair is a GROUP instance (24/26 and 26/24, `figma-truth/21-logos-footer.spec.md` §1.2.3). Added as TOKENS rather than a section override, per the component's own contract. */ --myk-btn-pad-l: var(--myk-btn-pad-x); --myk-btn-pad-r: var(--myk-btn-pad-x); --myk-btn-height: 40px; --myk-btn-radius: var(--mk-radius-pill, 54px); /* donor 200px — both clamp to a stadium on a 40px box, so this is a notation difference, not a paint one */ --myk-btn-gap: var(--mk-space-10, 10px); /* Figma itemSpacing 10 */ --myk-btn-justify: normal; /* MIN/flex-start: the label's LEFT edge is the one Figma places */ /* --- paint ----------------------------------------------------------- */ --myk-btn-bg: transparent; /* R19-06: `--myk-header-btn-fg` is declared ONLY inside `#header-outer .light-text`/`.dark-text` (site.css §1B.2) — everywhere else on the page it is unset, so this falls straight through to the historical literal. This is the whole mechanism: the header's two tone states retarget this ONE token, at the ONE place every `.myk-btn` already reads it from (§2.1b below), instead of a per-element `color … !important` restated at hand-computed specificity in three different files. See site.css §1B.2 for the full citation of the founding doc's DRY rule this answers. */ --myk-btn-fg: var(--myk-header-btn-fg, var(--mk-ink-inverse, #ffffff)); --myk-btn-border: transparent; --myk-btn-border-width: 0px; --myk-btn-blur: var(--mk-pill-blur, blur(4px)); /* Figma BACKGROUND_BLUR 4 */ /* --- type ------------------------------------------------------------ */ --myk-btn-font: var(--mk-font-sans, "Poppins", sans-serif); /* donor: Inter */ --myk-btn-size: var(--mk-size-base, 16px);/* donor: 14px */ --myk-btn-weight: var(--mk-w-regular, 400); /* donor: 600 */ --myk-btn-track: var(--mk-track-nav, 1px); /* donor: .1em — PIXELS here, do not convert */ --myk-btn-leading: var(--mk-lh-node, 24px); --myk-btn-case: none; /* donor: uppercase!important */ /* --- the donor's icon geometry, kept reachable ------------------------ */ /* Salient reserves room for the icon it ships in the label's right inset. Figma's button has no icon, so both are 0 — but they are TOKENS, not a blanket override, so an icon variant can restore the donor's exact geometry by setting them back to 36px / 10px. This is the P1 regression, parameterised. */ --myk-btn-icon-gap: 0px; /* donor: 36px */ --myk-btn-icon-advance: 0px; /* donor: 10px */ /* CSS hangs `letter-spacing` off the LAST character; Figma's hug does not carry it. Sections that measured the phantom pixel set this to the track. */ --myk-btn-track-trim: 0px; /* --- motion ---------------------------------------------------------- */ /* ONE HOVER CLOCK. Everything a hover changes — fill, ring, label colour, the growth and the shadow — runs on `--myk-btn-hover-dur` / `--myk-btn-hover-ease` so the whole state lands together. THIS IS THE FOUNDERS' "ROLLOVER STATES ARE NOT CONSISTENT" FIX, and the mechanism is exactly what `review/branding/buttons.md` §8.2 diagnosed: before this pass the ring, the fill and the label each ran on a different clock AND each ring RENDERER ran on its own, so the same button class behaved three ways — default renderer box-shadow ring, NO transition declared -> ring SNAPS --ring-outline outline ring, NO transition declared -> ring SNAPS --ring-layer ::after border, 450ms -> ring GLIDES against a 300ms fill and a 450ms label. Ecology carries `--ring-layer`, which is precisely the button the founders singled out. The value is the donor's own hover-layer clock, measured in §4.2 from portfolio-layered: `opacity .3s ease, transform .3s ease` on the layer that APPEARS on hover. Every property below is that layer, so it is that clock. Recorded as a deliberate reconciliation: the 450ms `cubic-bezier(.15,.75,.5,1)` that `color` and `--ring-layer` used before is `--mk-motion-dur-hover`, a build token with no donor or board behind it, and the alternative reading (unify UP to 450ms) is equally consistent but slower than anything measured. See SHARED-REQUESTS.md REQ-BTN-1. `--myk-btn-fill-dur` / `--myk-btn-fill-ease` are RETAINED as the source these default from, so a section that already overrides them keeps working and keeps its whole button on one clock rather than half of it. Reduced motion still resolves through `--mk-motion-dur-fill`, which tokens.css collapses to 1ms (§7). */ --myk-btn-fill-dur: var(--mk-motion-dur-fill, 300ms); --myk-btn-fill-ease: var(--mk-ease-fill, ease); --myk-btn-hover-dur: var(--myk-btn-fill-dur); --myk-btn-hover-ease: var(--myk-btn-fill-ease); /* `box-shadow` is the DEFAULT ring renderer and `outline-color` is `--ring-outline`'s; both were absent from this list, which is why both snapped. `--ring-layer`'s ::after is transitioned at §4 on the same two tokens. All three renderers now behave identically. */ --myk-btn-transition: color var(--myk-btn-hover-dur) var(--myk-btn-hover-ease), box-shadow var(--myk-btn-hover-dur) var(--myk-btn-hover-ease), outline-color var(--myk-btn-hover-dur) var(--myk-btn-hover-ease); /* --- hover ----------------------------------------------------------- */ /* THE BOARD'S HOVER, and there are only TWO of them in the whole system. `review/branding/buttons.md` §3.1–§3.5, read as a set: PRIMARY -> linear-gradient(90deg,#2BD8D8,#137983) + label #FFFFFF EVERYTHING ELSE (secondary §3.2, tertiary §3.3, group §3.5) -> fill #F4F9FB + label #1EB2BC Both add `0 4px 4px rgba(0,0,0,.15)` (`#00000026`) and both GROW by 2px per side (padding 8/18 -> 10/20). NAV ITEM (§3.4) is the one family that does neither: BUILD RULE N1 is "a white text-opacity change and nothing else", so `--ghost` / `--active` / `--icon` neutralise all five values below rather than opting out of the mechanism. So the default here is the NON-PRIMARY hover, and `--primary` overrides two values. Before this pass the default was `--mk-teal`, which appears nowhere on the board as a hover and produced the inversion the founders saw: our secondary hovered TO turquoise, the board hovers FROM white outline TO near-white fill WITH a turquoise label. `--myk-btn-hover-border: transparent` because the hover nodes' `#FFFFFF` strokes are phantoms — §2's bounds-bleed test, `3269:5600` and `3269:5632`, zero inflation. On a `#F4F9FB` fill a white ring is invisible either way; transparent is what the board actually says. */ --myk-btn-hover-bg: var(--mk-pill-hover-fill, #f4f9fb); /* 3269:5607 */ --myk-btn-hover-fg: var(--mk-pill-hover-label, #1eb2bc); /* 3269:5608 */ --myk-btn-hover-border: transparent; /* §2 phantom */ --myk-btn-hover-shadow: 0 4px 4px rgba(0, 0, 0, .149); /* #00000026 */ /* Per-SIDE growth. The board grows by +4px on BOTH axes at every width (padding 8/18 -> 10/20, h40 -> h44). BUILD RULE M1 reconciled this to the donor's `scale(1.07)`, and that reconciliation is REJECTED here with a measurement: a uniform scale is proportional and the board's growth is absolute, so 1.07 gives +14.7px on the 210px hero CTA, +6.9px on the 99px nav CTA and +22.5px on the 322px ecology CTA. Three different growths on one page is the defect this pass exists to remove. §3.1's own B3 note says it: "a single uniform `scale` is only exact for a 40px-wide button." +2px per side is exact at every width, and §4.2's real lesson — "nothing about the text box changes" — is honoured by growing the LAYER, not the button (§2.4). */ --myk-btn-hover-grow: 2px; --myk-btn-hover-opacity: 1; } /* ========================================================================== §2. THE COMPONENT ========================================================================== */ /* --- 2.1 base — the donor's `.link_wrap`, collapsed --------------------- */ .myk-btn { display: inline-flex; /* donor: [data-using-bg=true] .link_wrap */ align-items: center; /* donor: same rule */ justify-content: var(--myk-btn-justify); gap: var(--myk-btn-gap); padding: var(--myk-btn-pad-y) var(--myk-btn-pad-r) var(--myk-btn-pad-y) var(--myk-btn-pad-l); height: var(--myk-btn-height); border: 0; border-radius: var(--myk-btn-radius); background: var(--myk-btn-bg); -webkit-backdrop-filter: var(--myk-btn-blur); backdrop-filter: var(--myk-btn-blur); font-family: var(--myk-btn-font); font-weight: var(--myk-btn-weight); font-size: var(--myk-btn-size); line-height: var(--myk-btn-leading); letter-spacing: var(--myk-btn-track); text-transform: var(--myk-btn-case); color: var(--myk-btn-fg); text-align: center; text-decoration: none; /* donor: `text-decoration:inherit`, which inherits the demo's underline; Figma has none */ white-space: nowrap; position: relative; /* donor: `.link_wrap{position:relative}` */ isolation: isolate; /* confines the fill layer's stacking */ cursor: pointer; /* donor: same rule as the inline-flex */ transition: var(--myk-btn-transition); } /* --- 2.1b THE LABEL COLOUR NEEDS TWO CLASSES, AND FINDING OUT WHY WAS THE SINGLE BIGGEST DISCOVERY OF THE BUTTON SWEEP ------------------------- */ /* `.myk-btn { color: var(--myk-btn-fg) }` above is (0,1,0) and it LOSES, in both states, to two rules Salient ships globally: body a { color: #ffac66 } (0,1,1) <- the demo's accent orange a:hover { color: inherit } (0,1,1) Read `CSS.getMatchedStylesForNode` under a forced `:hover` on three separate buttons to confirm it; all three return the same ladder, with the component's declaration below both. THE CONSEQUENCE IS EXACTLY THE FOUNDERS' COMPLAINT, and it is a deeper cause than the one `buttons.md` §8.2 found. `a:hover{color:inherit}` means every anchor-based button's HOVER LABEL is whatever its SECTION happens to inherit — not what the button system says. Measured across the page before this rule existed, with `--myk-btn-hover-fg` correctly computing to `#1eb2bc` on all of them: ecology CTA x3, "Resources in your area" hover label -> #FFFFFF nav CTA, both who-and-why pills, amenities hover label -> #1A2328 footer "Join" hover label -> #1EB2BC Three different hover labels from ONE token, decided by which section the button was standing in. The footer Join is the tell: it is the only one of the eleven that is a `