/* ─── Memphis Noticias — Elementor container overrides ─── */ /* The .mn-wrap utility centers content inside .mn-band sections. The higher-specificity selector wins over Elementor's .e-con defaults (which set width:100% and no horizontal margin). */ .e-con.mn-wrap, .elementor-element.mn-wrap { width: 100%; max-width: var(--mn-container, 1440px); margin-left: auto; margin-right: auto; padding-left: var(--mn-gutter, 24px); padding-right: var(--mn-gutter, 24px); } /* Section bands span the full viewport so backgrounds bleed edge-to-edge; horizontal centering happens on the inner .mn-wrap. */ .e-con.mn-band, .elementor-element.mn-band { width: 100%; max-width: none; padding-left: 0; padding-right: 0; align-items: stretch; } /* ─── Memphis Noticias — Design Tokens ─── */ :root { /* color */ --mn-yellow: #FFCE00; --mn-yellow-deep: var(--mn-red); --mn-red: #B22222; --mn-red-soft: #C9483B; --mn-red-deep: #8E1B1B; --mn-accent: #1A3A6E; --mn-accent-soft: #2E5B9E; --mn-ink: #231614; --mn-paper: #FFFFFF; --mn-bg: #F0EEE9; /* base page canvas (Tracy 2026-06-12); kit global mn_bg */ --mn-bg-deep: #E7E4DC; /* neutral ramp (final bundle) */ --cream-light: #F6F5F1; /* primary light band surface (DS v8) */ --cream: #F0EEE9; /* DS neutral-ramp names (alias --mn-bg) */ --cream-deep: #E7E4DC; --border: #DAD6CD; --charcoal: #2D2E31; --mn-cream-light: #F6F5F1; --mn-charcoal: #2D2E31; --mn-tint: #E7E4DC; --mn-rule: #DAD6CD; --mn-rule-strong: #DAD6CD; --mn-muted: #5E524D; --mn-crisis: #B22222; --mn-coral: #E85C44; /* DS update (bundle Fud_8dxOYDtm) — softer warm divider + textured "noir" dark surface */ --mn-divider: #C8C1B3; --noir-base: #0C0C0D; --noir-bg: radial-gradient(92% 132% at 26% -26%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 58%), url("../assets/img/footer-grain.png"), radial-gradient(130% 150% at 50% -10%, #1C1C1D 0%, #111111 52%, #070707 100%); /* type */ --mn-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --mn-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mn-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* grid */ --mn-container: 1440px; --mn-gutter: 20px; /* old --mn-gutter: 24px */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Safari/Chrome: brand noir behind the page so the browser's overscroll/rubber-band area (and, with the theme-color meta, the address bar) reads as the dark brand instead of white. */ html { background-color: var(--noir-base); } /* Safari UI-tint helper: a near-black strip fixed at the very top. The dark header scrolls away (it is position:static), so for Safari versions that SAMPLE the top pixel for the browser-UI tint this keeps that pixel near-black on scroll. It matches the dark util bar, so at rest it is invisible; out-of-flow (fixed) so it causes no layout shift; never blocks input. theme-color is still the primary hint for the rest of Safari. */ .mn-uitint { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: #0C0C0D; z-index: 1; pointer-events: none; } body { font-family: var(--mn-sans); font-size: 16px; line-height: 1.5; color: var(--mn-ink); background: var(--mn-bg); font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ─── Layout ─── */ .mn-wrap { width: 100%; max-width: var(--mn-container); margin: 0 auto; padding: 0 var(--mn-gutter); } .mn-band { padding: 64px 0; } .mn-band--tight { padding: 40px 0; } .mn-band--tint { background: transparent; } .mn-paperwhite { background: var(--cream-light); } .mn-band--ink { background-color: var(--noir-base); background-image: var(--noir-bg); background-size: 100% 100%, 240px 240px, 100% 100%; background-repeat: no-repeat, repeat, no-repeat; background-blend-mode: screen, overlay, normal; color: var(--mn-paper); padding-top: 84px; padding-bottom: 84px; } /* light-on-dark chrome so content reads on the noir band */ .mn-band--ink .mn-modhead { border-bottom-color: rgba(255,255,255,0.16); } .mn-band--ink .mn-modhead__title { color: var(--mn-paper); } .mn-band--ink .mn-modhead__more { color: rgba(255,255,255,0.72); } .mn-band--ink .mn-modhead__more:hover { color: var(--mn-paper); text-decoration: underline; text-decoration-color: var(--mn-yellow); text-decoration-thickness: 3px; } .mn-band--ink .mn-card__head { color: var(--mn-paper); } .mn-band--ink .mn-card__meta { color: rgba(255,255,255,0.6); } .mn-band--ink .mn-eyebrow { color: rgba(255,255,255,0.82); } .mn-divider { height: 1px; background: var(--mn-rule); border: 0; } /* ─── Module header ─── */ .mn-modhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 2px solid var(--mn-divider); } /* DS: section subheading dividers use the dark-cream divider colour, NOT ink. .mn-modhead is stripped off the container and the heavy border is set inline (#231614) per modhead — recolour the bottom border by matching the container via its kept .mn-modhead__title child (works on every page with a modhead). */ .elementor-element:has(> .mn-modhead__title) { border-bottom-color: var(--mn-divider) !important; } /* When a modhead has a description, align it with the title TEXT (right of the 6px yellow tick + 14px gap = 20px) and cap it at ~half the container width. */ .elementor-3573 .elementor-element-1479982 { margin-left: 20px; max-width: 620px; } .mn-modhead__title { font-family: var(--mn-serif); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; line-height: 1; margin: 0; display: flex; align-items: stretch; gap: 14px; } .mn-modhead__title::before { content: ""; flex: none; align-self: stretch; width: 6px; background: var(--mn-yellow); border-radius: 1px; } .mn-modhead__more { /* Typography/color/padding moved to the Button widgets' own controls 2026-06-22 (build-quality remediation). Only no-control bits remain: keep the link from wrapping + set the hover-underline offset (the gold hover underline itself is enforced below — Elementor has no control for it). */ text-underline-offset: 4px; white-space: nowrap; } /* Button widget wraps its in .elementor-button-wrapper, whose inline line-box left ~4px of descender space below the link and pushed it above the title's baseline in the flex-end modhead row. Collapse it so the link bottom-aligns with the title exactly (no Elementor control for this). */ .mn-modhead__more .elementor-button-wrapper { display: flex; } /* DS update: these "more"/"ver todos" links underline ONLY on hover — thicker + gold. Covers the link whether .mn-modhead__more is the itself or wraps one. */ .mn-modhead__more:hover, .mn-modhead__more:hover a, .mn-modhead__more a:hover { color: var(--mn-ink); text-decoration: underline; text-decoration-color: var(--mn-yellow); text-decoration-thickness: 3px; } /* ─── Eyebrow ─── */ .mn-eyebrow { font-family: var(--mn-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mn-ink); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; } .mn-eyebrow::before { content: ""; width: 18px; height: 3px; background: var(--mn-yellow); } .mn-eyebrow--opinion { background: var(--mn-yellow); border-radius: 5px; padding: 3px 8px; margin-bottom: 12px; } .mn-eyebrow--opinion::before { display: none; } /* Category eyebrows: force a tight line-height so the gold dash sits on the label's optical center. Without this they inherit the kit's ~28px line-height, which floats the dash off the text (Tracy: "category not lining up with the line next to it"). The .eva-* eyebrows already do this; these are the ones that were missing it. */ .mn-eyebrow, .mn-eyebrow *, .cat-feat__eyebrow, .cat-feat__eyebrow *, .mn-art-hero__eyebrow, .mn-art-hero__eyebrow *, .mn-founder__eyebrow, .cat-row__eyebrow, .mn-search-results__eyebrow, .mn-side-h, .mn-side-h * { line-height: 1; } /* ─── Card base ─── */ .mn-card { display: flex; flex-direction: column; } .mn-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mn-rule); border-radius: 5px; } .mn-card__media--square { aspect-ratio: 1 / 1; } .mn-card__media + .mn-eyebrow { margin-top: 10px; } .mn-card__head { font-family: var(--mn-serif); font-weight: 700; color: var(--mn-ink); letter-spacing: -0.01em; margin: 12px 0 6px; line-height: 1.18; text-wrap: balance; } .mn-card__deck { font-family: var(--mn-sans); font-size: 16px; line-height: 1.5; color: var(--mn-muted); margin: 0 0 10px; text-wrap: pretty; } .mn-card__meta { font-family: var(--mn-sans); font-size: 12px; padding-top: 5px; color: var(--mn-muted); margin-top: auto; display: flex; align-items: center; gap: 10px; } .mn-card__meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.6; } .mn-card a:hover .mn-card__head, .mn-card:hover .mn-card__head { color: var(--mn-accent); } /* image placeholder */ .mn-ph { width: 100%; height: 100%; background-image: repeating-linear-gradient(135deg, rgba(33, 25, 24, 0.04) 0 6px, rgba(33, 25, 24, 0.08) 6px 12px); background-color: #EFEAE2; display: flex; align-items: center; justify-content: center; color: rgba(33, 25, 24, 0.45); font-family: var(--mn-mono); font-size: 11px; letter-spacing: 0.04em; text-align: center; padding: 12px; } .mn-ph--ink { background-color: #2E2725; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 6px, rgba(255, 255, 255, 0.08) 6px 12px); color: rgba(255, 255, 255, 0.5); } /* Near-white placeholder — diagonal pinstripes on an almost-white field */ .mn-ph--paper { background-color: #FBFAF7; background-image: repeating-linear-gradient(135deg, rgba(33, 25, 24, 0.035) 0 6px, rgba(33, 25, 24, 0.065) 6px 12px); color: rgba(33, 25, 24, 0.4); } /* Colorful gradient placeholder (per-element --ph-a/--ph-b) with fine pinstripes */ .mn-ph--color { background-color: var(--ph-a, #1A3A6E); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.11) 0 1px, rgba(255, 255, 255, 0) 1px 5px), linear-gradient(140deg, var(--ph-a, #1A3A6E) 0%, var(--ph-b, #3F7AB8) 100%); color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } .mn-ph--color span { position: relative; font-weight: 600; } /* ─── Buttons & inputs ─── */ .mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mn-sans); font-weight: 600; font-size: 14px; line-height: 1; padding: 12px 18px; border: 1px solid var(--mn-ink); background: var(--mn-ink); color: var(--mn-paper); border-radius: 5px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .mn-btn:hover { background: var(--mn-yellow); color: var(--mn-ink); border-color: var(--mn-yellow); } .mn-btn--yellow { background: var(--mn-yellow); color: var(--mn-ink); border-color: var(--mn-yellow); } .mn-btn--yellow:hover { background: var(--mn-ink); color: var(--mn-paper); border-color: var(--mn-ink); } .mn-btn--ghost { background: transparent; color: var(--mn-ink); } .mn-btn--ghost:hover { background: var(--mn-ink); color: var(--mn-paper); } .mn-input { font-family: var(--mn-sans); font-size: 14px; padding: 10px 14px; border: 1px solid var(--mn-rule-strong); background: var(--mn-paper); color: var(--mn-ink); width: 100%; border-radius: 5px; outline: none; } .mn-input:focus { border-color: var(--mn-ink); box-shadow: inset 0 -2px 0 var(--mn-yellow); } /* utilities */ .mn-row { display: flex; } .mn-row--gap { gap: var(--mn-gutter); } .mn-grid { display: grid; gap: var(--mn-gutter); } .mn-grid-2 { grid-template-columns: repeat(2, 1fr); } .mn-grid-3 { grid-template-columns: repeat(3, 1fr); } .mn-grid-4 { grid-template-columns: repeat(4, 1fr); } .mn-grid-12 { grid-template-columns: repeat(12, 1fr); } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } @media (max-width: 880px) { .mn-band { padding: 44px 0; } .mn-grid-2, .mn-grid-3, .mn-grid-4, .mn-grid-12 { grid-template-columns: 1fr; } .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 1; } .mn-modhead__title { font-size: 22px; } } /* ─── Header utility bar / masthead ─── */ /* Wide horizontal lockup (L.01) used as the masthead logo. */ /* shrunk state */ /* ─── Crisis strip ─── */ /* ─── Lead story ─── */ .mn-lead { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: stretch; } .mn-lead__media { aspect-ratio: 16 / 10; } .mn-lead__body { display: flex; flex-direction: column; justify-content: center; } .mn-lead__head { font-family: var(--mn-serif); font-weight: 700; font-size: 52px; line-height: 1.04; letter-spacing: -0.022em; margin: 8px 0 18px; text-wrap: balance; } .mn-lead__deck { font-family: var(--mn-serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.45; color: var(--mn-muted); margin: 0 0 22px; text-wrap: pretty; } .mn-lead__meta { font-family: var(--mn-sans); font-size: 13px; color: var(--mn-muted); display: flex; gap: 12px; align-items: center; } .mn-lead__meta b { color: var(--mn-ink); font-weight: 600; } @media (max-width: 980px) { .mn-lead { grid-template-columns: 1fr; gap: 24px; } .mn-lead__head { font-size: 36px; } .mn-lead__deck { font-size: 17px; } } /* ─── Card sizing ─── */ .mn-feat-head { font-size: 24px; line-height: 1.2; } .mn-brief-head { font-size: 19px; line-height: 1.25; } .mn-card--brief { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--mn-rule); } .mn-card--brief:first-child { border-top: 0; padding-top: 0; } .mn-card--brief .mn-card__media { width: 88px; height: 88px; aspect-ratio: 1/1; } .mn-card--brief .mn-card__head { margin: 0 0 6px; font-size: 16px; line-height: 1.25; } .mn-card--brief .mn-card__meta { font-size: 11px; margin-top: 4px; } /* anchor card */ .mn-anchor { background: var(--mn-yellow); color: var(--mn-ink); border-radius: 5px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; position: relative; } .mn-anchor__eyebrow { font-family: var(--mn-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .mn-anchor__title { font-family: var(--mn-serif); font-weight: 700; font-size: 32px; line-height: 1.04; letter-spacing: -0.015em; margin: 16px 0 12px; text-wrap: balance; } .mn-anchor__copy { font-size: 15px; line-height: 1.4; margin: 0 0 22px; } .mn-anchor__arrow { font-family: var(--mn-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; border-bottom: 2px solid var(--mn-ink); padding-bottom: 3px; align-self: flex-start; } .mn-anchor__mark { position: absolute; right: 18px; top: 18px; width: 32px; height: 38px; opacity: 0.4; } /* ─── Resource tiles ─── */ .mn-resource { border: 0; border-radius: 9px; padding: 24px; display: flex; flex-direction: column; gap: 8px; background-color: var(--cream); background-image: url("../assets/img/footer-grain.png"); background-size: 220px 220px; background-repeat: repeat; background-blend-mode: soft-light; transition: background-color .15s, color .15s, box-shadow .15s; } .mn-resource:hover { background: var(--mn-ink); color: var(--mn-paper); } .mn-resource:hover .mn-resource__num { color: var(--mn-yellow); } /* DS #68 (REAL fix): this site strips custom classes off Elementor CONTAINERS, so .mn-resource never rendered on the KYR cards — all the class-based bg/border/radius silently did nothing (the #FBF1F0 inline kept winning). Target the 4 card IDs. Design = cream + grain, borderless, 9px radius. */ .elementor-3573 .elementor-element-cebaf11, .elementor-3573 .elementor-element-e679503, .elementor-3573 .elementor-element-17eb3fd, .elementor-3573 .elementor-element-566f0cd { background-color: var(--cream) !important; background-image: url("../assets/img/footer-grain.png") !important; background-size: 220px 220px !important; background-repeat: repeat !important; background-blend-mode: soft-light !important; border: 0 !important; border-radius: 9px !important; flex: 1 1 0 !important; /* 4 equal columns spanning the full section width */ min-width: 0; transition: box-shadow .15s ease; } /* hover inverts the card (design .mn-resource:hover): ink bg, white text, gold number. .mn-resource is stripped off the container, so match the card by its kept child. */ .elementor-3573 .elementor-element:has(> .mn-resource__num):hover { background-color: var(--mn-ink) !important; background-image: none !important; box-shadow: 0 8px 22px rgba(33, 25, 24, 0.18) !important; } .elementor-3573 .elementor-element:has(> .mn-resource__num):hover .mn-resource__title, .elementor-3573 .elementor-element:has(> .mn-resource__num):hover .mn-resource__desc, .elementor-3573 .elementor-element:has(> .mn-resource__num):hover .mn-resource__cta, .elementor-3573 .elementor-element:has(> .mn-resource__num):hover .elementor-heading-title, .elementor-3573 .elementor-element:has(> .mn-resource__num):hover p { color: var(--mn-paper) !important; } .elementor-3573 .elementor-element:has(> .mn-resource__num):hover .mn-resource__num .elementor-heading-title { color: var(--mn-yellow) !important; } /* Culture opinion (listing tpl 33689): same stripped-class problem — .mn-opinion is gone AND the container's Elementor flex is "row", so it renders as a small side-by-side card. Force the design's column layout (big portrait on top) by ID. */ .elementor-33689 .elementor-element-6afca7a { flex-direction: column !important; gap: 18px !important; } .elementor-33689 .elementor-element-6afca7a > .elementor-element { width: 100% !important; max-width: 100% !important; } .elementor-33689 .elementor-element-8d69c50 img { width: 100%; height: 400px; object-fit: cover; display: block; border-radius: 8px; } .mn-resource__num { font-family: var(--mn-serif); font-size: 36px; font-weight: 700; line-height: 1; color: var(--mn-yellow-deep); margin-bottom: 14px; } .mn-resource__title { font-family: var(--mn-serif); font-size: 22px; font-weight: 700; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; } .mn-resource__desc { font-size: 14px; line-height: 1.45; margin: 0; } .mn-resource__cta { margin-top: auto; padding-top: 14px; font-family: var(--mn-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ─── Multimedia ─── */ .mn-video__media { position: relative; aspect-ratio: 16 / 9; background: #1a1313; overflow: hidden; border-radius: 5px; } .mn-video__play { position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; background: var(--mn-yellow); color: var(--mn-ink); border-radius: 5px; display: flex; align-items: center; justify-content: center; } .mn-video__duration { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.75); color: var(--mn-paper); font-family: var(--mn-mono); font-size: 11px; border-radius: 5px; padding: 3px 7px; } .mn-video__platform { position: absolute; left: 14px; top: 14px; background: rgba(0,0,0,0.7); color: var(--mn-paper); font-family: var(--mn-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 5px; padding: 4px 8px; } /* ─── Founder block ─── */ .mn-founder { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; } .mn-founder__media { aspect-ratio: 4 / 5; } .mn-founder__eyebrow { font-family: var(--mn-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mn-ink); display: inline-flex; align-items: center; gap: 8px; } .mn-founder__eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--mn-yellow); } .mn-founder__title { font-family: var(--mn-serif); font-weight: 700; font-size: 44px; line-height: 1.06; letter-spacing: -0.02em; margin: 18px 0 22px; color: var(--mn-ink); text-wrap: balance; } .mn-founder__copy { font-size: 16px; line-height: 1.6; color: var(--mn-muted); margin: 0 0 18px; max-width: 56ch; } .mn-founder__quote { border-left: 3px solid var(--mn-yellow); padding: 4px 0 4px 18px; font-family: var(--mn-serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--mn-ink); margin: 22px 0 26px; max-width: 50ch; } .mn-founder__quote span { display: block; margin-top: 8px; font-style: normal; font-family: var(--mn-sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mn-muted); } .mn-founder__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--mn-yellow); color: var(--mn-ink); border-radius: 5px; font-family: var(--mn-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .mn-founder__btn:hover { background: var(--mn-paper); } @media (max-width: 900px) { .mn-founder { grid-template-columns: 1fr; gap: 28px; } .mn-founder__title { font-size: 32px; } } /* ─── Newsletter ─── */ .mn-newsletter { border: 2px solid var(--mn-ink); border-radius: 5px; padding: 40px 48px; display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; background: var(--mn-paper); } .mn-newsletter__title { font-family: var(--mn-serif); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; margin: 6px 0 8px; text-wrap: balance; } .mn-newsletter__sub { font-size: 15px; color: var(--mn-muted); margin: 0; } .mn-newsletter__form { display: flex; flex-direction: column; gap: 12px; } .mn-newsletter__row { display: flex; gap: 8px; } .mn-newsletter__freq { display: flex; gap: 6px; font-size: 13px; color: var(--mn-muted); } .mn-newsletter__freq label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .mn-newsletter__freq input { accent-color: var(--mn-ink); } @media (max-width: 900px) { .mn-newsletter { grid-template-columns: 1fr; padding: 28px; gap: 24px; } .mn-newsletter__title { font-size: 26px; } } /* ─── Footer ─── */ .mn-foot { background: var(--mn-ink); color: rgba(255,255,255,0.78); padding: 56px 0 28px; } .mn-foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); } .mn-foot h4 { font-family: var(--mn-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mn-paper); margin: 0 0 16px; } .mn-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; } .mn-foot a:hover { color: var(--mn-yellow); } .mn-foot__brand img { width: 42px; } .mn-foot__brand p { font-size: 14px; line-height: 1.55; margin: 14px 0 0; max-width: 36ch; color: rgba(255,255,255,0.6); } .mn-foot__count { font-family: var(--mn-mono); font-size: 11px; color: rgba(255,255,255,0.5); } .mn-foot__legal { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,0.5); gap: 24px; } @media (max-width: 880px) { .mn-foot__grid { grid-template-columns: 1fr 1fr; gap: 28px; } .mn-foot__legal { flex-direction: column; align-items: flex-start; } } /* ─── Inmigración module layout ─── */ .mn-inm { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mn-gutter); } @media (max-width: 980px) { .mn-inm { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mn-inm { grid-template-columns: 1fr; } } /* ─── Local mixed layout ─── */ .mn-local { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; } .mn-local__briefs { display: flex; flex-direction: column; } @media (max-width: 980px) { .mn-local { grid-template-columns: 1fr; gap: 24px; } } /* Ayuda module — missing person + briefs */ .mn-ayuda { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mn-gutter); } @media (max-width: 980px) { .mn-ayuda { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mn-ayuda { grid-template-columns: 1fr; } } .mn-missing { border: 1px solid var(--mn-ink); border-radius: 5px; padding: 16px; display: flex; flex-direction: column; background: var(--mn-paper); } .mn-missing__label { font-family: var(--mn-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--mn-ink); color: var(--mn-paper); border-radius: 5px; padding: 4px 8px; align-self: flex-start; } .mn-missing__media { aspect-ratio: 1/1; margin: 14px 0 12px; background: var(--mn-tint); border-radius: 5px; overflow: hidden; } .mn-missing__name { font-family: var(--mn-serif); font-weight: 700; font-size: 19px; line-height: 1.2; margin: 0 0 6px; } .mn-missing__det { font-size: 13px; color: var(--mn-muted); margin: 0; line-height: 1.45; } /* Opinion card */ .mn-opinion { display: flex; flex-direction: column; height: 100%; gap: 18px; } .mn-opinion__portrait { aspect-ratio: auto; flex: 1 1 auto; min-height: 380px; margin-bottom: 20px; } .mn-opinion__head { font-family: var(--mn-serif); font-style: italic; font-weight: 700; font-size: 30px; line-height: 1.18; margin: 10px 0; text-wrap: balance; } .mn-opinion__by { font-family: var(--mn-sans); font-size: 12px; color: var(--mn-muted); } .mn-opinion__by b { color: var(--mn-ink); font-weight: 600; } /* ad slot */ .mn-ad { border: 1px dashed var(--mn-rule-strong); border-radius: 5px; padding: 22px; text-align: center; font-family: var(--mn-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mn-muted); background: var(--mn-tint); } /* Dedicated ad-space placeholders — CANONICAL surface + in-box labels. All reserved-inventory ads (search, sidebar, blocks, Elementor) should use .mn-adslot / __tag / __size / __note. Do not invent parallel label styles. */ .mn-adslot { border: 1px dashed var(--mn-rule-strong); border-radius: 5px; background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(33, 25, 24, 0.025) 14px 28px), var(--mn-tint); color: var(--mn-muted); font-family: var(--mn-mono); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px; } .mn-adslot__tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mn-ink); background: var(--mn-paper); border: 1px solid var(--mn-rule-strong); border-radius: 4px; padding: 3px 8px; font-family: var(--mn-sans); font-weight: 700; } .mn-adslot__size { font-size: 13px; color: var(--mn-ink); } .mn-adslot__note { font-size: 11px; color: var(--mn-muted); } /* Ad-slot advertise CTAs */ .mn-adslot__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 9px 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; line-height: 1.2; white-space: nowrap; } .mn-adslot__cta:hover, .mn-adslot__cta:focus-visible { text-decoration: none; } .mn-adslot__below { display: block; width: 100%; max-width: 100%; margin: 8px 0 0; text-align: center; font-family: var(--mn-sans); font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--mn-ink); text-decoration: underline; text-decoration-color: var(--mn-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; } .mn-adslot--halfpage + .mn-adslot__below { max-width: 350px; margin-left: auto; margin-right: auto; } .mn-adslot--mediumrect + .mn-adslot__below, .mn-adslot--sidebar + .mn-adslot__below { max-width: 300px; margin-left: auto; margin-right: auto; } .mn-adslot__below:hover, .mn-adslot__below:focus-visible { color: var(--mn-ink); text-decoration-color: var(--mn-ink); } .mn-adslot--billboard { width: 100%; aspect-ratio: 1440 / 225; max-height: 225px; } .mn-adslot--leaderboard { width: 100%; aspect-ratio: 728 / 90; max-height: 90px; } .mn-adslot--mediumrect { width: 300px; height: 250px; margin: 0 auto; } .mn-adslot--halfpage { width: 350px; height: 500px; aspect-ratio: 350 / 500; max-width: 350px; min-width: 350px; min-height: 500px; margin: 0 auto; } @media (max-width: 767px) { .mn-adslot--halfpage { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; } } .mn-adslot--inarticle { width: 100%; aspect-ratio: 600 / 200; margin: 28px 0; } /* arrows */ .mn-arrow { display: inline-block; transform: translateY(-1px); } /* === MN-HEADER-V3 logo guard (SVG lockup, not the old pin) === */ /* Neutralize the legacy small-pin width on the wide SVG. */ /* === MN-HEADER-LIVE-OVERRIDES =========================================== Elementor's per-element CSS (post-3694.css) loads AFTER this file and overrides the mockup's plain header classes on source order. These scoped rules (under .elementor-location-header, with !important on the few Elementor clobbers) restore the mockup's intended header chrome: dark utility bar, JetSearch styled for the dark bar, spaced nav. ======================================================================= */ /* Dark utility bar (beats Elementor's transparent container background) */ /* JetSearch field, styled to sit on the dark bar */ /* JetSearch submit: brand-yellow, ink icon (replaces the default blue) */ /* Lang toggle + newsletter on the dark bar */ /* Primary nav — force horizontal layout + even spacing (the nav-menu widget renders sm-vertical; we override to a centered flex row). */ /* Utility bar inner: ticker on the left, search pushed to the right. The two cells are Elementor child containers; the bar itself stays dark. */ /* let the JetSearch widget fill its cell */ /* ── Última hora ticker ── */ /* utility bar inner: ticker (left) + search (right) */ /* masthead inner: logo · dateline · weather */ /* CSS grid (1fr auto 1fr) so the dateline truly centers and the weather keeps its width — robust against Elementor's per-child flex defaults, which were collapsing the flex children (center→41px, weather→0). */ /* logo size (beats Elementor's .elementor-widget-image img{width:48px}) */ /* dateline (.mn-mast__center markup from [mn_dateline]) */ /* weather (static HTML widget) */ /* nav row */ /* dark utility bar — JetSearch field on the dark bar (paper text) */ /* ticker headlines must read on the dark bar — beat the theme/Elementor link color */ /* ── masthead shrink-on-scroll (ID-scoped; container class .mn-mast does not render on this site, so the JS toggles .is-shrunk on .elementor-element-mnmast01) ── */ /* smooth shrink: animate the pieces that change size, not just the padding */ /* when Elementor Pro fixes the stuck mast, keep it full-bleed above content */ /* responsive: hide ticker + center on small screens */ /* ─────────────────────────────────────────────────────────────────────────── JetEngine listing cards — media framing (Phase 2/3 dynamic homepage). The category listing grids render real featured images inside fixed aspect-ratio boxes (.mn-card__media / .mn-lead__media). These rules let any image, whatever its native ratio, crop cleanly to fill the frame. Framing lives on the element, so an editor can swap a post's featured image freely. ─────────────────────────────────────────────────────────────────────────── */ .mn-card__media > .elementor-widget-container, .mn-card__media .jet-listing-dynamic-image, .mn-card__media .jet-listing-dynamic-image > a, .mn-lead__media > .elementor-widget-container, .mn-lead__media .jet-listing-dynamic-image, .mn-lead__media .jet-listing-dynamic-image > a { display: block; width: 100%; height: 100%; } .mn-card__media img, .mn-lead__media img { width: 100%; height: 100%; object-fit: cover; } /* cards stretch to equal height within each grid row */ .jet-listing-grid__item > .elementor-element, .jet-listing-grid__item .mn-card { height: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ HEADER v6 — 1:1 replication of design bundle nkDec7drcjo7RwEZLQCLoA (Memphis Noticias — Portada standalone). Single authoritative header layer: all previous header CSS (legacy copy, v5 block, ID bridge, shrink rules) was removed when this block was added. Scoping rules for this site: · Containers never emit _css_classes → container-level design rules are scoped to stable .elementor-element- selectors (fixed in template). · Widget _css_classes and shortcode markup classes DO render → those rules keep the design's own class names verbatim ([mn_ticker], [mn_crisis_strip], lockup headings, etc.). · The design's .mn-util__search/.mn-search-panel anatomy maps onto the jet-ajax-search widget (native settings carry colors/sizes; this block carries what no native control reaches). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Utility bar ─────────────────────────────────────────────────────────── */ .elementor-location-header .elementor-element-mnutilbr { font-family: var(--mn-sans); font-size: 13px; color: var(--mn-paper); background-color: var(--noir-base) !important; background-image: var(--noir-bg) !important; background-size: 100% 100%, 240px 240px, 100% 100%; background-repeat: no-repeat, repeat, no-repeat; background-blend-mode: screen, overlay, normal; } .elementor-location-header .elementor-element-mnutilin { display: flex !important; flex-direction: row; align-items: center; gap: 24px; flex-wrap: nowrap; width: 100%; max-width: var(--mn-container); margin: 0 auto; padding: 10px var(--mn-gutter); } .elementor-location-header .elementor-element-mntckcel { flex: 1 1 60%; /* mn2.0: ticker wider (60%) */ max-width: calc(60% - 12px); min-width: 0; } .elementor-location-header .elementor-element-mnsrccel { flex: 1 1 40%; /* mn2.0: search narrower (40%) */ max-width: calc(40% - 12px); min-width: 0; margin-left: auto; position: relative; } /* ── Last-hour ticker ([mn_ticker] markup, design verbatim) ──────────────── */ .mn-util__ticker { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; height: 40px; /* pinned = vertical-aligns with the search pill */ box-sizing: border-box; background: transparent; /* mn2.0: ticker no longer has a bg/border */ border: 0; border-radius: 0; padding: 0; } .mn-util__ticker-label { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--mn-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mn-ink); background: var(--mn-yellow); padding: 0 14px; /* height now comes from the pill, not the label */ height: 100%; border-radius: 4px 3px 3px 4px; margin-right: 13px; white-space: nowrap; z-index: 2; } /* DS update (fuvEr6Sg): pennant tip on the breaking-news badge */ .mn-util__ticker-label::after { content: ""; position: absolute; left: calc(100% - 1px); top: 50%; width: 9px; height: 16px; transform: translateY(-50%); background: var(--mn-yellow); clip-path: polygon(0 0, 100% 50%, 0 100%); } .mn-util__ticker-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mn-crisis); box-shadow: 0 0 0 0 rgba(178,34,34,0.6); animation: mn-ticker-pulse 1.6s infinite; } @keyframes mn-ticker-pulse { 0% { box-shadow: 0 0 0 0 rgba(178,34,34,0.55); } 70% { box-shadow: 0 0 0 6px rgba(178,34,34,0); } 100% { box-shadow: 0 0 0 0 rgba(178,34,34,0); } } .mn-util__ticker-view { position: relative; flex: 1; margin-left: -15px; min-width: 0; overflow: hidden; border-radius: 0 4px 4px 0; /* Right-edge fade ONLY. The earlier left fade revealed the dark bar behind the mask (read as a "black overlay" by the label); the opaque yellow pennant already masks the text start crisply, so no left fade is needed. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent); } .mn-util__ticker-track { display: flex; width: max-content; animation: mn-ticker-scroll 105s linear infinite; } .mn-util__ticker-view:hover .mn-util__ticker-track { animation-play-state: paused; } @keyframes mn-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .mn-util__ticker-group { display: flex; flex: none; } .mn-util__ticker-item { display: inline-flex; align-items: center; gap: 8px; flex: none; font-family: var(--mn-sans); font-size: 15.5px; color: rgba(255,255,255,0.95) !important; text-decoration: none; white-space: nowrap; padding-right: 26px; position: relative; } .mn-util__ticker-item::after { content: ""; position: absolute; right: 13px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.32); } .mn-util__ticker-item:hover { color: var(--mn-yellow) !important; } .mn-util__ticker-cat { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mn-yellow) !important; } /* ── Search pill (jet-ajax-search; design .mn-util__search) ──────────────── */ /* Native widget settings carry: bg, border, radius, padding, icon + color, input color/size, placeholder, no-submit. This covers the rest. */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search, .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__form { width: 100%; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__form { transition: border-color .15s, background .15s; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__form--focus { border-color: var(--mn-yellow) !important; background-color: rgba(255,255,255,0.13) !important; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__field { min-width: 0; flex: 1 1 auto; font-size: 17px !important; /* DS update: larger search input */ padding-left: 38px !important; /* clear the (now larger) icon */ padding-top: 0 !important; padding-bottom: 0 !important; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__field-icon { left: 14px; font-size: 18px; } /* pin the search pill to the same 38px as the ticker; flex-center the input */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__form { padding: 0 14px !important; height: 40px; box-sizing: border-box; display: flex; align-items: center; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__field::placeholder { color: rgba(255,255,255,0.62); } /* ── AJAX results panel — design .mn-search-panel mapped onto jet-ajax-search ── Markup: __results-area (card) > __results-count (head) + __results-list > __results-item > __item-link (the ROW) > __item-thumbnail + __item-content- wrapper (meta kicker via jet-search-content-fields, __item-title, __item- content). Footer = __full-results ("Ver todos"). */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-holder { left: 0; /* mn2.0: panel spans the (narrower) search bar */ right: 0; width: auto; max-width: none; background: transparent; border: 0; box-shadow: none; } /* the card: paper surface, rule-strong border, soft drop shadow, clipped */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-area { background: var(--mn-paper); color: var(--mn-ink); border: 1px solid var(--mn-rule-strong); border-radius: 7px; box-shadow: 0 1px 0 rgba(33,25,24,0.04), 0 18px 44px rgba(33,25,24,0.22); overflow: hidden; animation: mn-search-in .14s ease; } @keyframes mn-search-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* head band: result counter as the design's tint header row */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-header { display: flex; align-items: baseline; gap: 8px; padding: 11px 16px; background: var(--mn-tint); border-bottom: 1px solid var(--mn-rule); } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-count { margin: 0; padding: 0; background: none; border: 0; font-family: var(--mn-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mn-ink); } /* design dropdown has no prev/next pagination arrows */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__navigation-holder { display: none; } /* the result ROW = the link; thumb left, body right. Flatten JetSearch's default per-item card chrome (margin/shadow/radius) into a flush, ruled list. */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-list-inner, .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-item { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-item:last-child .jet-ajax-search__item-link { border-bottom: 0; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__full-results::after { content: "→"; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-link { display: flex; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--mn-rule); text-decoration: none; color: inherit; transition: background .12s; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-link:hover { background: var(--cream-light); } /* thumbnail → 76px rounded square (gradient fallback fills it) */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-thumbnail { flex: none; margin: 0; overflow: hidden; position: relative; /* enforce-only: ::after overlay positioning context (no control) */ aspect-ratio: 4 / 3; /* enforce-only: 4:3 ratio — width comes from the widget's thumb-width control (100px); the widget's height control emits no working CSS */ background: var(--mn-rule); } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } /* body column */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-content-wrapper { min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* Title first. Content-related meta sits after the title in JetSearch DOM. Keep the kicker as one line (CULTURA · date); venue name under it. */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-title { order: 0; } .elementor-location-header .elementor-element-mnsrccel .jet-search-content-fields { order: 1; display: flex; flex-direction: column; gap: 2px; margin: 0; } .elementor-location-header .elementor-element-mnsrccel .jet-search-content-fields__item, .elementor-location-header .elementor-element-mnsrccel .jet-search-content-fields__item-value { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .elementor-location-header .elementor-element-mnsrccel .mn-srow-kicker { display: block; margin: 0; font-family: var(--mn-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } .elementor-location-header .elementor-element-mnsrccel .mn-srow-cat, .elementor-location-header .elementor-element-mnsrccel .mn-srow-dot, .elementor-location-header .elementor-element-mnsrccel .mn-srow-date { display: inline !important; width: auto !important; } .elementor-location-header .elementor-element-mnsrccel .mn-srow-cat { color: var(--mn-accent); } .elementor-location-header .elementor-element-mnsrccel .mn-srow-date { color: var(--mn-muted); font-weight: 600; letter-spacing: 0.04em; } .elementor-location-header .elementor-element-mnsrccel .mn-srow-dot { padding: 0 0.45em; font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--mn-rule-strong); background: none; } .elementor-location-header .elementor-element-mnsrccel .mn-srow-venue { display: block; font-family: var(--mn-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.35; color: var(--mn-muted); } .elementor-location-header .elementor-element-mnsrccel .mn-srow-venue-name { font-weight: 600; color: var(--mn-ink); } /* title → serif, 15px, 1-line clamp; row hover tints it accent */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-title { font-family: var(--mn-serif); font-weight: 700; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; color: var(--mn-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-link:hover .jet-ajax-search__item-title { color: var(--mn-accent); } /* excerpt → sans, 12.5px, muted, 1-line clamp */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__item-content { font-family: var(--mn-sans); font-size: 12.5px; line-height: 1.45; color: var(--mn-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__results-item:has(.mn-srow-venue) .jet-ajax-search__item-content { display: none !important; } /* empty / "no results" message */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__message { padding: 22px 16px; font-family: var(--mn-sans); font-size: 13px; color: var(--mn-muted); } /* footer: "Ver todos los resultados" → tint bar, hover yellow */ .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__full-results { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; font-family: var(--mn-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mn-ink); text-decoration: none; width: 100%; /* full-width tint bar matching the header band */ background: var(--mn-tint); border-top: 1px solid var(--mn-rule); transition: background .15s; } .elementor-location-header .elementor-element-mnsrccel .jet-ajax-search__full-results:hover { background: var(--mn-yellow); } /* ── Masthead ────────────────────────────────────────────────────────────── */ /* Sticky = Elementor Motion Effects (position:fixed based). CSS position:sticky cannot work here: the sticky range is capped at the parent's height, and the mast's parent is the header wrapper itself — ~0px of room. The fixed-mode spacer clone is handled by mn-header.js (skips .elementor-sticky__spacer). Background + border-bottom are native container settings. */ .elementor-location-header .elementor-element-mnmast01 { transition: box-shadow 0.22s ease, border-color 0.22s ease; } /* when stuck (fixed), span the full viewport and stay above content */ .elementor-location-header .elementor-element-mnmast01.elementor-sticky--active { width: 100% !important; left: 0; right: 0; } .elementor-location-header .elementor-element-mnmastin { /* display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: 100%; */ max-width: var(--mn-container); margin: 0 auto; /* padding: 18px var(--mn-gutter); transition: padding 0.22s ease; */ } .elementor-location-header .elementor-element-mnlogoce { justify-self: start; min-width: 0; } .elementor-location-header .elementor-element-mnctrce0 { justify-self: center; min-width: 0; white-space: nowrap; } .elementor-location-header .elementor-element-mnwthrce { justify-self: end; min-width: 0; white-space: nowrap; } /* ── Logo lockup (pin + LIVE TEXT, justified across the tagline width) ───── */ .elementor-location-header .elementor-element-mnlogolk { display: flex !important; flex-direction: row; align-items: center; gap: 12px; width: fit-content; } .elementor-location-header .elementor-element-mnlogotx { display: flex !important; flex-direction: column; width: fit-content; } .elementor-location-header .elementor-element-mnlogopn img { width: 38px !important; height: auto; transition: width 0.22s ease; } /* The newspaper trick: the wordmark justifies inter-character across exactly the width of the tagline below it. The lockup column shrink-wraps to the tagline (its widest child); the wordmark stretches to that width. */ .elementor-location-header .mn-mast__logo-text { width: 100%; } /* wordmark typography lives in the Heading widget controls (retired duplicate CSS 2026-07-04); only the justified-lockup trick + shrink transition — which have no controls — stay here. */ .elementor-location-header .mn-mast__logo-text .elementor-heading-title { text-align: justify; text-align-last: justify; text-justify: inter-character; transition: font-size 0.22s ease; } .elementor-location-header .mn-mast__tag { /* display: block; */ margin-top: 4px; max-height: 14px; opacity: 1; overflow: hidden; transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.22s ease; } .elementor-location-header .mn-mast__tag .elementor-heading-title { /* typography moved to the Heading widget controls 2026-07-04 */ white-space: nowrap; /* lockup discipline: both lines justify across the lockup width, so the tagline and wordmark always end flush regardless of which renders wider */ text-align: justify; text-align-last: justify; text-justify: inter-character; } /* ── Dateline (center) + weather ─────────────────────────────────────────── */ .elementor-location-header .elementor-element-mnctrce0 { text-align: center; font-family: var(--mn-sans); font-size: 12px; line-height: 1.2; letter-spacing: 0.04em; color: var(--mn-muted); transition: font-size 0.22s ease; } .elementor-location-header .elementor-element-mnctrce0 b { display: block; color: var(--mn-ink); font-weight: 600; font-size: 13px; line-height: 1.15; text-transform: capitalize; margin-bottom: 3px; transition: font-size 0.22s ease; } .elementor-location-header .elementor-element-mnwthrce { color: var(--mn-muted); } .elementor-location-header .elementor-element-mnwthrht > div, .elementor-location-header .elementor-element-mnwthrht .elementor-widget-container > div { display: flex; align-items: center; gap: 10px; font-family: var(--mn-sans); font-size: 13px; color: var(--mn-muted); justify-content: flex-end; } .elementor-location-header .elementor-element-mnwthrht b { font-family: var(--mn-serif); font-weight: 700; font-size: 22px; color: var(--mn-ink); transition: font-size 0.22s ease; } /* ── Primary nav ─────────────────────────────────────────────────────────── */ .elementor-location-header .elementor-element-mnnavcel { border-top: 1px solid var(--mn-rule); } .elementor-location-header .elementor-element-mnnavinn { width: 100%; max-width: var(--mn-container); margin: 0 auto; padding: 0 var(--mn-gutter); min-height: 42px; display: flex !important; align-items: stretch; transition: min-height 0.22s ease; } .elementor-location-header .elementor-element-mnnavinn .elementor-nav-menu { display: flex !important; align-items: stretch; flex-wrap: nowrap; gap: 23px !important; /* overflow must stay visible so the Historia language dropdown can escape the bar. (Was overflow-x:auto for horizontal scroll, but that forces overflow-y to auto and clips the dropdown; the menu collapses to a burger on tablet, so the desktop bar never needs to scroll.) */ overflow: visible; } .elementor-location-header .elementor-element-mnnavinn .elementor-nav-menu::-webkit-scrollbar { display: none; } .elementor-location-header .elementor-element-mnnavinn .elementor-nav-menu > li { margin: 0 !important; } /* Submenu reveal on hover/focus. The custom flex nav above replaces Elementor's default layout, which drops the built-in submenu-on-hover behavior (Elementor still styles & positions .sub-menu; only the display toggle is missing). This powers the "Historia" English/Español language dropdown. */ .elementor-location-header .elementor-element-mnnavinn .elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu, .elementor-location-header .elementor-element-mnnavinn .elementor-nav-menu > li.menu-item-has-children:focus-within > .sub-menu { display: block; z-index: 99; } .elementor-location-header .elementor-element-mnnavinn .elementor-item { font-family: var(--mn-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mn-ink); white-space: nowrap; display: inline-flex; align-items: center; position: relative; padding: 0 !important; border-bottom: 0 !important; transition: color .15s, font-size .22s ease; } /* 5px yellow bar pinned to the bottom edge of the nav row (DS v8) */ .elementor-location-header .elementor-element-mnnavinn .elementor-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--mn-yellow); opacity: 0; transition: opacity .15s; } .elementor-location-header .elementor-element-mnnavinn .elementor-item:hover::after { opacity: 1; } /* yellow bar is HOVER-ONLY per Tracy 2026-06-13. The design also paints it on the active page; suppressed here so it shows only while hovering. */ .elementor-location-header .elementor-element-mnnavinn .elementor-item.elementor-item-active::after { opacity: 0; } /* ── Crisis strip ([mn_crisis_strip] markup, design verbatim) ────────────── */ .mn-crisis { background: var(--mn-yellow); color: var(--mn-ink); border-bottom: 2px solid var(--mn-ink); } .mn-crisis__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 14px var(--mn-gutter); max-width: var(--mn-container); margin: 0 auto; } .mn-crisis__badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mn-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mn-crisis); } .mn-crisis__badge .pulse { width: 8px; height: 8px; background: var(--mn-crisis); border-radius: 50%; animation: mn-pulse 1.8s ease-in-out infinite; } @keyframes mn-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } } .mn-crisis__title { font-family: var(--mn-serif); font-weight: 700; font-size: 18px; line-height: 1.3; } .mn-crisis__title em { font-style: normal; font-family: var(--mn-sans); font-weight: 600; font-size: 13px; color: rgba(35, 22, 20, 0.7); display: block; margin-top: 2px; } .mn-crisis__link { font-family: var(--mn-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid var(--mn-ink); padding-bottom: 2px; white-space: nowrap; } /* ── Shrunk state (mn-header.js toggles .is-shrunk past 40px) ────────────── */ .elementor-location-header .elementor-element-mnmast01.is-shrunk { border-bottom-color: transparent !important; /* drop the hard rule on scroll — only the soft shadow separates */ box-shadow: 0 6px 16px rgba(35, 22, 20, 0.09); } .elementor-location-header .elementor-element-mnmast01.is-shrunk .elementor-element-mnmastin { padding-top: 8px; padding-bottom: 8px; } .elementor-location-header .elementor-element-mnmast01.is-shrunk .elementor-element-mnlogopn img { width: 28px !important; } .elementor-location-header .elementor-element-mnmast01.is-shrunk .mn-mast__logo-text .elementor-heading-title { font-size: 17px; text-align: left; text-align-last: left; } .elementor-location-header .elementor-element-mnmast01.is-shrunk .mn-mast__tag { max-height: 0; opacity: 0; margin-top: 0; } .elementor-location-header .elementor-element-mnmast01.is-shrunk .elementor-element-mnctrce0 { font-size: 11px; } .elementor-location-header .elementor-element-mnmast01.is-shrunk .elementor-element-mnctrce0 b { font-size: 12px; } /* .elementor-location-header .elementor-element-mnmast01.is-shrunk .elementor-element-mnwthrht b { font-size: 17px; } */ /* nav row does NOT shrink with the sticky masthead (user direction 2026-07-04): the row keeps its 44px height, 13px items, and 20px gap in the shrunk state. Only the masthead above it (logo/tagline/date) tightens. */ /* ── Header language toggle (.mn-langtoggle — design bundle mn2.0) ── ES/EN sliding pill at the right end of the nav row. Placeholder: persists the visitor's choice (mn-header.js) but does not switch content yet. */ .mn-langtoggle { position: relative; align-self: center; display: inline-flex; flex: 0 0 auto; padding: 3px; border-radius: 999px; background: var(--cream-light, #F6F5F1); border: 1px solid var(--border, #DAD6CD); box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); } .mn-langtoggle__thumb { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%), var(--mn-ink, #231614); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1.5px rgba(0,0,0,0.14); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .mn-langtoggle__thumb[data-lang="en"] { transform: translateX(100%); } /* descendant selectors (0,2,0) so the toggle buttons beat the kit's global `.elementor-kit-8 button` rule (0,1,1) that otherwise forces ink bg / radius / padding. */ .mn-langtoggle .mn-langtoggle__opt { position: relative; z-index: 1; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; margin: 0; padding: 5px 12px; min-width: 24px; min-height: 24px; box-sizing: border-box; border-radius: 999px; font-family: var(--mn-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: none; color: var(--mn-muted, #5E524D); transition: color 0.2s ease; } .mn-langtoggle .mn-langtoggle__opt.is-on { color: var(--mn-paper, #fff); } /* (shrunk-state padding removed with the nav no-shrink direction 2026-07-04 — the toggle keeps its size when the header sticks, same as the nav links) */ /* Center the toggle widget vertically in the nav row (the row is align-items:stretch, so the widget would otherwise stretch full-height and pin the pill to the top). */ .elementor-location-header .elementor-element-mnlangtg { align-self: center; } /* Neutralize the kit's yellow button hover/focus/active on the toggle (it would turn the pill yellow). Keep the active option white, inactive muted — no bg change. */ .elementor-location-header .mn-langtoggle .mn-langtoggle__opt:hover, .elementor-location-header .mn-langtoggle .mn-langtoggle__opt:focus, .elementor-location-header .mn-langtoggle .mn-langtoggle__opt:focus-visible, .elementor-location-header .mn-langtoggle .mn-langtoggle__opt:active { background: transparent; box-shadow: none; color: var(--mn-muted, #5E524D); } .elementor-location-header .mn-langtoggle .mn-langtoggle__opt.is-on:hover, .elementor-location-header .mn-langtoggle .mn-langtoggle__opt.is-on:focus, .elementor-location-header .mn-langtoggle .mn-langtoggle__opt.is-on:active { color: var(--mn-paper, #fff); } .mn-langtoggle .mn-langtoggle__opt:focus-visible { outline: 2px solid var(--mn-ink, #231614); outline-offset: 1px; } .mn-langtoggle .mn-langtoggle__opt:focus:not(:focus-visible) { outline: none; } /* Google Translate Element (free client-side translation, no plugin) — hide its injected banner/tooltip/floating icon in every state, and cancel the body offset it adds, so it never shifts the layout. ES/EN toggle stays ours. */ .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame, .goog-te-spinner-pos, .goog-te-menu-frame, #google_translate_element, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO, [class*="VIpgJd-ZVi9od-aZ2wEe-wOHMyf"], [class*="VIpgJd-ZVi9od-aZ2wEe-OiiCO"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } .skiptranslate > iframe { display: none !important; height: 0 !important; } body { top: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* ── Responsive (design: ≤980 hides ticker + dateline, search goes full) ─── */ @media (max-width: 980px) { .elementor-location-header .elementor-element-mntckcel { display: none; } .elementor-location-header .elementor-element-mnsrccel { flex: 1 1 100%; max-width: none; } .elementor-location-header .elementor-element-mnctrce0 { display: none; } } /* ─────────────────────────────────────────────────────────────────────────── SATIN SURFACES — sheen + paper-fiber grain + tonal depth, from the design bundle's footer recipe (nkDec7drcjo7RwEZLQCLoA). Two variants share one tileable grain (assets/img/mn-grain.png, 240px): · .mn-satin--ink dark (the design's footer treatment) · .mn-satin--paper light (same recipe re-lit for the warm paper canvas) Reuse: add either class to any Elementor container (Advanced → CSS Classes). Applied below to the footer root and to the body canvas. ─────────────────────────────────────────────────────────────────────────── */ .mn-satin--ink { background-color: #0B0B0C; background-image: /* satin sheen — soft diagonal light sweep */ linear-gradient(108deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.04) 44%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 56%, rgba(255,255,255,0) 72%), /* construction-paper fiber grain (tileable) */ url("../assets/img/mn-grain.png"), /* tonal depth so the sheen has something to fall across */ radial-gradient(130% 150% at 50% -10%, #232323 0%, #161616 52%, #090909 100%); background-size: 220% 100%, 240px 240px, 100% 100%; background-blend-mode: screen, overlay, normal; } .mn-satin--paper { background-color: var(--mn-bg, #F0EEE9); background-image: /* the same sweep, re-lit: a brighter pass reads on a light ground */ linear-gradient(108deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.35) 44%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.35) 56%, rgba(255,255,255,0) 72%), url("../assets/img/mn-grain.png"), /* light tonal depth: lifted center-top, gently deeper edges */ radial-gradient(130% 150% at 50% -10%, #FAF8F4 0%, #F0EEE9 52%, #E7E3DA 100%); background-size: 220% 100%, 240px 240px, 100% 100%; background-blend-mode: screen, overlay, normal; } /* live footer (template 3695 root) gets the design's dark satin; the native #211918 background-color remains the no-image fallback underneath */ .elementor-location-footer .elementor-element-bdfb254 { background-color: #0B0B0C; background-image: linear-gradient(108deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.04) 44%, rgba(255,255,255,0.095) 50%, rgba(255,255,255,0.04) 56%, rgba(255,255,255,0) 72%), url("../assets/img/mn-grain.png"), radial-gradient(130% 150% at 50% -10%, #1c1c1d 0%, #111111 52%, #070707 100%); background-size: 220% 100%, 240px 240px, 100% 100%; background-blend-mode: screen, overlay, normal; position: relative; } /* design's top hairline: a faint center-lit seam where footer meets page */ .elementor-location-footer .elementor-element-bdfb254::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%); pointer-events: none; } /* the page canvas wears the white satin (sections with explicit backgrounds still paint over it, same as the flat color did) */ body { background-color: var(--mn-bg, #F0EEE9); background-image: linear-gradient(108deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.35) 44%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.35) 56%, rgba(255,255,255,0) 72%), url("../assets/img/mn-grain.png"), radial-gradient(130% 150% at 50% -10%, #FAF8F4 0%, #F0EEE9 52%, #E7E3DA 100%); background-size: 220% 100%, 240px 240px, 100% 100%; background-blend-mode: screen, overlay, normal; } /* ═══════════════════════════════════════════════════════════════════════════ SINGLE POST — verbatim post.css from final bundle 1rYPJAUiujXQftrzLaGP_A. Class-level rules bind to widget classes and shortcode markup; container- level layout is mirrored onto stable element IDs in the adapter below. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Single post template ─── */ /* Split hero (v2) — title left, image right */ .mn-art-hero--split { padding-top: 48px; padding-bottom: 28px; border-bottom: 1px solid var(--mn-rule); } .mn-art-hero--split .mn-art-hero__inner { max-width: none; display: grid; grid-template-columns: 6fr 6fr; gap: 56px; align-items: center; } .mn-art-hero--split .mn-art-hero__head { font-size: 48px; line-height: 1.04; margin: 0 0 18px; } .mn-art-hero--split .mn-art-hero__deck { font-size: 19px; line-height: 1.5; margin: 0 0 24px; } .mn-art-hero--split .mn-art-img { margin: 0; } .mn-art-hero--split .mn-art-img__media { aspect-ratio: 4 / 3; height: auto; } .mn-art-hero--split .mn-art-hero__crumbs { margin-bottom: 18px; } .mn-art-hero--split .mn-art-hero__eyebrow { margin-bottom: 14px; } .mn-art-hero--split .mn-byline { border-top: 1px solid var(--mn-rule); border-bottom: 0; padding-bottom: 0; margin-top: 4px; } .mn-art-hero--split .mn-art-img__cap { margin: 12px 0 0; font-size: 12px; } @media (max-width: 980px) { .mn-art-hero--split .mn-art-hero__inner { grid-template-columns: 1fr; gap: 28px; } .mn-art-hero--split .mn-art-hero__head { font-size: 34px; } .mn-art-hero--split .mn-art-img__media { aspect-ratio: 4/3; } } /* Article hero */ .mn-art-hero { padding: 56px 0 36px; } .mn-art-hero__inner { max-width: 820px; margin: 0 auto; } .mn-art-hero__crumbs { font-family: var(--mn-sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mn-muted); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mn-art-hero__crumbs a { color: var(--mn-muted); } .mn-art-hero__crumbs a:hover { color: var(--mn-ink); } .mn-art-hero__crumbs .sep { opacity: 0.4; } .mn-art-hero__crumbs .now { color: var(--mn-ink); font-weight: 600; } .mn-art-hero__eyebrow { font-family: var(--mn-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mn-ink); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .mn-art-hero__eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--mn-yellow); } .mn-art-hero__eyebrow .urg { background: var(--mn-crisis); color: var(--mn-paper); padding: 3px 8px; border-radius: 5px; letter-spacing: 0.1em; font-size: 10px; } .mn-art-hero__head { font-family: var(--mn-serif); font-weight: 700; font-size: 56px; line-height: 1.04; letter-spacing: -0.022em; margin: 0 0 22px; text-wrap: balance; } .mn-art-hero__deck { font-family: var(--mn-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.45; color: var(--mn-muted); margin: 0 0 32px; max-width: 64ch; text-wrap: pretty; } @media (max-width: 760px) { .mn-art-hero__head { font-size: 36px; } .mn-art-hero__deck { font-size: 18px; } } /* Byline row */ .mn-byline { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--mn-rule); border-bottom: 1px solid var(--mn-rule); font-family: var(--mn-sans); font-size: 13px; color: var(--mn-muted); } .mn-byline__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--mn-tint); } .mn-byline__avatar .mn-ph { font-size: 9px; } .mn-byline__who { line-height: 1.35; flex: 1; } .mn-byline__who b { color: var(--mn-ink); font-weight: 600; font-size: 14px; display: block; } .mn-byline__meta { display: flex; gap: 10px; align-items: center; font-size: 12px; } .mn-byline__meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.5; } .mn-byline__share { display: flex; gap: 6px; } .mn-share-btn { width: 34px; height: 34px; min-width: 34px; flex: none; /* keep square; never shrink in the flex row */ border: 1px solid var(--mn-rule); background: var(--cream-deep); color: var(--mn-ink); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; } .mn-share-btn svg { width: 17px; height: 17px; } .mn-share-btn i { font-size: 16px; line-height: 1; } /* the "Copiar enlace" item is a real