/* ZE Group design system — extracted from sample.html. :root values are defaults; per-page overrides are injected inline in . */ :root{ --navy-950:#081428; --navy-900:#0B1F3A; --navy-850:#0F2A4D; --navy-800:#123C69; --blue-600:#2E75D6; --blue-400:#6FA8F5; --white:#FFFFFF; --offwhite:#F3F6FA; --gold:#C9A24B; --line: rgba(255,255,255,0.10); --line-dark: rgba(11,31,58,0.10); --font-display:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:var(--font-body); color:var(--navy-900); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{display:block;max-width:100%;} a{text-decoration:none;color:inherit;} ul{list-style:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} .container{width:100%;max-width:1240px;margin:0 auto;padding:0 32px;} .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; display:flex;align-items:center;gap:10px; } .eyebrow::before{ content:""; width:22px;height:1px; background:currentColor; display:inline-block; } h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;} .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:14.5px; border-radius:2px; transition:all .25s ease; white-space:nowrap; } .btn-primary{ background:var(--blue-600); color:var(--white); } .btn-primary:hover{background:var(--blue-400);} .btn-outline{ background:transparent; border:1px solid var(--line); color:var(--white); } .btn-outline:hover{background:rgba(255,255,255,0.08);} .btn-arrow{transition:transform .25s ease;} .btn:hover .btn-arrow{transform:translateX(4px);} /* ===== BLUEPRINT GRID BACKGROUND (signature motif) ===== */ .blueprint-grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size:44px 44px; pointer-events:none; } .draft-line{ position:absolute; background:linear-gradient(90deg, transparent, var(--gold), transparent); height:1px; opacity:0.55; } /* ===== HEADER / MENU ===== */ header{ position:fixed;top:0;left:0;right:0; z-index:1000; background:rgba(8,20,40,0.0); border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease; } header.scrolled{ background:rgba(8,20,40,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav-wrap{ display:flex;align-items:center;justify-content:space-between; height:96px; } .logo{ display:flex;align-items:center;gap:11px; font-family:var(--font-display); font-size:19px;font-weight:700; color:var(--white); letter-spacing:0.01em; } /* Works for both square company logos and the wide wordmark. */ .logo img{ height:62px; width:auto; max-width:260px; object-fit:contain; border-radius:14px; filter:drop-shadow(0 8px 18px rgba(0,0,0,0.34)); transition:transform .3s ease; } .logo:hover img{transform:translateY(-1px) scale(1.02);} .logo-mark{ width:30px;height:30px;flex-shrink:0; } .nav-links{ display:flex;align-items:center;gap:38px; } .nav-links a{ font-size:14px;font-weight:500; color:rgba(255,255,255,0.82); position:relative; padding:6px 0; transition:color .2s ease; } .nav-links a::after{ content:""; position:absolute;left:0;bottom:0; width:0;height:1px;background:var(--gold); transition:width .25s ease; } .nav-links a:hover{color:var(--white);} .nav-links a:hover::after{width:100%;} .nav-right{display:flex;align-items:center;gap:22px;} .burger{ display:none;flex-direction:column;gap:5px; width:26px; } .burger span{height:2px;width:100%;background:var(--white);} .mobile-menu{ display:none; position:fixed;top:96px;left:0;right:0;bottom:0; background:var(--navy-950); z-index:999; padding:36px 32px; flex-direction:column;gap:26px; } .mobile-menu.open{display:flex;} .mobile-menu a{color:var(--white);font-size:20px;font-family:var(--font-display);} /* ===== HERO / SLIDER ===== */ .hero{ position:relative; height:100vh;min-height:640px; background:var(--navy-950); overflow:hidden; display:flex;align-items:center; } .slide{ position:absolute;inset:0; display:flex;align-items:center; opacity:0; transition:opacity 1s ease; pointer-events:none; } .slide.active{opacity:1;pointer-events:auto;} .slide-bg{ position:absolute;inset:0; background: radial-gradient(ellipse 900px 600px at 78% 30%, rgba(46,117,214,0.30), transparent 60%), linear-gradient(160deg, var(--navy-950) 10%, var(--navy-900) 55%, var(--navy-850) 100%); } .hero-content{ position:relative;z-index:2; max-width:660px; padding-top:40px; } .hero-content .eyebrow{color:var(--gold);margin-bottom:22px;} .hero-content h1{ font-size:clamp(38px,5.2vw,64px); line-height:1.06; color:var(--white); margin-bottom:22px; } .hero-content h1 em{color:var(--blue-400);font-style:normal;} .hero-content p{ font-size:17px;line-height:1.65; color:rgba(255,255,255,0.68); max-width:520px; margin-bottom:34px; } .hero-actions{display:flex;gap:16px;flex-wrap:wrap;} .slider-nav{ position:absolute; bottom:44px;left:0;right:0; z-index:3; display:flex;align-items:center;justify-content:space-between; } .slider-dots{display:flex;gap:12px;} .dot{ width:34px;height:3px;background:rgba(255,255,255,0.25); position:relative;overflow:hidden; transition:background .3s ease; } .dot .fill{ position:absolute;left:0;top:0;bottom:0;width:0%; background:var(--gold); } .dot.active .fill{animation:fillbar 6s linear forwards;} @keyframes fillbar{from{width:0%}to{width:100%}} .slider-arrows{display:flex;gap:10px;} .arrow-btn{ width:44px;height:44px; border:1px solid var(--line); color:var(--white); display:flex;align-items:center;justify-content:center; transition:background .2s ease; } .arrow-btn:hover{background:rgba(255,255,255,0.1);} .hero-index{ font-family:var(--font-mono); color:rgba(255,255,255,0.55); font-size:13px;letter-spacing:0.08em; } .hero-index b{color:var(--white);} .scroll-cue{ position:absolute;right:32px;top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center; font-family:var(--font-mono); font-size:11px;letter-spacing:0.2em; color:rgba(255,255,255,0.4); text-transform:uppercase; z-index:3; } /* ===== SECTION HEADERS (shared) ===== */ .section{padding:120px 0;position:relative;} .section-head{ max-width:640px; margin-bottom:64px; } .section-head .eyebrow{color:var(--blue-600);margin-bottom:16px;} .section-head h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.15; color:var(--navy-900); } .section-head p{ margin-top:18px; font-size:16px; color:#5A6B85; line-height:1.65; } .section-head.on-dark h2{color:var(--white);} .section-head.on-dark p{color:rgba(255,255,255,0.62);} .section-head.on-dark .eyebrow{color:var(--gold);} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} /* ===== ABOUT ===== */ .about{background:var(--white);} .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:72px; align-items:center; } .about-art{ position:relative; aspect-ratio:4/5; background:var(--navy-900); overflow:hidden; } .about-copy p{ font-size:16px;line-height:1.75; color:#425571; margin-bottom:18px; } .stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:40px; border-top:1px solid #E4E9F1; } .stat{padding:26px 20px 0 0;border-right:1px solid #E4E9F1;} .stat:last-child{border-right:none;} .stat b{ font-family:var(--font-display); font-size:34px; color:var(--navy-900); display:block; } .stat span{ font-family:var(--font-mono); font-size:12px; color:#7A8AA3; text-transform:uppercase; letter-spacing:0.06em; } /* ===== SERVICES ===== */ .services{background:var(--offwhite);} .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#DCE3ED; border:1px solid #DCE3ED; } .service-card{ background:var(--white); padding:44px 36px; transition:background .25s ease; } .service-card:hover{background:var(--navy-900);} .service-card:hover h3,.service-card:hover p{color:var(--white);} .service-card:hover .service-icon{background:var(--gold);} .service-card:hover .service-icon svg{stroke:var(--navy-950);} .service-icon{ width:52px;height:52px; background:var(--navy-900); display:flex;align-items:center;justify-content:center; margin-bottom:26px; transition:background .25s ease; } .service-icon svg{stroke:var(--white);transition:stroke .25s ease;} .service-card h3{ font-size:19px;color:var(--navy-900);margin-bottom:12px; transition:color .25s ease; } .service-card p{ font-size:14.5px;line-height:1.65;color:#5A6B85; transition:color .25s ease; } .service-num{ font-family:var(--font-mono); font-size:12px;color:#A6B2C4; margin-bottom:18px;display:block; } /* ===== TESTIMONIALS ===== */ .testimonials{ background:var(--navy-950); position:relative; overflow:hidden; } .testimonial-track-wrap{position:relative;max-width:780px;margin:0 auto;} .t-slide{display:none;text-align:center;} .t-slide.active{display:block;animation:fadeUp .6s ease;} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .quote-mark{ font-family:var(--font-display); font-size:80px;color:var(--gold); line-height:1;margin-bottom:8px; } .t-slide p.quote{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,27px); line-height:1.5; color:var(--white); margin-bottom:34px; font-weight:500; } .t-person{display:flex;align-items:center;justify-content:center;gap:14px;} .t-avatar{ width:46px;height:46px;border-radius:50%; background:var(--navy-800); display:flex;align-items:center;justify-content:center; color:var(--gold);font-family:var(--font-display);font-weight:700; border:1px solid rgba(201,162,75,0.4); } .t-meta{text-align:left;} .t-meta b{color:var(--white);font-size:14.5px;display:block;} .t-meta span{color:rgba(255,255,255,0.5);font-size:13px;} .t-dots{display:flex;justify-content:center;gap:9px;margin-top:48px;} .t-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.25);transition:background .2s ease;} .t-dot.active{background:var(--gold);} /* ===== CERTIFICATES ===== */ .certs{background:var(--white);} .cert-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; } .cert-badge{ border:1px solid #E4E9F1; padding:30px 18px; text-align:center; transition:border-color .25s ease, transform .25s ease; } .cert-badge:hover{border-color:var(--gold);transform:translateY(-4px);} .cert-badge svg{margin:0 auto 16px;stroke:var(--navy-900);} .cert-badge b{ display:block;font-family:var(--font-display);font-size:14.5px;color:var(--navy-900);margin-bottom:4px; } .cert-badge span{ font-family:var(--font-mono);font-size:11px;color:#8A97AC;text-transform:uppercase;letter-spacing:0.04em; } /* ===== BRANDS ===== */ .brands{background:var(--offwhite);} .brand-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:#DCE3ED;border:1px solid #DCE3ED; } .brand-logo{ background:var(--white); height:110px; display:flex;align-items:center;justify-content:center; padding:22px 26px; } .brand-logo img{ max-height:36px;max-width:100%;width:auto;height:auto; filter:grayscale(1);opacity:0.5; transition:filter .25s ease, opacity .25s ease; } .brand-logo:hover img{filter:grayscale(0);opacity:1;} /* ===== FOOTER ===== */ footer{background:var(--navy-950);color:rgba(255,255,255,0.65);position:relative;} .footer-top{ padding:80px 0 56px; display:grid; grid-template-columns:1.3fr 0.8fr 0.8fr 1.1fr; gap:48px; } .footer-brand .logo{margin-bottom:18px;} .footer-brand p{font-size:14.5px;line-height:1.7;max-width:280px;color:rgba(255,255,255,0.5);} .footer-social{display:flex;gap:12px;margin-top:24px;} .footer-social a{ width:36px;height:36px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center; transition:background .2s ease; } .footer-social a:hover{background:rgba(255,255,255,0.1);} .footer-col h4{ color:var(--white);font-size:13px;text-transform:uppercase;letter-spacing:0.08em; margin-bottom:22px;font-family:var(--font-mono);font-weight:600; } .footer-col ul li{margin-bottom:13px;} .footer-col ul li a{font-size:14.5px;transition:color .2s ease;} .footer-col ul li a:hover{color:var(--white);} .newsletter-form{ display:flex;margin-top:16px;border:1px solid var(--line); } .newsletter-form input{ flex:1;background:transparent;border:none;padding:13px 14px;color:var(--white);font-size:14px;font-family:var(--font-body); } .newsletter-form input::placeholder{color:rgba(255,255,255,0.4);} .newsletter-form button{ background:var(--gold);color:var(--navy-950);padding:0 18px;font-weight:600;font-size:13px; } .footer-bottom{ border-top:1px solid var(--line); padding:26px 0; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; font-size:13px;color:rgba(255,255,255,0.4); } .footer-bottom a{color:rgba(255,255,255,0.4);} .footer-bottom a:hover{color:var(--white);} /* ===== RESPONSIVE ===== */ @media (max-width:980px){ .nav-links{display:none;} .burger{display:flex;} .about-grid{grid-template-columns:1fr;gap:44px;} .services-grid{grid-template-columns:repeat(2,1fr);} .cert-grid{grid-template-columns:repeat(3,1fr);} .brand-grid{grid-template-columns:repeat(3,1fr);} .footer-top{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .container{padding:0 20px;} .section{padding:80px 0;} .services-grid{grid-template-columns:1fr;} .cert-grid{grid-template-columns:repeat(2,1fr);} .brand-grid{grid-template-columns:repeat(2,1fr);} .stat-row{grid-template-columns:1fr;} .stat{border-right:none;border-bottom:1px solid #E4E9F1;padding-bottom:20px;margin-bottom:16px;} .footer-top{grid-template-columns:1fr;padding:56px 0 40px;} .scroll-cue{display:none;} .hero-actions .btn{padding:12px 20px;font-size:13.5px;} } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;} } /* ================= CONTACT / CONSULTATION ================= */ .contact-section{ background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-950) 100%); color:var(--white); position:relative; overflow:hidden; } .contact-section::before{ content:"";position:absolute;top:-25%;right:-8%;width:560px;height:560px; background:radial-gradient(circle,rgba(46,117,214,0.22),transparent 70%); pointer-events:none; } .contact-grid{ display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start; position:relative;z-index:1; } .contact-intro .eyebrow{color:var(--gold);margin-bottom:18px;} .contact-intro h2{ font-size:clamp(28px,3.2vw,40px);line-height:1.15;color:var(--white);max-width:460px; } .contact-intro > p{ margin-top:18px;color:rgba(255,255,255,0.6);font-size:16px;line-height:1.65;max-width:430px; } .contact-points{margin-top:40px;display:flex;flex-direction:column;gap:18px;} .contact-points li{ display:flex;align-items:center;gap:14px; color:rgba(255,255,255,0.82);font-size:15px; } .contact-points .cp-ico{ flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:2px; display:flex;align-items:center;justify-content:center;color:var(--blue-400); } /* Form card */ .contact-form{ background:var(--white); padding:38px; border-radius:4px; box-shadow:0 32px 64px -24px rgba(3,10,24,0.55); } .contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .field{display:flex;flex-direction:column;margin-bottom:18px;} .field label{ font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase; color:var(--navy-800);margin-bottom:8px; } .field input,.field textarea{ font-family:var(--font-body);font-size:15px;color:var(--navy-900);width:100%; background:var(--offwhite);border:1px solid transparent;border-radius:2px;padding:13px 14px; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; } .field input::placeholder,.field textarea::placeholder{color:#9AA7BC;} .field input:focus,.field textarea:focus{ outline:none;border-color:var(--blue-600);background:var(--white); box-shadow:0 0 0 3px rgba(46,117,214,0.12); } .field textarea{resize:vertical;min-height:120px;line-height:1.6;} .contact-form .btn{width:100%;justify-content:center;margin-top:4px;} .hp-field{display:none;} .form-note{margin-top:14px;font-size:13.5px;text-align:center;min-height:18px;line-height:1.5;} .form-note.success{color:#3BB273;} .form-note.error{color:#E06B66;} .contact-form.is-sending .btn{opacity:0.7;pointer-events:none;} @media (max-width:860px){ .contact-grid{grid-template-columns:1fr;gap:40px;} .contact-form .form-row{grid-template-columns:1fr;} .contact-form{padding:26px;} } /* Header spacing when a section other than the hero is first */ body:not(.home) .site-main > .section:first-child{padding-top:160px;} /* ===== ADMIN BAR OFFSET ===== */ /* The fixed header + mobile menu sit under the WP admin bar for logged-in users, so push them down by the bar height (matches WP's breakpoints). */ @media screen and (min-width:783px){ body.admin-bar header{top:32px;} body.admin-bar .mobile-menu{top:calc(96px + 32px);} } @media screen and (max-width:782px){ body.admin-bar header{top:46px;} body.admin-bar .mobile-menu{top:calc(96px + 46px);} }