/* Theme Name: Bar Navia Theme URI: https://restaurantetapasnavia.com Author: Jaume Aragay Author URI: https://obradordigital.com Description: Tema block (FSE) code-first del Bar Navia, Tapes & Restaurant. Cuina gallega tradicional a la Placa d'En Joanic, Gracia (Barcelona). Linia de disseny: autenticitat digna (ADR-004). PROHIBIT page-builder visual. Version: 0.8.5 Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: bar-navia Tags: full-site-editing, block-theme, restaurant, translation-ready */ /* * Aquest fitxer nomes porta la capcalera del tema (obligatoria) i estils * residuals. Tota la configuracio visual viu a theme.json (code-first). * No hi posem layout: el layout es fa amb blocs + theme.json, mai amb CSS a ma * tret de retocs puntuals que theme.json no cobreix. */ /* ========================================================================= * Capcalera negre + crema (eco del retol fisic del local). * theme.json no cobreix: forcar el color dels enllacos del nav (l'element.link * global es granate i sobre negre quedaria il-legible, ~1.6:1), l'estat actiu, * la marca SVG i el boto-telefon. Tot scoped a .bn-header. * ===================================================================== */ /* Sticky a l'EMBOLCALL del template-part (no a .bn-header): el seu pare * (.wp-site-blocks) es alt i deixa marge per quedar-se fix. Posar-lo a * .bn-header no funcionava perque el seu pare nomes feia l'alcada del header. */ header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } /* Footer ancorat a baix encara que hi hagi poc contingut (sticky footer) */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main { flex: 1 0 auto; } /* Aire de la capcalera + transicio per a l'encongiment en scroll */ .bn-header { padding-top: 1.35rem; padding-bottom: 1.35rem; transition: padding 0.25s ease; } .bn-brand__icon, .bn-brand__word { transition: height 0.25s ease; } /* En scroll (classe al via assets/js/header.js): header compacte */ body.bn-scrolled .bn-header { padding-top: 0.5rem; padding-bottom: 0.5rem; } body.bn-scrolled .bn-brand__icon { height: 2.3rem; } body.bn-scrolled .bn-brand__word { height: 1.2rem; } body.bn-scrolled .bn-brand__sub { display: none; } /* --- Marca (icona + wordmark SVG + subtitol viu) --- */ .bn-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; } .bn-brand:hover, .bn-brand:focus { text-decoration: none; } .bn-brand__icon { display: block; height: 3rem; width: auto; } .bn-brand__text { display: flex; flex-direction: column; line-height: 1; } .bn-brand__word { display: block; height: 1.55rem; width: auto; } .bn-brand__sub { margin-top: 0.3rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--crema); opacity: 0.82; } /* --- Navegacio: forcar crema (guanya a l'element.link granate global) --- */ .bn-header .wp-block-navigation a:where(:not(.wp-element-button)), .bn-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--crema); } .bn-header .wp-block-navigation a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--crema); text-decoration: underline; text-underline-offset: 0.3em; } /* Pagina actual: subratllat granate (l'accent de marca; text sempre crema) */ .bn-header .wp-block-navigation [aria-current] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--granate); text-decoration-thickness: 3px; text-underline-offset: 0.35em; } /* --- Bloc nav + CTA --- */ .bn-header__nav { gap: 1.6rem; } /* --- Boto Reservar = trucada (icona de telefon perque no enganyi) --- */ .bn-reservar { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--wp--preset--color--granate); color: var(--wp--preset--color--crema); font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.7rem 1.2rem; border-radius: 4px; text-decoration: none; transition: background-color 0.15s ease; } .bn-reservar:hover, .bn-reservar:focus { background: var(--wp--preset--color--granate-fosc); color: var(--wp--preset--color--blanc); text-decoration: none; } .bn-reservar__icon { width: 1.05em; height: 1.05em; } /* --- Overlay mobil (hamburguesa): reforc de l'actiu --- */ .wp-block-navigation__responsive-container.is-menu-open [aria-current] { border-left: 3px solid var(--wp--preset--color--granate); padding-left: 0.6rem; text-decoration: none; } /* --- screen-reader-text (text real ocult per a SEO/a11y) --- */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; word-wrap: normal !important; } /* ========================================================================= * Botons: feedback d'interaccio (hover/focus/clic). Abans els outline eren * totxos inerts: theme.json nomes dona el :hover dels botons PLENS i no arriba * a la variacio is-style-outline. Aqui: estat complet als outline + :active i * :focus-visible a tots, i la icona de telefon als "Reservar". * ===================================================================== */ /* Plens: feedback de clic + focus visible (el :hover ja ve de theme.json) */ .wp-block-button__link:active, .bn-reservar:active { transform: translateY(1px); } .wp-block-button__link:focus-visible, .bn-reservar:focus-visible { outline: 2px solid var(--wp--preset--color--crema); outline-offset: 2px; } /* Outline: de transparent a granate ple en hover/focus; mes fosc en clic */ .wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background-color: transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } .wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--granate); border-color: var(--wp--preset--color--granate); color: var(--wp--preset--color--crema); } .wp-block-button.is-style-outline > .wp-block-button__link:active { background-color: var(--wp--preset--color--granate-fosc); border-color: var(--wp--preset--color--granate-fosc); color: var(--wp--preset--color--blanc); transform: translateY(1px); } /* Icona de telefon a TOTS els botons "Reservar" (classe bn-tel), via mask * perque hereti el color del text del boto (currentColor). */ .wp-block-button.bn-tel > .wp-block-button__link::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.12em; background-color: currentColor; -webkit-mask: url("assets/images/icon-phone.svg") no-repeat center / contain; mask: url("assets/images/icon-phone.svg") no-repeat center / contain; } /* Bloc de contacte del menu mobil: ocult per defecte; es revela ancorat a baix * de l'overlay (regla al media query). */ .bn-overlay-extra { display: none; } /* Barra d'accions mobil (Llamar + Como llegar), renderitzada per wp_footer. * Oculta per defecte; nomes es mostra a <600px (regla al media query). */ .bn-actionbar { display: none; } /* --- Mobil (<600px, on el nav colapsa a hamburguesa): marca mes petita, * subtitol ocult i RESERVAR compacte (nomes la icona de telefon) perque * barra = marca + hamburguesa + truca capiguen sense desbordar. --- */ @media (max-width: 600px) { .bn-brand__icon { height: 2.1rem; } .bn-brand__word { height: 1.1rem; } .bn-brand__sub { display: none; } .bn-header__nav { gap: 0.8rem; } .bn-reservar { gap: 0; padding: 0.55rem; } .bn-reservar span { display: none; } .bn-reservar__icon { width: 1.25em; height: 1.25em; } /* Mantenir la marca visible PER DAMUNT de l'overlay obert (z 100000): sino * el menu mobil queda un buit negre. Logo a l'esquerra, X a la dreta. */ .bn-brand { position: relative; z-index: 100001; } /* Bloc de contacte ancorat a baix de l'overlay quan esta obert (nav a dalt). * :has() detecta l'estat obert del menu sense JS. */ body:has(.wp-block-navigation__responsive-container.is-menu-open) .bn-overlay-extra { display: flex; flex-direction: column; gap: 0.9rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; padding: 1.4rem 1.5rem 2rem; background: var(--wp--preset--color--negre); border-top: 1px solid rgba(247, 241, 232, 0.12); text-align: center; } /* Dins l'overlay el boto Reservar recupera el text (a la barra es nomes icona) */ .bn-overlay-extra .bn-reservar { justify-content: center; gap: 0.5rem; font-size: 0.95rem; padding: 0.95rem; } .bn-overlay-extra .bn-reservar span { display: inline; } .bn-overlay-extra__info { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--wp--preset--color--crema); opacity: 0.78; } .bn-overlay-extra__info a { color: var(--wp--preset--color--crema); text-decoration: none; } /* Barra d'accions fixa a baix (Llamar + Como llegar) */ .bn-actionbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--wp--preset--color--negre); border-top: 1px solid rgba(247, 241, 232, 0.14); padding-bottom: env(safe-area-inset-bottom, 0px); } .bn-actionbar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.22rem; padding: 0.6rem 0.4rem; color: var(--wp--preset--color--crema); text-decoration: none; font-family: var(--wp--preset--font-family--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; } .bn-actionbar__btn + .bn-actionbar__btn { border-left: 1px solid rgba(247, 241, 232, 0.12); } .bn-actionbar__btn:hover, .bn-actionbar__btn:focus { color: var(--wp--preset--color--crema); text-decoration: none; background: rgba(247, 241, 232, 0.06); } .bn-actionbar__btn svg { width: 1.4rem; height: 1.4rem; } /* La barra ja cobreix "Llamar": treure la icona de trucar del header mobil */ .bn-header__nav .bn-reservar { display: none; } /* Aire perque la barra fixa no tapi el contingut/footer */ body { padding-bottom: 4.5rem; } } /* ========================================================================= * HOME: seccions (hero ambient + estat/menu + especialidades + resenes + * com arribar + nosotros). Layout fet amb blocs; aqui nomes el que theme.json * no cobreix: full-bleed segur, la pissarra, les targetes i els retocs. * ===================================================================== */ /* Guard anti scroll-horitzontal al mobil (clip, NO hidden: no trenca el sticky * del header). Les seccions full-bleed usen calc(50% - 50vw), que amb el * scrollbar pot vessar uns px; el clip ho talla net. */ .wp-site-blocks { overflow-x: clip; } /* Full-bleed de fons (estat, resenes, nosotros) sense 100vw */ .bn-estado, .bn-resenas, .bn-nosotros { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: var(--wp--preset--spacing--20); } /* Etiqueta eyebrow (accent de marca; paleta secundaria encara aparcada) */ .bn-eyebrow { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--granate); margin: 0 0 0.5rem; } .bn-hero .bn-eyebrow { opacity: 0.92; } /* Capcalera de seccio */ .bn-section-head { max-width: 640px; margin: 0 auto var(--wp--preset--spacing--60); text-align: center; } .bn-section-head--left { margin-inline: 0; text-align: left; } .bn-section-title { font-family: var(--wp--preset--font-family--titols); font-weight: 600; line-height: 1.1; font-size: var(--wp--preset--font-size--x-large); margin: 0; } /* Ritme vertical de les seccions de contingut */ .bn-especialidades, .bn-resenas, .bn-llegar, .bn-nosotros, .bn-pissarra-wrap { padding-block: var(--wp--preset--spacing--80); } /* Padding horitzontal coherent a TOTES les seccions (sino el contingut amb * max-width toca la vora quan el viewport es mes estret = 0 marge esquerra). * Va despres de la regla full-bleed perque guanyi el seu padding-inline. */ .bn-estado, .bn-pissarra-wrap, .bn-especialidades, .bn-resenas, .bn-llegar, .bn-nosotros { padding-inline: clamp(1.25rem, 5vw, 3rem); } .bn-hero > .wp-block-cover__inner-container { padding-inline: clamp(1.25rem, 6vw, 4rem); } /* Enllacos legals del peu: presents i trobables, pero discrets. Son * d'obligat compliment, no navegacio del negoci: no han de competir amb el * menu ni amb el reclam de reserva. */ .bn-footer__legal { margin-top: 0.35rem; opacity: 0.75; } .bn-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .bn-footer__legal a:hover, .bn-footer__legal a:focus-visible { opacity: 1; text-decoration-thickness: 2px; } /* Footer: padding inline coherent (el grup nomes portava top/bottom -> el * contingut tocava la vora esquerra) */ .bn-footer { padding-inline: clamp(1.25rem, 5vw, 3rem); } /* --- HERO: degradat esquerre per llegibilitat del text sobre la foto --- */ .bn-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(19, 16, 13, 0.72) 0%, rgba(19, 16, 13, 0.32) 52%, rgba(19, 16, 13, 0) 100%); pointer-events: none; } .bn-hero > .wp-block-cover__inner-container { position: relative; z-index: 2; } .bn-hero__inner { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); } /* --- ESTAT: cinta obert/tancat en viu --- */ .bn-estado { padding-block: 0.85rem; font-family: var(--wp--preset--font-family--sans); } .bn-estado__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: var(--wp--style--global--wide-size, 1180px); margin-inline: auto; } .bn-estado p { margin: 0; } .bn-estado__state { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; } .bn-estado__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--wp--preset--color--granate); } .bn-estado__state.is-abierto .bn-estado__dot { background: #5fa56f; box-shadow: 0 0 0 4px rgba(95, 165, 111, 0.22); } .bn-estado__sub { opacity: 0.85; } .bn-estado__hours { margin-left: auto; opacity: 0.6; font-size: 0.85rem; } /* --- PISSARRA: menu del dia. Panell color pissarra PLA + fonts de marca en * blanc-guix. Res de font de guix ni marc de fusta (autenticitat digna). --- */ .bn-pissarra { max-width: 920px; margin-inline: auto; background: #20262b; color: var(--wp--preset--color--crema); border: 1px solid rgba(247, 241, 232, 0.1); border-radius: 10px; padding: clamp(1.5rem, 4vw, 2.6rem); } .bn-pissarra__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid rgba(247, 241, 232, 0.14); padding-bottom: 1rem; margin-bottom: 1.4rem; } .bn-pissarra__title { font-family: var(--wp--preset--font-family--titols); color: var(--wp--preset--color--crema); font-size: var(--wp--preset--font-size--x-large); font-weight: 600; margin: 0; } .bn-pissarra__fresh { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9fc3a8; } .bn-pissarra__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.6rem; } .bn-pissarra__col h3 { font-family: var(--wp--preset--font-family--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; /* color explicit: sense ell heretaria el heading negre del theme.json i * quedaria invisible sobre la pissarra fosca */ color: var(--wp--preset--color--crema); opacity: 0.6; margin: 0 0 0.6rem; } .bn-pissarra__col ul { list-style: none; margin: 0; padding: 0; } .bn-pissarra__col li { font-size: 1.12rem; line-height: 1.4; padding: 0.22rem 0; } .bn-pissarra__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px dashed rgba(247, 241, 232, 0.2); margin-top: 1.5rem; padding-top: 1.1rem; } .bn-pissarra__price { font-family: var(--wp--preset--font-family--titols); font-size: var(--wp--preset--font-size--large); } .bn-pissarra__note { opacity: 0.6; font-size: 0.9rem; } .bn-pissarra__cooking { font-size: var(--wp--preset--font-size--large); line-height: 1.5; margin: 0; } .bn-pissarra__qr { margin: 1.4rem 0 0; font-size: 0.85rem; opacity: 0.6; } .bn-pissarra a { color: var(--wp--preset--color--crema); } /* --- ESPECIALIDADES: targetes pulpo/chuleton --- */ .bn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); max-width: 920px; margin-inline: auto; } .bn-card { background: var(--wp--preset--color--blanc); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(19, 16, 13, 0.08); } .bn-card__media { aspect-ratio: 1 / 1; } .bn-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bn-card__body { padding: 1.2rem 1.3rem 1.5rem; } .bn-card__title { font-family: var(--wp--preset--font-family--titols); font-size: var(--wp--preset--font-size--large); margin: 0 0 0.4rem; } .bn-card__text { margin: 0; color: #3a342c; } /* --- RESENAS --- */ .bn-resenas { background: #f0e7d9; text-align: center; } .bn-resenas__inner { max-width: 600px; margin-inline: auto; } .bn-resenas__score { display: flex; align-items: baseline; justify-content: center; gap: 0.7rem; margin-bottom: 0.4rem; } .bn-resenas__num { font-family: var(--wp--preset--font-family--titols); font-size: 3rem; line-height: 1; } .bn-resenas__stars { font-size: 1.5rem; color: #d9a400; letter-spacing: 0.05em; } .bn-resenas__star-half { opacity: 0.4; } .bn-resenas__count { font-weight: 700; margin: 0 0 0.6rem; } .bn-resenas__text { color: #3a342c; margin: 0 0 1.4rem; } /* --- COMO LLEGAR --- */ .bn-llegar__inner { max-width: var(--wp--style--global--wide-size, 1180px); margin-inline: auto; } .bn-llegar__data { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; margin: var(--wp--preset--spacing--40) 0; } .bn-llegar dt { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.3rem; } .bn-llegar dd { margin: 0; font-size: 1.1rem; line-height: 1.5; } .bn-llegar dd a { color: var(--wp--preset--color--granate); } .bn-llegar__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; } /* --- NOSOTROS --- */ .bn-nosotros { background: var(--wp--preset--color--negre); color: var(--wp--preset--color--crema); text-align: center; } .bn-nosotros__inner { max-width: 700px; margin-inline: auto; } .bn-nosotros .bn-section-title, .bn-nosotros .bn-eyebrow { color: var(--wp--preset--color--crema); } .bn-nosotros__text { font-size: var(--wp--preset--font-size--large); line-height: 1.6; opacity: 0.92; margin: 0.6rem 0 1.6rem; } /* --- Botons manuals (dins de blocs wp:html, on no arriben els estils del * bloc-boto) --- */ .bn-btn-fill, .bn-btn-outline { display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--sans); font-weight: 700; padding: 0.8rem 1.6rem; border-radius: 4px; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bn-btn-fill { background: var(--wp--preset--color--granate); color: var(--wp--preset--color--crema); } .bn-btn-fill:hover, .bn-btn-fill:focus-visible { background: var(--wp--preset--color--granate-fosc); color: var(--wp--preset--color--blanc); } .bn-btn-outline { border: 2px solid var(--wp--preset--color--granate); color: var(--wp--preset--color--granate); } .bn-btn-outline:hover, .bn-btn-outline:focus-visible { background: var(--wp--preset--color--granate); color: var(--wp--preset--color--crema); } .bn-btn-outline--dark { border-color: var(--wp--preset--color--crema); color: var(--wp--preset--color--crema); } .bn-btn-outline--dark:hover, .bn-btn-outline--dark:focus-visible { background: var(--wp--preset--color--crema); color: var(--wp--preset--color--negre); } .bn-center { text-align: center; margin-top: var(--wp--preset--spacing--40); } /* ========================================================================= * CARTA: seccions amb plats i preus. Lletra normal, llegible (req. Jaume). * ===================================================================== */ .bn-carta-sec { max-width: 720px; margin: 0 auto var(--wp--preset--spacing--60); } .bn-carta-sec__title { font-family: var(--wp--preset--font-family--titols); font-size: var(--wp--preset--font-size--x-large); color: var(--wp--preset--color--granate); border-bottom: 2px solid var(--wp--preset--color--granate); padding-bottom: 0.3rem; margin: 0 0 1rem; } .bn-carta-list { list-style: none; margin: 0; padding: 0; } /* Criteri unic: nom + preu SEMPRE a la primera linia (preu a la dreta), i la * descripcio SEMPRE a sota, a tot ample. Amb grid, independent de la llargada * de la desc (abans amb flex saltava o no segons el contingut = inconsistent). */ .bn-carta-item { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: 0.15rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px dotted rgba(19, 16, 13, 0.18); } .bn-carta-item__name { grid-column: 1; grid-row: 1; font-weight: 600; } .bn-carta-item__price { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wp--preset--color--granate); } .bn-carta-item__desc { grid-column: 1 / -1; grid-row: 2; color: #6b6258; font-size: 0.92rem; } .bn-carta-aler { font-size: 0.9rem; font-style: italic; color: #6b6258; } /* --- Mobil: apilar i evitar desbordaments --- */ @media (max-width: 600px) { .bn-estado__row { flex-direction: column; gap: 0.3rem; text-align: center; } .bn-estado__hours { margin-left: 0; } .bn-pissarra__head, .bn-pissarra__foot { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .bn-llegar__cta .bn-btn-fill, .bn-llegar__cta .bn-btn-outline { flex: 1 1 100%; } }