/* ===========================================================================
TRP widget styles
===========================================================================
Only what is not already covered. The widgets deliberately emit the static
build's own class names — .service-item, .process-step-item, .pricing-box,
.accordion-item and twenty others — so they inherit that design from
assets/css/custom.css for free. What is here is:
1. the .trp-* classes the widgets introduce, which nothing else styles
2. a handful of the template's own wrappers it never styled, because its
markup did not need them to carry layout and ours does
3. the classes WordPress requires a theme to provide — screen-reader-text,
the alignment and caption classes, pagination and comments — none of
which a static HTML build has any reason to include
Colours and type come from the custom properties in style.css, so this file
contains no hex values of its own and a brand change stays a one-file edit.
Contents
01 Accessibility
02 Section rhythm
03 Hero
04 Section heading additions
05 Lists and cards
06 Stats
07 Process
08 Timeline
09 Specification panel
10 FAQ accordion
11 Testimonials
12 Team
13 Pricing
14 Blog cards
15 Contact and form
16 Map
17 CTA band
18 Page header
19 Footer additions
20 WordPress core classes
21 Service pages
22 Motion
=========================================================================== */
/* ---- 01 Accessibility -------------------------------------------------- */
/* WordPress's own convention, required by its coding standards and used by
this theme for icon-only links and form labels. Clipped rather than
display:none, which would take it out of the accessibility tree too. */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* The skip link has to become visible when focused, or it helps nobody. */
.trp-skip:focus {
position: fixed !important;
top: 12px;
left: 12px;
z-index: 100000;
width: auto;
height: auto;
clip: auto;
margin: 0;
padding: 12px 20px;
background: var(--trp-navy);
color: var(--trp-white);
font-family: var(--heading-font);
font-weight: 600;
text-decoration: none;
border-radius: 4px;
}
/* ---- 02 Section rhythm ------------------------------------------------- */
/* One vertical rhythm for every widget, so a page assembled from eight of them
in any order has even spacing. The padding controls in each widget's panel
override this per instance. */
.trp-widget {
padding-top: clamp(56px, 7vw, 104px);
padding-bottom: clamp(56px, 7vw, 104px);
position: relative;
}
/* Consecutive bands of the same colour would otherwise read as one enormous
section with a double gap in the middle. */
.trp-bg-cloud + .trp-bg-cloud,
.trp-bg-navy + .trp-bg-navy,
.trp-bg-white + .trp-bg-white {
padding-top: 0;
}
/* The hero and the page header set their own vertical sizing. */
.trp-widget.trp-hero,
.trp-widget.page-header {
padding-top: 0;
padding-bottom: 0;
}
/* ---- 03 Hero ----------------------------------------------------------- */
.trp-hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: min(88vh, 760px);
padding-top: clamp(100px, 14vh, 180px);
padding-bottom: clamp(56px, 8vh, 96px);
background-color: var(--trp-navy);
background-size: cover;
background-position: center;
overflow: hidden;
}
/* The overlay carries the navy, so the image behind it can be any photograph
and the white headline still passes contrast. Opacity is a control. */
.trp-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(100deg, var(--trp-navy) 0%, var(--trp-navy) 42%, rgba(34, 50, 109, 0.72) 100%);
pointer-events: none;
}
.trp-hero .container { position: relative; z-index: 1; }
.trp-hero__subtitle {
color: var(--trp-amber);
margin-bottom: 18px;
}
.trp-hero__title {
font-family: var(--heading-font);
font-size: clamp(32px, 4.4vw, var(--trp-hero-size));
line-height: 1.14;
font-weight: 700;
color: var(--trp-white);
margin: 0 0 22px;
}
/* The one place orange appears in the hero. The book is explicit that orange is
an accent at roughly 10%, so this is a word or two, never a sentence. */
.trp-hero__title .trp-accent { color: var(--trp-amber); }
.trp-hero__desc {
max-width: 62ch;
color: rgba(255, 255, 255, 0.84);
}
.trp-hero__desc p:last-child { margin-bottom: 0; }
.trp-hero__btns,
.hero-btn {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}
/* The template's .btn-default covers the fill and the hover. These two only
distinguish the secondary button, which the template has no variant for. */
.trp-btn--ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
color: var(--trp-white);
}
.trp-btn--ghost:hover,
.trp-btn--ghost:focus-visible {
background: var(--trp-white);
border-color: var(--trp-white);
color: var(--trp-navy);
}
/* The capability strip. A wrapping row of hairline-separated items — the
"thin rules" element from the brand book's graphic language. */
.trp-hero__strip {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin-top: clamp(36px, 6vh, 64px);
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.trp-hero__strip li,
.trp-service-strip .excellence-innovating-list li {
font-family: var(--heading-font);
font-size: var(--trp-label-size);
line-height: var(--trp-label-lh);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
position: relative;
}
/* A separator drawn in CSS rather than typed into the content, so reordering
the repeater cannot leave a trailing pipe. */
.trp-hero__strip li + li::before {
content: "";
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 12px;
background: var(--trp-orange);
}
.trp-hero__strip a { color: inherit; text-decoration: none; }
.trp-hero__strip a:hover { color: var(--trp-white); }
/* The standalone strip sits on light ground, so it inverts. */
.trp-service-strip .excellence-innovating-list {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
border-top: 1px solid var(--trp-rule);
border-bottom: 1px solid var(--trp-rule);
padding: 20px 0;
}
.trp-service-strip:not(.trp-bg-navy) .excellence-innovating-list li {
color: var(--trp-slate);
}
/* ---- 04 Section heading additions -------------------------------------- */
/* custom.css styles .section-title and .section-title-content. These are the
parts the brand adds: the orange rule, and the label treatment. */
.section-title h3 {
font-family: var(--heading-font);
font-size: var(--trp-label-size);
line-height: var(--trp-label-lh);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--trp-orange-text);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 12px;
}
/* The orange accent line from the graphic language, drawn beside the eyebrow
rather than added as an element — one less thing in the markup. */
.section-title h3::after {
content: "";
flex: 0 0 40px;
height: 2px;
background: var(--trp-orange);
}
.section-title.dark-section h3 { color: var(--trp-amber); }
.section-title.dark-section h3::after { background: var(--trp-amber); }
.section-title h2 {
font-size: clamp(26px, 3vw, var(--trp-h1-size));
line-height: 1.2;
font-weight: 700;
margin: 0;
max-width: 22ch;
}
.section-title.dark-section h2 { color: var(--trp-white); }
.section-title-content p {
color: var(--trp-slate);
margin-bottom: 0;
}
.section-title-content.dark-section p { color: rgba(255, 255, 255, 0.8); }
.row.section-row { margin-bottom: clamp(36px, 4.5vw, 64px); }
/* The stacked variant, used inside half-width columns. */
.about-content .section-title h2,
.trp-widget .section-title h2 { max-width: 26ch; }
/* ---- 05 Lists and cards ------------------------------------------------ */
/* The five list-shaped widgets share one card. Cloud ground on white sections
and a lifted white card on cloud sections, so a card is always legible
against whatever band it sits in. */
.trp-capability-item,
.trp-why-item,
.trp-industry-item,
.trp-feature-item,
.trp-software-item,
.trp-mv-item {
height: 100%;
padding: 30px 28px;
margin-bottom: 24px;
background: var(--trp-cloud);
border-radius: 2px;
/* The specification-box element: a hairline with one orange edge. */
border-left: 3px solid var(--trp-orange);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trp-bg-cloud .trp-capability-item,
.trp-bg-cloud .trp-why-item,
.trp-bg-cloud .trp-industry-item,
.trp-bg-cloud .trp-feature-item,
.trp-bg-cloud .trp-software-item,
.trp-bg-cloud .trp-mv-item {
background: var(--trp-white);
}
.trp-bg-navy .trp-capability-item,
.trp-bg-navy .trp-why-item,
.trp-bg-navy .trp-industry-item,
.trp-bg-navy .trp-feature-item,
.trp-bg-navy .trp-software-item,
.trp-bg-navy .trp-mv-item {
background: rgba(255, 255, 255, 0.06);
border-left-color: var(--trp-amber);
}
@media (hover: hover) {
.trp-capability-item:hover,
.trp-why-item:hover,
.trp-industry-item:hover,
.trp-feature-item:hover,
.trp-software-item:hover,
.trp-mv-item:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -26px rgba(34, 50, 109, 0.55);
}
}
.trp-capability-item h3,
.trp-why-item h3,
.trp-industry-item h3,
.trp-feature-item h3,
.trp-software-item h3,
.trp-mv-item h3 {
font-size: var(--trp-h3-size);
line-height: var(--trp-h3-lh);
margin: 0 0 10px;
}
.trp-capability-item p,
.trp-why-item p,
.trp-industry-item p,
.trp-feature-item p,
.trp-software-item p,
.trp-mv-item p {
color: var(--trp-slate);
margin: 0;
}
.trp-bg-navy .trp-capability-item p,
.trp-bg-navy .trp-why-item p,
.trp-bg-navy .trp-industry-item p,
.trp-bg-navy .trp-feature-item p,
.trp-bg-navy .trp-software-item p,
.trp-bg-navy .trp-mv-item p {
color: rgba(255, 255, 255, 0.78);
}
/* The icon, on the 48px grid the brand book specifies. */
.trp-capability-item .icon-box,
.trp-why-item .icon-box,
.trp-industry-item .icon-box,
.trp-feature-item .icon-box,
.trp-software-item .icon-box,
.trp-mv-item .icon-box {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 18px;
color: var(--trp-orange);
font-size: 26px;
}
.trp-capability-item .icon-box svg,
.trp-mv-item .icon-box svg {
width: 28px;
height: 28px;
/* 2px stroke, square ends, no fill — the book's icon rule. */
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: square;
}
/* The services-list column count, which the widget sets as a class because the
template's .services-list-box is a fixed four-across flex row. */
.services-list-box.trp-cols-2 .service-item { flex: 1 1 calc(50% - 12px); }
.services-list-box.trp-cols-3 .service-item { flex: 1 1 calc(33.333% - 12px); }
.services-list-box.trp-cols-4 .service-item { flex: 1 1 calc(25% - 12px); }
@media (max-width: 991px) {
.services-list-box.trp-cols-3 .service-item,
.services-list-box.trp-cols-4 .service-item { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 575px) {
.services-list-box.trp-cols-2 .service-item,
.services-list-box.trp-cols-3 .service-item,
.services-list-box.trp-cols-4 .service-item { flex: 1 1 100%; }
}
/* ---- 06 Stats ---------------------------------------------------------- */
.trp-stats__row { margin-top: 8px; }
.trp-stat {
padding: 28px 0;
border-top: 1px solid var(--trp-rule);
}
.trp-bg-navy .trp-stat { border-top-color: rgba(255, 255, 255, 0.2); }
.trp-stat__number {
font-family: var(--mono-font);
font-size: clamp(38px, 4.4vw, 56px);
line-height: 1;
font-weight: 500;
color: var(--trp-navy);
margin: 0 0 10px;
/* Tabular figures so a counting animation does not make the number jitter
as the digit widths change. */
font-variant-numeric: tabular-nums;
}
.trp-bg-navy .trp-stat__number { color: var(--trp-amber); }
.trp-stat__label {
font-family: var(--heading-font);
font-size: var(--trp-label-size);
line-height: var(--trp-label-lh);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--trp-slate);
margin: 0;
max-width: 24ch;
}
.trp-bg-navy .trp-stat__label { color: rgba(255, 255, 255, 0.72); }
/* ---- 07 Process -------------------------------------------------------- */
/* custom.css styles .process-step-item and .process-step-no; the box is the
wrapper it never needed to style. */
.process-steps-box {
display: flex;
flex-direction: column;
gap: 4px;
}
.process-step-content h3 {
font-size: var(--trp-h3-size);
line-height: var(--trp-h3-lh);
margin: 0 0 6px;
}
.process-step-content p {
color: var(--trp-slate);
margin: 0;
}
.our-process-image figure {
margin: 0;
border-radius: 2px;
overflow: hidden;
}
/* ---- 08 Timeline ------------------------------------------------------- */
.trp-timeline {
position: relative;
margin: 0;
padding-left: 0;
list-style: none;
}
.trp-timeline__item {
display: grid;
grid-template-columns: 96px 1fr;
gap: 0 28px;
padding-bottom: 34px;
position: relative;
}
/* The vertical rule, drawn on the item rather than the list so it stops at the
last entry instead of running past it. */
.trp-timeline__item:not(:last-child)::before {
content: "";
position: absolute;
left: 103px;
top: 26px;
bottom: 0;
width: 1px;
background: var(--trp-rule);
}
.trp-timeline__item::after {
content: "";
position: absolute;
left: 99px;
top: 8px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--trp-orange);
}
.trp-timeline__year {
font-size: var(--trp-data-size);
line-height: var(--trp-data-lh);
color: var(--trp-navy);
font-weight: 500;
text-align: right;
padding-top: 4px;
}
.trp-timeline__body { padding-left: 16px; }
.trp-timeline__body h3 {
font-size: var(--trp-h3-size);
line-height: var(--trp-h3-lh);
margin: 0 0 8px;
}
.trp-timeline__body p { color: var(--trp-slate); margin: 0; }
@media (max-width: 575px) {
.trp-timeline__item { grid-template-columns: 1fr; gap: 6px; }
.trp-timeline__item::before,
.trp-timeline__item::after { display: none; }
.trp-timeline__year { text-align: left; padding-top: 0; }
.trp-timeline__body { padding-left: 0; }
}
/* ---- 09 Specification panel -------------------------------------------- */
/* .trp-spec itself is in style.css; this is the panel widget around it. */
.trp-spec-panel .trp-spec { max-width: 760px; }
.trp-spec dl {
display: grid;
grid-template-columns: minmax(140px, 1fr) 1fr;
gap: 0;
margin: 14px 0 0;
}
.trp-spec dt,
.trp-spec dd {
padding: 11px 0;
border-bottom: 1px solid var(--trp-rule);
margin: 0;
}
.trp-spec dd { text-align: right; }
.trp-spec dt:last-of-type,
.trp-spec dd:last-of-type { border-bottom: 0; }
@media (max-width: 480px) {
.trp-spec dl { grid-template-columns: 1fr; }
.trp-spec dt { padding-bottom: 2px; border-bottom: 0; }
.trp-spec dd { text-align: left; padding-top: 0; }
}
/* ---- 10 FAQ accordion -------------------------------------------------- */
/* Bootstrap provides the collapse behaviour and custom.css the .accordion-item
frame. These are the brand's type and the orange marker. */
.our-faqs .accordion-button {
font-family: var(--heading-font);
font-size: 17px;
line-height: 1.45;
font-weight: 600;
color: var(--trp-navy);
background: transparent;
box-shadow: none;
padding: 20px 48px 20px 0;
}
.our-faqs .accordion-button:not(.collapsed) { color: var(--trp-orange-text); }
/* Bootstrap's default caret is a background-image data URI in its own blue.
Replaced with a plus/minus in the brand's orange. */
.our-faqs .accordion-button::after {
background-image: none;
content: "+";
font-family: var(--heading-font);
font-size: 24px;
font-weight: 400;
line-height: 1;
color: var(--trp-orange);
width: auto;
height: auto;
transform: none;
display: grid;
place-items: center;
}
.our-faqs .accordion-button:not(.collapsed)::after { content: "–"; }
.our-faqs .accordion-button:focus {
box-shadow: none;
outline: 2px solid var(--trp-orange);
outline-offset: 2px;
}
.our-faqs .accordion-body {
padding: 0 48px 24px 0;
color: var(--trp-slate);
}
.our-faqs .accordion-body > :last-child { margin-bottom: 0; }
.our-faqs .accordion-body ul { list-style: disc; padding-left: 20px; margin: 0 0 1em; }
.our-faqs .accordion-body li { margin-bottom: 6px; }
/* ---- 11 Testimonials --------------------------------------------------- */
.trp-testimonial-slider { padding-bottom: 48px; }
.our-testimonial .testimonial-item {
height: 100%;
padding: 34px 32px;
background: var(--trp-white);
border-radius: 2px;
border-top: 3px solid var(--trp-orange);
}
.trp-bg-white .our-testimonial .testimonial-item,
.trp-bg-white.our-testimonial .testimonial-item { background: var(--trp-cloud); }
.our-testimonial blockquote {
margin: 0 0 24px;
padding: 0;
border: 0;
font-size: 17px;
line-height: 1.7;
color: var(--trp-charcoal);
}
.our-testimonial blockquote p { margin: 0; }
.our-testimonial blockquote p::before { content: "\201C"; }
.our-testimonial blockquote p::after { content: "\201D"; }
.our-testimonial .testimonial-author {
display: flex;
align-items: center;
gap: 14px;
}
.our-testimonial .author-image img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
}
.our-testimonial .author-content h3 {
font-size: 16px;
line-height: 1.3;
margin: 0 0 2px;
}
.our-testimonial .author-content p { margin: 0; font-size: var(--trp-data-size); }
.trp-testimonial-slider .swiper-pagination-bullet-active { background: var(--trp-orange); }
/* ---- 12 Team ----------------------------------------------------------- */
.team-item {
height: 100%;
margin-bottom: 26px;
background: var(--trp-cloud);
border-radius: 2px;
overflow: hidden;
}
.trp-bg-cloud .team-item { background: var(--trp-white); }
.team-item .team-content { padding: 26px 28px; }
.team-item .team-content h3 {
font-size: var(--trp-h3-size);
line-height: var(--trp-h3-lh);
margin: 0 0 4px;
}
.team-role {
font-family: var(--heading-font);
font-size: var(--trp-label-size);
line-height: var(--trp-label-lh);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--trp-orange-text);
margin: 0 0 14px;
}
.team-item .team-content p { color: var(--trp-slate); }
.team-social {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--trp-rule);
border-radius: 50%;
color: var(--trp-navy);
margin-top: 6px;
}
.team-social:hover {
background: var(--trp-navy);
border-color: var(--trp-navy);
color: var(--trp-white);
}
/* ---- 13 Pricing -------------------------------------------------------- */
.pricing-price { margin: 18px 0 22px; }
.pricing-price h2 {
font-family: var(--mono-font);
font-size: 34px;
line-height: 1.1;
font-weight: 500;
margin: 0;
color: var(--trp-navy);
}
/* "On application" is a phrase, not a figure, so it drops out of the mono face
and the large size — set as a price it reads as a mistake. */
.pricing-price h2.trp-price-on-application {
font-family: var(--heading-font);
font-size: 19px;
font-weight: 600;
color: var(--trp-slate);
}
.pricing-box.active .pricing-price h2,
.pricing-box.active .pricing-price h2.trp-price-on-application { color: var(--trp-white); }
/* ---- 14 Blog cards ----------------------------------------------------- */
.post-item { height: 100%; margin-bottom: 28px; }
.post-item-body { padding-top: 20px; }
.post-title {
font-size: var(--trp-h3-size);
line-height: var(--trp-h3-lh);
margin: 8px 0 10px;
}
.post-title a { color: var(--trp-navy); text-decoration: none; }
.post-title a:hover { color: var(--trp-orange-text); }
.post-meta {
font-family: var(--mono-font);
font-size: var(--trp-data-size);
line-height: var(--trp-data-lh);
color: var(--trp-slate);
display: flex;
gap: 16px;
}
.readmore-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--heading-font);
font-size: var(--trp-label-size);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--trp-orange-text);
text-decoration: none;
}
.readmore-btn::after {
content: "";
width: 18px;
height: 1px;
background: currentColor;
transition: width 0.2s ease;
}
.readmore-btn:hover::after { width: 28px; }
/* ---- 15 Contact and form ----------------------------------------------- */
.trp-page-content { padding: clamp(48px, 6vw, 88px) 0; }
.trp-sidebar { padding-left: 0; }
.trp-sidebar .widget { margin-bottom: 34px; }
.trp-sidebar .widget-title {
font-size: var(--trp-h3-size);
line-height: var(--trp-h3-lh);
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 2px solid var(--trp-orange);
}
.trp-form .trp-field { margin-bottom: 20px; }
.trp-form label {
display: block;
font-family: var(--heading-font);
font-size: var(--trp-label-size);
line-height: var(--trp-label-lh);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--trp-slate);
margin-bottom: 7px;
}
.trp-form label span { color: var(--trp-orange); }
.trp-form input,
.trp-form textarea,
.trp-form select,
.trp-searchform input {
width: 100%;
padding: 13px 16px;
font-family: var(--default-font);
font-size: 15px;
color: var(--trp-charcoal);
background: var(--trp-white);
border: 1px solid var(--trp-rule);
border-radius: 2px;
transition: border-color 0.2s ease;
}
.trp-form input:focus,
.trp-form textarea:focus,
.trp-searchform input:focus {
border-color: var(--trp-navy);
outline: 2px solid var(--trp-orange);
outline-offset: 1px;
}
.trp-form textarea { resize: vertical; min-height: 140px; }
.trp-form button { margin-top: 6px; }
/* The honeypot. Positioned off-canvas rather than display:none, because some
bots skip hidden fields and fill everything else. */
.trp-hp {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.trp-form-notice {
padding: 14px 18px;
margin-bottom: 24px;
border-left: 3px solid;
border-radius: 2px;
}
.trp-form-notice--ok {
background: var(--trp-navy-tint);
border-left-color: var(--trp-navy);
color: var(--trp-navy);
}
.trp-form-notice--error {
background: var(--trp-orange-tint);
border-left-color: var(--trp-orange);
color: var(--trp-orange-text);
}
.trp-searchform { display: flex; gap: 10px; }
.trp-searchform button {
flex: 0 0 auto;
padding: 0 22px;
font-family: var(--heading-font);
font-weight: 600;
color: var(--trp-white);
background: var(--trp-navy);
border: 0;
border-radius: 2px;
cursor: pointer;
}
.trp-searchform button:hover { background: var(--trp-navy-light); }
.contact-info-item .icon-box {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 16px;
color: var(--trp-orange);
font-size: 22px;
}
.contact-info-item p { margin: 0 0 4px; }
.contact-info-item a { color: var(--trp-navy); text-decoration: none; }
.contact-info-item a:hover { color: var(--trp-orange-text); }
/* ---- 16 Map ------------------------------------------------------------ */
.trp-map,
.google-map { line-height: 0; }
.trp-map iframe {
display: block;
width: 100%;
border: 0;
/* Keeps the map from inheriting the page's link colour on its own chrome. */
filter: saturate(0.9);
}
/* ---- 17 CTA band ------------------------------------------------------- */
.trp-cta-band__title {
font-size: clamp(22px, 2.4vw, var(--trp-h2-size));
line-height: 1.25;
margin: 0 0 10px;
max-width: 30ch;
}
.trp-cta-band__text { margin: 0; color: var(--trp-slate); }
.trp-bg-navy .trp-cta-band__text { color: rgba(255, 255, 255, 0.8); }
.trp-cta-band__btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-end;
}
@media (max-width: 991px) {
.trp-cta-band__btns { justify-content: flex-start; margin-top: 24px; }
}
/* ---- 18 Page header ---------------------------------------------------- */
.page-header {
position: relative;
padding: clamp(96px, 12vh, 164px) 0 clamp(44px, 6vh, 72px);
background-color: var(--trp-navy);
background-size: cover;
background-position: center;
}
.trp-page-header__overlay {
position: absolute;
inset: 0;
background: var(--trp-navy);
pointer-events: none;
}
.page-header .container { position: relative; z-index: 1; }
.page-title {
font-family: var(--heading-font);
font-size: clamp(28px, 3.6vw, var(--trp-h1-size));
line-height: 1.16;
font-weight: 700;
color: var(--trp-white);
margin: 0 0 14px;
max-width: 24ch;
}
.page-subtitle {
color: rgba(255, 255, 255, 0.82);
max-width: 64ch;
margin-bottom: 18px;
}
.trp-crumbs { font-size: var(--trp-data-size); }
.trp-crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.trp-crumbs li + li::before {
content: "/";
margin-right: 8px;
color: rgba(255, 255, 255, 0.45);
}
.trp-crumbs a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.trp-crumbs a:hover { color: var(--trp-amber); }
.trp-crumbs [aria-current] { color: var(--trp-white); font-weight: 500; }
/* ---- 19 Footer and header additions ------------------------------------ */
.header-social-box { align-items: center; gap: 14px; }
.footer-content p { color: rgba(255, 255, 255, 0.78); }
.footer-contact-info ul,
.footer-privacy-policy ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer-contact-info li { margin-bottom: 10px; color: rgba(255, 255, 255, 0.78); }
.footer-contact-info a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer-contact-info a:hover { color: var(--trp-amber); }
.footer-privacy-policy ul { display: flex; gap: 20px; justify-content: flex-end; }
.footer-privacy-policy a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: var(--trp-data-size); }
.footer-privacy-policy a:hover { color: var(--trp-amber); }
@media (max-width: 991px) {
.footer-privacy-policy ul { justify-content: flex-start; margin-top: 12px; }
}
/* The about widget's content column. */
.about-content-body { margin-top: 22px; }
.about-list {
margin: 22px 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.about-list li {
position: relative;
padding-left: 28px;
color: var(--trp-charcoal);
}
/* A tick drawn in CSS: no icon font dependency for a list that appears on two
pages, and it cannot go missing if Font Awesome fails to load. */
.about-list li::before {
content: "";
position: absolute;
left: 4px;
top: 9px;
width: 10px;
height: 5px;
border-left: 2px solid var(--trp-orange);
border-bottom: 2px solid var(--trp-orange);
transform: rotate(-45deg);
}
.about-btn { margin-top: 26px; }
/* ---- 20 WordPress core classes ----------------------------------------- */
/* A static HTML build has no reason to include these, and the editor will
produce all of them the first time someone uploads an image or quotes a
paragraph. */
.alignleft {
float: left;
margin: 0.4em 1.6em 1em 0;
}
.alignright {
float: right;
margin: 0.4em 0 1em 1.6em;
}
.aligncenter {
display: block;
margin: 0.4em auto 1.4em;
}
.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.gallery-caption,
figcaption {
font-size: var(--trp-data-size);
line-height: var(--trp-data-lh);
color: var(--trp-slate);
margin-top: 8px;
}
.trp-page-thumb { margin-bottom: 28px; border-radius: 2px; }
/* The editor can place a block-quote in any page content. */
.trp-page-content blockquote,
.post-content blockquote {
margin: 1.6em 0;
padding: 4px 0 4px 24px;
border-left: 3px solid var(--trp-orange);
font-size: 18px;
line-height: 1.7;
color: var(--trp-navy);
}
.post-content ul,
.trp-page-content ul { list-style: disc; padding-left: 22px; margin: 0 0 1.2em; }
.post-content ol,
.trp-page-content ol { list-style: decimal; padding-left: 22px; margin: 0 0 1.2em; }
.post-content li,
.trp-page-content li { margin-bottom: 8px; }
.post-content table,
.trp-page-content table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.4em;
}
.post-content th,
.post-content td,
.trp-page-content th,
.trp-page-content td {
padding: 11px 14px;
border-bottom: 1px solid var(--trp-rule);
text-align: left;
}
.post-content th,
.trp-page-content th {
font-family: var(--heading-font);
font-size: var(--trp-label-size);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--trp-slate);
}
/* Pagination, which the_posts_pagination() outputs. */
.navigation.pagination { margin-top: 48px; }
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.page-numbers {
display: grid;
place-items: center;
min-width: 42px;
height: 42px;
padding: 0 10px;
font-family: var(--heading-font);
font-weight: 600;
color: var(--trp-navy);
background: var(--trp-cloud);
border-radius: 2px;
text-decoration: none;
}
.page-numbers:hover { background: var(--trp-navy-tint); }
.page-numbers.current {
background: var(--trp-navy);
color: var(--trp-white);
}
.trp-page-links { margin-top: 24px; font-family: var(--heading-font); font-weight: 600; }
/* Comments. The theme calls comments_template(), so these will be used the
moment comments are enabled on a post. */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { margin-bottom: 26px; }
.comment-list .children { list-style: none; margin: 22px 0 0 28px; padding: 0; }
.comment-body {
padding: 22px 24px;
background: var(--trp-cloud);
border-radius: 2px;
}
.comment-author { font-family: var(--heading-font); font-weight: 600; color: var(--trp-navy); }
.comment-metadata { font-size: var(--trp-data-size); color: var(--trp-slate); margin-bottom: 10px; }
.comment-respond { margin-top: 40px; }
.comment-form p { margin-bottom: 18px; }
.comment-form label {
display: block;
font-family: var(--heading-font);
font-size: var(--trp-label-size);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--trp-slate);
margin-bottom: 7px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 13px 16px;
font-family: var(--default-font);
border: 1px solid var(--trp-rule);
border-radius: 2px;
}
/* WordPress adds .sticky and .bypostauthor and the theme-check requires both
to be present in the stylesheet. */
.sticky .post-title::before {
content: "★";
color: var(--trp-orange);
margin-right: 8px;
}
.bypostauthor > .comment-body { border-left: 3px solid var(--trp-orange); }
/* ---- 21 Service pages -------------------------------------------------- */
/* The services archive and the single-service fallback. custom.css already
styles .service-item, .service-catagery-list and .sidebar-cta-box, so what
is here is two corrections and the states that markup never had. */
/* custom.css capitalises every .service-body h3 and every sidebar list link.
That suits the template's demo copy ("team coaching") and breaks real
service names: capitalize uppercases the first letter of every word, so
"132 kV GIS" renders as "132 KV GIS", and the brand book is explicit that
the unit symbol is kV. Same specificity as the rule it corrects — this file
loads last, which is what settles it. */
.page-services .service-body h3,
.service-catagery-list ul li a {
text-transform: none;
}
/* The card title is a link here rather than inert text, so it has to stop
taking the global link colour. */
.service-item .service-body h3 a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.service-item .service-body h3 a:hover,
.service-item .service-body h3 a:focus-visible {
color: var(--accent-color);
}
/* Service names run to three lines where the template's ran to one, so without
this the arrows sit at a different height in every card across a row. The
card already has height: calc(100% - 30px) from custom.css; a column flex
with the footer pushed to the bottom is all that is missing. */
.page-services .service-item {
display: flex;
flex-direction: column;
}
/* 60px of it was spacing to the footer, which margin-top: auto now owns. */
.page-services .service-item .service-body {
margin-bottom: 30px;
}
.page-services .service-item .service-footer {
margin-top: auto;
}
/* The service the visitor is already on. Keyed to aria-current so the styling
and the accessible state cannot drift apart, and matching the hover rule in
custom.css, which rotates the arrow. */
.service-catagery-list ul li a[aria-current="page"] {
color: var(--accent-color);
font-weight: 600;
}
.service-catagery-list ul li a[aria-current="page"]::before {
transform: translateY(-50%) rotate(45deg);
}
/* The sidebar phone and email are links here; the template had them as plain
headings, so nothing stopped them turning blue. */
.sidebar-cta-contact-item .cta-contact-item-title h3 a {
color: inherit;
text-decoration: none;
}
.sidebar-cta-contact-item .cta-contact-item-title h3 a:hover,
.sidebar-cta-contact-item .cta-contact-item-title h3 a:focus-visible {
text-decoration: underline;
}
/* The wordmark fallback, shown wherever no custom logo has been uploaded — the
header, the footer and the sidebar CTA. Nothing styled it, so until now it
rendered as a default-coloured text link, twice on navy. */
.trp-logo {
display: inline-block;
font-family: var(--heading-font);
font-size: var(--trp-h3-size);
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
}
.trp-logo--dark {
color: var(--primary-color);
}
.trp-logo--light {
color: var(--white-color);
}
/* ---- 22 Motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
/* The template's reveal animations leave content at opacity 0 until a
scroll event fires. For a visitor who has asked for less motion the
animation must not run — but the content must still be visible, which is
why this sets the end state rather than only disabling the animation. */
.wow,
.trp-widget .wow {
visibility: visible !important;
opacity: 1 !important;
animation: none !important;
transform: none !important;
}
.trp-hero.parallaxie { background-attachment: scroll !important; }
.readmore-btn::after { transition: none; }
/* The template animates every section heading with GSAP SplitText, which
function.js runs without checking this preference — CSS cannot stop the
tween, but it can stop the result being invisible.
gsap.from() animates from autoAlpha:0 to the element's own state, so a
heading is visible at rest and this is belt-and-braces. It earns its
place because the tween is driven by ScrollTrigger: if that never fires
for an element — a background tab at load, a container that is scrolled
programmatically, GSAP failing to load after SplitText has already split
the text — the heading is left at opacity 0 with no second chance. An
invisible H2 is a far worse outcome than an unwanted animation.
The child selectors are the per-character spans SplitText injects, which
carry the inline opacity rather than the heading itself. */
.text-anime-style-1,
.text-anime-style-2,
.text-anime-style-1 div,
.text-anime-style-2 div,
.text-anime-style-1 > div > div,
.text-anime-style-2 > div > div {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
/* -----------------------------------------------------------------------------
Contact Form 7, styled to match the theme's built-in form (.trp-form above).
CF7 prints each field as ,
and the submit is an , which cannot carry .btn-default's inner
— so the button gets the same navy/orange treatment drawn directly.
-------------------------------------------------------------------------- */
.wpcf7-form > p { margin: 0 0 20px; }
.wpcf7-form label {
display: block;
width: 100%;
font-family: var(--heading-font);
font-size: var(--trp-label-size);
line-height: var(--trp-label-lh);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--trp-slate);
}
.wpcf7-form label br { display: none; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 7px; }
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7-form textarea,
.wpcf7-form select {
display: block;
width: 100%;
padding: 13px 16px;
font-family: var(--default-font);
font-size: 15px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
line-height: 1.5;
color: var(--trp-charcoal);
background: var(--trp-white);
border: 1px solid var(--trp-rule);
border-radius: 10px;
box-shadow: none;
transition: border-color 0.2s ease;
}
.wpcf7-form textarea { resize: vertical; min-height: 140px; height: 160px; }
.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
border-color: var(--trp-navy);
outline: 2px solid var(--trp-orange);
outline-offset: 1px;
}
.wpcf7-form .wpcf7-submit {
display: inline-block;
width: auto;
padding: 16px 34px;
font-family: var(--default-font);
font-size: 16px;
font-weight: 600;
line-height: 1;
text-transform: capitalize;
color: var(--trp-white);
background: var(--trp-navy);
border: 0;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible { background: var(--trp-orange); }
.wpcf7-form .wpcf7-submit:focus-visible { outline: 2px solid var(--trp-navy); outline-offset: 2px; }
.wpcf7-form .wpcf7-submit:disabled { opacity: 0.6; cursor: wait; }
.wpcf7-form .wpcf7-spinner { vertical-align: middle; margin: 0 0 0 14px; }
/* Validation: the same orange as the built-in form's error notice. */
.wpcf7-form .wpcf7-not-valid { border-color: var(--trp-orange) !important; }
.wpcf7-form .wpcf7-not-valid-tip {
margin-top: 6px;
font-family: var(--default-font);
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--trp-orange-text);
}
.wpcf7 form .wpcf7-response-output {
margin: 4px 0 0;
padding: 14px 18px;
border: 0;
border-left: 3px solid var(--trp-orange);
border-radius: 2px;
background: var(--trp-orange-tint);
color: var(--trp-orange-text);
}
.wpcf7 form.sent .wpcf7-response-output {
border-left-color: var(--trp-navy);
background: var(--trp-navy-tint);
color: var(--trp-navy);
}