/* ─── BRAZILCORE GUIDE · EDITORIAL DESIGN ─────────────────────────── */ :root { --green:#1a7a3f; --green-dark:#134f2b; --green-50:#e8f4ed; --green-100:#d1e7d9; --blue:#2d3a9e; --blue-dark:#1e2870; --blue-50:#eceffe; --blue-100:#d4d9f9; --yellow:#f5d800; --yellow-dark:#c9b100; --yellow-50:#fffceb; --yellow-100:#fff3c4; --cream:#faf8f3; --paper:#f6f2e9; --ink:#1a1a1a; --ink-2:#333; --muted:#6b6b6b; --light:#a8a59a; --border:#e6e0d3; --border-2:#d9d2c0; --white:#fff; --font-d:'Playfair Display',Georgia,serif; --font-b:'DM Sans',system-ui,-apple-system,sans-serif; --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px; --maxw:1200px; --gap:1.5rem; --pad:1.5rem; } * { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; /* Stops a CSS canvas-background quirk: when has no background of * its own, the browser propagates 's background to paint the * ENTIRE viewport/canvas -- not just body's own box -- regardless of * body's actual height. That's why removing body's min-height:100vh * (previous fix) had no visible effect: body's green kept painting the * whole canvas below the socket anyway, via that propagation. Giving * its own explicit background stops the propagation, so only * body's real box (ending at the socket) shows green. */ background:var(--cream); /* Fixes the horizontal scrollbar sliver from full-bleed elements * (#footer/#socket, Home hero/pricing/mosaic sections) whose * `left:50%;margin-left:-50vw` breakout can measure a few px wider than * the actual visible viewport once a vertical scrollbar's own width is * subtracted from 100vw. Deliberately placed on only, NOT : * an earlier attempt put overflow-x:clip on body itself and that * re-boxed the full-bleed sections (this exact self-check note is why -- * see body's own comment above). Clipping one level higher, at the root, * removes the stray scrollbar/sliver without touching how body's * children measure their own breakout. */ overflow-x: clip; } body { font-family:var(--font-b); background:var(--cream); color:var(--ink); /* No forced min-height:100vh: with it, whenever a page's real content * (nav + app + footer/socket) is shorter than the viewport, body's own * background color (synced to Enfold's Main Content background option, * currently green) showed through as a leftover strip below the socket * -- the socket bar IS the actual end of the page, so nothing should * render below it regardless of viewport height. */ /* No overflow-x containment here: this app's edge-to-edge elements * (#footer, #socket, the Home hero/pricing sections) rely on * `position:relative;left:50%;margin-left:-50vw` to visually reach the * viewport edge -- and ANY ancestor with overflow other than visible * (hidden, clip, scroll, auto) clips that overflow right back to a * boxed width, which is exactly what made them render boxed again after * 1.7.1 despite the CSS itself being correct (confirmed via the live * page's own HTML). A previous fix put overflow-x:clip here specifically * to hide a stray horizontal-scroll sliver -- but that side effect (a * few extra px of horizontal scroll) is much smaller than silently * neutering every full-bleed element in the app, so it's removed. */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:15px; line-height:1.55; } /* DENSITY MODES */ body[data-density="compact"] { --gap:1rem; --pad:1.25rem; font-size:14px; } body[data-density="comfortable"]{ --gap:1.5rem; --pad:1.5rem; font-size:15px; } body[data-density="spacious"] { --gap:2rem; --pad:2rem; font-size:16px; } /* ACCENT REMAPPING */ body[data-accent="blue"] { --green:#2d3a9e; --green-dark:#1e2870; --green-50:#eceffe; --green-100:#d4d9f9; } body[data-accent="yellow"] { --green:#b59100; --green-dark:#7a6200; --green-50:#fffceb; --green-100:#fff3c4; } /* ─── APP SHELL ──────────────────────────────────────────────────── */ /* 1.9.46 -- ESTA era a causa da pagina em branco. * * Havia tres regras aqui: * * #app { display:none; } * body.authed #gate { display:none; } * body.authed #app { display:block; } * * O #app comecava OCULTO e so aparecia com a classe "authed" no body -- * classe que o header so escreve para quem tem acesso. Fazia sentido * enquanto existia o gate: a tela "Enter your code" ficava fora do #app, * visivel, e o app aparecia atras dela depois do desbloqueio. * * O gate saiu na 1.9.39. Estas regras ficaram. Como o #app envolve o * conteudo inteiro da pagina, o visitante deslogado passou a receber a * pagina completa do servidor com tudo oculto no navegador -- so o rodape do * Enfold, que fica fora do #app, aparecia. * * Eu procurei isso em tres lugares errados antes de olhar aqui: o atributo * hidden no header (1.9.43), a regra nova .is-locked (1.9.45), e cache / * service worker do PWA, que nao tinham nada a ver. O sintoma nao mudava * porque a causa nunca foi tocada. * * Agora o #app nao tem regra de display: ele e visivel, como qualquer * div. Quem nao tem acesso nao ve a navegacao do produto porque o * header.php nao a imprime (1.9.45) -- decisao de servidor, um lugar so. */ /* NAV */ .nav { background:rgba(250,248,243,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); /* Sem position/z-index aqui. Barra fixa é decidida em Enfold > Header > * Header Behaviour e aplicada por uma única regra em bcg-theme.css. * Este bloco ainda declarava sticky !important e vencia o painel. */ } /* (1.7.64: regra sticky duplicada de alta especificidade removida daqui.) */ /* (1.7.57: cap de largura em .avia-section removido daqui — largura de * seção é do Enfold e da camada única em bcg-theme.css.) */ .nav-in { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); height:100px; display:flex; align-items:center; justify-content:space-between; } .nav-logo { display:flex; align-items:center; gap:.625rem; cursor:pointer; text-decoration:none; color:inherit; } .nav-word { font-family:var(--font-d); font-size:1rem; font-weight:600; line-height:1; color:var(--ink); } .nav-word span { color:var(--green); font-style:italic; } .nav-lbl { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:2px; font-weight:500; } .nav-tabs { display:flex; gap:.125rem; } .nav-tab { padding:.5rem 1rem; border:none; background:transparent; font-family:var(--font-b); font-size:.8rem; font-weight:500; color:var(--muted); cursor:pointer; border-radius:99px; transition:all .15s; position:relative; } .nav-tab:hover { color:var(--ink); } .nav-tab.on { background:var(--ink); color:#fff; } .nt-badge { display:inline-block; margin-left:.375rem; background:var(--yellow); color:var(--ink); min-width:18px; height:18px; border-radius:9px; padding:0 5px; font-size:.65rem; font-weight:600; line-height:18px; text-align:center; } .nav-tab.on .nt-badge { background:var(--yellow); color:var(--ink); } @media (max-width:720px){ .nav-tabs .nav-tab[data-view="map"], .nav-tabs .nav-tab[data-view="itinerary"], .nav-tabs .nav-tab[data-view="favs"] { display:none; } } .view { display:none; } .view.on { display:block; animation:fadeUp .4s cubic-bezier(.2,.7,.3,1); } @keyframes fadeUp { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } /* ─── HERO ──────────────────────────────────────────────────────── */ .hero { position:relative; overflow:hidden; background:#1a7a3f; padding:3rem 0 3.5rem; padding-bottom:calc(3.5rem + 120px); border-top:3px solid var(--yellow); border-bottom:1px solid var(--border); } .hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:120px; /* 1.9.50 -- a URL era absoluta ao dominio antigo: * https://brazilcore.com/guide/wp-content/uploads/2026/07/mosaic-wave.jpg * * No dominio novo isso ainda CARREGARIA, buscando a imagem no site velho * -- e por isso passaria sem ninguem notar, ate o dia em que o brazilcore * .com sair do ar ou a pasta mudar. Um domingo de manha e o hero fica sem * a calcada, sem erro nenhum no console. * * O valor agora vem de --bcg-faixa-img, impresso pelo PHP a partir da * biblioteca de midia do proprio site (ver bcg_faixa_image_url em * functions.php). O url() aqui e a rede de seguranca: relativo, funciona * em qualquer dominio, e so entra em acao se o PHP nao achar a imagem. */ background-image:var(--bcg-faixa-img, url('../img/mosaic-wave.jpg')); background-repeat:repeat-x; background-size:auto 120px; z-index:0; } .hero-geom { position:absolute; inset:0; z-index:0; opacity:1; } .hero-geom svg { width:100%; height:100%; display:block; } .hero-inner { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns: 1.25fr .85fr; gap:3rem; align-items:center; } /* Coluna de grade encolhe de verdade. * Sem min-width:0 a coluna nunca fica menor que o min-content dela (a * palavra mais longa do titulo). Numa tela estreita isso alarga o * .hero-inner para alem da viewport, e como ele e centralizado com * margin:auto o conteudo escorrega para a esquerda -- era o eyebrow * aparecendo cortado na borda do celular. */ .hero-inner > * { min-width:0; } @media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; gap:2rem; } } .hero-left { color:#fff; } .hero-eyebrow { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8); font-weight:500; margin-bottom:1.25rem; } .hero-eyebrow .dot { color:rgba(255,255,255,.4); } .hero-title { font-family:var(--font-d); /* Piso baixo de proposito: com 2.5rem (40px) fixos, numa tela de 360px * o titulo nao cabia e a palavra quebrava no meio ("WHER / E RIO"). * A escala agora e continua, sem depender de media query. */ font-size:clamp(1.875rem,7.5vw,4rem); font-weight:700; line-height:.95; letter-spacing:-.02em; color:#fff; margin-bottom:1.125rem; text-wrap:balance; overflow-wrap:break-word; word-break:normal; hyphens:none; } .hero-title em { font-style:italic; color:var(--yellow); font-weight:500; } .hero-lede { font-size:clamp(.9375rem,3.6vw,1.125rem); line-height:1.6; color:#fff; max-width:520px; margin-bottom:1.75rem; font-weight:400; display:inline-block; padding:.85rem 1.1rem; background:rgba(0,0,0,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:6px; } .hero-byline { display:flex; flex-direction:column; gap:.5rem; max-width:440px; } .hb-curator { display:inline-flex; align-items:center; gap:.75rem; padding:.5rem .9rem .5rem .5rem; background:rgba(0,0,0,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); border-radius:99px; align-self:flex-start; } .hb-avatar { flex-shrink:0; width:34px; height:34px; border-radius:50%; overflow:hidden; background:#fff; } .hb-avatar svg, .hb-avatar img { display:block; width:100%; height:100%; object-fit:cover; } .hb-name { font-size:.82rem; font-weight:600; color:#fff; line-height:1.2; } .hb-role { font-size:.68rem; color:rgba(255,255,255,.7); margin-top:2px; line-height:1.2; } /* Cover card */ .hero-right { display:flex; justify-content:center; } .hero-cover { position:relative; width:100%; max-width:320px; background:var(--cream); border:1px solid rgba(255,255,255,.4); border-radius:var(--r); padding:2rem 1.75rem; box-shadow:0 30px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04); } .hc-stamp { display:flex; align-items:center; gap:.625rem; margin-bottom:2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border); } .hc-stamp-l { font-family:var(--font-d); font-size:1.1rem; font-weight:600; letter-spacing:-.01em; } .hc-numbers { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; } .hcn { text-align:center; } .hcn-n { font-family:var(--font-d); font-size:1.875rem; font-weight:700; color:var(--green); line-height:1; } .hcn-l { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; font-weight:500; } .hc-footer { display:flex; justify-content:space-between; margin-top:1.75rem; padding-top:1rem; border-top:1px dashed var(--border-2); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; } /* Hero variants */ body[data-hero="minimal"] .hero-geom { display:none; } body[data-hero="minimal"] .hero { background:var(--paper); border-bottom:1px solid var(--border); } body[data-hero="minimal"] .hero-left { color:var(--ink); } body[data-hero="minimal"] .hero-eyebrow { color:var(--green); } body[data-hero="minimal"] .hero-eyebrow .dot { color:var(--border-2); } body[data-hero="minimal"] .hero-title { color:var(--ink); } body[data-hero="minimal"] .hero-title em { color:var(--green); } body[data-hero="minimal"] .hero-lede { color:var(--muted); } body[data-hero="minimal"] .hero-byline { border-top-color:var(--border); } body[data-hero="minimal"] .hb-curator { background:transparent; border-color:var(--border); } body[data-hero="minimal"] .hb-name { color:var(--ink); } body[data-hero="minimal"] .hb-role { color:var(--muted); } body[data-hero="minimal"] .hero-cover { border:1px solid var(--border); } body[data-hero="full"] .hero { padding:5rem 0 6rem; } body[data-hero="full"] .hero-inner { grid-template-columns:1fr; text-align:center; } body[data-hero="full"] .hero-right { display:none; } body[data-hero="full"] .hero-lede { margin-left:auto; margin-right:auto; } body[data-hero="full"] .hero-byline { margin-left:auto; margin-right:auto; justify-content:center; } body[data-hero="full"] .hero-geom svg { transform:scale(1.3); } /* ─── SEARCH BAR ────────────────────────────────────────────────── */ .searchbar-wrap { max-width:var(--maxw); margin:0 auto; padding:1.75rem var(--pad) 0; } .searchbar { display:flex; align-items:center; gap:.5rem; background:#fff; border:1.5px solid var(--border); border-radius:99px; padding:.5rem .5rem .5rem 1.25rem; transition:border-color .15s, box-shadow .15s; } .searchbar:focus-within { border-color:var(--green); box-shadow:0 0 0 4px var(--green-50); } .sb-ico { font-size:1.1rem; color:var(--muted); } .searchbar input { flex:1; border:none; background:transparent; outline:none; font-family:var(--font-b); font-size:.95rem; color:var(--ink); padding:.625rem 0; } .searchbar input::placeholder { color:var(--light); } .sb-clear { width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s; } .sb-clear:hover { background:var(--cream); color:var(--ink); } .searchbar-chips { display:flex; gap:.375rem; margin-top:.75rem; flex-wrap:wrap; } .sbc { border:none; background:transparent; font-family:var(--font-b); font-size:.72rem; font-weight:500; color:var(--muted); cursor:pointer; padding:.25rem .625rem; border-radius:99px; transition:all .15s; } .sbc:hover { background:var(--ink); color:#fff; } .sbc::before { content:"↗ "; color:var(--green); font-weight:600; } .sbc:hover::before { color:var(--yellow); } /* ─── SECTIONS ───────────────────────────────────────────────────── */ .section { max-width:var(--maxw); margin:0 auto; padding:2.5rem var(--pad); } .sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.75rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .sec-eyebrow { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--green); margin-bottom:.5rem; } .sec-eyebrow.light { color:var(--yellow); } .sec-title { font-family:var(--font-d); /* Escala continua com piso baixo. Com 1.75rem (28px) fixos numa tela de * 320-360px, "RESTAURANTS" nao cabia na linha -- e como o texto tem * overflow-wrap:break-word (para palavra longa nunca alargar a pagina), * a saida do navegador era partir a palavra ao meio: "RESTAURAN / TS". * Com 5.5vw no meio do clamp a fonte encolhe ate a palavra caber, e a * quebra no meio deixa de ser necessaria. */ font-size:clamp(1.375rem,5.5vw,4rem); font-weight:600; line-height:1.05; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; } .sec-foot { font-size:.85rem; color:var(--muted); font-style:italic; max-width:280px; text-align:right; line-height:1.5; } @media (max-width:640px){ .sec-foot{ text-align:left; } } /* ─── COLLECTIONS RAIL ──────────────────────────────────────────── */ .coll-rail { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; } .coll-card { position:relative; border:1px solid var(--border); background:#fff; border-radius:var(--r); padding:1.25rem 1.25rem 1.125rem; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; overflow:hidden; min-height:180px; display:flex; flex-direction:column; justify-content:space-between; } .coll-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--cc-color,var(--green)); } .coll-card:hover { transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,0,0,.08); border-color:var(--cc-color); } .cc-eyebrow { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--cc-color,var(--green)); margin-bottom:.5rem; } .cc-title { font-family:var(--font-d); font-size:1.375rem; font-weight:600; letter-spacing:-.01em; line-height:1.15; margin-bottom:.375rem; color:var(--ink); } .cc-sub { font-size:.82rem; color:var(--muted); line-height:1.5; } .cc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; padding-top:.75rem; border-top:1px dashed var(--border); font-size:.7rem; color:var(--muted); font-weight:500; } .cc-foot-n { font-family:var(--font-d); font-size:1.125rem; font-weight:600; color:var(--ink); } .cc-foot-arr { font-weight:500; } .coll-card:hover .cc-foot-arr { color:var(--cc-color); } /* ─── ORGANIZE / FILTERS ────────────────────────────────────────── */ .organize { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; } .org-label { font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:.5rem; } .org-tabs { display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:99px; padding:3px; } .org-tab { border:none; background:transparent; font-family:var(--font-b); font-size:.78rem; font-weight:500; padding:.5rem 1rem; border-radius:99px; cursor:pointer; color:var(--muted); transition:all .15s; } .org-tab:hover { color:var(--ink); } .org-tab.on { background:var(--ink); color:#fff; } .filter-toggle { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; background:#fff; border:1px solid var(--border); border-radius:99px; font-family:var(--font-b); font-size:.78rem; font-weight:500; color:var(--ink); cursor:pointer; transition:all .15s; } .filter-toggle::before { content:'⇅'; color:var(--muted); font-weight:500; } .filter-toggle:hover { border-color:var(--ink); } .ft-badge { display:inline-block; background:var(--green); color:#fff; min-width:18px; height:18px; border-radius:9px; padding:0 5px; font-size:.65rem; font-weight:600; line-height:18px; text-align:center; } .filters { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:1.25rem 1.25rem 1rem; margin-bottom:1.5rem; animation:fadeUp .25s ease; } .filter-group { margin-bottom:1rem; } .filter-group:last-of-type { margin-bottom:.5rem; } .fg-label { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:.625rem; } .fg-pills { display:flex; flex-wrap:wrap; gap:.375rem; } .pill { border:1px solid var(--border); background:#fff; font-family:var(--font-b); font-size:.72rem; font-weight:500; padding:.35rem .75rem; border-radius:99px; color:var(--muted); cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:.375rem; white-space:nowrap; } .pill:hover { border-color:var(--ink); color:var(--ink); } .pill.on { background:var(--ink); color:#fff; border-color:var(--ink); } .pill-dot { width:8px; height:8px; border-radius:50%; display:inline-block; } .filter-actions { display:flex; justify-content:flex-end; margin-top:.5rem; } .fa-clear { border:none; background:transparent; font-family:var(--font-b); font-size:.75rem; font-weight:500; color:var(--muted); cursor:pointer; text-decoration:underline; text-decoration-color:var(--border-2); text-underline-offset:3px; } .fa-clear:hover { color:var(--ink); text-decoration-color:var(--ink); } /* ─── RESULTS ───────────────────────────────────────────────────── */ .results-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; } .results-title { font-family:var(--font-d); font-size:1.25rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); } .results-count { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; } /* NEIGHBORHOOD / TIER SECTIONS */ .hood-section, .tier-section { margin-bottom:2.75rem; } .hood-section:last-child { margin-bottom:0; } .hood-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .hood-head-left { min-width:0; flex:1; } .hood-num { font-family:var(--font-d); font-size:.8rem; font-weight:500; font-style:italic; color:var(--muted); margin-bottom:.25rem; } .hood-h { font-family:var(--font-d); font-size:1.625rem; font-weight:600; letter-spacing:-.01em; line-height:1.1; color:var(--ink); } .hood-intro { font-size:.85rem; color:var(--muted); line-height:1.55; margin-top:.5rem; max-width:620px; } .hood-count { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--light); font-weight:500; white-space:nowrap; } .tier-section .hood-h { color:var(--ts-color,var(--ink)); } /* GRID */ .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:var(--gap); } body[data-density="spacious"] .grid { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); } body[data-density="compact"] .grid { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); } /* ─── CARDS (photo-first) ───────────────────────────────────────── */ .card { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .15s; display:flex; flex-direction:column; } .card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.1); border-color:var(--ink); } .card-photo { position:relative; aspect-ratio: 4 / 3; background:var(--paper); overflow:hidden; } .card-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); } .card:hover .card-photo img { transform:scale(1.04); } .card-tier { position:absolute; top:.75rem; left:.75rem; display:inline-flex; align-items:center; gap:.375rem; background:#fff; padding:.25rem .625rem; border-radius:99px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink); } .card-tier-dot { width:7px; height:7px; border-radius:50%; } .ct-must .card-tier-dot { background:var(--yellow); } .ct-pick .card-tier-dot { background:var(--green); } .ct-quick .card-tier-dot { background:var(--blue); } .card-mic { position:absolute; top:.75rem; right:.75rem; background:#c8102e; color:#fff; padding:.25rem .5rem; border-radius:4px; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; } .card-mic::before { content:'★'; color:#fff; } .card-fav { position:absolute; bottom:.625rem; right:.625rem; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s, background .15s; color:var(--ink); } .card-fav:hover { transform:scale(1.1); } .card-fav.on { background:#fff; color:#c8102e; } .card-fav svg { width:16px; height:16px; } .card-body { padding:1rem 1.125rem 1.125rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .card-name { font-family:var(--font-d); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--ink); } .card-meta { display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; font-size:.72rem; color:var(--muted); font-weight:500; } .card-meta .dot { color:var(--border-2); } .card-meta .hood { color:var(--ink); font-weight:500; } .card-tagline { font-size:.82rem; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:.25rem; } .card-tags { display:flex; gap:.375rem; flex-wrap:wrap; margin-top:.5rem; } .card-tag { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .5rem; border-radius:4px; background:var(--green-50); color:var(--green-dark); font-weight:600; } .card-tag.tag-beach { background:var(--yellow-50); color:#7a6200; } .card-tag.tag-historic{ background:var(--paper); color:#6b4a1e; } .card-tag.tag-late { background:var(--blue-50); color:var(--blue-dark); } .card-tag.tag-michelin{ background:#fde8ec; color:#8a0f23; } .card-tag.tag-carioca { background:var(--green-50); color:var(--green-dark); } .card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.625rem; border-top:1px dashed var(--border); font-size:.72rem; color:var(--muted); } .card-foot .addr { display:flex; align-items:center; gap:.25rem; min-width:0; } .card-foot .addr::before { content:'⌖'; color:var(--green); font-weight:700; flex-shrink:0; } .card-foot .addr span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .card-ig { color:var(--green); font-weight:500; font-size:.7rem; flex-shrink:0; } /* small add-to-itinerary button on card */ .card-add { position:absolute; bottom:.625rem; right:3.125rem; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.95); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--ink); transition:transform .15s, background .15s; } .card-add:hover { transform:scale(1.1); background:#fff; } .card-add.on { background:var(--green); color:#fff; } .card-add svg { width:14px; height:14px; } /* ─── DETAIL ────────────────────────────────────────────────────── */ .det-hero { position:relative; height:clamp(280px,45vh,460px); overflow:hidden; background:var(--paper); } .det-hero img { width:100%; height:100%; object-fit:cover; display:block; } .det-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 40%, rgba(0,0,0,.5) 100%); } .det-top { position:absolute; top:1.25rem; left:0; right:0; z-index:2; padding:0 var(--pad); max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; } .det-back, .det-fav-top { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:1rem; transition:background .15s; } .det-back:hover, .det-fav-top:hover { background:#fff; } .det-fav-top.on { color:#c8102e; } .det-body { max-width:var(--maxw); margin:-3rem auto 0; position:relative; z-index:2; padding:0 var(--pad); display:grid; grid-template-columns: 1.5fr 1fr; gap:2.5rem; } @media (max-width:900px){ .det-body{ grid-template-columns:1fr; gap:1.5rem; margin-top:-2rem; } } .det-main { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:2rem 2.25rem; } .det-tier { display:inline-flex; align-items:center; gap:.375rem; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:.75rem; } .det-tier-dot { width:8px; height:8px; border-radius:50%; } .det-name { font-family:var(--font-d); font-size:clamp(2rem,4vw,2.75rem); font-weight:700; letter-spacing:-.02em; line-height:1.05; color:var(--ink); margin-bottom:.75rem; text-wrap:balance; } .det-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-bottom:1.75rem; padding-bottom:1.75rem; border-bottom:1px solid var(--border); } .det-meta .dot { color:var(--border-2); } .det-meta .price { color:var(--green); font-weight:600; } .det-meta-hood { color:var(--ink); font-weight:500; } .det-tags { display:flex; gap:.375rem; flex-wrap:wrap; margin-bottom:1.75rem; } .det-section { margin-bottom:2rem; } .det-section:last-child { margin-bottom:0; } .det-section-title { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--green); margin-bottom:1rem; } .editorial { font-family:var(--font-d); font-size:1.0625rem; line-height:1.75; color:var(--ink-2); } .editorial p { margin-bottom:1rem; } .editorial p:last-child { margin-bottom:0; } .editorial p:first-of-type::first-letter { font-family:var(--font-d); font-size:3.75rem; line-height:1; font-weight:600; float:left; margin:.25rem .5rem 0 0; color:var(--green); } /* Sidebar */ .det-side { align-self:start; position:sticky; top:80px; display:flex; flex-direction:column; gap:1rem; } .side-card { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:1.5rem 1.5rem 1.625rem; } .side-card-title { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); } .info-row { display:flex; flex-direction:column; gap:.25rem; margin-bottom:1rem; } .info-row:last-child { margin-bottom:0; } .info-lbl { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--light); font-weight:600; } .info-val { font-size:.88rem; color:var(--ink); font-weight:500; line-height:1.45; } .info-val a { color:var(--green); text-decoration:none; } .info-val a:hover { text-decoration:underline; } .info-link { display:inline-flex; align-items:center; gap:.375rem; color:var(--green) !important; font-weight:500; border-bottom:1px solid var(--green-100); padding-bottom:1px; width:fit-content; transition:border-color .15s, color .15s; } .info-link:hover { color:var(--green-dark) !important; border-bottom-color:var(--green-dark); text-decoration:none !important; } .info-link-arr { font-size:.75em; opacity:.7; } .side-btns { display:flex; flex-direction:column; gap:.5rem; } .sbtn { padding:.875rem 1rem; border-radius:var(--r-sm); font-family:var(--font-b); font-size:.82rem; font-weight:500; cursor:pointer; border:none; transition:all .15s; display:flex; align-items:center; justify-content:space-between; text-align:left; } .sbtn-p { background:var(--ink); color:#fff; } .sbtn-p:hover { background:var(--green); } .sbtn-s { background:#fff; color:var(--ink); border:1.5px solid var(--border-2); } .sbtn-s:hover { border-color:var(--ink); } .sbtn-arr { opacity:.5; transition:transform .15s, opacity .15s; } .sbtn:hover .sbtn-arr { opacity:1; transform:translateX(3px); } /* ─── MAP ───────────────────────────────────────────────────────── */ .map-wrap { max-width:var(--maxw); margin:0 auto; padding:2.5rem var(--pad) 3rem; } .map-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } /* ─── MAP (Leaflet) ─────────────────────────────────────────────── */ .leaflet-wrap { position:relative; background:var(--cream); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.06); } .leaflet-host { width:100%; height:min(720px, 70vh); min-height:540px; background:#e8e5dc; } .map-legend-bar { display:flex; flex-wrap:wrap; gap:1.5rem; padding:.875rem 1.25rem; border-top:1px solid var(--border); background:var(--cream); font-family:var(--font-b); font-size:.78rem; color:var(--ink); } .map-legend-bar .ml-item { display:flex; align-items:center; gap:.5rem; } .map-legend-bar .ml-pin { display:inline-block; border-radius:50%; background:var(--green); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.2); } /* Custom pins (built with HTML so they style properly) */ .bc-pin-icon { background:transparent !important; border:0 !important; } .bc-pin { --pin-size:40px; --pin-accent:#1a6b3a; position:relative; width:var(--pin-size); height:var(--pin-size); display:flex; align-items:center; justify-content:center; cursor:pointer; } .bc-pin-halo { position:absolute; inset:-10px; border-radius:50%; background:var(--pin-accent); opacity:0; transition:opacity .25s, transform .25s; } .bc-pin:hover .bc-pin-halo { opacity:.18; transform:scale(1.1); } .bc-pin-circle { position:relative; width:100%; height:100%; border-radius:50%; background:var(--pin-accent); border:3px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; transition:transform .2s; } .bc-pin:hover .bc-pin-circle { transform:scale(1.08); } .bc-pin-inner { position:absolute; border:1px solid rgba(255,255,255,.55); border-radius:50%; pointer-events:none; } .bc-pin-num { position:relative; font-family:var(--font-d); font-weight:700; color:#fff; font-size:calc(var(--pin-size) * 0.34); line-height:1; } .bc-pin-label { position:absolute; bottom:calc(var(--pin-size) * -0.05); left:50%; transform:translate(-50%, 100%); white-space:nowrap; font-family:var(--font-b); font-size:.7rem; font-weight:600; color:var(--ink); background:rgba(250,248,243,.92); padding:.18rem .5rem; border-radius:99px; border:1px solid var(--border); margin-top:6px; letter-spacing:.01em; pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.08); } /* Leaflet popup overrides */ .bc-popup-wrap .leaflet-popup-content-wrapper { background:var(--cream); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 16px 40px rgba(0,0,0,.18); padding:0; } .bc-popup-wrap .leaflet-popup-content { margin:0; width:auto !important; } .bc-popup-wrap .leaflet-popup-tip { background:var(--cream); border:1px solid var(--border); } .bc-popup { padding:1rem 1.125rem 1rem; min-width:220px; } .bc-popup-eyebrow { font-family:var(--font-b); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem; } .bc-popup-title { font-family:var(--font-d); font-size:1.25rem; font-weight:600; color:var(--ink); line-height:1.15; } .bc-popup-count { font-family:var(--font-b); font-size:.78rem; font-weight:500; color:var(--green); margin-top:.4rem; } .bc-popup-list { font-family:var(--font-b); font-size:.78rem; color:var(--muted); line-height:1.5; margin-top:.4rem; padding-top:.6rem; border-top:1px solid var(--border); } .bc-popup-btn { margin-top:.75rem; width:100%; background:var(--ink); color:#fff; border:0; padding:.6rem .75rem; border-radius:var(--r-sm); font-family:var(--font-b); font-size:.78rem; font-weight:600; cursor:pointer; transition:background .15s; } .bc-popup-btn:hover { background:#000; } /* ─── ITINERARY ─────────────────────────────────────────────────── */ .itin-wrap { max-width:var(--maxw); margin:0 auto; padding:2.5rem var(--pad) 3rem; } .itin-head { margin-bottom:1.75rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .itin-hero { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:end; } @media (max-width:820px){ .itin-hero{ grid-template-columns:1fr; } } .itin-title { font-family:var(--font-d); font-size:clamp(2rem,4vw,2.75rem); font-weight:700; letter-spacing:-.02em; line-height:1.05; color:var(--ink); margin:.5rem 0 .75rem; text-wrap:balance; } .itin-lede { font-size:.95rem; color:var(--muted); line-height:1.6; max-width:520px; } .itin-stats { display:flex; gap:2rem; } .is-stat { border-left:2px solid var(--green); padding-left:.875rem; } .is-n { font-family:var(--font-d); font-size:1.75rem; font-weight:600; color:var(--ink); line-height:1; } .is-l { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.375rem; font-weight:500; } .itin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; } .itin-day-seg { display:inline-flex; gap:4px; background:#fff; border:1px solid var(--border); border-radius:99px; padding:3px; } .itin-day-seg button { border:none; background:transparent; font-family:var(--font-b); font-size:.78rem; font-weight:500; padding:.5rem 1rem; border-radius:99px; cursor:pointer; color:var(--muted); } .itin-day-seg button.on { background:var(--ink); color:#fff; } /* Multi-day tabs */ .day-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .day-tab { position:relative; display:inline-flex; align-items:center; gap:.6rem; padding:.6rem .95rem .6rem 1rem; background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--font-b); font-size:.85rem; font-weight:500; color:var(--ink); cursor:pointer; transition:all .15s; } .day-tab:hover { border-color:var(--ink); } .day-tab.on { background:var(--ink); color:#fff; border-color:var(--ink); } .day-tab .dt-num { font-weight:600; letter-spacing:.01em; } .day-tab .dt-count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 .375rem; border-radius:99px; background:var(--cream); border:1px solid var(--border); color:var(--muted); font-size:.7rem; font-weight:600; } .day-tab.on .dt-count { background:rgba(255,255,255,.18); border-color:transparent; color:#fff; } .day-tab .dt-x { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:-.2rem; margin-right:-.3rem; border-radius:50%; font-size:.95rem; font-weight:600; color:var(--muted); background:transparent; cursor:pointer; transition:background .15s, color .15s; } .day-tab .dt-x:hover { background:rgba(0,0,0,.08); color:var(--ink); } .day-tab.on .dt-x { color:rgba(255,255,255,.55); } .day-tab.on .dt-x:hover { background:rgba(255,255,255,.15); color:#fff; } .day-tab.day-add { background:transparent; border:1px dashed var(--border-2); color:var(--muted); } .day-tab.day-add:hover { background:var(--cream); color:var(--ink); border-color:var(--ink); border-style:solid; } /* Day stats (within active day) */ .itin-day-stats { display:flex; gap:2rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .ids-stat { border-left:2px solid var(--blue); padding-left:.875rem; } .ids-n { font-family:var(--font-d); font-size:1.4rem; font-weight:600; color:var(--ink); line-height:1; } .ids-l { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; font-weight:500; } .itin-empty-day { padding:3rem 1.5rem; background:var(--cream); border-style:solid; } .itin-actions { display:flex; align-items:center; gap:.5rem; } .itin-move { font-family:var(--font-b); font-size:.7rem; font-weight:500; background:#fff; border:1px solid var(--border); border-radius:var(--r-sm); padding:.35rem .5rem; color:var(--muted); cursor:pointer; } .itin-move:hover { border-color:var(--ink); color:var(--ink); } .itin-day-foot { margin-top:2rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; } /* Plan-it day status on detail */ .plan-status { font-family:var(--font-b); font-size:.78rem; color:var(--ink); background:rgba(245,216,0,.18); border:1px solid rgba(245,216,0,.5); padding:.55rem .75rem; border-radius:var(--r-sm); margin-bottom:.75rem; line-height:1.45; } .plan-status-add { background:var(--cream); border-color:var(--border); color:var(--muted); } .plan-status strong { color:var(--ink); font-weight:600; } .plan-status a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; } .itin-empty { padding:4rem 2rem; text-align:center; border:1.5px dashed var(--border-2); border-radius:var(--r); background:#fff; } .itin-empty-icon { font-size:2rem; margin-bottom:.75rem; } .itin-empty-title { font-family:var(--font-d); font-size:1.5rem; font-weight:600; margin-bottom:.5rem; color:var(--ink); } .itin-empty-sub { font-size:.88rem; color:var(--muted); margin-bottom:1.25rem; } .itin-timeline { position:relative; padding-left:2.5rem; } .itin-timeline::before { content:''; position:absolute; left:1rem; top:0; bottom:0; width:2px; background:var(--border); } .itin-slot { position:relative; margin-bottom:.75rem; background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:1.25rem 1.25rem 1.25rem; display:grid; grid-template-columns: 110px 1fr auto; gap:1rem; align-items:center; } .itin-slot::before { content:''; position:absolute; left:-1.625rem; top:1.375rem; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--green); } .itin-slot.ct-must::before { border-color:var(--yellow-dark); } .itin-slot.ct-pick::before { border-color:var(--green); } .itin-slot.ct-quick::before { border-color:var(--blue); } .itin-time { font-family:var(--font-d); font-size:1.1rem; font-weight:600; color:var(--green); line-height:1; } .itin-timecol { display:flex; flex-direction:column; gap:.375rem; align-items:flex-start; } .itin-time-input { font-family:var(--font-d); font-size:1.1rem; font-weight:600; color:var(--green); line-height:1; border:1px solid transparent; background:transparent; padding:.35rem .5rem; border-radius:var(--r-sm); cursor:pointer; transition:all .15s; width:auto; min-width:95px; font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none; } .itin-time-input:hover { border-color:var(--border-2); background:#fff; } .itin-time-input:focus { outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px var(--green-50); } .itin-time-input.is-custom { color:var(--ink); background:var(--yellow-50); border-color:var(--yellow); } .itin-time-input.is-custom:hover { background:var(--yellow-100); } .itin-time-input::-webkit-calendar-picker-indicator { opacity:.45; cursor:pointer; padding:0; margin-left:.25rem; filter:grayscale(1); } .itin-time-input::-webkit-calendar-picker-indicator:hover { opacity:.85; } .itin-time-label { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:.375rem; } .itin-place-name { font-family:var(--font-d); font-size:1.2rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-bottom:.25rem; } .itin-place-meta { font-size:.78rem; color:var(--muted); } .itin-place-meta .hood { color:var(--ink); font-weight:500; } .itin-remove { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; color:var(--muted); font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:all .15s; } .itin-remove:hover { background:var(--ink); color:#fff; border-color:var(--ink); } .itin-transit { position:relative; z-index:1; margin:.25rem 0 .75rem 2.5rem; font-family:var(--font-d); font-size:.78rem; font-style:italic; color:var(--muted); padding:.375rem .75rem; display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px dashed var(--border-2); border-radius:99px; width:fit-content; } .itin-transit::before { content:'↓'; color:var(--light); } /* ─── SAVED ─────────────────────────────────────────────────────── */ .saved-wrap { max-width:var(--maxw); margin:0 auto; padding:2.5rem var(--pad) 3rem; } .saved-empty { padding:4rem 2rem; text-align:center; } .saved-empty-title { font-family:var(--font-d); font-size:1.75rem; font-weight:600; margin-bottom:.5rem; color:var(--ink); } .saved-empty-sub { font-size:.9rem; color:var(--muted); } /* ─── VOCAB ─────────────────────────────────────────────────────── */ .vocab-section { padding-top:1rem; padding-bottom:3rem; } .vocab-card { background:var(--green-dark); color:#fff; border-radius:var(--r-lg); padding:2.75rem 2.5rem; position:relative; overflow:hidden; } .vocab-card::before { content:''; position:absolute; top:-80px; right:-60px; width:240px; height:240px; border-radius:50%; background:var(--yellow); opacity:.1; } .vocab-card::after { content:''; position:absolute; bottom:-80px; left:-40px; width:200px; height:200px; border-radius:50%; background:var(--blue); opacity:.2; } .vocab-head { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; margin-bottom:2.25rem; position:relative; z-index:1; align-items:end; } @media (max-width:720px){ .vocab-head{ grid-template-columns:1fr; } } .vocab-title { font-family:var(--font-d); font-size:clamp(2rem,4vw,2.875rem); font-weight:700; letter-spacing:-.02em; line-height:1; color:#fff; } .vocab-intro { font-size:.95rem; line-height:1.65; color:rgba(255,255,255,.78); max-width:440px; } .vocab-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:1.25rem; position:relative; z-index:1; } .vocab-item { padding:1.125rem 0 0; border-top:1px solid rgba(255,255,255,.15); } .vt-num { font-family:var(--font-d); font-style:italic; font-size:.8rem; font-weight:500; color:var(--yellow); margin-bottom:.25rem; } .vt-term { font-family:var(--font-d); font-size:1.125rem; font-weight:600; color:#fff; margin-bottom:.5rem; letter-spacing:-.01em; } .vt-def { font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.75); } /* ─── FOOTER ────────────────────────────────────────────────────── */ .footer { max-width:var(--maxw); margin:0 auto; padding:2rem var(--pad) 3rem; text-align:center; border-top:1px solid var(--border); } .footer-mark { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.75rem; } .footer-word { font-family:var(--font-d); font-size:1rem; font-weight:600; } .footer-word span { color:var(--green); font-style:italic; } .footer-line { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:.25rem; } .footer-sub { font-size:.75rem; color:var(--light); font-style:italic; } .footer-byline { font-size:.78rem; color:var(--ink); font-weight:600; margin-top:.5rem; letter-spacing:.01em; } /* ─── BOT NAV (mobile) ──────────────────────────────────────────── */ .bot-nav { position:fixed; bottom:0; left:0; right:0; background:rgba(255,255,255,.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); display:none; z-index:100; padding-bottom:env(safe-area-inset-bottom); } @media (max-width:720px){ .bot-nav{ display:flex; } body{ padding-bottom:0; } } .bn { flex:1; border:none; background:transparent; padding:.75rem 0 .625rem; display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--font-b); font-size:.62rem; font-weight:500; color:var(--muted); cursor:pointer; transition:color .15s; } .bn.on { color:var(--green); } .bn-ico { width:22px; height:22px; } /* ─── EMPTY STATES ──────────────────────────────────────────────── */ .empty { text-align:center; padding:3rem 1rem; color:var(--muted); font-size:.95rem; } .btn-ghost { margin-top:1rem; padding:.625rem 1.125rem; background:#fff; border:1.5px solid var(--border-2); border-radius:99px; font-family:var(--font-b); font-size:.8rem; font-weight:500; color:var(--ink); cursor:pointer; transition:all .15s; } .btn-ghost:hover { border-color:var(--ink); } /* ─── MENU & VOUCHER ────────────────────────────────────────── */ .menu-list { display:flex; flex-direction:column; gap:1rem; } .menu-row { display:grid; grid-template-columns: 1fr auto auto; gap:.75rem; align-items:baseline; } .menu-name { font-family:var(--font-d); font-size:1.05rem; font-weight:600; letter-spacing:-.005em; color:var(--ink); line-height:1.25; } .menu-desc { font-size:.82rem; color:var(--muted); line-height:1.5; margin-top:.2rem; font-style:italic; } .menu-dots { border-bottom:1.5px dotted var(--border-2); min-width:1rem; align-self:center; margin-top:.375rem; } .menu-price { font-family:var(--font-d); font-size:1rem; font-weight:600; color:var(--green); white-space:nowrap; } .menu-foot { margin-top:.75rem; padding-top:.875rem; border-top:1px dashed var(--border); font-size:.72rem; color:var(--muted); font-style:italic; line-height:1.55; } .voucher-box { border:1.5px dashed var(--border-2); border-radius:var(--r); padding:1.25rem 1.25rem 1.125rem; background:var(--cream); position:relative; } .voucher-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding-bottom:.875rem; border-bottom:1px dashed var(--border-2); } .vh-title { font-family:var(--font-d); font-size:1.125rem; font-weight:600; letter-spacing:-.005em; color:var(--ink); } .vh-sub { font-size:.78rem; color:var(--muted); margin-top:.25rem; line-height:1.5; } .vh-icon { width:36px; height:36px; border-radius:50%; background:var(--yellow); color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; } .voucher-form { display:flex; gap:.5rem; } .voucher-input { flex:1; padding:.75rem 1rem; border:1.5px solid var(--border-2); border-radius:var(--r-sm); font-family:var(--font-b); font-size:.88rem; font-weight:500; letter-spacing:.05em; background:#fff; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; text-transform:uppercase; } .voucher-input::placeholder { color:var(--light); font-weight:400; letter-spacing:.04em; text-transform:none; } .voucher-input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-50); } .voucher-btn { padding:.75rem 1.25rem; background:var(--ink); color:#fff; border:none; border-radius:var(--r-sm); font-family:var(--font-b); font-size:.82rem; font-weight:500; cursor:pointer; transition:background .15s; } .voucher-btn:hover { background:var(--green); } .voucher-err { min-height:1rem; margin-top:.5rem; font-size:.75rem; color:#a83232; } .voucher-hint { margin-top:.75rem; font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; } .vhint-chip { border:1px solid var(--border); background:#fff; font-family:var(--font-b); font-size:.68rem; font-weight:600; letter-spacing:.04em; padding:.25rem .5rem; border-radius:4px; color:var(--green); cursor:pointer; transition:all .15s; } .vhint-chip:hover { background:var(--green); color:#fff; border-color:var(--green); } .voucher-applied { display:flex; align-items:center; gap:.875rem; background:var(--green-50); border:1.5px solid var(--green-100); border-radius:var(--r); padding:1rem 1.125rem; } .va-check { width:32px; height:32px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; flex-shrink:0; } .va-title { font-size:.88rem; color:var(--ink); line-height:1.3; } .va-title strong { font-family:var(--font-d); font-weight:600; letter-spacing:.04em; } .va-sub { font-size:.78rem; color:var(--green-dark); margin-top:.25rem; line-height:1.5; } .va-remove { margin-left:auto; border:none; background:transparent; font-family:var(--font-b); font-size:.75rem; font-weight:500; color:var(--green-dark); cursor:pointer; text-decoration:underline; text-decoration-color:var(--green-100); text-underline-offset:3px; flex-shrink:0; } .va-remove:hover { text-decoration-color:var(--green-dark); } @media (max-width:640px){ .voucher-form { flex-direction:column; } .voucher-head { flex-direction:column-reverse; align-items:flex-start; } .voucher-applied { flex-wrap:wrap; } } /* ─── MENU LINK & VOUCHER TICKET ────────────────────────────── */ .menu-link { display:grid; grid-template-columns: auto 1fr auto; gap:1rem; align-items:center; padding:1.125rem 1.25rem; background:#fff; border:1.5px solid var(--border-2); border-radius:var(--r); text-decoration:none; color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s; } .menu-link:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.06); } .ml-icon { width:44px; height:44px; border-radius:var(--r-sm); background:var(--green-50); color:var(--green-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ml-title { font-family:var(--font-d); font-size:1.05rem; font-weight:600; letter-spacing:-.005em; color:var(--ink); line-height:1.2; } .ml-sub { font-size:.78rem; color:var(--muted); margin-top:.2rem; line-height:1.45; } .ml-arr { font-size:1.1rem; color:var(--muted); transition:transform .15s, color .15s; } .menu-link:hover .ml-arr { color:var(--green); transform:translate(2px,-2px); } .menu-link-foot { margin-top:.625rem; font-size:.72rem; color:var(--muted); font-style:italic; line-height:1.5; } /* Voucher ticket */ .voucher-ticket { display:grid; grid-template-columns: 1fr auto 1fr; background:var(--ink); color:#fff; border-radius:var(--r); overflow:hidden; position:relative; box-shadow:0 12px 32px rgba(0,0,0,.15); transition:transform .25s cubic-bezier(.2,.7,.3,1); } .voucher-ticket.copied { transform:scale(1.01); } .voucher-ticket::before, .voucher-ticket::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--cream); top:50%; transform:translateY(-50%); z-index:2; } .voucher-ticket::before { left:calc(50% - 9px); } .voucher-ticket::after { display:none; } .vt-left { padding:1.5rem 1.5rem 1.5rem 1.5rem; display:flex; flex-direction:column; justify-content:center; gap:.5rem; } .vt-eyebrow { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--yellow); } .vt-benefit { font-family:var(--font-d); font-size:1.375rem; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:#fff; text-wrap:balance; } .vt-terms { font-size:.75rem; color:rgba(255,255,255,.65); line-height:1.5; margin-top:.25rem; } .vt-expires { font-size:.7rem; color:rgba(255,255,255,.55); margin-top:auto; padding-top:.5rem; } .vt-expires strong { color:#fff; font-weight:600; } .vt-perf { width:1px; margin:.75rem 0; border-left:2px dashed rgba(255,255,255,.25); position:relative; } .vt-right { padding:1.5rem 1.5rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:.75rem; align-items:center; justify-content:center; background:rgba(255,255,255,.03); } .vt-code-label { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; align-self:flex-start; } .vt-qr { width:160px; height:160px; background:#fff; border-radius:8px; padding:10px; display:flex; align-items:center; justify-content:center; position:relative; margin:0 auto; } .vt-qr img { width:100%; height:100%; object-fit:contain; display:block; } .vt-qr-placeholder { position:absolute; inset:10px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:#a8a8a8; background:repeating-linear-gradient(45deg, #f4f4f2 0 8px, #ececea 8px 16px); border-radius:4px; text-align:center; } .vt-qr-placeholder span { font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; line-height:1.4; } .vt-how { font-size:.7rem; color:rgba(255,255,255,.6); line-height:1.5; text-align:center; font-style:italic; } @media (max-width:640px){ .voucher-ticket { grid-template-columns:1fr; } .vt-perf { display:none; } .vt-left { padding-bottom:.75rem; } .vt-right { border-top:2px dashed rgba(255,255,255,.2); padding-top:1.25rem; } .voucher-ticket::before { top:auto; bottom:calc(50% - 9px); left:calc(50% - 9px); transform:none; } .voucher-ticket::after { display:block; top:auto; bottom:calc(50% - 9px); right:calc(50% - 9px); left:auto; transform:none; } } /* ─── TWEAKS ────────────────────────────────────────────────────── */ .tweaks { position:fixed; bottom:1.25rem; right:1.25rem; width:320px; background:#fff; border:1px solid var(--border); border-radius:var(--r); box-shadow:0 24px 60px rgba(0,0,0,.2); z-index:200; animation:tweaksIn .3s cubic-bezier(.2,.7,.3,1); } @keyframes tweaksIn { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } .tw-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); } .tw-title { font-family:var(--font-d); font-size:1.1rem; font-weight:600; } .tw-sub { font-size:.68rem; color:var(--muted); margin-top:2px; } .tw-close { width:32px; height:32px; border-radius:50%; border:none; background:var(--cream); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; } .tw-close:hover { background:var(--border); } .tw-body { padding:1rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:1.125rem; } .tw-group {} .tw-label { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:.5rem; } .tw-seg { display:flex; background:var(--cream); border-radius:var(--r-sm); padding:3px; gap:2px; } .tw-seg button { flex:1; border:none; background:transparent; font-family:var(--font-b); font-size:.75rem; font-weight:500; padding:.5rem .25rem; border-radius:6px; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:.375rem; transition:all .15s; } .tw-seg button:hover { color:var(--ink); } .tw-seg button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); } .tw-swatch { width:10px; height:10px; border-radius:50%; } /* Responsive tweaks */ @media (max-width:640px){ .section { padding:2rem var(--pad); } /* padding-bottom em declaracao propria, nunca no atalho. * A faixa de calcada portuguesa (.hero::after) e absoluta, com 120px de * altura, e o espaco dela e RESERVADO pelo padding-bottom do hero. Um * atalho 'padding: 2.25rem 0 2.75rem' apagava essa reserva -- era por * isso que no celular a calcada subia por cima do box de texto e o verde * parecia terminar antes do conteudo. */ .hero { padding-top:2.25rem; padding-bottom:calc(2.75rem + 120px); } .hero-right { display:none; } .det-main { padding:1.5rem 1.25rem; } .itin-slot { grid-template-columns: 56px 1fr auto; } .vocab-card { padding:2rem 1.5rem; } .tweaks { left:.75rem; right:.75rem; bottom:calc(60px + env(safe-area-inset-bottom)); width:auto; } } /* ─── WordPress-specific additions (Brazilcore Guide theme) ─── */ /* .bcg-locked #app { display: none } saiu na 1.9.46 -- era a segunda copia * da regra que apagava a pagina para quem nao esta logado. A classe * bcg-locked continua no body, util para estilo, sem esconder nada. */ /* Site footer */ .site-foot { background: var(--ink, #0e0f10); color: #f5f3ee; padding: 60px 24px 40px; margin-top: 80px; } .site-foot-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: start; } .site-foot .sf-word { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; letter-spacing: -.02em; } .site-foot .sf-word span { color: var(--yellow, #f5d800); font-style: italic; } .site-foot .sf-tag { color: #b8b4a8; font-size: 14px; margin-top: 8px; } .site-foot .sf-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #b8b4a8; margin-bottom: 12px; } .site-foot .sf-muted { color: #b8b4a8; font-size: 14px; } .site-foot p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; } .site-foot a { color: var(--yellow, #f5d800); text-decoration: none; } .site-foot a:hover { text-decoration: underline; } .site-foot .sf-logout { display: inline-block; padding: 8px 14px; border: 1px solid #555; border-radius: 4px; color: #fff !important; font-size: 13px; } .site-foot .sf-c { color: #888; font-size: 12px; margin-top: 16px; } @media (max-width: 800px) { .site-foot-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .site-foot-in { grid-template-columns: 1fr; } } /* Single restaurant page */ .single-restaurant { max-width: 980px; margin: 32px auto; padding: 0 24px; } .sr-back { color: var(--green, #1a6b3a); font-size: 14px; text-decoration: none; font-weight: 500; } .sr-back:hover { text-decoration: underline; } .sr-head { padding: 32px 0; } .sr-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #666; margin: 16px 0 12px; } .sr-eyebrow .dot { color: #ccc; margin: 0 6px; } .sr-eyebrow .sr-michelin { color: #c8102e; font-weight: 600; } .sr-title { font-family: 'Playfair Display', serif; font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.05; margin: 0 0 16px; letter-spacing: -.02em; } .sr-tagline { font-size: 20px; line-height: 1.5; color: #444; max-width: 720px; } .sr-photo { width: 100%; height: 480px; background-size: cover; background-position: center; border-radius: 8px; margin: 24px 0 40px; } .sr-body { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; } .sr-editorial { font-size: 17px; line-height: 1.7; color: #222; } .sr-editorial p { margin: 0 0 18px; } .sr-info { background: #f7f7f4; padding: 24px; border-radius: 6px; align-self: start; } .sr-info dl { margin: 0; } .sr-info dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-top: 14px; } .sr-info dt:first-child { margin-top: 0; } .sr-info dd { margin: 4px 0 0; font-size: 15px; color: #222; } .sr-info a { color: var(--green, #1a6b3a); } @media (max-width: 720px) { .sr-body { grid-template-columns: 1fr; gap: 24px; } .sr-photo { height: 280px; } } /* Archive grid */ .archive-list { max-width: 1200px; margin: 32px auto; padding: 0 24px; } .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } .rcard { display: block; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; color: inherit; } .rcard:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); } .rcard-photo { height: 200px; background-size: cover; background-position: center; position: relative; } .rcard-michelin { position: absolute; top: 12px; right: 12px; background: rgba(200, 16, 46, .95); color: #fff; padding: 4px 8px; font-size: 11px; font-weight: 600; border-radius: 3px; } .rcard-body { padding: 18px; } .rcard-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: 8px; } .rcard-eyebrow .dot { margin: 0 4px; color: #ccc; } .rcard-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #111; } .rcard-tagline { font-size: 14px; line-height: 1.5; color: #555; margin: 0; } /* ─── Editorial Banner block ─────────────────────────────────────── */ .bcg-banner { padding: 48px 24px; margin: 32px 0; } .bcg-banner-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .bcg-banner-left .bcg-banner-inner { grid-template-columns: 1fr 1fr; } .bcg-banner-background .bcg-banner-inner { grid-template-columns: 1fr; text-align: center; } .bcg-banner-image img { width: 100%; height: auto; border-radius: 4px; display: block; } .bcg-banner-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin: 0 0 12px; } .bcg-banner-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.1; margin: 0 0 16px; letter-spacing: -.01em; } .bcg-banner-text { font-size: 17px; line-height: 1.6; margin: 0 0 24px; } .bcg-banner-cta { display: inline-block; padding: 14px 28px; color: #fff !important; text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; border-radius: 4px; transition: transform .15s; } .bcg-banner-cta:hover { transform: translateY(-1px); } @media (max-width: 720px) { .bcg-banner-inner { grid-template-columns: 1fr; gap: 24px; } .bcg-banner-image { order: -1; } } /* ─── Brazilcore Banner Block ─────────────────────────────────── */ .bcg-banner { margin: 40px 0; border-radius: 8px; overflow: hidden; } .bcg-banner-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px; align-items: center; max-width: 1200px; margin: 0 auto; } .bcg-banner-image-bg .bcg-banner-inner { grid-template-columns: 1fr; min-height: 380px; } .bcg-banner-text-only .bcg-banner-inner { grid-template-columns: 1fr; max-width: 760px; text-align: center; } .bcg-banner-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .15em; color: inherit; opacity: .7; margin: 0 0 12px; } .bcg-banner-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.1; margin: 0 0 16px; } .bcg-banner-sub { font-size: 17px; line-height: 1.5; margin: 0 0 24px; opacity: .85; } .bcg-banner-media img { width: 100%; height: auto; border-radius: 6px; display: block; } .bcg-banner-cta { display: inline-flex; align-items: center; gap: 12px; background: var(--green, #1a6b3a); color: #fff; padding: 14px 24px; border-radius: 4px; text-decoration: none; font-weight: 600; transition: transform .2s; } .bcg-banner-cta:hover { transform: translateX(4px); } .bcg-banner-cta-arr { font-size: 18px; } .bcg-banner-image-bg .bcg-banner-cta { background: #fff; color: #111; } @media (max-width: 800px) { .bcg-banner-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; } .bcg-banner-image-left .bcg-banner-media { order: -1; } } /* ─── Gutenberg block editor preview adjustments ──────────────── */ .wp-block.is-selected .bcg-banner, .wp-block.is-selected .hero, .wp-block.is-selected #gate, .wp-block.is-selected .site-foot { outline: 2px dashed #1a6b3a; outline-offset: 4px; } /* ─── Menu link "Coming soon" state ─────────────────────────── */ .menu-link-pending { cursor: default; opacity: 0.72; background: var(--card-bg, #fafafa); } .menu-link-pending:hover { transform: none; box-shadow: none; } .menu-link-pending .ml-title { font-style: italic; } /* ─── City selector in the nav ───────────────────────────────── */ .nav-city { display:inline-flex; align-items:center; gap:8px; margin-left: 12px; } .nav-city .city-static { font-family: var(--font-d); font-size: 14px; color: var(--ink-2, #555); letter-spacing: .02em; font-style: italic; } .nav-city .city-opts { display:inline-flex; gap:4px; background:#f5f5f0; padding:3px; border-radius:999px; } .nav-city .city-opt { background: transparent; border: 0; padding: 6px 12px; font: inherit; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--ink-2, #555); transition: all .15s; } .nav-city .city-opt:hover { color: var(--ink, #111); } .nav-city .city-opt.on { background: var(--ink, #111); color: #fff; } @media (max-width: 800px) { .nav-city { width: 100%; margin: 8px 0 0; overflow-x: auto; } } /* ─── Restaurant pins (one per restaurant) ──────────────────── */ .bc-pin-r { --pin-size: 28px; width: 28px; height: 28px; position: relative; display: flex; align-items: center; justify-content: center; } .bc-pin-r .bc-pin-halo { position: absolute; inset: -8px; border-radius: 50%; background: var(--pin-accent, #1a6b3a); opacity: .18; animation: bc-pin-pulse 2.6s ease-out infinite; } .bc-pin-r .bc-pin-circle { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--pin-accent, #1a6b3a); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); position: relative; z-index: 1; } .bc-pin-r .bc-pin-inner { width: 8px; height: 8px; border-radius: 50%; background: var(--pin-accent, #1a6b3a); } .bc-pin-r .bc-pin-star { position: absolute; top: -6px; right: -6px; background: #c69010; color: #fff; width: 14px; height: 14px; border-radius: 50%; font-size: 9px; line-height: 14px; text-align: center; border: 1.5px solid #fff; } @keyframes bc-pin-pulse { 0% { transform: scale(.9); opacity: .25; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } .bc-pin-legend { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* ─── Adaptive cluster pin (Rio editorial style at low zoom) ─── */ .bc-pin-cluster { width: var(--pin-size, 50px); height: var(--pin-size, 50px); position: relative; display: flex; align-items: center; justify-content: center; } .bc-pin-cluster .bc-pin-halo { position: absolute; inset: -10px; border-radius: 50%; background: var(--pin-accent, #1a6b3a); opacity: .14; animation: bc-pin-pulse 2.8s ease-out infinite; } .bc-pin-cluster .bc-pin-circle { width: 100%; height: 100%; border-radius: 50%; background: var(--pin-accent, #1a6b3a); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.22); position: relative; z-index: 1; color: #fff; } .bc-pin-cluster .bc-pin-inner { display: none; } .bc-pin-cluster .bc-pin-num { font-family: var(--font-d, Georgia, serif); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: .02em; } .bc-pin-cluster .bc-pin-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: #111; background: rgba(255,255,255,.94); padding: 2px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* Hide markercluster's default icon — we provide our own via iconCreateFunction. */ .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large, .marker-cluster { background: transparent !important; border: 0 !important; } .marker-cluster div { background: transparent !important; color: inherit !important; font: inherit !important; } /* ─── Sign out button in the nav ────────────────────────────── */ .nav-logout { background: transparent; border: 0; cursor: pointer; padding: 8px; margin-left: 6px; color: var(--muted, #6b6b6b); display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; transition: color .15s, background .15s; } .nav-logout:hover { color: var(--ink, #111); background: rgba(0,0,0,.04); } .nav-logout:focus { outline: 2px solid var(--accent, #1a6b3a); outline-offset: 1px; } /* ─── Hero/Gate 2-column stats (Michelin removed) ───────────── */ .hc-numbers-2col { justify-content: center; gap: 32px !important; } .gp-stats-2col { justify-content: center; } /* Footer credit (Midia17 dev byline) */ .footer-credit { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #999); margin-top: 4px; margin-bottom: 0; opacity: .7; } /* Card eyebrow: collection variant — keeps the light pill style of tiers, * with a darker yellow dot to distinguish from the Must-Know tier (yellow). */ .card-tier.ct-collection { background: #fff; color: var(--ink); } .card-tier.ct-collection .card-tier-dot { background: var(--yellow-dark, #c69010); } /* ═══════════════════════════════════════════════════════════════════ * v1.5.0 — APPENDIX PAGE + MOBILE NAV (HAMBURGER + DRAWER) * ═══════════════════════════════════════════════════════════════════ */ /* ─── APPENDIX PAGE ─────────────────────────────────────────────── */ .ap-page { max-width: var(--maxw); margin: 0 auto; padding: 0; background: var(--cream); } /* Page header */ .ap-header { padding: 3rem var(--pad) 2.25rem; background: var(--cream); border-bottom: 1px solid var(--border); } .ap-eyebrow { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green); font-weight: 500; margin: 0 0 .875rem; } .ap-title { font-family: var(--font-d); font-size: clamp(2.5rem, 5.5vw, 3.75rem); line-height: .95; font-weight: 700; letter-spacing: -.025em; margin: 0 0 .75rem; color: var(--ink); } .ap-title em { font-style: italic; color: var(--green); font-weight: 500; } .ap-lede { font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 540px; margin: 0; } /* On this page — index. * NOT position:sticky anymore -- sticky's containing block breaks the * moment ANY ancestor (at any depth) sets a transform/filter/contain, or * an overflow other than visible, and Enfold's Advanced Layout Builder * wraps this in several nested divs (av_section/av_one_full/.container/ * .av_textblock/.flex_column) that are outside this theme's control -- * stripping known offenders off known class names (tried in 1.6.28) still * left it broken, which means something in that chain still qualifies * and is out of reach of a CSS-only fix. main.js now pins/unpins this * element with position:fixed via scroll listener instead (see * initApIndexPin() at the bottom of main.js) -- fixed positioning only * cares about transformed ancestors (already neutralized), not overflow, * so it isn't at the mercy of Enfold's markup depth the way sticky was. * The base rules below are shared by both the resting and pinned state; * `.ap-index.is-pinned` (added by main.js) supplies position/top/width. */ .ap-index { background: #fff; border-bottom: 1px solid var(--border); padding: 1.5rem var(--pad) 0; z-index: 50; } /* Sticky/fixed pinning removed entirely (1.6.33) after repeated attempts * (sticky, then JS-driven fixed) still overlapped content in this specific * Enfold/ALB page context. The index now simply stays in normal document * flow at its original position -- it scrolls away with the page like any * other element, instead of pinning under the nav. This trades away the * "stays visible while scrolling" behavior to guarantee it can never cover * the content again. */ .ap-index, .ap-index.is-pinned { position: static !important; top: auto !important; left: auto !important; right: auto !important; } /* Reserves the space .ap-index would occupy while it's pinned out of flow, * so the rest of the page doesn't jump upward by its height. main.js gives * this the pinned element's own measured height as an inline style. */ .ap-index-spacer { display: none; } .ap-index-spacer.is-active { display: block; } .ap-index-label { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 1rem; } .ap-index-list { display: flex; gap: 0; } .ap-index-item { flex: 1; padding: .875rem .875rem 1.125rem; border-top: 1px solid var(--border); border-right: 1px solid var(--border); text-decoration: none; color: var(--ink); transition: background .2s; display: flex; align-items: center; } .ap-index-item:last-child { border-right: none; } .ap-index-item:hover { background: var(--yellow-50); } .ap-index-item.is-current { background: var(--yellow-50); border-top-color: var(--yellow-dark); } .ap-index-name { font-family: var(--font-d); font-size: .875rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; } .ap-index-item.is-current .ap-index-name { color: var(--green-dark); } /* Common section head */ .ap-sec { padding: 2.75rem var(--pad) 3rem; scroll-margin-top: var(--bcg-sec-scroll-offset, 180px); } .ap-sec-head { margin-bottom: 1.75rem; max-width: 600px; } .ap-sec-title { font-family: var(--font-d); font-size: clamp(1.625rem, 3vw, 2rem); line-height: 1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .75rem; color: var(--ink); } .ap-sec-intro { font-size: .9rem; line-height: 1.6; color: var(--ink-2); margin: 0; font-style: italic; } /* Section I — Menu Decoder */ .ap-sec-menu { background: var(--paper); } .ap-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem 1.5rem; } .ap-menu-cell { padding-top: .875rem; border-top: 1px solid rgba(26,26,26,.2); } .ap-menu-num { font-family: var(--font-d); font-style: italic; font-size: .75rem; color: var(--green); font-weight: 500; margin-bottom: .25rem; } .ap-menu-term { font-family: var(--font-d); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .375rem; line-height: 1.15; color: var(--ink); } .ap-menu-def { font-size: .8rem; line-height: 1.55; color: var(--ink-2); } /* Section II — Essential Brazilian Dishes (dark green editorial menu) */ .ap-sec-dishes { background: var(--green-dark); color: #fff; position: relative; overflow: hidden; } .ap-sec-dishes::before { content: ''; position: absolute; top: -90px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: var(--yellow); opacity: .08; } .ap-sec-dishes .ap-sec-title { color: #fff; } .ap-sec-dishes .ap-sec-intro { color: rgba(255,255,255,.78); } .ap-dishes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem 2.5rem; position: relative; z-index: 1; } .ap-dish-row { display: grid; grid-template-columns: 28px 1fr; gap: .875rem; padding: .625rem 0; border-bottom: 1px solid rgba(255,255,255,.13); align-items: baseline; } .ap-dish-bullet { font-family: var(--font-d); font-style: italic; font-size: .75rem; color: var(--yellow); font-weight: 500; } .ap-dish-content { display: flex; flex-direction: column; gap: .25rem; } .ap-dish-name { font-family: var(--font-d); font-size: 1.125rem; font-weight: 600; line-height: 1; letter-spacing: -.005em; color: #fff; } .ap-dish-def { font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.72); } /* Section III — Beach Food Culture */ .ap-sec-beach { background: var(--yellow-50); } .ap-beach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2rem; } .ap-beach-item { display: grid; grid-template-columns: 36px 1fr; gap: .875rem; padding-top: 1rem; border-top: 1px solid rgba(26,26,26,.2); align-items: start; } .ap-beach-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--green); } .ap-beach-text { display: flex; flex-direction: column; gap: .25rem; } .ap-beach-name { font-family: var(--font-d); font-size: 1rem; font-weight: 600; line-height: 1.15; letter-spacing: -.005em; color: var(--ink); } .ap-beach-def { font-size: .8rem; line-height: 1.55; color: var(--ink-2); } /* Tablet collapse */ @media (max-width: 960px) { .ap-menu-grid { grid-template-columns: repeat(3, 1fr); } .ap-beach-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile single column */ @media (max-width: 640px) { .ap-header { padding: 2rem var(--pad) 1.625rem; } .ap-title { font-size: clamp(2rem, 8vw, 2.5rem); } .ap-lede { font-size: .875rem; } .ap-index.is-pinned { top: var(--bcg-nav-h, 64px); } .ap-index { padding: 1rem var(--pad) 0; } .ap-index-list { flex-direction: column; } .ap-index-item { border-right: none; border-bottom: 1px solid var(--border); padding: .75rem .25rem; } .ap-index-item:last-child { border-bottom: none; } .ap-sec { padding: 2rem var(--pad) 2.5rem; scroll-margin-top: var(--bcg-sec-scroll-offset, 120px); } .ap-sec-title { font-size: 1.5rem; } .ap-menu-grid { grid-template-columns: 1fr; gap: .875rem; } .ap-dishes-list { grid-template-columns: 1fr; gap: .5rem; } .ap-beach-grid { grid-template-columns: 1fr; } } /* ─── MOBILE NAV: HAMBURGER + DRAWER ─────────────────────────────── */ /* Hamburger button — hidden on desktop, shown on mobile */ .nav-burger { display: none; width: 40px; height: 40px; border-radius: 99px; border: none; background: var(--ink); color: #fff; align-items: center; justify-content: center; cursor: pointer; margin-left: .5rem; transition: background .15s; } .nav-burger:hover { background: var(--green-dark); } @media (max-width: 720px) { /* Compact the desktop header on mobile. * Uses !important and higher specificity (`.nav .nav-*`) to win against * the legacy rule at line ~244 and any third-party plugin overrides. */ .nav .nav-in { height: auto !important; min-height: 64px; padding: 8px 1rem !important; } /* Altura manda, largura acompanha a proporção real do arquivo enviado. * Era 38x38 !important, que espremia o logo num quadrado. */ .nav .nav-mark { height: auto !important; width: auto !important; } .nav .nav-word { font-size: .875rem !important; } .nav .nav-lbl { font-size: .55rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } /* Hide desktop tabs, city selector chip, and the sign-out icon. All of * these live inside the drawer on mobile. */ .nav .nav-tabs { display: none !important; } .nav .nav-city { display: none !important; } /* Reveal the hamburger */ .nav .nav-burger { display: inline-flex !important; } /* Swap label variants */ .nav .nav-lbl-full { display: none !important; } .nav .nav-lbl-short { display: block !important; } } .nav-lbl-short { display: none; } /* Overlay behind the drawer */ .bcg-drawer-overlay { position: fixed; inset: 0; background: rgba(26,26,26,.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 200; opacity: 0; transition: opacity .24s ease; } .bcg-drawer-overlay.is-open { opacity: 1; } /* Drawer */ .bcg-drawer { position: fixed; top: 0; right: 0; width: 100%; max-width: 420px; height: 100vh; background: var(--cream); z-index: 201; padding: 1.25rem 1.5rem 1.75rem; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.3,1); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -8px 0 32px rgba(0,0,0,.06); } .bcg-drawer.is-open { transform: translateX(0); } /* Drawer top: logo + close */ .bcg-drawer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.125rem; border-bottom: 1px solid var(--border); } .bcg-drawer-mark { display: flex; align-items: center; gap: .75rem; } .bcg-drawer-logo { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; } .bcg-drawer-word { font-family: var(--font-d); font-size: .9375rem; font-weight: 600; line-height: 1; color: var(--ink); } .bcg-drawer-word span { color: var(--green); font-style: italic; font-weight: 500; } .bcg-drawer-sub { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; font-weight: 500; } .bcg-drawer-close { width: 36px; height: 36px; border-radius: 99px; border: 1px solid var(--border-2, rgba(26,26,26,.2)); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; } .bcg-drawer-close:hover { background: rgba(0,0,0,.04); } /* Drawer eyebrow + nav */ .bcg-drawer-eyebrow { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 1.5rem 0 .5rem; } .bcg-drawer-nav { display: flex; flex-direction: column; } .bcg-drawer-link { display: flex; align-items: center; justify-content: space-between; padding: .875rem .25rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); transition: background .12s, padding-left .12s; } .bcg-drawer-link:hover { background: rgba(245,216,0,.08); } .bcg-drawer-link.is-current { background: linear-gradient(to right, rgba(245,216,0,.12), transparent); padding-left: .875rem; margin-left: -.625rem; padding-right: .875rem; margin-right: -.625rem; border-radius: 6px; } .bcg-drawer-link-l { display: flex; align-items: center; gap: .875rem; min-width: 0; } .bcg-drawer-link-r { display: flex; align-items: center; gap: .5rem; } .bcg-drawer-link-ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; } .bcg-drawer-link-txt { font-family: var(--font-d); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1; } .bcg-drawer-link-arrow { color: var(--muted); font-size: 1rem; line-height: 1; } .bcg-drawer-link-badge { background: var(--yellow); color: var(--ink); font-size: .65rem; font-weight: 600; padding: .125rem .5rem; border-radius: 99px; min-width: 18px; text-align: center; } /* Drawer city */ .bcg-drawer-city { margin-top: 1.5rem; padding-top: 1.125rem; border-top: 1px solid var(--border); } .bcg-drawer-city-lbl { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 .625rem; } .bcg-drawer-city-row { display: flex; align-items: center; justify-content: space-between; padding: .625rem .875rem; background: #fff; border-radius: 8px; border: 1px solid var(--border); } .bcg-drawer-city-name { font-size: .8125rem; font-weight: 500; color: var(--ink); } .bcg-drawer-city-chev { color: var(--muted); font-size: .875rem; } /* Drawer footer */ .bcg-drawer-foot { margin-top: auto; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; } .bcg-drawer-signout { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: .375rem; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; transition: color .15s; } .bcg-drawer-signout:hover { color: var(--ink); } .bcg-drawer-ver { font-size: .625rem; color: var(--light, #aaa); letter-spacing: .12em; text-transform: uppercase; } /* Prevent body scroll behind the drawer */ body.bcg-menu-open { overflow: hidden; } /* The new Appendix link uses an instead of