/* ── AskSasson Cinematic Layer ─────────────────────────────────────────── Subtle premium effects: floating header, scroll reveals, 3D card tilt, cursor glow, diagonal section transitions, parallax hero. Art direction: dark cinematic hero, gold accents, scene labels. All effects respect prefers-reduced-motion. ──────────────────────────────────────────────────────────────────────── */ /* ── Floating / shrinking header ─────────────────────────────────────── */ header { transition: box-shadow .4s ease, background .4s ease, border-color .4s ease; } header.cin-scrolled { background: rgba(255,255,255,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: transparent; box-shadow: 0 2px 28px rgba(0,45,93,.11); } .logo-img { transition: height .4s cubic-bezier(.4,0,.2,1); } header.cin-scrolled .logo-img { height: 60px; } nav { transition: padding .4s cubic-bezier(.4,0,.2,1); } header.cin-scrolled nav { padding: 8px 0; } /* ── Scroll reveal ───────────────────────────────────────────────────── */ /* Progressive enhancement: cin-reveal elements only start hidden once cinematic.js has run and set .cin-js on . If the script never loads, the content stays fully visible — no more permanently-hidden sections. */ .cin-js .cin-reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1); } .cin-js .cin-reveal.cin-in { opacity: 1; transform: translateY(0); } /* Stagger child reveals */ .cin-js .cin-reveal:nth-child(2) { transition-delay: .08s; } .cin-js .cin-reveal:nth-child(3) { transition-delay: .16s; } .cin-js .cin-reveal:nth-child(4) { transition-delay: .24s; } .cin-js .cin-reveal:nth-child(5) { transition-delay: .32s; } .cin-js .cin-reveal:nth-child(6) { transition-delay: .40s; } /* ── 3D card tilt ────────────────────────────────────────────────────── */ .cin-tilt { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; will-change: transform; transform-style: preserve-3d; } /* Box-shadow deepens as card tilts, applied by JS */ /* ── Cursor glow ─────────────────────────────────────────────────────── */ .cin-cursor-glow { position: fixed; pointer-events: none; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(245,183,0,.07) 0%, rgba(0,87,168,.04) 40%, transparent 70%); transform: translate(-50%, -50%); z-index: 9990; opacity: 0; transition: opacity .6s ease; } .cin-cursor-glow.cin-glow-active { opacity: 1; } /* ── Hero diagonal bottom cut ────────────────────────────────────────── */ .hero { position: relative; } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 52px; background: #000d1a; clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; z-index: 2; } /* ── Parallax hero text drift ────────────────────────────────────────── */ .cin-parallax { will-change: transform; } /* ── Section diagonal ────────────────────────────────────────────────── */ .cin-diagonal-top { position: relative; } .cin-diagonal-top::before { content: ''; position: absolute; top: -28px; left: 0; right: 0; height: 56px; background: inherit; clip-path: polygon(0 100%, 100% 28px, 100% 100%); z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════════ ART DIRECTION, Dark cinematic hero, gold accents, scene labels ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hero logo watermark ─────────────────────────────────────────────── */ .hero-pitch { position: relative; } .hero-pitch::before { content: ''; position: absolute; inset: 0; background: url('/AskSassonLogo1.png') center center / contain no-repeat; opacity: 0.07; pointer-events: none; z-index: 0; } /* ── A. Hero as dark opening scene ─────────────────────────────────────── */ .hero { background: linear-gradient( 160deg, rgba(0,13,26,.94) 0%, rgba(0,29,58,.90) 40%, rgba(0,45,93,.86) 70%, rgba(0,70,160,.80) 100% ) !important; min-height: 100vh; padding-bottom: 96px; overflow: hidden; } .hero::before { content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at 30% 50%, rgba(0,87,168,.18) 0%, transparent 70%), radial-gradient(ellipse at 80% 20%, rgba(245,183,0,.06) 0%, transparent 50%) !important; z-index: 0 !important; pointer-events: none !important; } /* Hero content must sit above the image layer */ .hero > .container { position: relative; z-index: 1; } .hero-pitch > * { position: relative; z-index: 1; } /* ── B. Hero text to white/gold ─────────────────────────────────────────── */ .hero-question { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.3); } .hero-keyword-sub { color: rgba(255,255,255,.7); font-size: 12px; } .hero-keyword-sub a { color: rgba(255,255,255,.75); } .hero .pill { background: rgba(245,183,0,.12); color: #F5B700; border: 1px solid rgba(245,183,0,.3); } /* Primary CTA button in hero */ .hero-cta-btn { background: #F5B700; color: #001529; border: none; } .hero-cta-btn:hover, .hero-cta-btn:focus-visible { background: #e0a800; color: #001529; } /* Secondary CTA button in hero */ .btn-secondary.hero-cta-btn { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.3); } .btn-secondary.hero-cta-btn:hover, .btn-secondary.hero-cta-btn:focus-visible { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); } .hero-trust-line { color: rgba(255,255,255,.72); } .hero-sub { color: rgba(255,255,255,.7); } /* ── C. Concern cards as glass-morphism pills ───────────────────────────── */ .concern-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .concern-card h3, .concerns-section .concern-card h3 { color: rgba(255,255,255,.95) !important; } .concern-card p, .concerns-section .concern-card p { color: rgba(255,255,255,.62) !important; } .concern-card:hover, .concern-card:focus { background: rgba(245,183,0,.12); border-color: rgba(245,183,0,.4); } .concern-card.selected { background: rgba(0,21,41,.75); border: 2px solid #F5B700; box-shadow: 0 0 0 3px rgba(245,183,0,.18), 0 8px 28px rgba(0,0,0,.28); } .concern-card.selected h3 { color: #F5B700; } .concern-card.selected p, .concerns-section .concern-card.selected p { color: rgba(255,255,255,.88) !important; } .concern-card .concern-icon { filter: brightness(1.3); } /* ── Concerns section, dark background to match card style ─────────── */ .concerns-section { background: linear-gradient(180deg, #000d1a 0%, #001529 100%); padding: 64px 0 72px; } .concerns-section h2 { color: #fff; text-align: center; } .concerns-section .section-subtitle { color: rgba(255,255,255,.65); text-align: center; } .concerns-section .cin-scene-label { color: rgba(245,183,0,.8); justify-content: center; } /* ── Concern response CTA button ────────────────────────────────────── */ .concern-response-cta { display: inline-block; margin-top: 14px; background: #F5B700; color: #001529 !important; border: none; padding: 11px 24px; font-size: 14px; font-weight: 700; border-radius: 6px; text-decoration: none; transition: background .2s ease; } .concern-response-cta:hover, .concern-response-cta:focus-visible { background: #e0a800; color: #001529 !important; } /* ── D. Value response cards (concern answers), dark variants ──────────── */ .value-response { background: rgba(0,21,41,.70); border: 1px solid rgba(245,183,0,.35); border-top: 3px solid #F5B700; border-radius: 12px; padding: 20px 24px; color: #fff !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Explicit selectors beat body/section cascade on every specificity level */ .value-response p, .concerns-section .value-response p { color: rgba(255,255,255,.90) !important; line-height: 1.68; } .value-response h3, .concerns-section .value-response h3 { color: #F5B700 !important; font-size: 1.05rem; margin-bottom: 10px; } .value-response .value-stat, .concerns-section .value-response .value-stat { background: rgba(245,183,0,.12) !important; border-left: 3px solid #F5B700 !important; color: #fff !important; padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 12px 0; font-weight: 600; } /* ── Mobile form context label ──────────────────────────────────────── */ .hero-form-mobile-label { display: none; } @media (max-width: 767px) { .hero-form-mobile-label { display: block; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 20px 0 10px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; } } /* ── About section character intro quote ────────────────────────────── */ .about-intro-quote { font-style: italic; font-size: 15px; line-height: 1.7; color: #1f2933; border-left: 3px solid #F5B700; padding-left: 16px; margin: 12px 0 20px; opacity: .85; } /* ── E. Form card, lift on dark background ─────────────────────────────── */ .hero-form-side .form-section, .hero-form-side .cin-form-card { box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); border-radius: 20px; } /* ── F. Trust section as dark power scene ───────────────────────────────── */ .trust-section { background: linear-gradient(135deg, #000d1a 0%, #001529 50%, #002D5D 100%) !important; color: #fff; } .trust-section h2 { color: #fff; } .trust-section .trust-sub { color: rgba(255,255,255,.65); } .trust-section .trust-number { color: #F5B700; } .trust-section .trust-label { color: rgba(255,255,255,.6); } .trust-section .trust-footnote { color: rgba(255,255,255,.65); } .trust-section .rating-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; } .trust-section .rating { color: #F5B700; } .trust-section .agency { color: rgba(255,255,255,.6); } /* ── G. Scene/chapter labels ────────────────────────────────────────────── */ .cin-scene-label { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0057A8; margin-bottom: 12px; } .cin-scene-label::before { content: ''; display: inline-block; width: 24px; height: 2px; background: currentColor; border-radius: 1px; } /* Dark section variant */ .trust-section .cin-scene-label { color: rgba(245,183,0,.8); } /* ── H. Premium service cards, top gradient accent bar ─────────────────── */ .service-card { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; } .service-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #002D5D 0%, #0057A8 50%, #F5B700 100%); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.4,0,.2,1); } .service-card:hover::after, .service-card:focus-visible::after { transform: scaleX(1); } /* ── I. Field guide number badge ────────────────────────────────────────── */ .cin-guide-num { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0057A8; margin-bottom: 10px; opacity: .7; } /* ── J. Premium testimonial cards, large quote mark ───────────────────── */ .testimonial-card { position: relative; overflow: hidden; } .testimonial-card::before { content: '\201C'; position: absolute; top: -8px; right: 16px; font-size: 96px; line-height: 1; color: rgba(0,87,168,.07); font-family: Georgia, 'Times New Roman', serif; pointer-events: none; user-select: none; } /* ── K. Pull quote panel ─────────────────────────────────────────────── */ .cin-pull-quote { background: linear-gradient(135deg, #000d1a 0%, #001529 100%); padding: 56px 0; text-align: center; } .cin-pull-quote-text { margin: 0 auto; max-width: 680px; font-size: clamp(17px, 2.4vw, 22px); font-style: italic; line-height: 1.65; color: rgba(255,255,255,.82); border: none; padding: 0; position: relative; } .cin-pull-quote-text::before { content: '\201C'; display: block; font-size: 64px; line-height: .7; color: #F5B700; font-style: normal; margin-bottom: 8px; opacity: .6; } /* ── L. Final frame pre-footer CTA ──────────────────────────────────── */ .cin-final-frame { background: linear-gradient(160deg, #000d1a 0%, #001d3a 60%, #002D5D 100%); padding: 80px 0 88px; text-align: center; color: #fff; } .cin-final-frame h2 { color: #fff; font-size: clamp(24px, 3.5vw, 40px); margin-bottom: 16px; } .cin-final-frame-sub { color: rgba(255,255,255,.65); font-size: 16px; max-width: 520px; margin: 0 auto 36px; line-height: 1.6; } .cin-final-frame-btn { background: #F5B700; color: #001529; border: none; padding: 15px 40px; font-size: 16px; font-weight: 700; border-radius: 8px; display: inline-block; text-decoration: none; transition: background .2s ease, transform .2s ease; } .cin-final-frame-btn:hover, .cin-final-frame-btn:focus-visible { background: #e0a800; color: #001529; transform: translateY(-2px); } .cin-final-frame .cin-scene-label { color: rgba(245,183,0,.7); justify-content: center; margin-bottom: 20px; } /* ── Hero background breathing ───────────────────────────────────────── */ @keyframes cin-hero-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } } .hero::before { animation: cin-hero-breathe 12s ease-in-out infinite !important; } /* ── Hero headline word reveal ───────────────────────────────────────── */ .cin-word-outer { display: inline-block; overflow: hidden; vertical-align: bottom; /* line-height matches parent so overflow clip stays tight */ line-height: inherit; } .cin-word-inner { display: inline-block; transform: translateY(108%); transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1); } .hero-question.cin-words-revealed .cin-word-inner { transform: translateY(0); } /* ── Reduced motion, disable everything ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { header, header.cin-scrolled, .logo-img, nav { transition: none; } .cin-reveal { opacity: 1; transform: none; transition: none; } .cin-reveal:nth-child(n) { transition-delay: 0s; } .cin-tilt { transition: none; will-change: auto; } .cin-cursor-glow { display: none; } .hero::after { display: none; } .hero::before { animation: none !important; } .cin-parallax { will-change: auto; } .cin-diagonal-top::before { display: none; } .service-card { transition: none; } .service-card::after { transition: none; transform: scaleX(1); } .cin-final-frame-btn { transition: none; } .concern-response-cta { transition: none; } .cin-word-inner { transform: translateY(0) !important; transition: none !important; } } /* ── Mobile: disable tilt (no hover on touch) ────────────────────────── */ @media (hover: none) { .cin-tilt { transition: none; } .cin-cursor-glow { display: none; } }