/* ============================================================ Snappytappy — SHARED gallery-page styling (desktop + base). SINGLE SOURCE OF TRUTH for every individual-country gallery page. Pair with: st-gallery.js — injects the gallery DOM + wires grid/lightbox/swipe st-chrome.js — header + burger menu st-mobile.css — mobile refinements (chrome sizing, hero rhythm, etc.) st-mobile.js — --stvh viewport var + back-to-top button site-data.js — window.ST_GALLERIES (names, regions, photos, counts) A country page carries NO styling of its own — it only sets data-gallery-key on . Change any rule here once and all 24 galleries update. Mobile chrome sizing lives in st-mobile.css. ============================================================ */ *{box-sizing:border-box;} :root{ --sans:'Archivo',system-ui,sans-serif; --logo:'Barlow Semi Condensed','Archivo',system-ui,sans-serif; --accent:'Newsreader',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; --ink:#0c0c0d; --lime:#a3e635; --paper:#fff; } html{scroll-behavior:smooth; overflow-x:hidden;} body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); overflow-x:hidden; max-width:100%;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} ::selection{background:var(--ink); color:#fff;} /* ---- hero ---- */ .ghero{position:relative; height:88vh; min-height:520px; display:flex; align-items:flex-end; overflow:hidden;} .ghero .cover{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.03);} .ghero .shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,9,11,.42) 0%, rgba(8,9,11,.05) 34%, rgba(8,9,11,.16) 60%, rgba(8,9,11,.82) 100%);} .ghero .back{position:absolute; top:112px; left:52px; z-index:3; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.32); padding:8px 14px; border-radius:40px; transition:background .2s ease,color .2s ease;} .ghero .back:hover{background:#fff; color:var(--ink);} .ghero .inner{position:relative; z-index:2; color:#fff; padding:0 52px 80px; max-width:1400px; margin:0 auto; width:100%; text-align:left;} .ghero .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.26em; color:rgba(255,255,255,.86); margin-bottom:16px;} .ghero h1{margin:0; font-weight:700; font-size:82px; line-height:.92; letter-spacing:-.035em;} .ghero .lede{margin:20px 0 0; font-size:19px; line-height:1.55; color:rgba(255,255,255,.9); max-width:560px;} /* ---- gallery masonry ---- */ .ggal{padding:56px 52px 40px; max-width:1400px; margin:0 auto;} .ggrid{column-count:4; column-gap:16px;} .gcell{break-inside:avoid; margin:0 0 16px; border-radius:14px; overflow:hidden; cursor:pointer; position:relative; background:#efeee9;} .gcell img{width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.6,.2,1);} .gcell::after{content:""; position:absolute; inset:0; background:rgba(8,9,11,0); transition:background .3s ease;} .gcell:hover img{transform:scale(1.05);} .gcell:hover::after{background:rgba(8,9,11,.12);} .gcell .exp{position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(12,12,13,.42); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .25s ease;} .gcell:hover .exp{opacity:1; transform:scale(1);} .gmore{display:flex; flex-direction:column; align-items:center; gap:13px; padding:28px 0 8px;} .gmore .ct{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#9a9a9e;} .gmore button{background:#fff; color:var(--ink); border:1px solid rgba(12,12,13,.2); font-family:var(--sans); font-weight:600; font-size:14px; padding:13px 30px; border-radius:40px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;} .gmore button:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(12,12,13,.14);} /* ---- base camp band: uses the SHARED bcband/bcgrid/bccol2/bcheading/bccta hooks (st-mobile.css handles mobile; desktop styling is inline in st-gallery.js, matching every other page). The vanilla gallery has no dc-runtime, so replicate the CTA's hover-invert in CSS. Guarded by @media(hover:hover) so a tap on touch never latches the inverted (white) state. ---- */ @media (hover: hover) { [data-m="bccta"]:hover{ background:#fff !important; color:#0c0c0d !important; } /* tent glyph: green on the black button → black on the white hover state */ [data-m="bccta"]:hover svg path[stroke="#a3e635"]{ stroke:#0c0c0d !important; } [data-m="bccta"]:hover svg path[fill="#a3e635"]{ fill:#0c0c0d !important; } } /* ---- footer ---- */ .gftr{padding:44px 52px; background:var(--ink); color:#fff;} .gftr .row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; max-width:1400px; margin:0 auto;} .gftr .brand{display:flex; align-items:center; gap:16px;} .gftr .brand .lt{font-family:var(--logo); font-size:19px; letter-spacing:.14em;} .gftr .brand .lt b{font-weight:800;} .gftr .brand .lt span{font-weight:300;} .gftr .soc{display:flex; gap:14px;} .gftr .soc a{color:rgba(255,255,255,.85); display:flex;} .gftr .copy{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.5); max-width:520px; line-height:1.6;} /* ---- lightbox ---- */ .glb{position:fixed; inset:0; z-index:300; background:rgba(8,9,11,.97); display:none; flex-direction:column; opacity:0; transition:opacity .3s ease;} .glb.open{display:flex; opacity:1;} .glb .top{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:24px 30px; z-index:3; background:linear-gradient(180deg, rgba(8,9,11,.55), transparent);} .glb .top .meta .r{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.6);} .glb .top .meta .n{font-size:18px; font-weight:600; letter-spacing:-.02em; color:#fff; margin-top:3px;} .glb .top .right{display:flex; align-items:center; gap:20px;} .glb .counter{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:rgba(255,255,255,.72);} .glb button.round{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.09); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease;} .glb button.round:hover{background:rgba(255,255,255,.2);} .glb .arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3;} .glb .arrow.prev{left:26px;} .glb .arrow.next{right:26px;} .glb .stage{flex:1; display:flex; align-items:center; justify-content:center; padding:20px; min-height:0;} .glb .stage img{max-width:calc(100vw - 150px); max-height:calc(100vh - 200px); width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5);} .glb .strip{position:absolute; left:0; right:0; bottom:0; display:flex; padding:16px 22px 20px; z-index:3;} .glb .thumbs{flex:1; display:flex; gap:9px; overflow-x:auto; padding:4px 0; scroll-behavior:smooth;} .glb .thumbs::-webkit-scrollbar{height:0;} .glb .thumbs button{flex:none; width:66px; height:46px; border-radius:7px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; opacity:.5; transition:opacity .2s ease, border-color .2s ease; background:none;} .glb .thumbs button.active{opacity:1; border-color:#fff;} .glb .thumbs img{width:100%; height:100%; object-fit:cover;} /* ---- responsive (chrome sizing handled by st-mobile.css) ---- */ @media (max-width:1200px){ .ggrid{column-count:3;} } @media (max-width:820px){ .ghero{height:70vh; min-height:440px;} .ghero .back{left:22px; top:calc(94px + env(safe-area-inset-top));} .ghero .inner{padding-left:22px; padding-right:22px; text-align:center;} .ghero .lede{margin-left:auto; margin-right:auto;} .ghero .eyebrow{font-size:11px;} .ghero h1{font-size:42px;} .ghero .lede{font-size:16px; margin-top:16px;} .ggal{padding:34px 16px 24px;} .ggrid{column-count:2; column-gap:12px;} .gcell{margin-bottom:12px; border-radius:12px;} .gftr .row{flex-direction:column; text-align:center;} .glb .stage{padding:10px;} .glb .stage img{max-width:calc(100vw - 20px); max-height:calc(100vh - 188px);} .glb .arrow.prev{left:8px;} .glb .arrow.next{right:8px;} }