/* Theme Name: Munib Immersive Theme URI: https://example.com/munib-immersive Author: Munib Younis Author URI: https://example.com Description: A Swiss International Style consulting theme for an AV integration and immersive-experience expert. "Grid, red, and paper" art direction — asymmetric typographic composition on flat paper, a red-block accent on the hero, a still-reactive lidar dot field restyled in signal red, and a numbered menu overlay. Every color, background pattern, motion level, typography scale, and menu behavior is Customizer-controlled. Arabic-first, fully RTL-native, no page builder, no build step. Version: 1.3.2 Requires at least: 6.3 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: munib-immersive Tags: portfolio, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* -------------------------------------------------------------------------- 1. Design tokens — Swiss International Style -------------------------------------------------------------------------- */ :root { /* Palette. Overridable via Customizer → Design → Palette. Semantic slot names preserved from the previous theme so JS + PHP never see the swap: --c-beam is now Signal Red, --c-signal is Deep Blue, --c-void is paper white, --c-text is ink. */ --c-void: #ffffff; --c-surface: #f2f2f2; --c-text: #1a1a1a; --c-muted: #a9b2b1; --c-beam: #d82c2c; --c-signal: #0033a0; /* Hairlines derived from ink at low opacity. */ --c-line: rgba(26, 26, 26, 0.12); --c-line-strong: rgba(26, 26, 26, 0.22); /* Auto-derived AA-safe ink for buttons filled with --c-beam. Overridden by the Customizer when a light primary is picked (server-side YIQ). */ --c-primary-ink: #ffffff; /* Type. Helvetica for both scripts on Latin; IBM Plex Sans Arabic picks up automatically on Arabic glyphs. JetBrains Mono carries readouts / metadata. */ --font-display: "Helvetica Neue", "Helvetica", "Arial", "IBM Plex Sans Arabic", sans-serif; --font-body: "Helvetica Neue", "Helvetica", "Arial", "IBM Plex Sans Arabic", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Type scale — Customizer swaps these via data-typescale. */ --fs-h1: clamp(2.5rem, 5vw, 4rem); --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem); --fs-h3: clamp(1.25rem, 2.5vw, 1.625rem); --fs-body: 1rem; --fs-readout: 0.75rem; --tracking-display: -0.02em; /* Space & layout: 8px base rhythm, 1280px containment. */ --section-pad: clamp(4rem, 8vw, 8rem); --container: 1280px; --gutter: 1.5rem; --radius: 0.5rem; /* Motion — kept subtle per Swiss "Motion 4/10". Overridable by [data-motion=none|expressive] modifiers below. */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1); --enter-duration: 540ms; --enter-stagger: 120ms; /* Background grid — Customizer-tunable. */ --grid-size: 120px; --grid-opacity: 0.35; /* z-index contract: base 0 / sticky-nav 100 / overlay 200 / modal 300 / toast 500. */ --z-nav: 100; --z-overlay: 200; --z-toast: 500; } /* Motion modifiers on */ [data-motion="none"] { --enter-duration: 0ms; --enter-stagger: 0ms; } [data-motion="expressive"] { --enter-duration: 640ms; --enter-stagger: 90ms; } /* Typography scale presets on */ [data-typescale="compact"] { --fs-h1: clamp(2rem, 4.2vw, 3rem); --fs-h2: clamp(1.5rem, 3vw, 2rem); --fs-h3: clamp(1.125rem, 2.2vw, 1.375rem); } [data-typescale="expanded"] { --fs-h1: clamp(3rem, 7vw, 5.5rem); --fs-h2: clamp(2rem, 4.5vw, 3.25rem); --fs-h3: clamp(1.375rem, 2.8vw, 1.875rem); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Smooth anchors — Customizer-gated via an data attribute (the root is the scroll container). */ html[data-smooth="1"] { scroll-behavior: smooth; } /* Breathing room above every anchor landing so section headings never sit flush against (or sliced by) the viewport edge. */ .site-main > section { scroll-margin-block-start: 2.5rem; } body[data-header="fixed"] .site-main > section { scroll-margin-block-start: 6.5rem; } @media (prefers-reduced-motion: reduce) { html[data-smooth="1"] { scroll-behavior: auto; } } body { margin: 0; background: var(--c-void); color: var(--c-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-beam); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--c-text); } :focus-visible { outline: 2px solid var(--c-beam); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--c-beam); color: var(--c-primary-ink); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: var(--tracking-display); margin-block: 0 0.5em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin-block: 0 1.25em; } .narrow-col { max-width: 62ch; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); position: relative; } .section--tight { padding-block: calc(var(--section-pad) * 0.62); } /* Every section title carries a solid red rule above it — Swiss print anchor. */ .section > .container > h2::before, .section > .container > .readout + h2::before { content: ""; display: block; inline-size: 48px; block-size: 3px; background: var(--c-beam); margin-block-end: 1.1rem; } /* Grid overlay: Customizer emits --grid-size / --grid-opacity. Rendered both from .section--grid and (globally, on body[data-bg=grid]) below. */ .section--grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 90deg, rgba(26, 26, 26, calc(0.12 * var(--grid-opacity))) 0, rgba(26, 26, 26, calc(0.12 * var(--grid-opacity))) 1px, transparent 1px, transparent var(--grid-size) ); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); } /* -------------------------------------------------------------------------- 3a. Background pattern presets (Customizer: mi_bg_pattern) -------------------------------------------------------------------------- */ /* Paper (default flat) — nothing to add, body bg does the work. */ /* Grid: page-wide calibration hairlines. */ body[data-bg="grid"] { background-image: repeating-linear-gradient( 90deg, rgba(26, 26, 26, calc(0.10 * var(--grid-opacity))) 0, rgba(26, 26, 26, calc(0.10 * var(--grid-opacity))) 1px, transparent 1px, transparent var(--grid-size) ); } /* Blocks: a solid red band on the extreme left of the viewport (Swiss corner accent). */ body[data-bg="blocks"] { background: linear-gradient(90deg, var(--c-beam) 0, var(--c-beam) 8px, var(--c-void) 8px); } /* Rules: a single ink rule at every section top. */ body[data-bg="rules"] .section { border-block-start: 1px solid var(--c-line-strong); } body[data-bg="rules"] .site-main > .section:first-child { border-block-start: 0; } /* Hero corner-accent block opt-in (Customizer: mi_hero_accent_block). Body class is toggled by a one-line inline script in header.php so we don't need to touch every body_class() call site. */ body.has-hero-accent-block .hero { position: relative; } body.has-hero-accent-block .hero::before { content: ""; position: absolute; inset-block-start: 20%; inset-inline-start: -1.5rem; inline-size: min(38vw, 320px); block-size: min(46vh, 420px); background: var(--c-beam); z-index: 0; pointer-events: none; } body.has-hero-accent-block .hero .container { position: relative; z-index: 2; } /* Readout label: SEC.01 / SERVICES — uppercase mono, tracked, solid red rule. */ .readout { display: inline-flex; align-items: center; gap: 0.85em; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text); margin-block-end: 1.4rem; font-variant-numeric: tabular-nums; } .readout::before { content: ""; inline-size: 32px; block-size: 3px; background: var(--c-beam); } /* Calibration corner ticks on panels — 8px solid ink squares. */ .ticked { position: relative; } .ticked::before, .ticked::after { content: ""; position: absolute; inline-size: 8px; block-size: 8px; background: var(--c-text); pointer-events: none; } .ticked::before { inset-block-start: -3px; inset-inline-start: -3px; } .ticked::after { inset-block-end: -3px; inset-inline-end: -3px; } /* -------------------------------------------------------------------------- 4. Buttons — spec-tactile: subtle radius, 8% darken + subtle lift on hover, -1px press on active. Only transform / filter / shadow animate. -------------------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1; padding: 0.95em 1.9em; border: 1px solid var(--c-beam); border-radius: var(--radius); background: var(--c-beam); color: var(--c-primary-ink); cursor: pointer; transition: filter 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s ease; } .btn:hover, .btn:focus-visible { color: var(--c-primary-ink); filter: brightness(0.92); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .btn:active { transform: translateY(1px); box-shadow: none; } .btn--ghost { background: transparent; color: var(--c-text); border: 1.5px solid var(--c-text); } .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--c-void); background: var(--c-text); filter: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .btn--signal { background: transparent; border: 1.5px solid var(--c-signal); color: var(--c-signal); } .btn--signal:hover, .btn--signal:focus-visible { background: var(--c-signal); color: var(--c-void); filter: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* -------------------------------------------------------------------------- 5. Site header & overlay menu -------------------------------------------------------------------------- */ .site-header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: var(--z-nav); padding-block: 1.5rem; background: transparent; } body[data-header="fixed"] .site-header { position: fixed; background: var(--c-void); border-block-end: 1px solid var(--c-line); padding-block: 0.9rem; backdrop-filter: none; } body[data-header="fixed"] .site-main { padding-block-start: 5.5rem; } /* Logged-in WordPress: keep the header (and its MENU button) clear of the admin bar, which overlays the top 46px/32px at z-index 99999. */ body.admin-bar .site-header { inset-block-start: 46px; } body.admin-bar .site-overlay { padding-block-start: 46px; } @media (min-width: 783px) { body.admin-bar .site-header { inset-block-start: 32px; } body.admin-bar .site-overlay { padding-block-start: 32px; } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-header__actions { display: flex; align-items: center; gap: 0.75rem; } .site-branding { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em; } .site-branding__row { display: flex; align-items: center; gap: 0.5rem; } /* Tagline (Customizer → Site Identity) under the title, readout voice. */ .site-branding__tagline { margin: 0.1rem 0 0; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } @media (max-width: 599.98px) { .site-branding__tagline { display: none; /* keep the mobile header to one clean line */ } } .site-branding a { color: var(--c-text); } .site-branding a:hover { color: var(--c-beam); } .site-branding img { max-block-size: 40px; inline-size: auto; } .site-branding__mark { display: inline-block; inline-size: 12px; block-size: 12px; background: var(--c-beam); } .menu-toggle { display: inline-flex; align-items: center; gap: 0.7em; background: none; border: 1px solid var(--c-text); border-radius: var(--radius); color: var(--c-text); font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6em 1.2em; min-block-size: 44px; /* comfortable touch target */ cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .menu-toggle:hover { background: var(--c-text); color: var(--c-void); } .menu-toggle__bars { inline-size: 20px; block-size: 2px; background: currentColor; position: relative; } .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; inset-inline: 0; block-size: 2px; background: currentColor; } .menu-toggle__bars::before { inset-block-start: -6px; } .menu-toggle__bars::after { inset-block-start: 6px; } /* Inline nav (Customizer: mi_menu_style = inline). */ .site-nav--inline { display: none; } body[data-menu="inline"] .site-nav--inline { display: block; } body[data-menu="inline"] .site-nav--inline ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; align-items: center; } body[data-menu="inline"] .site-nav--inline a { color: var(--c-text); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; position: relative; padding-block: 0.4em; } body[data-menu="inline"] .site-nav--inline a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: 2px; inline-size: 0; background: var(--c-beam); transition: inline-size 0.2s ease; } body[data-menu="inline"] .site-nav--inline a:hover::after, body[data-menu="inline"] .site-nav--inline .current-menu-item > a::after { inline-size: 100%; } /* Language item in the inline nav: matches sibling links, red to mark it. */ body[data-menu="inline"] .site-nav--inline .lang-switch__toggle { background: none; border: 0; padding: 0; padding-block: 0.4em; cursor: pointer; color: var(--c-beam); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; } body[data-menu="inline"] .site-nav--inline .lang-switch__toggle:hover { color: var(--c-text); } @media (max-width: 767.98px) { body[data-menu="inline"] .site-nav--inline { display: none; } body[data-menu="inline"] .menu-toggle { display: inline-flex; } } @media (min-width: 768px) { body[data-menu="inline"] .menu-toggle { display: none; } } .site-header__cta { display: none; } body[data-header-cta="1"] .site-header__cta { display: inline-flex; align-items: center; background: var(--c-beam); color: var(--c-primary-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; padding: 0.55em 1.1em; border-radius: var(--radius); border: 1px solid var(--c-beam); transition: filter 0.2s ease; } body[data-header-cta="1"] .site-header__cta:hover { filter: brightness(0.92); color: var(--c-primary-ink); } /* Overlay menu — paper white with hairline grid. */ .site-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--c-void); display: grid; align-content: center; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; } .site-overlay.is-open { visibility: visible; opacity: 1; } .site-overlay::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 90deg, rgba(26, 26, 26, 0.05) 0, rgba(26, 26, 26, 0.05) 1px, transparent 1px, transparent 120px ); } .site-overlay::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 6px; background: var(--c-beam); pointer-events: none; } .site-overlay__close { position: absolute; inset-block-start: 1.4rem; inset-inline-end: var(--gutter); background: none; border: 1px solid var(--c-text); border-radius: var(--radius); color: var(--c-text); font-size: 1.5rem; line-height: 1; inline-size: 52px; block-size: 52px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .site-overlay__close:hover { background: var(--c-beam); color: var(--c-primary-ink); border-color: var(--c-beam); } .site-overlay__nav ul { list-style: none; margin: 0; padding: 0; counter-reset: nav; } .site-overlay__nav li { counter-increment: nav; } .site-overlay__nav a { display: inline-flex; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-size: clamp(1.75rem, 5.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); padding-block: 0.28em; transition: color 0.2s ease, transform 0.25s ease; } body[data-menu-numbers="1"] .site-overlay__nav a::before { content: counter(nav, decimal-leading-zero) "."; font-size: var(--fs-readout); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.12em; color: var(--c-beam); font-variant-numeric: tabular-nums; } .site-overlay__nav a:hover { color: var(--c-beam); transform: translateX(0.35em); } /* Language item merged into the menu ("العربية" / "English"). Inherits the big nav-link look; numbered like its siblings. */ .site-overlay__nav .lang-switch__toggle { display: inline-flex; align-items: baseline; gap: 1rem; background: none; border: 0; padding: 0; padding-block: 0.28em; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.75rem, 5.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); transition: color 0.2s ease, transform 0.25s ease; } body[data-menu-numbers="1"] .site-overlay__nav .lang-switch__toggle::before { content: counter(nav, decimal-leading-zero) "."; font-size: var(--fs-readout); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.12em; color: var(--c-beam); font-variant-numeric: tabular-nums; } .site-overlay__nav .lang-switch__toggle:hover { color: var(--c-beam); transform: translateX(0.35em); } .site-overlay__social ul { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; } .site-overlay__social a { color: var(--c-text); font-size: var(--fs-readout); font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; } .site-overlay__social a:hover { color: var(--c-beam); } /* -------------------------------------------------------------------------- 6. Hero — asymmetric typographic composition -------------------------------------------------------------------------- */ .hero { position: relative; min-block-size: 100svh; min-block-size: 100dvh; display: grid; align-content: center; overflow: hidden; background: var(--c-void); } .hero__canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; } .hero__canvas.is-live { opacity: 1; } /* Split-screen: copy on the inline-start, viewer on the inline-end. Collapses to a single column below 900px. */ .hero .container { position: relative; z-index: 2; padding-block: calc(var(--section-pad) * 1.4) var(--section-pad); display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; inline-size: 100%; } @media (min-width: 900px) { .hero .container.has-viewer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } } .hero__copy { position: relative; z-index: 2; } .hero__title { max-width: 16ch; margin-block-end: 0.4em; font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; } /* Red block behind the highlighted phrase — Swiss maximum-emphasis mark. */ .hero__title em { font-style: normal; background: var(--c-beam); color: var(--c-primary-ink); padding: 0 0.12em 0.02em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hero__subtitle { max-width: 46ch; color: var(--c-text); opacity: 0.72; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.5; margin-block-end: 2rem; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } /* Small hint on the bottom-left of the hero when canvas is live. */ .hero__hint { position: absolute; inset-block-end: 1.6rem; inset-inline-start: var(--gutter); z-index: 2; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text); font-variant-numeric: tabular-nums; display: none; } .hero__hint::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; background: var(--c-beam); margin-inline-end: 0.7em; transform: translateY(-1px); } .hero__hint.is-live { display: inline-flex; align-items: center; animation: hint-pulse 3.2s ease-in-out infinite; } @keyframes hint-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero__hint.is-live { animation: none; } } /* 3D viewer — drag/scroll wireframe. Kept Swiss-flat: paper card, hairline border, no glow, red default line. */ .viewer { position: relative; aspect-ratio: 1 / 1; max-block-size: min(62vh, 520px); inline-size: 100%; justify-self: center; border: 1px solid var(--c-text); border-radius: 0; background: var(--c-void); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; } .viewer__canvas, .viewer__fallback { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; } .viewer__canvas { cursor: grab; touch-action: none; } .viewer__canvas.is-dragging { cursor: grabbing; } .viewer.is-live .viewer__fallback { display: none; } .viewer__hud { position: absolute; inset-block-end: 0.9rem; inset-inline: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; pointer-events: none; } .viewer__hint { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text); opacity: 0.6; } .viewer__swatches { display: flex; gap: 0.4rem; pointer-events: auto; } .viewer__swatch { inline-size: 18px; block-size: 18px; border-radius: 0; border: 1.5px solid var(--c-text); background: var(--swatch, var(--c-beam)); cursor: pointer; padding: 0; transition: transform 0.2s var(--ease-out); } .viewer__swatch:hover { transform: scale(1.15); } .viewer__swatch[aria-pressed="true"] { transform: scale(1.15); outline: 2px solid var(--c-text); outline-offset: 2px; } .viewer__label { position: absolute; inset-block-start: 0.9rem; inset-inline-start: 0.9rem; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text); opacity: 0.6; pointer-events: none; } /* -------------------------------------------------------------------------- 7. Career journey — the signal path -------------------------------------------------------------------------- */ .journey { list-style: none; margin: 0; padding: 0; } .journey__node { display: block; inline-size: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; } .journey__period { display: block; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-beam); font-variant-numeric: tabular-nums; margin-block-end: 0.35rem; } .journey__role { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.25; color: var(--c-text); } .journey__org { display: block; color: var(--c-text); opacity: 0.55; font-size: 0.9375rem; margin-block-start: 0.15rem; } .journey__detail { color: var(--c-text); max-width: 58ch; } .journey__detail p { margin-block: 0.75rem 0; } .journey__detail a { font-size: 0.9375rem; font-weight: 600; color: var(--c-beam); } /* Mobile / default: vertical rail with red nodes on black rule. */ @media (max-width: 899.98px) { .journey > li { position: relative; padding-inline-start: 2rem; padding-block-end: 2.2rem; border-inline-start: 1px solid var(--c-text); margin-inline-start: 0.5rem; } .journey > li::before { content: ""; position: absolute; inset-inline-start: -6px; inset-block-start: 0.2rem; inline-size: 11px; block-size: 11px; border-radius: 0; background: var(--c-void); border: 2px solid var(--c-beam); transition: background 0.3s ease; } .journey > li.is-passed::before { background: var(--c-beam); } /* Active entry: solid red node so the open detail reads as "this one". */ .journey > li:has(> .journey__node[aria-expanded="true"])::before { background: var(--c-beam); } .journey > li:last-child { padding-block-end: 0; } } /* Desktop: horizontal signal path. */ @media (min-width: 900px) { .journey { display: grid; grid-template-columns: repeat(var(--journey-count, 5), 1fr); grid-template-rows: auto auto; column-gap: 1.5rem; } .journey > li { display: contents; } .journey__node { grid-row: 1; position: relative; padding-block-start: 2.1rem; padding-inline-end: 1rem; } .journey__node::before { content: ""; position: absolute; inset-block-start: 5px; inset-inline-start: 0; inline-size: calc(100% + 1.5rem); block-size: 1px; background: var(--c-text); opacity: 0.35; transition: background 0.4s ease, opacity 0.4s ease; } li:last-child .journey__node::before { inline-size: 100%; } .journey__node::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 11px; block-size: 11px; border-radius: 0; background: var(--c-void); border: 2px solid var(--c-beam); transition: background 0.3s ease, transform 0.3s ease; } li.is-passed .journey__node::before { background: var(--c-beam); opacity: 1; } li.is-passed .journey__node::after { background: var(--c-beam); } .journey__node:hover::after, .journey__node[aria-expanded="true"]::after { transform: scale(1.35); } /* Active node: solid red marker + a vertical connector dropping from the node down into the detail panel, so the text below is visually mapped to its timeline item. Grid rows stretch uniformly, so the -2rem overhang always lands exactly on the detail's top rule. */ .journey__node[aria-expanded="true"]::after { background: var(--c-beam); } .journey__node[aria-expanded="true"] .journey__period::before { content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 12px; inset-block-end: -2rem; inline-size: 2px; background: var(--c-beam); } .journey__node[aria-expanded="true"] .journey__role { color: var(--c-beam); } .journey__detail { grid-row: 2; grid-column: 1 / -1; padding-block-start: 2rem; border-block-start: 1px solid var(--c-line); } } .journey__detail[hidden] { display: none; } /* -------------------------------------------------------------------------- 8. Service explorer — Swiss staircase asymmetric grid -------------------------------------------------------------------------- */ .explorer { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .explorer { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 0; } .explorer > .pillar:nth-child(1) { grid-column: 1 / 6; } .explorer > .pillar:nth-child(2) { grid-column: 6 / 10; margin-block-start: 3rem; } .explorer > .pillar:nth-child(3) { grid-column: 10 / 13; margin-block-start: 6rem; } } .pillar { background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out); } .pillar:hover, .pillar:focus-within { border-color: var(--c-text); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } [data-motion="expressive"] .pillar:hover, [data-motion="expressive"] .pillar:focus-within { transform: translateY(-2px) scale(1.01); } .pillar__index { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.12em; color: var(--c-beam); font-variant-numeric: tabular-nums; margin-block-end: 1rem; } .pillar__title { font-size: 1.375rem; margin-block-end: 0.4rem; color: var(--c-text); } .pillar__hook { color: var(--c-text); opacity: 0.7; margin-block-end: 1.4rem; } .pillar__step h4 { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text); opacity: 0.6; margin-block: 1.2rem 0.6rem; } .pillar__step ul { list-style: none; margin: 0 0 1rem; padding: 0; } .pillar__step li { position: relative; padding-inline-start: 1.4rem; margin-block-end: 0.55rem; color: var(--c-text); } .pillar__step li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; inline-size: 6px; block-size: 6px; background: var(--c-beam); } .pillar__outcome { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.5; border-inline-start: 3px solid var(--c-beam); padding-inline-start: 1rem; margin-block: 0.5rem 1rem; color: var(--c-text); } .pillar__cta { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; margin-block-start: 0.5rem; } .pillar__cta .btn { font-size: 0.9375rem; padding: 0.85em 1.6em; } /* All pillar content renders stacked and visible — deliverables, outcome, CTA. (The old in-card stepper was removed: paginating parallel cards hid the offer behind clicks.) */ .pillar__step + .pillar__step { margin-block-start: 1.5rem; } /* -------------------------------------------------------------------------- 9. Work grid — editorial 7/5 alternating pattern -------------------------------------------------------------------------- */ .work-filter { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .work-filter button { background: none; border: 1px solid var(--c-text); border-radius: var(--radius); color: var(--c-text); font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; padding: 0.5em 1.2em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .work-filter button:hover { background: var(--c-text); color: var(--c-void); } .work-filter button[aria-pressed="true"] { background: var(--c-beam); border-color: var(--c-beam); color: var(--c-primary-ink); } .work-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.5rem; } } /* Editorial 7/5 alternating pattern with row offsets on the widest breakpoint. */ @media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2rem; } .work-grid > .work-card:nth-child(4n+1) { grid-column: span 7; } .work-grid > .work-card:nth-child(4n+2) { grid-column: span 5; margin-block-start: 3rem; } .work-grid > .work-card:nth-child(4n+3) { grid-column: span 5; } .work-grid > .work-card:nth-child(4n+4) { grid-column: span 7; margin-block-start: 3rem; } } .work-card { display: block; position: relative; background: var(--c-void); border: 1px solid var(--c-text); border-radius: var(--radius); overflow: hidden; color: var(--c-text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: border-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s ease; } .work-card:hover { color: var(--c-text); border-color: var(--c-beam); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } [data-motion="expressive"] .work-card:hover { transform: translateY(-2px); } .work-card.is-hidden { display: none; } .work-card__media { display: block; aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, rgba(26, 26, 26, 0.06) 0, rgba(26, 26, 26, 0.06) 1px, transparent 1px, transparent 12px), var(--c-surface); overflow: hidden; border-block-end: 1px solid var(--c-line-strong); } .work-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 1; transition: opacity 0.3s ease, transform 0.5s ease; } .work-card:hover .work-card__media img { opacity: 0.92; } [data-motion="expressive"] .work-card:hover .work-card__media img { transform: scale(1.03); } .work-card__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; padding: 1.1rem 1.3rem 0.2rem; color: var(--c-text); } .work-card__meta { display: block; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-beam); padding: 0 1.3rem 1.2rem; } /* -------------------------------------------------------------------------- 10. Case study single -------------------------------------------------------------------------- */ .case-hero { padding-block-start: calc(var(--section-pad) * 0.9); } .case-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.5rem 2.5rem; } .case-stack span { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-beam); border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 0.4em 0.9em; font-variant-numeric: tabular-nums; } .case-facts { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-block: 3rem; } @media (min-width: 900px) { .case-facts { grid-template-columns: repeat(12, 1fr); } .case-facts > div:nth-child(1) { grid-column: span 5; } .case-facts > div:nth-child(2) { grid-column: span 4; margin-block-start: 2rem; } .case-facts > div:nth-child(3) { grid-column: span 3; } } .case-facts > div { background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 1.6rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .case-facts h2 { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-beam); margin-block-end: 0.7rem; } .case-facts h2::before { display: none; } .case-facts p { margin: 0; color: var(--c-text); } /* -------------------------------------------------------------------------- 11. Prose, entry content, archives, blog -------------------------------------------------------------------------- */ .site-main { padding-block-start: 6.5rem; } .home .site-main, .blog .site-main { padding-block-start: 0; } .blog .site-main { padding-block-start: 6.5rem; } .entry-header { margin-block: 2rem 2.5rem; } .entry-meta { color: var(--c-text); opacity: 0.6; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .entry-content { max-width: 68ch; } /* When a column carries both classes, the tighter measure wins. */ .narrow-col.entry-content { max-width: 62ch; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .entry-content blockquote { margin-inline: 0; padding-inline-start: 1.4rem; border-inline-start: 3px solid var(--c-beam); color: var(--c-text); font-style: normal; font-weight: 500; } .entry-content pre, .entry-content code { background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: 4px; font-family: var(--font-mono); font-size: 0.9em; } .entry-content code { padding: 0.15em 0.4em; } .entry-content pre { padding: 1.2rem; overflow-x: auto; } .entry-content pre code { border: 0; padding: 0; } .entry-content img { border-radius: var(--radius); } .entry-content table { border-collapse: collapse; inline-size: 100%; } .entry-content th, .entry-content td { border: 1px solid var(--c-line-strong); padding: 0.6em 0.9em; text-align: start; } .post-list article { padding-block: 2.2rem; border-block-end: 1px solid var(--c-line); } .post-list article:first-child { padding-block-start: 0; } .post-list h2 { font-size: var(--fs-h3); margin-block-end: 0.35em; } .post-list h2::before { display: none; } .post-list h2 a { color: var(--c-text); } .post-list h2 a:hover { color: var(--c-beam); } .entry-summary { color: var(--c-text); opacity: 0.7; max-width: 68ch; } .archive-description { color: var(--c-text); opacity: 0.7; } .page-links { margin-block-start: 1.5rem; } /* Pagination & post navigation. */ .pagination { margin-block-start: 3rem; } .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .nav-links .page-numbers { display: inline-block; min-inline-size: 2.6em; text-align: center; padding: 0.5em 0.8em; border: 1px solid var(--c-text); border-radius: var(--radius); color: var(--c-text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .nav-links .page-numbers.current { background: var(--c-beam); border-color: var(--c-beam); color: var(--c-primary-ink); } .nav-links a.page-numbers:hover { background: var(--c-text); color: var(--c-void); } .post-navigation { margin-block: 3.5rem 0; padding-block-start: 1.6rem; border-block-start: 1px solid var(--c-line); } .post-navigation .nav-links { justify-content: space-between; } .post-navigation a { color: var(--c-text); font-family: var(--font-display); font-weight: 500; } .post-navigation a:hover { color: var(--c-beam); } /* -------------------------------------------------------------------------- 12. Forms, search, comments -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], input[type="number"], textarea, select { background: var(--c-void); border: 1px solid var(--c-text); border-radius: var(--radius); color: var(--c-text); font-family: var(--font-body); font-size: 1rem; padding: 0.7em 0.9em; inline-size: 100%; max-inline-size: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, textarea:focus, select:focus { border-color: var(--c-beam); outline: none; box-shadow: 0 0 0 2px var(--c-beam); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-beam) 30%, transparent); } ::placeholder { color: var(--c-text); opacity: 0.4; } label { display: block; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text); margin-block: 1rem 0.35rem; } .search-form { display: flex; gap: 0.75rem; max-inline-size: 480px; margin-block: 1.5rem; } .search-form button { flex-shrink: 0; background: var(--c-beam); border: 1px solid var(--c-beam); border-radius: var(--radius); color: var(--c-primary-ink); font-family: var(--font-display); font-weight: 600; padding: 0.7em 1.4em; cursor: pointer; transition: filter 0.2s ease; } .search-form button:hover { filter: brightness(0.92); } .comments-area { margin-block-start: 4rem; padding-block-start: 2rem; border-block-start: 1px solid var(--c-line-strong); max-width: 72ch; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .comment { padding-block: 1.5rem; border-block-end: 1px solid var(--c-line); } .comment-list .children { list-style: none; margin: 0; padding-inline-start: 2rem; } .comment-list .avatar { border-radius: 0; float: inline-start; margin-inline-end: 1rem; } .comment-metadata { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text); opacity: 0.6; } .comment-metadata a { color: inherit; } .comment-form input[type="submit"] { background: var(--c-beam); border: 1px solid var(--c-beam); border-radius: var(--radius); color: var(--c-primary-ink); font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: 0.9em 1.9em; cursor: pointer; margin-block-start: 1.2rem; transition: filter 0.2s ease; inline-size: auto; } .comment-form input[type="submit"]:hover { filter: brightness(0.92); } /* -------------------------------------------------------------------------- 13. Pre-footer CTA & footer -------------------------------------------------------------------------- */ .cta { text-align: start; background: var(--c-void); border-block-start: 4px solid var(--c-beam); } .cta__title { max-width: 22ch; margin-inline: 0; margin-block-end: 1.2em; font-size: clamp(2rem, 4.5vw, 3.25rem); } .site-footer { border-block-start: 1px solid var(--c-line-strong); padding-block: 2.5rem; color: var(--c-text); font-size: 0.9375rem; background: var(--c-void); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .site-footer a { color: var(--c-text); } .site-footer a:hover { color: var(--c-beam); } .site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4rem; } .site-footer p { margin: 0; } .footer-readout { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; } /* Footer social links — same mono readout voice as the contact strip. */ .site-footer__social a { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); } .site-footer__social a:hover { color: var(--c-beam); } /* WhatsApp FAB — solid red square, white icon. */ .whatsapp-fab { position: fixed; inset-block-end: 1.4rem; inset-inline-end: 1.4rem; z-index: var(--z-nav); inline-size: 56px; block-size: 56px; display: grid; place-items: center; border-radius: var(--radius); background: var(--c-beam); border: 1px solid var(--c-beam); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: filter 0.2s ease, transform 0.2s var(--ease-out); } .whatsapp-fab:hover { filter: brightness(0.92); transform: translateY(-1px); } .whatsapp-fab svg { inline-size: 28px; block-size: 28px; fill: var(--c-primary-ink); } /* -------------------------------------------------------------------------- 14. Scroll reveals — subtle by default; expressive adds a red wipe -------------------------------------------------------------------------- */ /* Hiding is gated behind html.js (set by an inline script in ): if JavaScript ever fails to run, no content is ever hidden. */ .reveal { transition: opacity var(--enter-duration) var(--ease-out), transform var(--enter-duration) var(--ease-out); } html.js .reveal { opacity: 0; transform: translateY(16px); } html.js .reveal.is-visible { opacity: 1; transform: none; } /* Expressive: red horizontal wipe under the section readout. */ [data-motion="expressive"] .reveal .readout { position: relative; overflow: hidden; } [data-motion="expressive"] .reveal .readout::after { content: ""; position: absolute; inset-block-end: -4px; inset-inline-start: 0; inline-size: 0; block-size: 2px; background: var(--c-beam); } [data-motion="expressive"] .reveal.is-visible .readout::after { inline-size: 100%; transition: inline-size 0.75s var(--ease-out); } /* Staggered cascade for card grids inside a reveal. */ html.js .reveal .work-card, html.js .reveal .pillar { opacity: 0; } .reveal.is-visible .work-card, .reveal.is-visible .pillar { /* "both": hold the from-state through the stagger delay AND keep the to-state after the animation ends (base opacity is 0). */ animation: cascade-in var(--enter-duration) var(--ease-out) both; } .reveal.is-visible > .container > .work-grid > *:nth-child(1), .reveal.is-visible > .container > .explorer > *:nth-child(1) { animation-delay: calc(var(--enter-stagger) * 0); } .reveal.is-visible > .container > .work-grid > *:nth-child(2), .reveal.is-visible > .container > .explorer > *:nth-child(2) { animation-delay: calc(var(--enter-stagger) * 1); } .reveal.is-visible > .container > .work-grid > *:nth-child(3), .reveal.is-visible > .container > .explorer > *:nth-child(3) { animation-delay: calc(var(--enter-stagger) * 2); } .reveal.is-visible > .container > .work-grid > *:nth-child(4) { animation-delay: calc(var(--enter-stagger) * 3); } .reveal.is-visible > .container > .work-grid > *:nth-child(5) { animation-delay: calc(var(--enter-stagger) * 4); } .reveal.is-visible > .container > .work-grid > *:nth-child(6) { animation-delay: calc(var(--enter-stagger) * 5); } .reveal.is-visible > .container > .work-grid > *:nth-child(n + 7) { animation-delay: calc(var(--enter-stagger) * 6); } @keyframes cascade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { /* html.js prefix keeps these at/above the base hide rules' specificity. */ html.js .reveal, html.js .reveal .work-card, html.js .reveal .pillar { opacity: 1; transform: none; transition: none; animation: none; } .work-card, .work-card__media img, .journey__node::after, .site-overlay, .site-overlay__close, .btn, .viewer__swatch { transition: none; } } /* Motion=none takes precedence over @media reveal timing. */ html[data-motion="none"] .reveal { opacity: 1; transform: none; transition: none; } html[data-motion="none"] .reveal .work-card, html[data-motion="none"] .reveal .pillar { animation: none; opacity: 1; } /* Reveal animations disabled in the Customizer: show everything, always. Must stay last in this section — it ties the html.js rules on specificity and wins on source order. */ body[data-reveal="0"] .reveal, body[data-reveal="0"] .reveal .work-card, body[data-reveal="0"] .reveal .pillar { opacity: 1; transform: none; transition: none; animation: none; } /* -------------------------------------------------------------------------- 15. Accessibility & WordPress core classes -------------------------------------------------------------------------- */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .screen-reader-text:focus { clip-path: none; display: block; height: auto; width: auto; background: var(--c-text); color: var(--c-void); padding: 1em 1.5em; z-index: 100000; inset-inline-start: 8px; inset-block-start: 8px; } .skip-link { position: absolute; } .alignleft { float: left; margin-inline-end: 1.5rem; margin-block-end: 1rem; } .alignright { float: right; margin-inline-start: 1.5rem; margin-block-end: 1rem; } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; } .alignfull { inline-size: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text, .gallery-caption { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text); opacity: 0.6; margin-block-start: 0.5rem; } .sticky { display: block; } .bypostauthor { display: block; } .no-results { padding-block: 3rem; } .privacy-link { font-size: 0.8125rem; } /* Language switcher — small mono chip. */ .lang-switch { display: inline-flex; gap: 0.35rem; font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .lang-switch a, .lang-switch span { color: var(--c-text); padding: 0.4em 0.65em; border: 1px solid var(--c-line-strong); border-radius: 2px; } .lang-switch a:hover { border-color: var(--c-text); background: var(--c-text); color: var(--c-void); } .lang-switch .is-current { background: var(--c-text); color: var(--c-void); border-color: var(--c-text); }