/* ========================================================================== AGRIYANA — Atmosphere Three things that apply to every page and are easiest to reason about in one place: 1 Background a very slow gradient field, so no page is ever a flat rectangle of one colour 2 Cursor a custom pointer, on fine-pointer devices only 3 Feedback the visual half of the sound system (see req/js/sound.js) Loads last, after commerce.css. ========================================================================== */ /* ==================================================================== 1. background A flat #FCFAF4 across a 9000px page reads as dead. Three very soft radial washes sit behind everything at low opacity — warm near the top where the hero is, green through the middle, warm again at the foot. Fixed attachment, so it does not repaint on scroll. It is one element on its own layer rather than a background on , which keeps it off the paint path of everything else. */ body { position: relative; } /* The amber wash used to sit at 8% 0% — top left, directly behind the hero and the first screen of every page. Combined with the cream bone scale it made the whole site read yellow. Green and cold lead now; the one warm note is pushed to the very bottom of the viewport, which is also where it belongs in the story: produce goes out cold, money and inputs come back warm. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(64% 48% at 10% -6%, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 64%), radial-gradient(50% 38% at 94% 6%, color-mix(in srgb, var(--chill) 7%, transparent) 0%, transparent 62%), radial-gradient(78% 44% at 50% 106%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--white) 60%, transparent) 0%, transparent 46%), var(--bg); } [data-theme='dark'] body::before { background: radial-gradient(64% 48% at 10% -6%, color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 64%), radial-gradient(50% 38% at 94% 6%, color-mix(in srgb, var(--chill) 9%, transparent) 0%, transparent 62%), radial-gradient(78% 44% at 50% 106%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 68%), linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 44%), var(--bg); } /* Sections that set their own background need to let the field through, or they punch a flat hole in it. These become translucent instead. `.mach-band` is excluded because it deliberately sets its own half-step surface — this file loads after craft.css, so without the exclusion it wins and the machinery section loses its background entirely. */ .section:not(.band):not(.mach-band), .usp-band, .page-head { background: transparent; } /* the one exception: bands are deliberately opaque, that is their whole job */ .band, .site-footer, .ticker { position: relative; z-index: 0; } /* REMOVED: a 90px gradient across the top of every dark band, meant to soften the seam where a light section meets it. It used `--bg`, which in the light theme is bone — so it painted a pale wash DOWN INTO the dark band and rendered as a grey smear across the top of both the machinery band and The Agriyana Line. It was softening the seam from the wrong side. The bands do not need it. They are supposed to be a hard cut: that contrast is what separates the farm side of the business from the home side. The one seam that genuinely needed help is the footer, which is handled properly in section 4 below with a rule and real spacing. */ /* ==================================================================== 2. pointer The custom cursor that used to live here was removed twice, and it is not coming back — see decision 11. What is here now is different in the one way that matters: `req/css/cursor.css` never hides the native pointer. It draws a label that follows it. Nothing in this codebase should ever set `cursor: none`. */ /* ==================================================================== 3. sound toggle Sound is OFF until asked for. A site that makes noise unprompted is a site people close. The control lives in the header next to the theme switch, and the choice is remembered. */ .sound-btn { position: relative; } .sound-btn .ico-off { display: none; } .sound-btn[aria-pressed='false'] .ico-on { display: none; } .sound-btn[aria-pressed='false'] .ico-off { display: block; } .sound-btn[aria-pressed='true'] { color: var(--brand-ink); } /* a small ring pulses out of the button when sound is switched on, so the change is confirmed visually as well as audibly */ .sound-btn.is-ping::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid var(--brand); animation: sound-ping 620ms var(--ease-out) forwards; } @keyframes sound-ping { from { transform: scale(.7); opacity: .9; } to { transform: scale(2.1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sound-btn.is-ping::after { animation: none; } } /* ==================================================================== 4. footer seam Measured: the last
section is `.band` at rgb(3,12,7) and the footer is rgb(6,21,13). Three points of luminance apart with no border between them, so on the page they fused into one undifferentiated black slab about 1400px tall and the footer stopped reading as a separate thing. The fix is a deliberate edge rather than a bigger colour gap, because the two SHOULD be close — they are both the dark end of the palette. So: a green-to- amber accent rule across the top, a hairline under it, and real space above the content. The seam becomes intentional. ========================================================================== */ .site-footer { position: relative; /* one step lighter than the deepest band, so there is a readable step even before the rule is drawn */ background: var(--forest-800); border-top: 1px solid var(--band-border); padding-top: var(--s-12); } /* the accent rule. Sits on the boundary, not inside the footer. */ .site-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--forest-500) 0%, var(--sprout-500) 34%, var(--harvest-500) 68%, var(--iron-500) 100% ); opacity: .9; } /* a soft lift just under the rule, so the edge has depth rather than being a flat line drawn on a flat field */ .site-footer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 140px; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, .045), transparent); } .site-footer > * { position: relative; z-index: 1; } /* the last band before the footer gets its bottom padding back, so the two are not touching in the first place */ main > .band:last-child, main > .section.band:last-child { padding-bottom: var(--s-12); } /* the same treatment where a dark band meets the light page below it */ .band + .section { position: relative; } /* ==================================================================== 5. section rhythm Alternating sections were all sitting on the same field, so the page read as one long scroll with headings in it. Every other light section now picks up a very slightly different surface, which is enough to separate them without introducing another colour. THIS RULE SHIPPED THE §7 BUG A SIXTH TIME. It was authored against the raw `--bone-2`, and raw palette tokens do not flip with the theme — so in dark mode it painted a 55% CREAM wash across every even section and the middle of every dark page rendered as a grey-olive smear from roughly the second section to the footer. `--rhythm` is semantic and defined per theme: the cream in light, a 3% white lift in dark. If you ever need another wash like this, add a semantic token. Never reach for a `--bone-*`, `--loam-*` or any other raw name here. */ .section:nth-of-type(even):not(.band):not(.mach-band) { background: linear-gradient(180deg, transparent, var(--rhythm) 18%, var(--rhythm) 82%, transparent); } /* ==================================================================== 6. footer, tightened Measured problems: 128px of top padding on a 544px footer, a 402px brand column against 201px link columns (so the blurb had a wide empty margin while the links were cramped), and a background at rgb(10,33,20) that reads olive rather than forest. The orange "Open the catalogue" button was also the single most saturated thing on the page, sitting in the quietest part of it. ========================================================================== */ .site-footer { /* a deeper, bluer green. The olive came from forest-800 sitting next to the warm background field; this sits under it properly. */ background: #071A10; padding-top: var(--s-10); padding-bottom: var(--s-6); } /* brand column narrower, link columns given room to breathe */ @media (min-width: 780px) { .foot-grid { grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: var(--s-7) var(--s-6); } } @media (min-width: 1060px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-8) var(--s-8); } } .foot-blurb { margin: var(--s-4) 0 var(--s-5); max-width: 38ch; font-size: var(--t-sm); line-height: 1.6; } /* the catalogue button was shouting. Outlined, so it reads as an invitation rather than the loudest element in the quietest section. */ .foot-brand .btn-accent { background: transparent; border: 1px solid var(--band-border); color: var(--band-fg); box-shadow: none; } .foot-brand .btn-accent:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .foot-col h4 { margin-bottom: var(--s-3); } .foot-col ul { gap: var(--s-1); } .foot-col a { min-height: 32px; font-size: var(--t-sm); } .foot-line { margin-top: var(--s-8); padding-top: var(--s-5); } /* ==================================================================== 7. glass The card layer is translucent, so the gradient field in section 1 reads THROUGH the components instead of being covered by 85 opaque rectangles. That is the whole point: an opaque card grid on a gradient means you only ever see the gradient in the gutters. Deliberately NOT full glassmorphism: * The lift is a background-image highlight along the top edge, not a box-shadow. Several of these components already set box-shadow on a state (`.plan.is-pick`, `.pcard:hover`), and an inset shadow here would be silently dropped by those rules. * `backdrop-filter` is used almost nowhere. Blur only does visible work when there is detail behind the element, and behind these there is a smooth fixed gradient — so it would cost a compositor layer per card on a page that renders 85 of them, and buy nothing. It is applied only to the two sticky summaries, which genuinely do scroll over content. Opaque on purpose, do not add these: the drawers and the cart panel (they sit over the page and must occlude it), `.mach-band .spec-card` (supplier flyer artwork is white to the edge and needs a solid white tile), and `.pcard-media.is-contain` for the same reason. ========================================================================== */ .pcard, .spec-card, .cat-card, .fact, .plan, .cred, .usp-item, .reach-item, .crate, .seq-aside, .season-cell, .season-pill, .variant-opt, .guarantee-item, .pdp-fact, .summary, .order-summary { background-color: var(--glass); background-image: linear-gradient(180deg, var(--glass-line) 0%, transparent 38%); border-color: var(--glass-border); } /* the two that scroll over real content get the blur as well */ .summary, .order-summary { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* Hover raises the glass rather than only lifting the box: the surface goes more opaque and the top highlight strengthens, which reads as the card coming toward the light. */ .pcard:hover, .spec-card:hover, .plan:hover, .reach-item:hover, .season-pill:hover { background-color: var(--glass-2); } /* On a dark band the card layer would otherwise pick up the light theme's white highlight, so both are re-stated against the band's own palette. */ .on-band .fact, .on-band .seller-perk, .on-band .lineage { background-color: rgba(255, 255, 255, .04); background-image: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, transparent 40%); border-color: var(--band-border); } @media (max-width: 779px) { .site-footer { padding-top: var(--s-9); } .foot-grid { gap: var(--s-7); } .foot-blurb { max-width: none; } }