/* ============================================================ NUTOAST — Refined Homepage Design System Keeps the existing brand language (pistachio/olive green, cream, nut-brown, Fenix display + DM Sans body) and elevates it with a disciplined token system, rhythm, and motion. ============================================================ */ /* ---------- WEBFONT — Alimama FangYuanTi VF (rounded "方圆体", Latin subset, self-hosted, variable: wght 200–700 + BEVL 1–100 roundness) ---------- */ @font-face { font-family: 'Alimama FangYuanTi'; src: url('../fonts/AlimamaFangYuanTi-latin.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; } /* ---------- DESIGN TOKENS ---------- */ :root { /* Brand palette (cleaned: dropped off-brand teal/blue) */ --cream: #fefff7; /* page base */ --cream-2: #f6f4e6; /* alt section */ --sand: #e9e7d3; /* muted surface/border */ --olive-ink: #141604; /* primary text */ --olive-deep: #33370a; /* headings / dark green */ --olive: #5a6322; /* mid olive */ --olive-soft: #677039; /* secondary text — darkened from #757f41 2026-08: the old value measured 3.72–4.28:1 on every ground it is used against (card, panel, page), i.e. below WCAG AA 4.5:1 for the small text it exists to set. Same hue, one notch down; clears 4.58:1 worst case. */ --avocado: #666e13; /* brand standard green - PANTONE 2307C (aiyangle green) */ --lime: #e7ea6b; /* brand auxiliary yellow - PANTONE 386C (aiyangle yellow) */ --lime-bright: #d7dd2e; /* accent hover */ --nut: #8e7648; /* nut brown */ --nut-soft: #b79e74; /* Functional */ --bg: var(--cream); --text: var(--olive-ink); --muted: #6b6f54; --line: rgba(20,22,4,.10); --line-soft: rgba(20,22,4,.06); /* Typography — display matches the logo wordmark (geometric / Futura-style) */ --font-display: 'Alimama FangYuanTi', 'Jost', system-ui, -apple-system, sans-serif; --font-body: 'Alimama FangYuanTi', 'DM Sans', system-ui, -apple-system, sans-serif; /* Fluid type scale */ --fs-eyebrow: .72rem; --fs-body: clamp(1rem, .96rem + .2vw, 1.075rem); --fs-lead: clamp(1.1rem, 1rem + .5vw, 1.3rem); --fs-h4: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem); --fs-h2: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); --fs-hero: clamp(2.1rem, 1.3rem + 2.3vw, 3.2rem); --fs-stat: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); /* Spacing scale (8pt) */ --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; --section-y: clamp(2.8rem, 1.8rem + 3.8vw, 4.6rem); /* Radii / shadows / motion */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(20,22,4,.05), 0 4px 14px rgba(20,22,4,.05); --shadow-md: 0 6px 18px rgba(20,22,4,.07), 0 24px 50px rgba(20,22,4,.09); --shadow-lg: 0 12px 30px rgba(20,22,4,.10), 0 40px 80px rgba(45,50,8,.16); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --maxw: 1240px; --tb-h: 40px; /* utility top bar height (0 on mobile) */ } /* ---------- RESET ---------- */ *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); font-variation-settings: 'BEVL' 100; /* rounded "方圆" axis (1=square … 100=round); inherits site-wide. wght stays driven by font-weight. */ font-size: var(--fs-body); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; } img,svg,video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; padding: 0; } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.015em; color: var(--olive-deep); } ::selection { background: var(--lime); color: var(--olive-ink); } /* Organic grain overlay for warmth/depth */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); } /* ---------- LAYOUT ---------- */ .wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } .section { padding-block: var(--section-y); position: relative; } .section--alt { background: var(--cream-2); } .section--ink { background: var(--olive-deep); color: #efeedd; } .section--ink h2,.section--ink h3 { color: #fff; } /* ---------- SHARED HEADER BLOCK ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-soft); } /* The decorative rule before (and after, when centred) every eyebrow was removed 2026-08 at the client's request. Dropping `content` is enough: with no generated box the flex `gap` contributes nothing either, so the label closes up on its own. The dozen `.x .eyebrow::before { background: ... }` overrides further down only ever recoloured this rule — with no content they generate nothing and are inert, so they are left in place rather than hunted down individually. */ .section-head { max-width: 720px; margin-bottom: clamp(1.5rem,3vw,2.6rem); } .section-head.center { margin-inline: auto; text-align: center; } /* A heading that needs a little more room than the 720px default. Measured: "Every show, planned and past" wants 784px and was breaking one word onto a second line. The paragraph keeps a readable measure of its own — widening the column for the heading must not stretch the body copy to match. */ .section-head--wide { max-width: 900px; } .section-head--wide p { max-width: 62ch; } .section-head h2 { font-size: var(--fs-h2); margin-top: 1rem; } .section-head p { margin-top: 1rem; color: var(--muted); font-size: var(--fs-lead); } .section--ink .section-head p { color: #c7cbab; } /* highlight word inside a heading */ /* isolate gives .hl its own stacking context so the z-index:-1 bar can't sink behind the hero background once the h1's reveal transform settles to `none`. */ .hl { position: relative; white-space: nowrap; isolation: isolate; } .hl::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .06em; height: .32em; background: var(--lime); z-index: -1; border-radius: 3px; opacity: .9; transform: skewX(-6deg) scaleX(1); transform-origin: left center; transition: transform .7s var(--ease-out) .5s; /* draws in after the title lands */ } /* hidden only while its revealed ancestor hasn't settled yet → draws in on reveal. .hl used outside a [data-reveal] (e.g. search highlights) stays visible. */ [data-reveal]:not(.in) .hl::after { transform: skewX(-6deg) scaleX(0); transition: none; } @media (prefers-reduced-motion: reduce){ .hl::after { transition: none; } } /* ---------- BUTTONS ---------- */ .btn { --bg-btn: var(--avocado); --fg-btn: var(--cream); display: inline-flex; align-items: center; gap: .6rem; padding: .92em 1.5em; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem; letter-spacing: .01em; background: var(--bg-btn); color: var(--fg-btn); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); will-change: transform; } .btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); } .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(45,50,8,.28); } /* Only the TRAILING arrow travels. A leading action glyph that slides right on hover swims into its own label; nutoast_arrow() carries .ico-arrow precisely so the two can be told apart (a structural selector cannot — an after a bare text node still matches :first-child). */ .btn:hover .ico-arrow { transform: translateX(4px); } .btn > svg:not(.ico-arrow) { opacity: .92; transition: opacity .3s var(--ease), transform .3s var(--ease); } .btn:hover > svg:not(.ico-arrow) { opacity: 1; transform: scale(1.06); } .btn--accent { --bg-btn: var(--lime); --fg-btn: var(--olive-ink); } .btn--accent:hover { background: var(--lime-bright); } .btn--ghost { --bg-btn: transparent; --fg-btn: var(--olive-deep); box-shadow: inset 0 0 0 1.5px var(--line); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--olive-deep); background: rgba(20,22,4,.03); } .btn--lg { padding: 1.05em 1.9em; font-size: 1rem; } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--olive); } .link-arrow svg { width: 16px; transition: transform .3s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* ============================================================ UTILITY TOP BAR (phone + social) ============================================================ */ .top-bar { position: fixed; top: var(--wpadminbar, 0px); left: 0; right: 0; z-index: 101; height: var(--tb-h); display: flex; align-items: center; background: var(--cream-2); border-bottom: 1px solid var(--line-soft); font-size: .82rem; color: var(--olive-soft); } .top-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .tb-item { display: inline-flex; align-items: center; gap: .42rem; color: var(--olive-soft); font-weight: 500; transition: color .2s var(--ease); } .tb-item:hover { color: var(--olive-deep); } .tb-item svg { width: 15px; height: 15px; flex: 0 0 auto; } .tb-phone { font-weight: 600; color: var(--olive); } /* phone <-> CTA rotator: grid-stacked items that fade & rise. SEQUENCED, not cross-faded. Both items share one grid cell, so a simple cross-fade had them legible on top of each other — measured at 4% of the time, the weaker one reaching 0.43 opacity, which reads as two lines of garbled text rather than as a transition ("+852 5128 5815" printed through "Bulk quote in 24 hours"). The incoming item now waits for the outgoing one to finish leaving, so the cell only ever holds one readable message. */ .tb-rotator { position: relative; display: inline-grid; } .tb-rotator .tb-rot__item { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(65%); pointer-events: none; transition: opacity .26s var(--ease), transform .26s var(--ease); } .tb-rotator .tb-rot__item.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .3s; /* > the .26s the outgoing one takes to clear */ } .tb-cta { color: var(--olive); font-weight: 600; } .tb-emoji { font-size: 1.05em; line-height: 1; } @media (prefers-reduced-motion: reduce){ .tb-rotator .tb-rot__item { transition: none; } } .tb-social { display: flex; align-items: center; gap: 1.15rem; } @media (max-width: 1040px){ .tb-social .tb-item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .tb-social { gap: .95rem; } } @media (max-width: 768px){ :root { --tb-h: 0px; } .top-bar { display: none; } } /* behaviour: "Show on scroll down" (default) — bar is hidden at the very top and slides in once the page is scrolled; header sits flush at top until then. */ .topbar-scroll .top-bar { transform: translateY(-100%); transition: transform .4s var(--ease); } .topbar-scroll.is-scrolled .top-bar { transform: translateY(0); } /* move the header with transform (not `top`) — animating `top` on a fixed, backdrop-filtered header leaves a stale composited "ghost" at the old position. */ .topbar-scroll .site-header { top: var(--wpadminbar, 0px); transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease); } .topbar-scroll.is-scrolled .site-header { transform: translateY(var(--tb-h)); } @media (prefers-reduced-motion: reduce){ .topbar-scroll .top-bar, .topbar-scroll .site-header { transition: none; } } /* ============================================================ HEADER / NAV ============================================================ */ .site-header { position: fixed; top: calc(var(--tb-h, 0px) + var(--wpadminbar, 0px)); left: 0; right: 0; z-index: 100; transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease); padding-block: 1.1rem; } .site-header.scrolled { /* solid background (no backdrop-filter): the frosted blur produced a stale composited snapshot that ghosted whenever the header wasn't being repainted. */ background: var(--cream); box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(20,22,4,.05); padding-block: .7rem; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: flex; align-items: center; gap: .55rem; } /* leaf icon cropped from the real logo (wordmark below is clipped out) */ .brand-mark { width: 42px; height: 42px; flex: 0 0 auto; background-color: var(--avocado); -webkit-mask: url("../images/leaf-mark.png") no-repeat center / contain; mask: url("../images/leaf-mark.png") no-repeat center / contain; } /* leaf colour adapts per context, like the wordmark */ .dark-hero .site-header:not(.scrolled) .brand-mark { background-color: var(--lime); } .footer-brand .brand-mark { background-color: var(--lime); } .mobile-nav__head .brand-mark { background-color: var(--avocado); } .brand .wordmark { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--avocado); letter-spacing: .005em; text-transform: lowercase; } .nav-menu { display: flex; align-items: center; gap: .35rem; } .nav-menu > li > a { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .85rem; border-radius: var(--r-pill); font-weight: 500; font-size: .95rem; color: var(--olive-ink); transition: background .25s var(--ease), color .25s var(--ease); } /* Hover and current-page share one mark: a lime rule that draws out from the centre of the word. Hover plays it, the current section holds it — so "where can I go" and "where am I" are the same vocabulary rather than two inventions. It also has to work on both headers: the masthead is transparent over the dark hero, where the old rgba(20,22,4,.05) wash was darkening an already-dark surface and was effectively invisible. Lime reads on both grounds. */ .nav-menu > li > a { position: relative; } .nav-menu > li > a::after { content: ""; position: absolute; bottom: .3rem; left: 50%; right: 50%; height: 2px; border-radius: 2px; background: var(--lime-bright, var(--lime)); opacity: 0; transition: left .32s var(--ease), right .32s var(--ease), opacity .32s var(--ease); } .nav-menu > li > a:hover::after, .nav-menu > li.is-current > a::after { left: .85rem; right: .85rem; opacity: 1; } /* No background wash on hover. A translucent rounded box behind the word reads as a stray grey panel on the dark header — square-cornered against a site whose whole vocabulary is pills, and competing with the lime rule that is already saying the same thing. The rule alone is the hover state; the colour shift is all the reinforcement it needs. */ .nav-menu > li > a:hover { color: var(--olive-deep); } .dark-hero .site-header:not(.scrolled) .nav-menu > li > a:hover { color: #fff; } /* The current section is legible without hovering: the rule stays, and the label carries a little more weight. Not a colour change — on the dark header there is no darker olive to go to. */ .nav-menu > li.is-current > a { font-weight: 600; } /* The NEW bubble rides on the item, so it should move with it rather than sit there while the pill lights up underneath. */ .nav-menu > li.has-new > a .nt-flag { transition: transform .25s var(--ease); } .nav-menu > li.has-new > a:hover .nt-flag { transform: translateY(-1px) scale(1.04); } @media (prefers-reduced-motion: reduce) { .nav-menu > li > a::after { transition: opacity .2s linear; } .nav-menu > li > a:hover::after, .nav-menu > li.is-current > a::after { left: .85rem; right: .85rem; } .nav-menu > li.has-new > a:hover .nt-flag { transform: none; } } .nav-menu .caret { width: 12px; opacity: .6; } .nav-actions { display: flex; align-items: center; gap: .7rem; } .nav-actions .btn { white-space: nowrap; } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; } .nav-toggle span { display:block; width: 22px; height: 2px; background: var(--olive-ink); margin: 4px auto; transition: .3s var(--ease); } @media (max-width: 1080px) { .nav-menu, .nav-actions .btn--ghost { display: none; } .nav-toggle { display: block; } } /* phones: drop the topbar CTA too — clean logo + hamburger; both CTAs live in the drawer */ @media (max-width: 768px) { .nav-actions .btn--accent { display: none; } } /* Mobile drawer */ .mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); z-index: 110; background: var(--cream); box-shadow: var(--shadow-lg); transform: translateX(100%); visibility: hidden; transition: transform .5s var(--ease-out), visibility 0s linear .5s; padding: 6rem 2rem 2rem; display: flex; flex-direction: column; gap: .25rem; } .mobile-nav.open { transform: translateX(0); visibility: visible; transition: transform .5s var(--ease-out), visibility 0s; } .mobile-nav a { padding: .9rem .5rem; font-size: 1.15rem; font-family: var(--font-display); border-bottom: 1px solid var(--line-soft); } .mobile-nav .btn { margin-top: 1.5rem; justify-content: center; } .nav-scrim { position: fixed; inset: 0; background: rgba(20,22,4,.4); opacity: 0; visibility: hidden; transition: .4s; z-index: 105; } .nav-scrim.open { opacity: 1; visibility: visible; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: clamp(8rem, 12vw, 11rem); padding-bottom: var(--hero-gap, 48px); overflow: clip; } /* phones get ~2/3 of the desktop gap — the band below is full-bleed and reads closer there */ @media (max-width: 768px) { .hero { padding-bottom: calc(var(--hero-gap, 48px) * .66); } } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 55% at 85% 18%, rgba(231,234,107,.45), transparent 60%), radial-gradient(50% 50% at 8% 90%, rgba(158,167,0,.16), transparent 60%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items: center; } .hero h1 { font-size: var(--fs-hero); letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; } .hero .est { margin-bottom: 1.4rem; } .hero-lead { margin-top: 1.6rem; max-width: 33ch; color: var(--muted); font-size: var(--fs-lead); } .hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; } .hero-trust { margin-top: clamp(1.8rem, 3vw, 2.4rem); color: var(--olive-soft); } .hero-trust__facts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .85rem; margin: 0; font-size: .9rem; } .hero-trust__facts > span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: .8rem; border-radius: 50%; background: var(--avocado); opacity: .55; vertical-align: .16em; } .hero-trust__facts strong { font-family: var(--font-display); font-weight: 600; font-size: 1.06em; color: var(--olive-deep); } .hero-trust__certs { margin: .55rem 0 0; font-size: .72rem; line-height: 1.75; letter-spacing: .01em; color: var(--olive-soft); opacity: .8; } /* Mobile: the 4 trust items (3 stats + a long cert list) can't share a row — stack them as a clean bulleted list so the certs wrap full-width instead of in a narrow column. */ @media (max-width: 768px) { /* eyebrow: long uppercase label can't fit one line — let it wrap, dash stays inline */ .hero .eyebrow { display: block; white-space: normal; font-size: .6rem; letter-spacing: .07em; line-height: 1.5; } .hero .eyebrow::before { display: inline-block; vertical-align: middle; margin-right: .5rem; } /* CTAs: stack full-width so "Request Quote" never overflows the viewport */ .hero-cta { gap: .7rem; margin-top: 1.9rem; } .hero-cta .btn { flex: 1 1 100%; justify-content: center; } /* trust: the certs now live on their own muted tier, so the claims stay inline */ .hero-trust { margin-top: 1.7rem; } .hero-trust__facts { gap: .3rem .65rem; font-size: .84rem; } .hero-trust__certs { font-size: .67rem; line-height: 1.7; } } .hero-visual { position: relative; } .hero-visual .frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/4.4; background: var(--sand); } .hero-visual .frame img { width: 100%; height: 100%; object-fit: cover; } .hero-badge { position: absolute; left: -1.5rem; bottom: 1.8rem; z-index: 3; background: var(--cream); border-radius: var(--r-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .85rem; border: 1px solid var(--line-soft); } .hero-badge .ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); font-family: var(--font-display); font-size: 1.1rem; color: var(--olive-deep); } .hero-badge b { font-family: var(--font-display); font-size: 1.15rem; color: var(--olive-deep); display: block; line-height: 1; } .hero-badge span { font-size: .78rem; color: var(--muted); } .hero-leaf { position: absolute; z-index: -1; opacity: .5; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; max-width: 460px; } } /* ---- Hero layout modes ---- */ /* A) full-bleed image background (default): image bleeds in from the right, cream gradient on the left keeps the text crisp. */ .hero--bg { min-height: clamp(480px, 72vh, 720px); background-image: linear-gradient(to top, var(--cream) 0, rgba(254,255,247,0) 150px), linear-gradient(100deg, var(--cream) 0%, var(--cream) 30%, rgba(254,255,247,.82) 44%, rgba(254,255,247,.18) 62%, rgba(254,255,247,0) 76%), var(--hero-img, none); background-size: 100% 100%, cover, 160% auto; background-position: center, center, right bottom; background-repeat: no-repeat; } .hero--bg::before { display: none; } .hero--bg .hero-grid { grid-template-columns: 1fr; } .hero--bg .hero-copy { max-width: 600px; } @media (max-width: 768px){ .hero--bg { min-height: 0; background-image: linear-gradient(rgba(254,255,247,.74), rgba(254,255,247,.74)), var(--hero-img, none); background-size: cover, cover; background-position: center; } .hero--bg .hero-copy { max-width: none; } } /* B) split, no card: plain image, no frame/shadow/badge */ .hero--split .hero-visual .frame { box-shadow: none; border-radius: var(--r-md); } /* ============================================================ STATS BAR ============================================================ */ /* frameless band on a FRESH, living pistachio-green gradient — the colour flows horizontally while a soft lime/white aurora drifts on top; dark-on-light text. */ .stats { /* The top edge is a POUR of pistachio paste, not a ruled line. The curve is a MASK on this element (not an SVG laid over it) so it cuts the real animated gradient — a static overlay would drift out of sync with statsFlow and show a seam. Layer 1 = the curve, stretched to 100% x a FIXED height so the band getting taller on mobile can't deepen the dip; layer 2 = everything below it. */ --pour-h: clamp(30px, 3.8vw, 60px); position: relative; overflow: hidden; background: linear-gradient(115deg, #5d6611 0%, #666e13 24%, #71791a 48%, #5a6312 74%, #666e13 100%); background-size: 240% 240%; animation: statsFlow 22s ease-in-out infinite; -webkit-mask-image: url('data:image/svg+xml;utf8,'), linear-gradient(#000, #000); mask-image: url('data:image/svg+xml;utf8,'), linear-gradient(#000, #000); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-position: top center, bottom center; mask-position: top center, bottom center; /* +1px kills a sub-pixel hairline between the two mask layers */ -webkit-mask-size: 100% var(--pour-h), 100% calc(100% - var(--pour-h) + 1px); mask-size: 100% var(--pour-h), 100% calc(100% - var(--pour-h) + 1px); } /* Lime sheen riding the pour edge — the gloss on poured nut butter. It lives INSIDE the masked element on purpose: its outer half is clipped away by the same curve, so what is left sits exactly on the paste surface. */ .stats__sheen { position: absolute; left: 0; top: 0; width: 100%; height: var(--pour-h); z-index: 1; pointer-events: none; } .stats > .wrap { position: relative; z-index: 2; } .stats::before { content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none; background: radial-gradient(46% 58% at 20% 28%, rgba(231,234,107,.22), transparent 60%), radial-gradient(48% 60% at 82% 72%, rgba(231,234,107,.16), transparent 62%), radial-gradient(40% 52% at 56% 50%, rgba(255,255,255,.07), transparent 66%); mix-blend-mode: soft-light; animation: statsAurora 28s ease-in-out infinite alternate; will-change: transform; } @keyframes statsFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes statsAurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(.3deg); } 100% { transform: translate3d(4%, 3%, 0) scale(1.16) rotate(-.4deg); } } @media (prefers-reduced-motion: reduce){ .stats { animation: none; } .stats::before { animation: none; } } /* fresh light band ⇒ dark-on-light text (scoped to .stats; Resources' --ink band keeps lime) */ .stats .stat .num { color: var(--lime); } .stats .stat .num .plus { color: #fff; } .stats .stat .label { color: rgba(231,234,107,.82); } .stats .stat + .stat::before { background: linear-gradient(to bottom, transparent, rgba(231,234,107,.3), transparent); } .stats .wrap { position: relative; z-index: 1; } .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); } .stat { background: transparent; padding: clamp(1rem,2vw,1.5rem) 1rem; text-align: center; position: relative; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.14), transparent); } .stat .num { font-family: var(--font-display); font-size: var(--fs-stat); color: var(--lime); line-height: 1; } .stat .num .plus { color: #fff; } .stat .label { margin-top: .45rem; color: #c7cbab; font-size: .92rem; letter-spacing: .02em; } @media (max-width: 680px){ .stats-grid { grid-template-columns: repeat(2,1fr); } .stat + .stat::before { display: none; } } /* ============================================================ INDUSTRIES — "Who Choose Nutoast?" ============================================================ */ #industries { padding-block: clamp(1.8rem, 3.4vw, 2.9rem); } #industries .section-head { margin-bottom: clamp(1rem, 2.3vw, 1.6rem); } #industries .section-head h2 { margin-top: .5rem; } #industries .section-head p { margin-top: .55rem; } .ind-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; } .ind-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/4.4; box-shadow: var(--shadow-sm); isolation: isolate; background: var(--sand); } .ind-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .ind-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,22,4,.82) 0%, rgba(20,22,4,.18) 50%, transparent 78%); } .ind-card .meta { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.3rem; z-index: 2; color: #fff; } .ind-card .meta h3 { color: #fff; font-size: 1.45rem; } .ind-card .meta p { font-size: .88rem; color: rgba(255,255,255,.78); margin-top: .25rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease); } .ind-card .tag { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; background: rgba(231,234,107,.92); color: var(--olive-ink); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--r-pill); } .ind-card:hover img { transform: scale(1.07); } .ind-card:hover .meta p { max-height: 11rem; opacity: 1; } @media (max-width: 900px){ .ind-grid { grid-template-columns: repeat(2,1fr);} } @media (max-width: 520px){ .ind-grid { gap: 1rem; } } /* ============================================================ WHAT WE SUPPLY ============================================================ */ /* three equal product cards (image + footer), uniform height */ .supply-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; } .supply-card { border-radius: var(--r-lg); background: var(--cream); border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .supply-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .supply-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .supply-card:hover .link-arrow svg { transform: translateX(4px); } .supply-card .ph { aspect-ratio: 1/1; overflow: hidden; background: var(--sand); } .supply-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); } .supply-card:hover .ph img { transform: scale(1.06); } .supply-card .pad { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; } .supply-card h3 { font-size: 1.5rem; color: var(--olive-deep); } .supply-card p { color: var(--muted); font-size: .94rem; margin-top: .5rem; } .supply-card .link-arrow { margin-top: auto; padding-top: 1.1rem; } @media (max-width: 880px){ .supply-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .supply-grid { grid-template-columns: 1fr; } } /* ============================================================ SPLIT BLOCKS (Application Support / Quality) ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4.5rem); align-items: center; } .split.reverse .split-media { order: 2; } .split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 5/4; background: var(--sand); position: relative; } .split-media img { width: 100%; height: 100%; object-fit: cover; } .split h2 { font-size: var(--fs-h2); margin-top: 1rem; } .split p.lead { margin-top: 1rem; color: var(--muted); font-size: var(--fs-lead); } .feature-list { margin-top: 1.6rem; display: grid; gap: .9rem; } .feature-list li { display: flex; gap: .8rem; align-items: flex-start; } .feature-list .ic { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: var(--lime); display: grid; place-items: center; color: var(--olive-deep); } .feature-list .ic svg { width: 16px; } .feature-list b { color: var(--olive-deep); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; } .feature-list span { color: var(--muted); font-size: .92rem; } .split .btn { margin-top: 2rem; } @media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split.reverse .split-media{ order: -1; } } /* fade carousel (reusable; used inside .split-media) */ .nut-carousel { position: absolute; inset: 0; } .nut-carousel__track { position: absolute; inset: 0; } .nut-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); } .nut-carousel__slide.is-active { opacity: 1; } .nut-carousel__slide img { width: 100%; height: 100%; object-fit: cover; } .nut-carousel__dots { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; display: flex; gap: .5rem; justify-content: center; } .nut-carousel__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(20,22,4,.25); cursor: pointer; transition: width .3s var(--ease), background .3s var(--ease); } .nut-carousel__dots button:hover { background: #fff; } .nut-carousel__dots button.is-active { width: 26px; border-radius: 5px; background: var(--lime); } /* synced copy track — grid-stack so the column holds the tallest slide (no jump on change) */ .support-copy { display: grid; } .support-copy .support-slide { grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .support-copy .support-slide.is-active { opacity: 1; pointer-events: auto; transform: none; } @media (prefers-reduced-motion: reduce){ .support-copy .support-slide { transition: none; } } @media (prefers-reduced-motion: reduce){ .nut-carousel__slide { transition: none; } } /* Beyond Ingredients: portrait product-poster carousel (1080x1420 -> exact 54/71, no crop) */ #support .split-media { aspect-ratio: 54 / 71; width: 100%; max-width: 520px; margin-left: auto; background: var(--cream-2); } @media (max-width: 820px){ #support .split-media { margin-inline: auto; } } /* certificate showcase — unframed, full-width fan on the cream ground */ #quality .cert-showcase { margin-top: clamp(1.4rem, 3vw, 2.6rem); } #quality .cert-showcase img { display: block; width: 100%; max-width: 1180px; height: auto; margin-inline: auto; } /* ============================================================ WORLDWIDE REACH ============================================================ */ /* light, centered, full-bleed map — the transparent PNG/WebP dissolves into the cream ground */ .reach { background: #f6f7ed; } .reach-map { margin-top: clamp(1.4rem, 3vw, 2.6rem); } .reach-map img { display: block; width: 100%; max-width: 1160px; height: auto; margin-inline: auto; } /* ============================================================ HOW WE WORK — 2×2 process cards (number · title · copy · photo) ============================================================ */ .how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.4rem) clamp(1.8rem,4vw,3.6rem); } .how-card { display: flex; flex-direction: column; } .how-card .idx { font-family: var(--font-display); font-size: clamp(1.3rem,2vw,1.6rem); color: var(--olive-soft); letter-spacing: .1em; opacity: .7; } .how-card h3 { font-size: clamp(1.35rem,2.2vw,1.8rem); margin: .3rem 0 .6rem; } .how-card p { color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 50ch; margin-bottom: clamp(1.1rem,2vw,1.6rem); } .how-media { margin-top: auto; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/3; background: var(--sand); box-shadow: var(--shadow-md); } .how-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); } .how-card:hover .how-media img { transform: scale(1.05); } @media (max-width: 760px){ .how-grid { grid-template-columns: 1fr; gap: clamp(1.8rem,6vw,2.4rem); } } /* ============================================================ TRADE SHOWS — "Where You Can Meet Us" ============================================================ */ .shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 280px)); justify-content: center; gap: 1.2rem; } .show { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-sm); background: var(--sand); } .show img { width:100%; height:100%; object-fit: cover; transition: transform .7s var(--ease-out); } .show::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(20,22,4,.78), transparent 55%); } .show .meta { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; z-index: 2; color:#fff; } .show .meta .city { display: flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; } .show .meta .city .pin { width: 1em; height: 1em; flex: none; color: var(--lime); } .show .meta .city .flag { width: 1.4em; height: auto; flex: none; margin-left: .15rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.4); } .show .meta .date { font-size: .8rem; color: rgba(255,255,255,.8); } .show--ph { background: linear-gradient(160deg, var(--olive), var(--olive-deep)); } .show:hover img { transform: scale(1.06); } /* ONE upcoming show — a lone centred card looks lost, so feature it: heading + intro + CTA on the left, the show card enlarged on the right, vertically balanced. Falls back to the centred grid automatically once there are 2+. */ #shows.shows--single .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: "head card" "cta card"; column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; align-content: center; } #shows.shows--single .section-head { grid-area: head; margin: 0 0 1.6rem; max-width: none; align-self: end; } #shows.shows--single .shows { grid-area: card; display: block; } #shows.shows--single .show { width: 100%; max-width: 360px; margin: 0 auto; box-shadow: var(--shadow-md); } #shows.shows--single .shows-cta { grid-area: cta; justify-content: flex-start; margin: 0; align-self: start; } @media (max-width: 860px) { #shows.shows--single .wrap { grid-template-columns: 1fr; grid-template-areas: "head" "card" "cta"; justify-items: center; } #shows.shows--single .section-head { text-align: center; align-self: auto; margin-bottom: 0; } #shows.shows--single .show { max-width: 320px; } #shows.shows--single .shows { margin-top: clamp(1.6rem, 4vw, 2.2rem); width: 100%; } #shows.shows--single .shows-cta { justify-content: center; margin-top: clamp(1.4rem, 3.5vw, 2rem); } } @media (max-width: 860px){ .shows { grid-template-columns: 1fr 1fr; } } /* ============================================================ UPCOMING TRADE-SHOW CARD (inside the hero, under the numbers) ============================================================ */ .showbar { display: flex; align-items: center; gap: .85rem; margin-top: 1.5rem; padding: .7rem .9rem; /* it's a
  • , not the — which is why removing the anchor's background above changed nothing on screen. It applied to .current-menu-item as well, so the page you were already on wore a grey panel permanently. The lime rule says both things already: it plays on hover and it holds on the current section. */ .dark-hero .site-header:not(.scrolled) .nav-toggle span { background: #fff; } .dark-hero .site-header:not(.scrolled) .btn--ghost { --fg-btn: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); } .dark-hero .site-header:not(.scrolled) .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,.1); } /* products page: category tiles (5-up) + featured product grid */ .pcat-grid { grid-template-columns: repeat(5,1fr); } /* product images are square (1:1) — match the tile so the full image shows, uncropped */ .pcat-grid .ind-card { aspect-ratio: 1 / 1; } .pcat-grid .ind-card::after { background: linear-gradient(to top, rgba(20,22,4,.82) 0%, rgba(20,22,4,.18) 44%, transparent 66%); } .pcat-grid .ind-card .meta p { max-height: none; opacity: 1; margin-top: .2rem; font-size: .8rem; color: rgba(255,255,255,.82); } @media (max-width: 980px){ .pcat-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 600px){ .pcat-grid { grid-template-columns: 1fr 1fr; } } .pgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.5rem); } .pcard { display: block; background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pcard__img { aspect-ratio: 1/1; background: var(--sand); overflow: hidden; } .pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .pcard:hover .pcard__img img { transform: scale(1.05); } .pcard__body { padding: .95rem 1.05rem 1.15rem; } .pcard__cat { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--avocado); font-weight: 700; } .pcard__name { font-size: 1rem; line-height: 1.35; margin-top: .3rem; color: var(--olive-ink); } .pgrid-more { text-align: center; margin-top: clamp(1.6rem,3vw,2.6rem); } @media (max-width: 900px){ .pgrid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 600px){ .pgrid { grid-template-columns: 1fr 1fr; } } /* ============================================================ PRODUCT CATEGORY BANDS (.pcat-band) — /products/ page Three full-width bands (one per product_cat) on alternating grounds. Editorial 2-col spread: margin-folio masthead rail | 4-up framed-poster previews. Reuses house primitives (.eyebrow, .btn, .wrap) + the framed poster photo treatment. Replaces the old .pcat-grid + .pgrid blocks. ============================================================ */ /* ---- hero-area category quick-nav: 3 scene tiles that jump to the bands ---- */ .pcat-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.8rem, 3.4vw, 2.6rem); } .pcat-nav__card { position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: #fff; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .pcat-nav__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .pcat-nav__media { position: absolute; inset: 0; z-index: -2; background: var(--olive-deep); } .pcat-nav__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .pcat-nav__card:hover .pcat-nav__media img { transform: scale(1.07); } .pcat-nav__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,22,4,.84) 0%, rgba(20,22,4,.34) 46%, rgba(20,22,4,.04) 78%); } .pcat-nav__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 2vw, 1.6rem); display: flex; flex-direction: column; } .pcat-nav__count { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); } .pcat-nav__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.04; color: #fff; margin-top: .3rem; } .pcat-nav__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-weight: 600; font-size: .9rem; color: #fff; opacity: .92; } .pcat-nav__go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); } .pcat-nav__card:hover .pcat-nav__go svg { transform: translateX(5px); } @media (max-width: 760px){ .pcat-nav { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .pcat-nav__card { aspect-ratio: 16 / 9; } } .pcat-bands { position: relative; } .pcat-band { padding-block: var(--section-y); background: var(--cream); position: relative; scroll-margin-top: clamp(88px, 11vh, 116px); } .pcat-band:nth-of-type(even) { background: var(--cream-2); } .pcat-band + .pcat-band { border-top: 1px solid var(--line-soft); } .pcat-band__inner { display: grid; grid-template-columns: minmax(260px, 21rem) 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; } /* ---- left rail / masthead ---- */ .pcat-band__rail { position: relative; min-width: 0; } .pcat-band__masthead { position: relative; min-width: 0; } .pcat-band__index { position: absolute; top: -.35em; left: -.06em; z-index: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); line-height: .9; letter-spacing: -.03em; color: rgba(158,167,0,.14); user-select: none; pointer-events: none; transition: color .5s var(--ease); } .pcat-band__eyebrow, .pcat-band__name, .pcat-band__desc { position: relative; z-index: 1; } .pcat-band__eyebrow { margin-bottom: 1rem; } .pcat-band__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.015em; color: var(--olive-deep); text-wrap: balance; overflow-wrap: anywhere; } .pcat-band__desc { margin-top: 1rem; color: var(--muted); font-size: var(--fs-body); max-width: 32ch; } .pcat-band__cta { margin-top: clamp(1.4rem, 2.4vw, 2rem); } .pcat-band:hover .pcat-band__index { color: rgba(158,167,0,.26); } /* ---- right: 4 framed-poster previews ---- */ .pcat-band__previews { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.6vw, 1.4rem); } .pcat-prev { display: block; min-width: 0; color: inherit; } .pcat-prev__img { display: block; position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--sand); box-shadow: inset 0 0 0 1px rgba(20,22,4,.07), 0 6px 18px rgba(20,22,4,.12); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .pcat-prev__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s var(--ease-out); } .pcat-prev__img--empty { display: grid; place-items: center; } .pcat-prev__img--empty svg { width: 34%; height: auto; opacity: .5; color: var(--nut-soft); } .pcat-prev__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin-top: .7rem; min-height: 2.5em; font-size: .9rem; line-height: 1.25; color: var(--olive-ink); transition: color .25s var(--ease); } .pcat-prev:hover .pcat-prev__img { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(20,22,4,.09), 0 14px 30px rgba(45,50,8,.16); } .pcat-prev:hover .pcat-prev__img img { transform: scale(1.05); } .pcat-prev:hover .pcat-prev__name { color: var(--olive-deep); } .pcat-prev:focus-visible { outline: none; } .pcat-prev:focus-visible .pcat-prev__img { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--avocado), 0 14px 30px rgba(45,50,8,.16); } /* ---- responsive: wrap (never horizontal-scroll), house 900/600 breakpoints ---- */ @media (max-width: 900px) { .pcat-band__inner { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.4rem); } .pcat-band__rail { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1.5rem; } .pcat-band__masthead { grid-column: 1; } .pcat-band__index { font-size: clamp(2.2rem, 7vw, 3.2rem); } .pcat-band__cta { grid-column: 2; align-self: end; margin-top: 0; } .pcat-band__previews { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pcat-band__rail { grid-template-columns: 1fr; } .pcat-band__cta { grid-column: 1; margin-top: 1.2rem; } .pcat-band__cta .btn { width: 100%; justify-content: center; } .pcat-band__desc { max-width: none; } .pcat-band__previews { gap: .8rem; } } @media (prefers-reduced-motion: reduce) { .pcat-prev__img, .pcat-prev__img img, .pcat-band__index { transition: none; } .pcat-prev:hover .pcat-prev__img, .pcat-prev:focus-visible .pcat-prev__img { transform: none; } } /* ============================================================ CONTACT PAGE + AJAX forms (contact + subscribe) ============================================================ */ .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items: start; } .contact-info h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); } .contact-lines { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1rem; } .contact-lines li { display: flex; align-items: center; gap: .8rem; } .contact-lines .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cream-2); color: var(--olive); flex: none; } .contact-lines .ic svg { width: 18px; height: 18px; } .contact-lines a { color: var(--olive-ink); font-weight: 500; } .contact-lines a:hover { color: var(--avocado); } .contact-social { display: flex; gap: .7rem; margin-top: 1.6rem; } .contact-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cream-2); color: var(--olive); transition: background .25s var(--ease), color .25s var(--ease); } .contact-social a:hover { background: var(--olive-deep); color: #fff; } .contact-social svg { width: 18px; height: 18px; } .contact-extra { margin-top: 1.4rem; color: var(--muted); font-size: .95rem; } .nutoast-form { display: grid; gap: .8rem; background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2.2rem); box-shadow: var(--shadow-sm); } .nutoast-form .nf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .nutoast-form input, .nutoast-form textarea { width: 100%; font: inherit; font-size: .95rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--olive-ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .nutoast-form input:focus, .nutoast-form textarea:focus { outline: none; border-color: var(--avocado); box-shadow: 0 0 0 3px rgba(158,167,0,.16); } .nutoast-form textarea { resize: vertical; min-height: 120px; } .nutoast-form .btn { justify-content: center; margin-top: .3rem; } .nutoast-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nutoast-form-msg { font-size: .9rem; min-height: 1.2em; } .nutoast-form-msg.ok { color: var(--olive); font-weight: 600; } .nutoast-form-msg.err { color: #b3261e; font-weight: 600; } .sub-msg { margin-top: .6rem; } .sub-msg.ok { color: var(--lime); } .sub-msg.err { color: #ffb4a8; } @media (max-width: 800px){ .contact-grid { grid-template-columns: 1fr; } .nutoast-form .nf-row { grid-template-columns: 1fr; } } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--olive-ink); color: #b9bd9f; padding-top: clamp(4rem,7vw,6rem); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); } .footer-brand .wordmark { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: .005em; text-transform: lowercase; color:#fff; } .footer-logo { display: inline-flex; align-items: center; gap: .6rem; } /* newsletter heading had no footer-specific colour → inherited the dark global h4 and vanished on the dark ground */ .footer-sub h4 { color: #fff; font-size: 1.05rem; margin-bottom: .55rem; } .footer-brand p { margin-top: 1rem; max-width: 32ch; font-size: .92rem; color:#9da284; } /* contact block under the brand (email + phone) — replaces the orphaned lime email */ .footer-contact { margin-top: 1.5rem; display: grid; gap: .6rem; } .footer-contact__link { display: inline-flex; align-items: center; gap: .65rem; width: fit-content; color: #c7cbab; font-size: .92rem; transition: color .25s var(--ease); } .footer-contact__link:hover { color: var(--lime); } .footer-contact__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.07); color: var(--lime); flex: 0 0 auto; transition: background .25s var(--ease); } .footer-contact__link:hover .footer-contact__ic { background: rgba(231,234,107,.16); } .footer-contact__ic svg { width: 16px; height: 16px; } .footer-social { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem; } .footer-social__link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.07); color: #c7cbab; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .footer-social__link:hover { background: var(--lime); color: var(--olive-ink); transform: translateY(-3px); } .footer-social__link svg { width: 18px; height: 18px; } .footer-col h4 { color:#fff; font-family: var(--font-body); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.1rem; } .footer-col a { display: block; padding: .35rem 0; color:#b9bd9f; font-size: .94rem; transition: color .25s; } .footer-col a:hover { color: var(--lime); } .footer-sub p { font-size: .92rem; color:#9da284; margin-bottom: 1rem; } .sub-form { display: flex; gap: .5rem; background: rgba(255,255,255,.06); padding: .4rem; border-radius: var(--r-pill); } .sub-form input { flex: 1 1 0; min-width: 0; background: none; border: 0; color:#fff; padding: .55rem .9rem; font: inherit; font-size: .9rem; } .sub-form:focus-within { box-shadow: inset 0 0 0 2px var(--lime); } .sub-form input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: var(--r-pill); } .sub-form input::placeholder { color:#8a8e72; } .sub-form { max-width: 100%; } .sub-form button { flex: 0 0 auto; white-space: nowrap; background: var(--lime); color: var(--olive-ink); border-radius: var(--r-pill); padding: .6rem 1.1rem; font-weight: 600; font-size: .9rem; } /* phones: drop the wrapping pill; email field + full-width button as two distinct, balanced elements */ @media (max-width: 480px){ .sub-form { flex-direction: column; align-items: stretch; gap: .6rem; background: transparent; padding: 0; border-radius: 0; box-shadow: none; } .sub-form:focus-within { box-shadow: none; } .sub-form input { flex: 0 0 auto; width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); padding: .95rem 1.25rem; font-size: .95rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .sub-form input:focus-visible { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(231,234,107,.22); } .sub-form button { width: 100%; padding: .95rem 1.1rem; font-size: .95rem; } } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.6rem 0; font-size: .85rem; color:#8a8e72; } .footer-bottom a { color:#8a8e72; } @media (max-width: 860px){ .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ .footer-top { grid-template-columns: 1fr; } } /* ============================================================ SCROLL REVEAL ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal][data-delay="1"]{ transition-delay:.08s; } [data-reveal][data-delay="2"]{ transition-delay:.16s; } [data-reveal][data-delay="3"]{ transition-delay:.24s; } [data-reveal][data-delay="4"]{ transition-delay:.32s; } @media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} } /* ============================================================ WORDPRESS OUTPUT HELPERS (a11y, menus, content) ============================================================ */ .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; } .skip-link.screen-reader-text:focus { position: fixed !important; top: 1rem; left: 1rem; z-index: 1000; width: auto; height: auto; clip: auto; clip-path: none; padding: .7rem 1.1rem; border-radius: var(--r-pill); background: var(--olive-deep); color: #fff; box-shadow: var(--shadow-md); } /* wp_nav_menu output keeps the same look as the hand-built lists */ .footer-menu { margin: 0; } .nav-menu .sub-menu { display: none; } /* top-level only for now */ /* ---------- Products mega-menu (header) ---------- */ .nav-item.has-mega { position: relative; } .nav-item.has-mega > a { display: inline-flex; align-items: center; gap: .35rem; } .nav-item.has-mega .caret { width: 11px; height: 8px; opacity: .55; transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav-item.has-mega:hover .caret, .nav-item.has-mega:focus-within .caret { transform: rotate(180deg); opacity: .9; } .nav-mega { position: absolute; top: 100%; left: 0; width: min(660px, 92vw); max-width: calc(100vw - 2.5rem); padding-top: .6rem; /* transparent hover-bridge over the gap */ transform: translateY(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; z-index: 200; } .nav-item.has-mega:hover .nav-mega, .nav-item.has-mega:focus-within .nav-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-mega__panel { background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.1rem; } .nav-mega__eyebrow { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--olive-soft); margin: .1rem .25rem .7rem; } .nav-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .nav-mega__card { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--cream-2); border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .nav-mega__card:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--shadow-sm); background: #fff; } .nav-mega__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); } .nav-mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .nav-mega__card:hover .nav-mega__img img { transform: scale(1.06); } .nav-mega__body { display: block; padding: .7rem .8rem .85rem; } .nav-mega__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.1; color: var(--olive-deep); } .nav-mega__meta { display: block; margin-top: .25rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--avocado); } .nav-mega__desc { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.4; color: var(--muted); } .nav-mega__all { display: inline-flex; align-items: center; gap: .4rem; margin: .9rem .25rem .2rem; font-weight: 600; font-size: .9rem; color: var(--olive); } .nav-mega__all svg { width: 16px; height: 16px; transition: transform .3s var(--ease); } .nav-mega__all:hover { color: var(--olive-deep); } .nav-mega__all:hover svg { transform: translateX(4px); } @media (max-width: 1040px) { .nav-mega { display: none; } } /* mobile/tablet use the drawer */ @media (prefers-reduced-motion: reduce) { .nav-mega, .nav-mega__card, .nav-mega__img img, .nav-item.has-mega .caret { transition: none; } } .entry-content > * + * { margin-top: 1.1rem; } .entry-content h2, .entry-content h3 { margin-top: 2rem; } .entry-content a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; } .entry-content img { border-radius: var(--r-md); } /* In-body poster carousel — the finished client posters, shown whole, one at a time. Capped well under the 760px column: a full-width 2:3 portrait would be 1,133px tall and push everything else off screen. Drives the shared .ntcar component. */ .entry-content .mc-posters { max-width: min(460px, 100%); margin: 1.5rem auto 2.9rem; } /* radius/clip live on the carousel itself (its viewport inherits the radius) so the dots can sit outside the frame without being clipped away */ .entry-content .mc-posters .ntcar { border-radius: var(--r-md); } .entry-content .mc-posters .ntcar__viewport { box-shadow: var(--shadow-md); background: var(--cream); } .entry-content .mc-posters .ntcar__slide img { width: 100%; height: auto; display: block; border-radius: 0; /* the frame is rounded, not each slide */ } .entry-content .mc-posters .ntcar__nav { background: rgba(254,255,247,.92); color: var(--olive-deep); border: 1px solid var(--line); } .entry-content .mc-posters .ntcar__nav:hover { background: var(--olive-deep); color: #fff; } .entry-content .mc-posters .ntcar__dots { bottom: -1.55rem; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; } .entry-content .mc-posters .ntcar__dot { background: rgba(20,22,4,.22); } .entry-content .mc-posters .ntcar__dot.is-active { background: var(--avocado); } .entry-content .mc-posters__cap { margin: .55rem 0 0; text-align: center; font-size: .82rem; color: var(--olive-soft); } /* Pulled-out statistic — breaks the article's opening wall of prose without inventing a new claim: the figure and its source are lifted from the paragraph it sits under. The client's complaint was that the piece opens with ~1,900 characters of unbroken text before the first product image. */ /* The figure callout. Built for the Mid-Autumn article as .mc-stat and kept under that name so the published article is untouched; .nt-stat is the same component with a name that does not belong to one story. */ .entry-content .nt-stat, .entry-content .mc-stat { display: grid; grid-template-columns: auto 1fr; gap: 0 1.15rem; align-items: center; margin: 1.6rem 0; padding: 1.15rem 1.35rem; border-radius: var(--r-md); background: linear-gradient(135deg, #eef0d8, #e4e6c6); border: 1px solid var(--line-soft); } .entry-content .nt-stat__n, .entry-content .mc-stat__n { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; color: var(--avocado); font-weight: 600; } .entry-content .nt-stat__t, .entry-content .mc-stat__t { font-size: .92rem; line-height: 1.5; color: var(--olive-deep); } .entry-content .nt-stat__src, .entry-content .mc-stat__src { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .74rem; color: var(--olive-soft); } /* A unit riding on the figure — "US$1.09bn" reads better with the bn a size down than as one long display-font string. */ .entry-content .nt-stat__n i { font-style: normal; font-size: .46em; letter-spacing: .01em; } /* Tabular figures + a reserved width: a counter running 0 → 600,180 changes the string's width on almost every frame, and without both of these the sentence beside it reflows for the whole animation. */ .entry-content .nt-stat__n, .entry-content .mc-stat__n { font-variant-numeric: tabular-nums; } .nt-count[data-nt-count] { display: inline-block; } /* Comparison variant. Some numbers only mean something against another number: a trade balance is the pair, not either side, so the two sit level and the verdict line runs underneath both. */ .entry-content .nt-stat--pair { grid-template-columns: 1fr 1fr; gap: .6rem; align-items: stretch; } /* Same reasoning as .nt-figs__cell: a comparison needs two objects to compare, not two halves of one sheet. */ .entry-content .nt-stat--pair .nt-stat__col { padding: .85rem .95rem .9rem; background: rgba(255,255,255,.52); border: 1px solid rgba(102,110,19,.10); border-radius: calc(var(--r-md) - 6px); } .nt-stat__col { min-width: 0; } .nt-stat__k { display: block; font-family: var(--font-body); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--olive-soft); margin-bottom: .3rem; } .entry-content .nt-stat--pair .nt-stat__n { display: block; font-size: clamp(1.6rem, 4.4vw, 2.15rem); } /* The second figure. Sized between the headline and the deltas so the ranking is readable without a label: this is the same measurement in another unit, not a competing headline and not a footnote. */ .entry-content .nt-stat__n2 { display: block; margin-top: .16rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(.9rem, 2.2vw, 1.04rem); line-height: 1.2; color: var(--olive-soft); font-variant-numeric: tabular-nums; } .entry-content .nt-stat__n2 i { font-style: normal; font-size: .74em; letter-spacing: .01em; } /* A wider gap where the figures end and the changes begin. */ .entry-content .nt-stat__n2 + .nt-stat__d { margin-top: .62rem; } .nt-stat__d { display: flex; align-items: flex-start; gap: .4em; margin-top: .34rem; font-size: .76rem; line-height: 1.35; color: var(--olive-deep); } /* Direction is a filled badge, not a bare character. Two small outline triangles differing only in rotation and in two shades of green/brown read as the same mark at 12px — the client could not tell them apart. Now up and down differ on three axes at once: fill colour (brand green vs the palette's existing hot red), glyph, and the shape of the badge itself. Colour is never the only cue, so this still works in greyscale. */ .nt-stat__d::before { content: "→"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.45em; height: 1.45em; margin-top: -.02em; border-radius: 6px; font-size: .82em; line-height: 1; background: rgba(102,110,19,.12); color: var(--olive); } .nt-stat__d--up::before { content: "▲"; border-radius: 50%; background: var(--avocado); color: var(--cream); } .nt-stat__d--down::before { content: "▼"; border-radius: 4px; background: #B4471F; color: #FFF6EC; } .entry-content .nt-stat--pair .nt-stat__t { grid-column: 1 / -1; padding-top: .85rem; border-top: 1px solid rgba(102,110,19,.18); } .entry-content .nt-stat--pair .nt-stat__t strong { color: var(--avocado); } @media (max-width: 560px) { .entry-content .nt-stat, .entry-content .mc-stat { grid-template-columns: 1fr; gap: .35rem; text-align: left; } /* The pair stays two-up even on a phone — stacked, the comparison the block exists to make disappears. */ .entry-content .nt-stat--pair { grid-template-columns: 1fr 1fr; gap: .9rem .9rem; } .entry-content .nt-stat--pair .nt-stat__n { font-size: 1.45rem; } .nt-stat__k { font-size: .58rem; letter-spacing: .09em; } .nt-stat__d { font-size: .72rem; } } /* Featured development case — the closing "product breakdown" sheet. Full-bleed to the wider column because these are dense infographics that are unreadable at 760px. */ .entry-content .mc-case { width: min(var(--maxw), calc(100vw - 2.5rem)); margin: 1.5rem 0 1.8rem 50%; transform: translateX(-50%); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); background: var(--cream); } .entry-content .mc-case img { width: 100%; height: auto; display: block; border-radius: 0; } /* Mid-Autumn article hero — five poster crops read as one wide band, so the range of applications lands in a single glance instead of a long scroll. It has to break out of the 760px .article column on its own: there is no full-bleed/alignwide treatment anywhere else in .entry-content to inherit. margin-left:50% + translateX(-50%) re-centres it against the wider viewport. */ .entry-content .mc-hero { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: min(var(--maxw), calc(100vw - 2.5rem)); margin: 1.35rem 0 1.6rem 50%; transform: translateX(-50%); border-radius: var(--r-md); overflow: hidden; background: var(--cream); box-shadow: var(--shadow-sm); } /* 32/50 matches the exported panels exactly, so cover never has to crop twice. */ .entry-content .mc-hero img { width: 100%; height: 100%; aspect-ratio: 32 / 50; object-fit: cover; display: block; border-radius: 0; } /* Phones: five 70px slivers would be unreadable, so drop to a 2-up mosaic. The odd fifth panel spans both columns and switches to a landscape crop, which resolves the odd count deliberately instead of leaving an orphan. */ @media (max-width: 700px) { .entry-content .mc-hero { grid-template-columns: repeat(2, 1fr); gap: 2px; } .entry-content .mc-hero img { aspect-ratio: 1 / 1; } .entry-content .mc-hero img:last-child { grid-column: span 2; aspect-ratio: 16 / 9; } } /* "Recommended: " stays a real link (crawlable, works with JS off) but a plain left click pops the product modal — the caret hints there is more behind it. */ .entry-content .mooncake__prod a[data-pmodal-tmpl]::after { content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .38em; vertical-align: .12em; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .2s var(--ease), opacity .2s var(--ease); } .entry-content .mooncake__prod a[data-pmodal-tmpl]:hover::after { opacity: 1; transform: rotate(45deg) translate(1px, 1px); } /* Holidays / Seasonal Inspiration — the concept catalogue grid (九宫格). --mc-pad is the card's inner gutter, declared once on the card so the phone block can retune every inset by overriding a single value. */ .entry-content .mooncake-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin: 1.6rem 0; } .entry-content .mooncake { --mc-pad: 1.05rem; margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--cream); box-shadow: var(--shadow-sm); transition: box-shadow .25s var(--ease); } .entry-content .mooncake:hover, .entry-content .mooncake:focus-within { box-shadow: var(--shadow-md); } /* the image+name+highlight are a