/* ========================================================================== EssenzNatur — sections added for the 2026 client review. Loaded after style.css. The palette and font tokens are already defined there and are deliberately not redefined. As of the Designer Brief wave those tokens carry the client's mandated palette (#2c5f2d / #4a7c4e / #e8f5e9 / #333 / #666 / #f5f5f5 / #f44336 / #4caf50) and the Inter / Segoe UI stack; the provisional amber is the one documented addition. What is added here is the scale layer — spacing rhythm, radii, elevation, motion — plus the new components. ========================================================================== */ :root{ /* The spacing scale moved to style.css:69 so the sheet that loads first can use it — it was declared here and therefore invisible to style.css, which is part of why 305 spacing literals were written by hand. Redeclaring it here would fork the scale, so it is deliberately absent. The old --t--1 … --t-3 type scale is gone too. It was a clean 1.25 ratio that the codebase used exactly twice while 70 hand-written sizes did the real work; the eight roles in style.css replace it. */ /* Line lengths that keep technical copy readable. */ --measure:64ch; --measure-tight:46ch; /* Form language. Hairlines and soft elevation, never heavy shadow. One radius now — --r-sm/--r-md/--r-lg were 2/3/4px for one job, and --r-lg was declared and never used. They alias --radius so no call site has to change. */ --r-sm:var(--radius); --r-md:var(--radius); --r-lg:var(--radius); --e-1:0 1px 2px rgba(20,48,23,.04); --e-2:0 2px 10px rgba(20,48,23,.06), 0 1px 2px rgba(20,48,23,.04); --e-3:0 8px 30px rgba(20,48,23,.08); --ease:cubic-bezier(.2,.6,.2,1); --dur:240ms; } /* ========================================================================== Motion — fade and rise on scroll, and nothing else. There is deliberately no rule here that hides [data-rise]. The hidden state is applied by site.js as an inline style and removed by the same code, so the markup is fully visible in CSS alone and no cascade or specificity accident can leave a section blank. An earlier class-based version did exactly that on the Quality page. ========================================================================== */ [data-rise]{opacity:1;transform:none} /* ========================================================================== Accessibility utility. .screen-reader-text carries real meaning here — the documentation matrix uses it 60+ times to give every cell a spoken "liegt vor" / "nicht einschlägig". It was only ever defined by the parent theme and by the block-library stylesheet, so it is declared locally rather than left depending on either. ========================================================================== */ .screen-reader-text{ border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden; padding:0;position:absolute;width:1px;word-wrap:normal!important; } .screen-reader-text:focus{ background:var(--paper);clip-path:none;color:var(--ink);display:block; font-size:1em;height:auto;left:5px;line-height:normal;padding:var(--s-4) var(--s-5) var(--s-3); text-decoration:none;top:5px;width:auto;z-index:100000; } /* ========================================================================== No-JS fallbacks. style.css collapses .acc-a unconditionally, which left every FAQ answer unreachable without JavaScript. Answers and tab panels are visible by default here; the js-acc / js-tabs classes, set in before paint, are what allow them to collapse. ========================================================================== */ .acc-a{display:block} .js-acc .acc-a{display:none} .js-acc .acc-a.on{display:block} .tabset-panel[hidden]{display:none} .js-tabs .tabset-panel{display:block} /* ========================================================================== Shared helpers ========================================================================== */ .hd--stack{align-items:flex-end} .hd--stack .lede{max-width:var(--measure-tight);margin:0} .lede--gap{margin:var(--s-4) 0 var(--s-5)} .split--tight{gap:var(--s-7);align-items:start} .split--flip>div:first-child{order:2} @media (max-width:860px){.split--flip>div:first-child{order:0}} /* Pending-confirmation chip. Every unverified claim on the site wears this — 306 nodes across 15 routes, which makes it the most repeated component here and the one that most has to read as deliberate rather than as a defect. Four things were wrong with it and all four are fixed by this one rule: - it rendered at 9.8px in body sections and 8.8px in the footer, the smallest text on the site; - it never declared a line-height, so it inherited body copy's 1.62 and an 8.8px label carried 14.3px of leading — the leak hit 705 of 940 label nodes site-wide; - gap:6px here and 7px in the footer were, between them, 61% of all off-scale gap in the entire build (369 nodes); - its amber failed AA on every light ground it touched. One size, one leading, one gap, one amber. */ .pend{ display:inline-flex;align-items:center;gap:var(--s-1); font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro); letter-spacing:var(--ls-micro);line-height:var(--lh-micro);text-transform:uppercase; color:var(--amber);background:var(--amber-bg); border:1px solid var(--amber-bd);border-radius:var(--radius); padding:var(--s-1) var(--s-2);white-space:nowrap; } .pend::before{content:"";width:5px;height:5px;border-radius:var(--radius-full);background:var(--amber);flex:0 0 auto} /* The dark-ground variant keys off every dark surface the chip can land on, not only .sec--dark. It previously relied on zip/80-footer.css for the footer case, and that sheet is enqueued per-module — on any route where the module does not load, the chip rendered its light amber on --deep at 1.90:1. Ground, not module, decides the treatment. */ .sec--dark .pend,footer.site .pend,.sec--cta .pend,.hero-panel .pend, .stat .pend,.deliver .pend{ color:var(--amber-on-dark);background:var(--amber-bg-dark);border-color:var(--amber-bd-dark) } .sec--dark .pend::before,footer.site .pend::before,.sec--cta .pend::before, .hero-panel .pend::before,.stat .pend::before, .deliver .pend::before{background:var(--amber-on-dark)} /* ========================================================================== Products — USP band ========================================================================== */ .usp{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(238px,1fr))} .usp-i{border-top:1px solid var(--line);padding-top:var(--s-5)} .usp-n{display:block;font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); color:var(--sage);margin-bottom:var(--s-3)} .usp-i h3{margin-bottom:var(--s-2)} .usp-i p{margin:0;font-size:var(--fs-small);color:var(--muted);max-width:38ch} /* ========================================================================== Products — extraction methods ========================================================================== */ .meth-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3); margin-bottom:var(--s-4)} .meth h3{margin-bottom:var(--s-2)} .meth p{margin:0;font-size:var(--fs-small);color:var(--muted)} .meth .meth-detail{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line-2)} .meth-detail strong{display:block;margin-bottom:var(--s-1);font-family:var(--data);font-size:var(--fs-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--sage)} /* ========================================================================== Products — applications and their products ========================================================================== */ .unit{border-top:1px solid var(--line);padding-top:var(--s-6);margin-bottom:var(--s-8)} .unit:last-child{margin-bottom:0} .unit-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6); flex-wrap:wrap;margin-bottom:var(--s-5)} .unit-hd>div{max-width:var(--measure)} .unit-hd h3{font-size:var(--fs-h3);margin-bottom:var(--s-3)} .unit-hd p{margin:0;color:var(--muted);font-size:var(--fs-small)} .unit-uses{margin-top:var(--s-3)!important;font-size:var(--fs-small)!important} .unit-uses span{font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--sage);display:block;margin-bottom:0} /* ========================================================================== Quality — traceability chain ========================================================================== */ .sec--trace{background:linear-gradient(180deg,var(--white) 0%,var(--paper) 100%)} .chain{list-style:none;margin:0 0 var(--s-8);padding:0;display:grid;gap:1px; grid-template-columns:repeat(auto-fit,minmax(186px,1fr));background:var(--line); border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .chain-i{background:var(--white);padding:var(--s-5);position:relative} .chain-n{display:inline-block;font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--white);background:var(--sage); padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);margin-bottom:var(--s-4)} .chain-i h3{font-size:var(--fs-h3);margin-bottom:var(--s-2)} .chain-i p{margin:0;font-size:var(--fs-small);color:var(--muted)} /* Arrow between links in the chain, horizontal only. */ .chain-i:not(:last-child)::after{ content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px; border-top:1px solid var(--line);border-right:1px solid var(--line); transform:translateY(-50%) rotate(45deg);background:var(--white);z-index:2; } @media (max-width:640px){.chain-i:not(:last-child)::after{display:none}} .chain--mini{margin-bottom:0;grid-template-columns:1fr;gap:1px} .chain--mini .chain-i{padding:var(--s-4) var(--s-5);display:flex;align-items:center;gap:var(--s-4)} .chain--mini .chain-n{margin-bottom:0;flex:0 0 auto;min-width:62px;text-align:center} .chain--mini .chain-i h3{margin:0;font-size:var(--fs-h3)} .chain--mini .chain-i:not(:last-child)::after{display:none} .ticks{list-style:none;margin:var(--s-4) 0 var(--s-5);padding:0;display:grid;gap:var(--s-3)} .ticks li{position:relative;padding-left:var(--s-5);font-size:var(--fs-small);color:var(--muted)} .ticks li::before{ content:"";position:absolute;left:0;top:.45em;width:12px;height:7px; border-left:1.6px solid var(--sage);border-bottom:1.6px solid var(--sage); transform:rotate(-45deg); } /* ========================================================================== Quality — compliance and certification placeholders ========================================================================== */ .certs-hd{margin-top:var(--s-8)} .certs{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .cert,.mem{ display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2); border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--gap); background:var(--card); } .cert-mark{width:40px;height:40px;color:var(--sage);margin-bottom:var(--s-2)} .cert-t,.mem-t{font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-body)} .cert-d,.mem-d{font-size:var(--fs-small);color:var(--muted)} /* ========================================================================== Sustainability — origin regions ========================================================================== */ .region{border-top:2px solid var(--sage);padding-top:var(--s-5)} .region-hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3); margin-bottom:var(--s-2)} .region-hd h3{font-size:var(--fs-h3)} .region-crop{font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--sage); margin:0 0 var(--s-3)} .region p:last-child{margin:0;font-size:var(--fs-small);color:var(--muted)} /* ========================================================================== Sustainability — metrics ========================================================================== */ .stats{list-style:none;margin:0;padding:0;display:grid;gap:1px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);overflow:hidden} .stat{background:var(--deep);padding:var(--s-6) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)} .stat-v{font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-display); line-height:1;letter-spacing:var(--ls-display);color:var(--on-deep)} .stat-u{font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase; color:var(--on-deep-3)} .stat p{margin:var(--s-2) 0 0;font-size:var(--fs-small);color:var(--on-deep-2);flex:1} .stat .pend{align-self:flex-start;margin-top:var(--s-3)} /* ========================================================================== Sustainability — ethical sourcing stack ========================================================================== */ .stack{display:grid;gap:var(--gap)} .stack-i{border-left:2px solid var(--sage);padding-left:var(--s-5)} .stack-hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3); margin-bottom:var(--s-2);flex-wrap:wrap} .stack-i p{margin:0;font-size:var(--fs-small);color:var(--muted)} /* ========================================================================== Sample request — what we commit to Was "the seven-day promise". The figure is withdrawn until countersigned (OQ-B5), so the display numeral is gone from the markup and the band uses the --nofig modifier. .promise-n is kept rather than deleted: restoring the figure is a one-line markup change, and the rule is the other half of it. ========================================================================== */ /* Brief §9 highlight box: #e8f5e9 ground, 5px left border in the primary green, 20px padding, 4px radius. */ .promise{ display:flex;gap:var(--s-6);align-items:flex-start; background:var(--mist);border-left:5px solid var(--sage); border-radius:var(--r-md);padding:var(--gap); margin-bottom:var(--s-7); } .promise-n{ font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-display); line-height:1;letter-spacing:var(--ls-display);color:var(--sage);flex:0 0 auto; } .promise h2{margin-bottom:var(--s-3)} .promise p{margin:0 0 var(--s-3);font-size:var(--fs-small);color:var(--muted);max-width:var(--measure)} .promise .flag{margin:0} /* Single child: the flex gap has nothing to sit between, so drop it. */ .promise--nofig{gap:0} @media (max-width:600px){.promise{flex-direction:column;gap:var(--s-4)}.promise--nofig{gap:0}} /* Business-email gate notice on the sample form */ /* Highlight box, Brief §9 geometry. */ .gate{ display:flex;gap:var(--s-4);align-items:flex-start; background:var(--mist);border-left:5px solid var(--sage);border-radius:var(--r-md); padding:var(--gap);margin-bottom:var(--s-6); } .gate h3{font-size:var(--fs-h3);margin-bottom:var(--s-2)} .gate p{margin:0;font-size:var(--fs-small);color:var(--muted)} .gate > .en-icon{width:var(--s-5);height:var(--s-5);color:var(--sage);flex:0 0 auto;margin-top:0} /* Nested fieldsets inside a form section carry no chrome of their own — replaces the inline style attributes the original markup used. */ .fset-bare{border:0;padding:0;margin:0} .f-legend{font-family:var(--body);font-size:var(--fs-micro);color:var(--muted); letter-spacing:0;text-transform:none;margin-bottom:var(--s-2);padding:0} /* Standard vs custom sample choice */ .kinds{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(252px,1fr));margin:0} .kind{ display:flex;gap:var(--s-4);align-items:flex-start;cursor:pointer; border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--gap); background:var(--card);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .kind:hover{border-color:var(--sage-2)} .kind:has(input:checked){border-color:var(--sage);box-shadow:inset 0 0 0 1px var(--sage)} .kind input{margin-top:var(--s-1);accent-color:var(--sage);flex:0 0 auto;width:auto} .kind b{display:block;font-family:var(--display);font-size:var(--fs-body);margin-bottom:0} .kind span{font-size:var(--fs-small);color:var(--muted)} /* ========================================================================== Company — vision / mission / values ========================================================================== */ .vm{border-top:2px solid var(--sage);padding-top:var(--s-5)} .vm h3{font-size:var(--fs-h3);margin-bottom:var(--s-3)} .vm p{margin:0;color:var(--muted);font-size:var(--fs-small)} .val{border-top:1px solid var(--line);padding-top:var(--s-5)} .val h3{margin-bottom:var(--s-2)} .val p{margin:0;color:var(--muted);font-size:var(--fs-small);max-width:46ch} /* ========================================================================== Trust — memberships and case studies ========================================================================== */ .mems{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .case{ margin:0;border:1px dashed var(--line);border-radius:var(--r-md); padding:var(--gap);background:var(--card);display:flex;flex-direction:column;gap:var(--s-3); } .case-hd{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)} .case blockquote{margin:0;flex:1} .case blockquote p{margin:0;font-size:var(--fs-small);color:var(--muted);font-style:italic} .case figcaption{font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--sage)} /* ========================================================================== Home — trust strip ========================================================================== */ .sec--strip{padding:var(--s-6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--white)} .strip{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .strip a{ display:flex;align-items:center;gap:var(--s-3);text-decoration:none; font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase; color:var(--muted);padding:var(--s-3) 0;min-height:44px; transition:color var(--dur) var(--ease); } .strip a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage-2);flex:0 0 auto} .strip a:hover,.strip a:focus-visible{color:var(--ink)} /* ========================================================================== Footer — a fifth column was added for compliance links ========================================================================== */ .fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.05fr} @media (max-width:1100px){.fgrid{grid-template-columns:1fr 1fr 1fr}} @media (max-width:760px){.fgrid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.fgrid{grid-template-columns:1fr}} footer.site a{transition:color var(--dur) var(--ease)} footer.site li{padding:var(--s-1) 0} footer.site li a{display:inline-block;min-height:24px} /* ========================================================================== Contact cluster ========================================================================== */ .prow--wide{grid-template-columns:1fr auto} .prow--wide .bt{font-family:var(--body);font-size:var(--fs-small);color:var(--muted); letter-spacing:0;margin-top:var(--s-1);max-width:68ch;display:block} .aside-h{font-family:var(--display);font-size:var(--fs-body);margin-bottom:var(--s-3)} .gate-mini{font-size:var(--fs-micro);color:var(--muted);border-top:1px solid var(--line); padding-top:var(--s-3);margin:var(--s-4) 0 0} /* ========================================================================== Careers / distributor supporting bits ========================================================================== */ .reqs{list-style:none;margin:var(--s-4) 0 var(--s-5);padding:0;display:grid;gap:var(--s-3); counter-reset:req} .reqs li{position:relative;padding-left:var(--s-6);font-size:var(--fs-small);color:var(--muted);counter-increment:req} .reqs li::before{ content:counter(req,decimal-leading-zero);position:absolute;left:0;top:.1em; font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--sage); } /* ========================================================================== Responsive checks — 375 / 768 / 1024 / 1440 / 1920 ========================================================================== */ @media (max-width:1024px){ .unit-hd{align-items:flex-start} } @media (max-width:768px){ .hd--stack{align-items:flex-start} .hd--stack .lede{max-width:none} .chain{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} } @media (max-width:520px){ .chain{grid-template-columns:1fr} .certs,.mems,.stats{grid-template-columns:1fr} .promise-n{font-size:var(--fs-display)} } @media (min-width:1600px){ /* Stop the measure running away on very wide screens. */ .usp-i p,.val p{max-width:34ch} } /* Every interactive target clears 44px. */ .kind,.strip a,.certs a,.mems a{min-height:44px}