/* =============================================================================
ANDERSON'S GIFT CARD v2 · COMPONENTE .gc-card
-----------------------------------------------------------------------------
La tarjeta de regalo. Se usa en TODA la tienda: catálogo, resumen, carrito,
correo de confirmación y vista previa.
CÓMO FUNCIONA
-------------
Dos capas apiladas:
.gc-art -> imagen de fondo generada (SIN texto). Solo textura y geometría.
.gc-txt -> la tipografía, pintada por CSS encima.
POR QUÉ ASÍ (importante para el dev)
· El texto queda vectorial: nítido en cualquier tamaño y en pantalla retina.
· Traducir = cambiar un string. No se vuelve a generar arte.
· Un mismo arte sirve para todas las frases de su familia.
USO REAL (lo que genera hoy js/tienda.js)
-----------------------------------------
Un solo molde para todas: etiqueta arriba a la izquierda, el asunto al
centro y la firma del grupo abajo.
GIFT CARD
GRUPO ANDERSON'S
.gc-marca y .gc-linea son del molde ANTERIOR. Siguen definidos porque
_muestra-tarjeta.html los usa para enseñar de dónde se partió, pero la
tienda ya no los genera.
TAMAÑO
------
La tarjeta se adapta al ancho de su contenedor y mantiene la proporción de una
tarjeta bancaria real (85.6 × 53.98 mm ≈ 1.586). La tipografía escala con
container queries (cqw) para que se vea idéntica en miniatura y en grande.
============================================================================= */
/* -----------------------------------------------------------------------------
1 · CONTENEDOR
-------------------------------------------------------------------------- */
.gc-card{
position:relative;
width:100%;
aspect-ratio:1.586 / 1; /* proporción tarjeta bancaria */
/* Radio en dos valores a propósito. Con un solo porcentaje el navegador
calcula el eje horizontal sobre el ANCHO y el vertical sobre el ALTO;
como la tarjeta es 1.586 veces más ancha que alta, las esquinas salían
elípticas y parecían cortadas. El segundo valor (4.2 × 1.586) compensa
esa diferencia y las deja perfectamente redondas a cualquier tamaño. */
border-radius:4.2% / 6.66%;
overflow:hidden;
isolation:isolate; /* aísla los blend modes internos */
/* container-type habilita las unidades cqw que usa la tipografía (punto 3).
Gracias a esto el texto se ve proporcional tanto en miniatura como grande. */
container-type:inline-size;
/* Sin sombra: el arte ya trae su propia profundidad y una sombra por debajo
ensuciaba el borde inferior. La tarjeta se apoya plana sobre el fondo. */
box-shadow:none;
user-select:none;
}
/* -----------------------------------------------------------------------------
2 · CAPA DE ARTE (imagen de fondo)
-------------------------------------------------------------------------- */
.gc-art{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
display:block;
}
/* Velo suave en la mitad izquierda: asegura contraste del texto pase lo que pase
con el arte. Muy sutil — no debe notarse como "capa gris". */
.gc-card::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(100deg,
rgba(0,0,0,.22) 0%,
rgba(0,0,0,.10) 34%,
rgba(0,0,0,0) 58%);
pointer-events:none;
}
/* Para arte que YA trae el texto quemado (piezas heredadas): sin velo. */
.gc-card[data-sin-velo]::after{ background:none; }
/* -----------------------------------------------------------------------------
3 · CAPA DE TEXTO
-----------------------------------------------------------------------------
Todas las medidas van en cqw (% del ancho de la tarjeta) para que el bloque
completo escale de forma proporcional. 1cqw = 1% del ancho de .gc-card.
-------------------------------------------------------------------------- */
.gc-txt{
position:absolute;
left:7.5%; top:50%;
transform:translateY(-50%);
z-index:2;
max-width:64%;
}
/* Antetítulo opcional: la ocasión en pequeño, sobre la marca */
.gc-ocasion{
font-family:'Oswald',system-ui,sans-serif;
font-weight:400;
font-size:2.6cqw;
letter-spacing:.42em;
margin-bottom:1.6cqw;
color:var(--gc-acento,#4C5D70);
}
/* El nombre de la marca — el elemento dominante */
.gc-marca{
font-family:'Oswald',system-ui,sans-serif;
font-weight:300; /* la madre usa un peso ligero y alto */
font-size:9.4cqw;
line-height:.96;
letter-spacing:.055em;
color:var(--gc-tinta,#fff);
white-space:nowrap;
}
/* La línea de abajo: "GIFT CARD", la ocasión, o el nombre del restaurante */
.gc-linea{
font-family:'Oswald',system-ui,sans-serif;
font-weight:400;
font-size:4.15cqw;
letter-spacing:.30em; /* tracking ancho, como el arte original */
margin-top:2.1cqw;
color:var(--gc-acento,#4C5D70);
white-space:nowrap;
}
/* -----------------------------------------------------------------------------
3b · LOGO DE RESTAURANTE
-----------------------------------------------------------------------------
Las tarjetas de marca llevan el logo del restaurante en lugar de la palabra
"ANDERSON'S". Va contenido a propósito: la tarjeta debe verse elegante, no
como un volante. Por eso se limita por ALTURA (no por ancho), así todos los
logos ocupan el mismo peso visual aunque unos sean anchos y otros altos.
Todos se pintan monocromos. Suena drástico, pero es lo que hace que las
tarjetas de marca se vean como una colección y no como un montón de logos
pegados: el color de cada marca ya está en el fondo y en la etiqueta.
-------------------------------------------------------------------------- */
.gc-logo{
height:auto;
max-height:13cqw; /* ~13% del ancho de la tarjeta: presente, no dominante */
max-width:52%;
width:auto;
object-fit:contain;
object-position:left center;
margin-bottom:2.4cqw;
}
/* Sobre arte oscuro el logo va en blanco */
.gc-card[data-tema="oscuro"] .gc-logo{
filter:brightness(0) invert(1);
opacity:.96;
}
/* Sobre arte claro, en negro */
.gc-card[data-tema="claro"] .gc-logo{
filter:brightness(0);
opacity:.86;
}
/* EXCEPCIÓN · logos "de placa"
Algunos logos no son una marca suelta sino un letrero completo con su fondo
sólido. Pintarlos monocromos los convierte en
un rectángulo blanco, porque se rellena la placa entera. Esos se dejan con
su color original: se leen como un letrerito sobre la tarjeta, que es
justo como funcionan esas marcas.
Se activa con logoPlaca:true en js/catalogo.js */
.gc-card .gc-logo[data-placa]{
filter:none;
opacity:1;
/* el alto se define abajo, junto al del resto de logos */
}
/* Varios colores de marca son oscuros (el azul pizarra de Nicoletta, el verde
de Bodega…) y sobre un fondo oscuro se pierden. En las tarjetas de
restaurante mezclamos el acento con blanco: conserva el tinte de la marca
pero se lee. Las de ocasión no lo necesitan: el taupe ya contrasta. */
.gc-card[data-tema="oscuro"]:has(.gc-logo) .gc-linea{
color:color-mix(in srgb, var(--gc-acento) 62%, #ffffff);
}
/* -----------------------------------------------------------------------------
3c · DISPOSICIÓN DE LAS TARJETAS DE RESTAURANTE
-----------------------------------------------------------------------------
Distinta a las de ocasión. Aquí el logo de la marca es el protagonista y va
CENTRADO en la tarjeta; las dos etiquetas se van a las esquinas de la
izquierda para no estorbarlo:
GIFT CARD ·············· arriba a la izquierda, diminuta
[ LOGO ] centrado
GRUPO ANDERSON'S ········ abajo a la izquierda, diminuta
Las de ocasión mantienen su bloque de texto a la izquierda.
-------------------------------------------------------------------------- */
/* ⚠️ El contenido central vive dentro de la MITAD IZQUIERDA de la tarjeta y no
la pasa. Todo el arte trae una diagonal metálica y unos paneles superpuestos
en la parte derecha; algo que se cruzara ahí se volvería ilegible y le
pasaría por encima al diseño. Este marco lo mantiene en la zona limpia. */
.gc-card[data-molde] .gc-txt,
.gc-card:has(.gc-logo) .gc-txt{
left:7.5%;
right:53%; /* frontera con la geometría del arte */
top:50%;
transform:translateY(-50%);
max-width:none;
display:flex;
align-items:center;
justify-content:center; /* centrado DENTRO de esa zona */
padding:0;
}
/* --gc-logo-escala lo pone el catálogo (campo logoEscala) para las marcas
cuyo logo se ve chico junto a los demás. Por defecto vale 1. */
.gc-card:has(.gc-logo) .gc-logo{
max-height:calc(13cqw * var(--gc-logo-escala, 1));
max-width:100%; /* el 100% de la zona limpia, no de la tarjeta */
margin:0;
object-position:center;
}
.gc-card .gc-logo[data-placa]{
max-height:calc(14cqw * var(--gc-logo-escala, 1));
}
/* El nombre de la ocasión, en el centro de la zona limpia.
Ocupa el lugar que en las tarjetas de restaurante ocupa el logo. */
.gc-ocasion-centro{
font-family:'Oswald',system-ui,sans-serif;
font-weight:300;
font-size:6.4cqw;
line-height:1.06;
letter-spacing:.14em;
text-align:center;
color:var(--gc-tinta,#fff);
text-wrap:balance; /* reparte las palabras en dos líneas parejas */
}
/* "GIFT CARD" en la esquina superior izquierda */
.gc-etiqueta{
position:absolute;
left:7.5%; top:8%;
z-index:2;
font-family:'Oswald',system-ui,sans-serif;
font-weight:400;
font-size:2.5cqw;
letter-spacing:.36em;
color:var(--gc-acento,#4C5D70);
white-space:nowrap;
}
/* Igual que en la línea inferior: los acentos oscuros se aclaran para que
se lean sobre el arte. */
.gc-card[data-tema="oscuro"] .gc-etiqueta{
color:color-mix(in srgb, var(--gc-acento) 62%, #ffffff);
}
/* Firma del grupo, abajo a la izquierda. Deliberadamente diminuta: da
respaldo sin competir con la marca del restaurante. */
.gc-firma{
position:absolute;
left:7.5%; bottom:7.5%;
z-index:2;
font-family:'Oswald',system-ui,sans-serif;
font-weight:300;
font-size:2.05cqw;
letter-spacing:.34em;
color:var(--gc-tinta,#fff);
opacity:.5;
white-space:nowrap;
}
/* Monto opcional, esquina inferior izquierda. Solo carrito / correo. */
/* Si la tarjeta ya trae firma abajo a la izquierda, el monto se va a la
derecha para que no se encimen. */
.gc-card:has(.gc-firma) .gc-monto{ left:auto; right:7.5% }
.gc-monto{
position:absolute;
left:7.5%; bottom:7%;
z-index:2;
font-family:'Inter',system-ui,sans-serif;
font-weight:800;
font-size:5.2cqw;
letter-spacing:-.02em;
color:var(--gc-tinta,#fff);
}
/* -----------------------------------------------------------------------------
4 · TEMAS
-----------------------------------------------------------------------------
Cambian SOLO dos variables: la tinta y el acento. El arte no cambia.
Se elige con el atributo data-tema en .gc-card.
Para una tarjeta de restaurante con color propio, se puede sobreescribir
en línea sin tocar este archivo:
-------------------------------------------------------------------------- */
/* Arte oscuro (navy, borgoña, verde…) -> tinta blanca */
.gc-card[data-tema="oscuro"]{
--gc-tinta:#ffffff;
--gc-acento:#C6CDD4; /* acento azul-plata claro, sobre arte oscuro */
}
/* Arte claro (hueso, arena…) -> tinta navy */
.gc-card[data-tema="claro"]{
--gc-tinta:#16202F;
--gc-acento:#4C5D70; /* acento azul-plata hondo, para contraste */
}
.gc-card[data-tema="claro"]::after{
/* sobre arte claro el velo debe ser blanco, no negro */
background:linear-gradient(100deg,
rgba(255,255,255,.34) 0%,
rgba(255,255,255,.16) 38%,
rgba(255,255,255,0) 62%);
}
/* -----------------------------------------------------------------------------
5 · MODIFICADORES DE TAMAÑO (opcionales)
-----------------------------------------------------------------------------
El componente ya es fluido; estos solo fijan anchos típicos.
-------------------------------------------------------------------------- */
.gc-card.is-mini { width:96px; border-radius:7px; } /* miniatura de carrusel */
.gc-card.is-thumb { width:180px; border-radius:11px; } /* fila del carrito */
/* -----------------------------------------------------------------------------
6 · ACCESIBILIDAD
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.gc-card{ transition:none !important; animation:none !important; }
}