/* ========================================================================== FlowThrough · round 3 · design tokens (design/round-3/tokens.css) Drop-in file: the build imports it verbatim as public/3/tokens.css. Naming follows public/a/styles.css. Starting values from design/round-3-plan.md Appendix A; every departure carries its reason in a comment. Palette: Paula's steel blue, olive and grey (paula-palette-2026-09-24.png) on cool white; the earth brown #8E7139 is out of the interface (round-2-feedback.md §8); no ivory, no purple, no navy. ========================================================================== */ :root { /* ---------- Colour ---------- Contrast figures are WCAG 2 ratios on the ground named; "measured" means the value depends on the photo and verify.py check 12 measures it on the built page. */ --steel: #659BC7; /* Paula's blue as she sent it: the reference of the steel family (--steel-deep, --steel-wash), not painted itself (spec §6). Never text: 2.97:1 on white */ --steel-deep: #2F6A9A; /* links; button grounds under white text: 5.8:1 */ --steel-deeper: #285C87; /* hover and active of --steel-deep */ --steel-wash: #EAF1F7; /* the contact panel ground; ink on it 12.8:1 (computed) */ --aqua-pale: #F0F7F9; /* gradient end for light surfaces */ --olive: #7D8903; /* Paula's green. Display-size accent only (3.9:1 on white); never body text; the marquee's dots */ --olive-text: #5E6802; /* olive as text at any size: 6.1:1 on white (the short heading line, the marquee items and its toggle; 5.3:1 on --sage-tint) */ --sage-tint: #EEF1DC; /* olive softened to a ground tint (the marquee band) */ --grey: #A7A8AA; /* Paula's grey. Hairlines and the pause control ring; never text (2.38:1) */ --hair: rgba(167, 168, 170, 0.35); --ink: #1F2A33; /* cool blue-black text: 14.6:1 on white */ --muted: #5F6B73; /* secondary text: 5.5:1 on white, 5.2:1 on --ground-soft */ --ground: #FFFFFF; --ground-soft: #F6F9FB; /* cool near-white; never ivory (#F7F6F2 was round 2's finance tell) */ --on-media: #FFFFFF; /* text over T1 media */ --on-media-soft: rgba(255, 255, 255, 0.85); /* Scrims: blue-black (the ink's hue, 210 degrees, chroma under 5 percent), never a blue band (plan §5: no navy band). T1 bottom gradient tops out at 55 %, inside the 60 % ceiling; the header scrim is a short top fade for the white nav over the hero. */ --scrim-dark: linear-gradient(180deg, rgba(14, 20, 26, 0) 35%, rgba(14, 20, 26, 0.55) 100%); --scrim-top: linear-gradient(180deg, rgba(14, 20, 26, 0.35), rgba(14, 20, 26, 0) 120px); --scrim-top-light: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 120px); /* the header's ground over a T2 (light) hero, so the ink nav text keeps 4.5:1; measured by the comp; the fallback when a photo still fails is a solid header from scroll 0 */ --scrim-light: rgba(255, 255, 255, 0.82); /* T2: the light plate behind ink text */ --focus: #2F6A9A; --focus-on-media: #FFFFFF; /* ---------- Type ---------- One family, Manrope (self-hosted variable woff2 at publication; the preview comp may load it from Google Fonts, logged as a deviation). 300 for display, 400 for body, 600 for nav and buttons. */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fw-display: 300; --fw-body: 400; --fw-ui: 600; --fs-hero: clamp(2.375rem, 1.3rem + 4vw, 4.5rem); /* 38 px at 390, 51 at 768, 72 at 1440 */ /* Departure from Appendix A (2.5rem floor, 41 px at 390): the chosen headline's first line ("Donde antes había") is 17 characters; at 390 with 20 px gutters it fits on one line at 38 px and wraps to four lines at 41 px. The comp measures the real line count; three lines at 390 is the rule (plan §5). */ --lh-hero: 1.05; --ls-hero: -0.015em; --fs-line: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); /* 28 px at 390, 44 at 1440 */ --lh-line: 1.12; --fs-para: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem); /* 19 px at 390, 24 at 1440 */ --lh-para: 1.5; --fs-body: 1.0625rem; /* 17 px */ --lh-body: 1.6; --fs-nav: 0.9375rem; /* 15 px */ --fs-btn: 1rem; --fs-small: 0.875rem; /* 14 px: footer, form notes */ --fs-marquee: 0.9375rem; /* 15 px muted, plan §5 */ --fs-h2-soft: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); /* the contact heading: 24 px at 390, 36 at 1440 */ --fs-label: 1.0625rem; /* the short heading line of the paragraph ("Quiénes somos"), 600, olive */ --measure: 34em; /* the paragraph */ --measure-display: 14ch; /* the hero line; the comp verifies three lines at 390 */ --measure-line: 22ch; /* block lines: all three final lines set in two lines at 1440 and at 390 (storyboard, measured); 18ch gave up to four */ /* ---------- Layout ---------- The same-position rule (plan §5, rubric L12): the hero and the three blocks place their .copy box with the same left edge (--text-x), the same width (--copy-w) and the same bottom offset (--text-bottom). */ --gutter: clamp(20px, 5vw, 72px); --wrap: 1240px; --sp-section: clamp(96px, 12vh, 160px); --bar-h: 0px; /* the preview bar; app.js measures it, as public/c/app.js does */ --header-h: 72px; /* 64 px below 768 (styles.css sets it in the media query) */ --hero-h: clamp(560px, calc(100svh - var(--bar-h)), 1000px); /* Departure from Appendix A ("100svh clamped"): the bar is subtracted so the hero's bottom is the viewport's bottom under the sticky bar; otherwise the text block sits below the fold at 390 (the bar is about 160 px tall today and about 90 px after the Gate B push). */ --block-h: clamp(560px, 85svh, 820px); --block-h-sm: 75svh; /* below 768, with the portrait crop */ /* One alignment value for the whole page. The text of the hero and the blocks, the paragraph, the contact panel and the footer all start at --text-edge: the gutter plus the copy padding, or the centred wrap's left edge on wide screens, whichever is larger (104 px at 1440, 20 at 390, 340 at 1920). The storyboard measured a 4 px mismatch between a centred 1240 wrap (100) and the media text edge (104); this removes it. */ --text-edge: max(calc(var(--gutter) + var(--copy-pad)), calc((100vw - var(--wrap)) / 2)); --text-x: calc(var(--text-edge) - var(--copy-pad)); /* the .copy box left; its padded text starts at --text-edge */ --text-bottom: clamp(48px, 10vh, 112px); --copy-w: min(100% - 2 * var(--gutter), 680px); /* 350 px at 390, 680 px at 1440 */ --copy-pad: 32px; /* inner padding of .copy in BOTH treatments, so the text edge is identical whether the plate (T2) is visible or not (T1); 0 below 768, where the T2 plate runs edge to edge */ --plate-pad-sm: 24px; /* below 768 the T2 plate is flush with the section bottom and keeps 24 px above the text; the text still ends --text-bottom above the bottom, the same as T1 */ /* ---------- Shape ---------- */ --r-btn: 999px; /* pill everywhere (Revolut's shape; Paula's reference), one value */ --r-md: 16px; /* the contact panel and the light plate */ --r-input: 12px; /* form fields */ --btn-h: 52px; /* 48 px below 768 */ /* ---------- Motion ---------- Only imagery moves (loop or Ken Burns, fades, the marquee). Under prefers-reduced-motion every duration is 0 and loops show the poster (styles.css sets the reduced block). */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-reveal: 600ms; --dur-fade: 300ms; --kb-dur: 14s; /* Ken Burns, scale 1 to 1.06 */ --marquee-dur: 52s; /* one pass; pauses on hover and by its toggle */ --parallax: 0; /* closed at 0 for both builders (validation of 2026-09-27, spec §7); the 0.08 allowance is withdrawn */ } @media (max-width: 767px) { :root { --header-h: 64px; --btn-h: 48px; --copy-pad: 0px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-reveal: 0ms; --dur-fade: 0ms; --kb-dur: 0s; --marquee-dur: 0s; --parallax: 0; } } /* ========================================================================== The contrast rule for text over media (plan §5), measured per candidate by the hero comp and by verify.py 12. Inside the .copy box, after the scrim: for T1 (white text) the lightest 10 % of pixels (the 90th-percentile luminance) must give 4.5:1 against white; for T2 (ink text on --scrim-light) the darkest 10 % (the 10th percentile) must give 4.5:1 against --ink. 3:1 is the floor for the display line at 24 px and above; 4.5:1 is the target. If a candidate cannot reach it with T1 at 60 % scrim opacity, do not darken further: switch to T2 or reject the image. The only blue under white type is --steel-deep on buttons. Treatment per section is declared in the markup as data-treatment="t1" or "t2". ========================================================================== */ /* ========================================================================== Alternate colour set (plan Appendix A): a quick swap if Paula finds the interface too cold or misses the warmth she associated with the brown. It keeps her three colours, moves a touch of sage into the marquee band and the secondary text, and makes the deep blue a little lighter and closer to her steel; the grounds stay cool (see --ground-soft). Brown stays out in both sets. To swap: replace the eight lines above with these. :root { --steel-deep: #3D78A9; links and buttons under white text: 4.7:1 --steel-deeper: #2F6A9A; hover --steel-wash: #E6EFF6; contact panel --sage-tint: #E9EED3; marquee band, a little more present --ground-soft: #F6F9FB; the main set's cool near-white: the first alternate, #F7F9F6, sat only 1.4 dE (CIE76) from round 2's ivory #F7F6F2, the finance tell --muted: #5B6A6C; 5.6:1 on white --scrim-light: rgba(246, 249, 251, 0.84); the plate in the same cool near-white --olive-text: #5E6802; unchanged } ========================================================================== */