/** * @file * Hold Gains Monitor — ultra-dark showcase. A photoreal monitor frame image * (local /sites/default/files/monitor.png) frames one admin-uploaded GIF (or a * legacy fallback video). * * Brand tokens: navy #1C3557 (brand token), green #3CB944 (kicker), * heading white, body muted #A9B2B8. Dark-component surfaces: surface #1A1F22, * card #232A2E, hairline rgba(255,255,255,0.08). Font: Manrope only. * * Contrast (WCAG AA, all ≥ 4.5:1 normal text): * green #3CB944 on navy #1C3557 ≈ 4.84:1 (kicker) * white on navy #1C3557 ≈ 12.4:1 (heading) * muted #A9B2B8 on navy ≈ 5.75:1 (description) * * Layout shift: the screen is a fixed aspect-ratio (16/9) box, so the video * (or poster) never reflows. Motion is limited to the muted video loop, which * is gated to desktop in JS and disabled under prefers-reduced-motion. */ @font-face { font-family: 'Manrope'; src: url('../../fonts/Manrope-VariableFont_wght.woff2?v=2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } /* ---------- Cinematic GLOBAL blackout (Apple / Quicko "page fades to black") ---- The darkening is a DEDICATED full-viewport sheet (.hgm-dark-overlay), injected ONCE onto by hold-gains-monitor.js — NOT a section-local ::before and NOT a body class. A contained ::before could only darken THIS section's own box; the Quicko effect needs the ENTIRE window (the sections above and below + page chrome) to go black, which only a body-level fixed layer can do. (This replaced the old contained `::before` backdrop, which is why the whole-page effect was never visible.) It is deliberately NOT clipped/contained; bleed is prevented purely by the JS enter/exit timing plus the asymmetric transition below. With JS off it stays opacity:0, so the section simply reads as its light base with dark-on-light copy (no-JS safe — the blackout is a pure enhancement). Layering: the sheet resolves against the ROOT at z-index 9990; the section content (.hgm-inner) is lifted to z-index 9995 so the monitor + head stay lit ABOVE the blackout. This REQUIRES .hold-gains-monitor to NOT create a stacking context (no isolation / no z-index) so .hgm-inner can escape to the root and out-paint the sheet — see the note on .hold-gains-monitor below. The section's own light base (which paints BELOW the sheet) is simply covered by the black while active, so there is no white seam even though the section is not self-dark. */ .hgm-dark-overlay { position: fixed; inset: 0; z-index: 9990; background-color: #0a0a0a; opacity: 0; pointer-events: none; /* never intercepts clicks, even when opaque */ /* Asymmetric timing: a transition reads its duration from the END state, so this bare 0s governs the fade-OUT (instant SNAP = no bleed into the white section below), while the 0.8s on .is-active governs only the smooth fade-IN. */ transition: opacity 0s; } .hgm-dark-overlay.is-active { opacity: 1; transition: opacity 0.8s ease; /* smooth Apple-style fade-IN only */ } .hold-gains-monitor { --hgm-navy: #1c3557; --hgm-green: #3cb944; --hgm-green-2: #1d9e75; --hgm-white: #ffffff; --hgm-muted: #a9b2b8; --hgm-surface: #1a1f22; --hgm-card: #232a2e; --hgm-hairline: rgba(255, 255, 255, 0.08); --hgm-screen-off: #0a0a0a; --hgm-radius-lg: 16px; --hgm-radius-sm: 12px; box-sizing: border-box; /* position:relative anchors the absolute head. NO isolation / NO z-index ON PURPOSE: a stacking context here would trap .hgm-inner (z:9995) BELOW the root-level .hgm-dark-overlay (z:9990) and hide the whole monitor behind the blackout. Left as auto, .hgm-inner resolves against the ROOT and paints ABOVE the sheet. (The old contained ::before wanted isolation; the global sheet needs the opposite — do not re-add isolation/z-index here.) */ position: relative; /* FULL-BLEED BREAKOUT: span the whole viewport regardless of any capped ancestor (region / block / field wrapper). 100vw + symmetric negative margins pull the section out to the screen edges. margin (NOT transform) is used ON PURPOSE — a transform would create a stacking context that traps .hgm-inner (z:9995) BELOW the body blackout sheet (z:9990), re-hiding the monitor behind the black. Margins create no stacking context, so the breakout AND the overlay layering both hold. .boxed_wrapper (width:100%) + overflow-x:clip below keep it scrollbar-safe. */ width: 100vw; max-width: 100vw; /* LIGHT base: the cinematic dark is the global sheet fading IN over the viewport. Starting light blends with the previous section and lets the overlaid copy read dark-on-light before the fade and light-on-dark after it. (Assumes the frame's surround/headroom is transparent so this base shows around and behind the monitor — which the reveal design requires.) */ background-color: #ffffff; color: var(--hgm-muted); font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; /* DESIGN-SYSTEM EXCEPTION: this full-bleed cinematic section keeps padding 0 (the frame artwork's own dark headroom supplies the vertical rhythm) — do NOT apply --et-section-pad-y here. Zero padding so the hardware image runs truly edge-to-edge. The horizontal margin is the breakout (calc(50% - 50vw) each side); overflow-x:clip kills any sub-pixel horizontal scroll from the full-bleed image WITHOUT clipping the vertical axis (plain overflow:hidden would clip the dark reveal above). */ padding: 0 !important; margin: 0 calc(50% - 50vw) !important; overflow-x: clip; } .hold-gains-monitor *, .hold-gains-monitor *::before, .hold-gains-monitor *::after { box-sizing: border-box; } .hgm-inner { position: relative; z-index: 9995; /* lifts the monitor + head ABOVE the global blackout sheet (z:9990) */ /* Uncapped so the frame below can go truly full-bleed to the viewport edges. A cap here (it was 1600px) would leave side bands of section background on wide screens — that is the seam being removed. The frame is capped by this parent, so the wrapper can only reach the edge if this does too. */ max-width: none; margin: 0 auto; } /* ---------- Text head: absolutely overlaid on the frame's top headroom -------- Anchored to the top of the section, centred, sitting ABOVE the monitor (z:20) and the dark ::before. The copy reads dark-on-light before the fade and light-on-dark after it. The !important flags match the requested spec and guard against generic theme/paragraph CSS. */ .hgm-head { position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100% !important; max-width: 900px !important; /* keep the copy column readable over the huge frame */ padding-top: 6vw !important; /* floats it over the frame's dark top headroom */ padding-inline: clamp(1rem, 4vw, 2rem); /* side gutters so copy never jams the edge */ z-index: 20 !important; text-align: center; } /* Mobile (locked responsive rule): a phone-width frame is too short to safely contain the overlaid copy, so unpin the head to normal flow ABOVE the monitor where it can never collide with the screen. */ @media (max-width: 991px) { .hgm-head { position: relative !important; top: auto !important; left: auto !important; transform: none !important; max-width: 760px; margin: 0 auto; padding: clamp(2rem, 9vw, 3rem) clamp(1rem, 5vw, 1.5rem) clamp(1.25rem, 4vw, 1.75rem); } } .hgm-kicker { margin: 0 0 0.75rem; /* 12px — 4px grid (was 0.85rem) */ /* Dark-on-light before the fade (navy on white ≈ 12.6:1); brand green after. */ color: var(--hgm-navy); font-size: var(--et-overline-size, 0.8125rem); font-weight: var(--et-overline-weight, 700); letter-spacing: 0.12em; /* extra-wide kicker tracking kept (small-type law) */ text-transform: uppercase; transition: color 0.8s ease; } .hold-gains-monitor.is-dark-mode .hgm-kicker { color: var(--hgm-green); /* #3CB944 on #0A0A0A ≈ 4.9:1 */ } .hgm-heading { margin: 0; /* Dark before the fade -> white after. Light-state colour = the unified heading ink so it matches every other section title. */ color: var(--et-heading-color, #0a0a0a); /* UNIFIED H2 TOKEN (design-system sweep): the old cinematic clamp(2.5rem -> 4.5rem) one-off is retired — this title must be visually identical to every other section h2. !important still guards against any global theme h2 sizing. */ font-family: 'Manrope', sans-serif !important; /* beats base h1-h6 Roboto */ font-size: var(--et-h2-size) !important; white-space: normal !important; max-width: 800px !important; /* line-length cap (kept; inert at this scale) */ margin-left: auto !important; margin-right: auto !important; font-weight: var(--et-h2-weight, 800); line-height: var(--et-h2-lh, 1.15); letter-spacing: var(--et-h2-track, -0.02em); transition: color 0.3s ease !important; } .hold-gains-monitor.is-dark-mode .hgm-heading { color: #ffffff !important; /* #FFF on #0A0A0A ≈ 19:1 */ } /* CMS-editable half-green heading: editors highlight a phrase in the WYSIWYG and mark it / (or a ) to paint it brand green — e.g. "Harvest Your Losses" — no CSS edits needed per copy change. font-weight:inherit keeps from doubling the already-800 heading weight; font-style:normal keeps from italicising it. */ .hgm-head h2 strong, .hgm-head h2 span, .hgm-head h2 em { color: #3cb944 !important; /* brand green; on #0A0A0A ≈ 4.9:1 */ font-weight: inherit; font-style: normal; } /* Description: block-centred AND text-centred. The house rule normally bans centre-aligned body copy, but this cinematic head is an explicit exception (user directive 2026-07-07: the two short lines must sit centred, line 2 mid-line-1). Kept as a short lead, not a running paragraph. */ .hgm-desc { max-width: 62ch; margin-top: 1rem; /* 16px — 4px grid */ margin-bottom: 0; margin-left: auto !important; /* block stays centred */ margin-right: auto !important; /* Readable dark body text on light base (#45464F on #FFFFFF ≈ 8.7:1); switches to pure white in .is-dark-mode against #0A0A0A. */ color: var(--et-body-color, #45464f); opacity: 1 !important; /* solid — no faded/translucent copy */ font-size: var(--et-lead-size, 1.125rem); line-height: var(--et-body-lh, 1.6); transition: color 0.4s ease; } .hgm-desc :where(p) { margin: 0 0 0.75rem; } /* Base theme element rule `p { color:#322f2f }` is overridden directly on the
so the lead copy renders high-contrast in both light and dark states. */ .hgm-desc p { color: var(--et-body-color, #45464f); opacity: 1 !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; transition: color 0.4s ease; } .hold-gains-monitor.is-dark-mode .hgm-desc, .hold-gains-monitor.is-dark-mode .hgm-desc p { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .hgm-desc :where(p):last-child { margin-bottom: 0; } .hgm-desc :where(a) { /* Navy link on the light rest state; brand green once the section goes dark. */ color: var(--hgm-navy); text-decoration: underline; text-underline-offset: 2px; transition: color 0.8s ease; } .hold-gains-monitor.is-dark-mode .hgm-desc :where(a) { color: var(--hgm-green); } /* ---------- Photoreal monitor (frame image + media screen) ---------- monitor-frame.png is OPAQUE (its screen is solid near-black, NOT a cut-out), so the media sits z-index 2 ON TOP of the frame (z-index 1), clipped to the screen opening by the four --screen-* vars (defaults measured from the asset, ~16:9). Nudge them if the GIF bleeds over the bezel or leaves a dark gap at an edge. */ .hgm-monitor { position: relative; z-index: 10; /* monitor sits ABOVE the dark ::before (z:1), below head (z:20) */ width: 100% !important; max-width: 100% !important; margin: 0 auto; } .hgm-frame-wrap { /* Offset parent for both the overlaid head (desktop) and the screen content. */ position: relative; /* OPTICAL CENTRING (bug fix 2026-07-07, third pass) — the residual "monitor looks shifted LEFT" is NOT container mis-centring: the min() margins below put the FRAME dead-centre at every width (scrollbar included). The bias is in the ARTWORK itself — the monitor is drawn ~0.6% LEFT of the frame's centre (measured on monitor-frame.png: bright monitor extent 28.67%–70.10% → midpoint 49.38%, not 50.00%). So a perfectly centred frame still reads left by ~0.6% of the frame width (~14–17px at desktop scale). We nudge the WHOLE wrapper RIGHT by that amount so the MONITOR lands on centre. - `left` on the already-`position:relative` wrapper moves the frame image AND its --screen-* GIF together (the screen % resolve against THIS box), so the GIF stays glued. - It creates NO stacking context (unlike a transform), so the z:9995 / z:9990 blackout layering is untouched. - min(1vw, 16px) scales the nudge with the frame and caps on a 4px-grid value; it is RESET to 0 on ≤991px (mobile frame is width:100%, where 0.6% is ~2px and a fixed nudge would over-correct). */ left: min(1vw, 16px); /* Guard (honours the "strip old transforms" intent): never allow an injected / inherited transform to offset the frame OR create a stacking context that re-traps it below the blackout sheet. There is none today; this keeps it so. */ transform: none !important; /* ZOOM-TO-FRAME: monitor-frame.png draws the monitor at only ~42% of the image width, centred inside large baked-in dark margins. At width:100% the monitor therefore looked tiny (~42% of viewport). We over-scale the frame beyond the viewport so the monitor visible width ≈ 42% × (frame vw); 160vw → ~68% of the viewport, matching the Quicko reference. The dark side margins overflow the 100vw section and are CLIPPED (by .hold-gains-monitor { overflow-x:clip } + .boxed_wrapper { overflow:hidden }) — seamless, since they are near-black on a black section, and the centre glow/vignette is preserved. The --screen-* vars below are % of THIS wrapper, so the GIF scales with the frame automatically. THIS 160vw IS THE SINGLE TUNING KNOB: larger = bigger monitor + taller section. */ display: block !important; /* stay block-level so the margin centring below governs it */ width: 160vw; max-width: 2800px; /* stop growing on ultra-wide displays */ /* CENTRE ON EVERY WIDTH — INCLUDING ULTRAWIDE (bug fix 2026-07-07). The frame's USED width is min(160vw, 2800px); its half is min(80vw, 1400px). Setting each margin to (50% of .hgm-inner) MINUS that half puts the frame's CENTRE on the section centre at ALL widths. The old `calc(50% - 80vw)` only held while 160vw stayed BELOW the 2800px cap; once a wide viewport (>~1750px) clamped the width to 2800px, the fixed -80vw margin kept growing and dragged the monitor LEFT (the reported ultrawide bug). Plain `margin:auto` can't fix it either — on normal desktops the frame is deliberately WIDER than the viewport (160vw), so auto margins collapse to 0 and it overflows left; we therefore track the clamp explicitly with min(). Kept transform-free ON PURPOSE (a transform would re-trap .hgm-inner below the z:9990 blackout sheet and hide the whole monitor). */ margin-left: calc(50% - min(80vw, 1400px)); margin-right: calc(50% - min(80vw, 1400px)); /* Screen opening for monitor.png, measured from the asset. Horizontal values pulled in ~1% per side (left 29->30, width 41->39, same centre) so the GIF no longer spills over the left/right bezels. Vertical left as-is. Nudge these if the media still bleeds over a bezel or leaves a dark edge gap. NOTE: do NOT use the 5.5/17.5/65/68.5 set — that is the Framer frame used by the unplaced monitor_display_section twin, not this monitor.png. */ /* Micro-adjusted a fraction of a percent INWARD on all four edges (top/left +0.2, width/height -0.4 = 0.2 per side) so the media tucks fully behind the physical bezel with no overhang. */ --screen-top: 34.2%; --screen-left: 30.2%; --screen-width: 38.6%; --screen-height: 46.6%; } .hgm-frame-img { display: block; width: 100%; height: auto; position: relative; z-index: 1; /* frame sits UNDER the media */ pointer-events: none; -webkit-user-select: none; user-select: none; } .hgm-screen-content { /* Aggressive enforcement so no Drupal field-formatter CSS can dislodge the media from the bezel. z-index 2 keeps it ON TOP of the opaque frame — putting it behind would let the opaque screen hide the GIF entirely. */ position: absolute !important; top: var(--screen-top) !important; left: var(--screen-left) !important; width: var(--screen-width) !important; height: var(--screen-height) !important; z-index: 2 !important; /* media sits OVER the opaque screen, never behind */ overflow: hidden !important; background: var(--hgm-screen-off); border-radius: 4px !important; /* slight inner curve matching the glass */ } .hgm-screen-content img, .hgm-screen-content video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center; display: block !important; border: 0; } /* ---------- Interactive states (links inside description) ---------- */ .hold-gains-monitor a:focus-visible { outline: 2px solid var(--hgm-green); outline-offset: 2px; border-radius: 2px; } /* ---------- Mobile: section already stacks (head above monitor in DOM) ---- */ @media (max-width: 991px) { .hgm-monitor { width: 100%; } /* No over-zoom on phones: a 160vw frame would blow the monitor up far too large on a narrow screen. Revert to a plain full-width frame (head is unpinned above it in normal flow at this breakpoint, so the dark headroom is not needed). */ .hgm-frame-wrap { width: 100%; max-width: 100%; margin: 0 auto; left: 0; /* drop the desktop optical nudge: at width:100% the 0.6% asset bias is ~2px */ } } /* ---------- Mobile phones (<768px): flex-ordered stack, no overlap ---------- Text is GUARANTEED above the monitor via flex `order` on .hgm-inner (the head and .hgm-monitor are its direct children — see the Twig). NOTE: no padding on .hgm-frame-wrap here EVER — the --screen-* percentages resolve against its padding box, so any padding unpins the media from the bezel (that was the mobile pop-out bug). 4px grid: 2rem=32px. */ @media (max-width: 767.98px) { /* Force a flex column on the parent container */ .hgm-inner, .monitor-container { display: flex !important; flex-direction: column !important; } /* Force the text to the top of the stack */ .hgm-head { position: relative !important; order: -1 !important; /* Guarantees text renders above the monitor */ top: 0 !important; padding-top: 2rem !important; padding-bottom: 2rem !important; z-index: 10 !important; } /* Allow the heading to wrap on mobile only. Size comes from the unified H2 token (already fluid) — the old per-breakpoint clamp is retired. */ .hgm-head h2 { white-space: normal !important; font-size: var(--et-h2-size) !important; } /* Reset the monitor wrapper */ .hgm-frame-wrap { position: relative !important; order: 2 !important; /* Pushes the monitor below the text */ width: 100% !important; margin-top: 0 !important; } } /* ---------- Reduced motion: kill any non-essential motion ---------- */ @media (prefers-reduced-motion: reduce) { .hold-gains-monitor, .hold-gains-monitor *, .hold-gains-monitor *::before, .hold-gains-monitor *::after, .hgm-dark-overlay, .hgm-dark-overlay.is-active { animation: none !important; transition: none !important; } }