/* Theme Name: Hello Elementor Child Description: Blog post and blog listing templates for the Smoothire 2026 site. Redrawn in the Smoothire design system: white page, indigo accent, Schibsted Grotesk over Instrument Sans, with a gradient and depth layer over the flat palette. See DESIGN-AUDIT.md. Author: Smoothire Template: hello-elementor Version: 1.2.2 Requires PHP: 7.4 Text Domain: hello-elementor-child */ /* ========================================================================= * Design tokens. * * Every value below is lifted from the Smoothire 2026 blocks — SBP is * single-blog-post/src/single-blog-post/style.scss, which is the site's own * article design, and HDR/FTR are the header and footer regions inside it. * No colour literal appears anywhere after this block. * * Declared on :root rather than on a wrapper because the page shell rules * below target and , which sit above any wrapper. The stylesheet * is only enqueued on single posts and the blog listings, so nothing leaks * onto pages the theme does not draw. * ====================================================================== */ :root { /* surfaces */ --shc-page: #ffffff; /* SBP .sh-blog background */ --shc-card: #ffffff; /* SBP toc / card / comment background */ --shc-surface: #f6f7fb; /* SBP --sh-surface */ --shc-placeholder: #f6f7fb; /* SBP card media background, empty state */ /* ink */ --shc-ink: #17163f; /* SBP --sh-ink, headings */ --shc-ink-deep: #161543; /* SBP --sh-ink-deep, footer + code block */ --shc-body: #3d4657; /* SBP --sh-body, prose */ --shc-muted: #66708a; /* SBP --sh-muted, meta */ --shc-muted-soft: #8a93a6; /* SBP --sh-muted-soft, tertiary meta */ /* lines */ --shc-border: #e3e7ef; /* SBP --sh-border */ --shc-border-strong: #c9d0dd; /* SBP --sh-border-strong */ /* accent */ --shc-primary: #4540dc; /* SBP --sh-primary */ --shc-primary-dark: #3733b0; /* SBP --sh-primary-dark */ --shc-primary-tint: #edecfb; /* SBP --sh-primary-tint */ --shc-primary-tint-hi: #e3e1fa; /* SBP badge hover */ --shc-primary-line: rgba(69, 64, 220, 0.35); /* SBP prose underline */ --shc-primary-ring: rgba(69, 64, 220, 0.14); /* SBP input focus ring */ /* footer, the one dark region in the design */ --shc-dark-border: #363275; /* FTR --sh-dark-border */ --shc-dark-text: #a6adbf; /* FTR --sh-dark-text */ --shc-dark-faint: #8a8fb0; /* FTR --sh-dark-faint */ --shc-dark-bright: #e8ebf2; /* FTR --sh-dark-bright */ /* callout accents */ --shc-success: #0e8a5f; /* SBP --sh-success */ --shc-success-bg: #eefaf4; /* SBP is-style-success */ --shc-success-line: #cbeada; --shc-success-ink: #0b5f43; --shc-warning: #d97706; /* SBP is-style-warning */ --shc-warning-bg: #fff8ed; --shc-warning-line: #f6e2c3; --shc-warning-ink: #7c4a06; --shc-info-line: #ddd8f5; /* SBP is-style-info */ --shc-info-ink: #2f2b6b; /* effects */ --shc-shadow-hair: 0 1px 2px rgba(22, 21, 67, 0.05); /* SBP toc / card */ --shc-shadow-card: 0 1px 2px rgba(22, 21, 67, 0.05), 0 12px 32px rgba(22, 21, 67, 0.09); /* SBP --sh-shadow-card */ --shc-shadow-lift: 0 1px 2px rgba(22, 21, 67, 0.06), 0 16px 40px rgba(22, 21, 67, 0.12); /* SBP --sh-shadow-lift */ --shc-shadow-media: 0 1px 2px rgba(22, 21, 67, 0.05), 0 12px 32px rgba(22, 21, 67, 0.09), 0 32px 80px rgba(22, 21, 67, 0.1); /* SBP hero image */ --shc-shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 6px rgba(69, 64, 220, 0.28), 0 8px 24px rgba(69, 64, 220, 0.18); /* SBP primary button */ --shc-shadow-ink: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(22, 21, 67, 0.16); /* SBP ink button */ --shc-glow: radial-gradient(ellipse at center, rgba(69, 64, 220, 0.07), transparent 62%); /* SBP hero glow */ --shc-chrome-blur: rgba(255, 255, 255, 0.88); /* SBP sticky header */ /* ------------------------------------------------------------------- * Premium layer. * * Nothing new enters the design here. The four colours below are the * accent and the ink above pushed one step lighter or deeper, which is * all a flat colour needs to be drawn as a gradient, and everything * after them is composed from tokens that already existed. * ---------------------------------------------------------------- */ --shc-primary-lift: #5a56e6; /* --shc-primary, lightened: gradient head */ --shc-primary-deep: #302c9e; /* --shc-primary-dark, deepened: gradient foot */ --shc-ink-mid: #1d1b52; /* --shc-ink-deep, lifted: dark panel head */ --shc-ink-well: #100f34; /* --shc-ink-deep, deepened: dark panel foot */ /* gradients */ --shc-grad-primary: linear-gradient(135deg, var(--shc-primary-lift), var(--shc-primary) 52%, var(--shc-primary-dark)); --shc-grad-primary-hi: linear-gradient(135deg, var(--shc-primary), var(--shc-primary-dark) 54%, var(--shc-primary-deep)); --shc-grad-ink: linear-gradient(150deg, var(--shc-ink-mid), var(--shc-ink-deep) 52%, var(--shc-ink-well)); --shc-grad-tint: linear-gradient(160deg, var(--shc-primary-tint), var(--shc-card) 86%); --shc-grad-surface: linear-gradient(170deg, var(--shc-surface), var(--shc-card) 72%); --shc-grad-rule: linear-gradient(90deg, transparent, var(--shc-border-strong) 18%, var(--shc-border-strong) 82%, transparent); --shc-grad-sheen: linear-gradient(100deg, transparent 26%, rgba(255, 255, 255, 0.26) 50%, transparent 74%); --shc-grad-veil: linear-gradient(180deg, rgba(22, 21, 67, 0) 58%, rgba(22, 21, 67, 0.18)); /* the hero wash, drawn as two offset lobes rather than one centred ellipse */ --shc-halo: radial-gradient(760px 400px at 20% -12%, rgba(69, 64, 220, 0.10), transparent 68%), radial-gradient(640px 360px at 84% 4%, rgba(69, 64, 220, 0.07), transparent 70%); /* the same wash for the dark CTA panel, where it has to carry over ink */ --shc-halo-dark: radial-gradient(460px 260px at 26% 0%, rgba(90, 86, 230, 0.5), transparent 68%), radial-gradient(420px 240px at 78% 12%, rgba(69, 64, 220, 0.34), transparent 70%); /* extra depth */ --shc-shadow-float: 0 2px 4px rgba(22, 21, 67, 0.05), 0 22px 48px rgba(22, 21, 67, 0.13), 0 48px 100px rgba(22, 21, 67, 0.08); --shc-shadow-btn-hi: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px rgba(69, 64, 220, 0.3), 0 14px 34px rgba(69, 64, 220, 0.26); --shc-shadow-chrome: 0 1px 0 rgba(227, 231, 239, 0.9), 0 10px 30px rgba(22, 21, 67, 0.07); --shc-ring-hair: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* top highlight on light panels */ --shc-ring-dark: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* top highlight on ink panels */ /* type */ --shc-font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; /* SBP headings */ --shc-font-body: "Instrument Sans", system-ui, -apple-system, sans-serif; /* SBP body */ --shc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* SBP code */ /* layout */ --shc-container: 1200px; /* SBP --sh-container */ --shc-gutter: 32px; /* SBP --sh-gutter */ --shc-measure: 780px; /* SBP --sh-measure, article column */ --shc-header-h: 64px; /* SBP --sh-header-h */ --shc-anchor-offset: 96px; /* header height plus SBP's 32px scroll margin */ --shc-ease: cubic-bezier(0.23, 1, 0.32, 1); /* SBP --ease-out */ } /* ========================================================================= * Page shell. * * Every rule is gated on `:has(.shc-single)` or `:has(.shc-archive)`, which * are true only when one of this theme's templates actually rendered. 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(.shc-single), html:has(.shc-archive), body:has(.shc-single), body:has(.shc-archive) { background: var(--shc-page); } /* This theme renders its own header and footer, so the parent theme's chrome and anything Turbo H&F Builder injected would otherwise double up. */ body:has(.shc-single) > header.site-header, body:has(.shc-single) > footer.site-footer, body:has(.shc-single) .site-header.dynamic-header, body:has(.shc-single) .site-footer.dynamic-footer, body:has(.shc-archive) > header.site-header, body:has(.shc-archive) > footer.site-footer, body:has(.shc-archive) .site-header.dynamic-header, body:has(.shc-archive) .site-footer.dynamic-footer { display: none; } .shc-single, .shc-archive { background: var(--shc-page); color: var(--shc-body); font-family: var(--shc-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .shc-single, .shc-single *, .shc-single *::before, .shc-single *::after, .shc-archive, .shc-archive *, .shc-archive *::before, .shc-archive *::after, .shc-chrome, .shc-chrome *, .shc-chrome *::before, .shc-chrome *::after { box-sizing: border-box; } .shc-single img, .shc-archive img { max-width: 100%; height: auto; } .shc-single a:focus-visible, .shc-single summary:focus-visible, .shc-single button:focus-visible, .shc-single :where(input, textarea):focus-visible, .shc-archive a:focus-visible, .shc-archive button:focus-visible, .shc-chrome a:focus-visible, .shc-chrome button:focus-visible { outline: 2px solid var(--shc-primary); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: no-preference) { html:has(.shc-single) { scroll-behavior: smooth; } } .shc-single ::selection, .shc-archive ::selection { background: var(--shc-primary-tint-hi); color: var(--shc-ink); } /* ------------------------------------------------------------------------- * Scroll-driven detail. Both effects below are pure CSS on elements that * already exist, so they add no markup and no script. A browser without * scroll-driven animations simply never paints them and the page is exactly * what it was before. * ---------------------------------------------------------------------- */ @keyframes shc-progress { to { transform: scaleX(1); } } /* `translate` rather than `transform`, so a card that also lifts on hover composes the two instead of one cancelling the other. */ @keyframes shc-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } } @keyframes shc-settle { from { opacity: 0; scale: 0.985; } to { opacity: 1; scale: 1; } } @supports (animation-timeline: scroll()) { /* Reading progress, on the underside of the sticky header. Articles only — a listing has no single length to report. */ @media (prefers-reduced-motion: no-preference) { body:has(.shc-single) .shc-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: var(--shc-grad-primary); animation: shc-progress linear; animation-timeline: scroll(root block); } } /* The header earns its shadow on the way down instead of wearing one from the first pixel. */ .shc-header { animation: shc-header-lift linear both; animation-timeline: scroll(root block); animation-range: 0 140px; } @keyframes shc-header-lift { to { box-shadow: var(--shc-shadow-chrome); } } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .shc-card-post, .shc-lead, .shc-related__title, .shc-cta, .shc-prose > :where(figure, .wp-block-image, pre, blockquote, .wp-block-pullquote, .shc-table-scroll) { animation: shc-rise linear both; animation-timeline: view(); /* Both ends inside `entry`, deliberately. A range that finishes in `cover` is never completed on a page that scrolls less than one viewport, which would leave the element parked at part opacity for good. Finishing in `entry` ties the end of the reveal to the element being fully in view, which is true on every page. */ animation-range: entry 5% entry 85%; } } } /* Shared eyebrow. SBP sets these small caps labels in the body face rather than a mono face, tracked and uppercased. */ .shc-eyebrow { display: block; font-family: var(--shc-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--shc-primary); margin: 0; } /* Arrow inside a link or button, nudged on hover. SBP .sh-arr. */ .shc-arr { display: inline-block; flex-shrink: 0; line-height: 1; transition: transform 220ms var(--shc-ease); } /* The arrow is used two ways: a span wrapping a glyph, and the class applied to the itself. `svg.shc-arr` is what catches the second — an inline SVG that carries a viewBox and no dimensions resolves to the full width of its container, which paints a 15px arrow as a block the width of the CTA. */ .shc-arr svg, svg.shc-arr, .shc-btn > svg { display: block; width: 15px; height: 15px; } a:hover > .shc-arr, a:focus > .shc-arr, .shc-btn:hover .shc-arr, .shc-btn:focus .shc-arr { transform: translateX(4px); } /* ========================================================================= * 1. Site chrome. Rendered by inc/partials/, so a post carries the same * header and footer as every marketing page without depending on a plugin. * ====================================================================== */ .shc-header { position: sticky; top: 0; z-index: 50; background: var(--shc-chrome-blur); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--shc-border); font-family: var(--shc-font-body); } .shc-header__inner { max-width: var(--shc-container); margin: 0 auto; padding: 15px var(--shc-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .shc-brand { display: inline-flex; align-items: center; text-decoration: none; } .shc-brand img { height: 25px; width: auto; } .shc-wordmark { font-family: var(--shc-font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; color: var(--shc-ink); } .shc-header__nav { display: flex; align-items: center; gap: 28px; } .shc-header__nav a, .shc-header__signin { position: relative; font-size: 14.5px; font-weight: 500; color: var(--shc-ink); text-decoration: none; transition: color 150ms ease; } /* An accent rule that opens from the centre. Sits on the type's own baseline gap rather than on a border, so nothing in the row moves when it appears. */ .shc-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--shc-grad-primary); transform: scaleX(0); transition: transform 240ms var(--shc-ease); } .shc-header__nav a:hover, .shc-header__signin:hover { color: var(--shc-primary); } .shc-header__nav a:hover::after, .shc-header__nav a:focus-visible::after { transform: scaleX(1); } .shc-header__actions { display: flex; align-items: center; gap: 18px; } /* ---- Buttons, shared by the chrome, the CTA and the comment form ---- */ .shc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; font-family: var(--shc-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.005em; padding: 9px 17px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; isolation: isolate; transition: background 180ms var(--shc-ease), box-shadow 240ms var(--shc-ease), transform 200ms var(--shc-ease); } /* A light that crosses the face once on hover. One pseudo element, no keyframe loop, so it costs a single composited pass and never runs at rest. */ .shc-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--shc-grad-sheen); transform: translateX(-120%); transition: transform 620ms var(--shc-ease); } .shc-btn:hover::after, .shc-btn:focus-visible::after { transform: translateX(120%); } .shc-btn:active { transform: scale(0.97); } .shc-btn--ink { background: var(--shc-grad-ink); color: var(--shc-page); box-shadow: var(--shc-shadow-ink); } .shc-btn--ink:hover, .shc-btn--ink:focus { background: var(--shc-grad-primary); color: var(--shc-page); box-shadow: var(--shc-shadow-btn); transform: translateY(-1px); } .shc-btn--primary { background: var(--shc-grad-primary); color: var(--shc-page); font-size: 15px; padding: 13px 26px; border-radius: 12px; box-shadow: var(--shc-shadow-btn); } .shc-btn--primary:hover, .shc-btn--primary:focus { background: var(--shc-grad-primary-hi); color: var(--shc-page); box-shadow: var(--shc-shadow-btn-hi); transform: translateY(-1px); } .shc-btn--primary:active, .shc-btn--ink:active { transform: translateY(0) scale(0.98); } /* ---- Footer ---- */ .shc-footer { position: relative; background: var(--shc-grad-ink); border-top: 1px solid var(--shc-dark-border); font-family: var(--shc-font-body); overflow: hidden; } /* The same accent wash that opens an article, closing it. */ .shc-footer::before { content: ""; position: absolute; inset: -60% -20% auto; height: 420px; background: var(--shc-glow); pointer-events: none; } .shc-footer__inner { position: relative; max-width: var(--shc-container); margin: 0 auto; padding: 56px var(--shc-gutter) 32px; display: flex; flex-direction: column; gap: 40px; } .shc-footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .shc-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; } .shc-footer__brand p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--shc-dark-text); } .shc-wordmark--footer { color: var(--shc-page); font-size: 16px; } .shc-footer__nav { display: flex; gap: 56px; flex-wrap: wrap; } .shc-footer__col { display: flex; flex-direction: column; gap: 10px; } .shc-footer__col a { width: fit-content; font-size: 14px; color: var(--shc-dark-text); text-decoration: none; transition: color 180ms var(--shc-ease), transform 220ms var(--shc-ease); } .shc-footer__col a:hover, .shc-footer__col a:focus { color: var(--shc-page); transform: translateX(3px); } .shc-footer__heading { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--shc-dark-bright); margin-bottom: 2px; } .shc-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--shc-dark-border); padding-top: 24px; flex-wrap: wrap; } .shc-footer__bottom span { font-size: 13px; color: var(--shc-dark-faint); } .shc-footer__bottom a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--shc-dark-text); text-decoration: none; transition: color 180ms var(--shc-ease); } .shc-footer__bottom a:hover, .shc-footer__bottom a:focus { color: var(--shc-page); } /* ========================================================================= * 2. Article shell. * ====================================================================== */ .shc-single { position: relative; padding-top: 72px; padding-bottom: 96px; isolation: isolate; } /* The indigo wash SBP puts behind the top of an article. Kept as a backdrop rather than its own band, so the title, image and rail all start on the same line. */ .shc-single::before { content: ""; position: absolute; inset: -320px 0 auto; height: 940px; background: var(--shc-halo); pointer-events: none; z-index: -1; } .shc-single__container { max-width: var(--shc-container); margin: 0 auto; padding-inline: var(--shc-gutter); } /* The row starts below the hero: the article and its CTA on the left, the author and share cards in the rail beside them. */ .shc-single__row { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; margin-top: 56px; } .shc-single__main { min-width: 0; width: 100%; max-width: var(--shc-measure); } .shc-single__article { min-width: 0; width: 100%; } .shc-single__rail { width: 100%; display: flex; flex-direction: column; gap: 20px; } /* ========================================================================= * 3. Hero: category, title, standfirst, byline. * * The opening block runs the full container instead of the article column, * and the two column row starts underneath it. That is what lets the title * breathe at a size the reading column could not hold, and the image run the * width of the page while the text keeps a 780px measure. * ====================================================================== */ .shc-hero { max-width: 900px; } .shc-hero__cat { display: inline-flex; align-items: center; background: var(--shc-primary-tint); border: 1px solid var(--shc-info-line); border-radius: 999px; padding: 5px 14px; margin-bottom: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--shc-primary); text-decoration: none; transition: background 220ms var(--shc-ease), color 180ms var(--shc-ease), box-shadow 220ms var(--shc-ease), transform 220ms var(--shc-ease); } .shc-hero__cat:hover, .shc-hero__cat:focus { background: var(--shc-grad-primary); border-color: transparent; color: var(--shc-page); box-shadow: var(--shc-shadow-btn); transform: translateY(-1px); } /* Author, date and reading time, on one line under the standfirst. The author carries the ink so the eye lands on the name and reads the rest as supporting detail. */ .shc-hero__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--shc-border); font-size: 14px; color: var(--shc-muted); } .shc-hero__byline > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--shc-border-strong); vertical-align: middle; margin-right: 14px; } .shc-hero__author { font-weight: 600; color: var(--shc-ink); } .shc-title { font-family: var(--shc-font-display); font-weight: 700; font-size: clamp(35px, 5vw, 62px); line-height: 1.03; letter-spacing: -0.032em; color: var(--shc-ink); margin: 0; text-wrap: balance; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } .shc-deck { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--shc-muted); margin: 22px 0 0; max-width: 58ch; text-wrap: pretty; } /* ========================================================================= * 4. Featured image. * The figure is always present, in both states, and its box is identical * either way: same width, same aspect box, same radius, border, shadow and * margins. Only its contents differ, so the article below never moves and * no layout shift is possible. * state A .shc-media__img -> the image * state B .shc-media__placeholder -> a plain surface panel * Both share one rule, so the box cannot drift between the two. The figure * also carries `.shc-media--empty` in state B; nothing styles it, it is * there so a site can target the empty case without editing a template. * ====================================================================== */ .shc-media { margin: 48px 0 0; } .shc-media__img, .shc-media__placeholder { display: block; width: 100%; aspect-ratio: 16 / 7.4; object-fit: cover; border: 1px solid var(--shc-border); border-radius: 24px; box-shadow: var(--shc-shadow-media); background: var(--shc-surface); } .shc-media__placeholder { background: var(--shc-grad-surface); } /* The hero settles in rather than snapping on. It is the first thing on the page, so it is the one element worth an entrance. */ @media (prefers-reduced-motion: no-preference) { .shc-media__img { animation: shc-settle 720ms var(--shc-ease) both; } } /* ========================================================================= * 5. Table of contents. * ====================================================================== */ .shc-toc { position: relative; margin-top: 40px; border: 1px solid var(--shc-border); border-radius: 16px; background: var(--shc-grad-surface); box-shadow: var(--shc-shadow-hair), var(--shc-ring-hair); overflow: hidden; } /* A hairline of accent across the top edge, the one mark that tells the contents box apart from the callouts further down the article. */ .shc-toc::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--shc-grad-primary); opacity: 0.85; } .shc-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--shc-muted); transition: color 180ms var(--shc-ease); } .shc-toc summary:hover { color: var(--shc-ink); } /* The rule under the header only exists while the box is open, so a closed box is one clean bar rather than a bar with a line hanging off it. */ .shc-toc[open] summary { border-bottom: 1px solid var(--shc-border); } .shc-toc summary::-webkit-details-marker { display: none; } .shc-toc summary .shc-eyebrow { font-size: inherit; letter-spacing: inherit; color: inherit; } .shc-toc__toggle { flex-shrink: 0; color: var(--shc-muted-soft); font-size: 18px; font-weight: 500; line-height: 1; transition: transform 260ms var(--shc-ease); } .shc-toc[open] .shc-toc__toggle { transform: rotate(45deg); } .shc-toc ol { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 1px; counter-reset: shc-toc; } /* Top level entries are numbered from a counter rather than a marker, so the numeral can be set in the accent, aligned on a column of its own, and left out of the sub-entries entirely. */ .shc-toc nav > ol > li { counter-increment: shc-toc; } .shc-toc nav > ol > li > a { display: grid; grid-template-columns: 22px 1fr; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; color: var(--shc-ink); } .shc-toc nav > ol > li > a::before { content: counter(shc-toc, decimal-leading-zero); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--shc-primary); transition: color 200ms var(--shc-ease); } /* Sub-entries hang off a guide line that starts under the numeral column, so the nesting reads without a second set of markers. */ .shc-toc ol ol { margin: 4px 0 8px 21px; padding: 0 0 0 12px; border-left: 1px solid var(--shc-border); gap: 0; counter-reset: none; } .shc-toc a { display: block; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--shc-muted); text-decoration: none; transition: color 200ms var(--shc-ease), background 200ms var(--shc-ease), transform 200ms var(--shc-ease); } .shc-toc a:hover, .shc-toc a:focus { color: var(--shc-ink); background: var(--shc-primary-tint); transform: translateX(3px); } .shc-toc a:hover::before, .shc-toc a:focus::before { color: var(--shc-primary-dark); } .shc-toc ol ol a { font-size: 13.5px; padding: 7px 10px; } /* ========================================================================= * 6. Post content. Every Gutenberg element inherits the design, so no post * ever needs styling by hand. Mirrors SBP's .sh-blog__content scale. * ====================================================================== */ .shc-prose { margin-top: 0; font-size: 18px; line-height: 1.78; color: var(--shc-body); overflow-wrap: break-word; } .shc-prose > * { margin-block: 0 28px; } .shc-prose > :last-child { margin-bottom: 0; } .shc-prose p { text-wrap: pretty; } /* The standfirst. Whichever paragraph opens the article — straight after the AT A GLANCE callout when there is one — carries one step more weight, which is what gives an article a beginning rather than just a top. */ .shc-prose > p:first-of-type, .shc-prose > .shc-glance + p { font-size: 1.09em; line-height: 1.68; color: var(--shc-ink); } .shc-prose :where(h2, h3, h4, h5, h6) { font-family: var(--shc-font-display); color: var(--shc-ink); letter-spacing: -0.018em; line-height: 1.2; text-wrap: balance; } .shc-prose :where(h2, h3, h4, h5, h6)[id] { scroll-margin-top: var(--shc-anchor-offset); } .shc-prose h2 { font-size: clamp(28px, 3.1vw, 38px); font-weight: 700; letter-spacing: -0.026em; margin: 76px 0 18px; } /* A short accent rule above every section head. It is the cheapest way to give a long article a rhythm the eye can scan, and it costs no markup. */ .shc-prose > h2::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 18px; border-radius: 3px; background: var(--shc-grad-primary); } .shc-prose h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; margin: 52px 0 14px; } /* A subsection marker. An article that runs on H3s — one per step, one per mistake — reads as an undifferentiated wall without something to break the column, and a dot is the quietest mark that does it. */ .shc-prose > h3::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border-radius: 3px; background: var(--shc-grad-primary); vertical-align: 0.08em; } .shc-prose h4 { font-size: 19px; font-weight: 600; margin: 38px 0 10px; } .shc-prose h5, .shc-prose h6 { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--shc-muted); margin: 28px 0 8px; } .shc-prose strong, .shc-prose b { font-weight: 600; color: var(--shc-ink); } /* Same exemption as the lists, plus the theme's own contents box. The TOC is injected INTO the content, so it lives inside .shc-prose and was taking the body copy link treatment: every entry underlined in accent. It is navigation, not prose. */ .shc-prose a:not(.shc-btn, [class*="elementor"], :where(.shc-toc) *) { color: var(--shc-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--shc-primary-line); transition: text-decoration-color 180ms var(--shc-ease), text-decoration-thickness 180ms var(--shc-ease), color 180ms var(--shc-ease); } .shc-prose a:not(.shc-btn, [class*="elementor"], :where(.shc-toc) *):hover, .shc-prose a:not(.shc-btn, [class*="elementor"], :where(.shc-toc) *):focus { color: var(--shc-primary-dark); text-decoration-color: var(--shc-primary); text-decoration-thickness: 2px; } /* ---- Lists. SBP replaces the browser markers with a dot and a numbered tile, so nested content lines up on one grid. Every selector here skips anything carrying an Elementor class, and the reason is the editor. Elementor renders its widget handles as a