/* ========================================================================== rimo.coffee — the one stylesheet Prototype, checkpoint 2 (phone and desktop). Hand-written, no build step. SWITCHES — one word each in , in en/index.html: bosque the Bosque field behind the farm strip (ON) seam the mark's cross as a tick on section rules (ON) sans-body running text in Hanken Grotesk, headings and farm names in Spectral (ON) sans-heads the reverse: headings and farm names in Hanken Grotesk, text in Spectral (OFF). Use sans-body OR sans-heads, not both; neither gives the all-Spectral page of checkpoint 1 mark-large the logo drawn larger at the top of the page (OFF, compare) mark-web WEB-ONLY logo, descriptor 0.31 cap (ON, trial) mark-web-35 WEB-ONLY logo, descriptor 0.35 cap (OFF, compare) The menu bar is at the top. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens Tier 1: brand colours. Fixed. Never altered, never given opacity. Tier 2: roles. Every colour on the page is one of these, and every role points at a brand colour. No role invents a hue. There is no dark mode: the brand never inverts with the OS theme. -------------------------------------------------------------------------- */ :root { --cielo: #152441; --bosque: #1d4a46; --laguna: #2b8b83; --papel: #f5f1e8; --tinta: #141414; --surface: var(--papel); --text: var(--tinta); /* Tinta on Papel 16.34:1 */ --heading: var(--bosque); /* Bosque on Papel 8.79:1 */ --link: var(--bosque); --link-line: var(--laguna); /* Laguna on Papel 3.64:1: passes 1.4.11 as a non-text indicator; never used as text */ --rule: var(--laguna); /* hairlines: Laguna as an accent only */ --focus: var(--laguna); /* focus ring 3.64:1 on Papel (1.4.11, 2.4.7) */ --field: var(--bosque); /* the one dark field (switch: bosque) */ --on-field: var(--papel); /* Papel on Bosque 8.79:1. Laguna on Bosque is 2.42:1 and fails 1.4.11, so on the field the underlines and the focus ring turn Papel */ --serif: 'Rimo Spectral', Georgia, 'Times New Roman', serif; --sc: 'Rimo Spectral SC', Georgia, 'Times New Roman', serif; --sans: 'Rimo Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --bar: 50px; /* menu bar height */ color-scheme: light; } /* -------------------------------------------------------------------------- 2. Fonts — self-hosted, SIL OFL 1.1, no Reserved Font Names (assets/fonts/OFL-Spectral.txt, OFL-HankenGrotesk.txt). 'Rimo Spectral' is a CSS alias only; the fonts themselves are unmodified. Italic is declared but not used yet; a browser downloads a face only when the page actually uses it. -------------------------------------------------------------------------- */ @font-face { font-family: 'Rimo Spectral'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/spectral-300.woff2') format('woff2'); } @font-face { font-family: 'Rimo Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/spectral-400.woff2') format('woff2'); } @font-face { font-family: 'Rimo Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/spectral-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Rimo Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/spectral-500.woff2') format('woff2'); } @font-face { font-family: 'Rimo Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hanken-grotesk-400.woff2') format('woff2'); } @font-face { font-family: 'Rimo Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hanken-grotesk-500.woff2') format('woff2'); } @font-face { font-family: 'Rimo Spectral SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/spectral-sc-400.woff2') format('woff2'); } @font-face { font-family: 'Rimo Spectral SC'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/spectral-sc-500.woff2') format('woff2'); } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--surface); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* anchors and keyboard focus land clear of the fixed bar (SC 2.4.11) */ scroll-padding-top: calc(var(--bar) + 12px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--serif); font-weight: 400; font-size: 1rem; line-height: 1.65; overflow-wrap: break-word; } img { display: block; max-width: 100%; height: auto; } picture { display: block; } a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 0.22em; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .nw { white-space: nowrap; } /* -------------------------------------------------------------------------- 4. The menu bar — fixed, Papel, one Laguna hairline (a rule, 3.64:1) Four items, the headings without "The", so the bar fits 320 px with no hamburger. No current-section highlight: it would need script. -------------------------------------------------------------------------- */ .bar { /* sticky rather than fixed: the bar keeps its own place in the flow, so if a visitor enlarges the text and the four items wrap onto two lines, the page below moves down instead of disappearing under the bar */ position: sticky; z-index: 10; top: 0; min-height: var(--bar); background: var(--surface); border-bottom: 1px solid var(--rule); } .bar ul { list-style: none; margin: 0 auto; padding: 0 18px; max-width: calc(620px + 36px); min-height: var(--bar); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; } .bar a { font-family: var(--sc); font-size: 0.6875rem; /* 11px */ letter-spacing: 0.14em; line-height: 1.2; color: var(--link); text-decoration: none; /* at least 44px tall to tap, inside the 50px bar */ display: flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; } /* the language switch: EN ES at the end of the bar. The current language is plain text marked aria-current and set in the medium weight with the same underline as the current section (not colour alone); the other is a link. */ .bar .lang { display: flex; align-items: center; column-gap: 10px; } .bar .lang span { font-family: var(--sc); font-size: 0.6875rem; letter-spacing: 0.14em; line-height: 1.2; color: var(--link); display: flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 0.3em; } /* Narrow phones: the four sections and both codes do not fit one row (about 313px in Spanish, 290px in English at 11px, against a 284-354px column). Below 400px the bar keeps only the OTHER language's code: the page's own language is the one being read. Below 350px the gaps close from 16 to 8px so Spanish still fits one row at 320px; the 44px-tall tap areas stay separate. */ @media (max-width: 399px) { .bar .lang span[aria-current] { display: none; } .bar .lang { margin-left: auto; } } @media (max-width: 349px) { .bar ul { column-gap: 8px; } } /* The current section, set by assets/js/nav.js while scrolling. Without script nothing is marked, so nothing can go stale. Underline, not colour alone (1.4.1); Laguna on Papel 3.64:1 as a state indicator (1.4.11). */ .bar a[aria-current] { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 0.3em; } /* Hover only where there is a real pointer: on a phone a tapped link keeps :hover until the next tap, which looked like a stale "selected" item. */ @media (hover: hover) and (pointer: fine) { .bar a:hover { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 0.3em; } } /* -------------------------------------------------------------------------- 5. The column One reading column, 620px at most, 18px gutters on a phone. The page is a size container so the farm field can bleed to both edges exactly (100cqi is the page width without the scrollbar, which 100vw is not). -------------------------------------------------------------------------- */ .page { container-type: inline-size; } .col { --gutter: max(18px, (100cqi - 620px) / 2); padding-inline: var(--gutter); } /* the mark, once, large, as artwork: v3 hairline cross, full-bleed, descriptor beside (ba-top). The SVG is the lockup's own box (6.964 x 3.5 cap, no clear space), so its left edge IS the end of the horizontal arm, set flush with the text column. 298.5px wide on a phone = a 150px square, cap 42.9px, descriptor 11.3px; at 320px it shrinks to the 284px column (descriptor 10.7px). Wider up: 398px = a 200px square, descriptor 15px. */ .top { margin: 0; padding: 44px 0 48px; } .top img { display: none; max-width: 100%; } /* the square is 150px on a phone whichever lockup is shown; the lockups differ only in how wide the descriptor makes them (6.964 / 7.420 / 7.819 cap) */ .lk-v3 { width: 298.5px; } .lk-web31 { width: 318px; } .lk-web35 { width: 335px; } body:not(.mark-web):not(.mark-web-35) .lk-v3, .mark-web:not(.mark-web-35) .lk-web31, .mark-web-35 .lk-web35 { display: block; } /* switches: mark-web, mark-web-35 — WEB-ONLY logo variants, a trial pending final sanction, not the v3 identity: the mark is v3's exactly, only the descriptor is larger (0.31 or 0.35 of the letter height instead of v3's 0.2627). With neither switch the page shows the v3 lockup. */ /* switch: mark-large — the same lockup, unchanged, drawn larger: the full column on a phone (354px at 390, descriptor 13.3px), 520px wider up (descriptor 19.6px). No identity change: only the size on the page. */ .mark-large .top img { width: 100%; } /* section rules: a Laguna hairline; switch "seam" adds the tick at centre */ .rule { position: relative; height: 1px; background: var(--rule); } .rule i { display: none; } .seam .rule i { display: block; position: absolute; left: 50%; top: -9px; width: 1px; height: 19px; background: var(--rule); } section { padding-bottom: 30px; } h2 { font-weight: 300; color: var(--heading); font-size: 1.5625rem; /* 25px */ line-height: 1.2; letter-spacing: 0.005em; margin: 30px 0 16px; } p { margin: 0 0 16px; } .photo { margin: 22px 0; } address { font-style: normal; font-size: 0.90625rem; line-height: 1.75; margin: 0 0 16px; } .wa { font-size: 1rem; } .end { height: 60px; } /* -------------------------------------------------------------------------- 6. The farm strip Native horizontal scrolling with snap points. No script: nothing moves unless the visitor moves it. Each slide is narrower than the screen, so the next farm always shows at the right edge; that edge is the swipe cue, and the "n / 6" counter on each farm says where you are. The scrollbar is hidden; swiping, trackpad, and the arrow keys once the strip has focus all still scroll it. -------------------------------------------------------------------------- */ .field { margin: 26px calc(-1 * var(--gutter)) 8px; } .strip { /* x only. overflow-x:auto alone makes overflow-y compute to auto as well, so the strip was a scroll container on BOTH axes: a finger that moved a little vertically could scroll or rubber-band it up and down. overflow-y:hidden takes the vertical axis away from it entirely, so a vertical swipe that starts on the strip goes straight to the page. overscroll-behavior-x keeps a swipe past the first or last farm from chaining to the page or to the browser's back/forward gesture. touch-action is left alone on purpose: "pan-x pan-y" would also switch off pinch-zoom on the strip. */ overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; /* Firefox, and Chrome/Safari that support it */ scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); } .strip::-webkit-scrollbar { display: none; } /* older WebKit/Blink, iOS Safari */ .track { list-style: none; margin: 0; display: flex; gap: 14px; padding: 0 72px 0 var(--gutter); width: max-content; } .slide { width: min(300px, 100cqi - 90px); flex: none; scroll-snap-align: start; } .slide figure { margin: 0; } .slide figcaption { padding-top: 12px; } .nmrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .nm { font-size: 1.125rem; /* 18px */ font-weight: 500; line-height: 1.35; color: var(--heading); margin: 0; } .ct { font-family: var(--sc); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--heading); white-space: nowrap; } .fx { font-size: 0.84375rem; /* 13.5px */ line-height: 1.5; margin: 4px 0 0; } /* switch: sans-heads — section headings and farm names in a sans, for contrast with the Spectral text. One weight only (500). The mark, the menu, the "1 / 6" counters and every line of running text stay Spectral / Spectral SC. */ .sans-heads h2 { font-family: var(--sans); font-weight: 500; font-size: 1.5rem; /* 24px: the sans runs larger than Spectral */ letter-spacing: -0.005em; } .sans-heads .nm { font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; /* 17px */ } /* switch: sans-body — running text in Hanken Grotesk 400, section headings and farm names back in Spectral (300 / 500, as at checkpoint 1). Hanken's x-height is about 10% taller than Spectral's (493 vs 450 units), so the same 16px reads larger; it is set a step down. */ .sans-body { font-family: var(--sans); font-size: 0.96875rem; line-height: 1.6; } .sans-body h2 { font-family: var(--serif); font-weight: 300; } .sans-body .nm { font-family: var(--serif); font-weight: 500; } /* switch: bosque — one dark field in the whole page, under the farms only */ .bosque .field { background: var(--field); color: var(--on-field); padding: 30px 0 26px; margin-bottom: 22px; } .bosque .field .nm, .bosque .field .ct, .bosque .field a { color: var(--on-field); } .bosque .field a { text-decoration-color: var(--on-field); } .bosque .field :focus-visible { outline-color: var(--on-field); } /* -------------------------------------------------------------------------- 7. Wider screens Breakpoints come from where the content breaks, not from device names: 700px the 620px column plus 40px gutters fits: desktop type sizes, the portrait drops to 60% of the column. 960px three farm cards of at least 272px fit side by side with 28px gaps and 44px of field either side: the strip becomes a 3 x 2 contact sheet, nothing to swipe. The sheet grows to 1160px (cards 368px) and is centred on wider screens. 1380px the left margin beside the 620px column is at least 380px: the portrait leaves the column and hangs in it, 300px wide, beside the Owner text, 40px clear of the window edge. -------------------------------------------------------------------------- */ @media (min-width: 700px) { :root { --bar: 58px; } .bar ul { justify-content: flex-start; column-gap: 44px; } .bar a { font-size: 0.8125rem; letter-spacing: 0.2em; } .bar .lang span { font-size: 0.8125rem; letter-spacing: 0.2em; } .bar .lang { margin-left: auto; } .top { padding: 72px 0 64px; } .lk-v3 { width: 398px; } .lk-web31 { width: 424px; } .lk-web35 { width: 447px; } .mark-large .top img { width: 520px; } section { padding-bottom: 44px; } h2 { font-size: 2rem; margin: 44px 0 22px; } p { font-size: 1.09375rem; line-height: 1.7; margin-bottom: 18px; } .photo { margin: 30px 0; } .portrait { width: 60%; } address { font-size: 0.96875rem; line-height: 1.8; } .wa { font-size: 1.09375rem; } .end { height: 90px; } .field { margin-top: 36px; } .track { gap: 28px; } .slide { width: 340px; } .nm { font-size: 1.1875rem; } .sans-heads h2 { font-size: 1.875rem; } .sans-body p { font-size: 1.0625rem; } .sans-heads .nm { font-size: 1.125rem; } .fx { font-size: 0.875rem; } .bosque .field { padding: 56px 0 48px; margin-bottom: 30px; } } /* the contact sheet: the same six figures, laid out as a grid */ @media (min-width: 960px) { .field { --sheet: max(44px, (100cqi - 1160px) / 2); } .strip { overflow: visible; scroll-snap-type: none; scroll-padding-inline: 0; } .track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; width: auto; padding: 0 var(--sheet); } .slide { width: auto; } .ct { display: none; } /* nothing to swipe: no counter */ .bosque .field { padding: 56px 0 60px; } } /* the portrait hangs in the left margin beside the Owner text */ @media (min-width: 1380px) { #owner { display: flow-root; } .portrait { float: left; width: 300px; margin: 6px 0 20px -340px; } }