/* ===================================================================== CARTA ELECTRONICA - CONTRATO DE TOKENS (fichero unico) --------------------------------------------------------------------- Estaba dentro de styles_pedido.css, pero las pantallas de entrada (index.php, mostrar_estado_mesa.php) tambien lo necesitan y NO pueden cargar aquella hoja: alli .fila es la fila de un articulo y .container baja 125px por la portada, asi que les descuadraria el menu. Se saca aqui para que haya UNA sola copia. Si se duplicara, tarde o temprano una plantilla se veria bien en la carta y rota en la entrada. ORDEN DE CARGA, SIEMPRE: 1. styles_tokens.css <- este 2. la hoja de la pantalla (styles_pedido.css o styles.css) 3. carta_tema.php <- la plantilla del local, manda ===================================================================== */ :root { /* ----- Identidad. Lo que define cada plantilla ----- */ --color_principal: #18374C; --color_secundario: #4A768D; --color_acento: #F2A541; --color_neutro: #E4ECEF; --color_neutro_panel: #D6E0E5; /* Los mismos, en canales sueltos, para poder darles alfa. Deben ir siempre sincronizados con los de arriba. */ --principal_rgb: 24, 55, 76; --secundario_rgb: 74, 118, 141; --acento_rgb: 242, 165, 65; --sombra_rgb: 0, 0, 0; --claro_rgb: 255, 255, 255; /* ----- Superficies ----- --superficie es la card de articulos, los modales y los paneles. Ponerla en transparent es lo que da el modo "sin contenedor" sobre el fondo de la pagina. */ --superficie: #ffffff; --superficie_sutil: #f9f9f9; --superficie_alterna: #fdfdfd; --superficie_tenue: #f8f8f8; /* ----- Fondo de la pagina ----- --fondo_capa es lo que se pinta sobre --fondo_base: puede ser un degradado, un patron SVG o una foto. Ver la seccion "FONDOS" al final del fichero. */ --fondo_base: var(--color_neutro); /* Fondo de la cabecera fija. Va con el de la PAGINA, no con el de la card: si lleva --superficie y la plantilla la pone en transparent, los articulos se ven pasar por debajo al hacer scroll. */ --fondo_menu: var(--fondo_base); /* Fondo del modal de detalle. Mismo motivo que --fondo_menu: no puede llevar --superficie, porque si la plantilla la pone en transparent el modal se queda sin fondo, flotando sobre el velo negro. */ --fondo_modal: var(--fondo_menu); /* El modal va claro incluso en plantilla oscura, asi que su texto y su titulo llevan color propio: si heredaran --texto (casi blanco en las oscuras) no se leeria nada. */ --texto_modal: var(--texto); --titulo_modal: var(--color_principal); --fondo_capa: linear-gradient(135deg, var(--color_neutro), var(--color_neutro_panel)); --fondo_tam: auto; /* ----- Texto ----- En una plantilla de esquema oscuro hay que voltear TODOS estos, no solo el fondo. */ --texto: var(--color_principal); --texto_fuerte: #232323; --texto_suave: #6C8595; --texto_tenue: #666; --texto_medio: #333; --texto_sobre_oscuro: #ffffff; /* Color de letra cuando el fondo es --color_acento. Por defecto el principal, que es lo que habia. Una plantilla DEBE cambiarlo si su acento y su principal se parecen, o el texto desaparece. */ --texto_sobre_acento: var(--color_principal); /* Color al que se funde el velo de la foto de portada. Por defecto blanco, que es lo que habia. Una plantilla con la card transparente o con esquema oscuro tiene que ponerlo a su --fondo_base, o queda una banda blanca flotando. */ --velo_portada_rgb: var(--claro_rgb); /* ----- Bordes ----- */ --borde_linea: #e0e0e0; /* ----- Tipografia ----- */ --fuente_texto: 'Croogla', sans-serif; --fuente_titulos: 'Poppins', 'Quicksand', sans-serif; /* ----- Forma ----- */ --ancho_carta: 400px; --radio_card: 15px; /* Poner los dos en 'none' es lo que hace desaparecer la card del todo. Sin ellos, --superficie: transparent solo deja el fantasma: sombra y contorno sin nada dentro. */ --sombra_card: 0px 10px 20px rgba(var(--sombra_rgb), 0.1); --borde_card: 1px solid rgba(var(--sombra_rgb), 0.05); /* ----- Boton principal de la bienvenida ----- */ --boton_principal_ini: #214761; --boton_principal_fin: var(--color_principal); /* ----- Acciones: semanticas, NO de marca ----- Solo se ven en modo pedido (mesa != 0). Un rojo de "vaciar carrito" debe seguir siendo rojo aunque la plantilla sea verde, asi que las plantillas de la carta no rellenan esta seccion. */ --accion_ok: #34ab2f; --accion_ok_alt: #28a745; --accion_ok_hover: #218838; --accion_confirmar: #4CAF50; --accion_peligro: #d12f2f; --accion_carrito: #ff7b54; --accion_carrito_hover: #e65b40; --accion_carrito_alt: #ff5722; --accion_carrito_alt2: #e76f51; --accion_carrito_activo: rgb(243, 243, 130); /* ----- Compat: erratas antiguas, no usar en codigo nuevo ----- */ --colro_blanco: var(--superficie); } :root { /* --- Liso: solo --fondo_base --- */ /* --fondo_tam: auto */ --fondo_liso: none; /* --- Degradado diagonal: el de "Original soltac CLOUD" --- */ /* --fondo_tam: auto */ --fondo_degradado: linear-gradient(135deg, var(--color_neutro), var(--color_neutro_panel)); /* --- Aurora: manchas suaves, muy discreto --- */ /* --fondo_tam: auto */ --fondo_aurora: radial-gradient(60% 45% at 15% 8%, rgba(var(--acento_rgb), .28), transparent 70%), radial-gradient(55% 40% at 88% 12%, rgba(var(--secundario_rgb), .30), transparent 72%), radial-gradient(70% 50% at 50% 100%, rgba(var(--principal_rgb), .18), transparent 75%); /* --- Malla: mismo principio que aurora pero con mas cuerpo --- */ /* --fondo_tam: auto */ --fondo_malla: radial-gradient(42% 38% at 12% 18%, rgba(var(--acento_rgb), .38), transparent 68%), radial-gradient(45% 40% at 85% 10%, rgba(var(--secundario_rgb), .36), transparent 70%), radial-gradient(50% 45% at 78% 88%, rgba(var(--acento_rgb), .22), transparent 72%), radial-gradient(48% 42% at 8% 90%, rgba(var(--principal_rgb), .26), transparent 74%); /* --- Halo: un solo foco arriba, elegante y muy sobrio --- */ /* --fondo_tam: auto */ --fondo_halo: radial-gradient(80% 60% at 50% 0%, rgba(var(--acento_rgb), .22), transparent 70%); /* --- Puntos: rejilla de topos --- */ /* --fondo_tam: 22px 22px */ --fondo_puntos: radial-gradient(circle, rgba(var(--principal_rgb), .13) 1.5px, transparent 1.6px); /* --- Rejilla: cuadricula fina de plano --- */ /* --fondo_tam: 32px 32px */ --fondo_rejilla: repeating-linear-gradient( 0deg, rgba(var(--principal_rgb), .07) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(var(--principal_rgb), .07) 0 1px, transparent 1px 32px); /* --- Diagonales: rayas finas al bies --- */ /* --fondo_tam: auto */ --fondo_diagonales: repeating-linear-gradient(45deg, rgba(var(--acento_rgb), .10) 0 2px, transparent 2px 14px); /* --- Ondas: curvas de nivel tipo mapa topografico --- */ /* --fondo_tam: auto */ --fondo_ondas: repeating-radial-gradient(circle at 20% 30%, rgba(var(--secundario_rgb), .10) 0 1px, transparent 1px 26px); /* --- Chevrones: galones en zigzag --- */ /* --fondo_tam: 40px 40px */ --fondo_chevron: repeating-linear-gradient( 45deg, rgba(var(--acento_rgb), .10) 0 2px, transparent 2px 20px), repeating-linear-gradient(-45deg, rgba(var(--acento_rgb), .10) 0 2px, transparent 2px 20px); /* --- Escamas: circulos solapados, tipo tejado --- */ /* --fondo_tam: 34px 34px */ --fondo_escamas: radial-gradient(circle at 50% 100%, transparent 12px, rgba(var(--principal_rgb), .08) 12px 13px, transparent 13px); /* --- Lino: trama fina cruzada, como tejido --- */ /* --fondo_tam: 6px 6px */ --fondo_lino: repeating-linear-gradient( 0deg, rgba(var(--principal_rgb), .05) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(var(--principal_rgb), .05) 0 1px, transparent 1px 5px); /* --- Vineta: oscurece los bordes y despeja el centro --- */ /* --fondo_tam: auto */ --fondo_vineta: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(var(--principal_rgb), .16) 100%); /* --- Panal: hexagonos --- */ /* --fondo_tam: 30px 52px */ --fondo_panal: radial-gradient(circle at 50% 0%, rgba(var(--secundario_rgb), .10) 0 8px, transparent 9px), radial-gradient(circle at 0% 50%, rgba(var(--secundario_rgb), .10) 0 8px, transparent 9px), radial-gradient(circle at 100% 50%, rgba(var(--secundario_rgb), .10) 0 8px, transparent 9px); /* --- Bruma: dos veladuras muy suaves cruzadas --- */ /* --fondo_tam: auto */ --fondo_bruma: linear-gradient(160deg, rgba(var(--secundario_rgb), .16) 0%, transparent 45%), linear-gradient(20deg, rgba(var(--acento_rgb), .14) 0%, transparent 50%); /* --- Terrazo: confeti de los tres colores de marca --- */ /* --fondo_tam: 120px 120px */ --fondo_terrazo: radial-gradient(circle at 15% 25%, rgba(var(--acento_rgb), .30) 0 4px, transparent 5px), radial-gradient(circle at 68% 12%, rgba(var(--secundario_rgb), .26) 0 3px, transparent 4px), radial-gradient(circle at 40% 72%, rgba(var(--principal_rgb), .18) 0 5px, transparent 6px), radial-gradient(circle at 88% 58%, rgba(var(--acento_rgb), .22) 0 3px, transparent 4px); }