/* ========================================================================== envio — AI-Powered Videotron & CCTV Security System style.css · Core design system + shared components + Home page -------------------------------------------------------------------------- Aesthetic: Apple cleanliness · Stripe professionalism · Linear UI · Vercel minimalism · Framer interactions · Enterprise security -------------------------------------------------------------------------- TABLE OF CONTENTS 01. Design Tokens (CSS variables) 02. Reset & Base 03. Typography 04. Layout primitives (container, section, grid) 05. Utilities (eyebrow, gradient text, section head) 06. Buttons 07. Badges, pills, tags 08. Header / Navbar / Mobile menu 09. Footer 10. Hero + Command-center dashboard mockup 11. Trusted-by marquee 12. Problem vs Solution 13. AI Videotron explanation 14. CCTV AI Features 15. How It Works (process) 16. Command Center Preview (dark) 17. Statistics / counters 18. Testimonials (Swiper) 19. CTA banner 20. Keyframes & motion 21. Responsive (≤1024 tablet · ≤640 mobile) ========================================================================== */ /* ========================================================================== 01. DESIGN TOKENS ========================================================================== */ :root { /* ---- Brand ---- */ --brand: #2D6BFF; /* electric, trustworthy blue */ --brand-600: #1E54E6; --brand-700: #1742C4; --brand-soft: #EAF0FF; /* light tint background */ --accent: #07C8A6; /* AI / signal teal */ --accent-600: #05A98C; --accent-soft: #E1FBF4; /* ---- Neutrals (slate scale) ---- */ --bg: #FFFFFF; --bg-subtle: #F6F8FC; /* alternating section bg */ --bg-muted: #EEF2F8; --surface: #FFFFFF; --line: #E7EBF1; /* hairline borders */ --line-strong: #D6DEE9; --ink: #0B1220; /* headings / near-black */ --ink-2: #283143; /* strong body */ --muted: #56627A; /* secondary text */ --muted-2: #8A94A8; /* tertiary text */ /* ---- Dark surfaces (command center / contact) ---- */ --dark: #0A0F1E; --dark-2: #0E1730; --dark-line: rgba(255,255,255,.09); --dark-soft: rgba(255,255,255,.06); /* ---- Semantic ---- */ --success: #12B76A; --warning: #F79009; --danger: #F04438; /* ---- Radii ---- */ --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- Shadows ---- */ --sh-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05); --sh-md: 0 6px 18px -6px rgba(16,24,40,.12); --sh-lg: 0 22px 48px -16px rgba(16,24,40,.22); --sh-brand: 0 18px 46px -14px rgba(45,107,255,.45); /* ---- Layout ---- */ --container: 1200px; --container-wide: 1320px; --nav-h: 74px; --gutter: clamp(20px, 5vw, 40px); /* ---- Type ---- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Sora', var(--font-sans); /* ---- Motion ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur: .45s; } /* ========================================================================== 02. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* `clip` (not `hidden`) stops horizontal scroll WITHOUT turning into a scroll container — `hidden` would force overflow-y to `auto`, which desyncs scroll-position detection used by AOS & scroll effects. */ overflow-x: clip; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; padding: 0; } /* Accessible focus ring */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } /* Visually-hidden helper (skip link / labels) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip-to-content link */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 2000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transform: translateY(-160%); transition: transform .25s var(--ease); } .skip-link:focus { transform: translateY(0); } ::selection { background: rgba(45,107,255,.18); color: var(--ink); } /* ========================================================================== 03. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; } h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -.035em; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.03em; } h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); } h4 { font-size: 1.12rem; } p { color: var(--muted); } strong { color: var(--ink-2); font-weight: 600; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--muted); } /* ========================================================================== 04. LAYOUT PRIMITIVES ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } /* Vertical rhythm for page sections */ .section { padding-block: clamp(64px, 9vw, 120px); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .section--subtle { background: var(--bg-subtle); } .section--muted { background: var(--bg-muted); } /* Responsive grid helper */ .grid { display: grid; gap: 24px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } /* Two-column split (text + visual) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } /* ========================================================================== 05. UTILITIES ========================================================================== */ /* Small uppercase label above a heading */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); } .eyebrow::before { content: ""; width: 18px; height: 2px; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 2px; } .eyebrow--center { justify-content: center; } .eyebrow--light { color: var(--accent); } /* Gradient text */ .gradient-text { background: linear-gradient(100deg, var(--brand) 10%, #6E8BFF 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Centered section header block */ .section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(36px, 5vw, 56px); } .section-head .eyebrow { margin-bottom: 16px; } .section-head h2 { margin-bottom: 16px; } .section-head p { font-size: 1.08rem; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } /* ========================================================================== 06. BUTTONS ========================================================================== */ .btn { --btn-bg: var(--brand); --btn-fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; font-family: var(--font-sans); font-size: .96rem; font-weight: 600; letter-spacing: -.01em; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid transparent; border-radius: var(--r-pill); white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease); will-change: transform; } .btn i { font-size: .9em; transition: transform .25s var(--ease); } .btn--primary { background: linear-gradient(180deg, #3D77FF, var(--brand)); box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.25); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 24px 54px -14px rgba(45,107,255,.6); } .btn--primary:hover i { transform: translateX(3px); } .btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-sm); } .btn--ghost:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); box-shadow: var(--sh-md); } .btn--light { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); } .btn--light:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); } .btn--lg { padding: 16px 28px; font-size: 1.02rem; } .btn--sm { padding: 10px 16px; font-size: .88rem; } .btn--block { width: 100%; } /* Text / play link */ .btn-text { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); transition: gap .25s var(--ease), color .25s var(--ease); } .btn-text .play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--brand); box-shadow: var(--sh-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .btn-text:hover { gap: 16px; color: var(--brand); } .btn-text:hover .play { transform: scale(1.08); box-shadow: var(--sh-md); } /* ========================================================================== 07. BADGES, PILLS, TAGS ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; letter-spacing: .01em; background: var(--brand-soft); color: var(--brand-700); border: 1px solid rgba(45,107,255,.16); } .badge--accent { background: var(--accent-soft); color: var(--accent-600); border-color: rgba(7,200,166,.2); } .badge--success { background: #E7F8F0; color: #0B8A53; border-color: rgba(18,183,106,.2); } .badge--danger { background: #FEECEB; color: #B42318; border-color: rgba(240,68,56,.2); } /* Live pulsing dot */ .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(18,183,106,.55); animation: pulse-dot 1.8s infinite; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 500; background: var(--bg-muted); color: var(--muted); border: 1px solid var(--line); } /* ========================================================================== 08. HEADER / NAVBAR ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } /* Solidifies on scroll (toggled by JS .is-scrolled) */ .site-header.is-scrolled { background: rgba(255,255,255,.86); border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(16,24,40,.4); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 24px; } /* --- Logo --- */ .logo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.03em; color: var(--ink); } .logo__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(150deg, var(--brand), var(--brand-700)); box-shadow: var(--sh-brand); color: #fff; flex: none; } .logo__mark svg { width: 21px; height: 21px; } .logo b { font-weight: 700; } .logo span { color: var(--brand); } /* --- Nav links --- */ .nav__links { display: flex; align-items: center; gap: 4px; } .nav__link { position: relative; padding: 9px 14px; border-radius: 10px; font-size: .95rem; font-weight: 500; color: var(--muted); transition: color .2s var(--ease), background .2s var(--ease); } .nav__link:hover { color: var(--ink); background: var(--bg-subtle); } .nav__link.is-active { color: var(--brand); } .nav__link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--accent)); } /* --- Nav actions --- */ .nav__actions { display: flex; align-items: center; gap: 12px; } /* --- Hamburger --- */ .nav__toggle { display: none; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); position: relative; } .nav__toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); } .nav__toggle span:nth-child(1) { top: 15px; } .nav__toggle span:nth-child(2) { top: 21px; } .nav__toggle span:nth-child(3) { top: 27px; } .nav__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle.is-open span:nth-child(2) { opacity: 0; } .nav__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* --- Mobile menu drawer --- */ .mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 999; background: rgba(255,255,255,.98); backdrop-filter: blur(20px); padding: 28px var(--gutter) 40px; display: flex; flex-direction: column; gap: 6px; transform: translateX(100%); visibility: hidden; transition: transform .4s var(--ease-out), visibility .4s; overflow-y: auto; } .mobile-menu.is-open { transform: translateX(0); visibility: visible; } .mobile-menu a.m-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); } .mobile-menu a.m-link i { color: var(--muted-2); } .mobile-menu .btn { margin-top: 22px; } .mobile-menu__meta { margin-top: auto; padding-top: 28px; color: var(--muted-2); font-size: .9rem; } body.menu-open { overflow: hidden; } /* ========================================================================== 09. FOOTER ========================================================================== */ .footer { background: var(--dark); color: rgba(255,255,255,.66); padding-top: clamp(56px, 7vw, 88px); position: relative; overflow: hidden; } .footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 15% 0%, rgba(45,107,255,.22), transparent 70%), radial-gradient(50% 50% at 90% 10%, rgba(7,200,166,.14), transparent 70%); pointer-events: none; } .footer > * { position: relative; } .footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--dark-line); } .footer__brand .logo { color: #fff; margin-bottom: 18px; } .footer__brand p { color: rgba(255,255,255,.6); max-width: 320px; margin-bottom: 22px; } .footer__social { display: flex; gap: 10px; } .footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--dark-line); color: rgba(255,255,255,.8); transition: all .25s var(--ease); } .footer__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); } .footer__col h5 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-sans); } .footer__col ul { display: flex; flex-direction: column; gap: 12px; } .footer__col a { color: rgba(255,255,255,.62); font-size: .95rem; transition: color .2s var(--ease); } .footer__col a:hover { color: #fff; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 26px; font-size: .88rem; color: rgba(255,255,255,.5); } .footer__bottom .badge { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); border-color: var(--dark-line); } .footer__legal { display: flex; gap: 22px; flex-wrap: wrap; } .footer__legal a:hover { color: #fff; } /* ========================================================================== 10. HERO + DASHBOARD MOCKUP ========================================================================== */ .hero { position: relative; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(48px, 7vw, 88px); overflow: hidden; } /* Ambient background: grid + glow */ .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__bg::before { /* dotted grid */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(11,18,32,.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); } .hero__bg::after { /* color glow */ content: ""; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(45% 45% at 50% 50%, rgba(45,107,255,.18), transparent 70%), radial-gradient(35% 40% at 75% 40%, rgba(7,200,166,.14), transparent 70%); filter: blur(10px); } .hero__inner { text-align: center; max-width: 860px; margin-inline: auto; } .hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; margin-bottom: 26px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); font-size: .85rem; font-weight: 500; color: var(--muted); } .hero__badge .badge { padding: 3px 9px; font-size: .72rem; } .hero h1 { margin-bottom: 22px; } .hero__inner .lead { max-width: 620px; margin: 0 auto 34px; } .hero__cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .hero__assure { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; color: var(--muted-2); font-size: .88rem; } .hero__assure span { display: inline-flex; align-items: center; gap: 8px; } .hero__assure i { color: var(--success); } /* ---- Dashboard mockup frame ---- */ .dashboard { position: relative; max-width: 1060px; margin: clamp(44px,6vw,72px) auto 0; border-radius: var(--r-xl); background: linear-gradient(180deg, #0E1730, #0A0F1E); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 50px 100px -40px rgba(8,15,35,.6), 0 0 0 1px rgba(11,18,32,.04); overflow: hidden; } .dashboard__bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); } .dashboard__dots { display: flex; gap: 7px; } .dashboard__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.18); } .dashboard__title { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 500; margin-inline: auto; font-family: var(--font-sans); } .dashboard__title .dot-live { box-shadow: 0 0 0 0 rgba(18,183,106,.6); } .dashboard__chip { font-size: .72rem; color: rgba(255,255,255,.6); padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); } .dashboard__body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; padding: 16px; } .dashboard__main { display: flex; flex-direction: column; gap: 14px; } /* Live camera feed tile with AI detection overlay */ .feed { position: relative; border-radius: var(--r); aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(125deg, #15244a 0%, #0d1832 45%, #0a1228 100%); border: 1px solid rgba(255,255,255,.07); } .feed::before { /* scanline sweep */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(7,200,166,.12) 50%, transparent); transform: translateY(-100%); animation: scan 3.4s var(--ease) infinite; } .feed__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; } .feed__tag { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; background: rgba(8,15,35,.6); backdrop-filter: blur(6px); color: #fff; font-size: .72rem; font-weight: 600; border: 1px solid rgba(255,255,255,.12); } /* AI bounding boxes */ .bbox { position: absolute; border: 1.5px solid var(--accent); border-radius: 4px; box-shadow: 0 0 0 1px rgba(7,200,166,.25); } .bbox::after { content: attr(data-label); position: absolute; top: -19px; left: -1.5px; background: var(--accent); color: #032b24; font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; } .bbox--b { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(45,107,255,.3); } .bbox--b::after { background: var(--brand); color: #fff; } .bbox.b1 { top: 30%; left: 16%; width: 20%; height: 46%; animation: float-box 5s var(--ease) infinite; } .bbox.b2 { top: 38%; left: 54%; width: 24%; height: 34%; animation: float-box 5s var(--ease) infinite .6s; } .bbox.b3 { top: 22%; left: 74%; width: 13%; height: 24%; animation: float-box 5s var(--ease) infinite 1.1s; } /* Mini stat strip under feed */ .feed-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .feed-stat { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); } .feed-stat b { display: block; color: #fff; font-family: var(--font-display); font-size: 1.35rem; } .feed-stat span { color: rgba(255,255,255,.55); font-size: .72rem; } .feed-stat b small { font-size: .7rem; color: var(--accent); font-weight: 600; } /* Right column: alerts + chart */ .dashboard__side { display: flex; flex-direction: column; gap: 14px; } .panel { padding: 14px; border-radius: var(--r); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); } .panel__head { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 600; margin-bottom: 12px; } .panel__head span { color: rgba(255,255,255,.45); font-weight: 500; font-size: .72rem; } .alert-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); } .alert-row:first-of-type { border-top: 0; } .alert-row i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; font-size: .72rem; } .alert-row .a-warn { background: rgba(247,144,9,.16); color: #FDB022; } .alert-row .a-info { background: rgba(45,107,255,.16); color: #84A9FF; } .alert-row .a-ok { background: rgba(18,183,106,.16); color: #3DDC97; } .alert-row p { color: rgba(255,255,255,.82); font-size: .78rem; line-height: 1.3; } .alert-row small { color: rgba(255,255,255,.4); font-size: .68rem; } .alert-row time { margin-left: auto; color: rgba(255,255,255,.4); font-size: .68rem; flex: none; } /* Animated bar chart */ .bars { display: flex; align-items: flex-end; gap: 7px; height: 84px; padding-top: 6px; } .bars span { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--brand), rgba(45,107,255,.25)); transform-origin: bottom; animation: grow-bar 1.2s var(--ease-out) both; } .bars span:nth-child(even) { background: linear-gradient(180deg, var(--accent), rgba(7,200,166,.25)); } /* Floating glass KPI cards around dashboard */ .float-kpi { position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 14px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--sh-lg); } .float-kpi i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: 1rem; color: #fff; } .float-kpi b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1.1rem; line-height: 1; } .float-kpi span { font-size: .74rem; color: var(--muted); } .float-kpi--tl { top: 8%; left: -3%; } .float-kpi--br { bottom: 12%; right: -3%; } /* ========================================================================== 11. TRUSTED-BY MARQUEE ========================================================================== */ .trusted { padding-block: clamp(40px, 5vw, 64px); } .trusted__label { text-align: center; color: var(--muted-2); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 28px; } .marquee { position: relative; 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); } .marquee__track { display: flex; width: max-content; gap: 64px; animation: marquee 32s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: inline-flex; align-items: center; gap: 11px; color: var(--muted-2); font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em; filter: grayscale(1); opacity: .7; transition: all .3s var(--ease); white-space: nowrap; } .marquee__item i { font-size: 1.4rem; } .marquee__item:hover { filter: grayscale(0); opacity: 1; color: var(--ink); } /* ========================================================================== 12. PROBLEM vs SOLUTION ========================================================================== */ .ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .ps-col { position: relative; } .ps-col__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .ps-col__head .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; } .ps-col--problem .ic { background: #FEECEB; color: var(--danger); } .ps-col--solution .ic { background: var(--accent-soft); color: var(--accent-600); } .ps-col__head h3 { font-size: 1.25rem; } .ps-col__head p { font-size: .9rem; } .ps-list { display: flex; flex-direction: column; gap: 14px; } .ps-card { display: flex; gap: 14px; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .ps-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .ps-card .ps-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; font-size: 1rem; } .ps-card--problem .ps-ic { background: #FEF0EF; color: var(--danger); } .ps-card--solution { border-color: rgba(7,200,166,.18); } .ps-card--solution .ps-ic { background: var(--accent-soft); color: var(--accent-600); } .ps-card h4 { font-size: 1rem; margin-bottom: 4px; font-family: var(--font-sans); font-weight: 600; } .ps-card p { font-size: .88rem; line-height: 1.5; } .ps-card--solution:hover { border-color: var(--accent); } /* center connective arrow on desktop */ .ps-connector { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: var(--sh-lg); } /* ========================================================================== 13. AI VIDEOTRON EXPLANATION ========================================================================== */ .videotron__metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 8px; } .metric-card { padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .metric-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .metric-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .metric-card .num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; } .metric-card .num small { font-size: 1.1rem; } .metric-card h4 { font-family: var(--font-sans); font-size: .95rem; font-weight: 600; } .metric-card p { font-size: .82rem; margin-top: 2px; } /* Tabs (videotron modes) */ .tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--bg-muted); border: 1px solid var(--line); margin-bottom: 26px; } .tab { padding: 9px 18px; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; color: var(--muted); transition: all .25s var(--ease); } .tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); } /* Videotron device visual */ .videotron-visual { position: relative; border-radius: var(--r-lg); padding: 30px; background: radial-gradient(120% 120% at 50% 0%, #16224a, #0a1024); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--sh-lg); } .videotron-screen { border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #060b1c; aspect-ratio: 16/10; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap: 6px; padding: 10px; } .videotron-screen .feed { aspect-ratio: auto; } .videotron-stand { width: 36%; height: 16px; margin: 0 auto; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border-radius: 0 0 10px 10px; } .videotron-base { width: 54%; height: 10px; margin: 6px auto 0; border-radius: var(--r-pill); background: rgba(255,255,255,.08); } /* ========================================================================== 14. CCTV AI FEATURES ========================================================================== */ .feature-card { position: relative; padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); overflow: hidden; } .feature-card::before { /* hover glow */ content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 80% at 0% 0%, rgba(45,107,255,.07), transparent 60%); transition: opacity .35s var(--ease); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(45,107,255,.22); } .feature-card:hover::before { opacity: 1; } .feature-card__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; font-size: 1.25rem; background: linear-gradient(150deg, var(--brand-soft), #fff); color: var(--brand); border: 1px solid rgba(45,107,255,.14); transition: transform .35s var(--ease); } .feature-card:hover .feature-card__ic { transform: scale(1.08) rotate(-4deg); } .feature-card h3 { font-size: 1.15rem; margin-bottom: 9px; } .feature-card p { font-size: .92rem; line-height: 1.6; } .feature-card__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: .88rem; font-weight: 600; color: var(--brand); opacity: 0; transform: translateX(-6px); transition: all .35s var(--ease); } .feature-card:hover .feature-card__link { opacity: 1; transform: translateX(0); } /* accent variants for icon tiles */ .feature-card__ic.v-accent { background: linear-gradient(150deg, var(--accent-soft), #fff); color: var(--accent-600); border-color: rgba(7,200,166,.18); } /* ========================================================================== 15. HOW IT WORKS (PROCESS) ========================================================================== */ .steps { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .steps::before { /* connecting line */ content: ""; position: absolute; top: 32px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px); z-index: 0; } .step { position: relative; z-index: 1; text-align: center; } .step__num { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-md); font-size: 1.4rem; color: var(--brand); position: relative; transition: transform .3s var(--ease); } .step:hover .step__num { transform: translateY(-4px); } .step__num b { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .78rem; font-family: var(--font-display); display: grid; place-items: center; } .step h3 { font-size: 1.1rem; margin-bottom: 8px; } .step p { font-size: .9rem; padding-inline: 6px; } /* ========================================================================== 16. COMMAND CENTER PREVIEW (dark) ========================================================================== */ .command { position: relative; overflow: hidden; background: var(--dark); color: #fff; } .command::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 50% at 18% 10%, rgba(45,107,255,.22), transparent 60%), radial-gradient(45% 45% at 85% 90%, rgba(7,200,166,.14), transparent 60%); } .command .container { position: relative; } .command h2 { color: #fff; } .command .lead { color: rgba(255,255,255,.66); } .command .eyebrow { color: var(--accent); } .command__panel { margin-top: 40px; border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 50px 110px -40px rgba(0,0,0,.7); padding: 18px; overflow: hidden; } .command__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .command .feed { aspect-ratio: 4/3; } .command__features { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 42px; } .command-feat { display: flex; gap: 13px; } .command-feat i { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--accent); font-size: 1rem; } .command-feat h4 { color: #fff; font-size: .98rem; font-family: var(--font-sans); margin-bottom: 3px; } .command-feat p { color: rgba(255,255,255,.55); font-size: .85rem; line-height: 1.5; } /* ========================================================================== 17. STATISTICS / COUNTERS ========================================================================== */ .stats-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .stat { text-align: center; padding: 30px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .stat:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); } .stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -.04em; line-height: 1; color: var(--ink); margin-bottom: 10px; } .stat__num .gradient-text { display: inline; } .stat__num small { font-size: .55em; vertical-align: top; } .stat p { font-size: .95rem; font-weight: 500; color: var(--muted); } .stat__divider { width: 36px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg,var(--brand),var(--accent)); } /* ========================================================================== 18. TESTIMONIALS (Swiper) ========================================================================== */ /* overflow must stay hidden so Swiper clips off-screen slides (overflow:visible here would leak slides and cause horizontal scroll) */ .testi-swiper { padding-bottom: 8px; overflow: hidden; } .testi-card { height: auto; padding: 30px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 18px; } .testi-card__stars { color: #FFB400; display: flex; gap: 3px; font-size: .9rem; } .testi-card blockquote { font-size: 1.04rem; line-height: 1.6; color: var(--ink-2); font-weight: 450; } .testi-card__author { display: flex; align-items: center; gap: 13px; margin-top: auto; } .testi-card__avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem; background: linear-gradient(150deg, var(--brand), var(--brand-700)); } .testi-card__author b { display: block; color: var(--ink); font-size: .95rem; } .testi-card__author span { font-size: .85rem; color: var(--muted-2); } /* Swiper controls */ .swiper-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; } .swiper-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); transition: all .25s var(--ease); } .swiper-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); } .swiper-pagination { position: static !important; display: flex; gap: 8px; } .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--line-strong); opacity: 1; transition: all .25s var(--ease); } .swiper-pagination-bullet-active { width: 26px; border-radius: 5px; background: var(--brand); } /* ========================================================================== 19. CTA BANNER ========================================================================== */ .cta-banner { position: relative; } .cta-card { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px); background: linear-gradient(135deg, var(--brand-700), var(--brand) 55%, #4F46E5); text-align: center; color: #fff; box-shadow: var(--sh-brand); } .cta-card::before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(40% 60% at 12% 10%, rgba(255,255,255,.25), transparent 60%), radial-gradient(40% 60% at 90% 90%, rgba(7,200,166,.35), transparent 60%); } .cta-card::after { /* subtle grid */ content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 75%); } .cta-card > * { position: relative; } .cta-card .eyebrow { color: rgba(255,255,255,.9); justify-content: center; } .cta-card .eyebrow::before { background: rgba(255,255,255,.7); } .cta-card h2 { color: #fff; margin-bottom: 16px; } .cta-card p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 32px; font-size: 1.08rem; } .cta-card .btn--light { background: #fff; color: var(--brand-700); border-color: #fff; } .cta-card .btn--light:hover { background: rgba(255,255,255,.92); } .cta-card__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cta-card__note { margin-top: 20px; font-size: .85rem; color: rgba(255,255,255,.75); } /* ========================================================================== 20. KEYFRAMES & MOTION ========================================================================== */ @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(18,183,106,.55); } 70% { box-shadow: 0 0 0 7px rgba(18,183,106,0); } 100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); } } @keyframes scan { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } @keyframes float-box { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 32px)); } } @keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .floating { animation: float-y 6s ease-in-out infinite; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .marquee__track { animation: none !important; } } /* ========================================================================== 21. RESPONSIVE ========================================================================== */ /* ---- Tablet & below ---- */ @media (max-width: 1024px) { .nav__links { display: none; } .nav__actions .btn--primary { display: none; } .nav__toggle { display: block; } .split { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__brand { grid-column: 1 / -1; } .command__grid { grid-template-columns: repeat(2,1fr); } .command__features { grid-template-columns: repeat(2,1fr); } .steps { grid-template-columns: repeat(2,1fr); row-gap: 40px; } .steps::before { display: none; } .stats-band { grid-template-columns: repeat(2,1fr); } .cols-4 { grid-template-columns: repeat(2,1fr); } .cols-3 { grid-template-columns: repeat(2,1fr); } .float-kpi--tl { left: 2%; top: 4%; } .float-kpi--br { right: 2%; bottom: 6%; } } /* ---- Mobile ---- */ @media (max-width: 640px) { :root { --nav-h: 64px; } .dashboard__body { grid-template-columns: 1fr; } .feed-stats { grid-template-columns: repeat(3,1fr); } .float-kpi { display: none; } .ps-grid { grid-template-columns: 1fr; gap: 36px; } .ps-connector { display: none; } .videotron__metrics { grid-template-columns: 1fr 1fr; } .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .stats-band { grid-template-columns: 1fr 1fr; } .command__grid { grid-template-columns: 1fr 1fr; } .command__features { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; } .btn { width: auto; } } /* ---- Tiny phones ---- */ @media (max-width: 380px) { .videotron__metrics { grid-template-columns: 1fr; } .feed-stats { grid-template-columns: 1fr; } }