/* ============================================================ Kultura Jaya — editorial WordPress-ready template Maps cleanly to a classicpress / block theme via comments placed inline in each HTML file (search "WP:" in markup). ============================================================ */ /* ---------- Tokens (overridden by tweaks panel via inline style on ) ---------- */ :root { --bg: #fff8f4; --bg-2: #ffe9e1; --bg-3: #ffbdb3; --ink: #0e1230; --ink-2: #3a4170; --ink-3: #8a8fb0; --rule: #ead4cb; --rule-2: #d9b8ad; --accent: #4048EC; --accent-2: #ffbdb3; --font-display: "Spectral", "EB Garamond", Georgia, serif; --font-body: "Spectral", "EB Garamond", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --container: 1320px; --gutter: 28px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } .rule-thick { height: 2px; background: var(--ink); border: 0; margin: 0; } /* ---------- Mono labels (categories, dates, eyebrows) ---------- */ .eyebrow, .meta, .cat, .label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; } .cat { color: var(--accent); cursor: pointer; text-decoration: none; transition: opacity .15s; } .cat:hover { opacity: .65; text-decoration: underline; text-underline-offset: 3px; } .cat::before { content: "· "; color: var(--ink-3); } .cat:first-child::before { content: ""; } .author-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; transition: color .15s; } .author-link:hover { color: var(--accent); } /* ============================================================ TOP BAR ============================================================ */ .topbar { border-bottom: 1px solid var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); } .topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; gap: 24px; } .brand { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 28px; letter-spacing: -0.02em; color: var(--accent); line-height: 1; text-decoration: none; } .brand em { font-family: "Outfit", -apple-system, system-ui, sans-serif; font-weight: 600; font-style: normal; letter-spacing: -0.025em; font-size: 22px; line-height: 1; color: var(--accent); } .brand:hover { color: var(--accent); } .brand img { display: none; } .nav { display: flex; gap: 36px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .nav a { position: relative; padding: 6px 0; color: var(--ink); } .nav a.active { /* Mimics the current mode's hover state — see hover-modes section */ } .topbar-right { display: flex; justify-content: flex-end; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .iconbtn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ink); background: transparent; cursor: pointer; color: var(--ink); } .iconbtn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .iconbtn svg { width: 14px; height: 14px; } .iconbtn--accent { background: transparent; border-color: var(--accent); color: var(--accent); } .iconbtn--accent:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* ============================================================ MASTHEAD / HERO ============================================================ */ .masthead { padding: 64px 0 36px; border-bottom: 1px solid var(--rule); } .masthead-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; } .issue-line { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } .headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 9vw, 132px); line-height: 0.95; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } .headline em { font-style: italic; color: var(--accent); font-weight: 400; } .lede { max-width: 760px; margin-top: 28px; font-size: 22px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; } .lede strong { color: var(--ink); font-weight: 500; } /* ============================================================ FEATURED ARTICLE ============================================================ */ .featured { padding: 56px 0 64px; border-bottom: 1px solid var(--rule); } .featured-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } .featured.layout-clasica .featured-grid { grid-template-columns: 1.5fr 1fr; grid-template-areas: "img body" "img meta"; align-items: start; gap: 48px 64px; } .featured.layout-clasica .featured-left { display: contents; } .featured.layout-clasica .featured-body { grid-area: body; } .featured.layout-clasica .featured-img { grid-area: img; align-self: stretch; height: 100%; aspect-ratio: auto; min-height: 520px; } .featured.layout-clasica .featured-img-meta { grid-area: meta; align-self: start; } .featured.layout-clasica .featured-img-meta .byline { margin-bottom: 0; } .featured-img { display: block; aspect-ratio: 3 / 2; background: var(--bg-3); position: relative; overflow: hidden; } .featured-img-label { position: absolute; inset: auto 0 0 0; padding: 14px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 85%, transparent)); } .featured-tag { position: absolute; top: 18px; left: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 6px 12px; } .featured-body .eyebrow-row { display: flex; gap: 16px; margin-bottom: 24px; } .featured-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -0.018em; margin: 0 0 24px; text-wrap: balance; } .featured-title a:hover { color: var(--accent); } .featured-excerpt { font-size: 19px; color: var(--ink-2); line-height: 1.55; margin: 0 0 28px; text-wrap: pretty; } .byline { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 28px; } .byline span { color: var(--ink); } .readmore { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px; } .readmore:hover { color: var(--accent); border-color: var(--accent); } .readmore .arrow { transition: transform 0.2s; } .readmore:hover .arrow { transform: translateX(4px); } /* ============================================================ SECTION HEADERS ============================================================ */ .section { padding: 72px 0; border-bottom: 1px solid var(--rule); } .section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 44px; gap: 32px; } .section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.02em; line-height: 1; margin: 0; } .section-title em { font-style: italic; color: var(--accent); } .section-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 2px; } /* ============================================================ ARTICLE GRID (3-col) ============================================================ */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; } .card { display: flex; flex-direction: column; padding: 0; border-right: 0; position: relative; } .card + .card::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--rule); } .card + .card-row { border-top: 1px solid var(--rule); padding-top: 36px; margin-top: 36px; } .card-img { display: block; aspect-ratio: 3 / 2; background: var(--bg-3); margin-bottom: 22px; position: relative; overflow: hidden; } .card-meta { display: flex; gap: 14px; margin-bottom: 14px; } .card-title { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.012em; margin: 0 0 14px; text-wrap: balance; } .card-title a:hover { color: var(--accent); } .card-excerpt { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 0 0 18px; flex: 1; text-wrap: pretty; } .card-byline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; } .card-byline span { color: var(--ink); } /* Two-row variant w/ divider */ .grid-3.two-rows { row-gap: 0; } .grid-3.two-rows > .card { padding-bottom: 36px; } .grid-3.two-rows > .card:nth-child(n+4) { padding-top: 36px; border-top: 1px solid var(--rule); } /* ============================================================ CATEGORY CARDS ============================================================ */ .section.alt { background: var(--bg-2); } .cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .cat-card { background: var(--bg-2); padding: 36px 28px 32px; display: flex; flex-direction: column; min-height: 240px; transition: background 0.2s; position: relative; } .cat-card:hover { background: var(--bg); } .cat-card .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-3); } .cat-card .name { font-family: var(--font-display); font-weight: 400; font-size: 38px; letter-spacing: -0.02em; line-height: 1; margin: 14px 0 auto; } .cat-card .name em { font-style: italic; color: var(--accent); } .cat-card .desc { font-size: 14px; color: var(--ink-2); margin: 28px 0 0; line-height: 1.45; } .cat-card .count { position: absolute; top: 28px; right: 28px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; } /* ============================================================ PULL QUOTE / EDITORIAL ============================================================ */ .pullquote { padding: 96px 0; border-bottom: 1px solid var(--rule); text-align: center; background: var(--bg); } .pullquote-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.2; letter-spacing: -0.012em; max-width: 980px; margin: 0 auto; color: var(--ink); text-wrap: balance; } .pullquote-attr { margin-top: 28px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } /* ============================================================ NEWSLETTER ============================================================ */ .newsletter { background: var(--ink); color: var(--bg); padding: 96px 0; } .newsletter h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.5vw, 64px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; } .newsletter h2 em { font-style: italic; color: var(--accent-2); } .newsletter p { max-width: 580px; color: color-mix(in srgb, var(--bg) 70%, transparent); font-size: 19px; line-height: 1.5; margin: 0 0 36px; } .newsletter-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; } .nl-form { display: flex; border: 1px solid color-mix(in srgb, var(--bg) 25%, transparent); } .nl-form input { flex: 1; background: transparent; border: 0; padding: 18px 20px; color: var(--bg); font-family: var(--font-body); font-size: 17px; } .nl-form input::placeholder { color: color-mix(in srgb, var(--bg) 50%, transparent); } .nl-form input:focus { outline: none; } .nl-form button { background: var(--bg); color: var(--ink); border: 0; padding: 0 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; } .nl-form button:hover { background: var(--accent-2); color: var(--bg); } .nl-fine { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, transparent); margin-top: 14px; } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--bg); padding: 72px 0 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--rule); } .footer-brand { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 42px; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--accent); } .footer-brand em { font-family: "Outfit", -apple-system, system-ui, sans-serif; font-weight: 600; font-style: normal; letter-spacing: -0.025em; font-size: 36px; color: var(--accent); } .footer-tag { color: var(--ink-2); font-size: 17px; max-width: 360px; line-height: 1.45; } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; font-weight: 500; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 10px; font-size: 16px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } /* ============================================================ ARTICLE LIST (Archive page) ============================================================ */ .archive-hero { padding: 96px 0 56px; border-bottom: 1px solid var(--rule); } .archive-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 8vw, 120px); letter-spacing: -0.025em; line-height: 0.95; margin: 0; } .archive-hero h1 em { font-style: italic; color: var(--accent); } .archive-hero p { max-width: 660px; font-size: 21px; color: var(--ink-2); margin: 24px 0 0; line-height: 1.5; } .filter-bar { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); background: var(--bg); position: sticky; top: 68px; z-index: 20; } .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--rule); background: transparent; cursor: pointer; color: var(--ink-2); border-radius: 999px; } .chip:hover { border-color: var(--ink-3); color: var(--ink); } .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .filter-sort { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .list-article { position: relative; display: grid; grid-template-columns: 220px 1fr 240px; gap: 48px; padding: 36px 0; border-bottom: 1px solid var(--rule); align-items: start; } .list-article:hover { background: var(--bg-2); } .list-article .la-img { aspect-ratio: 4 / 3; background: var(--bg-3); } .list-article .la-meta { display: flex; gap: 14px; margin-bottom: 14px; } .list-article h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 14px; text-wrap: balance; } .list-article h3 a:hover { color: var(--accent); } .list-article h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .list-article .cat, .list-article .author-link { position: relative; z-index: 2; } .list-article p { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 0; text-wrap: pretty; } .list-article .la-side { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .list-article .la-side .by { display: block; margin-bottom: 4px; } .list-article .la-side .by-name { color: var(--ink); } .list-article .la-side .time { display: block; margin-top: 4px; } /* ============================================================ SINGLE ARTICLE ============================================================ */ .article-head { padding: 80px 0 56px; text-align: center; max-width: 920px; margin: 0 auto; } .article-head .crumbs { display: flex; justify-content: center; gap: 14px; margin-bottom: 28px; } .article-head h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -0.022em; line-height: 1.04; margin: 0 0 28px; text-wrap: balance; } .article-head .dek { font-size: 22px; line-height: 1.45; color: var(--ink-2); margin: 0 0 36px; text-wrap: pretty; } .article-head .author-row { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .author-row .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink); } .article-cover { width: 100%; aspect-ratio: 16 / 9; background: var(--bg-3); margin: 0 0 64px; position: relative; } .article-cover .credit { position: absolute; bottom: 16px; right: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .article-body { display: grid; grid-template-columns: 1fr; gap: 0; padding: 56px var(--gutter) 96px; } .article-body .prose { max-width: none; } .share-row { margin: 32px auto 0; padding: 18px var(--gutter) 0; display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--rule); } .share-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .share--horizontal { display: flex; flex-direction: row; gap: 10px; } .share--horizontal a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .share--horizontal a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } gap: 56px; padding-bottom: 96px; justify-content: center; } .article-body aside.left { position: sticky; top: 88px; align-self: start; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .article-body aside.left .share { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .article-body aside.left .share a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); } .article-body aside.left .share a:hover { background: var(--ink); color: var(--bg); } .prose { font-size: 20px; line-height: 1.65; color: var(--ink); } .prose p { margin: 0 0 1.4em; text-wrap: pretty; } .prose p:first-of-type::first-letter { font-family: var(--font-display); float: left; font-size: 5.2em; line-height: 0.85; font-weight: 400; padding: 8px 12px 0 0; color: var(--accent); } .prose h2 { font-family: var(--font-display); font-weight: 400; font-size: 36px; letter-spacing: -0.014em; line-height: 1.1; margin: 1.8em 0 0.5em; } .prose h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin: 1.6em 0 0.4em; } .prose blockquote { border-left: 2px solid var(--accent); padding: 4px 0 4px 24px; margin: 1.6em 0; font-style: italic; font-size: 24px; line-height: 1.4; color: var(--ink); } .prose figure { margin: 2em 0; } .prose figure .ph { aspect-ratio: 4/3; background: var(--bg-3); } .prose figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; } .prose hr { border: 0; height: 1px; background: var(--rule); margin: 2.4em auto; width: 80px; } .article-body aside.right { position: sticky; top: 88px; align-self: start; } .toc { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .toc h5 { margin: 0 0 14px; color: var(--ink); font-weight: 500; } .toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin-bottom: 8px; } .toc li a:hover { color: var(--accent); } .related { padding: 72px 0; background: var(--bg-2); border-top: 1px solid var(--rule); } /* ============================================================ NOSOTROS (About) ============================================================ */ .about-hero { padding: 96px 0 56px; } .about-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 8vw, 132px); letter-spacing: -0.025em; line-height: 0.95; margin: 0; } .about-hero h1 em { font-style: italic; color: var(--accent); } .about-lede { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding: 56px 0 96px; border-bottom: 1px solid var(--rule); } .about-lede .label-col { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .about-lede p { font-size: 24px; line-height: 1.45; margin: 0 0 1em; color: var(--ink); text-wrap: pretty; } .about-lede p strong { color: var(--accent); font-weight: 400; font-style: italic; } .principles { padding: 96px 0; border-bottom: 1px solid var(--rule); } .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 48px; } .principle { background: var(--bg); padding: 36px 32px; min-height: 280px; } .principle .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 24px; } .principle h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: -0.014em; margin: 0 0 16px; line-height: 1.1; } .principle h3 em { font-style: italic; color: var(--accent); } .principle p { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 0; } .team { padding: 96px 0; border-bottom: 1px solid var(--rule); } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; } .member { display: block; color: inherit; text-decoration: none; transition: opacity .2s ease; } .member h4 { transition: color .2s ease; } .member:hover h4 { color: var(--accent); } .member .face { aspect-ratio: 4/5; background: var(--bg-3); margin-bottom: 18px; position: relative; } .member h4 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; } .member .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .member p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; } /* ============================================================ Placeholder texture for image slots ============================================================ */ .ph, .featured-img, .card-img, .la-img, .article-cover, .face, .cat-card.imaged { background: repeating-linear-gradient( 135deg, rgba(26,24,21,0.045) 0 2px, transparent 2px 12px ), var(--bg-3); } .ph-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .topbar-inner { grid-template-columns: 1fr auto; height: 60px; } .nav { display: none; } .featured-grid { grid-template-columns: 1fr; gap: 32px; } .grid-3 { grid-template-columns: 1fr; } .card { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--rule); } .grid-3.two-rows > .card:nth-child(n+4) { padding-top: 32px; border-top: 0; } .cats { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .newsletter-grid { grid-template-columns: 1fr; gap: 24px; } .article-body { grid-template-columns: 1fr; padding: 0 var(--gutter) 64px; } .article-body aside { display: none; } .list-article { grid-template-columns: 1fr; gap: 16px; } .list-article .la-img { max-width: 280px; } .principles-grid, .team-grid { grid-template-columns: 1fr 1fr; } .about-lede { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 56px; } } /* ============================================================ Hover styles — 3 modes toggled via body[data-hover] Defaults to "subrayado" via tweaks.jsx ============================================================ */ /* Selectors reused across modes */ /* --hover-text: inline text/title links --hover-btn: pill / icon / form buttons --hover-card: card-like containers */ /* ============= A · SUBRAYADO (sweep underline) ============= */ body[data-hover="subrayado"] .prose a, body[data-hover="subrayado"] .footer-col a, body[data-hover="subrayado"] .author-link, body[data-hover="subrayado"] .nav a, body[data-hover="subrayado"] .nav a.active, body[data-hover="subrayado"] .readmore, body[data-hover="subrayado"] .toc li a, body[data-hover="subrayado"] .cat { background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .35s cubic-bezier(.2,.7,.2,1), color .2s ease; padding-bottom: 3px; } body[data-hover="subrayado"] .prose a:hover, body[data-hover="subrayado"] .footer-col a:hover, body[data-hover="subrayado"] .author-link:hover, body[data-hover="subrayado"] .nav a:hover, body[data-hover="subrayado"] .nav a.active, body[data-hover="subrayado"] .readmore:hover, body[data-hover="subrayado"] .toc li a:hover, body[data-hover="subrayado"] .cat:hover { background-size: 100% 2px; color: var(--accent); opacity: 1; text-decoration: none; } body[data-hover="subrayado"] .chip, body[data-hover="subrayado"] .nl-form button, body[data-hover="subrayado"] .iconbtn { position: relative; isolation: isolate; overflow: hidden; transition: color .25s ease, border-color .25s ease, transform .2s ease; } body[data-hover="subrayado"] .chip::before, body[data-hover="subrayado"] .nl-form button::before, body[data-hover="subrayado"] .iconbtn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--accent); z-index: -1; transition: height .3s cubic-bezier(.2,.7,.2,1); } body[data-hover="subrayado"] .chip:hover::before, body[data-hover="subrayado"] .nl-form button:hover::before, body[data-hover="subrayado"] .iconbtn:hover::before { height: 100%; } body[data-hover="subrayado"] .chip:hover, body[data-hover="subrayado"] .iconbtn:hover, body[data-hover="subrayado"] .nl-form button:hover { color: var(--bg); border-color: var(--accent); background: transparent; } /* Override: filter chips fill with coral, text stays ink-dark */ body[data-hover="subrayado"] .chip::before { background: #ffbdb3; } body[data-hover="subrayado"] .chip:hover { color: var(--ink); border-color: #ffbdb3; } body[data-hover="subrayado"] .card, body[data-hover="subrayado"] .cat-card, body[data-hover="subrayado"] .list-article { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } body[data-hover="subrayado"] .card:hover, body[data-hover="subrayado"] .cat-card:hover, body[data-hover="subrayado"] .list-article:hover { transform: translateY(-4px); box-shadow: 0 4px 0 0 var(--accent); } /* ============= B · TINTA (highlight wash + invert) ============= */ body[data-hover="tinta"] .prose a, body[data-hover="tinta"] .footer-col a, body[data-hover="tinta"] .author-link, body[data-hover="tinta"] .nav a, body[data-hover="tinta"] .nav a.active, body[data-hover="tinta"] .readmore, body[data-hover="tinta"] .toc li a, body[data-hover="tinta"] .cat { background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 0; background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .3s cubic-bezier(.2,.7,.2,1), color .15s ease, padding .15s ease; box-decoration-break: clone; -webkit-box-decoration-break: clone; } body[data-hover="tinta"] .prose a:hover, body[data-hover="tinta"] .footer-col a:hover, body[data-hover="tinta"] .author-link:hover, body[data-hover="tinta"] .nav a:hover, body[data-hover="tinta"] .nav a.active, body[data-hover="tinta"] .readmore:hover, body[data-hover="tinta"] .toc li a:hover, body[data-hover="tinta"] .cat:hover { background-size: 100% 100%; color: var(--bg); padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; border-bottom-color: transparent; opacity: 1; text-decoration: none; } /* Title links get a thick fill-from-left under-rule instead of a full block wash */ body[data-hover="tinta"] .card-title a, body[data-hover="tinta"] .featured-title a, body[data-hover="tinta"] .list-article h3 a { background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 6px; transition: background-size .35s cubic-bezier(.2,.7,.2,1), color .2s ease; padding-bottom: 4px; } body[data-hover="tinta"] .card-title a:hover, body[data-hover="tinta"] .featured-title a:hover, body[data-hover="tinta"] .list-article h3 a:hover { background-size: 100% 6px; color: var(--accent); } body[data-hover="tinta"] .chip, body[data-hover="tinta"] .nl-form button, body[data-hover="tinta"] .iconbtn { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; } body[data-hover="tinta"] .chip:hover, body[data-hover="tinta"] .iconbtn:hover, body[data-hover="tinta"] .nl-form button:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: scale(1.04); } body[data-hover="tinta"] .card, body[data-hover="tinta"] .cat-card, body[data-hover="tinta"] .list-article { position: relative; transition: background-color .25s ease, padding .25s ease; } body[data-hover="tinta"] .list-article { padding: 24px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 4px; } body[data-hover="tinta"] .list-article:hover { background: var(--bg-2); box-shadow: inset 4px 0 0 0 var(--accent); } body[data-hover="tinta"] .card:hover, body[data-hover="tinta"] .cat-card:hover { background: var(--bg-2); } /* ============= C · MARCADOR (shift + hard shadow) ============= */ body[data-hover="marcador"] .prose a, body[data-hover="marcador"] .footer-col a, body[data-hover="marcador"] .author-link, body[data-hover="marcador"] .nav a, body[data-hover="marcador"] .nav a.active, body[data-hover="marcador"] .readmore, body[data-hover="marcador"] .toc li a, body[data-hover="marcador"] .cat { position: relative; display: inline-block; transition: transform .2s cubic-bezier(.2,.7,.2,1), color .2s ease, letter-spacing .2s ease; } body[data-hover="marcador"] .card-title a, body[data-hover="marcador"] .featured-title a, body[data-hover="marcador"] .list-article h3 a { transition: color .2s ease, text-decoration-color .2s ease; } body[data-hover="marcador"] .card-title a:hover, body[data-hover="marcador"] .featured-title a:hover, body[data-hover="marcador"] .list-article h3 a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } body[data-hover="marcador"] .prose a:hover, body[data-hover="marcador"] .footer-col a:hover, body[data-hover="marcador"] .author-link:hover, body[data-hover="marcador"] .nav a:hover, body[data-hover="marcador"] .nav a.active, body[data-hover="marcador"] .readmore:hover, body[data-hover="marcador"] .toc li a:hover, body[data-hover="marcador"] .cat:hover { color: var(--accent); transform: translateX(6px); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; opacity: 1; } body[data-hover="marcador"] .chip, body[data-hover="marcador"] .nl-form button, body[data-hover="marcador"] .iconbtn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } body[data-hover="marcador"] .chip:hover, body[data-hover="marcador"] .iconbtn:hover, body[data-hover="marcador"] .nl-form button:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 0 var(--accent); background: var(--ink); color: var(--bg); border-color: var(--ink); } body[data-hover="marcador"] .card, body[data-hover="marcador"] .cat-card, body[data-hover="marcador"] .list-article { position: relative; transition: transform .25s ease, box-shadow .25s ease; } body[data-hover="marcador"] .card:hover, body[data-hover="marcador"] .cat-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 -2px var(--accent); } body[data-hover="marcador"] .list-article:hover { background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--accent); } /* ============================================================ FEATURED — alternate layouts Switch via body class on .featured: layout-clasica (default), layout-portada, layout-asimetrica, layout-editorial. ============================================================ */ /* ---------- A · PORTADA — full-bleed cover with overlaid title ---------- */ .featured.layout-portada { padding: 0 0 64px; border-bottom: 1px solid var(--rule); } .featured.layout-portada .container { max-width: none; padding: 0; } .featured.layout-portada .featured-grid { position: relative; display: block; grid-template-columns: none; gap: 0; } .featured.layout-portada .featured-left { display: contents; } .featured.layout-portada .featured-img { aspect-ratio: 21 / 9; width: 100%; max-height: 78vh; position: relative; } .featured.layout-portada .featured-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--ink) 70%, transparent) 100% ); pointer-events: none; } .featured.layout-portada .featured-tag { top: 28px; left: 28px; font-size: 12px; padding: 8px 14px; } .featured.layout-portada .featured-img-label, .featured.layout-portada .ph-label { display: none; } .featured.layout-portada .featured-img-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 var(--gutter) 48px; color: var(--bg); } .featured.layout-portada .featured-img-meta .cat, .featured.layout-portada .featured-img-meta .meta, .featured.layout-portada .featured-img-meta .byline, .featured.layout-portada .featured-img-meta .byline span, .featured.layout-portada .featured-img-meta .author-link { color: color-mix(in srgb, var(--bg) 90%, transparent); } .featured.layout-portada .featured-img-meta .author-link { border-bottom-color: currentColor; } .featured.layout-portada .featured-body { position: absolute; left: 0; right: 0; bottom: 100px; z-index: 2; padding: 0 var(--gutter); max-width: 1100px; } .featured.layout-portada .featured-title { font-size: clamp(40px, 5.4vw, 76px); color: var(--bg); margin: 0 0 16px; letter-spacing: -0.022em; } .featured.layout-portada .featured-title a { color: inherit; } .featured.layout-portada .featured-excerpt { display: none; } /* ---------- B · ASIMÉTRICA — oversize type, inset portrait ---------- */ .featured.layout-asimetrica .featured-grid { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 40px 64px; align-items: end; } .featured.layout-asimetrica .featured-body { grid-column: 1 / 2; grid-row: 1 / 2; padding-right: 0; } .featured.layout-asimetrica .featured-left { grid-column: 2 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 18px; } .featured.layout-asimetrica .featured-img { aspect-ratio: 3 / 4; width: 100%; } .featured.layout-asimetrica .featured-title { font-size: clamp(48px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.028em; margin: 0 0 32px; } .featured.layout-asimetrica .featured-excerpt { font-size: 18px; max-width: 56ch; margin-bottom: 0; } .featured.layout-asimetrica .featured-img-meta { grid-column: 1 / 2; grid-row: 2 / 3; align-self: end; padding-right: 0; } .featured.layout-asimetrica .featured-img-meta .eyebrow-row { margin-bottom: 14px; } .featured.layout-asimetrica .byline { margin-bottom: 0; } /* ---------- C · EDITORIAL — centered, image above, narrow column ---------- */ .featured.layout-editorial { padding: 48px 0 72px; } .featured.layout-editorial .featured-grid { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; max-width: 920px; margin: 0 auto; } .featured.layout-editorial .featured-left { display: contents; } .featured.layout-editorial .eyebrow-row { order: 1; justify-content: center; margin-bottom: 0; } .featured.layout-editorial .featured-body { order: 2; display: flex; flex-direction: column; align-items: center; } .featured.layout-editorial .featured-img { order: 3; aspect-ratio: 16 / 9; width: 100%; } .featured.layout-editorial .featured-img-meta { order: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; } .featured.layout-editorial .featured-img-meta .eyebrow-row { display: none; } .featured.layout-editorial .byline { margin-bottom: 0; } .featured.layout-editorial .featured-title { font-size: clamp(40px, 5vw, 68px); letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; max-width: 22ch; } .featured.layout-editorial .featured-excerpt { max-width: 60ch; font-size: 19px; text-wrap: pretty; margin: 0; } /* Responsive collapse */ @media (max-width: 980px) { .featured.layout-portada .featured-img { aspect-ratio: 4 / 5; max-height: none; } .featured.layout-portada .featured-body { bottom: 140px; } .featured.layout-portada .featured-title { font-size: clamp(32px, 8vw, 48px); } .featured.layout-asimetrica .featured-grid { grid-template-columns: 1fr; } .featured.layout-asimetrica .featured-body, .featured.layout-asimetrica .featured-left, .featured.layout-asimetrica .featured-img-meta { grid-column: 1; grid-row: auto; } .featured.layout-editorial .featured-title { font-size: clamp(32px, 7vw, 48px); } } /* ============================================================ FEATURED — minimal layouts layout-texto, layout-hilo, layout-marco ============================================================ */ /* ---------- E · TEXTO — no image, pure typography ---------- */ .featured.layout-texto { padding: 80px 0 96px; } .featured.layout-texto .featured-grid { display: block; max-width: 900px; margin: 0 auto; padding: 0; } .featured.layout-texto .featured-left, .featured.layout-texto .featured-img, .featured.layout-texto .featured-tag, .featured.layout-texto .featured-img-label, .featured.layout-texto .ph-label { display: none; } .featured.layout-texto .featured-img-meta { display: block; border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 40px; } .featured.layout-texto .featured-img-meta .eyebrow-row { margin-bottom: 12px; } .featured.layout-texto .featured-body { display: flex; flex-direction: column; } .featured.layout-texto .featured-body::before { content: "Destacado"; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; } .featured.layout-texto .featured-title { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.024em; margin: 0 0 28px; } .featured.layout-texto .featured-excerpt { font-size: 20px; line-height: 1.6; max-width: 64ch; margin: 0; } .featured.layout-texto .byline { margin-bottom: 0; } /* ---------- F · HILO — wire-service single-line ---------- */ .featured.layout-hilo { padding: 40px 0 48px; } .featured.layout-hilo .featured-grid { display: grid; grid-template-columns: 88px 1fr auto; grid-template-areas: "img body meta"; gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); } .featured.layout-hilo .featured-left { display: contents; } .featured.layout-hilo .featured-img { grid-area: img; aspect-ratio: 1 / 1; width: 88px; height: 88px; } .featured.layout-hilo .featured-tag, .featured.layout-hilo .featured-img-label, .featured.layout-hilo .ph-label { display: none; } .featured.layout-hilo .featured-body { grid-area: body; display: flex; flex-direction: column; gap: 6px; } .featured.layout-hilo .featured-body::before { content: "Destacado · 07 may 2026"; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .featured.layout-hilo .featured-title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.012em; margin: 0; } .featured.layout-hilo .featured-excerpt { display: none; } .featured.layout-hilo .featured-img-meta { grid-area: meta; text-align: right; } .featured.layout-hilo .featured-img-meta .eyebrow-row { display: none; } .featured.layout-hilo .byline { margin: 0; font-size: 10.5px; } /* ---------- G · MARCO — compact thumb + title ---------- */ .featured.layout-marco { padding: 56px 0 64px; } .featured.layout-marco .featured-grid { display: grid; grid-template-columns: 280px 1fr; grid-template-areas: "img body" "img meta"; gap: 14px 40px; align-items: start; } .featured.layout-marco .featured-left { display: contents; } .featured.layout-marco .featured-img { grid-area: img; aspect-ratio: 4 / 5; height: 100%; } .featured.layout-marco .featured-tag { top: 14px; left: 14px; font-size: 10px; padding: 5px 10px; } .featured.layout-marco .featured-img-label { display: none; } .featured.layout-marco .featured-body { grid-area: body; padding-top: 4px; } .featured.layout-marco .featured-title { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.016em; margin: 0 0 16px; } .featured.layout-marco .featured-excerpt { font-size: 16px; line-height: 1.55; margin: 0; max-width: 60ch; } .featured.layout-marco .featured-img-meta { grid-area: meta; align-self: end; padding-top: 20px; border-top: 1px solid var(--rule); } .featured.layout-marco .featured-img-meta .eyebrow-row { margin-bottom: 10px; } .featured.layout-marco .byline { margin: 0; } /* Responsive collapse for minimal layouts */ @media (max-width: 980px) { .featured.layout-texto .featured-title { font-size: clamp(32px, 7vw, 48px); } .featured.layout-hilo .featured-grid { grid-template-columns: 64px 1fr; grid-template-areas: "img body" "img meta"; gap: 16px; } .featured.layout-hilo .featured-img-meta { text-align: left; } .featured.layout-marco .featured-grid { grid-template-columns: 1fr; grid-template-areas: "img" "body" "meta"; } .featured.layout-marco .featured-img { aspect-ratio: 4 / 3; } } /* ============================================================ HOVER — D · MÍNIMO (subtle, restrained) ============================================================ */ body[data-hover="minimo"] a, body[data-hover="minimo"] .author-link, body[data-hover="minimo"] .nav a, body[data-hover="minimo"] .readmore, body[data-hover="minimo"] .cat, body[data-hover="minimo"] .toc li a, body[data-hover="minimo"] .footer-col a { transition: color .2s ease, opacity .2s ease; } body[data-hover="minimo"] a:hover, body[data-hover="minimo"] .author-link:hover, body[data-hover="minimo"] .nav a:hover, body[data-hover="minimo"] .readmore:hover, body[data-hover="minimo"] .cat:hover, body[data-hover="minimo"] .toc li a:hover, body[data-hover="minimo"] .footer-col a:hover { color: var(--accent); opacity: 1; text-decoration: none; } body[data-hover="minimo"] .nav a.active { color: var(--accent); } body[data-hover="minimo"] .chip, body[data-hover="minimo"] .nl-form button, body[data-hover="minimo"] .iconbtn { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } body[data-hover="minimo"] .chip:hover { border-color: var(--ink); color: var(--ink); background: transparent; } body[data-hover="minimo"] .iconbtn:hover, body[data-hover="minimo"] .nl-form button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } body[data-hover="minimo"] .card, body[data-hover="minimo"] .cat-card, body[data-hover="minimo"] .list-article { transition: background-color .2s ease; } body[data-hover="minimo"] .list-article:hover, body[data-hover="minimo"] .cat-card:hover { background: var(--bg-2); } /* ============================================================ HOVER — E · NUEVO (subrayado + minimal article cards) ============================================================ */ /* Inline links, nav, eyebrows, etc — full subrayado sweep */ body[data-hover="nuevo"] .prose a, body[data-hover="nuevo"] .footer-col a, body[data-hover="nuevo"] .author-link, body[data-hover="nuevo"] .nav a, body[data-hover="nuevo"] .nav a.active, body[data-hover="nuevo"] .readmore, body[data-hover="nuevo"] .toc li a, body[data-hover="nuevo"] .cat { background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .35s cubic-bezier(.2,.7,.2,1), color .2s ease; padding-bottom: 3px; } body[data-hover="nuevo"] .prose a:hover, body[data-hover="nuevo"] .footer-col a:hover, body[data-hover="nuevo"] .author-link:hover, body[data-hover="nuevo"] .nav a:hover, body[data-hover="nuevo"] .nav a.active, body[data-hover="nuevo"] .readmore:hover, body[data-hover="nuevo"] .toc li a:hover, body[data-hover="nuevo"] .cat:hover { background-size: 100% 2px; color: var(--accent); opacity: 1; text-decoration: none; } /* Buttons, chips, icon buttons — fill-from-bottom sweep */ body[data-hover="nuevo"] .chip, body[data-hover="nuevo"] .nl-form button, body[data-hover="nuevo"] .iconbtn { position: relative; isolation: isolate; overflow: hidden; transition: color .25s ease, border-color .25s ease, transform .2s ease; } body[data-hover="nuevo"] .chip::before, body[data-hover="nuevo"] .nl-form button::before, body[data-hover="nuevo"] .iconbtn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--accent); z-index: -1; transition: height .3s cubic-bezier(.2,.7,.2,1); } body[data-hover="nuevo"] .chip:hover::before, body[data-hover="nuevo"] .nl-form button:hover::before, body[data-hover="nuevo"] .iconbtn:hover::before { height: 100%; } body[data-hover="nuevo"] .chip:hover, body[data-hover="nuevo"] .iconbtn:hover, body[data-hover="nuevo"] .nl-form button:hover { color: var(--bg); border-color: var(--accent); background: transparent; } body[data-hover="nuevo"] .chip::before { background: #ffbdb3; } body[data-hover="nuevo"] .chip:hover { color: var(--ink); border-color: #ffbdb3; } /* Categoría grid — keep subrayado lift */ body[data-hover="nuevo"] .cat-card { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } body[data-hover="nuevo"] .cat-card:hover { transform: translateY(-4px); box-shadow: 0 4px 0 0 var(--accent); } /* ARTICLES — minimal hover only */ body[data-hover="nuevo"] .card, body[data-hover="nuevo"] .list-article { transition: background-color .2s ease; } body[data-hover="nuevo"] .list-article:hover { background: var(--bg-2); } /* Article-title links: simple color change, no underline sweep */ body[data-hover="nuevo"] .card-title a, body[data-hover="nuevo"] .featured-title a, body[data-hover="nuevo"] .list-article h3 a { transition: color .2s ease; } body[data-hover="nuevo"] .card-title a:hover, body[data-hover="nuevo"] .featured-title a:hover, body[data-hover="nuevo"] .list-article h3 a:hover { color: var(--accent); } /* ============================================================ NEWSLETTER — minimal variant ============================================================ */ .newsletter--minimal { background: transparent; color: var(--ink); padding: 56px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .newsletter--minimal h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.012em; margin: 0; color: var(--ink); max-width: 38ch; text-wrap: balance; } .newsletter--minimal h2 em { font-style: italic; color: var(--accent); } .nl-mini { display: flex; align-items: center; justify-content: space-between; gap: 48px; } .nl-mini-text { display: flex; flex-direction: column; gap: 10px; } .nl-mini-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .nl-form--minimal { display: flex; align-items: stretch; border: none; border-bottom: 1px solid var(--ink); min-width: 340px; } .nl-form--minimal input { flex: 1; background: transparent; border: 0; padding: 12px 4px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); } .nl-form--minimal input::placeholder { color: var(--ink-3); } .nl-form--minimal input:focus { outline: none; } .nl-form--minimal button { background: transparent; color: var(--ink); border: 0; padding: 12px 0 12px 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: color .2s ease; } .nl-form--minimal button:hover { color: var(--accent); background: transparent; } @media (max-width: 880px) { .nl-mini { flex-direction: column; align-items: flex-start; gap: 28px; } .nl-form--minimal { width: 100%; min-width: 0; } } /* ============================================================ DARK MODE — body.dark-mode overrides ============================================================ */ body.dark-mode { --bg: #0e1230; --bg-2: #181d4a; --bg-3: #ffbdb3; --ink: #fff5f1; --ink-2: #c5cae8; --ink-3: #8a8fb0; --rule: #232853; --rule-2: #2d3360; } body.dark-mode[data-accent="electric"] { --accent: #7d86ff; --accent-2: #ffbdb3; } /* Tag overlay (used on featured image) needs ink swap so chip stays legible */ body.dark-mode .featured-tag { background: var(--bg-3); color: var(--bg); } body.dark-mode .iconbtn { color: var(--ink-2); border-color: var(--rule-2); } body.dark-mode .iconbtn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } body.dark-mode .nl-form--minimal button { color: var(--ink); } body.dark-mode .article-cover .credit, body.dark-mode .featured-img-label { color: var(--ink-3); } body.dark-mode .share--horizontal a { color: var(--ink-2); border-color: var(--rule-2); } body.dark-mode .share--horizontal a:hover { background: var(--ink); color: var(--bg); } body.dark-mode .chip { color: var(--ink-2); border-color: var(--rule-2); } body.dark-mode .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } body.dark-mode footer { color: var(--ink-2); } body.dark-mode .footer-bottom { color: var(--ink-3); } body.dark-mode hr { border-color: var(--rule); } body.dark-mode blockquote { border-color: var(--accent); color: var(--ink); } body.dark-mode .ph, body.dark-mode .featured-img, body.dark-mode .card-img, body.dark-mode .la-img, body.dark-mode .article-cover, body.dark-mode .face { background: var(--bg-2); } body.dark-mode .ph-label, body.dark-mode .face .ph-label { color: var(--ink-3); } /* ============================================================ MOBILE — burger nav, featured stack, filter dropdown, category & principles single-column ============================================================ */ .burger { display: none; width: 38px; height: 38px; border: none; background: transparent; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-direction: column; gap: 5px; color: var(--ink); } .burger span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .25s ease, opacity .2s ease; } body.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } body.nav-open .burger span:nth-child(2) { opacity: 0; } body.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile-only filter