/* ===================================================================== FPS Enterprises — Unified design system + animation layer Loaded AFTER style.css so it augments/overrides safely. Namespaced with .fps- to avoid clashing with legacy styles. ===================================================================== */ :root { /* ── Core palette: BLACK · WHITE · RED (+ ember-gold complement) ── */ --fps-black: #0c0c0e; /* rich near-black (primary dark) */ --fps-black-2: #141417; /* charcoal surface */ --fps-black-3: #1d1d21; /* raised charcoal */ --fps-navy: #0c0c0e; /* legacy alias kept → now black */ --fps-navy-2: #141417; --fps-navy-3: #1d1d21; --fps-red: #e10600; /* signal red (primary brand) */ --fps-red-2: #ff2a17; /* bright red (gradient top) */ --fps-red-3: #ff5c47; /* soft red (highlights on dark) */ --fps-brand: #e10600; --fps-brand-2: #ff2a17; --fps-brand-3: #ff5c47; --fps-accent: #f5a623; /* ember-gold complement (use sparingly) */ --fps-steel: #2b5f83; /* steel-blue SECONDARY accent (broad use) */ --fps-steel-2: #4d97d1; /* brighter steel on dark */ --fps-steel-tint:rgba(43,95,131,.10); --fps-ink: #0c0c0e; /* body text on light */ --fps-muted: #6b6b72; /* neutral grey text */ --fps-line: #e7e7ea; /* hairline borders on light */ --fps-bg: #f6f6f7; /* off-white section tint */ --fps-white: #ffffff; --fps-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fps-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fps-radius: 18px; --fps-radius-lg: 26px; --fps-shadow-sm: 0 1px 2px rgba(12,12,14,.06); --fps-shadow: 0 18px 40px rgba(12,12,14,.12); --fps-shadow-lg: 0 34px 70px rgba(12,12,14,.20); --fps-glow: 0 14px 34px rgba(225,6,0,.36); --fps-ease: cubic-bezier(.22,.61,.36,1); } /* ── Re-map the legacy style.css tokens to the black/white/red system so EVERY existing page (home, services, service, product) recolours from this single place. custom.css loads after style.css. ───────── */ :root { --primary: #e10600; --secondary: #b00400; --dark: #0c0c0e; --navy: #0c0c0e; --navy-2: #141417; --brand: #e10600; --brand-2: #ff2a17; --c-bg: #0c0c0e; --c-menu: #141417; --c-accent: #2b5f83; /* leftover SaaS purple → steel */ --c-teal: #4d97d1; /* leftover teal → steel */ --c-item-hover: rgba(43,95,131,.10); } /* ── Layout primitives ─────────────────────────────────────────────── */ .fps-shell { width: min(1180px, calc(100% - 34px)); margin-inline: auto; } .fps-shell--narrow { width: min(880px, calc(100% - 34px)); } .fps-section { padding: clamp(56px, 8vw, 104px) 0; position: relative; } .fps-section--tint { background: var(--fps-bg); } .fps-section--dark { background: var(--fps-navy); color: #fff; } .fps-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fps-display); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fps-steel); margin-bottom: 16px; } .fps-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 9px; background: currentColor; } .fps-section--dark .fps-eyebrow { color: var(--fps-steel-2); } .fps-h2 { font-family: var(--fps-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.1; color: var(--fps-ink); margin: 0 0 14px; } .fps-section--dark .fps-h2 { color: #fff; } .fps-lead { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.75; color: var(--fps-muted); max-width: 62ch; margin: 0; } .fps-section--dark .fps-lead { color: rgba(255,255,255,.72); } .fps-grad-text { background: linear-gradient(120deg, var(--fps-brand-2), var(--fps-brand)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Buttons ───────────────────────────────────────────────────────── */ .fps-btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--fps-display); font-weight: 700; font-size: .94rem; padding: 13px 26px; border-radius: 12px; text-decoration: none; border: 0; transition: transform .2s var(--fps-ease), box-shadow .2s var(--fps-ease), background .2s; will-change: transform; } .fps-btn svg { transition: transform .2s var(--fps-ease); } .fps-btn:hover svg { transform: translateX(4px); } .fps-btn--primary { background: linear-gradient(120deg, var(--fps-brand-2), var(--fps-brand)); color: #fff; box-shadow: var(--fps-glow); } .fps-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(225,6,0,.44); color: #fff; } .fps-btn--dark { background: var(--fps-navy); color: #fff; } .fps-btn--dark:hover { transform: translateY(-3px); box-shadow: var(--fps-shadow); color: #fff; } .fps-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); } .fps-btn--ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); color: #fff; } .fps-btn--outline { background: transparent; color: var(--fps-brand); border: 1.5px solid var(--fps-brand); } .fps-btn--outline:hover { background: var(--fps-brand); color: #fff; transform: translateY(-3px); } /* ── Hero (shared dark, glowing) ───────────────────────────────────── */ .fps-hero { position: relative; overflow: hidden; background: var(--fps-navy); color: #fff; padding: clamp(70px, 11vw, 128px) 0 clamp(56px, 8vw, 96px); } .fps-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 52% 60% at 88% -5%, rgba(43,95,131,.42), transparent 62%), radial-gradient(ellipse 40% 50% at 4% 104%, rgba(225,6,0,.16), transparent 58%); } .fps-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000, transparent 78%); } .fps-hero > .fps-shell { position: relative; z-index: 1; } .fps-hero h1 { font-family: var(--fps-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(2.3rem, 6vw, 4.4rem); margin: 0 0 20px; } .fps-hero p { color: rgba(255,255,255,.74); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.7; max-width: 60ch; margin: 0; } .fps-crumb { font-size: .82rem; color: rgba(255,255,255,.62); margin-bottom: 20px; } .fps-crumb a { color: rgba(255,255,255,.82); text-decoration: none; } .fps-crumb a:hover { color: #fff; } /* ── Cards ─────────────────────────────────────────────────────────── */ .fps-card { background: #fff; border: 1px solid var(--fps-line); border-radius: var(--fps-radius); box-shadow: var(--fps-shadow-sm); overflow: hidden; transition: transform .25s var(--fps-ease), box-shadow .25s var(--fps-ease), border-color .25s; } .fps-card:hover { transform: translateY(-6px); box-shadow: var(--fps-shadow-lg); border-color: rgba(43,95,131,.28); } .fps-card__media { aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, var(--fps-navy), var(--fps-navy-3)); position: relative; } .fps-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--fps-ease); } .fps-card:hover .fps-card__media img { transform: scale(1.07); } .fps-card__body { padding: 20px 22px 22px; } /* Icon tile */ .fps-icon-tile { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(43,95,131,.14), rgba(43,95,131,.05)); color: var(--fps-steel); border: 1px solid rgba(43,95,131,.18); flex-shrink: 0; } .fps-section--dark .fps-icon-tile { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--fps-steel-2); } /* ── Stat counters ─────────────────────────────────────────────────── */ .fps-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .fps-stat { text-align: center; padding: 26px 18px; border-radius: var(--fps-radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .fps-stat .num { font-family: var(--fps-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: #fff; } .fps-stat .num .suffix { color: var(--fps-brand-3); } .fps-stat .lbl { margin-top: 8px; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 600; } @media (max-width: 720px){ .fps-stats { grid-template-columns: repeat(2,1fr); } } /* ── Marquee (logo / trust ticker) ─────────────────────────────────── */ .fps-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .fps-marquee__track { display: inline-flex; gap: 56px; align-items: center; white-space: nowrap; animation: fps-scroll 28s linear infinite; } .fps-marquee:hover .fps-marquee__track { animation-play-state: paused; } @keyframes fps-scroll { to { transform: translateX(-50%); } } /* ── Section heading block ─────────────────────────────────────────── */ .fps-head { max-width: 720px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; } .fps-head .fps-eyebrow { justify-content: center; } /* ===================================================================== ANIMATION UTILITIES (driven by animations.js; CSS-only fallbacks) ===================================================================== */ /* Only hide pre-animation when JS is available (html.js set in ) so no-JS visitors and crawlers always see fully-rendered content. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--fps-ease), transform .7s var(--fps-ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .js .reveal--left { transform: translateX(-34px); } .js .reveal--right { transform: translateX(34px); } .js .reveal--zoom { transform: scale(.94); } .reveal.is-visible.reveal--left, .reveal.is-visible.reveal--right, .reveal.is-visible.reveal--zoom { transform: none; } .js [data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--fps-ease), transform .6s var(--fps-ease); } [data-stagger].is-visible > * { opacity: 1; transform: none; } /* Scroll progress bar (injected) */ #fps-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: linear-gradient(90deg, var(--fps-steel-2), var(--fps-red)); box-shadow: 0 0 12px rgba(43,95,131,.6); transition: width .1s linear; } /* Back to top (injected) */ #fps-top { position: fixed; right: 22px; bottom: 84px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; z-index: 900; display: grid; place-items: center; color: #fff; background: var(--fps-navy); box-shadow: var(--fps-shadow); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .25s, transform .25s; } #fps-top.show { opacity: 1; transform: none; pointer-events: auto; } #fps-top:hover { background: var(--fps-steel); transform: translateY(-2px); } /* Magnetic + tilt hint */ [data-magnetic] { transition: transform .18s var(--fps-ease); } /* Reveal images (skeleton shimmer) */ .fps-img-load { background: linear-gradient(100deg, #eceef2 30%, #f6f7f9 50%, #eceef2 70%); background-size: 200% 100%; animation: fps-shimmer 1.3s infinite; } @keyframes fps-shimmer { to { background-position: -200% 0; } } /* Accordion */ .fps-acc__item { border: 1px solid var(--fps-line); border-radius: 14px; background: #fff; margin-bottom: 12px; overflow: hidden; } .fps-acc__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 18px 22px; font-family: var(--fps-display); font-weight: 700; font-size: 1rem; color: var(--fps-ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .fps-acc__q .chev { transition: transform .3s var(--fps-ease); flex-shrink: 0; } .fps-acc__item.open .fps-acc__q .chev { transform: rotate(180deg); } .fps-acc__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--fps-ease); } .fps-acc__a p { margin: 0; padding: 0 22px 20px; color: var(--fps-muted); line-height: 1.7; } /* Chips / filters */ .fps-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-size: .84rem; font-weight: 700; cursor: pointer; border: 1px solid var(--fps-line); background: #fff; color: var(--fps-ink); transition: all .18s var(--fps-ease); text-decoration: none; } .fps-chip:hover { border-color: var(--fps-steel); color: var(--fps-steel); } .fps-chip.active { background: var(--fps-navy); color: #fff; border-color: var(--fps-navy); } /* Lightbox */ #fps-lightbox { position: fixed; inset: 0; z-index: 9998; background: rgba(6,8,15,.92); display: none; place-items: center; padding: 30px; backdrop-filter: blur(4px); } #fps-lightbox.show { display: grid; } #fps-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 40px 90px rgba(0,0,0,.6); } #fps-lightbox .close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem; cursor: pointer; } /* Announcement bar */ .fps-announce { background: linear-gradient(120deg, #101015, #1d1d24); color: rgba(255,255,255,.9); font-size: .86rem; font-weight: 600; text-align: center; padding: 9px 40px 9px 16px; position: relative; border-bottom: 1px solid rgba(255,255,255,.07); } .fps-announce .fa-fire-flame-curved { color: var(--fps-red-3); } .fps-announce a { color: var(--fps-steel-2); text-decoration: underline; text-underline-offset: 2px; } .fps-announce .x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: rgba(255,255,255,.7); cursor: pointer; font-size: 1.1rem; } /* Split feature row */ .fps-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .fps-split img { width: 100%; border-radius: var(--fps-radius-lg); box-shadow: var(--fps-shadow); display: block; } @media (max-width: 860px){ .fps-split { grid-template-columns: 1fr; } } /* Generic responsive grids */ .fps-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fps-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 980px){ .fps-grid-3, .fps-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .fps-grid-3, .fps-grid-4 { grid-template-columns: 1fr; } } /* Reduced motion: disable all custom motion */ @media (prefers-reduced-motion: reduce) { .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .fps-marquee__track { animation: none; } .fps-btn, .fps-card, #fps-top, [data-magnetic] { transition: none !important; } .fps-card:hover, .fps-btn:hover { transform: none !important; } html { scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } /* ===================================================================== POLISH v2 — black/white/red refinements + extra UI ===================================================================== */ /* Global text selection + accents */ ::selection { background: var(--fps-red); color: #fff; } :focus-visible { outline: 2px solid var(--fps-steel); outline-offset: 2px; border-radius: 4px; } /* Custom scrollbar (WebKit) — graphite, not red */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: #0c0c0e; } ::-webkit-scrollbar-thumb { background: linear-gradient(#3a3a42, #23232a); border-radius: 9px; border: 2px solid #0c0c0e; } ::-webkit-scrollbar-thumb:hover { background: var(--fps-steel); } html { scrollbar-color: #3a3a42 #0c0c0e; } /* Deeper hero: pure-black base + steel vignette + steel top hairline */ .fps-hero { background: radial-gradient(120% 130% at 50% -20%, #16202b 0%, var(--fps-black) 58%); border-top: 2px solid var(--fps-steel); } .fps-hero h1 .fps-grad-text, .fps-grad-text { background: linear-gradient(120deg, var(--fps-red-2), var(--fps-red-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Floating ember dot inside heroes */ .fps-hero .fps-shell::after { content: ""; position: absolute; right: 6%; top: 8%; width: 10px; height: 10px; border-radius: 50%; background: var(--fps-red-2); box-shadow: 0 0 24px 6px rgba(255,42,23,.7); opacity: .85; animation: fps-float 5s ease-in-out infinite; } @keyframes fps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } /* Scroll cue */ .fps-scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: grid; place-items: center; gap: 6px; color: rgba(255,255,255,.5); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; } .fps-scrollcue .mouse { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.35); border-radius: 12px; position: relative; } .fps-scrollcue .mouse::before { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; border-radius: 3px; background: var(--fps-red-2); transform: translateX(-50%); animation: fps-wheel 1.6s ease-in-out infinite; } @keyframes fps-wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 10px); } } /* Card spotlight — follows cursor (vars set by animations.js) */ .fps-card { position: relative; } .fps-card__spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(43,95,131,.12), transparent 60%); z-index: 0; } .fps-card:hover .fps-card__spot { opacity: 1; } .fps-card > * { position: relative; z-index: 1; } /* Button shine sweep */ .fps-btn--primary, .fps-btn--dark { position: relative; overflow: hidden; } .fps-btn--primary::after, .fps-btn--dark::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); transition: left .6s var(--fps-ease); } .fps-btn--primary:hover::after, .fps-btn--dark:hover::after { left: 130%; } /* Section top accent for dark bands */ .fps-section--dark { border-top: 1px solid rgba(43,95,131,.28); } /* Kicker underline for headings (steel → red) */ .fps-h2 { position: relative; } .fps-head .fps-h2::after { content: ""; display: block; width: 54px; height: 3px; border-radius: 9px; background: linear-gradient(90deg, var(--fps-steel-2), var(--fps-red)); margin: 16px auto 0; } /* Grain overlay for dark sections */ .fps-section--dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .fps-section--dark > * { position: relative; z-index: 1; } /* Announcement bar (top of page, injected) */ .fps-announce { position: relative; z-index: 5; } /* Rebalance: card micro-CTAs & category labels red → steel (page