/* ========================================================================= promotoracultural.org — design system Built from the Promotora Cultural brand: the salmon/slate/blue/sand palette, the river-confluence isotype, and the paper-grain, ribbon-over-photograph composition language of their own graphic material. Everything colour-ish is a custom property so the five themes (paper / white / salmon / dark / night) can redefine it in one place. Components below the token block must never contain a raw hex. Two further axes sit beside the theme and compose freely with it: `data-shape` (pill vs soft corners) and `data-photo` (colour vs greyscale photography). Both are switched from the same appearance menu. ========================================================================= */ /* ---------------------------------------------------------------- fonts ---- */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Newsreader — the serif alternative offered in the appearance menu. Same two subsets and the same unicode ranges as Figtree above, so the pair swap cleanly. Variable across weight and optical size; only the roman is shipped, because nothing on this site is set in italic. Self-hosted like everything else — the site loads no font from a CDN. */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/newsreader-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/newsreader-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Serif — the third option: a display serif with a single weight, so the headings that ask for 800 simply get 400. That is the look, not a shortcoming; the size and the leading carry the emphasis instead. */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrumentserif-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrumentserif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Prata — a high-contrast display serif, one weight. Google ships no latin-ext cut for it; `latin` already carries the accents these languages need, and anything beyond falls through the stack like every other script. */ @font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/prata-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* EB Garamond — an old-style book serif, variable across weight. */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/ebgaramond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/ebgaramond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------- palette --- */ :root { /* brand families — the client's four colours with a tint/shade spectrum */ --salmon-50: #ffedea; --salmon-100: #fed6cf; --salmon-200: #faaea0; --salmon-300: #f18875; --salmon-400: #e8624a; --salmon-500: #e36a54; /* client value — the primary */ --salmon-600: #c94932; --salmon-700: #a63521; --salmon-800: #7f2a1a; --salmon-900: #531b11; --slate-50: #f2f4f7; --slate-100: #e2e6ed; --slate-200: #c3cad7; --slate-300: #8f9aae; --slate-400: #586075; --slate-500: #47556f; --slate-600: #38445a; --slate-700: #2b3446; --slate-800: #1f2735; --slate-900: #141a25; /* The client's secondary. Deliberately not part of the ramp above: that one carries --ink, --surface-3 and both dark themes, and re-centring it here would have lifted --slate-900 out of the dark. */ --slate-brand: #5d7497; /* client value — the secondary */ --blue-50: #f0f5f9; --blue-100: #dde8f1; --blue-200: #bcd2e3; --blue-300: #81aaca; /* client value */ --blue-400: #7791b3; --blue-500: #667b9a; /* client value */ --blue-600: #53627d; --blue-700: #3f4d64; --sand-50: #fefaf1; --sand-100: #fdf2dd; --sand-200: #f9e2b6; --sand-300: #f5c77a; /* client value */ --sand-400: #f4cb7b; /* client value */ --sand-500: #e8ac4d; --sand-600: #c78a2f; /* type + shape, theme-independent. Figtree is subset to latin and latin-ext, so the eleven languages the site ships in do not all fit in it. Font fallback is per glyph, which means Latin copy still renders in Figtree while Japanese, Korean, Chinese, Cyrillic and Devanagari fall through to the reader's own system faces — named here rather than left to chance, because the default for a missing script is usually the ugliest face installed. */ --stack-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Yu Gothic UI', 'Hiragino Sans', Meiryo, /* ja */ 'Malgun Gothic', 'Apple SD Gothic Neo', /* ko */ 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', /* zh */ 'Nirmala UI', 'Noto Sans Devanagari', /* hi */ sans-serif; /* the serif alternative, with the same eleven-language fallback chain — in the serif faces this time, so a Japanese or Russian reader who picks it sees a serif too instead of dropping back to the sans */ /* Every serif option ends in the same chain, so the four of them are the face plus this — a Japanese or Russian reader who picks any of them gets a serif too, instead of dropping back to the sans. */ --serif-tail: Georgia, 'Times New Roman', 'Yu Mincho', 'Hiragino Mincho ProN', /* ja */ 'Nanum Myeongjo', 'Apple SD Gothic Neo', /* ko */ 'Songti SC', SimSun, 'Noto Serif CJK SC', /* zh */ 'Noto Serif Devanagari', Kokila, /* hi */ serif; --stack-serif: 'Newsreader', var(--serif-tail); --stack-instrument: 'Instrument Serif', var(--serif-tail); --stack-prata: 'Prata', var(--serif-tail); --stack-garamond: 'EB Garamond', var(--serif-tail); --sans: var(--stack-sans); /* --surface-3 is a dark colour in every theme, so what sits on it is always light — this is not a per-theme decision */ --on-dark: #ffffff; --radius: 18px; --radius-sm: 12px; --radius-lg: 28px; /* Photographs round on their own axis: a client may want square pictures inside rounded panels, or the reverse. Its own value, deliberately, not var(--radius) — deriving it meant squaring the cards squared the photographs too, and the two axes stopped being independent. */ --radius-img: 18px; --wrap: 1200px; --wrap-narrow: 780px; --ease: cubic-bezier(.22,.61,.36,1); /* paper grain — a single inline turbulence tile, reused by every theme */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ theme: light - */ :root, [data-theme='light'] { --bg: #faf6f2; --bg-2: #f3ece6; --surface: #ffffff; --surface-2: #f6f1ec; --surface-3: var(--slate-800); --ink: #2b3446; --ink-2: var(--slate-500); --muted: #7d879b; --line: #e7ded6; --line-strong: #d5c9bf; --brand: var(--salmon-500); --brand-strong: var(--salmon-600); --brand-soft: var(--salmon-50); --on-brand: #ffffff; --brand-2: var(--slate-brand); --accent: var(--sand-400); --accent-ink: var(--sand-600); /* The veil the menu bar wears when it floats over moving imagery, and the ink that goes on it. Every theme puts white on a dark veil, because the hero is white-on-photograph in every theme. */ --media-veil: #0b1220; --on-media: #ffffff; /* Copies of the theme's own colours, taken here where nothing has shadowed them yet. The see-through header redefines --ink and friends on itself so its children follow with no extra rules — but its dropdown panels are solid, not see-through, and need the theme back. These let them ask for it. They resolve per theme, because substitution happens on :root. */ --ink-root: var(--ink); --ink-2-root: var(--ink-2); --surface-root: var(--surface); --surface-2-root: var(--surface-2); --line-root: var(--line); --brand-soft-root: var(--brand-soft); --blue: var(--blue-500); --blue-soft: var(--blue-50); --scrim: linear-gradient(180deg, rgba(20,26,37,.62) 0%, rgba(20,26,37,.30) 45%, rgba(20,26,37,.76) 100%); --shadow: 0 22px 50px -26px rgba(31,39,53,.42); --shadow-sm: 0 8px 22px -14px rgba(31,39,53,.40); --grain-op: .028; color-scheme: light; } /* ------------------------------------------------------------ theme: white - Slate and blue lead; salmon steps back to a secondary role. */ [data-theme='white'] { --bg: #ffffff; --bg-2: #f2f5f9; --surface: #ffffff; --surface-2: #eef2f7; --surface-3: var(--slate-700); --ink: #1b2230; --ink-2: var(--slate-500); --muted: #78839a; --line: #e3e8f0; --line-strong: #ccd4e1; --brand: var(--slate-500); --brand-strong: var(--slate-600); --brand-soft: var(--slate-50); --on-brand: #ffffff; --brand-2: var(--salmon-500); --accent: var(--blue-300); --accent-ink: var(--blue-600); --blue: var(--blue-500); --blue-soft: var(--blue-50); --scrim: linear-gradient(180deg, rgba(20,26,37,.62) 0%, rgba(20,26,37,.30) 45%, rgba(20,26,37,.78) 100%); --shadow: 0 22px 50px -26px rgba(27,34,48,.30); --shadow-sm: 0 8px 22px -14px rgba(27,34,48,.28); --grain-op: .016; color-scheme: light; } /* ------------------------------------------------------------- theme: dark - */ [data-theme='dark'] { --bg: #141a25; --bg-2: #10151e; --surface: #1d2532; --surface-2: #253041; --surface-3: #0d121a; --ink: #eef1f6; --ink-2: #c3ccdb; --muted: #8b96ab; --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.20); --brand: var(--salmon-300); --brand-strong: var(--salmon-200); --brand-soft: rgba(228,154,130,.14); --on-brand: #21160f; --brand-2: var(--blue-300); --accent: var(--sand-300); --accent-ink: var(--sand-200); --blue: var(--blue-300); --blue-soft: rgba(129,170,202,.12); --scrim: linear-gradient(180deg, rgba(8,11,16,.60) 0%, rgba(8,11,16,.34) 45%, rgba(8,11,16,.86) 100%); --shadow: 0 24px 56px -28px rgba(0,0,0,.75); --shadow-sm: 0 10px 26px -16px rgba(0,0,0,.7); --grain-op: .05; color-scheme: dark; } /* ------------------------------------------------------------ theme: night - Deeper than dark, and led by the blue rather than the salmon. */ [data-theme='night'] { --bg: #0a0e15; --bg-2: #060910; --surface: #121924; --surface-2: #1a2331; --surface-3: #04070c; --ink: #e9eff8; --ink-2: #b6c2d6; --muted: #7c8aa2; --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.18); --brand: var(--blue-300); --brand-strong: #a6c7de; --brand-soft: rgba(129,170,202,.16); --on-brand: #061019; --brand-2: var(--salmon-300); --accent: var(--blue-200); --accent-ink: var(--blue-200); --blue: var(--blue-300); --blue-soft: rgba(129,170,202,.12); --scrim: linear-gradient(180deg, rgba(4,7,12,.66) 0%, rgba(4,7,12,.38) 45%, rgba(4,7,12,.90) 100%); --shadow: 0 26px 60px -28px rgba(0,0,0,.85); --shadow-sm: 0 10px 28px -16px rgba(0,0,0,.8); --grain-op: .055; color-scheme: dark; } /* ----------------------------------------------------------- theme: salmon - Reworked for contrast: whiter surfaces, much darker ink, a deeper brand. */ [data-theme='salmon'] { --bg: #fff3ec; --bg-2: #fbdfd2; --surface: #ffffff; --surface-2: #fdeee6; --surface-3: #2f150d; --ink: #2b1109; --ink-2: #592e20; --muted: #8a5a48; --line: #f4d9cb; --line-strong: #dda78e; --brand: var(--salmon-700); --brand-strong: var(--salmon-800); --brand-soft: #fde3d8; --on-brand: #ffffff; --brand-2: var(--slate-600); --accent: var(--sand-500); --accent-ink: #a06a1c; --blue: var(--slate-600); --blue-soft: #f2e5de; --scrim: linear-gradient(180deg, rgba(47,21,13,.64) 0%, rgba(47,21,13,.30) 45%, rgba(47,21,13,.86) 100%); --shadow: 0 22px 50px -26px rgba(75,30,16,.46); --shadow-sm: 0 8px 22px -14px rgba(75,30,16,.42); --grain-op: .038; color-scheme: light; } /* ------------------------------------------------------------- cta band ---- The closing band of Inicio, Nosotros and Aliados. It rests in the light blue the brand already uses and turns to the salmon gradient while the pointer is on it — asked for on 2026-08-18, and asked for twice, because on the page it reads as two different blocks. Written as tokens rather than as colours in the component (house rule 3), and after the theme blocks on purpose: `:root` and `[data-theme='…']` have the same specificity, so the dark pair below is what a dark page ends up with. The hover gradient is the same in every theme — it is the brand orange, not a shade of the page. */ :root, [data-theme='light'], [data-theme='white'], [data-theme='salmon'] { --cta-bg: var(--blue-100); --cta-ink: var(--ink); } [data-theme='dark'], [data-theme='night'] { --cta-bg: var(--blue-700); --cta-ink: #ffffff; } /* The two admission tones the palette did not already have: an open door and a sign-up sheet. Deeper on paper, lighter on a dark page, the same way the map ramp flips — a chip has to hold its contrast against both grounds. */ :root, [data-theme='light'], [data-theme='white'], [data-theme='salmon'] { --go: #1c7a52; --reg: #5b4bbd; } [data-theme='dark'], [data-theme='night'] { --go: #59c495; --reg: #a89bf0; } :root { --cta-bg-hover: linear-gradient(130deg, var(--salmon-600), var(--salmon-400) 55%, var(--sand-500)); --cta-ink-hover: #ffffff; } /* ------------------------------------------------------------ the map ----- The choropleth on the public dashboard. It needs a ramp of its own, because "more" does not read the same way on paper as on a dark page: on paper the busiest municipality is the darkest one, and on a dark page it has to be the brightest, or the map's own subject sinks into the background. A single ramp for both — which is what it had — left the dark themes drawing a dark blue on near-black, with a stroke the colour of the surface behind it. The municipalities with nothing to report are the ones this matters most for, since on a first visit that is the whole map. The home page's subregion map has never had the problem: it fills with one mid blue that shows up either way. */ :root, [data-theme='light'], [data-theme='white'], [data-theme='salmon'] { /* Empty is a grey, not the palest blue: a municipality with nothing to report has to be told apart from one with a single answer, and a ramp whose first step is also its "no data" colour cannot do that. */ --map-empty: #e3e5e9; --map-1: #cfe0ee; --map-2: var(--blue-200); --map-3: var(--blue-300); --map-4: var(--blue-500); --map-5: var(--blue-700); --map-line: rgba(255,255,255,.7); } [data-theme='dark'], [data-theme='night'] { --map-empty: #3a4257; /* slate, so "nothing here" is not read as "a little" */ --map-1: #3f5b85; --map-2: #52759f; --map-3: #7099c0; --map-4: #a1c4dd; --map-5: #d9e8f4; --map-line: rgba(8,11,17,.55); } /* ---------------------------------------------------------- shape: corners - A second, theme-independent axis. `pill` is the fully-rounded original; `soft` keeps the rounding but stops short of a capsule. Anything that reads as a pill — buttons, chips, filters, the search bar — follows --pill so the two shapes never mix on one screen. */ :root, [data-shape='pill'] { --pill: 100px; --pill-sm: 100px; } [data-shape='soft'] { --pill: 14px; --pill-sm: 10px; } [data-shape='square'] { --pill: 0; --pill-sm: 0; } /* --- card corners --------------------------------------------------------- `data-shape` is about pill-like controls; this is about the panels. Every card-like element already asks for --radius, so squaring them is one rule rather than a list of components. */ [data-card='card-sharp'] { --radius: 0; --radius-sm: 0; --radius-lg: 0; } /* --- picture corners --- */ [data-pic='pic-sharp'] { --radius-img: 0; } /* --- how wide a section heading may run ----------------------------------- 660px keeps a heading to a comfortable measure; full width suits a short title over a wide band. `none` rather than 100% so the centred variant still centres. */ :root { --head-w: none; } [data-headw='narrow'] { --head-w: 660px; } /* --- the numbered discs on the lines of work --- */ [data-num='hide'] .pillar-n { display: none; } /* ------------------------------------------------- rule: section dividers - A line between one band and the next, on every page — the sections are all direct children of #nw-view, so one rule reaches them all. It hangs off the *following* section, which is why there is never a stray line under the last one. Where that following band is dark the borrowed --line would vanish, so those three get a light one instead. */ [data-rule='line'] #nw-view > section + section { border-top: 1px solid var(--line); } [data-rule='line'] #nw-view > section.band-dark, [data-rule='line'] #nw-view > section.confluence, [data-rule='line'] #nw-view > section.hero { border-top-color: rgba(255, 255, 255, .18); } /* ------------------------------------------------------- pad: button size - How much room a button takes. `normal` is what the site was built with; the two tighter steps are for seeing the page with a lighter touch. */ :root, [data-pad='normal'] { --btn-py: 14px; --btn-px: 26px; --btn-sm-py: 10px; --btn-sm-px: 18px; } [data-pad='small'] { --btn-py: 10px; --btn-px: 20px; --btn-sm-py: 8px; --btn-sm-px: 14px; } [data-pad='xs'] { --btn-py: 6px; --btn-px: 14px; --btn-sm-py: 5px; --btn-sm-px: 11px; } /* --------------------------------------------------- navcta: the seasons tab The seasons entry is a filled button among plain links, which is the point of it — but the client should be able to see the header without that emphasis, so `plain` dresses it exactly like its neighbours. */ [data-navcta='plain'] .nav-cta { background: transparent; color: var(--ink-2); box-shadow: none; border-color: transparent; margin-left: 0; padding: 9px 13px; font-weight: 600; font-size: .93rem; } [data-navcta='plain'] .nav-cta:hover { background: var(--surface-2); color: var(--ink); transform: none; } [data-navcta='plain'] .nav-cta.active { background: var(--brand-soft); color: var(--brand); } [data-navcta='plain'] .nav-cta svg { display: none; } /* ---------------------------------------------------------- font: typeface - A fourth axis. The whole site runs off one family token, so swapping the stack is all it takes; the per-script fallbacks travel with each stack. */ [data-font='serif'] { --sans: var(--stack-serif); } [data-font='instrument'] { --sans: var(--stack-instrument); } [data-font='prata'] { --sans: var(--stack-prata); } [data-font='garamond'] { --sans: var(--stack-garamond); } /* Newsreader is a text face: at display sizes it wants less weight and none of the tight tracking the grotesque was given. */ [data-font='serif'] h1, [data-font='serif'] h2, [data-font='serif'] h3, [data-font='serif'] h4 { font-weight: 600; letter-spacing: -.012em; } [data-font='serif'] .eyebrow { letter-spacing: .14em; } /* Instrument Serif ships one weight, so asking for 800 only synthesises a bolder face. Let the size do the work and give the headlines a little more room, which is how this face is meant to be set. */ [data-font='instrument'] h1, [data-font='instrument'] h2, [data-font='instrument'] h3, [data-font='instrument'] h4 { font-weight: 400; letter-spacing: -.005em; line-height: 1.12; } [data-font='instrument'] .eyebrow { font-weight: 400; letter-spacing: .2em; } [data-font='instrument'] .btn, [data-font='instrument'] .site-nav > a:not(.btn) { font-weight: 400; } /* Prata is the same story — one weight, high contrast, and it needs air. */ [data-font='prata'] h1, [data-font='prata'] h2, [data-font='prata'] h3, [data-font='prata'] h4 { font-weight: 400; letter-spacing: 0; line-height: 1.18; } [data-font='prata'] .eyebrow { font-weight: 400; letter-spacing: .18em; } [data-font='prata'] .btn, [data-font='prata'] .site-nav > a:not(.btn) { font-weight: 400; } /* EB Garamond has the weights but runs small and light for its size, so the headings keep some of their heft and the body text goes up a notch. */ [data-font='garamond'] h1, [data-font='garamond'] h2, [data-font='garamond'] h3, [data-font='garamond'] h4 { font-weight: 600; letter-spacing: -.008em; } [data-font='garamond'] body, [data-font='garamond'] .lead { font-size: 1.05em; } [data-font='garamond'] .eyebrow { letter-spacing: .15em; } /* ------------------------------------------------------ border: button edge - A fifth axis. `full` is the original outline. `underline` strips the box entirely and lets a single rule appear under the control, and only while it is being pressed, focused or already active — the quietest possible border. */ [data-border='underline'] .btn { border-color: transparent; box-shadow: none; border-radius: 0; } [data-border='underline'] .btn:hover { transform: none; } [data-border='underline'] .btn:active, [data-border='underline'] .btn:focus-visible, [data-border='underline'] .btn.active { border-bottom-color: currentColor; } [data-border='underline'] .site-nav > a:not(.btn) { border-radius: 0; border-bottom: 2px solid transparent; background: transparent; } [data-border='underline'] .site-nav > a:not(.btn):hover, [data-border='underline'] .site-nav > a:not(.btn).active { background: transparent; border-bottom-color: currentColor; } [data-border='underline'] .tool-btn { border-color: transparent; border-radius: 0; } [data-border='underline'] .tool-btn:hover { border-bottom-color: currentColor; } /* -------------------------------------------------------- fill: button body - A sixth axis, after the outline buttons of manual.studio: no fill at all, just a hairline and the label, and the fill only arrives on hover. The two places buttons sit on a photograph or a colour wash — the hero and the CTA band — keep a white outline instead, or they would vanish. */ [data-fill='hollow'] .btn-primary, [data-fill='hollow'] .btn-dark { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; } [data-fill='hollow'] .btn-primary:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } [data-fill='hollow'] .btn-dark:hover { background: var(--surface-3); color: var(--on-dark); border-color: var(--surface-3); } [data-fill='hollow'] .hero .btn-primary, [data-fill='hollow'] .band-dark .btn-primary { color: #fff; border-color: rgba(255,255,255,.65); } [data-fill='hollow'] .hero .btn-primary:hover, [data-fill='hollow'] .band-dark .btn-primary:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; } [data-fill='hollow'] .chip { background: transparent; box-shadow: inset 0 0 0 1px currentColor; } /* ------------------------------------------------------- photos: greyscale - A third axis: photographs sit in black and white until they are hovered. Only elements marked .photo are affected — never the logo or the ally marks, which are already monochrome by design. */ [data-photo='mono'] .photo { filter: grayscale(1) contrast(1.04); transition: filter .55s var(--ease); } [data-photo='mono'] .photo:hover, [data-photo='mono'] .hero:hover .photo, [data-photo='mono'] .purpose:hover .photo, [data-photo='mono'] .pillar-flip:hover .photo, [data-photo='mono'] .show-item:hover .photo, [data-photo='mono'] .photo:focus-visible { filter: grayscale(0); } /* A narrow screen is a screen with no pointer on it: there is nothing to hover with, so greyscale-until-hover would simply mean greyscale. The phone gets the photographs in colour. */ @media (max-width: 800px) { [data-photo='mono'] .photo { filter: none; } } /* ----------------------------------------------------------------- base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.62; font-weight: 420; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); } /* the paper grain the client's posts always sit on */ body::before { content: ''; position: fixed; inset: 0; background-image: var(--grain); opacity: var(--grain-op); pointer-events: none; z-index: 1; mix-blend-mode: multiply; } [data-theme='dark'] body::before { mix-blend-mode: screen; } /* height:auto matters: several images carry width/height attributes for the aspect ratio and are then laid out at width:100%. Without it the attribute height wins and the picture is squashed. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; } h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; letter-spacing: -.022em; margin: 0 0 .45em; } h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: 1.28rem; letter-spacing: -.012em; } h4 { font-size: 1rem; } p { margin: 0 0 1rem; } /* The type scale above is tuned for Latin. Two things have to give for the other scripts the site ships in: the headline tracking is negative, which crowds the square glyphs of Japanese, Korean and Chinese; and Devanagari hangs marks both above and below the line, so 1.08 is not enough leading for a heading. Matched on the lang attribute nw_mini sets. */ :is(:lang(ja), :lang(ko), :lang(zh)) :is(h1, h2, h3, h4) { letter-spacing: 0; } :lang(hi) :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.32; } :lang(hi) body, :lang(hi) .lead { line-height: 1.8; } ::selection { background: var(--brand); color: var(--on-brand); } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* every icon comes from the sprite in views/chrome/icons.html */ .ico { width: 1.05em; height: 1.05em; flex: none; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 26px; } .wrap-narrow { max-width: var(--wrap-narrow); } /* A narrow measure that still starts where the wide column starts. On its own .wrap-narrow centres its 780px in the window, which left the opening of Nosotros and of Agenda about 200px to the right of every heading in the sections under them — the client's note of 2026-08-26, with a line drawn down the page to show it. The left margin here is the gutter the 1200px column has at this window width, so the two left edges meet whatever the width is and the measure keeps its length; under 1200px there is no gutter left to match and the max() falls back to the shared page padding. */ .wrap-narrow.wrap-flush { margin-inline: max(0px, calc((100% - var(--wrap)) / 2)) auto; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; } .skip-link:focus { left: 0; } .eyebrow { font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--brand); margin: 0 0 14px; } .lead { font-size: 1.14rem; color: var(--ink-2); line-height: 1.6; } .muted { color: var(--muted); } .hl { color: var(--accent-ink); } .hl-mark { background: linear-gradient(180deg, transparent 58%, var(--accent) 58%); padding: 0 .06em; } section { padding: 84px 0; position: relative; z-index: 2; } .section-head { max-width: var(--head-w, 660px); margin-bottom: 46px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head .lead { margin-bottom: 0; } /* --------------------------------------------------------------- buttons --- */ .btn { display: inline-flex; align-items: center; gap: .55em; cursor: pointer; font-weight: 700; font-size: .97rem; letter-spacing: -.005em; padding: var(--btn-py) var(--btn-px); border-radius: var(--pill); border: 1.5px solid transparent; transition: transform .16s var(--ease), box-shadow .2s, background .2s, color .2s, border-color .2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 1.05em; height: 1.05em; } .btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-strong); } .btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--ink); background: var(--surface); } .btn-on-photo { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); } .btn-on-photo:hover { background: rgba(255,255,255,.18); border-color: #fff; } .btn-dark { background: var(--surface-3); color: var(--on-dark); } .btn-sm { padding: var(--btn-sm-py) var(--btn-sm-px); font-size: .89rem; } /* ------------------------------------------------------------ brand marks -- */ /* One SVG per mark, recoloured by CSS masks so it follows the active theme. */ .mark { display: block; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .mark-iso { -webkit-mask-image: url('../brand/svg/isotype.svg'); mask-image: url('../brand/svg/isotype.svg'); aspect-ratio: 209 / 213; } .mark-logo { -webkit-mask-image: url('../brand/svg/logo.svg'); mask-image: url('../brand/svg/logo.svg'); aspect-ratio: 1498 / 402; } @supports not ((-webkit-mask-image: url('#')) or (mask-image: url('#'))) { .mark-iso { background: url('../brand/svg/isotype-salmon.svg') center/contain no-repeat; } .mark-logo { background: url('../brand/svg/logo-salmon.svg') center/contain no-repeat; } } .brand { display: inline-flex; align-items: center; gap: 13px; } /* The header carries the wordmark only — the isotype is the M inside it, so showing both said the same thing twice. It therefore has to keep working all the way down to a phone, where it used to be dropped in favour of the isotype; it shrinks instead. */ /* Width is a base times a scale, rather than one number, so the size axis and the responsive step-down compose instead of overwriting each other: the breakpoints move --logo-w, the axis moves --logo-scale. */ .brand .mark-logo { width: calc(var(--logo-w, 150px) * var(--logo-scale, 1)); color: var(--logo-ink, var(--ink)); } /* --- logo colour ------------------------------------------------------------ `ink` is the default and deliberately has no rule: it falls through to var(--ink), which is what lets it follow the header over moving imagery. */ :root[data-logo-color="coral"] .brand .mark-logo { --logo-ink: var(--brand); } :root[data-logo-color="sand"] .brand .mark-logo { --logo-ink: var(--accent-ink); } :root[data-logo-color="slate"] .brand .mark-logo { --logo-ink: var(--brand-2); } /* --- logo size --- */ :root[data-logo-size="sm"] { --logo-scale: .76; } :root[data-logo-size="md"] { --logo-scale: 1; } :root[data-logo-size="lg"] { --logo-scale: 1.28; } .brand-stack { display: flex; flex-direction: column; gap: 3px; } .brand-stack small { font-size: .64rem; letter-spacing: .21em; text-transform: uppercase; color: var(--muted); font-weight: 700; } /* ------------------------------------------------------------- social ---- Deliberately quiet: the marks sit at low opacity and in the surrounding ink until pointed at, when each takes its own colour. The rail is fixed under the menu bar and steps out of the way on a phone, where the footer row is the one that carries them. */ .social-rail { position: fixed; top: calc(78px + 14px); right: 18px; z-index: 90; display: flex; flex-direction: column; gap: 6px; } .social-link { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pill); color: var(--ink-2); opacity: .62; /* a faint disc under each, so the mark reads against photography as well as against paper without becoming loud */ background: color-mix(in srgb, var(--ink) 9%, transparent); backdrop-filter: blur(6px); transition: opacity .2s, color .2s, background .2s, transform .2s; } .social-link svg { width: 19px; height: 19px; } .social-link:hover, .social-link:focus-visible { opacity: 1; transform: translateY(-1px); background: color-mix(in srgb, currentColor 12%, transparent); } .social-link:nth-child(1):hover { color: #d62976; } .social-link:nth-child(2):hover { color: #ff0000; } .social-link:nth-child(3):hover { color: #25d366; } /* over the hero the rail is on photography, so it needs the lighter ink */ :root.has-immersive .social-rail .social-link { color: var(--on-media); opacity: .7; background: color-mix(in srgb, var(--media-veil) 34%, transparent); } .social-row { display: flex; gap: 4px; margin-top: 16px; } /* ------------------------------------------------------- section rail ---- The other side of the window from the social links, so the two never meet. Quiet like them until pointed at; the section being read is marked without needing a hover. */ .jump-rail { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); z-index: 88; display: flex; flex-direction: column; gap: 5px; } .jump-dot { display: grid; place-items: center; width: 32px; height: 32px; border: 0; padding: 0; cursor: pointer; border-radius: var(--pill); color: var(--ink-2); opacity: .5; background: color-mix(in srgb, var(--ink) 8%, transparent); backdrop-filter: blur(6px); transition: opacity .2s, color .2s, background .2s, transform .2s; } .jump-dot svg { width: 15px; height: 15px; } .jump-dot:hover, .jump-dot:focus-visible { opacity: 1; color: var(--brand); transform: translateX(2px); background: color-mix(in srgb, var(--brand) 14%, transparent); } .jump-dot.on { opacity: 1; color: var(--on-brand); background: var(--brand); } /* over the hero it is on photography, like the social rail */ :root.has-immersive .jump-dot { color: var(--on-media); } @media (max-width: 1180px) { .jump-rail { display: none; } } /* The footer styles its links as list rows — block, with vertical padding — and that beat the disc's own centring on specificity, leaving each glyph in the top-left corner of its circle. These are buttons, not rows. */ .site-footer .social-link { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none; color: #fff; opacity: .72; background: rgba(255,255,255,.12); } .social-link svg { display: block; } .site-footer .social-link:hover { background: rgba(255,255,255,.22); } /* One turn a second, then three seconds still — 25% of a four-second cycle is the flip, the rest is the rest. */ @keyframes nusoftTurn { 0% { transform: rotateY(0deg); } 25% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); } } .footer-by img { animation: nusoftTurn 4s var(--ease) infinite; transform-style: preserve-3d; } [data-anim='still'] .footer-by img { animation: none; } @media (prefers-reduced-motion: reduce) { .footer-by img { animation: none; } } @media (max-width: 960px) { .social-rail { display: none; } } /* ---------------------------------------------------------------- header --- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s; } .site-header.scrolled { border-color: var(--line); box-shadow: 0 10px 30px -26px rgba(0,0,0,.7); } /* --- imagery behind the menu bar -------------------------------------------- Sticky reserves its own height at the top of the flow; fixed does not. That single change is the whole effect: the hero now starts at y=0 and its existing top padding (140px, and 132px on Nosotros) already clears the 78px bar, so nothing has to be pulled up or padded out. Everything below behaves exactly as before, because a sticky header pinned at top:0 and a fixed one occupy the same place once the page has scrolled at all. */ :root.has-immersive .site-header { position: fixed; left: 0; right: 0; top: 0; } /* Almost transparent, so the film or the photographs read through. The ink is redefined rather than each child restyled — the wordmark, the links and the tool buttons all resolve their colours from these, so they follow with no further rules. It is white on a dark veil in every theme because the hero itself is white-on-photograph in every theme; --media-veil is the one place to change that. Placed after .scrolled so it wins on equal specificity. */ .site-header.over-media { background: color-mix(in srgb, var(--media-veil) 34%, transparent); border-bottom-color: transparent; box-shadow: none; --ink: var(--on-media); --ink-2: color-mix(in srgb, var(--on-media) 80%, transparent); --surface: color-mix(in srgb, var(--on-media) 14%, transparent); --surface-2: color-mix(in srgb, var(--on-media) 22%, transparent); --brand-soft: color-mix(in srgb, var(--on-media) 20%, transparent); --line: color-mix(in srgb, var(--on-media) 34%, transparent); } .site-header.over-media .site-nav > a:not(.btn).active { color: var(--on-media); } .site-header.over-media .tool-btn { backdrop-filter: blur(8px); } /* The dropdowns are solid panels that happen to hang off a see-through bar, so they take the theme's colours back rather than inheriting the header's. */ .site-header.over-media .tool-menu { --ink: var(--ink-root); --ink-2: var(--ink-2-root); --surface: var(--surface-root); --surface-2: var(--surface-2-root); --brand-soft: var(--brand-soft-root); --line: var(--line-root); color: var(--ink-root); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 18px; } .site-nav { display: flex; align-items: center; gap: 2px; } /* Two-word labels — "Open calls", "Datos abiertos", "Informes de gestión" — were breaking across two lines as soon as the row got tight, which made the bar taller than the header. They keep their line; if the row runs out of width the drawer takes over at 1240px. */ .site-nav > a { white-space: nowrap; } .site-nav > a:not(.btn) { padding: 9px 13px; border-radius: var(--pill); font-weight: 600; font-size: .93rem; color: var(--ink-2); transition: color .2s, background .2s; } .site-nav > a:not(.btn):hover { color: var(--ink); background: var(--surface-2); } .site-nav > a:not(.btn).active { color: var(--brand); background: var(--brand-soft); } .nav-cta { margin-left: 6px; } .header-tools { display: flex; align-items: center; gap: 8px; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; } .nav-toggle span { height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .28s var(--ease), opacity .2s; } .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* theme + language controls */ .tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: .85rem; font-weight: 700; transition: border-color .2s, color .2s, background .2s; } .tool-btn:hover { border-color: var(--line-strong); color: var(--ink); } .tool-btn svg { width: 18px; height: 18px; } .tool { position: relative; } .tool-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; min-width: 168px; padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: none; flex-direction: column; gap: 2px; /* eleven languages no longer fit on a short screen */ max-height: min(70vh, 480px); overflow-y: auto; } .tool-menu[data-open='1'] { display: flex; } /* While the portal panel is open the page behind it softens, so the note is the only thing in focus. The blur is on the page's own blocks rather than on a veil above them: the panel hangs off the header, and a veil covering everything would have had to blur the very bar it belongs to. Nothing under it can be clicked — the click closes the panel instead, through the document handler that already watches for one outside a tool. */ :root.has-portal #nw-view, :root.has-portal #nw-footer, :root.has-portal #nw-social, :root.has-portal #nw-jump { filter: blur(5px) saturate(.85); pointer-events: none; user-select: none; } #nw-view, #nw-footer, #nw-social, #nw-jump { transition: filter .25s var(--ease); } @media (prefers-reduced-motion: reduce) { #nw-view, #nw-footer, #nw-social, #nw-jump { transition: none; } } /* A panel that says something rather than offering a list of choices — the portal note. Same shell as the menus, ordinary prose inside. */ .tool-note { width: 300px; padding: 18px 18px 16px; gap: 10px; } .tool-note-t { font-weight: 800; color: var(--ink); margin: 0; } .tool-note-d { font-size: .88rem; line-height: 1.55; color: var(--ink-2); margin: 0; } .tool-note .btn { align-self: flex-start; } /* The staff way in, under the button the public uses. Quiet on purpose — a link the size of the note's own small print, not a second call to action. */ .tool-note-admin { align-self: flex-start; margin-top: -2px; font-size: .82rem; color: var(--muted); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent); transition: color .2s var(--ease); } .tool-note-admin:hover { color: var(--brand); text-decoration-color: currentColor; } .tool-note-admin:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* On a narrow screen a panel cannot hang off its own button: 300px anchored to the right edge of a button that is itself near the right edge simply runs off the left of the window, which is what the portal note was doing. Under 620px every tool panel becomes a sheet pinned under the bar — the language list and the appearance menu included, since eleven languages had the same problem in a narrower way. `fixed` resolves against the header here rather than the window, because the bar carries a backdrop-filter and that makes it the containing block. It comes to the same thing: the header is the full width of the window and sits at the top of it. */ @media (max-width: 620px) { .tool-menu { position: fixed; top: 86px; left: 12px; right: 12px; width: auto; min-width: 0; max-height: calc(100vh - 120px); } .tool-note { width: auto; } } .tool-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: var(--ink-2); font-size: .9rem; font-weight: 600; text-align: left; } .tool-menu button:hover { background: var(--surface-2); color: var(--ink); } /* The chosen option has to be unmistakable at a glance — with ten axes open at once, a faint tint was not enough. It gets the brand colour, a heavier label, a rule down its leading edge and a tick at the end. */ .tool-menu button { position: relative; } .tool-menu button[aria-checked='true'] { color: var(--brand); background: var(--brand-soft); font-weight: 700; box-shadow: inset 2px 0 0 var(--brand); } .tool-menu button[aria-checked='true']::after { content: '✓'; margin-left: auto; padding-left: 8px; font-size: .95em; line-height: 1; font-weight: 700; } /* (the language rows already push their code right with margin-left:auto further down, so the tick simply follows it) The appearance menu carries eleven groups now, which is far too tall for one column. Each group is a .tool-block, and the menu lays them out in columns — three where there is room, two on a laptop, one on a phone. */ /* Columns rather than a grid: a grid aligns rows, so a five-option axis beside a two-option one leaves a hole under the short one. Multi-column packs each block against the previous, and break-inside keeps a heading with its options. The menu is tall enough here that the balanced columns fit without scrolling; below that it falls back to one column and scrolls as before. */ /* Ten axes no longer fit in one column, so the menu lays them out in columns — three where there is room, two on a laptop, one on a phone. A grid rather than CSS columns or flex column-wrap: both of those pack more tightly, but both overflow sideways the moment a height is imposed on them, and a menu that scrolls horizontally is worse than one with some whitespace. The grid aligns rows, so the five-option theme leaves a little air beneath its shorter neighbours; that is the trade. */ /* Twenty-two axes and counting, so this earns more room than it used to: a column per axis-and-a-bit rather than the two it started with. The count is the reason it steps up by viewport rather than staying fixed — at every width it takes as many columns as fit without the panel running off screen, and max-width keeps it on screen whatever it asks for. */ .tool-menu-wide { min-width: 210px; display: none; grid-template-columns: repeat(2, minmax(164px, 1fr)); align-content: start; align-items: start; gap: 2px 14px; padding: 12px; /* The panel hangs off the tool button, so `right: 0` is the button's right edge, not the window's — and a width chosen for the window pushed its left edge off screen. The button sits at the right edge of the header .wrap, so the room to its left is half the window plus half the wrap; this is that, less a gutter. */ max-width: calc((100vw + var(--wrap)) / 2 - 46px); /* taller than the language menu: laid out in columns it earns the room */ max-height: min(88vh, 660px); } .tool-menu-wide[data-open='1'] { display: grid; } @media (min-width: 900px) { .tool-menu-wide { grid-template-columns: repeat(3, minmax(150px, 1fr)); } } @media (min-width: 1100px) { .tool-menu-wide { grid-template-columns: repeat(4, minmax(150px, 1fr)); } } @media (min-width: 1240px) { /* Six columns and nearly the whole window: with twenty-two groups the panel was a tall scroll no matter how many columns it had. Anchored to the right edge of the bar, so the width is capped to keep its left edge on screen. */ .tool-menu-wide { grid-template-columns: repeat(6, minmax(150px, 1fr)); width: 1560px; } } @media (max-width: 620px) { .tool-menu-wide { grid-template-columns: 1fr; } } .tool-block { display: flex; flex-direction: column; gap: 2px; } /* A group that takes the whole width under the columns, laying its options out in rows instead of one tall stack. The heading is given a full row of its own so the options wrap beneath it rather than beside it, and a rule separates the band from the axes above — these are checkboxes among radios, and any combination of them can be on. */ .tool-menu-wide .tool-block-full { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); } .tool-menu-wide .tool-block-full > .tool-group { flex: 0 0 100%; margin-bottom: 2px; } /* Menu options are width:100% so they fill their column — in a wrapping row that put every one on a line of its own, which is the stack this was meant to replace. Here they take only the room their label needs. */ .tool-menu-wide .tool-block-full > button { flex: 0 1 auto; width: auto; gap: 8px; padding-right: 14px; } .tool-group { margin: 10px 12px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .tool-group:first-child { margin-top: 4px; } .tool-group + button { margin-top: 0; } /* the single-column language menu keeps its rules between groups; the columned appearance menu separates its axes by whitespace instead */ .tool-menu:not(.tool-menu-wide) .tool-group:not(:first-child) { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; } .tool-menu-wide .tool-block + .tool-block, .tool-menu-wide .tool-block:first-child { margin-top: 0; } .swatch { width: 15px; height: 15px; border-radius: 5px; border: 1px solid var(--line-strong); flex: none; } .swatch-light { background: #faf6f2; } .swatch-white { background: #ffffff; } .swatch-salmon { background: #e36a54; } .swatch-dark { background: #141a25; } .swatch-night { background: #0a0e15; } /* the corner options show their own shape; the photo options their own tone */ .swatch-pill { background: var(--ink-2); border-radius: 100px; } .swatch-soft { background: var(--ink-2); border-radius: 4px; } .swatch-square { background: var(--ink-2); border-radius: 0; } .swatch-color { background: linear-gradient(135deg, #e36a54, #f4cb7b 50%, #667b9a); border-color: transparent; } .swatch-mono { background: linear-gradient(135deg, #2b3446, #b9bfc9); border-color: transparent; } /* each remaining option draws the thing it does: the two typefaces set their own initial, the borders show where the line sits, the fills show filled or empty, and the hero options show a frame or a play triangle */ .swatch-sans, .swatch-serif, .swatch-instrument, .swatch-prata, .swatch-garamond { background: transparent; border-color: transparent; display: inline-grid; place-items: center; width: 16px; height: 15px; font-size: 13px; line-height: 1; color: var(--ink-2); font-style: normal; } .swatch-sans::before { content: 'A'; font-family: var(--stack-sans); font-weight: 800; } .swatch-serif::before { content: 'A'; font-family: var(--stack-serif); font-weight: 600; } .swatch-instrument::before { content: 'A'; font-family: var(--stack-instrument); font-weight: 400; font-size: 15px; } .swatch-prata::before { content: 'A'; font-family: var(--stack-prata); font-weight: 400; font-size: 14px; } .swatch-garamond::before { content: 'A'; font-family: var(--stack-garamond); font-weight: 600; font-size: 15px; } /* the three button sizes draw themselves: a bar that loses height and width */ .swatch-normal, .swatch-small, .swatch-xs { background: var(--ink-2); border-color: transparent; border-radius: 3px; align-self: center; } .swatch-normal { width: 15px; height: 11px; } .swatch-small { width: 13px; height: 8px; } .swatch-xs { width: 11px; height: 5px; } /* a spark against a still dot */ .swatch-motion { background: transparent; border-color: transparent; display: inline-grid; place-items: center; color: var(--brand); font-style: normal; } .swatch-motion::before { content: 'º6'; font-size: 12px; line-height: 1; } .swatch-still { background: transparent; border-color: var(--line-strong); } /* no line against a line */ .swatch-none { background: transparent; border-color: var(--line-strong); } .swatch-line { background: transparent; border-color: transparent; border-radius: 0; border-bottom: 2px solid var(--ink-2); align-self: center; height: 8px; } /* filled pill against an outlined one */ .swatch-highlight { background: var(--brand); border-color: var(--brand); border-radius: 100px; } .swatch-plain { background: transparent; border-color: var(--line-strong); border-radius: 100px; } /* the three hero lines share one on/off pair: a filled dot or an empty one */ .swatch-on { background: var(--brand); border-color: var(--brand); } .swatch-off { background: transparent; border-color: var(--line-strong); } /* logo colour: the colour itself */ .swatch-ink { background: var(--ink); } .swatch-coral { background: var(--brand); } .swatch-sand { background: var(--accent-ink); } .swatch-slate { background: var(--brand-2); } /* card and picture corners: the corner itself */ .swatch-card-round, .swatch-pic-round { background: var(--ink-2); border-radius: 6px; } .swatch-card-sharp, .swatch-pic-sharp { background: var(--ink-2); border-radius: 0; } /* heading width: a long rule and a short one */ .swatch-wide, .swatch-narrow { background: var(--ink-2); border-color: transparent; border-radius: 2px; align-self: center; height: 4px; } .swatch-wide { width: 17px; } .swatch-narrow { width: 9px; } /* card numbers: a filled disc, or an empty one */ .swatch-show { background: var(--brand); border-color: var(--brand); border-radius: 50%; } .swatch-hide { background: transparent; border-color: var(--line-strong); border-radius: 50%; } /* logo size: three bars in the wordmark's own proportion */ .swatch-sm, .swatch-md, .swatch-lg { background: var(--ink-2); border-color: transparent; border-radius: 2px; align-self: center; } .swatch-sm { width: 11px; height: 3px; } .swatch-md { width: 15px; height: 4px; } .swatch-lg { width: 19px; height: 5px; } .swatch-full { background: transparent; border-color: var(--ink-2); } .swatch-underline { background: transparent; border-color: transparent; border-bottom: 2px solid var(--ink-2); border-radius: 0; } .swatch-solid { background: var(--ink-2); border-color: var(--ink-2); } .swatch-hollow { background: transparent; border-color: var(--ink-2); border-width: 1.5px; } .swatch-curves { background: transparent; border-color: var(--ink-2); border-radius: 3px; } .swatch-video { background: transparent; border-color: transparent; display: inline-grid; place-items: center; color: var(--ink-2); font-style: normal; } .swatch-video::before { content: '▶'; font-size: 11px; line-height: 1; } .tool-menu .code { margin-left: auto; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------------ intro film --- Shown once per visitor, over everything, until the film ends or it is skipped. It is hidden by default and only revealed by the data-intro flag the shell sets before first paint, so a visitor who has already seen it — or who has JavaScript off — never gets a blank layer stuck over the site. */ .intro { display: none; } [data-intro='1'] .intro { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: #000; transition: opacity .6s var(--ease); } [data-intro='1'] body { overflow: hidden; } .intro.gone { opacity: 0; pointer-events: none; } .intro-video { width: 100%; height: 100%; object-fit: cover; } .intro-skip { position: absolute; right: 22px; bottom: 22px; padding: 10px 20px; border-radius: var(--pill); border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.10); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, border-color .2s; } .intro-skip:hover { background: rgba(255,255,255,.22); border-color: #fff; } /* ----------------------------------------------------------------- view ---- */ .nw-view { min-height: 70vh; outline: none; display: block; position: relative; z-index: 2; } .nw-loading { min-height: 70vh; display: grid; place-items: center; } .spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .status { display: flex; align-items: center; gap: 12px; padding: 30px 0; color: var(--muted); font-size: .95rem; } /* ----------------------------------------------------------------- hero ---- */ .hero { position: relative; overflow: hidden; min-height: min(88vh, 780px); display: flex; align-items: flex-end; padding: 140px 0 64px; color: #fff; isolation: isolate; } .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: heroIn 1.4s var(--ease) both; } @keyframes heroIn { from { transform: scale(1.06); } to { transform: scale(1); } } /* rotating hero: the slides crossfade in place, each drifting slowly inward */ .hero-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero-slides .hero-photo { opacity: 0; animation: none; transition: opacity 1.1s var(--ease); } .hero-slides .hero-photo.on { opacity: 1; animation: heroDrift 11s var(--ease) both; } @keyframes heroDrift { from { transform: scale(1.09); } to { transform: scale(1); } } .hero-dots { position: absolute; right: 26px; bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 8px; } .hero-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background .25s var(--ease), width .25s var(--ease); } .hero-dot:hover { background: rgba(255,255,255,.85); } .hero-dot.on { background: var(--brand); width: 30px; border-radius: 100px; } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim); } .hero .eyebrow { color: var(--accent); } /* The measure keeps the headline off the full 1180px — a title that long is a poster, not a paragraph. It was 16ch, which broke the sentence far earlier than the window required; at 26ch the line fills the space it has and `balance` shares the words evenly between the two lines rather than leaving one of them a stub. */ .hero h1 { max-width: 26ch; text-wrap: balance; text-shadow: 0 2px 26px rgba(0,0,0,.42); } /* the page-level highlight ochre disappears against a sunset; over a scrimmed photograph the highlight has to be the pale end of the sand ramp */ .hero .hl { color: var(--sand-300); } .hero .lead { color: rgba(255,255,255,.9); max-width: 46ch; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 44px; } .hero-stats { display: flex; gap: 40px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.28); padding-top: 24px; } .hero-stat b { display: block; font-size: 2.15rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; } .hero-stat span { font-size: .84rem; color: rgba(255,255,255,.76); } /* --------------------------------------------------------- hero: variation -- A seventh axis, offered only where the home hero lives. `curves` is the original — rotating photographs under the drawn river. `video` replaces the whole composition with a silent loop: the photographs, the dots and the curve overlay all step aside, and the scrim stays so the headline keeps its contrast. app.js only gives the element a src once this is chosen, so the file is never fetched by someone looking at the other variation. */ /* ------------------------------------------------- hero: the three texts --- Each line over the hero can be taken away on its own, so the client can see the composition with the eyebrow gone, with no headline, or with the lead alone. Scoped to the hero: the same classes carry the rest of the site. */ [data-hero-eyebrow='off'] .hero > .wrap > .eyebrow, [data-hero-title='off'] .hero > .wrap > h1, [data-hero-lead='off'] .hero > .wrap > .lead { display: none; } .hero-video { display: none; } [data-hero='video'] .hero-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } [data-hero='video'] .hero-slides, [data-hero='video'] .hero-art, [data-hero='video'] .hero-dots { display: none; } /* the dashed course + ribbon their posts trace over photographs. One set per slide, each morphing between three states so the water keeps moving; only the set belonging to the visible photograph is shown. */ .hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero-curve { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--ease); } .hero-curve.on { opacity: 1; } /* the dashes travel at a speed of their own, set per slide on the element, so they never appear locked to the band drifting underneath them */ .river-dash { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.5; stroke-dasharray: 10 12; stroke-linecap: round; animation: flow var(--dash-flow, 24s) linear infinite; } @keyframes flow { to { stroke-dashoffset: -440; } } .river-ribbon { fill: var(--brand); opacity: .36; mix-blend-mode: screen; } /* the white theme's primary is a mid slate, which barely screens over a photograph — there the ribbon takes the salmon secondary instead */ [data-theme='white'] .river-ribbon { fill: var(--brand-2); } /* The curve SVG is deliberately stretched — preserveAspectRatio="none", so the river spans whatever width the hero happens to be. That same non-uniform scale would squash anything riding it: the isotype would widen with the window and the waypoint disc would turn into an ellipse. A symbol's own preserveAspectRatio cannot save it, because the distortion is applied to the coordinate system the symbol is already inside. So the two markers are scaled back by the inverse of the horizontal stretch. app.js measures the hero and publishes the ratio as --sx / --sy; scaling x by sy/sx leaves the vertical size alone and makes the pair square again. The 1 / 1 defaults mean that if the script never runs, nothing moves. */ .hero-art { --sx: 1; --sy: 1; } .river-node, .river-node-in { transform-box: fill-box; transform-origin: center; transform: scaleX(calc(var(--sy) / var(--sx))); } .river-node { color: var(--brand); filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); } .river-node-in { fill: #fff; } /* ------------------------------------------------------------- confluence -- */ .confluence { background: var(--surface-3); color: #fff; position: relative; overflow: hidden; padding: 96px 0; } .confluence .mark-iso { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 300px; color: #fff; opacity: .08; transition: color .5s var(--ease), opacity .5s var(--ease), transform .8s var(--ease); } /* the whole band is the hover target — the watermark itself is decorative and sits behind the copy, so it would be a hard thing to point at */ .confluence:hover .mark-iso { color: var(--salmon-400); opacity: .3; transform: translateY(-50%) scale(1.04); } .confluence blockquote { margin: 0; max-width: 22ch; font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 800; line-height: 1.16; letter-spacing: -.022em; } .confluence blockquote span { color: var(--accent); display: block; max-width: 24ch; } .confluence figcaption { margin-top: 26px; color: rgba(255,255,255,.66); max-width: 44ch; font-size: .96rem; } /* ------------------------------------------------------------ wave divider - */ .wave { display: block; width: 100%; height: 56px; color: var(--bg); } .wave path { fill: currentColor; } .wave-up { transform: scaleY(-1); } /* -------------------------------------------------------------- purposes --- */ .purpose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .purpose { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 300px; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; } .purpose:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; } /* a screen's ratio rather than a fixed strip, so the picture is taller and stays in proportion as the card narrows */ /* What a photograph is of, drawn over its bottom-right corner — the same place and the same voice as the captions the client's own originals carry in their margin, which a crop cuts off. Small, and white with a shadow under it rather than a panel behind it: it has to sit on a bright sky and on a dark stage without either one becoming a box. It is not `.photo`, so the greyscale axis leaves it alone, and it is pointer-transparent, so it never eats a click meant for the card. */ .photo-tag { position: absolute; top: 12px; right: 9px; z-index: 2; /* up the right-hand margin, reading bottom to top — the way the captions on the client's own originals are set. vertical-rl runs the line downwards; the half turn is what makes it climb instead, glyphs and all. */ writing-mode: vertical-rl; transform: rotate(180deg); font-family: Inter, Arial, Helvetica, sans-serif; font-size: 6.5px; line-height: 1; letter-spacing: .06em; color: #fff; opacity: .7; text-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; white-space: nowrap; /* one column, never two: a long credit that ran out of height was wrapping into a second line beside the first */ } /* Over a pale corner — a screenshot of a dashboard, a white sky — white on white is no caption at all. The shadow flips with the ink, so the letters keep an edge either way. */ .photo-tag.on-light { color: #1b2230; text-shadow: 0 1px 2px rgba(255,255,255,.7); } /* On a hero the bar is over the picture and the social rail is down its right edge, so the tag starts below the one and inside the other. */ .hero .photo-tag { top: 98px; right: 62px; font-size: 7.5px; } .purpose-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .purpose-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .purpose:hover .purpose-img img { transform: scale(1.06); } .purpose-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } .purpose-body h3 { margin-bottom: 6px; } .purpose-body p { color: var(--ink-2); font-size: .96rem; margin-bottom: 16px; } .purpose-more { margin-top: auto; font-weight: 700; color: var(--brand); font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; } .purpose:hover .purpose-more { gap: 12px; } .purpose-more svg { width: 15px; height: 15px; } /* --------------------------------------------------------------- pillars --- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 32px; position: relative; } /* The grid stretches each card to the tallest in the row and .pillar-inner takes all of that, but the front face kept its natural height — so a shorter card's panel stopped short of the bottom of its cell. */ .pillars .pillar-face.front { height: 100%; } .pillar-n { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; margin-bottom: 20px; box-shadow: var(--shadow-sm); } /* Card titles keep their weight when the typeface axis steps headings down (the serif options take every heading to 600, and the two display faces to 400) — that left a card's title reading like its own body copy. */ .pillar h3, .pillar-face.back h3, .card h3 { font-weight: var(--card-title-w, 800); } .pillar h3 { color: var(--brand); margin-bottom: 16px; } .pillar > p { color: var(--ink-2); font-size: .96rem; } .pillar ul { list-style: none; margin: 18px 0 0; padding: 0; } .pillar li { padding: 12px 0; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); line-height: 1.45; } /* the elaborated version used on Nosotros */ .pillar-full { padding: 34px 36px 38px; } /* An image marked as a card is still an image, so it follows the picture axis rather than the card one; img.photo outranks .card on specificity. Pictures whose container already clips them keep square corners, or they would round inside a panel that is not rounded in the same place. */ img.photo { border-radius: var(--radius-img); } .hero img.photo, .purpose img.photo, .season-shot img.photo, .pillar-face.back img.photo, .partner-shot img.photo, .exp-shot img.photo { border-radius: 0; } /* ------------------------------------------------------------------ cards -- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } /* ------------------------------------------------- two-column bands ------ A band whose heading has been hoisted out of its column so that the width axis can reach it — see views/*.html, .band-head. Three children, always in this order: the heading, then the two columns in source order. The gaps are here rather than inline because row-gap has to be nothing: the heading is a row of its own, and an inline `gap` shorthand would beat any rule trying to close it. */ .band-split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 0; align-items: center; } .band-split-top { align-items: start; } .band-split > .band-head { grid-column: 1; grid-row: 1; } .band-split > :nth-child(2) { grid-column: 1; grid-row: 2; } .band-split > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } /* the bands that put their picture first */ .band-split-rev > .band-head { grid-column: 2; } .band-split-rev > :nth-child(2) { grid-column: 1; grid-row: 1 / span 2; } .band-split-rev > :nth-child(3) { grid-column: 2; grid-row: 2; } /* the whole point: on `wide` the heading runs the width of the band and the two columns move underneath it */ [data-headw='wide'] .band-split > .band-head { grid-column: 1 / -1; } [data-headw='wide'] .band-split > :nth-child(2), [data-headw='wide'] .band-split > :nth-child(3) { grid-row: 2; } [data-headw='wide'] .band-split > :nth-child(2) { grid-column: 1; } [data-headw='wide'] .band-split > :nth-child(3) { grid-column: 2; } /* the copy belongs under the heading it follows, not floating in the middle of a row as tall as the picture beside it */ [data-headw='wide'] .band-split > :nth-child(2) { align-self: start; } [data-headw='wide'] .band-split-rev > :nth-child(2) { align-self: center; } [data-headw='wide'] .band-split-rev > :nth-child(3) { align-self: start; } .band-head { margin-bottom: 20px; } /* two or more buttons closing a band column — they wrap rather than overflow the half-width the split gives them */ .band-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* "Leer más" as a link inside the paragraph rather than a button under it: it is a control, so it is still a