/* ========================================================================== RODCARS · Títulos iluminados (sitio público) -------------------------------------------------------------------------- Continúa el lenguaje del encabezado y del pie: negro, cian (highlight) y oro (secondary), con filos de luz y barridos lentos. Se apoya en las variables que declara includes/header.php: --rc-cyan (configuracion.highlight_color) --rc-gold (configuracion.secondary_color) así que respeta el color que se elija en admin ▸ Personalizar. Alcance: SOLO , es decir fuera de /admin/. Cubre también los títulos escritos desde el panel (las descripciones HTML de la tabla `configuracion`), porque son reglas de etiqueta (h1…h4) y no dependen de clases. Para dejar un título sin tratar: class="rc-t-plain". ========================================================================== */ body.rc-public { --rct-font: 'Michroma', 'Orbitron', 'Segoe UI', system-ui, -apple-system, sans-serif; --rct-ink: #0b0c0e; --rct-ink-2: #2a3540; /* Luces derivadas del color del sitio (con respaldo fijo para navegadores sin color-mix) */ --rct-glow: rgba(53,183,195,.45); --rct-glow: color-mix(in srgb, var(--rc-cyan, #35b7c3) 45%, transparent); --rct-glow-s: rgba(53,183,195,.20); --rct-glow-s: color-mix(in srgb, var(--rc-cyan, #35b7c3) 20%, transparent); --rct-gold-s: rgba(221,171,62,.22); --rct-gold-s: color-mix(in srgb, var(--rc-gold, #ddab3e) 22%, transparent); } /* ────────────────────────────────────────────────────────────────────────── 0) Altura de arranque única El contenedor que abre includes/header.php marca de una sola vez el aire entre la barra superior y el título, para que la placa caiga en el mismo sitio en todas las páginas. Los contenedores que abren las páginas dentro de éste no vuelven a añadir espacio arriba (usan pt-0). ────────────────────────────────────────────────────────────────────────── */ body.rc-public .rc-main { padding-top: 1.5rem; padding-bottom: 1rem; } body.rc-public .rc-main > .container:first-child, body.rc-public .rc-main > .container-fluid:first-child { padding-top: 0; } /* La placa nunca añade margen propio arriba */ body.rc-public h1:not(.rc-t-plain) { margin-top: 0; } /* ────────────────────────────────────────────────────────────────────────── 1) H1 · Placa iluminada El título principal de cada página se monta sobre una placa negra que enlaza con la barra superior. Lleva un filo cian→oro a la izquierda, una trama diagonal muy tenue y un barrido de luz que la recorre. ────────────────────────────────────────────────────────────────────────── */ body.rc-public h1:not(.rc-t-plain) { position: relative; isolation: isolate; /* el barrido y la trama quedan dentro */ overflow: hidden; display: block; margin-bottom: 1.75rem; padding: clamp(.85rem, 2.1vw, 1.3rem) clamp(1rem, 2.6vw, 1.75rem) clamp(.85rem, 2.1vw, 1.3rem) clamp(1.35rem, 3vw, 2.1rem); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; font-family: var(--rct-font); font-weight: 400; /* Michroma solo trae un grosor; el falso negrita la ensucia */ font-size: clamp(.9rem, .62rem + 1.05vw, 1.65rem); line-height: 1.4; letter-spacing: .015em; text-transform: uppercase; overflow-wrap: break-word; text-wrap: balance; color: #fff; text-shadow: 0 0 26px var(--rct-glow), 0 1px 0 rgba(0,0,0,.4); box-shadow: 0 18px 46px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); /* Sobre el fondo oscuro la chapa opaca se perdía: ahora es cristal. 1ª capa: filo vertical cian→oro · 2ª: halo · 3ª: superficie */ background-color: transparent; background-image: linear-gradient(180deg, var(--rc-cyan, #35b7c3), var(--rc-gold, #ddab3e)), radial-gradient(130% 220% at 8% -70%, var(--rct-glow-s), transparent 62%), linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 58%, rgba(255,255,255,.07) 100%); background-repeat: no-repeat; background-size: 3px calc(100% - 28px), 100% 100%, 100% 100%; background-position: 0 50%, 0 0, 0 0; } /* Trama diagonal técnica (apenas perceptible) */ body.rc-public h1:not(.rc-t-plain)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px); opacity: .5; pointer-events: none; } /* Barrido de luz lento */ body.rc-public h1:not(.rc-t-plain)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.10) 40%, var(--rct-glow-s) 62%, transparent); filter: blur(2px); animation: rctSweep 11s cubic-bezier(.55,0,.35,1) infinite; pointer-events: none; } @keyframes rctSweep { 0% { transform: translateX(-130%); opacity: 0; } 10% { opacity: 1; } 55% { opacity: 1; } 100% { transform: translateX(430%); opacity: 0; } } /* Nombres de producto: misma placa, sin versalitas y algo más discreta, porque son cadenas largas ("Fascia delantera Hummer H3 c/letras…"). */ body.rc-public h1.rc-t-prod { text-transform: none; letter-spacing: 0; font-size: clamp(.82rem, .62rem + .8vw, 1.3rem); } /* Centrado (p. ej. Ubicación): sin filo lateral */ body.rc-public h1.text-center { padding-left: clamp(1rem, 2.6vw, 1.75rem); background-size: 0 0, 100% 100%, 100% 100%; } /* ────────────────────────────────────────────────────────────────────────── 2) H2 · Título de sección Sobre fondo claro el neón no se lee, así que la luz va en el subrayado: barra cian→oro con destello, y el texto en degradado grafito→cian. ────────────────────────────────────────────────────────────────────────── */ body.rc-public h2:not(.rc-t-plain) { position: relative; margin-bottom: 1.6rem; padding-bottom: .85rem; font-family: var(--rct-font); font-weight: 400; font-size: clamp(.82rem, .68rem + .6vw, 1.28rem); line-height: 1.45; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; color: #fff; background-image: linear-gradient(96deg, #ffffff 0%, #dbe7ea 40%, var(--rc-cyan, #35b7c3) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Respaldo si el navegador no recorta el degradado al texto */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { body.rc-public h2:not(.rc-t-plain) { background-image: none; -webkit-text-fill-color: currentColor; color: #fff; } } /* Halo cian muy suave detrás del texto: da el aire "iluminado" sin comprometer la lectura sobre blanco */ body.rc-public h2:not(.rc-t-plain)::before { content: ""; position: absolute; left: -8%; top: -45%; width: 70%; height: 190%; z-index: -1; background: radial-gradient(50% 50% at 35% 50%, var(--rct-glow-s), transparent 72%); filter: blur(10px); /* sin el desenfoque se lee como mancha, no como luz */ opacity: .8; pointer-events: none; } /* Barra luminosa inferior */ body.rc-public h2:not(.rc-t-plain)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 74px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--rc-cyan, #35b7c3), var(--rc-gold, #ddab3e)); box-shadow: 0 0 14px var(--rct-glow), 0 0 4px var(--rct-gold-s); } body.rc-public h2.text-center::before { left: 50%; transform: translateX(-50%); } body.rc-public h2.text-center::after { left: 50%; transform: translateX(-50%); } /* ────────────────────────────────────────────────────────────────────────── 3) H3 · Subtítulo Filo vivo a la izquierda, como los enlaces del menú lateral. ────────────────────────────────────────────────────────────────────────── */ body.rc-public h3:not(.rc-t-plain) { position: relative; margin-bottom: 1.1rem; padding-left: 1rem; font-family: var(--rct-font); font-weight: 400; font-size: clamp(.78rem, .7rem + .35vw, 1.02rem); line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; color: #fff; } body.rc-public h3:not(.rc-t-plain)::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 76%; transform: translateY(-50%); border-radius: 3px; background: linear-gradient(180deg, var(--rc-cyan, #35b7c3), var(--rc-gold, #ddab3e)); box-shadow: 0 0 12px var(--rct-glow); } body.rc-public h3.text-center { padding-left: 0; } body.rc-public h3.text-center::before { display: none; } /* ────────────────────────────────────────────────────────────────────────── 4) H4 · Título menor ────────────────────────────────────────────────────────────────────────── */ body.rc-public h4:not(.rc-t-plain) { font-family: var(--rct-font); font-weight: 400; font-size: clamp(.72rem, .68rem + .2vw, .88rem); line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.72); } /* ────────────────────────────────────────────────────────────────────────── 5) Excepciones El pie ya tiene su propio sistema (.rc-f-title); dentro de tarjetas, modales y ventanas emergentes los encabezados son datos, no títulos. ────────────────────────────────────────────────────────────────────────── */ body.rc-public :is(.rc-foot, .modal, .card, .testimonial-card, .swiper) :is(h1, h2, h3, h4) { padding: 0; border: 0; border-radius: 0; font-family: inherit; font-weight: 600; letter-spacing: normal; text-transform: none; color: inherit; background-image: none; background-color: transparent; -webkit-text-fill-color: currentColor; text-shadow: none; box-shadow: none; isolation: auto; } body.rc-public :is(.rc-foot, .modal, .card, .testimonial-card, .swiper) :is(h1, h2, h3, h4)::before, body.rc-public :is(.rc-foot, .modal, .card, .testimonial-card, .swiper) :is(h1, h2, h3, h4)::after { content: none; } /* ────────────────────────────────────────────────────────────────────────── 6) Encendido al entrar en pantalla Las clases las pone el guion de includes/header.php; si no hay JS los títulos se ven igual, solo sin la entrada animada. ────────────────────────────────────────────────────────────────────────── */ body.rc-public .rc-t-anim { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); } body.rc-public .rc-t-anim.rc-t-on { opacity: 1; transform: none; } /* La barra del h2 y el filo del h3 se encienden creciendo */ body.rc-public h2.rc-t-anim::after { transition: width .8s cubic-bezier(.22,1,.36,1) .15s; } body.rc-public h3.rc-t-anim::before { transition: height .8s cubic-bezier(.22,1,.36,1) .15s; } body.rc-public h2.rc-t-anim:not(.rc-t-on)::after { width: 0; } body.rc-public h3.rc-t-anim:not(.rc-t-on)::before { height: 0; } /* ────────────────────────────────────────────────────────────────────────── 7) Menos movimiento a quien lo pide ────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.rc-public h1:not(.rc-t-plain)::after { animation: none; opacity: 0; } body.rc-public .rc-t-anim, body.rc-public .rc-t-anim.rc-t-on { opacity: 1; transform: none; transition: none; } } /* ────────────────────────────────────────────────────────────────────────── 8) Teléfonos ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 575.98px) { body.rc-public h1:not(.rc-t-plain) { letter-spacing: 0; border-radius: 12px; } body.rc-public h2:not(.rc-t-plain) { letter-spacing: 0; } body.rc-public h2:not(.rc-t-plain)::after { width: 58px; } }