devops
a01ab55ebe
Identidad visual propia premium (ver docs-portal/docs/decisiones/0007-identidad-visual-propia.md, revision 2). Correccion de proceso respecto al intento anterior (v1.0.176, revertido): en vez de un token aislado en un solo boton, esta pasada toca de punta a punta los componentes que se ven juntos en la misma pantalla para que ninguna card quede a mitad de camino. - globals.css: paleta ciruela/carbon-oscuro/cobre/hueso (reemplaza cyan/magenta/yellow/blue, confirmado sin uso previo). Domine (titulares/precio) + Inter (UI/cuerpo) via next/font/google -- antes "Inter" era solo un fallback de CSS sin garantia real de carga. - button.tsx: variant "magenta" renombrada a "primary" (ya no es magenta, es ciruela solida) y su color redefinido -- renombrada en los 8 archivos que la usaban para no dejar un nombre enganoso. Radio base rounded-full -> rounded-lg, ring de foco retintado. - product-card.tsx: badges NUEVO/TOP/descuento en la paleta nueva (no mas fucsia/amarillo neon), precio en Domine, radio y sombra consistentes con el boton. - catalog-client.tsx: solo clases de color/radio en breadcrumb, filtro de precio, pills de filtro y boton de reset -- cero cambios de logica. Header, footer, home y pagina de producto/drawers quedan con la paleta anterior a proposito -- Sub-fases 2, 4 y 5 pendientes. Validado con `docker build --target builder` (npm ci + next build con typecheck completo) -- compila limpio.
38 lines
1.9 KiB
CSS
38 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* ADR 0007 (Opcion 2, "Atelier calido") -- identidad premium propia,
|
|
no derivada de ningun competidor. Ver
|
|
docs-portal/docs/decisiones/0007-identidad-visual-propia.md */
|
|
--color-ari-ciruela: #5B3256; /* CTA -- unico uso reservado a accion */
|
|
--color-ari-carbon-oscuro: #221D1A; /* ancla oscura: header/footer, badge "Nuevo" */
|
|
--color-ari-cobre: #B5723A; /* acento: links, badge "Top", foco */
|
|
--color-ari-hueso: #F7F1E6; /* fondo general */
|
|
--color-ari-carbon: #2A2420; /* texto principal */
|
|
--color-ari-terracota-oscuro: #9C4A2E; /* badge de descuento */
|
|
--font-display: var(--font-domine), ui-serif, Georgia, serif;
|
|
--animate-accordion-down: accordion-down .2s ease-out;
|
|
--animate-accordion-up: accordion-up .2s ease-out;
|
|
}
|
|
|
|
@keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
|
|
@keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
|
|
|
|
:root { color-scheme: light; }
|
|
* { border-color: rgb(226 232 240); }
|
|
html { scroll-behavior: smooth; }
|
|
body { margin: 0; background: var(--color-ari-hueso); color: var(--color-ari-carbon); font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; }
|
|
button, a { -webkit-tap-highlight-color: transparent; }
|
|
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(181 114 58 / .5); outline-offset: 3px; }
|
|
::selection { background: rgb(91 50 86 / .2); color: var(--color-ari-carbon); }
|
|
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 1px 900px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
}
|