/* ========================================================================== SWISS MARKETER — HIGH-END 2026 (assets/css/highend-2026.css) -------------------------------------------------------------------------- "Swiss precision engineering on an Apple keynote stage." ADDITIVE, NON-DESTRUCTIVE layer. Loads LAST so it can refine — never break — the existing rules in styles.css / viz.css / modernize-2026.css / etc. Everything is GPU-friendly and gated behind prefers-reduced-motion. It ALIASES the existing brand tokens (--viz-red / --swiss-red / --ink / --paper / --line). It does NOT invent a new palette. Sections: 0. Design tokens (aliases + helpers) 1. 3D display headings .hd-3d / .hd-3d--sm (depth + shimmer + glow) 2. Depth & shadow utilities (cards / buttons / red-tinted CTA) 3. Glass header refinement (existing .navbar--enterprise markup) 4. Premium footer refinement (existing .ftr markup) 5. Mobile sticky CTA enhancement (existing .sticky-mobile-cta markup) 6. Motion — reveal (hooks the EXISTING .reveal-up→.in-view observer) + micro-hovers 7. Section rhythm + fluid type helpers 8. Global reduced-motion guard ========================================================================== */ /* ========================================================================== 0. DESIGN TOKENS — alias existing brand tokens, add high-end helpers ========================================================================== */ :root { /* --- Brand aliases (fall back so this file is self-sufficient if loaded alone) --- */ --hd-red: var(--viz-red, var(--swiss-red, #DC0018)); --hd-red-deep: var(--swiss-red-dark, #B30014); --hd-ink: var(--ink, #0A0A0A); --hd-ink-soft: var(--ink-2, #1A1A1A); --hd-paper: var(--paper, #FAFAF7); --hd-line: var(--line, #D9D9D3); /* --- 3D heading helpers --- */ --hd-track: -0.035em; /* tight tracking */ --hd-lh: 1.04; /* line-height */ --hd-shimmer-dur: 7s; /* slow light sweep */ /* Metallic ink sweep — dark, confident, with a sliver of light passing through. */ --hd-metal: linear-gradient( 100deg, #050505 0%, #161616 22%, #2c2c2c 40%, #6b6b6b 50%, /* the catch-light */ #2c2c2c 60%, #161616 78%, #050505 100% ); /* --- Layered shadow tokens (ambient + key + tight contact) --- */ --shadow-1: /* resting card */ 0 1px 1px rgba(10, 10, 10, 0.04), 0 4px 10px rgba(10, 10, 10, 0.05), 0 18px 40px rgba(10, 10, 10, 0.06); --shadow-2: /* raised / hover */ 0 1px 1px rgba(10, 10, 10, 0.05), 0 8px 20px rgba(10, 10, 10, 0.07), 0 28px 64px rgba(10, 10, 10, 0.10); --shadow-3: /* floating / modal */ 0 2px 4px rgba(10, 10, 10, 0.06), 0 16px 36px rgba(10, 10, 10, 0.10), 0 40px 90px rgba(10, 10, 10, 0.16); --shadow-cta: /* primary, red-tinted */ 0 1px 1px rgba(10, 10, 10, 0.18), 0 6px 16px rgba(220, 0, 24, 0.28), 0 16px 36px rgba(220, 0, 24, 0.22); --shadow-cta-hover: 0 2px 3px rgba(10, 10, 10, 0.20), 0 10px 24px rgba(220, 0, 24, 0.38), 0 22px 50px rgba(220, 0, 24, 0.28); /* --- Easing --- */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* signature reveal/hover ease */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* snappier exit */ /* --- Section rhythm + fluid helpers --- */ --hd-section-y: clamp(64px, 9vw, 140px); --hd-gutter: clamp(20px, 5vw, 48px); } /* ========================================================================== 1. 3D DISPLAY HEADINGS — .hd-3d (depth + metallic shimmer + red ambient glow) -------------------------------------------------------------------------- Usage: add class="hd-3d" to a hero

. For a smaller secondary display heading use class="hd-3d hd-3d--sm". Pair with .reveal-up to animate in via the EXISTING IntersectionObserver (it toggles .in-view). Layering strategy (so depth survives even without gradient-text support): - The element itself carries the multi-layer text-shadow EXTRUSION + glow. - A ::before pseudo paints the metallic gradient clipped to the text and runs the shimmer sweep. If background-clip:text is unsupported the ::before simply doesn't show and the solid ink + extrusion remain. ========================================================================== */ .hd-3d { position: relative; display: inline-block; font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif); font-weight: 800; letter-spacing: var(--hd-track); line-height: var(--hd-lh); font-size: clamp(2.6rem, 7vw, 5.6rem); /* Inherit the section's own heading colour → legible on BOTH light and dark (.stage--ink) sections. No forced ink, no transparent fill. */ /* Restrained, premium depth — subtle dimensionality, fully legible (Apple-grade). NOT a heavy extrusion: two soft layers read as quiet depth, not a gimmick. */ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.12); -webkit-text-size-adjust: 100%; isolation: isolate; } /* Red ambient glow behind the headline — radial, blurred, low opacity. */ .hd-3d::after { content: ""; position: absolute; z-index: -2; left: 50%; top: 52%; width: 116%; height: 150%; transform: translate(-50%, -50%); background: radial-gradient( closest-side, rgba(220, 0, 24, 0.08) 0%, rgba(220, 0, 24, 0.03) 42%, rgba(220, 0, 24, 0) 72% ); pointer-events: none; filter: blur(8px); } /* Metallic shimmer overlay — gradient text clipped to the glyphs, sweeping. It sits ON TOP of the extruded base text (z-index:2 within this isolated stacking context) so the moving catch-light actually reads on the glyph FACE — not hidden behind opaque ink. The base text keeps the multi-layer text-shadow extrusion, so the carved depth shows through the metal face. When the markup has no data-text the ::before is empty (renders nothing) and the solid-ink base text remains fully visible — graceful fallback. */ /* Shimmer overlay REMOVED. The attr(data-text) duplicate was absolutely positioned and could not track multi-line headings with
+ inline s (serif / accent) → the metal face wrapped differently and produced doubled, garbled text. A robust, legible, premium look lives on the element itself; no fragile text-clone overlay. */ .hd-3d::before { content: none; } /* If the heading has NO data-text attribute the ::before renders empty — that's fine, the extruded base text still carries the design. The shimmer simply requires the markup to mirror the text into data-text. */ .hd-3d--sm { font-weight: 800; font-size: clamp(1.9rem, 4.2vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.06; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.09), 0 3px 12px rgba(0, 0, 0, 0.11); } .hd-3d--sm::after { height: 140%; filter: blur(4px); } /* A red signal accent you can wrap around ONE word inside a .hd-3d. It must out-rank the metallic ::before face (z-index:2) so the single red signal always reads. The accent gets its own raised stacking context and a faint red bloom so it glows rather than going flat under the metal sweep. IMPORTANT for the Apply phase: the red word should be OMITTED from data-text (or the metal will also paint over it) — but even if it's left in, this rule keeps the live red on top. */ .hd-3d .hd-accent, .hd-accent { position: relative; z-index: 3; color: var(--hd-red); -webkit-text-fill-color: var(--hd-red); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.10), 0 3px 12px rgba(122, 0, 14, 0.18); } @keyframes hd-shimmer { 0% { background-position: 120% 0; } 50% { background-position: -20% 0; } 100% { background-position: 120% 0; } } /* ========================================================================== 2. DEPTH & SHADOW UTILITIES ========================================================================== */ .hd-card, .hd-elevate { box-shadow: var(--shadow-1); transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease); will-change: transform; } .hd-card:hover, .hd-elevate:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .hd-elevate--float { box-shadow: var(--shadow-3); } /* Shadow tokens as opt-in utilities (no transform). */ .hd-shadow-1 { box-shadow: var(--shadow-1); } .hd-shadow-2 { box-shadow: var(--shadow-2); } .hd-shadow-3 { box-shadow: var(--shadow-3); } /* Primary CTA — layered, RED-TINTED shadow + magnetic lift. Opt-in via .hd-cta so it never hijacks every existing button. */ .hd-cta { position: relative; box-shadow: var(--shadow-cta); transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s var(--ease); will-change: transform; } .hd-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); filter: saturate(1.04); } .hd-cta:active { transform: translateY(0); } /* Hairline that catches light — a subtle top edge highlight for dark surfaces. */ .hd-edge-light { position: relative; } .hd-edge-light::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 50%, transparent); pointer-events: none; } /* ========================================================================== 3. GLASS HEADER — refine the EXISTING .navbar.navbar--enterprise markup -------------------------------------------------------------------------- viz.js toggles `.is-scrolled` at scrollY>8. We deepen the glass, add a hairline, and a true "condense on scroll" feel (shorter bar + tighter type). We only enhance — class names are untouched. ========================================================================== */ .navbar.navbar--enterprise { background: rgba(250, 250, 247, 0.72); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid rgba(10, 10, 10, 0.06); transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), height 0.3s var(--ease); } .navbar.navbar--enterprise .navbar__inner { transition: height 0.3s var(--ease); } .navbar.navbar--enterprise.is-scrolled { background: rgba(250, 250, 247, 0.88); border-bottom-color: rgba(10, 10, 10, 0.09); box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04), 0 10px 30px rgba(10, 10, 10, 0.06); } /* Condense the bar once scrolled (premium "settle" feel). */ .navbar.navbar--enterprise.is-scrolled .navbar__inner { height: 60px; } /* Brand mark gets the layered-red signal shadow. */ .navbar.navbar--enterprise .navbar__mark { box-shadow: 0 1px 2px rgba(220, 0, 24, 0.30), 0 4px 10px rgba(220, 0, 24, 0.22); } /* Primary CTA pill in the nav — red-tinted depth + magnetic micro-hover. */ .navbar.navbar--enterprise .navbar__cta { box-shadow: var(--shadow-cta); transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease), background 0.26s var(--ease); } .navbar.navbar--enterprise .navbar__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-cta-hover); } /* Mega-dropdown panel — deepen to a true floating layer. */ .navbar.navbar--enterprise .navbar__mega { box-shadow: var(--shadow-3); } /* ========================================================================== 4. PREMIUM FOOTER — refine the EXISTING .ftr markup (dark, structured) -------------------------------------------------------------------------- The footer is already dark (--ink). We add a hairline top accent that catches light, refine dividers, give the red mark presence, and make the columns breathe + stack cleanly with tappable targets on mobile. ========================================================================== */ .ftr { position: relative; background: radial-gradient(120% 80% at 50% -10%, rgba(220, 0, 24, 0.07), transparent 60%), var(--hd-ink); } /* Light-catching hairline along the very top edge. */ .ftr::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 50%, transparent); pointer-events: none; } .ftr__brand .navbar__mark { box-shadow: 0 4px 14px rgba(220, 0, 24, 0.40); } /* Crisper column heads + refined link transitions. */ .ftr__col h4 { color: rgba(255, 255, 255, 0.55); } .ftr__col a, .ftr__bot-cta, .ftr__mail { transition: color 0.2s var(--ease), transform 0.2s var(--ease); } .ftr__col a:hover { transform: translateX(2px); } /* Bottom-row red mark — a small confident signal dot before the copyright. */ .ftr__bot { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 4px; } /* Mobile: stack + generous tap targets, keep hairline dividers between groups. */ @media (max-width: 760px) { .ftr__col a { padding: 9px 0; font-size: 14px; } .ftr__col { padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ftr__cols > .ftr__col:last-child { border-bottom: 0; } .ftr__bot { gap: 6px 10px; } } /* ========================================================================== 5. MOBILE STICKY CTA — enhance the EXISTING .sticky-mobile-cta markup -------------------------------------------------------------------------- Already defined in modernize-2026.css; here we make it glassier, safe-area aware, ensure 44px+ targets, add the red-tinted CTA depth, and add an elegant hide-on-scroll-down hook (.is-hidden — set by main.js). ========================================================================== */ .sticky-mobile-cta { /* glassier surface (sits on top of modernize-2026's opaque fallback) */ background: rgba(250, 250, 247, 0.86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid rgba(10, 10, 10, 0.07); box-shadow: 0 -10px 30px rgba(10, 10, 10, 0.10); /* safe-area aware bottom padding (env() respected) */ padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); /* hide-on-scroll-down transition */ transform: translateY(0); transition: transform 0.34s var(--ease-out); } .sticky-mobile-cta.is-hidden { transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))); } /* Guarantee 44px+ touch targets. */ .sticky-mobile-cta__btn { min-height: 46px; } .sticky-mobile-cta__btn--wa, .sticky-mobile-cta__btn--chat { min-width: 46px; } /* Primary pill = red-tinted layered depth (keeps existing dark fill). */ .sticky-mobile-cta__btn--primary { box-shadow: 0 4px 14px rgba(10, 10, 10, 0.28), 0 2px 6px rgba(220, 0, 24, 0.18); } .sticky-mobile-cta__btn--chat { box-shadow: 0 4px 12px rgba(220, 0, 24, 0.30), 0 1px 3px rgba(220, 0, 24, 0.22); } /* ========================================================================== 6. MOTION — reveal + micro-hovers -------------------------------------------------------------------------- We DO NOT add a competing observer. main.js already: - initReveal() toggles .reveal -> .in - initScrollReveal() toggles .reveal-up / [data-reveal] -> .in-view We define the visual states for BOTH mechanisms so any existing or new element animates in. Staggering via inline --d (e.g. style="--d:.12s"). ========================================================================== */ .reveal-up, [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; } .reveal-up.in-view, [data-reveal].in-view { opacity: 1; transform: none; } /* Also drive the legacy .reveal -> .in pair so both observers are honored. */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } /* Stagger helpers — apply to siblings for an 80–150ms cascade. */ .hd-stagger > * { transition-delay: 0s; } .hd-stagger > *:nth-child(1) { --d: 0.00s; } .hd-stagger > *:nth-child(2) { --d: 0.09s; } .hd-stagger > *:nth-child(3) { --d: 0.18s; } .hd-stagger > *:nth-child(4) { --d: 0.27s; } .hd-stagger > *:nth-child(5) { --d: 0.36s; } .hd-stagger > *:nth-child(6) { --d: 0.45s; } .hd-stagger > *:nth-child(7) { --d: 0.54s; } .hd-stagger > *:nth-child(8) { --d: 0.63s; } /* Magnetic / scale micro-hover (opt-in). */ .hd-hover { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); will-change: transform; } .hd-hover:hover { transform: scale(1.02); } /* ========================================================================== 7. SECTION RHYTHM + FLUID TYPE HELPERS (opt-in — never restructures pages) ========================================================================== */ .hd-section { padding-block: var(--hd-section-y); } .hd-container { width: min(1200px, 100% - 2 * var(--hd-gutter)); margin-inline: auto; } .hd-display { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; letter-spacing: -0.032em; font-weight: 800; } .hd-title { font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.12; letter-spacing: -0.026em; font-weight: 700; } .hd-lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--ink-2, #1A1A1A); } .hd-eyebrow { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hd-red); } /* ========================================================================== 8. GLOBAL REDUCED-MOTION GUARD -------------------------------------------------------------------------- Kill the shimmer and all transforms/animations introduced here, but KEEP the carved 3D depth (text-shadow extrusion + red glow stay). ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hd-3d::before { animation: none; /* freeze the sweep at the catch-light so a hint of metal remains, no motion */ background-position: 50% 0; } .reveal-up, [data-reveal], .reveal, .hd-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } .hd-card, .hd-elevate, .hd-cta, .hd-hover, .navbar.navbar--enterprise .navbar__cta, .sticky-mobile-cta, .ftr__col a { transition: none !important; } .hd-card:hover, .hd-elevate:hover, .hd-cta:hover, .hd-hover:hover, .navbar.navbar--enterprise .navbar__cta:hover, .ftr__col a:hover { transform: none !important; } .sticky-mobile-cta.is-hidden { transform: none !important; } }