/* ============================================================ LATIN AMERICA — per-event theme (brand palette + event-only tweaks) Loaded AFTER the shared shared/assets/css/styles.css, so anything here overrides the shared defaults for Latin America only — it does NOT affect Europe / Canada / India. Palette source: TravelWeek2027_LatinAmerica_Identity_Style_Guide.pdf (Box 2372025851909, updated 07/27/26) + the official RGB logo SVGs (Box 384484341297 / 384481043646): PRIMARY blue #165B84 (read out of the NAVY logo file) ACCENT yellow #FEDC52 (read out of the YELLOW logo file) Guide rules, verbatim: "Yellow color is never to be used as a background fill"; "Yellow colored logo on blue background is approved"; "Blue logo on yellow background is not approved". The approved background is the blue gradient (guide p.6). HEX NOTE: the umbrella card in build.js carries the accent as #FFDD52, from design's 2026-07-28 palette note. The brand logo files say #FEDC52. This event uses the LOGO value so the accent matches the lockup sitting next to it. One of the two should win site-wide — Kat's call. NOT the old Travel Week South America kit (dark green #15331C + yellow). That brand was retired when the event was renamed to Latin America and widened to include Mexico; the `brand-event-twsa` skill still describes the green one and does not apply here. This is a FIRST-PASS palette: brand blue background system with yellow as the one pervasive accent (like Europe's mint / India's orange). The guide's secondary and tertiary tiers (p.7) can be layered in once the hexes are read off the artwork — the PDF's text layer does not carry them. ============================================================ */ :root { /* ---- Background system — brand blue. #165B84 is the primary and is used as the page background, the same way India runs on its brand maroon rather than a near-black. THE RAMP IS PINNED TO DESIGN'S APPROVED BAND: 23-34% HSL lightness on the brand hue. That is colour "variant C", Mimi Jung 2026-08-20, and it is what Canada (24-34% on hue 359) and India (23-34% on hue 322) both run. This market is 23-34% on hue 202-204, so all three markets are the same ramp in three different hues. Measured, not eyeballed - if you change a step here, convert it to HSL and check it still lands in the band. Kat, 2026-09-09, on the first draft: "the colors are slightly off or maybe they're a little too dark." She was right and it was the bottom of the ramp: --footer was 18%, five points under India's floor, because the first pass used #0d3550 - design's deep stop for this market's UMBRELLA CARD. That value is the END OF A GRADIENT behind a card, not a flat page band, and it read as a hole at the foot of every page. --navy-2 was also one step over the 34% ceiling. ---- */ --navy: #165B84; /* primary background — brand blue */ --navy-2: #196794; /* raised surface */ --navy-3: #124d70; /* alternate section band (darker) */ --ink: #0f4467; /* deepest panel (hero, get-involved) */ --footer: #104365; /* footer base */ /* ---- Accent — YELLOW. The shared CSS keys every accent off --mint, so setting it here recolors eyebrows, numbers, buttons, links, rules and the wave in ONE place. Yellow stays an accent only — never a background fill, per the guide. ---- */ --mint: #FEDC52; /* brand yellow */ /* RGB components so the shared translucent overlays + accent tints render in this palette rather than Europe's navy/mint. MUST track the hex tokens above: --navy-rgb -> --navy, --ink-rgb -> --ink, --mint-rgb -> --mint. */ --navy-rgb: 22, 91, 132; --ink-rgb: 15, 68, 103; --mint-rgb: 254, 220, 82; /* ---- Structural neutrals, blue-tinted so they sit on the brand blue ---- */ --dblue: #3E6A85; --bgray: #9FC0D3; /* ---- Warm neutrals (shared warm/secondary spots on the dark theme). Placeholders until the guide's secondary tier is read off the artwork — kept desaturated so nothing invented reads as a brand color. ---- */ --warm-1: #D8CFA8; --warm-2: #E6E0C6; --warm-3: #F0ECDB; /* ---- Text (light, for the blue theme) ---- */ --text: #EDF4F8; /* body copy */ --text-muted: #D3E4EE; --text-faint: #A8C7D9; /* clears AA on #165B84 */ --charcoal: #21384A; /* Body Copy — for any LIGHT-bg context only */ /* ---- Fonts ---- shared type system across the Travel Weeks. The guide specifies Montserrat throughout (Bold headlines / Medium print body / Light presentation body); the site keeps Oswald for display so the heading treatment matches the other markets. Flag to design if they want Montserrat Bold headlines here instead. */ --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---- Latin America-only design tweaks ---- Add rules below for changes you want on this site ONLY. Anything that should apply to every Travel Week goes in shared/assets/css/styles.css. */ /* Hero background. No Panama City photography yet — the approved copy doc reads "[Photos to be added]" — so the hero is the guide's approved blue gradient rather than a placeholder image. Swap in a gradient PNG or a venue photo the way India and Canada do (url(...) first, gradient as fallback) once design supplies one. */ .hero, .page-hero { background: radial-gradient(125% 135% at 28% 16%, #2280BA 0%, #165B84 52%, #0F4367 100%); } /* Lighter left-to-right scrim than the shared default, matching Canada's and India's. The shared rule in styles.css runs to 95% ink at the left edge; it is tuned for Europe, whose ink is a near-black #0c1728 at 10% lightness. Over a 23% blue it buries the hero, and it is the same thing design flagged on India in August - the first draft of this market inherited it untouched, which is most of what Kat saw as "a little too dark" on 2026-09-09. These are Canada's and India's exact stops, so all three markets now scrim the same. */ .hero::after { background: linear-gradient(90deg, rgba(var(--ink-rgb),.84) 0%, rgba(var(--ink-rgb),.56) 38%, rgba(var(--ink-rgb),.14) 68%, rgba(var(--ink-rgb),0) 100%); } /* Hero wave — same treatment as Europe: design's vector sheet used as a MASK over a yellow gradient, right-anchored at full height, so the lines stay crisp, bleed top and bottom, and dissolve to the left instead of running behind the headline. wave.svg here is the shared Travel Week wave SHAPE (no blue baked in); the Latin America design elements add a STAR MASK variant (guide p.10) that is Illustrator-only today. Swap it in when design exports one for web. */ .hero .wave { inset: 0 0 0 auto; /* right-anchored, always full height */ width: min(88%, 1280px); background: linear-gradient(90deg, transparent 0%, transparent 10%, var(--mint) 58%); -webkit-mask: url('../img/wave.svg') right center / cover no-repeat; mask: url('../img/wave.svg') right center / cover no-repeat; opacity: .7; } /* No sponsors this cycle (sponsors page hidden) — suppress the shared footer's sponsor-logo band. Remove when sponsors are added. */ .sponsors-logos { display: none; } /* No next-cycle save-the-date for this market yet. */ .savedate { display: none; } /* Venue teaser with no photo. The approved copy doc reads "[Photos to be added]", so this market has no venue image yet and the shared two-column `.venue` grid would leave the right half empty. One column until a photo lands; delete this rule and add the `.img` block back at that point. */ .venue--noimg { grid-template-columns: 1fr; } /* Source attribution under a stat/market card. The Latin America copy doc cites a source line under most of its trends and market landscape blocks; no other market's copy does, so the rule lives here rather than in the shared stylesheet. Promote it to shared/assets/css/styles.css the first time a second market needs it. */ .card .src { color: var(--text-faint); font-size: 12px; font-style: italic; line-height: 1.5; margin-top: 14px; } /* Header menu, tightened for THIS market only. Latin America carries ten top-level items, a language switcher in the same row, and the longest labels of any market once translated - Portuguese runs "Informações para expositores", "Patrocinadores", "Programação". At the shared 12px padding and .1em tracking the row wrapped "Brand USA" onto a second line and squeezed the logo from 131px to 79px. Measured per language, not guessed: a menu item is 46px on one line and 69px on two. Europe, Canada and India are untouched - they keep the shared spacing, which fits their shorter English-only menus. */ .menu > li > a, .menu > li > span { padding: 12px 7px; letter-spacing: .05em; } /* The last stretch before the burger takes over at 1080px. The translated menus are wider than the English one, so Portuguese and Spanish still wrapped between 1081 and 1140px while English was clean. Padding and tracking only - never `white-space: nowrap`, which trades a wrapped row for a crushed logo. */ @media (min-width: 1081px) and (max-width: 1140px) { .menu > li > a, .menu > li > span { padding: 12px 4px; letter-spacing: .02em; } .langsw { margin-left: 8px; } } /* ============================================================ MARKET LANDSCAPE CARDS — markets.html Kat 2026-09-22: "anything we can do to make the markets page look better... on the Europe site, the buyers page, you have all these flags and stuff that made it look really nice... just make it a little less text-heavy looking." A flag beside the country name, the same device the buyer list uses, and the card's own headline figure pulled up above the bullets so the eye lands on a number before a wall of grey. Flags are regional-indicator emoji, so there is no image to source, licence or ship. No copy is rewritten; every word still comes from the approved doc. The oversized flag watermark is back at Kat's ask 2026-09-22: "can we add that shadowy flag in the corner of the Markets widgets, like we have in the Europe one for the buyers?" First pass at 128px/.08 in a ~600px card read as a smudge; at 210px it fills the corner the way it does on a buyer tile and reads as deliberate. Latin America only: it is the one market whose copy has a markets page. ============================================================ */ .mkt { position: relative; overflow: hidden; } /* Sits UNDER the text, clipped by the card, inert to pointer and screen reader. Grayscale so seven different flags do not fight the brand blue. */ .mkt__ghost { position: absolute; right: -14px; bottom: -26px; font-size: 210px; line-height: 1; z-index: 0; opacity: .11; filter: grayscale(1); pointer-events: none; user-select: none; } .mkt > *:not(.mkt__ghost) { position: relative; z-index: 1; } .mkt__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--hairline); } .mkt__flag { font-size: 28px; line-height: 1; flex-shrink: 0; } .mkt__head h3 { margin: 0; } .mkt__stat { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .mkt__stat-n { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 40px); line-height: 1; color: var(--mint); } .mkt__stat-l { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } /* One sources line for the whole section instead of one under every card. Seven of them stacked read as a fourth weight of grey text. */ .mkt-sources { color: var(--text-faint); font-size: 12px; font-style: italic; line-height: 1.6; margin: 28px 0 0; max-width: 100ch; } /* The venue photo the team supplied is 332x420. In the shared .venue grid (1.05fr .95fr) its column comes out ~617px wide, so the file is blown up 1.9x and goes soft - Kat 2026-09-22: "it looks like the image is blurry." Narrowing the column to roughly the file's own width renders it near 1:1. It also suits the shot, which is portrait. Replace this rule the moment a full-size photo arrives from the hotel. */ /* Kat 2026-09-22: "is there any way to make the proportion a little bit better? The mobile is breaking." MOBILE WAS BROKEN because this override sat outside a media query. The shared stylesheet stacks .venue to one column under 820px, but .venue--narrow is more specific and came later, so the two-column grid survived onto the phone: a 40px-wide sliver of photo beside the text, and the card running past the edge of the screen. Keeping the override inside a min-width query hands the phone back to the shared rule. PROPORTION: the photo is 706x1064, so a column wide enough to read it was also tall enough to leave dead space beside the text. Capping the height and letting it crop from the centre keeps the tower and the pool and gives a calmer block. */ @media (min-width: 821px) { .venue--narrow { grid-template-columns: .5fr 1fr; } .venue--narrow .img { min-height: 0; max-height: 470px; } /* Crop off the bottom, not both ends. Kat 2026-09-22: "align the image to the top so we see the top of the building... we're just cutting off the top of the building a little bit." Centred cropping took the roofline and a strip of lawn; anchoring to the top spends the whole crop on the lawn and keeps the towers and the pool. */ .venue--narrow .img img { object-position: top; } } @media (max-width: 820px) { .venue--narrow .img { min-height: 0; height: 260px; } }