/* ========================================================================== 1. ACTIVE VARIABLE RUNTIME MATRIX -------------------------------------------------------------------------- theme.json emits its own `:root { --wp--preset--color--*: … }` block (the dark/default palette) into the global-styles that print in . Those declarations have the SAME specificity as a bare `:root` or `[data-theme]` selector, and WordPress prints them AFTER this stylesheet — so on a tie the theme.json values win and `[data-theme='light']` never takes effect. Fix: the `[data-theme]` overrides are qualified with `:root` (specificity 0,2,0) so they always defeat theme.json's plain `:root` (0,1,0), regardless of stylesheet load order. The unqualified `:root` block below stays as the pre-toggle default (and mirrors theme.json), so there is no flash. ========================================================================== */ :root { --wp--preset--color--bg-base: #0B0C10; --wp--preset--color--bg-surface: #1F2833; --wp--preset--color--bg-surface-elevated: #161D19; --wp--preset--color--text-primary: #F8F8FF; --wp--preset--color--text-secondary: #9CA3AF; --wp--preset--color--accent-phosphor: #10B981; --wp--preset--color--accent-dim: #047857; --wp--preset--color--border-technical: #2F4F4F; --wp--preset--color--border-active: #10B981; } :root[data-theme='dark'], html[data-theme='dark'] { --wp--preset--color--bg-base: #0B0C10; --wp--preset--color--bg-surface: #1F2833; --wp--preset--color--bg-surface-elevated: #161D19; --wp--preset--color--text-primary: #F8F8FF; --wp--preset--color--text-secondary: #9CA3AF; --wp--preset--color--accent-phosphor: #10B981; --wp--preset--color--accent-dim: #047857; --wp--preset--color--border-technical: #2F4F4F; --wp--preset--color--border-active: #10B981; } :root[data-theme='light'], html[data-theme='light'] { --wp--preset--color--bg-base: #F8F8FF; --wp--preset--color--bg-surface: #F2F2F2; --wp--preset--color--bg-surface-elevated: #FFFFFF; --wp--preset--color--text-primary: #0B0C10; --wp--preset--color--text-secondary: #2F4F4F; --wp--preset--color--accent-phosphor: #047857; --wp--preset--color--accent-dim: #059669; --wp--preset--color--border-technical: #CBD5E1; --wp--preset--color--border-active: #047857; } /* ========================================================================== 2. CORE INTERACTION STATES (BUTTONS & CALLS TO ACTION) ========================================================================== */ .cta-technical, .wp-block-button .wp-block-button__link { cursor: pointer; text-decoration: none; transition: background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1), color 0.2s cubic-bezier(0.19, 1, 0.22, 1), transform 0.2s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.2s cubic-bezier(0.19, 1, 0.22, 1); } .cta-technical:hover, .wp-block-button .wp-block-button__link:hover { transform: translateY(-0.0625rem); animation: technicalFlicker 0.2s infinite; background-color: var(--wp--preset--color--text-primary) !important; color: var(--wp--preset--color--bg-base) !important; box-shadow: 0 0 1.5rem rgba(16, 185, 129, 0.4); } /* ========================================================================== 3. DISPLAY MODE TOGGLE - COMPONENT SUBSYSTEM ========================================================================== */ .theme-toggle-container { display: inline-flex; margin: 0; } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.05em; background-color: transparent; border-radius: 9999px; padding: 0.5rem 1rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; color: var(--wp--preset--color--accent-phosphor) !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; } .theme-toggle-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent-phosphor); outline-offset: 2px; } .theme-toggle-btn:hover { background-color: rgba(16, 185, 129, 0.1) !important; border-color: var(--wp--preset--color--accent-phosphor) !important; } .theme-toggle-btn:hover .theme-toggle-icon { transform: rotate(15deg); } .theme-toggle-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1); } /* --- Visibility Logic (Icons & Labels) --- */ .icon-moon, .text-dark { display: inline-block; } .icon-sun, .text-light { display: none; } [data-theme='light'] .icon-moon, [data-theme='light'] .text-dark { display: none; } [data-theme='light'] .icon-sun, [data-theme='light'] .text-light { display: inline-block; } /* ========================================================================== 4. SYSTEM STATUS MONITOR TERMINAL ========================================================================== */ .status-module { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; flex-shrink: 0; overflow: hidden; justify-content: flex-start; text-transform: uppercase; letter-spacing: 0.05em; background-color: transparent; /* Critical overrides against site editor context layouts */ width: 24rem !important; border-radius: 0.125rem !important; padding: 0.5rem 1rem 0.5rem 2.125rem !important; font-size: var(--wp--preset--font-size--small) !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; } .status-label { color: var(--wp--preset--color--text-secondary); font-weight: 600; } .status-value { display: inline-flex; align-items: center; color: var(--wp--preset--color--accent-phosphor); font-weight: 700; } .status-value::before { content: ''; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 0.625rem; height: 0.625rem; background-color: var(--wp--preset--color--accent-phosphor); border-radius: 50%; } .status-value::after { content: '_'; display: inline-block; margin-left: 0.125rem; font-weight: 700; color: var(--wp--preset--color--accent-phosphor); animation: cursorBlink 1s step-end infinite; } .status-pulse::before { animation: phosphorPulse 2s infinite; } .status-flicker { animation: technicalFlicker 0.15s infinite; } /* ========================================================================== 5. HOVER & RUNTIME KEYFRAMES ========================================================================== */ @keyframes technicalFlicker { 0%, 100% { opacity: 1; } 5% { opacity: 0.85; } 10% { opacity: 0.95; } 15% { opacity: 0.9; } } @keyframes phosphorPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ========================================================================== 6. RESPONSIVE STRUCTURES ========================================================================== */ @media screen and (max-width: 992px) { #system-status-container, .status-module { display: none !important; } .theme-toggle-label { display: none !important; } .theme-toggle-btn { padding: 0.5rem; } } /* ========================================================================== 7. NAVIGATION SYSTEM IMPLEMENTATION ========================================================================== */ .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item.wp-block-navigation-item--active > .wp-block-navigation-item__content { text-decoration: underline; text-underline-offset: 0.375rem; text-decoration-thickness: 0.125rem; color: var(--wp--preset--color--accent-phosphor) !important; } .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__label { color: var(--wp--preset--color--accent-phosphor) !important; } .wp-block-navigation .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--wp--preset--color--accent-phosphor) !important; } /* ========================================================================== 8. INTERACTION SITE EDITOR BREAKOUT UTILITIES ========================================================================== */ .header-technical-floor { /* No position override here. Forcing `position: relative` previously beat the block's inline `position: sticky` (important class > normal inline), which silently disabled the sticky header. `sticky` is itself a positioned containing block, so the ::after line below still anchors correctly. */ border-bottom: none; } .header-technical-floor::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: auto; /* was 100vw — 100vw includes the scrollbar and causes horizontal overflow, which tempts an overflow-x:hidden fix that breaks the sticky header. The header is full-width, so left/right:0 is full-bleed. */ height: 1px; background-color: var(--wp--preset--color--border-technical); z-index: -1; } /* ========================================================================== TERMINAL MOCKUP WINDOW CONTROLS ========================================================================== */ .window-dots-row { display: flex; gap: 0.375rem; /* gap-1.5 (6px) */ align-items: center; } .window-dot { width: 0.625rem; /* w-2.5 (10px) */ height: 0.625rem; /* h-2.5 (10px) */ border-radius: 9999px; flex-shrink: 0; } /* Isolated alert-red close indicator (theme palette has no error colour) */ .window-dot-close { background-color: rgba(239, 68, 68, 0.25); } /* Warm amber minimize indicator */ .window-dot-minimize { background-color: rgba(245, 158, 11, 0.25); } /* Phosphor-accent maximize indicator */ .window-dot-maximize { background-color: rgba(16, 185, 129, 0.25); } /* ========================================================================== 9. PAGE BLOCK COMPONENTS — REVEAL HOOKS (driven by the motion engine JS) -------------------------------------------------------------------------- The JS engine toggles `active` / `reveal-activated` on .scroll-reveal and splits .text-reveal-trigger into .char-matrix spans that gain .matrix-visible. These rules supply the resting/animated states for those hooks. ========================================================================== */ .scroll-reveal, .reveal-on-scroll { opacity: 0; transform: translateY(2rem); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .scroll-reveal.active, .scroll-reveal.reveal-activated, .reveal-on-scroll.active, .reveal-on-scroll.reveal-activated { opacity: 1; transform: none; } .char-matrix { display: inline-block; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .char-matrix.matrix-visible { opacity: 1; transform: translateY(0); } /* Utility wrappers emitted by the JS word-splitter */ .inline-block { display: inline-block; } .whitespace-nowrap { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .scroll-reveal, .reveal-on-scroll, .char-matrix { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== 10. INLINE TERMINAL CURSOR UTILITY -------------------------------------------------------------------------- Blinking underscore for inline labels outside the status terminal (badges, the dashboard window filename). Reuses the cursorBlink keyframe. ========================================================================== */ .terminal-cursor::after { content: '_'; display: inline-block; margin-left: 0.125rem; color: var(--wp--preset--color--accent-phosphor); animation: cursorBlink 1s step-end infinite; } /* ========================================================================== 11. TECHNICAL CARD SURFACES -------------------------------------------------------------------------- Bordered, semi-transparent, blurred panel used across the page sections. .metric-card adds the phosphor left-accent for the delivery stat rows. ========================================================================== */ .technical-card { border: 1px solid var(--wp--preset--color--border-technical); background: color-mix(in srgb, var(--wp--preset--color--bg-surface) 60%, transparent); -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .technical-card:hover { border-color: var(--wp--preset--color--accent-phosphor); background: color-mix(in srgb, var(--wp--preset--color--bg-surface) 80%, transparent); } .metric-card { border-left: 0.25rem solid var(--wp--preset--color--accent-phosphor); } /* ========================================================================== 12. GRID OVERLAY BACKDROP -------------------------------------------------------------------------- Faint technical grid drawn as a ::before, so no overlay markup is needed. Apply .grid-overlay-bg to any section group. ========================================================================== */ .grid-overlay-bg { position: relative; isolation: isolate; } .grid-overlay-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; background-image: linear-gradient(var(--wp--preset--color--border-technical) 1px, transparent 1px), linear-gradient(90deg, var(--wp--preset--color--border-technical) 1px, transparent 1px); background-size: 2.5rem 2.5rem; } /* ========================================================================== 13. DELIVERY TIMELINE FLOW -------------------------------------------------------------------------- Horizontal connector behind the phase nodes (desktop only) + the node chip. .timeline-flow goes on the columns block; .phase-node on each number chip. ========================================================================== */ .timeline-flow { position: relative; } .timeline-flow .wp-block-column { position: relative; z-index: 1; } @media screen and (min-width: 782px) { .timeline-flow::before { content: ''; position: absolute; top: 1.5rem; left: 0; width: 100%; height: 1px; background-color: var(--wp--preset--color--border-technical); z-index: 0; } } .phase-node { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; background-color: var(--wp--preset--color--bg-surface); border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.25rem; } /* ========================================================================== 14. ICONOGRAPHY (Material Symbols) -------------------------------------------------------------------------- The icon font is NOT loaded here. Enqueue Material Symbols (ideally self-hosted) via functions.php — see note below. Without it, these glyphs fall back to their ligature text (e.g. "warning", "terminal"). ========================================================================== */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .icon-phosphor { color: var(--wp--preset--color--accent-phosphor); } /* ========================================================================== 15. PROBLEM / DIAGNOSTIC CARD -------------------------------------------------------------------------- Self-contained "SaaS trap" diagnostic panel ported from the legacy home page: red alert title, monospaced readout lines, and a "% locked" meter. Uses an isolated alert red (matching the .window-dot-close shade) since the theme palette has no error colour. ========================================================================== */ :root { --ep-color-error: #EF4444; } .problem-card { position: relative; overflow: hidden; } .problem-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0.25rem; background-color: var(--ep-color-error); } .problem-alert-title { color: var(--ep-color-error); text-transform: uppercase; letter-spacing: -0.01em; } .problem-alert .material-symbols-outlined { color: var(--ep-color-error); } .metric-line { border-left: 1px solid var(--wp--preset--color--border-technical); padding: 0.25rem 0 0.25rem 1rem; color: var(--wp--preset--color--text-secondary); font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); } .metric-critical { color: var(--ep-color-error); } .locked-meter { font-family: var(--wp--preset--font-family--font-mono); } .locked-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: var(--wp--preset--font-size--small); } .locked-label { color: var(--wp--preset--color--text-primary); } .locked-value { color: var(--ep-color-error); } .locked-track { height: 0.5rem; width: 100%; background-color: var(--wp--preset--color--bg-surface); } .locked-fill { height: 100%; background-color: var(--ep-color-error); } /* ========================================================================== 16. HEADER SCROLL STATE -------------------------------------------------------------------------- The motion engine toggles `.is-scrolled` on the header past 24px of scroll. The header keeps its theme-aware background (the bg-base preset, which flips with [data-theme]); we only add a backdrop blur here. Colour is NEVER set in JS, so light mode no longer gets a hardcoded dark header. ========================================================================== */ .wp-block-template-part > header, header.wp-block-group { transition: background-color 0.2s ease, backdrop-filter 0.2s ease; } .wp-block-template-part > header.is-scrolled, header.wp-block-group.is-scrolled { -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); } /* Optional translucent variant: only takes effect if you remove the bg-base preset background from the header group so this can win the cascade. Uncomment to use a theme-following see-through header on scroll. .wp-block-template-part > header.is-scrolled, header.wp-block-group.is-scrolled { background-color: color-mix(in srgb, var(--wp--preset--color--bg-base) 90%, transparent); } */ /* ========================================================================== 17. LET'S TALK PAGE — PROCESS, ANCHOR & CONTACT FORM -------------------------------------------------------------------------- Page-specific components for the contact page. The form lives in a Custom HTML block (WordPress has no core form block); submission still needs a handler or a form plugin — these styles only theme the markup. ========================================================================== */ /* Left-accent section heading ("What to Expect") */ .lt-section-title { border-left: 0.25rem solid var(--wp--preset--color--accent-phosphor); border-radius: 0; padding-left: 1rem; } /* Staggered reveal for the process steps (works with the motion engine's scroll observer, which adds .active / .reveal-activated). */ .lt-steps > .scroll-reveal:nth-child(1) { transition-delay: 0ms; } .lt-steps > .scroll-reveal:nth-child(2) { transition-delay: 120ms; } .lt-steps > .scroll-reveal:nth-child(3) { transition-delay: 240ms; } .lt-steps > .scroll-reveal:nth-child(4) { transition-delay: 360ms; } /* Visual anchor (the "System precision: ready" panel under the steps) */ .lt-anchor { aspect-ratio: 16 / 9; } .lt-anchor-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.2rem; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.2em; color: var(--wp--preset--color--accent-phosphor); border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-phosphor) 40%, transparent); border-radius: 0.125rem; background-color: color-mix(in srgb, var(--wp--preset--color--bg-base) 70%, transparent); } .lt-pulse-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--wp--preset--color--accent-phosphor); animation: phosphorPulse 2s infinite; } /* --- Form card --- */ /* Tunable spacing — change these few values to control field spacing. They cascade down to the fields whether the form is the page's Custom HTML card (.lt-form-card) or the HTML Forms plugin wrapper (.hf-form). */ .lt-form-card, .hf-form { --lt-card-padding: clamp(1.5rem, 4vw, 3rem); /* inner padding of the card */ --lt-title-gap: 2rem; /* title -> first field */ --lt-field-gap: 1.5rem; /* between stacked fields */ --lt-row-gap: 1.5rem; /* the name / email row */ --lt-label-gap: 0.5rem; /* label -> input */ position: relative; background-color: var(--wp--preset--color--bg-surface-elevated); border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; padding: var(--lt-card-padding); } /* RECONCILIATION FIX: Strip interior card decorations when nested inside block editor wrapper */ .lt-form-card .hf-form { border: none !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } .lt-form-title { margin: 0 0 var(--lt-title-gap, 2rem); font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--x-large); font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; color: var(--wp--preset--color--text-primary); } .ep-accent { color: var(--wp--preset--color--accent-phosphor); } /* RECONCILIATION FIX: Enforce uniform flexible alignment variables across blocks */ .lt-form { display: flex !important; flex-direction: column !important; gap: var(--lt-field-gap, 1.5rem) !important; } .lt-form .lt-grid, .lt-grid { display: grid; grid-template-columns: 1fr; column-gap: var(--lt-row-gap, 1.5rem); /* space between Name & Email */ row-gap: var(--lt-field-gap, 1.5rem); /* used when stacked on mobile */ } @media screen and (min-width: 600px) { .lt-form .lt-grid, .lt-grid { grid-template-columns: 1fr 1fr; } } .lt-field { display: flex; flex-direction: column; min-width: 0; /* let the grid track shrink instead of overflowing */ } .lt-label { margin-bottom: var(--lt-label-gap, 0.5rem); font-family: var(--wp--preset--font-family--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent-phosphor); } .lt-input { box-sizing: border-box; /* padding counts toward the 100% width */ width: 100%; min-width: 0; /* shrink to fit the grid cell, not the input's intrinsic size */ padding: 0.875rem 1rem; background-color: var(--wp--preset--color--bg-base); border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .lt-input::placeholder { color: var(--wp--preset--color--text-secondary); opacity: 0.55; } .lt-input:focus-visible { outline: none; border-color: var(--wp--preset--color--accent-phosphor); box-shadow: 0 0 0 1px var(--wp--preset--color--accent-phosphor); } .lt-textarea { resize: vertical; min-height: 7rem; } .lt-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.75rem; background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .lt-actions { padding-top: 0.5rem; } .lt-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 1rem 3rem; background-color: var(--wp--preset--color--accent-phosphor); color: var(--wp--preset--color--bg-base); border: none; border-radius: 0.125rem; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; } .lt-submit .material-symbols-outlined { font-size: 1.1rem; transition: transform 0.2s ease; } .lt-submit:hover .material-symbols-outlined { transform: translateX(0.2rem); } @media screen and (min-width: 600px) { .lt-submit { width: auto; } } /* --- HTML Forms plugin integration --------------------------------------- The fields are styled by the .lt-* rules above; .hf-form already shares the card look + spacing variables. These handle the pieces the plugin owns. FIELD SPACING: the gap between fields is var(--lt-field-gap) on .lt-form. In the HTML Forms editor, keep your fields wrapped in
so the gap applies to your inputs only — NOT to the hidden honeypot/nonce the plugin injects (which would otherwise add a phantom gap). */ /* RECONCILIATION FIX: Unbind native form-field layout wraps from breaking flex row spaces */ .hf-form-fields { display: contents; } /* Submission messages (the plugin renders these with role="alert"). */ .hf-form .hf-message { margin-top: var(--lt-field-gap, 1.5rem); padding: 0.875rem 1rem; border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); } .hf-form .hf-message-success { color: var(--wp--preset--color--accent-phosphor); border-color: var(--wp--preset--color--accent-phosphor); } .hf-form .hf-message-error { color: var(--ep-color-error); border-color: var(--ep-color-error); } /* Vertical spacing between fields — robust to whether the plugin kept your
wrapper. This spaces the DIRECT children of the plugin's
: if .lt-form survived, its only visible child is the wrapper (so nothing doubles up); if it was stripped, the fields are the direct children and get spaced here. A top margin on each item after the first also neatly skips the hidden honeypot/nonce (no visible gap around them), and the Name/Email cells inside .lt-grid are untouched since they're grandchildren. */ .hf-form-fields > * + * { margin-top: var(--lt-field-gap, 1.5rem); } /* ========================================================================== 18. INTERIOR PAGES — REUSABLE COMPONENTS -------------------------------------------------------------------------- Shared building blocks for About / Architecture / Privacy / Insights. All theme-aware (use --wp--preset--color--*) and animation-ready (pair with .scroll-reveal / .text-reveal-trigger, which the motion engine drives). ========================================================================== */ /* --- Status pill: dot + mono uppercase label (used across all pages) --- */ .ep-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-phosphor) 35%, transparent); border-radius: 0.125rem; background-color: var(--wp--preset--color--bg-surface-elevated); font-family: var(--wp--preset--font-family--font-mono); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent-phosphor); } .ep-badge-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: var(--wp--preset--color--accent-phosphor); animation: phosphorPulse 2s infinite; } /* --- Accent-filled card (phosphor background, base-colour text) --- */ .ep-card-accent { background-color: var(--wp--preset--color--accent-phosphor); color: var(--wp--preset--color--bg-base); border-radius: 0.125rem; } .ep-card-accent :where(h1,h2,h3,h4,h5,p,span) { color: var(--wp--preset--color--bg-base); } /* --- Numbered chip ("01") used on service/section cards --- */ .ep-num-chip { display: inline-block; padding: 0.15rem 0.7rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-phosphor) 25%, transparent); background-color: color-mix(in srgb, var(--wp--preset--color--accent-phosphor) 10%, transparent); font-family: var(--wp--preset--font-family--font-mono); color: var(--wp--preset--color--accent-phosphor); border-radius: 0.125rem; } /* --- Icon tile (square outline that fills phosphor on hover) --- */ .ep-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.25rem; color: var(--wp--preset--color--accent-phosphor); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .technical-card:hover .ep-icon-tile { background-color: var(--wp--preset--color--accent-phosphor); border-color: var(--wp--preset--color--accent-phosphor); color: var(--wp--preset--color--bg-base); } /* --- Large process step node + connector (Architecture) --- */ .ep-process { position: relative; } @media screen and (min-width: 782px) { .ep-process::before { content: ''; position: absolute; top: 3rem; /* centre of the 6rem nodes */ left: 16%; width: 68%; height: 1px; background-color: var(--wp--preset--color--border-technical); z-index: 0; } } .ep-process > * { position: relative; z-index: 1; } .ep-step-node { display: inline-flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border: 1px solid var(--wp--preset--color--border-technical); background-color: var(--wp--preset--color--bg-surface); border-radius: 0.5rem; font-family: var(--wp--preset--font-family--font-mono); font-weight: 700; color: var(--wp--preset--color--accent-phosphor); } .ep-step-node.is-accent { background-color: var(--wp--preset--color--accent-phosphor); border-color: var(--wp--preset--color--accent-phosphor); color: var(--wp--preset--color--bg-base); } /* --- Inline terminal/code snippet block --- */ .ep-codeblock { padding: 1.25rem 1.5rem; background-color: var(--wp--preset--color--bg-base); border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-phosphor); line-height: 1.9; } /* --- Technical data table (Privacy retention matrix; reusable) --- */ .ep-table { width: 100%; border: 1px solid var(--wp--preset--color--border-technical); border-collapse: collapse; overflow: hidden; } .ep-table th, .ep-table td { padding: 1rem 1.5rem; text-align: left; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); border-bottom: 1px solid var(--wp--preset--color--border-technical); } .ep-table thead th { background-color: var(--wp--preset--color--bg-surface-elevated); color: var(--wp--preset--color--accent-phosphor); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; } .ep-table tbody td { color: var(--wp--preset--color--text-secondary); } .ep-table tbody td:first-child { color: var(--wp--preset--color--text-primary); } .ep-table tbody tr { transition: background-color 0.2s ease; } .ep-table tbody tr:hover { background-color: var(--wp--preset--color--bg-surface); } .ep-table tbody tr:last-child td { border-bottom: none; } .ep-table-scroll { overflow-x: auto; border: 1px solid var(--wp--preset--color--border-technical); } .ep-table-scroll .ep-table { border: none; } /* --- Privacy: numbered document section heading --- */ .ep-doc-num { font-family: var(--wp--preset--font-family--font-mono); color: var(--wp--preset--color--accent-phosphor); opacity: 0.5; margin-right: 0.75rem; } /* --- Privacy: sticky table-of-contents sidebar --- */ .ep-toc { position: sticky; top: 6rem; } .ep-toc-nav a { display: block; padding: 0.6rem 0 0.6rem 1rem; border-left: 1px solid var(--wp--preset--color--border-technical); font-family: var(--wp--preset--font-family--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--wp--preset--color--text-secondary); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } .ep-toc-nav a:hover, .ep-toc-nav a.is-active { color: var(--wp--preset--color--accent-phosphor); border-left-color: var(--wp--preset--color--accent-phosphor); } /* Anchor targets clear the sticky header when jumped to from the TOC */ .ep-doc-section { scroll-margin-top: 6rem; } /* --- Subtle phosphor glow for page H1s --- */ .ep-glow { text-shadow: 0 0 1.5rem color-mix(in srgb, var(--wp--preset--color--accent-phosphor) 30%, transparent); } /* --- Misfit / "not a good fit" item marker --- */ .ep-tag-num { font-family: var(--wp--preset--font-family--font-mono); font-weight: 700; color: var(--wp--preset--color--accent-phosphor); } /* ========================================================================== 19. INSIGHTS / BLOG — DYNAMIC POST LIST (reusable; styles Query Loop output) -------------------------------------------------------------------------- Wrap a core/query block in a group with class "ep-post-list". These rules style every core/post-template item (.wp-block-post), so the list stays consistent no matter how many posts are published. The first item gets the featured treatment automatically. ========================================================================== */ .ep-post-list .wp-block-post-template, .ep-post-list ul.wp-block-post-template { list-style: none; margin: 0; padding: 0; gap: 0; /* cards are separated by their own top borders */ } .ep-post-list .wp-block-post { margin: 0; padding: 2rem; border-left: 1px solid var(--wp--preset--color--border-technical); border-top: 1px solid var(--wp--preset--color--border-technical); transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .ep-post-list .wp-block-post:hover { border-left-color: var(--wp--preset--color--accent-phosphor); background-color: color-mix(in srgb, var(--wp--preset--color--bg-surface) 30%, transparent); } .ep-post-list .wp-block-post:last-child { border-bottom: 1px solid var(--wp--preset--color--border-technical); } /* Featured (first) post */ .ep-post-list .wp-block-post:first-child { border-left: 4px solid var(--wp--preset--color--accent-phosphor); background-color: color-mix(in srgb, var(--wp--preset--color--bg-surface) 30%, transparent); } @media screen and (min-width: 600px) { .ep-post-list .wp-block-post { padding: 2.5rem 3rem; } } /* Meta line (date / category) */ .ep-post-meta, .ep-post-list .wp-block-post-date, .ep-post-list .wp-block-post-terms { font-family: var(--wp--preset--font-family--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--text-secondary); } /* Title */ .ep-post-list .wp-block-post-title { margin: 0.75rem 0; line-height: 1.2; } .ep-post-list .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--text-primary); transition: color 0.2s ease; } .ep-post-list .wp-block-post:hover .wp-block-post-title a { color: var(--wp--preset--color--accent-phosphor); } /* Excerpt */ .ep-post-list .wp-block-post-excerpt { color: var(--wp--preset--color--text-secondary); } .ep-post-list .wp-block-post-excerpt__more-text a, .ep-post-list .wp-block-read-more { font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-phosphor); text-decoration: none; } .ep-post-list .wp-block-read-more:hover { text-decoration: underline; } /* Featured image thumbnail — desaturate, restore on hover */ .ep-post-list .wp-block-post-featured-image img { filter: grayscale(1); transition: filter 0.6s ease, opacity 0.3s ease; border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; } .ep-post-list .wp-block-post:hover .wp-block-post-featured-image img { filter: grayscale(0); } /* Pagination */ .ep-post-list .wp-block-query-pagination { margin-top: 2.5rem; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); } .ep-post-list .wp-block-query-pagination a { color: var(--wp--preset--color--accent-phosphor); text-decoration: none; } .ep-post-list .wp-block-query-pagination .current { color: var(--wp--preset--color--text-primary); } /* --- Newsletter / terminal-input row (Insights + reusable) --- */ .ep-term-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background-color: var(--wp--preset--color--bg-base); border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; transition: border-color 0.2s ease; } .ep-term-row:focus-within { border-color: var(--wp--preset--color--accent-phosphor); } .ep-term-row::before { content: '>'; font-family: var(--wp--preset--font-family--font-mono); color: var(--wp--preset--color--accent-phosphor); } .ep-term-row input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-primary); } /* ========================================================================== 20. SECURITY (COMING-SOON) + SINGLE POST COMPONENTS -------------------------------------------------------------------------- Reusable pieces for the Security initialization page and the single-post article layout. JS that drives these lives in motion.js v3.2 (guarded). ========================================================================== */ /* --- Launch countdown clock (driven by [data-ep-countdown]) --- */ .ep-countdown { display: flex; align-items: flex-start; justify-content: center; gap: clamp(0.75rem, 3vw, 2.5rem); font-family: var(--wp--preset--font-family--font-mono); } .ep-count-unit { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .ep-count-num { font-size: clamp(3rem, 11vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--wp--preset--color--accent-phosphor); font-variant-numeric: tabular-nums; } .ep-count-label { font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.2em; color: var(--wp--preset--color--text-secondary); } .ep-count-sep { font-size: clamp(2rem, 7vw, 4rem); line-height: 1; color: var(--wp--preset--color--text-secondary); align-self: flex-start; margin-top: 0.25rem; } .ep-count-caret { display: inline-block; width: 0.75rem; height: clamp(2.5rem, 9vw, 5rem); margin-left: 0.35rem; vertical-align: text-bottom; background-color: var(--wp--preset--color--accent-phosphor); animation: cursorBlink 1s step-end infinite; } /* --- Bento card corner icon (decorative; brightens on card hover) --- */ .ep-bento-card { position: relative; overflow: hidden; } .ep-card-corner { position: absolute; top: 0.75rem; right: 0.75rem; opacity: 0.1; color: var(--wp--preset--color--accent-phosphor); pointer-events: none; transition: opacity 0.3s ease; } .technical-card:hover .ep-card-corner { opacity: 1; } /* --- Thin progress meter (security verification bars) --- */ .ep-meter { flex: 1; height: 0.25rem; background-color: var(--wp--preset--color--bg-surface-elevated); border-radius: 9999px; overflow: hidden; } .ep-meter-fill { height: 100%; background-color: var(--wp--preset--color--accent-phosphor); animation: technicalFlicker 2s infinite; } /* --- Reading progress bar (single post) --- */ .ep-reading-track { position: fixed; top: 0; left: 0; width: 100%; height: 0.1875rem; background-color: var(--wp--preset--color--bg-surface); z-index: 100; } #ep-reading-bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background-color: var(--wp--preset--color--accent-phosphor); will-change: transform; } /* --- Single-post article prose (.ep-article wraps core/post-content) --- */ .ep-article > p:first-of-type::first-letter { float: left; margin: 0.1em 0.6rem 0 0; font-family: var(--wp--preset--font-family--font-base); font-size: 3.5rem; font-weight: 700; line-height: 0.8; color: var(--wp--preset--color--accent-phosphor); } .ep-article h2 { scroll-margin-top: 6rem; margin-top: 2.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--wp--preset--color--border-technical); color: var(--wp--preset--color--accent-phosphor); } .ep-article blockquote { margin: 2rem 0; padding: 1.5rem; border-left: 4px solid var(--wp--preset--color--accent-phosphor); background-color: var(--wp--preset--color--bg-surface); font-family: var(--wp--preset--font-family--font-mono); font-style: italic; color: var(--wp--preset--color--text-primary); } .ep-article pre, .ep-article .wp-block-code { padding: 1.5rem; background-color: var(--wp--preset--color--bg-base); border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; font-family: var(--wp--preset--font-family--font-mono); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-phosphor); overflow-x: auto; } .ep-article img, .ep-article .wp-block-image img { border: 1px solid var(--wp--preset--color--border-technical); border-radius: 0.125rem; } /* --- Hero decorative grid backdrop (single post) --- */ .ep-hero-grid { position: absolute; top: 0; right: 0; width: 33%; height: 100%; opacity: 0.1; pointer-events: none; background-image: linear-gradient(var(--wp--preset--color--border-technical) 1px, transparent 1px), linear-gradient(90deg, var(--wp--preset--color--border-technical) 1px, transparent 1px); background-size: 25% 25%; } /* --- Share box (single post sidebar) --- */ .ep-share button { background: transparent; border: none; cursor: pointer; color: var(--wp--preset--color--text-primary); transition: color 0.2s ease; } .ep-share button:hover { color: var(--wp--preset--color--accent-phosphor); } /* ========================================================================== 21. EQUAL-HEIGHT COLUMNS UTILITY -------------------------------------------------------------------------- Add the class "equal-height-columns" to a core/columns block so sibling cards match the tallest column's height. Useful wherever .technical-card columns have uneven copy (About values, Architecture services, etc.). ========================================================================== */ /* 1. Ensure the parent columns container allows children to stretch on desktop */ @media (min-width: 782px) { .wp-block-columns.equal-height-columns { align-items: stretch !important; } } /* 2. Turn the individual direct-child columns into flex containers */ .wp-block-columns.equal-height-columns > .wp-block-column { display: flex; flex-direction: column; } /* 3. Force the inner element (the Group block) to grow and fill the space */ .wp-block-columns.equal-height-columns > .wp-block-column > * { flex: 1 1 auto; width: 100%; } /* 4. Inside the card, make it a flex column and pin ONLY the last element to the bottom (footer / meter / CTA). This replaces a blunt `justify-content: space-between`, which spread every child apart and broke centered layouts like the .ep-process steps. Top content stays put; the final block drops to the baseline. */ .wp-block-columns.equal-height-columns > .wp-block-column > .wp-block-group { display: flex; flex-direction: column; } .wp-block-columns.equal-height-columns > .wp-block-column > .wp-block-group > :last-child { margin-top: auto; } /* ========================================================================== 22. FULL-VIEWPORT-WIDTH SEPARATOR UTILITY -------------------------------------------------------------------------- Add the class "full-width-separator-viewport" to a core/separator block so the rule spans the entire viewport width, breaking out of any constrained or wide container it sits inside. !important is required because core scopes the default separator width with :not() selectors (e.g. .wp-block-separator:not(.is-style-wide)…), which carry higher specificity than a two-class utility would. NOTE: 100vw includes the vertical scrollbar's width, so on pages that scroll this can introduce a few px of horizontal overflow. If you see a horizontal scrollbar, add `overflow-x: clip;` to a wrapping container — use CLIP, not `hidden`: clip does NOT create a scroll container, so (unlike hidden) it will not disable position:sticky on the header. ========================================================================== */ .wp-block-separator.full-width-separator-viewport { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* ========================================================================== 23. ANIMATE-PULSE UTILITY -------------------------------------------------------------------------- Port of Tailwind's `animate-pulse` (used throughout the original mockups for status dots, the request_access button, verification meters, etc.). Add the class "animate-pulse" to any block via Additional CSS class(es). ========================================================================== */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @media (prefers-reduced-motion: reduce) { .animate-pulse { animation: none !important; opacity: 1 !important; } }