/* ============================================================ AgroLoaf Ghana — Nova Terra Palette: Skin Tone Bridal (warm peach ground, deep wine accent carries both the CTA and the numbers/eyebrows — one neutral ink color instead of a separate loud accent). ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Kill the blue/grey tap flash mobile browsers paint over links, buttons, photos and text on touch (client request). */ * { -webkit-tap-highlight-color: transparent; } /* Self-hosted Bebas Neue (preloaded in each page's ). font-display: block means the browser shows NOTHING until the font is ready rather than flashing the bolder/wider Impact fallback and then snapping to Bebas — which is exactly the "AgroLoaf grows, goes bold, then shrinks" the header was doing. With the font preloaded and same-origin (~14KB) the block period is a blink. */ @font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/bebasneue-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/bebasneue-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Display face: Fraunces, loaded from Google at weight 600 only (see the in ) — same trick the previous Cormorant self-host used: with no 400 face registered, every heading's "font-weight: 400" rule still resolves to the one loaded (SemiBold) face instead of going thin. opsz is requested as a range (9..144) so the variable font auto-selects a heavier/more "displayy" optical size at the large heading font-sizes and a lighter cut at small ones (font-optical-sizing: auto, on by default). */ /* Metric-matched fallback kept only as a safety if the block period times out (~3s): local Impact scaled to ~85% so its width nearly matches Bebas. */ @font-face { font-family: "Bebas Fallback"; src: local("Impact"), local("Haettenschweiler"), local("Arial Narrow Bold"); size-adjust: 85%; ascent-override: 100%; descent-override: 0%; line-gap-override: 0%; } /* Metric-matched fallback for DM Mono (used by the nav + body). Local monospace is ~6% narrower than DM Mono (nav row measured 623px vs 661px), so the nav visibly widened and shifted when DM Mono swapped in — the "header text jerks" between pages, replaying on every navigation because the dev server sends no font cache headers. size-adjust:106% pre-widens the fallback to DM Mono's width, so the swap no longer changes layout. */ @font-face { font-family: "DM Mono Fallback"; src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono"), local("Courier New"); size-adjust: 108.5%; } :root { --bg: #fbe9db; --bg-2: #f5dcc0; --fg: #3a0e18; --muted: #6b5245; --gold: #741a2f; --gold-bg: rgba(116, 26, 47, 0.12); --teal: #741a2f; --teal-dim: #5c1524; --terracotta: #8a3d1a; --line: rgba(58, 14, 24, 0.14); --card: rgba(255, 255, 255, 0.55); /* Client's pick from font-test.html (pair 11): Fraunces for display, Work Sans for body copy (was Cormorant Garamond + Karla). --font-mono keeps its name — it is referenced ~50 times as "the body face", it is just no longer mono (hasn't been since the Bebas/DM Mono era). */ --font-display: "Fraunces", Georgia, serif; --font-mono: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --pad: 6vw; } html { color-scheme: light; scroll-behavior: auto; /* Font boosting off. Without this, pinch-zooming makes Chrome/Safari inflate the text of whatever block it thinks is the main content — so one pinch zooms again on its own and the layout jumps (client hit it on the open blog books). Pinch-zoom itself stays available. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Always reserve the scrollbar's width, even on short pages that don't need to scroll. Otherwise navigating from a tall page (with a 15px scrollbar) to a short one (no scrollbar) shifts the whole centred layout sideways by 15px — the "screen jump" between tabs. */ scrollbar-gutter: stable; } /* ============================================================ Brand splash / preloader — cream ground, wine mark + fill bar. JS (inline in index.html) drops #preloader after ~2s or window.load, whichever is later; the fade is the .is-hidden transition here. */ #preloader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: var(--bg); transition: opacity 0.7s ease, visibility 0.7s ease; } #preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } #preloader .pre-mark { width: clamp(110px, 22vw, 150px); height: auto; animation: prePulse 1.6s ease-in-out infinite; } #preloader .pre-bar { width: 180px; height: 3px; border-radius: 3px; background: var(--gold-bg); overflow: hidden; } #preloader .pre-bar span { display: block; height: 100%; border-radius: 3px; background: var(--gold); transform-origin: left center; transform: scaleX(0); animation: preFill 2s ease-out forwards; } @keyframes prePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.82; } } @keyframes preFill { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { #preloader .pre-mark { animation: none; } #preloader .pre-bar span { animation: none; transform: scaleX(1); } } body { background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-weight: 400; line-height: 1.65; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Hide until GSAP has measured — prevents a flash of unstyled scroll */ .stage { visibility: hidden; } h1, h2, h3, .fact__num, .brand__txt { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; line-height: 1.02; } h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 1.2rem; } h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); } .eyebrow, .section-eyebrow { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } /* ============ HEADER ============ */ .site-head { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.8rem var(--pad); z-index: 100; background: rgba(251, 233, 219, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: padding 0.4s ease; } .site-head.is-stuck { padding-block: 0.55rem; } .brand { display: flex; align-items: center; gap: 0.7rem; } .brand__mark { width: 46px; height: 46px; object-fit: contain; } .brand__txt { font-size: 1.35rem; letter-spacing: 0.06em; } .brand__txt em { color: var(--gold); font-style: normal; margin-left: 0.35em; } .site-nav { display: flex; align-items: center; gap: 1.4rem; } .site-nav a { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; position: relative; padding-block: 0.3rem; color: rgba(58, 14, 24, 0.88); transition: color 0.3s ease; } .site-nav a:hover { color: var(--fg); } .site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; } .nav-cta { border: 1px solid var(--teal); background: var(--teal); color: var(--bg) !important; padding: 0.55rem 1.2rem !important; border-radius: 2px; transition: background 0.35s ease, color 0.35s ease, opacity 0.35s ease; } .nav-cta:hover { opacity: 0.85; } /* ============ HERO PHOTO LAYER ============ Painted BEFORE #scene in the DOM at the same z-index tier, so the paint order is: photo → cube → #smooth-content. The transparent hero shows the photo with the cube on top; the opaque Certs section (z-2) slides up OVER both — the cube tucks behind its edge exactly like the original design. The photo itself never fades: the inner layer is translated up in lockstep with the hero scrolling out (see main.js), so its bottom edge tracks the hero/Certs boundary and it exits the way any in-flow section background would — gone before the transparent About arrives. The wrapper starts below the header line, clipping the moving photo so it never slides up behind the translucent blurred header. */ #hero-photo { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; } #hero-photo-img { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12,9,6,0.92) 0%, rgba(12,9,6,0.82) 40%, rgba(12,9,6,0.55) 65%, rgba(12,9,6,0.25) 100%), url('../img/hero-bg.webp?v=79') center 38% / cover no-repeat; will-change: transform; } /* ============ CUBE SCENE ============ */ #scene { position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 9vw; /* Origin tracks where the cube actually sits. Left at centre, the cube is viewed off-axis and its projection balloons past the right edge. */ perspective: 1500px; perspective-origin: 74% 50%; pointer-events: none; } #cube { --s: min(28vw, 48vh, 300px); width: var(--s); height: var(--s); position: relative; top: -61px; left: 0px; transform-style: preserve-3d; transform: rotateX(90deg) rotateY(0deg); will-change: transform; } .face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: #1f0d10; border: 1px solid rgba(116, 26, 47, 0.35); box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5); } .face img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) contrast(1.03) brightness(0.92); } .face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(116,26,47,0.14), rgba(31,13,16,0.45)); } /* About cube only — wheat-ear frame stamped on top of the face photo, same wine tone as the rest of the badges. Not on the small hero cube. Source photos (milling floor, lab, etc.) run cool/grey and read as flat and out of place against the site's warm peach/wine palette, so a stronger wine wash unifies them into one warm object; the photo layer itself gets a matching sepia+saturate push (below) rather than staying neutral. */ /* Wash kept deliberately light: the faces are now portraits of the team in branded uniform, and the client wants faces and shirt logos legible. Wheat-ear frame removed on the client's request (2026-07-26) — the sprigs sat over the portraits' edges; only the light wine wash is left. */ #about-cube .face::after { background: linear-gradient(160deg, rgba(140,50,30,0.08), rgba(58,14,24,0.18)); } #about-cube .face img { filter: sepia(0.08) saturate(1.06) hue-rotate(-3deg) contrast(1.02); } /* Stop 05 (left face) is a merch flatlay, not a photograph — its grey half runs cooler and brighter than the portraits either side of it, so this one face carries a slightly deeper warm wash to sit in the same light. */ #about-cube .face[data-face="left"] img { filter: sepia(0.24) saturate(1.04) hue-rotate(-6deg) contrast(1.02) brightness(0.95); } #about-cube .face[data-face="left"]::after { background: linear-gradient(160deg, rgba(150,60,32,0.14), rgba(58,14,24,0.26)); } #about-cube .face { box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.18); } .face[data-face="front"] { transform: translateZ(calc(var(--s) / 2)); } .face[data-face="back"] { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .face[data-face="right"] { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .face[data-face="left"] { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .face[data-face="top"] { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } .face[data-face="bottom"] { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } /* ============ HERO ============ */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; /* Top padding clears the fixed header (72px) — without it, vertically centered copy could render its first line (the eyebrow) underneath the translucent header on shorter viewports. */ padding: 72px var(--pad) 0; position: relative; } .hero__copy { max-width: 620px; position: relative; z-index: 2; } /* Photo backdrop reads dark under the copy column, so the hero overrides the page's default dark-ink palette with a light one scoped to this section — the rest of the site (light ground) keeps the original dark-on-cream. */ .hero .eyebrow { color: var(--bg); opacity: 0.85; } .hero__title { /* Sized to break into 2 lines, not 4 — 4 lines overflow the 100vh hero and push the copy out of centre. */ font-size: clamp(3rem, 6vw, 5.6rem); margin-bottom: 1.4rem; overflow: hidden; color: var(--bg); } .hero-line { overflow: hidden; } .hero__txt { max-width: 44ch; color: rgba(251,233,219,0.82); margin-bottom: 2.2rem; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .btn-gold, .btn-ghost { display: inline-block; padding: 0.9rem 1.8rem; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), background 0.35s ease, color 0.35s ease; } .btn-gold { background: var(--teal); color: var(--bg); font-weight: 500; } .btn-gold:hover { transform: translateY(-3px); background: var(--teal-dim); } .btn-ghost { border: 1px solid var(--line); color: var(--fg); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-3px); } .hero .btn-ghost { border-color: rgba(251,233,219,0.55); color: var(--bg); } .hero .btn-ghost:hover { border-color: var(--bg); color: var(--bg); background: rgba(251,233,219,0.12); } .hero__specs { list-style: none; display: flex; gap: 3.5rem; margin-top: 3rem; position: relative; z-index: 2; } .hero__specs li { display: flex; flex-direction: column; } .hero__specs b { font-family: var(--font-display); font-size: 2.4rem; color: #e2a479; line-height: 1; } .hero__specs span { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(251,233,219,0.68); margin-top: 0.4rem; } /* ============ CERTS ============ */ .certs { padding: 8vh var(--pad); border-top: 1px solid var(--line); text-align: center; position: relative; z-index: 2; background: var(--bg); } /* Five seals, standing still (client, 2026-07-26). The old marquee (six duplicated sets sliding left behind an edge mask) is gone: at this count there is nothing to scroll, and a moving row made them harder to read, not easier. No overflow/mask here any more — the row simply centres. */ .certs__viewport { margin-top: 3rem; } .certs__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(2.5rem, 6vw, 5.5rem); } /* Bigger and heavier than the marquee version — the client wanted them noticeable. The source art is 600x600 with alpha, so it stays crisp even at 150px on a 2x screen. */ .cert { display: flex; flex-direction: column; align-items: center; gap: 1rem; flex: 0 0 auto; } .cert img { width: clamp(112px, 10.5vw, 150px); height: auto; object-fit: contain; transition: transform 0.4s ease; } .cert:hover img { transform: translateY(-5px); } .cert figcaption { font-size: 1.02rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.25; } .cert small { color: var(--muted); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: none; } /* ============ ABOUT ============ */ /* ============ ABOUT CUBE SCENE (fixed backdrop) ============ */ #about-scene { position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* Looping backdrop video behind the cube, whole About section. Vignette overlay fades it to --bg at the edges so it reads as a glow behind the cube, not a full-bleed video fighting the translucent stop cards. Plays continuously, not tied to scroll AND not tied to the cube's own grow-in — it has its own simple opacity toggle (see initAboutCube in main.js) so the video is already playing by the time the cube appears. */ .about-bg { position: absolute; inset: 0; overflow: hidden; opacity: 0; } .about-bg video { width: 100%; height: 100%; object-fit: cover; } .about-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 60% at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, var(--bg) 100%); } /* Wrapper carries the perspective + the grow-in scale/opacity tween; #about-cube itself keeps getting its rotation written directly (see setAboutCubeTransform), so the two transforms never fight over the same element's inline style. */ #about-cube-wrap { perspective: 1800px; opacity: 0; } #about-cube { --s: min(48vw, 62vh, 640px); width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(90deg) rotateY(0deg); will-change: transform; } /* ============ ABOUT (cube gallery) ============ */ .about { position: relative; z-index: 2; background: transparent; } .about-track { position: relative; } /* Illustrated-wheat-corner photo behind every stop (was a plain translucent var(--card) panel). A radial scrim (transparent at the corners, opaque toward the centre) keeps the wheat art crisp at the edges while still giving the text a clean, legible patch behind it. */ .about-stop { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 480px; padding: 6vh var(--pad); background: radial-gradient(ellipse at center, rgba(251,233,219,0.82) 0%, rgba(251,233,219,0.3) 55%, transparent 78%), url('../img/about-stop-04-bg.webp?v=115') center / cover no-repeat; border-left: 1px solid var(--line); backdrop-filter: blur(10px); } .about-stop--right { margin-left: auto; border-left: none; border-right: 1px solid var(--line); text-align: right; } .about-stop--right .link-arrow { justify-content: flex-end; margin-left: auto; } .about-stop p { color: rgba(58,14,24,0.82); margin-bottom: 1rem; } .about-stop b { color: var(--fg); font-weight: 500; } .about-stop h2, .about-stop h3 { margin-bottom: 1rem; } .about-stop__num { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.1em; color: var(--gold); opacity: 0.75; margin-bottom: 0.6rem; } .about-stop__pull { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.08; color: var(--fg) !important; margin-bottom: 1.6rem !important; } .about-stop--last { align-items: flex-end; gap: 0.4rem; /* Narrower side padding than the other stops: the closing quote is set in display type and breaks by hand (see the
s in index.html), and its longest line — "of everything we do." — needs ~410px at the top clamp. With the shared var(--pad) the text box was only 249-325px, so that line always split in two (client: "'of everything we do.' must be one line"). */ padding-inline: 32px; } .link-arrow { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); } .link-arrow__line { width: 38px; height: 1px; background: var(--teal); transition: width 0.4s cubic-bezier(0.22,1,0.36,1); } .link-arrow:hover .link-arrow__line { width: 60px; } /* ============ FACTS ============ */ .facts { position: relative; z-index: 2; background: var(--bg-2); border-block: 1px solid var(--line); padding: 8vh var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .fact { text-align: center; } .fact__num { display: block; font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--gold); } .fact__label { display: block; margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; } .fact__label small { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: none; } /* ============ PROCESS ============ */ /* Facility photo backdrop, same dark-photo/light-text treatment as the hero — the section's own dark ink palette doesn't read on a photo, so colors are overridden scoped to .process only. */ .process { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(15,8,7,0.72) 0%, rgba(15,8,7,0.58) 45%, rgba(15,8,7,0.78) 100%), url('../img/bakery-hands.webp?v=89') center / cover no-repeat; padding: 12vh var(--pad); } .process__head { margin-bottom: 6vh; max-width: 22ch; } .process .section-eyebrow { color: var(--bg); opacity: 0.85; } .process__head h2 { color: var(--bg); } .arch { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding-block: 6vh; border-top: 1px solid rgba(251,233,219,0.16); } .arch:nth-child(even) .arch__info { order: 2; } /* Bread-slice outline behind the text — a stretched background-image (like the About cube's wheat frame), so the whole block reads as a crumb-tinted slice of bread. Crust wiggle is compressed into the top ~17.5% of the shape (img/bread-outline.svg) and padding-top clears it with real margin to spare, so both the heading and paragraph land fully inside the body, not straddling the crust line. Max-width keeps the proportions bread-shaped instead of stretching wide and flat. */ .arch__info { position: relative; max-width: 380px; padding: 6.5rem 1.8rem 2.4rem; } .arch__info::before { content: ""; position: absolute; inset: 0; background: url('../img/bread-outline.svg') center / 100% 100% no-repeat; pointer-events: none; z-index: -1; } .arch__info h3 { margin-bottom: 0.9rem; color: var(--bg); } .arch__info p { color: rgba(251,233,219,0.78); max-width: 44ch; } /* Certification card sitting at the foot of an arch — a real cream panel, inset from the frame with a soft shadow so it reads as a designed badge rather than type dropped onto the photo. Rendered as markup (not baked into the image) so it stays sharp and ignores the img's parallax. */ .cert-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.8rem; padding: 0.72rem 1.2rem; background: var(--bg); border-top: 1px solid rgba(116, 26, 47, 0.2); border-radius: 0; box-shadow: 0 12px 28px rgba(20, 8, 10, 0.4); pointer-events: none; z-index: 1; } .cert-bar__shield { width: 30px; height: 35px; flex-shrink: 0; } .cert-bar__shield path { fill: var(--teal); } .cert-bar__tick { fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .cert-bar__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; } .cert-bar__txt b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.02rem, 1.35vw, 1.24rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg); } /* Registration number as a wine chip — the one detail that makes it read as an official mark instead of a caption. */ .cert-bar__txt span { margin-top: 0.3rem; background: var(--teal); color: var(--bg); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.07em; padding: 0.17rem 0.45rem; border-radius: 4px; } .arch__img { overflow: hidden; border-radius: 200px 200px 4px 4px; /* the arch */ height: 62vh; position: relative; } .arch__img img { width: 100%; height: 118%; object-fit: cover; position: absolute; top: -9%; left: 0; /* Light touch only — a heavy sepia/darkening pass was muddying the photos and hiding detail the client wants legible (bag text, FDA badge). */ filter: sepia(0.1) saturate(1.08) hue-rotate(-4deg) contrast(1.02); } /* Warm wine/terracotta color-grade wash so the four source photos (cool mill/lab shots) read as one family with the rest of the page, same technique as the about-cube tinting. */ .arch__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(140,50,30,0.05) 0%, rgba(58,14,24,0.14) 100%); pointer-events: none; } /* ============ PRODUCTS (3D book) ============ */ /* Bakery-floor photo backdrop, same dark-photo/light-text treatment as Process/Hero — the tilt-cards already carry their own dark gradient + light text, so only .products__head needs its colors overridden here. */ .products { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(15,8,7,0.74) 0%, rgba(15,8,7,0.6) 45%, rgba(15,8,7,0.8) 100%), url('../img/products-bg.webp?v=90') center / cover no-repeat; border-block: 1px solid var(--line); padding: 12vh var(--pad); text-align: center; overflow: hidden; } .products__head { max-width: 52ch; margin: 0 auto 7vh; } .products__icon { width: 62px; height: auto; margin: 0 auto 1.2rem; } .products__head .section-eyebrow { color: var(--bg); opacity: 0.85; } .products__head h2 { color: var(--bg); } .products__sub { color: rgba(251,233,219,0.78); } .book { display: flex; justify-content: center; gap: 2.6rem; flex-wrap: wrap; } /* 3D hover-tilt cards (ref: хлеб\3д карточки круто!\prototype.html). Each card is its own 3D viewport (perspective on the card). The mouse drives --rotateX/--rotateY (see js/main.js initTiltCards, rAF-lerped), and four layers sit at different translateZ so they parallax as one object: blurred shadow behind, the photo, a raised "cutout" copy that pops over the frame, the frame border, and the caption on top. Bread photos are opaque (no alpha), so the cutout mask shows the full frame — the pop still reads from the raised Z, not an actual knockout. */ .tilt-card { --rotateX: 0deg; --rotateY: 0deg; position: relative; width: 285px; aspect-ratio: 5 / 7; color: #fff; perspective: 50rem; cursor: pointer; } .tilt-card__shadow { position: absolute; inset: 0; background: var(--url) center / cover no-repeat; opacity: 0.8; filter: blur(2rem) saturate(0.9); box-shadow: 0 -1.5rem 2rem -0.5rem rgba(0, 0, 0, 0.7); transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 2rem, -2rem); } .tilt-card__img { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,9,6,0.55), transparent 42%), var(--url) center / cover no-repeat; -webkit-mask-image: var(--url); mask-image: var(--url); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; } .tilt-card__img--bg { transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 0); } .tilt-card__img--cutout { transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 4rem) scale(0.92); z-index: 3; } .tilt-card__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.8rem; text-align: left; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 6rem); z-index: 4; } .tilt-card__content h3 { font-size: 1.3rem; margin-bottom: 0.2rem; color: #f7ecdd; text-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.55); } .tilt-card__content p { font-size: 0.74rem; color: rgba(247,236,221,0.85); text-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.55); } /* Two frames: ::after behind the cutout, ::before in front — so a side of the border can be "behind" the photo pop (border-*-behind kills that edge on the front frame, leaving only the back one). */ .tilt-card::after, .tilt-card::before { content: ""; position: absolute; inset: 1.3rem; border: 0.45rem solid var(--gold); transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 2rem); pointer-events: none; } .tilt-card::before { z-index: 4; } .tilt-card.border-left-behind::before { border-left-color: transparent; } .tilt-card.border-right-behind::before { border-right-color: transparent; } .tilt-card.border-bottom-behind::before { border-bottom-color: transparent; } /* ============ PRODUCT / SPEC ============ */ .product { position: relative; z-index: 2; background: var(--bg); padding: 12vh var(--pad); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 5vw; align-items: center; } .product__media { position: relative; } .product__media img { width: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7)); } .product__stock { position: absolute; top: 1rem; left: 1rem; background: var(--terracotta); color: var(--bg); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 2px; font-weight: 500; } .product__lead { color: rgba(58,14,24,0.82); margin-bottom: 2.5rem; max-width: 48ch; } /* Standalone page variant — no hero above it, so it needs its own top clearance, and its heading is an h1 (only h2 gets a clamp() size elsewhere in the sheet). */ .product--page { padding-top: 16vh; align-items: start; background: none; } /* Blurred-bakery + gold-wheat-corners backdrop (img/product-bg.webp). Lighter gradient than a first pass (which milked the photo down to a near-invisible wash) — Jeka's call: keep the backdrop legible, drop the card backings under the feature items instead of hiding the photo. */ .product--page::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(251,233,219,0.5) 0%, rgba(251,233,219,0.36) 45%, rgba(251,233,219,0.6) 100%), url('../img/product-bg.webp?v=178') center / cover no-repeat; } .product--page > * { position: relative; z-index: 1; } /* 3D hover-tilt on the product photo — faithful port of хлеб\3д карточки круто!\prototype.html (shadow / flat image / raised masked "cutout" / border frame), mouse-driven --rotateX/--rotateY via js/product.js initProductTilt, 60fps lerp. Sized to fill the media column at the bag photo's own aspect ratio (890/676). Classes are scoped under .product__media so the generic layer names can't collide elsewhere. */ .product__media .ptilt { --rotateX: 0deg; --rotateY: 0deg; /* url() in a custom property resolves relative to THIS stylesheet (css/), hence ../img — a path set inline on the HTML element would resolve against css/ too and 404, so it lives here where there's one fixed product photo anyway. */ --url: url('../img/finsihed.webp'); position: relative; width: 100%; aspect-ratio: 890 / 676; color: #fff; perspective: 50rem; } .product__media .ptilt__shadow { position: absolute; inset: 0; background: var(--url) center / cover no-repeat; opacity: 0.8; filter: blur(2rem) saturate(0.9); box-shadow: 0 -1.5rem 2rem -0.5rem rgba(0, 0, 0, 0.7); transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 2rem, -2rem); } .product__media .ptilt__img { position: absolute; inset: 0; /* Flat warm wash on top of the studio photo — the bag was shot on neutral grey, which read as a cold, disconnected patch against the page's peach/wine palette; this ties it into the same tone without hiding the packaging print underneath. */ background: linear-gradient(rgba(138,61,26,0.26), rgba(138,61,26,0.26)), linear-gradient(to top, rgba(0,0,0,0.5), transparent 40%), var(--url); background-size: cover; background-position: center; -webkit-mask-image: var(--url); mask-image: var(--url); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; } .product__media .ptilt__img--bg { transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 0); } .product__media .ptilt__img--cutout { transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 4rem) scale(0.92); z-index: 3; } .product__media .ptilt::after, .product__media .ptilt::before { content: ""; position: absolute; inset: 1.5rem; border: var(--gold) 0.5rem solid; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 2rem); } .product__media .ptilt::before { z-index: 4; } .product__media .ptilt.border-left-behind::before { border-left-color: transparent; } .product__media .ptilt.border-right-behind::before { border-right-color: transparent; } .product__media .ptilt.border-bottom-behind::before { border-bottom-color: transparent; } .product--page .product__copy h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 1.2rem; } .product__cta { display: inline-block; margin-top: 2.2rem; } .spec details { border-top: 1px solid var(--line); padding-block: 0.2rem; } .spec details:last-child { border-bottom: 1px solid var(--line); } .spec summary { list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative; font-size: 0.95rem; letter-spacing: 0.06em; transition: color 0.3s ease; } .spec summary::-webkit-details-marker { display: none; } .spec summary:hover { color: var(--gold); } .spec summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 11px; height: 11px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: translateY(-60%) rotate(45deg); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } .spec details[open] summary::after { transform: translateY(-30%) rotate(225deg); } .spec__body { padding: 0 0 1.4rem; color: rgba(58,14,24,0.8); } .spec__body b { color: var(--gold); font-weight: 500; } .nutri { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .nutri th, .nutri td { text-align: left; padding: 0.5rem 0.8rem 0.5rem 0; } .nutri th { color: var(--muted); font-weight: 500; } .nutri td { color: var(--fg); } .nutri-note { font-size: 0.85rem; color: rgba(58,14,24,0.8); margin-top: 0.9rem; } .nutri-note b { color: var(--gold); font-weight: 500; } .uses { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .uses li { position: relative; padding-left: 1.2rem; } .uses li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; } .uses--detailed { display: block; } .uses--detailed li { padding-left: 1.3rem; margin-bottom: 1.1rem; color: rgba(58,14,24,0.82); } .uses--detailed li:last-child { margin-bottom: 0; } .uses--detailed li b { color: var(--fg); font-weight: 500; } /* Product page — rating line, in-stock line, the 4 feature-icon cards, and the Description/Content/Uses tabs (replaced the earlier

accordion so the page matches the live agroloafghana.com structure). */ .product__rating { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; } .product__stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.1em; } .product__reviews { color: var(--muted); font-size: 0.85rem; } .product__instock { display: flex; align-items: center; gap: 0.5rem; color: var(--gold); font-weight: 500; font-size: 0.9rem; margin-bottom: 2.2rem; } .product__instock svg { width: 14px; height: 14px; flex: none; } .product-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.8rem; margin-bottom: 2.6rem; } /* No card backing — a premium look wants fewer boxes, more air. Items sit directly on the section backdrop, separated by a hairline instead (the last row's line is dropped so the grid doesn't dead-end on a rule). */ .product-features__item { display: flex; align-items: flex-start; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(116,26,47,0.16); } .product-features__item:nth-last-child(-n+2) { border-bottom: none; } /* Dark slate + carved-wood medallion (img/slate-*2.webp — folder 6, round 2: replaced the first glossy 3D-render badges, which read as game icons against this palette). Thin wine ring keeps the circle's edge crisp against a backdrop that's often similarly dark-toned. background-image lives in per-name modifiers below — a url() in an inline style attribute resolves against css/ and 404s, so paths stay in this stylesheet with ../img. */ .product-features__icon { width: 96px; height: 96px; flex: none; border-radius: 50%; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: inset 0 0 0 2px rgba(116,26,47,0.3), 0 6px 16px rgba(58,14,24,0.2); } .product-features__icon--wheat { background-image: url('../img/slate-wheat2.webp?v=1'); } .product-features__icon--protein { background-image: url('../img/slate-protein2.webp?v=1'); } .product-features__icon--bromate { background-image: url('../img/slate-bromate2.webp?v=1'); } .product-features__icon--fortified { background-image: url('../img/slate-fortified2.webp?v=1'); } .product-features__item h4 { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--fg); margin-bottom: 0.2rem; } /* --muted (#6b5245) was too light against the photo backdrop behind this section — washed out next to the bold h4 above it. Same dark-wine-at- opacity treatment already used for other secondary text over this backdrop (.product__lead, tab panel body copy). */ .product-features__item p { color: rgba(58,14,24,0.92); font-size: 0.82rem; font-weight: 500; } .product-tabs__nav { display: flex; gap: 2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; } .product-tabs__nav button { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; font-weight: 500; color: rgba(58,14,24,0.65); background: none; border: none; cursor: pointer; padding: 0 0 0.9rem; position: relative; } .product-tabs__nav button.is-active { color: var(--gold); } .product-tabs__nav button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); } /* All 3 panels stack in the SAME grid cell (grid-area) instead of the inactive ones being display:none — so the container's height is always the tallest panel's height, constant across all 3 tabs. Without this, switching to a taller/shorter panel changed .product--page's own height, and since its ::before backdrop photo is background-size:cover sized to that box, the photo visibly re-cropped/jumped on every click — looked like the whole background was reloading. */ .product-tabs__panels { display: grid; } .product-tabs__panel { grid-area: 1 / 1; visibility: hidden; pointer-events: none; color: rgba(58,14,24,0.85); } .product-tabs__panel.is-active { visibility: visible; pointer-events: auto; } .product-tabs__panel h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--fg); margin-bottom: 1rem; } .product-tabs__panel p { margin-bottom: 1rem; max-width: 60ch; } .product-tabs__panel b { color: var(--gold); font-weight: 500; } .product-spec-list { margin-bottom: 2rem; } .product-spec-list__row { padding: 0.9rem 0; border-top: 1px solid var(--line); } .product-spec-list__row:last-child { border-bottom: 1px solid var(--line); } .product-spec-list__row dt { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; } .product-spec-list__row dd { color: rgba(58,14,24,0.85); } .product-spec-list__row dd b { color: var(--gold); font-weight: 500; } /* ============ BG STRIP ============ Delivery + Blog + the footer's "Let's talk" CTA share ONE continuous background photo instead of three independently-cropped copies: the image is painted once on this wrapper (height = the three sections' combined height in normal flow) via ::before, so each section shows a different vertical slice of the same photo, like a single backdrop running behind all three. */ .bg-strip { position: relative; } .bg-strip::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(40,18,12,0.3) 0%, rgba(40,18,12,0.42) 50%, rgba(40,18,12,0.55) 100%), url('../img/strip-bg.webp?v=115') center / cover no-repeat; } .bg-strip > * { position: relative; z-index: 1; } /* ============ DELIVERY ============ */ .delivery { border-block: 1px solid var(--line); padding: 12vh var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; } .delivery__copy p { color: rgba(58,14,24,0.82); } .delivery__copy b { color: var(--gold); font-weight: 500; } .delivery__nodes { list-style: none; margin-top: 2.5rem; display: grid; gap: 1.4rem; } .delivery__nodes li { border-left: 2px solid var(--gold); padding-left: 1.2rem; } .delivery__nodes b { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--fg); } .delivery__nodes span { font-size: 0.85rem; color: rgba(58,14,24,0.82); } .delivery__map { position: relative; } .route { width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .route__grid-dot { fill: rgba(58,14,24,0.14); } .route__compass { fill: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; } .route__bg { stroke: rgba(58,14,24,0.16); } .route__line { stroke: var(--teal); } .route__pin circle { fill: var(--bg); stroke: var(--teal); stroke-width: 2; transform-box: fill-box; transform-origin: center; } .route__pin--mid circle { stroke-width: 1.6; } .route__pin text { fill: var(--fg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; } .route__pin--mid text { font-size: 9px; } /* Delivery truck — travels along .route__line in step with the scroll scrub (see initMap in main.js). Top-down silhouette (see markup comment) so rotate() stays legible across this route's ~150deg sweep. Pivots near the front (local origin sits at the cab divider), which reads more naturally than pivoting on the geometric center. */ .route__truck rect { fill: var(--bg); stroke: var(--teal); stroke-width: 1.6; stroke-linejoin: round; } .route__truck line { stroke: var(--teal); stroke-width: 1; } .route__truck rect.route__truck-wheel { fill: var(--teal); stroke: none; } .map-expand { position: absolute; bottom: 1rem; right: 1rem; z-index: 3; display: flex; align-items: center; gap: 0.55rem; background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 0.55rem 0.9rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); cursor: pointer; backdrop-filter: blur(6px); transition: border-color 0.3s ease, color 0.3s ease; } .map-expand svg { width: 12px; height: 12px; fill: currentColor; } .map-expand:hover { border-color: var(--teal); color: var(--teal); } .map-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 6vh 5vw; background: rgba(58, 14, 24, 0.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; } .map-modal.is-open { pointer-events: auto; } .map-modal__slot { position: relative; width: min(100%, 920px); aspect-ratio: 4 / 3; } .map-modal__slot .route { width: 100%; height: 100%; border-radius: 6px; } .map-close { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 301; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.3s ease; } .map-close svg { width: 15px; height: 15px; fill: var(--fg); } .map-close:hover { border-color: var(--teal); } /* ============ PARTNER ============ */ .partner { position: relative; z-index: 2; background: var(--bg); padding: 12vh var(--pad); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 5vw; align-items: start; } .partner__copy p { color: rgba(58,14,24,0.82); } .partner__perk { margin-top: 1.4rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold) !important; } /* minmax(0, 1fr), not a bare implicit track: an auto-sized grid track takes the min-content of its widest item as a hard floor, and this form contains a 320px-wide SVG button. That floor made the single column 320px wide inside a 281px form, so every field overhung it and partner.html scrolled 20px sideways below ~360px. minmax(0,...) removes the floor. */ .form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } .form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; } /* A grid item's automatic minimum size is its content's min-content width, and an /