/* ═══════════════════════════════════════════════════════════════════════════ COOKIES — Chelsea Candle Atelier Franja INFERIOR de ancho completo, CREMA TRANSLÚCIDO (el color del header). Geometría copiada de Despacho Tirzo & Bautista; colores de Chelsea. Colores SÓLIDOS con opacidad, esquinas RECTAS (sin degradados). NOTA: las clases son las mismas que genera js/cookies.js. Aquí solo cambia la apariencia; el comportamiento del script no se modificó. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Fondo de la franja: el MISMO crema del header (--c-ice #FCF4EF), con algo de opacidad para que sea translúcido. */ --cookie-band: rgba(252, 244, 239, 0.95); --cookie-cream: #FCF4EF; /* el crema del header, sólido: hover de los botones */ --cookie-accent: #C84A87; /* rosa de marca (--c-terra): botones y enlaces */ --cookie-text: #4A3340; /* ciruela oscuro (--c-text): títulos */ --cookie-text-soft: #8A7280; /* ciruela suave (--c-text-soft): párrafos */ --cookie-white: #FFFFFF; --cookie-border: #EFE3D8; /* borde crema (--c-border) */ --cookie-shadow: rgba(200, 74, 135, 0.12); --cookie-font: inherit; } /* El script añade esta clase al . La franja NO cubre la página, por eso no se bloquea el scroll (igual que en Tirzo). */ body.cookie-modal-open { overflow: visible; } .cookie-modal, .cookie-modal * { box-sizing: border-box; } /* ── LA FRANJA ──────────────────────────────────────────────────────────── Pegada abajo, 100% de ancho, altura según el contenido. Entra deslizándose desde abajo con translateY. Lleva el mismo blur del header, y una línea + sombra arriba para separarse del fondo blanco de la página (si no, se confundiría con ella). */ .cookie-modal { position: fixed; right: 0; bottom: 0; left: 0; top: auto; z-index: 2147483000; display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px 20px; border-top: 1px solid var(--cookie-border); background-color: var(--cookie-band); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 -4px 22px var(--cookie-shadow); color: var(--cookie-text); font-family: var(--cookie-font); transform: translateY(100%); pointer-events: none; isolation: isolate; transition: transform .38s ease; } .cookie-modal.is-open { transform: translateY(0); pointer-events: auto; } /* El velo oscuro a pantalla completa ya no se usa en este diseño. */ .cookie-modal__overlay { display: none !important; } /* ── CONTENEDOR INTERNO ─────────────────────────────────────────────────── Ya no es una tarjeta: es solo el contenido centrado sobre la franja. */ .cookie-modal__panel { position: relative; z-index: 1; display: block; width: 100%; max-width: 900px; max-height: 80vh; max-height: 80dvh; margin: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 0; border-radius: 0; background: transparent; color: var(--cookie-text); box-shadow: none; text-align: center; transform: none; } /* Se elimina el velo con degradado del diseño anterior (la marca prohíbe degradados). */ .cookie-modal__panel::before { content: none !important; } .cookie-modal__view { position: relative; z-index: 1; display: block; } .cookie-modal__view[hidden] { display: none !important; } /* ── TEXTOS ─────────────────────────────────────────────────────────────── Sobre el crema claro el texto va oscuro: ciruela. El antetítulo va rosa. */ .cookie-modal .eyebrow { display: block; margin: 0; padding: 0; border: 0; background: transparent; color: var(--cookie-accent); font-family: inherit; font-size: 9.5px; font-weight: 800; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; } .cookie-modal .eyebrow::before, .cookie-modal .eyebrow::after { display: none !important; content: none !important; } .cookie-modal__title { display: block; max-width: none; margin: 6px 0 7px; padding: 0; color: var(--cookie-text); font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: 0; text-transform: none; } .cookie-modal__text { display: block; max-width: none; margin: 0 0 5px; padding: 0; color: var(--cookie-text-soft); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; } .cookie-modal__text a { color: var(--cookie-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .cookie-modal__text a:hover { color: var(--cookie-accent); } /* ── BOTONES ────────────────────────────────────────────────────────────── En fila, centrados. CUADRADOS (border-radius: 0). Reposo : fondo BLANCO + texto ROSA + borde ROSA. Hover : fondo CREMA + texto ROSA + borde ROSA. El borde es rosa (no blanco) porque la franja es crema casi blanca: con borde blanco los botones se perderían en el fondo. */ .cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; margin: 0; padding: 13px 0 0; } .cookie-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 1.35rem; border: 2px solid var(--cookie-accent); border-radius: 0; background-color: var(--cookie-white); color: var(--cookie-accent); font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .02em; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .16s ease, color .16s ease; } /* Los tres botones se ven igual: no hay jerarquía de color en este diseño. */ .cookie-btn--primary, .cookie-btn--ghost, .cookie-modal__configure { border: 2px solid var(--cookie-accent); background-color: var(--cookie-white); color: var(--cookie-accent); box-shadow: none; } /* SOLO hover y clic cambian el relleno. El foco NO lo cambia: si no, el botón que el script enfoca al abrir la banda aparecería "encendido" sin que el usuario lo haya tocado. Los tres botones nacen blancos. */ .cookie-btn:hover, .cookie-btn:active, .cookie-btn--primary:hover, .cookie-btn--primary:active, .cookie-btn--ghost:hover, .cookie-btn--ghost:active, .cookie-modal__configure:hover, .cookie-modal__configure:active { background-color: var(--cookie-cream); border-color: var(--cookie-accent); color: var(--cookie-accent); } /* SIN anillo de foco (decisión del usuario): los botones se ven normales siempre, incluso cuando el navegador o el script les da el foco. Se anula tanto :focus como :focus-visible para cubrir todos los navegadores. El panel también se anula porque el script le da el foco al abrir. */ .cookie-btn:focus, .cookie-btn:focus-visible, .cookie-modal__back:focus, .cookie-modal__back:focus-visible, .cookie-modal__panel:focus, .cookie-modal__panel:focus-visible { outline: none; box-shadow: none; } /* ── VISTA "CONFIGURAR" ─────────────────────────────────────────────────── Misma franja; la caja va blanca con borde crema sobre el fondo crema. */ .cookie-modal__back { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 10px 4px 0; color: var(--cookie-text-soft); font-family: inherit; font-size: 12.5px; font-weight: 800; line-height: 1; cursor: pointer; } .cookie-modal__back:hover { color: var(--cookie-text); } .cookie-cat { margin: 12px 0 0; padding: 13px; border: 1px solid var(--cookie-border); border-radius: 0; background-color: var(--cookie-white); text-align: left; } .cookie-cat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 12px; padding: 0; } .cookie-cat__title { margin: 0 0 6px; padding: 0; color: var(--cookie-text); font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-transform: none; } .cookie-cat__desc { margin: 0; padding: 0; color: var(--cookie-text-soft); font-family: inherit; font-size: 12.5px; line-height: 1.5; letter-spacing: 0; } /* Etiqueta "Activas": rosa sólido con texto blanco, cuadrada. Va en rosa (no blanca) porque la caja que la contiene ya es blanca. */ .cookie-cat__toggle--locked { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 32px; padding: 0 14px; border-radius: 0; background-color: var(--cookie-accent); color: var(--cookie-white); font-family: inherit; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: .08em; text-transform: uppercase; } .cookie-cat__items { display: grid; gap: 8px; margin: 0; padding: 14px 0 0 18px; border-top: 1px dashed var(--cookie-border); list-style: disc; } .cookie-cat__items li { margin: 0; padding: 0; color: var(--cookie-text-soft); font-family: inherit; font-size: 12px; line-height: 1.45; letter-spacing: 0; } .cookie-cat__items strong { color: var(--cookie-text); font-weight: 800; } .cookie-cat__items code { color: var(--cookie-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .92em; } /* ── MÓVIL ──────────────────────────────────────────────────────────────── Los botones pasan a columna y ocupan todo el ancho (igual que Tirzo). */ @media (max-width: 560px) { .cookie-modal { padding: 14px 14px; } .cookie-modal__panel { max-height: 70vh; max-height: 70dvh; } .cookie-modal__title { font-size: 15px; line-height: 1.3; } .cookie-modal__text { font-size: 12.5px; line-height: 1.45; } .cookie-modal__actions { flex-direction: column; gap: 8px; padding-top: 12px; } .cookie-btn { width: 100%; min-height: 40px; padding: 0 1rem; white-space: normal; } .cookie-cat { padding: 12px; } .cookie-cat__head { flex-direction: column; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .cookie-modal { transition: none; } .cookie-btn { transition: none; } }