/* ========================================================= Revista Kawaii — main stylesheet Organised by section. Custom properties drive light/dark theming via [data-kwn-theme] on . ========================================================= */ /* ---------- Design tokens ---------- */ :root { --kwn-primary: #FF5D8F; --kwn-secondary: #3FBF8F; --kwn-accent: #FFC93C; --kwn-bg: #FFF9FB; --kwn-surface: #FFFFFF; --kwn-text: #241C29; --kwn-text-muted: #6b5b6e; --kwn-border: #F3E3EA; --kwn-score-great: #3FBF8F; --kwn-score-good: #8FCB4A; --kwn-score-mixed: #FFC93C; --kwn-score-poor: #FF6161; --kwn-score-neutral: #A79CAC; /* Paleta fija para las etiquetas (Entradas/Reseñas) — pastel, a juego con el estilo "kawaii" del tema, pero independiente de --kwn-primary/ secondary/accent para que nunca desentone si esos colores cambian. */ --kwn-tag-1-bg: #FFD9E6; --kwn-tag-1-text: #C23568; /* rosa */ --kwn-tag-2-bg: #FFE0D6; --kwn-tag-2-text: #C9602E; /* coral */ --kwn-tag-3-bg: #D7F5E9; --kwn-tag-3-text: #1F8F66; /* menta */ --kwn-tag-4-bg: #FFF3C9; --kwn-tag-4-text: #A97B00; /* amarillo */ --kwn-tag-5-bg: #E9DDFB; --kwn-tag-5-text: #7B4FCB; /* lavanda */ --kwn-tag-6-bg: #D9EEFB; --kwn-tag-6-text: #2B7FB8; /* celeste */ --kwn-tag-7-bg: #FFE6C7; --kwn-tag-7-text: #C97A1E; /* melocotón */ --kwn-tag-8-bg: #FBD9F0; --kwn-tag-8-text: #B23896; /* fucsia */ --kwn-radius-sm: 8px; --kwn-radius: 16px; --kwn-radius-lg: 24px; --kwn-shadow: 0 6px 24px rgba(255, 93, 143, 0.12); --kwn-shadow-sm: 0 2px 8px rgba(36, 28, 41, 0.08); --kwn-font-heading: 'Baloo 2', 'Segoe UI', sans-serif; --kwn-font-body: 'Noto Sans', 'Noto Sans JP', system-ui, sans-serif; --kwn-container: 1200px; } html[data-kwn-theme="dark"] { --kwn-bg: #14101A; --kwn-surface: #1F1826; --kwn-text: #F3E9F0; --kwn-text-muted: #B9A9C0; --kwn-border: #2C2333; --kwn-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); --kwn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Nada puede ensanchar la página a lo ancho. En móviles, Chrome de Android cuenta el panel del menú desplegable —que espera fuera de la pantalla, a la derecha— como parte del ancho del documento. El resultado era que el navegador se alejaba para que cupiera todo (el contenido se veía encogido contra el borde izquierdo) y los elementos fijos, como la barra de redes sociales, se estiraban sobre ese ancho falso en vez de sobre la pantalla: por eso se salían los últimos iconos. "clip" recorta ese desbordamiento SIN convertir la página en un contenedor de scroll, así que la cabecera fija al hacer scroll sigue funcionando; "hidden" queda solo como respaldo para navegadores antiguos que no entienden "clip". */ html { overflow-x: hidden; } @supports (overflow-x: clip) { html { overflow-x: clip; } } /* * Cortafuegos definitivo contra el ancho. Lo anterior (overflow en ) NO * es suficiente por sí solo: el navegador propaga el overflow del elemento * raíz al viewport, y Chrome en Android sigue midiendo el contenido y * ensanchando el área de maquetación hasta abarcarlo. Resultado: la página se * ve encogida y pegada a la izquierda y los elementos fijos —la barra * flotante de redes— se estiran fuera de la pantalla. Y aparece "al * desplazarse", no al cargar, porque el recálculo ocurre en el primer * reflujo (imágenes en carga diferida, animaciones de entrada). * * Puesto en cambio sobre un envoltorio intermedio, "overflow-x: clip" sí * impide que lo que haya dentro cuente para el ancho del documento. Así, * cualquier cosa que en el futuro se salga de lo previsto —un embed pegado a * mano, un plugin, un bloque nuevo— queda contenida y no puede volver a * descuadrar el sitio entero. * * Es la red de seguridad, no la solución de fondo: el contenido ancho que sí * hay que poder leer (bloques de código, tablas) se hace desplazable dentro * de su propia caja más abajo, para que se recorte nada. * * Solo bajo @supports: el respaldo "hidden" no vale aquí, porque en un * elemento que no es la raíz convertiría el envoltorio en un contenedor de * scroll vertical propio. */ @supports (overflow-x: clip) { .kwn-site-content, .kwn-footer { overflow-x: clip; } } body { margin: 0; background: var(--kwn-bg); color: var(--kwn-text); font-family: var(--kwn-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } img { max-width: 100%; height: auto; display: block; } a { color: var(--kwn-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-family: var(--kwn-font-heading); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; color: var(--kwn-text); } p { margin: 0 0 1.2em; } ul, ol { padding-left: 1.3em; } blockquote { margin: 1.5em 0; padding: .8em 1.4em; border-left: 4px solid var(--kwn-primary); background: var(--kwn-surface); border-radius: 0 var(--kwn-radius-sm) var(--kwn-radius-sm) 0; font-style: italic; } table { width: 100%; border-collapse: collapse; margin: 1.5em 0; } th, td { padding: .6em .8em; border: 1px solid var(--kwn-border); text-align: left; } button, input, select, textarea { font-family: inherit; font-size: 1rem; } /* ---------- Red de seguridad de anchura (contenido de los artículos) ---------- Esto existe por un motivo muy concreto y muy fácil de pasar por alto: en el móvil, una pieza de contenido más ancha que la pantalla NO se recorta sin más. Chrome en Android ensancha el "viewport de maquetación" hasta el ancho de ese contenido, y a partir de ahí TODA la página se ve encogida y pegada a la izquierda, y los elementos fijos (la barra flotante de redes, la cabecera) se salen de la pantalla. Un solo bloque de código con una línea larga, o una tabla de seis columnas dentro de un artículo, basta para descuadrar la portada entera. La comprobación que tiene que cumplirse siempre, en cualquier página y a cualquier ancho: documentElement.scrollWidth === documentElement.clientWidth ---------------------------------------------------------------------------- */ /* Bloques de código: se desplazan dentro de su propia caja en vez de ensanchar la página. */ pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Palabras y enlaces sin espacios (URLs pegadas, hashes, nombres de archivo largos) parten de línea en vez de sobresalir de su columna. */ p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, th, td, .kwn-card__title { overflow-wrap: break-word; } /* Vídeos y embeds pegados a mano (YouTube, mapas, publicaciones incrustadas). "img" ya tenía max-width más arriba; estos no lo tenían. */ iframe, embed, object, video { max-width: 100%; } .wp-block-embed__wrapper iframe { width: 100%; } /* Tablas anchas: el bloque "Tabla" de Gutenberg ya llega envuelto en

, así que basta con hacer que ese envoltorio se desplace. Las tablas pegadas a mano (editor clásico, bloque de HTML personalizado) las envuelve assets/js/main.js en .kwn-table-scroll al cargar la página. En ambos casos la tabla conserva su ancho natural y es el envoltorio el que se arrastra con el dedo. */ .wp-block-table, .kwn-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .wp-block-table > table, .kwn-table-scroll > table { min-width: max-content; margin-block: 0; } .kwn-table-scroll { margin: 1.5em 0; } .kwn-container { max-width: var(--kwn-container); margin-inline: auto; padding-inline: 20px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Gutenberg alignment helpers used by our own blocks + core blocks */ .alignwide { max-width: 1200px; margin-inline: auto; } .alignfull { max-width: none; margin-inline: calc(50% - 50vw); } /* ---------- Header ---------- */ .kwn-header { background: var(--kwn-surface); border-bottom: 1px solid var(--kwn-border); transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease; } /* "Cabecera fija al hacer scroll" en Personalizar → Cabecera (activado por defecto) añade esta clase al — ver includes/core/theme-setup.php. */ body.kwn-header-sticky .kwn-header { position: sticky; top: 0; z-index: 100; } /* Once the visitor scrolls a little (assets/js/main.js adds this class to a sticky header only), the solid header gets a soft frosted-glass look — still opaque enough on its own (the color-mix% keeps it readable even in browsers without backdrop-filter, which just silently drop that line and keep the plain surface colour underneath). */ body.kwn-header-sticky .kwn-header--scrolled { background: color-mix( in srgb, var(--kwn-surface) 86%, transparent ); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: transparent; box-shadow: var(--kwn-shadow-sm); } /* El logo y los botones de la derecha nunca se encogen; el menú es la única pieza elástica y puede reducirse (min-width:0) en vez de desbordarse por encima del resto — que es lo que causaba que el menú se montara sobre el logo/los iconos cuando hay varias categorías en la barra. */ .kwn-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; flex-wrap: nowrap; } .kwn-header__brand { flex: 0 0 auto; min-width: 0; } .kwn-header__actions { flex: 0 0 auto; } /* "Posición del logo: Centrado" en Personalizar → Cabecera — solo en escritorio, el móvil siempre usa el layout normal de arriba. */ @media (min-width: 1101px) { .kwn-header__bar--centered { display: grid; grid-template-columns: 1fr auto 1fr; } .kwn-header__bar--centered .kwn-header__brand { order: 2; justify-self: center; text-align: center; } .kwn-header__bar--centered .kwn-header__nav { order: 1; justify-self: start; } .kwn-header__bar--centered .kwn-header__actions { order: 3; justify-self: end; } } /* ---------- Espacios publicitarios (Personalizar → Publicidad) ---------- */ .kwn-ad-slot { margin-block: 24px; text-align: center; } .kwn-ad-slot__label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kwn-text-muted); margin-bottom: 8px; } .kwn-ad-slot--header, .kwn-ad-slot--footer { padding-block: 16px; } .kwn-ad-slot--sidebar { margin-top: 0; } .kwn-ad-slot--content { padding: 16px; border: 1px dashed var(--kwn-border); border-radius: var(--kwn-radius-sm); } .kwn-logo-text { font-family: var(--kwn-font-heading); font-weight: 800; font-size: 1.6rem; color: var(--kwn-primary); } .kwn-logo-text:hover { text-decoration: none; opacity: .85; } .custom-logo-link img { max-height: var(--kwn-logo-height, 56px); width: auto; } .kwn-site-tagline { display: block; font-size: .8rem; color: var(--kwn-text-muted); margin-top: -4px; } .kwn-header__nav { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex: 1 1 auto; min-width: 0; } .kwn-primary-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; list-style: none; margin: 0; padding: 0; min-width: 0; } .kwn-primary-menu li { position: relative; } .kwn-primary-menu a { color: var(--kwn-text); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; } .kwn-primary-menu a:hover { color: var(--kwn-primary); text-decoration: none; } /* Top-level items = categories. The visual treatment (color / underline / pill) is chosen in Personalizar → Cabecera → "Estilo de resaltado del menú" — only the top level gets it, dropdown subcategory items (.sub-menu a, styled further below) always stay plain text regardless of the choice. */ /* --- Estilo "color" (clásico, por defecto): solo cambia el color --- */ .kwn-primary-menu--color > li.current-menu-item > a, .kwn-primary-menu--color > li.current-menu-ancestor > a, .kwn-primary-menu--color > li.current-menu-parent > a { color: var(--kwn-primary); } /* --- Estilo "underline": subrayado animado (efecto de movimiento) --- */ .kwn-primary-menu--underline > li > a { padding-bottom: 10px; } .kwn-primary-menu--underline > li > a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kwn-primary); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .kwn-primary-menu--underline > li > a:hover, .kwn-primary-menu--underline > li.current-menu-item > a, .kwn-primary-menu--underline > li.current-menu-ancestor > a, .kwn-primary-menu--underline > li.current-menu-parent > a { color: var(--kwn-primary); } .kwn-primary-menu--underline > li > a:hover::before, .kwn-primary-menu--underline > li.current-menu-item > a::before, .kwn-primary-menu--underline > li.current-menu-ancestor > a::before, .kwn-primary-menu--underline > li.current-menu-parent > a::before { transform: scaleX(1); } /* --- Estilo "pill": píldora de color permanente --- */ .kwn-primary-menu--pill > li > a { color: var(--kwn-primary); background: color-mix(in srgb, var(--kwn-primary) 12%, transparent); padding: 8px 16px; border-radius: 999px; } .kwn-primary-menu--pill > li > a:hover { background: var(--kwn-primary); color: #fff; } .kwn-primary-menu--pill > li.current-menu-item > a, .kwn-primary-menu--pill > li.current-menu-ancestor > a, .kwn-primary-menu--pill > li.current-menu-parent > a { background: var(--kwn-primary); color: #fff; } /* Caret on items that have a submenu */ .kwn-primary-menu .menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .6; } /* Dropdown submenus (desktop): hidden by default, shown on hover/focus */ .kwn-primary-menu .sub-menu { display: none; list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 230px; /* Nunca más ancho que la ventana, por si el navegador va muy estrecho. */ max-width: calc(100vw - 32px); background: var(--kwn-surface); border: 1px solid var(--kwn-border); border-radius: var(--kwn-radius-sm); box-shadow: var(--kwn-shadow); z-index: 200; } .kwn-primary-menu .sub-menu .sub-menu { top: -8px; left: 100%; } .kwn-primary-menu li:hover > .sub-menu, .kwn-primary-menu li:focus-within > .sub-menu { display: block; } /* * Desplegables que no caben: se voltean para abrir hacia el lado contrario. * * El problema que resuelve: los submenús se anclan al borde izquierdo de su * item padre y miden 230px. En las últimas categorías del menú eso se sale de * la pantalla por la derecha, y el tercer nivel (que se abre con left: 100%, * o sea a la derecha del submenú padre) se salía a CUALQUIER ancho, incluso a * 1600px — con lo que una subcategoría de una subcategoría era literalmente * inalcanzable. * * La clase la pone assets/js/main.js midiendo cada submenú al abrirse, que es * la única forma fiable de saber si cabe. La regla de :last-child de abajo es * el respaldo para cuando no hay JavaScript: cubre el caso más habitual. */ .kwn-primary-menu > li.kwn-submenu-flip > .sub-menu, .kwn-primary-menu > li:last-child > .sub-menu { left: auto; right: 0; } .kwn-primary-menu .sub-menu li.kwn-submenu-flip > .sub-menu { left: auto; right: 100%; } /* El tercer nivel dentro de un desplegable ya volteado nace hacia la izquierda: si no, vuelve a salirse por donde acabábamos de entrar. */ .kwn-primary-menu > li.kwn-submenu-flip .sub-menu .sub-menu, .kwn-primary-menu > li:last-child .sub-menu .sub-menu { left: auto; right: 100%; } .kwn-primary-menu .sub-menu li { width: 100%; } .kwn-primary-menu .sub-menu a { display: flex; width: 100%; padding: 8px 10px; border-radius: var(--kwn-radius-sm); font-weight: 500; font-size: .88rem; white-space: nowrap; } .kwn-primary-menu .sub-menu a:hover { background: var(--kwn-bg); } .kwn-header__actions { display: flex; align-items: center; gap: 10px; } .kwn-icon-btn { background: none; border: none; cursor: pointer; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--kwn-text); transition: background-color .15s ease; } .kwn-icon-btn:hover { background: var(--kwn-bg); } .kwn-icon-btn svg { display: block; } .kwn-dark-toggle__icon { display: none; align-items: center; justify-content: center; } .kwn-dark-toggle__icon--sun { display: inline-flex; } html[data-kwn-theme="dark"] .kwn-dark-toggle__icon--sun { display: none; } html[data-kwn-theme="dark"] .kwn-dark-toggle__icon--moon { display: inline-flex; } .kwn-header-search { position: absolute; top: 100%; left: 0; right: 0; background: var(--kwn-surface); border-bottom: 1px solid var(--kwn-border); padding: 14px 0; display: none; } .kwn-header-search.is-open { display: block; } .kwn-header-search .search-form { display: flex; gap: 8px; max-width: var(--kwn-container); margin-inline: auto; padding-inline: 20px; } .kwn-header-search input[type="search"] { flex: 1; padding: 10px 14px; border: 1px solid var(--kwn-border); border-radius: var(--kwn-radius-sm); background: var(--kwn-bg); color: var(--kwn-text); } .kwn-header-search button { background: var(--kwn-primary); color: #fff; border: none; padding: 0 18px; border-radius: var(--kwn-radius-sm); cursor: pointer; font-weight: 600; } .kwn-header-social { display: flex; flex-wrap: wrap; gap: 4px; } /* Botón de cerrar y fondo oscuro del menú móvil: en escritorio no existen (el menú es una barra horizontal normal), solo aparecen en el panel deslizante. */ .kwn-nav-close { display: none; } .kwn-nav-backdrop { display: none; } #kwn-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .kwn-menu-toggle__bar { display: block; width: 24px; height: 2px; background: var(--kwn-text); margin: 5px 0; border-radius: 2px; } /* ---------- Hero ---------- */ .kwn-hero { position: relative; padding: 64px 0; text-align: center; background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--kwn-primary) 12%, transparent), transparent 55%), radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--kwn-secondary) 14%, transparent), transparent 55%); } .kwn-hero--compact { padding: 36px 0; } .kwn-hero--tall { padding: 100px 0; } .kwn-hero--align-left { text-align: left; } .kwn-hero__title { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 780px; margin-inline: auto; } .kwn-hero--align-left .kwn-hero__title { margin-inline: 0; } .kwn-hero__subtitle { font-size: 1.15rem; color: var(--kwn-text-muted); max-width: 620px; margin: 0 auto; } .kwn-hero--align-left .kwn-hero__subtitle { margin-inline: 0; } /* ---------- Hero slider (native, Swiper.js) ---------- */ .kwn-hero-slider { padding: 0; background: var(--kwn-text); overflow: hidden; } .kwn-hero-slider .swiper, .kwn-hero-slider .swiper-wrapper, .kwn-hero-slider .swiper-slide { height: clamp(360px, 52vw, 560px); } .kwn-hero-slider--compact .swiper, .kwn-hero-slider--compact .swiper-wrapper, .kwn-hero-slider--compact .swiper-slide { height: clamp(260px, 36vw, 400px); } .kwn-hero-slider--tall .swiper, .kwn-hero-slider--tall .swiper-wrapper, .kwn-hero-slider--tall .swiper-slide { height: clamp(440px, 68vw, 720px); } .kwn-hero-slider .swiper-slide { position: relative; background-image: var(--kwn-slide-bg); background-size: cover; background-position: center; background-color: var(--kwn-text); display: flex; align-items: center; } @media (max-width: 640px) { .kwn-hero-slider .swiper-slide { /* Falls back to the desktop image automatically when no mobile image was set for this slide. */ background-image: var(--kwn-slide-bg-mobile, var(--kwn-slide-bg)); } } .kwn-hero-slider__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(20, 16, 26, var(--kwn-hero-overlay-top, .25)) 0%, rgba(20, 16, 26, var(--kwn-hero-overlay-bottom, .72)) 100% ); } .kwn-hero-slider__content { position: relative; z-index: 1; text-align: center; color: #fff; width: 100%; } .kwn-hero-slider--align-left .kwn-hero-slider__content { text-align: left; } .kwn-hero-slider--align-left .kwn-hero-slider__content .kwn-hero__title, .kwn-hero-slider--align-left .kwn-hero-slider__content .kwn-hero__subtitle { margin-inline: 0; } .kwn-hero-slider__content .kwn-hero__title { color: #fff; } .kwn-hero-slider__content .kwn-hero__subtitle { color: rgba(255, 255, 255, .88); } .kwn-hero-slider__cta { display: inline-block; margin-top: 18px; } .kwn-hero-slider .swiper-pagination-bullet { background: #fff; opacity: .55; } .kwn-hero-slider .swiper-pagination-bullet-active { opacity: 1; background: var(--kwn-primary); } .kwn-hero-slider .swiper-button-prev, .kwn-hero-slider .swiper-button-next { width: 44px; height: 44px; background: rgba(20, 16, 26, .4); border-radius: 50%; color: #fff; backdrop-filter: blur(2px); transition: background .2s ease; } .kwn-hero-slider .swiper-button-prev:hover, .kwn-hero-slider .swiper-button-next:hover { background: var(--kwn-primary); } .kwn-hero-slider .swiper-button-prev::after, .kwn-hero-slider .swiper-button-next::after { font-size: 18px; font-weight: 700; } @media (max-width: 640px) { .kwn-hero-slider .swiper-button-prev, .kwn-hero-slider .swiper-button-next { display: none; } } /* * La flecha del slider se aparta de la barra flotante de redes. * * Swiper coloca sus flechas pegadas al borde de la pantalla (right: 10px) y a * media altura, que es exactamente donde vive la barra flotante. Y la barra * está por encima (z-index 90 contra 10), así que se comía la flecha * "siguiente": se veía la de ir atrás pero no se podía avanzar con el ratón. * * Solo se mueve la flecha del lado donde esté la barra, que es el que estorba. * La clase del la pone el filtro body_class de * includes/core/theme-setup.php — desde el pie de página, donde se dibuja la * barra, no hay forma de seleccionar hacia arriba con CSS. * * Va dentro de un @media porque por debajo de 760px la barra desaparece (o * pasa a ser horizontal abajo, donde no molesta), así que ahí no hay nada de * lo que apartarse. */ @media (min-width: 761px) { body.kwn-has-social-bar-right .kwn-hero-slider .swiper-button-next { right: 68px; } body.kwn-has-social-bar-left .kwn-hero-slider .swiper-button-prev { left: 68px; } } /* ---------- Section headings ---------- */ .kwn-section { padding-block: 48px; } .kwn-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .kwn-section__title, .kwn-anime-grid__title { font-size: 1.6rem; position: relative; padding-left: 16px; border-left: 6px solid var(--kwn-primary); } .kwn-section__link { font-weight: 600; font-size: .9rem; } /* ---------- Cards grid ---------- */ .kwn-cards-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); } .kwn-cards-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .kwn-cards-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } /* Fade-in-on-scroll: assets/js/main.js adds "kwn-fade-ready" to only when IntersectionObserver exists and the visitor hasn't asked for reduced motion — so without JS, or with it disabled, nothing here ever applies and every card is simply visible immediately (progressive enhancement, never a cause of missing/invisible content). */ .kwn-fade-ready .kwn-cards-grid > *, .kwn-fade-ready .kwn-ranking-item { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .kwn-fade-ready .kwn-cards-grid > *.kwn-fade-in, .kwn-fade-ready .kwn-ranking-item.kwn-fade-in { opacity: 1; transform: translateY(0); } /* ---------- Populares del mes (slider horizontal) ---------- */ .kwn-popular-slider { position: relative; display: flex; align-items: center; gap: 10px; } .kwn-popular-slider__track { display: flex; gap: 18px; list-style: none; margin: 0; padding: 4px 2px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .kwn-popular-slider__track::-webkit-scrollbar { display: none; } .kwn-popular-slider__item { flex: 0 0 150px; scroll-snap-align: start; } .kwn-popular-slider__link { display: block; position: relative; color: var(--kwn-text); } .kwn-popular-slider__link:hover { text-decoration: none; } .kwn-popular-slider__thumb { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--kwn-radius); overflow: hidden; background: var(--kwn-bg); box-shadow: var(--kwn-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .kwn-popular-slider__link:hover .kwn-popular-slider__thumb { transform: translateY(-3px); box-shadow: var(--kwn-shadow); } .kwn-popular-slider__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .kwn-popular-slider__thumb-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--kwn-primary), var(--kwn-secondary)); opacity: .3; } .kwn-popular-slider__rank { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: rgba(20, 16, 26, .65); color: #fff; font-size: .78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; z-index: 1; } .kwn-popular-slider__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: .86rem; font-weight: 700; line-height: 1.3; } .kwn-popular-slider__nav { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--kwn-surface); box-shadow: var(--kwn-shadow-sm); color: var(--kwn-text); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s ease, transform .15s ease; } .kwn-popular-slider__nav:hover { opacity: .85; transform: scale(1.05); } @media (max-width: 640px) { .kwn-popular-slider__nav { display: none; } .kwn-popular-slider__item { flex-basis: 130px; } } .kwn-card { background: var(--kwn-surface); border-radius: var(--kwn-radius); overflow: hidden; box-shadow: var(--kwn-shadow-sm); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } .kwn-card:hover { transform: translateY(-4px); box-shadow: var(--kwn-shadow); } .kwn-card__thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; } .kwn-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .kwn-card:hover .kwn-card__thumb img { transform: scale(1.06); } /* Especificidad de dos clases a propósito: `.kwn-score-badge` declara `position: relative` más abajo en esta misma hoja y, con un solo nivel de clase, ganaba por orden de aparición — la nota se colaba en el flujo normal de la tarjeta en vez de quedar flotando sobre la miniatura. */ .kwn-card__thumb .kwn-card__score { position: absolute; top: 10px; right: 10px; z-index: 2; } .kwn-card__type { position: absolute; top: 10px; left: 10px; background: rgba(20, 16, 26, .65); color: #fff; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; } .kwn-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .kwn-card__category { display: inline-flex; align-self: flex-start; font-size: .7rem; font-weight: 700; color: #fff; background: var(--kwn-primary); text-transform: uppercase; letter-spacing: .03em; padding: 4px 12px; border-radius: 999px; transition: opacity .15s ease, transform .15s ease; } .kwn-card__category:hover { opacity: .85; text-decoration: none; color: #fff; transform: translateY(-1px); } .kwn-category-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } /* ---------- Etiquetas (post_tag) ---------- */ .kwn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0; } .kwn-tag { display: inline-flex; font-size: .8rem; font-weight: 600; padding: 5px 13px; border-radius: 999px; transition: opacity .15s ease, transform .15s ease; } .kwn-tag:hover { opacity: .8; text-decoration: none; transform: translateY(-1px); } .kwn-tag--1 { background: var(--kwn-tag-1-bg); color: var(--kwn-tag-1-text); } .kwn-tag--2 { background: var(--kwn-tag-2-bg); color: var(--kwn-tag-2-text); } .kwn-tag--3 { background: var(--kwn-tag-3-bg); color: var(--kwn-tag-3-text); } .kwn-tag--4 { background: var(--kwn-tag-4-bg); color: var(--kwn-tag-4-text); } .kwn-tag--5 { background: var(--kwn-tag-5-bg); color: var(--kwn-tag-5-text); } .kwn-tag--6 { background: var(--kwn-tag-6-bg); color: var(--kwn-tag-6-text); } .kwn-tag--7 { background: var(--kwn-tag-7-bg); color: var(--kwn-tag-7-text); } .kwn-tag--8 { background: var(--kwn-tag-8-bg); color: var(--kwn-tag-8-text); } .kwn-card__title { font-size: 1.05rem; margin: 0; } .kwn-card__title a { color: var(--kwn-text); } .kwn-card__title a:hover { color: var(--kwn-primary); text-decoration: none; } .kwn-card__excerpt { font-size: .88rem; color: var(--kwn-text-muted); margin: 0; } .kwn-card__meta { font-size: .78rem; color: var(--kwn-text-muted); margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kwn-card__avatar { border-radius: 50%; width: 18px; height: 18px; vertical-align: middle; } /* ---------- Score badge ---------- Rendered as a ring (conic-gradient filled to --kwn-score-pct, set inline per badge by kwn_score_badge()) instead of a flat coloured border — same footprint/sizes as before, reads more like a rating meter. The ::before disc punches the "donut" hole using the same background colour the flat circle always had, so it still shows as one solid disc wherever it sits (card thumbnail overlay, review header, ranking list). */ .kwn-score-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient( var(--kwn-score-ring, var(--kwn-score-neutral)) calc(var(--kwn-score-pct, 0) * 1%), var(--kwn-border) 0 ); box-shadow: var(--kwn-shadow-sm); font-family: var(--kwn-font-heading); font-weight: 800; color: var(--kwn-text); padding: 3px; } .kwn-score-badge::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--kwn-surface); } .kwn-score-badge__value { position: relative; z-index: 1; } .kwn-score-badge--md { width: 46px; height: 46px; font-size: .95rem; } .kwn-score-badge--lg { width: 72px; height: 72px; font-size: 1.4rem; } .kwn-score-badge--sm { width: 34px; height: 34px; font-size: .75rem; } .kwn-score--great { --kwn-score-ring: var(--kwn-score-great); color: var(--kwn-score-great); } .kwn-score--good { --kwn-score-ring: var(--kwn-score-good); color: var(--kwn-score-good); } .kwn-score--mixed { --kwn-score-ring: var(--kwn-score-mixed); color: var(--kwn-score-mixed); } .kwn-score--poor { --kwn-score-ring: var(--kwn-score-poor); color: var(--kwn-score-poor); } .kwn-score--neutral { --kwn-score-ring: var(--kwn-score-neutral); color: var(--kwn-score-neutral); } /* ---------- Single Reseña ---------- */ .kwn-review-header { padding-block: 40px; } .kwn-review-header__grid { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } .kwn-review-header__poster { border-radius: var(--kwn-radius); overflow: hidden; box-shadow: var(--kwn-shadow); } .kwn-review-header__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .kwn-pill { background: var(--kwn-surface); border: 1px solid var(--kwn-border); border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600; color: var(--kwn-text-muted); } .kwn-review-header__title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 6px; } .kwn-review-header__score { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .kwn-review-header__score-label { font-weight: 700; color: var(--kwn-text-muted); } .kwn-score-breakdown { display: grid; gap: 10px; margin: 24px 0; } .kwn-score-breakdown__row { display: grid; grid-template-columns: 140px 1fr 40px; align-items: center; gap: 12px; font-size: .88rem; } .kwn-score-breakdown__bar { height: 8px; border-radius: 999px; background: var(--kwn-border); overflow: hidden; } .kwn-score-breakdown__fill { height: 100%; background: linear-gradient(90deg, var(--kwn-primary), var(--kwn-secondary)); border-radius: 999px; } .kwn-review-box, .kwn-proscons { background: var(--kwn-surface); border-radius: var(--kwn-radius); box-shadow: var(--kwn-shadow-sm); padding: 20px; margin: 24px 0; } .kwn-review-box { display: flex; gap: 18px; } .kwn-review-box__image img { width: 130px; border-radius: var(--kwn-radius-sm); } .kwn-review-box__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kwn-review-box__title { margin: 0; font-size: 1.15rem; } .kwn-review-box__summary { color: var(--kwn-text-muted); font-size: .92rem; margin-top: 8px; } .kwn-proscons, .kwn-review-box__proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .kwn-proscons__col h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; } .kwn-proscons__col--pros h4 { color: var(--kwn-score-great); } .kwn-proscons__col--contras h4 { color: var(--kwn-score-poor); } .kwn-proscons__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .9rem; } .kwn-proscons__col--pros li::before { content: "✓ "; color: var(--kwn-score-great); font-weight: 700; } .kwn-proscons__col--contras li::before { content: "✕ "; color: var(--kwn-score-poor); font-weight: 700; } /* ---------- Post content / single ---------- */ .kwn-content { padding-block: 40px; } .kwn-content__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } .kwn-content__grid--full { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; } .kwn-post__title { font-size: clamp(1.6rem, 3vw, 2.2rem); } .kwn-post__meta { color: var(--kwn-text-muted); font-size: .88rem; margin-bottom: 24px; display: flex; gap: 14px; flex-wrap: wrap; } .kwn-post__thumbnail { border-radius: var(--kwn-radius); overflow: hidden; margin-bottom: 24px; box-shadow: var(--kwn-shadow-sm); } .kwn-post__body :is(h2, h3) { margin-top: 1.6em; } /* ---------- Share buttons ---------- */ .kwn-share-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 28px 0; padding-top: 20px; border-top: 1px solid var(--kwn-border); } .kwn-share-buttons__label { font-weight: 700; font-size: .88rem; color: var(--kwn-text-muted); } .kwn-share-buttons__list { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; } .kwn-share-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--kwn-surface); border: 1px solid var(--kwn-border); color: var(--kwn-text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .kwn-share-btn:hover { background: var(--kwn-primary); border-color: var(--kwn-primary); color: #fff; text-decoration: none; transform: translateY(-2px); } .kwn-share-btn svg { display: block; } .kwn-share-btn--copy { position: relative; } .kwn-share-btn--copy.is-copied { background: var(--kwn-score-great); border-color: var(--kwn-score-great); color: #fff; } .kwn-share-btn--copy.is-copied::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: inherit; border-radius: inherit; font-weight: 700; } /* ---------- Author box ---------- */ .kwn-author-box { display: flex; gap: 16px; background: var(--kwn-surface); border-radius: var(--kwn-radius); box-shadow: var(--kwn-shadow-sm); padding: 20px; margin: 24px 0; } .kwn-author-box__avatar img { border-radius: 50%; display: block; } .kwn-author-box__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--kwn-text-muted); } .kwn-author-box__name { margin: 2px 0 6px; font-size: 1.1rem; } .kwn-author-box__bio { color: var(--kwn-text-muted); font-size: .9rem; margin: 0 0 8px; } .kwn-author-box__link { font-weight: 600; font-size: .85rem; } /* ---------- Ranking de reseñas ---------- */ .kwn-ranking-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .kwn-ranking-item { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; } .kwn-ranking-item__rank { font-family: var(--kwn-font-heading); font-weight: 800; font-size: 1.3rem; color: var(--kwn-text-muted); text-align: center; } .kwn-ranking-item:nth-child(1) .kwn-ranking-item__rank { color: var(--kwn-score-great); font-size: 1.6rem; } .kwn-ranking-item:nth-child(2) .kwn-ranking-item__rank, .kwn-ranking-item:nth-child(3) .kwn-ranking-item__rank { color: var(--kwn-accent); font-size: 1.45rem; } .kwn-ranking-item__card .kwn-card { flex-direction: row; } .kwn-ranking-item__card .kwn-card__thumb { width: 140px; flex-shrink: 0; aspect-ratio: 3/2; } @media (max-width: 640px) { .kwn-ranking-item { grid-template-columns: 34px 1fr; gap: 10px; } .kwn-ranking-item__card .kwn-card { flex-direction: column; } .kwn-ranking-item__card .kwn-card__thumb { width: 100%; } } /* ---------- Sidebar / widgets ---------- */ .kwn-widget { background: var(--kwn-surface); border-radius: var(--kwn-radius); box-shadow: var(--kwn-shadow-sm); padding: 20px; margin-bottom: 24px; } .kwn-widget-title { font-size: 1rem; border-left: 4px solid var(--kwn-primary); padding-left: 10px; margin-bottom: 14px; } /* ---------- Revista Kawaii: Entradas recientes / Comentarios recientes ---------- */ .kwn-widget-recent-posts, .kwn-widget-recent-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .kwn-widget-recent-posts__item { display: flex; align-items: center; gap: 12px; } .kwn-widget-recent-posts__thumb { flex: 0 0 60px; width: 60px; height: 60px; border-radius: var(--kwn-radius-sm); overflow: hidden; display: block; background: var(--kwn-bg); } .kwn-widget-recent-posts__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .kwn-widget-recent-posts__thumb-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--kwn-primary), var(--kwn-secondary)); opacity: .3; } .kwn-widget-recent-posts__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .kwn-widget-recent-posts__title { font-weight: 700; font-size: .9rem; line-height: 1.35; color: var(--kwn-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kwn-widget-recent-posts__title:hover { color: var(--kwn-primary); text-decoration: none; } .kwn-widget-recent-posts__date { font-size: .74rem; color: var(--kwn-text-muted); } .kwn-widget-recent-comments__item { display: flex; align-items: flex-start; gap: 12px; } .kwn-widget-recent-comments__avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; } .kwn-widget-recent-comments__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kwn-widget-recent-comments__author { font-weight: 700; font-size: .84rem; color: var(--kwn-text); } .kwn-widget-recent-comments__excerpt { font-size: .82rem; color: var(--kwn-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kwn-widget-recent-comments__excerpt:hover { color: var(--kwn-primary); text-decoration: none; } /* ---------- Revista Kawaii: Categorías ---------- */ .kwn-widget-categories { list-style: none; margin: 0; padding: 0; } .kwn-widget-categories__item { border-bottom: 1px solid var(--kwn-border); } .kwn-widget-categories__item:last-child { border-bottom: none; } .kwn-widget-categories__link { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: var(--kwn-text); transition: transform .15s ease; } .kwn-widget-categories__link:hover { color: var(--kwn-primary); text-decoration: none; transform: translateX(2px); } .kwn-widget-categories__icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .kwn-widget-categories__icon .kwn-icon { width: 17px; height: 17px; } .kwn-widget-categories__name { flex: 1; font-weight: 600; font-size: .92rem; min-width: 0; } .kwn-widget-categories__count { font-size: .76rem; color: var(--kwn-text-muted); background: var(--kwn-bg); border-radius: 999px; padding: 2px 8px; } .kwn-widget-categories__chevron { color: var(--kwn-text-muted); font-size: 1.1rem; transition: transform .15s ease; } .kwn-widget-categories__link:hover .kwn-widget-categories__chevron { transform: translateX(2px); color: var(--kwn-primary); } /* ---------- Pagination ---------- */ .kwn-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } .kwn-pagination a, .kwn-pagination span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--kwn-radius-sm); background: var(--kwn-surface); border: 1px solid var(--kwn-border); font-weight: 600; font-size: .9rem; } .kwn-pagination .current { background: var(--kwn-primary); color: #fff; border-color: var(--kwn-primary); } .kwn-pagination a:hover { text-decoration: none; border-color: var(--kwn-primary); color: var(--kwn-primary); } /* ---------- Comments ---------- */ .kwn-comments { margin-top: 48px; } .kwn-comments__title { font-size: 1.3rem; margin-bottom: 20px; } .kwn-comments__closed { color: var(--kwn-text-muted); font-style: italic; } .comment-list { list-style: none; padding: 0; } .comment-list .children { list-style: none; padding-left: 32px; } .kwn-comment { background: var(--kwn-surface); border-radius: var(--kwn-radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--kwn-shadow-sm); display: grid; grid-template-columns: 48px 1fr; gap: 4px 14px; } .kwn-comment__avatar { grid-row: 1 / 4; } .kwn-comment__avatar img { border-radius: 50%; display: block; } .kwn-comment__meta { grid-column: 2; font-size: .82rem; color: var(--kwn-text-muted); } .kwn-comment__content { grid-column: 2; } .kwn-comment > .reply { grid-column: 2; margin-top: 4px; } .kwn-comment > .reply .comment-reply-link { font-size: .82rem; font-weight: 700; color: var(--kwn-primary); } .comment-form input, .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--kwn-border); border-radius: var(--kwn-radius-sm); background: var(--kwn-bg); color: var(--kwn-text); margin-bottom: 12px; } .comment-form button, .kwn-btn { background: var(--kwn-primary); color: #fff; border: none; padding: 11px 22px; border-radius: var(--kwn-radius-sm); font-weight: 700; cursor: pointer; display: inline-block; } .comment-form button:hover, .kwn-btn:hover { opacity: .9; text-decoration: none; color: #fff; } /* ---------- Footer ---------- */ .kwn-footer { background: var(--kwn-surface); border-top: 1px solid var(--kwn-border); margin-top: 60px; } /* Brand column stays fixed-width; every other column (widgets, the optional newsletter block, the optional footer menu) auto-fits into the remaining space — so however many of those end up rendering, based on "Columnas de widgets" in Personalizar → Pie de página plus which optional blocks are active, none of them ever overflow into or borrow the brand column's width. */ /* Cuadrícula pareja: cada widget del pie de página es una celda propia, no una lista apilada. ".kwn-footer__col" usa display:contents justamente para eso — la zona de widgets desaparece como caja y sus widgets pasan a ser celdas directas de esta cuadrícula, así que da igual si pones los widgets repartidos en las 3 zonas o todos en la misma: siempre se acomodan en columnas. */ .kwn-footer__top { padding-block: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; align-items: start; } .kwn-footer__col { display: contents; } /* En el pie de página los widgets no llevan la "tarjeta" (fondo + sombra) que sí tienen en la barra lateral: aquí se ven como columnas de texto. */ .kwn-footer__top .kwn-widget { background: none; box-shadow: none; padding: 0; margin-bottom: 0; } /* ---------- Franja de información del pie de página ---------- (Revista Kawaii → Información del sitio: presentación, secciones, legal y contacto. No depende de widgets.) */ /* Todas las columnas ocupan una celda: si "Sobre" ocupara dos, en pantallas de portátil no cabrían las cuatro y "Contacto" se caía a una segunda fila. */ .kwn-footer__info-col { min-width: 0; } /* Icono del sitio como marca de la columna "Sobre". Es el mismo archivo que el favicon de la pestaña, así que llega cuadrado: se redondea y se le deja aire por debajo para que no se pegue al título. "height: auto" con la proporción fija evita que salte al cargar. */ .kwn-footer__about-icon { display: block; width: 56px; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; margin-bottom: 12px; } .kwn-footer__about-text { color: var(--kwn-text-muted); font-size: .88rem; line-height: 1.65; margin: 0 0 14px; } .kwn-footer__social { margin-top: 4px; } /* Los menús del pie (Explorar / Legal) van como lista limpia, sin viñetas ni sangría — antes heredaban el estilo por defecto del navegador. */ .kwn-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .kwn-footer-menu li { margin: 0; } .kwn-footer-menu a { color: var(--kwn-text-muted); font-size: .88rem; transition: color .15s ease; } .kwn-footer-menu a:hover { color: var(--kwn-primary); text-decoration: none; } .kwn-footer-menu .sub-menu { display: none; } .kwn-footer__contact-mail { display: inline-block; font-weight: 600; font-size: .88rem; word-break: break-word; } .kwn-footer__newsletter-title { margin-bottom: 6px; } .kwn-footer__newsletter-desc { color: var(--kwn-text-muted); font-size: .85rem; margin-bottom: 10px; } .kwn-footer__bottom { border-top: 1px solid var(--kwn-border); padding-block: 18px; display: flex; justify-content: center; align-items: center; font-size: .85rem; color: var(--kwn-text-muted); text-align: center; } .kwn-footer__copyright { max-width: 100%; } @media (max-width: 640px) { .kwn-footer__bottom { font-size: .78rem; line-height: 1.5; padding-inline: 12px; word-break: break-word; } } .kwn-social-list { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; flex-wrap: wrap; } .kwn-social-list a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kwn-bg); border: 1px solid var(--kwn-border); color: var(--kwn-text-muted); transition: background-color .15s ease, color .15s ease, transform .15s ease; } .kwn-social-list a:hover { background: var(--kwn-primary); border-color: var(--kwn-primary); color: #fff; text-decoration: none; transform: translateY(-2px); } .kwn-social-list svg { display: block; } /* ---------- Colores de marca de cada red ---------- Se usan en la barra flotante y en el hover de las listas normales. Los valores son los colores oficiales de cada plataforma; X y TikTok son negros, así que en modo oscuro se aclaran un poco más abajo para que no desaparezcan contra el fondo. */ :root { --kwn-brand-facebook: #1877F2; --kwn-brand-instagram: #D6249F; --kwn-brand-x: #101010; --kwn-brand-tiktok: #101010; --kwn-brand-youtube: #FF0000; --kwn-brand-discord: #5865F2; --kwn-brand-whatsapp: #25D366; --kwn-brand-custom: var(--kwn-primary); } html[data-kwn-theme="dark"] { --kwn-brand-x: #3A3A3A; --kwn-brand-tiktok: #3A3A3A; } .kwn-social--facebook { --kwn-brand: var(--kwn-brand-facebook); } .kwn-social--instagram { --kwn-brand: var(--kwn-brand-instagram); } .kwn-social--x { --kwn-brand: var(--kwn-brand-x); } .kwn-social--tiktok { --kwn-brand: var(--kwn-brand-tiktok); } .kwn-social--youtube { --kwn-brand: var(--kwn-brand-youtube); } .kwn-social--discord { --kwn-brand: var(--kwn-brand-discord); } .kwn-social--whatsapp { --kwn-brand: var(--kwn-brand-whatsapp); } .kwn-social--custom { --kwn-brand: var(--kwn-brand-custom); } /* En las listas normales (cabecera/pie) el icono se queda discreto y solo toma el color de su marca al pasar el cursor. */ .kwn-social-list a:hover { background: var(--kwn-brand, var(--kwn-primary)); border-color: var(--kwn-brand, var(--kwn-primary)); } /* ---------- Barra flotante de redes ---------- */ .kwn-social-floating { position: fixed; top: 50%; transform: translateY(-50%); z-index: 90; } .kwn-social-floating--right { right: 0; } .kwn-social-floating--left { left: 0; } .kwn-social-floating__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .kwn-social-floating__link { display: flex; align-items: center; gap: 10px; background: var(--kwn-brand, var(--kwn-primary)); color: #fff; padding: 11px 12px; box-shadow: var(--kwn-shadow-sm); transition: padding .18s ease, filter .18s ease; } .kwn-social-floating--right .kwn-social-floating__link { border-radius: 10px 0 0 10px; } .kwn-social-floating--left .kwn-social-floating__link { border-radius: 0 10px 10px 0; flex-direction: row-reverse; } .kwn-social-floating__link:hover { text-decoration: none; color: #fff; filter: brightness(1.08); } .kwn-social-floating__icon { display: flex; } .kwn-social-floating__icon svg { display: block; width: 20px; height: 20px; } /* La etiqueta con el nombre de la red está siempre en el HTML (lectores de pantalla y buscadores la leen), pero visualmente se despliega al pasar el cursor: con "max-width" en vez de "display:none" la transición es suave. */ .kwn-social-floating__label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: .82rem; font-weight: 600; transition: max-width .25s ease; } .kwn-social-floating__link:hover .kwn-social-floating__label, .kwn-social-floating__link:focus-visible .kwn-social-floating__label { max-width: 140px; } /* Por defecto la barra lateral desaparece en pantallas pequeñas. */ @media (max-width: 760px) { .kwn-social-floating { display: none; } /* ...salvo que se active "Mostrarla también en móviles", donde pasa a ser una barra horizontal abajo y empuja el botón "Volver arriba" hacia arriba para que no se solapen. */ .kwn-social-floating--show-mobile { display: block; top: auto; bottom: 0; left: 0; right: 0; transform: none; } .kwn-social-floating--show-mobile .kwn-social-floating__list { flex-direction: row; gap: 0; } .kwn-social-floating--show-mobile .kwn-social-floating__list li { flex: 1 1 0; } .kwn-social-floating--show-mobile .kwn-social-floating__link { border-radius: 0; justify-content: center; padding: 13px 0; } .kwn-social-floating--show-mobile .kwn-social-floating__label { display: none; } .kwn-social-floating--show-mobile ~ .kwn-back-to-top { bottom: 72px; } } @media (prefers-reduced-motion: reduce) { .kwn-social-floating__link, .kwn-social-floating__label { transition: none; } } /* ---------- Native WordPress widgets (Recent Posts, Archives, etc.) ---------- */ .kwn-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .kwn-widget ul ul { padding-left: 14px; margin-top: 8px; } .kwn-widget li { font-size: .9rem; padding-bottom: 10px; border-bottom: 1px solid var(--kwn-border); } .kwn-widget li:last-child { border-bottom: none; padding-bottom: 0; } .kwn-widget li a { color: var(--kwn-text); font-weight: 600; } .kwn-widget li a:hover { color: var(--kwn-primary); text-decoration: none; } .kwn-widget .post-date, .kwn-widget small, .kwn-widget .rss-date { display: block; font-size: .78rem; color: var(--kwn-text-muted); font-weight: 400; margin-top: 2px; } .kwn-widget select { width: 100%; padding: 9px 10px; border: 1px solid var(--kwn-border); border-radius: var(--kwn-radius-sm); background: var(--kwn-bg); color: var(--kwn-text); } .kwn-widget .wp-block-search__input, .kwn-widget input[type="search"], .kwn-widget input[type="text"] { padding: 9px 10px; border: 1px solid var(--kwn-border); border-radius: var(--kwn-radius-sm); background: var(--kwn-bg); color: var(--kwn-text); width: 100%; } .kwn-widget .wp-block-tag-cloud a, .kwn-widget .tagcloud a { display: inline-block; font-size: .78rem !important; background: var(--kwn-bg); border: 1px solid var(--kwn-border); padding: 5px 10px; border-radius: 999px; margin: 0 6px 6px 0; color: var(--kwn-text-muted); } .kwn-widget .tagcloud a:hover { color: var(--kwn-primary); border-color: var(--kwn-primary); text-decoration: none; } /* ---------- Back to top ---------- */ .kwn-back-to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--kwn-primary); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: var(--kwn-shadow); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; /* Deliberately very high — floating widgets added later by plugins (cookie-consent icons, chat bubbles, etc.) commonly use a high z-index of their own and would otherwise render on top of this button and make it look like it "disappeared". */ z-index: 999999; } .kwn-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .kwn-back-to-top:hover { opacity: .9; } /* Avoid it floating awkwardly over the open off-canvas mobile menu. */ .kwn-nav-open .kwn-back-to-top { display: none; } /* ---------- 404 / search-empty ---------- */ .kwn-empty-state { text-align: center; padding: 80px 20px; } .kwn-empty-state h1 { font-size: 2.4rem; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .kwn-content__grid { grid-template-columns: 1fr; } .kwn-footer__top { grid-template-columns: 1fr 1fr; } .kwn-review-header__grid { grid-template-columns: 200px 1fr; } } /* El menú desplegable (hamburguesa) entra a los 1100px y no a los 760px: con 5-6 categorías en la barra, el menú horizontal ya no cabe junto al logo y los botones mucho antes de llegar al tamaño de un móvil, y era ahí donde se montaba encima del logo en pantallas de portátil. */ @media (max-width: 1100px) { .kwn-header__nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); z-index: 105; background: var(--kwn-surface); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 90px 24px 24px; overflow-y: auto; overscroll-behavior: contain; /* * El panel cerrado se OCULTA RECORTÁNDOLO, no empujándolo fuera de la * pantalla con transform: translateX(100%), que es como estaba antes. * El motivo es importante: un panel de 320px empujado más allá del * borde derecho ocupa igualmente esos 320px de "sitio", y Chrome en * Android ensancha el área de maquetación hasta abarcarlo. Cuando eso * pasa, TODA la página se ve encogida y los elementos fijos —la barra * flotante de redes sobre todo— se estiran más allá de la pantalla. * Con clip-path la caja del panel nunca sale del viewport: se queda en * su sitio y simplemente no se pinta. El recorte se anima igual que * antes, así que el efecto sigue siendo un panel que entra desde la * derecha. * * Los -40px de los otros tres lados dejan que se vea la sombra del * panel abierto, que si no quedaría cortada justo en su borde. * * "visibility" aparte, para que los enlaces del panel cerrado no sean * alcanzables con el tabulador ni los lean los lectores de pantalla. * El retardo deja que la animación de salida se complete. */ clip-path: inset(-40px -40px -40px 100%); visibility: hidden; transition: clip-path .25s ease, visibility 0s linear .25s; } .kwn-nav-open .kwn-header__nav { clip-path: inset(-40px -40px -40px 0); box-shadow: -12px 0 32px rgba(0,0,0,.15); visibility: visible; transition: clip-path .25s ease, visibility 0s; } /* Navegadores sin clip-path (muy antiguos): se conserva el comportamiento anterior, que funciona pero puede ensanchar la maquetación. */ @supports not (clip-path: inset(0 0 0 0)) { .kwn-header__nav { clip-path: none; transform: translateX(100%); transition: transform .25s ease, visibility 0s linear .25s; } .kwn-nav-open .kwn-header__nav { transform: translateX(0); transition: transform .25s ease, visibility 0s; } } .kwn-primary-menu { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; width: 100%; } #kwn-menu-toggle { display: block; } /* On the offcanvas mobile menu there's no hover, so submenus are always expanded inline (indented) instead of appearing as a dropdown. */ .kwn-primary-menu li { width: 100%; } .kwn-primary-menu a { padding: 10px 0; width: 100%; } .kwn-primary-menu .menu-item-has-children > a::after { display: none; } .kwn-primary-menu .sub-menu { display: block; position: static; width: 100%; background: none; border: none; box-shadow: none; padding: 0 0 4px 16px; margin: 0 0 6px; } .kwn-primary-menu .sub-menu a { padding: 7px 0; font-size: .85rem; } .kwn-header-social { margin-top: 8px; } /* Con la barra de administrador de WordPress la cabecera baja 46px, así que el panel (que arranca en el borde superior de la pantalla) necesita ese margen extra arriba; si no, los primeros enlaces del menú quedan justo encima de la lupa, el modo oscuro y la hamburguesa. */ body.admin-bar .kwn-header__nav { padding-top: 136px; } /* Botón de cerrar dentro del panel: es la forma más evidente de salir y, a diferencia de la hamburguesa, nunca puede quedar tapado por un enlace del propio menú. */ /* Objetivos de toque: los tres botones de la cabecera (buscar, modo oscuro y hamburguesa) están pegados uno al lado del otro, así que a 38px eran pequeños para el dedo y muy fáciles de confundir entre ellos. 44px es la medida mínima recomendada, y el hueco entre ellos sube a la par. */ .kwn-icon-btn { width: 44px; height: 44px; } .kwn-header__actions { gap: 6px; } /* * Con los botones más grandes, un logo ancho ya no cabe en una pantalla * pequeña. La marca tenía flex-shrink: 0, así que en vez de encogerse * empujaba la cabecera y desbordaba la página a lo ancho — justo el fallo * que arrastramos durante varias versiones (medido: 380px de documento en * una pantalla de 360 con un logo de 420x120). Ahora la marca sí puede * ceder y el logo se escala solo; los botones nunca se encogen. */ .kwn-header__brand { flex: 0 1 auto; min-width: 0; overflow: hidden; } .kwn-header__brand img, .custom-logo-link img { max-width: 100%; height: auto; } .kwn-site-tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kwn-nav-close { display: flex; align-items: center; justify-content: center; position: absolute; /* A la izquierda del panel a propósito: pegado a la derecha caía justo encima de la hamburguesa de la cabecera y quedaban dos controles superpuestos. */ top: 14px; left: 14px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: var(--kwn-bg); color: var(--kwn-text); font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 2; } body.admin-bar .kwn-nav-close { top: 60px; } .kwn-nav-close:hover { background: var(--kwn-primary); color: #fff; } /* Fondo oscuro: tocar fuera del panel cierra el menú. */ .kwn-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 104; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; } .kwn-nav-open .kwn-nav-backdrop { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; } /* Con el panel abierto, la página de detrás no se mueve. Si se moviera, el dedo arrastraría el contenido de debajo y —con la cabecera fija desactivada en Personalizar— la hamburguesa se iría de la pantalla, dejando el menú abierto y aparentemente sin salida. La clase la pone y la quita assets/js/main.js. */ html.kwn-nav-locked, html.kwn-nav-locked body { overflow: hidden; } /* El panel deslizante se dibuja por encima de la barra (position:fixed), así que los botones de la derecha necesitan subir por encima de él — si no, el propio panel tapa el botón de hamburguesa y el menú queda abierto sin forma visible de cerrarlo. */ .kwn-header__actions { position: relative; z-index: 110; } } @media (max-width: 760px) { .kwn-cards-grid, .kwn-cards-grid--cols-4, .kwn-cards-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .kwn-footer__top { grid-template-columns: 1fr; } .kwn-review-header__grid { grid-template-columns: 1fr; } .kwn-review-header__poster { max-width: 220px; } .kwn-proscons, .kwn-review-box__proscons { grid-template-columns: 1fr; } .kwn-review-box { flex-direction: column; } } @media (max-width: 540px) { .kwn-cards-grid, .kwn-cards-grid--cols-4, .kwn-cards-grid--cols-2, .kwn-cards-grid--cols-3 { grid-template-columns: 1fr; } .kwn-score-breakdown__row { grid-template-columns: 100px 1fr 34px; } } /* ---------- Reading progress bar (single artículo/reseña only) ---------- Markup printed conditionally in header.php; width is updated by assets/js/main.js on scroll. Without JS the bar stays at 0% width — effectively invisible, never a broken-looking empty box. */ .kwn-reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 210; pointer-events: none; } .kwn-reading-progress__bar { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--kwn-primary), var(--kwn-secondary)); } /* Respect "reduce motion" OS/browser preference: keep every state change instant instead of animated. The scroll-triggered fade-in (main.js) is skipped entirely at the JS level for these visitors, so there's nothing to override for it here. */ @media (prefers-reduced-motion: reduce) { .kwn-card__thumb img, .kwn-header, .kwn-reading-progress__bar { transition: none !important; } }