/*
* Theme Name: Spotlight Child
* Theme URI: https://codesupply.co/themes/spotlight/
* Description: Spotlight Child Theme
* Author: Code Supply Co.
* Author URI: https://codesupply.co/
* Template: spotlight
* Version: 1.3.15
*/
/* Copy any classes from parent theme here. They will override the parent's version. */
/* ==========================================================================
El Centavo, phase 1 (2026-11). Brand: violeta #3300ff, crema #f5f0e8, tinta #1e1e1e.
========================================================================== */
/* A1. Vertical clips: the whole frame on a phone, never taller than 80% of the screen.
--ec-w/--ec-h come from the file (inc/fase-1.php), so 9:16, 4:5 or 3:4 all keep their shape. */
.ec-video-vertical {
margin: 1.5rem auto;
width: min(100%, calc(80vh * var(--ec-w, 9) / var(--ec-h, 16)));
}
.ec-video-vertical .wp-video {
width: 100% !important;
max-width: 100%;
}
.ec-video-vertical .wp-video,
.ec-video-vertical .mejs-container,
.ec-video-vertical video {
aspect-ratio: var(--ec-w, 9) / var(--ec-h, 16);
height: auto !important;
}
.wp-block-video figcaption,
figure:has(.ec-video-vertical) figcaption {
font-size: 0.8125rem;
color: rgba(0, 0, 0, 0.6);
text-align: center;
margin-top: 0.5rem;
}
/* A2. Tweets and Instagram: reserve space so the page does not jump when the card loads,
and make the fallback quote (what shows before or without X's script) look intentional. */
.wp-block-embed-twitter .wp-block-embed__wrapper {
min-height: 280px;
}
.wp-block-embed-instagram .wp-block-embed__wrapper {
min-height: 520px;
}
.entry-content blockquote.twitter-tweet {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border: 1px solid #e3e3e3;
border-left: 4px solid #3300ff;
border-radius: 12px;
background: #fff;
font-size: 1rem;
font-style: normal;
max-width: 550px;
}
.entry-content blockquote.twitter-tweet::before {
display: none;
}
.entry-content blockquote.twitter-tweet p {
margin-bottom: 0.5rem;
}
.entry-content blockquote.twitter-tweet a {
color: #3300ff;
}
/* B2. "Qué sigue": the closing section of a story as a highlighted box. */
.entry-content .ec-que-sigue {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
background: #f5f0e8;
border-left: 6px solid #3300ff;
border-radius: 0 12px 12px 0;
}
.entry-content .ec-que-sigue > h2 {
margin-top: 0;
font-size: 0.875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #3300ff;
}
.entry-content .ec-que-sigue > *:last-child {
margin-bottom: 0;
}
/* ==========================================================================
El Centavo, phase 2 (2026-11): the newsroom's formats.
========================================================================== */
/* B1. Timeline: dated lists (inc/fase-2.php adds .ec-cronologia) as a vertical line with dots,
the date in violet above each event. */
.entry-content ul.ec-cronologia {
list-style: none;
margin: 1.5rem 0 2rem;
padding: 0 0 0 1.5rem;
border-left: 2px solid rgba(51, 0, 255, 0.25);
}
.entry-content ul.ec-cronologia > li {
position: relative;
margin: 0;
padding: 0 0 1.25rem;
}
.entry-content ul.ec-cronologia > li:last-child {
padding-bottom: 0;
}
.entry-content ul.ec-cronologia > li::before {
content: "";
position: absolute;
top: 0.3rem;
left: calc(-1.5rem - 7px);
width: 12px;
height: 12px;
border-radius: 50%;
background: #3300ff;
box-shadow: 0 0 0 3px #fff;
}
.entry-content ul.ec-cronologia .ec-fecha {
display: block;
margin-bottom: 0.125rem;
color: #3300ff;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
}
.entry-content ul.ec-cronologia .ec-sep {
display: none;
}
/* B4. Special edition: a label above the story, a box with the other stories at the end, and
the tag page titled "Edición especial". */
.entry-content .ec-especial-etiqueta {
margin-bottom: 1.25rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
}
.entry-content .ec-especial-etiqueta a {
color: #1e1e1e;
text-decoration: none;
}
.entry-content .ec-especial-etiqueta span {
display: inline-block;
margin-right: 0.5rem;
padding: 0.125rem 0.5rem;
border-radius: 4px;
background: #3300ff;
color: #fff;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.entry-content .ec-especial {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
border: 2px solid #3300ff;
border-radius: 12px;
background: #fff;
}
.entry-content .ec-especial p {
margin: 0;
}
.entry-content .ec-especial .ec-especial-titulo {
color: #3300ff;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.entry-content .ec-especial .ec-especial-nombre {
margin: 0.25rem 0 0.75rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.entry-content .ec-especial a {
color: #1e1e1e;
text-decoration: none;
}
.entry-content .ec-especial .ec-especial-notas {
margin: 0 0 0.75rem;
padding: 0;
list-style: none;
}
.entry-content .ec-especial .ec-especial-notas li {
padding: 0.5rem 0;
border-top: 1px solid #e3e3e3;
line-height: 1.4;
}
.entry-content .ec-especial .ec-especial-todo a {
color: #3300ff;
font-weight: 600;
text-decoration: underline;
}
.ec-especial-archivo .page-header .page-subtitle {
color: #3300ff;
}
/* ==========================================================================
El Centavo, phase 3 (2026-11): front page (C4) and reels row (C2).
Mockup: redaccion/investigaciones/2026-11-02-maqueta-portada (approved by Julián, 2026-11-02).
Phone first; two-column grid from 1020px (the parent's desktop breakpoint).
========================================================================== */
.ec-home {
--ec-violeta: #3300ff;
--ec-tinta: #1e1e1e;
--ec-crema: #f5f0e8;
--ec-gris: #4a4a4a;
--ec-linea: #e6e1d8;
color: var(--ec-tinta);
}
.ec-home a {
color: inherit;
text-decoration: none;
}
.ec-home a:hover,
.ec-home a:focus-visible {
color: var(--ec-violeta);
}
/* Section chips (phone: they scroll sideways). */
.ec-home-nav {
display: flex;
gap: 8px;
margin: -16px -20px 20px;
padding: 0 20px 4px;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.ec-home-nav a {
flex: none;
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border-radius: 18px;
background: var(--ec-crema);
font-size: 0.875rem;
font-weight: 600;
}
/* Cards. */
.ec-card__link {
display: flex;
flex-direction: column;
gap: 10px;
}
.ec-card__media img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 10px;
}
.ec-card__label {
display: block;
margin-bottom: 4px;
color: var(--ec-violeta);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ec-home .ec-card__title {
margin: 0;
font-size: 1.0625rem;
line-height: 1.25;
}
.ec-card__excerpt {
display: block;
margin-top: 8px;
color: var(--ec-gris);
font-size: 0.9375rem;
line-height: 1.5;
}
.ec-card--lead .ec-card__media img {
aspect-ratio: 16 / 9;
border-radius: 12px;
}
.ec-home .ec-card--lead .ec-card__title {
font-size: 1.625rem;
line-height: 1.15;
}
.ec-card--lead .ec-card__label {
font-size: 0.75rem;
}
/* Phone: side, row and compact cards are a text line with a small picture on the right. */
.ec-card--side .ec-card__link,
.ec-card--row .ec-card__link {
flex-direction: row-reverse;
justify-content: flex-end;
align-items: flex-start;
gap: 12px;
}
.ec-card--side .ec-card__body,
.ec-card--row .ec-card__body {
flex: 1;
min-width: 0;
}
.ec-card--side .ec-card__media,
.ec-card--row .ec-card__media {
flex: none;
width: 96px;
}
.ec-card--side .ec-card__media img,
.ec-card--row .ec-card__media img {
aspect-ratio: 4 / 3;
border-radius: 8px;
}
.ec-card--side,
.ec-card--row,
.ec-card--compact {
padding: 14px 0;
border-top: 1px solid var(--ec-linea);
}
.ec-home .ec-card--row .ec-card__title,
.ec-home .ec-card--compact .ec-card__title {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.ec-card--section-lead {
padding-top: 14px;
}
.ec-card--section-lead .ec-card__media img {
aspect-ratio: 16 / 9;
}
.ec-home .ec-card--section-lead .ec-card__title {
font-size: 1.25rem;
line-height: 1.2;
}
/* Featured: the lead, then a compact list (Julián, 2026-11-04: more stories on first load). */
.ec-destacados {
margin-bottom: 24px;
}
.ec-destacados__side {
margin-top: 14px;
}
.ec-home .ec-card--side .ec-card__title {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.ec-card--side .ec-card__label {
margin-bottom: 2px;
}
/* "Lo último": a grid of small cards, 2 columns on a phone, 4 on desktop. */
.ec-ultimas {
margin-bottom: 28px;
}
.ec-home .ec-ultimas__title {
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 3px solid var(--ec-violeta);
font-size: 1.375rem;
}
.ec-ultimas__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 14px;
}
.ec-card--grid .ec-card__link {
gap: 8px;
}
.ec-card--grid .ec-card__media img {
aspect-ratio: 16 / 9;
border-radius: 8px;
}
.ec-home .ec-card--grid .ec-card__title {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
}
/* Reels: a dark panel, edge to edge on a phone. */
.ec-reels {
margin: 0 -20px 28px;
padding: 22px 0 24px;
background: var(--ec-tinta);
color: #fff;
}
.ec-reels .ec-home-wrap {
padding: 0 20px;
}
.ec-home .ec-reels__title {
margin: 0;
color: #fff;
font-size: 1.375rem;
}
.ec-reels__sub {
margin: 4px 0 14px;
color: #d6d6d6;
font-size: 0.875rem;
}
.ec-reels__row {
display: flex;
gap: 12px;
margin: 0 -20px;
padding: 0 20px 4px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px; /* Snap to the padding, not the screen edge (first card had no margin). */
scrollbar-width: none;
}
.ec-reel {
flex: none;
width: 150px;
scroll-snap-align: start;
}
.ec-reel__cover {
position: relative;
display: block;
aspect-ratio: 9 / 16;
border-radius: 12px;
overflow: hidden;
background: #333;
}
.ec-reel__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ec-reel__play {
position: absolute;
right: 8px; /* Bottom right: the cover's kicker is top left (Julián, 2026-11-04). */
bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ec-violeta);
color: #fff;
}
.ec-reel__links {
display: flex;
gap: 6px;
margin-top: 8px;
}
.ec-home .ec-reel__links a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 36px;
border: 1px solid #5a5a5a;
border-radius: 18px;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
}
.ec-home .ec-reel__links a:hover,
.ec-home .ec-reel__links a:focus-visible {
border-color: #fff;
color: #fff;
}
/* Sections. */
.ec-seccion {
margin-bottom: 32px;
}
.ec-seccion__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 3px solid var(--ec-violeta);
}
.ec-home .ec-seccion__title {
margin: 0;
font-size: 1.375rem;
}
.ec-home .ec-seccion__all {
color: var(--ec-violeta);
font-size: 0.875rem;
font-weight: 600;
}
/* "Otras noticias": less weight than the sections. */
.ec-otras {
margin-top: 8px;
padding-top: 18px;
border-top: 1px solid #d9d3c7;
}
.ec-otras__head {
display: flex;
flex-direction: column;
gap: 10px;
}
.ec-home .ec-otras__title {
margin: 0;
color: var(--ec-gris);
font-size: 1.0625rem;
}
.ec-otras__mas {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ec-otras__mas a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 12px;
border: 1px solid #d9d3c7;
border-radius: 18px;
font-size: 0.8125rem;
font-weight: 600;
}
.ec-otras .ec-card__label {
color: #5c5c5c;
}
.ec-home .ec-otras .ec-card__title {
font-weight: 500;
}
.ec-otras__todas {
margin: 18px 0 0;
font-weight: 600;
}
.ec-home .ec-otras__todas a {
color: var(--ec-violeta);
text-decoration: underline;
}
@media (min-width: 1020px) {
.ec-home-nav {
display: none; /* The header menu carries the sections on desktop. */
}
/* The lead takes 7 of 12 columns and a shorter title; the side list fits 6 stories next
to it, so about 7 stories show above the fold on a laptop. */
.ec-destacados {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 32px;
align-items: start;
margin-bottom: 36px;
}
.ec-destacados__side {
margin-top: 0;
}
.ec-home .ec-card--lead .ec-card__title {
font-size: 1.875rem;
line-height: 1.15;
}
.ec-card--lead .ec-card__excerpt {
font-size: 1rem;
}
.ec-card--side {
padding: 12px 0;
}
.ec-card--side:first-child {
padding-top: 0;
border-top: 0;
}
.ec-card--side .ec-card__media {
width: 112px;
}
.ec-card--side .ec-card__media img {
aspect-ratio: 16 / 9;
}
.ec-ultimas {
margin-bottom: 44px;
}
.ec-ultimas__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px 24px;
}
.ec-home .ec-card--grid .ec-card__title {
font-size: 1rem;
}
.ec-reels {
margin: 0 0 44px;
padding: 36px 0 40px;
border-radius: 16px;
}
.ec-reels .ec-home-wrap {
padding: 0 32px;
}
.ec-home .ec-reels__title {
font-size: 1.75rem;
}
.ec-reels__row {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
overflow: visible;
}
.ec-reel {
width: auto;
}
.ec-secciones {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 40px;
}
.ec-seccion {
margin-bottom: 8px;
}
.ec-seccion--grande {
grid-column: span 3;
}
.ec-seccion--chica {
grid-column: span 2;
}
.ec-seccion--grande .ec-card--section-lead .ec-card__link {
flex-direction: row;
gap: 20px;
}
.ec-seccion--grande .ec-card--section-lead .ec-card__media {
flex: none;
width: 48%;
}
.ec-seccion--grande .ec-card--section-lead .ec-card__body {
flex: 1;
min-width: 0;
}
.ec-otras {
margin-top: 32px;
}
.ec-otras__head {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
}
.ec-otras__mas {
gap: 8px 18px;
}
.ec-otras__mas a {
min-height: 0;
padding: 0;
border: 0;
color: var(--ec-gris);
font-size: 0.875rem;
}
.ec-otras__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 40px;
}
}
/* Carousels row (Julián, 2026-11-04): same layout as the reels, on a light panel, with the 4:5
first slide as the cover. It sits just before "Otras noticias". */
.ec-reels--carruseles {
background: var(--ec-crema);
color: var(--ec-tinta);
}
.ec-home .ec-reels--carruseles .ec-reels__title {
color: var(--ec-tinta);
}
.ec-reels--carruseles .ec-reels__sub {
color: var(--ec-gris);
}
/* Phone: each slide takes about 72% of the screen, so the next one peeks in (Julián: «se ven
muy pequeños»). */
.ec-reels--carruseles .ec-reel {
width: 72vw;
max-width: 320px;
}
.ec-reels--carruseles .ec-reel__cover {
aspect-ratio: 4 / 5;
background: var(--ec-linea);
}
.ec-home .ec-reels--carruseles .ec-reel__links a {
border-color: #c9c2b4;
color: var(--ec-tinta);
}
.ec-home .ec-reels--carruseles .ec-reel__links a:hover,
.ec-home .ec-reels--carruseles .ec-reel__links a:focus-visible {
border-color: var(--ec-violeta);
color: var(--ec-violeta);
}
@media (min-width: 1020px) {
.ec-reels--carruseles .ec-reel {
width: auto;
max-width: none;
}
/* Desktop: 5 slides across the whole container instead of 6. */
.ec-reels--carruseles .ec-reels__row {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px;
}
/* Same spacing as the reels row: "Otras noticias" right after it has no extra gap. */
.ec-reels--carruseles {
margin-bottom: 32px;
}
.ec-reels--carruseles + .ec-otras {
margin-top: 0;
}
}
/* C4. Headlines on the front page (Julián, 2026-11-04: «esos titulos en negrita se ven un poco
raros»). The site's headline font is Noto Sans TC with -0.063em letter spacing, and only its
500 weight is loaded, so a 600 was a synthesized bold with letters touching. Use the real
weight, almost normal spacing and a slightly more open line height. Later in the file than the
card rules, so it wins over them. */
.ec-home .ec-card .ec-card__title,
.ec-home .ec-seccion__title,
.ec-home .ec-ultimas__title,
.ec-home .ec-reels__title,
.ec-home .ec-otras__title {
font-weight: 500;
letter-spacing: -0.005em;
}
.ec-home .ec-card .ec-card__title {
line-height: 1.3;
}
.ec-home .ec-card--lead .ec-card__title {
line-height: 1.2;
}
/* C4. One-row header (inc/fase-3.php forces the parent's compact layout): a smaller logo on
the left, the menu next to it and search on the right, as in the mockup. */
.header-default .navbar-primary .navbar-brand img {
max-height: 30px;
height: auto;
}
@media (min-width: 1020px) {
.header-default .navbar-container .navbar-content {
height: 72px;
}
.header-default .navbar-primary .navbar-brand {
margin-right: 2rem;
}
.header-default .navbar-primary .navbar-brand img {
max-height: 36px;
}
/* No ☰ on desktop: the menu is in the bar, and the panel's only widget («Más buscados»)
is hidden from 1020px, so the panel opened empty (Julián, 2026-11-04). On a phone the ☰
stays and opens that widget. */
.header-default .navbar-primary .navbar-toggle-offcanvas {
display: none;
}
.header-default .navbar-primary .navbar-nav > li > a {
font-weight: 600;
}
/* The menu stays on one row: it shrinks instead of wrapping, and the entries that do not
fit move into the last dropdown (script in inc/fase-3.php). The parent lets it wrap, and
the second row spilled over the page because the header has a fixed height. */
.header-default .navbar-primary .navbar-nav {
flex-wrap: nowrap;
flex: 0 1 auto;
min-width: 0;
}
.header-default .navbar-primary .navbar-nav > li {
flex: none;
white-space: nowrap;
}
/* Keyboard: open a dropdown while focus is inside it (the parent opens them on hover only,
and the entries moved into "Más" would otherwise be out of reach). */
.header-default .navbar-primary .navbar-nav > li.menu-item-has-children:focus-within > .sub-menu {
display: block;
opacity: 1;
visibility: visible;
}
/* Keep the current section standing out (the rule above outranks the parent's bold). */
.header-default .navbar-primary .navbar-nav > li.current-menu-item > a,
.header-default .navbar-primary .navbar-nav > li.current-menu-ancestor > a,
.header-default .navbar-primary .navbar-nav > li.current-menu-parent > a {
font-weight: 800;
}
}
/* C4. Section chips jump to anchors: leave room for the sticky navbar so the title shows. */
.ec-reels,
.ec-seccion,
.ec-otras {
scroll-margin-top: 80px;
}
/* ==========================================================================
El Centavo, quotes (2026-11, Julián: «que las citas entre comillas tengan algún tipo de
formato especial»). Two styles, marked by wp.py when it builds the story's HTML.
========================================================================== */
/* Option 1. A quote inside a paragraph: «…». The «» stay in the
text (no , which adds its own marks), so the story reads the same in RSS or without CSS.
Brand violet, no underline, so it does not look like a link (links are underlined). */
.entry-content .ec-cita {
color: #3300ff;
font-weight: 500;
}
/* Option 2. A standalone quote: «…»
Name, role
. Big violet opening mark, larger text and the source
below. Replaces the parent's grey rules above and below (.entry-content > blockquote); the
selector is stronger, so it also applies inside a wrapper. */
.entry-content blockquote.ec-cita-destacada {
position: relative;
margin: 2.5rem 0;
padding: 3rem 0 0;
border: 0;
font-size: 1.25rem;
line-height: 1.45;
font-weight: 600;
color: #1e1e1e;
}
.entry-content blockquote.ec-cita-destacada::before {
content: "\00AB"; /* «, the marks the newsroom uses. */
position: absolute;
top: 0;
left: -0.05em;
font-family: Georgia, "Times New Roman", serif;
font-size: 3.5rem;
line-height: 0.8; /* The mark stays inside the 3rem padding, above the first line. */
font-weight: 700;
color: #3300ff;
}
.entry-content blockquote.ec-cita-destacada p {
margin: 0;
}
.entry-content blockquote.ec-cita-destacada p + p {
margin-top: 0.75em;
}
.entry-content blockquote.ec-cita-destacada cite {
display: block;
margin-top: 0.75rem;
padding-top: 0.75rem;
background: linear-gradient(#3300ff, #3300ff) top left / 2.5rem 3px no-repeat;
font-size: 0.875rem;
font-style: normal;
font-weight: 600;
line-height: 1.4;
color: #4a4a4a;
}
@media (min-width: 1020px) {
.entry-content blockquote.ec-cita-destacada {
font-size: 1.5rem;
}
}