/* fonts.css */ /* vietnamese */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.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; } /* latin */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNGfJ4.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; } /* vietnamese */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.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; } /* latin */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNGfJ4.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; } /* vietnamese */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.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; } /* latin */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNGfJ4.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; } /* vietnamese */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.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; } /* latin */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNGfJ4.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; } /* vietnamese */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.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; } /* latin */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/ijwRs572Xtc6ZYQws9YVwnNGfJ4.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; } /* cyrillic-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gW8tenXg.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gf8tenXg.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gY8tenXg.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gU8tenXg.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gV8tenXg.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; } /* latin */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gb8tc.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; } /* cyrillic-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gW8tenXg.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gf8tenXg.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gY8tenXg.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gU8tenXg.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gV8tenXg.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; } /* latin */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gb8tc.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; } /* cyrillic-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gW8tenXg.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gf8tenXg.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gY8tenXg.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gU8tenXg.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gV8tenXg.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; } /* latin */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gb8tc.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; } /* tokens.css */ /** * Design tokens. * * The handoff prototypes carried no stylesheet at all — 135 inline style * attributes on the homepage alone, no classes, no custom properties. This * file is where those values become a system. Every other stylesheet consumes * these and defines no raw colour of its own. * * Colour corrections applied here, and why: * --lca-cyan was #2FB6C2 — 2.44:1 with white. Fails WCAG AA (needs 4.5). * --lca-gold was #B8641C — 4.31:1 with white. Fails WCAG AA. * Both are used as card backgrounds behind white text, so both were darkened * to the nearest passing value. The shift is imperceptible at rest. * * @package LCA */ :root { /* ---- Brand ---- */ --lca-navy: #1e1b4b; --lca-terracotta: #c2410c; --lca-teal: #1f7a82; --lca-gold: #b2611b; /* was #B8641C — AA fix */ --lca-cyan: #21818a; /* was #2FB6C2 — AA fix */ /* Darkened variants for hover. The design faded whole cards with opacity: 0.85, which fades the white label too and dropped four of five transportation cards below AA. Hover darkens the ground instead. */ --lca-navy-dark: #16143a; --lca-terracotta-dark: #9d340a; --lca-teal-dark: #19626a; --lca-gold-dark: #8e4d15; --lca-cyan-dark: #1a686f; /* ---- Surfaces ---- */ --lca-sand: oklch(98.5% 0.004 75); --lca-sand-alt: oklch(96% 0.008 75); --lca-white: #fff; /* Was 92% lightness — 1.16:1 against the sand ground, which meant every card edge, table frame and hairline was invisible and the page read as one undifferentiated wall. At 86% the card edges actually appear while staying quiet. */ --lca-line: oklch(86% 0.008 75); --lca-line-soft: oklch(94% 0.005 75); /* ---- Ink ---- */ --lca-ink: var(--lca-navy); --lca-body: oklch(45% 0.02 265); --lca-muted: oklch(50% 0.02 265); /* Reversed-out text on navy. Measured: 85% = 11.8:1, 60% = 6.5:1, 50% = 4.95:1. All pass AA against #1E1B4B. */ --lca-on-navy: #fff; --lca-on-navy-strong: rgb(255 255 255 / 0.85); --lca-on-navy-mid: rgb(255 255 255 / 0.7); --lca-on-navy-soft: rgb(255 255 255 / 0.6); --lca-on-navy-faint: rgb(255 255 255 / 0.5); --lca-on-navy-rule: rgb(255 255 255 / 0.12); /* ---- Hero scrims ---- One colour fading out, not a wash. The alpha follows an eased curve so it reads like a soft-edged PNG rather than a linear ramp with a visible band, and the top of the frame is left completely clear so the photograph is the photograph. */ --lca-scrim-hero: linear-gradient(180deg, rgb(30 27 75 / 0.000) 0%, rgb(30 27 75 / 0.020) 22%, rgb(30 27 75 / 0.100) 35%, rgb(30 27 75 / 0.240) 45%, rgb(30 27 75 / 0.420) 53%, rgb(30 27 75 / 0.620) 60%, rgb(30 27 75 / 0.760) 67%, rgb(30 27 75 / 0.860) 75%, rgb(30 27 75 / 0.920) 84%, rgb(30 27 75 / 0.950) 100%); --lca-scrim-page: linear-gradient(180deg, rgb(30 27 75 / 0.000) 0%, rgb(30 27 75 / 0.020) 24%, rgb(30 27 75 / 0.100) 38%, rgb(30 27 75 / 0.260) 50%, rgb(30 27 75 / 0.460) 58%, rgb(30 27 75 / 0.660) 65%, rgb(30 27 75 / 0.790) 73%, rgb(30 27 75 / 0.880) 82%, rgb(30 27 75 / 0.920) 92%, rgb(30 27 75 / 0.930) 100%); /* On a phone the heading and its line of introduction fill the frame, so a scrim anchored to the bottom leaves the top of the heading over bare sky — measured at 1.29:1. This one starts at a light tint and deepens, which keeps the photograph readable and the text legible. */ --lca-scrim-hero-sm: linear-gradient(180deg, rgb(30 27 75 / 0.300) 0%, rgb(30 27 75 / 0.300) 0.0%, rgb(30 27 75 / 0.312) 13.7%, rgb(30 27 75 / 0.343) 24.5%, rgb(30 27 75 / 0.393) 33.8%, rgb(30 27 75 / 0.452) 40.7%, rgb(30 27 75 / 0.521) 46.8%, rgb(30 27 75 / 0.595) 52.6%, rgb(30 27 75 / 0.672) 57.7%, rgb(30 27 75 / 0.749) 62.4%, rgb(30 27 75 / 0.821) 66.2%, rgb(30 27 75 / 0.883) 68.8%, rgb(30 27 75 / 0.917) 70.7%, rgb(30 27 75 / 0.930) 72.0%, rgb(30 27 75 / 0.930) 100%); /* ---- Accents ---- */ --lca-divider-dotted: #e66c1b; /* ---- Type ---- */ --lca-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* The symbol faces at the end are load-bearing: the "View full guide" links end in a right arrow (U+2192), and Public Sans as served by Google Fonts does not carry it. Without a font in the stack that does, the browser draws a tofu box on the homepage. */ --lca-font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; /* Fluid: each size runs from its phone value at 360px to the comp's value at 1280px. Body copy runs the other way on purpose — 16px on a handset, 15px on a desktop, because reading distance differs. */ --lca-fs-eyebrow: clamp(12px, 11.61px + 0.109vw, 13px); --lca-fs-small: clamp(14px, 13.61px + 0.109vw, 15px); --lca-fs-base: clamp(16px, 15.61px + 0.109vw, 17px); --lca-fs-lead: clamp(18px, 17.22px + 0.217vw, 20px); --lca-fs-h4: clamp(17px, 15.83px + 0.326vw, 20px); --lca-fs-h3: clamp(20px, 17.65px + 0.652vw, 26px); --lca-fs-h2: clamp(24px, 20.87px + 0.870vw, 32px); --lca-fs-h1: clamp(30px, 24.52px + 1.522vw, 44px); --lca-fs-display: clamp(30px, 26.09px + 1.087vw, 40px); --lca-lh-tight: 1.12; --lca-lh-heading: 1.2; --lca-lh-body: 1.6; --lca-lh-loose: 1.8; --lca-ls-eyebrow: 1.2px; --lca-ls-label: 0.5px; /* ---- Layout ---- */ --lca-container: 1280px; --lca-gutter: 16px; /* An absolute length, not 65ch. A ch unit resolves against the font size of whichever element uses it, so the same token gave a paragraph 597px, a lead 676px, an h3 870px and an h2 1061px — every heading hung left of its own body copy. 600px is 65 characters at the body size, once. */ --lca-measure: 600px; --lca-space-1: 8px; --lca-space-2: 16px; --lca-space-3: 24px; --lca-space-4: 32px; --lca-space-5: 48px; --lca-space-6: 56px; --lca-section-y: 32px; --lca-grid-gap: 24px; /* ---- Radius ---- The design's radii cluster at 8px (buttons) and 10px (cards), with two deliberate exceptions: the homepage hero at 4px and interior heroes at 14px. Nothing above 14px, and no pill shapes. */ --lca-radius-btn: 8px; --lca-radius-card: 10px; --lca-radius-hero: 4px; --lca-radius-hero-page: 14px; --lca-radius-widget: 12px; /* ---- Elevation ---- */ --lca-shadow-widget: 0 20px 48px rgb(30 27 75 / 0.14); --lca-shadow-card: 0 1px 2px rgb(30 27 75 / 0.04); /* ---- Motion ---- */ --lca-transition: 160ms ease; /* ---- Focus ---- Nothing in the handoff defined a focus appearance. WCAG 2.4.7 requires one, so it is defined here and applied globally in base.css. */ --lca-focus-color: var(--lca-terracotta); --lca-focus-width: 3px; --lca-focus-offset: 2px; } @media (min-width: 600px) { :root { --lca-gutter: 24px; --lca-section-y: 40px; --lca-grid-gap: 24px; } } @media (min-width: 900px) { :root { --lca-section-y: 48px; --lca-grid-gap: 32px; } } @media (min-width: 1280px) { :root { --lca-section-y: 56px; } } /* The breakpoint steps below carry spacing only. Type is fluid from the scale above and needs no per-breakpoint override. */ /* base.css */ /** * Base: reset, document defaults, typography, focus, accessibility utilities. * * @package LCA */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--lca-sand); color: var(--lca-ink); font-family: var(--lca-font-sans); font-size: var(--lca-fs-base); line-height: var(--lca-lh-body); -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; color: var(--lca-ink); text-wrap: balance; } h1, h2, h3 { font-family: var(--lca-font-serif); font-weight: 600; } h1 { font-size: var(--lca-fs-h1); line-height: var(--lca-lh-tight); } h2 { font-size: var(--lca-fs-h2); line-height: 1.18; } h3 { font-size: var(--lca-fs-h3); line-height: 1.25; } h4 { font-family: var(--lca-font-sans); font-size: var(--lca-fs-h4); font-weight: 700; line-height: 1.35; } p { margin: 0 0 1em; color: var(--lca-body); text-wrap: pretty; } p:last-child { margin-bottom: 0; } /* ---- Links ---- */ a { color: var(--lca-navy); text-decoration: none; transition: color var(--lca-transition); } a:hover { color: var(--lca-terracotta); } /* Links inside running text keep an underline — colour alone is not a sufficient affordance (WCAG 1.4.1). Navigation, buttons and the flight direction toggles are exempt because their role is unambiguous from position and shape. */ /* Scoped to running text, and only running text. The previous selector matched every descendant link, at a specificity no component could outrank, so buttons and section links came out underlined too. */ .lca-prose :is(p, li, td, th, dd, figcaption, blockquote) > a:not(.lca-btn):not(.wp-block-button__link), .entry-content :is(p, li, td, th, dd, figcaption, blockquote) > a:not(.lca-btn):not(.wp-block-button__link) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .lca-prose :is(p, li, td, th, dd, figcaption, blockquote) > a:not(.lca-btn):not(.wp-block-button__link):hover, .entry-content :is(p, li, td, th, dd, figcaption, blockquote) > a:not(.lca-btn):not(.wp-block-button__link):hover { text-decoration-thickness: 2px; } ::selection { background: #fbc02d; color: var(--lca-navy); } /* ---- Focus ---- The handoff defined no focus appearance at all. This is the WCAG 2.4.7 contract for the whole site: a visible ring on every interactive element, never removed. */ :focus-visible { outline: var(--lca-focus-width) solid var(--lca-focus-color); outline-offset: var(--lca-focus-offset); border-radius: 2px; } /* On navy grounds the terracotta ring is too close in luminance, so the ring goes white there. */ .lca-utility :focus-visible, .lca-footer :focus-visible, .has-navy-background-color :focus-visible { outline-color: #fff; } /* ---- Accessibility utilities ---- */ .lca-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lca-skip-link { position: absolute; top: -100px; left: var(--lca-gutter); z-index: 999; padding: 12px 20px; background: var(--lca-white); color: var(--lca-navy); font-weight: 700; border: 2px solid var(--lca-terracotta); border-radius: var(--lca-radius-btn); transition: top var(--lca-transition); } .lca-skip-link:focus { top: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Print ---- */ @media print { .lca-utility, .lca-navtoggle, .lca-nav, .lca-header__cta, .lca-footer__partners { display: none; } body { background: #fff; color: #000; } } /* Migrated copy quotes bare URLs like www.aduanas-mexico.com.mx as plain text. An unbroken string that long does not fit a 358px phone column and pushed the page sideways, so long words wrap rather than overflow. */ .entry-content :is( p, li, dd, dt, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 ) { overflow-wrap: break-word; } /* layout.css */ /** * Layout: container, sections, grids, the responsive contract. * * Mobile-first. The handoff was drawn at a fixed 1280px container with no * responsive design at all, so the breakpoints below are the theme's own: * * < 600px single column throughout, tables scroll in their own container * 600–899 3-up and 4-up become 2-up; 6-up becomes 3x2 * 900–1279 full grids at reduced gaps * >= 1280 exactly as designed * * Airport traffic skews heavily to phones checking flight status, so the base * stylesheet is the phone layout and complexity is added upward. * * @package LCA */ .lca-main { display: block; } /* ---- Container ---- */ .lca-container, .lca-section__inner { width: 100%; max-width: var(--lca-container); margin-inline: auto; padding-inline: var(--lca-gutter); } /* ---- Sections ---- */ .lca-section { padding-block: var(--lca-section-y); } .lca-section--flush { padding-block: 0; } .lca-section--alt { background: var(--lca-sand-alt); } .lca-section--navy { background: var(--lca-navy); color: var(--lca-on-navy); } .lca-section--navy h1, .lca-section--navy h2, .lca-section--navy h3, .lca-section--navy h4 { color: var(--lca-on-navy); } .lca-section--navy p { color: var(--lca-on-navy-strong); } .lca-section--teal { background: var(--lca-teal); color: var(--lca-on-navy); } .lca-section--teal h2, .lca-section--teal h3 { color: var(--lca-on-navy); } .lca-section--teal p { color: var(--lca-on-navy-strong); } /* ---- Prose ---- */ .lca-prose { max-width: var(--lca-measure); } /* On a post the same element is both the prose wrapper and the measured column. The measure belongs to the text blocks inside it, not to the column — capping the column at 600px left the floated images nowhere to sit and two thirds of the page empty beside them. */ .lca-prose.lca-entry--measured { max-width: none; } .lca-prose--lead { font-size: var(--lca-fs-lead); } /* Text-led pages (policies, terms, statements) read at the prose measure, centred in the container. The measure goes on each child rather than on the wrapper: capping the wrapper would squeeze a rate table or a map figure into a 65ch column, and several migrated pages are mostly table. So paragraphs, headings and lists get the measure; anything that is genuinely wide keeps the container. */ /* Both of these are qualified with .entry-content deliberately. The generic `.entry-content > *` rule further down carries the same specificity and comes later in the file, so it used to win and the measure never applied at all — prose rendered at 1184px, about 150 characters a line. */ .entry-content.lca-entry--measured > * { max-width: var(--lca-measure); margin-inline: auto; } /* Aligned images wrap, the way they did on the old site. The catch on a measured page: the prose is capped at the measure but its containing block is the full column, so a plain `float: right` parks the image against the column edge with a canyon of white between it and the words it belongs to. The outer margin closes that canyon - it is the difference between the column and the measure, so the image lands flush with the right edge of the text above it and the following lines wrap tight against it. max() keeps it at zero once the column is narrower than the measure, where no canyon exists to close. */ .entry-content > .alignright { float: right; margin: 0.35em 0 var(--lca-space-3) var(--lca-space-4); } .entry-content > .alignleft { float: left; margin: 0.35em var(--lca-space-4) var(--lca-space-3) 0; } .entry-content.lca-entry--measured > .alignright { margin-right: max( 0px, calc( 100% - var(--lca-measure) ) ); } .entry-content.lca-entry--measured > .alignleft { margin-left: 0; } /* Headings are NOT cleared. The old site lets a heading and the text under it wrap beside a floated picture, and clearing them is what produced the tall empty band on pages where a float is the last thing before a new section: the float has nothing left to wrap, so it stands alone and the heading drops below it. */ /* Too narrow to wrap around: the image goes full width and the text runs underneath it, which is what every one of these pages does on a phone. */ @media (max-width: 781px) { .entry-content > .alignright, .entry-content > .alignleft { float: none; margin-inline: 0; margin-right: 0; } } .entry-content.lca-entry--measured > figure, .entry-content.lca-entry--measured > .wp-block-image, .entry-content.lca-entry--measured > .wp-block-table, .entry-content.lca-entry--measured > .wp-block-gallery, .entry-content.lca-entry--measured > .wp-block-embed, .entry-content.lca-entry--measured > .wp-block-columns, .entry-content.lca-entry--measured > .wp-block-cover, .entry-content.lca-entry--measured > .wp-block-group, .entry-content.lca-entry--measured > .alignwide, .entry-content.lca-entry--measured > .alignfull { max-width: 100%; } /* Classic-editor content that came across as a core/html block is raw markup with bare text nodes between its tags, and a bare text node cannot be matched by a child selector — those runs escaped the measure and ran the full container width beside 600px paragraphs. Wrapping the block's content in one element gives the measure something to hold on to. */ .entry-content.lca-entry--measured > .lca-rawblock { max-width: var(--lca-measure); margin-inline: auto; } /* A pullquote is prose, not a wide element — the generic figure exception above would otherwise let a paragraph of terms run the full container. */ .entry-content.lca-entry--measured > .wp-block-pullquote, .entry-content.lca-entry--measured > .wp-block-quote { max-width: var(--lca-measure); } .lca-rawblock > :first-child { margin-top: 0; } .lca-rawblock ul, .lca-rawblock ol { padding-left: 1.25em; } .lca-rawblock li { margin-bottom: 0.4em; } /* A table wider than the page scrolls inside itself rather than pushing the whole document sideways. */ .lca-entry--measured .wp-block-table { overflow-x: auto; } /* ---- Plain template ---- */ /* A page with no featured image shows its breadcrumb and title here instead of in a hero. `margin-inline: auto` centred that block in the container while the content beneath it started at the column's left edge, so the title floated in the middle of the page and nothing lined up. It reads as the head of the column it introduces, so it starts where the column does. */ .lca-page--plain .lca-page__head { max-width: var(--lca-measure); margin-inline: 0 auto; margin-bottom: var(--lca-space-4); } .lca-page--plain .lca-page__head h1 { margin-top: 0.25em; } /* A plain page that does carry a hero already has its breadcrumbs and h1 in the hero, so the content starts straight in. */ .lca-page--plain .lca-hero-wrap + .lca-section { padding-top: var(--lca-space-5); } /* A column whose image was never chosen still reserves its share of the row, so the copy beside it reads at half measure for no visible reason. An image block with no image renders as nothing at all, which leaves the column genuinely empty — so it steps out of the row, and its partner takes the width back. Both reverse themselves the moment a picture is added. `:empty` and the sibling combinator are used rather than `:not(:has(…))` because `:has()` cannot be nested inside `:has()`; a rule written that way is invalid and is dropped silently, which is easy to mistake for a specificity problem. */ .entry-content .wp-block-columns > .wp-block-column:empty { display: none; } .entry-content .wp-block-columns > .wp-block-column:has( ~ .wp-block-column:empty ), .entry-content .wp-block-columns > .wp-block-column:empty ~ .wp-block-column { /* The editor writes the share as an inline style, so this has to shout. */ flex-basis: auto !important; flex-grow: 1; } /* Core's group padding is meant for full-width bands. Inside the reading column it just insets a block from the text above and below it. */ .entry-content.lca-entry--measured .wp-block-group.has-global-padding { padding-inline: 0; } /* ---- Grids ---- One grid primitive, four densities. Each collapses on the same schedule so a page built from mixed patterns stays visually coherent at every width. */ /* minmax(0, 1fr) rather than 1fr: a bare 1fr track floors at the item's intrinsic width, so one card with a long label ("Ground Transportation") widens its own column and knocks the whole row out of alignment. minmax(0, ...) keeps every track exactly equal. */ .lca-grid { display: grid; gap: var(--lca-grid-gap); grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .lca-grid--2, .lca-grid--3, .lca-grid--4, .lca-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lca-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .lca-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lca-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* The 5-up transportation row: four across, with the fifth spanning the full width rather than sitting alone in a short row. */ .lca-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lca-grid--5 > :last-child:nth-child(5) { grid-column: 1 / -1; } .lca-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1280px) { .lca-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lca-grid--5 > :last-child:nth-child(5) { grid-column: auto; } } /* Core's block-gap rule adds a top margin to every sibling after the first. Inside a grid that shifts items 2..n down while the first stays put, which is what knocked the tile row out of line. The grid owns its own spacing. */ .lca-grid > * { margin-block: 0; } /* Edge-to-edge grids: cards touch, sharing a single outer border. Used by the quick-link tiles and the transportation row. */ .lca-grid--flush { gap: 0; border: 1px solid var(--lca-line); border-radius: var(--lca-radius-card); overflow: hidden; } /* ---- Two-column media + text ---- Four instances across the designs. The image side is switchable so one pattern covers all of them. */ .lca-split { display: grid; gap: var(--lca-space-4); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .lca-split { gap: var(--lca-space-5); grid-template-columns: 1fr 1fr; } .lca-split--wide-first { grid-template-columns: 1.2fr 1fr; } .lca-split--wide-last { grid-template-columns: 1fr 1.2fr; } /* Reverse visual order without reversing DOM order, so the reading order stays correct for screen readers and keyboard users. */ .lca-split--media-last .lca-split__media { order: 2; } } .lca-split__media img { width: 100%; border-radius: var(--lca-radius-card); } /* ---- Wide content ---- Tables, code and diagrams scroll inside their own container. The page body never scrolls sideways. */ .lca-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- Dotted divider ---- */ .lca-divider { height: 0; margin: 0; border: 0; border-top: 1px dotted var(--lca-divider-dotted); } /* ---- Block editor alignment ---- theme.json sets contentSize and wideSize to the same 1280px, because the design has one column width and no wider variant. So "wide" is not a bleed — it is the container. Only "full" goes edge to edge. The max-width also carries the gutter, so sections never touch the viewport edge on a phone without every block needing its own padding. */ .entry-content > * { max-width: min( var(--lca-container), 100% - (var(--lca-gutter) * 2) ); margin-inline: auto; } .entry-content > .alignwide { max-width: min( var(--lca-container), 100% - (var(--lca-gutter) * 2) ); } .entry-content > .alignfull { max-width: none; width: 100%; } /* A full-bleed band still keeps its inner content on the container grid. */ .entry-content > .alignfull > .wp-block-group__inner-container, .entry-content > .alignfull > * { max-width: var(--lca-container); margin-inline: auto; padding-inline: var(--lca-gutter); } /* ===================================================================== Migrated content pages Forty-eight pages came across from the old site as a title and a wall of paragraphs: correct content, no design decisions. The block markup is what it is and rewriting forty-eight pages by hand is not the job, so the treatment lives here — the same rules the designed sections use, reached through the structure the migration actually produced. ===================================================================== */ /* A heading after a run of prose needs air above it, or the page reads as one undifferentiated column. */ .lca-entry--measured > h2 { margin-top: var(--lca-space-6); padding-top: var(--lca-space-3); border-top: 1px solid var(--lca-line); } .lca-entry--measured > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .lca-entry--measured > h3 { margin-top: var(--lca-space-5); } /* Each section on a post owns its own floated picture. The heading and the section rule start a new section, so they clear whatever the previous one floated instead of sliding up beside it and losing their left edge. */ .lca-single .entry-content.lca-entry--measured > h2, .lca-single .entry-content.lca-entry--measured > h3, .lca-single .entry-content.lca-entry--measured > .wp-block-separator { clear: both; } /* The dotted rule is the design's section break; it needs room to act like one rather than sitting tight against the paragraph above. */ .lca-entry--measured > .wp-block-separator { max-width: var(--lca-measure); margin-block: var(--lca-space-5); } /* A separator immediately followed by a heading is doing the same job twice. Let the rule carry it and drop the heading's own border. */ .lca-entry--measured > .wp-block-separator + h2 { margin-top: var(--lca-space-3); padding-top: 0; border-top: 0; } /* --------------------------------------------------------------------- Questions block The wrapper exists so the schema code can find a page's questions; it is not meant to be a visual container. Its children therefore need the same measure, alignment and heading rhythm they would get standing directly in the column — core's constrained-layout rule otherwise centres them across the full container width, which on a text page reads as a different page. Each rule carries the .entry-content chain so it out-specifies core's generated container rule whichever order the two stylesheets load in. --------------------------------------------------------------------- */ .entry-content .lca-questions { padding-inline: 0; } .entry-content .lca-questions > :is( h2, h3, h4, p, ul, ol, blockquote ) { max-width: var(--lca-measure); margin-inline: 0 auto; } .entry-content .lca-questions > h2 { margin-top: var(--lca-space-6); padding-top: var(--lca-space-3); border-top: 1px solid var(--lca-line); } .entry-content .lca-questions > h3 { margin-top: var(--lca-space-5); } /* Same reasoning as the rule above: when a separator already draws the section break, the heading should not draw a second line under it. Here the separator is a sibling of the wrapper rather than of the heading. */ .lca-entry--measured > .wp-block-separator + .lca-questions > h2 { margin-top: var(--lca-space-3); padding-top: 0; border-top: 0; } /* Pictures in migrated prose were dropped in raw. Give them the card treatment the designed sections use so they read as deliberate. */ .lca-entry--measured > .wp-block-image img, .lca-entry--measured .wp-block-columns .wp-block-image img { border-radius: var(--lca-radius-card); } /* A full-width picture between paragraphs gets the container, not the text measure — a photograph squeezed to 65ch looks like a mistake. */ .lca-entry--measured > .wp-block-image { margin-block: var(--lca-space-4); } .lca-entry--measured > .wp-block-image.aligncenter, .lca-entry--measured > .wp-block-image:not(.alignleft):not(.alignright) { max-width: var(--lca-measure); } /* Logo and thumbnail rows arrived as plain columns. This is the grid the design uses for them: even tiles, centred marks, a card behind each. */ .lca-entry--measured .wp-block-columns { gap: var(--lca-space-3); margin-block: var(--lca-space-4); } .lca-entry--measured .wp-block-columns .wp-block-image { margin: 0; } .lca-entry--measured .wp-block-columns .wp-block-column:has( > .wp-block-image:only-child ), .lca-entry--measured .wp-block-columns .wp-block-column:has( > .wp-block-image:first-child:last-child ) { display: grid; place-items: center; padding: var(--lca-space-3); background: var(--lca-white); border: 1px solid var(--lca-line); border-radius: var(--lca-radius-card); } /* Lists in migrated copy: the marker sits closer and the items breathe. */ .lca-entry--measured > ul, .lca-entry--measured > ol { padding-left: 1.25em; } .lca-entry--measured > ul li, .lca-entry--measured > ol li { margin-bottom: 0.4em; } /* The closing call to action is rendered outside the container by the plain template, so it needs no viewport maths at all — it is already the width of the page, and only its inner content comes back to the grid. */ .lca-page__band { width: 100%; margin-top: var(--lca-space-6); } .lca-page__band > .alignfull, .lca-page__band > .wp-block-group { width: 100%; max-width: none; margin-inline: 0; } .lca-page__band > .wp-block-separator { max-width: min( var(--lca-container), 100% - (var(--lca-gutter) * 2) ); margin-inline: auto; margin-block: 0 var(--lca-space-5); } .lca-page__band .wp-block-group > * { max-width: var(--lca-container); margin-inline: auto; } /* The trailing call-to-action band. It uses the same two-column shape as the lca/section-cta-* patterns: copy on the left, button on the right, both vertically centred, so the right half of the band is never left empty. Core's constrained layout already centres the columns at the container width, so nothing here needs to fight it. */ .lca-page__band > .wp-block-group { width: 100%; max-width: none; } .lca-page__band .wp-block-columns { align-items: center; } .lca-page__band .wp-block-buttons { justify-content: flex-end; align-items: flex-end; } .lca-page__band .wp-block-column > p:not( .has-eyebrow-font-size ) { max-width: var(--lca-measure); } /* The eyebrow gets the same terracotta pill the heroes use, so the band is not the one place on the site where an eyebrow is plain uppercase text. */ .lca-page__band p.has-eyebrow-font-size { display: inline-block; width: fit-content; margin-bottom: 12px; padding: 6px 14px; background: var(--lca-terracotta); border-radius: 6px; } /* The buttons stack in the narrow column and share one width, so the right side of the band reads as a single block rather than two ragged pills. */ .lca-page__band .wp-block-buttons.is-vertical .wp-block-button { width: 100%; max-width: 260px; } .lca-page__band .wp-block-button__link { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; } .lca-page__band .wp-block-buttons.is-vertical .wp-block-button__link { width: 100%; } /* Stacked: the columns sit one above the other, so the buttons run the full width of the copy above them. Full-width taps beat a ragged right edge on a phone, and the class is repeated to out-specify core's own is-content-justification-right rule, which would otherwise still pull them to the right of a now-narrow column. */ @media (max-width: 781px) { .lca-page__band .wp-block-buttons.is-vertical.is-content-justification-right { justify-content: flex-start; align-items: stretch; } .lca-page__band .wp-block-buttons.is-vertical .wp-block-button { width: 100%; max-width: none; } } .lca-page--plain .entry-content.lca-entry--measured > .alignfull > * { max-width: var(--lca-container); margin-inline: auto; } /* Its own text stays at a readable measure inside the band. */ .lca-entry--measured > .alignfull p, .lca-entry--measured > .alignfull h2 { max-width: var(--lca-measure); } /* ---- Reading column and contents aside ---- The designed interior pages put the reading column on the left and a panel in the right-hand third. Migrated text pages have no panel, so on a wide screen they take the same two-column measure and fill the right with the page's own contents; without enough headings to list, the column simply centres as before. */ .lca-page__body--aside { display: grid; gap: var(--lca-space-5); align-items: start; } @media (min-width: 1000px) { .lca-page__body--aside { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--lca-space-6); } /* Left-aligned in its own column, the way the comps set the intro paragraph — the auto margins are only for the single-column case. */ .lca-page__body--aside .entry-content.lca-entry--measured > * { margin-inline: 0; } } .lca-toc { align-self: start; padding: var(--lca-space-3); background: var(--lca-white); border: 1px solid var(--lca-line); border-radius: var(--lca-radius-card); } /* The column, not just the contents box: with a help card under the contents the whole stack should travel together. */ .lca-aside { display: grid; gap: var(--lca-space-3); align-self: start; } @media (min-width: 1000px) { .lca-aside { position: sticky; top: var(--lca-space-3); } } .lca-aside__help { padding: var(--lca-space-3); background: var(--lca-sand); border: 1px solid var(--lca-line); border-radius: var(--lca-radius-card); } .lca-aside__title { margin: 0 0 var(--lca-space-1); font-size: var(--lca-fs-h4); } .lca-aside__text { margin: 0 0 var(--lca-space-2); color: var(--lca-muted); font-size: var(--lca-fs-small); } .lca-aside__phone { margin: 0 0 var(--lca-space-2); font-size: var(--lca-fs-lead); font-weight: 700; } .lca-aside__phone a { color: var(--lca-navy); text-decoration: none; } .lca-aside__phone a:hover { text-decoration: underline; } .lca-aside__cta { display: block; text-align: center; } /* The booking page is the one interior page with no right-hand column: the booking form takes the full width of the container. */ .lca-page__body--wide .entry-content.lca-entry--measured > * { margin-inline: 0; } .lca-page__body--wide .entry-content.lca-entry--measured > .lca-booking, .lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-shortcode, .lca-page__body--wide .entry-content.lca-entry--measured > form, .lca-page__body--wide .entry-content.lca-entry--measured > div { max-width: none; } /* This page has no right-hand column, so its content uses the whole width - no reading measure. Mixing the two was what made the lower half alternate between full-width and half-width blocks. */ .lca-page__body--wide .entry-content :is( p, h2, h3, h4, h5, li, blockquote, dd, ul, ol ) { max-width: none; } /* The booking form renders into a shadow root, so nothing inside it can be reached from here. Two things it needs, and both have to out-specify the measure rule on `.entry-content.lca-entry--measured > *`, which is why the full chain is spelled out: the whole column to lay out in, and its own scroll box so that on a narrow screen its internal layout cannot drag the page sideways with it. */ .lca-page__body--wide .entry-content.lca-entry--measured > sjd-form, .lca-page__body--wide .entry-content.lca-entry--measured > .lca-rawblock, .lca-page__body--wide .entry-content.lca-entry--measured > hr, .lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-separator, .lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-group { display: block; width: 100%; max-width: none; } .lca-page__body--wide .entry-content.lca-entry--measured > sjd-form { overflow-x: auto; } /* The safety notice sits inside an outer group that carries WordPress's global padding, which held the card 24px in from the column while the hero and the heading above it ran the full width. On a page with no sidebar the card should line up with them. */ .lca-page__body--wide .entry-content.lca-entry--measured > .wp-block-group.has-global-padding { padding-inline: 0; } /* The call-out is the one exception to the full-width rule above: a full-width card with its copy held to a reading measure and centred inside it. Core's constrained layout supplies the centring; this only restores the width cap that the rule above removes. */ .lca-page__body--wide .entry-content .is-style-lca-alert > :is( p, h2, h3, h4, li, blockquote ) { max-width: var(--lca-measure); } @media (min-width: 1000px) { .lca-toc { position: sticky; /* Clear of nothing in particular — the header does not stick — but a little breathing room reads better than flush to the viewport. */ top: var(--lca-space-3); max-height: calc(100vh - var(--lca-space-5)); overflow-y: auto; } } .lca-toc__heading { margin: 0 0 var(--lca-space-2); color: var(--lca-muted); font-family: var(--lca-font-sans); font-size: var(--lca-fs-eyebrow); font-weight: 700; letter-spacing: var(--lca-ls-eyebrow); text-transform: uppercase; } .lca-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; } .lca-toc__item + .lca-toc__item { border-top: 1px solid var(--lca-line-soft); } .lca-toc__link { display: block; padding: 9px 0; color: var(--lca-ink); font-size: var(--lca-fs-small); line-height: 1.35; text-decoration: none; } .lca-toc__link:hover, .lca-toc__link:focus-visible { color: var(--lca-terracotta); text-decoration: underline; } /* Jumping to a heading should not tuck it under the top of the window. */ .entry-content h2[id], .entry-content h3[id] { scroll-margin-top: var(--lca-space-4); } /* ---- Directory grids ---- Car rental desks, airlines, shops, dining. The migration left each entry as a full-width two-column band with a rule under it, so twenty entries were twenty screens. As a grid of cards the same twenty fit on one, and the card's own edge does the job the rules were doing. */ .lca-directory { display: grid; /* 230px rather than 200px: at the measured column width 200px fits four cards, and four leaves so little room inside the padding that every entry's address breaks across three lines. Three wider cards read as one address per two lines. */ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--lca-space-3); margin-block: var(--lca-space-5); } /* A core/group emits WordPress's flow layout, whose `> * { margin-block-start }` rule skips the first child. Inside a grid that staggers the first card of each row and doubles the row gap, so the grid takes its spacing back. */ .lca-directory > *, .lca-dircard > * { margin-block-start: 0; margin-block-end: 0; } .lca-dircard { display: flex; flex-direction: column; overflow: hidden; background: var(--lca-white); border: 1px solid var(--lca-line); border-radius: var(--lca-radius-card); } /* The logos are supplied at wildly different shapes and on different grounds, so each sits in a fixed white box and is contained, never cropped — a cropped wordmark is a broken wordmark. */ .lca-dircard__logo { display: grid; place-items: center; height: 104px; min-height: 0; overflow: hidden; margin: 0; padding: var(--lca-space-2); background: var(--lca-white); border-bottom: 1px solid var(--lca-line-soft); } /* The image fills the box and object-fit letterboxes inside it, so a logo of any shape is contained rather than cropped and can never push past the divider onto the text below. A max-height cap cannot do this: a percentage max-height resolves to none against an auto-height grid area, and an absolute one is wrong the moment the box height changes. */ /* The cap is an absolute length, not a percentage: the box is 104px tall with 16px of padding and a 1px rule, and a percentage height resolves to auto against the optimiser's inline wrapper — which is how the logos ended up at their natural 150px and clipped. */ .lca-dircard__logo picture { display: block; width: auto; margin-inline: auto; } .lca-dircard__logo img { width: auto; height: auto; max-width: 100%; max-height: 71px; /* On the image, not the wrapper: blocks.css gives that wrapper width:100% at equal specificity and loads later, so centring it there does nothing. Centring here works whichever rule wins on the wrapper. */ margin-inline: auto; border-radius: 0; object-fit: contain; } /* The migration left two shapes of card. Some wrap their text in a .lca-dircard__body; most drop the paragraph straight into the card, and on the car rental page none of the 19 entries has the wrapper at all. Every rule below therefore matches the paragraph whether or not it is wrapped — written only against __body they were dead selectors, and the text sat hard against the card border with no padding at all. */ .lca-dircard__body, .lca-dircard > :not( .lca-dircard__logo ) { padding: var(--lca-space-2) var(--lca-space-3) var(--lca-space-3); } /* Only the wrapper grows. Applied to a bare paragraph it would stretch each one in a multi-paragraph card instead of filling the card once. */ .lca-dircard__body { flex: 1; } .lca-dircard__body p, .lca-dircard > p { margin: 0; color: var(--lca-body); line-height: 1.5; } .lca-dircard__body p + p, .lca-dircard > p + p { margin-top: 0.4em; } /* The entry name is the first link and carries the scan, so it gets the weight; the phone number under it stays a link but reads as detail. */ /* inline-block, not block. Every card in the migration already ends the name with a
— either after the or after the wrapping it — so a block here produced two line breaks and a gap under every entry name. This keeps the margin working without adding a break of its own. */ .lca-dircard__body strong, .lca-dircard > :not( .lca-dircard__logo ) strong { display: inline-block; margin-bottom: 2px; font-size: var(--lca-fs-base); line-height: 1.25; } /* text-decoration does not propagate into an atomic inline-level box, so making the name an inline-block stopped the anchor's underline painting on it. Per the note below that underline is load-bearing, not decoration, so it is set on the name explicitly. Both nestings the migration produced are covered; a that is not a link is untouched. */ .lca-dircard a > strong, .lca-dircard strong > a { text-decoration: underline; } /* No text-decoration:none here. Navy link text on the card's grey body copy is 2.15:1 — below the 3:1 WCAG F73 wants before colour alone may mark a link — so the underline is load-bearing, not decoration. */ .lca-dircard__body a, .lca-dircard__body strong a, .lca-dircard > :not( .lca-dircard__logo ) a { color: var(--lca-ink); } .lca-dircard__body a:hover, .lca-dircard__body a:focus-visible, .lca-dircard > :not( .lca-dircard__logo ) a:hover, .lca-dircard > :not( .lca-dircard__logo ) a:focus-visible { color: var(--lca-terracotta); text-decoration: underline; } /* A directory is wider than the reading measure, so it breaks out of it. */ .lca-entry--measured > .lca-directory { max-width: 100%; } @media (max-width: 599px) { .lca-directory { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--lca-space-2); } .lca-dircard__logo { height: 80px; } .lca-dircard__logo img { max-height: 47px; } } /* A page that wraps text around a picture needs a wider column than one that is pure prose. At the 600px reading measure, a 280px image leaves a 286px ribbon of text beside it - about 34 characters a line, which is unreadable. Widening the measure to 780px on exactly the pages that float something gives roughly 55 characters beside the image and keeps every other page at the reading measure. The old site ran its whole column at ~915px; this is the same shape, without pushing the plain paragraphs on these pages past a hundred characters a line. */ .entry-content:has( > .alignright, > .alignleft ) { --lca-measure: 780px; } /* However wide the column, a floated picture never takes so much of it that the text beside it stops being readable. 42% of a 780px column is 328px, leaving about 55 characters a line; in the narrower column a post uses it scales down with it. */ .entry-content > .alignright, .entry-content > .alignleft, .entry-content.lca-entry--measured > .alignright, .entry-content.lca-entry--measured > .alignleft { max-width: min( 340px, 42% ); height: auto; } /* Two pictures on the same side stack instead of sitting shoulder to shoulder with a sliver of text beside them. */ .entry-content > .alignright { clear: right; } .entry-content > .alignleft { clear: left; } /* ---- Wrapped images, last word ---- These sit at the end of the file on purpose. The contents-aside rule above zeroes the inline margins on every child of the measured column so the prose starts hard against the left edge; applied to a floated figure that also flattens it back against the column's right edge, reopening the canyon the margin exists to close. Same declarations, enough specificity to survive that rule, and the phone reset repeated to match. */ .lca-page__body--aside .entry-content.lca-entry--measured > .alignright, .entry-content.lca-entry--measured > .alignright { margin-left: var(--lca-space-4); margin-right: max( 0px, calc( 100% - var(--lca-measure) ) ); } .lca-page__body--aside .entry-content.lca-entry--measured > .alignleft, .entry-content.lca-entry--measured > .alignleft { margin-left: 0; margin-right: var(--lca-space-4); } @media (max-width: 781px) { .lca-page__body--aside .entry-content.lca-entry--measured > .alignright, .lca-page__body--aside .entry-content.lca-entry--measured > .alignleft, .entry-content.lca-entry--measured > .alignright, .entry-content.lca-entry--measured > .alignleft { float: none; margin-left: 0; margin-right: 0; } /* Nothing wraps at this width, so the proportional cap that reserves a readable ribbon beside a float has no job left to do and the picture takes the column. This repeats the reset from the earlier breakpoint because the cap is declared between the two. */ .entry-content > .alignright, .entry-content > .alignleft, .entry-content.lca-entry--measured > .alignright, .entry-content.lca-entry--measured > .alignleft { max-width: 100%; } } /* A raw HTML block holds third-party markup we do not control - the currency converter widget lays itself out about 1700px wide - so it scrolls inside its own box rather than pushing the whole page sideways. */ .lca-rawblock { max-width: 100%; overflow-x: auto; } /* header.css */ /** * Utility bar, masthead, primary navigation. * * The mobile navigation is built here rather than inherited from ShiftNav, * which the outgoing site used. On an accessibility commitment the ARIA * contract for the main navigation should not be a plugin's to define. * * @package LCA */ /* ---- Utility bar ---- */ .lca-utility { background: var(--lca-navy); color: var(--lca-on-navy); font-size: var(--lca-fs-eyebrow); } .lca-utility__inner { display: flex; flex-wrap: wrap; gap: var(--lca-space-1) var(--lca-space-3); align-items: center; justify-content: space-between; max-width: var(--lca-container); margin-inline: auto; padding: var(--lca-space-1) var(--lca-gutter); } .lca-utility__meta { display: flex; flex-wrap: wrap; gap: var(--lca-space-2); align-items: center; } .lca-utility__nav a { color: var(--lca-on-navy-mid); } .lca-utility__nav a:hover { color: var(--lca-on-navy); } .lca-utility__list { display: flex; flex-wrap: wrap; gap: var(--lca-space-3); margin: 0; padding: 0; list-style: none; } .lca-utility__list .is-current { color: var(--lca-on-navy); font-weight: 600; border-bottom: 1px solid rgb(255 255 255 / 0.4); } @media (max-width: 599px) { /* One line, and only what a phone visitor uses here. The address is in the footer; repeating it at the very top of every page cost wrapped lines before the logo was even reached. */ .lca-utility__inner { flex-wrap: nowrap; gap: var(--lca-space-2); justify-content: flex-end; padding-block: 6px; } /* With the phone number gone from this bar, the meta group holds only the address — so the whole group goes rather than leaving an empty box the flex row still reserves space for. */ .lca-utility__meta { display: none; } .lca-utility__list { gap: var(--lca-space-2); font-size: 12px; } .lca-utility__list a { display: block; padding-block: 4px; } /* The current-page underline is meaningful in the primary navigation. In a three-item utility row it just draws three rules under three links. */ .lca-utility__list .is-current { border-bottom: 0; } } /* ---- Masthead ---- */ .lca-header { background: var(--lca-sand); } .lca-header__inner { display: flex; gap: var(--lca-space-3); align-items: center; justify-content: space-between; max-width: var(--lca-container); margin-inline: auto; padding: var(--lca-space-2) var(--lca-gutter); } .lca-header__brand { display: flex; flex-shrink: 0; gap: 12px; align-items: center; } /* The mark stacks "LCA" over a "LOS CABOS" wordmark over a rule, so it needs more height than a single-line logo before the wordmark becomes legible. */ .lca-header__logo { width: auto; height: 48px; } @media (min-width: 900px) { .lca-header__logo { height: 64px; } } .lca-header__wordmark { font-family: var(--lca-font-serif); font-size: var(--lca-fs-h4); font-weight: 600; } /* ---- Primary navigation ---- */ .lca-nav__list { display: flex; gap: var(--lca-space-4); align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--lca-fs-base); font-weight: 600; } .lca-nav__link { display: block; padding-block: 4px; } .lca-nav__link.is-current { color: var(--lca-terracotta); } /* The active item is marked by more than colour: an underline carries the same information for anyone who cannot distinguish the hue (WCAG 1.4.1). */ .lca-nav__link.is-current::after { display: block; height: 2px; margin-top: 3px; background: currentcolor; content: ""; } /* ---- Dropdowns ---- Two different controls, because the two widths need different things. Desktop has hover, so the panel opens from the item itself and the chevron button is dropped entirely — six of them across the bar read as clutter and earn nothing a hover and a focus ring do not already do. :focus-within covers the keyboard: tabbing onto the parent link opens the panel, and the links inside then enter the tab order. Below 900px there is no hover and the panel is an accordion, so the button stays. It is the only way to open a section without navigating away to the parent's own page. */ .lca-nav__item--parent { position: relative; } .lca-nav__disclose { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .lca-nav__chev { display: block; width: 7px; height: 7px; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s ease; } .lca-nav__sub { margin: 0; padding: 0; list-style: none; font-weight: 500; } .lca-nav__sublink { display: block; white-space: nowrap; } @media (min-width: 900px) { .lca-nav__item--parent > .lca-nav__link { display: inline-block; } /* Removed, not just hidden: an invisible control still in the tab order is worse than no control, and hover plus :focus-within already open the panel by mouse and by keyboard. */ .lca-nav__disclose { display: none; } .lca-nav__sub { position: absolute; z-index: 40; top: 100%; left: -14px; max-width: calc(100vw - 32px); min-width: 232px; padding: 6px; background: var(--lca-white, #fff); border: 1px solid var(--lca-line); border-radius: 8px; box-shadow: 0 2px 4px rgb(15 23 29 / .06), 0 12px 28px rgb(15 23 29 / .12); font-size: var(--lca-fs-small); /* Hidden with opacity+visibility rather than display:none so the panel can transition, and so its links stay out of the tab order while closed (visibility:hidden removes them). */ visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; } /* A small bridge across the gap between the bar and the panel, so the pointer does not cross dead space and close it on the way down. */ .lca-nav__item--parent::after { position: absolute; top: 100%; left: 0; width: 100%; height: 10px; content: ""; } .lca-nav__item--parent:hover > .lca-nav__sub, .lca-nav__item--parent:focus-within > .lca-nav__sub { visibility: visible; opacity: 1; transform: translateY(0); } /* Escape leaves focus on the link that opened the panel, so :focus-within would reopen it on the same frame. nav.js sets this flag to hold it shut until the pointer or focus actually leaves. Carries the list class so it outranks the two rules above rather than relying on source order. */ .lca-nav__list .lca-nav__item--parent.is-dismissed > .lca-nav__sub { visibility: hidden; opacity: 0; transform: translateY(-4px); } /* The last item sits closest to the right edge, so its panel hangs from the right rather than pushing the page sideways. */ .lca-nav__list > .lca-nav__item--parent:last-of-type > .lca-nav__sub { right: -14px; left: auto; } .lca-nav__sublink { padding: 8px 12px; border-radius: 5px; } .lca-nav__sublink:hover, .lca-nav__sublink:focus-visible { background: var(--lca-sand, #f4f2ee); } .lca-nav__sublink.is-current::after { display: none; } .lca-nav__sublink.is-current { background: var(--lca-sand, #f4f2ee); } } /* Six top-level items and a CTA fill the bar. Between the tablet breakpoint and roughly 1200px the row has to tighten or it wraps onto two lines and the masthead grows by 40px. */ /* Dropping the chevrons gave back about 25px per item, so the base size now fits from roughly 1150px up rather than 1200px. Below that the row plus the CTA still overruns the container — the labels are nowrap, so the list cannot absorb it and the CTA is what spills. */ @media (min-width: 900px) and (max-width: 1149px) { .lca-nav__list { gap: var(--lca-space-2); font-size: var(--lca-fs-small); } } /* A two-word label like "Transfers & Parking" breaks onto a second line long before the row itself runs out of width, which makes the masthead grow and the items sit on mismatched baselines. The label stays on one line and the gap absorbs the pressure instead. */ @media (min-width: 900px) { .lca-nav__list > .lca-nav__item > .lca-nav__link { white-space: nowrap; } } /* Six labels, a logo and the CTA do not fit a 900px row even at the smaller step: the content box is 852px and the parts want 907px. The desktop layout starts at 900px, so the shortfall is closed here rather than by moving the breakpoint — which would send a 960px laptop to the mobile toggle. */ @media (min-width: 900px) and (max-width: 1023px) { .lca-nav__list { gap: 10px; } .lca-header .lca-header__cta { padding-inline: 14px; } } /* Mobile: the dropdown becomes an accordion inside the panel. Closed by default and driven by the same button, so there is one interaction model and one aria-expanded to keep honest. */ @media (max-width: 899px) { /* The row is a flex line rather than a float: the link takes the space it needs, the button sits beside it at a full touch target, and the panel wraps onto its own line underneath. A float with a negative top margin put the chevron on the row boundary instead of next to its label. */ .lca-nav__item--parent { display: flex; flex-wrap: wrap; align-items: center; } .lca-nav__item--parent > .lca-nav__link { flex: 1 1 auto; } .lca-nav__disclose { flex: none; width: 48px; min-height: 48px; margin: 0; } .lca-nav__sub { flex: 0 0 100%; display: none; padding: 0 0 8px var(--lca-space-3); } .lca-nav__disclose[aria-expanded="true"] + .lca-nav__sub { display: block; } .lca-nav__disclose[aria-expanded="true"] .lca-nav__chev { transform: rotate(-135deg) translate(-3px, -3px); } .lca-nav__item--child + .lca-nav__item--child { border-top: 1px solid var(--lca-line-soft); } .lca-nav__sublink { padding-block: 11px; font-size: var(--lca-fs-base); } .lca-nav__sublink.is-current::after { display: none; } } /* ---- Header CTA ---- */ .lca-header__cta { flex-shrink: 0; white-space: nowrap; } /* The in-drawer copy of the CTA is only for the mobile panel. Scoped to .lca-nav so it outranks .lca-btn's own display, which is defined in components.css and therefore loads later. */ .lca-nav .lca-nav__cta-inline { display: none; } /* ---- Mobile navigation ---- Below 900px the primary nav becomes a disclosure panel driven by a real