/** * Borda Xixerella — la portada narrativa. * * Aquesta fulla només es carrega a la portada. La resta del web segueix amb * style.css i no s'assabenta que això existeix. * * El disseny és el de la maqueta «Borda Xixerella — una historia»: sis * capítols, blau nit per a tot el que és fosc i el negre reservat NOMÉS al * capítol II, el foc. Si algun dia algú posa el negre en un altre lloc, * el capítol II deixa de ser especial i el web perd el seu únic cop d'efecte. * * @package BordaXixerella */ /* ========================================================================== Variables pròpies de la portada ========================================================================== */ /* * Les variables viuen a .bx-hist i NO a .bx-portada (la classe del ). * La diferència importa: .bx-hist és el contenidor que la portada pinta * sempre, mentre que la classe del cos la posa un filtre que qualsevol plugin * de memòria cau o tema fill pot arribar a trepitjar. Quan això passava, --gut * es quedava sense valor, el «width: 100% - var(--gut)*2» del contenidor no * calculava i tot el text s'enganxava a la vora esquerra de la pantalla. * * Les que fan falta fora de .bx-hist (la capçalera fixa i el rail, que són * germans seus i no fills) es declaren també a :root. */ :root { --nit: #0F1C2A; --nit-2: #16283C; --nit-rgb: 15, 28, 42; --negre: #08080A; --negre-rgb: 8, 8, 10; --gut: clamp(20px, 5vw, 64px); --ease: cubic-bezier(.16, 1, .3, 1); } .bx-hist { --nit: #0F1C2A; --nit-2: #16283C; --nit-rgb: 15, 28, 42; --negre: #08080A; --negre-rgb: 8, 8, 10; --gut: clamp(20px, 5vw, 64px); --ease: cubic-bezier(.16, 1, .3, 1); } .bx-portada .bx-principal { overflow-x: clip; } /* La portada no fa servir el separador de la capçalera: el hero va a sang. */ .bx-portada .bx-capcalera-separador { display: none; } .bx-hist { position: relative; background: var(--bx-crema); color: var(--bx-tinta); font-size: 17px; line-height: 1.66; letter-spacing: -.006em; } .bx-hist .wrap { width: min(1280px, 100% - var(--gut) * 2); margin-inline: auto; } .bx-hist .narrow { max-width: 62ch; } .bx-hist section { position: relative; } .bx-hist .pad { padding: clamp(88px, 13vh, 168px) 0; } /* ═══════════════════════════════════════════════════════════════════ EL TERRACOTA CANVIA DE TO SEGONS EL QUE TÉ A SOTA ═══════════════════════════════════════════════════════════════════ És la regla del disseny des del primer dia: terracota #B2502B sobre crema, #E09A6E sobre fosc. La raó és de números, no de gust: #B2502B sobre blau nit .... 3.34 (mínim: 4.5) #E09A6E sobre blau nit .... 7.39 El terracota fosc sobre el blau nit no arriba. Es veu que hi ha alguna cosa escrita, i qui té la vista una mica cansada no la llegeix. Fins ara això s'anava dient regla a regla, zona per zona: el hero, la brasa, el peu. I cada zona nova que s'afegia se n'oblidava. En l'última revisió faltaven la capçalera fixa, els enllaços del peu, els epígrafs dels capítols i el «Es pesa a la sala» del capítol III. Aquí es diu una vegada: DINS D'UNA ZONA FOSCA, --bx-terracota-text JA ÉS el to clar. Tot el text que hi ha a dins canvia sol, també el que s'escrigui d'aquí a dos anys. Una regla que no s'ha de recordar és una regla que no s'oblida. El que NO canvia és --bx-terracota, que és el dels fons: el botó de reservar ha de ser del mateix taronja a la portada i al peu. Vegeu el comentari dels dos tokens a style.css: aquesta distinció va costar un arreglo que en va trencar un altre. */ .bx-hist .dark, .bx-hist .foc, .bx-hist .book, .bx-hero, .bx-brasa, .bx-peu, .bx-portada .bx-capcalera { --bx-terracota-text: var(--bx-terracota-clar); } .bx-hist .dark { background: var(--nit); color: var(--bx-crema); } .bx-hist .ivory { background: var(--bx-marfil); } .bx-hist h2, .bx-hist h3 { font-family: var(--bx-serif); font-weight: 400; letter-spacing: -.022em; line-height: 1.03; margin: 0; } .bx-hist h2 { font-size: clamp(38px, 5.6vw, 80px); font-weight: 300; letter-spacing: -.03em; line-height: 1.02; } .bx-hist h3 { font-size: clamp(24px, 2.6vw, 34px); } .bx-hist .dark h2, .bx-hist .dark h3 { color: var(--bx-crema); } .bx-hist p { margin: 0 0 1.1em; } .bx-hist img { display: block; max-width: 100%; } /* Antetítol amb el filet davant. */ .bx-hist .eyebrow { font-family: var(--bx-sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var( --bx-terracota-text ); display: flex; align-items: center; gap: 12px; margin: 0 0 26px; } .bx-hist .eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none; } .bx-hist .dark .eyebrow, .bx-hist .foc .eyebrow, .bx-hist .book .eyebrow { color: var(--bx-terracota-clar); } .bx-hist .lead { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.6; color: var(--bx-tinta-suau); } .bx-hist .dark .lead, .bx-hist .foc .lead, .bx-hist .book .lead { color: rgba(247, 242, 233, .72); } /* El número del capítol, gegant i esvaït al fons. */ .bx-hist .chapno { font-family: var(--bx-serif); font-size: clamp(64px, 9vw, 132px); line-height: .8; color: var( --bx-terracota-text ); opacity: .14; font-weight: 300; letter-spacing: -.04em; position: absolute; top: clamp(74px, 9vh, 116px); right: var(--gut); pointer-events: none; user-select: none; z-index: 1; } .bx-hist .dark .chapno, .bx-hist .foc .chapno, .bx-hist .book .chapno { color: var(--bx-terracota-clar); opacity: .16; } /* ========================================================================== Revelats ========================================================================== */ .bx-hist .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .bx-hist .rv.vis { opacity: 1; transform: none; } .bx-hist .msk { display: block; overflow: hidden; } .bx-hist .msk > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease); } .bx-hist .msk.vis > span { transform: none; } /* Sense JavaScript no es queda res invisible. Això no és opcional. */ .no-js .bx-hist .rv, .no-js .bx-hist .msk > span { opacity: 1; transform: none; } /* ========================================================================== Capçalera en mode portada + rail de capítols ========================================================================== */ .bx-portada .bx-capcalera { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(15, 28, 42, 0); backdrop-filter: blur(0); border-bottom: 1px solid transparent; transform: translateY(-102%); transition: transform .7s var(--ease), background .5s, backdrop-filter .5s, border-color .5s; } .bx-portada .bx-capcalera.bx-capcalera--fixa { transform: none; background: rgba(15, 28, 42, .86); backdrop-filter: blur(14px) saturate(1.2); border-color: rgba(247, 242, 233, .1); } /* * Sobre el blau nit, tot el que era tinta ha de passar a crema. El botó del * menú inclòs: amb les tres ratlles en tinta sobre la capçalera fosca es * queda en 1,4:1 i pràcticament no es veu. És el botó que obre el menú en * mòbil, o sigui l'única navegació que hi ha: no pot ser el pitjor contrast * de la pàgina. */ .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-capcalera__nom, .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-menu a, .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-navegacio a, .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-capcalera__telefon { color: var(--bx-crema); } /* I el lema, que es terracota i no tinta: per aixo se'ns havia escapat d'aquesta llista. Sobre la capcalera fosca es quedava en 3.06. */ .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-capcalera__lema { color: var(--bx-terracota-clar); } .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-hamburguesa__ratlla { background: var(--bx-crema); } /* * El desplegable del menú en mòbil. La capçalera és translúcida, i sense un * fons propi el menú obert es llegiria per sobre de les fotos que passen per * sota. Amb fons propi i el filet aclarit, es llegeix sempre. */ @media (max-width: 900px) { .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-capcalera__dreta { border-top-color: rgba(247, 242, 233, .18); } .bx-portada .bx-capcalera.bx-capcalera--fixa .bx-capcalera__dreta.is-obert { background: rgba(var(--nit-rgb), .96); } } #bx-rail { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; gap: 16px; opacity: 0; transition: opacity .6s; pointer-events: none; } #bx-rail.on { opacity: 1; pointer-events: auto; } #bx-rail a { position: relative; display: flex; align-items: center; gap: 11px; text-decoration: none; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--bx-tinta-suau); opacity: .68; transition: opacity .4s, color .4s; } #bx-rail a i { display: block; width: 16px; height: 1px; background: currentColor; transition: width .5s var(--ease); } #bx-rail a span { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap; opacity: 0; pointer-events: none; background: rgba(15, 28, 42, .92); color: var(--bx-crema); padding: 7px 11px; border-radius: 2px; transition: opacity .35s, transform .35s var(--ease); } #bx-rail a:hover, #bx-rail a.act { opacity: 1; color: var( --bx-terracota-text ); } #bx-rail a.act i { width: 34px; } #bx-rail a:hover span, #bx-rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); } #bx-rail.inv a { color: rgba(247, 242, 233, .75); } #bx-rail.inv a:hover, #bx-rail.inv a.act { color: var(--bx-terracota-clar); } @media (max-width: 1279px) { #bx-rail { display: none; } } /* ========================================================================== Portada · el hero ========================================================================== */ .bx-hist .hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--nit); } .bx-hist .hero .bgw { position: absolute; inset: -8% 0; will-change: transform; } .bx-hist .hero .bgw img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; transform: scale(1.14); animation: bxHeroZoom 16s var(--ease) forwards; filter: saturate(.94) contrast(1.04); } @keyframes bxHeroZoom { to { transform: scale(1); } } .bx-hist .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* * La banda clara del mig estava en .1 i deixava passar la façana * il·luminada per darrere del titular: una desena part del bloc de * «Xixerella» es quedava en 2,2:1. Pujant-la a .28 la foto continua * respirant i el text es llegeix sempre. */ background: linear-gradient(to bottom, rgba(var(--nit-rgb), .72) 0%, rgba(var(--nit-rgb), .28) 30%, rgba(var(--nit-rgb), .5) 56%, rgba(var(--nit-rgb), .88) 78%, rgba(var(--nit-rgb), .96) 100%), radial-gradient(120% 80% at 50% 100%, rgba(178, 80, 43, .22), transparent 60%); } .bx-hist .hero .in { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gut) clamp(64px, 10vh, 120px); } .bx-hist .hero h1 { font-family: var(--bx-serif); font-size: clamp(58px, 12.4vw, 190px); color: var(--bx-crema); font-weight: 300; letter-spacing: -.035em; line-height: .88; margin: 0 0 min(4vh, 30px); } .bx-hist .hero .kick { font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--bx-terracota-clar); margin: 0 0 min(3vh, 22px); font-weight: 600; } .bx-hist .hero .sub { font-family: var(--bx-serif); font-size: clamp(20px, 2.5vw, 32px); line-height: 1.32; color: rgba(247, 242, 233, .9); max-width: 20ch; font-weight: 300; } .bx-hist .hero .meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: min(5vh, 40px); border-top: 1px solid rgba(247, 242, 233, .18); padding-top: 20px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 242, 233, .62); } .bx-hist .hero .meta b { color: var(--bx-terracota-clar); font-weight: 600; } .bx-hist .scroller { position: absolute; bottom: 26px; right: var(--gut); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(247, 242, 233, .5); } .bx-hist .scroller i { display: block; width: 1px; height: 56px; background: linear-gradient(rgba(247, 242, 233, .05), rgba(247, 242, 233, .55)); position: relative; overflow: hidden; } .bx-hist .scroller i::after { content: ""; position: absolute; top: -60%; left: 0; width: 1px; height: 60%; background: var(--bx-terracota-clar); animation: bxDrop 2.4s infinite var(--ease); } @keyframes bxDrop { 0% { top: -60%; } 70%, 100% { top: 110%; } } @media (max-width: 640px) { .bx-hist .scroller { display: none; } } /* ========================================================================== Capítol I · la casa ========================================================================== */ .bx-hist .casa-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(34px, 5vw, 88px); align-items: center; } .bx-hist .casa-txt h2 { margin: 0 0 28px; } .bx-hist .casa-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bx-hist .casa-pics figure { margin: 0; overflow: hidden; position: relative; background: var(--bx-filet); } .bx-hist .casa-pics figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .bx-hist .casa-pics figure:not(:first-child) { aspect-ratio: 4 / 5; } .bx-hist .casa-pics img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease), filter 1.3s var(--ease); } .bx-hist .casa-pics figure:hover img { transform: scale(1.05); filter: brightness(1.05); } /* * El peu de foto. El degradat arriba fins a .96 i no fins a .86, i comença * abans: mesurat sobre les fotos de veritat, amb el valor antic el text de * 10,5 px es quedava en 2,86:1 sobre la finestra nevada i sobre el finestral * del menjador. El mínim de la WCAG AA per a text petit és 4,5:1. * * L'ombra és la xarxa de seguretat: el degradat depèn de com sigui la foto, * l'ombra no. Val la pena encara que gairebé no es vegi. */ .bx-hist .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 52px 16px 14px; /* * El terra fosc arriba al 70 % i ja no al 100 %: així la línia de text * queda sencera dins de la zona opaca en comptes de a mig degradat. Amb el * valor antic, «La taula» es quedava en 2,35:1 sobre una taula parada i ben * il·luminada. */ background: linear-gradient( transparent, rgba(var(--nit-rgb), .5) 34%, rgba(var(--nit-rgb), .97) 70%, rgba(var(--nit-rgb), .97) ); text-shadow: 0 1px 3px rgba(var(--nit-rgb), .9); color: var(--bx-crema); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; /* * En repòs anava a opacity .85, i això sol es menjava un 15 % del contrast * d'un text de 10,5 px. El moviment d'entrada es fa amb el translate, que * no toca la llegibilitat. */ transform: translateY(6px); transition: transform .6s var(--ease); } .bx-hist figure:hover .cap { transform: none; } .bx-hist .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bx-filet); margin-top: 38px; border: 1px solid var(--bx-filet); } .bx-hist .facts > div { background: var(--bx-crema); padding: 20px 18px; } .bx-hist .facts dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var( --bx-terracota-text ); font-weight: 600; margin-bottom: 7px; } .bx-hist .facts dd { margin: 0; font-family: var(--bx-serif); font-size: 22px; line-height: 1.2; } @media (max-width: 900px) { .bx-hist .casa-grid { grid-template-columns: 1fr; } } /* ========================================================================== Capítol II · el foc — L'ÚNIC LLOC ON VIU EL NEGRE ========================================================================== */ .bx-hist .foc { position: relative; min-height: 105svh; display: flex; align-items: center; overflow: hidden; background: var(--negre); color: var(--bx-crema); --nit-rgb: var(--negre-rgb); } .bx-hist .foc .bgw { position: absolute; inset: -14% 0; will-change: transform; } .bx-hist .foc .bgw img, .bx-hist .foc .bgw video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.06); } .bx-hist .foc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(var(--negre-rgb), .95) 0%, rgba(var(--negre-rgb), .9) 34%, rgba(var(--negre-rgb), .55) 62%, rgba(var(--negre-rgb), .22) 100%), linear-gradient(to bottom, rgba(var(--negre-rgb), .72), transparent 24%, transparent 66%, rgba(var(--negre-rgb), .9)); } .bx-hist .foc .in { position: relative; z-index: 2; width: 100%; } .bx-hist .quote { font-family: var(--bx-serif); font-size: clamp(30px, 4.6vw, 64px); line-height: 1.12; font-weight: 300; color: var(--bx-crema); max-width: 17ch; letter-spacing: -.028em; margin: 0; } .bx-hist .quote em { font-style: italic; color: var(--bx-terracota-clar); } .bx-hist .qsrc { margin-top: 26px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 242, 233, .5); } @media (max-width: 900px) { .bx-hist .foc::after { background: linear-gradient(to bottom, rgba(var(--negre-rgb), .9) 0%, rgba(var(--negre-rgb), .86) 40%, rgba(var(--negre-rgb), .9) 100%); } .bx-hist .foc { min-height: auto; padding: clamp(96px, 14vh, 150px) 0; } } /* ========================================================================== Capítol III · el producte (scroll horitzontal) ========================================================================== */ .bx-hist .pin { position: relative; background: var(--nit-2); } .bx-hist .pin .stick { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 64px; } .bx-hist .pin .head { padding: 0 var(--gut); margin-bottom: clamp(22px, 3.4vh, 40px); max-width: min(760px, 88vw); } .bx-hist .pin .head h2 { font-size: clamp(32px, 4.2vw, 58px); } .bx-hist .pin .head .lead { font-size: clamp(16px, 1.25vw, 19px); } .bx-hist .track { display: flex; gap: clamp(16px, 2vw, 30px); padding-inline: var(--gut); will-change: transform; } .bx-hist .card { flex: 0 0 clamp(255px, 26vw, 360px); background: var(--nit); border: 1px solid rgba(247, 242, 233, .1); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .5s; } .bx-hist .card:hover, .bx-hist .card:focus-visible { border-color: rgba(224, 154, 110, .4); } .bx-hist .card .ph { aspect-ratio: 4 / 3; overflow: hidden; background: #000; position: relative; } .bx-hist .card .ph img, .bx-hist .card .ph video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .bx-hist .card:hover .ph img { transform: scale(1.06); } .bx-hist .card .bd { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; } .bx-hist .card h3 { font-size: clamp(21px, 2vw, 27px); margin: 0 0 8px; color: var(--bx-crema); } .bx-hist .card p { font-size: 14px; line-height: 1.6; color: rgba(247, 242, 233, .6); margin: 0 0 18px; } /* La franja de sota la targeta. Aquí NO hi va cap preu: els preus viuen només a la carta virtual, que és l'únic lloc que es manté al dia. */ .bx-hist .card .pr { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(247, 242, 233, .12); padding-top: 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 242, 233, .6); } .bx-hist .card .pr b { font-family: var(--bx-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--bx-terracota-clar); } .bx-hist .hint { display: flex; align-items: center; gap: 12px; padding: 0 var(--gut); margin-top: clamp(20px, 3.4vh, 38px); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 242, 233, .6); } .bx-hist .hint i { display: block; width: 56px; height: 1px; background: rgba(247, 242, 233, .24); position: relative; overflow: hidden; } .bx-hist .hint i::after { content: ""; position: absolute; inset: 0; width: 24px; background: var(--bx-terracota-clar); animation: bxSlide 2.6s infinite var(--ease); } @keyframes bxSlide { 0% { transform: translateX(-26px); } 70%, 100% { transform: translateX(60px); } } .bx-hist .hint .m { display: none; } @media (max-width: 759px) { .bx-hist .hint .d { display: none; } .bx-hist .hint .m { display: inline; } .bx-hist .pin .stick { position: static; height: auto; overflow: visible; padding: clamp(80px, 11vh, 120px) 0 0; } .bx-hist .track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } .bx-hist .track::-webkit-scrollbar { display: none; } .bx-hist .card { flex-basis: 76vw; scroll-snap-align: center; } .bx-hist .pin .stick .chapno { top: clamp(24px, 4vh, 40px); } } .bx-hist .warn { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 16px 18px; border-left: 2px solid var(--bx-terracota-clar); background: rgba(224, 154, 110, .07); font-size: 14px; line-height: 1.55; color: rgba(247, 242, 233, .78); max-width: 56ch; } .bx-hist .warn b { color: var(--bx-terracota-clar); font-weight: 600; flex: none; } /* ========================================================================== Capítol IV · la carta — la reixa mixta de vídeo i foto ========================================================================== */ .bx-hist .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bx-filet); border-block: 1px solid var(--bx-filet); margin: 0 0 clamp(52px, 7vh, 86px); } .bx-hist .nums > div { background: var(--bx-crema); padding: clamp(24px, 3.4vw, 40px) 20px; text-align: center; } .bx-hist .nums b { display: block; font-family: var(--bx-serif); font-size: clamp(40px, 5vw, 72px); font-weight: 300; line-height: 1; color: var( --bx-terracota-text ); letter-spacing: -.03em; } .bx-hist .nums span { display: block; margin-top: 12px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bx-tinta-suau); } @media (max-width: 760px) { .bx-hist .nums { grid-template-columns: repeat(2, 1fr); } } .bx-hist .plats { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 20px); } .bx-hist .plat { position: relative; overflow: hidden; background: var(--bx-filet); text-decoration: none; color: inherit; display: block; } .bx-hist .plat img, .bx-hist .plat video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 1.4s var(--ease); } .bx-hist .plat:hover img, .bx-hist .plat:focus-visible img { transform: scale(1.055); filter: brightness(1.04); } /* El vídeo viu sota el pòster i només es veu quan de debò pot reproduir-se. Si la xarxa falla o el navegador estalvia dades, es queda la foto: mai un rectangle negre al mig de la carta. */ .bx-hist .plat video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); z-index: 1; } .bx-hist .plat video.bx-viu { opacity: 1; } /* * El vel del mosaic. Mesurat sobre les fotos reals, la línia petita en * terracota clar es quedava entre 3,4 i 4,1:1 sobre els plats més il·luminats * (postres i arrossos, que són els que tenen més blanc). Pujant el terra del * degradat a .95 passa de 4,5:1 amb qualsevol foto de la casa. * * Això no és un caprici: aquesta línia és la que diu «Avui esgotat» i «Es pesa * a la sala». Si no es llegeix, la persona s'assabenta a taula. */ .bx-hist .plat .ov { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; background: linear-gradient( transparent, rgba(var(--nit-rgb), .42) 30%, rgba(var(--nit-rgb), .95) ); text-shadow: 0 1px 3px rgba(var(--nit-rgb), .8); color: var(--bx-crema); z-index: 2; } .bx-hist .plat .nm { font-family: var(--bx-serif); font-size: clamp(18px, 1.7vw, 25px); line-height: 1.16; display: block; } .bx-hist .plat .pz { display: block; margin-top: 7px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--bx-terracota-clar); font-weight: 600; } /* L'etiqueta de vídeo. Discreta, a dalt a la dreta. */ .bx-hist .plat .tag { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 2px; background: rgba(var(--nit-rgb), .72); backdrop-filter: blur(6px); color: rgba(247, 242, 233, .88); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .bx-hist .plat .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bx-terracota-clar); flex: none; } /* «Ambient»: el vídeo és de la casa però no és aquest plat. Ho diu el motor (bx_video_ambient) i el frontal només l'obeeix. Cap plat es bateja sol. */ .bx-hist .plat .tag--ambient::before { background: rgba(247, 242, 233, .55); } .bx-hist .s6 { grid-column: span 6; aspect-ratio: 3 / 2; } .bx-hist .s4 { grid-column: span 4; aspect-ratio: 4 / 5; } .bx-hist .s3 { grid-column: span 3; aspect-ratio: 1 / 1; } .bx-hist .s8 { grid-column: span 8; aspect-ratio: 16 / 9; } @media (max-width: 900px) { .bx-hist .s6, .bx-hist .s8 { grid-column: span 12; aspect-ratio: 3 / 2; } .bx-hist .s4, .bx-hist .s3 { grid-column: span 6; aspect-ratio: 4 / 5; } } .bx-hist .foot-note { margin-top: 30px; font-size: 13px; color: var(--bx-tinta-suau); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; } /* Quan encara no hi ha cap plat destacat, no s'ensenya una reixa buida. */ .bx-hist .buit { border: 1px dashed var(--bx-filet); padding: clamp(28px, 4vw, 48px); text-align: center; color: var(--bx-tinta-suau); font-size: 15px; } /* ========================================================================== Capítol V · la sala ========================================================================== */ .bx-hist .sala { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 20px); align-items: end; } .bx-hist .sala figure { margin: 0; position: relative; overflow: hidden; background: var(--bx-filet); } .bx-hist .sala img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .bx-hist .sala figure:hover img { transform: scale(1.05); } .bx-hist .sala .t { grid-column: span 5; aspect-ratio: 3 / 4; } .bx-hist .sala .u { grid-column: span 7; aspect-ratio: 16 / 11; } .bx-hist .sala .v { grid-column: span 4; aspect-ratio: 1 / 1; } .bx-hist .sala .w { grid-column: span 8; aspect-ratio: 16 / 9; } @media (max-width: 900px) { .bx-hist .sala .t, .bx-hist .sala .u, .bx-hist .sala .v, .bx-hist .sala .w { grid-column: span 12; aspect-ratio: 4 / 3; } } .bx-hist .zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bx-filet); border: 1px solid var(--bx-filet); margin-top: clamp(40px, 6vh, 70px); } .bx-hist .zones > div { background: var(--bx-marfil); padding: clamp(22px, 2.6vw, 34px); } .bx-hist .zones h3 { font-size: clamp(20px, 1.9vw, 26px); margin: 0 0 10px; } .bx-hist .zones p { font-size: 14.5px; color: var(--bx-tinta-suau); margin: 0; } @media (max-width: 760px) { .bx-hist .zones { grid-template-columns: 1fr; } } /* ========================================================================== Capítol VI · la taula ========================================================================== */ .bx-hist .book { position: relative; overflow: hidden; background: var(--nit); color: var(--bx-crema); } .bx-hist .book .bgw { position: absolute; inset: -10% 0; will-change: transform; } .bx-hist .book .bgw img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); } .bx-hist .book::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--nit-rgb), .93), rgba(var(--nit-rgb), .84) 50%, rgba(var(--nit-rgb), .96)); } .bx-hist .book .in { position: relative; z-index: 2; } .bx-hist .book h2 { color: var(--bx-crema); } .bx-hist .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(247, 242, 233, .14); border: 1px solid rgba(247, 242, 233, .14); margin-top: clamp(38px, 5vh, 60px); } .bx-hist .steps > div { background: rgba(var(--nit-rgb), .88); padding: clamp(24px, 3vw, 36px); backdrop-filter: blur(10px); } .bx-hist .steps b { display: block; font-family: var(--bx-serif); font-size: 15px; letter-spacing: .24em; color: var(--bx-terracota-clar); margin-bottom: 16px; } .bx-hist .steps h3 { font-size: clamp(21px, 2vw, 28px); margin: 0 0 9px; color: var(--bx-crema); } .bx-hist .steps p { font-size: 14px; color: rgba(247, 242, 233, .6); margin: 0; } @media (max-width: 760px) { .bx-hist .steps { grid-template-columns: 1fr; } } .bx-hist .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: clamp(34px, 4.6vh, 52px); } .bx-hist .hours { margin-top: clamp(34px, 4.6vh, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px 34px; border-top: 1px solid rgba(247, 242, 233, .14); padding-top: 26px; } .bx-hist .hours dt { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bx-terracota-clar); font-weight: 600; margin-bottom: 6px; } .bx-hist .hours dd { margin: 0; font-size: 15px; color: rgba(247, 242, 233, .82); } .bx-hist .hours .tancat dd { color: var(--bx-terracota-clar); } /* Botons de la portada, sobre fosc. */ .bx-hist .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bx-sans); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 13px 22px; border-radius: 2px; background: var(--bx-terracota); color: #fff; border: 1px solid var(--bx-terracota); transition: background .35s, color .35s, transform .35s var(--ease); white-space: nowrap; } .bx-hist .btn:hover, .bx-hist .btn:focus-visible { background: var(--bx-terracota-fosc); border-color: var(--bx-terracota-fosc); transform: translateY(-2px); } .bx-hist .btn.ghost { background: transparent; color: var(--bx-crema); border-color: rgba(247, 242, 233, .32); } .bx-hist .btn.ghost:hover, .bx-hist .btn.ghost:focus-visible { background: var(--bx-crema); color: var(--nit); border-color: var(--bx-crema); } .bx-hist .btn svg { width: 13px; height: 13px; flex: none; } /* ========================================================================== La llum del cursor sobre les seccions fosques ========================================================================== */ #bx-glow { position: fixed; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(224, 154, 110, .09), transparent 62%); transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s; mix-blend-mode: screen; } @media (hover: none) { #bx-glow { display: none; } } /* ========================================================================== Qui no vol moviment, no en té ========================================================================== */ @media (prefers-reduced-motion: reduce) { .bx-hist *, #bx-rail * { animation: none !important; transition-duration: .01ms !important; } .bx-hist .rv { opacity: 1; transform: none; } .bx-hist .msk > span { transform: none; } .bx-hist .hero .bgw img { transform: none; } .bx-portada .bx-capcalera { transform: none; } } /* Impressió: el web es llegeix en paper sense fons foscos que buiden el tòner. */ @media print { #bx-rail, #bx-glow, .bx-hist .scroller, .bx-hist .hint, .bx-hist .bgw { display: none !important; } .bx-hist .dark, .bx-hist .foc, .bx-hist .book { background: #fff !important; color: #000 !important; } } /* ========================================================================== La pàgina «Qui som» ========================================================================== Fa servir el mateix llenguatge que la portada —el mateix blau nit, els mateixos capítols numerats, els mateixos revelats— però no la repeteix. Qui ve d'aquí ja ha vist la portada. ========================================================================== */ .bx-qs .qs-obertura { position: relative; min-height: 62svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--nit); color: var(--bx-crema); padding: clamp(96px, 16vh, 190px) 0 clamp(48px, 8vh, 88px); } .bx-qs .qs-obertura .bgw { position: absolute; inset: -10% 0; will-change: transform; } .bx-qs .qs-obertura .bgw img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94); } .bx-qs .qs-obertura::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(var(--nit-rgb), .82) 0%, rgba(var(--nit-rgb), .5) 40%, rgba(var(--nit-rgb), .92) 100% ); } .bx-qs .qs-obertura .in { position: relative; z-index: 2; width: 100%; } .bx-qs .qs-obertura .eyebrow { color: var(--bx-terracota-clar); } .bx-qs .qs-obertura h1 { font-family: var(--bx-serif); font-size: clamp(38px, 6.4vw, 88px); font-weight: 300; letter-spacing: -.03em; line-height: 1.02; color: var(--bx-crema); margin: 0; } .bx-qs .qs-entrada { max-width: 46ch; margin-top: 26px; color: rgba(247, 242, 233, .8); } /* ── Els blocs partits ─────────────────────────────────────────────── */ .bx-qs .qs-partit { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(34px, 5vw, 84px); align-items: center; } .bx-qs .qs-partit--invers { grid-template-columns: .82fr 1fr; } .bx-qs .qs-figura { margin: 0; position: relative; overflow: hidden; background: var(--bx-filet); } .bx-qs .qs-figura img { width: 100%; height: auto; display: block; transition: transform 1.3s var(--ease); } .bx-qs .qs-figura:hover img { transform: scale(1.04); } @media (max-width: 900px) { .bx-qs .qs-partit, .bx-qs .qs-partit--invers { grid-template-columns: 1fr; } /* En mòbil la foto va sempre a sota del text, també al bloc invers. */ .bx-qs .qs-partit--invers .qs-figura { order: 2; } } /* ── Les persones ──────────────────────────────────────────────────── */ .bx-qs .qs-gent { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); } .bx-qs .qs-persona { display: flex; flex-direction: column; } .bx-qs .qs-persona__figura { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bx-filet); margin-bottom: 20px; } .bx-qs .qs-persona__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease), filter 1.3s var(--ease); } .bx-qs .qs-persona:hover .qs-persona__figura img { transform: scale(1.04); filter: brightness(1.03); } .bx-qs .qs-persona__rol { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var( --bx-terracota-text ); margin: 0 0 8px; } .bx-qs .qs-persona h3 { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 10px; } .bx-qs .qs-persona p { font-size: 15px; line-height: 1.6; color: var(--bx-tinta-suau); margin: 0; } @media (max-width: 860px) { .bx-qs .qs-gent { grid-template-columns: 1fr; } .bx-qs .qs-persona { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; } .bx-qs .qs-persona__figura { margin-bottom: 0; aspect-ratio: 1 / 1; } } /* ── Els quatre principis ──────────────────────────────────────────── */ .bx-qs .qs-principis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(247, 242, 233, .14); border: 1px solid rgba(247, 242, 233, .14); margin: clamp(34px, 5vh, 54px) 0 0; } .bx-qs .qs-principis > div { background: var(--nit); padding: clamp(18px, 2.2vw, 26px); } .bx-qs .qs-principis dt { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--bx-terracota-clar); margin-bottom: 8px; } .bx-qs .qs-principis dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(247, 242, 233, .72); } @media (max-width: 620px) { .bx-qs .qs-principis { grid-template-columns: 1fr; } } /* ── El tancament ──────────────────────────────────────────────────── */ .bx-qs .qs-final { background: var(--bx-marfil); } .bx-qs .qs-final__caixa { border: 1px solid var(--bx-filet); padding: clamp(34px, 5vw, 68px); text-align: center; } .bx-qs .qs-final__caixa h2 { font-size: clamp(28px, 3.6vw, 50px); margin: 0 auto 18px; max-width: 20ch; } .bx-qs .qs-final__caixa .lead { max-width: 52ch; margin-inline: auto; } .bx-qs .qs-final__caixa .cta-row { justify-content: center; } /* * El botó fantasma sobre fons clar. * * `.btn.ghost` es va dissenyar per anar sobre el blau nit: text crema i vora * crema translúcida. Al tancament de «Qui som», que va sobre marfil, això * deixava el botó «Veure la carta» en crema sobre crema: hi era, s'hi podia * clicar i era INVISIBLE. Contrast mesurat, 1,06:1. * * Es va veure renderitzant la pàgina. Llegint el codi no es veu, perquè el * botó és correcte i la secció també: el problema és la combinació. */ .bx-hist .qs-final .btn.ghost, .bx-hist .ivory .btn.ghost, .bx-hist .pad:not(.dark):not(.book):not(.foc) .btn.ghost { color: var(--bx-tinta); border-color: var(--bx-filet); background: transparent; } .bx-hist .qs-final .btn.ghost:hover, .bx-hist .qs-final .btn.ghost:focus-visible, .bx-hist .ivory .btn.ghost:hover, .bx-hist .ivory .btn.ghost:focus-visible, .bx-hist .pad:not(.dark):not(.book):not(.foc) .btn.ghost:hover, .bx-hist .pad:not(.dark):not(.book):not(.foc) .btn.ghost:focus-visible { background: var(--bx-tinta); border-color: var(--bx-tinta); color: var(--bx-crema); }