/* * ============================================================ * ZINOVATE CLOUD — styles.css * * TABLE OF CONTENTS * ----------------- * 1. Reset & Global Base * 2. Layout (.container, .section-pad) * 3. Reusable Components * 3a. Eyebrow labels * 3b. Section headings & subtext * 3c. Buttons * 3d. Cards, tags, lift animation * 4. Navigation (desktop + mobile + language select) * 5. Hero Section * 6. Who We Are * 7. Our Solutions * 8. Our Services * 9. Partners Marquee * 10. Business Verticals * 11. Testimonials * 12. Locations + Contact * 13. Footer * 14. Video Modal * 15. Responsive (960px, 600px) * * KEY COLORS (search & replace to retheme) * ------------------------------------------ * Brand teal : #2DC9A8 hover: #4DD9BA * Dark bg : #0D0D0D card: #161616 alt: #111111 * White bg : #FFFFFF light card: #F9FAFB * Muted text : #A1A1AA / #71717A / #52525B * Border : #242424 (dark) #E4E4E7 (light) * ============================================================ */ /* * ============================================================ * ZINOVATE CLOUD — Main Stylesheet * File: styles.css * * TABLE OF CONTENTS * ----------------- * 1. CSS Reset & Global Base * 2. Layout Helpers (.container, .section-pad) * 3. Reusable UI Components * 3a. Eyebrow Labels * 3b. Section Headings & Subtext * 3c. Buttons (.btn-primary, .btn-outline, .btn-play) * 3d. Cards & Lift Animation * 3e. Tag Pills * 4. Navigation Bar * 4a. Desktop Nav * 4b. Mobile Hamburger & Dropdown * 4c. Language Select Dropdown * 5. Hero Section * 6. Who We Are Section * 7. Our Solutions Section * 8. Our Services Section * 9. Partners Marquee Strip * 10. Business Verticals Section * 11. Testimonials Section * 12. Locations + Contact Section * 12a. Office Cards * 12b. Contact Form * 12c. reCAPTCHA Widget * 13. Footer * 14. Responsive Breakpoints (960px, 600px) * * COLOR REFERENCE (search & replace to retheme) * ---------------------------------------------- * Brand teal: #2DC9A8 (hover: #4DD9BA, dark: #1EA88C) * Deepest bg: #0D0D0D * Card bg: #161616 * Alt section: #111111 * White section: #FFFFFF / #F9FAFB * Muted text: #A1A1AA / #71717A / #52525B * Border dark: #242424 / #1C1C1C * * SPACING * ------- * Section padding → .section-pad { padding: 96px 0; } * Page max-width → .container { max-width: 1200px; } * ============================================================ */ /* ---- RESET ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } body { font-family: 'Inter', system-ui, sans-serif; background: #0D0D0D; color: #FFFFFF; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { font-family: 'Sora','Inter',sans-serif; font-weight:700; line-height:1.15; letter-spacing:-0.02em; } a { text-decoration:none; color:inherit; } img { max-width:100%; display:block; } ul { list-style:none; } /* ---- LAYOUT ---- */ .container { max-width:1200px; margin:0 auto; padding:0 24px; } .section-pad { padding:96px 0; } /* ---- EYEBROW LABEL ---- */ /* To change color: edit color: and background: values below */ .eyebrow { display:inline-flex; align-items:center; gap:10px; color:#2DC9A8; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:14px; } .eyebrow::before { content:''; display:inline-block; width:24px; height:2px; background:#2DC9A8; flex-shrink:0; } .eyebrow::after { content:''; display:inline-block; width:24px; height:2px; background:#2DC9A8; flex-shrink:0; } .eyebrow-center { justify-content:center; } .eyebrow-center::before,.eyebrow-center::after { content:''; display:inline-block; width:24px; height:2px; background:#2DC9A8; flex-shrink:0; } /* ---- HEADINGS & SUBTEXT ---- */ .section-heading { font-size:clamp(28px,3.5vw,42px); color:#FFFFFF; margin-bottom:16px; max-width:760px; } .section-heading.dark-text { color:#111111; } .section-heading.centered { margin-left:auto; margin-right:auto; text-align:center; } .section-sub { font-size:16px; color:#A1A1AA; max-width:640px; line-height:1.75; margin-bottom:56px; } .section-sub.dark-text { color:#52525B; } .section-sub.centered { margin-left:auto; margin-right:auto; text-align:center; } /* ---- BUTTONS ---- */ /* Primary teal button — change background:#2DC9A8 to retheme */ .btn-primary { display:inline-flex; align-items:center; gap:8px; background:#2DC9A8; color:#0D0D0D; font-weight:600; font-size:14px; padding:14px 28px; border-radius:10px; border:none; cursor:pointer; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; font-family:inherit; } .btn-primary:hover { background:#4DD9BA; transform:translateY(-2px); box-shadow:0 10px 28px rgba(45,201,168,0.30); } /* Outline ghost button */ .btn-outline { display:inline-flex; align-items:center; gap:8px; background:transparent; color:#E4E4E7; font-weight:600; font-size:14px; padding:14px 28px; border-radius:10px; border:1px solid #2A2A2A; cursor:pointer; transition:border-color 0.2s,color 0.2s; font-family:inherit; } .btn-outline:hover { border-color:#2DC9A8; color:#2DC9A8; } /* Play circle inside Watch Overview button */ .btn-play { gap:12px; } .play-circle { width:30px; height:30px; background:rgba(0,0,0,0.20); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .play-circle svg { margin-left:2px; } /* ---- REUSABLE HELPERS ---- */ .lift { transition:transform 0.25s ease,box-shadow 0.25s ease; } .lift:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.5); } .dot-grid { background-image:radial-gradient(rgba(45,201,168,0.18) 1px, transparent 1px); background-size:32px 32px; } .gradient-text { background:linear-gradient(135deg,#2DC9A8 0%,#7EECD8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* Vendor tag pill */ .tag { display:inline-block; font-size:11px; font-weight:500; color:#A1A1AA; background:#2A2A2A; border:1px solid #242424; padding:4px 10px; border-radius:20px; } .tags { display:flex; flex-wrap:wrap; gap:6px; } /* ============================================================ NAVIGATION To change nav bg: edit background in .nav below ============================================================ */ .nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(13,13,13,0.90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid #1C1C1C; height:72px; display:flex; align-items:center; } .nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; width:100%; display:flex; align-items:center; justify-content:space-between; } .logo { display:flex; align-items:center; gap:12px; } .logo-mark { width:38px; height:38px; background:#2DC9A8; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:18px; color:#0D0D0D; box-shadow:0 4px 16px rgba(45,201,168,0.30); flex-shrink:0; } .logo-text { font-family:'Sora',sans-serif; font-weight:600; font-size:18px; color:#FFFFFF; letter-spacing:-0.01em; } .logo-text span { color:#2DC9A8; } .nav-links { display:flex; align-items:center; gap:30px; } .nav-link { font-size:13.5px; font-weight:500; color:#A1A1AA; transition:color 0.2s; position:relative; } .nav-link::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:#2DC9A8; transition:width 0.25s ease; } .nav-link:hover { color:#2DC9A8; } .nav-link:hover::after { width:100%; } .nav-cta { display:inline-flex; align-items:center; gap:7px; background:#2DC9A8; color:#0D0D0D; font-weight:600; font-size:13px; padding:9px 20px; border-radius:8px; transition:background 0.2s,box-shadow 0.2s; white-space:nowrap; } .nav-cta:hover { background:#4DD9BA; box-shadow:0 0 20px rgba(45,201,168,0.3); } .hamburger { display:none; background:none; border:none; cursor:pointer; color:#A1A1AA; padding:6px; transition:color 0.2s; } .hamburger:hover { color:#2DC9A8; } .mobile-menu { display:none; flex-direction:column; gap:14px; padding:16px 24px 20px; background:#0D0D0D; border-top:1px solid #1C1C1C; position:fixed; top:72px; left:0; right:0; z-index:99; } .mobile-menu.open { display:flex; } .mobile-menu .nav-link { font-size:15px; } /* ============================================================ HERO SECTION background-color: change #0D0D0D to retheme ============================================================ */ .hero { background:#0D0D0D; min-height:100vh; display:flex; align-items:center; padding-top:72px; position:relative; overflow:hidden; } .hero-glow-1 { position:absolute; top:-200px; right:-150px; width:600px; height:600px; background:radial-gradient(circle,rgba(45,201,168,0.16) 0%,transparent 70%); border-radius:50%; pointer-events:none; filter:blur(8px); } .hero-glow-2 { position:absolute; bottom:-200px; left:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(45,201,168,0.09) 0%,transparent 65%); border-radius:50%; pointer-events:none; } .hero-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:80px 0; } .hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(45,201,168,0.10); border:1px solid rgba(45,201,168,0.30); color:#2DC9A8; font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; padding:7px 16px; border-radius:100px; margin-bottom:24px; } .hero-badge .pulse { width:7px; height:7px; background:#2DC9A8; border-radius:50%; animation:pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} } .hero h1 { font-size:clamp(36px,5vw,60px); font-weight:700; color:#FFFFFF; margin-bottom:24px; letter-spacing:-0.03em; line-height:1.10; } .hero-sub { font-size:17px; color:#A1A1AA; max-width:540px; line-height:1.75; margin-bottom:38px; } .hero-cta { display:flex; gap:14px; flex-wrap:wrap; } /* Hero video */ .hero-video-wrap { position:relative; border-radius:18px; overflow:hidden; border:1px solid #242424; box-shadow:0 24px 60px rgba(0,0,0,0.5); aspect-ratio:16/9; } .hero-video-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#2DC9A8,#7EECD8); z-index:2; } .hero-video-poster { position:absolute; inset:0; background:#161616; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; cursor:pointer; z-index:1; transition:opacity 0.3s; } .hero-video-poster.hidden { opacity:0; pointer-events:none; } .play-btn { width:68px; height:68px; background:#2DC9A8; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform 0.2s,background 0.2s; } .play-btn:hover { background:#4DD9BA; transform:scale(1.08); } .play-btn svg { margin-left:4px; } .poster-label { font-size:13px; color:#A1A1AA; letter-spacing:0.04em; } .hero-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity 0.4s; z-index:0; } .hero-iframe.visible { opacity:1; z-index:2; } /* ============================================================ WHO WE ARE (white background) To change bg: edit .about { background: } ============================================================ */ .about { background:#FFFFFF; } .about-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:center; } .mission-card { background:#0D0D0D; border-radius:20px; padding:40px; position:relative; overflow:hidden; box-shadow:0 24px 56px rgba(0,0,0,0.20); aspect-ratio:1/1.05; display:flex; flex-direction:column; justify-content:space-between; } .mission-card-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:28px 28px; } .mission-card-glow { position:absolute; bottom:-80px; right:-80px; width:280px; height:280px; background:radial-gradient(circle,rgba(45,201,168,0.22) 0%,transparent 70%); border-radius:50%; } .mission-label { display:flex; align-items:center; gap:10px; color:#2DC9A8; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:14px; position:relative; z-index:1; } .mission-label::before { content:''; width:18px; height:2px; background:#2DC9A8; } .mission-text { font-family:'Sora',sans-serif; font-size:22px; font-weight:500; line-height:1.38; color:#FFFFFF; position:relative; z-index:1; } .mission-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.10); position:relative; z-index:1; } .mission-stat-num { font-family:'Sora',sans-serif; font-size:28px; font-weight:700; color:#FFFFFF; line-height:1; margin-bottom:4px; } .mission-stat-num .accent { color:#2DC9A8; } .mission-stat-label { font-size:11px; color:rgba(255,255,255,0.45); line-height:1.4; } .about-text p { font-size:15px; color:#52525B; line-height:1.80; margin-bottom:16px; } .about-text strong { color:#111111; font-weight:600; } .pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:28px; } .pillar { display:flex; align-items:center; gap:9px; background:#F9FAFB; border:1px solid #E4E4E7; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:500; color:#374151; } .pillar::before { content:''; width:8px; height:8px; background:#2DC9A8; border-radius:50%; flex-shrink:0; } .stat-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .stat-card { background:#F9FAFB; border:2px solid #E4E4E7; border-radius:14px; padding:24px; transition:border-color 0.25s; cursor:default; } .stat-card:hover { border-color:#2DC9A8; } .stat-card-num { font-family:'Sora',sans-serif; font-size:38px; font-weight:700; color:#111111; line-height:1; margin-bottom:6px; } .stat-card-num .plus { color:#2DC9A8; } .stat-card-label { font-size:13px; color:#71717A; line-height:1.45; } /* ============================================================ OUR SOLUTIONS (dark background) ============================================================ */ .solutions { background:#0D0D0D; } .solutions-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .solution-card { background:#161616; border:1px solid #242424; border-top:3px solid #2DC9A8; border-radius:14px; padding:32px; transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s; cursor:default; } .solution-card:hover { border-color:rgba(45,201,168,0.55); border-top-color:#2DC9A8; transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,0.45); } .solution-icon { width:54px; height:54px; background:rgba(45,201,168,0.10); border:1px solid rgba(45,201,168,0.22); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; } .solution-title { font-family:'Sora',sans-serif; font-size:20px; font-weight:600; color:#FFFFFF; margin-bottom:10px; transition:color 0.2s; } .solution-card:hover .solution-title { color:#2DC9A8; } .solution-desc { font-size:14px; color:#71717A; line-height:1.70; margin-bottom:20px; } /* ============================================================ OUR SERVICES (#111 background) ============================================================ */ .services { background:#111111; } .services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .service-card { display:flex; gap:20px; background:#161616; border:1px solid #242424; border-radius:14px; padding:28px; transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s; cursor:default; } .service-card:hover { border-color:rgba(45,201,168,0.45); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.4); } .service-icon { flex-shrink:0; width:46px; height:46px; background:rgba(45,201,168,0.10); border-radius:10px; display:flex; align-items:center; justify-content:center; } .service-title { font-family:'Sora',sans-serif; font-size:17px; font-weight:600; color:#FFFFFF; margin-bottom:8px; transition:color 0.2s; } .service-card:hover .service-title { color:#2DC9A8; } .service-desc { font-size:13.5px; color:#71717A; line-height:1.70; margin-bottom:12px; } .bullet-list { display:flex; flex-direction:column; gap:5px; } .bullet-item { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#71717A; line-height:1.50; } .bullet-dot { width:7px; height:7px; background:#2DC9A8; border-radius:50%; flex-shrink:0; margin-top:5px; } /* ============================================================ LANGUAGE PICKER Dropdown in nav. To add a language: add a button in the HTML and a matching object in the i18n JS variable below. ============================================================ */ /* ============================================================ LANGUAGE SELECT DROPDOWN Styled native