/* * fl718-ws-city-system.css * ───────────────────────────────────────────────────────────────────────────── * Shared card system for the "From the Field" sibling location strip. * Used by every international location page. * * SIZING RATIONALE (do not change without re-checking all pages) * ────────────────────────────────────────────────────────────── * After-content container: max-width 960px, padding 0 40px → 880px usable. * 5 cards × 164px + 4 gaps × 14px = 820 + 56 = 876px ✓ fits with 4px spare. * If you change card width: verify (5 × W) + (4 × 14) ≤ 880. * If you change container padding or max-width: re-check the same formula. * * ADDING A NEW INTERNATIONAL PAGE * ──────────────────────────────── * 1. Add one to this file in the page . * 2. Add the strip container rule scoped to the page body class * (display:flex, gap:14px, margin-bottom:36px, overflow-x:clip). * 3. Do NOT redeclare any .fl718-ws-city rules — they live here only. * 4. Mobile overrides (width:155px, height:104px, scroll-snap-align:start) * also live here — no need to redeclare in the page file. * * STRIP CONTAINER (page-scoped, declare inline per page) * ─────────────────────────────────────────────────────── * NOT declared here because the container class name varies per page * (e.g. .fl718-peru-after__strip, .fl718-china-after__strip). * See comment block "STRIP CONTAINER" in each page file. * ───────────────────────────────────────────────────────────────────────────── */ /* ── CARD BASE ────────────────────────────────────────────────────────────── */ .fl718-ws-city { flex: 0 0 auto; width: 164px; cursor: default; text-decoration: none; display: block; } .fl718-ws-city--linked { cursor: pointer; } /* ── PHOTO FRAME ──────────────────────────────────────────────────────────── */ .fl718-ws-city__photo-wrap { width: 164px; height: 109px; /* 3:2 ratio */ overflow: clip; position: relative; margin-bottom: 10px; } .fl718-ws-city__photo { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.72; filter: saturate(0.55); transition: opacity 0.35s ease, filter 0.35s ease; } .fl718-ws-city--linked:hover .fl718-ws-city__photo { opacity: 1; filter: saturate(1) brightness(1.03); } /* ── COMING-SOON OVERLAY ──────────────────────────────────────────────────── */ .fl718-ws-city__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px 8px; background: rgba(58, 52, 44, 0.52); font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242, 239, 232, 0.75); display: none; } .fl718-ws-city--coming-soon .fl718-ws-city__overlay { display: block; } /* ── TICK LINE ────────────────────────────────────────────────────────────── */ .fl718-ws-city__tick { width: 100%; height: 1px; background: #3a3530; margin-bottom: 8px; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease; } .fl718-ws-city--linked:hover .fl718-ws-city__tick { transform: scaleX(1); } /* ── CITY NAME ────────────────────────────────────────────────────────────── */ .fl718-ws-city__name { font-family: 'Courier Prime', monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: #9a9088; white-space: nowrap; transition: color 0.25s ease; } .fl718-ws-city--linked:hover .fl718-ws-city__name { color: #3a3530; } /* ── REGION LABEL ─────────────────────────────────────────────────────────── */ .fl718-ws-city__region { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: #ccc4b8; margin-top: 3px; transition: color 0.25s ease; } .fl718-ws-city--linked:hover .fl718-ws-city__region { color: #9a9088; } /* ── COORDINATES ──────────────────────────────────────────────────────────── */ .fl718-ws-city__coords { font-family: 'Courier Prime', monospace; font-size: 9px; font-weight: 400; letter-spacing: 0.08em; color: #9a9088; margin-top: 4px; opacity: 0; transform: translateY(3px); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; white-space: nowrap; } .fl718-ws-city--linked:hover .fl718-ws-city__coords { opacity: 1; transform: translateY(0); } /* ── CAMERA FLASH OVERLAY ─────────────────────────────────────────────────── */ /* Used by the Static Burst link-out animation on click */ .fl718-ws-city__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 15; } /* ── GPS PING ─────────────────────────────────────────────────────────────── */ /* Scrambling coordinate overlay inside photo on click */ .fl718-ws-city__ping { position: absolute; bottom: 8px; left: 6px; font-family: 'Courier Prime', monospace; font-size: 9px; font-weight: 400; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 10; } /* ── MOBILE OVERRIDES ─────────────────────────────────────────────────────── */ /* Strip container switches to overflow-x:auto + scroll-snap in page file. Card and photo-wrap sizing defined here. */ @media (max-width: 768px) { .fl718-ws-city { scroll-snap-align: start; flex: 0 0 155px; width: 155px; } .fl718-ws-city__photo-wrap { width: 155px; height: 104px; } }