/* ================================================================ FLASH COMMUNICATIONS — REVAMP.CSS (drop-in enhancement layer) Same brand palette: #f8efb3 accent | #0a1419 / #1a2f35 dark Add after style.css in every page ================================================================ */ /* ── ROOT TOKENS ─────────────────────────────────────────────── */ :root { --fc-accent : #f8efb3; --fc-accent-d: #e8dc8e; --fc-teal : #396772; --fc-bg : #0a1419; --fc-bg2 : #111d22; --fc-bg3 : #1a2f35; --fc-card : rgba(255,255,255,0.03); --fc-border : rgba(255,255,255,0.07); --fc-text : #f0ede6; --fc-muted : #7a8f93; --fc-radius : 14px; --fc-ease : cubic-bezier(.4,0,.2,1); } /* ── SCROLL PROGRESS ─────────────────────────────────────────── */ #fc-progress { position:fixed; top:0; left:0; z-index:9999; height:2px; width:0; background:var(--fc-accent); transition:width .1s linear; pointer-events:none; } /* ── FLOATING CTA ────────────────────────────────────────────── */ .fc-float-cta { position:fixed; bottom:28px; right:28px; z-index:800; opacity:0; transform:translateY(10px); transition:opacity .3s, transform .3s; pointer-events:none; } .fc-float-cta.show { opacity:1; transform:translateY(0); pointer-events:all; } .fc-float-cta a { display:inline-flex; align-items:center; gap:8px; background:var(--fc-accent); color:#0a1419; padding:13px 22px; border-radius:6px; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-decoration:none; box-shadow:0 8px 28px rgba(248,239,179,.35); animation:fcBob 3s ease-in-out infinite; } @keyframes fcBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } .fc-float-cta a:hover { background:var(--fc-accent-d); } /* ── HERO: above-fold CTA overlay ────────────────────────────── */ .fc-hero-overlay { position:absolute; bottom:52px; left:60px; z-index:10; } @media(max-width:991px) { .fc-hero-overlay { left:20px; bottom:24px; right:20px; } } /* live badge */ .fc-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(248,239,179,.1); border:1px solid rgba(248,239,179,.3); color:var(--fc-accent); padding:7px 16px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:18px; } .fc-badge::before { content:''; width:7px; height:7px; background:var(--fc-accent); border-radius:50%; animation:fcPing 2s infinite; } @keyframes fcPing { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.7)} } /* primary button */ .fc-btn { display:inline-flex; align-items:center; gap:9px; background:var(--fc-accent); color:#0a1419; padding:14px 32px; border-radius:5px; font-size:14px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer; transition:background .2s, transform .2s, box-shadow .2s; } .fc-btn:hover { background:var(--fc-accent-d); transform:translateY(-2px); box-shadow:0 12px 30px rgba(248,239,179,.25); } .fc-btn svg { flex-shrink:0; transition:transform .2s; } .fc-btn:hover svg { transform:translateX(4px); } /* outline button */ .fc-btn-outline { display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--fc-text); padding:13px 28px; border-radius:5px; border:1px solid rgba(255,255,255,.18); font-size:14px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; text-decoration:none; transition:border-color .2s, color .2s; } .fc-btn-outline:hover { border-color:var(--fc-accent); color:var(--fc-accent); } /* hero stats row */ .fc-stats { display:flex; flex-wrap:wrap; gap:28px 44px; padding-top:28px; margin-top:28px; border-top:1px solid rgba(255,255,255,.12); } .fc-stat-n { font-size:38px; font-weight:800; line-height:1; color:var(--fc-accent); } .fc-stat-l { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fc-muted); margin-top:4px; } /* ── METRICS BAND ────────────────────────────────────────────── */ .fc-metrics { display:grid; grid-template-columns:repeat(4,1fr); background:var(--fc-bg3); border-top:1px solid var(--fc-border); border-bottom:1px solid var(--fc-border); } .fc-metric { padding:38px 28px; text-align:center; border-right:1px solid var(--fc-border); transition:background .25s; } .fc-metric:last-child { border-right:none; } .fc-metric:hover { background:rgba(248,239,179,.04); } .fc-metric-n { font-size:48px; font-weight:800; line-height:1; color:var(--fc-accent); } .fc-metric-l { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--fc-muted); margin-top:6px; } @media(max-width:767px) { .fc-metrics { grid-template-columns:1fr 1fr; } .fc-metric { border-right:none; border-bottom:1px solid var(--fc-border); padding:28px 16px; } } /* ── SECTION LABEL ───────────────────────────────────────────── */ .fc-label { display:inline-block; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--fc-accent); margin-bottom:10px; } /* ── ABOUT HIGHLIGHTS ────────────────────────────────────────── */ .fc-highlights { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px; } .fc-hl { padding:18px 16px; border:1px solid var(--fc-border); border-radius:10px; transition:border-color .25s; } .fc-hl:hover { border-color:rgba(248,239,179,.35); } .fc-hl strong { display:block; font-size:28px; font-weight:800; color:var(--fc-accent); line-height:1; } .fc-hl span { font-size:12px; color:var(--fc-muted); margin-top:4px; display:block; } /* ── SERVICE CARDS — ENHANCED ────────────────────────────────── */ /* overrides the original flash-service-box on service pages */ .flash-service-box { background:rgba(255,255,255,.025) !important; border:1px solid var(--fc-border) !important; border-radius:var(--fc-radius) !important; padding:40px 32px !important; position:relative; overflow:hidden; transition:transform .35s var(--fc-ease), border-color .35s, box-shadow .35s !important; } .flash-service-box::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--fc-accent), transparent); opacity:0; transition:opacity .35s; } .flash-service-box:hover { transform:translateY(-8px) !important; border-color:rgba(248,239,179,.35) !important; box-shadow:0 24px 48px rgba(0,0,0,.5) !important; } .flash-service-box:hover::after { opacity:1; } .flash-service-box h4 { color:var(--fc-text) !important; } .flash-service-box:hover h4 { color:var(--fc-accent) !important; } /* ── HOMEPAGE SERVICE CARDS (work-process) ───────────────────── */ .fc-svc-card { background:rgba(255,255,255,.025); border:1px solid var(--fc-border); border-radius:var(--fc-radius); padding:40px 32px 36px; height:100%; display:flex; flex-direction:column; text-decoration:none; color:var(--fc-text); position:relative; overflow:hidden; transition:transform .35s var(--fc-ease), border-color .35s, box-shadow .35s; } .fc-svc-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--fc-accent),transparent); opacity:0; transition:opacity .35s; } .fc-svc-card:hover { transform:translateY(-8px); border-color:rgba(248,239,179,.35); box-shadow:0 24px 48px rgba(0,0,0,.5); color:var(--fc-text); text-decoration:none; } .fc-svc-card:hover::after { opacity:1; } .fc-svc-num { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--fc-accent); margin-bottom:18px; } .fc-svc-card h3 { font-size:20px; font-weight:700; margin-bottom:12px; transition:color .2s; } .fc-svc-card:hover h3 { color:var(--fc-accent); } .fc-svc-card p { font-size:14px; line-height:1.75; color:var(--fc-muted); flex:1; margin:0; } .fc-svc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; } .fc-svc-tag { font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border:1px solid var(--fc-border); color:rgba(240,237,230,.4); border-radius:3px; } .fc-svc-arrow { margin-top:20px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--fc-muted); transition:color .2s; } .fc-svc-card:hover .fc-svc-arrow { color:var(--fc-accent); } /* ── PROCESS CARDS ───────────────────────────────────────────── */ .process-card { transition:transform .35s var(--fc-ease), border-color .35s, box-shadow .35s !important; } .process-card:hover { transform:translateY(-10px) !important; border-color:rgba(248,239,179,.35) !important; box-shadow:0 20px 40px rgba(0,0,0,.45) !important; } .process-card h4 { transition:color .2s; } .process-card:hover h4 { color:var(--fc-accent) !important; } /* ── WHY CHOOSE — ENHANCED ───────────────────────────────────── */ .flash-choose-section .col-lg-3 { padding:28px 24px !important; border:1px solid var(--fc-border) !important; border-radius:var(--fc-radius) !important; background:rgba(255,255,255,.02) !important; transition:border-color .3s, background .3s !important; } .flash-choose-section .col-lg-3:hover { border-color:rgba(248,239,179,.35) !important; background:rgba(248,239,179,.04) !important; } .flash-choose-section h4 { color:var(--fc-text) !important; } .flash-choose-section .col-lg-3:hover h4 { color:var(--fc-accent) !important; } /* ── INDUSTRY PILLS ──────────────────────────────────────────── */ .industry-section .col-lg-3 { padding:14px 20px !important; border:1px solid var(--fc-border) !important; border-radius:6px !important; background:rgba(255,255,255,.02) !important; font-size:13px; font-weight:600; color:rgba(240,237,230,.55) !important; transition:border-color .25s, color .25s, background .25s, transform .25s !important; } .industry-section .col-lg-3:hover { border-color:var(--fc-accent) !important; color:var(--fc-accent) !important; background:rgba(248,239,179,.05) !important; transform:translateY(-4px) !important; } /* ── CTA SECTION — BETTER ────────────────────────────────────── */ .cta-section { background:linear-gradient(135deg,#0a1419 0%,#1a2f35 60%,#0a1419 100%) !important; border-radius:20px !important; margin:60px 20px !important; padding:70px 60px !important; position:relative; overflow:hidden; } .cta-section::before { content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px; background:radial-gradient(circle,rgba(248,239,179,.07) 0%,transparent 70%); pointer-events:none; } .cta-title { font-size:clamp(26px,3.5vw,44px) !important; font-weight:800; line-height:1.1; } .cta-desc { color:var(--fc-muted) !important; line-height:1.7; } .cta-trust { font-size:12px; color:var(--fc-muted); margin-top:12px; } .cta-trust span { color:var(--fc-accent); } @media(max-width:767px) { .cta-section { padding:44px 20px !important; margin:40px 0 !important; border-radius:0 !important; } } /* ── TESTIMONIALS — ENHANCED ─────────────────────────────────── */ .testimonial3-content { background:rgba(255,255,255,.025) !important; border:1px solid var(--fc-border) !important; border-radius:var(--fc-radius) !important; padding:32px !important; } .testimonial3-content p { border-left:2px solid var(--fc-accent); padding-left:18px; font-size:15px; line-height:1.8; color:rgba(240,237,230,.82) !important; } .client-name { color:var(--fc-accent) !important; font-weight:700 !important; letter-spacing:1px !important; } /* ── FORM — ENHANCED ─────────────────────────────────────────── */ .form-control { background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:8px !important; color:#fff !important; padding:14px 16px !important; font-size:14px !important; transition:border-color .25s, box-shadow .25s !important; } .form-control:focus { border-color:var(--fc-accent) !important; box-shadow:0 0 0 3px rgba(248,239,179,.1) !important; background:rgba(255,255,255,.06) !important; } .form-control::placeholder { color:rgba(255,255,255,.28) !important; } /* ── ACCORDION (FAQ) ─────────────────────────────────────────── */ .flash-faq-area .accordion-button { background:rgba(255,255,255,.025) !important; color:var(--fc-text) !important; font-weight:600; } .flash-faq-area .accordion-button:not(.collapsed) { color:var(--fc-accent) !important; box-shadow:none !important; } .flash-faq-area .accordion-button::after { filter:invert(.7) sepia(1) hue-rotate(10deg) saturate(3); } .flash-faq-area .accordion-item { background:rgba(255,255,255,.02) !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:10px !important; margin-bottom:14px !important; } /* ── HERO SERVICE PAGE — SEO-FRIENDLY SUBHEADING ────────────── */ .fc-svc-hero-sub { font-size:17px; line-height:1.75; color:rgba(240,237,230,.62); max-width:640px; margin-top:18px; font-weight:300; } /* ── INLINE CTA BAND (homepage) ──────────────────────────────── */ .fc-cta-band { background:var(--fc-bg3); padding:70px 60px; border-top:1px solid var(--fc-border); border-bottom:1px solid var(--fc-border); } .fc-cta-band h2 { font-size:clamp(28px,4vw,52px); font-weight:800; line-height:1.1; margin-bottom:14px; } .fc-cta-band p { font-size:16px; line-height:1.7; color:var(--fc-muted); max-width:480px; margin-bottom:28px; } @media(max-width:767px) { .fc-cta-band { padding:44px 20px; } } /* ── TRUST BAR (above partners strip) ───────────────────────── */ .fc-trust { background:var(--fc-bg2); border-bottom:1px solid var(--fc-border); padding:20px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; } .fc-trust-lbl { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--fc-muted); margin-right:6px; } .fc-pill { padding:7px 16px; border:1px solid var(--fc-border); border-radius:3px; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(240,237,230,.38); transition:border-color .2s, color .2s; } .fc-pill:hover { border-color:var(--fc-accent); color:var(--fc-accent); } /* ── ABOUT SECTION INTRO HIGHLIGHT ──────────────────────────── */ .fc-intro { border-left:3px solid var(--fc-accent); padding:20px 24px; background:rgba(248,239,179,.04); border-radius:0 8px 8px 0; margin-bottom:20px; } .fc-intro p { font-size:16px; line-height:1.8; color:rgba(240,237,230,.78); margin:0; } /* ── SCROLL-REVEAL ───────────────────────────────────────────── */ .fc-reveal { opacity:0; transform:translateY(28px); transition:opacity .6s var(--fc-ease), transform .6s var(--fc-ease); } .fc-reveal.on { opacity:1; transform:translateY(0); } .fc-reveal-d1 { transition-delay:.1s; } .fc-reveal-d2 { transition-delay:.2s; } .fc-reveal-d3 { transition-delay:.3s; } /* ── MOBILE FIXES ────────────────────────────────────────────── */ @media(max-width:991px) { .fc-highlights { grid-template-columns:1fr 1fr; } } @media(max-width:767px) { .fc-float-cta { display:none !important; } .fc-trust { padding:16px 16px; } .fc-svc-card { padding:28px 20px; } .fc-highlights { grid-template-columns:1fr 1fr; } }