/*
Theme Name: Hello Elementor Child
Description: Blog post and blog listing templates for the Logic Square 2026 site. Reproduces the reference article's layout and section structure in the project's dark design system, and reuses the existing create-block/header and create-block/footer blocks rather than shipping its own chrome. See DESIGN-AUDIT.md.
Author: Logic Square
Template: hello-elementor
Version: 2.0.0
Requires PHP: 7.4
Text Domain: hello-elementor-child
*/
/* =========================================================================
* Design tokens.
*
* Palette, type and component values come from the project's own 2026 blocks
* (INS = insight-what-a-21b-platform-taught-us, HDR = header, FTR = footer,
* IFS = industry-financial-services). Layout and section structure come from
* the reference article (REF). Every value is traced in DESIGN-AUDIT.md.
* No color values appear anywhere below this block.
*
* Declared on :root rather than on the block, because the page shell rules
* below target and , which sit above any wrapper. This
* stylesheet is only enqueued on single posts and the blog listings, so
* nothing leaks elsewhere.
* ====================================================================== */
:root {
/* surfaces */
--ls-bg: #060B14; /* INS page background */
--ls-surface: #081120; /* INS card background */
--ls-placeholder: #F7F7F7; /* neutral light grey, empty image panels (hero + cards) */
--ls-surface-alt: #0A1524; /* INS avatar / subscribe row */
--ls-scroll-thumb: #223047; /* INS scrollbar thumb */
/* ink */
--ls-title: #FFFFFF; /* INS h1, prose strong */
--ls-heading: #EDF2FA; /* INS prose h2/h3, card titles */
--ls-text: rgba(210, 222, 240, 0.85); /* INS prose p */
--ls-text-strong: rgba(226, 236, 250, 0.92); /* INS callout body */
--ls-muted: rgba(199, 211, 230, 0.75); /* INS faq body, author bio */
--ls-meta: rgba(148, 163, 184, 0.8); /* INS breadcrumb, meta */
--ls-meta-dim: rgba(148, 163, 184, 0.6);/* INS tertiary meta */
/* lines */
--ls-border: rgba(148, 163, 184, 0.16); /* INS card border */
--ls-border-soft: rgba(148, 163, 184, 0.12); /* INS hero rule */
--ls-border-mid: rgba(148, 163, 184, 0.14); /* INS divider */
--ls-border-strong: rgba(148, 163, 184, 0.25);/* INS pill border */
/* accent */
--ls-accent: #4ADE80; /* INS/HDR accent */
--ls-accent-mid: #2FA45C; /* INS rule, underline */
--ls-accent-deep: #1B8A47; /* INS cta hover, HDR button */
--ls-accent-btn: #17743B; /* INS cta button */
--ls-accent-line: rgba(74, 222, 128, 0.4); /* INS avatar ring, pill */
--ls-accent-line-hi: rgba(74, 222, 128, 0.5); /* INS card hover border */
--ls-accent-wash: rgba(74, 222, 128, 0.1); /* INS subscribe hover */
/* effects */
--ls-glow: radial-gradient(800px 380px at 80% 0%, rgba(31, 58, 95, 0.4), transparent 70%); /* INS hero */
--ls-glow-cta: radial-gradient(700px 420px at 50% 60%, rgba(46, 164, 92, 0.14), transparent 70%); /* INS cta */
--ls-grid: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); /* INS grid overlay */
--ls-fade-mask: linear-gradient(#000, transparent); /* alpha ramp, not a palette color */
--ls-shadow-cta: 0 18px 36px -14px rgba(46, 164, 92, 0.6); /* INS cta hover */
--ls-shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.8); /* derived from INS cta shadow form */
--ls-media-fade: linear-gradient(180deg, rgba(6, 11, 20, 0) 0%, rgba(6, 11, 20, 0.92) 88%); /* REF meta overlay, recolored */
/* type */
--ls-font-display: "Source Serif 4", Georgia, serif; /* INS headings */
--ls-font-body: Inter, system-ui, sans-serif; /* INS body */
--ls-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* INS eyebrows */
/* layout */
--ls-container: 1280px; /* HDR/FTR block container, so the article lines up with the site nav and footer */
--ls-measure: 920px; /* INS article column, widened with the container */
--ls-pad-x: clamp(20px, 4vw, 44px); /* INS region padding */
--ls-pad-top: clamp(96px, 10vw, 124px); /* INS hero top, clears the fixed header */
--ls-pad-bottom: clamp(48px, 6vw, 64px); /* INS region bottom */
--ls-gap-section: clamp(40px, 5vw, 56px); /* INS section rhythm */
--ls-gap-block: 48px; /* INS section margin-top */
--ls-radius: 14px; /* INS cards */
--ls-radius-sm: 12px; /* INS small cards */
--ls-radius-btn: 8px; /* INS buttons */
--ls-radius-pill: 999px; /* INS pills */
--ls-anchor-offset: 96px; /* INS prose scroll-margin-top */
}
/* =========================================================================
* Page shell. The post and the listing both carry the site's own header and
* footer blocks, so the parent theme's chrome is hidden and the page
* background matches them.
*
* Every rule here is gated on `:has(.ls-single)` or `:has(.ls-archive)`, which
* are true only when one of this theme's templates actually rendered. That
* matters: if an Elementor Single or Archive template ever takes over a view,
* neither class is printed, none of this applies, and that page is left
* exactly as Elementor drew it.
* ====================================================================== */
html:has(.ls-single),
html:has(.ls-archive) {
background: var(--ls-bg);
scrollbar-color: var(--ls-scroll-thumb) var(--ls-bg);
scrollbar-width: thin;
}
body:has(.ls-single),
body:has(.ls-archive) {
background: var(--ls-bg);
}
/* The header and footer blocks each set `overflow-x: hidden` on html and body
to contain their own full-bleed sections. On this template that makes body a
scroll container, and a scroll container between a sticky element and the
viewport is exactly what stops `position: sticky` from ever sticking, so the
share rail scrolled away with the article instead of holding its place.
`clip` contains the overflow identically and creates no scroll container.
`!important` is required, not preferred: the block stylesheets are printed
during body output and therefore land after this file, and their
`body:has(.wp-block-create-block-footer)` selector carries exactly the same
specificity as the one below, so source order would otherwise decide it. */
html:has(.ls-single),
body:has(.ls-single),
html:has(.ls-archive),
body:has(.ls-archive) {
overflow-x: clip !important;
}
body:has(.ls-single) > header.site-header,
body:has(.ls-single) > footer.site-footer,
body:has(.ls-single) .site-header.dynamic-header,
body:has(.ls-single) .site-footer.dynamic-footer,
body:has(.ls-archive) > header.site-header,
body:has(.ls-archive) > footer.site-footer,
body:has(.ls-archive) .site-header.dynamic-header,
body:has(.ls-archive) .site-footer.dynamic-footer {
display: none;
}
.ls-single {
position: relative;
background: var(--ls-bg);
color: var(--ls-text);
font-family: var(--ls-font-body);
font-size: 16px;
line-height: 1.65; /* INS body */
-webkit-font-smoothing: antialiased;
padding-top: var(--ls-pad-top);
padding-bottom: var(--ls-pad-bottom);
overflow-x: hidden;
isolation: isolate;
}
/* The 2026 hero treatment, kept as a backdrop behind the top of the page
rather than as its own band, so the title, image and share rail all start
on the same line the way the reference article has them. */
.ls-single::before,
.ls-single::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 620px;
z-index: -1;
pointer-events: none;
}
.ls-single::before {
opacity: 0.05; /* INS grid overlay */
background-image: var(--ls-grid);
background-size: 72px 72px;
-webkit-mask-image: var(--ls-fade-mask);
mask-image: var(--ls-fade-mask);
}
.ls-single::after {
background: var(--ls-glow); /* INS hero glow */
}
.ls-single *,
.ls-single *::before,
.ls-single *::after,
.ls-archive *,
.ls-archive *::before,
.ls-archive *::after {
box-sizing: border-box;
}
.ls-single img,
.ls-archive img {
max-width: 100%;
height: auto;
}
.ls-single__container {
max-width: var(--ls-container);
margin: 0 auto;
padding-inline: var(--ls-pad-x);
}
/* Left column holds the title, image, article and CTA; the rail sits beside
it and starts level with the title, exactly as the reference does. */
.ls-single__row {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.ls-single__main {
min-width: 0;
width: 100%;
max-width: var(--ls-measure);
}
.ls-single__article {
min-width: 0;
width: 100%;
}
.ls-single__rail {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.ls-single a:focus-visible,
.ls-single summary:focus-visible,
.ls-single button:focus-visible,
.ls-archive a:focus-visible,
.ls-archive button:focus-visible {
outline: 2px solid var(--ls-accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
html:has(.ls-single) {
scroll-behavior: smooth;
}
}
/* Shared eyebrow: mono, tracked, uppercase, accent. INS uses this everywhere. */
.ls-eyebrow {
font-family: var(--ls-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ls-accent);
margin: 0;
}
/* =========================================================================
* 1. Title and deck, at the top of the left column.
* The breadcrumb, meta pill row and author byline were removed on request;
* the date, category and read time now sit on the featured image, which is
* where the reference article puts them.
* ====================================================================== */
.ls-title {
font-family: var(--ls-font-display);
font-weight: 600;
font-size: clamp(30px, 4vw, 50px); /* INS h1 */
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--ls-title);
margin: 0;
}
.ls-deck {
font-size: clamp(17px, 1.6vw, 20px); /* INS deck */
color: var(--ls-muted);
margin: 18px 0 0;
max-width: 70ch;
}
/* =========================================================================
* 2. Featured image.
* The figure is always present, in both states, and its box is identical
* either way: same width, same 16:9 height, same radius, border, shadow
* and margins. Only its contents differ, so the article below never moves
* and no layout shift is possible.
* state A .ls-media -> the image
* state B .ls-media--empty -> a plain light grey panel
* ====================================================================== */
.ls-media {
position: relative;
margin: 28px 0 0;
border-radius: var(--ls-radius);
overflow: hidden;
border: 1px solid var(--ls-border);
background: var(--ls-surface);
box-shadow: var(--ls-shadow-card);
}
.ls-media__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* State B. Same 16:9 box as the image, so the figure keeps its exact height.
Deliberately empty: no icon, no text, no ![]()
, nothing to fail to load. */
.ls-media__placeholder {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--ls-placeholder);
}
.ls-media--empty {
background: var(--ls-placeholder);
}
/* Date, category and read time, over a fade at the foot of the image. This is
where the reference article puts them. */
.ls-media__meta {
position: absolute;
inset: auto 0 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
padding: 40px 20px 16px;
background: var(--ls-media-fade);
font-family: var(--ls-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ls-muted);
}
.ls-media__meta a {
color: var(--ls-accent);
text-decoration: none;
border: 1px solid var(--ls-accent-line);
border-radius: var(--ls-radius-pill);
padding: 4px 11px; /* INS category pill */
}
.ls-media__meta a:hover {
border-color: var(--ls-accent);
}
/* =========================================================================
* 3. Table of contents
* ====================================================================== */
.ls-toc {
margin-top: 36px; /* INS abar */
border: 1px solid var(--ls-border);
border-radius: var(--ls-radius);
background: var(--ls-surface);
padding: clamp(20px, 2.6vw, 26px);
}
.ls-toc summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
list-style: none;
}
.ls-toc summary::-webkit-details-marker {
display: none;
}
.ls-toc__toggle {
font-family: var(--ls-font-mono);
font-size: 20px;
font-weight: 500;
color: var(--ls-meta);
line-height: 1;
transition: transform 0.2s;
}
.ls-toc[open] .ls-toc__toggle {
transform: rotate(45deg);
}
.ls-toc ol {
list-style: none;
margin: 16px 0 0;
padding: 0;
counter-reset: ls-toc;
}
.ls-toc ol ol {
margin: 4px 0 0;
padding-left: 20px;
}
.ls-toc li {
counter-increment: ls-toc;
padding: 4px 0;
}
.ls-toc a {
display: inline-flex;
gap: 10px;
font-size: 15px;
line-height: 1.5;
color: var(--ls-muted);
text-decoration: none;
transition: color 0.2s;
}
.ls-toc a::before {
content: counters(ls-toc, ".");
font-family: var(--ls-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--ls-accent);
flex-shrink: 0;
padding-top: 3px;
}
.ls-toc a:hover {
color: var(--ls-heading);
}
/* =========================================================================
* 4. Post content. Every Gutenberg element inherits the design, so no post
* ever needs styling by hand. Mirrors the INS `.prose` scale.
* ====================================================================== */
.ls-prose {
margin-top: var(--ls-gap-block);
}
.ls-prose > :first-child {
margin-top: 0;
}
.ls-prose p {
font-size: 17.5px; /* INS prose p */
line-height: 1.75;
color: var(--ls-text);
margin: 20px 0 0;
max-width: 80ch;
}
.ls-prose :where(h2, h3, h4, h5, h6) {
font-family: var(--ls-font-display);
font-weight: 600;
color: var(--ls-heading);
}
.ls-prose h2 {
font-size: clamp(24px, 2.6vw, 32px); /* INS prose h2 */
line-height: 1.18;
letter-spacing: -0.015em;
margin: 48px 0 0;
}
.ls-prose h3 {
font-size: 21px; /* INS prose h3 */
line-height: 1.22;
margin: 32px 0 0;
}
.ls-prose h4 {
font-size: 18px; /* INS faq heading */
line-height: 1.28;
margin: 26px 0 0;
}
.ls-prose h5,
.ls-prose h6 {
font-size: 17px;
line-height: 1.3;
margin: 22px 0 0;
}
.ls-prose :where(h2, h3, h4)[id] {
scroll-margin-top: var(--ls-anchor-offset); /* INS */
}
.ls-prose strong,
.ls-prose b {
color: var(--ls-title); /* INS prose strong */
font-weight: 600;
}
.ls-prose a {
color: var(--ls-heading);
text-decoration: underline;
text-decoration-color: var(--ls-accent-mid); /* INS prose a */
text-underline-offset: 3px;
}
.ls-prose a:hover {
color: var(--ls-accent);
}
.ls-prose :where(ul, ol) {
margin: 20px 0 0;
padding-left: 22px;
max-width: 80ch;
color: var(--ls-text);
}
.ls-prose li {
font-size: 17.5px;
line-height: 1.75;
padding: 4px 0;
}
.ls-prose li::marker {
color: var(--ls-accent);
}
.ls-prose :where(ul, ol) :where(ul, ol) {
margin-top: 4px;
}
.ls-prose blockquote {
font-family: var(--ls-font-display);
font-size: clamp(21px, 2.4vw, 28px); /* INS blockquote */
line-height: 1.34;
color: var(--ls-text-strong);
border-left: 3px solid var(--ls-accent-mid);
padding-left: 24px;
margin: 32px 0;
max-width: 72ch;
}
.ls-prose blockquote p {
font-size: inherit;
line-height: inherit;
color: inherit;
margin: 0;
max-width: none;
}
.ls-prose blockquote cite {
display: block;
margin-top: 12px;
font-family: var(--ls-font-mono);
font-size: 11px;
font-style: normal;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ls-meta);
}
.ls-prose figure {
margin: 32px 0 0;
}
.ls-prose img {
border-radius: var(--ls-radius-sm);
border: 1px solid var(--ls-border);
}
/* Inline SVG pasted into a post carries a viewBox and no width or height.
An