/* ============================================================ PHI-NEXT VISUAL ENHANCEMENTS — enhancements.css Contextual photography · Visual effects · Micro-interactions All motion respects prefers-reduced-motion. Load order: after responsive.css in every . ============================================================ */ /* ─── Hero: background image slot ─────────────────────────── Right 2/3 of the viewport carries the image. Left edge fades to dark so headline remains legible. ──────────────────────────────────────────────────────────── */ .hero-bg { position: absolute; right: 0; top: 0; width: 68%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.05) brightness(0.88); display: block; will-change: transform; /* GPU layer for parallax */ } /* Brand duotone — navy/gold gradient over image */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(26, 23, 16, 0.82) 0%, rgba(26, 39, 68, 0.42) 52%, rgba(201, 168, 76, 0.10) 100% ); pointer-events: none; } /* Left fade — ensures headline is always readable */ .hero-bg::before { content: ''; position: absolute; left: 0; top: 0; width: 45%; height: 100%; background: linear-gradient(to right, var(--color-bg-primary) 0%, transparent 100%); z-index: 1; pointer-events: none; } /* Gradient placeholder when no real image is loaded */ .hero-bg--placeholder { background: linear-gradient(135deg, #0d1117 0%, #0f1f35 40%, #1a2744 80%, #1a1710 100%); } /* ─── Hero: content z-index above image ──────────────────── */ .hero .container { position: relative; z-index: 1; } /* ─── Hero: ambient gradient mesh ─────────────────────────── Slow-moving soft blobs add atmospheric depth. Opacity kept at 8–12% so it reads as atmosphere only. ──────────────────────────────────────────────────────────── */ .hero-mesh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .hero-mesh-orb { position: absolute; border-radius: 50%; filter: blur(90px); } .hero-mesh-orb-gold { width: 580px; height: 580px; background: radial-gradient(circle, rgba(201, 168, 76, 0.18) 0%, transparent 70%); right: 18%; top: 15%; animation: mesh-drift-a 38s ease-in-out infinite alternate; } .hero-mesh-orb-navy { width: 520px; height: 520px; background: radial-gradient(circle, rgba(26, 39, 68, 0.55) 0%, transparent 70%); right: 45%; bottom: 5%; animation: mesh-drift-b 44s ease-in-out infinite alternate; } @keyframes mesh-drift-a { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(55px, -35px) scale(1.08); } } @keyframes mesh-drift-b { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-45px, 28px) scale(0.93); } } /* ─── Scroll-to-explore indicator (homepage hero only) ────── */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 2; opacity: 1; transition: opacity 0.5s ease; pointer-events: none; } .scroll-indicator.hidden { opacity: 0; } .scroll-indicator-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } .scroll-indicator-line { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--color-gold-primary), transparent); animation: scroll-pulse 2.2s ease-in-out infinite; } @keyframes scroll-pulse { 0%, 100% { opacity: 1; transform: scaleY(1); } 50% { opacity: 0.3; transform: scaleY(0.65); } } /* ─── Service Cards: image header ─────────────────────────── Image slot bleeds to card edges via negative margins. Requires overflow: hidden on .service-card (below). ──────────────────────────────────────────────────────────── */ .service-card { overflow: hidden; /* contains image zoom + border animation */ } .service-card-image { height: 156px; flex-shrink: 0; position: relative; /* Negate card's left/right/top padding to bleed edge-to-edge */ margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md); width: calc(100% + 2 * var(--space-md)); overflow: hidden; } .service-card-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.05) brightness(0.85); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); display: block; } .service-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 145deg, rgba(26, 23, 16, 0.72) 0%, rgba(26, 39, 68, 0.32) 60%, rgba(201, 168, 76, 0.06) 100% ); pointer-events: none; } .service-card:hover .service-card-image img { transform: scale(1.05); } /* CSS-gradient image placeholders (one per service) */ .sci--executive { background: linear-gradient(155deg, #0e1520 0%, #1a2744 55%, #1a1710 100%); } .sci--planb { background: linear-gradient(155deg, #0d0e18 0%, #12182c 45%, #1a1710 100%); } .sci--compaas { background: linear-gradient(155deg, #0a141e 0%, #0d1f30 50%, #1a2744 100%); } .sci--delphi { background: linear-gradient(155deg, #120918 0%, #190f28 50%, #0e1535 100%); } /* Subtle ambient glow on each placeholder */ .sci--executive::before, .sci--planb::before, .sci--compaas::before, .sci--delphi::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 35% 55%, rgba(201, 168, 76, 0.07) 0%, transparent 65%); pointer-events: none; } /* ─── Service Card: animated top border on hover ─────────── */ .service-card::before { content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--color-gold-primary); transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2; } .service-card:hover::before { width: 100%; } /* ─── Service Pages: hero banner image ───────────────────── */ .service-hero { overflow: hidden; /* contain image */ } .service-hero-image { position: absolute; inset: 0; pointer-events: none; } .service-hero-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(1.05) brightness(0.65); display: block; } .service-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 145deg, rgba(26, 23, 16, 0.92) 0%, rgba(26, 39, 68, 0.55) 55%, rgba(201, 168, 76, 0.06) 100% ); } /* CSS-gradient placeholders for service hero images */ .shi--planb { background: linear-gradient(145deg, #080c14 0%, #0d1525 35%, #1a2744 70%, #1a1710 100%); } .shi--compaas { background: linear-gradient(145deg, #06101a 0%, #0a1828 40%, #122038 70%, #1a2744 100%); } .shi--delphi { background: linear-gradient(145deg, #0e0616 0%, #160d22 40%, #0f1535 75%, #1a1710 100%); } .shi--executive { background: linear-gradient(145deg, #0a0e12 0%, #0f1822 40%, #162030 75%, #1a2744 100%); } /* Ambient gold glow */ .shi--planb::before, .shi--compaas::before, .shi--delphi::before, .shi--executive::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 55%); } /* Service hero content must sit above the image */ .service-hero .container { position: relative; z-index: 1; } /* ─── Button: left-to-right wipe hover effect ────────────── */ .btn-primary { overflow: hidden; isolation: isolate; /* stacking context — keeps ::before within button */ } .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--color-gold-primary); transform: translateX(-101%); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; pointer-events: none; } .btn-primary:hover::before, .btn-primary:focus-visible::before { transform: translateX(0); } /* Prevent the direct background switch from main.css from masking the wipe */ .btn-primary:hover, .btn-primary:focus-visible { background: transparent; } /* Press feedback */ .btn-primary:active { transform: scale(0.97); transition: transform 0.08s ease; } /* External link icon rotation on hover */ .contact-info-icon a:hover, .footer-contact-item a:hover svg, a[href^="https://www.linkedin"]:hover svg { transform: rotate(15deg); transition: transform var(--transition-base); } /* ─── Blockquote: elevated treatment ─────────────────────── */ .blockquote-gold { padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 2.25rem); border-left-width: 4px; font-size: clamp(1.175rem, 2.2vw, 1.45rem); } .blockquote-gold::before { content: '\201C'; font-size: 5.5rem; color: var(--color-gold-primary); opacity: 0.45; left: -0.1rem; top: -1rem; line-height: 1; } /* ─── Section dividers: gradient fade ───────────────────── */ .section-divider { opacity: 1; background: linear-gradient( to right, transparent 0%, rgba(201, 168, 76, 0.38) 18%, rgba(201, 168, 76, 0.38) 82%, transparent 100% ); } /* ─── Custom cursor accent (desktop only) ────────────────── */ .cursor-ring { position: fixed; top: 0; left: 0; width: 24px; height: 24px; border: 1.5px solid rgba(201, 168, 76, 0.7); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease, border-color 0.2s ease; will-change: left, top; } .cursor-ring.visible { opacity: 1; } .cursor-ring.hovered { width: 38px; height: 38px; border-color: rgba(201, 168, 76, 0.5); } /* ─── Floating contact CTA ───────────────────────────────── */ .floating-cta { position: fixed; bottom: 2rem; right: 2rem; width: 52px; height: 52px; border-radius: 50%; background: var(--color-gold-primary); color: var(--color-text-dark); display: flex; align-items: center; justify-content: center; z-index: 850; box-shadow: 0 4px 20px rgba(201, 168, 76, 0.30), 0 1px 4px rgba(0,0,0,0.4); opacity: 0; transform: translateY(10px) scale(0.92); transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease, box-shadow 0.2s ease; pointer-events: none; cursor: pointer; border: none; text-decoration: none; flex-shrink: 0; } .floating-cta.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .floating-cta:hover { background: var(--color-gold-light); box-shadow: 0 6px 28px rgba(201, 168, 76, 0.48), 0 1px 6px rgba(0,0,0,0.3); transform: translateY(-2px) scale(1); } .floating-cta:active { transform: scale(0.95); } .floating-cta svg { width: 20px; height: 20px; flex-shrink: 0; } /* ─── Back to top button ─────────────────────────────────── */ .back-to-top { position: fixed; bottom: 6rem; right: 2rem; width: 52px; height: 52px; border-radius: 50%; background: var(--color-bg-secondary); border: 1.5px solid rgba(201, 168, 76, 0.35); color: var(--color-gold-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(12px) scale(0.92); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); z-index: 900; flex-shrink: 0; } .back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .back-to-top:hover { background: rgba(201, 168, 76, 0.12); box-shadow: 0 6px 28px rgba(201, 168, 76, 0.4), 0 1px 6px rgba(0, 0, 0, 0.3); transform: translateY(-2px) scale(1); color: var(--color-gold-light); } .back-to-top:active { transform: scale(0.95); } .back-to-top svg { width: 20px; height: 20px; flex-shrink: 0; } /* ─── Reading progress bar (service pages) ───────────────── */ .reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(to right, var(--color-gold-dark), var(--color-gold-primary)); z-index: 1001; pointer-events: none; transition: width 0.12s linear; } /* ─── Page transition overlay ────────────────────────────── */ .page-transition-overlay { position: fixed; inset: 0; background: var(--color-bg-primary); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .page-transition-overlay.fading { opacity: 1; pointer-events: all; } /* ─── Before/After comparison slider (Delphi© page) ─────── */ .comparison-slider-wrap { margin-bottom: var(--space-md); } .comparison-slider { position: relative; height: 280px; overflow: hidden; border: 1px solid var(--color-border); cursor: ew-resize; user-select: none; touch-action: pan-y; outline: none; } .comparison-slider:focus-visible { outline: 2px solid var(--color-gold-primary); outline-offset: 3px; } .comparison-slider__panel { position: absolute; inset: 0; overflow: hidden; } .comparison-slider__panel img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* The "before" panel is a gradient placeholder */ .comparison-slider__before-ph { width: 100%; height: 100%; background: linear-gradient(135deg, #1a1710 0%, #2c2820 50%, #232118 100%); filter: grayscale(1) brightness(0.75); display: flex; align-items: center; justify-content: center; } .comparison-slider__before-ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 50%, rgba(100, 90, 70, 0.12) 0%, transparent 60%); } /* The "after" panel clips to reveal from the left */ .comparison-slider__after-panel { clip-path: inset(0 50% 0 0); transition: none; } .comparison-slider__after-ph { width: 100%; height: 100%; background: linear-gradient(135deg, #1a1f2e 0%, #1a2744 50%, #12182c 100%); display: flex; align-items: center; justify-content: center; } .comparison-slider__after-ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 45%, rgba(201, 168, 76, 0.10) 0%, transparent 55%); } /* Corner labels */ .comparison-slider__label { position: absolute; top: 1rem; padding: 0.2rem 0.65rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; z-index: 3; pointer-events: none; } .comparison-slider__label--before { left: 1rem; background: rgba(26, 23, 16, 0.82); color: var(--color-text-muted); border: 1px solid rgba(58, 52, 40, 0.8); } .comparison-slider__label--after { right: 1rem; background: rgba(26, 23, 16, 0.82); color: var(--color-gold-primary); border: 1px solid rgba(201, 168, 76, 0.35); } /* Center handle */ .comparison-slider__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--color-gold-primary); transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; } .comparison-slider__grip { width: 38px; height: 38px; border-radius: 50%; background: var(--color-gold-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); flex-shrink: 0; } .comparison-slider__grip svg { color: var(--color-text-dark); width: 16px; height: 16px; } /* Placeholder text labels inside panels */ .comparison-panel-hint { font-family: var(--font-display); font-size: 0.8rem; font-style: italic; color: var(--color-text-muted); opacity: 0.6; z-index: 1; position: relative; padding: 0 var(--space-md); text-align: center; } /* ─── Nav: active section indication on scroll ───────────── */ .nav-link { position: relative; } /* ─── Reduced motion overrides ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hero-mesh-orb, .hero-mesh-orb-gold, .hero-mesh-orb-navy { animation: none !important; } .scroll-indicator-line { animation: none !important; opacity: 0.5; } .cursor-ring { display: none !important; } .page-transition-overlay { display: none !important; } .btn-primary::before { display: none; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--color-gold-primary); } .hero-bg img { will-change: auto; } .service-card:hover .service-card-image img { transform: none; } .scroll-indicator { display: none; } } /* ─── Mobile overrides ───────────────────────────────────── */ @media (max-width: 767px) { .hero-bg { width: 100%; opacity: 0.35; } .hero-bg::before { width: 100%; background: linear-gradient(to bottom, var(--color-bg-primary) 0%, rgba(26, 23, 16, 0.6) 100%); } .service-card-image { height: 120px; } .floating-cta { bottom: 1.25rem; right: 1.25rem; width: 46px; height: 46px; } .back-to-top { bottom: 5rem; right: 1.25rem; width: 46px; height: 46px; } .cursor-ring { display: none !important; } .comparison-slider { height: 200px; } .scroll-indicator { display: none; } } /* ─── Desktop-only effects ───────────────────────────────── */ @media (min-width: 1024px) { .hero-bg { width: 66%; } } /* ══════════════════════════════════════════════════════════════ PREMIUM REFINEMENTS — ui-ux-pro-max pass Glass nav · Spring easing · Card lift · Cursor hide Stat glow · Section labels · CTA tooltip · Page enter ══════════════════════════════════════════════════════════════ */ /* ─── Page entry: subtle body fade-in ───────────────────────── */ @keyframes phi-page-in { from { opacity: 0; } to { opacity: 1; } } body { animation: phi-page-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ─── Nav: deeper glass when scrolled ───────────────────────── */ /* main.css .nav.scrolled goes nearly opaque (0.98) — keep glass instead */ .nav.scrolled { background: rgba(26, 23, 16, 0.78) !important; backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.55) !important; } /* ─── Dropdown: glass backdrop ───────────────────────────────── */ .nav-dropdown-menu { background: rgba(35, 33, 24, 0.88) !important; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } /* ─── Reveal: upgrade to spring easing ──────────────────────── */ .reveal.visible { transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } /* ─── Service cards: spring easing + richer hover shadow ────── */ .service-card { transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-top-color 0.25s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.68), 0 4px 16px rgba(201, 168, 76, 0.09), 0 0 0 1px rgba(201, 168, 76, 0.13); } /* ─── Value cards: spring easing + border glow on hover ─────── */ .value-card { transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease; } .value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55); border-left-color: var(--color-gold-light); } /* ─── Stats: tabular numbers + ambient glow ──────────────────── */ .stat-value { font-variant-numeric: tabular-nums; text-shadow: 0 0 52px rgba(201, 168, 76, 0.32); } /* ─── Section label: flanking gold lines ─────────────────────── */ .section-label { display: inline-flex; align-items: center; gap: 0.625rem; } .section-label::before, .section-label::after { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--color-gold-primary); opacity: 0.45; flex-shrink: 0; } /* ─── Custom cursor: suppress native pointer ─────────────────── */ html.custom-cursor, html.custom-cursor * { cursor: none !important; } /* ─── Floating CTA: "Talk to us" tooltip on hover ───────────── */ .floating-cta::after { content: 'Talk to us'; position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; background: rgba(26, 23, 16, 0.96); border: 1px solid rgba(201, 168, 76, 0.22); color: var(--color-text-light); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .floating-cta.visible:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* ─── Back to top: tooltip ───────────────────────────────── */ .back-to-top::after { content: 'Back to top'; position: absolute; right: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; background: rgba(15, 27, 53, 0.95); color: var(--color-gold-primary); font-size: 0.75rem; font-family: var(--font-body); letter-spacing: 0.04em; padding: 0.35rem 0.65rem; border-radius: 4px; border: 1px solid rgba(201, 168, 76, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .back-to-top.visible:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* ─── CTA band: ambient radial centre glow ───────────────────── */ .cta-band { position: relative; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at 50% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 65% ); pointer-events: none; } .cta-band .container { position: relative; } /* ─── Achievement timeline: subtle hover accent ──────────────── */ .achievement-item { transition: border-color 0.25s ease; } .achievement-item:hover { border-bottom-color: rgba(201, 168, 76, 0.22); } /* ─── When-items (executive page): number brightens on hover ─── */ .when-number { transition: color 0.22s ease; } .when-item { transition: background 0.22s ease, border-color 0.22s ease; } .when-item:hover { background: rgba(201, 168, 76, 0.025); border-bottom-color: rgba(201, 168, 76, 0.22); } .when-item:hover .when-number { color: var(--color-gold-primary); } /* ─── Reduced motion: disable premium additions ──────────────── */ @media (prefers-reduced-motion: reduce) { body { animation: none !important; } .reveal.visible { transition: opacity var(--transition-slow), transform var(--transition-slow); } .service-card:hover, .value-card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; } } /* ─── Touch/coarse-pointer devices: no hover lifts ──────────── */ @media (hover: none) { .service-card:hover { transform: none !important; } .value-card:hover { transform: none !important; } }