/** * Theme Name: Eazyrecruitz Child * Description: This is a child theme of Eazyrecruitz, generated by Merlin WP. * Author: Theme Kalia * Template: eazyrecruitz * Version: 1.9 */ /* ===================================================================== HR NEXT DOOR — custom page system Built by Nametech Canada. Brand palette taken from the HR Next Door logo and the HR Audit Toolkit PDF. ===================================================================== */ :root{ --hnd-navy:#12305B; --hnd-navy-dk:#0C2242; --hnd-blue:#0A63AE; --hnd-sky:#1E88E5; --hnd-ink:#1A1A1A; --hnd-body:#42505F; --hnd-mist:#F4F7FB; --hnd-line:#DCE5F0; --hnd-white:#fff; } /* ---------- shell tweaks ---------- */ .hnd{ color:var(--hnd-body); font-size:16.5px; line-height:1.75; } .hnd *{ box-sizing:border-box; } .hnd h1,.hnd h2,.hnd h3,.hnd h4{ color:var(--hnd-navy); line-height:1.22; margin:0 0 14px; } .hnd h1{ font-size:46px; letter-spacing:-.5px; } .hnd h2{ font-size:34px; letter-spacing:-.3px; } .hnd h3{ font-size:21px; } .hnd h4{ font-size:17px; } .hnd p{ margin:0 0 16px; } .hnd a{ color:var(--hnd-blue); } .hnd a:hover{ color:var(--hnd-sky); } .hnd strong{ color:var(--hnd-ink); } /* remove the theme's stock banner + breadcrumb on the front page */ body.home .page-title, body.home .sidebar-page-container .auto-container > .row > .content-side > .blog-list-content > .thm-unit-test{ } body.home .page-title{ display:none !important; } /* the theme wraps page content in a 1170 column; give our sections room */ .sidebar-page-container.blog-list{ padding-top:0 !important; padding-bottom:0 !important; } .hnd .thm-unit-test{ padding:0 !important; } /* ---------- full-bleed band ---------- */ .hnd-full{ position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; } .hnd-inner{ max-width:1170px; margin:0 auto; padding:0 20px; } .hnd-band{ padding:78px 0; } .hnd-band--mist{ background:var(--hnd-mist); } .hnd-band--navy{ background:var(--hnd-navy); } .hnd-band--navy h2,.hnd-band--navy h3,.hnd-band--navy p{ color:#fff; } .hnd-band--navy p{ color:#C9D6E8; } /* ---------- hero ---------- */ .hnd-hero{ background:linear-gradient(135deg,#0C2242 0%,#12305B 45%,#0A63AE 120%); color:#fff; padding:0; overflow:hidden; } .hnd-hero .hnd-inner{ display:flex; align-items:center; gap:56px; padding-top:74px; padding-bottom:74px; } .hnd-hero-copy{ flex:1 1 56%; } .hnd-hero-art{ flex:0 0 38%; } .hnd-hero .hnd-eyebrow{ display:inline-block; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:#8FC3F5; font-weight:700; margin-bottom:16px; } .hnd-hero h1{ color:#fff; font-size:46px; margin-bottom:20px; } .hnd-hero p{ color:#CFDDEE; font-size:18px; max-width:44em; } .hnd-hero-art img{ width:100%; border-radius:16px; display:block; box-shadow:0 26px 60px rgba(0,0,0,.34); } /* ---------- buttons ---------- */ .hnd-btn{ display:inline-block; background:var(--hnd-blue); color:#fff !important; padding:15px 30px; border-radius:6px; font-weight:700; font-size:15px; letter-spacing:.3px; text-decoration:none !important; transition:.2s; border:2px solid var(--hnd-blue); } .hnd-btn:hover{ background:var(--hnd-sky); border-color:var(--hnd-sky); color:#fff !important; } .hnd-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.55); } .hnd-btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--hnd-navy) !important; } .hnd-btn--outline{ background:transparent; color:var(--hnd-blue) !important; } .hnd-btn--outline:hover{ background:var(--hnd-blue); color:#fff !important; } .hnd-btns{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; } /* ---------- section heading ---------- */ .hnd-head{ max-width:760px; margin:0 auto 46px; text-align:center; } .hnd-head .hnd-eyebrow{ display:block; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--hnd-blue); font-weight:700; margin-bottom:12px; } .hnd-head h2{ margin-bottom:12px; } .hnd-head p{ font-size:17px; } .hnd-head--left{ margin-left:0; text-align:left; } /* ---------- cards / grid ---------- */ .hnd-grid{ display:grid; gap:22px; } .hnd-grid-2{ grid-template-columns:repeat(2,1fr); } .hnd-grid-3{ grid-template-columns:repeat(3,1fr); } .hnd-grid-4{ grid-template-columns:repeat(4,1fr); } .hnd-card{ background:#fff; border:1px solid var(--hnd-line); border-radius:12px; padding:26px 24px; transition:.22s; } .hnd-card:hover{ box-shadow:0 14px 34px rgba(18,48,91,.11); transform:translateY(-3px); border-color:#C4D6EC; } .hnd-card h3{ font-size:19px; margin-bottom:9px; } .hnd-card p{ font-size:15.5px; margin-bottom:0; } .hnd-card-num{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; margin-bottom:16px; background:#E8F1FB; color:var(--hnd-blue); font-weight:800; font-size:15px; } /* ---------- service list (anchored sections) ---------- */ .hnd-service{ scroll-margin-top:150px; border-top:1px solid var(--hnd-line); padding:44px 0; } .hnd-service:first-of-type{ border-top:0; padding-top:8px; } .hnd-service-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:6px; } .hnd-service-head .n{ color:var(--hnd-sky); font-weight:800; font-size:15px; letter-spacing:1px; } .hnd-service h3{ font-size:25px; margin:0; } .hnd-service .lead{ font-size:17.5px; color:var(--hnd-ink); margin:10px 0 18px; } .hnd-jump{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:8px; } .hnd-jump a{ display:inline-block; background:#fff; border:1px solid var(--hnd-line); border-radius:99px; padding:8px 15px; font-size:14px; text-decoration:none; color:var(--hnd-navy); transition:.18s; } .hnd-jump a:hover{ background:var(--hnd-blue); border-color:var(--hnd-blue); color:#fff; } /* ---------- ticks ---------- */ .hnd-ticks{ list-style:none; margin:0; padding:0; } .hnd-ticks li{ position:relative; padding-left:30px; margin:0 0 11px; font-size:15.5px; } .hnd-ticks li:before{ content:""; position:absolute; left:0; top:8px; width:16px; height:9px; border-left:2.5px solid var(--hnd-blue); border-bottom:2.5px solid var(--hnd-blue); transform:rotate(-45deg); } .hnd-band--navy .hnd-ticks li{ color:#D5E2F2; } .hnd-band--navy .hnd-ticks li:before{ border-color:#7FBAF0; } /* ---------- profile ---------- */ .hnd-profile{ display:flex; gap:52px; align-items:flex-start; } .hnd-profile-photo{ flex:0 0 340px; } .hnd-profile-photo img{ width:100%; border-radius:14px; display:block; box-shadow:0 18px 44px rgba(18,48,91,.16); } .hnd-profile-photo .cap{ font-size:13.5px; color:#77869A; margin-top:12px; text-align:center; } .hnd-profile-copy{ flex:1; } /* ---------- credentials strip ---------- */ .hnd-creds{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .hnd-cred{ background:#fff; border:1px solid var(--hnd-line); border-radius:12px; padding:22px 20px; text-align:center; } .hnd-cred .big{ display:block; font-size:30px; font-weight:800; color:var(--hnd-blue); line-height:1.1; margin-bottom:6px; } .hnd-cred .lab{ font-size:14px; color:var(--hnd-body); } /* ---------- industries ---------- */ .hnd-tags{ display:flex; flex-wrap:wrap; gap:10px; } .hnd-tags span{ background:#fff; border:1px solid var(--hnd-line); color:var(--hnd-navy); border-radius:99px; padding:9px 17px; font-size:14.5px; } .hnd-tags span b{ color:var(--hnd-blue); font-weight:700; } /* ---------- quotes ---------- */ .hnd-quote{ background:#fff; border:1px solid var(--hnd-line); border-radius:12px; padding:28px 26px; position:relative; } .hnd-quote:before{ content:"\201C"; position:absolute; top:6px; right:22px; font-size:74px; line-height:1; color:#E3ECF7; font-family:Georgia,serif; } .hnd-quote p{ font-size:16px; font-style:italic; color:var(--hnd-ink); position:relative; } .hnd-quote .who{ font-style:normal; font-size:14.5px; color:#6C7C8F; margin:0; } .hnd-quote .who b{ display:block; color:var(--hnd-navy); font-size:15.5px; font-style:normal; } /* ---------- CTA ---------- */ .hnd-cta{ text-align:center; } .hnd-cta h2{ color:#fff; font-size:34px; } .hnd-cta p{ color:#C9D6E8; font-size:18px; max-width:640px; margin:0 auto 8px; } .hnd-cta .hnd-btns{ justify-content:center; } /* ---------- download box ---------- */ .hnd-download{ display:flex; gap:40px; align-items:center; background:#fff; border:1px solid var(--hnd-line); border-left:6px solid var(--hnd-blue); border-radius:12px; padding:34px 34px; } .hnd-download .ico{ flex:0 0 86px; height:86px; border-radius:14px; background:#E8F1FB; display:flex; align-items:center; justify-content:center; font-size:34px; } .hnd-download h3{ margin-bottom:8px; } .hnd-download p{ margin-bottom:14px; } /* ---------- contact ---------- */ .hnd-contact{ display:flex; gap:48px; align-items:flex-start; } .hnd-contact-info{ flex:0 0 38%; } .hnd-contact-form{ flex:1; } .hnd-info-row{ display:flex; gap:14px; margin-bottom:22px; } .hnd-info-row .ico{ flex:0 0 42px; height:42px; border-radius:10px; background:#E8F1FB; display:flex; align-items:center; justify-content:center; font-size:18px; } .hnd-info-row .lab{ font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; color:#8493A6; font-weight:700; } .hnd-info-row .val{ font-size:16.5px; color:var(--hnd-navy); font-weight:600; } .hnd-info-row .val a{ color:var(--hnd-navy); } .hnd-hours{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--hnd-line); border-radius:10px; overflow:hidden; } .hnd-hours td{ padding:11px 16px; border-top:1px solid var(--hnd-line); font-size:15.5px; } .hnd-hours tr:first-child td{ border-top:0; } .hnd-hours td:first-child{ color:var(--hnd-navy); font-weight:600; width:46%; } .hnd-hours td:last-child{ text-align:right; } .hnd-hours tr.closed td:last-child{ color:#9AA7B6; } /* contact form 7 inside our layout */ .hnd .wpcf7 input[type=text],.hnd .wpcf7 input[type=email],.hnd .wpcf7 input[type=tel], .hnd .wpcf7 select,.hnd .wpcf7 textarea{ width:100%; border:1px solid var(--hnd-line); border-radius:8px; padding:13px 15px; font-size:15.5px; background:#fff; color:var(--hnd-ink); margin-bottom:15px; height:auto; line-height:1.5; } .hnd .wpcf7 textarea{ min-height:150px; } .hnd .wpcf7 input:focus,.hnd .wpcf7 textarea:focus,.hnd .wpcf7 select:focus{ border-color:var(--hnd-blue); outline:none; } .hnd .wpcf7 input[type=submit]{ background:var(--hnd-blue); color:#fff; border:0; border-radius:6px; padding:15px 34px; font-weight:700; font-size:15px; cursor:pointer; width:auto; } .hnd .wpcf7 input[type=submit]:hover{ background:var(--hnd-sky); } .hnd-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } /* ---------- FAQ ---------- */ .hnd-faq{ border:1px solid var(--hnd-line); border-radius:10px; background:#fff; margin-bottom:12px; } .hnd-faq summary{ cursor:pointer; padding:18px 22px; font-weight:600; color:var(--hnd-navy); font-size:17px; list-style:none; position:relative; padding-right:52px; } .hnd-faq summary::-webkit-details-marker{ display:none; } .hnd-faq summary:after{ content:"+"; position:absolute; right:22px; top:15px; font-size:24px; color:var(--hnd-blue); font-weight:400; line-height:1; } .hnd-faq[open] summary:after{ content:"\2013"; } .hnd-faq .body{ padding:0 22px 20px; font-size:15.5px; } .hnd-faq .body p:last-child{ margin-bottom:0; } /* ---------- misc ---------- */ .hnd-note{ background:#FFF8E9; border-left:4px solid #E0A400; border-radius:0 10px 10px 0; padding:16px 20px; font-size:15px; margin:22px 0; } .hnd-lede{ font-size:19px; color:var(--hnd-ink); } .hnd-center{ text-align:center; } .hnd-mt0{ margin-top:0; } /* ---------- responsive ---------- */ @media (max-width:1024px){ .hnd-grid-4{ grid-template-columns:repeat(2,1fr); } .hnd-creds{ grid-template-columns:repeat(2,1fr); } .hnd-hero .hnd-inner{ flex-direction:column; gap:38px; } .hnd-hero-art{ flex:1 1 auto; width:100%; max-width:520px; } .hnd-profile{ flex-direction:column; gap:32px; } .hnd-profile-photo{ flex:1 1 auto; max-width:340px; } .hnd-contact{ flex-direction:column; gap:38px; } .hnd-contact-info{ flex:1 1 auto; width:100%; } } @media (max-width:760px){ .hnd h1,.hnd-hero h1{ font-size:32px; } .hnd h2{ font-size:26px; } .hnd-band{ padding:52px 0; } .hnd-grid-2,.hnd-grid-3,.hnd-grid-4{ grid-template-columns:1fr; } .hnd-form-row{ grid-template-columns:1fr; } .hnd-download{ flex-direction:column; text-align:center; gap:22px; } .hnd-btns{ justify-content:center; } .hnd-head{ text-align:center; } } /* ---------- header clean-up: remove leftover theme demo furniture ---------- */ .header-top .location-box{ display:none !important; } /* job ticker, not relevant to HR consulting */ .header-top .right-info{ display:none !important; } /* hardcoded demo links */ .header-top .top-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 26px; } .header-top .top-inner .left-info{ margin-right:auto; } /* social icons in the top bar sit alone once the demo links are gone */ .header-top .social-links,.header-top .social-box{ margin-left:auto; } /* footer polish */ .main-footer .widget_pages ul li a{ text-transform:none !important; } /* ---------- home page clean-up after demo content swap ---------- */ /* signature clean-up: the theme prints an empty when no signature is set */ img[src=""], img:not([src]){ display:none !important; } .about-style-one .signature, .about-block-one .signature{ display:none !important; } /* keep the founder photo in the about block from being cropped oddly */ .about-style-one .image-box img, .about-block-one .image img{ object-fit:cover; object-position:center 30%; } /* HND-V2-START */ /* ===================================================================== HR NEXT DOOR - v2 design layer Palette locked to the brand logo blue (#2A62AA sampled from the door mark). Layers on top of the Eazy Recruitz theme. ===================================================================== */ :root{ --hnd-blue:#2A62AA; --hnd-blue-dk:#1F4C86; --hnd-navy:#173C6B; --hnd-navy-dk:#102A4C; --hnd-sky:#4C8FD8; --hnd-sky-lt:#E8F0FA; --hnd-ink:#121212; --hnd-body:#4A5765; --hnd-mist:#F4F8FD; --hnd-line:#DEE8F4; --hnd-gold:#E9B44C; --hnd-shadow:0 18px 46px rgba(23,60,107,.10); --hnd-shadow-hi:0 26px 60px rgba(23,60,107,.20); --hnd-ease:cubic-bezier(.22,.9,.32,1); } html{ scroll-behavior:smooth; } body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{ background:var(--hnd-blue); color:#fff; } *{ scrollbar-color:var(--hnd-blue) #E9EFF7; scrollbar-width:thin; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:#EDF2F8; } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--hnd-blue),var(--hnd-navy)); border-radius:10px; } /* 1. Buttons */ .theme-btn,.theme-btn-one,.theme-btn-two,.hnd-btn{ position:relative; overflow:hidden; isolation:isolate; border-radius:6px; transition:transform .45s var(--hnd-ease), box-shadow .45s var(--hnd-ease), background .45s var(--hnd-ease); } .theme-btn-one, .hnd-btn{ background:linear-gradient(115deg,var(--hnd-blue) 0%,var(--hnd-navy) 100%) !important; color:#fff !important; box-shadow:0 10px 24px rgba(42,98,170,.28); } .theme-btn:hover,.theme-btn-one:hover,.theme-btn-two:hover,.hnd-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px rgba(42,98,170,.34); } .theme-btn::after,.hnd-btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.34) 50%,transparent 80%); transform:translateX(-130%); transition:transform .8s var(--hnd-ease); } .theme-btn:hover::after,.hnd-btn:hover::after{ transform:translateX(130%); } .hnd-btn{ display:inline-block; padding:14px 26px; font-weight:600; font-size:15px; letter-spacing:.2px; text-decoration:none; line-height:1.2; } .hnd-btn-ghost{ background:transparent !important; color:var(--hnd-blue) !important; border:2px solid var(--hnd-blue); box-shadow:none; } .hnd-btn-ghost:hover{ background:var(--hnd-blue) !important; color:#fff !important; } .hnd-btn-light{ background:#fff !important; color:var(--hnd-navy) !important; box-shadow:0 12px 30px rgba(0,0,0,.16); } /* 2. Header */ .main-header .header-lower,.main-header .main-box{ transition:padding .4s var(--hnd-ease), box-shadow .4s var(--hnd-ease), background .4s var(--hnd-ease); } body.hnd-scrolled .main-header .header-lower,body.hnd-scrolled .main-header .main-box{ box-shadow:0 10px 34px rgba(16,42,76,.12); } .main-menu .navigation > li > a{ position:relative; transition:color .3s var(--hnd-ease); } .main-menu .navigation > li > a::after{ content:""; position:absolute; left:50%; bottom:-6px; height:2px; width:0; background:linear-gradient(90deg,var(--hnd-blue),var(--hnd-sky)); transform:translateX(-50%); transition:width .38s var(--hnd-ease); } .main-menu .navigation > li:hover > a::after, .main-menu .navigation > li.current-menu-item > a::after, .main-menu .navigation > li.current_page_item > a::after{ width:78%; } /* 3. Services dropdown */ .main-menu .navigation > li > ul{ width:296px; padding:10px 0; border:0; border-radius:10px; box-shadow:var(--hnd-shadow-hi); border-top:3px solid var(--hnd-blue); background:#fff; } .main-menu .navigation > li > ul > li{ border:0; } .main-menu .navigation > li > ul > li > a{ padding:10px 22px; font-size:14.5px; font-weight:500; line-height:1.4; color:var(--hnd-navy); position:relative; transition:all .3s var(--hnd-ease); } .main-menu .navigation > li > ul > li > a::before{ content:""; position:absolute; left:10px; top:50%; width:4px; height:4px; border-radius:50%; background:var(--hnd-blue); transform:translateY(-50%) scale(0); transition:transform .3s var(--hnd-ease); } .main-menu .navigation > li > ul > li > a:hover{ background:var(--hnd-sky-lt); color:var(--hnd-blue); padding-left:28px; } .main-menu .navigation > li > ul > li > a:hover::before{ transform:translateY(-50%) scale(1); } /* 4. Card lift */ .service-block-one .inner-box,.service-block-two .inner-box,.news-block-one .inner-box, .team-block-one .inner-box,.process-block-one .inner-box,.single-award-block .inner-box, .project-block-one .inner-box{ transition:transform .5s var(--hnd-ease), box-shadow .5s var(--hnd-ease); will-change:transform; } .service-block-one .inner-box:hover,.service-block-two .inner-box:hover,.news-block-one .inner-box:hover, .team-block-one .inner-box:hover,.process-block-one .inner-box:hover,.project-block-one .inner-box:hover{ transform:translateY(-10px); box-shadow:var(--hnd-shadow-hi); } .service-block-one .image-box img,.service-block-two .image-box img, .news-block-one .image-box img,.team-block-one .image-box img{ transition:transform 1.1s var(--hnd-ease); } .service-block-one .inner-box:hover .image-box img,.service-block-two .inner-box:hover .image-box img, .news-block-one .inner-box:hover .image-box img,.team-block-one .inner-box:hover .image-box img{ transform:scale(1.08); } /* 6. Inner banner */ .page-title{ position:relative; overflow:hidden; } .page-title::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(120deg,rgba(16,42,76,.62) 0%,rgba(23,60,107,.46) 55%,rgba(42,98,170,.34) 100%); } .page-title .auto-container,.page-title .pattern-layer{ position:relative; z-index:2; } .page-title .title-box h1{ color:#fff; font-size:48px; letter-spacing:-.6px; animation:hndRise .9s var(--hnd-ease) both; } .page-title .title-box p{ color:#D8E6F7; max-width:720px; margin:14px auto 0; font-size:17px; animation:hndRise .9s .12s var(--hnd-ease) both; } .page-title .bread-crumb li,.page-title .bread-crumb li a{ color:#CFE0F4 !important; } .page-title .bread-crumb li a:hover{ color:#fff !important; } .page-title::after{ content:""; position:absolute; z-index:1; width:520px; height:520px; border-radius:50%; right:-140px; top:-200px; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),transparent 62%); animation:hndDrift 16s ease-in-out infinite alternate; } @keyframes hndDrift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-60px,50px,0) } } @keyframes hndRise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } } body.hnd-service-single .page-title .post-info, body.hnd-service-single .page-title .date, body.hnd-service-single .page-title .post-date, body.hnd-service-single .blog-details-content .post-share-option, body.hnd-service-single .blog-details-content .comments-area, body.hnd-service-single .blog-details-content .comment-form, body.hnd-service-single .blog-details-content .group-title, body.hnd-service-single .blog-details-content .post-tags{ display:none !important; } /* 7. Scroll reveal */ [data-aos]{ opacity:0; transition:opacity .8s var(--hnd-ease), transform .8s var(--hnd-ease); will-change:opacity,transform; } [data-aos="fade-up"]{ transform:translateY(38px); } [data-aos="fade-left"]{ transform:translateX(38px); } [data-aos="fade-right"]{ transform:translateX(-38px); } [data-aos="zoom"]{ transform:scale(.94); } [data-aos].is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ [data-aos]{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } } /* 8. Service detail */ body.hnd-service-single .blog-details-content{ padding:0; } .hnd-svc-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:48px; align-items:start; margin:6px 0 0; } .hnd-svc-main{ min-width:0; color:var(--hnd-body); font-size:16.5px; line-height:1.78; } .hnd-svc-main h3{ color:var(--hnd-navy); font-size:23px; margin:34px 0 14px; position:relative; padding-left:16px; } .hnd-svc-main h3::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:4px; background:linear-gradient(var(--hnd-blue),var(--hnd-sky)); } .hnd-svc-hero{ margin:0 0 32px; border-radius:16px; overflow:hidden; position:relative; box-shadow:var(--hnd-shadow); } .hnd-svc-hero img{ width:100%; height:380px; object-fit:cover; display:block; transition:transform 1.4s var(--hnd-ease); } .hnd-svc-hero:hover img{ transform:scale(1.05); } .hnd-svc-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,42,76,0) 45%,rgba(16,42,76,.62) 100%); } .hnd-svc-hero-tag{ position:absolute; left:22px; bottom:20px; z-index:2; background:rgba(255,255,255,.94); color:var(--hnd-blue); font-size:11.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:8px 16px; border-radius:40px; } .hnd-svc-main .hnd-lede{ font-size:20px; line-height:1.6; color:var(--hnd-navy); font-weight:500; padding:22px 26px; background:var(--hnd-sky-lt); border-radius:12px; border-left:4px solid var(--hnd-blue); margin:0 0 8px; } .hnd-svc-main .hnd-ticks{ list-style:none; padding:0; margin:0 0 10px; } .hnd-svc-main .hnd-ticks li{ position:relative; padding:11px 0 11px 40px; border-bottom:1px solid var(--hnd-line); } .hnd-svc-main .hnd-ticks li:last-child{ border-bottom:0; } .hnd-svc-main .hnd-ticks li::before{ content:""; position:absolute; left:0; top:14px; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--hnd-blue),var(--hnd-sky)); } .hnd-svc-main .hnd-ticks li::after{ content:""; position:absolute; left:8px; top:20px; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } .hnd-svc-main .hnd-note{ margin:30px 0 0; padding:22px 26px; border-radius:12px; background:linear-gradient(120deg,var(--hnd-navy),var(--hnd-blue)); color:#DCE9F8; } .hnd-svc-main .hnd-note strong{ color:#fff; } .hnd-svc-nav{ display:flex; justify-content:space-between; gap:18px; margin:44px 0 0; padding-top:26px; border-top:1px solid var(--hnd-line); } .hnd-svc-nav a{ max-width:46%; text-decoration:none; color:var(--hnd-navy); font-weight:600; line-height:1.35; transition:color .3s var(--hnd-ease), transform .3s var(--hnd-ease); } .hnd-svc-nav a span{ display:block; font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--hnd-blue); margin-bottom:6px; font-weight:700; } .hnd-svc-nav a.next{ text-align:right; } .hnd-svc-nav a:hover{ color:var(--hnd-blue); } .hnd-svc-nav a.prev:hover{ transform:translateX(-4px); } .hnd-svc-nav a.next:hover{ transform:translateX(4px); } .hnd-svc-side{ position:sticky; top:110px; display:flex; flex-direction:column; gap:22px; } .hnd-side-card{ background:#fff; border:1px solid var(--hnd-line); border-radius:14px; padding:26px 26px 28px; box-shadow:var(--hnd-shadow); } .hnd-side-card h4{ margin:0 0 16px; font-size:16px; letter-spacing:.4px; text-transform:uppercase; color:var(--hnd-navy); font-weight:700; } .hnd-side-list ul{ list-style:none; margin:0; padding:0; } .hnd-side-list li{ border-bottom:1px solid var(--hnd-line); position:relative; } .hnd-side-list li:last-child{ border-bottom:0; } .hnd-side-list li a{ display:block; padding:11px 12px 11px 0; color:var(--hnd-body); font-size:15px; text-decoration:none; transition:all .3s var(--hnd-ease); } .hnd-side-list li a:hover{ color:var(--hnd-blue); padding-left:10px; } .hnd-side-list li.is-current a{ color:var(--hnd-blue); font-weight:700; padding-left:10px; } .hnd-side-list li.is-current::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(var(--hnd-blue),var(--hnd-sky)); } .hnd-side-cta{ background:linear-gradient(150deg,var(--hnd-navy) 0%,var(--hnd-blue) 100%); border:0; color:#D6E5F7; } .hnd-side-cta h4{ color:#fff; } .hnd-side-cta p{ font-size:14.5px; line-height:1.65; margin:0 0 20px; } .hnd-side-cta .hnd-btn{ display:block; text-align:center; background:#fff !important; color:var(--hnd-navy) !important; } .hnd-side-tel{ display:block; text-align:center; margin-top:14px; color:#fff; font-weight:700; font-size:18px; text-decoration:none; } .hnd-side-dl p{ font-size:14.5px; line-height:1.65; color:var(--hnd-body); margin:0 0 20px; } .hnd-side-dl .hnd-btn{ display:block; text-align:center; } .hnd-svc-band{ position:relative; width:100vw; left:50%; margin-left:-50vw; margin-top:76px; background:linear-gradient(120deg,var(--hnd-navy-dk),var(--hnd-blue)); color:#fff; text-align:center; overflow:hidden; } .hnd-svc-band::before{ content:""; position:absolute; width:640px; height:640px; border-radius:50%; left:-180px; bottom:-360px; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%); animation:hndDrift 18s ease-in-out infinite alternate; } .hnd-svc-band-in{ position:relative; z-index:2; max-width:760px; margin:0 auto; padding:70px 20px 74px; } .hnd-svc-band h3{ color:#fff; font-size:32px; margin:0 0 12px; } .hnd-svc-band p{ color:#CFE0F4; font-size:17px; margin:0 0 26px; } @media (max-width:1100px){ .hnd-svc-wrap{ grid-template-columns:1fr; gap:36px; } .hnd-svc-side{ position:static; } } @media (max-width:640px){ .hnd-svc-hero img{ height:230px; } .hnd-svc-main .hnd-lede{ font-size:17px; padding:18px 20px; } .page-title .title-box h1{ font-size:31px; } .hnd-svc-band h3{ font-size:24px; } .hnd-svc-nav{ flex-direction:column; } .hnd-svc-nav a{ max-width:100%; } .hnd-svc-nav a.next{ text-align:left; } } /* 9. Footer + misc */ .main-footer .footer-bottom .copyright a{ color:var(--hnd-sky); } .main-footer ul li a{ transition:padding-left .3s var(--hnd-ease), color .3s var(--hnd-ease); } .main-footer ul li a:hover{ padding-left:6px; color:#fff; } .scroll-top{ transition:transform .4s var(--hnd-ease), box-shadow .4s var(--hnd-ease); } .scroll-top:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(42,98,170,.4); } .page-title{ padding:150px 0 110px; background-size:cover; background-position:center; } .page-title .bread-crumb{ margin-top:26px; } .page-title .bread-crumb li{ font-size:13px; letter-spacing:1.2px; text-transform:uppercase; } /* HND-V3-START */ /* HND-V3: services grid, sticky header, page polish */ .sticky-header{ background:#fff !important; box-shadow:0 10px 30px rgba(16,42,76,.13); } .sticky-header .logo-box img,.sticky-header .logo img{ max-height:42px; width:auto; } .sticky-header .main-menu .navigation > li > a{ color:var(--hnd-navy); } .service-block-one .inner-box{ border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 10px 30px rgba(23,60,107,.08); } .service-block-one .image-box{ position:relative; overflow:hidden; margin:0; background:linear-gradient(135deg,var(--hnd-navy),var(--hnd-blue)); } .service-block-one .image-box img{ mix-blend-mode:luminosity; opacity:.55; transition:opacity .6s var(--hnd-ease), transform 1.2s var(--hnd-ease), mix-blend-mode .3s; } .service-block-one .inner-box:hover .image-box img{ opacity:.95; mix-blend-mode:normal; transform:scale(1.07); } .service-block-one .lower-content{ position:relative; } .service-block-one .content-box .inner{ background:#fff; border-radius:14px; padding:26px 22px 22px; box-shadow:0 14px 34px rgba(23,60,107,.12); transition:transform .5s var(--hnd-ease); } .service-block-one .inner-box:hover .content-box .inner{ transform:translateY(-6px); } .service-block-one .icon-box img{ width:56px; height:56px; object-fit:contain; transition:transform .6s var(--hnd-ease); } .service-block-one .inner-box:hover .icon-box img{ transform:scale(1.12) rotate(-4deg); } .service-block-one h4{ font-size:19px; line-height:1.32; margin-top:12px; } .service-block-one h4 a{ color:var(--hnd-navy); transition:color .3s var(--hnd-ease); } .service-block-one .inner-box:hover h4 a{ color:var(--hnd-blue); } .service-block-one .link a,.service-block-one .btn-box a{ font-size:12.5px; letter-spacing:1.6px; font-weight:700; color:var(--hnd-blue); position:relative; padding-bottom:3px; } .service-block-one .link a::after,.service-block-one .btn-box a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--hnd-blue),var(--hnd-sky)); transition:width .4s var(--hnd-ease); } .service-block-one .inner-box:hover .link a::after,.service-block-one .inner-box:hover .btn-box a::after{ width:100%; } .sec-title .sub-title,.sec-title h5{ letter-spacing:2.2px; text-transform:uppercase; font-weight:700; font-size:12.5px; color:var(--hnd-blue); } /* HND-V4-START */ /* HND-V4: bespoke page sections */ .hnd-full-bleed,.hnd-band,.hnd-video-sec,.hnd-who{ position:relative; width:100vw; left:50%; margin-left:-50vw; } .hnd-eyebrow{ display:inline-block; font-size:12.5px; letter-spacing:2.4px; text-transform:uppercase; font-weight:700; color:var(--hnd-blue); margin-bottom:12px; } .hnd-sec-head h3{ font-size:36px; line-height:1.2; color:var(--hnd-navy); margin:0 0 10px; letter-spacing:-.4px; } /* video section */ .hnd-video-sec{ background:var(--hnd-mist); padding:90px 20px 96px; text-align:center; overflow:hidden; } .hnd-video-in{ max-width:920px; margin:0 auto; } .hnd-video-sec h3{ font-size:38px; color:var(--hnd-navy); margin:0 0 12px; letter-spacing:-.5px; } .hnd-video-lede{ color:var(--hnd-body); font-size:17px; margin:0 0 34px; } .hnd-video-frame{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px rgba(16,42,76,.24); background:var(--hnd-navy-dk); } .hnd-video-frame video{ display:block; width:100%; height:auto; } /* who-we-serve grid */ .hnd-who{ background:#fff; padding:96px 20px 100px; } .hnd-who-in{ max-width:1170px; margin:0 auto; } .hnd-who .hnd-sec-head{ text-align:center; margin-bottom:48px; } .hnd-who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .hnd-who-card{ position:relative; padding:44px 30px 34px; border:1px solid var(--hnd-line); border-radius:16px; background:#fff; overflow:hidden; transition:transform .5s var(--hnd-ease), box-shadow .5s var(--hnd-ease), border-color .5s var(--hnd-ease); } .hnd-who-card::before{ content:""; position:absolute; left:0; top:0; height:4px; width:0; background:linear-gradient(90deg,var(--hnd-blue),var(--hnd-sky)); transition:width .55s var(--hnd-ease); } .hnd-who-card:hover{ transform:translateY(-8px); box-shadow:var(--hnd-shadow-hi); border-color:transparent; } .hnd-who-card:hover::before{ width:100%; } .hnd-who-num{ display:block; font-size:44px; font-weight:700; line-height:1; color:var(--hnd-sky-lt); margin-bottom:10px; letter-spacing:-1px; } .hnd-who-card h4{ font-size:20px; color:var(--hnd-navy); margin:0 0 10px; } .hnd-who-card p{ color:var(--hnd-body); font-size:15.5px; line-height:1.72; margin:0; } /* CTA band */ .hnd-band-cta{ background:linear-gradient(120deg,var(--hnd-navy-dk) 0%,var(--hnd-blue) 100%); color:#fff; text-align:center; padding:0; overflow:hidden; } .hnd-band-cta::before{ content:""; position:absolute; width:760px; height:760px; border-radius:50%; right:-220px; top:-420px; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 62%); animation:hndDrift 20s ease-in-out infinite alternate; } .hnd-band-in{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:82px 20px 88px; } .hnd-band-cta .hnd-eyebrow{ color:#9EC4EE; } .hnd-band-cta h3{ color:#fff; font-size:36px; margin:0 0 12px; letter-spacing:-.4px; } .hnd-band-cta p{ color:#CFE0F4; font-size:17px; margin:0 0 30px; } .hnd-band-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .hnd-btn-outline{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.5); box-shadow:none; } .hnd-btn-outline:hover{ background:rgba(255,255,255,.12) !important; border-color:#fff; } /* about page: hide the theme demo play button (our own video sits below) */ body.page-id-383 .about-style-two .video-btn, body.page-id-383 .about-style-two .video-inner .video-btn{ display:none !important; } @media (max-width:900px){ .hnd-who-grid{ grid-template-columns:1fr; } .hnd-video-sec h3,.hnd-band-cta h3,.hnd-sec-head h3{ font-size:27px; } .hnd-video-sec,.hnd-who{ padding:62px 18px 66px; } } /* HND-V5-START */ /* HND-V5: process / history section repairs */ .process-style-two .inner-container{ background-color:var(--hnd-navy-dk); background-blend-mode:multiply; border-radius:20px; overflow:hidden; } .process-style-two .inner-container::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(16,42,76,.86),rgba(42,98,170,.68)); z-index:0; } .process-style-two .inner-container > *{ position:relative; z-index:2; } .process-style-two .single-item .inner-box{ transition:transform .5s var(--hnd-ease); } .process-style-two .single-item:hover .inner-box{ transform:translateY(-8px); } .process-style-two .icon-box img{ width:66px !important; height:66px !important; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; transition:transform .6s var(--hnd-ease); } .process-style-two .single-item:hover .icon-box img{ transform:scale(1.1) rotate(-4deg); } .process-style-two .single-item h2{ font-size:44px !important; color:rgba(255,255,255,.30) !important; letter-spacing:-1px; } .process-style-two .single-item span{ letter-spacing:2.2px; text-transform:uppercase; font-size:11.5px; color:#9EC4EE; font-weight:700; } .process-style-two .single-item h3 a{ color:#fff; pointer-events:none; } .process-style-two .single-item p{ color:#CFE0F4; } .process-style-two .single-item .link{ display:none !important; } /* our-history two-pillar block */ .history-section .single-item,.history-block-one .inner-box{ transition:transform .5s var(--hnd-ease); } .history-section .single-item:hover,.history-block-one .inner-box:hover{ transform:translateY(-6px); } /* about page: kill the demo briefcase prop */ body.page-id-383 .about-style-two .image-2, body.page-id-383 .about-style-two .briefcase, body.page-id-383 .about-style-two figure.image-3{ display:none !important; } /* HND-V5b */ .process-style-two .inner-container{ background-image:linear-gradient(125deg,#102A4C 0%,#1F4C86 48%,#2A62AA 100%) !important; } .process-style-two .inner-container::after{ display:none; } .process-style-two .pattern-layer{ opacity:.18; } /* HND-V6-START */ /* HND-V6 */ .history-section .image-layer{ display:none !important; } .history-section{ padding:96px 0 40px; } .history-section .inner-box{ padding-bottom:18px; } .history-section .sec-title h2{ font-size:34px; letter-spacing:-.4px; } .history-section .image-box img{ max-width:150px; height:auto; } .history-section .inner-box h3{ font-size:21px; } .about-style-two .image-layer, .about-style-two figure.image-2{ display:none !important; } /* HND-V7-START */ /* HND-V7: principles, strips, contact + toolkit polish */ .hnd-principles{ position:relative; width:100vw; left:50%; margin-left:-50vw; background:var(--hnd-mist); padding:92px 20px 96px; } .hnd-principles-in{ max-width:1000px; margin:0 auto; } .hnd-principles .hnd-sec-head{ text-align:center; margin-bottom:46px; } .hnd-principles-list{ display:flex; flex-direction:column; gap:18px; } .hnd-principle{ display:flex; gap:26px; align-items:flex-start; background:#fff; border-radius:16px; padding:30px 32px; box-shadow:0 12px 34px rgba(23,60,107,.07); transition:transform .5s var(--hnd-ease), box-shadow .5s var(--hnd-ease); } .hnd-principle:hover{ transform:translateX(6px); box-shadow:var(--hnd-shadow-hi); } .hnd-principle-num{ flex:0 0 auto; font-size:30px; font-weight:700; line-height:1; color:#fff; background:linear-gradient(140deg,var(--hnd-blue),var(--hnd-navy)); width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; } .hnd-principle h4{ margin:4px 0 8px; font-size:21px; color:var(--hnd-navy); } .hnd-principle p{ margin:0; color:var(--hnd-body); font-size:15.8px; line-height:1.75; } .hnd-strip{ position:relative; width:100vw; left:50%; margin-left:-50vw; background:#fff; padding:92px 20px 96px; } .hnd-strip-in{ max-width:1170px; margin:0 auto; } .hnd-strip .hnd-sec-head{ text-align:center; margin-bottom:46px; } .hnd-strip-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:none; } .hnd-strip-list li{ position:relative; padding:34px 28px 30px; border-radius:16px; background:var(--hnd-mist); border:1px solid transparent; transition:transform .5s var(--hnd-ease), box-shadow .5s var(--hnd-ease), background .5s var(--hnd-ease); } .hnd-strip-list li:hover{ transform:translateY(-8px); background:#fff; box-shadow:var(--hnd-shadow-hi); border-color:var(--hnd-line); } .hnd-strip-list li span{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:linear-gradient(140deg,var(--hnd-blue),var(--hnd-sky)); color:#fff; font-weight:700; font-size:16px; margin-bottom:16px; } .hnd-strip-list li h4{ margin:0 0 8px; font-size:19px; color:var(--hnd-navy); } .hnd-strip-list li p{ margin:0; color:var(--hnd-body); font-size:15.4px; line-height:1.72; } /* contact page tiles */ .hnd-contact-item,.hnd-contact .hnd-card{ transition:transform .45s var(--hnd-ease), box-shadow .45s var(--hnd-ease); } .hnd-contact-item:hover{ transform:translateY(-4px); } .hnd-hours li,.hnd-hours tr{ transition:background .3s var(--hnd-ease); } .hnd-hours li:hover,.hnd-hours tr:hover{ background:var(--hnd-sky-lt); } /* forms */ .wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea{ border:1px solid var(--hnd-line) !important; border-radius:10px !important; padding:14px 16px !important; transition:border-color .3s var(--hnd-ease), box-shadow .3s var(--hnd-ease); background:#fff; } .wpcf7 input:focus,.wpcf7 textarea:focus{ border-color:var(--hnd-blue) !important; box-shadow:0 0 0 4px rgba(42,98,170,.12) !important; outline:none; } .wpcf7 input[type=submit]{ background:linear-gradient(115deg,var(--hnd-blue),var(--hnd-navy)) !important; color:#fff !important; border:0 !important; border-radius:8px !important; padding:15px 30px !important; font-weight:600 !important; box-shadow:0 10px 24px rgba(42,98,170,.28); transition:transform .4s var(--hnd-ease), box-shadow .4s var(--hnd-ease); cursor:pointer; } .wpcf7 input[type=submit]:hover{ transform:translateY(-3px); box-shadow:0 18px 34px rgba(42,98,170,.34); } /* faq accordion */ .hnd-faq details{ border:1px solid var(--hnd-line); border-radius:12px; margin-bottom:12px; background:#fff; transition:box-shadow .4s var(--hnd-ease), border-color .4s var(--hnd-ease); } .hnd-faq details[open]{ box-shadow:var(--hnd-shadow); border-color:transparent; } .hnd-faq summary{ cursor:pointer; padding:20px 24px; font-weight:600; color:var(--hnd-navy); list-style:none; position:relative; } .hnd-faq summary::-webkit-details-marker{ display:none; } .hnd-faq summary::after{ content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--hnd-blue); transition:transform .35s var(--hnd-ease); } .hnd-faq details[open] summary::after{ content:"-"; } @media (max-width:900px){ .hnd-strip-list{ grid-template-columns:1fr; } .hnd-principle{ flex-direction:column; gap:16px; padding:26px 22px; } .hnd-principles,.hnd-strip{ padding:62px 18px 66px; } } /* HND-V8-START */ /* HND-V8: service single clean-up */ body.hnd-service-single .blog-details-content .inner-box > figure.image-box, body.hnd-service-single .blog-details-content .inner-box > .image-box, body.hnd-service-single .blog-details-content > .thm-unit-test > .post-share-option, body.hnd-service-single .blog-details-content > .thm-unit-test > .author-box, body.hnd-service-single .blog-details-content > .thm-unit-test > .nav-btn-box, body.hnd-service-single .blog-details-content .inner-box > .lower-content > .post-info, body.hnd-service-single .blog-details-content .inner-box > .lower-content > h2{ display:none !important; } body.hnd-service-single .sidebar-page-container{ padding-top:70px; padding-bottom:0; } body.hnd-service-single .blog-details-content .inner-box{ box-shadow:none; border:0; padding:0; } /* HND-V9-START */ /* HND-V9: retire the theme's warm beige accent, use the brand tint */ .sec-title .top-title::before, .sec-title .top-title::after, .main-header .language .lang-btn, .clients-section .clients-logo-box .logo-title, .clients-section .clients-logo-box .logo-title::before, #content_block_1 .content-box .tab-btns li, #content_block_3 .content-box .author-text, #content_block_3 .content-box .author-text::before, .service-section .anim-icon .icon-2, .team-section .sec-title .top-title::after, .team-block-one .inner-box .image-box .share-box p, .team-block-one .inner-box .image-box .share-box .social-links, .bg-color-2, .testimonial-section .sec-title .top-title::after, .banner-section.style-two::before, .service-style-two .bg-layer, .project-section .sec-title .top-title::after, .industries-style-two .sec-title .top-title::after, .about-style-two .content-box .author-text, .about-style-two .content-box .author-text::before{ background-color:var(--hnd-sky-lt) !important; } .banner-section{ background-color:#EDF3FB !important; } #content_block_1 .content-box .tab-btns li.active-btn{ background-color:var(--hnd-blue) !important; color:#fff !important; } #content_block_1 .content-box .tab-btns li.active-btn h4, #content_block_1 .content-box .tab-btns li.active-btn *{ color:#fff !important; } .sec-title .top-title{ color:var(--hnd-blue) !important; letter-spacing:2px; text-transform:uppercase; font-weight:700; } /* HND-V10-START */ /* HND-V10: cool the hero pattern layers */ .banner-section .pattern-layer, .banner-section .pattern-1, .banner-section .pattern-2, .banner-section .pattern-3{ filter:hue-rotate(185deg) saturate(1.5) brightness(.99); } .banner-carousel .slide-item, .banner-section .slide-item{ background-color:#EDF3FB !important; } .banner-section .content-box h2, .banner-section .content-box h1{ color:var(--hnd-navy) !important; } /* HND-V11-START */ /* HND-V11: brand decorative layer behind the hero copy */ .banner-section .slide-item{ position:relative; overflow:hidden; } .banner-section .slide-item::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:-260px; top:-220px; width:900px; height:900px; border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(42,98,170,.10) 0 2px, transparent 2px 78px), radial-gradient(circle at 45% 45%, rgba(76,143,216,.16), transparent 62%); animation:hndDrift 22s ease-in-out infinite alternate; } .banner-section .slide-item::after{ content:""; position:absolute; z-index:0; pointer-events:none; left:6%; bottom:8%; width:230px; height:230px; background-image:radial-gradient(rgba(42,98,170,.28) 1.6px, transparent 1.7px); background-size:26px 26px; opacity:.7; } .banner-section .slide-item .auto-container, .banner-section .slide-item .content-box, .banner-section .slide-item .image-layer{ position:relative; z-index:2; } /* HND-V12-START */ /* HND-V12: reviews, subscribe, site map, blog safety */ /* blog list: never let the overlap rule collapse a card without an image */ .sidebar-page-container .news-block-one{ margin-bottom:44px; } .sidebar-page-container .news-block-one .inner-box > .lower-content > .inner{ margin-top:-190px; } .sidebar-page-container .news-block-one .inner-box:not(:has(.image-box)) > .lower-content > .inner{ margin-top:0 !important; } .sidebar-page-container .news-block-one .inner-box{ overflow:hidden; border-radius:12px; } .sidebar-page-container .news-block-one .image-box img{ width:100%; height:auto; display:block; } /* subscribe form */ .hnd-subscribe{ position:relative; } .hnd-sub-form{ display:flex; align-items:center; gap:14px; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:6px; } .hnd-sub-form input[type=email]{ flex:1 1 auto; background:transparent; border:0; color:#fff; font-size:16px; padding:12px 0; outline:none; } .hnd-sub-form input[type=email]::placeholder{ color:rgba(255,255,255,.55); } .hnd-sub-form button{ flex:0 0 auto; background:transparent; border:0; color:#fff; font-weight:700; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:color .3s var(--hnd-ease), transform .3s var(--hnd-ease); } .hnd-sub-form button:hover{ color:var(--hnd-sky); transform:translateX(3px); } .hnd-hp{ position:absolute !important; left:-9999px !important; height:0; overflow:hidden; } .hnd-sub-msg{ margin:0 0 14px; font-size:15px; } .hnd-sub-msg.is-ok{ color:#9FE0B4; } .hnd-sub-msg.is-bad{ color:#F3A9A9; } /* reviews grid */ .hnd-reviews{ position:relative; width:100vw; left:50%; margin-left:-50vw; background:var(--hnd-mist); padding:94px 20px 98px; } .hnd-reviews-in{ max-width:1170px; margin:0 auto; } .hnd-reviews .hnd-sec-head{ text-align:center; margin-bottom:46px; } .hnd-reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .hnd-review{ margin:0; background:#fff; border-radius:16px; padding:32px 30px 28px; position:relative; box-shadow:0 12px 34px rgba(23,60,107,.08); transition:transform .5s var(--hnd-ease), box-shadow .5s var(--hnd-ease); } .hnd-review:hover{ transform:translateY(-8px); box-shadow:var(--hnd-shadow-hi); } .hnd-review::after{ content:"\201C"; position:absolute; right:24px; top:6px; font-size:84px; line-height:1; color:var(--hnd-sky-lt); font-family:Georgia,serif; } .hnd-rev-stars{ color:var(--hnd-gold); letter-spacing:3px; font-size:15px; margin-bottom:14px; } .hnd-review blockquote{ margin:0 0 22px; padding:0; border:0; color:var(--hnd-body); font-size:15.6px; line-height:1.75; position:relative; z-index:2; } .hnd-review figcaption{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--hnd-line); padding-top:18px; } .hnd-review figcaption img{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; } .hnd-review figcaption span{ display:flex; flex-direction:column; } .hnd-review figcaption strong{ color:var(--hnd-navy); font-size:15.5px; } .hnd-review figcaption em{ font-style:normal; color:var(--hnd-body); font-size:13.4px; margin-top:2px; } /* theme testimonial carousel polish */ .testimonial-block-one .inner-box{ transition:transform .5s var(--hnd-ease); } .testimonial-block-one .inner-box:hover{ transform:translateY(-6px); } .testimonial-block-one .author-thumb img{ border-radius:50%; } .testimonial-section .rating li i{ color:var(--hnd-gold); } /* site map */ .hnd-sitemap{ position:relative; width:100vw; left:50%; margin-left:-50vw; background:#fff; padding:86px 20px 92px; } .hnd-sitemap-in{ max-width:1170px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; } .hnd-sitemap-col h3{ font-size:17px; text-transform:uppercase; letter-spacing:1.4px; color:var(--hnd-navy); margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--hnd-sky-lt); } .hnd-sitemap-col .hnd-sitemap-sub{ margin-top:32px; } .hnd-sitemap-col ul{ list-style:none; margin:0; padding:0; } .hnd-sitemap-col li{ margin-bottom:2px; } .hnd-sitemap-col li a{ display:block; padding:9px 0 9px 18px; color:var(--hnd-body); font-size:15.4px; text-decoration:none; position:relative; transition:all .3s var(--hnd-ease); } .hnd-sitemap-col li a::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%; background:var(--hnd-line); transform:translateY(-50%); transition:background .3s var(--hnd-ease); } .hnd-sitemap-col li a:hover{ color:var(--hnd-blue); padding-left:24px; } .hnd-sitemap-col li a:hover::before{ background:var(--hnd-blue); } @media (max-width:980px){ .hnd-reviews-grid{ grid-template-columns:1fr 1fr; } .hnd-sitemap-in{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .hnd-reviews-grid,.hnd-sitemap-in{ grid-template-columns:1fr; } .hnd-reviews{ padding:62px 18px 66px; } } /* HND-V13-START */ /* HND-V13: testimonial carousel tidy */ .testimonial-block-one .inner-box{ min-height:300px; } .testimonial-block-one .quote-box img{ filter:hue-rotate(186deg) saturate(1.35) brightness(.95); } .testimonial-block-one .author-box h3{ font-size:19px; color:var(--hnd-navy); } .testimonial-block-one .author-box h3 span{ display:block; font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--hnd-body); font-weight:600; margin-top:4px; } .testimonial-block-one .rating li i{ color:var(--hnd-gold) !important; } .testimonial-section .sec-title h2{ letter-spacing:-.4px; } /* HND-V14-START */ /* HND-V14: hiring / CTA duo band - Aaronna cut-outs + brand colours */ .hiring-section{ position:relative; overflow:hidden; } .hiring-section .left-column{ background-color:var(--hnd-navy) !important; position:relative; } .hiring-section .right-column{ background-color:var(--hnd-blue) !important; position:relative; } .hiring-section .image-layer{ position:absolute !important; left:0; right:0; top:0; bottom:0; z-index:5; pointer-events:none; } .hiring-section .image-layer .image-1, .hiring-section .image-layer .image-2{ position:absolute !important; bottom:0 !important; top:auto !important; width:auto !important; height:98% !important; margin:0 !important; z-index:5; } .hiring-section .image-layer .image-1{ left:0 !important; right:auto !important; } .hiring-section .image-layer .image-2{ right:0 !important; left:auto !important; } .hiring-section .image-layer img{ height:100% !important; width:auto !important; max-width:none !important; object-fit:contain; object-position:bottom; display:block; filter:drop-shadow(0 20px 38px rgba(0,0,0,.30)); } .hiring-section .inner-box{ position:relative; z-index:6; } @media (max-width:1200px){ .hiring-section .image-layer .image-1,.hiring-section .image-layer .image-2{ height:82% !important; opacity:.9; } } @media (max-width:991px){ .hiring-section .image-layer{ opacity:.22; } } /* HND-V15-START */ /* HND-V15: testimonial cards - remove the dark quote tile and the mis-sized decorative frame that cut across the quote text */ .testimonial-block-one .quote-box, .testimonial-block-one .border-shap{ display:none !important; } .testimonial-block-one .inner-box::before, .testimonial-block-one .inner-box::after{ display:none !important; } .testimonial-block-one .inner-box{ min-height:0 !important; height:auto !important; background:#fff; border:1px solid var(--hnd-line); border-radius:16px; padding:34px 34px 32px !important; box-shadow:0 12px 34px rgba(23,60,107,.08); transition:transform .5s var(--hnd-ease), box-shadow .5s var(--hnd-ease); } .testimonial-block-one .inner-box:hover{ transform:translateY(-6px); box-shadow:var(--hnd-shadow-hi); } .testimonial-block-one .author-box{ padding-left:78px !important; min-height:60px; } .testimonial-block-one .text{ margin-top:18px; } .testimonial-block-one .text p{ color:var(--hnd-body); } /* equal height across the carousel row */ .testimonial-carousel .owl-stage{ display:flex; align-items:stretch; } .testimonial-carousel .owl-item{ display:flex; } .testimonial-carousel .owl-item > div, .testimonial-carousel .testimonial-block-one{ display:flex; width:100%; } .testimonial-carousel .testimonial-block-one .inner-box{ width:100%; } /* HND-V16-START */ /* HND-V16: step titles keep their colour now that the empty anchors are gone */ .process-style-two .single-item h3, .process-style-two .single-item h3 a{ color:#fff !important; } .process-style-two .single-item h3 a{ pointer-events:none; } /* HND-V17-START */ /* ===================================================================== HND-V17 — one button system, one heading scale, one vertical rhythm ===================================================================== */ /* ---- 9. buttons: 52px, sentence case, 600, 6px radius ---- */ .theme-btn, .theme-btn-one, .theme-btn-two, .hnd-btn, .wpcf7 input[type=submit], .search-popup .search-btn, .search-popup button[type=submit]{ min-height:52px !important; padding:14px 28px !important; border-radius:6px !important; font-size:15px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:.2px !important; line-height:1.4 !important; display:inline-flex !important; align-items:center; justify-content:center; border:0; } .hnd-btn-ghost, .hnd-btn-outline{ border-width:2px !important; border-style:solid; } .theme-btn .icon, .theme-btn i{ line-height:1; } /* ---- 10. scroll-to-top: brand navy, not the theme's maroon ---- */ .scroll-top, .scroll-top .scroll-bar, .scroll-to-top, .scroll-top .scroll-bar-text{ background-color:var(--hnd-navy) !important; color:#fff !important; } .scroll-top{ border-radius:8px !important; box-shadow:0 10px 26px rgba(16,42,76,.28); } .scroll-top:hover{ background-color:var(--hnd-blue) !important; } /* ---- 11. header search button on-brand ---- */ .search-popup .search-btn, .search-popup button, .search-popup input[type=submit]{ background:linear-gradient(115deg,var(--hnd-blue),var(--hnd-navy)) !important; color:#fff !important; } .search-popup .form-group input[type=search], .search-popup .form-group input[type=text]{ border-radius:6px 0 0 6px !important; border:1px solid var(--hnd-line) !important; font-size:16px !important; } .search-toggler,.search-box-outer .dropdown-toggle{ color:inherit; } /* ---- 12. one heading scale: custom sections match the theme's ---- */ .hnd-sec-head h3, .hnd-video-sec h3, .hnd-band-cta h3, .hnd-svc-band h3, .hnd-reviews .hnd-sec-head h3, .hnd-who .hnd-sec-head h3, .hnd-principles .hnd-sec-head h3, .hnd-strip .hnd-sec-head h3{ font-size:42px !important; font-weight:700 !important; line-height:1.16 !important; letter-spacing:-.6px !important; } .hnd-eyebrow, .sec-title .top-title{ font-size:13px !important; letter-spacing:2.2px !important; font-weight:700 !important; } /* ---- 13. one vertical rhythm: 96 top / 104 bottom ---- */ .welcome-section,.service-section,.recruitment-technology,.industries-section, .process-section,.testimonial-section,.awards-section,.contact-section, .about-style-two,.history-section, .hnd-video-sec,.hnd-who,.hnd-principles,.hnd-strip,.hnd-reviews,.hnd-sitemap{ padding-top:96px !important; padding-bottom:104px !important; } .hnd-band-in,.hnd-svc-band-in{ padding-top:96px !important; padding-bottom:104px !important; } .hnd-full.hnd-band{ padding-top:96px !important; padding-bottom:104px !important; } /* ---- 14. service card titles always reserve two lines ---- */ .service-block-one h4{ min-height:2.64em; display:flex; align-items:center; justify-content:center; text-align:center; margin-top:12px; } /* ---- 15. header CTA: no shadow spilling across the navy/white seam ---- */ .main-header .theme-btn-one, .header-lower .theme-btn-one, .menu-right-content .theme-btn-one{ box-shadow:0 4px 12px rgba(16,42,76,.22) !important; } .main-header .theme-btn-one:hover, .header-lower .theme-btn-one:hover, .menu-right-content .theme-btn-one:hover{ box-shadow:0 6px 16px rgba(16,42,76,.30) !important; } /* ---- 16. review captions sit on the baseline of every card ---- */ .hnd-reviews-grid{ align-items:stretch; } .hnd-review{ display:flex; flex-direction:column; } .hnd-review blockquote{ flex:1 1 auto; } .hnd-review figcaption{ margin-top:auto; } /* HND-V18-START */ /* HND-V18: no stray marker on centred section headings */ .hnd-svc-band h3::before, .hnd-band-cta h3::before, .hnd-sec-head h3::before, .hnd-video-sec h3::before, .hnd-reviews h3::before, .hnd-who h3::before, .hnd-principles h3::before, .hnd-strip h3::before{ display:none !important; content:none !important; } .hnd-svc-band h3, .hnd-band-cta h3, .hnd-sec-head h3, .hnd-video-sec h3{ padding-left:0 !important; } /* HND-V19-START */ /* HND-V19: search popup button matches the standard */ .search-popup .theme-btn, .search-popup .theme-btn.style-four, .theme-btn.style-four{ height:52px !important; min-height:52px !important; line-height:1.4 !important; padding:14px 28px !important; font-size:15px !important; font-weight:600 !important; text-transform:none !important; border-radius:6px !important; background:linear-gradient(115deg,var(--hnd-blue),var(--hnd-navy)) !important; color:#fff !important; } /* HND-V20-START */ /* HND-V20: the hero graphic now carries its own label, so drop the duplicate chip and the scrim that was only there to make the old photo readable */ .hnd-svc-hero-tag{ display:none !important; } .hnd-svc-hero::after{ display:none !important; } .hnd-svc-hero img{ height:auto !important; aspect-ratio:1200/460; } .hnd-svc-hero:hover img{ transform:none !important; } /* HND-V21-START — hero slider pacing + polish */ .banner-section{position:relative;overflow:hidden} .banner-carousel .slide-item{overflow:hidden} /* autoplay progress bar */ .hnd-slide-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.16);z-index:8;overflow:hidden;pointer-events:none} .hnd-slide-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--hnd-sky) 0%,var(--hnd-gold) 100%)} .hnd-slide-progress i.hnd-run{animation-name:hndSlideBar;animation-timing-function:linear;animation-fill-mode:forwards} @keyframes hndSlideBar{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* slow ken-burns drift on the active slide */ body.hnd-slider-on .banner-carousel .owl-item .slide-item .image-layer{transform:scale(1.002)} body.hnd-slider-on .banner-carousel .owl-item.active .slide-item .image-layer{animation:hndKenBurns 12s cubic-bezier(.25,.6,.3,1) forwards} @keyframes hndKenBurns{from{transform:scale(1.002)}to{transform:scale(1.085)}} /* staggered entrance for the slide copy */ body.hnd-slider-on .banner-carousel .owl-item.active .content-box > span, body.hnd-slider-on .banner-carousel .owl-item.active .content-box > h1, body.hnd-slider-on .banner-carousel .owl-item.active .content-box > p, body.hnd-slider-on .banner-carousel .owl-item.active .content-box > .btn-box{animation:hndSlideCopy .95s var(--hnd-ease) both} body.hnd-slider-on .banner-carousel .owl-item.active .content-box > span{animation-delay:.18s} body.hnd-slider-on .banner-carousel .owl-item.active .content-box > h1{animation-delay:.34s} body.hnd-slider-on .banner-carousel .owl-item.active .content-box > p{animation-delay:.50s} body.hnd-slider-on .banner-carousel .owl-item.active .content-box > .btn-box{animation-delay:.66s} @keyframes hndSlideCopy{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} /* brand dots */ body.hnd-slider-on .banner-section .owl-dots{display:block!important;position:absolute;left:0;right:0;bottom:38px;text-align:center;z-index:9} body.hnd-slider-on .banner-section .owl-dots .owl-dot{display:inline-block;margin:0 6px;padding:0;background:none;border:0;outline:none} body.hnd-slider-on .banner-section .owl-dots .owl-dot span{display:block;width:11px;height:11px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.62);transition:all .4s var(--hnd-ease)} body.hnd-slider-on .banner-section .owl-dots .owl-dot:hover span{border-color:#fff;transform:scale(1.15)} body.hnd-slider-on .banner-section .owl-dots .owl-dot.active span{width:34px;border-radius:8px;background:var(--hnd-gold);border-color:var(--hnd-gold)} @media (max-width:767px){ body.hnd-slider-on .banner-section .owl-dots{bottom:24px} body.hnd-slider-on .banner-carousel .owl-item.active .slide-item .image-layer{animation-duration:14s} } @media (prefers-reduced-motion:reduce){ body.hnd-slider-on .banner-carousel .owl-item.active .slide-item .image-layer, body.hnd-slider-on .banner-carousel .owl-item.active .content-box > span, body.hnd-slider-on .banner-carousel .owl-item.active .content-box > h1, body.hnd-slider-on .banner-carousel .owl-item.active .content-box > p, body.hnd-slider-on .banner-carousel .owl-item.active .content-box > .btn-box, .hnd-slide-progress i.hnd-run{animation:none!important;opacity:1;transform:none} .hnd-slide-progress{display:none} } /* HND-V21-END */ /* HND-V21B-START — slider dots contrast + arrows */ body.hnd-slider-on .banner-section .owl-dots .owl-dot span{border-color:rgba(23,60,107,.34);background:rgba(23,60,107,.06)} body.hnd-slider-on .banner-section .owl-dots .owl-dot:hover span{border-color:var(--hnd-blue);background:rgba(42,98,170,.18)} body.hnd-slider-on .banner-section .owl-dots .owl-dot.active span{background:var(--hnd-gold);border-color:var(--hnd-gold)} body.hnd-slider-on .banner-section .owl-nav{z-index:9} body.hnd-slider-on .banner-section .owl-nav.disabled{display:none} body.hnd-slider-on .banner-section .owl-nav .owl-prev, body.hnd-slider-on .banner-section .owl-nav .owl-next{background:rgba(255,255,255,.92);color:var(--hnd-navy);box-shadow:0 8px 26px rgba(16,42,76,.18);transition:all .38s var(--hnd-ease)} body.hnd-slider-on .banner-section .owl-nav .owl-prev:hover, body.hnd-slider-on .banner-section .owl-nav .owl-next:hover{background:var(--hnd-blue);color:#fff;box-shadow:0 12px 30px rgba(42,98,170,.34);transform:translateY(-2px)} @media (max-width:767px){body.hnd-slider-on .banner-section .owl-nav{display:none}} /* HND-V21B-END */ /* HND-V21C-START — mobile hero legibility scrim */ @media (max-width:991px){ .banner-carousel .slide-item .image-layer{box-shadow:inset 0 0 0 9999px rgba(236,243,252,.84)} .banner-carousel .slide-item .content-box h1, .banner-carousel .slide-item .content-box p, .banner-carousel .slide-item .content-box > span{text-shadow:0 1px 0 rgba(255,255,255,.55)} } /* HND-V21C-END */ /* HND-V22-START — welcome tabs + homepage imagery */ .welcome-section .tab-btn-box .tab-btns{display:flex;align-items:stretch;gap:30px} .welcome-section .tab-btn-box .tab-btns .tab-btn{float:none;flex:1 1 0;width:auto;margin:0;display:flex;align-items:center} .welcome-section .tab-btn-box .tab-btns .tab-btn h5{margin:0} .welcome-section .tab-btn-box .tab-btns::before, .welcome-section .tab-btn-box .tab-btns::after{display:none} .welcome-section .image-box .hnd-welcome-illus{display:block;width:100%;max-width:570px;height:auto} @media (max-width:767px){ .welcome-section .tab-btn-box .tab-btns{gap:16px} .welcome-section .tab-btn-box .tab-btns .tab-btn{padding-left:56px;padding-right:20px} } /* HND-V22-END */ /* HND-V22B-START — welcome tabs on tablet + mobile */ @media (max-width:991px){ .welcome-section .tab-btn-box .tab-btns{display:block;gap:0} .welcome-section .tab-btn-box .tab-btns .tab-btn{float:none!important;width:100%!important;max-width:none!important;margin:0 0 14px!important;padding:22px 24px 22px 70px!important;min-height:82px!important;display:flex!important;align-items:center!important} .welcome-section .tab-btn-box .tab-btns .tab-btn:last-child{margin-bottom:0!important} .welcome-section .tab-btn-box .tab-btns .tab-btn h5{margin:0} } /* HND-V22B-END */ /* HND-V23-START — hide slider progress bar */ .hnd-slide-progress{display:none!important} /* HND-V23-END */ /* HND-V24-START — contrast, buttons, blog cards, cut-outs, mini video */ /* 1. dark CTA cards: copy in white so it stands off the navy */ .hnd-side-cta, .hnd-side-cta p, .hnd-side-cta li, .hnd-side-cta span{color:rgba(255,255,255,.95)!important} .hnd-side-cta h3, .hnd-side-cta h4, .hnd-side-cta strong{color:#fff!important} .hnd-side-cta .hnd-side-phone, .hnd-side-cta a:not(.hnd-btn){color:#fff!important} /* 2. inline consultation links inside dark bands — white and clearly clickable */ .hnd-note, .hnd-note p{color:rgba(255,255,255,.94)!important} .hnd-note strong{color:#fff!important} .hnd-note a, .hnd-cta a:not(.hnd-btn):not(.theme-btn):not(.theme-btn-one):not(.theme-btn-two), .hnd-side-cta a:not(.hnd-btn):not(.theme-btn):not(.theme-btn-one):not(.theme-btn-two), .hnd-band a:not(.hnd-btn){color:#fff!important;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.62);transition:all .3s var(--hnd-ease)} .hnd-note a:hover, .hnd-cta a:not(.hnd-btn):hover, .hnd-side-cta a:not(.hnd-btn):hover, .hnd-band a:not(.hnd-btn):hover{color:var(--hnd-gold)!important;text-decoration-color:var(--hnd-gold)} /* 3. light button hover: fill with brand blue, keep the label white */ .hnd-btn-light:hover, .hnd-btn-light:focus{background:var(--hnd-blue)!important;border-color:var(--hnd-blue)!important;color:#fff!important;box-shadow:0 12px 30px rgba(42,98,170,.36)!important} .hnd-btn-light:hover *, .hnd-btn-light:focus *{color:#fff!important} .hnd-btn-outline:hover, .hnd-btn-outline:focus{background:var(--hnd-blue)!important;border-color:var(--hnd-blue)!important;color:#fff!important} /* 4. blog cards: content panel sits below the cover, no more clash */ .news-block-one .lower-content .inner, .news-block .lower-content .inner{margin-top:0!important} .news-block-one .inner-box .image-box{margin-bottom:0} /* 5. cut-out portraits fade into the band instead of ending on a hard edge */ .hiring-section .image-layer .image-1, .hiring-section .image-layer .image-2{overflow:visible} .hiring-section .image-layer .image-1 img, .hiring-section .image-layer .image-2 img{opacity:.9;filter:saturate(.97); -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 9%,#000 26%,#000 62%,rgba(0,0,0,.42) 88%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 9%,#000 26%,#000 62%,rgba(0,0,0,.42) 88%,rgba(0,0,0,0) 100%)} .hiring-section .image-layer .image-1{ -webkit-mask-image:linear-gradient(to right,#000 0%,#000 46%,rgba(0,0,0,.5) 78%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(to right,#000 0%,#000 46%,rgba(0,0,0,.5) 78%,rgba(0,0,0,0) 100%)} .hiring-section .image-layer .image-2{ -webkit-mask-image:linear-gradient(to left,#000 0%,#000 46%,rgba(0,0,0,.5) 78%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(to left,#000 0%,#000 46%,rgba(0,0,0,.5) 78%,rgba(0,0,0,0) 100%)} /* 6. the small tile above the founder photo plays the intro clip */ .about-page .image-box .video-inner{overflow:hidden;position:relative;border-radius:6px} .video-inner .hnd-mini-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:inherit} .video-inner .hnd-mini-play{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;display:block;border-radius:inherit} .video-inner > i, .video-inner .border{position:relative;z-index:4} .video-inner:hover .hnd-mini-video{transform:scale(1.03);transition:transform .8s var(--hnd-ease)} /* HND-V24-END */ /* HND-V27-START — blog listing: text card only, no cover block */ .blog-list .news-block-one .inner-box .image-box{display:none!important} .blog-list .news-block-one .inner-box{background:transparent;box-shadow:none} .blog-list .news-block-one .lower-content .inner{margin-top:0!important;border-radius:10px} .blog-list .news-block{margin-bottom:34px} /* HND-V27-END */ /* HND-V30-START — brand colours for the blog panels */ /* toolkit note: navy band, white copy */ .hnd-note{background:linear-gradient(140deg,var(--hnd-navy) 0%,var(--hnd-blue) 100%)!important;border-left:5px solid var(--hnd-gold);border-radius:10px;color:rgba(255,255,255,.94)!important;box-shadow:0 14px 34px rgba(16,42,76,.16)} .hnd-note p,.hnd-note span{color:rgba(255,255,255,.94)!important} .hnd-note strong{color:#fff!important} /* about the author: brand navy card */ .blog-details-content .author-box::before{background:linear-gradient(140deg,var(--hnd-navy) 0%,var(--hnd-blue) 100%)!important;border-radius:12px} .blog-details-content .author-box{color:rgba(255,255,255,.92)} .blog-details-content .author-box h3,.blog-details-content .author-box h4,.blog-details-content .author-box strong{color:#fff!important} .blog-details-content .author-box p,.blog-details-content .author-box span{color:rgba(255,255,255,.88)!important} .blog-details-content .author-box a{color:#fff!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.6)} .blog-details-content .author-box a:hover{color:var(--hnd-gold)!important;text-decoration-color:var(--hnd-gold)} .blog-details-content .author-box .image-box img{border:3px solid rgba(255,255,255,.75);border-radius:50%;object-fit:cover} .blog-details-content .author-box .signature img{filter:brightness(0) invert(1);opacity:.9} .blog-details-content .author-box .icon-layer{opacity:.16;filter:brightness(0) invert(1)} /* previous / next post cards */ .right-btn,.left-btn{background:var(--hnd-sky-lt)!important;border:1px solid var(--hnd-line);border-radius:10px;color:var(--hnd-navy)!important;transition:all .35s var(--hnd-ease)} .right-btn h4,.left-btn h4,.right-btn h3,.left-btn h3,.right-btn a,.left-btn a{color:var(--hnd-navy)!important} .right-btn:hover,.left-btn:hover{background:var(--hnd-mist)!important;border-color:var(--hnd-blue);transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,42,76,.12)} /* share icons keep brand blue on hover */ .share-box .social-links a:hover{color:var(--hnd-gold)} /* HND-V30-END */ /* HND-V31-START — author card is one solid brand block */ .blog-details-content .author-box{background:linear-gradient(140deg,var(--hnd-navy) 0%,var(--hnd-blue) 100%)!important;border-radius:14px;box-shadow:0 18px 40px rgba(16,42,76,.18);overflow:hidden} .blog-details-content .author-box::before{background:transparent!important;inset:0!important;height:auto!important;opacity:1} .blog-details-content .author-box .inner{position:relative;z-index:2} /* HND-V31-END */ /* HND-V32-START — About page quote block in brand blue */ .about-page .author-box, .content-box .author-box{color:var(--hnd-body)} .about-page .author-box .author-text h3, .content-box .author-box .author-text h3{color:var(--hnd-blue)!important;font-weight:700} .about-page .author-box .author-info h4, .content-box .author-box .author-info h4{color:var(--hnd-navy)!important} .about-page .author-box .designation, .content-box .author-box .designation{color:var(--hnd-body)!important} .about-page .author-box .author-text, .content-box .author-box .author-text{background:var(--hnd-sky-lt)} /* HND-V32-END */ /* HND-V33-START — eyebrow label on dark bands */ .sec-title.light .top-title::before, .sec-title.light .top-title::after{background:rgba(255,255,255,.10)!important;border-radius:6px} .sec-title.light .top-title{color:var(--hnd-sky)!important;position:relative;z-index:3;letter-spacing:2px} /* HND-V33-END */ /* HND-V34-START — richer, more prominent typography */ /* ---- hero slider ---- */ .banner-carousel .slide-item .content-box > span{ display:inline-block;position:relative; font-size:14px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase; color:var(--hnd-blue)!important;padding-left:52px;margin-bottom:22px} .banner-carousel .slide-item .content-box > span::before{ content:"";position:absolute;left:0;top:50%;width:38px;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--hnd-gold),rgba(233,180,76,.25))} .banner-carousel .slide-item .content-box h1{ font-size:64px!important;line-height:1.06!important;letter-spacing:-1.2px;font-weight:800; color:var(--hnd-navy)!important;text-wrap:balance} .banner-carousel .slide-item .content-box p{ font-size:19px!important;line-height:1.75!important;color:var(--hnd-body)!important; font-weight:500;max-width:34em;margin-top:22px} .banner-carousel .slide-item .content-box .btn-box{margin-top:34px} .banner-carousel .slide-item .content-box .btn-box a{ min-height:58px;padding:18px 40px;font-size:16px;letter-spacing:.3px; box-shadow:0 16px 34px rgba(42,98,170,.30)} .banner-carousel .slide-item .content-box .btn-box a:hover{box-shadow:0 20px 40px rgba(42,98,170,.40)} /* ---- site-wide: crisper body copy and weightier headings ---- */ body,p,li,.text p,.lower-content p{color:var(--hnd-body)} .sec-title h2,.sec-title h1{letter-spacing:-.6px;font-weight:800} h1,h2,h3{letter-spacing:-.4px} .sec-title .top-title{letter-spacing:2.2px;font-weight:700} @media (max-width:1199px){ .banner-carousel .slide-item .content-box h1{font-size:52px!important} } @media (max-width:991px){ .banner-carousel .slide-item .content-box h1{font-size:44px!important;letter-spacing:-.8px} .banner-carousel .slide-item .content-box p{font-size:18px!important} } @media (max-width:767px){ .banner-carousel .slide-item .content-box > span{padding-left:38px;font-size:12.5px;letter-spacing:2px} .banner-carousel .slide-item .content-box > span::before{width:26px} .banner-carousel .slide-item .content-box h1{font-size:34px!important;letter-spacing:-.5px} .banner-carousel .slide-item .content-box p{font-size:16.5px!important;line-height:1.7!important} .banner-carousel .slide-item .content-box .btn-box a{min-height:52px;padding:15px 28px;font-size:15px} } /* HND-V34-END */ /* ===== HND-V35 : Contact page details must read on light panels ===== */ .hnd-contact .hnd-info-row .val a, .hnd-contact .hnd-info-row .val a:link, .hnd-contact .hnd-info-row .val a:visited, .hnd-contact .hnd-info-row .val .hnd-plain, .hnd-contact a[href^="tel:"], .hnd-contact a[href^="mailto:"]{ color:var(--hnd-blue)!important; text-decoration:none!important; font-weight:700!important; letter-spacing:.1px; transition:color .22s var(--hnd-ease); } .hnd-contact .hnd-info-row .val a:hover, .hnd-contact a[href^="tel:"]:hover, .hnd-contact a[href^="mailto:"]:hover{ color:var(--hnd-navy)!important; text-decoration:underline!important; } .hnd-contact .hnd-info-row .val{ color:var(--hnd-navy)!important; } .hnd-contact .hnd-info-row .lbl{ color:var(--hnd-body)!important; } /* HND-V35B : header top-bar contact details on brand palette */ .header-top .top-inner .left-info li a, .header-top .top-inner .left-info li a:link, .header-top .top-inner .left-info li a:visited{ color:var(--hnd-blue)!important; font-weight:600!important; } .header-top .top-inner .left-info li a:hover{ color:var(--hnd-navy)!important; text-decoration:underline!important; } /* HND-V35C : industries tab list - active item must be the brightest */ .industries-section .tab-btns .tab-btn h3{ color:rgba(255,255,255,.74)!important; font-weight:600!important; transition:color .22s var(--hnd-ease); } .industries-section .tab-btns .tab-btn:hover h3{ color:#fff!important; } .industries-section .tab-btns .tab-btn.active-btn h3{ color:#fff!important; font-weight:700!important; } /* HND-V36 : single post - drop the featured cover image above the article */ .blog-details-content .inner-box > figure.image-box{ display:none!important; } .blog-details-content .inner-box > .image-box{ display:none!important; } .blog-details-content .inner-box{ padding-top:0!important; } /* ===== HND-V37 : footer, mobile drawer, blog title card ===== */ /* footer copy reads white on the navy, no more beige */ .main-footer, .main-footer p, .main-footer li, .main-footer span, .main-footer .text, .main-footer .widget_text, .main-footer address{ color:#FFFFFF!important; } .main-footer a, .main-footer a:link, .main-footer a:visited, .main-footer ul li a, .main-footer .footer-widget li a{ color:#FFFFFF!important; opacity:1!important; transition:color .22s var(--hnd-ease); } .main-footer a:hover, .main-footer ul li a:hover{ color:var(--hnd-sky)!important; } .main-footer .widget-title h3, .main-footer h2, .main-footer h3, .main-footer h4{ color:#FFFFFF!important; } /* quieter tier for hours and the bottom bar, still clearly readable */ .main-footer .footer-bottom, .main-footer .footer-bottom p, .main-footer .copyright, .main-footer .hnd-hours li, .main-footer .hnd-hours span{ color:rgba(255,255,255,.82)!important; } .main-footer .footer-bottom a{ color:#FFFFFF!important; } .main-footer input, .main-footer input::placeholder{ color:rgba(255,255,255,.75)!important; } /* mobile drawer on brand navy instead of the theme maroon */ .mobile-menu .menu-box{ background:linear-gradient(160deg,#102A4C 0%,#173C6B 55%,#22528F 100%)!important; } .mobile-menu .menu-backdrop{ background:#0B1F3A!important; } .mobile-menu .nav-logo{ padding:26px 20px 12px; } .mobile-menu .navigation li > a{ color:#FFFFFF!important; } .mobile-menu .navigation li > a:hover{ color:var(--hnd-sky)!important; } .mobile-menu .navigation li{ border-color:rgba(255,255,255,.12)!important; } .mobile-menu .navigation li.dropdown .dropdown-btn{ background:rgba(255,255,255,.14)!important; color:#fff!important; } .mobile-menu .navigation li.dropdown .dropdown-btn.open{ background:var(--hnd-sky)!important; color:#fff!important; } .mobile-menu .contact-info h4, .mobile-menu .contact-info ul li, .mobile-menu .contact-info ul li a, .mobile-menu .social-links li a{ color:#FFFFFF!important; } .mobile-menu .close-btn{ color:#FFFFFF!important; } /* blog post title card in brand blue rather than a flat slab */ .page-title .inner{ background:linear-gradient(125deg,#173C6B 0%,#22528F 58%,#2A62AA 100%)!important; border-left:5px solid var(--hnd-gold)!important; box-shadow:0 26px 60px rgba(8,24,48,.32)!important; border-radius:0 10px 10px 0; } .page-title .inner h1, .page-title .inner h2, .page-title .inner a{ color:#FFFFFF!important; } .page-title .inner .post-info li, .page-title .inner .post-info li a{ color:rgba(255,255,255,.9)!important; } /* HND-V38 : drop the small video tile over the founder photo */ .video-inner{ display:none!important; } .about-page .image-box .video-inner, .content-box .image-box .video-inner{ display:none!important; } /* HND-V39 : toast used by the Instagram share button */ #hnd-toast{ position:fixed; left:50%; bottom:34px; transform:translate(-50%,26px); max-width:min(560px,calc(100vw - 40px)); background:linear-gradient(125deg,#173C6B 0%,#2A62AA 100%); color:#fff; font-size:15px; line-height:1.5; font-weight:600; padding:15px 22px; border-radius:10px; border-left:4px solid var(--hnd-gold); box-shadow:0 20px 48px rgba(8,24,48,.34); opacity:0; pointer-events:none; z-index:99999; transition:opacity .3s var(--hnd-ease), transform .3s var(--hnd-ease); } #hnd-toast.is-on{ opacity:1; transform:translate(-50%,0); } a.hnd-ig-share{ cursor:pointer; } /* HND-V40 : centre the three blog share buttons */ .post-share-option .social-box .social-links{ display:flex!important; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px; float:none!important; width:100%; margin:0; padding:0; } .post-share-option .social-box .social-links::before, .post-share-option .social-box .social-links::after{ content:none!important; display:none!important; } .post-share-option .social-box .social-links li{ float:none!important; width:auto!important; margin:0!important; padding:0!important; list-style:none; } @media only screen and (max-width:575px){ .post-share-option .social-box .social-links{ gap:12px; } .post-share-option .social-box .social-links li{ width:100%!important; } .post-share-option .social-box .social-links li a{ width:100%; } } /* HND-V41 : service page blue band - body copy must be white, not grey */ .hnd-svc-band .hnd-svc-band-in p, .hnd-svc-band .hnd-svc-band-in li, .hnd-svc-band .hnd-svc-band-in span:not(.hnd-eyebrow){ color:rgba(255,255,255,.94)!important; } .hnd-svc-band .hnd-svc-band-in h2, .hnd-svc-band .hnd-svc-band-in h3, .hnd-svc-band .hnd-svc-band-in h4{ color:#FFFFFF!important; } /* HND-V42 : the logo is now a white plate, size it to sit inside the bar */ .logo-box .logo img, .sticky-header .logo-box img, .mobile-menu .nav-logo img{ height:auto!important; max-height:50px; width:auto!important; max-width:100%; } .main-header .header-lower .logo-box{ padding-top:15px!important; padding-bottom:15px!important; } .sticky-header .logo-box{ padding-top:12px!important; padding-bottom:12px!important; } .mobile-menu .nav-logo img{ max-height:44px; } @media only screen and (max-width:767px){ .logo-box .logo img{ max-height:40px; } } /* HND-V43 : white header plate, blue curved edge, blue logo */ .main-header .header-lower .logo-box, .sticky-header .logo-box{ background:#FFFFFF!important; border-right:2px solid var(--hnd-blue)!important; border-bottom:2px solid var(--hnd-blue)!important; box-shadow:0 8px 24px rgba(23,60,107,.07); } .main-header .header-lower .logo-box{ border-radius:0 0 50px 0!important; } .sticky-header .logo-box{ border-radius:0 0 40px 0!important; } /* the drawer stays navy, so the logo keeps a white plate there */ .mobile-menu .nav-logo{ background:#FFFFFF; border-radius:0 0 34px 0; border-right:2px solid var(--hnd-blue); border-bottom:2px solid var(--hnd-blue); padding:16px 26px 16px 20px!important; margin:0 0 18px; display:inline-block; } /* HND-V43B : keep the drawer plate clear of the close button */ .mobile-menu .nav-logo{ display:inline-block!important; width:auto!important; max-width:72%; padding:14px 22px 14px 20px!important; } .mobile-menu .nav-logo img{ max-height:34px!important; } /* HND-V44 : drop the blue outline, size the two-line lockup */ .main-header .header-lower .logo-box, .sticky-header .logo-box, .mobile-menu .nav-logo{ border:0!important; box-shadow:none!important; } .main-header .header-lower .logo-box, .sticky-header .logo-box{ border-radius:0!important; background:#FFFFFF!important; } .mobile-menu .nav-logo{ border-radius:0 0 26px 0; } .logo-box .logo img, .sticky-header .logo-box img{ max-height:58px!important; } .mobile-menu .nav-logo img{ max-height:38px!important; } .main-header .header-lower .logo-box{ padding-top:14px!important; padding-bottom:14px!important; } @media only screen and (max-width:767px){ .logo-box .logo img{ max-height:46px!important; } } /* HND-V44B : the theme pins the logo width, drive it from height instead */ .main-header .header-lower .logo-box img, .main-header .header-lower .logo-box a img{ width:auto!important; height:52px!important; max-height:52px!important; max-width:none!important; } .sticky-header .logo-box img{ width:auto!important; height:46px!important; max-height:46px!important; max-width:none!important; } .mobile-menu .nav-logo img{ width:auto!important; height:38px!important; max-height:38px!important; max-width:none!important; } @media only screen and (max-width:991px){ .main-header .header-lower .logo-box img{ height:44px!important; max-height:44px!important; } } @media only screen and (max-width:575px){ .main-header .header-lower .logo-box img{ height:38px!important; max-height:38px!important; } } /* HND-V45 : mobile drawer - full-width white logo row, never clips the logo */ .mobile-menu .nav-logo{ display:block!important; width:100%!important; max-width:100%!important; box-sizing:border-box; background:#FFFFFF!important; padding:15px 64px 15px 20px!important; margin:0 0 12px!important; border:0!important; border-radius:0 0 38px 0!important; text-align:left; } .mobile-menu .nav-logo a{ display:inline-block; max-width:100%; } .mobile-menu .nav-logo img{ width:auto!important; height:auto!important; max-height:34px!important; max-width:100%!important; display:block; } /* the close button now sits over white, so it needs a dark colour */ .mobile-menu .close-btn{ color:var(--hnd-navy)!important; } @media only screen and (max-width:380px){ .mobile-menu .nav-logo{ padding:13px 58px 13px 16px!important; } .mobile-menu .nav-logo img{ max-height:30px!important; } }