/* ============================================================================= BASE.CSS — Design System Foundation Hello Elementor Child Theme This file establishes the entire design token system. Every other CSS file consumes variables defined here. Nothing visual is rendered by this file alone. Contents: 1. CSS Custom Properties (Design Tokens) 1a. Brand Color Palette 1b. Semantic Color Mapping (Light Mode) 1c. Typography Scale 1d. Spacing Scale 1e. Border & Radius 1f. Shadow System 1g. Z-Index Stack 1h. Transition & Animation 1i. Layout & Grid 2. CSS Reset 3. Base HTML Element Styles 4. Typography Base 5. Layout Primitives 6. Utility Classes 7. Screen Reader Utilities 8. WordPress Core Compatibility ============================================================================= */ /* ============================================================================= 1. CSS CUSTOM PROPERTIES ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1a. BRAND COLOR PALETTE Raw brand colors — never used directly in components. Components use semantic tokens (1b) which reference these. This means rebranding = change values here only. --------------------------------------------------------------------------- */ /* Primary Amber / Orange */ --hec-brand-amber: #d16a0b; --hec-brand-amber-light: #e07c1a; --hec-brand-amber-lighter: #f0a050; --hec-brand-amber-pale: #fdf0e3; /* Golden Yellow */ --hec-brand-gold: #ffbf00; --hec-brand-gold-light: #ffd240; --hec-brand-gold-pale: #fff8e1; /* Light Gold (Corporate) */ --hec-brand-gold-warm: #ffc660; --hec-brand-gold-warm-pale: #fff3d6; /* Dark Amber */ --hec-brand-amber-dark: #995f09; --hec-brand-amber-darker: #7a4c07; /* Warm Sand / Beige */ --hec-brand-sand: #d4b7aa; --hec-brand-sand-light: #ede0da; --hec-brand-sand-pale: #faf5f3; /* Deep Brown / Near Black */ --hec-brand-brown-deep: #271a0e; --hec-brand-brown-darkest: #150303; /* Deep Brown-Red */ --hec-brand-crimson: #722410; --hec-brand-crimson-light: #8b3015; /* Bright Orange */ --hec-brand-orange-bright: #ed751c; /* Deep Maroon */ --hec-brand-maroon-deep: #320707; --hec-brand-maroon: #5d0505; /* Neutrals — derived from brand warm tones */ --hec-neutral-50: #fafaf9; --hec-neutral-100: #f5f3f0; --hec-neutral-200: #ece8e2; --hec-neutral-300: #ddd7ce; --hec-neutral-400: #c4bbb0; --hec-neutral-500: #9e9287; --hec-neutral-600: #7a6e64; --hec-neutral-700: #574e46; --hec-neutral-800: #38302a; --hec-neutral-900: #1e1812; /* Pure tones */ --hec-white: #ffffff; --hec-black: #000000; /* --------------------------------------------------------------------------- 1b. SEMANTIC COLOR MAPPING — LIGHT MODE These are the tokens that components actually use. dark-mode.css overrides these for [data-theme="dark"]. --------------------------------------------------------------------------- */ /* Page */ --hec-color-bg: var(--hec-neutral-50); --hec-color-bg-elevated: var(--hec-white); --hec-color-bg-sunken: var(--hec-neutral-100); --hec-color-bg-overlay: rgba(39, 26, 14, 0.06); /* Surface (cards, panels) */ --hec-color-surface: var(--hec-white); --hec-color-surface-raised: var(--hec-neutral-50); --hec-color-surface-overlay: rgba(255, 255, 255, 0.92); /* Text */ --hec-color-text-primary: var(--hec-brand-brown-deep); --hec-color-text-secondary: var(--hec-neutral-600); --hec-color-text-tertiary: var(--hec-neutral-500); --hec-color-text-disabled: var(--hec-neutral-400); --hec-color-text-inverse: var(--hec-white); --hec-color-text-on-amber: var(--hec-white); /* Brand / Accent */ --hec-color-accent: var(--hec-brand-amber); --hec-color-accent-hover: var(--hec-brand-amber-light); --hec-color-accent-active: var(--hec-brand-amber-dark); --hec-color-accent-subtle: var(--hec-brand-amber-pale); --hec-color-accent-gold: var(--hec-brand-gold); --hec-color-accent-gold-warm: var(--hec-brand-gold-warm); /* Hero */ --hec-color-hero-overlay-start: rgba(21, 3, 3, 0.0); --hec-color-hero-overlay-end: rgba(21, 3, 3, 0.82); --hec-color-hero-text: var(--hec-white); --hec-color-hero-badge-bg: var(--hec-brand-amber); --hec-color-hero-badge-text: var(--hec-white); /* Borders */ --hec-color-border: var(--hec-neutral-200); --hec-color-border-strong: var(--hec-neutral-300); --hec-color-border-accent: var(--hec-brand-amber); --hec-color-border-subtle: var(--hec-neutral-100); /* Interactive states */ --hec-color-focus-ring: var(--hec-brand-amber); --hec-color-hover-bg: var(--hec-brand-amber-pale); /* Feedback / Status */ --hec-color-success: #2d6a4f; --hec-color-success-bg: #d8f3e8; --hec-color-error: var(--hec-brand-crimson); --hec-color-error-bg: #fde8e4; --hec-color-warning: var(--hec-brand-gold); --hec-color-warning-bg: var(--hec-brand-gold-pale); /* Code blocks */ --hec-color-code-bg: var(--hec-brand-brown-deep); --hec-color-code-text: #f0e6d3; --hec-color-code-border: var(--hec-neutral-200); --hec-color-inline-code-bg: var(--hec-brand-amber-pale); --hec-color-inline-code-text: var(--hec-brand-crimson); /* Blockquote */ --hec-color-blockquote-border: var(--hec-brand-amber); --hec-color-blockquote-bg: var(--hec-brand-amber-pale); --hec-color-blockquote-text: var(--hec-brand-brown-deep); /* TOC */ --hec-color-toc-bg: var(--hec-neutral-50); --hec-color-toc-border: var(--hec-brand-amber); --hec-color-toc-link: var(--hec-brand-brown-deep); --hec-color-toc-link-hover: var(--hec-brand-amber); --hec-color-toc-link-active: var(--hec-brand-amber); /* Progress bar */ --hec-color-progress-bg: var(--hec-neutral-200); --hec-color-progress-fill: linear-gradient( 90deg, var(--hec-brand-amber) 0%, var(--hec-brand-gold) 100% ); /* Dark mode toggle */ --hec-color-toggle-bg: rgba(255, 255, 255, 0.15); --hec-color-toggle-bg-hover: rgba(255, 255, 255, 0.25); --hec-color-toggle-text: var(--hec-white); /* Author box */ --hec-color-author-bg: var(--hec-neutral-50); --hec-color-author-border: var(--hec-neutral-200); --hec-color-author-accent: var(--hec-brand-amber); /* Related posts */ --hec-color-card-bg: var(--hec-white); --hec-color-card-border: var(--hec-neutral-200); --hec-color-card-shadow: rgba(39, 26, 14, 0.08); --hec-color-card-shadow-hover:rgba(39, 26, 14, 0.16); /* Feedback widget */ --hec-color-feedback-bg: var(--hec-brand-amber); --hec-color-feedback-text: var(--hec-white); --hec-color-feedback-panel: var(--hec-white); --hec-color-feedback-border: var(--hec-neutral-200); --hec-color-feedback-input: var(--hec-white); --hec-color-feedback-input-border: var(--hec-neutral-300); --hec-color-feedback-input-focus: var(--hec-brand-amber); /* Social share */ --hec-color-share-bg: var(--hec-white); --hec-color-share-border: var(--hec-neutral-200); --hec-color-share-icon: var(--hec-neutral-700); /* Meta bar */ --hec-color-meta-text: var(--hec-neutral-600); --hec-color-meta-pill-bg: var(--hec-neutral-100); --hec-color-meta-pill-text: var(--hec-neutral-700); --hec-color-meta-pill-hover: var(--hec-brand-amber-pale); --hec-color-meta-pill-border: var(--hec-neutral-200); /* --------------------------------------------------------------------------- 1c. TYPOGRAPHY SCALE --------------------------------------------------------------------------- */ /* Font families */ --hec-font-body: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif; --hec-font-heading: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif; --hec-font-meta: Helvetica, 'Helvetica Neue', Arial, sans-serif; --hec-font-code: Consolas, 'Courier New', 'Lucida Console', monospace; --hec-font-ui: 'Rubik', Helvetica, Arial, sans-serif; /* Font weights */ --hec-weight-light: 300; --hec-weight-regular: 400; --hec-weight-medium: 500; --hec-weight-semibold: 600; --hec-weight-bold: 700; /* Font sizes — fluid using clamp() */ /* clamp(min, preferred, max) */ --hec-text-xs: clamp(0.688rem, 0.65rem + 0.19vw, 0.75rem); /* 11–12px */ --hec-text-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem); /* 12.8–14px */ --hec-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.063rem); /* 16–17px */ --hec-text-md: clamp(1.063rem, 1rem + 0.31vw, 1.188rem); /* 17–19px */ --hec-text-lg: clamp(1.188rem, 1.1rem + 0.44vw, 1.375rem); /* 19–22px */ --hec-text-xl: clamp(1.375rem, 1.2rem + 0.88vw, 1.75rem); /* 22–28px */ --hec-text-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem); /* 28–36px */ --hec-text-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem); /* 32–44px */ --hec-text-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem); /* 40–60px */ --hec-text-hero: clamp(2.75rem, 2rem + 4vw, 5rem); /* 44–80px */ /* Line heights */ --hec-leading-tight: 1.2; --hec-leading-snug: 1.35; --hec-leading-normal: 1.6; --hec-leading-relaxed:1.75; --hec-leading-loose: 1.9; /* Letter spacing */ --hec-tracking-tight: -0.025em; --hec-tracking-normal: 0em; --hec-tracking-wide: 0.025em; --hec-tracking-wider: 0.05em; --hec-tracking-widest: 0.12em; /* --------------------------------------------------------------------------- 1d. SPACING SCALE 8px base unit system. --------------------------------------------------------------------------- */ --hec-space-1: 0.25rem; /* 4px */ --hec-space-2: 0.5rem; /* 8px */ --hec-space-3: 0.75rem; /* 12px */ --hec-space-4: 1rem; /* 16px */ --hec-space-5: 1.25rem; /* 20px */ --hec-space-6: 1.5rem; /* 24px */ --hec-space-7: 1.75rem; /* 28px */ --hec-space-8: 2rem; /* 32px */ --hec-space-10: 2.5rem; /* 40px */ --hec-space-12: 3rem; /* 48px */ --hec-space-16: 4rem; /* 64px */ --hec-space-20: 5rem; /* 80px */ --hec-space-24: 6rem; /* 96px */ --hec-space-32: 8rem; /* 128px*/ /* --------------------------------------------------------------------------- 1e. BORDER & RADIUS --------------------------------------------------------------------------- */ --hec-radius-sm: 4px; --hec-radius-md: 8px; --hec-radius-lg: 12px; --hec-radius-xl: 16px; --hec-radius-2xl: 24px; --hec-radius-full: 9999px; --hec-border-width: 1px; --hec-border-width-thick: 2px; --hec-border-width-heavy: 4px; /* --------------------------------------------------------------------------- 1f. SHADOW SYSTEM Warm-toned shadows derived from brand dark brown. --------------------------------------------------------------------------- */ --hec-shadow-xs: 0 1px 2px rgba(39, 26, 14, 0.06); --hec-shadow-sm: 0 1px 3px rgba(39, 26, 14, 0.08), 0 1px 2px rgba(39, 26, 14, 0.06); --hec-shadow-md: 0 4px 6px -1px rgba(39, 26, 14, 0.08), 0 2px 4px -1px rgba(39, 26, 14, 0.06); --hec-shadow-lg: 0 10px 15px -3px rgba(39, 26, 14, 0.08), 0 4px 6px -2px rgba(39, 26, 14, 0.05); --hec-shadow-xl: 0 20px 25px -5px rgba(39, 26, 14, 0.10), 0 10px 10px -5px rgba(39, 26, 14, 0.04); --hec-shadow-2xl: 0 25px 50px -12px rgba(39, 26, 14, 0.20); --hec-shadow-amber: 0 4px 14px rgba(209, 106, 11, 0.25), 0 1px 3px rgba(209, 106, 11, 0.15); --hec-shadow-amber-lg: 0 8px 24px rgba(209, 106, 11, 0.30), 0 2px 6px rgba(209, 106, 11, 0.20); --hec-shadow-inset: inset 0 2px 4px rgba(39, 26, 14, 0.08); /* --------------------------------------------------------------------------- 1g. Z-INDEX STACK Named layers prevent z-index wars between components. --------------------------------------------------------------------------- */ --hec-z-below: -1; --hec-z-base: 0; --hec-z-raised: 10; --hec-z-toc: 20; --hec-z-social-share: 30; --hec-z-feedback: 40; --hec-z-progress: 50; --hec-z-dark-toggle: 60; --hec-z-overlay: 70; --hec-z-modal: 80; --hec-z-toast: 90; --hec-z-top: 100; /* --------------------------------------------------------------------------- 1h. TRANSITION & ANIMATION --------------------------------------------------------------------------- */ --hec-duration-instant: 80ms; --hec-duration-fast: 160ms; --hec-duration-normal: 280ms; --hec-duration-slow: 420ms; --hec-duration-slower: 600ms; --hec-duration-crawl: 900ms; --hec-ease-default: cubic-bezier(0.4, 0.0, 0.2, 1.0); --hec-ease-in: cubic-bezier(0.4, 0.0, 1.0, 1.0); --hec-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); --hec-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0); --hec-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --hec-transition-fast: var(--hec-duration-fast) var(--hec-ease-default); --hec-transition-normal: var(--hec-duration-normal) var(--hec-ease-default); --hec-transition-slow: var(--hec-duration-slow) var(--hec-ease-default); --hec-transition-spring: var(--hec-duration-slow) var(--hec-ease-spring); --hec-transition-smooth: var(--hec-duration-slow) var(--hec-ease-smooth); /* --------------------------------------------------------------------------- 1i. LAYOUT & GRID --------------------------------------------------------------------------- */ /* Content widths */ --hec-content-width: 1275px; --hec-content-width-wide: 1275px; --hec-content-width-narrow: 720px; --hec-site-max-width: 1459px; /* 1275 content + 80 share + 24 gap + 80 padding */ /* Article grid */ --hec-grid-gap: var(--hec-space-6); --hec-share-bar-width: 80px; --hec-article-side-padding: 40px; /* always ≥ 40px from viewport edge */ /* Hero */ --hec-hero-height: clamp(280px, 38vh, 480px); --hec-hero-min-height: 280px; /* Breakpoints (for use in JS via getComputedStyle) */ --hec-bp-sm: 640px; --hec-bp-md: 768px; --hec-bp-lg: 1024px; --hec-bp-xl: 1280px; } /* ============================================================================= 2. CSS RESET — SCOPED (FIX C2, v1.0.12) Previously this reset was UNSCOPED (*, html, body, a, img, button …) and leaked into the Elementor Theme Builder header/footer rendered by get_header()/get_footer() on single posts, breaking their spacing and link/button styling. It is now scoped to the child theme's own component trees only: - .hec-single-post-wrap (main article layout) - .hec-progress-bar (fixed top bar) - .hec-dark-mode-toggle (fixed toggle, direct child of body) - .hec-feedback-widget (fixed right-edge widget) The Elementor header/footer are no longer touched by any rule here. ============================================================================= */ .hec-single-post-wrap, .hec-single-post-wrap *, .hec-single-post-wrap *::before, .hec-single-post-wrap *::after, .hec-progress-bar, .hec-progress-bar *, .hec-progress-bar *::before, .hec-progress-bar *::after, .hec-dark-mode-toggle, .hec-dark-mode-toggle *, .hec-dark-mode-toggle *::before, .hec-dark-mode-toggle *::after, .hec-feedback-widget, .hec-feedback-widget *, .hec-feedback-widget *::before, .hec-feedback-widget *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Remove list styles on ul, ol elements with a list role */ .hec-single-post-wrap ul[role='list'], .hec-single-post-wrap ol[role='list'] { list-style: none; } /* Set core root defaults — html-level rules only on single posts, applied via :has() so no other page is affected even if this file ever loads elsewhere. */ html:has(body.hec-is-single-post) { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust:100%; tab-size: 4; } /* Core body defaults — typography moved OFF (it inherited into the Elementor header/footer). Inheritable text properties now live on the article wrapper (see section 3). */ body.hec-is-single-post { min-height: 100vh; } /* Make images easier to work with */ .hec-single-post-wrap img, .hec-single-post-wrap picture, .hec-single-post-wrap video, .hec-single-post-wrap canvas, .hec-single-post-wrap svg { display: block; max-width: 100%; } /* Inherit fonts for inputs and buttons */ .hec-single-post-wrap input, .hec-single-post-wrap button, .hec-single-post-wrap textarea, .hec-single-post-wrap select, .hec-feedback-widget input, .hec-feedback-widget button, .hec-feedback-widget textarea, .hec-feedback-widget select { font: inherit; color: inherit; } /* Avoid text overflows */ .hec-single-post-wrap p, .hec-single-post-wrap h1, .hec-single-post-wrap h2, .hec-single-post-wrap h3, .hec-single-post-wrap h4, .hec-single-post-wrap h5, .hec-single-post-wrap h6 { overflow-wrap: break-word; } /* Remove default button styles */ .hec-single-post-wrap button, .hec-feedback-widget button, .hec-dark-mode-toggle { background: none; border: none; cursor: pointer; appearance: none; line-height: inherit; } /* Remove default anchor decoration */ .hec-single-post-wrap a { color: inherit; text-decoration: none; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them — scoped to our trees so the Elementor header/footer keep their own reduced-motion handling. */ @media (prefers-reduced-motion: reduce) { .hec-single-post-wrap *, .hec-single-post-wrap *::before, .hec-single-post-wrap *::after, .hec-progress-bar, .hec-progress-bar::before, .hec-progress-bar::after, .hec-dark-mode-toggle, .hec-dark-mode-toggle *, .hec-feedback-widget *, .hec-feedback-widget *::before, .hec-feedback-widget *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= 3. BASE HTML ELEMENT STYLES Scoped to .hec-is-single-post to prevent leakage to other pages. ============================================================================= */ /* Page background stays on (needed for full-page theming). */ .hec-is-single-post { background-color: var(--hec-color-bg); transition: background-color var(--hec-transition-slow), color var(--hec-transition-slow); } /* FIX C2 (v1.0.12): inheritable typography moved from body class to the article wrapper so Rubik/line-height/color no longer inherit into the Elementor header/footer. */ .hec-single-post-wrap { font-family: var(--hec-font-body); font-size: var(--hec-text-base); font-weight: var(--hec-weight-regular); line-height: var(--hec-leading-normal); color: var(--hec-color-text-primary); transition: color var(--hec-transition-slow); } /* Focus styles — visible and brand-consistent */ .hec-is-single-post *:focus-visible { outline: 2px solid var(--hec-color-focus-ring); outline-offset: 3px; border-radius: var(--hec-radius-sm); } /* Remove focus ring for mouse users */ .hec-is-single-post *:focus:not(:focus-visible) { outline: none; } /* Links within post content. v1.0.14: link color pinned to brand bright orange #ed751c. */ .hec-is-single-post .hec-content__body a { color: var(--hec-brand-orange-bright); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--hec-transition-fast), text-decoration-color var(--hec-transition-fast); } .hec-is-single-post .hec-content__body a:hover { color: var(--hec-color-accent-hover); text-decoration-color: currentColor; } /* Selection */ .hec-is-single-post ::selection { background-color: var(--hec-brand-amber-pale); color: var(--hec-brand-brown-deep); } /* ============================================================================= 4. LAYOUT PRIMITIVES Core structural elements used across template parts. ============================================================================= */ /* Main post wrapper. FIX C4 (v1.0.12): 'overflow: hidden' removed — an ancestor with non-visible overflow disables position:sticky on descendants, which silently killed the sticky social share bar. Horizontal bleed from .alignfull (100vw) is contained by body { overflow-x: hidden } in style.css, which is viewport-propagated and therefore sticky-safe. */ .hec-single-post-wrap { width: 100%; } /* Article grid — two column on desktop */ .hec-article-grid { display: grid; grid-template-columns: var(--hec-share-bar-width) minmax(0, 1fr); column-gap: var(--hec-grid-gap); max-width: var(--hec-site-max-width); margin: 0 auto; padding: var(--hec-space-12) var(--hec-article-side-padding); align-items: start; } /* Single column on smaller screens — keep the 40px viewport-edge padding */ @media (max-width: 768px) { .hec-article-grid { grid-template-columns: 1fr; padding: var(--hec-space-8) var(--hec-article-side-padding); } } /* Main content area — caps at 1350px, edge padding handled by .hec-article-grid */ .hec-article-main { min-width: 0; width: 100%; max-width: var(--hec-content-width); margin: 0; padding: 0; } /* ============================================================================= 5. UTILITY CLASSES ============================================================================= */ /* Screen reader only — visually hidden but accessible */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Show screen-reader-text on focus (for skip links) */ .screen-reader-text:focus { position: fixed; top: var(--hec-space-4); left: var(--hec-space-4); width: auto; height: auto; padding: var(--hec-space-3) var(--hec-space-6); clip: auto; white-space: normal; background: var(--hec-color-surface); border: 2px solid var(--hec-color-accent); border-radius: var(--hec-radius-md); font-weight: var(--hec-weight-semibold); z-index: var(--hec-z-top); box-shadow: var(--hec-shadow-lg); } /* Visually hide element but keep in layout flow */ .hec-invisible { visibility: hidden; } /* Truncate text with ellipsis */ .hec-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Two-line clamp */ .hec-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Three-line clamp */ .hec-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Divider */ .hec-divider { width: 100%; height: 1px; background-color: var(--hec-color-border); margin: var(--hec-space-8) 0; } /* Accent line — short amber underline used before headings */ .hec-accent-line::before { content: ''; display: block; width: 40px; height: 3px; background: linear-gradient( 90deg, var(--hec-brand-amber) 0%, var(--hec-brand-gold) 100% ); border-radius: var(--hec-radius-full); margin-bottom: var(--hec-space-4); } /* ============================================================================= 6. WORDPRESS CORE COMPATIBILITY ============================================================================= */ /* Alignment classes from Gutenberg */ .hec-is-single-post .alignleft { float: left; margin-right: var(--hec-space-6); margin-bottom: var(--hec-space-4); } .hec-is-single-post .alignright { float: right; margin-left: var(--hec-space-6); margin-bottom: var(--hec-space-4); } .hec-is-single-post .aligncenter { display: block; margin: 0 auto var(--hec-space-4); } .hec-is-single-post .alignwide { width: calc(100% + var(--hec-space-16)); margin-left: calc(-1 * var(--hec-space-8)); max-width: none; } .hec-is-single-post .alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; } @media (max-width: 768px) { .hec-is-single-post .alignwide, .hec-is-single-post .alignfull { width: 100%; margin-left: 0; } } /* WordPress caption */ .hec-is-single-post .wp-caption { max-width: 100%; } .hec-is-single-post .wp-caption-text { font-family: var(--hec-font-meta); font-size: var(--hec-text-xs); color: var(--hec-color-text-tertiary); text-align: center; margin-top: var(--hec-space-2); line-height: var(--hec-leading-snug); } /* Sticky post */ .hec-is-single-post .sticky { /* Not applicable on single post view — no style needed */ } /* WordPress core block gap */ .hec-is-single-post .wp-block-group { margin-bottom: var(--hec-space-8); } /* ============================================================================= 7. SAFETY OVERRIDES — guarantee content visibility The reveal/animation system in animations.css and content.css starts several elements at opacity: 0 and relies on JS to add classes that un-hide them. If JS fails to load (CSP block, network error, MIME mismatch on ES module), those elements would stay invisible forever. These rules force the article body, meta bar, and main column to render no matter what. They use !important to win against the reveal rules above. ============================================================================= */ .hec-single-post-wrap .hec-article-main, .hec-single-post-wrap .hec-content-body, .hec-single-post-wrap .hec-content__body, .hec-single-post-wrap .hec-meta-bar { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ============================================================================= 8. LIGHT MODE BODY LOCK Forces light-mode body background to win against any parent theme or Elementor Kit style that would otherwise set body { background: ... }. Scoped to single-post body class so other pages on the site are untouched. ============================================================================= */ html:not([data-theme="dark"]) body.hec-is-single-post, html[data-theme="light"] body.hec-is-single-post { background-color: var(--hec-color-bg) !important; color: var(--hec-color-text-primary) !important; }