/**
* Styles for the custom page templates:
* Category, Subcategory, Product and Landing.
*
* Brand colours:
* --hcs-navy: #1f2a44 (headings / dark UI)
* --hcs-green: #375725 (primary accent / buttons)
*/
:root {
--hcs-navy: #1f2a44;
--hcs-green: #375725;
--hcs-green-dark: #2b441d;
--hcs-ink: #3a4254;
--hcs-muted: #6b7280;
--hcs-line: #e3e6ec;
--hcs-bg-soft: #f6f7f9;
}
/* An external rule (a plugin / the legacy passcomm mobile script) puts a stray
60px top margin on , leaving a gap above the header on mobile. Zero it,
but leave the logged-in admin bar's offset (html.wp-toolbar) alone. */
html:not(.wp-toolbar) {
margin-top: 0 !important;
}
.hcs-page {
color: var(--hcs-ink);
}
.hcs-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Breadcrumbs ------------------------------------------------------------- */
.hcs-breadcrumbs {
padding: 16px 0;
border-bottom: 1px solid var(--hcs-line);
background: #fff;
font-size: 13.5px;
}
.hcs-breadcrumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.hcs-breadcrumbs li {
display: flex;
align-items: center;
gap: 8px;
color: var(--hcs-muted);
}
.hcs-breadcrumbs li:not(:first-child)::before {
content: "\203A"; /* › */
color: #b3b9c4;
}
.hcs-breadcrumbs a {
color: var(--hcs-muted);
text-decoration: none;
}
.hcs-breadcrumbs a:hover {
color: var(--hcs-green-dark);
text-decoration: underline;
}
.hcs-breadcrumbs [aria-current="page"] span {
color: var(--hcs-navy);
font-weight: 600;
}
/* Page intro / headers ---------------------------------------------------- */
.hcs-page-header {
padding: 32px 0 8px;
}
.hcs-page-header .hcs-page-title {
margin: 0 0 10px;
font-size: 34px;
line-height: 1.15;
color: var(--hcs-navy);
}
.hcs-page-intro {
font-size: 17px;
line-height: 1.6;
color: var(--hcs-ink);
}
.hcs-page-intro--top {
padding-top: 36px;
}
.hcs-page-intro--center {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
/* Content shown below the thumbnail grid (after the editor's Read More tag) */
.hcs-page-outro {
padding: 4px 0 24px;
font-size: 17px;
line-height: 1.7;
color: var(--hcs-ink);
}
.hcs-page-outro > :first-child { margin-top: 0; }
.hcs-page-outro > :last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------
* Thumbnail grid (category -> subcategories, subcategory -> products)
* ----------------------------------------------------------------------- */
.hcs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 28px;
padding: 32px 0 64px;
}
.hcs-card {
display: flex;
flex-direction: column;
border: 1px solid var(--hcs-line);
border-radius: 10px;
overflow: hidden;
background: #fff;
text-decoration: none;
color: inherit;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hcs-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(31, 42, 68, 0.12);
border-color: #d2d7e0;
}
.hcs-card-media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--hcs-bg-soft);
overflow: hidden;
}
.hcs-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.hcs-card:hover .hcs-card-media img {
transform: scale(1.04);
}
.hcs-card-noimg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #eef0f4, #e2e6ee);
}
.hcs-card-body {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.hcs-card-title {
margin: 0;
font-size: 18px;
line-height: 1.3;
color: var(--hcs-navy);
}
.hcs-card-text {
margin: 0;
font-size: 14.5px;
line-height: 1.55;
color: var(--hcs-muted);
}
.hcs-card::after {
content: "View \2192";
margin: auto 20px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: .3px;
color: var(--hcs-green-dark);
}
.hcs-grid-empty {
padding: 40px 0 64px;
color: var(--hcs-muted);
}
/* --------------------------------------------------------------------------
* Product layout
* ----------------------------------------------------------------------- */
.hcs-product {
padding: 0 0 64px;
}
/* gap between the breadcrumb bar and the image / title */
.hcs-product > .hcs-wrap {
padding-top: 40px;
}
.hcs-product-top {
display: grid;
grid-template-columns: minmax(0, 420px) minmax(0, 1fr); /* contained image, wider content */
gap: 44px;
align-items: start;
}
.hcs-product-top--single { grid-template-columns: 1fr; }
/* These templates add their own contact form, so hide any old embedded CF7
form (Bones .sidebar) left over in the page content. */
.hcs-product-description .sidebar:has(.wpcf7),
.hcs-landing-content .sidebar:has(.wpcf7),
.hcs-page-intro .sidebar:has(.wpcf7),
.hcs-page-outro .sidebar:has(.wpcf7) {
display: none;
}
.hcs-product-media {
border: 1px solid var(--hcs-line);
border-radius: 12px;
overflow: hidden;
background: var(--hcs-bg-soft);
}
.hcs-product-media img {
width: 100%;
height: auto;
display: block;
}
.hcs-product-title {
margin: 0 0 18px;
font-size: 30px;
line-height: 1.15;
color: var(--hcs-navy);
}
.hcs-product-description {
font-size: 16.5px;
line-height: 1.7;
}
.hcs-product-description > :first-child { margin-top: 0; }
.hcs-section {
margin-top: 40px;
}
.hcs-section-title {
margin: 0 0 16px;
font-size: 20px;
color: var(--hcs-navy);
padding-bottom: 10px;
border-bottom: 2px solid var(--hcs-green);
display: inline-block;
}
.hcs-benefits {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.hcs-benefits li {
position: relative;
padding-left: 30px;
line-height: 1.55;
}
.hcs-benefits li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--hcs-green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.hcs-details {
font-size: 16px;
line-height: 1.7;
}
/* --------------------------------------------------------------------------
* Landing page: hero + body + form
* ----------------------------------------------------------------------- */
.hcs-hero {
position: relative;
min-height: 340px;
display: flex;
align-items: center;
background: var(--hcs-navy);
background-size: cover;
background-position: center;
color: #fff;
}
.hcs-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(31, 42, 68, 0.78) 0%, rgba(31, 42, 68, 0.45) 60%, rgba(31, 42, 68, 0.25) 100%);
}
.hcs-hero .hcs-wrap {
position: relative;
z-index: 1;
padding-top: 56px;
padding-bottom: 56px;
}
.hcs-hero-title {
margin: 0;
font-size: 44px;
line-height: 1.1;
color: #fff;
max-width: 760px;
}
.hcs-hero-tagline {
margin: 16px 0 0;
font-size: 19px;
line-height: 1.5;
color: #e7ebf2;
max-width: 640px;
}
.hcs-hero--plain {
min-height: 0;
background: var(--hcs-bg-soft);
color: var(--hcs-navy);
}
.hcs-hero--plain::after { display: none; }
.hcs-hero--plain .hcs-hero-title { color: var(--hcs-navy); }
.hcs-hero--plain .hcs-hero-tagline { color: var(--hcs-muted); }
/* Homepage hero (editable: Featured Image background + headline + CTA) */
.hcs-home-hero {
min-height: 480px;
text-align: center;
}
.hcs-home-hero .hcs-wrap {
width: 100%;
}
.hcs-home-hero .hcs-hero-title {
max-width: 920px;
margin: 0 auto;
font-size: 40px;
font-weight: 700;
line-height: 1.18;
}
.hcs-home-subhead {
max-width: 720px;
margin: 20px auto 0;
color: #eef2f6;
font-size: 19px;
line-height: 1.55;
}
.hcs-home-cta {
display: inline-block;
margin-top: 30px;
padding: 16px 40px;
background: #375725;
color: #fff;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
letter-spacing: .3px;
text-decoration: none;
transition: background .15s ease;
}
.hcs-home-cta,
.hcs-home-cta:link,
.hcs-home-cta:visited,
.hcs-home-cta:hover { color: #fff; }
.hcs-home-cta:hover { background: #2b441d; }
/* Generic homepage section */
.hcs-home-section {
padding: 58px 0;
}
.hcs-home-section--alt {
background: var(--hcs-bg-soft);
}
/* Contain the shared shortcode panels (clients / testimonials) on the homepage */
.hcs-home > .hcs-clients,
.hcs-home > .hcs-tm {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.hcs-home-heading {
margin: 0 0 34px;
font-size: 30px;
line-height: 1.2;
color: var(--hcs-navy);
text-align: center;
}
.hcs-home-more {
margin: 32px 0 0;
text-align: center;
}
.hcs-text-link {
font-weight: 700;
color: var(--hcs-green-dark);
text-decoration: none;
}
.hcs-text-link:hover { text-decoration: underline; }
/* Why Hybrid / accreditations */
.hcs-why {
padding: 64px 0;
background: var(--hcs-navy);
text-align: center;
}
.hcs-why-title {
margin: 0 0 16px;
font-size: 30px;
color: #fff;
}
.hcs-why-text {
max-width: 760px;
margin: 0 auto 30px;
color: #cdd5e2;
font-size: 17px;
line-height: 1.7;
}
.hcs-accreditations {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.hcs-accreditations li {
padding: 9px 20px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
color: #fff;
font-size: 14px;
font-weight: 600;
}
/* About teaser */
.hcs-about-teaser {
text-align: center;
}
.hcs-about-text {
max-width: 760px;
margin: 0 auto;
font-size: 17px;
line-height: 1.7;
color: var(--hcs-ink);
}
@media (max-width: 600px) {
.hcs-home-hero { min-height: 360px; }
.hcs-home-hero .hcs-hero-title { font-size: 28px; }
.hcs-home-subhead { font-size: 17px; }
.hcs-home-heading,
.hcs-why-title { font-size: 24px; }
}
.hcs-landing-body {
padding: 52px 0;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
gap: 56px;
align-items: start;
}
.hcs-landing-body--single { grid-template-columns: 1fr; }
.hcs-landing-content {
font-size: 17px;
line-height: 1.75;
}
.hcs-landing-content > :first-child { margin-top: 0; }
.hcs-landing-content > :last-child { margin-bottom: 0; }
.hcs-landing-content img { max-width: 100%; height: auto; }
/* Restore proper spacing for rich-text content (the old Bones CSS strips it,
collapsing paragraphs into one block). Applies to all template body copy. */
.hcs-landing-content p,
.hcs-product-description p,
.hcs-details p,
.hcs-page-intro p,
.hcs-page-outro p {
margin: 0 0 1.8em;
}
.hcs-landing-content ul,
.hcs-landing-content ol,
.hcs-product-description ul,
.hcs-product-description ol,
.hcs-details ul,
.hcs-details ol,
.hcs-page-outro ul,
.hcs-page-outro ol,
.entry-content ul,
.entry-content ol,
.hcs-faq-a ul,
.hcs-faq-a ol {
margin: 0 0 1.3em;
padding-left: 1.4em;
}
/* The old Bones CSS suppresses list-style, so bullets/numbers were invisible
despite the padding above. Restore the markers explicitly. */
.hcs-landing-content ul,
.hcs-product-description ul,
.hcs-details ul,
.hcs-page-outro ul,
.entry-content ul,
.hcs-faq-a ul {
list-style: disc;
}
.hcs-landing-content ul ul,
.hcs-product-description ul ul,
.hcs-details ul ul,
.hcs-page-outro ul ul,
.entry-content ul ul,
.hcs-faq-a ul ul {
list-style: circle;
margin: .4em 0;
}
.hcs-landing-content ol,
.hcs-product-description ol,
.hcs-details ol,
.hcs-page-outro ol,
.entry-content ol,
.hcs-faq-a ol {
list-style: decimal;
}
.hcs-landing-content li,
.hcs-product-description li,
.hcs-details li,
.hcs-page-outro li,
.entry-content li,
.hcs-faq-a li {
margin-bottom: .4em;
}
.hcs-landing-content h2,
.hcs-landing-content h3,
.hcs-landing-content h4,
.hcs-product-description h2,
.hcs-product-description h3,
.hcs-product-description h4,
.hcs-page-outro h2,
.hcs-page-outro h3,
.hcs-page-outro h4 {
margin: 1.6em 0 .5em;
color: var(--hcs-navy);
line-height: 1.25;
}
/* Contact form panel ------------------------------------------------------ */
.hcs-form-panel {
background: #fff;
border: 1px solid var(--hcs-line);
border-radius: 14px;
padding: 32px 30px;
box-shadow: 0 12px 30px rgba(31, 42, 68, 0.07);
position: sticky;
top: 24px;
}
.hcs-form-title {
margin: 0 0 6px;
font-size: 22px;
color: var(--hcs-navy);
}
.hcs-form-sub {
margin: 0 0 22px;
font-size: 15px;
color: var(--hcs-muted);
}
/* --------------------------------------------------------------------------
* Contact Form 7 forms — styled site-wide.
* Full width with a responsive two-column flow: short fields (name, email)
* sit side by side when there's room and stack automatically when narrow.
* ----------------------------------------------------------------------- */
.wpcf7 { width: 100%; }
.wpcf7-form {
width: 100%;
max-width: 760px; /* keeps a single-column form readable; 2-column form (below) goes full width */
color: var(--hcs-navy);
font-weight: 600; /* makes the label text bold (labels are bare text in this form) */
line-height: 1.5;
}
/* Each control on its own line, full width — works with or without wrappers.
!important because the CF7 / old theme CSS sets these inline. */
.wpcf7-form .wpcf7-form-control-wrap {
display: block !important;
margin: 6px 0 18px !important;
}
.wpcf7-form label {
display: block;
font-weight: 600;
color: var(--hcs-navy);
}
/* Two-column flow — only when the form is built from
blocks (CF7 default).
Custom templates without
stay as a clean full-width single column. */
.wpcf7-form:has(> p) {
display: flex;
flex-wrap: wrap;
gap: 0 22px;
max-width: none; /* the proper two-column form fills the available width */
}
.wpcf7-form:has(> p) .wpcf7-form-control-wrap { margin-bottom: 0 !important; }
.wpcf7-form:has(> p) > p {
flex: 1 1 240px;
min-width: 0;
margin: 0 0 18px;
}
.wpcf7-form:has(> p) > p:has( textarea ),
.wpcf7-form:has(> p) > p:has( input[type="submit"] ),
.wpcf7-form:has(> p) > p:has( .wpcf7-submit ),
.wpcf7-form:has(> p) > p:has( .wpcf7-acceptance ),
.wpcf7-form:has(> p) > .wpcf7-response-output {
flex-basis: 100%;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 100% !important;
box-sizing: border-box;
margin-top: 0;
padding: 12px 14px;
border: 1px solid #cfd4dd;
border-radius: 8px;
background: #fff;
font-size: 15px;
font-weight: 400;
color: var(--hcs-navy);
transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
outline: none;
border-color: var(--hcs-green);
box-shadow: 0 0 0 3px rgba(111, 191, 115, 0.22);
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wpcf7-form .wpcf7-submit {
-webkit-appearance: none;
appearance: none;
width: auto;
min-width: 180px;
margin-top: 4px;
padding: 14px 34px;
border: 0;
border-radius: 8px;
background: var(--hcs-green);
color: #fff;
font-size: 16px;
font-weight: 600;
letter-spacing: .3px;
cursor: pointer;
transition: background .15s ease;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
background: var(--hcs-green-dark);
}
.wpcf7-spinner { margin: 14px 0 0; }
.wpcf7-form .wpcf7-response-output {
margin: 6px 0 0;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 400;
}
.hcs-form-alt {
margin: 20px 0 0;
padding-top: 18px;
border-top: 1px solid var(--hcs-line);
text-align: center;
color: var(--hcs-muted);
font-size: 15px;
}
.hcs-form-alt a {
display: block;
margin-top: 4px;
font-size: 22px;
font-weight: 700;
color: var(--hcs-navy);
text-decoration: none;
}
/* --------------------------------------------------------------------------
* Explicit two-column form structure (paste the matching CF7 markup with
*
…). Works whether or not wpautop is enabled.
* ----------------------------------------------------------------------- */
.wpcf7-form:has(.hcs-form-grid) { max-width: none; }
.wpcf7-form .hcs-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 22px;
}
.wpcf7-form .hcs-field {
min-width: 0;
margin: 0 0 10px;
}
.wpcf7-form .hcs-field--full {
grid-column: 1 / -1;
}
.wpcf7-form .hcs-field label {
display: block;
font-weight: 600;
color: var(--hcs-navy);
margin-bottom: 6px;
}
.wpcf7-form .hcs-field .wpcf7-form-control-wrap {
margin: 0 !important;
}
@media (max-width: 600px) {
.wpcf7-form .hcs-form-grid { grid-template-columns: 1fr; }
}
/* Inputs, submit and status messages for the CF7 form — matched to the
theme's built-in contact form styling. */
.hcs-contact-section .wpcf7 {
margin-top: 24px;
}
/* Neutralise any auto-inserted paragraphs/breaks inside the structured grid. */
.wpcf7-form .hcs-form-grid br {
display: none;
}
.wpcf7-form .hcs-form-grid p {
margin: 0;
}
.wpcf7-form .hcs-field input[type="text"],
.wpcf7-form .hcs-field input[type="email"],
.wpcf7-form .hcs-field input[type="tel"],
.wpcf7-form .hcs-field textarea,
.wpcf7-form .hcs-field select {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid #cfd4dd;
border-radius: 8px;
background: #fff;
font-size: 15px;
color: var(--hcs-navy);
transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcf7-form .hcs-field input:focus,
.wpcf7-form .hcs-field textarea:focus,
.wpcf7-form .hcs-field select:focus {
outline: none;
border-color: var(--hcs-green);
box-shadow: 0 0 0 3px rgba(111, 191, 115, 0.22);
}
.wpcf7-form .hcs-field textarea {
min-height: 150px;
resize: vertical;
}
.wpcf7-form .hcs-submit {
-webkit-appearance: none !important;
appearance: none !important;
min-width: 180px;
padding: 14px 34px;
border: 0 !important;
border-radius: 8px;
background: #375725 !important;
background-image: none !important;
color: #ffffff !important;
font-size: 16px;
font-weight: 600;
letter-spacing: .3px;
cursor: pointer;
transition: background .15s ease;
}
.wpcf7-form .hcs-submit:hover {
background: #2b441d !important;
}
.wpcf7-form .hcs-field--full:has(.hcs-submit) {
text-align: center;
}
/* CF7 status + validation messages, on-brand */
.wpcf7-form .wpcf7-response-output {
margin: 20px 0 0 !important;
padding: 13px 18px !important;
border: 0 !important;
border-radius: 8px;
font-size: 15px;
}
.wpcf7-form.sent .wpcf7-response-output {
background: #e7f6e8;
color: #1f6f2b;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
background: #fdecec;
color: #9b2c2c;
}
.wpcf7-not-valid-tip {
margin-top: 5px;
color: #c0392b;
font-size: 13px;
}
.wpcf7-spinner {
margin: 0 0 0 12px;
}
/* --------------------------------------------------------------------------
* Contact form hard-coded into page content inside an old Bones grid
* "sidebar" column (class "sidebar ... d-2of7"). That column class pins it to
* ~28% width, so force any .sidebar that contains a CF7 form to full width.
* ----------------------------------------------------------------------- */
.sidebar:has(.wpcf7) {
width: 100% !important;
max-width: none !important;
float: none !important;
clear: both !important;
margin: 24px 0 !important;
padding: 0 !important;
}
.sidebar:has(.wpcf7) .widgettitle {
margin: 0 0 18px;
font-size: 24px;
color: var(--hcs-navy);
}
/* --------------------------------------------------------------------------
* Built-in contact section (bottom of landing pages) — no plugin needed.
* ----------------------------------------------------------------------- */
.hcs-contact-section {
background: var(--hcs-bg-soft);
border-top: 1px solid var(--hcs-line);
padding: 56px 0 64px;
}
.hcs-contact-title {
margin: 0 0 6px;
font-size: 28px;
color: var(--hcs-navy);
text-align: center;
}
.hcs-contact-form {
margin-top: 24px;
}
.hcs-contact-form .hcs-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 22px;
/* fills the content width to match the grid / cards above (no right-hand gap) */
}
.hcs-contact-form .hcs-field {
min-width: 0;
margin: 0 0 10px;
}
.hcs-contact-form .hcs-field--full {
grid-column: 1 / -1;
}
.hcs-contact-form label {
display: block;
font-weight: 600;
color: var(--hcs-navy);
margin-bottom: 6px;
}
.hcs-contact-form input[type="text"],
.hcs-contact-form input[type="email"],
.hcs-contact-form input[type="tel"],
.hcs-contact-form textarea,
.hcs-contact-form select {
width: 100%;
box-sizing: border-box;
margin: 0; /* cancel the old Bones input bottom margin */
padding: 12px 14px;
border: 1px solid #cfd4dd;
border-radius: 8px;
background: #fff;
font-size: 15px;
color: var(--hcs-navy);
transition: border-color .15s ease, box-shadow .15s ease;
}
.hcs-contact-form input:focus,
.hcs-contact-form textarea:focus,
.hcs-contact-form select:focus {
outline: none;
border-color: var(--hcs-green);
box-shadow: 0 0 0 3px rgba(111, 191, 115, 0.22);
}
.hcs-contact-form textarea {
min-height: 150px;
resize: vertical;
}
.hcs-contact-form .hcs-submit {
/* !important + explicit hex: stops iOS Safari rendering the default blue button */
-webkit-appearance: none !important;
appearance: none !important;
min-width: 180px;
padding: 14px 34px;
border: 0 !important;
border-radius: 8px;
background: #375725 !important;
background-image: none !important;
color: #ffffff !important;
font-size: 16px;
font-weight: 600;
letter-spacing: .3px;
cursor: pointer;
transition: background .15s ease;
}
.hcs-contact-form .hcs-submit:hover {
background: #2b441d !important;
}
/* centre the Send button */
.hcs-contact-form .hcs-field--full:has(.hcs-submit) {
text-align: center;
}
/* Honeypot — visually hidden, off-screen */
.hcs-contact-form .hcs-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.hcs-contact-alt {
margin: 22px 0 0;
color: var(--hcs-muted);
font-size: 16px;
text-align: center;
}
.hcs-contact-alt a {
display: block; /* number sits on its own row underneath */
margin: 4px 0 0;
font-size: 16px; /* same size as the label text */
font-weight: 700;
color: var(--hcs-navy);
text-decoration: none;
}
.hcs-form-note {
max-width: 880px;
margin: 0 0 22px;
padding: 14px 18px;
border-radius: 8px;
font-size: 15px;
}
.hcs-form-note--ok {
background: #e7f6e8;
color: #1f6f2b;
border: 1px solid #bfe3c2;
}
.hcs-form-note--err {
background: #fdecec;
color: #9b2c2c;
border: 1px solid #f3c2c2;
}
/* --------------------------------------------------------------------------
* Search results
* ----------------------------------------------------------------------- */
.hcs-search-meta {
margin: 8px 0 0;
font-size: 16px;
color: var(--hcs-muted);
}
.hcs-search-results {
padding: 20px 0 8px;
}
.hcs-search-item {
padding: 26px 0;
border-bottom: 1px solid var(--hcs-line);
}
.hcs-search-item:first-child {
padding-top: 8px;
}
.hcs-search-title {
margin: 0 0 8px;
font-size: 21px;
line-height: 1.3;
}
.hcs-search-title a {
color: var(--hcs-navy);
text-decoration: none;
}
.hcs-search-title a:hover {
color: var(--hcs-green-dark);
}
.hcs-search-excerpt {
margin: 0 0 10px;
font-size: 16px;
line-height: 1.6;
color: var(--hcs-ink);
}
.hcs-search-none {
padding: 30px 0 64px;
font-size: 17px;
color: var(--hcs-ink);
}
.hcs-search-none .search-form {
display: flex;
gap: 10px;
max-width: 480px;
margin-top: 18px;
}
.hcs-search-none .search-field {
flex: 1 1 auto;
min-width: 0;
padding: 12px 14px;
border: 1px solid #cfd4dd;
border-radius: 8px;
font-size: 15px;
}
.hcs-search-none .search-submit {
flex: 0 0 auto;
padding: 12px 22px;
border: 0;
border-radius: 8px;
background: #375725;
color: #fff;
font-weight: 600;
cursor: pointer;
}
.hcs-search-none .search-submit:hover {
background: #2b441d;
}
/* --------------------------------------------------------------------------
* Blog index (/insights/): category filter + post grid + pagination
* ----------------------------------------------------------------------- */
.hcs-blog-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 28px;
padding: 24px 0 26px;
border-bottom: 1px solid var(--hcs-line);
}
.hcs-blog-filter a {
display: inline-block;
padding: 8px 18px;
border: 1px solid var(--hcs-line);
border-radius: 999px;
background: #fff;
color: var(--hcs-navy);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hcs-blog-filter a:hover {
border-color: var(--hcs-green);
color: var(--hcs-green-dark);
}
.hcs-blog-filter a.is-active {
background: #375725;
border-color: #375725;
color: #fff;
}
.hcs-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 4px 0 16px;
}
.hcs-blog-grid .hcs-card::after {
content: "Read more \2192";
}
/* Pagination */
.hcs-page .pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 28px 0 56px;
}
.hcs-page .pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid var(--hcs-line);
border-radius: 8px;
background: #fff;
color: var(--hcs-navy);
font-weight: 600;
text-decoration: none;
}
.hcs-page .pagination a.page-numbers:hover {
border-color: var(--hcs-green);
color: var(--hcs-green-dark);
}
.hcs-page .pagination .page-numbers.current {
background: #375725;
border-color: #375725;
color: #fff;
}
/* --------------------------------------------------------------------------
* Single blog post (Insights)
* ----------------------------------------------------------------------- */
/* article uses the standard 1200px content width, like the other templates */
.hcs-article-head {
padding: 36px 0 16px;
}
.hcs-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 0 0 16px;
}
.hcs-article-cat {
background: #375725;
color: #fff;
padding: 5px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
text-decoration: none;
}
.hcs-article-cat:hover { background: #2b441d; color: #fff; }
.hcs-article-date {
color: var(--hcs-muted);
font-size: 14.5px;
}
.hcs-article-title {
margin: 0;
font-size: 38px;
line-height: 1.18;
color: var(--hcs-navy);
}
.hcs-article-media {
margin: 26px 0 8px;
}
.hcs-article-media img {
display: block;
width: 100%;
max-height: 440px;
object-fit: cover;
border-radius: 12px;
}
.hcs-article-content {
padding-top: 26px;
font-size: 17px;
line-height: 1.8;
color: var(--hcs-ink);
}
.hcs-article-content > :first-child { margin-top: 0; }
.hcs-article-content p { margin: 0 0 1.5em; }
.hcs-article-content h2 { margin: 1.8em 0 .55em; font-size: 26px; line-height: 1.25; color: var(--hcs-navy); }
.hcs-article-content h3 { margin: 1.6em 0 .5em; font-size: 21px; line-height: 1.3; color: var(--hcs-navy); }
.hcs-article-content h4 { margin: 1.5em 0 .5em; font-size: 18px; color: var(--hcs-navy); }
.hcs-article-content ul,
.hcs-article-content ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.hcs-article-content li { margin-bottom: .5em; }
.hcs-article-content a { color: var(--hcs-green-dark); text-decoration: underline; }
.hcs-article-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.2em 0; }
.hcs-article-content blockquote {
margin: 1.6em 0;
padding: 6px 0 6px 22px;
border-left: 4px solid var(--hcs-green);
color: var(--hcs-navy);
font-style: italic;
}
.hcs-article-back {
margin: 36px 0 8px;
padding-top: 24px;
border-top: 1px solid var(--hcs-line);
}
.hcs-article-back a {
color: var(--hcs-green-dark);
font-weight: 600;
text-decoration: none;
}
.hcs-article-back a:hover { text-decoration: underline; }
/* Related posts */
.hcs-related {
margin-top: 48px;
padding: 56px 0 64px;
background: var(--hcs-bg-soft);
border-top: 1px solid var(--hcs-line);
}
.hcs-related-title {
margin: 0 0 32px;
font-size: 26px;
color: var(--hcs-navy);
text-align: center;
}
/* CTA banner */
.hcs-cta {
padding: 64px 0;
background: #375725;
text-align: center;
}
.hcs-cta-title {
max-width: 700px;
margin: 0 auto 12px;
color: #fff;
font-size: 30px;
line-height: 1.25;
}
.hcs-cta .hcs-cta-text {
max-width: 580px;
margin: 0 auto 28px;
color: rgba(255, 255, 255, 0.92);
font-size: 17px;
line-height: 1.6;
text-align: center;
}
.hcs-cta-btn {
display: inline-block;
padding: 15px 38px;
background: #1f2a44;
color: #fff;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
letter-spacing: .3px;
text-decoration: none;
transition: background .15s ease;
}
.hcs-cta-btn:hover { background: #16203a; color: #fff; }
/* keep the label white over the old Bones a:visited rule */
.hcs-cta .hcs-cta-btn,
.hcs-cta .hcs-cta-btn:link,
.hcs-cta .hcs-cta-btn:visited,
.hcs-cta .hcs-cta-btn:hover,
.hcs-cta .hcs-cta-btn:focus {
color: #ffffff;
}
/* --------------------------------------------------------------------------
* Latest news (3 most recent blog posts) — shown above the footer.
* ----------------------------------------------------------------------- */
.hcs-latest {
border-top: 1px solid var(--hcs-line);
padding: 56px 0 64px;
}
.hcs-latest-title {
margin: 0 0 28px;
font-size: 28px;
color: var(--hcs-navy);
text-align: center;
}
.hcs-latest-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.hcs-card-date {
font-size: 13px;
font-weight: 600;
letter-spacing: .3px;
color: var(--hcs-muted);
text-transform: uppercase;
}
.hcs-latest .hcs-card::after {
content: "Read more \2192";
}
/* --------------------------------------------------------------------------
* Shortcode block: [hcs_case_study]
* ----------------------------------------------------------------------- */
.hcs-cs {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
background: #fff;
border: 1px solid var(--hcs-line);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(31, 42, 68, 0.10);
margin: 36px 0;
}
.hcs-cs-media {
min-height: 220px;
background: var(--hcs-bg-soft);
}
.hcs-cs-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hcs-cs--img-right .hcs-cs-media { order: 2; }
.hcs-cs-body {
align-self: center;
padding: 28px 40px;
}
.hcs-cs .hcs-cs-title {
margin: 0 0 12px;
font-size: 22px;
line-height: 1.25;
color: var(--hcs-navy);
}
.hcs-cs-title a { color: inherit; text-decoration: none; }
.hcs-cs-title a:hover { color: var(--hcs-green-dark); }
.hcs-cs-text {
color: var(--hcs-ink);
font-size: 15.5px;
line-height: 1.55;
}
.hcs-cs-text p { margin: 0 0 .8em; }
.hcs-cs-text > :last-child { margin-bottom: 0; }
.hcs-btn {
display: inline-block;
margin-top: 20px;
padding: 13px 30px;
background: #375725;
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
text-decoration: none;
border-radius: 8px;
transition: background .15s ease;
}
.hcs-btn:hover { background: #2b441d; color: #fff; }
/* Keep every green button label white in all states (over the old Bones a:visited rule) */
.hcs-home-cta, .hcs-home-cta:link, .hcs-home-cta:visited, .hcs-home-cta:hover,
.hcs-btn, .hcs-btn:link, .hcs-btn:visited, .hcs-btn:hover,
.hcs-article-cat, .hcs-article-cat:link, .hcs-article-cat:visited, .hcs-article-cat:hover,
.hcs-blog-filter a.is-active, .hcs-blog-filter a.is-active:visited,
.hcs-page .pagination .page-numbers.current {
color: #ffffff;
}
/* --------------------------------------------------------------------------
* Shortcode block: [hcs_testimonials]
* ----------------------------------------------------------------------- */
.hcs-tm {
margin: 40px 0;
padding: 40px 36px 44px; /* balanced frame */
background: #375725; /* Passcomm green */
border-radius: 16px;
}
.hcs-tm .hcs-tm-title {
margin: 0 0 36px; /* bigger gap below the title */
text-align: center;
color: #fff; /* white reads well on the dark green */
font-size: 30px;
line-height: 1.2;
}
.hcs-tm-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.hcs-tm-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0;
padding: 34px 28px 40px;
background: #ffffff; /* white tiles on the green */
border: 1px solid rgba(31, 42, 68, 0.06);
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.hcs-tm-quote {
margin: 0 0 22px;
color: var(--hcs-ink);
font-size: 18px;
line-height: 1.6;
}
.hcs-tm-quote p { margin: 0; }
.hcs-tm-meta { font-style: italic; line-height: 1.5; }
.hcs-tm-name { display: block; color: var(--hcs-navy); font-weight: 700; }
.hcs-tm-company { display: block; color: var(--hcs-muted); }
.hcs-tm-photo { margin-top: auto; padding-top: 26px; }
.hcs-tm-img,
.hcs-tm-photo img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #e3e6ec;
}
/* --------------------------------------------------------------------------
* Shortcode block: [hcs_clients]
* ----------------------------------------------------------------------- */
.hcs-clients {
margin: 40px 0;
padding: 44px 36px 48px;
background: #ededed;
border-radius: 16px;
text-align: center;
}
.hcs-clients .hcs-clients-title {
margin: 0 0 56px;
color: var(--hcs-navy);
font-size: 22px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.hcs-clients-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 30px 52px;
}
.hcs-client {
display: flex;
align-items: center;
justify-content: center;
}
.hcs-clients-grid img,
.hcs-client-logo {
height: 46px; /* uniform height normalises logos of any shape */
width: auto;
max-width: 240px; /* gentle cap so a very wide logo can't dominate */
object-fit: contain;
}
/* --------------------------------------------------------------------------
* Responsive
* ----------------------------------------------------------------------- */
@media (max-width: 900px) {
.hcs-product-top { grid-template-columns: 1fr; gap: 28px; }
.hcs-landing-body { grid-template-columns: 1fr; gap: 36px; }
.hcs-form-panel { position: static; }
.hcs-hero-title { font-size: 34px; }
.hcs-page-header .hcs-page-title { font-size: 28px; }
.hcs-latest-grid { grid-template-columns: repeat(2, 1fr); }
.hcs-blog-grid { grid-template-columns: repeat(2, 1fr); }
.hcs-cs { grid-template-columns: 1fr; }
.hcs-cs--img-right .hcs-cs-media { order: 0; }
.hcs-cs-body { padding: 30px 28px; }
}
@media (max-width: 600px) {
.hcs-wrap { padding: 0 18px; }
.hcs-grid { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.hcs-card-body { padding: 14px 16px 18px; }
.hcs-hero { min-height: 240px; }
.hcs-hero-title { font-size: 28px; }
.hcs-form-panel { padding: 24px 20px; }
.hcs-contact-form .hcs-form-grid { grid-template-columns: 1fr; }
.hcs-contact-title { text-align: center; }
.hcs-contact-alt { text-align: center; }
.hcs-latest-grid { grid-template-columns: 1fr; }
.hcs-blog-grid { grid-template-columns: 1fr; }
.hcs-article-title { font-size: 28px; }
.hcs-cta-title { font-size: 24px; }
.hcs-clients-grid img,
.hcs-client-logo { height: 36px; max-width: 180px; }
}
/* --------------------------------------------------------------------------
* PADS Reference List (template-pads.php)
* ----------------------------------------------------------------------- */
.hcs-pads .hcs-wrap { padding-top: 40px; padding-bottom: 64px; }
.hcs-pads-intro {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.hcs-pads-updated {
margin: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
color: var(--hcs-muted);
}
.hcs-pads-search { flex: 1 1 340px; max-width: 460px; margin: 0; }
.hcs-pads-search input {
width: 100%;
padding: 12px 16px;
font-size: 15px;
color: var(--hcs-ink);
background: #fff;
border: 1px solid var(--hcs-line);
border-radius: 8px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.hcs-pads-search input:focus {
outline: none;
border-color: var(--hcs-green);
box-shadow: 0 0 0 3px rgba(55, 87, 37, 0.14);
}
.hcs-pads-noresults {
margin: 0 0 24px;
padding: 18px 20px;
background: var(--hcs-bg-soft);
border: 1px solid var(--hcs-line);
border-radius: 8px;
color: var(--hcs-muted);
font-size: 15px;
}
.hcs-pads-groups { display: block; }
.hcs-pads-group {
border: 1px solid var(--hcs-line);
border-radius: 10px;
background: #fff;
margin-bottom: 14px;
overflow: hidden;
}
.hcs-pads-group[open] { box-shadow: 0 6px 20px rgba(31, 42, 68, 0.06); }
.hcs-pads-summary {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 22px;
cursor: pointer;
list-style: none;
user-select: none;
}
.hcs-pads-summary::-webkit-details-marker { display: none; }
.hcs-pads-summary::marker { content: ""; }
.hcs-pads-summary:hover { background: var(--hcs-bg-soft); }
.hcs-pads-summary:focus-visible { outline: 2px solid var(--hcs-green); outline-offset: -2px; }
.hcs-pads-group[open] > .hcs-pads-summary { border-bottom: 1px solid var(--hcs-line); }
.hcs-pads-summary-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.hcs-pads-group-name {
font-size: 18px;
font-weight: 700;
color: var(--hcs-navy);
line-height: 1.25;
}
.hcs-pads-group-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hcs-pads-ref {
display: inline-block;
padding: 3px 10px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .4px;
color: var(--hcs-green-dark);
background: rgba(55, 87, 37, 0.10);
border-radius: 5px;
}
.hcs-pads-count { font-size: 13px; color: var(--hcs-muted); }
.hcs-pads-doc-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 18px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
text-decoration: none;
border-radius: 8px;
white-space: nowrap;
}
a.hcs-pads-doc-btn, a.hcs-pads-doc-btn:link, a.hcs-pads-doc-btn:visited {
background: var(--hcs-green);
color: #fff;
transition: background .15s ease;
}
a.hcs-pads-doc-btn:hover { background: var(--hcs-green-dark); color: #fff; }
.hcs-pads-doc-btn--soon {
background: var(--hcs-bg-soft);
color: var(--hcs-muted);
border: 1px solid var(--hcs-line);
cursor: default;
}
.hcs-pads-summary::after {
content: "\203A";
flex: 0 0 auto;
font-size: 22px;
line-height: 1;
color: #9aa2b1;
transform: rotate(90deg);
transition: transform .18s ease;
}
.hcs-pads-group[open] > .hcs-pads-summary::after { transform: rotate(-90deg); }
.hcs-pads-body { padding: 4px 22px 20px; overflow-x: auto; }
.hcs-pads-table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
}
.hcs-pads-table thead th {
text-align: left;
padding: 12px 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--hcs-navy);
border-bottom: 2px solid var(--hcs-green);
white-space: nowrap;
}
.hcs-pads-table tbody td {
padding: 11px 14px;
border-bottom: 1px solid var(--hcs-line);
vertical-align: top;
color: var(--hcs-ink);
}
.hcs-pads-table tbody tr:hover td { background: var(--hcs-bg-soft); }
.hcs-pads-part {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
font-weight: 600;
color: var(--hcs-navy);
white-space: nowrap;
}
.hcs-pads-desc { line-height: 1.5; }
.hcs-pads-cat {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
color: var(--hcs-muted);
white-space: nowrap;
}
.hcs-pads-dash { color: #b3b9c4; }
.hcs-pads-subrow th {
text-align: left;
padding: 14px 14px 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--hcs-green-dark);
border-bottom: 1px solid var(--hcs-line);
}
@media (max-width: 720px) {
.hcs-pads-summary { flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
.hcs-pads-summary-main { flex-basis: 100%; }
.hcs-pads-summary::after { order: 3; margin-left: auto; }
.hcs-pads-doc-btn { order: 2; }
.hcs-pads-body { padding: 4px 16px 18px; }
.hcs-pads-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hcs-pads-table tbody tr[data-search] {
display: block;
padding: 12px 0;
border-bottom: 1px solid var(--hcs-line);
}
.hcs-pads-table tbody tr:hover td { background: none; }
.hcs-pads-table tbody td { display: block; border: none; padding: 2px 0; white-space: normal; }
.hcs-pads-part { font-size: 14px; }
.hcs-pads-cat::before {
content: "Catalogue: ";
text-transform: uppercase;
font-size: 11px;
letter-spacing: .5px;
color: #b3b9c4;
}
.hcs-pads-subrow th { padding-left: 0; padding-right: 0; }
}
/**
* Additional styles for the enhanced Services page.
* This file only contains NEW classes that are not part of hcs-templates.css.
* Load this AFTER hcs-templates.css.
*/
/* --------------------------------------------------------------------------
* Stats bar — bold navy band with big numbers, sits between service
* sections and the process steps to break up the page with colour.
* ----------------------------------------------------------------------- */
.hcs-stats {
padding: 52px 0;
background: var(--hcs-navy);
}
.hcs-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 32px;
text-align: center;
}
.hcs-stat-number {
margin: 0;
font-size: 42px;
font-weight: 800;
line-height: 1;
color: #fff;
}
.hcs-stat-number--accent {
color: #7fb356; /* lighter tint of the brand green, for contrast on navy */
}
.hcs-stat-label {
margin: 10px 0 0;
font-size: 13.5px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
color: #cdd5e2;
}
/* --------------------------------------------------------------------------
* "Our Approach" process steps
* ----------------------------------------------------------------------- */
.hcs-process {
padding: 64px 0;
background: var(--hcs-bg-soft);
text-align: center;
}
.hcs-process-title {
margin: 0 0 14px;
font-size: 30px;
color: var(--hcs-navy);
}
/* Qualified with .hcs-process so the auto-centering out-specifies the
`.hcs-landing-content p` margin rule that would otherwise left-align it. */
.hcs-process .hcs-process-intro {
max-width: 680px;
margin: 0 auto;
font-size: 17px;
line-height: 1.65;
color: var(--hcs-muted);
text-align: center;
}
.hcs-process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 26px;
margin-top: 44px;
text-align: center;
}
.hcs-process-step {
position: relative;
padding: 30px 26px 26px;
background: #fff;
border: 1px solid var(--hcs-line);
border-radius: 12px;
box-shadow: 0 10px 24px rgba(31, 42, 68, 0.06);
}
.hcs-process-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 16px;
border-radius: 50%;
background: var(--hcs-green);
color: #fff;
font-size: 16px;
font-weight: 800;
}
.hcs-process-step-title {
margin: 0 0 8px;
font-size: 17.5px;
color: var(--hcs-navy);
}
.hcs-process-step-text {
margin: 0;
font-size: 14.5px;
line-height: 1.55;
color: var(--hcs-muted);
}
/* --------------------------------------------------------------------------
* "Meet the Team" teaser — links through to a dedicated team page.
* ----------------------------------------------------------------------- */
.hcs-team-teaser {
padding: 64px 0;
background: #fff;
border-top: 1px solid var(--hcs-line);
border-bottom: 1px solid var(--hcs-line);
}
.hcs-team-teaser-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 52px;
align-items: center;
}
.hcs-team-teaser-eyebrow {
display: inline-block;
margin-bottom: 14px;
padding: 5px 14px;
background: rgba(55, 87, 37, 0.10);
color: var(--hcs-green-dark);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
border-radius: 999px;
}
.hcs-team-teaser-title {
margin: 0 0 14px;
font-size: 28px;
line-height: 1.2;
color: var(--hcs-navy);
}
.hcs-team-teaser-text {
margin: 0 0 28px;
font-size: 16.5px;
line-height: 1.7;
color: var(--hcs-ink);
}
.hcs-team-teaser-photos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.hcs-team-avatar {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 14px;
background: var(--hcs-bg-soft);
box-shadow: 0 12px 26px rgba(31, 42, 68, 0.12);
}
.hcs-team-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hcs-team-avatar-label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 22px 14px 10px;
background: linear-gradient(0deg, rgba(31, 42, 68, 0.85), transparent);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.hcs-team-avatar-label span {
display: block;
font-weight: 400;
font-size: 12px;
color: #e7ebf2;
}
/* Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
.hcs-team-teaser-grid { grid-template-columns: 1fr; gap: 32px; }
.hcs-team-teaser-photos { max-width: 420px; }
}
@media (max-width: 600px) {
.hcs-stat-number { font-size: 34px; }
.hcs-process-title,
.hcs-team-teaser-title { font-size: 24px; }
}
/**
* Additional styles for the Meet the Team page.
* This file only contains NEW classes that are not part of hcs-templates.css
* or services-page-additions.css.
* Load this AFTER hcs-templates.css.
*/
/* --------------------------------------------------------------------------
* Team profile cards — photo + full bio, alternating sides.
* ----------------------------------------------------------------------- */
.hcs-team-member {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
gap: 0;
background: #fff;
border: 1px solid var(--hcs-line);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 14px 34px rgba(31, 42, 68, 0.10);
margin: 0 0 36px;
}
.hcs-team-member-media {
/* Fill the full height of the tile so there's no whitespace above/below the
photo. The column-width fix keeps every photo the same width; the height
follows each bio's length, so keeping bios a similar length keeps the
photos even. */
align-self: stretch;
min-height: 280px;
background: var(--hcs-bg-soft);
}
.hcs-team-member-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Flip the column widths too, so the photo always sits in the narrow (1fr)
track and stays the same size whichever side it's on. */
.hcs-team-member--img-right {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.hcs-team-member--img-right .hcs-team-member-media { order: 2; }
.hcs-team-member-body {
align-self: start;
padding: 24px 42px 34px;
}
.hcs-team-member-name {
margin: 0 0 2px;
font-size: 23px;
line-height: 1.25;
color: var(--hcs-navy);
}
.hcs-team-member-role {
display: block;
margin: 0 0 18px;
font-size: 14px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
color: var(--hcs-green-dark);
}
.hcs-team-member-bio {
color: var(--hcs-ink);
font-size: 15.5px;
line-height: 1.65;
}
.hcs-team-member-bio p {
margin: 0 0 1em;
}
.hcs-team-member-bio > p:last-child {
margin-bottom: 0;
}
/* Responsive ---------------------------------------------------------- */
@media (max-width: 780px) {
.hcs-team-member,
.hcs-team-member--img-right {
grid-template-columns: 1fr;
}
/* On phones the photo becomes a full-width banner; use a landscape crop
so a full-width square isn't overly tall. */
.hcs-team-member-media { order: 0; aspect-ratio: 4 / 3; min-height: 0; }
.hcs-team-member-body { padding: 28px 26px; }
}
/* --------------------------------------------------------------------------
* Shortcode block: [hcs_faqs] — accessible accordion (native )
* ----------------------------------------------------------------------- */
.hcs-faqs {
margin: 40px 0;
}
.hcs-faqs-title {
margin: 0 0 20px;
font-size: 26px;
line-height: 1.2;
color: var(--hcs-navy);
}
.hcs-faqs-list {
display: grid;
gap: 12px;
}
.hcs-faq {
background: #fff;
border: 1px solid var(--hcs-line);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(31, 42, 68, 0.06);
transition: border-color .15s ease, box-shadow .15s ease;
}
.hcs-faq[open] {
border-color: var(--hcs-green);
box-shadow: 0 10px 26px rgba(31, 42, 68, 0.10);
}
.hcs-faq-q {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
font-size: 17px;
font-weight: 700;
color: var(--hcs-navy);
transition: color .15s ease;
}
.hcs-faq-q::-webkit-details-marker { display: none; }
.hcs-faq-q::marker { content: ""; }
.hcs-faq-q:hover { color: var(--hcs-green-dark); }
.hcs-faq[open] .hcs-faq-q { color: var(--hcs-green-dark); }
.hcs-faq-q:focus-visible {
outline: 2px solid var(--hcs-green);
outline-offset: -2px;
}
/* Plus icon that becomes a minus when the item is open. */
.hcs-faq-icon {
flex: 0 0 auto;
position: relative;
width: 20px;
height: 20px;
}
.hcs-faq-icon::before,
.hcs-faq-icon::after {
content: "";
position: absolute;
background: var(--hcs-green);
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
.hcs-faq-icon::before { /* horizontal bar */
top: 9px;
left: 2px;
right: 2px;
height: 2px;
}
.hcs-faq-icon::after { /* vertical bar */
left: 9px;
top: 2px;
bottom: 2px;
width: 2px;
}
.hcs-faq[open] .hcs-faq-icon::after {
transform: scaleY(0);
opacity: 0;
}
.hcs-faq-a {
padding: 0 22px 20px;
color: var(--hcs-ink);
font-size: 15.5px;
line-height: 1.65;
}
.hcs-faq-a p { margin: 0 0 1em; }
.hcs-faq-a > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
.hcs-faq-q { padding: 16px 18px; font-size: 15.5px; }
.hcs-faq-a { padding: 0 18px 18px; }
}
/* Editor-only shortcode notice (e.g. a bad [hcs_case_study] id). */
.hcs-sc-notice {
margin: 24px 0;
padding: 12px 16px;
border: 1px dashed #c0392b;
border-radius: 8px;
background: #fdf3f2;
color: #922b21;
font-size: 14px;
line-height: 1.5;
}