/* ========================================================================= VOISYS DIGITAL — MASTER STYLESHEET Table of contents: 1. Variables 6. Buttons 11. Forms 2. Reset 7. Hero 12. Footer 3. Typography 8. Sections 13. Responsive 4. Layout 9. Cards 14. Accessibility 5. Header 10. Team 15. Animations ========================================================================= */ /* ========================================================================= 1. VARIABLES ========================================================================= */ :root{ /* Brand colors — sampled from the Voisys logo */ --navy-950:#081527; --navy-900:#0d2544; --navy-800:#123b67; --navy-700:#164575; --navy-600:#1a5490; --blue-600:#1c72bf; --blue-500:#2f8ada; --blue-400:#5aa5e6; --blue-200:#bfe0fa; --blue-100:#dcedfb; --blue-50:#f2f8fd; --white:#ffffff; --ink:#122036; --ink-soft:#3c4a61; --grey-600:#5b6b85; --grey-400:#8b9ab2; --border:#e3ebf5; --border-soft:#edf3fa; --success:#1c9c6d; --warn:#d98b1f; /* Gradients */ --grad-navy:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-600) 100%); --grad-blue:linear-gradient(135deg,var(--blue-600) 0%,var(--navy-700) 100%); --grad-bg:linear-gradient(180deg,var(--blue-50) 0%,var(--white) 100%); /* Typography */ --font-head:'Poppins',-apple-system,Segoe UI,sans-serif; --font-body:'Poppins',-apple-system,Segoe UI,sans-serif; --fs-body:1.0625rem; /* ~17px */ --fs-small:0.9375rem; /* ~15px */ --fs-h1:clamp(2.4rem,4.6vw,3.8rem); --fs-h2:clamp(1.9rem,3.2vw,2.6rem); --fs-h3:clamp(1.3rem,2vw,1.6rem); --fs-h4:1.15rem; --lh-body:1.65; --lh-tight:1.2; /* Spacing */ --gap-xs:8px; --gap-sm:16px; --gap-md:24px; --gap-lg:40px; --gap-xl:72px; --gap-2xl:112px; /* Layout */ --container:1240px; --container-narrow:840px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px; /* Effects */ --shadow-sm:0 2px 10px rgba(13,37,68,.06); --shadow-md:0 12px 32px rgba(13,37,68,.10); --shadow-lg:0 24px 60px rgba(13,37,68,.16); --header-h:78px; --ease:cubic-bezier(.22,.9,.32,1); --dur:.5s; } /* ========================================================================= 2. RESET ========================================================================= */ *,*::before,*::after{box-sizing:border-box;} /* overflow-x:hidden is intentionally NOT set here: setting overflow-x on forces the UA to compute overflow-y as "auto" too (per the CSS Overflow spec's visible/non-visible pairing rule), which turns into its own scroll container and breaks position:sticky on .site-header (it starts sticking to that inner box instead of the viewport, and scrolls away). The horizontal-overflow guard lives on
instead, which sits below the sticky header and is not one of its ancestors. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;} ul,ol{list-style:none;padding:0;margin:0;} img,picture,svg,video{display:block;max-width:100%;height:auto;} /* Default icon size: every icon from voisys_icon() carries this class. Without an explicit size, a bare inline (no width/height attributes) falls back to the browser's intrinsic default — historically 300x150 — which is disastrous for a 24x24-viewBox icon. Components that need a different size (e.g. .card .ico-box svg) override this further down the cascade. */ .icon{width:20px;height:20px;flex-shrink:0;} input,button,textarea,select{font:inherit;color:inherit;} button{cursor:pointer;background:none;border:none;} a{color:inherit;text-decoration:none;} table{border-collapse:collapse;width:100%;} :target{scroll-margin-top:100px;} body{ font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); background:var(--white); min-height:100vh; } /* Horizontal-overflow safety net lives here (not on html/body — see the note above .site-header) — .site-header and .mobile-nav are outside
, so this can't interfere with the sticky header. */ main{display:block;overflow-x:hidden;} /* ========================================================================= 3. TYPOGRAPHY ========================================================================= */ h1,h2,h3,h4,h5{ font-family:var(--font-head); font-weight:700; line-height:var(--lh-tight); color:var(--navy-900); letter-spacing:-0.01em; } h1{font-size:var(--fs-h1);font-weight:800;} h2{font-size:var(--fs-h2);font-weight:750;} h3{font-size:var(--fs-h3);} h4{font-size:var(--fs-h4);font-weight:600;} p{color:var(--ink-soft);} p+p{margin-top:1em;} strong{color:var(--navy-900);font-weight:650;} a.text-link{color:var(--blue-600);font-weight:600;border-bottom:2px solid var(--blue-200);transition:border-color .2s var(--ease);} a.text-link:hover{border-color:var(--blue-600);} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-head); font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-600); margin-bottom:14px; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--blue-600);border-radius:2px;} .eyebrow.on-dark{color:var(--blue-200);} .eyebrow.on-dark::before{background:var(--blue-200);} .section-head{max-width:680px;margin:0 0 var(--gap-lg);} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} .section-head p{font-size:1.08rem;margin-top:14px;} .text-center{text-align:center;} .mono-tag{font-family:var(--font-head);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-600);} /* ========================================================================= 4. LAYOUT ========================================================================= */ .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;} .container-narrow{width:100%;max-width:var(--container-narrow);margin:0 auto;padding:0 24px;} .section{padding:var(--gap-2xl) 0;} .section-sm{padding:var(--gap-xl) 0;} .section-tight{padding:var(--gap-lg) 0;} .bg-light{background:var(--blue-50);} .bg-navy{background:var(--grad-navy);color:var(--white);} .bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--white);} .bg-navy p{color:var(--blue-100);} .bg-white{background:var(--white);} .grid{display:grid;gap:var(--gap-md);} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} /* Contact page's form/sidebar split — was previously an inline style on the element, which (being higher specificity than any class selector) silently defeated the .contact-grid{grid-template-columns:1fr} mobile override below, so the two columns never actually stacked on phones. Defined here as a normal class rule instead so the @media (max-width:860px) override further down works as intended. */ .contact-grid{grid-template-columns:1.4fr .9fr;gap:48px;align-items:flex-start;} .flex{display:flex;} .flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:8px;} .flex-center{display:flex;align-items:center;justify-content:center;} .flex-wrap{flex-wrap:wrap;} .stack{display:flex;flex-direction:column;} .gap-sm{gap:var(--gap-sm);} .gap-md{gap:var(--gap-md);} /* Defensive reset for the whole site: a flex/grid child's default min-width is its own content's min-content size, which can silently force a narrow mobile layout wider than the viewport (a "grid/flex blowout"). Letting children shrink below their content size and wrap or truncate instead is almost always what we actually want. */ .grid>*,.flex-between>*,.stack>*,.flex>*,.problem-grid>*{min-width:0;} .divider{height:1px;background:var(--border);border:none;margin:var(--gap-lg) 0;} .pill-tag{display:inline-block;padding:6px 14px;border-radius:var(--radius-pill);background:var(--blue-50);color:var(--blue-600);font-size:.82rem;font-weight:650;border:1px solid var(--blue-100);} .skip-link{position:absolute;left:-999px;top:0;background:var(--navy-900);color:var(--white);padding:12px 20px;z-index:9999;border-radius:0 0 10px 0;} .skip-link:focus{left:0;} /* ========================================================================= 5. HEADER ========================================================================= */ .site-header{ position:sticky;top:0;left:0;right:0;z-index:1000; height:var(--header-h); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); transition:box-shadow .3s var(--ease); } .site-header.is-scrolled{box-shadow:0 6px 24px rgba(13,37,68,.08);} .header-inner{ max-width:var(--container);margin:0 auto;padding:0 24px;height:100%; display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;} .brand img{height:52px;width:auto;display:block;} .brand-word{font-family:var(--font-head);font-weight:800;font-size:1.18rem;color:var(--navy-900);letter-spacing:-.01em;} .brand-word span{color:var(--blue-600);} .main-nav{display:flex;align-items:center;gap:2px;} .main-nav>ul{display:flex;align-items:center;gap:2px;} .nav-link{ display:flex;align-items:center;gap:6px; padding:10px 16px;border-radius:var(--radius-pill); font-weight:600;font-size:.97rem;color:var(--ink); transition:background .2s var(--ease),color .2s var(--ease); white-space:nowrap; } .nav-link:hover,.nav-link:focus-visible,.has-dropdown:hover>.nav-link{background:var(--blue-50);color:var(--blue-600);} .nav-link .chev{width:10px;height:10px;transition:transform .25s var(--ease);flex-shrink:0;} .has-dropdown:hover .nav-link .chev,.has-dropdown:focus-within .nav-link .chev{transform:rotate(180deg);} /* .dropdown sits 10px below the nav link (`top:calc(100% + 10px)` below), and that gap used to belong to neither the link nor the dropdown's own box — so moving the mouse straight down into it dropped :hover on .has-dropdown and the panel closed before the cursor ever reached it (a submenu was only reachable by clicking the parent item first). Fixed by giving .has-dropdown itself real padding-bottom equal to the gap, so its own hoverable box actually extends down through the gap — simpler and more reliable across browsers than trying to bridge it with a pointer-events-hoverable ::after pseudo-element, which several engines (Chromium included) don't consistently register :hover for. */ .has-dropdown{position:relative;padding-bottom:10px;margin-bottom:-10px;} .dropdown{ /* top:100%, not +10px — the 10px of visual breathing room now comes from .has-dropdown's own padding-bottom above, so the dropdown's box is flush with the (padded) bottom of its parent and there's no longer any unhoverable gap between them. */ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px); min-width:300px;background:var(--white);border:1px solid var(--border); border-radius:var(--radius-md);box-shadow:var(--shadow-lg); padding:10px;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; z-index:50; } .has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } .dropdown a{ display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--radius-sm); font-weight:600;color:var(--navy-900);font-size:.94rem;transition:background .2s; } .dropdown a small{font-weight:450;color:var(--grey-600);font-size:.82rem;} .dropdown a:hover{background:var(--blue-50);color:var(--blue-600);} .dropdown .dropdown-view-all{border-top:1px solid var(--border-soft);margin-top:6px;padding-top:12px;color:var(--blue-600);} .header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;} .hamburger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;border-radius:10px;flex-shrink:0; } .hamburger span{display:block;width:22px;height:2.5px;background:var(--navy-900);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease);margin:0 auto;} .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);} .mobile-nav{ position:fixed;inset:var(--header-h) 0 0 0;background:var(--white); z-index:999;padding:20px 24px 40px;overflow-y:auto; transform:translateY(-12px);opacity:0;visibility:hidden; transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s; } .mobile-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;} .mobile-nav a{display:block;} .mobile-nav-item{border-bottom:1px solid var(--border-soft);} .mobile-nav-top{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-weight:650;font-size:1.05rem;color:var(--navy-900);} .mobile-nav-top .chev{width:12px;height:12px;transition:transform .25s var(--ease);} .mobile-nav-item.is-open .mobile-nav-top .chev{transform:rotate(180deg);} .mobile-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);} .mobile-nav-item.is-open .mobile-sub{max-height:600px;} .mobile-sub a{padding:10px 4px 10px 14px;color:var(--ink-soft);font-weight:550;border-left:2px solid var(--blue-100);margin-left:4px;font-size:.95rem;} .mobile-nav-item>a.mobile-nav-top{padding:16px 4px;} .mobile-cta{margin-top:24px;} body.nav-open{overflow:hidden;} /* ========================================================================= 6. BUTTONS ========================================================================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 26px;border-radius:var(--radius-pill); font-family:var(--font-head);font-weight:650;font-size:1rem; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease); border:2px solid transparent;line-height:1;white-space:nowrap; } .btn .arrow{transition:transform .25s var(--ease);width:16px;height:16px;flex-shrink:0;} .btn:hover .arrow{transform:translate(3px,-3px);} .btn-down .arrow{transition:transform .25s var(--ease);} .btn-down:hover .arrow{transform:translateY(3px);} .btn-primary{background:var(--blue-600);color:var(--white);box-shadow:0 10px 26px rgba(28,114,191,.32);} .btn-primary:hover{background:var(--navy-800);transform:translateY(-2px);box-shadow:0 14px 32px rgba(13,37,68,.28);} .btn-secondary{background:var(--white);color:var(--navy-900);border-color:var(--border);} .btn-secondary:hover{border-color:var(--blue-600);color:var(--blue-600);transform:translateY(-2px);} .btn-ghost{background:transparent;color:var(--navy-900);padding:14px 8px;} .btn-ghost:hover{color:var(--blue-600);} .btn-on-navy{background:var(--white);color:var(--navy-900);} .btn-on-navy:hover{background:var(--blue-200);transform:translateY(-2px);} .btn-outline-on-navy{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35);} .btn-outline-on-navy:hover{border-color:var(--white);background:rgba(255,255,255,.08);} .btn-sm{padding:10px 18px;font-size:.9rem;} .btn-block{width:100%;} .btn-header{padding:11px 22px;} .chip-btn{ display:inline-flex;align-items:center;gap:8px;padding:11px 20px; border-radius:var(--radius-pill);border:1.5px solid rgba(255,255,255,.25); color:var(--white);font-weight:600;font-size:.92rem; transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease); } .chip-btn:hover{background:var(--blue-600);border-color:var(--blue-600);transform:translateY(-2px);} /* ========================================================================= 7. HERO ========================================================================= */ .hero{ position:relative;padding:64px 0 var(--gap-xl); background:linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%); color:var(--white); overflow:hidden; isolation:isolate; /* gives .hero its own stacking context so the canvas (z-index:0) and glows can never leak above the header or below into the next section */ } /* Starfield canvas — drawn/animated by assets/js/hero-space.js. Sits behind the hero content (z-index:0 vs hero-grid's z-index:2) and is purely decorative (aria-hidden), so it never competes with real content or overlaps the header, which is a separate element outside .hero. */ .hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;} /* Soft nebula glows behind the starfield; --mx/--my are updated on mousemove (assets/js/hero-space.js) for a subtle parallax drift, and default to 0 so the layout is correct even with JS disabled. */ .hero::before,.hero::after{ content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:1; transform:translate(calc(var(--mx,0) * 1px),calc(var(--my,0) * 1px)) scale(1); transition:transform .6s var(--ease); } .hero::before{ top:-260px;right:-220px;width:640px;height:640px; background:radial-gradient(circle,rgba(28,114,191,.4) 0%,transparent 70%); animation:nebulaPulse 9s ease-in-out infinite; } .hero::after{ bottom:-240px;left:-180px;width:540px;height:540px; background:radial-gradient(circle,rgba(90,165,230,.24) 0%,transparent 70%); animation:nebulaPulse 11s ease-in-out infinite 1.5s; } @keyframes nebulaPulse{0%,100%{opacity:.65;}50%{opacity:1;}} .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center; position:relative;z-index:2; } .hero-copy h1{margin-bottom:22px;color:var(--white);} .hero-copy h1 .accent{color:var(--blue-400);} .hero-copy>p.lead{font-size:1.15rem;max-width:540px;margin-bottom:30px;color:var(--blue-100);} .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px;} .hero-sub{font-size:.98rem;color:var(--blue-200);max-width:520px;margin-bottom:18px;} .hero-benefits{display:flex;flex-direction:column;gap:10px;} .hero-benefits li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:var(--blue-100);} .hero-benefits li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 8px 1px rgba(90,165,230,.7);flex-shrink:0;} /* Hero dashboard illustration */ .hero-visual{position:relative;height:480px;} .dash-card{ position:absolute;background:var(--white);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);border:1px solid var(--border-soft); } .dash-main{ left:6%;right:6%;top:6%;bottom:6%;padding:22px; display:flex;flex-direction:column;gap:14px; animation:floatY 7s ease-in-out infinite; } .dash-main-head{display:flex;align-items:center;justify-content:space-between;} .dash-dots{display:flex;gap:6px;} .dash-dots span{width:9px;height:9px;border-radius:50%;background:var(--border);} .dash-dots span:nth-child(1){background:#f0a5a5;} .dash-dots span:nth-child(2){background:#f3d08a;} .dash-dots span:nth-child(3){background:#9adbb0;} .dash-title{font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--navy-900);} .dash-modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} /* min-width:0 prevents a classic CSS grid blowout: without it, a grid item's default min-width is its content's min-content size, so a word like "Customers" would force its 1fr track (and every ancestor up to the hero visual) wider than the available space on narrow screens. */ .dash-mod{background:var(--blue-50);border:1px solid var(--border-soft);border-radius:12px;padding:12px 10px;text-align:center;min-width:0;} .dash-mod span{overflow-wrap:break-word;} .dash-mod svg{width:20px;height:20px;margin:0 auto 6px;color:var(--blue-600);} .dash-mod span{display:block;font-size:.72rem;font-weight:650;color:var(--navy-800);} .dash-chart{flex:1;background:var(--blue-50);border-radius:12px;border:1px solid var(--border-soft);padding:14px;display:flex;align-items:flex-end;gap:6px;} .dash-chart i{display:block;flex:1;background:linear-gradient(180deg,var(--blue-500),var(--blue-600));border-radius:4px 4px 0 0;} .dash-ai-panel{ background:var(--grad-navy);border-radius:12px;padding:12px 14px; display:flex;align-items:center;gap:10px;color:var(--white); } .dash-ai-panel .dot{width:9px;height:9px;border-radius:50%;background:#6bdc9d;flex-shrink:0;box-shadow:0 0 0 4px rgba(107,220,157,.25);} .dash-ai-panel span{font-size:.78rem;font-weight:600;} .float-label{ position:absolute;background:var(--white);border:1px solid var(--border); border-radius:var(--radius-pill);padding:9px 16px;box-shadow:var(--shadow-md); font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--navy-800); display:flex;align-items:center;gap:7px; } .float-label .fdot{width:7px;height:7px;border-radius:50%;background:var(--blue-600);} .float-1{top:2%;left:-4%;animation:floatY 6s ease-in-out infinite;} .float-2{top:20%;right:-8%;animation:floatY 5.5s ease-in-out infinite .4s;} .float-3{bottom:14%;left:-9%;animation:floatY 6.5s ease-in-out infinite .8s;} .float-4{bottom:-2%;right:6%;animation:floatY 6.2s ease-in-out infinite 1.1s;} @keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} @media (prefers-reduced-motion:reduce){ .dash-main,.float-1,.float-2,.float-3,.float-4,.hero::before,.hero::after{animation:none;} } /* Generic page hero (inner pages) */ .page-hero{background:var(--grad-navy);color:var(--white);padding:calc(var(--gap-xl) + 20px) 0 var(--gap-xl);position:relative;overflow:hidden;} .page-hero::after{content:"";position:absolute;bottom:-160px;left:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(28,114,191,.35),transparent 70%);border-radius:50%;} .page-hero h1{color:var(--white);position:relative;z-index:2;} .page-hero p.lead{color:var(--blue-100);font-size:1.12rem;max-width:640px;margin-top:16px;position:relative;z-index:2;} .breadcrumbs{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--blue-200);margin-bottom:18px;flex-wrap:wrap;position:relative;z-index:2;} .breadcrumbs a{color:var(--blue-200);font-weight:600;} .breadcrumbs a:hover{color:var(--white);} .breadcrumbs span{opacity:.5;} /* ========================================================================= 8. SECTIONS (shared patterns) ========================================================================= */ .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:start;} .tool-chaos{display:flex;flex-wrap:wrap;gap:10px;} .tool-chip{ background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill); padding:10px 16px;font-weight:650;font-size:.88rem;color:var(--ink-soft); display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm); } .tool-chip .x{color:#d16565;font-weight:800;} .arrow-divider{display:flex;align-items:center;justify-content:center;color:var(--blue-600);margin:22px 0;} .arrow-divider svg{width:28px;height:28px;} .checklist{display:flex;flex-direction:column;gap:14px;} .checklist li{display:flex;gap:12px;align-items:flex-start;} .checklist .ico{ width:26px;height:26px;border-radius:50%;background:var(--blue-600);color:var(--white); display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px; } .checklist .ico svg{width:14px;height:14px;} .checklist strong{display:block;color:var(--navy-900);} .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step;} .process-step{position:relative;padding-top:8px;} .process-step .num{ font-family:var(--font-head);font-weight:800;font-size:2.2rem;color:var(--blue-200); line-height:1;margin-bottom:12px; } .process-step h4{margin-bottom:8px;} .process-step p{font-size:.94rem;} .faq-item{border-bottom:1px solid var(--border);} .faq-q{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 4px;font-family:var(--font-head);font-weight:650;font-size:1.02rem; color:var(--navy-900);text-align:left;width:100%; } .faq-q .plus{width:20px;height:20px;flex-shrink:0;position:relative;} .faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--blue-600);border-radius:2px;transition:transform .25s var(--ease);} .faq-q .plus::before{width:100%;height:2.5px;top:50%;left:0;transform:translateY(-50%);} .faq-q .plus::after{height:100%;width:2.5px;left:50%;top:0;transform:translateX(-50%);} .faq-item.is-open .faq-q .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);} .faq-item.is-open .faq-a{max-height:400px;} .faq-a-inner{padding:0 4px 22px;} .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .stat{text-align:center;} .stat .num{font-family:var(--font-head);font-weight:800;font-size:2.3rem;color:var(--navy-900);} .stat .lbl{font-size:.88rem;color:var(--grey-600);font-weight:600;} .bg-navy .stat .num{color:var(--white);} .bg-navy .stat .lbl{color:var(--blue-200);} .cta-band{ background:var(--grad-navy);border-radius:var(--radius-lg); padding:64px 56px;text-align:center;position:relative;overflow:hidden; } .cta-band::before{content:"";position:absolute;top:-140px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(28,114,191,.4),transparent 70%);} .cta-band h2{color:var(--white);position:relative;z-index:2;margin-bottom:14px;} .cta-band p{color:var(--blue-100);position:relative;z-index:2;max-width:560px;margin:0 auto 30px;} .cta-band .btn-row{position:relative;z-index:2;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;} /* Hostinger "official partner" band. Deliberately uses its own purple accent (Hostinger's brand color) instead of Voisys blue — the same way a "partner"/"as featured in" band on most sites borrows a bit of the partner's own brand identity — scoped entirely to these .partner-* classes so it never leaks into the rest of the palette. */ .partner-band{ position:relative;overflow:hidden;border-radius:var(--radius-lg); background:linear-gradient(135deg,#f4f1fd 0%,#ece6fb 100%); padding:52px 48px; } .partner-band::after{ content:"";position:absolute;bottom:-160px;right:-120px;width:440px;height:440px; background:radial-gradient(circle,rgba(91,63,214,.16) 0%,transparent 70%); border-radius:50%;pointer-events:none; } .partner-grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:40px;align-items:center;position:relative;z-index:2;} .partner-eyebrow{font-family:var(--font-head);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#5b3fd6;margin-bottom:12px;display:block;} .partner-intro h2{font-size:1.65rem;line-height:1.25;margin-bottom:14px;} .partner-intro h2 .accent-purple{color:#5b3fd6;} .partner-intro>p{font-size:.94rem;margin-bottom:22px;} .partner-chips{display:flex;flex-wrap:wrap;gap:10px;} .partner-chip{ display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--radius-pill); background:rgba(255,255,255,.75);border:1px solid rgba(91,63,214,.18);font-size:.84rem;font-weight:650;color:#3d2a91; } .partner-chip svg{width:15px;height:15px;color:#5b3fd6;flex-shrink:0;} .partner-badge{text-align:center;} .partner-wordmark{font-family:var(--font-head);font-weight:800;font-size:1.85rem;color:#5b3fd6;letter-spacing:-.01em;margin-bottom:4px;} .partner-tagline{font-size:.84rem;color:var(--grey-600);margin-bottom:24px;} .partner-features{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;text-align:left;max-width:340px;margin:0 auto;} .partner-features li{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:650;color:var(--navy-900);} .partner-features svg{width:14px;height:14px;color:#5b3fd6;flex-shrink:0;} .partner-why h4{font-size:.9rem;text-align:center;margin-bottom:14px;color:var(--navy-900);} .partner-why ul{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;} .partner-why li{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;color:var(--ink-soft);text-align:center;} .partner-why svg{width:13px;height:13px;color:#5b3fd6;flex-shrink:0;} .partner-cta-wrap{text-align:center;} .partner-cta{ display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-pill); background:#5b3fd6;color:var(--white);font-family:var(--font-head);font-weight:650;font-size:.98rem; box-shadow:0 10px 26px rgba(91,63,214,.32);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease); } .partner-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(91,63,214,.4);background:#4c32c2;} .partner-cta svg{width:16px;height:16px;} .partner-discount{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.82rem;font-weight:700;color:#5b3fd6;} .partner-disclosure{font-size:.76rem;color:var(--grey-600);margin-top:10px;max-width:270px;margin-left:auto;margin-right:auto;} .partner-secondary-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.85rem;font-weight:650;color:#5b3fd6;} .partner-secondary-link svg{width:14px;height:14px;transition:transform .25s var(--ease);} .partner-secondary-link:hover svg{transform:translateX(3px);} /* ------------------------------------------------------------------------- Hostinger Channel Partner landing page — purple accent shared with the .partner-* homepage section above, scoped to hostinger-partner.php ------------------------------------------------------------------------- */ .btn-purple{background:#5b3fd6;color:var(--white);box-shadow:0 10px 26px rgba(91,63,214,.32);} .btn-purple:hover{background:#4c32c2;transform:translateY(-2px);box-shadow:0 14px 32px rgba(91,63,214,.4);} .hostinger-hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:20px;position:relative;z-index:2;} .hostinger-hero-badge{height:40px;width:auto;display:block;} .hostinger-card .ico-box{background:rgba(91,63,214,.12);} .hostinger-card .ico-box svg{color:#5b3fd6;} .hostinger-card .card-link{color:#5b3fd6;} /* Long-form article prose (blog posts) */ .blog-body-content h2{margin-top:2.2em;margin-bottom:.6em;font-size:1.5rem;} .blog-body-content h3{margin-top:1.7em;margin-bottom:.5em;font-size:1.18rem;} .blog-body-content p{margin-bottom:1.1em;} .blog-body-content ul,.blog-body-content ol{margin:0 0 1.1em 1.3em;color:var(--ink-soft);} .blog-body-content ul{list-style:disc;} .blog-body-content ol{list-style:decimal;} .blog-body-content li{margin-bottom:.5em;} .blog-body-content li::marker{color:var(--blue-600);} .blog-body-content blockquote{ border-left:3px solid var(--blue-600);padding:4px 0 4px 22px;margin:1.6em 0; font-style:italic;color:var(--navy-800);font-size:1.05rem; } .blog-body-content .table-wrap{overflow-x:auto;margin:1.8em 0;border:1px solid var(--border);border-radius:var(--radius-md);} .blog-body-content table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;} .blog-body-content th,.blog-body-content td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);} .blog-body-content th{background:var(--blue-50);font-family:var(--font-head);font-weight:700;color:var(--navy-900);} .blog-body-content tr:last-child td{border-bottom:none;} .blog-callout{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--radius-md);padding:22px 26px;margin:1.8em 0;} .blog-callout p{margin:0;color:var(--navy-800);} .blog-related-links{display:flex;flex-wrap:wrap;gap:10px;margin:1.4em 0;} .disclosure-note{font-size:.82rem;color:var(--grey-600);margin-top:8px;} /* ========================================================================= 9. CARDS ========================================================================= */ .card{ background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md); padding:30px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue-200);} .card .ico-box{ width:52px;height:52px;border-radius:14px;background:var(--blue-50); display:flex;align-items:center;justify-content:center;margin-bottom:18px; } .card .ico-box svg{width:26px;height:26px;color:var(--blue-600);} .card h3{font-size:1.2rem;margin-bottom:10px;} .card p{font-size:.95rem;} .card .card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:650;color:var(--blue-600);font-size:.92rem;} .card .card-link svg{width:14px;height:14px;transition:transform .25s var(--ease);} .card:hover .card-link svg{transform:translate(3px,-3px);} /* "Our Core Services" — Make / Market / Maintain, three accent-colored cards. Colors reuse existing tokens (--blue-600/--success/--warn) rather than introducing new ones, so it stays consistent with the rest of the palette. */ .core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;} .core-card{ position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg); padding:34px 30px 30px;display:flex;flex-direction:column;min-width:0; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .core-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-200);} .core-num{position:absolute;top:30px;right:30px;font-family:var(--font-head);font-weight:800;font-size:1.05rem;} .core-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;flex-shrink:0;} .core-icon svg{width:26px;height:26px;} .core-card h3{font-size:1.35rem;margin-bottom:2px;} .core-card .core-sub{display:block;font-weight:700;font-size:.9rem;margin-bottom:14px;} .core-card>p{font-size:.95rem;margin-bottom:20px;} .core-checklist{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;} .core-checklist li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--ink-soft);font-weight:600;} .core-checklist .ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;} .core-checklist .ico svg{width:11px;height:11px;color:var(--white);} .core-cta{ display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--radius-pill); font-family:var(--font-head);font-weight:650;font-size:.92rem;border:1.5px solid; transition:transform .25s var(--ease),background .25s var(--ease);margin-top:auto;align-self:flex-start; } .core-cta svg{width:15px;height:15px;transition:transform .25s var(--ease);flex-shrink:0;} .core-cta:hover{transform:translateY(-2px);} .core-cta:hover svg{transform:translate(3px,-3px);} .core-card.accent-blue .core-icon{background:var(--blue-50);} .core-card.accent-blue .core-icon svg{color:var(--blue-600);} .core-card.accent-blue .core-sub{color:var(--blue-600);} .core-card.accent-blue .core-num{color:var(--blue-200);} .core-card.accent-blue .core-checklist .ico{background:var(--blue-600);} .core-card.accent-blue .core-cta{border-color:var(--blue-600);color:var(--blue-600);} .core-card.accent-blue .core-cta:hover{background:var(--blue-50);} .core-card.accent-green .core-icon{background:#e9f7ee;} .core-card.accent-green .core-icon svg{color:var(--success);} .core-card.accent-green .core-sub{color:var(--success);} .core-card.accent-green .core-num{color:#bfe6d2;} .core-card.accent-green .core-checklist .ico{background:var(--success);} .core-card.accent-green .core-cta{border-color:var(--success);color:var(--success);} .core-card.accent-green .core-cta:hover{background:#e9f7ee;} .core-card.accent-orange .core-icon{background:#fdf1e3;} .core-card.accent-orange .core-icon svg{color:var(--warn);} .core-card.accent-orange .core-sub{color:var(--warn);} .core-card.accent-orange .core-num{color:#f3d5a6;} .core-card.accent-orange .core-checklist .ico{background:var(--warn);} .core-card.accent-orange .core-cta{border-color:var(--warn);color:var(--warn);} .core-card.accent-orange .core-cta:hover{background:#fdf1e3;} .build-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;} .build-card{ background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md); padding:24px 20px;text-align:left;transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .build-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);} .build-card .ico-box{width:44px;height:44px;border-radius:12px;} .build-card .ico-box svg{width:22px;height:22px;} .build-card h3{font-size:1.02rem;margin-bottom:6px;} .build-card p{font-size:.86rem;} .industry-card{ position:relative;border-radius:var(--radius-md);overflow:hidden;padding:28px 24px; background:var(--grad-navy);color:var(--white);min-height:180px; display:flex;flex-direction:column;justify-content:flex-end; transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .industry-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);} .industry-card svg{width:30px;height:30px;color:var(--blue-200);margin-bottom:14px;} .industry-card h3{color:var(--white);font-size:1.08rem;margin-bottom:6px;} .industry-card p{color:var(--blue-100);font-size:.86rem;} .work-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--white);transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .work-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);} .work-thumb{height:190px;background:var(--grad-navy);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;} .work-thumb svg{width:64px;height:64px;color:rgba(255,255,255,.28);} .work-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:var(--white);font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);letter-spacing:.03em;} .work-body{padding:22px;} .work-body h3{font-size:1.08rem;margin-bottom:8px;} .work-body p{font-size:.92rem;} .work-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .work-meta span{background:var(--blue-50);color:var(--blue-600);font-size:.76rem;font-weight:650;padding:5px 10px;border-radius:var(--radius-pill);} .result-strip{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap;} .result-strip div{font-size:.84rem;color:var(--grey-600);} .result-strip strong{display:block;font-family:var(--font-head);color:var(--navy-900);font-size:1.3rem;} .blog-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--white);transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);} .blog-thumb{height:170px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;} .blog-thumb svg{width:46px;height:46px;color:var(--blue-400);} .blog-body{padding:22px;} .blog-cat{color:var(--blue-600);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;} .blog-body h3{font-size:1.06rem;margin:8px 0;} .blog-meta{font-size:.8rem;color:var(--grey-600);margin-top:14px;} /* Carousel / slider component (portfolio strip on the homepage, the case-study slider on case-studies.php). Native CSS scroll-snap does the sliding — no external library — assets/js/carousel.js only drives the prev/next buttons and the dot indicators. */ .carousel-wrap{position:relative;} .carousel-track{ display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding-bottom:4px;margin:0 -4px;padding-left:4px;padding-right:4px; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .carousel-track::-webkit-scrollbar{display:none;} .carousel-track>*{scroll-snap-align:start;flex-shrink:0;min-width:0;} .carousel-track.is-multi>*{width:calc((100% - 2*20px)/3);min-width:240px;} .carousel-track.is-single{gap:0;margin:0;padding:0;} .carousel-track.is-single>*{width:100%;} .carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px;} .carousel-arrow{ width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border); background:var(--white);display:flex;align-items:center;justify-content:center; color:var(--navy-900);transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);flex-shrink:0; } .carousel-arrow:hover{border-color:var(--blue-600);color:var(--blue-600);transform:translateY(-2px);} .carousel-arrow svg{width:18px;height:18px;} .carousel-arrow.prev svg{transform:scaleX(-1);} .carousel-arrow:disabled{opacity:.35;pointer-events:none;transform:none;} .carousel-dots{display:flex;align-items:center;gap:8px;} .carousel-dots button{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s var(--ease),width .2s var(--ease);flex-shrink:0;} .carousel-dots button.is-active{background:var(--blue-600);width:22px;border-radius:4px;} .carousel-figure{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--white);box-shadow:var(--shadow-sm);transition:box-shadow .3s var(--ease),transform .3s var(--ease);} .carousel-figure:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);} .carousel-figure img{width:100%;height:100%;display:block;object-fit:cover;} .carousel-figure .carousel-tag{position:absolute;top:14px;left:14px;background:rgba(13,37,68,.72);backdrop-filter:blur(6px);color:var(--white);font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);letter-spacing:.03em;} .portfolio-figure{aspect-ratio:1/1;} .case-figure{aspect-ratio:3/2;} /* ========================================================================= 9a. VIDEO EMBED (homepage "See it in action") "Lite" YouTube embed: shows the thumbnail + a play button only, and swaps in the real iframe (assets/js/video-embed.js) on click/keypress — avoids loading YouTube's iframe/JS on every homepage visit just for a video most visitors won't play. ========================================================================= */ .video-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;} .lite-youtube{ position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden; background:var(--navy-950);box-shadow:var(--shadow-lg);cursor:pointer; } .lite-youtube img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .25s var(--ease),transform .4s var(--ease);} .lite-youtube:hover img{opacity:1;transform:scale(1.03);} .lite-youtube iframe{width:100%;height:100%;display:block;border:0;} .lite-youtube-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:76px;height:76px;border-radius:50%; background:rgba(255,255,255,.95);color:var(--blue-600); display:flex;align-items:center;justify-content:center; box-shadow:0 8px 28px rgba(0,0,0,.35); transition:transform .25s var(--ease),background .25s var(--ease); } .lite-youtube-play svg{width:30px;height:30px;margin-left:4px;} .lite-youtube:hover .lite-youtube-play,.lite-youtube:focus-visible .lite-youtube-play{transform:translate(-50%,-50%) scale(1.08);background:var(--white);} .lite-youtube:focus-visible{outline:3px solid var(--blue-600);outline-offset:3px;} /* ========================================================================= 10. TEAM ========================================================================= */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;} .team-card{ background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg); overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease); display:flex;flex-direction:column; } .team-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);} .team-avatar{background:var(--grad-navy);padding:30px 20px 20px;position:relative;overflow:hidden;} .team-avatar::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(28,114,191,.5),transparent 60%);} .team-avatar svg{width:100%;height:auto;position:relative;z-index:2;} .team-info{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;} .team-name{font-family:var(--font-head);font-weight:700;font-size:1.12rem;color:var(--navy-900);} .team-dept{color:var(--blue-600);font-weight:650;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;} .team-desc{font-size:.9rem;color:var(--ink-soft);} .team-personality{font-size:.86rem;font-style:italic;color:var(--grey-600);border-left:3px solid var(--blue-200);padding-left:12px;} .team-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;} .team-skills span{background:var(--blue-50);color:var(--navy-800);font-size:.74rem;font-weight:650;padding:4px 10px;border-radius:var(--radius-pill);} .team-cta{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--blue-600);font-size:.92rem;} .team-cta svg{width:14px;height:14px;transition:transform .25s var(--ease);} .team-card:hover .team-cta svg{transform:translate(3px,-3px);} /* Footer AI-team strip */ .footer-team{padding:56px 0 48px;border-bottom:1px solid rgba(255,255,255,.1);} .footer-team-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap;} .footer-team-head h2{color:var(--white);font-size:1.5rem;margin-bottom:6px;} .footer-team-head p{color:var(--blue-200);font-size:.95rem;} .footer-team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;} .fmini-card{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md); padding:18px 16px;transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s; } .fmini-card:hover{background:rgba(255,255,255,.09);transform:translateY(-4px);border-color:rgba(255,255,255,.25);} .fmini-avatar{width:100%;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(135deg,var(--blue-600),var(--navy-700));display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden;} .fmini-avatar svg{width:70%;height:70%;} .fmini-card h4{color:var(--white);font-size:.92rem;margin-bottom:2px;} .fmini-card span{color:var(--blue-200);font-size:.76rem;font-weight:600;} .fmini-all{ display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px; border:1.5px dashed rgba(255,255,255,.3);border-radius:var(--radius-md);padding:18px 16px; transition:border-color .25s var(--ease),background .25s var(--ease);color:var(--white); } .fmini-all:hover{border-color:var(--white);background:rgba(255,255,255,.06);} .fmini-all svg{width:26px;height:26px;color:var(--blue-200);} .fmini-all strong{font-size:.88rem;line-height:1.3;} .fmini-all small{color:var(--blue-200);font-weight:650;display:flex;align-items:center;gap:4px;} /* ========================================================================= 11. FORMS ========================================================================= */ .form-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-md);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;} .form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;} .form-field label{font-weight:650;font-size:.92rem;color:var(--navy-900);} .form-field label .req{color:#d16565;} .form-field input,.form-field select,.form-field textarea{ padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm); /* 16px (not .98rem/~15.7px) on purpose — anything smaller makes iOS Safari auto-zoom the whole page in on focus, which felt broken on a phone even though nothing was actually laid out wrong. */ font-size:16px;font-family:var(--font-body);background:var(--blue-50);color:var(--ink); transition:border-color .2s var(--ease),background .2s var(--ease);width:100%; } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none;border-color:var(--blue-600);background:var(--white); } .form-field textarea{resize:vertical;min-height:130px;} .form-hint{font-size:.8rem;color:var(--grey-600);} .need-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;} .need-opt{position:relative;} .need-opt input{position:absolute;opacity:0;} .need-opt label{ display:flex;align-items:center;justify-content:center;text-align:center; padding:12px 8px;border:1.5px solid var(--border);border-radius:var(--radius-sm); font-size:.82rem;font-weight:650;color:var(--ink-soft);cursor:pointer; transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);min-height:52px; } .need-opt input:checked+label{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-600);} .need-opt input:focus-visible+label{outline:2px solid var(--blue-600);outline-offset:2px;} .form-msg{padding:16px 20px;border-radius:var(--radius-sm);margin-bottom:22px;font-weight:600;font-size:.94rem;} .form-msg.success{background:#e9f8f0;color:var(--success);border:1px solid #c3ecd7;} .form-msg.error{background:#fdedec;color:#c0392b;border:1px solid #f6cfcb;} .form-msg ul{margin-top:8px;padding-left:20px;list-style:disc;} .contact-side{display:flex;flex-direction:column;gap:26px;} .contact-info-item{display:flex;gap:14px;align-items:flex-start;} .contact-info-item .ico-box{width:44px;height:44px;flex-shrink:0;} .contact-info-item .ico-box svg{width:20px;height:20px;} .contact-info-item h4{margin-bottom:3px;} .contact-info-item p{font-size:.92rem;} /* ========================================================================= 12. FOOTER ========================================================================= */ .site-footer{background:var(--navy-950);color:var(--blue-100);} .footer-main{ padding:64px 0 40px; display:grid; grid-template-columns:minmax(240px,1.5fr) minmax(150px,1fr) minmax(150px,1fr) minmax(150px,1fr) minmax(200px,1.2fr); gap:48px; } .footer-col{min-width:0;} .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;} .footer-brand img{height:34px;width:auto;} .footer-brand-word{font-family:var(--font-head);font-weight:800;font-size:1.08rem;color:var(--white);} .footer-desc{font-size:.92rem;color:var(--blue-200);max-width:280px;margin-bottom:20px;} .footer-social{display:flex;gap:10px;} .footer-social a{ width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease); } .footer-social a svg{width:16px;height:16px;color:var(--white);} .footer-social a:hover{background:var(--blue-600);border-color:var(--blue-600);transform:translateY(-3px);} .footer-partner-badge{display:inline-block;margin-top:18px;line-height:0;border-radius:8px;transition:transform .2s var(--ease),opacity .2s var(--ease);} .footer-partner-badge:hover,.footer-partner-badge:focus-visible{transform:translateY(-2px);opacity:.9;} .footer-partner-badge img{display:block;height:30px;width:auto;} .footer-col h5{color:var(--white);font-family:var(--font-head);font-size:.86rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;} .footer-col ul{display:flex;flex-direction:column;gap:12px;} .footer-col a{font-size:.92rem;color:var(--blue-200);transition:color .2s var(--ease);word-break:break-word;} .footer-col a:hover{color:var(--white);} .footer-talk p{font-size:.92rem;color:var(--blue-200);margin-bottom:18px;} .footer-talk .btn{margin-bottom:16px;} .footer-email{font-size:.92rem;font-weight:650;color:var(--white);display:inline-flex;align-items:flex-start;gap:8px;word-break:normal;overflow-wrap:normal;} .footer-email .icon{flex-shrink:0;margin-top:2px;} .footer-cta{padding:52px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);} .footer-cta h2{color:var(--white);font-size:1.6rem;margin-bottom:20px;text-align:center;} .footer-cta-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:20px;} .footer-humor{text-align:center;color:var(--blue-200);font-size:.9rem;font-style:italic;} .footer-bottom{padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} .footer-bottom p{font-size:.84rem;color:var(--grey-400);} .footer-legal{display:flex;gap:20px;flex-wrap:wrap;} .footer-legal a{font-size:.84rem;color:var(--grey-400);} .footer-legal a:hover{color:var(--white);} /* ========================================================================= 12a. WHATSAPP FLOATING BUTTON Fixed bottom-right on every public page (added in footer.php so it's never in the admin panel). A slow "breathing" scale plus two staggered expanding rings signal it's tappable without being obnoxious; both pause on hover so the separate hover-scale transition can take over cleanly (mixing a running keyframe animation with a hover transition on the same property fights otherwise — pausing the animation avoids that). ========================================================================= */ .whatsapp-fab{ position:fixed;right:24px;bottom:24px;z-index:900; width:60px;height:60px;border-radius:50%; background:#25d366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.45),0 2px 10px rgba(13,37,68,.18); text-decoration:none; animation:wa-breathe 2.6s ease-in-out infinite; transition:transform .25s var(--ease),box-shadow .25s var(--ease); } .whatsapp-fab:hover,.whatsapp-fab:focus-visible{ animation-play-state:paused;transform:scale(1.1); box-shadow:0 10px 30px rgba(37,211,102,.55),0 2px 10px rgba(13,37,68,.22); } .whatsapp-fab:focus-visible{outline:2px solid var(--navy-900);outline-offset:3px;} .whatsapp-fab svg{width:30px;height:30px;position:relative;z-index:2;} .whatsapp-fab-ring{ position:absolute;inset:0;border-radius:50%;border:2px solid #25d366; animation:wa-ripple 2.6s ease-out infinite;pointer-events:none; } .whatsapp-fab-ring2{animation-delay:1.3s;} .whatsapp-fab:hover .whatsapp-fab-ring,.whatsapp-fab:focus-visible .whatsapp-fab-ring{animation-play-state:paused;opacity:0;} .whatsapp-fab-tip{ position:absolute;right:calc(100% + 14px);top:50%; transform:translateY(-50%) translateX(6px); background:var(--navy-900);color:#fff;font-size:.85rem;font-weight:650; padding:8px 14px;border-radius:var(--radius-pill);white-space:nowrap; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s; box-shadow:var(--shadow-md); } .whatsapp-fab-tip::after{ content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%); border:5px solid transparent;border-left-color:var(--navy-900); } .whatsapp-fab:hover .whatsapp-fab-tip,.whatsapp-fab:focus-visible .whatsapp-fab-tip{ opacity:1;visibility:visible;transform:translateY(-50%) translateX(0); } @keyframes wa-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}} @keyframes wa-ripple{0%{transform:scale(1);opacity:.55;}100%{transform:scale(1.9);opacity:0;}} @media (prefers-reduced-motion: reduce){ .whatsapp-fab{animation:none;} .whatsapp-fab-ring{animation:none;display:none;} } body.nav-open .whatsapp-fab{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s;} /* ========================================================================= 13. RESPONSIVE ========================================================================= */ @media (max-width:1180px){ .build-grid{grid-template-columns:repeat(3,1fr);} .footer-team-grid{grid-template-columns:repeat(3,1fr);} .team-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:1024px){ :root{--gap-2xl:84px;--gap-xl:56px;} .main-nav{display:none;} .hamburger{display:flex;} /* The header's inline "Let's talk" button is redundant once the hamburger is showing — the mobile nav panel has its own full-width CTA (.mobile-cta) — and at narrow widths (~320-360px) brand + button + hamburger don't all fit without overflowing the viewport. Simpler and more robust than chasing a pixel threshold: just drop it here. */ .header-actions .btn-header{display:none;} .hero-grid{grid-template-columns:1fr;} .core-grid{grid-template-columns:1fr;} .carousel-track.is-multi>*{width:calc((100% - 20px)/2);} .partner-grid{grid-template-columns:1fr;gap:36px;} .partner-band{padding:40px 28px;} /* width:100% is required here: .hero-visual's only children are position:absolute, so with margin:auto centering and no explicit width it has no content to shrink-to-fit against and collapses to 0. */ .hero-visual{width:100%;height:400px;max-width:520px;margin:0 auto;order:-1;} .problem-grid{grid-template-columns:1fr;} .video-split{grid-template-columns:1fr;gap:32px;} .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .process-steps{grid-template-columns:repeat(2,1fr);} .stat-row{grid-template-columns:repeat(2,1fr);} .footer-main{grid-template-columns:1fr 1fr;gap:36px;} .footer-col:first-child{grid-column:1 / -1;} } @media (max-width:860px){ .build-grid{grid-template-columns:repeat(2,1fr);} .team-grid{grid-template-columns:repeat(2,1fr);} .footer-team-grid{grid-template-columns:repeat(2,1fr);} .form-row{grid-template-columns:1fr;} .need-grid{grid-template-columns:repeat(3,1fr);} .contact-grid{grid-template-columns:1fr;} .contact-grid .contact-side{order:-1;} } @media (max-width:640px){ :root{--gap-2xl:64px;--gap-xl:44px;--header-h:68px;} .brand img{height:38px;} h1{font-size:clamp(2rem,8vw,2.6rem);} .container{padding:0 18px;} .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} .build-grid{grid-template-columns:1fr 1fr;gap:12px;} .team-grid{grid-template-columns:1fr;} .footer-team-grid{grid-template-columns:1fr 1fr;} .process-steps{grid-template-columns:1fr;} .stat-row{grid-template-columns:1fr 1fr;} .footer-main{grid-template-columns:1fr;gap:32px;padding:48px 0 32px;} .footer-bottom{flex-direction:column;align-items:flex-start;} .cta-band{padding:44px 26px;} .need-grid{grid-template-columns:repeat(2,1fr);} .hero-ctas{flex-direction:column;align-items:stretch;} .hero-ctas .btn{width:100%;} .work-thumb{height:160px;} .footer-cta-chips .chip-btn{font-size:.86rem;padding:10px 16px;} /* On narrow phones the dashboard card is too tight for the "ACCOUNTING" and "INVENTORY" floating labels not to sit on top of card content (they read fine as an overlapping badge on wider screens, but here they'd cover the AI panel text) — CRM and HR stay since they float clear of the card at every width. */ .float-2,.float-3{display:none;} .carousel-track.is-multi>*{width:82%;} .carousel-nav{gap:12px;} .partner-features{grid-template-columns:1fr;max-width:220px;} .whatsapp-fab{width:52px;height:52px;right:16px;bottom:16px;} .whatsapp-fab svg{width:26px;height:26px;} } @media (max-width:400px){ .footer-team-grid{grid-template-columns:1fr;} .build-grid{grid-template-columns:1fr;} } /* ========================================================================= 14. ACCESSIBILITY ========================================================================= */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:3px solid var(--blue-600);outline-offset:2px;border-radius:4px; } .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;} @media (prefers-contrast:more){ :root{--border:#9aa9c2;--grey-600:#3c4a61;} } /* ========================================================================= 15. ANIMATIONS ========================================================================= */ [data-animate]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);} [data-animate].in-view{opacity:1;transform:translateY(0);} [data-animate="fade"]{transform:none;} [data-animate="left"]{transform:translateX(-32px);} [data-animate="left"].in-view{transform:translateX(0);} [data-animate="right"]{transform:translateX(32px);} [data-animate="right"].in-view{transform:translateX(0);} [data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);} [data-stagger].in-view>*{opacity:1;transform:translateY(0);} [data-stagger].in-view>*:nth-child(1){transition-delay:.05s;} [data-stagger].in-view>*:nth-child(2){transition-delay:.12s;} [data-stagger].in-view>*:nth-child(3){transition-delay:.19s;} [data-stagger].in-view>*:nth-child(4){transition-delay:.26s;} [data-stagger].in-view>*:nth-child(5){transition-delay:.33s;} [data-stagger].in-view>*:nth-child(6){transition-delay:.4s;} [data-stagger].in-view>*:nth-child(7){transition-delay:.47s;} [data-stagger].in-view>*:nth-child(8){transition-delay:.54s;} [data-stagger].in-view>*:nth-child(9){transition-delay:.61s;} [data-stagger].in-view>*:nth-child(10){transition-delay:.68s;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;} [data-animate],[data-stagger]>*{opacity:1!important;transform:none!important;} } @media print{ .site-header,.mobile-nav,.hamburger,.hero-visual,.footer-team,.site-footer,.whatsapp-fab{display:none!important;} }