/** * Homepage hero foundation -- Phase 2A.2. * * SINGLE-SLIDE ONLY. This file intentionally contains no carousel/indicator/ * autoplay CSS -- there is exactly one .tsc-hero__slide today. Per the * Phase 2A.1 architecture, a future carousel activates by JS adding an * `.is-carousel` class to `.tsc-hero` and stacking slides with position: * absolute + opacity crossfade; nothing here needs to change to support * that later -- it is additive, not a rewrite. * * Ownership boundary (Phase 2A.2 decision): * - Elementor owns: content, background-image assignment, container/ * element structure, and CSS-class assignment on each element. * - This file owns: hero height/min-height, responsive spacing, the * contrast overlay, hero typography, CTA presentation, text * positioning/max-width, and responsive behavior. * * Scoped to `body.home` (WordPress core's own front-page body class, * verified in typography.css) as a second, redundant guard on top of the * `.tsc-hero*` class names already being homepage-only -- matches the * scoping discipline established in typography.css/header.css. * * Breakpoints below (1024px, 767px) are the ACTUAL live Elementor * breakpoint values for this site, confirmed via * `window.elementorFrontendConfig.responsive.breakpoints` during the * Phase 2A live audit (tablet: max 1024, mobile: max 767) -- chosen * deliberately to align with Elementor's own responsive behavior rather * than introducing a third, independent breakpoint scheme. * * Enqueued after tsc-typography (see functions.php) so var(--tsc-font-*) * and every other var(--tsc-*) token is already available. */ /** * Hero shell: height, header clearance, overlay. * * min-height uses clamp() per breakpoint rather than a flat 100vh -- * live-verified during the Phase 2A audit that the previous hero collapsed * to a content-driven 550px at 1024px (its 55vh min-height, 422px, was * shorter than the actual content), and that raw 100vh on mobile is prone * to jarring resize as browser chrome shows/hides. Each clamp() floor is * set above what the content stack actually needs at that breakpoint, and * each ceiling prevents the hero from growing absurdly tall on very large * viewports. */ body.home .tsc-hero { position: relative; display: flex; align-items: center; min-height: clamp(640px, 78vh, 860px); overflow: hidden; isolation: isolate; /* new stacking context, keeps ::before's z-index local to the hero */ } @media (max-width: 1024px) { body.home .tsc-hero { min-height: clamp(560px, 72vh, 720px); } } @media (max-width: 767px) { body.home .tsc-hero { min-height: clamp(480px, 82vh, 620px); } } /* * Contrast overlay via pseudo-element (no extra Elementor element needed). * The transparent Astra header has no background of its own, so hero text * currently depends entirely on the photo's own tones for readability -- * live-verified in the Phase 2A audit: no overlay/scrim existed anywhere * before this. A left-anchored gradient darkens the side the text column * sits on (Elementor's own container padding keeps that column left- * aligned) while leaving the photo's right side clear. color-mix() derives * the gradient directly from --tsc-bg so it stays in sync with the token * rather than duplicating its hex value. */ body.home .tsc-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, color-mix(in srgb, var(--tsc-bg) 55%, transparent) 0%, color-mix(in srgb, var(--tsc-bg) 22%, transparent) 40%, color-mix(in srgb, var(--tsc-bg) 0%, transparent) 65% ); } /* Slide + content sit above the overlay. */ body.home .tsc-hero__slide { position: relative; z-index: 2; width: 100%; } /* * Content column: controlled width (not intrinsic shrink-to-fit -- the old * hero's ~670px H1 box was just the text's natural width at 65px Oswald, * not a deliberate constraint) and top clearance for the transparent * header. Header heights confirmed live: ~90px desktop, ~87px mobile, * absolutely positioned over the hero's own top edge -- clamp() floor * (140px) sits comfortably above both, independent of viewport height. */ body.home .tsc-hero__content { position: relative; z-index: 2; padding-top: clamp(140px, 20vh, 200px); padding-left: var(--tsc-space-2); } @media (max-width: 767px) { body.home .tsc-hero__content { padding-top: clamp(120px, 22vh, 170px); } } /* ---- Typography ---- */ /* * .tsc-hero__eyebrow/__statement/__supporting land on Elementor's own * heading-widget wrapper
, not on the rendered heading itself -- * live-verified: .tsc-hero__X > .elementor-widget-container > * h1/h6/h4.elementor-heading-title. Same class as the CTA fix. `margin` * stays on the wrapper (it's the flex item controlling the gap between * stacked widgets, a layout property, not a text style); every text * property below targets .elementor-heading-title directly, since none of * them ever reached the actual text before -- Elementor's own global * heading typography (Oswald, inline in ) was winning by default, * confirmed live via computed style + matched-rule tracing. */ body.home .tsc-hero__eyebrow { margin: 0 0 var(--tsc-space-3); } body.home .tsc-hero__eyebrow .elementor-heading-title { font-family: var(--tsc-font-body); font-size: var(--tsc-fs-caption); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tsc-text-muted); } /* * Inter Display for the major statement -- per the approved Phase 2A.1 * direction (Oswald's condensed-industrial voice doesn't match the Inter * system already validated in the header). clamp() replaces the old * fixed-px + per-breakpoint-override approach entirely: it interpolates * continuously with viewport width, which is what actually fixes the * live-verified tablet bug (H1 stuck at 65px at 1024px, wrapping to 2 * lines and stretching the hero past its own min-height) -- no separate * Elementor tablet font-size step is needed alongside this. * * text-transform: uppercase is set explicitly (not inherited/assumed) so * the visual result matches the current, unchanged copy exactly regardless * of the literal case of the source text in Elementor. */ body.home .tsc-hero__statement { margin: 0 0 var(--tsc-space-4); } body.home .tsc-hero__statement .elementor-heading-title { font-family: var(--tsc-font-display); font-size: clamp(2rem, 4.5vw, 4.25rem); font-weight: 700; line-height: var(--tsc-lh-tight); letter-spacing: normal; text-transform: uppercase; color: var(--tsc-text); } /* * Desktop deliberate two-line break -- Phase 2B.1B correction (revised). * * REVISION: the prior version of this rule forced a single line via * `width: max-content`. Live-verified problem with that result: at full * single-line width (~770px) the statement extends far enough right to * cross the photograph's brighter center/monitor area, losing contrast -- * confirmed by inspecting the hero overlay's own gradient (.tsc-hero::before * above): transparent by 65% of the hero's width (x=936 at 1440px), and a * ~770px-wide statement starting at x=58 runs to x=828, deep into the * fading part of the gradient. * * A literal
in the Elementor heading's text would be the cleaner fix, * but this project has no wp-admin/Elementor-editor access (public * frontend only, a standing constraint for the whole project) to add one * safely -- so per the fallback direction, this is a tightly-scoped width * constraint instead, chosen from live-measured evidence, not a guess: * * Live text-per-line extraction (character-by-character Range walk, * not just line count) on the actual live element found the break * "Analog Tone." / "Pure ITB." holds stably from ~465px to ~765px wide * -- below ~460px it collapses to 3 lines ("Analog" / "Tone. Pure" / * "ITB."), above ~770px it snaps back to one line. 600px sits in the * middle of that ~300px-wide stable range (135px+ margin on either * side), robust against minor sub-pixel/font-rendering variance -- * deliberately not chosen at either edge. * * Applied to the

itself, not its wrapper: live-verified in the prior * correction that the wrapper's own width has zero effect on the h1's * wrapping -- confirmed still true here. * * Scoped to desktop only (Elementor's real tablet-max breakpoint is * 1024px, confirmed via elementorFrontendConfig) so 1024px keeps its * already-accepted natural wrapping and 400px is untouched. Does not * touch the wrapper's margin, the hero's centering, the overlay itself, * or any other element -- only this one property on this one element. */ @media (min-width: 1025px) { body.home .tsc-hero__statement .elementor-heading-title { width: 600px; } } body.home .tsc-hero__supporting { margin: 0 0 var(--tsc-space-6); } body.home .tsc-hero__supporting .elementor-heading-title { font-family: var(--tsc-font-body); font-size: clamp(0.9375rem, 1.4vw, 1.125rem); font-weight: 400; line-height: var(--tsc-lh-body); letter-spacing: normal; text-transform: uppercase; color: var(--tsc-text); } /* ---- CTA ---- */ /* * .tsc-hero__cta lands on Elementor's own widget wrapper
, not on the * rendered itself -- live-verified: .tsc-hero__cta > * .elementor-widget-container > .elementor-button-wrapper > * a.elementor-button. It is left bare here (no rule of its own at all): a * positioning hook only, so no background/padding renders as a second, * larger panel behind the real button. Elementor's own width setting on * the widget wrapper is left untouched -- not fought with a competing * width rule here. * * Every visual rule below targets .elementor-button directly. Flat, * near-square, per the approved direction: keep the current button's shape * language (zero border-radius, solid fill) -- it already matches the * "engineering confidence, not SaaS" target -- and only change family/ * color source to Inter + tokens. Rest state mirrors the existing black- * on-white look via --tsc-bg/--tsc-text; hover/focus inverts to the accent * pairing already established for interactive states in header.css. */ body.home .tsc-hero__cta .elementor-button { display: inline-block; padding: var(--tsc-space-4) var(--tsc-space-5); border: 0; border-radius: var(--tsc-radius-sm); font-family: var(--tsc-font-body); font-size: var(--tsc-fs-body); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--tsc-text); background-color: var(--tsc-bg); } @media (prefers-reduced-motion: no-preference) { body.home .tsc-hero__cta .elementor-button { transition: background-color 160ms ease, color 160ms ease; } } body.home .tsc-hero__cta .elementor-button:hover, body.home .tsc-hero__cta .elementor-button:focus-visible { background-color: var(--tsc-accent); color: var(--tsc-text-on-accent); } body.home .tsc-hero__cta .elementor-button:focus-visible { outline: 2px solid var(--tsc-accent); outline-offset: 2px; }