/* ========================================================================
TABLE OF CONTENTS
========================================================================
1. IMPORTS & FONTS
2. ROOT VARIABLES
3. RESET & NORMALIZE
4. TYPOGRAPHY
5. UTILITIES
6. BUTTONS
7. TOP SYSTEM BAR
8. NAVBAR
9. FOOTER
10. HERO / HEADER
11. SECTION TITLES
12. CARDS & ITEMS (used across pages)
13. FORMS & WIDGETS
14. ANIMATIONS
15. RESPONSIVE OVERRIDES
16. COOKIE BANNER / MODAL
17. PAGE‑SPECIFIC COMPONENTS (GIS, News, Careers, Contact, etc.)
18. HOME PAGE SPACING (added)
======================================================================== */
/* ========================================================================
1. IMPORTS & FONTS
------------------------------------------------------------------------
FIXED (PageSpeed): the @import that used to live here has been removed
for real. @import inside CSS is render-blocking and discovered late by
the browser. The font request now happens directly from
commonAssets.headerPlugins, ahead of the compiled CSS icons)
======================================================================== */
.cc-channel__icon svg {
display: block;
color: var(--main-color-one);
}
.cc-channel:hover .cc-channel__icon svg {
color: inherit;
}
.cc-channel__cta svg {
display: inline-block;
vertical-align: middle;
margin-left: 4px;
transition: transform 0.3s ease;
}
.cc-channel:hover .cc-channel__cta svg {
transform: translateX(5px);
}
/* ---- Draw-in animation on load ---- */
.cc-channel__icon svg path,
.cc-channel__icon svg rect {
stroke-dasharray: 90;
stroke-dashoffset: 90;
animation: ccIconDraw 1.1s ease forwards;
}
.cc-channel:nth-child(2) .cc-channel__icon svg path { animation-delay: 0.15s; }
.cc-channel:nth-child(3) .cc-channel__icon svg path { animation-delay: 0.3s; }
@keyframes ccIconDraw {
to { stroke-dashoffset: 0; }
}
/* ---- Email icon: subtle flap lift on hover ---- */
.cc-channel:hover .cc-channel__icon svg path {
transition: transform 0.35s ease;
transform-origin: 12px 8px;
}
.cc-channel:hover .cc-channel__icon svg path:last-child {
transform: translateY(-1px);
}
/* ---- Phone icons: ring-shake on hover (add .cc-channel--phone in markup) ---- */
.cc-channel--phone:hover .cc-channel__icon svg {
animation: ccPhoneRing 0.5s ease;
}
@keyframes ccPhoneRing {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-12deg); }
40% { transform: rotate(10deg); }
60% { transform: rotate(-8deg); }
80% { transform: rotate(4deg); }
}
/* ========================================================================
3. CN-CARD__CTA__LARGE — SVG arrow hover shift (replaces arrow)
======================================================================== */
.cn-card__cta__large svg {
transition: transform 0.3s ease;
}
.cn-card:hover .cn-card__cta__large svg {
transform: translateX(-5px); /* negative since arrow now points left */
}
/* ========================================================================
4. REDUCED MOTION
======================================================================== */
@media (prefers-reduced-motion: reduce) {
.ct-navbar::after,
.cc-channel__icon svg path,
.cc-channel__icon svg rect,
.cc-channel--phone:hover .cc-channel__icon svg,
.cc-channel__cta svg,
.cn-card__cta__large svg {
animation: none !important;
transition: none !important;
}
.cc-channel__icon svg path,
.cc-channel__icon svg rect {
stroke-dashoffset: 0;
}
}
/* ========================================================================
NEWS TOOLBAR
Row 1: title + subtitle (full width)
Row 2: search (flexible) + category filter (pinned right)
Row 3 (collapsible): category panel — full width, part of normal flow
======================================================================== */
.cn-toolbar {
display: flex;
flex-direction: column;
margin-bottom: 40px;
}
.cn-toolbar .section-title {
margin-bottom: 28px;
text-align: left;
max-width: 720px;
}
.cn-toolbar .section-title .title {
text-transform: none;
letter-spacing: normal;
text-align: left;
margin-bottom: 12px;
}
.cn-toolbar .section-title .description {
text-align: left;
margin: 0;
}
.cn-toolbar__controls {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
width: 100%;
}
/* ---- Search field ---- */
.cn-search {
display: flex;
align-items: center;
gap: 16px;
flex: 1 1 360px;
max-width: 100%;
min-width: 0;
height: 54px;
background: #fff;
border: 1px solid rgba(4, 7, 46, 0.1);
border-radius: 30px;
/* generous, symmetric breathing room at the start & end of the field */
padding: 0 24px;
box-shadow: 0 .275rem .75rem -.0625rem rgb(11 15 25 / .06), 0 .125rem .4rem -.0625rem rgb(11 15 25 / .03);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.cn-search:focus-within {
border-color: var(--main-color-two);
box-shadow: 0 6px 20px rgba(41, 103, 203, 0.16);
}
.cn-search > i.fa-search {
flex: none;
color: #98a0b3;
font-size: 15px;
}
.cn-search input {
color: var(--heading-color) !important;
-webkit-text-fill-color: var(--heading-color);
caret-color: var(--heading-color);
background: transparent !important;
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: none;
padding: 0;
font-family: var(--body-font);
font-size: 14.5px;
}
.cn-search input::placeholder {
color: #a7a7b4;
font-weight: 400;
}
.cn-search input:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.cn-search__clear {
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: rgba(4, 7, 46, 0.06);
color: var(--paragraph-color);
font-size: 11px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.cn-search__clear:hover {
/*background: var(--main-color-one);*/
color: var(--paragraph-color);
}
.cn-search.has-value .cn-search__clear {
display: flex;
}
/* ---- Category filter toggle ---- */
.cn-cat-filter {
position: relative;
flex: 0 0 auto;
margin-left: auto;
}
.cn-cat-filter__toggle {
border: #dddddd solid 1px !important;
outline: none !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none !important;
display: inline-flex !important;
align-items: center;
gap: 10px;
height: 54px !important;
padding: 0 24px !important;
border-radius: 30px !important;
/*border: 1px solid rgba(4, 7, 46, 0.1) !important;*/
background: #fff !important;
background-image: none !important;
color: var(--main-color-two) !important;
font-family: var(--body-font) !important;
font-size: 14.5px !important;
font-weight: 700 !important;
line-height: normal;
cursor: pointer;
box-shadow: 0 .275rem .75rem -.0625rem rgb(11 15 25 / .06), 0 .125rem .4rem -.0625rem rgb(11 15 25 / .03) !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
white-space: nowrap;
}
.cn-cat-filter__toggle i {
font-size: 11px;
transition: transform 0.3s ease;
}
.cn-cat-filter__toggle:focus,
.cn-cat-filter__toggle:focus-visible {
outline: none !important;
border-color: var(--main-color-two) !important;
box-shadow: 0 6px 20px rgba(41, 103, 203, 0.16) !important;
}
.cn-cat-filter.is-open .cn-cat-filter__toggle i {
transform: rotate(180deg);
}
.cn-cat-filter__toggle:hover,
.cn-cat-filter.is-open .cn-cat-filter__toggle {
border-color: var(--main-color-two) !important;
box-shadow: 0 .275rem .75rem -.0625rem rgb(11 15 25 / .06), 0 .125rem .4rem -.0625rem rgb(11 15 25 / .03);
}
/* ---- Category panel ----
NOTE: in the markup this panel is a sibling of .cn-toolbar__controls
(both live inside .cn-toolbar), so it must lay out as a normal, static,
full-width block — not be absolutely positioned against the toggle
button, which is a different DOM branch and was the root cause of the
panel rendering in the wrong place. */
.cn-cat-filter__panel {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px 24px;
width: 100%;
background: #fff;
border-radius: 16px;
outline: 1px solid #dddddd;
outline-offset: -14px;
box-shadow: 0 .275rem .75rem -.0625rem rgb(11 15 25 / .06), 0 .125rem .4rem -.0625rem rgb(11 15 25 / .03);
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 28px;
margin-top: 0;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.35s ease, margin-top 0.35s ease;
}
.cn-cat-filter__panel.is-open {
max-height: 640px;
opacity: 1;
margin-top: 24px;
padding: 26px 28px;
}
.cn-cat-filter__item {
display: grid;
grid-template-columns: 19px 1fr;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(4, 7, 46, 0.08);
background: #f7f8fb;
font-family: var(--body-font);
font-size: 14px;
color: var(--heading-color);
cursor: pointer;
white-space: normal;
min-width: 0;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cn-cat-filter__item:hover {
border-color: var(--main-color-two);
background: rgba(41, 103, 203, 0.05);
box-shadow: 0 .275rem .75rem -.0625rem rgb(11 15 25 / .06);
}
.cn-cat-filter__item:has(.cn-cat-checkbox:checked) {
border-color: transparent;
background: rgba(41, 103, 203, 0.08);
box-shadow: 0 0 0 1px rgba(41, 103, 203, 0.28) inset;
}
.cn-cat-filter__item input {
display: none;
}
.cn-cat-filter__box {
width: 19px;
height: 19px;
border-radius: 6px;
border: 1.5px solid rgba(4, 7, 46, 0.18);
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cn-cat-filter__box i {
font-size: 10px;
color: #fff;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.cn-cat-checkbox:checked ~ .cn-cat-filter__box {
background: linear-gradient(135deg, var(--main-color-one), var(--main-color-two));
border-color: transparent;
box-shadow: 0 4px 10px -2px rgba(41, 103, 203, 0.4);
}
.cn-cat-checkbox:checked ~ .cn-cat-filter__box i {
opacity: 1;
transform: scale(1);
}
.cn-cat-filter__item:hover .cn-cat-filter__box {
border-color: var(--main-color-two);
}
.cn-cat-filter__label {
line-height: 19px;
font-weight: 500;
}
.cn-cat-filter__item:has(.cn-cat-checkbox:checked) .cn-cat-filter__label {
color: var(--main-color-two);
font-weight: 700;
}
/* ---- Responsive ---- */
@media (max-width: 1199px) {
.cn-cat-filter__panel { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
.cn-toolbar { margin-bottom: 32px; }
.cn-toolbar .section-title { margin-bottom: 22px; }
.cn-cat-filter__panel.is-open { margin-top: 18px; }
.cn-search { flex-basis: 280px; }
.cn-cat-filter__panel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.cn-toolbar__controls { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: -10px;}
/* reset the row-layout flex-basis so it doesn't get read as a height
once the container becomes flex-direction: column */
.cn-search { flex: 0 0 auto; width: 100%; max-width: 100%; height: 54px; }
.cn-cat-filter { width: 100%; margin-left: 0; }
.cn-cat-filter__toggle { width: 100%; justify-content: space-between; }
.cn-cat-filter__panel { grid-template-columns: repeat(2, 1fr); padding: 0 22px; }
.cn-cat-filter__panel.is-open { padding: 24px 22px; }
}
@media (max-width: 575px) {
.cn-toolbar__controls { margin-bottom: 6px;}
.cn-toolbar { margin-bottom: 24px; }
.cn-toolbar .section-title { margin-bottom: 18px; }
.cn-search { padding: 0 20px; gap: 12px; }
.cn-cat-filter__panel { grid-template-columns: 1fr; padding: 0 20px; }
.cn-cat-filter__panel.is-open { padding: 22px 20px; margin-top: 14px; }
}
/* ============================================================================
NEW SECTIONS — Who We Are / Our Focus / Our Platforms (hex) /
Why Work With Us / We Believe In
Added to support new content sections across HomePage, OurStory and
Careers. Built on existing tokens (--main-color-one/-two, --heading-color,
--paragraph-color, --heading-font, --body-font) so these re-theme for free
in dark mode the same way every other component on the site does — only
the actual card/tile backgrounds need explicit dark-mode.scss overrides,
same pattern already used for .industry-card / .cv-card etc.
============================================================================ */
/* ---- Who We Are (image collage intro) ---- */
.who-we-are { padding: 90px 0; }
.who-we-are__media {
position: relative;
padding-bottom: 70px;
padding-left: 60px;
}
.who-we-are__img-main {
width: 100%;
aspect-ratio: 4 / 3.3;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 30px 60px -20px rgba(4, 7, 46, 0.25);
display: block;
}
.who-we-are__img-accent {
position: absolute;
left: 0;
bottom: 0;
width: 52%;
aspect-ratio: 5 / 4;
object-fit: cover;
border-radius: 16px;
border: 6px solid var(--white-color, #fff);
box-shadow: 0 20px 40px -14px rgba(4, 7, 46, 0.3);
}
.who-we-are__stat {
position: absolute;
right: 6%;
top: -28px;
background: var(--white-color, #fff);
border-radius: 14px;
padding: 16px 22px;
box-shadow: 0 .275rem .75rem -.0625rem rgb(11 15 25 / .06),0 .125rem .4rem -.0625rem rgb(11 15 25 / .03)!important;
text-align: center;
}
.who-we-are__stat-num {
display: block;
font-family: var(--heading-font);
font-weight: 700;
font-size: 26px;
background: linear-gradient(135deg, var(--main-color-one), var(--main-color-two));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.who-we-are__stat-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--paragraph-color, #6b7c85);
margin-top: 2px;
}
@media (max-width: 991px) {
.who-we-are__media { padding-left: 40px; padding-bottom: 56px; margin-top: 40px; }
}
@media (max-width: 576px) {
.who-we-are { padding: 60px 0; }
.who-we-are__media { padding-left: 24px; padding-bottom: 44px; }
.who-we-are__stat { padding: 10px 16px; top: -18px; }
.who-we-are__stat-num { font-size: 20px; }
}
/* ---- Our Focus (capability tile grid) ---- */
.focus-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.focus-tile {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
isolation: isolate;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.focus-tile::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(4, 7, 46, 0) 45%, rgba(4, 7, 46, 0.82) 100%);
}
.focus-tile:hover {
transform: translateY(-6px);
box-shadow: 0 24px 44px -16px rgba(4, 7, 46, 0.35);
}
.focus-tile__label {
position: absolute;
left: 20px;
bottom: 16px;
z-index: 1;
color: #fff;
font-family: var(--heading-font);
font-weight: 700;
font-size: 16px;
margin: 0;
}
@media (max-width: 991px) {
.focus-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.focus-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ---- Our Platforms (honeycomb showcase) ---- */
.platform-hex-wrap {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.platform-hex-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.platform-hex-col--offset { margin-top: 70px; }
.platform-hex {
position: relative;
width: 140px;
height: 160px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
justify-content: center;
isolation: isolate;
transition: transform 0.3s ease;
}
.platform-hex:hover { transform: scale(1.05); }
.platform-hex::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(4, 7, 46, 0.05) 0%, rgba(4, 7, 46, 0.75) 100%);
}
.platform-hex__label {
position: relative;
z-index: 1;
color: #fff;
font-family: var(--heading-font);
font-weight: 700;
font-size: 13px;
text-align: center;
padding: 0 10px 30px;
}
@media (max-width: 767px) {
.platform-hex-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.platform-hex-col, .platform-hex-col--offset { display: contents; margin-top: 0; }
.platform-hex {
width: 100%;
height: 140px;
clip-path: none;
border-radius: 14px;
}
}
@media (max-width: 480px) {
.platform-hex-wrap { grid-template-columns: 1fr; }
}
/* ---- Why Work With Us (4-up icon cards) ---- */
.ww-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
margin-bottom: 140px;
}
.ww-card {
background: var(--white-color, #fff);
border: 1px solid rgba(4, 7, 46, 0.06);
border-radius: 16px;
padding: 36px 26px;
text-align: center;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.06), 0 1px 3px 1px rgba(60, 64, 67, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ww-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -12px rgba(23, 61, 122, 0.2);
}
.ww-card__icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #D1E0FFFF, rgba(3, 69, 178, 0.1));
color: var(--main-color-two);
font-size: 26px;
}
.ww-card__title {
font-family: var(--heading-font);
font-weight: 700;
font-size: 18px;
color: var(--heading-color);
margin: 0 0 10px;
}
.ww-card__desc {
font-family: var(--body-font);
font-size: 14px;
line-height: 1.6;
color: var(--paragraph-color, #6b7c85);
margin: 0;
}
@media (max-width: 991px) {
.ww-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.ww-grid { grid-template-columns: 1fr; gap: 16px; }
.ww-card { padding: 28px 22px; }
}
/* ---- Shared numbered-card grid (.believe-grid / .believe-item) ----
A reusable component: plain white cards with a ghost index number, an
icon chip, a hover-lift, and a top accent bar that reveals on hover
(same recipe as .industry-card / .cj-card). Used by Home's "Our
Approach" section (Strategy / Engineering / AI). Our-Story's own
"We Believe In" section does NOT use this — it has its own
.believe-orbit-section / .believe-card component further up this
file, built for arranging cards around a globe instead of a plain
grid. Don't confuse the two: .believe-item/.believe-grid here is the
flat-grid version; .believe-card is the orbit version. */
.believe-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 48px;
}
.believe-item {
position: relative;
background: #fff;
border: 1px solid rgba(4, 7, 46, 0.07);
border-radius: 18px;
padding: 34px 30px 30px;
overflow: hidden;
z-index: 2 !important;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.believe-item::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(135deg, var(--main-color-one), var(--main-color-two));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s ease;
}
.believe-item:hover {
z-index: 999;
transform: translateY(-8px);
border-color: transparent;
box-shadow: 0 .275rem .75rem -.0625rem rgb(11 15 25 / .09),0 .125rem .4rem -.0625rem rgb(11 15 25 / .03)!important;
}
.believe-item:hover::before {
transform: scaleX(1);
}
.believe-item__num {
position: absolute;
top: 10px;
right: 20px;
font-family: var(--heading-font);
font-size: 46px;
font-weight: 700;
line-height: 1;
color: var(--heading-color);
opacity: 0.05;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.believe-item:hover .believe-item__num {
opacity: 0.09;
transform: scale(1.06);
}
.believe-item__icon {
position: relative;
width: 72px;
height: 72px;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(215deg, #feedf0 0%, #eef4ff 100%);
color: var(--main-color-two);
font-size: 26px;
transition: transform 0.5s ease, color 0.35s ease;
}
.believe-item__icon::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1.5px dashed rgba(23, 61, 122, 0.3);
animation: indRingSpin 14s linear infinite;
}
.believe-item:hover .believe-item__icon {
transform: scale(1.08) rotate(-6deg);
color: var(--main-color-one);
}
.believe-item:hover .believe-item__icon::after {
border-color: var(--main-color-one);
}
.believe-item__title {
position: relative;
z-index: 1;
font-family: var(--heading-font);
font-weight: 700;
font-size: 20px;
color: var(--heading-color);
margin: 0 0 16px;
}
.believe-item__desc {
position: relative;
z-index: 1;
margin: 0;
font-family: var(--body-font);
font-size: 14.5px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.7;
color: var(--paragraph-color, #6b7c85);
transition: color 0.35s ease;
}
.believe-item:hover .believe-item__desc {
color: var(--paragraph-color);
}
@media (max-width: 991px) {
.believe-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 576px) {
.believe-grid { grid-template-columns: 1fr; gap: 18px; }
.believe-item { padding: 28px 24px 26px; }
.believe-item__icon { width: 62px; height: 62px; font-size: 22px; margin-bottom: 18px; }
.believe-item__num { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.believe-item,
.believe-item__icon,
.believe-item__icon::after,
.believe-item__num,
.believe-item__desc,
.believe-item::before {
transition: none !important;
animation: none !important;
}
}
/* ---- CTA banner color variant (reuses .cw-section structure/behaviour) ---- */
.cw-section--teal .cw-section__tint {
background: linear-gradient(120deg,
rgba(16, 20, 39, 0.86) 0%,
rgba(28, 35, 62, 0.8) 55%,
rgba(150, 3, 10, 0.55) 130%);
}
/* ---- Homepage CTA → Footer gap fix ----
The shared ".cw-section + footer.footer-area.cf-footer" margin rule
above only fires when the footer element is the CTA's *immediate*
sibling with that exact class combo. On the homepage that match wasn't
landing (footer markup/nesting can vary page to page), leaving a large
blank strip between the teal CTA and the footer's top seam/partner
card instead of the intended flush hand-off. Scoped to #ct-home-cta
only, so it never touches .cw-section on any other page, and only
resets margin — the partner card keeps its own -110px overlap pull
intact, so this doesn't double up on top of that. */
#ct-home-cta + * {
margin-top: 0 !important;
}
/* ============================================================================
INDUSTRIES CIRCUIT — "We Power Multiple Industries" (v3)
----------------------------------------------------------------------------
Replaces the earlier v2 "Orbit" component (curved gradient links). This
version reads as a schematic / node-graph: a central Celata Tech chip
with pin connectors, right-angle (elbow) traces in flat per-wire colours
running out to each industry card, a small via dot at each end, and a
coloured dash continuously animating along the grey trace to read as a
signal flowing through the circuit — no bezier curves anywhere.
>= 992px → two columns of cards flank the chip (5 left / 5 right),
each linked by its own elbow trace
< 992px → the chip sits at the top; a single vertical bus runs down the
page and every card branches off it with a short coloured
stub, alternating left/right — same trace language, rotated
Structure (see layouts/Industries-Orbit.blade.php):
.ic-section section wrapper (dot-grid bg + glows)
.ic-stage layout root — JS toggles orbit vs bus mode
.ic-links (svg) elbow/bus connector traces, pins, via dots
.ic-chip Celata Tech hub
.ic-nodes 10 industry cards (/)
Requires the accompanying JS (industries-circuit.js) which computes card
positions and (re)draws .ic-links on load/resize — the DOM below is
real Blade-rendered content so it still exists without JS, it just needs
JS to be positioned into the circuit and to gain the "is-in" reveal class.
Wire colours are defined once as CSS variables (shared with dark mode)
so both themes stay in sync from one source; only surfaces/borders/glows
are re-themed in the dark-mode block.
============================================================================ */
/* ============================================================================
SECTION DIVIDER — brand hex ornament on a fading gradient line
----------------------------------------------------------------------------
Small reusable seam between two sections (first used between "Who We
Are" and "We Power Multiple Industries" on Our Story). Sits centered in
the whitespace the two sections' own padding already creates — no extra
scroll length added, just a quieter transition than a hard section edge.
Markup:
...
============================================================================ */
.ct-divider {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
max-width: 560px;
margin: -46px auto 0;
padding: 0 24px;
}
.ct-divider__line {
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(4, 7, 46, 0.16));
}
.ct-divider__line:last-child {
background: linear-gradient(90deg, rgba(4, 7, 46, 0.16), transparent);
}
.ct-divider__mark {
position: relative;
flex: 0 0 auto;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: var(--white-color);
border: 1px solid var(--secondary-color);
box-shadow: 0 10px 26px -12px rgba(4, 7, 46, 0.2);
animation: ctDividerFloat 4.5s ease-in-out infinite;
}
.ct-divider__mark::before {
content: '';
position: absolute;
inset: -14px;
z-index: -1;
border-radius: 50%;
background: radial-gradient(circle, rgba(215, 38, 61, 0.16), transparent 70%);
filter: blur(6px);
animation: ctDividerGlow 4.5s ease-in-out infinite;
}
.ct-divider__mark svg {
width: 20px;
height: 20px;
}
@keyframes ctDividerFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes ctDividerGlow {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
@media (max-width: 575px) {
.ct-divider { margin-top: -30px; gap: 12px; }
.ct-divider__mark { width: 38px; height: 38px; border-radius: 11px; }
.ct-divider__mark svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.ct-divider__mark,
.ct-divider__mark::before {
animation: none !important;
}
}
.ic-section {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 100px 0 110px;
}
@media (max-width: 991px) {
.ic-section { padding: 74px 0 84px; }
}
@media (max-width: 575px) {
.ic-section { padding: 56px 0 64px; }
}
.ic-section__bg {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background-size: 34px 34px;
background-position: 0 0;;
}
@keyframes icGridDrift {
0% { background-position: 0 0; }
100% { background-position: 34px 34px; }
}
.ic-section__glow {
position: absolute;
z-index: -1;
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
opacity: 0.5;
animation: icGlowPulse 7s ease-in-out infinite;
}
.ic-section__glow--one {
width: 420px;
height: 420px;
top: -160px;
right: -120px;
background: radial-gradient(circle, rgba(215, 38, 61, 0.22), transparent 70%);
}
.ic-section__glow--two {
width: 380px;
height: 380px;
bottom: -150px;
left: -110px;
background: radial-gradient(circle, rgba(3, 69, 178, 0.2), transparent 70%);
animation-delay: 1.5s;
}
@keyframes icGlowPulse {
0%, 100% { transform: scale(1); opacity: 0.4; }
50% { transform: scale(1.14); opacity: 0.7; }
}
/* ---------- stage ---------- */
.ic-stage {
position: relative;
width: 100%;
height: 760px;
/* Grew alongside the larger cards (was clamp(620px, 58vw, 700px)) so the
taller row pitch (see industries-circuit.js nodeYs) always has room
without the top/bottom cards clipping into neighbouring sections. */
height: clamp(700px, 62vw, 800px);
margin-top: 34px;
}
.ic-links {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.ic-link {
fill: none;
stroke: var(--secondary-color);
stroke-width: 1.6;
stroke-linejoin: round;
opacity: 0.85;
}
.ic-link__flow {
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
animation-name: icFlow;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes icFlow {
to { stroke-dashoffset: -1000; }
}
.ic-pin,
.ic-via {
fill: var(--white-color);
stroke: var(--secondary-color);
stroke-width: 1;
}
/* ---------- chip ---------- */
.ic-chip {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 230px;
min-height: 210px;
border-radius: 20px;
background: var(--white-color);
border: 1px solid var(--secondary-color);
box-shadow: 0 20px 50px -16px rgba(4, 7, 46, 0.18), 0 0 0 8px rgba(215, 38, 61, 0.05);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
padding: 20px 16px;
}
.ic-chip__mark {
width: 38px;
height: 38px;
}
.ic-chip__label {
font-family: var(--heading-font);
font-weight: 700;
font-size: 17px;
color: var(--heading-color);
line-height: 1.2;
}
.ic-chip__tag {
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--paragraph-color);
}
/* ---------- industry cards ---------- */
.ic-nodes {
list-style: none;
margin: 0;
padding: 0;
}
.ic-node {
position: absolute;
left: 0;
top: 0;
/* Bigger footprint (was 172px, then 226px, then 240px) — widened again
so the card's own width eats into the gap toward the logo instead of
leaving a long bare connector line; JS shortens the connector to
match (see the colX/outerX comment in industries-circuit.js). */
width: 280px;
z-index: 2;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
border-radius: 16px;
background: var(--white-color);
border: 1px solid var(--secondary-color);
box-shadow: 0 14px 32px -14px rgba(4, 7, 46, 0.16);
opacity: 0;
overflow: hidden;
transition: opacity 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ic-node.is-in { opacity: 1; }
.ic-node--left { transform: translate(-100%, -50%); flex-direction: row-reverse; text-align: right; }
.ic-node--right { transform: translate(0, -50%); }
.ic-node:hover {
box-shadow: 0 22px 46px -16px rgba(4, 7, 46, 0.22);
border-color: var(--main-color-two);
transform: translate(0, calc(-50% - 3px));
}
.ic-node--left:hover { transform: translate(-100%, calc(-50% - 3px)); }
.ic-node__icon {
flex: 0 0 auto;
width: 75px;
height: 75px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
//background: var(--secondary-color);
//color: var(--main-color-two);
}
.ic-nodes li.ic-node:nth-child(odd) .ic-node__icon {
//background: rgba(215, 38, 61, 0.08);
//color: var(--main-color-one);
}
/* Real icon images (see the $industries 'image' key in
Industries-Orbit.blade.php) — sized to sit comfortably inside the
52px badge above. */
.ic-node__icon img {
width: 96px;
height: 96px;
object-fit: contain;
display: block;
}
.ic-node__text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ic-node__title {
font-family: var(--heading-font);
font-size: 16px;
font-weight: 600;
color: var(--heading-color);
margin: 0;
line-height: 1.3;
}
.ic-node__desc {
font-family: var(--body-font);
font-size: 12.5px;
color: var(--paragraph-color);
margin: 0;
line-height: 1.45;
}
/* ---------- bus mode (< 992px) ---------- */
.ic-stage--bus .ic-chip {
position: relative;
left: auto;
top: auto;
transform: none;
margin: 0 auto;
}
.ic-node--bus {
position: absolute;
left: 50%;
top: 0;
/* was 180px, then 220px — matched to the wider .ic-node above */
width: 230px;
transform: translateY(-50%);
}
/* Offsets (76px) must match `stubOut` in industries-circuit.js */
.ic-node--bus.ic-node--left { transform: translate(calc(-100% - 76px), -50%); flex-direction: row-reverse; text-align: right; }
.ic-node--bus.ic-node--right { transform: translate(76px, -50%); }
/* ---------- stack mode (< 992px) ---------- */
/* Same centered chip treatment as bus mode. */
.ic-stage--stack .ic-chip {
position: relative;
left: auto;
top: auto;
transform: none;
margin: 0 auto;
}
/* One centered column, no left/right alternation — every card sits
directly under the chip and under the one before it, so nothing can
clip against the viewport edge the way the alternating bus offset
could on narrow phones. Used across the whole sub-desktop range (see
STACK_BREAKPOINT in industries-circuit.js). Width is 100% of
.ic-stage (its containing block), which already sits inside
.container.ct-container with no extra padding — so the card's own
left/right edges land exactly on the same gutter as the section
title, header, and everything else on the page, instead of floating
in from the edge by an arbitrary vw-based amount. */
.ic-node--stack {
position: absolute;
left: 50%;
top: 0;
width: 100%;
transform: translate(-50%, -50%);
flex-direction: row;
text-align: left;
}
.ic-node--stack:hover {
transform: translate(-50%, calc(-50% - 3px));
}
/* ---------- grid mode (576px – 991px, tablet) ---------- */
/* Two cards per row (5 rows for the 10 industries) instead of the
single stacked column above. Cards are a plain in-flow CSS grid
(no absolute positioning), but the connector trace is still drawn
— an elbow from the chip into each column, then a straight spine
with via dots linking every card down the column (see buildGrid()
in the JS, which measures actual rendered card positions since
they're in normal flow here, not JS-placed). */
.ic-stage--grid .ic-chip {
position: relative;
left: auto;
top: auto;
transform: none;
margin: 0 auto 36px;
z-index: 3;
}
.ic-stage--grid .ic-nodes {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 18px;
}
.ic-node--grid {
position: static;
width: 100%;
transform: none;
}
.ic-node--grid:hover {
transform: translateY(-3px);
}
@media (max-width: 991px) {
.ic-stage { height: auto; margin-top: 10px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
/* Scaled up from the original 148px tier to stay proportionate with
the new default card size instead of feeling like a step down. */
.ic-node { width: 232px; padding: 14px 16px; gap: 12px; }
.ic-node__icon { width: 44px; height: 44px; border-radius: 12px; }
.ic-node__icon img { width: 24px; height: 24px; }
.ic-node__title { font-size: 14.5px; }
.ic-node__desc { font-size: 12px; }
.ic-chip { width: 196px; min-height: 186px; }
.ic-chip__mark { width: 34px; height: 34px; }
}
@media (max-width: 767px) {
.ic-node--bus { width: min(260px, 62vw); }
/* Grid-mode cards are now roughly half the container width, so
shrink the icon/text tier the same way the old bus cards did at
this width — keeps titles from wrapping awkwardly in the
narrower column. */
.ic-node--grid { padding: 14px 16px; gap: 12px; }
.ic-node--grid .ic-node__icon { width: 46px; height: 46px; border-radius: 12px; }
.ic-node--grid .ic-node__icon img { width: 28px; height: 28px; }
.ic-node--grid .ic-node__title { font-size: 14px; }
.ic-node--grid .ic-node__desc { font-size: 11.5px; }
}
@media (max-width: 600px) {
/* Very narrow end of the grid range — trim gutters and drop to a
single-column icon-over-text feel isn't needed; just tighten
spacing so two ~260px cards keep breathing room from each other
and the container edge. */
.ic-stage--grid .ic-nodes { gap: 16px 12px; }
.ic-node--grid { padding: 12px 14px; gap: 10px; }
.ic-node--grid .ic-node__icon { width: 40px; height: 40px; }
.ic-node--grid .ic-node__icon img { width: 24px; height: 24px; }
.ic-node--grid .ic-node__title { font-size: 13px; }
.ic-node--grid .ic-node__desc { font-size: 11px; }
}
@media (max-width: 575px) {
.ic-node--bus { width: min(230px, 58vw); padding: 14px 16px; gap: 12px; }
.ic-node--bus .ic-node__icon { width: 42px; height: 42px; border-radius: 11px; }
.ic-node--bus .ic-node__icon img { width: 22px; height: 22px; }
.ic-node--bus .ic-node__title { font-size: 14px; }
.ic-node--bus.ic-node--left { transform: translate(calc(-100% - 44px), -50%); }
.ic-node--bus.ic-node--right { transform: translate(44px, -50%); }
}
@media (max-width: 575px) {
.ic-node--stack { padding: 16px 18px; gap: 12px; }
.ic-node--stack .ic-node__icon { width: 56px; height: 56px; border-radius: 12px; }
.ic-node--stack .ic-node__icon img { width: 40px; height: 40px; }
.ic-node--stack .ic-node__title { font-size: 14.5px; }
.ic-node--stack .ic-node__desc { font-size: 12px; }
}
@media (max-width: 380px) {
.ic-node--stack { padding: 14px 16px; gap: 10px; }
.ic-node--stack .ic-node__icon { width: 48px; height: 48px; }
.ic-node--stack .ic-node__icon img { width: 34px; height: 34px; }
.ic-node--stack .ic-node__title { font-size: 13.5px; }
.ic-node--stack .ic-node__desc { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
.ic-section__bg,
.ic-section__glow,
.ic-link__flow {
animation: none !important;
}
.ic-link__flow { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.9; }
.ic-node { transition: none; opacity: 1; }
}
/* ========================================================================
CAREERS — JOB APPLICATION MODAL
Reuses the site's existing .cb-modal / .form-control / .gis-btn classes
for the shell, inputs and buttons (already themed for light + dark).
Only the dropzone and the form's field grid are new here.
======================================================================== */
.jv-apply-label {
display: block;
font-family: var(--heading-font, 'Barlow Semi Condensed', sans-serif);
font-size: 14px;
font-weight: 700;
color: var(--heading-color, #04072e);
margin: 0 0 10px;
}
.jv-apply-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 4px;
}
.jv-apply-grid .form-group { margin-bottom: 18px; }
.jv-apply-drop {
position: relative;
border: 2px dashed rgba(4, 7, 46, 0.15);
border-radius: 14px;
padding: 26px 20px;
text-align: center;
cursor: pointer;
background: rgba(41, 103, 203, 0.02);
transition: border-color 0.25s ease, background 0.25s ease, transform 0.15s ease;
margin-bottom: 8px;
}
.jv-apply-drop--secondary { padding: 18px 20px; }
.jv-apply-drop:hover,
.jv-apply-drop:focus-visible {
border-color: var(--main-color-two, #2967cb);
background: rgba(41, 103, 203, 0.05);
outline: none;
}
.jv-apply-drop.is-dragover {
border-color: var(--main-color-two, #2967cb);
background: rgba(41, 103, 203, 0.08);
transform: scale(1.01);
}
.jv-apply-drop.has-file {
border-style: solid;
border-color: var(--green-color, #0a7b0e);
background: rgba(10, 123, 14, 0.05);
cursor: default;
}
.jv-apply-drop--multi.has-file {
padding: 14px;
text-align: left;
}
/* Read-only "Job Vacancy" field, pre-filled from the vacancy being viewed */
.jv-apply-readonly[readonly] {
background: rgba(4, 7, 46, 0.035);
color: var(--paragraph-color, #727777);
cursor: default;
}
.jv-apply-readonly[readonly]:focus { box-shadow: none !important; }
/* Combined CV + cover letter file list (up to 2 chips) */
.jv-apply-files {
display: flex;
flex-direction: column;
gap: 10px;
}
.jv-apply-files:empty { display: none; }
.jv-apply-drop__icon {
color: var(--main-color-two, #2967cb);
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.jv-apply-drop__text {
font-family: var(--body-font, 'Open Sans', sans-serif);
font-size: 13.5px;
color: var(--heading-color, #04072e);
margin: 0 0 4px;
}
.jv-apply-drop__text strong { color: var(--heading-color, #04072e); }
.jv-apply-drop__hint {
font-family: var(--body-font, 'Open Sans', sans-serif);
font-size: 11.5px;
color: var(--paragraph-color, #727777);
margin: 0;
}
.jv-apply-file {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-start;
flex-wrap: nowrap; /* was: wrap */
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(4, 7, 46, 0.08);
border-radius: 10px;
padding: 9px 12px;
text-align: left;
}
.jv-apply-file__icon { color: var(--green-color, #0a7b0e); display: flex; flex-shrink: 0; }
.jv-apply-file__tag {
font-family: var(--heading-font, 'Barlow Semi Condensed', sans-serif);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--main-color-two, #2967cb);
background: rgba(41, 103, 203, 0.1);
padding: 3px 9px;
border-radius: 999px;
flex-shrink: 0;
}
.jv-apply-file__name {
font-family: var(--body-font, 'Open Sans', sans-serif);
font-size: 13.5px;
font-weight: 600;
color: var(--heading-color, #04072e);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
min-width: 0;
}
.jv-apply-file__size {
font-family: var(--body-font, 'Open Sans', sans-serif);
font-size: 11.5px;
color: var(--paragraph-color, #727777);
flex-shrink: 0;
margin-left: auto;
}
.jv-apply-file__remove {
border: none;
background: rgba(175, 11, 7, 0.08);
color: var(--main-color-one, #af0b07);
width: 24px;
height: 24px;
border-radius: 50%;
line-height: 1;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
flex-shrink: 0;
}
.jv-apply-file__remove:hover { background: rgba(175, 11, 7, 0.16); }
.jv-apply-files__add {
align-self: flex-start;
border: 1px dashed rgba(4, 7, 46, 0.2);
background: transparent;
color: var(--main-color-two, #2967cb);
font-family: var(--body-font, 'Open Sans', sans-serif);
font-size: 12.5px;
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.jv-apply-files__add:hover {
background: rgba(41, 103, 203, 0.06);
border-color: var(--main-color-two, #2967cb);
}
.jv-apply-alert {
margin-top: 16px;
padding: 12px 16px;
border-radius: 10px;
font-family: var(--body-font, 'Open Sans', sans-serif);
font-size: 13.5px;
line-height: 1.5;
}
@media (max-width: 576px) {
.jv-apply-grid { grid-template-columns: 1fr; gap: 0; }
.jv-apply-drop { padding: 20px 14px; }
}
/* ---------- dark mode ---------- */
[data-theme=dark] .jv-apply-label { color: var(--dm-text-heading); }
[data-theme=dark] .jv-apply-drop {
border-color: var(--dm-border);
background: var(--dm-surface-2);
}
[data-theme=dark] .jv-apply-drop:hover,
[data-theme=dark] .jv-apply-drop:focus-visible {
border-color: var(--main-color-two);
background: var(--dm-surface-3);
}
[data-theme=dark] .jv-apply-drop.is-dragover {
border-color: var(--main-color-two);
background: var(--dm-surface-3);
}
[data-theme=dark] .jv-apply-drop.has-file {
border-color: var(--green-color);
background: rgba(0, 121, 55, 0.12);
}
[data-theme=dark] .jv-apply-drop__text,
[data-theme=dark] .jv-apply-file__name { color: var(--dm-text-heading); }
[data-theme=dark] .jv-apply-drop__hint,
[data-theme=dark] .jv-apply-file__size { color: var(--dm-text-muted); }
[data-theme=dark] .jv-apply-file {
background: var(--dm-surface-3);
border-color: var(--dm-border);
}
[data-theme=dark] .jv-apply-file__tag {
background: rgba(91, 155, 255, 0.16);
color: var(--main-color-two);
}
[data-theme=dark] .jv-apply-file__remove {
background: rgba(255, 92, 114, 0.12);
color: var(--main-color-one);
}
[data-theme=dark] .jv-apply-file__remove:hover { background: rgba(255, 92, 114, 0.22); }
[data-theme=dark] .jv-apply-files__add {
border-color: var(--dm-border);
color: var(--main-color-two);
}
[data-theme=dark] .jv-apply-files__add:hover {
background: var(--dm-surface-3);
border-color: var(--main-color-two);
}
[data-theme=dark] .jv-apply-readonly[readonly] {
background: var(--dm-surface-2);
color: var(--dm-text-muted);
border-color: var(--dm-border) !important;
}
@media (prefers-reduced-motion: reduce) {
.jv-apply-drop { transition: none; }
.jv-apply-drop.is-dragover { transform: none; }
}