/* Theme Name: GnB Human Capital Theme URI: https://gnbhumancapital.co.za Author: GnB Human Capital Description: Custom one-page corporate HR theme for GnB Human Capital, converted from a Google AI Studio landing page. Includes hero, services grid with interactive modals, video showcases, values/pillars, blog, contact form, floating WhatsApp widget, and cookie consent banner. Version: 1.0.0 Requires PHP: 7.4 Text Domain: gnb-human-capital */ /* ========================================================================== 1. DESIGN TOKENS ========================================================================== */ :root{ --brand-blue:#0b2e59; --brand-navy:#0a2540; --brand-navy-deep:#05162b; --brand-slate:#1b4b72; --brand-teal:#0284c7; --brand-gray:#7d8c9e; --brand-silver:#f8fafc; --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-300:#7dd3fc; --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a; --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-500:#10b981; --whatsapp:#25D366; --whatsapp-dark:#20ba56; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; --container-max: 1700px; --ease-out-soft: cubic-bezier(.25,.8,.25,1); } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip;overflow-y:visible} body{ font-family:var(--font-sans); background:#fff; color:var(--slate-900); -webkit-font-smoothing:antialiased; /* NOTE: overflow-x must not be set on \u2014 doing so turns body into a positioning/clipping context in most browsers, which breaks position:fixed elements (like .site-header) and makes them clip/cut off at the top edge instead of pinning to the real viewport. Horizontal-scroll containment is handled per-section instead (each section already has overflow:hidden). */ } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} ul{list-style:none} input,textarea,select{font:inherit} ::selection{background:var(--sky-500);color:#fff} .container{max-width:var(--container-max);margin:0 auto;padding:0 24px} @media(min-width:1024px){.container{padding:0 64px}} @media(min-width:1280px){.container{padding:0 96px}} /* Scroll reveal (approximates framer-motion whileInView) */ [data-animate]{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease-out-soft),transform .6s var(--ease-out-soft)} [data-animate].is-visible{opacity:1;transform:translateY(0)} [data-animate="scale"]{transform:scale(.95)} [data-animate="scale"].is-visible{transform:scale(1)} [data-animate="left"]{transform:translateX(-35px)} [data-animate="left"].is-visible{transform:translateX(0)} [data-animate="right"]{transform:translateX(35px)} [data-animate="right"].is-visible{transform:translateX(0)} /* ========================================================================== 3. HEADER / NAV ========================================================================== */ .site-header{ position:fixed;top:0;left:0;width:100%;z-index:50; padding:20px 0; background:transparent; transition:all .3s ease; } .site-header.is-scrolled{ background:rgba(255,255,255,.95); backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,.06); padding:12px 0; border-bottom:1px solid var(--slate-100); } .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px} .site-logo{display:flex;align-items:center;background:none;border:none;cursor:pointer} .site-logo svg{height:44px;width:auto} @media(min-width:640px){.site-logo svg{height:48px}} .main-nav{display:none;align-items:center;gap:8px} @media(min-width:768px){.main-nav{display:flex}} .main-nav a{ font-size:14px;font-weight:700;letter-spacing:.02em; padding:8px 14px;border-radius:8px; color:var(--slate-600); border:1px solid transparent; transition:all .3s ease; white-space:nowrap; } .main-nav a:hover{ color:var(--brand-blue);background:#fff;border-color:var(--brand-navy); box-shadow:4px 4px 0 0 var(--brand-navy); transform:translate(-4px,-4px); } .main-nav a.is-active{ color:var(--brand-blue);background:#fff;border-color:var(--brand-navy); box-shadow:3px 3px 0 0 var(--brand-navy); transform:translate(-2px,-2px); } .btn-consult-wrap{display:none} @media(min-width:768px){.btn-consult-wrap{display:flex;align-items:center}} .mobile-toggle{display:flex;align-items:center;padding:8px;border-radius:8px;color:var(--brand-blue)} .mobile-toggle:hover{background:var(--slate-100)} @media(min-width:768px){.mobile-toggle{display:none}} .mobile-toggle svg{width:24px;height:24px} .mobile-nav{ display:none; background:#fff;border-top:1px solid var(--slate-100);box-shadow:0 20px 40px rgba(0,0,0,.08); max-height:0;overflow:hidden;transition:max-height .35s ease; } .mobile-nav.is-open{display:block;max-height:600px} .mobile-nav-inner{padding:24px;display:flex;flex-direction:column;gap:12px} .mobile-nav a{ text-align:left;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600; letter-spacing:.03em;text-transform:uppercase;color:var(--slate-600);transition:all .2s ease; } .mobile-nav a:hover{background:var(--slate-50);color:var(--brand-blue)} .mobile-nav a.is-active{background:var(--sky-50);color:var(--brand-blue);border-left:4px solid var(--sky-400);font-weight:700} /* ========================================================================== 4. BUTTONS ========================================================================== */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase; padding:16px 32px;border-radius:999px;overflow:hidden; transition:all .3s ease;cursor:pointer;white-space:nowrap; } .btn svg{width:14px;height:14px;transition:transform .3s ease} .btn::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform:translateX(-100%);transition:transform 1s ease; } .btn:hover::after{transform:translateX(100%)} .btn:hover{transform:translateY(-4px)} .btn:active{transform:translateY(0)} .btn:hover svg{transform:translateX(4px)} .btn-navy{background:var(--brand-navy);color:#fff;box-shadow:0 10px 25px rgba(10,37,64,.15)} .btn-navy:hover{background:var(--brand-blue);box-shadow:0 20px 40px rgba(10,37,64,.25)} .btn-sky{background:var(--sky-400);color:#fff;box-shadow:0 10px 25px rgba(56,189,248,.2)} .btn-sky:hover{background:var(--sky-500);box-shadow:0 20px 40px rgba(56,189,248,.3)} .btn-blue{background:var(--brand-blue);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12)} .btn-blue:hover{background:var(--brand-navy);box-shadow:0 20px 30px rgba(0,0,0,.18)} .btn-block{width:100%} .btn-sm{padding:14px 24px} .btn[disabled]{opacity:.5;cursor:default} .btn-consult .icon-spark{transition:transform .3s ease} .btn-consult:hover .icon-spark{transform:rotate(12deg)} .btn-ghost{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; padding:12px 24px;border-radius:999px;color:var(--slate-500);transition:all .2s ease; } .btn-ghost:hover{color:var(--slate-800);background:var(--slate-100)} /* ========================================================================== 5. DOT GRID DECORATION ========================================================================== */ .dot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;opacity:.35;pointer-events:none} .dot-grid span{display:block;width:6px;height:6px;border-radius:999px;background:var(--sky-300)} /* ========================================================================== 6. HERO ========================================================================== */ .hero{ position:relative;min-height:95vh;display:flex;align-items:center; overflow:hidden;background:#f8fafc;padding:120px 0 64px; } @media(min-width:768px){.hero{padding:128px 0}} .hero-wave{position:absolute;top:0;right:0;width:40%;max-width:650px;height:85%;pointer-events:none;z-index:0;display:none} @media(min-width:1024px){.hero-wave{display:block}} .hero-dots{position:absolute;top:128px;left:40px;z-index:1;display:none} @media(min-width:768px){.hero-dots{display:block;left:96px}} .hero .container{position:relative;z-index:10} .hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center} @media(min-width:1024px){.hero-grid{grid-template-columns:repeat(12,1fr);gap:48px}} .hero-copy{max-width:640px} @media(min-width:1024px){.hero-copy{grid-column:span 6}} @media(min-width:1280px){.hero-copy{max-width:760px}} .hero-copy h1{ font-family:var(--font-display);font-weight:800;font-size:38px;line-height:1.12; letter-spacing:-.02em;color:var(--brand-navy);margin-bottom:24px; } @media(min-width:640px){.hero-copy h1{font-size:48px}} @media(min-width:1024px){.hero-copy h1{font-size:60px}} .hero-copy h1 span{color:var(--sky-400)} .hero-copy p{font-size:18px;color:var(--slate-500);margin-bottom:40px;font-weight:400} @media(min-width:640px){.hero-copy p{font-size:20px}} .hero-actions{display:flex;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap} .hero-visual{position:relative;display:flex;justify-content:center} @media(min-width:1024px){.hero-visual{grid-column:span 6}} .hero-visual-frame{ position:relative;width:100%;max-width:700px; height:360px; } @media(min-width:640px){.hero-visual-frame{height:420px}} @media(min-width:768px){.hero-visual-frame{height:480px}} @media(min-width:1024px){.hero-visual-frame{height:520px}} @media(min-width:1280px){.hero-visual-frame{height:580px}} .hero-visual-frame::before{ content:'';position:absolute;bottom:-16px;left:-16px;width:100%;height:100%; background:rgba(125,211,252,.4);border-radius:80px 30px 90px 30px; transform:rotate(-3deg);transition:transform .5s ease; } .hero-visual-frame:hover::before{transform:rotate(0)} .hero-visual-img{ position:absolute;inset:0;width:100%;height:100%;border-radius:100px 40px 100px 40px; overflow:hidden;border:6px solid #fff;box-shadow:0 25px 60px rgba(0,0,0,.2);z-index:10;background:var(--slate-100); } .hero-visual-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease} .hero-visual-frame:hover .hero-visual-img img{transform:scale(1.03)} .hero-visual-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,37,64,.15),transparent)} .hero-glow{position:absolute;top:-30px;right:-20px;width:96px;height:96px;background:var(--sky-400);border-radius:999px;filter:blur(24px);opacity:.3;animation:pulse-soft 3s ease-in-out infinite} @keyframes pulse-soft{0%,100%{opacity:.3}50%{opacity:.55}} /* ========================================================================== 7. SERVICES GRID ========================================================================== */ .section{padding:96px 0} @media(min-width:768px){.section{padding:128px 0}} .section-tight{padding:96px 0} .section-header{text-align:center;max-width:720px;margin:0 auto 80px} .section-header h2{ font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-.02em; color:var(--brand-navy);margin-bottom:16px; } @media(min-width:768px){.section-header h2{font-size:48px}} .section-header h2 span{color:var(--sky-400)} .section-header p{color:var(--slate-400);font-size:14px;line-height:1.7} @media(min-width:768px){.section-header p{font-size:16px}} .section-rule{width:48px;height:4px;background:var(--sky-400);border-radius:999px;margin:0 auto 16px} .services-section{position:relative;background:#fff;overflow:hidden} .services-decor{position:absolute;top:96px;left:40px;opacity:.2;pointer-events:none} .services-grid{display:grid;grid-template-columns:1fr;gap:32px} @media(min-width:768px){.services-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.services-grid{grid-template-columns:1fr 1fr 1fr}} .service-card{ background:#fff;border-radius:16px;border:1px solid rgba(241,245,249,.9); box-shadow:0 1px 2px rgba(0,0,0,.04); display:flex;flex-direction:column;height:440px;overflow:hidden;position:relative; cursor:pointer;transition:all .3s ease; } .service-card:hover{ box-shadow:0 20px 40px rgba(11,46,89,.08);border-color:var(--sky-300);transform:translateY(-8px); } .service-card-media{position:relative;width:100%;height:176px;background:var(--slate-100);overflow:hidden;flex-shrink:0} .service-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease} .service-card:hover .service-card-media img{transform:scale(1.1)} .service-card-media::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(10,37,64,.7),rgba(10,37,64,.2) 60%,transparent); opacity:.4;transition:opacity .3s ease; } .service-card:hover .service-card-media::after{opacity:.6} .service-card-icon{ position:absolute;bottom:16px;right:16px;padding:10px;border-radius:12px;background:#fff; display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.12); z-index:2;border:1px solid var(--slate-100);transition:transform .3s ease;color:var(--sky-400); } .service-card-icon svg{width:20px;height:20px} .service-card:hover .service-card-icon{transform:scale(1.1) rotate(3deg);color:var(--brand-blue)} .service-card-body{padding:24px;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;text-align:left} .service-card-body h3{font-size:18px;font-weight:700;color:var(--brand-navy);line-height:1.3;margin-bottom:12px;transition:color .3s ease} .service-card:hover .service-card-body h3{color:var(--sky-500)} .service-card-divider{width:40px;height:2px;background:var(--slate-200);margin-bottom:12px;transition:all .3s ease} .service-card:hover .service-card-divider{width:64px;background:var(--sky-400)} .service-card-body p{ color:var(--slate-500);font-size:13px;line-height:1.7;font-weight:300; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } .service-card-link{ font-size:12px;font-weight:700;color:var(--sky-400);display:flex;align-items:center;gap:6px; margin-top:auto;padding-top:8px;transition:color .3s ease; } .service-card:hover .service-card-link{color:var(--sky-500)} .service-card-link svg{width:14px;height:14px;transition:transform .3s ease} .service-card:hover .service-card-link svg{transform:translateX(6px)} /* ========================================================================== 8. VIDEO SHOWCASE SECTIONS ========================================================================== */ .video-section{padding:96px 0;position:relative;overflow:hidden;border-top:1px solid var(--slate-100)} .video-section.light{background:linear-gradient(to bottom,var(--slate-50),rgba(240,249,255,.3),#fff)} .video-section.dark{background:var(--brand-navy);color:#fff;padding:96px 0} @media(min-width:768px){.video-section.dark{padding:128px 0}} .video-glow{position:absolute;border-radius:999px;filter:blur(60px);pointer-events:none} .video-cols{display:grid;grid-template-columns:1fr;gap:48px;align-items:center} @media(min-width:1024px){.video-cols{grid-template-columns:repeat(12,1fr);gap:48px}} .video-col-player{position:relative} @media(min-width:1024px){.video-col-player.left{grid-column:span 7}.video-col-player.right{grid-column:span 7;order:2}} .video-col-content{text-align:left} @media(min-width:1024px){.video-col-content{grid-column:span 5}.video-col-content.first{order:1}} .video-frame{ position:relative;border-radius:24px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.3); border:4px solid #fff;background:var(--slate-900);aspect-ratio:16/10; } .video-frame.on-dark{border-color:rgba(255,255,255,.2)} .video-frame video{width:100%;height:100%;object-fit:cover} .video-frame-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,37,64,.6),transparent 60%);pointer-events:none} .video-controls-bar{ position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:20;display:flex;align-items:center;justify-content:space-between; color:#fff;background:linear-gradient(to top,rgba(10,37,64,.95),transparent); } .video-controls-bar p{margin:0} .video-controls-bar .vt-title{font-size:12px;font-weight:700;letter-spacing:.02em} .video-controls-bar .vt-sub{font-size:10px;color:var(--slate-300);font-weight:300} .video-mute-btn{ padding:8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff; transition:background .2s ease; } .video-mute-btn:hover{background:rgba(255,255,255,.2)} .video-mute-btn svg{width:16px;height:16px} .feature-highlights{display:flex;flex-direction:column;gap:16px} .feature-card{ padding:16px;background:#fff;border-radius:16px;border:1px solid var(--slate-100);box-shadow:0 1px 2px rgba(0,0,0,.04); display:flex;align-items:flex-start;gap:16px;transition:all .3s ease;cursor:pointer; } .feature-card:hover{border-color:var(--sky-300);box-shadow:0 10px 30px rgba(56,189,248,.15);transform:translateY(-3px) scale(1.02)} .feature-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid} .feature-icon svg{width:20px;height:20px} .feature-icon.sky{background:var(--sky-50);color:var(--sky-500);border-color:var(--sky-100)} .feature-icon.emerald{background:var(--emerald-50);color:var(--emerald-500);border-color:var(--emerald-100)} .feature-card h4{font-size:14px;font-weight:700;color:var(--brand-navy);margin-bottom:4px} .feature-card p{font-size:12px;color:var(--slate-500);line-height:1.6;font-weight:300} .module-tabs{display:flex;flex-direction:column;gap:12px} .module-tab{ width:100%;text-align:left;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);display:flex;align-items:flex-start;gap:14px;transition:all .3s ease; } .module-tab:hover{background:rgba(255,255,255,.1)} .module-tab.is-active{background:rgba(255,255,255,.1);border-color:rgba(56,189,248,.5);box-shadow:0 10px 25px rgba(0,0,0,.2);backdrop-filter:blur(8px)} .module-tab-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:var(--sky-400);transition:all .2s ease} .module-tab-icon svg{width:16px;height:16px} .module-tab.is-active .module-tab-icon{background:var(--sky-400);color:var(--brand-navy);border-color:var(--sky-300)} .module-tab h4{font-size:13px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:4px} .module-tab.is-active h4{color:var(--sky-300)} .module-tab p{font-size:11px;color:var(--slate-300);line-height:1.6;font-weight:300} .commitments-grid{display:grid;grid-template-columns:1fr;gap:24px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1);margin-top:64px} @media(min-width:640px){.commitments-grid{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.commitments-grid{grid-template-columns:repeat(4,1fr)}} .commitment-card{ position:relative;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);border-radius:16px;padding:24px; border:1px solid rgba(255,255,255,.1);text-align:left;display:flex;flex-direction:column;gap:10px; overflow:hidden;transition:all .3s ease; } .commitment-card:hover{transform:translateY(-8px) scale(1.04);border-color:var(--sky-400);box-shadow:0 0 35px rgba(56,189,248,.35)} .commitment-badge{ display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--sky-400);background:rgba(56,189,248,.1);padding:4px 10px;border-radius:6px;border:1px solid rgba(56,189,248,.2);width:fit-content; } .commitment-card h3{font-size:16px;font-weight:700;color:#fff;transition:color .3s ease} .commitment-card:hover h3{color:var(--sky-300)} .commitment-card p{font-size:12px;color:var(--slate-300);line-height:1.6;font-weight:300} /* ========================================================================== 9. NAVY "WE'RE HERE TO HELP" BANNER ========================================================================== */ .help-banner{position:relative;background:var(--brand-navy);color:#fff;padding:112px 0;overflow:hidden} @media(min-width:768px){.help-banner{padding:144px 0}} .help-banner-wave{position:absolute;left:0;width:100%;overflow:hidden;line-height:0;z-index:1;pointer-events:none} .help-banner-wave.top{top:0;transform:translateY(-1px)} .help-banner-wave.bottom{bottom:0;transform:translateY(1px)} .help-banner-wave svg{display:block;width:100%;height:40px;fill:#fff} @media(min-width:768px){.help-banner-wave svg{height:80px}} .help-banner-wave.bottom svg{transform:rotate(180deg)} .help-glow{position:absolute;top:48px;left:50%;transform:translateX(-50%);width:384px;height:384px;background:rgba(14,165,233,.1);border-radius:999px;filter:blur(60px);pointer-events:none} .help-banner .container{position:relative;z-index:10} .help-grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:center} @media(min-width:1024px){.help-grid{grid-template-columns:repeat(12,1fr)}} .help-copy{} @media(min-width:1024px){.help-copy{grid-column:span 7}} .help-copy h2{font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1.2;letter-spacing:-.02em;margin-bottom:24px} @media(min-width:768px){.help-copy h2{font-size:48px}} .help-copy h2 span{color:var(--sky-400)} .help-copy p{color:var(--slate-300);font-size:14px;line-height:1.7;font-weight:300;max-width:640px;margin-bottom:24px} @media(min-width:640px){.help-copy p{font-size:16px}} .help-signature p:first-child{font-weight:800;font-size:20px;letter-spacing:.02em} @media(min-width:768px){.help-signature p:first-child{font-size:24px}} .help-signature p:last-child{color:var(--sky-400);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-top:4px} .help-photo{display:flex;justify-content:center} @media(min-width:1024px){.help-photo{grid-column:span 5;justify-content:flex-end}} .help-photo-inner{position:relative;width:100%;max-width:500px;height:340px} @media(min-width:640px){.help-photo-inner{height:380px}} @media(min-width:1024px){.help-photo-inner{height:460px}} .help-photo-ring{position:absolute;inset:0;border:2px solid rgba(56,189,248,.3);border-radius:120px 60px 120px 60px;transform:rotate(6deg) scale(1.05);pointer-events:none} .help-photo-frame{position:absolute;inset:0;border-radius:140px 80px 140px 80px;overflow:hidden;border:4px solid rgba(255,255,255,.2);box-shadow:0 25px 60px rgba(0,0,0,.35);background:var(--brand-blue)} .help-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:top} /* ========================================================================== 10. PILLARS / VALUES SECTION ========================================================================== */ .pillars-section{background:#fff;position:relative;overflow:hidden} .pillars-grid{display:grid;grid-template-columns:1fr;gap:64px;align-items:flex-start} @media(min-width:1024px){.pillars-grid{grid-template-columns:repeat(12,1fr)}} .pillars-intro{display:flex;flex-direction:column;gap:32px} @media(min-width:1024px){.pillars-intro{grid-column:span 5}} .pillars-intro h2{font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1.12;letter-spacing:-.02em;color:var(--brand-navy)} @media(min-width:768px){.pillars-intro h2{font-size:48px}} .pillars-intro h2 span{color:var(--sky-400)} .pillars-photo{position:relative;width:100%;aspect-ratio:4/3;border-radius:60px 20px 60px 20px;overflow:hidden;border:4px solid var(--slate-100);box-shadow:0 25px 50px rgba(0,0,0,.15);background:var(--slate-50)} .pillars-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease} .pillars-photo:hover img{transform:scale(1.03)} .pillars-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,37,64,.6),rgba(10,37,64,.1) 60%,transparent);opacity:.4;transition:opacity .3s ease} .pillars-photo:hover::after{opacity:.5} .pillars-list{} @media(min-width:1024px){.pillars-list{grid-column:span 7}} .pillars-items{display:grid;grid-template-columns:1fr;gap:40px 48px} @media(min-width:640px){.pillars-items{grid-template-columns:1fr 1fr}} .pillar-item{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:12px;border-radius:16px;transition:all .3s ease} .pillar-item:hover{background:rgba(248,250,252,.8);transform:translateX(6px)} .pillar-icon{ width:52px;height:52px;border-radius:16px;background:var(--brand-navy);display:flex;align-items:center;justify-content:center; color:var(--sky-400);box-shadow:0 6px 16px rgba(0,0,0,.15);transition:all .3s ease; } .pillar-icon svg{width:24px;height:24px} .pillar-item:hover .pillar-icon{background:var(--sky-400);color:var(--brand-navy);transform:scale(1.1) rotate(6deg);box-shadow:0 8px 20px rgba(56,189,248,.3)} .pillar-item h3{font-weight:800;font-size:18px;color:var(--brand-navy);margin-bottom:6px;transition:color .3s ease} .pillar-item:hover h3{color:var(--sky-500)} .pillar-item p{font-size:13px;color:var(--slate-400);line-height:1.7;font-weight:300} /* ========================================================================== 11. BLOG SECTION ========================================================================== */ .blog-section{background:var(--slate-50);position:relative;overflow:hidden;border-top:1px solid var(--slate-100)} .blog-decor{position:absolute;opacity:.15;pointer-events:none} .blog-decor.tr{top:48px;right:48px} .blog-decor.bl{bottom:48px;left:48px} .blog-featured{ max-width:1200px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.08);border:1px solid var(--slate-100); display:flex;flex-direction:column;cursor:pointer;transition:all .3s ease; } @media(min-width:768px){.blog-featured{flex-direction:row}} .blog-featured:hover{box-shadow:0 25px 50px rgba(56,189,248,.1);transform:translateY(-6px)} .blog-featured-media{position:relative;width:100%;height:256px;background:var(--slate-100);overflow:hidden} @media(min-width:768px){.blog-featured-media{width:40%;height:auto}} .blog-featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease} .blog-featured:hover .blog-featured-media img{transform:scale(1.08)} .blog-badge{position:absolute;top:16px;left:16px;background:var(--brand-navy);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.15)} .blog-featured-body{padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;text-align:left} @media(min-width:768px){.blog-featured-body{width:60%;padding:40px}} .blog-meta{display:flex;align-items:center;gap:8px;color:var(--slate-400);font-size:12px;font-weight:600} .blog-meta svg{width:14px;height:14px;color:var(--sky-400)} .blog-featured-body h3{font-size:22px;font-weight:800;color:var(--brand-navy);line-height:1.3;letter-spacing:-.01em;margin:8px 0;transition:color .3s ease} .blog-featured:hover .blog-featured-body h3{color:var(--sky-500)} .blog-subtitle{color:var(--sky-400);font-weight:600;font-style:italic;font-size:13px} .blog-excerpt{color:var(--slate-500);font-size:13px;line-height:1.7;font-weight:300;margin-top:12px} .blog-readmore{padding-top:16px;border-top:1px solid var(--slate-100);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sky-400);transition:color .3s ease} .blog-featured:hover .blog-readmore{color:var(--sky-500)} .blog-readmore svg{width:16px;height:16px;transition:transform .3s ease} .blog-featured:hover .blog-readmore svg{transform:translateX(6px)} /* ========================================================================== 12. CONTACT SECTION ========================================================================== */ .contact-section{position:relative;padding:96px 0;overflow:hidden;background:var(--slate-100)} @media(min-width:768px){.contact-section{padding:128px 0}} .contact-bg{position:absolute;inset:0;pointer-events:none;z-index:0} .contact-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.75)} .contact-bg::after{content:'';position:absolute;inset:0;background:rgba(7,19,41,.25);mix-blend-mode:multiply} .contact-section .container{position:relative;z-index:10} .contact-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center} @media(min-width:1024px){.contact-grid{grid-template-columns:repeat(12,1fr)}} .contact-form-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 25px 50px rgba(0,0,0,.2);border:1px solid var(--slate-100)} @media(min-width:768px){.contact-form-card{padding:40px}} @media(min-width:1024px){.contact-form-card{grid-column:span 6}} .contact-form-card h2{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--brand-navy);letter-spacing:-.01em;margin-bottom:8px} .contact-form-card h2 span{color:var(--sky-400)} .contact-form-card>p{color:var(--slate-400);font-size:12px;font-weight:300;margin-bottom:24px} .field{margin-bottom:20px} .field input[type=text],.field input[type=email],.field textarea,.field select{ width:100%;padding:12px 16px;background:var(--slate-50);border-radius:8px;border:1px solid var(--slate-200); font-size:14px;color:var(--slate-800);transition:all .2s ease; } .field input::placeholder,.field textarea::placeholder{color:var(--slate-400)} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--sky-400)} .field-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);margin-bottom:8px;text-align:left} .consult-options{display:grid;grid-template-columns:1fr;gap:10px} @media(min-width:640px){.consult-options{grid-template-columns:repeat(3,1fr)}} .consult-option{ padding:12px;border-radius:12px;border:1px solid var(--slate-200);background:rgba(248,250,252,.8); text-align:left;display:flex;flex-direction:column;gap:6px;transition:all .2s ease;cursor:pointer; } .consult-option:hover{border-color:var(--sky-300);background:#fff} .consult-option.is-selected{background:rgba(240,249,255,.9);border-color:var(--sky-400);box-shadow:0 0 0 2px rgba(56,189,248,.3);color:var(--brand-navy)} .consult-option .badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:6px;background:var(--sky-100);color:#0369a1;width:fit-content} .consult-option .name{font-size:12px;font-weight:700;line-height:1.4;color:var(--slate-700)} .consult-option.is-selected .name{color:var(--brand-navy)} .file-attach-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-400);transition:color .2s ease} .file-attach-btn:hover{color:var(--sky-400)} .file-attach-btn svg{width:16px;height:16px} .file-list{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-height:96px;overflow-y:auto} .file-list-item{display:flex;align-items:center;justify-content:between;gap:8px;padding:6px;background:var(--slate-50);border-radius:6px;border:1px solid var(--slate-200);font-size:10px;justify-content:space-between} .file-list-item .fname{color:var(--slate-600);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%} .file-remove{color:#f87171;flex-shrink:0} .file-remove:hover{color:#ef4444} .file-remove svg{width:14px;height:14px} .form-success{padding:24px;background:var(--sky-50);border-radius:12px;border:1px solid var(--sky-100);text-align:center} .form-success-icon{width:48px;height:48px;border-radius:999px;background:rgba(56,189,248,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--sky-400)} .form-success-icon svg{width:24px;height:24px} .form-success h3{font-size:20px;font-weight:700;color:var(--brand-navy);margin-bottom:6px} .form-success p{color:var(--slate-500);font-size:12px;margin-bottom:12px} .form-success button{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sky-400)} .form-success button:hover{color:var(--sky-500)} .ops-notice{margin-top:32px;padding-top:24px;border-top:1px solid var(--slate-100)} .ops-notice-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:8px} .ops-notice-title{display:flex;align-items:center;gap:8px;color:var(--brand-navy)} .ops-notice-title svg{width:16px;height:16px;color:var(--sky-400)} .ops-notice-title span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .ops-badge{font-size:11px;font-weight:700;color:var(--sky-500);background:var(--sky-50);padding:4px 10px;border-radius:999px;border:1px solid var(--sky-200)} .ops-notice p{font-size:12px;color:var(--slate-600);font-weight:500;line-height:1.6} .contact-photo{display:flex;justify-content:center} @media(min-width:1024px){.contact-photo{grid-column:span 6;justify-content:flex-end}} .contact-photo-inner{position:relative;width:100%;max-width:360px;height:400px} @media(min-width:768px){.contact-photo-inner{height:460px}} .contact-photo-frame{position:absolute;inset:0;border-radius:16px;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.25);border:4px solid #fff;background:var(--slate-800);z-index:10} .contact-photo-frame img{width:100%;height:100%;object-fit:cover} .contact-photo-glow{position:absolute;bottom:-16px;right:-16px;width:128px;height:128px;background:rgba(56,189,248,.2);border-radius:999px;filter:blur(30px)} /* ========================================================================== 13. PROMO BANNER ========================================================================== */ .promo-banner{position:relative;z-index:30;max-width:960px;margin:0 auto;padding:0 24px;width:100%;margin-bottom:-64px} @media(min-width:768px){.promo-banner{margin-bottom:-80px}} .promo-banner-inner{ position:relative;border-radius:16px;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2); background:var(--brand-navy);padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px; } @media(min-width:768px){.promo-banner-inner{flex-direction:row;padding:40px}} .promo-banner-bg{position:absolute;inset:0;opacity:.15;pointer-events:none} .promo-banner-bg img{width:100%;height:100%;object-fit:cover} .promo-text{position:relative;z-index:10;text-align:center} @media(min-width:768px){.promo-text{text-align:left}} .promo-text h3{font-family:var(--font-display);font-weight:800;font-size:20px;color:#fff} @media(min-width:768px){.promo-text h3{font-size:24px}} .promo-text p{color:var(--slate-400);font-size:12px;font-weight:300;margin-top:2px} .promo-btn{position:relative;z-index:10} /* ========================================================================== 14. FOOTER ========================================================================== */ .site-footer{background:var(--brand-navy-deep);color:#fff;padding:112px 0 48px;margin-top:auto} @media(min-width:768px){.site-footer{padding:144px 0 48px}} .footer-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:48px} @media(min-width:768px){.footer-grid{grid-template-columns:repeat(12,1fr)}} .footer-col-brand{display:flex;flex-direction:column;gap:16px} @media(min-width:768px){.footer-col-brand{grid-column:span 5}} .footer-col-brand svg{height:40px;width:auto} .footer-col h4{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sky-400)} .footer-col-brand p{color:var(--slate-400);font-size:13px;line-height:1.7;font-weight:300;text-transform:uppercase} .footer-col-links{display:flex;flex-direction:column;gap:16px} @media(min-width:768px){.footer-col-links{grid-column:span 3}} .footer-col-links ul{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--slate-400);font-weight:300} .footer-col-links a:hover{color:#fff} .footer-col-contact{display:flex;flex-direction:column;gap:16px} @media(min-width:768px){.footer-col-contact{grid-column:span 4}} .footer-contact-list{display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--slate-400);font-weight:300} .footer-contact-list p{display:flex;align-items:center;gap:8px} .footer-contact-list svg{width:16px;height:16px;color:var(--sky-400);flex-shrink:0} .footer-contact-list a:hover{color:#fff} .footer-social-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sky-400);margin-bottom:10px} .footer-social{display:flex;align-items:center;gap:12px} .footer-social a{ width:36px;height:36px;border-radius:999px;background:var(--slate-800);color:var(--slate-300); display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.15); border:1px solid rgba(51,65,85,.5); } .footer-social a svg{width:16px;height:16px} .footer-social a.fb:hover{background:#1877F2;color:#fff} .footer-social a.tiktok:hover{background:#000;color:#fff;border-color:var(--slate-600)} .footer-social a:hover{transform:scale(1.1)} .footer-rule{border:none;border-top:1px solid var(--slate-800);margin:32px 0} .footer-sub{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px;font-size:11px;color:var(--slate-500);text-align:center} @media(min-width:640px){.footer-sub{flex-direction:row}} /* ========================================================================== 15. COOKIE BANNER ========================================================================== */ .cookie-banner{ position:fixed;bottom:0;left:0;width:100%;z-index:50;background:rgba(10,37,64,.95);backdrop-filter:blur(10px); color:#fff;border-top:1px solid rgba(56,189,248,.2);padding:20px 24px;box-shadow:0 -10px 30px rgba(0,0,0,.2); transform:translateY(100%);opacity:0;transition:transform .5s ease,opacity .5s ease; } .cookie-banner.is-visible{transform:translateY(0);opacity:1} .cookie-inner{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px} @media(min-width:640px){.cookie-inner{flex-direction:row}} .cookie-inner p{font-size:13px;color:var(--slate-200);line-height:1.6;font-weight:300;max-width:960px;text-align:center} @media(min-width:640px){.cookie-inner p{text-align:left}} .cookie-accept{background:var(--sky-400);color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:10px 24px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:all .3s ease;flex-shrink:0} .cookie-accept:hover{background:var(--sky-500)} /* ========================================================================== 16. WHATSAPP WIDGET ========================================================================== */ .wa-widget{position:fixed;bottom:24px;left:24px;z-index:40} .wa-card{ position:absolute;bottom:64px;left:0;width:256px;background:#fff;border-radius:12px;box-shadow:0 25px 50px rgba(0,0,0,.25); padding:16px;border:1px solid var(--slate-100);opacity:0;transform:scale(.95) translateY(8px);pointer-events:none; transition:all .3s ease;transform-origin:bottom left;text-align:left;z-index:50; } .wa-widget:hover .wa-card{opacity:1;transform:scale(1) translateY(0);pointer-events:auto} .wa-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px} .wa-dot{width:10px;height:10px;border-radius:999px;background:var(--whatsapp);animation:pulse-soft 2s ease-in-out infinite} .wa-card-head span{font-size:12px;font-weight:700;color:var(--slate-800);text-transform:uppercase;letter-spacing:.03em} .wa-card>p{font-size:10px;color:var(--slate-400);margin-bottom:8px;font-weight:300;line-height:1.5} .wa-card-rows{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--slate-50);padding-top:8px} .wa-card-row{display:flex;align-items:center;justify-content:space-between;font-size:10px} .wa-card-row .k{color:var(--slate-400)} .wa-card-row .v{font-weight:700;color:var(--slate-700)} .wa-card-row .closed{color:var(--slate-400);font-style:italic} .wa-btn{ display:flex;align-items:center;gap:12px;background:var(--whatsapp);color:#fff;padding:14px 20px 14px 14px;border-radius:999px; box-shadow:0 10px 30px rgba(37,211,102,.3);transition:all .3s ease;border:1px solid rgba(255,255,255,.2); } .wa-btn:hover{background:var(--whatsapp-dark);box-shadow:0 15px 35px rgba(37,211,102,.45);transform:scale(1.05)} .wa-btn-icon{background:rgba(255,255,255,.1);padding:4px;border-radius:999px} .wa-btn-icon svg{width:20px;height:20px;fill:currentColor} .wa-btn-text{display:flex;flex-direction:column;text-align:left;line-height:1} .wa-btn-text .l1{font-size:9px;font-weight:700;opacity:.9;text-transform:uppercase;letter-spacing:.08em} .wa-btn-text .l2{font-size:12px;font-weight:800;letter-spacing:.02em} /* ========================================================================== 17. MODALS (Service Detail + Blog Article) ========================================================================== */ .modal-overlay{ position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:16px; background:rgba(10,37,64,.85);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease; } .modal-overlay.is-open{display:flex;opacity:1} .modal-box{ background:#fff;border-radius:16px;padding:32px;max-width:640px;width:100%;max-height:85vh;overflow-y:auto; position:relative;box-shadow:0 30px 60px rgba(0,0,0,.3);border:1px solid var(--slate-100);color:var(--slate-800); text-align:left;transform:scale(.95) translateY(20px);transition:transform .25s ease; } .modal-overlay.is-open .modal-box{transform:scale(1) translateY(0)} .modal-box.modal-wide{max-width:768px} .modal-close{position:absolute;top:24px;right:24px;padding:8px;border-radius:999px;color:var(--slate-400);transition:all .2s ease} .modal-close:hover{background:var(--slate-100);color:var(--slate-700)} .modal-close svg{width:20px;height:20px} .modal-head{display:flex;align-items:center;gap:16px;margin-bottom:24px} .modal-head-icon{width:48px;height:48px;border-radius:12px;background:var(--sky-50);color:var(--sky-400);display:flex;align-items:center;justify-content:center;flex-shrink:0} .modal-head-icon svg{width:24px;height:24px} .modal-eyebrow{font-size:10px;font-weight:700;color:var(--sky-400);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px} .modal-head h3{font-size:22px;font-weight:800;color:var(--brand-navy);letter-spacing:-.01em} .modal-rule{border:none;border-top:1px solid var(--slate-100);margin:24px 0} .modal-section{margin-bottom:24px} .modal-section h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-400);margin-bottom:12px} .modal-section > p{font-size:14px;color:var(--slate-600);line-height:1.75;font-weight:300} .modal-benefits{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:640px){.modal-benefits{grid-template-columns:1fr 1fr}} .modal-benefit{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--slate-600)} .modal-benefit-icon{width:18px;height:18px;border-radius:999px;background:var(--sky-50);color:var(--sky-400);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px} .modal-benefit-icon svg{width:12px;height:12px} .modal-deliverables{background:var(--slate-50);border-radius:12px;padding:20px;border:1px solid var(--slate-100)} .modal-deliverables h4{margin-bottom:12px} .modal-deliverable{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate-700);font-weight:500;margin-bottom:8px} .modal-deliverable:last-child{margin-bottom:0} .modal-deliverable .dot{width:6px;height:6px;border-radius:999px;background:var(--sky-400);flex-shrink:0} .modal-footer{padding-top:16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px} @media(min-width:640px){.modal-footer{flex-direction:row}} .modal-footer .btn,.modal-footer .btn-ghost{width:100%;text-align:center} @media(min-width:640px){.modal-footer .btn,.modal-footer .btn-ghost{width:auto}} .modal-blog-meta{display:flex;align-items:center;gap:10px;color:var(--slate-400);font-size:11px;font-weight:600;margin-bottom:8px} .modal-blog-meta .cat{color:var(--sky-400);text-transform:uppercase;letter-spacing:.08em;font-weight:700} .modal-banner{position:relative;width:100%;height:200px;border-radius:12px;overflow:hidden;background:var(--slate-100);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);margin:24px 0} @media(min-width:768px){.modal-banner{height:256px}} .modal-banner img{width:100%;height:100%;object-fit:cover} .article-body{display:flex;flex-direction:column;gap:20px;color:var(--slate-600);font-size:14px;line-height:1.75;font-weight:300} .article-block h4{font-size:16px;font-weight:700;color:var(--brand-navy);margin-bottom:4px} .article-block p{padding-left:16px;border-left:2px solid var(--sky-400);color:var(--slate-500)} .article-body .lead{font-weight:500;color:var(--slate-700);padding-top:8px} /* ========================================================================== 18. RESPONSIVE HELPERS ========================================================================== */ .text-center{text-align:center} @media(max-width:1023px){.order-lg-1{order:0}} .hide-sm{display:none} @media(min-width:768px){.hide-sm{display:block}}