, which resets to Dawn's 1.5rem inside our own sized element. The PDP's reassurance line was the one place that showed. */ .km-pdp__micro p, .km-hero__micro p, .km-hero__sub p { font-size: inherit; margin: 0; } /* The keyboard-only "Skip to content" link was clipping its own text. */ .skip-to-content-link { width: auto; white-space: nowrap; } /* Popup image panel on cream, not white (Shane, 2026-09-19). The pack shot's own white ground multiplies away against it, same as the PDP gallery. */ .km-popup__media { background: var(--km-cream); } .km-popup__media img { mix-blend-mode: multiply; } /* ========================================================================== PHONE: PRODUCT PAGE ========================================================================== */ @media screen and (max-width: 749px) { /* Thumbnails: one row that scrolls, instead of wrapping onto a second. */ .km-pdp__thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 0.8rem; padding-bottom: 0.4rem; scrollbar-width: none; } .km-pdp__thumbs::-webkit-scrollbar { display: none; } .km-pdp__thumb { flex: 0 0 8.4rem; scroll-snap-align: start; } /* The six specs were two columns of tall rows eating a third of the screen. Same six facts, micro type, tight leading. */ .km-pdp__specs { gap: 0.6rem 1.6rem; margin-top: 2rem; } .km-pdp__spec { font-size: var(--km-fs-micro); line-height: 1.35; padding-left: 1.6rem; } /* Pack size: three across in one row, not three stacked rows. */ .km-pdp__packs { display: block; } .km-pdp__packs .km-pdp__pack { width: auto; } .km-pdp__packlist, fieldset.km-pdp__packs > label { min-width: 0; } .km-pdp__packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } .km-pdp__legend { grid-column: 1 / -1; margin-bottom: 0.4rem; } .km-pdp__pack { padding: 1.2rem 0.8rem; text-align: center; min-width: 0; } .km-pdp__packname { font-size: var(--km-fs-micro); letter-spacing: 0.02em; } .km-pdp__packmeta { font-size: var(--km-fs-micro); } /* The corner badge does not fit a third-width card; it sits in the card. */ .km-pdp__packsave { position: static; transform: none; display: block; margin-top: 0.6rem; padding: 0.2rem 0.4rem; } /* Price was a full-width line floating between the selector and the button. */ .km-pdp__price { display: flex; align-items: baseline; gap: 0.8rem; margin: 1.6rem 0 1.2rem; } } /* ========================================================================== PHONE AND TABLET: COMPARISON The wrap's single grid track was sized by its widest child rather than the screen — `1fr` with default `min-width: auto` lets the 520px table push the track to 434px in a 390px viewport. `.km-section { overflow: hidden }` then clipped the result, which is why "We take the starch out.", the stats and the footnote were cut off mid-word. The track is capped and the table scrolls inside its own container instead. ========================================================================== */ @media screen and (max-width: 989px) { .km-comparison--split .km-wrap { grid-template-columns: minmax(0, 1fr); } .km-comparison--split .km-wrap > * { min-width: 0; max-width: 100%; } .km-comparison--split .km-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* A pinned first column on a 390px screen leaves almost nothing to read; Shane asked for a plain scrollable table. */ .km-comparison--split .km-table tbody th, .km-table tbody th { position: static; left: auto; } } /* The price is part of the button on the phone. On a 390px screen it was a lone 24px number floating in a full-width line between the pack grid and the CTA; in the button it reads as the thing being bought. Desktop keeps the price line and hides the button copy. */ .km-pdp__btnprice { display: none; } @media screen and (max-width: 749px) { .km-pdp__price { display: none; } .km-pdp__btnprice { display: inline; margin-left: 0.8rem; padding-left: 0.8rem; border-left: 1px solid rgba(246, 242, 233, 0.4); } } /* That nowrap keeps "We take the starch out." on one line where the column is wide enough for it. Below 990px it is wider than the screen, and because `.km-section` clips, the sentence was cut off mid-word rather than wrapping. */ @media screen and (max-width: 989px) { /* Both halves of the heading were nowrap, `.km-h2` at line 3698 and the accent at 1734, which is what held the copy column at a 744px floor and clipped the text once the table took a fair share. A heading wraps. */ .km-comparison--split .km-comparison__head .km-h2, .km-comparison--split .km-comparison__head .km-accent { white-space: normal; } } /* ========================================================================== ROUND 1, EASY PASS (Jesse, September 20, 2026) ========================================================================== */ :root { /* 1.7: the light accent is the K in his logo. Measured #fbf7ef in `ketomarin logo1.psd`. Both hero photos were retinted to the same ground. */ --km-cream: #fbf7ef; /* 1.8: lime is Pantone 375 C, from the new pasta box. */ --km-lime: #97D700; /* 1.2 and 1.3: body text at full strength. The faded green read as a light weight to him and counted as a fourth text color. */ --km-muted: var(--km-ink); /* 2.5.4: the red crosses were off-palette. */ --km-strike: var(--km-ink); } /* 1.4: no gray hero. The tint layer that produced #ECEDE8 is switched off; the hero is the same light accent as the rest of the page. */ .km-hero--bleed::before { content: none; } /* 1.3: inverse text on green is the light accent itself, not a faded version. */ .km-section--olive .km-body, .km-section--olive .km-eyebrow, .km-section--olive .km-footnote, .km-footer__contact { color: var(--km-cream); } /* 2.3.2: the line under the headline and the line under the button read as a narrower font: the micro line carried extra letter-spacing. Both are now plain body text. */ .km-hero__sub, .km-hero__micro { letter-spacing: normal; color: var(--km-ink); } /* 2.9.5: the per-serving line in one weight. */ .km-pack__unit, .km-pack__unit * { font-weight: var(--km-w-light); } /* 2.5.4: crosses smaller and quieter, drawn in the one green. */ .km-crossed__x { top: 16% !important; right: 16% !important; bottom: 16% !important; left: 16% !important; opacity: 0.9 !important; } /* 2.12.3: the footer in two sizes. The contact block was the only 12px text. */ .km-footer__contact { font-size: var(--km-fs-body); } /* The loop now carries more copies per half, so the same 38s would scroll about 50% faster. Slowed back to roughly the old reading speed. */ .km-announce__track { animation-duration: 58s; } /* ========================================================================== ROUND 1 TYPE SYSTEM (Jesse 1.1, 2.3.1): three sizes, two weights. - Headline: one size between the old heading (48) and display (72). The hero and every section heading now share it, desktop and phone. - Subhead 24 and body 16 stay. - The 12px micro size is retired; labels, footnotes, the announcement bar and the table's small text all set at body size. Weights are 400 and 700; the old 800 was folded into 700. ========================================================================== */ :root { --km-fs-h: clamp(3.2rem, 4.4vw, 5.6rem); --km-fs-display: var(--km-fs-h); --km-fs-micro: var(--km-fs-body); } /* ========================================================================== ROUND 1 BACKGROUNDS (Jesse 1.4, 1.5, 1.10, 2.9.2): three grounds only — the K cream, the dark green and the lime — in an order where no two neighboring sections share one. Homepage: hero cream, founder green, comparison cream, glucose green, reviews cream, media lime, packs green, FAQ cream, footer green PDP: product cream, glucose green, comparison cream, FAQ lime, reviews cream, footer green White is retired: every surface that was white (cards, table, FAQ rows, inputs) takes the cream, which on a green or lime section is the layer. ========================================================================== */ :root { --km-white: var(--km-cream); } /* Two-part headlines lean on color now that the periods are gone. On green the accent is the lime, which reads clearly against it. */ .km-section--olive .km-accent { color: var(--km-lime); } /* Lime ground: everything in the one green. The old near-black label color is off-palette. */ .km-section--lime, .km-section--lime .km-eyebrow, .km-section--lime .km-footnote, .km-section--lime .km-body, .km-section--lime .km-h2, .km-section--lime .km-logos__name { color: var(--km-ink); } /* Founder on green: bowl labels turn to the cream, the crosses to the lime. Lime on the dark green is the one place Pantone 375 C carries enough contrast, and it keeps the crosses off the same value as the labels. */ .km-section--olive .km-crossed__name, .km-section--olive .km-crossed__note { color: var(--km-cream); } .km-section--olive .km-crossed__x g { stroke: var(--km-lime); } /* Packs on green: cream cards are the second layer, the lime badge the third. */ .km-section--olive .km-pack { border-color: transparent; } /* Round 2 [2.3.1b, 2.5.2], Shane approved 2026-09-27: the accent phrase is lime type on cream, and the underline is gone. Jesse asked twice, and his reason is sound as design: the underline separates the two halves of a headline far more weakly than a colour change does. On the record, because it was the reason for the round 1 treatment this replaces: Pantone 375 C on the cream measures 1.63:1, where the floor for large text is 3:1. On the dark green it measures 4.82:1 and those accents are unchanged. Reverting is this one rule. */ .km-section:not(.km-section--olive):not(.km-section--lime) .km-accent, .km-hero .km-accent { color: var(--km-lime); text-decoration: none; } /* The founder lead paragraph kept its green when the section went green. */ .km-section--olive .km-statement__lead, .km-section--olive .km-statement__quote, .km-section--olive .km-statement__body { color: var(--km-cream); } /* Table text moved from 12px to 16px; the KetoMarin column's fixed width no longer held its own header. Columns size to their content and the table scrolls inside its container on the phone. */ .km-table th.km-col-us, .km-table td.km-col-us { width: auto; min-width: max-content; } /* ...and on phones and tablets the table itself stops dividing its width evenly (`table-layout: fixed` ignores what each header needs). It sizes to content and scrolls inside `.km-table-scroll`. */ @media screen and (max-width: 989px) { .km-comparison--split .km-table, .km-table { table-layout: auto; width: max-content; min-width: 100%; } } /* ========================================================================== ROUND 1 SECTION SIZES (Jesse 1.9): one vertical padding for every section, 64px on desktop and 48px on the phone. Sections had drifted to 88, 56/24 and 52 depending on which "tight" variant each carried. The variants now resolve to the same token, so the spec can state one number. The hero keeps its own full-bleed layout and is not a padded section. ========================================================================== */ :root { --km-pad: 6.4rem; } @media screen and (max-width: 749px) { :root { --km-pad: 4.8rem; } } .km-section.km-section--tight-y, .km-section.km-section--tight-top, .km-section.km-section--tight-bottom, .km-section { padding-top: var(--km-pad); padding-bottom: var(--km-pad); } .km-hero.km-section, .km-section.km-hero { padding-top: 0; padding-bottom: 0; } /* ...including the section straight after the hero, which an older rule gave its own 56px top. */ [id$="__hero"] + .shopify-section .km-section { padding-top: var(--km-pad); } /* ========================================================================== JUDGE.ME (Jesse 2.8, Shane 2026-09-22). The app renders its own markup with black text, gray metadata, teal stars and 12/14/20px type, which is four colors and three sizes the scheme does not have. Pulled onto the scheme. Scoped to the reviews section so nothing else is touched. ========================================================================== */ .km-rv-sec [class*="jm-"], .km-rv-sec [class*="jdgm-"] { font-family: var(--km-body) !important; font-size: var(--km-fs-body) !important; color: var(--km-ink) !important; } .km-rv-sec [class*="jm-"][class*="title"], .km-rv-sec [class*="jm-"][class*="heading"], .km-rv-sec [class*="jm-"][class*="rating-number"] { font-family: var(--km-display) !important; font-size: var(--km-fs-sub) !important; font-weight: 700 !important; } /* Stars keep their own icon font; only the color and size change. */ .km-rv-sec [class*="star"] { color: var(--km-ink) !important; font-size: var(--km-fs-sub) !important; } .km-rv-sec button.jm-button--primary { background: var(--km-ink) !important; color: var(--km-cream) !important; border-radius: 999px !important; border: 0 !important; font-family: var(--km-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; } /* Inputs follow the scheme. The sort dropdown is left to Judge.me: it styles the select itself, and overriding it collapsed the control to a square showing the first letter of "Most Recent". */ .km-rv-sec [class*="jm-"] input, .km-rv-sec [class*="jm-"] textarea { font-family: var(--km-body) !important; background: var(--km-cream) !important; color: var(--km-ink) !important; } /* The stars are glyphs in Judge.me's own icon font, so they keep it; only their color and size follow the scheme. */ .km-rv-sec [class*="star"], .km-rv-sec [class*="Star"] { font-family: 'JudgemeStar', sans-serif !important; } /* `[class*=button]` also matched the cluster that WRAPS the button (and the filter button beside it), which is what stretched the pill across the row. Only the real buttons are styled, and icon elements keep their own font, or their glyph renders as a stray letter. */ .km-rv-sec button.jm-button--primary { width: fit-content !important; max-width: 100%; padding: 1.2rem 2.4rem !important; } .km-rv-sec button.jm-button--secondary { background: transparent !important; color: var(--km-ink) !important; border: 1px solid var(--km-rule) !important; border-radius: 999px !important; } .km-rv-sec [class*="icon"], .km-rv-sec [class*="Icon"] { font-family: inherit; } .km-rv-sec .jm-with-icon svg, .km-rv-sec [class*="icon"] svg { fill: currentColor; } /* Judge.me's compact sort control renders as a 64px native select, so it showed only the "M" of "Most Recent". Sized to its text as a pill like the rest. */ .km-rv-sec select.jdgm-sort-dropdown, .km-rv-sec .jm-sort-filter__select { width: auto !important; min-width: 17rem !important; height: auto !important; font-family: var(--km-body) !important; font-size: var(--km-fs-body) !important; color: var(--km-ink) !important; background: var(--km-cream) !important; border: 1px solid var(--km-rule) !important; border-radius: 999px !important; padding: 0.7rem 1.6rem !important; text-indent: 0 !important; } /* Two real reviews, not three placeholders: the row fits what exists. */ .km-reviews { grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); } /* Jesse 2.2: with the nav gone, Account sits next to Cart on the phone as well. */ @media screen and (max-width: 989px) { .km-header__utils > a:not([data-km-cart-open]) { display: inline-flex; } } /* Jesse 2.11: the question and the answer are now the same face. The question was Archivo in capitals against an Inter answer, which is what looked like two different fonts. */ .km-faq__q { font-family: var(--km-body); text-transform: none; letter-spacing: 0; } /* The homepage review stars were lime-deep: a fourth color, and 2.2:1 on the cream. They take the one green, like the Judge.me stars on the product page. */ .km-review__stars { color: var(--km-ink); } /* ========================================================================== ROUND 2 — Jesse, September 27, 2026 ========================================================================== */ /* 2.7a: the homepage review quotes were italic. Dawn's base.css sets `blockquote { font-style: italic }` and ours never reset it, which is the whole difference he spotted between the two pages. */ .km-review__quote { font-style: normal; } /* 3.3: the six fact bullets above PACK SIZE were all bold, so nothing in that block stood out. Regular, and the headings above keep the emphasis. */ .km-pdp__spec { font-weight: var(--km-w-light); } /* 3.8b: Judge.me prints the reviewer name in sentence case; the homepage sets it uppercase. Same treatment on both. */ .km-rv-sec .jdgm-rev__author, .km-rv-sec .jdgm-rev__buyer-badge + .jdgm-rev__author { font-family: var(--km-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* 2.1a: the bar measures 4.82:1, which passes, but at the micro size with 0.14em tracking it reads thin, which is what he is seeing. Body size and less tracking, same colours. */ .km-announce__item { font-size: var(--km-fs-body); letter-spacing: 0.08em; } /* 2.10.1: "See all questions" sat below a grey rule with its own underline, which read as a separate block. It belongs to the questions above it. */ .km-faq__footer { margin-top: 2.4rem; padding-top: 0; border-top: 0; } .km-faq__footer a { text-decoration: none; background-image: none; border-bottom: 0; box-shadow: none; font-family: var(--km-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .km-faq__footer a:hover { text-decoration: underline; } /* 2.11.4: the contact email was the only footer link still underlined, because it sits outside .km-footer__list. */ .km-footer__contact a { text-decoration: none; } .km-footer__contact a:hover { text-decoration: underline; } /* 2.11.3: one inverse weight across all three columns. What read as different weights was five different opacities on the same cream. */ .km-footer__list a, .km-footer__tagline, .km-footer__note, .km-footer__contact, .km-footer__contact a, .km-footer__bottom, .km-footer__bottom span { opacity: 0.88; font-weight: var(--km-w-light); } .km-footer__list a:hover, .km-footer__contact a:hover { opacity: 1; } /* 2.11.1 + 2.11.2: the first column opened with the wordmark at the sub size in sentence case while columns two and three opened with an uppercase title at body size, so their first lines sat on different baselines. Measured at 5497px against 5793px. Give all three openers one treatment and they line up on their own, and the capture heading joins them rather than being a third thing. */ .km-footer__logo, .km-footer__capture .km-h3 { font-family: var(--km-display); font-size: var(--km-fs-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.3; margin: 0 0 1.92rem; opacity: 0.75; } .km-footer__title { line-height: 1.3; } .km-footer__grid > * { align-content: start; } /* 1.9 + 2.9.3: reviews, media, packs and FAQ ran cream, cream, cream, cream. The scope fixes the background order, and packs is the section that breaks the run. On the green the cards are the second layer and the lime badge the third, so the grey border has nothing left to do. The guarantee under it is already green, so the two now read as one dark block closing the page. */ .km-section--olive .km-pack { border-color: transparent; background: var(--km-white); } .km-section--olive .km-pack--featured { border-color: var(--km-lime); } .km-section--olive .km-packs__note, .km-section--olive .km-pack__unit { color: rgba(246, 242, 233, 0.82); } .km-section--olive .km-pack .km-pack__unit { color: var(--km-ink); } /* 1.2: one font family. Archivo takes the body too, so --km-body and --km-display are now the same stack and Inter is no longer requested. Archivo sets a little wider than Inter at the same size, so the body size is left where it is rather than chased; the measure is what changes, and the columns are max-width capped already. */ :root { --km-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif; } body, button, input, select, textarea { font-family: var(--km-body); } /* 2.6.1: the three lines under the two charts ran at two sizes, three weights and two cases, on top of whatever the charts themselves already carry. One size, two weights, one case, one opacity. */ .km-split--stacked .km-split__figcap, .km-split--stacked .km-split__zoom, .km-split--stacked .km-split__caption { font-size: var(--km-fs-body); letter-spacing: 0; text-transform: none; opacity: 0.85; } .km-split--stacked .km-split__figcap { font-weight: 700; opacity: 1; } .km-split--stacked .km-split__zoom, .km-split--stacked .km-split__caption { font-weight: var(--km-w-light); } /* 2.10.2a: the full FAQ page carried four sizes. The page heading and the body size are the two that earn their place; the group titles drop to the body size in capitals, which makes them a label rather than a third heading, and the rail and the help note come up off micro. Two sizes, two weights, two cases. */ .km-faqp__grouptitle { font-size: var(--km-fs-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; } .km-faqp__help, .km-faqp__help.km-footnote, .km-faqp__common a, .km-faqp__none, .km-faqp__nav a { font-size: var(--km-fs-body); font-weight: var(--km-w-light); } /* 2.10.2b: a tap on a question gave no feedback on a phone, because the only state on it was :hover, which a touch screen never fires. */ .km-faq__q { -webkit-tap-highlight-color: transparent; transition: background-color .12s ease; } .km-faq__q:active { background-color: rgba(151, 215, 0, 0.18); background-color: color-mix(in srgb, var(--km-lime) 18%, transparent); } /* 3.4: on a phone the price rides in the Add to cart button and the save badge sits inside its card. On desktop the price was a lone line at the sub size above the button and the badge hung off the card corner, so the two screens read as two designs. Desktop now follows the phone, which is the version he picked, and it drops a font size off the page at the same time. */ .km-pdp__price { display: none; } .km-pdp__btnprice { display: inline; margin-left: 0.8rem; padding-left: 0.8rem; border-left: 1px solid rgba(246, 242, 233, 0.4); } .km-pdp__packsave { position: static; transform: none; display: block; margin-top: 0.6rem; padding: 0.2rem 0.4rem; border-radius: 3px; } /* 3.6: the product page table ran at the micro size behind a 62rem min-width, so it scrolled inside a column it should have fitted, and it did not match the homepage table it is meant to repeat. Same size as the homepage, no min-width, tighter gutters so four columns fit the 1.2fr track. Auto layout is deliberate: `table-layout: fixed` clipped the KETOMARIN header the last time it was tried. */ .km-comparison--split .km-table { min-width: 0; width: 100%; font-size: var(--km-fs-body); } .km-comparison--split .km-table th, .km-comparison--split .km-table td { padding: 1.2rem 1rem; } .km-comparison--split .km-table-scroll { overflow-x: auto; } /* 1.1 + 3.8a: two sizes, not three. The 24px step was still carrying four things: the pack card price, the publication name, the Judge.me review title and the gallery arrow glyph. All of them work at the body size with bold doing the emphasis, and the page loses a size. The section heading "Customer reviews" is already .km-h2, so it matches the homepage, which is what 3.8a asked. */ .km-pack__price, .km-logos__name, .km-rv__title, .km-rv-sec .jdgm-rev__title, .km-rv-sec .jdgm-widget .jdgm-rev-widg__title { font-size: var(--km-fs-body); font-weight: 700; } /* the arrow is a glyph in a round button, sized by the button, not by the scale */ .km-pdp__arrow { font-size: var(--km-fs-body); line-height: 1; } .km-faq__q::after { font-size: var(--km-fs-body); } /* The last four things off the two-size scale, found by reading every rendered node rather than by reading the stylesheet. Judge.me is targeted by its own title classes only: a blanket rule here previously resized the star icon font and broke the stars. */ .km-pack__was, .km-drawer__subtotal, .km-drawer__foot .km-drawer__total, .km-rv-sec .jm-review-widget-minimal-header__title, .jdgm-write-review-modal__title { font-size: var(--km-fs-body); } /* Judge.me loads its own stylesheet after ours, so its widget title needs the flag to come back onto the scale. Scoped to the one class: the star icon font must keep its own size or the stars break. */ .jm-review-widget-minimal-header__title { font-size: var(--km-fs-body) !important; } /* The FAQ search box was the last 15px on the site, from the browser default for an input rather than from the scale. */ #km-faq-search, .km-faqp__search input { font-size: var(--km-fs-body); } /* .km-h3 was still on the sub size, which is the third size the scale no longer has. It is the label role: body size, bold, capitals. The contact page steps were the last place it showed. */ .km-h3 { font-size: var(--km-fs-body); letter-spacing: 0.1em; } /* Judge.me sets its widget title from a stylesheet that loads after ours, so the class alone lost even with the flag. Tag plus both classes wins it. */ p.jm-text.jm-review-widget-minimal-header__title { font-size: var(--km-fs-body) !important; } /* Dawn's base.css puts every field and button at 1.5rem. That is the 15px the FAQ search box kept showing on a phone. */ input, select, textarea, button, .button, .button-label { font-size: var(--km-fs-body); } /* Judge.me writes `--text-size: var(--jm-heading-sm-size)` inline on its widget title, so no font-size rule of ours reaches it however specific, and it sets that variable on a container that outranks :root. The declaration below is kept because it costs nothing and takes effect the moment they stop, but the title is still 24px and the real fix is the text-size control in the Judge.me app settings. It is the one element on the site off the two-size scale. */ :root { --jm-heading-sm-size: var(--km-fs-body); } /* ========================================================================== ROUND 2, second pass — Shane approved 2026-09-27 ========================================================================== */ /* 2.3.1a: "Corte Madera, California" was not a lighter weight, it was the one surviving faded green at 66%, which round 1 [1.3] took out everywhere else. Full strength, same bold as the other labels. Whether the line stays at all is still his call. */ .km-eyebrow { color: var(--km-ink); } .km-section--olive .km-eyebrow { color: var(--km-cream); } /* 1.1: two weights, and the lighter of the two is now thinner than the regular that was there. Archivo Light 300 for body, Bold 700 for headings and labels. Regular 400 is no longer requested or used anywhere, so the page really does carry two weights rather than two plus whatever a browser default supplies. Dawn's own stylesheets set 400 in a few places and are caught here. */ body, p, li, td, input, select, textarea, .km-body, .km-footnote { font-weight: var(--km-w-light); } strong, b, th, h1, h2, h3, h4, .km-h1, .km-h2, .km-h3, .km-btn, button, .km-eyebrow { font-weight: 700; } /* Judge.me's own body text sits at 400, which would be a third weight on the product page. Their `.jm-text` class carries it, so it is set here rather than by fighting each element. The star icon font is untouched. */ .km-rv-sec .jm-text, .jm-text { font-weight: var(--km-w-light); } .km-rv-sec .jm-text b, .km-rv-sec .jm-text strong { font-weight: 700; } /* 2.5.1 transposed: the pasta is the row and the measure is the column, which he asked for because five columns of numbers plus a label was too wide. The highlight moves with it. Every .km-col-us rule above is now dead, because nothing carries that class any more; these replace it on the row. */ .km-table tr.km-row-us th, .km-table tr.km-row-us td { background: rgba(168, 206, 30, 0.16); font-weight: 700; color: var(--km-ink); } .km-table tr.km-row-us th[scope='row'] { background: var(--km-lime); color: var(--km-ink); border-radius: 3px 0 0 3px; } .km-table tr.km-row-us td:last-child { border-radius: 0 3px 3px 0; } /* The row label column now carries brand names rather than one-word measures, so it needs room and the measures can be narrow and right-aligned. */ .km-table th[scope='row'] { white-space: nowrap; } .km-table thead th:not(.km-table__corner), .km-table tbody td { text-align: right; } .km-table thead th.km-table__corner, .km-table th[scope='row'] { text-align: left; } /* Transposed, the table is four measures wide instead of six pastas, so it can fit a 390px screen rather than scrolling. What was blocking it: the corner cell held "Per 2oz (56g) serving" on one line, the headers would not wrap, and the row labels were nowrap. The basis moves to the footnote on a phone, where the footnote is directly under the table anyway. */ @media screen and (max-width: 749px) { /* These have to outrank the 2026-09-06 phone block, which targets `.km-comparison--split .km-table thead th` at (0,2,2). A media query adds no specificity of its own, so the selectors are matched level for level. */ .km-comparison--split .km-table thead th.km-table__corner, .km-table thead th.km-table__corner { font-size: 0; padding: 0 0.5rem 1.1rem 0; } .km-comparison--split .km-table thead th, .km-table thead th { white-space: normal; padding: 0 0.5rem 1.1rem; } .km-comparison--split .km-table tbody th, .km-comparison--split .km-table td, .km-table tbody th, .km-table td { padding: 0.9rem 0.5rem; white-space: normal; } .km-comparison--split .km-table, .km-table { min-width: 0; } /* Fixed layout was tried here to force the table into 346px and it does fit, but at 17% a column is narrower than the word PROTEIN, so the headers broke mid-word: "NET CARB S", "PROT EIN", "CALO RIES". Five columns of 16px type do not fit a 390px screen, and the only way to make them is a third, smaller font size, which 1.1 rules out. So the phone keeps the sideways scroll it already had, with the swipe hint above it. Desktop, which is what 3.6 was about, now fits with no scroll at all. */ } /* Measured: "Per 2oz (56g) serving" is 210px on one line and the corner was giving it 108, so it broke to three lines and read as a stack of fragments. The measure columns meanwhile were 132px each while the widest word in them, CALORIES, is 90. So: hand the corner a floor and hint the measure columns narrow. NET CARBS is 101px and breaks to two lines at that width, which is what Shane asked for, and CALORIES at 90 still holds one line. */ @media screen and (min-width: 750px) { .km-comparison--split .km-table thead th.km-table__corner, .km-table thead th.km-table__corner { min-width: 12rem; width: 12rem; } .km-comparison--split .km-table thead th:not(.km-table__corner), .km-table thead th:not(.km-table__corner) { width: 7rem; } .km-comparison--split .km-table th, .km-comparison--split .km-table td, .km-table th, .km-table td { padding-left: 0.7rem; padding-right: 0.7rem; } .km-comparison--split .km-table th[scope='row'], .km-table th[scope='row'] { padding-left: 1.2rem; } } /* The split was `1fr 1fr`, but a bare `1fr` floors at min-content, so the copy column grew past its half on the strength of its own longest line and took 744px against the table's 528. That is why the product page table had to break PROTEIN and CALORIES mid-word while the homepage did not. Both tracks now floor at zero and the table gets the larger share, because a heading and three stats need less room than five columns of numbers. */ @media screen and (min-width: 990px) { /* The thing that made every ratio fail was `white-space: nowrap` on the accent phrase: it gave the copy column a 745px floor at 56px, so the table only ever got what was left, and `max-content` then collapsed the homepage table to zero because that intro is long. The heading wraps now, which is what a heading should do, and the two columns can just share. */ /* Both halves of the heading were nowrap, `.km-h2` at line 3698 and the accent at 1734, which is what held the copy column at a 744px floor and clipped the text once the table took a fair share. A heading wraps. */ .km-comparison--split .km-comparison__head .km-h2, .km-comparison--split .km-comparison__head .km-accent { white-space: normal; } .km-comparison--split .km-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } /* Measured, not guessed: the table lands at 652px. A 12rem corner leaves each measure 115px, which is 97px of content. CALORIES is 90 and holds one line, NET CARBS is 101 and wraps to two, which is what Shane asked for. 15rem was tried and starved the measures to 88px, breaking CALORIE / S. */ .km-comparison--split .km-table thead th.km-table__corner, .km-table thead th.km-table__corner { min-width: 12rem; width: 12rem; } } /* ========================================================================== ROUND 3 — Jesse, October 4, 2026 ========================================================================== */ /* 2.11.1 "Are texts here of same inverse weight? They look inconsistent." They were not. Round 2's 2.11.2 asked the three column openers to match in case and size, so they went bold at 700 while everything under them stayed at 300. One weight now, and case alone carries the hierarchy. */ .km-footer__logo, .km-footer__title, .km-footer__capture .km-h3, .km-footer__form button { font-weight: var(--km-w-light); } .km-footer__logo, .km-footer__title, .km-footer__capture .km-h3 { opacity: 0.88; } /* 3.2 the six facts above PACK SIZE in capitals, as on the landing page. */ .km-pdp__spec { text-transform: uppercase; letter-spacing: 0.06em; } /* 2.3.1c the hero specs un-bolded, to match the product page. They are 300 now like the rest of the body, so the lime dot is what marks them as a row of facts rather than a sentence. */ .km-pill { font-weight: var(--km-w-light); } /* 2.9.1 "save $4.50" sits in the sentence, so it stops shouting. */ .km-pack__save { font-weight: var(--km-w-light); text-transform: none; } /* 2.4.1 crosses shorter and thinner. The stroke widths came down in the section; this is the "shorter" half, pulling the arms further inside the bowl. Round 1 set 16%. */ .km-crossed__x { top: 24% !important; right: 24% !important; bottom: 24% !important; left: 24% !important; } /* 2.5.4 the swipe hint in the light weight, still capitals. */ @media screen and (max-width: 989px) { .km-comparison--split .km-table-scroll::before { font-weight: var(--km-w-light); font-size: var(--km-fs-body); } } /* 1.7 + 2.2 "header seems too narrow" and "logo square 50 to 100% larger". One change, because the logo is sized off the bar. The mark was 52px inside a 74px bar on desktop and 36 inside 60 on the phone. It goes to 78 and 54, up 50%, and the bar grows with it so the breathing room around it holds. His logo file is 1294x536, so it has the pixels for this with no softening. */ .km-header__logo-img { height: 7.8rem; } .km-header__inner { padding-top: 1.9rem; padding-bottom: 1.9rem; } @media screen and (max-width: 989px) { /* a `max-height: 3.6rem` further up was capping the phone logo, so the height alone did nothing. Both have to move. */ .km-header__logo-img { height: 5.4rem; max-height: 5.4rem; } .km-header__inner { padding-top: 1.4rem; padding-bottom: 1.4rem; } } /* 480 and under keeps the same 5.4rem: at 4.8 the mark was only a third bigger and he asked for half again at least. */ .km-header__logo-img { max-height: 7.8rem; } /* 2.3.1b the line under the headline on one line on desktop, as on the product page. It was wrapping on a 40ch cap, and the sentence is 64 characters. The copy column is wide enough to hold it without one. */ @media screen and (min-width: 1200px) { .km-hero__sub { max-width: none; } } /* 3.4 "Customer Reviews should be of same size and case as heading". It was Judge.me's own title, printed at 24px from a size the app writes inline, which beat three attempts in round 2. So the app's title is hidden and the section prints our own heading instead, the same .km-h2 the homepage uses. One heading, ours, on the scale. */ .km-rv-sec .jm-review-widget-minimal-header__title, .km-rv-sec .jdgm-rev-widg__title { display: none !important; } /* 2.1 the announcement bar with motion turned off. `prefers-reduced-motion` already stopped the marquee, but it stopped it on a strip six copies wide, so the bar parked on the first message and the second was never seen. Jesse has Reduce Motion on and asked whether his old iPhone was at fault. It was not. With the animation off the track stops being a strip: it centres, wraps, and shows one copy of each message. */ @media (prefers-reduced-motion: reduce) { .km-announce { padding: 0.7rem 0; } .km-announce__track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 0.2rem; } .km-announce__item { padding: 0 1.6rem; } /* one copy of each. The section repeats the blocks to make the loop seamless and tags the first pass, so this holds at any number of them. */ .km-announce__item:not(.km-announce__item--first) { display: none; } } /* 2.10.1 the press state the touch handler drives. The `:active` rule stays for pointer devices; `.is-pressed` is what actually fires on iOS. */ .km-faq__q.is-pressed { background-color: rgba(151, 215, 0, 0.18); background-color: color-mix(in srgb, var(--km-lime) 18%, transparent); } /* 3.3 "Column width inconsistent for 4 photos under pack, 3 pack size options, ADD TO CART button, and nutrition facts table. Due to my iPhone SE?" Not his phone. On a 375px screen the product grid's container is 331px wide and its children were measuring 376, so the thumbnails, the pack selector, the button and the details all ran 45px past the edge and were clipped, while the comparison table stayed inside. That is the inconsistency he saw. A bare `1fr` track floors at min-content, and the three-across pack selector has a min-content wider than the screen, so it pushed the whole column out. Same fault the comparison grid had. */ @media screen and (max-width: 989px) { .km-pdp__grid { grid-template-columns: minmax(0, 1fr); } .km-pdp__grid > *, .km-pdp__buy, .km-pdp__media { min-width: 0; max-width: 100%; } .km-pdp__packs { min-width: 0; } .km-pdp__thumbs { min-width: 0; overflow-x: auto; } } /* and on desktop the same section sat 24px left of everything above it: the comparison split ran a 1fr/1.05fr grid with a 48px gap while the product grid runs even columns with 64. Matched, so the table lines up with the buy column. */ @media screen and (min-width: 990px) { .km-comparison--split .km-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6.4rem; } } /* ========================================================================== ROUND 4 — Jesse, October 10, 2026 ========================================================================== */ /* 2.5.2 + 2.10.2 "Please use body text weight for Footnote. No need for a 3rd lighter weight." There is no third weight: the footnote is 300 like the body and always was. What reads as lighter is colour, a 68% alpha on the same green, and on the full FAQ page "Cannot find an answer?" carries the same class at the same alpha, which is 2.10.2. Full strength on every ground, so weight and colour both match the body and the third tone disappears. */ .km-footnote { color: var(--km-ink); } .km-section--olive .km-footnote { color: var(--km-cream); } .km-section--lime .km-footnote { color: rgb(20, 24, 12); } /* 2.5.2, second half. "SWIPE TO COMPARE" was the same trick: round 3 took it to weight 300, but the base rule still painted it at 50% alpha. */ @media screen and (max-width: 989px) { .km-comparison--split .km-table-scroll::before { color: var(--km-ink); } } /* 2.3.1 "1G NET CARB" to "1g Net Carb". The four lime bullets already separate the facts, so the capitals were doing a second job nothing needed. The text itself is title case in the template; this drops the transform. */ .km-pill { text-transform: none; letter-spacing: 0; } /* 3.1 the six facts above PACK SIZE take whatever the hero pills take, which is what "same font style as landing page" asks for. Round 3's 3.2 is the rule being reversed here. */ .km-pdp__spec { text-transform: none; letter-spacing: 0; } /* 2.10.1 "Please unbold SEE ALL QUESTIONS". */ .km-faq__footer a { font-weight: var(--km-w-light); } /* 2.11.1 "Original bold KETOMARGIN, BE FIRST TO KNOW... and JOIN look better." Third time the footer weight has moved: round 2's 2.11.3 asked for one inverse weight, round 3's 2.11.1 asked for one weight everywhere and took these to 300. Only the three he names come back; the column titles stay at 300 so the footer still reads as two levels rather than four. */ .km-footer__logo, .km-footer__capture .km-h3, .km-footer__form button { font-weight: 700; opacity: 1; } /* 2.4.1 "lime cross signs slightly shorter so to be less overwhelming." Round 1 set the arms 16% inside the bowl, round 3 took them to 24%. 30% is the third pass and the one he asked for. */ .km-crossed__x { top: 30% !important; right: 30% !important; bottom: 30% !important; left: 30% !important; } /* 2.5.1 "Table heading CALORIES is cut off for desktop." Not cut off, broken: `overflow-wrap: break-word` on the header row let the browser split the word itself, so a 77px column printed CALORIE over S. It is the same fault as the `table-layout: fixed` attempt in round 3 that produced PROT EIN. Words stay whole now, and the tracking and gutters come in far enough that the longest header fits the column it has. */ .km-comparison--split .km-table thead th { overflow-wrap: normal; word-break: keep-all; hyphens: none; letter-spacing: 0.02em; } .km-comparison--split .km-table th, .km-comparison--split .km-table td { padding: 1.2rem 0.6rem; } /* 3.2 "SAVE $4.5 and SAVE $15 are out of their lime boxes." True on the phone only: the badge is a block inside a third-width card, 67px of box holding 93px of nowrap text, so the back half of the figure sat outside the green. It spans the card's padding now and takes the 0.02em tracking the pack name beside it already uses. */ @media screen and (max-width: 749px) { .km-pdp__packsave { margin-left: -1rem; margin-right: -1rem; padding-left: 0.2rem; padding-right: 0.2rem; letter-spacing: 0.02em; } } /* 2.1 "mobile screen please go back to FREE SHIPPING ON ALL US ORDERS as it is too packed to also have 1G NET CARB...". Per-message, set in the theme editor, so he can change his mind without me. It also retires the frozen-bar problem on the phone: with one message there is no second one to miss. */ @media screen and (max-width: 749px) { .km-announce__item--deskonly { display: none; } } /* 2.5.1, the narrow-desktop band. Keeping words whole raises the table's minimum width, so between 990 and 1200 the last column ran 2 to 21px past its container. Tighter gutters and no tracking on the header row buy back about 30px, which clears it without touching the sizes or the weights. */ @media screen and (min-width: 990px) and (max-width: 1200px) { .km-comparison--split .km-table thead th { letter-spacing: 0; } .km-comparison--split .km-table th, .km-comparison--split .km-table td { padding-left: 0.4rem; padding-right: 0.4rem; } } /* Measured after: 1200 and up is clean, which covers his MacBook Air at 1280 and 1440. Between 990 and 1152 the table still runs 4 to 18px past its container and scrolls for it. `max-width` on a sticky cell was tried and does nothing, because auto table layout ignores it. Left as a scroll rather than chased further. */ /* 2.2 + 2.3.2 "increase more so that word KetoMarin of logo on mobile is bigger than word Account", and "make margins of header narrower so blank space between header and landing smaller". The two pull against each other, because the bar is sized off the logo, so the padding gives back exactly what the logo takes. On the phone the mark goes 54 to 66px while the padding comes 14 to 10, which leaves the bar at the same 86px it is now and makes the wordmark clearly larger than "Account" beside it. Desktop keeps its 78px mark and just loses the padding. */ .km-header__inner { padding-top: 1.4rem; padding-bottom: 1.4rem; } @media screen and (max-width: 989px) { .km-header__logo-img { height: 6.6rem; max-height: 6.6rem; } .km-header__inner { padding-top: 1rem; padding-bottom: 1rem; } } /* 2.3.2 the landing section's own top and bottom. The hero carried an 8rem override where every other copy block uses 5.6rem, so it was the one section running wider than the rest of the page. Back to the base figure, which both closes the gap he is pointing at and puts the hero on the same rhythm as everything under it. */ .km-hero--bleed .km-hero__copy { padding-top: 5.6rem; padding-bottom: 5.6rem; } @media screen and (max-width: 989px) { .km-hero--bleed .km-hero__copy { padding-top: 2.8rem; padding-bottom: 2.4rem; } } /* 2.2, the knock-on. Growing the mark to 66px left the utilities column able to shrink, because "Account Cart (0)" has a small min-content width once the browser is allowed to wrap it, so "Cart (0)" broke across two lines. Holding each link on one line raises that min-content width and the grid gives the column the space it needs. At 375px the row needs about 307 of the 331 available, so it fits with room. */ @media screen and (max-width: 749px) { .km-header__utils { white-space: nowrap; } .km-header__utils > a { white-space: nowrap; } } /* ========================================================================== ROUND 5 — Jesse, October 14, 2026 ========================================================================== */ /* "Please adjust logo size to make KetoMarin same size as Account and Cart and align them horizontally for mobile version." This reverses 2.2 from four days ago, which asked for the wordmark bigger than "Account". Measured off the logo file: the lettering stands 0.209 of the image height, so a 66px image puts it at 13.8px against Account's 11.5px cap at 16px Archivo. 55px brings the two to the same height. The row is centre-aligned so the mark, the wordmark and the links sit on one line. */ @media screen and (max-width: 989px) { /* Second pass. 55px put the wordmark at 11.49px of ink against "Account" at 11.25px, so it measured very slightly larger and he still read it as smaller. The logotype's strokes are finer than Archivo at the same cap height, which is what makes it look it. Matched by eye instead: 60px puts the lettering at 12.54px. The alignment was a real fault, not a perception. In the logo file the wordmark's ink sits 12.5px below the image's own centre, 2.33% of its height, so centring the image box left the lettering low against the links. Settled at 1px by eye, not by arithmetic. Centring the wordmark's ink gave 2.8px, which measured right and looked wrong: the wordmark is 1.25px taller than "Account", so matching their centres throws its cap line above the text, and the square mark rides high with it. He called that "a bit higher". 1px is between the two states he has commented on and reads level against both links. */ .km-header__logo-img { height: 6rem; max-height: 6rem; transform: translateY(-0.16rem); } .km-header__inner { align-items: center; } .km-header__logo { display: flex; align-items: center; } .km-header__utils { align-self: center; } } /* "Can we try a slightly heavier weight for all places using light 300 on mobile?" Regular 400 on phones, Light 300 unchanged on desktop. Every rule that set 300 now reads --km-w-light, so this one line moves all 21 of them and one line puts them back. Worth knowing: this is a third weight on the page, which his own 1.1 and the style sheet both put at two. */ @media screen and (max-width: 749px) { :root { --km-w-light: 400; } } /* The 60px mark fits from 360px up, and the original iPhone SE is 320. There the row wants 292px of a 276px content box, so "Cart (0)" ran past the gutter and the page itself went 5px wider than the screen. Tightening the two header gaps and taking the mark to 56px brings it to 272. The gutter stays 22px, so the one-gutter rule holds; only this header gets narrower gaps, and only on the narrowest phone. At 56px the wordmark is still 11.7px against "Account" at 11.25, so it reads the same size there too. */ @media screen and (max-width: 359px) { .km-header__inner { gap: 0.8rem; } .km-header__utils { gap: 0.8rem; } .km-header__logo-img { height: 5.6rem; max-height: 5.6rem; transform: translateY(-0.15rem); } } /* He aligns the cap tops, not the baselines, which is what his two notes were telling me. Measured live at 375: at a 1px lift the K sat 0.59px below the A in "Account" and he called it a tiny bit lower; at 2.8px it sat 1.8px above and he called it a bit higher. 1.6px puts the two cap tops level. The wordmark is 12.4px against Account's 11.0, so its baseline still runs lower, which is correct for the larger lettering. */ /* "Alignment of 2-PACK 8 servings button from 2 lines to 3 lines like 4- and 8-PACK buttons." On a phone "16 servings" and "32 servings" wrap and "8 servings" does not, so that one card ran a line short while all three boxes stayed 155px tall. The count takes its own line now, so every card reads name, number, servings. Desktop has the room and is left alone. */ @media screen and (max-width: 749px) { .km-pdp__packnum { display: block; } } /* ---- KM Glucose test --------------------------------------------------- The strips are cropped to the card bounds: 1317px holding three 417px screenshots with 33px between them. 417/1317 is 31.66% and 33/1317 is 2.5%, so a three column grid at a 2.5% gap drops each label exactly over its own screenshot. If the crop in slice_cgm_strips.py moves, this moves. */ .km-cgm__tests { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; max-width: 92rem; margin: 4rem auto 0; align-items: start; } .km-cgm__test { margin: 0; min-width: 0; position: relative; } .km-cgm__test[data-km-zoom] { cursor: zoom-in; } .km-cgm__title { font-family: var(--km-display); font-size: var(--km-fs-body); font-weight: 700; margin: 0 0 1.6rem; text-align: center; text-wrap: balance; } .km-cgm__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5%; margin: 0 0 0.8rem; font-size: var(--km-fs-body); font-weight: var(--km-w-light); text-align: center; } .km-cgm__labels span { min-width: 0; } .km-cgm__strip { display: block; width: 100%; height: auto; margin: 0 0 2rem; } .km-cgm__strip:last-of-type { margin-bottom: 0; } .km-cgm__zoom { display: block; margin-top: 1.2rem; text-align: center; font-size: var(--km-fs-body); font-weight: var(--km-w-light); } .km-cgm__head, .km-cgm__intro { text-align: center; } .km-cgm__intro { margin: 1.6rem auto 0; max-width: 62rem; } .km-cgm__foot { max-width: 72rem; margin: 3.2rem auto 0; text-align: center; } @media screen and (max-width: 749px) { .km-cgm__tests { grid-template-columns: 1fr; gap: 4rem; margin-top: 3.2rem; } .km-cgm__strip { margin-bottom: 1.6rem; } } /* The enlarge hint carried 0.72 opacity, copied from the km-split version it replaced. That is the fourth tone Jesse caught in 2.5.2 and the style sheet rules out, so it comes off. Every word in this section is now one of the three colors at full strength, at 16px, in 300 or 700. */