/* ============================================================ OnFire Store — sistema de temas (light / dark fluo) El tema se controla con [data-theme] en . ============================================================ */ /* ---------- LIGHT (por defecto) ---------- */ :root, [data-theme="light"] { --bg: #ffffff; --bg-alt: #f7f7f7; --surface: #ffffff; --surface-2: #fafafa; --text: #1c1c1c; --text-soft: #555; --text-muted: #8a8a8a; --border: #ececec; --border-strong: #e0e0e0; --primary: #e80850; /* rosa del logo */ --primary-dark: #c50745; --primary-rgb: 232, 8, 80; --accent: #f8b828; /* amarillo del logo (llama) */ --accent-rgb: 248, 184, 40; --on-accent: #1c1c1c; --accent-glow: none; --on-primary: #ffffff; --navbar-bg: rgba(255, 255, 255, .92); --navbar-border: #efefef; --navbar-shadow: 0 2px 16px rgba(0, 0, 0, .05); --card-shadow: 0 4px 18px rgba(0, 0, 0, .06); --card-hover-shadow: 0 8px 22px rgba(0, 0, 0, .12); --card-hover-border: var(--primary); --footer-bg: #111111; --footer-text: #ffffff; --header-bg: #f7f7f7; --header-text: #1c1c1c; --media-bg: #f3f3f3; --glow: 0 0 0 rgba(0, 0, 0, 0); --text-glow: none; --price-glow: none; } /* ---------- DARK FLUO ---------- */ [data-theme="dark"] { --bg: #08080c; --bg-alt: #0e0e16; --surface: #14141e; --surface-2: #1b1b29; --text: #f3f3fa; --text-soft: #c4c4d6; --text-muted: #8b8ba6; --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16); --primary: #e80850; /* rosa del logo */ --primary-dark: #c50745; --primary-rgb: 232, 8, 80; --accent: #f8b828; /* amarillo del logo (llama) */ --accent-rgb: 248, 184, 40; --on-accent: #1c1c1c; --accent-glow: 0 0 14px rgba(248, 184, 40, .45); --on-primary: #0a0a0f; --navbar-bg: rgba(8, 8, 12, .82); --navbar-border: rgba(255, 255, 255, .07); --navbar-shadow: 0 2px 24px rgba(0, 0, 0, .55); --card-shadow: 0 6px 22px rgba(0, 0, 0, .5); --card-hover-shadow: 0 8px 22px rgba(var(--primary-rgb), .26); --card-hover-border: var(--primary); --footer-bg: #050507; --footer-text: #f3f3fa; --header-bg: linear-gradient(135deg, #14141e 0%, #0b0b12 100%); --header-text: #f3f3fa; --media-bg: #0c0c14; --glow: 0 0 18px rgba(var(--primary-rgb), .55); --text-glow: 0 0 12px rgba(var(--primary-rgb), .55); --price-glow: 0 0 14px rgba(var(--primary-rgb), .6); } /* ============================================================ Base ============================================================ */ body { background: var(--bg); color: var(--text); transition: background-color .35s ease, color .35s ease; /* Sticky footer: si la página ocupa poco, el footer queda igual abajo. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } body > main { flex: 1 0 auto; } body > footer { flex-shrink: 0; } a { text-decoration: none; } .brand-fire { color: var(--primary); text-shadow: var(--text-glow); } .text-muted { color: var(--text-muted) !important; } /* Selección de texto en fluo */ ::selection { background: rgba(var(--primary-rgb), .85); color: var(--on-primary); } /* ============================================================ Componentes Bootstrap temáticos (cards, tablas, breadcrumb) Se declaran temprano para que las cards específicas (.product-card, .category-card, .pack-card) los sobreescriban. ============================================================ */ .card { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: var(--text); } /* Utilidad text-dark de Bootstrap -> color de texto del tema */ .text-dark { color: var(--text) !important; } /* Tablas */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text); color: var(--text); border-color: var(--border); } .table > :not(caption) > * > * { background-color: transparent; color: var(--text); border-bottom-color: var(--border); } .table > thead.table-light > tr > th, .table .table-light, .table .table-light > th, .table .table-light > td { --bs-table-bg: var(--surface-2); background-color: var(--surface-2); color: var(--text); border-color: var(--border); } /* Hover de las cards de Contacto (cambio de color) */ .contact-card { border: 1px solid transparent !important; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } .contact-card:hover { border-color: var(--primary) !important; background: var(--surface-2); box-shadow: var(--card-hover-shadow); } /* Pills de categoría (detalle de producto, puede tener varias) */ .category-pill { background: transparent; border: 1px solid var(--primary); color: var(--primary); font-weight: 600; font-size: .8rem; padding: .35rem .8rem; transition: .2s ease; } .category-pill:hover { background: var(--primary); color: var(--on-primary); box-shadow: var(--glow); } /* Breadcrumb (visible en ambos temas) */ .breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); } .breadcrumb-item a { color: var(--primary); } .breadcrumb-item a:hover { color: var(--primary-dark); } .breadcrumb-item.active { color: var(--text-soft); } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* ============================================================ Navbar ============================================================ */ .navbar { background: var(--navbar-bg); border-bottom: 1px solid var(--navbar-border); box-shadow: var(--navbar-shadow); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); transition: background-color .35s ease, border-color .35s ease; } .navbar-brand { font-size: 1.4rem; letter-spacing: .5px; color: var(--text); display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } /* Logo en imagen */ .brand-logo { height: 44px; width: auto; display: block; transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease; } .navbar-brand:hover .brand-logo { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(var(--primary-rgb), .55)); } /* Slogan bajo el logo */ .brand-slogan { margin-top: 4px; font-size: .68rem; font-weight: 600; letter-spacing: .3px; color: var(--text); /* blanco en tema oscuro, casi negro en tema claro */ white-space: nowrap; transition: color .25s ease; } .navbar-brand:hover .brand-slogan { color: var(--primary); } /* Slogan en el footer (blanco sobre el fondo oscuro del footer) */ .footer-slogan { color: var(--footer-text); font-weight: 600; font-size: 1.02rem; letter-spacing: .2px; } .navbar .nav-link { color: var(--text-soft); font-weight: 500; position: relative; transition: color .25s ease; } .navbar .nav-link::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .35rem; height: 2px; background: var(--primary); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; box-shadow: var(--glow); } .navbar .nav-link:hover { color: var(--text); } .navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); } .navbar .nav-link.active { color: var(--primary) !important; font-weight: 600; } .navbar-toggler { border-color: var(--border-strong); } /* Botón de carrito */ .btn-cart { background: var(--surface-2); border: 1px solid var(--border); border-radius: 50px; padding: .45rem .8rem; color: var(--text); font-size: 1.1rem; transition: .25s ease; } .btn-cart:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--glow); } /* Toggle de tema */ .theme-toggle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; transition: .3s ease; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); box-shadow: var(--glow); transform: rotate(-15deg); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ============================================================ Botones ============================================================ */ .btn-primary { background: var(--primary); border: none; color: var(--on-primary); font-weight: 600; transition: .25s ease; } .btn-primary:hover, .btn-primary:focus { background: var(--primary-dark); color: var(--on-primary); box-shadow: var(--glow); transform: translateY(-2px); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); font-weight: 600; transition: .25s ease; } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--glow); transform: translateY(-2px); } .btn-link { color: var(--primary); } .btn-link:hover { color: var(--primary-dark); } /* ============================================================ Hero ============================================================ */ .hero { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; background-color: #0a0a0f; } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: hero-kenburns 20s ease-in-out infinite alternate; } @keyframes hero-kenburns { from { transform: scale(1.05); } to { transform: scale(1.18) translateY(-2%); } } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(232, 8, 80, .72) 0%, rgba(170, 10, 65, .55) 42%, rgba(8, 8, 14, .82) 100%); } [data-theme="dark"] .hero-overlay { background: linear-gradient(120deg, rgba(232, 8, 80, .55) 0%, rgba(120, 10, 70, .45) 40%, rgba(8, 8, 12, .92) 100%); } .hero .container { position: relative; z-index: 2; } .hero h1 { font-size: 4rem; font-weight: 800; line-height: 1.1; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); } .hero p { font-size: 1.2rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); } @media (max-width: 768px) { .hero h1 { font-size: 2.4rem; } } @media (prefers-reduced-motion: reduce) { .hero-media { animation: none; } } /* ============================================================ Encabezado de páginas internas ============================================================ */ .page-header { background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--border); padding: 2.5rem 0; } .page-header h1 { font-weight: 800; color: var(--header-text); } .page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: var(--text-muted); } .page-header .breadcrumb-item.active { color: var(--text); } /* ============================================================ Secciones ============================================================ */ .section-title { font-weight: 800; margin-bottom: 30px; color: var(--text); display: flex; align-items: center; gap: 12px; } /* Barra-acento amarilla (color secundario del logo) */ .section-title::before { content: ""; flex: 0 0 auto; width: 5px; height: 1.05em; border-radius: 3px; background: var(--accent); box-shadow: var(--accent-glow); } [data-theme="dark"] .section-title { text-shadow: 0 0 1px rgba(var(--primary-rgb), .2); } .pack-section { background: var(--bg-alt); } /* ============================================================ Card de producto ============================================================ */ .product-card { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 10px; overflow: hidden; box-shadow: var(--card-shadow); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; } .product-card:hover { transform: translateY(-6px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); } /* Contenedor de la imagen: bordes redondeados en TODAS las esquinas */ .product-media { position: relative; margin-top: 6px; border-radius: 14px; overflow: hidden; background: var(--media-bg); aspect-ratio: 1 / 1; } .product-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .product-card:hover .product-media img { transform: scale(1.1); } /* Velo fluo sutil al pasar el mouse */ .product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(var(--primary-rgb), .22)); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .product-card:hover .product-media::after { opacity: 1; } .product-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: .85rem .4rem .4rem; } /* Nombre: blanco, exactamente 2 líneas en todas las cards */ .product-name { margin: 0 0 .35rem; font-size: .96rem; line-height: 1.3; font-weight: 600; min-height: calc(1.3em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-name a { color: var(--text); transition: color .2s ease; } .product-card:hover .product-name a { color: var(--primary); } /* Descripción: 2 líneas reservadas siempre (aunque esté vacía) */ .product-desc { color: var(--text-muted); font-size: .82rem; line-height: 1.4; margin: 0 0 .6rem; min-height: calc(1.4em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .price { color: var(--primary); font-size: 1.3rem; font-weight: 800; text-shadow: var(--price-glow); margin-bottom: .7rem; } /* El botón siempre pegado al fondo, alineado en toda la fila */ .product-action { margin-top: auto; } .badge-featured { position: absolute; top: 16px; left: 16px; background: var(--accent); color: var(--on-accent); border-radius: 50px; padding: .28rem .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .3px; z-index: 3; box-shadow: var(--accent-glow); } /* Badge amarillo inline (detalle de producto, etc.) */ .badge-accent { background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: var(--accent-glow); } /* ============================================================ Card de categoría ============================================================ */ .category-card { position: relative; border: 1px solid var(--border); overflow: hidden; border-radius: 20px; box-shadow: var(--card-shadow); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; } .category-card:hover { transform: translateY(-6px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); } .category-card img { height: 250px; object-fit: cover; width: 100%; background: var(--media-bg); transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .category-card:hover img { transform: scale(1.12); } .category-card .overlay-text { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.25rem 1.35rem; background: linear-gradient(transparent 35%, rgba(0, 0, 0, .78)); color: #fff; font-weight: 800; font-size: 1.35rem; z-index: 2; } .category-card:hover .overlay-text { color: var(--primary); text-shadow: var(--text-glow); } .category-card .overlay-text .fs-6 { color: rgba(255, 255, 255, .8); text-shadow: none; } /* ============================================================ Card de pack ============================================================ */ .pack-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--card-shadow); height: 100%; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; } .pack-card:hover { transform: translateY(-6px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); } /* Imagen completa (sin recortar): contain sobre un fondo neutro. */ .pack-card .card-img-top { width: 100%; height: 210px; object-fit: contain; background: var(--media-bg); transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .pack-card:hover .card-img-top { transform: scale(1.05); } .pack-card .card-body { background: var(--surface); } .pack-card h3 { color: var(--text); } /* ============================================================ Detalle de producto ============================================================ */ .product-gallery-main img { width: 100%; border-radius: 20px; object-fit: cover; max-height: 460px; background: var(--media-bg); border: 1px solid var(--border); } .product-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; cursor: pointer; border: 2px solid transparent; background: var(--media-bg); transition: .25s ease; } .product-thumb:hover { transform: translateY(-3px); } .product-thumb.active { border-color: var(--primary); box-shadow: var(--glow); } /* ============================================================ Formularios ============================================================ */ .form-control, .form-select { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); } .form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .25); } .form-control::placeholder { color: var(--text-muted); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* ============================================================ WhatsApp flotante ============================================================ */ .whatsapp-floating { position: fixed; right: 20px; bottom: 20px; z-index: 999; } .whatsapp-floating a { width: 65px; height: 65px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .2s; } [data-theme="dark"] .whatsapp-floating a { box-shadow: 0 0 22px rgba(37, 211, 102, .6); } .whatsapp-floating a:hover { transform: scale(1.08); } /* ============================================================ Footer ============================================================ */ footer { background: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--border); } footer h5, footer h6 { color: var(--footer-text); } .footer-links a { color: rgba(255, 255, 255, .7); transition: color .2s ease; } .footer-links a:hover { color: var(--primary); } .footer-links li { margin-bottom: .4rem; } /* ============================================================ Paginación (moderna, temática) ============================================================ */ .pagination { gap: .4rem; margin-bottom: 0; } /* Texto "Mostrando X de Y" */ nav[role="navigation"] .text-sm, nav[role="navigation"] p.small { color: var(--text-muted) !important; } .page-item .page-link { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px !important; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font-weight: 600; font-size: .95rem; transition: .25s ease; box-shadow: none; } .page-item .page-link:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); transform: translateY(-2px); } .page-item .page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .25); color: var(--primary); } .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--glow); } .page-item.disabled .page-link { background: transparent; border-color: var(--border); color: var(--text-muted); opacity: .55; } /* ============================================================ Testimonios / comentarios de clientes ============================================================ */ .testimonial-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--card-shadow); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease; } .testimonial-card:hover { transform: translateY(-6px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); } /* Carrusel horizontal de testimonios */ .testimonials-track { display: flex; gap: 1.5rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 2px 18px; scrollbar-width: none; } .testimonials-track::-webkit-scrollbar { display: none; } .testimonial-slide { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; } @media (max-width: 991.98px) { .testimonial-slide { flex-basis: calc((100% - 1.5rem) / 2); } } @media (max-width: 575.98px) { .testimonial-slide { flex-basis: 86%; } } .testimonials-nav { display: flex; gap: .5rem; } .t-nav-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: .25s ease; } .t-nav-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); box-shadow: var(--glow); } .t-nav-btn:disabled { opacity: .35; cursor: default; } /* Slider de fotos/videos */ .testimonial-slider { background: var(--media-bg); } .testimonial-media { width: 100%; height: 240px; object-fit: cover; display: block; background: var(--media-bg); } .testimonial-slider .carousel-control-prev, .testimonial-slider .carousel-control-next { width: 12%; opacity: 0; transition: opacity .25s ease; } .testimonial-card:hover .carousel-control-prev, .testimonial-card:hover .carousel-control-next { opacity: .9; } .testimonial-slider .carousel-control-prev-icon, .testimonial-slider .carousel-control-next-icon { background-color: rgba(var(--primary-rgb), .85); border-radius: 50%; padding: 12px; background-size: 50%; } .testimonial-slider .carousel-indicators { margin-bottom: .5rem; } .testimonial-slider .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; border: 0; background-color: rgba(255, 255, 255, .6); } .testimonial-slider .carousel-indicators .active { background-color: var(--primary); } /* Cuerpo del comentario */ .testimonial-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem 1.4rem 1.4rem; } .testimonial-quote { font-size: 1.8rem; line-height: 1; color: var(--accent); margin-bottom: .4rem; } .testimonial-text { color: var(--text-soft); font-size: .98rem; line-height: 1.6; margin: 0 0 1.1rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .testimonial-author { margin-top: auto; display: flex; align-items: center; gap: 10px; } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex: 0 0 auto; box-shadow: var(--glow); } .testimonial-name { font-weight: 700; color: var(--text); } /* ============================================================ Estados vacíos ============================================================ */ .empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-muted); } .empty-state i { font-size: 3rem; color: var(--border-strong); } /* ============================================================ Reveal al scroll: títulos y cards aparecen al entrar en pantalla. Sólo se ocultan si JS está activo (clase .js-anim en ). ============================================================ */ .pre-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; } .pre-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pre-reveal { opacity: 1; transform: none; transition: none; } } /* Carrito: en mobile la tabla se apila para que el nombre del producto tenga el ancho completo (en vez de quedar apretado en una columna). */ @media (max-width: 575.98px) { .cart-table thead { display: none; } .cart-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .85rem 0; border-bottom: 1px solid rgba(128, 128, 128, .2); } .cart-table tbody tr:last-child { border-bottom: 0; } .cart-table td { border: 0 !important; padding: 0 !important; } .cart-table td:nth-child(1) { flex: 1 1 100%; /* Producto: línea completa */ } .cart-table td:nth-child(2) { margin-right: auto; /* Cantidad: a la izquierda de la 2da línea */ text-align: left !important; } .cart-table td:nth-child(3) { text-align: right !important; font-size: 1.05rem; } } /* List-group: respeta el tema (Bootstrap lo pinta blanco por defecto). */ .list-group-item { background-color: transparent; color: var(--text); border-color: var(--border); } /* Date input: ícono del calendario visible en tema oscuro. */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .65; }