/* ==========================================================================
CTO Single noticia (M2) — news detail, OceanWP-native DOM, Elementor-free.
Extracted from the frozen mockup:
brain/output/mockups/CTO-site-soft-redesign/proposal-a/single.html + single-a.css
(base single rules from ../styles.css folded in). Scoped under .cto-single so
nothing here affects the rest of the OceanWP site. Loaded only on single posts.
Proposal A (theme-a) tokens live on the wrapper — same pattern as cto-home.css.
========================================================================== */
.cto-single {
/* Proposal A (theme-a) tokens the single depends on. */
--ink: #262321;
--ink-soft: #5c554e; /* muted meta text */
--accent: #EF1C1C; /* live-site red CTA */
--accent-ink: #ffffff;
--radius: 6px;
--cream: #FBF9F4; /* ambient cream frame around the reading column */
--reading: #FFFFFF; /* single-post reading column stays white (Bia) */
--card-fill: #FFFFFF; /* quiet cards: white on cream frame */
--hairline: #ECE7DC; /* warm hairline separating card from frame */
--card-shadow: 0 1px 2px rgba(60,50,35,0.06);
--accent-wash-1: rgba(239,28,28,.16);
--accent-wash-2: rgba(239,28,28,.04);
--font-body: "Helvetica Neue", Arial, "Segoe UI", Roboto, system-ui, sans-serif;
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 40px;
/* cream frame around the white reading column */
background: var(--cream);
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
padding: var(--space-4) var(--space-3);
}
.cto-single * { box-sizing: border-box; }
.cto-single img { max-width: 100%; display: block; }
.cto-single a { color: var(--accent); }
/* ==========================================================================
Reading column — white card on the cream frame, wider than default (940px).
========================================================================== */
.cto-single .single-post {
background: var(--reading);
max-width: 1040px; /* FIX 3 (vuelta 5): widened 940 -> 1040 so the
prose is a bit wider and the whole single (prose
+ Relacionadas + Comentários, which all share
this article's inner width) reads at one
consistent, comfortable content width/margin. */
margin: 0 auto;
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
padding: 56px 64px; /* generous internal padding, not edge-to-edge */
}
/* Left-align the header block: OceanWP centers single-post headers via
.single-post.content-max-width .entry-header (0,3,0). Match that specificity
(our article also carries .single-post) and win on load order. */
.cto-single .single-post .entry-header {
text-align: left;
}
/* ---- Category eyebrow (small, uppercase, red) -------------------------- */
.cto-single .entry-eyebrow {
font-family: var(--font-ui);
text-transform: uppercase;
letter-spacing: .16em;
font-size: 12px;
font-weight: 800;
color: var(--accent);
margin: 0 0 10px;
}
/* ---- Title ------------------------------------------------------------- */
/* Pin the dark ink color: OceanWP styles single .entry-title white for its
(suppressed) dark page-header bar, which would otherwise render white-on-white
in the in-content title. */
.cto-single .entry-title {
font-size: 34px;
line-height: 1.18;
margin: 0 0 14px;
font-weight: 700;
color: var(--ink);
}
/* ---- Lede / subtitle (larger, muted, italic) --------------------------- */
.cto-single .entry-lede {
font-size: 20px;
line-height: 1.5;
font-style: italic;
color: var(--ink-soft);
margin: 0 0 var(--space-3);
max-width: 60ch;
}
/* ---- entry-meta: circular avatar LEFT of author + date ----------------- */
.cto-single .entry-meta {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-ui);
font-size: 15px;
color: var(--ink-soft);
margin: 0 0 var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--hairline);
}
.cto-single .author-avatar {
width: 72px; /* real author photo, larger circular avatar */
height: 72px;
border-radius: 50%;
object-fit: cover; /* real gravatar/local photo fills the circle */
display: block;
flex: 0 0 auto;
background: none;
box-shadow: 0 2px 6px rgba(60, 50, 35, .28);
border: 2px solid #fff;
}
.cto-single .author-name { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.cto-single a.author-name:hover,
.cto-single a.author-name:focus-visible { color: var(--accent); text-decoration: underline; }
.cto-single .entry-sep { color: var(--hairline); }
.cto-single .entry-date { color: var(--ink-soft); }
/* ---- Featured image: real ![]()
, 16:9 framed --------------------------- */
.cto-single .single-post img.featured-image {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
border-radius: var(--radius);
border: 1px solid var(--hairline);
margin: 0 0 var(--space-3);
background: none;
display: block;
}
/* ---- entry-content prose + real subheadings ---------------------------- */
.cto-single .entry-content {
font-size: 17.5px;
line-height: 1.72;
}
.cto-single .entry-content p { margin: 0 0 var(--space-3); }
.cto-single .entry-content img { border-radius: var(--radius); margin: var(--space-2) 0; }
.cto-single .entry-content h2,
.cto-single .entry-subhead {
font-size: 23px;
line-height: 1.25;
font-weight: 800;
color: var(--ink);
margin: var(--space-4) 0 var(--space-2);
}
/* ==========================================================================
Split section heading (divider bar + light word + bold word)
========================================================================== */
.cto-single .heading-split {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 var(--space-3);
}
.cto-single .heading-split .rule {
width: 3px;
align-self: stretch;
min-height: 30px;
background: var(--accent);
flex: 0 0 auto;
}
.cto-single .heading-split h2 {
margin: 0;
font-size: 22px;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--ink);
font-weight: 300;
}
.cto-single .heading-split h2 b { font-weight: 800; }
/* ==========================================================================
NOTICIAS RELACIONADAS — 3-col post grid
========================================================================== */
.cto-single .related-posts {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--hairline);
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.related-card {
display: flex;
flex-direction: column;
background: var(--card-fill);
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.related-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(60, 50, 35, .12);
}
.related-photo {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--hairline);
}
.related-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.related-title {
font-size: 15.5px;
line-height: 1.3;
font-weight: 700;
color: var(--ink);
padding: var(--space-2) var(--space-2) 6px;
/* clamp to 2 lines with ellipsis, like the live post-grid title limit */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-card:hover .related-title { color: var(--accent); }
.related-date {
font-family: var(--font-ui);
font-size: 12.5px;
letter-spacing: .02em;
color: var(--ink-soft);
padding: 0 var(--space-2) var(--space-2);
margin-top: auto;
}
/* ==========================================================================
COMMENTS — native WordPress comment form reskinned (light Proposal A).
Selectors target both the mockup's flat classes and the real WP comment
markup that comments_template() emits.
========================================================================== */
.cto-single .post-comments {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--hairline);
font-family: var(--font-ui);
}
.cto-single .comments-heading,
.cto-single .post-comments .comments-title {
font-size: 20px;
font-weight: 800;
color: var(--ink);
margin: 0 0 var(--space-2);
}
.cto-single .comments-empty,
.cto-single .post-comments .no-comments {
color: var(--ink-soft);
font-size: 14.5px;
background: var(--cream);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 14px 16px;
margin: 0 0 var(--space-3);
}
/* Native comment-form reskin: WP wraps fields in