/* Mas Comabella — WEB B. Hero B «Migdia». Tema claro, Instrument Serif de display, acento terracota. Un acento, un radio, un tema en toda la página. Diales heredados del hero: VARIANZA 3 · MOVIMIENTO 2 · DENSIDAD 2. Sobre la paleta: terracota, arena y hueso es la familia que la Taste Skill prohíbe por defecto en encargos «premium artesano». Aquí vale, y por eso se escribe: los valores están muestreados de SU logo, que ya existe y es bueno. Lo que sí se evita es el dorado de acento, que es lo que la convierte en plantilla. No hay ni un dorado en toda la página. Y sobre Instrument Serif: la Taste la desaconseja por nombre. Se queda porque es la que el usuario eligió al ver los cuatro heroes. Queda anotado para que no se repita por inercia en otro cliente. */ @import url("fonts/fonts.css"); :root { --fons: #efeae2; --fons-2: #e6dfd4; /* la banda siguiente: mismo color, otro tono */ --fons-3: #5c3529; /* el tono profundo, para el bloque de contacto */ --tinta: #4a2f25; --tinta-fluixa: #6d5547; --tinta-feble: #7a6355; /* bajado: a #9a8577 el texto de la carta se quedaba en 2,9 sobre el hueso */ --accent: #784939; --obert: #4f7a3f; --radi: 14px; --marge: clamp(24px, 4.2vw, 76px); --aire: clamp(18px, 2.2vh, 30px); --max: 1400px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif; color: var(--tinta); background: var(--fons); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } .dins { max-width: var(--max); margin: 0 auto; padding-inline: var(--marge); } /* ---------- Tipografía ---------- */ .display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; line-height: .98; letter-spacing: -.01em; margin: 0; } h2.display { font-size: clamp(36px, 4.6vw, 68px); } h3 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; margin: 0; } p { margin: 0; line-height: 1.6; } .cos-text { color: var(--tinta-fluixa); max-width: 62ch; } /* ---------- Cabecera ---------- */ .cap { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; max-height: 92px; padding: clamp(14px, 2vh, 22px) var(--marge); } .cap__logo { height: clamp(44px, 5.8vh, 62px); width: auto; } .menu { display: flex; gap: clamp(14px, 1.8vw, 30px); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .menu a { text-decoration: none; opacity: .8; display: inline-flex; align-items: center; min-height: 44px; } .menu a:hover, .menu a:focus-visible { opacity: 1; } /* ---------- Estado ---------- */ .estat { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; } .estat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--obert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--obert) 20%, transparent); } /* El unico punto de color de la pagina marca un estado de verdad, y cambia. */ .estat[data-obert="0"]::before { background: #a8513a; box-shadow: 0 0 0 3px color-mix(in srgb, #a8513a 20%, transparent); } /* ---------- Acciones ---------- */ .accions { display: flex; flex-wrap: wrap; gap: 12px; } .bo { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 26px; border-radius: var(--radi); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .05em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .1s ease; } .bo:active { transform: translateY(1px); } .bo--ple { background: var(--accent); color: #f6f2ec; } .bo--ple:hover { background: #5c3529; } .bo--buit { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--accent); } .bo--buit:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .bo--clar { background: #f6f2ec; color: #4a2f25; } .bo--clar:hover { background: #fffdf9; } /* ---------- HERO (B, tal cual sale de /boceto) ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: #2e2928; } .hero__fons { position: absolute; inset: 0; z-index: 0; } /* El encuadre: 11% dejaba medio cielo y la casa en una franja. A 28% entran el arco de ladrillo y el rotulo pintado de la pared, sigue habiendo cielo liso detras del nombre (el titular va SIN velo: es el movimiento de esta direccion) y todavia no asoma ningun coche del aparcamiento, que empieza a verse a partir del 40%. */ .hero__fons img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } /* El vel de dalt. La foto nova -la terrassa amb les taules parades, que van demanar ells- no te cap zona llisa: el menu i el titol queien sobre els para-sols blancs i donaven 1,18 de contrast quan el minim es 4,5. Sense aixo no es llegien. Va NOMES a dalt i es fon abans de la meitat: la taula del primer pla es queda neta i la foto no sembla enfosquida, nomes assentada. */ .hero__fons::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(26, 20, 16, .70) 0%, rgba(26, 20, 16, .66) 12%, rgba(26, 20, 16, .48) 20%, rgba(26, 20, 16, .45) 30%, rgba(26, 20, 16, .18) 42%, transparent 54%); } .hero .cap { color: #efeae2; } /* Sobre foto clara el logo en hueso se perdia: dos sombras, una corta y otra larga, lo separan del cel i del fullatge sense tocar la foto. */ .hero .cap__logo { filter: drop-shadow(0 1px 2px rgba(16,28,44,.7)) drop-shadow(0 3px 20px rgba(16,28,44,.55)); } .hero__cos { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; padding: clamp(8px, 2vh, 26px) var(--marge) clamp(26px, 4vh, 54px); text-align: center; } .hero__titol { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.6vw, 74px); letter-spacing: .085em; text-transform: uppercase; color: #efeae2; line-height: 1.04; margin: 0; text-shadow: 0 1px 22px rgba(20,34,54,.34); } /* La marca de su logo. Antes era un arco de 34x20 cuyo vertice se salia del viewBox y se recortaba: se veian solo las dos patas, como un parentesis. */ .hero__ornament { display: block; margin: 0 auto calc(var(--aire) * .55); width: 40px; height: 30px; opacity: .92; } .hero__que { margin-top: calc(var(--aire) * .62); font-size: 12.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #efeae2; text-shadow: 0 1px 16px rgba(20,34,54,.45); } /* Aqui habia .hero__teulada: un SVG que prolongaba el alero de la masia hacia abajo, pensado para OTRA foto. Al cambiar la foto del hero y bajar el encuadre, el alero real quedo a media altura y la linea cruzaba el muro, el arco y la sombrilla sin alinearse con nada: se leia como un aranazo. Fuera, ademas, por la regla de la casa: ni una raya decorativa. En su lugar, un degradado del propio fondo, que asienta el texto de abajo sin dibujar ningun borde. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 1; pointer-events: none; /* Pujat de .5 a .82 i de 190 a 260 px el 25-10-2026: amb la foto nova el xip d'obertura cau sobre el terra assolellat i es quedava en 2,35 de contrast quan el minim es 4,5. Mesurat amagant el text i mirant el fons de debo, no la caixa sencera -que te les lletres a dins i les lletres son clares-. */ background: linear-gradient(to top, rgba(38, 31, 26, .82), transparent); } .hero__baix { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 var(--marge) clamp(24px, 4vh, 48px); color: #efeae2; } /* El chip va sobre el mur assolellat: la sombra curta es la que el sosté. */ .hero__baix .estat { text-shadow: 0 1px 2px rgba(30,22,16,.8), 0 2px 18px rgba(30,22,16,.6); } .hero__baix .estat::before { background: #9fd18a; box-shadow: 0 0 0 3px rgba(159,209,138,.22); } /* Y tancat, el mateix terracota aclarit com el verd, perque es vegi sobre la foto. Sense aquesta linia, la de dalt (mateixa especificitat, despres) el deixava sempre verd, tambe quan deia «Tancat». */ .hero__baix .estat[data-obert="0"]::before { background: #e29983; box-shadow: 0 0 0 3px rgba(226,153,131,.22); } /* ---------- Secciones ---------- */ /* El hero queda FUERA de esto: es un
y se llevaba el mismo relleno que las demas (9vh = 87 px en una ventana de 970), que empujaba la cabecera hacia abajo y comia alto por arriba y por abajo. */ section:not(.hero) { padding-block: clamp(56px, 9vh, 112px); } /* Las secciones se separan cambiando el tono, que es la regla del sistema: ni reglas, ni curvas, ni degradados. Al meter #cuina en medio el 14-10 se rompio la alternancia -la carta y la cuina quedaban las dos en --fons y se leian como una sola seccion larguisima-. Restaurada: a partir de aqui van alternando hasta el bloque profundo del final. */ #carta { background: var(--fons); } #cuina { background: var(--fons-2); } #foc { background: var(--fons-3); color: #efeae2; } section#esmorzars { background: var(--fons); } #masia { background: var(--fons); } #grups { background: var(--fons-2); } #reservar { background: var(--fons); } #arribar { background: var(--fons-3); color: #efeae2; } /* ---------- LA CARTA · movimiento de monte ---------- Nombre en versalitas, ingredientes en gris debajo, y el precio alineado a la derecha en su propia columna. Los bloques se separan con un filete. */ .carta__cap { text-align: center; margin-bottom: clamp(30px, 4.6vh, 56px); } .carta__cap p { margin-top: 10px; color: var(--tinta-fluixa); font-size: 14px; } /* LA CARTA ------------------------------------------------------------------ Un menu es una lista de DECISIONES. La version anterior ponia los platos en prosa separados por puntos volados y no se podia escanear, ni se entendia que habia que elegir. Ahora: un plato por linea, y el «tria'n un» dicho. Sin reglas ni puntitos de relleno: el peso y el tamano ordenan, que es lo que el sistema manda para las listas largas. */ /* Cada tarjeta mide lo que mide. Forzandolas a la misma altura, la de la calcotada -que tiene tres platos y la otra diez- se quedaba con 250 px de vacio dentro, y eso se lee como que falta algo. Dos menus de distinta largura acaban a distinta altura, y ya esta. */ .menus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); align-items: start; } .menu-carta { background: var(--fons-2); border-radius: var(--radi); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; } /* El arco va aqui, en la foto, no en la tarjeta: la tarjeta es el muro y la foto es la ventana. REFERENCIAS.md: el arco «es su forma, no un adorno» -el de ladrillo de la entrada, el finestral, el dibujo del logo-, y hasta ahora solo salia una vez en toda la pagina. */ .menu-carta__foto { margin: 0 0 clamp(20px, 2.6vh, 30px); aspect-ratio: 3 / 2; overflow: hidden; background: #bcb48f; border-radius: 50% 50% var(--radi) var(--radi) / 34% 34% var(--radi) var(--radi); } .menu-carta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .menu-carta__nom { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); text-align: center; } .menu-carta__preu { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(46px, 5.2vw, 70px); line-height: 1; color: var(--tinta); margin: clamp(4px, .8vh, 10px) 0 6px; text-align: center; } /* El euro, mas pequeno y levantado hasta la altura de las versalitas. */ .menu-carta__eur { font-size: .36em; color: var(--accent); vertical-align: .62em; margin-left: .1em; } /* «per persona» faltaba: un numero grande solo, sin unidad, no dice lo que cuesta comer alli. */ .menu-carta__qui { margin: 0 0 clamp(22px, 3vh, 34px); text-align: center; font-size: 12.5px; color: var(--tinta-fluixa); } .curs { margin-bottom: clamp(16px, 2.2vh, 26px); } /* El ultimo curso no deja margen: si no, se suma al relleno del pie y queda un hueco doble que parece que falta algo. */ .curs:last-of-type { margin-bottom: 0; } .curs__nom { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } /* El «tria'n un» es la instruccion que faltaba: sin ella no se sabe si te dan los cuatro primeros o eliges uno. */ .curs__tria { font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: none; color: var(--accent); } .curs ul { margin: 0; padding: 0; list-style: none; } .curs li { font-size: 15px; line-height: 1.55; color: var(--tinta-fluixa); padding: 3px 0; } /* El pie, pegado abajo, para que las dos tarjetas acaben a la misma altura aunque una tenga mas platos. Separado por aire, no por una regla: las reglas decorativas estan vetadas en esta direccion. */ .menu-carta__peu { margin: clamp(6px, 1vh, 12px) 0 0; padding-top: clamp(18px, 2.4vh, 28px); font-size: 13px; line-height: 1.7; color: var(--tinta-fluixa); } .carta-solta { margin-top: clamp(36px, 5.2vh, 68px); } .carta-solta > h3 { margin: 0 0 clamp(20px, 2.6vh, 30px); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); text-align: center; } .carta-solta__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); } .cs__nom { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); } .carta-solta__cols ul { margin: 0; padding: 0; list-style: none; } .carta-solta__cols li { font-size: 15px; line-height: 1.55; color: var(--tinta-fluixa); padding: 3px 0; } .alergens { margin-top: clamp(20px, 3vh, 36px); font-size: 13px; color: var(--tinta-feble); text-align: center; } /* ---------- LA MASIA · movimiento de capheroasters ---------- Rejilla escalonada de fotos en tarjeta, alturas desiguales. */ .masia__cap { max-width: 44ch; display: grid; gap: var(--aire); } /* El text de la masia i el video, un al costat de l'altre: la columna de la dreta ja estava buida -el .masia__cap no passa de 44ch- i el video hi cap sense allargar la pagina ni un pixel. */ .masia__dalt { display: grid; grid-template-columns: minmax(0, 46ch) minmax(0, 300px); gap: clamp(26px, 4vw, 56px); align-items: center; justify-content: center; margin-bottom: clamp(30px, 4.6vh, 56px); } .masia__dalt .masia__cap { max-width: none; } .masia__video { margin: 0; } /* 9:16, que es com esta gravat: ni es retalla a apaisat ni es deixa banda negra. Els altres tres videos son 4:5 i per aixo .video-peca__marc ho porta; aqui es sobreescriu. */ .masia__video .video-peca__marc { aspect-ratio: 9 / 16; } #masia .video-peca figcaption { color: var(--tinta-fluixa); } @media (max-width: 900px) { .masia__dalt { grid-template-columns: 1fr; gap: clamp(22px, 4vh, 34px); } .masia__video .video-peca__marc { max-width: 300px; margin-inline: auto; } .masia__video figcaption { text-align: center; } } /* La galeria de plats. A diferencia de .reixa, que va escalonada y es editorial, esta es uniforme: doce cuadrados iguales que se leen de un vistazo, como una carta ilustrada. 4 columnas, 3 por debajo de 1100 y 2 en movil. El hover lo comparte con .amplia. */ /* ABANS D'ARRIBAR A TAULA · los videos -------------------------------------- Sobre el tono profundo: el video luce sobre oscuro, y de paso la banda de la cuina (--fons-2) y la masia (--fons) siguen alternando sin repetirse. Tres piezas verticales 4:5, que es el formato en el que estan grabados: ni se recorta a apaisado ni se deja barra negra. */ #foc .foc__cap { text-align: center; margin-bottom: clamp(30px, 4.6vh, 56px); } #foc h2 { color: #efeae2; } #foc .foc__cap p { margin-top: 10px; font-size: 14px; color: #d8cabd; } .videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); } .video-peca { margin: 0; } .video-peca__marc { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radi); overflow: hidden; background: #3a211a; } .video-peca video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-peca figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: #e3d8cc; } /* El boton de play. Nace oculto en el HTML y lo destapa el JS: sin JavaScript mandan los controles nativos del