/* ========================================================================== LETTUCE — DESIGN TOKENS Single source of truth. Every colour, size and position lives here. Do not hard-code values in styles.css. S6 — RESPONSIVE SCALE --------------------- styles.css sets the root font-size fluidly: html { font-size: clamp(0.625rem, calc(100vw / 85.375), 1rem); } 85.375 = 1366/16, so at the artboard width the root is exactly 16px and every rem token below resolves to its measured pixel value. Narrower viewports scale the whole macro frame proportionally; the clamp floor (10px, k = 0.625) is reached at 854px, below which layout must REFLOW rather than scale — that is what the media queries in styles.css do. Bounds are in rem, not px, so a reader who has raised their browser's default font size still gets a larger site. px = fixed, does not scale (the three islands, see below) rem = scales with the root (the macro frame) THREE ISLANDS opt out of the scale, deliberately: 1. Nav — letter-spaced type in a fixed bar; own breakpoint. 2. CARTA card — card 03 sits at EXACTLY zero overflow with nine ingredients. Scaling its interior re-opens that. 3. Form field — 15px is measured, but iOS Safari force-zooms on focus below 16px; handled by a pointer:coarse exception. ========================================================================== */ :root { /* --- Palette ----------------------------------------------------------- The six fills below are the entire Canva design, extracted from the SVG. The four after them come from the CARTA documents (menu cards). */ --c-black: #000000; --c-white: #ffffff; --c-off-white: #f8f8f8; --c-cream-1: #faf7f3; --c-cream-2: #fdf8f3; --c-cream-3: #fff7ed; --c-ghost: #d6d6d6; /* NOSOTROS wordmark — baked into the WebP asset, recorded here for reference only */ --c-card-bg: #ede9dd; /* CARTA card stock */ --c-card-ink: #12110d; /* warm near-black, NOT pure black */ --c-label: #51533e; /* olive — INGREDIENTES/PRECIO */ --c-accent: #a62e2a; /* red — dashes, ADJUNTO, NOTA */ /* Partner brand colours — fixed by Glovo/Uber, not ours to restyle */ --c-glovo: #f5c14e; --c-uber: #4caf66; --c-hero-scrim: rgba(0,0,0,.13); /* measured off the SVG mask */ /* Light veil only — the photograph stays visible, unblurred and uncropped. Matched to the artboard: band reads 148,146,143 / stdev 99 against 150,147,146 / 100. */ --c-carta-scrim: rgba(0,0,0,.30); --c-rule: rgba(18,17,13,.22); /* --- Canvas geometry --------------------------------------------------- The Canva file is 6 slides of 1366x768 stacked = 1366x4608. */ --canvas-w: 1366px; /* reference only; also the >=1366 cap */ --band-h: 47.975rem; /* 767.6px — one artboard slide */ --nav-h: 4.6875rem; /* 75px */ --marquee-h: 3.625rem; /* 58px — artboard is 38.3 and clips the type; opened up per client */ --carta-h: 49.375rem; /* 790px — 730 + 60 for the larger cards */ --gutter: 5.1875rem; /* 83px — section content left/right margin */ --gutter-nav: 4.625rem; /* 74px — nav left */ --gutter-nav-r: 5.125rem; /* 82px — nav right */ /* Centred canvas. At or below 1366 these are simply the plain gutters — a max()/calc() in the common path resolves to a sub-pixel value that shifts image rasterization by 1/255, which the 1366 regression gate catches. The centring override lives in a min-width query in styles.css instead. */ --pad-x: var(--gutter); --pad-nav-l: var(--gutter-nav); --pad-nav-r: var(--gutter-nav-r); --rail-x: var(--carta-rail-x); /* --- Measured component geometry (all from the Canva artboard) --------- */ --carta-rail-x: 4.8125rem; /* 77px — rail runs x77–1278 */ /* CARTA card — ISLAND, fixed px at every width. The rail shows fewer cards as the viewport narrows rather than shrinking the card itself. */ --card-w: 287px; /* 4 across the artboard rail (x77–1278) */ --card-h: 359px; /* 4:5, the CARTA document proportion */ --card-gap: 17.5px; /* Grid columns stay linear (rem), not fr. The whole frame scales by the same root factor, so rem reproduces the artboard EXACTLY at 1366 and stays proportional at every k. fr would consume the 8px of slack the artboard leaves at the right of NOTICIAS (83+391+30+771+83 = 1358, not 1366) and silently widen the large card by 2.7px. */ --pedidos-col: 38.5625rem; /* 617px — form column */ --pedidos-img: 31.625rem; /* 506px — cut-out width */ --pedidos-gap: 4.8125rem; /* 77px */ --news-sm: 24.4375rem; /* 391px */ --news-lg: 48.1875rem; /* 771px */ --news-gap: 1.875rem; /* 30px */ --news-img-h: 26.25rem; /* 420px */ /* --- Type -------------------------------------------------------------- Arimo cap-height ratio = 0.7163, so font-size = measured-cap / 0.7163. */ --ff-sans: 'Arimo', Arial, Helvetica, sans-serif; --ff-mono: 'Cousine', 'Courier New', ui-monospace, monospace; /* Condensed face in the NOTICIAS cards — Archivo Narrow, confirmed by client. */ --ff-cond: 'Archivo Narrow', 'Arial Narrow', Arimo, sans-serif; /* Hero uses the client's LOGO-WHITE.svg, not type. Its artboard is 1440x810 and the lockup's ink sits at x172.08 y310.68, 1102.68 x 230.76. The ink box scales with the frame, so --logo-scale stays the single lever, exactly as documented. */ --logo-scale: 0.727; /* → LETTUCE 801.6w x 167.8, matching the artboard. Still the single lever: change this alone to resize. */ /* Plain rem here. Below the 854 floor the rem freezes while the viewport keeps shrinking, so a vw restatement takes over in a media query at the foot of styles.css. Deliberately NOT min(rem, vw) at :root: a viewport-dependent custom property on the root invalidates the whole document and shifts image rasterization by up to 20/255 across unrelated bands, which the 1366 regression gate catches. */ --logo-art-w: 90rem; /* 1440px */ --logo-ink-x: 10.755rem; /* 172.08 */ --logo-ink-y: 19.4175rem; /* 310.68 */ --logo-ink-w: 68.9175rem; /* 1102.68 */ --logo-ink-h: 14.4225rem; /* 230.76 */ --hero-logo-y: 19.9375rem; /* 319px — cap-top on the artboard */ --hero-scroll-b: 1.75rem; /* 28px */ --fs-hero-scroll: 0.6875rem; /* 11px */ --fs-section: 5.75rem; /* 92px — measured cap-h 66 */ --fs-section-sm: 5.0625rem; /* 81px — NOSOTROS only, measured cap-h 58. Ratio to --fs-section is exactly 0.880434 (81/92); the two must always scale together. */ --fs-copy: 1.3125rem; /* 21px — body copy (NOSOTROS) */ --fs-logo: 2.25rem; /* 36px — measured cap-h 26 */ --fs-nav: 1.625rem; /* 26px — cap-h 20; width-fitted to x517–1284 */ --nav-gap: 1.4375rem; /* 23px */ --fs-marquee: 2.4375rem; /* 39px — cap-h reading was truncated by the artboard clip; width-fitted (~57 chars) */ --marquee-gap: 3.5rem; /* 56px */ --fs-lead: 2.25rem; /* 36px — measured cap-h 26 */ --fs-hint: 0.9375rem; /* 15px — measured cap-h 11 */ --fs-claim: 1.5625rem; /* 25px — measured cap-h 18 */ --fs-claim-sub: 0.9375rem; /* 15px */ --fs-body: 1rem; /* 16px */ --fs-label: 0.6875rem; /* 11px — mono, letterspaced */ /* CARTA band interior spacing */ --carta-head-pt: 5.9375rem; /* 95px */ --carta-lead-mt: 1.25rem; /* 20px */ --carta-hint-mt: 2rem; /* 32px */ --carta-rail-mt: 1rem; /* 16px */ --carta-claim-mt: 0.875rem; /* 14px */ /* Rail arrows. Inverted in S9.1: they were a 42%-opaque DARK circle sitting on the DARK CARTA photograph, so the fill barely separated from the background and only the glyph read. Solid cream + black ink is ~19:1 against anything the photo can do. --rail-btn-off is measured to the button's FAR side, so it has to grow with --rail-btn or the circle kisses the rail edge: 58 - 48 = 10, the same gap the old 48 - 38 gave. */ --rail-btn: 3rem; /* 48px — was 38 */ --rail-btn-off: 3.625rem; /* 58px — was 48; keeps the 10px gap */ --fs-rail-arrow: 1.75rem; /* 28px — was 24, scaled with the button */ --c-rail-btn-bg: var(--c-cream-2); --c-rail-btn-bg-hov: #f0e7db; /* cream, darkened ~6% for the hover state */ --c-rail-btn-ink: var(--c-black); /* CARTA card interior — ISLAND, fixed px. Sized to fit the densest card (03, nine ingredients) at zero overflow. */ --fs-card-title: 16px; --fs-card-body: 10.5px; --fs-card-note: 9px; --fs-card-brand: 8px; --fs-card-foot: 7px; /* --- Shared band rhythm ------------------------------------------------ One token for the vertical padding of CARTA, PEDIDOS, NOTICIAS and NOSOTROS, replacing four values that had drifted to 34/30/90/337 at the bottom. 80px at 1366, 50px at the 10px root floor. This is a DELIBERATE departure from the artboard, approved by the owner — see HANDOFF §4. */ --band-pad-y: 5rem; /* 80px desktop / 50px below the floor */ /* PEDIDOS */ --pedidos-media-h: 43.1875rem; /* 691px */ --plat-py: 1rem; /* 16px */ --plat-px: 1.25rem; /* 20px */ --fs-plat: 1.25rem; /* 20px */ --fs-plat-arrow: 1.0625rem; /* 17px */ /* The salad-bar frame and the cut-out person. In rem, not percentages of the media box: the box and these offsets scale by the same root factor, so the composition is preserved at every width AND reproduces the artboard exactly. Percentages land on 443.99px instead of 444 and resample both images, which the 1366 regression gate catches. */ --pbar-l: 1.125rem; /* 18px */ --pbar-w: 27.75rem; /* 444px */ --pbar-h: 41.375rem; /* 662px */ --pperson-l: -2.9375rem; /* -47px — breaks out past the left edge */ --pperson-t: 0.25rem; /* 4px */ --pperson-w: 19.8125rem; /* 317px */ /* Form — ISLAND, fixed px (see pointer:coarse block in styles.css) */ --fs-field: 15px; --fs-submit: 17px; --fs-legal: 9.5px; --field-gap: 26px; --field-mb: 12px; /* NOTICIAS */ --news-grid-mt: 0.5625rem; /* 9px */ --fs-news-title: 1.5625rem; /* 25px */ --fs-news-body: 1.0625rem; /* 17px */ --news-pad-t: 1.375rem; /* 22px */ --news-pad-x: 1.5rem; /* 24px */ --news-pad-b: 1.625rem; /* 26px */ /* NOSOTROS */ --ghost-w: 106.25rem; /* 1700px */ --nosotros-copy-w: 38.75rem; /* 620px */ --nosotros-copy-mt: 2.125rem; /* 34px */ /* FOOTER */ --footer-pb: 2.875rem; /* 46px */ --footer-max: 56.25rem; /* 900px */ --fs-footer-claim: 1.625rem; /* 26px — was 23 */ --fs-footer-sub: 0.9375rem; /* 15px — was 13 */ --fs-footer-legal: 0.75rem; /* 12px — was 11 */ /* Footer-scoped label size. The footer's DÓNDE/HORARIO labels use .label, which reads --fs-label — the SAME token that sizes the CARTA card's INGREDIENTES labels and every form label. Raising that globally would resize the cards (and card 03 sits at exactly zero overflow). Hence a separate token, applied by a `.footer .label` rule in styles.css. */ --fs-footer-label: 0.75rem; /* 12px */ /* --- S6 reflow --------------------------------------------------------- Values used only once the frame stops scaling and the layout reflows. The stacked states have no artboard counterpart, so these are chosen, not measured — each is noted with its reasoning. */ --nav-h-m: 56px; /* roomier bar so a 44px toggle sits comfortably */ --fs-nav-panel: 22px; /* overlay menu — fixed, not scaled */ --nav-item-py: 12px; /* 22 + 2x12 = 46px tap target */ --nav-panel-pt: 18px; --toggle-size: 44px; /* minimum comfortable tap target */ --toggle-bar-w: 22px; --toggle-bar-h: 2px; --toggle-bar-gap: 7px; --gutter-phone: 20px; /* the scaled 51.9px gutter eats 14% of a 375 screen */ --rail-x-phone: 20px; /* see the phone query: it yields further when the viewport cannot hold a whole card */ --fs-section-phone: 52px; /* NOSOTROS is the widest heading: 526.5 @92px. At 52 x 0.880434 = 45.8px it measures 262px, inside the 280px available at 320 wide. */ --tap-min: 44px; --fs-field-touch: 16px; /* iOS Safari force-zooms on focus below 16px */ /* PEDIDOS media, stacked. Percentages here (unlike the desktop rem values) because the box becomes fluid and the composition must scale with it. */ --pbar-l-s: 3.557%; /* 18 / 506 */ --pbar-w-s: 87.747%; /* 444 / 506 */ --pbar-h-s: 95.803%; /* 662 / 691 */ --pperson-l-s: -9.289%; /* -47 / 506 */ --pperson-t-s: 0.579%; /* 4 / 691 */ --pperson-w-s: 62.648%; /* 317 / 506 */ /* Cap the stacked media so the person's break-out still lands on-screen: boxW x (0.5 + 0.09289) <= 50% -> boxW <= 84.3% */ --pedidos-media-s: min(var(--pedidos-img), 84%); --pedidos-h-mb: 1.25rem; /* 20px — PEDIDOS heading, its own token */ /* NOTICIAS, stacked: one shared crop for both cards — see the note in the <=800 query for why they must not keep their own source ratios. */ --news-ar-stack: 16 / 9; --lh-tight: 0.95; --lh-snug: 1.2; --lh-body: 1.55; --ls-label: .12em; --ls-tight: -.02em; /* --- Motion ------------------------------------------------------------ VOCABULARY AGREED, NOT YET APPLIED. Nothing in styles.css animates yet; S8 implements section by section, each set confirmed by the owner first. Direction: restrained by default, with three signature moments. default fade + --reveal-y rise, --dur-base, --ease-out, once on enter signature marquee scroll · NOSOTROS ghost parallax · CARTA card flip Rules that apply to every animation, no exceptions: - transform and opacity only (no layout-affecting properties, CLS stays 0) - the hero wordmark never animates on load (it is the LCP element) - scroll triggers via IntersectionObserver, never scroll listeners - reveals fire once and stay; no re-animation on scroll-back - everything degrades through prefers-reduced-motion below */ --dur-fast: 180ms; --dur-base: 320ms; /* default reveal */ --dur-slow: 640ms; --ease-out: cubic-bezier(.22,.61,.36,1); --ease-inout: cubic-bezier(.65,.05,.36,1); --reveal-y: 12px; /* default reveal travel */ --reveal-stagger: 60ms; /* between siblings, where a section uses one */ /* --- S7 — the vocabulary above, APPLIED --------------------------------- S7 pulled the whole S8 motion set forward: interaction motion, the marquee scroll, the default reveals and the NOSOTROS ghost parallax, plus the nav colour/hide behaviour. The rules above are unchanged and still bind; the values below are what applies them. ONE DOCUMENTED EXCEPTION to "scroll triggers via IntersectionObserver, never scroll listeners": nav.js uses a passive scroll listener, because a direction-aware bar (hide on the way down, return on the way up) cannot be expressed with IntersectionObserver at all. It sets a flag and does every read and write inside requestAnimationFrame. Reveals still use IO. This is a reasoned exception, not an oversight — do not "fix" it. */ /* CARTA card flip. Perspective sits on .card (the li), never on the rail: a 3D context on a scroll container is where Safari misbehaves. 900px against a 287px card is a ~3.1 ratio — enough depth to read as a flip, shallow enough that the near corner does not smear. */ --card-perspective: 900px; --dur-flip: 520ms; /* between --dur-base and --dur-slow. A card is a large surface; at --dur-base it snaps. */ --drag-threshold: 8px; /* pointer travel that reclassifies a tap as a drag, so a swipe across the rail flips nothing */ /* card-04-600.webp carries 28 rows of pure white at its top edge (measured: row 0 mean 255.0, stdev 0.0) = 3.733% of its height. Anchored at the bottom, scaling by s lifts the top edge by 359(s-1), so s >= 1.0373 clears it; 1.045 leaves ~2.8px of margin. The face's overflow:hidden does the clipping. Cropping the ASSET instead would be no better: 600x722 against a 0.799 card means object-fit:cover crops ~11px horizontally anyway, plus a WebP re-encode of the client's photo. Same precedent as the hero logo — crop with a CSS window, never by editing the file. */ --card-crop-scale: 1.045; /* Marquee. The duration is FIXED, so the item width scales with the root and the perceived speed stays proportional to the frame — which is what we want. ~2340px of track at 1366 over 38s is ~62px/s: slow enough to read a phrase as it passes. */ --dur-marquee: 38s; /* NOSOTROS ghost parallax. Deliberately small: the ghost sits BEHIND the copy, and more travel than this drifts the wordmark into the text block. */ --ghost-parallax-y: 40px; /* --- Nav --------------------------------------------------------------- The artboard's bar is black. The white RESTING state is a deliberate S7 departure from the artboard, confirmed by the owner — the first one in this band. The scrolled palette is byte-identical to the pre-S7 bar, so scrolled == the artboard. */ --nav-bg-top: var(--c-white); --nav-ink-top: var(--c-black); --nav-bg-scrolled: var(--c-black); /* == the pre-S7 bar */ --nav-ink-scrolled: var(--c-white); /* == the pre-S7 bar */ --nav-scroll-y: 8px; /* scrollY at which the palette flips */ --nav-reveal-y: 64px; /* how close to the top edge the MOUSE has to come to summon the bar back. Deep enough to hit without aiming, shallow enough that it does not fire while reading. Slightly under --nav-h (75) so the band never reaches past the bar itself. Read by nav.js; no CSS rule consumes it. ⚠ Mouse only — a TAP must never reveal the bar, or it competes with the CARTA card taps. */ --nav-idle-ms: 300ms; /* pause in scrolling before the bar fades out. Short enough to read as "right after you stop". NOT lower: scroll input arrives in bursts, and a mouse wheel turned notch-by-notch leaves gaps of ~50-150ms that a timer cannot tell from a full stop. Below ~150ms the bar strobes while someone is still actively scrolling. 300ms clears that floor with headroom. Read by nav.js; no CSS rule consumes it. ⚠ TWO-SIDED CONSTRAINT on the test suites: hide assertions must wait LONGER than this, and "still visible after scrolling" assertions must wait SHORTER. At 300ms the safe band is roughly 100ms-2500ms and BOTH edges are live. See HANDOFF section 15. */ --nav-hide-dur: var(--dur-fast); /* 180ms. The hide/show only. The COLOUR flip deliberately stays on --dur-base, so the palette behaviour the 1366 gate already verified is untouched. Resolves through --dur-fast, which the reduced-motion block below already collapses to 1ms, so no extra handling is needed. */ /* --- Form states ------------------------------------------------------- The form is a px island (see the header), so these are px like --fs-legal. The idle underline keeps its measured --c-black: changing it would alter the resting render, which the 1366 gate would (correctly) reject. */ --c-field-focus-bg: rgba(0,0,0,.028); /* faint wash; the site-wide :focus-visible ring still carries the actual focus indication */ --c-error: var(--c-accent); --c-success: #2f6b3f; /* 6.37:1 on white. --c-uber is 2.75:1 and cannot carry text — this is not that green. */ --fs-err: 11.5px; --fs-status: 14px; /* --- politica-privacidad.html ------------------------------------------ A text page with no artboard counterpart, so these are chosen for readability rather than measured. The column is capped at 68rem because a legal text set the full 1366 width is close to unreadable. */ --legal-max: 46rem; /* 736px — ~85 characters at --fs-legalpage-body */ --legal-pt: 3.5rem; /* 56px, on top of the nav height */ --legal-pb: 5rem; /* 80px */ --legal-gap: 2rem; /* 32px between sections */ --fs-legalpage-h2: 1.25rem; /* 20px */ --fs-legalpage-body:1.0625rem; /* 17px */ /* --- FAQ (S9.3) -------------------------------------------------------- Measured off FAQ-section.JPG (1700x952) and scaled by 1366/1700 = 0.803529. The design is one 1366x768 artboard slide: 952 * 0.803529 = 765.0. The design's own margins are 72.3 left / 102.9 right — an asymmetry that is almost certainly a Canva export artifact, not intent. The band therefore uses the site's shared --pad-x (83px) on both sides, and the three measured column widths are scaled to the 1200px that leaves: image 374.4 : gap 42.5 : panel 774.6 (design, sums to 1191.5) image 377 : gap 43 : panel 780 (x 1.00713, sums to exactly 1200) */ --faq-img: 23.5625rem; /* 377px */ --faq-gap: 2.6875rem; /* 43px */ --faq-col: 48.75rem; /* 780px */ --faq-panel-pad: 2.25rem; /* 36px (was 48). S9.6: tighter, the section is meant to be compact now. */ --faq-pad-y: 3.5rem; /* 56px — the FAQ band's own vertical padding, less than --band-pad-y (80). Owner wants this section to stop filling a whole screen. */ --faq-sub-mt: 0.625rem; /* 10px */ --faq-grid-mt: 1.25rem; /* 20px (was 28) */ --faq-more-mt: 1.25rem; /* 20px (was 28) */ --faq-img-h: 18rem; /* 288px — MIN height of the photo column. It fills the grid row (which the capped questions panel sets); this is only the floor. Must stay below the panel's max-height (55vh, set on .faq__list) so no gap opens. */ --lh-faq-q: 1.08; /* NOT --lh-tight (0.95). Section headings are one line, so 0.95 is fine there; a question that wraps to two lines at 0.95 puts an accented cap (PROTEÍNA?) hard against the line above it. 1.08 keeps the condensed, tight feel and clears the accents. */ --faq-qa-gap: 0.875rem; /* 14px (was 24) between one question and the next */ --faq-a-mt: 0.375rem; /* 6px between a question and its answer */ /* The design's heading measures cap 83.6 at 1366, i.e. ~117px. It is set at --fs-section (92px) instead, deliberately: every section heading on this site is 92px (NOSOTROS's 81px is the one measured exception, decision #7), and a 117px heading would be the largest type on the page. Flagged for Antonio's review rather than silently chosen — it is one token to change. */ --fs-faq-q: 1.375rem; /* 22px — Archivo Narrow 700 (was 28). S9.6: the owner asked for smaller FAQ type. */ --fs-faq-a: 1.0625rem; /* 17px (was 21). Smaller FAQ answers, S9.6. */ --fs-faq-sub: 0.8125rem; /* 13px — the line under the heading */ --fs-faq-more: 0.8125rem; /* 13px — small print, same family as --fs-legal */ /* Phone restatements. Same problem the footer had (HANDOFF section 16): below the 854 floor these rem values collapse to ~62% and the answers would set at 13px. Restated in px inside the max-width:854px block. */ --fs-faq-q-sm: 18px; --fs-faq-a-sm: 14px; --fs-faq-sub-sm: 12px; --fs-faq-more-sm: 12px; --faq-panel-pad-sm:24px; --faq-img-h-sm: 260px; /* the 1414x2000 portrait would otherwise eat a whole phone screen before the first answer */ } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --reveal-y: 0px; --reveal-stagger: 0ms; /* S7 additions. --dur-marquee is NOT collapsed to 1ms: that would spin the track at ~2.3m px/s rather than stop it. The marquee is stopped with animation:none in styles.css instead, which is the only correct move. */ --dur-flip: 1ms; --ghost-parallax-y: 0px; } }