/* BONO FOOD — layout and components. One file, both directions.
Direction-dependent values multiply by var(--dir); everything else is
direction-neutral and must stay that way, so /ar/ needs no second sheet.
Colour comes only from tokens.css. Two rules are load-bearing:
- `color: var(--grass)` is FORBIDDEN anywhere (check_structure enforces
it). --grass clears AA on one ground by 0.01 and fails the other two.
--leaf is the green that may carry text on light.
- --zest is text on --forest and --canopy ONLY. On white it is 1.59:1.
No scanner can see the ground, so that one is on the author.
Reveal contract is [data-reveal] + .is-lit, driven by motion.js. Targets
ship VISIBLE; the hidden pre-reveal state lives behind html.js, so a
crawler or a failed script still sees every word. */
/* ---------------------------------------------------------- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font: 400 17px/1.65 var(--face-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 2px; }
/* --leaf vanishes on the dark grounds; --zest is 9.32:1 there. */
.hd:not(.is-small) :focus-visible, .hero :focus-visible, .stats :focus-visible,
.cta :focus-visible, .ft :focus-visible, .band :focus-visible {
outline-color: var(--zest);
}
/* The condensed header is 94% white, so --zest there is 1.59:1 — a focus
ring nobody can see, failing SC 1.4.11 and 2.4.11. The hover colour was
already guarded for .is-small further down; the focus ring was not. */
.hd.is-small :focus-visible { outline-color: var(--leaf); }
.sr-only {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip {
position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
background: var(--canopy); color: var(--paper);
padding: 12px 18px; font-weight: 600;
transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }
h1, h2, h3 {
font-family: var(--face-display);
font-weight: 800; line-height: .98;
letter-spacing: var(--track-display);
text-wrap: balance;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.mono {
font: 500 11px/1 var(--face-mono);
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.js [data-reveal] {
opacity: 0;
transform: translate(calc(10px * var(--dir)), 30px);
transition: opacity var(--reveal-dur) var(--ease),
transform var(--reveal-dur) var(--ease);
}
.js [data-reveal].is-lit { opacity: 1; transform: none; }
/* #main, not : it is the common ancestor of every [data-reveal] and a
SIBLING of .hd, so clipping here cannot reach the header's position:sticky.
`clip`, not `hidden` — clip never promotes the other axis to auto and never
creates a scroll container. */
#main { overflow-x: clip; }
/* -------------------------------------------------------- buttons ---- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 15px 26px; border: 0; border-radius: 2px;
font: 600 15px/1 var(--face-body); cursor: pointer;
transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
/* --canopy, NOT --grass: white on --grass is 3.29:1 and fails AA. The
approved mockup shipped exactly that bug in its header button. */
.btn-solid { background: var(--canopy); color: var(--paper); }
.btn-solid:hover { background: var(--forest); transform: translateY(-3px); }
.btn-zest { background: var(--zest); color: var(--forest); }
.btn-zest:hover { background: var(--paper); transform: translateY(-3px); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.42); color: var(--paper); }
.btn-ghost:hover { border-color: var(--zest); color: var(--zest); transform: translateY(-3px); }
/* The secondary button on a LIGHT ground. .btn-ghost and .btn-zest are both
dark-ground-only (a white border and a 1.59:1 highlight respectively), so
the product pages had no legal second button until this existed.
--ink on --paper is 16.59:1; --leaf on --paper is 6.11:1. */
.btn-line { border: 1.5px solid var(--line); color: var(--ink); background: var(--paper); }
.btn-line:hover { border-color: var(--leaf); color: var(--leaf); transform: translateY(-3px); }
/* --------------------------------------------------------- header ---- */
.hd {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
padding: 18px var(--pad);
transition: padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.hd.is-small {
padding: 9px var(--pad);
background: rgba(255,255,255,.94);
backdrop-filter: blur(14px);
box-shadow: 0 1px 0 var(--line);
}
/* Product and contact pages begin on a light surface. Keeping their header
transparent made the white primary navigation disappear until the visitor
scrolled, which is an especially poor first impression on a catalogue. */
.hd--solid {
background: rgba(255,255,255,.97);
box-shadow: 0 1px 0 var(--line);
}
.hd-mark { display: flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.hd-mark img {
height: 52px; width: auto; border-radius: 50%;
background: var(--paper); padding: 3px;
box-shadow: 0 2px 14px rgba(0,0,0,.18);
transition: height .45s var(--ease), box-shadow .45s var(--ease);
}
.hd.is-small .hd-mark img { height: 40px; box-shadow: none; }
.hd-nav, .hd-lang { display: flex; gap: clamp(12px, 2vw, 26px); align-items: center; }
.hd-nav { margin-inline-start: auto; }
.hd-nav a, .hd-lang a {
font: 600 12.5px/1 var(--face-body);
letter-spacing: .05em; text-transform: uppercase;
color: rgba(255,255,255,.86);
transition: color .45s var(--ease);
}
.hd.is-small .hd-nav a, .hd.is-small .hd-lang a { color: var(--ink-soft); }
.hd--solid .hd-nav a, .hd--solid .hd-lang a { color: var(--ink-soft); }
.hd-nav a:hover, .hd-lang a:hover { color: var(--zest); }
.hd.is-small .hd-nav a:hover, .hd.is-small .hd-lang a:hover { color: var(--leaf); }
.hd--solid .hd-nav a:hover, .hd--solid .hd-lang a:hover { color: var(--leaf); }
.hd-lang a[aria-current="true"] { color: var(--paper); font-weight: 700; }
.hd.is-small .hd-lang a[aria-current="true"] { color: var(--ink); }
.hd--solid .hd-lang a[aria-current="true"] { color: var(--ink); }
/* Arabic header type. Two separate corrections, and the first is the bug:
`line-height: 1` makes the line box exactly the font size, which is enough
for Figtree and not for IBM Plex Sans Arabic — the ج of المنتجات and the ص
of اتصل both drop well below the baseline and were being cut off. Leading,
not a smaller size, is what fixes clipping; shrinking alone just clips
proportionally.
The size step-down is the second, independent correction: Arabic sets
optically larger than Latin at an identical px value, so 12.5px reads
heavier here than it does on /en/ and /tr/.
Scoped to [dir="rtl"] so the Latin trees keep the setting the design was
drawn at. The header's height comes from the 52px logo, so the taller line
box changes no layout. */
[dir="rtl"] .hd-nav a,
[dir="rtl"] .hd-lang a { font-size: 11.5px; line-height: 1.7; }
.hd-lang {
padding-inline-start: clamp(12px, 2vw, 22px);
border-inline-start: 1px solid rgba(255,255,255,.28);
}
.hd.is-small .hd-lang { border-inline-start-color: var(--line); }
.hd--solid .hd-lang { border-inline-start-color: var(--line); }
.hd .btn { padding: 11px 20px; font-size: 13px; }
/* Below 700px the header WRAPS to a second row rather than hiding anything.
No hamburger: a scripted disclosure would regress the rule this site holds
everywhere else — a crawler or a failed script still reaches every word.
The first build hid .hd-nav outright here and shipped six pages with no
route at all to Products or Contact. */
@media (max-width: 700px) {
.hd { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
.hd-nav { margin-inline-start: 0; order: 3; width: 100%; flex-wrap: wrap; gap: 14px; }
.hd-lang { margin-inline-start: auto; }
.hd-nav a { font-size: 11.5px; }
/* An explicit RTL rule is required, not optional: `[dir="rtl"] .hd-nav a`
above outranks a bare `.hd-nav a` on specificity, so the Latin
step-down would never have reached the Arabic tree. This is also where
clipping bit hardest — the nav wraps to its own row here, so a clipped
descender lands against the row below it. */
[dir="rtl"] .hd-nav a { font-size: 10.5px; }
.hd-mark img { height: 42px; }
}
/* ----------------------------------------------------------- hero ---- */
.hero {
position: relative; min-height: 100svh; display: grid;
background: var(--forest); overflow: hidden; isolation: isolate;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slides [data-slide] { position: absolute; inset: 0; opacity: 0; transition: opacity var(--slide-fade) var(--ease); }
.hero-slides [data-slide].is-on { opacity: 1; }
.hero-slides img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.06);
transition: transform var(--kenburns) linear;
}
.hero-slides [data-slide].is-on img { transform: scale(1.16); }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero::before {
background: linear-gradient(calc(100deg * var(--dir)),
rgba(6,26,13,.94) 0%, rgba(6,26,13,.72) 38%, rgba(6,26,13,.18) 72%, rgba(6,26,13,.42) 100%);
}
.hero::after {
inset-block-start: auto; height: 42%;
background: linear-gradient(transparent, rgba(6,26,13,.82));
}
/* No photography yet: the scrim has nothing to sit on, so the ground carries
it. This is the state the site ships in until the client sends images, and
it has to read as deliberate rather than broken. */
.hero[data-no-photography]::before {
background: radial-gradient(120% 90% at calc(50% + 22% * var(--dir)) 0%, var(--canopy), var(--forest) 62%);
}
.hero-inner {
position: relative; z-index: 2; align-self: end; width: 100%;
padding-block: calc(var(--header-h) + 40px) clamp(64px, 12vh, 132px);
}
.hero-kicker { color: var(--zest); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; min-height: 11px; }
.hero-kicker::before { content: ""; width: 34px; height: 2px; background: var(--zest); flex: 0 0 auto; }
/* `.hero-h`, NOT `.hero h1`. The visible headline is a
(the page's real
is .sr-only, because the headline text changes per slide and a
document outline must not). The mockup's selector was `.hero h1` and was
lifted verbatim onto restructured markup, so it matched NOTHING: the
headline rendered at inherited 17px in --ink on --forest, 1.12:1, on all
three homepages. Font-family/weight/tracking come from the h1,h2,h3 rule
above, which the fallback
still matches; the
needs them stated. */
.hero-h {
font-family: var(--face-display);
font-weight: 800; line-height: .98;
letter-spacing: var(--track-display);
text-wrap: balance;
font-size: clamp(44px, 8.6vw, 124px);
color: var(--paper);
max-width: 15ch;
margin-bottom: 22px;
}
/* Exactly one headline is ever visible. hero.js hides the authored fallback
the moment it writes a real one, and shows it again if it cannot. Doing
this in CSS behind html.js was rejected: it would blank the headline
whenever the script fails, which is the failure Ruling 17 exists to stop. */
.hero-h[hidden] { display: none; }
/* ------------------------------------------- Arabic typography ---- */
/* Every leading decision for the RTL tree lives here, because they all fix
ONE defect measured across the three Arabic pages: this stylesheet sets
display type at `line-height: .98` and UI type at `/1`, which is a line box
no taller than the font. Bricolage Grotesque and Figtree have nothing below
the baseline to lose. IBM Plex Sans Arabic does — ع, ج, ص, م and ن all
descend — so the glyphs overflowed their line box, and wherever an ancestor
was `overflow: hidden` (.hero, .band, .cta, .cat, .prod) they were CUT.
Measured before, at 1280px: 26 Arabic elements overflowed, worst 22.8px on
a section h2 (88px of ink in a 65px box). The audit that produced those
numbers is in the README's browser checklist.
Sizes drop as well as leading only where Arabic genuinely swamped a frame
drawn for Latin: Arabic sets optically larger per em and has no uppercase,
so an identical px value reads roughly a third bigger. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 { line-height: 1.34; }
[dir="rtl"] .hero-h {
font-size: clamp(30px, 5.4vw, 74px);
line-height: 1.34;
/* ch is the width of "0", so the Latin 15ch wraps Arabic far too early. */
max-width: 18ch;
}
[dir="rtl"] .hero-kicker,
[dir="rtl"] .mono { line-height: 1.5; }
[dir="rtl"] .btn { line-height: 1.5; }
[dir="rtl"] .stats .n { line-height: 1.15; }
[dir="rtl"] .cat h3 { font-size: 22px; line-height: 1.3; }
[dir="rtl"] .cat-blurb { line-height: 1.6; }
[dir="rtl"] .prod h3 { font-size: 18px; line-height: 1.35; }
[dir="rtl"] .prod-desc { line-height: 1.75; }
[dir="rtl"] .chip { line-height: 1.6; }
[dir="rtl"] .ft h3 { line-height: 1.5; }
[dir="rtl"] .spec-row { line-height: 1.6; }
/* Arabic tashkeel stack ABOVE the letter, so a heading carrying a shadda
("مسجَّلة") has a taller ascent than the same words without one — measured
62.6px of ascent in an 89.2px box, reaching 2.2px past the top. The kicker
above it sat at a 0px gap, so the two could touch. This is the mirror of
the descender problem and needs space, not leading. */
[dir="rtl"] .sec-head .k { margin-block-end: 8px; }
/* ------------------------------------------ Turkish typography ---- */
/* Same defect as the Arabic block above, smaller in degree, and it needed
measuring to find because Turkish and English share a font stack and a
direction — nothing about the markup suggests they would differ.
They differ because of the diacritics. ş and ç hang a cedilla BELOW the
baseline; İ and ğ add a dot or breve ABOVE it. Measured at 1280px:
/tr/ h2 "Her ürün hattı..." 62px of ink in a 55.2px box
/tr/contact/ h1 "İletişim" 39px of ink in a 33.3px box
Seven elements on /tr/ were being CUT inside .band, .cta, .cat, .prod
and .hero.
ENGLISH IS NOT TOUCHED, and that is a measurement not an assumption: all
three /en/ pages audited 0 overflowing, 0 cut. Bricolage Grotesque and
Figtree were drawn for it and .98 is a deliberate, working choice there.
Scoped to [lang="tr"] so it stays that way. */
[lang="tr"] h1,
[lang="tr"] h2,
[lang="tr"] h3 { line-height: 1.2; }
[lang="tr"] .mono { line-height: 1.45; }
[lang="tr"] .btn { line-height: 1.4; }
[lang="tr"] .ft h3 { line-height: 1.45; }
[lang="tr"] .chip { line-height: 1.45; }
[lang="tr"] .hd-nav a,
[lang="tr"] .hd-lang a { line-height: 1.5; }
.hero-sub { color: rgba(255,255,255,.84); font-size: clamp(16px, 1.5vw, 20px); max-width: 52ch; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
/* Per-word mask reveal, built by hero.js as .rv > span.
A CSS ANIMATION, not a class the script has to remember to add. The first
version started each word at translateY(105%) and revealed it when JS set
.is-lit on the next animation frame — which meant a dropped frame, a
throttled background tab, or any script failure left the entire headline
invisible with no error. `animation ... both` plays once on insertion and
ends at the visible state, so the worst case is a word that appears
without moving. Fail visible, never fail blank. */
.rv { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rv > span { display: inline-block; animation: word-rise .78s var(--ease) both; }
@keyframes word-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
.hero-ghost {
position: absolute; inset-inline-end: var(--pad); inset-block-end: clamp(48px, 9vh, 104px);
z-index: 2; font-family: var(--face-display); font-weight: 800;
font-size: clamp(88px, 16vw, 232px); line-height: .8;
color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22);
pointer-events: none; user-select: none; font-variant-numeric: tabular-nums;
}
.hero-dots {
position: absolute; inset-inline-start: var(--pad); inset-block-end: clamp(24px, 4vh, 46px);
z-index: 3; display: flex; gap: 10px;
}
.hero-dots button {
width: 52px; height: 3px; padding: 0; border: 0; cursor: pointer;
background: rgba(255,255,255,.28); position: relative;
}
/* The bar is 3px tall; this gives it a real 27px tap target without moving
anything visually. */
.hero-dots button::after { content: ""; position: absolute; inset: -12px -3px; }
.hero-dots button i { position: absolute; inset: 0; overflow: hidden; background: var(--zest); transform: scaleX(0); transform-origin: calc(50% - 50% * var(--dir)) 0; }
.hero-dots button.is-on i { animation: dot-fill var(--slide-hold) linear forwards; }
@keyframes dot-fill { to { transform: scaleX(1); } }
/* ---------------------------------------------------------- stats ---- */
.stats { background: var(--forest); color: var(--paper); padding-block: clamp(48px, 7vw, 88px); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(24px, 4vw, 56px); }
.stats .n {
font-family: var(--face-display); font-weight: 800;
font-size: clamp(42px, 5.6vw, 78px); line-height: .9;
color: var(--zest); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
/* .9 above is drawn for big numerals, which have no ascender or descender to
lose. .is-text holds a WORD — and specifically İstanbul, whose dotted İ
overflowed that box by 1.2px on mobile. It appears on all three trees, not
just /tr/, because company facts are carried across trees unchanged, so
this fix is not language-scoped either. */
.stats .n.is-text { font-size: clamp(24px, 3vw, 42px); line-height: 1.15; }
.stats .l { margin-top: 10px; color: rgba(255,255,255,.66); }
/* ------------------------------------------------- page banner ---- */
/* The photographic strip at the head of products.html and of each category
page. Same scrim geometry as .hero, a third of the height: these pages are
destinations a buyer has already chosen, so the frame introduces them
rather than selling to them. */
.phero {
position: relative; background: var(--forest); color: var(--paper);
overflow: hidden; isolation: isolate;
min-height: clamp(300px, 40vh, 440px); display: grid; align-items: end;
}
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(calc(100deg * var(--dir)),
rgba(6,26,13,.95) 0%, rgba(6,26,13,.82) 44%, rgba(6,26,13,.5) 100%);
}
.phero-in {
position: relative; z-index: 2; width: 100%;
padding-block: calc(var(--header-h) + 34px) clamp(36px, 6vh, 68px);
}
.phero h1 { font-size: clamp(34px, 5.6vw, 76px); color: var(--paper); max-width: 17ch; }
.phero p { color: rgba(255,255,255,.84); max-width: 58ch; margin-top: 18px; }
[dir="rtl"] .phero h1 { font-size: clamp(26px, 4.4vw, 56px); max-width: 20ch; }
/* ------------------------------------------------- breadcrumbs ---- */
/* A real