/* * Green St Kitchen - Home page's OWN sections only. * No literal colour values. Everything comes from tokens.css. * Measurements are from 01_GSK_Web_June-2026_Home.pdf at 1280px canvas. * * --------------------------------------------------------------------------- * WHAT IS *NOT* IN HERE, AND WHY * * The Banner and Media slider blocks used to have their CSS here, because Home * was the only page that used them and this file already loaded everywhere. * That was the same mistake as the first cut of the Contact page: the styling * was tied to a page rather than to the thing that owns it, so it silently broke * the moment either block was reused, and it never reached the block editor's * native canvas iframe at all (only the ACF preview iframe, via * add_editor_style() in inc/setup.php). * * They have moved to blocks/banner/style.css and blocks/media-slider/style.css, * loaded via block.json's "style": "file:./style.css" - which lands inline in * only on pages where the block actually renders, and reaches the editor * canvas too. The one thing genuinely shared by both blocks, the play control and * the lightbox, moved to components.css instead. See MAINTAINER.md, "Where the * stylesheets live". * * What remains below is everything that is only ever Home: the statement, the * two-up range cards and their shape motif, the three-up tiles, the pairings, * the credentials band and the locator CTA. None of it is a block. * ========================================================================= */ /* Core block normalisation: a core/image arrives wrapped in a *
with its own margins, which needs to get out * of the way when the image is being used as the pairing card's media. */ .gs-pairing__image { margin: 0; } .gs-pairing__image img { display: block; width: 100%; } /* ========================================================================= * STATEMENT - centred eyebrow, three line statement, supporting paragraph. * ========================================================================= */ /* The extra top padding is the mockup's: 68px between the bottom of the hero * image and the top of the eyebrow. The hero band has no bottom padding of its * own, so this section carries the whole gap rather than half of it. */ .gs-statement { text-align: center; } @media (min-width: 1024px) { .gs-statement { padding-top: 68px; } } /* The accent colour, as the mockup has it. Restored 5 August 2026 on request. * * It had been switched to Ink because #B05A26 on Warm Beige measures 4.0:1 at * 12.5px where AA wants 4.5:1. The client has chosen the mockup colour over the * criterion, which is theirs to choose. Recorded in BUILD-REPORT.md as a granted * exception so it is not mistaken for a defect. */ .gs-statement__eyebrow { color: var(--gs-pickled-things); margin-bottom: var(--gs-space-md); } /* 800px, and balancing off. The mockup's longest line measures 778px, and its * three lines get shorter in order, which is a natural wrap at a fixed measure * rather than a balanced one. text-wrap: balance would even them out and move * the em dash onto the second line. */ .gs-statement__title { font-size: var(--gs-step-statement); max-width: 800px; margin-inline: auto; margin-bottom: var(--gs-space-md); text-wrap: normal; } .gs-statement__body { font-size: var(--gs-step-intro); line-height: var(--gs-leading-body-tight); max-width: 68ch; margin-inline: auto; } /* ========================================================================= * TWO-UP RANGE CARDS - measured 564px wide each, span 6 of the 12 col grid. * Each card sets its own --gs-accent, so the pill and text need no variant * class of their own. * ========================================================================= */ /* ========================================================================= * SHAPE MOTIF * The supplied per-range SVGs in assets/svg/, applied as a mask on a * pseudo-element so the colour comes from a token instead of the file. The * speckles in the artwork are holes, so the card's own background shows through * them exactly as the mockup does. Decorative, so no element and no alt text. * ========================================================================= */ .gs-rangecard::before, .gs-rangetile::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--gs-shape); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } /* One grouped SVG per range, sized and positioned per surface. * * The sizes and positions below are not guesses. The shape-coloured pixels in * the 300dpi export were labelled into connected components to get a bounding * box for every blob, and each cluster below is centred on the union of those * boxes at the artwork's own 1080 x 788.61 aspect. Hence the odd numbers. * * Measured cluster unions, relative to each card: * two-up wild ferments x 305-564, y 0-285 * two-up pickled things x 1-251, y 244-452 * three-up tiles x 185-371, y 0-80 (clipped at the top edge) */ /* ON SHAPE PLACEMENT, which is a 7A decision rather than a measurement. * * Each supplied SVG holds four shapes already arranged relative to each other. * The mockup does not use them that way: it places individual shapes per * surface, so the same four appear in a different arrangement on every card. * That arrangement lives in the .ai file's transforms and is not recoverable * from a flat PDF. * * So: the artwork is the designer's, unaltered, and the sizes and positions * below put the cluster in the same region of each card as the mockup, clipped * the same way, and clear of the type. Individual shapes sit differently. * Logged in PROJECT-BRIEF 7A and flagged for Oakie at first review. To match * exactly, the shapes need to arrive as separate files, one per shape. * * Measured target regions, relative to each card: * two-up wild ferments right side, roughly x 311-566, y 10-330 * two-up pickled things bottom left, x 0-260, y 244-491 * three-up tiles top right, x 185-371, clipped at the top edge * * Card geometry: 54px block padding, 48px inline, 564 x 491 at desktop. */ .gs-rangecard { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: var(--gs-space-lg); border-radius: var(--gs-card-radius); overflow: hidden; background-color: var(--gs-tint-neutral); } @media (min-width: 768px) { .gs-rangecard { padding: 54px var(--gs-card-padding); } } .gs-rangecard > * { position: relative; z-index: 1; } .gs-rangecard__eyebrow { color: var(--gs-accent); margin-bottom: 14px; } .gs-rangecard__title { font-size: var(--gs-step-display); color: var(--gs-accent); margin-bottom: 20px; } /* 400px measure. The mockup hard breaks this copy at each sentence, which is * not reproduced: fixed breaks in body text fall apart at phone widths. Setting * the measure to the mockup's longest line gets the same line count from a * natural wrap instead. 7A decision. */ .gs-rangecard__body { font-size: var(--gs-step-body); line-height: 1.45; margin-bottom: var(--gs-space-md); max-width: 400px; } .gs-rangecard .gs-chip-row { margin-bottom: var(--gs-space-md); } /* Wild ferments side: neutral tint, accent purple, lavender shapes measured * from the mockup at x 50 to 558, y 6 to 417 within the card, which is the * artwork sized to the card width and aligned to the top. */ .gs-rangecard--wild-ferments { --gs-accent: var(--gs-wild-ferments); --gs-chip-bg: color-mix(in srgb, transparent, var(--gs-wild-ferments) 14%); --gs-chip-fg: var(--gs-wild-ferments); --gs-shape: var(--gs-shape-wild-ferments); background-color: var(--gs-tint-neutral); } /* Mockup cluster: x 306 to the card's right edge, y 1, so 258 x 283. * * The artwork's own aspect is wider than that cluster, so a single uniform copy * cannot be both 258 wide and 283 tall. Because the right side is clipped by the * card, sizing up buys height without adding visible width: at 420px the cluster * measures 258 x 285 with its left edge landing on 306. */ .gs-rangecard--wild-ferments::before { mask-image: url("../svg/shape-kimchi.svg"); mask-size: 420px auto; mask-position: 295px -8px; -webkit-mask-image: url("../svg/shape-kimchi.svg"); -webkit-mask-size: 420px auto; -webkit-mask-position: 295px -8px; } /* Pickled things side: solid accent fill, so type flips to Paper. Its shape * band measures y 59 to 471, so the artwork sits toward the bottom here rather * than the top. */ .gs-rangecard--pickled-things { background-color: var(--gs-pickled-things-alt); color: var(--gs-fg-inverse); --gs-chip-bg: color-mix(in srgb, transparent, var(--gs-fg-inverse) 18%); --gs-chip-fg: var(--gs-fg-inverse); --gs-shape: var(--gs-shape-pickled-things-alt); } /* Mockup cluster: x 1 to 261, y 244 to 491, so 260 x 247, clipped by the card's * left edge. Same trick as the card beside it, mirrored: sizing up and pushing * left past the edge gains height while the clipping holds the width. */ .gs-rangecard--pickled-things::before { mask-image: url("../svg/shape-pickles.svg"); mask-size: 360px auto; mask-position: -90px 236px; -webkit-mask-image: url("../svg/shape-pickles.svg"); -webkit-mask-size: 360px auto; -webkit-mask-position: -90px 236px; } .gs-rangecard--pickled-things .gs-rangecard__eyebrow, .gs-rangecard--pickled-things .gs-rangecard__title { color: var(--gs-fg-inverse); } /* ========================================================================= * THREE-UP RANGE TILES - span 4 each. * ========================================================================= */ .gs-sectionhead { text-align: center; margin-bottom: var(--gs-space-md); } .gs-sectionhead--start { text-align: left; } .gs-sectionhead__title { font-size: var(--gs-step-section); margin-bottom: var(--gs-space-2xs); } /* 900px. The mockup sets the "Three ranges" standfirst on a single line, and * it measures 892px at 16px Figtree. */ .gs-sectionhead__body { font-size: var(--gs-step-base); max-width: 900px; margin-inline: auto; } .gs-sectionhead--start .gs-sectionhead__body { margin-inline: 0; } /* Measured: 371 x 300 at desktop, 18px inline padding, 20px at the bottom, * and 94px at the top because that space carries the shape motif. */ .gs-rangetile { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 94px 18px 20px; border-radius: var(--gs-card-radius); overflow: hidden; background-color: var(--gs-tile-bg); } .gs-rangetile > * { position: relative; z-index: 1; } .gs-rangetile__title { font-size: var(--gs-step-range); color: var(--gs-accent); margin-bottom: var(--gs-space-3xs); } /* Accent colour, as the mockup has it. Restored alongside the statement * eyebrow, since it is the same decision: on their own tints these measure * 8.9:1 (wild ferments, passes), 4.0:1 (pickled things) and 3.23:1 (jamu jamu) * at 12.5px. The last two are granted exceptions, listed in BUILD-REPORT.md. */ .gs-rangetile__eyebrow { color: var(--gs-accent); margin-bottom: var(--gs-space-sm); } /* 1.2 leading, not the 1.5 body default. The mockup sets this 14.5px text on * a 17.4px line. */ /* 292px measure, narrower than the tile's content box. The mockup wraps this * copy earlier than the full width would, so the line count only matches at * this measure. */ .gs-rangetile__body { font-size: var(--gs-step-sm); line-height: var(--gs-leading-body-tight); max-width: 292px; margin-bottom: 20px; flex: 1 1 auto; } .gs-rangetile--wild-ferments { --gs-accent: var(--gs-wild-ferments); --gs-tile-bg: var(--gs-tint-wild-ferments); --gs-shape: var(--gs-shape-wild-ferments); } /* All three tiles share the cluster geometry. Measured against the mockup: the * cluster is 185px wide, 79px tall, and runs right up to the tile's right edge. * * 200px of artwork is 146px tall, so it is pulled up 67px to leave the 79px the * mockup shows, which also gives the shapes their cut-off top edge. The -5px on * the right is because the artwork carries about 5px of its own padding at this * scale, and without it the cluster stops short of the edge. */ .gs-rangetile::before { mask-size: 200px auto; mask-position: right -5px top -62px; -webkit-mask-size: 200px auto; -webkit-mask-position: right -5px top -62px; } .gs-rangetile--wild-ferments::before { mask-image: url("../svg/shape-kimchi.svg"); -webkit-mask-image: url("../svg/shape-kimchi.svg"); } .gs-rangetile--pickled-things { --gs-accent: var(--gs-pickled-things); --gs-tile-bg: var(--gs-tint-pickled-things); --gs-shape: var(--gs-shape-pickled-things); } .gs-rangetile--pickled-things::before { mask-image: url("../svg/shape-pickles.svg"); -webkit-mask-image: url("../svg/shape-pickles.svg"); } /* Paper label, as the mockup has it, so all three range pills read the same. * Restored 5 August 2026 on request. * * It had been Ink, which is the section 9 remedy: Paper on #B07A1E measures * 3.32:1 at 14px where 4.5:1 is wanted, and Ink on the same fill measures 5.23:1. * The client has chosen the mockup's appearance over the criterion, which is * theirs to choose. Listed as a granted exception in BUILD-REPORT.md so it is not * mistaken for a defect. Do not "fix" the fill: it is a brand value. */ .gs-rangetile--jamu-jamu { --gs-accent: var(--gs-jamu-jamu); --gs-tile-bg: var(--gs-tint-jamu-jamu); --gs-shape: var(--gs-shape-jamu-jamu); } .gs-rangetile--jamu-jamu::before { mask-image: url("../svg/shape-jamu.svg"); -webkit-mask-image: url("../svg/shape-jamu.svg"); } /* ========================================================================= * PAIRINGS - four-up, span 3 each. Image 272x240, tag pill over the image. * ========================================================================= */ .gs-pairing__figure { position: relative; margin: 0 0 20px; border-radius: var(--gs-card-radius); overflow: hidden; } .gs-pairing__figure img { width: 100%; height: auto; aspect-ratio: 272 / 240; object-fit: cover; } /* The tag is a paragraph inside the figure group. Absolute positioning is * enough to sit it over the image; the group is already the containing block. */ .gs-pairing__tag { width: fit-content; margin: 0; } .gs-pairing__tag { position: absolute; top: var(--gs-space-xs); left: var(--gs-space-xs); padding: 5px 12px; border-radius: var(--gs-pill-radius); background-color: var(--gs-paper); color: var(--gs-ink); font-family: var(--gs-font-body); font-weight: 500; font-size: var(--gs-step-tag); letter-spacing: var(--gs-tracking-label); text-transform: uppercase; } .gs-pairing__title { font-size: var(--gs-step-card-title); margin-bottom: 6px; } .gs-pairing__body { font-size: var(--gs-step-sm); line-height: var(--gs-leading-body-tight); } /* ========================================================================= * CREDENTIALS - Ink band. Measured: 58px rings, 100px apart, label under. * ========================================================================= */ .gs-credentials { background-color: var(--gs-bg-inverse); color: var(--gs-beige-rose); padding-block: var(--gs-space-xl); } @media (min-width: 1024px) { .gs-credentials { padding-block: var(--gs-space-3xl); } } /* Cells stay 112px at every width, because that is what makes "Made in * Australia" wrap onto two lines and the other five labels stay on one, as in * the mockup. Only the column count changes, so the row never overflows: * 2 up to 600px, then 3, then 4, then all six at desktop where the measured * 46px gap gives the 158px pitch between ring centres. */ .gs-credentials__list { display: grid; grid-template-columns: repeat(2, 112px); justify-content: center; gap: var(--gs-space-lg) var(--gs-space-md); margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .gs-credentials__list { grid-template-columns: repeat(3, 112px); column-gap: var(--gs-space-lg); } } @media (min-width: 768px) { .gs-credentials__list { grid-template-columns: repeat(4, 112px); column-gap: 46px; } } @media (min-width: 1024px) { .gs-credentials__list { grid-template-columns: repeat(6, 112px); column-gap: 46px; } } .gs-credentials__item { display: flex; flex-direction: column; align-items: center; gap: var(--gs-space-xs); text-align: center; } .gs-credentials__mark { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid color-mix(in srgb, var(--gs-warm-beige), transparent 55%); border-radius: 50%; font-family: var(--gs-font-heading); font-weight: 700; font-size: var(--gs-step-card-title); line-height: 1; } .gs-credentials__label { font-family: var(--gs-font-body); font-weight: 500; font-size: var(--gs-step-label); letter-spacing: var(--gs-tracking-label); text-transform: uppercase; line-height: 1.25; } /* ========================================================================= * LOCATOR CTA - accent band. Measured: 359px input + 12px + 149px button. * ========================================================================= */ /* The fill is a variable with the Home value as its default, not a fixed * colour. The same band appears on all eleven product pages, where the mockup * draws it in that product's own colour rather than this one, and the band is a * shared template part - so the product template reassigns --gs-locator-bg * rather than this rule growing a second selector. Home is unchanged. */ .gs-locator-cta { background-color: var(--gs-locator-bg, var(--gs-pickled-things)); /* Paired with the fill above, and a variable for the same reason: a product * page reassigns the fill, and one of the six schemes cannot carry Paper text * accessibly. See the gold note in product.css. */ color: var(--gs-locator-fg, var(--gs-fg-inverse)); padding-block: var(--gs-space-xl); text-align: center; } @media (min-width: 1024px) { .gs-locator-cta { padding-block: var(--gs-space-3xl); } } /* Unbounded Bold, not NaN Jaune. The PDF font resource for this heading is the * same one used by the hero and the section headings; NaN Jaune appears on * Home only for the three range names. */ .gs-locator-cta__title { font-family: var(--gs-font-heading); font-weight: 700; font-size: var(--gs-step-jar); line-height: var(--gs-leading-tight); margin-bottom: var(--gs-space-2xs); } .gs-locator-cta__body { font-size: var(--gs-step-card-title); margin-bottom: var(--gs-space-md); } .gs-locator-form { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gs-pill-gap); max-width: 520px; margin-inline: auto; } .gs-locator-form__field { flex: 1 1 220px; min-width: 0; } .gs-locator-form__input { width: 100%; min-height: var(--gs-pill-height); padding-inline: var(--gs-pill-padding-x); border: 1px solid transparent; border-radius: var(--gs-pill-radius); background-color: var(--gs-paper); color: var(--gs-ink); font-family: var(--gs-font-body); font-size: var(--gs-step-pill); } .gs-locator-form__input::placeholder { color: color-mix(in srgb, var(--gs-ink), transparent 45%); opacity: 1; } .gs-locator-form__submit { flex: 0 0 auto; } /* Validation message. The mockup has no error state; 7A decision is an * inline message tied to the input with aria-describedby, never colour alone. */ .gs-locator-form__error { flex: 1 1 100%; margin: 0; font-size: var(--gs-step-sm); font-weight: 500; text-align: center; } .gs-locator-form__error:empty { display: none; }