2630 lines
50 KiB
CSS
2630 lines
50 KiB
CSS
/*
|
||
Queue North Technologies - Global Styles
|
||
Color Palette:
|
||
Background: #07293A (deep navy)
|
||
Text: #C7BEA1 (beige)
|
||
Accent: #3BA3FF (button / link highlight)
|
||
*/
|
||
|
||
/* =========================
|
||
CSS Variables
|
||
========================= */
|
||
:root {
|
||
--background: #07293A;
|
||
--background-alt: #0B3246;
|
||
--background-panel: #0F3A51;
|
||
--background-panel-soft: #0D364B;
|
||
|
||
--text: #C7BEA1;
|
||
--text-muted: #9E9476;
|
||
|
||
--border-subtle: rgba(199, 190, 161, 0.25);
|
||
|
||
--accent: #3BA3FF;
|
||
--accent-hover: #1990ff;
|
||
}
|
||
|
||
/* =========================
|
||
Reset / Base
|
||
========================= */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html, body {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
color: var(--text);
|
||
background: radial-gradient(circle at top, #0E3A52 0%, #07293A 45%, #041720 100%);
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* Global element defaults */
|
||
img {
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
p, h1, h2, h3, h4, h5, h6, li, label {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* =========================
|
||
Layout Helpers
|
||
========================= */
|
||
.container {
|
||
max-width: 1120px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.section {
|
||
padding: 70px 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.alt-section {
|
||
background: linear-gradient(135deg, #07293A 0%, #0B3246 40%, #07293A 100%);
|
||
}
|
||
|
||
.section h2 {
|
||
font-size: 32px;
|
||
margin-bottom: 16px;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.section-intro {
|
||
max-width: 1250px;
|
||
margin-bottom: 30px;
|
||
font-size: 21px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* =========================
|
||
Header (compact + logo bleed)
|
||
========================= */
|
||
.site-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
background: rgba(4, 23, 32, 0.9);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid rgba(59, 163, 255, 0.15);
|
||
|
||
height: 84px;
|
||
padding: 0 20px;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end; /* nav stays right */
|
||
}
|
||
|
||
/* Logo does NOT take layout width (prevents nav wrapping) */
|
||
.logo {
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 125%;
|
||
transform: translateY(-50%);
|
||
z-index: 60;
|
||
}
|
||
|
||
.logo-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Desktop logo size + bleed */
|
||
.logo-link img {
|
||
height: 300px;
|
||
width: auto;
|
||
transform: translateY(14px); /* bleed down */
|
||
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
|
||
}
|
||
|
||
/* Make room below so bleed doesn't collide */
|
||
.app {
|
||
min-height: calc(100vh - 140px);
|
||
padding-top: 18px;
|
||
}
|
||
|
||
/* =========================
|
||
Nav (tab-like view switching)
|
||
- No layout shift underline
|
||
========================= */
|
||
.site-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
flex-wrap: nowrap; /* IMPORTANT: prevent wrap on desktop */
|
||
gap: 24px;
|
||
|
||
width: min(100%, 1240px);
|
||
margin-left: auto;
|
||
padding-left: 140px; /* reserves space so nav doesn't collide with logo */
|
||
}
|
||
|
||
.site-nav a {
|
||
font-size: 16px;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
|
||
position: relative;
|
||
padding: 6px 0;
|
||
transition: color 0.25s ease;
|
||
}
|
||
|
||
.site-nav a:hover {
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* underline (hidden by default) */
|
||
.site-nav a::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -2px;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: rgba(59, 163, 255, 0.65);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.25s ease;
|
||
}
|
||
|
||
/* Active link */
|
||
.site-nav a.active {
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.site-nav a.active::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.site-nav a:hover::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
/* =========================
|
||
Mobile
|
||
========================= */
|
||
@media (max-width: 900px) {
|
||
.site-header {
|
||
height: 76px;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.logo {
|
||
left: 16px;
|
||
}
|
||
|
||
.logo-link img {
|
||
height: 56px;
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
.app {
|
||
padding-top: 8px;
|
||
}
|
||
|
||
/* On mobile, allow wrap so links don't get microscopic */
|
||
.site-nav {
|
||
padding-left: 86px;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
gap: 12px 16px;
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
/* =========================
|
||
Hero
|
||
========================= */
|
||
.hero {
|
||
min-height: 70vh;
|
||
display: flex;
|
||
align-items: center;
|
||
background: radial-gradient(circle at top left, #0E3A52 0%, #07293A 40%, #020910 100%);
|
||
padding: 80px 0 90px;
|
||
}
|
||
|
||
.hero-inner {
|
||
max-width: 1360px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 38px;
|
||
margin-bottom: 16px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 18px;
|
||
max-width: 840px;
|
||
margin-bottom: 26px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Center the CTA under the copy (and no "View Services" now) */
|
||
.hero-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.hero-trust {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* keep them on one row when possible */
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
opacity: 0.92;
|
||
}
|
||
|
||
.hero-trust span {
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(199, 190, 161, 0.35);
|
||
padding: 6px 13px;
|
||
background: rgba(11, 50, 70, 0.7);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* =========================
|
||
Buttons
|
||
========================= */
|
||
.primary-btn {
|
||
background: var(--accent);
|
||
color: #031019;
|
||
border: none;
|
||
padding: 11px 24px;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.primary-btn:hover {
|
||
background: var(--accent-hover);
|
||
}
|
||
|
||
.secondary-link {
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* =========================
|
||
Highlights (pain points)
|
||
========================= */
|
||
.highlights {
|
||
padding: 60px 0;
|
||
background: linear-gradient(180deg, #07293A 0%, #0B3246 60%, #07293A 100%);
|
||
}
|
||
|
||
.highlights h2 {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.highlight-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.highlight-card {
|
||
background: var(--background-panel);
|
||
padding: 24px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 10px 30px rgba(3, 10, 17, 0.7);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.highlight-card h3 {
|
||
margin-bottom: 10px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.highlight-card p {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* =========================
|
||
Two-column layout
|
||
========================= */
|
||
.two-column {
|
||
display: grid;
|
||
grid-template-columns: 1.25fr 1fr;
|
||
gap: 40px;
|
||
}
|
||
|
||
/* =========================
|
||
Lists
|
||
========================= */
|
||
.bullet-list {
|
||
list-style: disc;
|
||
padding-left: 20px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.bullet-list li + li {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* =========================
|
||
Cards grid (Services / Industries / etc.)
|
||
========================= */
|
||
.card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--background-panel-soft);
|
||
padding: 22px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 8px 26px rgba(3, 10, 17, 0.7);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
/* =========================
|
||
Forms
|
||
========================= */
|
||
.contact-form {
|
||
background: var(--background-panel);
|
||
padding: 22px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 10px 30px rgba(3, 10, 17, 0.9);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.contact-form label {
|
||
display: block;
|
||
font-size: 13px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.contact-form input,
|
||
.contact-form textarea {
|
||
width: 100%;
|
||
margin-top: 4px;
|
||
padding: 9px 10px;
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(199, 190, 161, 0.35);
|
||
font-size: 14px;
|
||
background: #031521;
|
||
color: var(--text);
|
||
}
|
||
|
||
.contact-form input::placeholder,
|
||
.contact-form textarea::placeholder {
|
||
color: rgba(199, 190, 161, 0.6);
|
||
}
|
||
|
||
.contact-form input:focus,
|
||
.contact-form textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 1px rgba(59, 163, 255, 0.3);
|
||
}
|
||
|
||
.contact-form button {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.form-status {
|
||
margin-top: 8px;
|
||
font-size: 13px;
|
||
color: #5ee0b1;
|
||
}
|
||
|
||
|
||
/* =========================
|
||
Footer
|
||
========================= */
|
||
.site-footer {
|
||
background: #020910;
|
||
color: var(--text-muted);
|
||
padding: 28px 0 18px;
|
||
font-size: 13px;
|
||
border-top: 1px solid rgba(59, 163, 255, 0.15);
|
||
}
|
||
|
||
.footer-main {
|
||
display: grid;
|
||
grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
|
||
gap: 28px;
|
||
align-items: start;
|
||
}
|
||
|
||
.footer-brand,
|
||
.footer-column {
|
||
min-width: 0;
|
||
}
|
||
|
||
.footer-heading {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.footer-brand p,
|
||
.footer-phone a,
|
||
.footer-link-list a,
|
||
.footer-linkedin {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.footer-brand p {
|
||
max-width: 280px;
|
||
}
|
||
|
||
.footer-phone,
|
||
.footer-social {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.footer-phone a,
|
||
.footer-linkedin {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer-phone a:hover,
|
||
.footer-link-list a:hover,
|
||
.footer-linkedin:hover {
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer-quick-links .footer-link-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px 18px;
|
||
}
|
||
|
||
.footer-link-list a {
|
||
display: inline-block;
|
||
}
|
||
|
||
.linkedin-badge {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 5px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #0a66c2;
|
||
color: #ffffff;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
flex: 0 0 22px;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
.footer-legal {
|
||
display: grid;
|
||
gap: 8px;
|
||
margin-top: 22px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid rgba(199, 190, 161, 0.12);
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
|
||
/* =========================
|
||
Pages (tabbed views\)
|
||
========================= */
|
||
.page {
|
||
display: none;
|
||
}
|
||
|
||
.page.active {
|
||
display: block;
|
||
}
|
||
|
||
/* =========================
|
||
Split hero (content + image area)
|
||
========================= */
|
||
.hero-split-inner {
|
||
display: grid;
|
||
grid-template-columns: 0.7fr 1.3fr;
|
||
gap: 28px;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-media {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
/* NEW: unboxed hero image */
|
||
.hero-photo {
|
||
width: 100%;
|
||
max-width: 980px;
|
||
height: auto;
|
||
border-radius: 14px; /* keep the soft rounding */
|
||
display: block;
|
||
filter: drop-shadow(0 16px 30px rgba(3, 10, 17, 0.55));
|
||
}
|
||
|
||
|
||
/* =========================
|
||
Hero image overlay: rotating phrases + lockup
|
||
========================= */
|
||
.hero-media-overlay {
|
||
position: absolute;
|
||
left: 18px;
|
||
right: 18px;
|
||
bottom: 0px;
|
||
pointer-events: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.hero-rotator-text,
|
||
.hero-lockup-subtitle {
|
||
color: #ffffff;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
letter-spacing: 0.06em;
|
||
text-shadow: 0 2px 10px rgba(0,0,0,0.55);
|
||
}
|
||
|
||
.hero-brand {
|
||
color: #1F8FB3;
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.hero-rotator-text {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Visibility toggles driven by main.js */
|
||
.is-hidden {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(6px);
|
||
}
|
||
|
||
.is-visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.hero-rotator-text {
|
||
transition:
|
||
opacity var(--hero-fade-ms, 900ms) ease,
|
||
transform var(--hero-fade-ms, 900ms) ease,
|
||
visibility 0ms linear var(--hero-fade-ms, 900ms);
|
||
}
|
||
|
||
.hero-lockup {
|
||
transition:
|
||
opacity var(--hero-lockup-fade-ms, 1100ms) ease,
|
||
transform var(--hero-lockup-fade-ms, 1100ms) ease,
|
||
visibility 0ms linear var(--hero-lockup-fade-ms, 1100ms);
|
||
}
|
||
/* Shared media card (images / placeholders) */
|
||
.media-card {
|
||
width: 100%;
|
||
max-width: 820px;
|
||
border-radius: 14px;
|
||
border: 1px solid var(--border-subtle);
|
||
background: rgba(15, 58, 81, 0.65);
|
||
box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
|
||
overflow: hidden;
|
||
}
|
||
.about-meaning-image {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
border-radius: 14px;
|
||
object-fit: cover;
|
||
}
|
||
.media-placeholder {
|
||
padding: 26px;
|
||
min-height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
color: var(--text-muted);
|
||
background:
|
||
radial-gradient(circle at 20% 20%, rgba(59,163,255,0.18), transparent 45%),
|
||
radial-gradient(circle at 80% 30%, rgba(199,190,161,0.10), transparent 40%),
|
||
rgba(3, 21, 33, 0.35);
|
||
}
|
||
|
||
.media-placeholder span {
|
||
color: var(--text);
|
||
font-weight: 400;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.media-placeholder small {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* =========================
|
||
Page-level hero
|
||
========================= */
|
||
.page-hero {
|
||
padding: 70px 0 30px;
|
||
background: transparent;
|
||
}
|
||
|
||
.page-hero-inner {
|
||
display: grid;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
gap: 28px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* =========================
|
||
ABOUT: full-bleed image canvas
|
||
========================= */
|
||
.about-canvas{
|
||
position: relative;
|
||
min-height: calc(100vh - 84px); /* header height */
|
||
padding: 130px 60px 80px; /* space so we don’t fight the logo bleed */
|
||
background:
|
||
linear-gradient(rgba(4,23,32,0.20), rgba(4,23,32,0.20)),
|
||
url("assets/about-image.png");
|
||
background-size: 67%;
|
||
background-position: center 5%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.about-canvas::before{
|
||
content:"";
|
||
position:absolute;
|
||
inset:0;
|
||
pointer-events:none;
|
||
|
||
/* 1) vignette fade on edges + 2) warm paper tint */
|
||
background:
|
||
radial-gradient(
|
||
ellipse at center,
|
||
rgba(0,0,0,0) 55%,
|
||
rgba(0,0,0,0.35) 78%,
|
||
rgba(0,0,0,0.65) 100%
|
||
),
|
||
linear-gradient(
|
||
rgba(210, 190, 140, 0.06),
|
||
rgba(210, 190, 140, 0.02)
|
||
);
|
||
}
|
||
|
||
#page-services{
|
||
position: relative;
|
||
min-height: calc(100vh - 84px); /* header height */
|
||
padding: 130px 60 80px;
|
||
background:
|
||
linear-gradient(rgba(4,23,32,0.25), rgba(4,23,32,0.25)),
|
||
url("assets/services-image.png");
|
||
background-size: 45%;
|
||
background-position: center 45%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
#page-services::before{
|
||
content:"";
|
||
position:absolute;
|
||
inset:0;
|
||
pointer-events:none;
|
||
background:
|
||
radial-gradient(
|
||
ellipse at center,
|
||
rgba(0,0,0,0) 55%,
|
||
rgba(0,0,0,0.85) 78%,
|
||
rgba(0,0,0,0.45) 100%
|
||
);
|
||
}
|
||
|
||
/* Keep Services content above the background + vignette */
|
||
#page-services > section{
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* Center the Services header at the top */
|
||
#page-services .page-hero{
|
||
padding: 0 0 26px;
|
||
background: transparent;
|
||
}
|
||
|
||
#page-services .page-hero-inner{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Pull the cards up so they sit over the image more tightly */
|
||
#page-services .section{
|
||
padding-top: 0;
|
||
}
|
||
|
||
@media (max-width: 900px){
|
||
#page-services{
|
||
padding: 110px 0 50px;
|
||
min-height: auto;
|
||
}
|
||
}
|
||
|
||
.about-panel{
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.about-canvas{
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Panels */
|
||
.about-panel{
|
||
max-width: 520px;
|
||
padding: 22px 22px;
|
||
border-radius: 14px;
|
||
background: rgba(11, 50, 70, 0.72); /* matches your alt-section blues */
|
||
border: 1px solid rgba(199, 190, 161, 0.25);
|
||
box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.about-panel h2{
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.about-panel h3{
|
||
font-size: 24px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.about-panel p{
|
||
color: var(--text-muted);
|
||
font-size: 18px;
|
||
font-weight: 300;
|
||
color: #C7BEA1;
|
||
}
|
||
|
||
.about-panel ul{
|
||
color: var(--text-muted);
|
||
font-size: 18px;
|
||
font-weight: 300;
|
||
color: #C7BEA1;
|
||
}
|
||
|
||
/* Placement: keep away from the compass area */
|
||
.about-panel-left{
|
||
position: absolute;
|
||
top: 140px;
|
||
left: 80px;
|
||
}
|
||
|
||
.about-panel-right{
|
||
position: absolute;
|
||
top: 140px;
|
||
right: 80px;
|
||
}
|
||
|
||
.services-full-image {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.container h2{
|
||
font-size: 38px;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
/* Mobile: stack panels and stop absolute positioning */
|
||
@media (max-width: 900px){
|
||
.about-canvas{
|
||
padding: 110px 18px 40px;
|
||
min-height: auto;
|
||
}
|
||
|
||
.about-panel-left,
|
||
.about-panel-right{
|
||
position: static;
|
||
max-width: 100%;
|
||
margin-bottom: 18px;
|
||
}
|
||
}
|
||
|
||
/* Make the 8x8 hero give more space to the logo */
|
||
#page-8x8 .page-hero-inner {
|
||
grid-template-columns: 1fr 1fr; /* 50/50 on the 8x8 tab */
|
||
}
|
||
|
||
.page-hero-media .media-card {
|
||
max-width: 820px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* ===== 8x8 joint logo lockup (no box) ===== */
|
||
.partner-lockup {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center; /* centers the logo block */
|
||
justify-content: center;
|
||
gap: 12px;
|
||
width: 100%;
|
||
}
|
||
|
||
.partner-lockup-img {
|
||
width: min(100%, 760px); /* make it bigger, but still safe */
|
||
height: auto;
|
||
display: block;
|
||
margin: 0 auto;
|
||
|
||
filter: drop-shadow(0 12px 22px rgba(0,0,0,0.4));
|
||
}
|
||
|
||
.partner-lockup-caption {
|
||
text-align: center;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.partner-lockup-img {
|
||
width: min(100%, 520px);
|
||
}
|
||
}
|
||
|
||
.partner-logo {
|
||
max-width: 240px;
|
||
height: auto;
|
||
display: block;
|
||
margin: 22px auto 0;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.small-muted {
|
||
color: var(--text-muted);
|
||
font-size: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* =========================
|
||
Responsive
|
||
========================= */
|
||
@media (max-width: 900px) {
|
||
.site-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* keep logo readable, reduce bleed */
|
||
.logo-link img {
|
||
height: 64px;
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
/* match the bleed to avoid overlap */
|
||
.app {
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.site-nav {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
gap: 10px 14px;
|
||
}
|
||
|
||
.hero {
|
||
padding: 60px 0 70px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 30px;
|
||
}
|
||
|
||
/* allow pills to wrap on smaller screens */
|
||
.hero-trust {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.two-column {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.hero-split-inner,
|
||
.page-hero-inner {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.hero-media,
|
||
.page-hero-media {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.hero-photo {
|
||
max-width: 100%;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.site-footer {
|
||
padding-top: 24px;
|
||
}
|
||
|
||
.footer-main {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.footer-brand p {
|
||
max-width: none;
|
||
}
|
||
|
||
.footer-quick-links .footer-link-list {
|
||
gap: 10px 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* =========================================
|
||
Services + Industries: force 2x2 layout
|
||
(Only affects these two tabs)
|
||
========================================= */
|
||
|
||
/* Desktop / large screens: always 2 columns */
|
||
#page-services .card-grid,
|
||
#page-industries .card-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
max-width: 980px; /* keeps the 2-column layout looking intentional */
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* Make cards slightly “longer” (taller) so the layout feels balanced */
|
||
#page-services .card,
|
||
#page-industries .card {
|
||
min-height: 150px; /* adjust to taste: try 160–200 */
|
||
}
|
||
|
||
/* Medium screens: still 2 columns until it truly needs to stack */
|
||
@media (max-width: 900px) {
|
||
#page-services .card-grid,
|
||
#page-industries .card-grid {
|
||
grid-template-columns: 1fr; /* single column on mobile */
|
||
max-width: 720px;
|
||
}
|
||
|
||
#page-services .card,
|
||
#page-industries .card {
|
||
min-height: 0; /* let content define height on mobile */
|
||
}
|
||
}
|
||
|
||
/* =========================
|
||
SERVICES: make cards feel like About panels
|
||
========================= */
|
||
|
||
/* Spread the 2x2 grid out more (less cramped) */
|
||
#page-services .card-grid {
|
||
max-width: 1120px; /* wider than the current 980px */
|
||
gap: 200px 200px; /* more breathing room */
|
||
padding: 10px 0 0; /* tiny separation from the header */
|
||
}
|
||
|
||
/* Glassy / semi-transparent cards (match About panel vibe) */
|
||
#page-services .card {
|
||
background: rgba(11, 50, 70, 0.72); /* same family as .about-panel */
|
||
border: 1px solid rgba(199, 190, 161, 0.25);
|
||
box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
/* Optional: slightly bigger headings for presence */
|
||
#page-services .card h3 {
|
||
font-size: 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* Optional: make body copy a touch more readable on photo background */
|
||
#page-services .card p {
|
||
color: rgba(199, 190, 161, 0.92);
|
||
}
|
||
|
||
/* Balance last service card when odd number of services */
|
||
#page-services .card-grid > .card:last-child {
|
||
grid-column: 1 / -1;
|
||
width: min(100%, calc((100% - 28px) / 2));
|
||
justify-self: center;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
#page-services .card-grid > .card:last-child {
|
||
grid-column: auto;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* =========================
|
||
INDUSTRIES: images beside cards (images NOT inside cards)
|
||
========================= */
|
||
|
||
#page-industries .industries-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 58px;
|
||
max-width: 1620px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Each item is a 2-column mini-layout: big image + card */
|
||
#page-industries .industry-item {
|
||
display: grid;
|
||
gap: 18px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* Big image, no container */
|
||
#page-industries .industry-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 80px;
|
||
min-width: 80px;
|
||
object-fit: cover;
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(199, 190, 161, 0.25);
|
||
box-shadow: 0 12px 30px rgba(3, 10, 17, 0.6);
|
||
background: transparent;
|
||
}
|
||
|
||
/* Card stays card (container for text only) */
|
||
#page-industries .industry-card {
|
||
min-height: 80px;
|
||
min-width: 80px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* =========================
|
||
INDUSTRIES: center text inside cards + larger font
|
||
========================= */
|
||
|
||
#page-industries .industry-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center; /* vertical center */
|
||
align-items: center; /* horizontal center */
|
||
text-align: center; /* center text itself */
|
||
padding: 28px; /* a little more breathing room */
|
||
}
|
||
|
||
/* Larger headline */
|
||
#page-industries .industry-card h3 {
|
||
font-size: 24px; /* was default ~20px */
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* Larger body copy */
|
||
#page-industries .industry-card p {
|
||
font-size: 18px;
|
||
max-width: 520px; /* keeps lines from stretching too wide */
|
||
color: rgba(199, 190, 161, 0.92);
|
||
}
|
||
|
||
/* Mobile: stack image above card */
|
||
@media (max-width: 900px) {
|
||
#page-industries .industries-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
#page-industries .industry-item {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
#page-industries .industry-image {
|
||
min-height: 220px;
|
||
}
|
||
}
|
||
/* =========================
|
||
INDUSTRIES: center page title + intro like Services
|
||
========================= */
|
||
|
||
#page-industries .page-hero {
|
||
padding: 30px 0 10px; /* was 70px 0 30px */
|
||
}
|
||
|
||
#page-industries .page-hero-inner{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
#page-industries .section {
|
||
padding-top: 20px; /* was 70px default */
|
||
}
|
||
|
||
#page-industries .section-intro{
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
text-align: center;
|
||
max-width: 650px; /* tweak if you want wider/narrower */
|
||
}
|
||
|
||
/* =========================
|
||
Contact Hero Background
|
||
========================= */
|
||
|
||
.contact-hero {
|
||
position: relative;
|
||
background:
|
||
linear-gradient(
|
||
rgba(7, 41, 58, 0.85),
|
||
rgba(7, 41, 58, 0.85)
|
||
),
|
||
url("assets/contact.png");
|
||
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
|
||
padding: 120px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Keeps content above overlay */
|
||
.contact-hero > * {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.contact-hero h1 {
|
||
font-size: 3rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.contact-hero p {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
font-size: 1.2rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* CONTACT hero background image */
|
||
#page-contact .page-hero{
|
||
/* keep your existing spacing from the global .page-hero */
|
||
background:
|
||
linear-gradient(rgba(7,41,58,0.55), rgba(7,41,58,0.55)),
|
||
url("assets/contact.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/* center the hero text block */
|
||
#page-contact .page-hero-inner{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
#page-contact .section-intro{
|
||
max-width: 900px;
|
||
}
|
||
/* Left column title */
|
||
#page-contact h3{
|
||
font-size: 1.8rem; /* increase heading size */
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
/* Bullet list text */
|
||
#page-contact .bullet-list li{
|
||
font-size: 1.15rem; /* larger body text */
|
||
line-height: 1.6;
|
||
margin-bottom: 8px;
|
||
}
|
||
#page-contact .contact-form label{
|
||
font-size: 1.05rem;
|
||
font-weight: 500;
|
||
}
|
||
#page-contact .contact-form label{
|
||
font-size: 1.05rem;
|
||
font-weight: 500;
|
||
}
|
||
#page-contact .contact-form button{
|
||
font-size: 1rem;
|
||
padding: 14px 28px;
|
||
}
|
||
/* =========================
|
||
SUPPORT page layout (scoped)
|
||
========================= */
|
||
|
||
#page-support .container{
|
||
max-width: 1320px;
|
||
}
|
||
|
||
#page-support .support-hero-inner{
|
||
display: grid;
|
||
grid-template-columns: 0.7fr 1.3fr;
|
||
gap: 200px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Left column: center the title + intro + form */
|
||
#page-support .support-hero-left{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: left;
|
||
}
|
||
|
||
/* Keep the intro readable and centered */
|
||
#page-support .support-hero-left .section-intro{
|
||
max-width: 560px;
|
||
}
|
||
|
||
/* Right column image: not in a “card”, just a clean image */
|
||
#page-support .support-hero-image{
|
||
width: 100%;
|
||
max-width: 1050px; /* was 720px */
|
||
height: auto;
|
||
display: block;
|
||
border-radius: 18px;
|
||
box-shadow: 0 30px 65px rgba(0,0,0,0.55);
|
||
}
|
||
|
||
/* Push the photo farther right without shifting the left column */
|
||
#page-support .support-hero-right{
|
||
justify-self: end;
|
||
}
|
||
|
||
#page-support .support-hero-image{
|
||
margin-left: auto;
|
||
}
|
||
|
||
|
||
#page-support .support-action-card{
|
||
width: 100%;
|
||
max-width: 420px;
|
||
padding: 28px 28px 34px;
|
||
background: var(--background-panel);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 10px;
|
||
box-shadow: 0 10px 30px rgba(3, 10, 17, 0.9);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
#page-support .support-action-btn{
|
||
min-width: 180px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
}
|
||
|
||
#page-support .support-member-text{
|
||
margin: 2px 0 -4px;
|
||
color: var(--text-muted);
|
||
font-size: 16px;
|
||
}
|
||
|
||
#page-support .support-phone-block{
|
||
margin-top: 6px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid rgba(199, 190, 161, 0.25);
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
color: var(--text-muted);
|
||
font-size: 16px;
|
||
}
|
||
|
||
#page-support .support-phone-block a{
|
||
color: var(--accent);
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
}
|
||
|
||
#page-support .support-phone-block a:hover{
|
||
color: var(--accent-hover);
|
||
}
|
||
|
||
/* Make the support form thinner + taller */
|
||
#page-support .support-form{
|
||
width: 100%;
|
||
max-width: 420px; /* thinner */
|
||
padding: 28px 28px 34px;
|
||
text-align: left;
|
||
}
|
||
|
||
#page-support .support-form .primary-btn{
|
||
display: block;
|
||
margin: 24px auto 0; /* centers only the button */
|
||
}
|
||
|
||
/* Larger form font like your Contact page improvements */
|
||
#page-support .support-form label{
|
||
font-size: 16px;
|
||
}
|
||
|
||
#page-support .support-form input,
|
||
#page-support .support-form textarea{
|
||
font-size: 16px;
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
/* Taller textarea to make the card feel taller */
|
||
#page-support .support-form textarea{
|
||
min-height: 190px;
|
||
resize: vertical;
|
||
}
|
||
|
||
/* Mobile stacking */
|
||
@media (max-width: 980px){
|
||
#page-support .support-hero-inner{
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
|
||
#page-support .support-hero-right{
|
||
order: 2;
|
||
}
|
||
|
||
#page-support .support-hero-left{
|
||
order: 1;
|
||
}
|
||
|
||
#page-support .support-hero-image{
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
#page-support .section-intro{
|
||
text-align: center;
|
||
}
|
||
|
||
/* =========================
|
||
Services Dropdown
|
||
========================= */
|
||
.nav-dropdown {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 12px;
|
||
margin-bottom: -12px;
|
||
}
|
||
|
||
.nav-dropdown-toggle {
|
||
appearance: none;
|
||
background: transparent;
|
||
border: 0;
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 16px;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
padding: 6px 18px 6px 0;
|
||
transition: color 0.25s ease;
|
||
}
|
||
|
||
.nav-dropdown-toggle::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -2px;
|
||
width: calc(100% - 12px);
|
||
height: 2px;
|
||
background: rgba(59, 163, 255, 0.65);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.25s ease;
|
||
}
|
||
|
||
.nav-dropdown-toggle::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 12px;
|
||
height: 12px; /* gives us room for clean spacing */
|
||
|
||
background:
|
||
linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
|
||
linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat,
|
||
linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat;
|
||
}
|
||
|
||
.nav-dropdown:hover .nav-dropdown-toggle,
|
||
.nav-dropdown:focus-within .nav-dropdown-toggle,
|
||
.nav-dropdown.open .nav-dropdown-toggle,
|
||
.nav-dropdown-toggle.active {
|
||
color: var(--text);
|
||
}
|
||
|
||
.nav-dropdown:hover .nav-dropdown-toggle::before,
|
||
.nav-dropdown:focus-within .nav-dropdown-toggle::before,
|
||
.nav-dropdown.open .nav-dropdown-toggle::before,
|
||
.nav-dropdown-toggle.active::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
position: absolute;
|
||
top: calc(100% - 2px);
|
||
left: 0;
|
||
min-width: 320px;
|
||
display: none;
|
||
flex-direction: column;
|
||
padding: 10px;
|
||
background: rgba(4, 23, 32, 0.97);
|
||
border: 1px solid rgba(59, 163, 255, 0.2);
|
||
border-radius: 14px;
|
||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
.nav-dropdown:hover .nav-dropdown-menu,
|
||
.nav-dropdown:focus-within .nav-dropdown-menu,
|
||
.nav-dropdown.open .nav-dropdown-menu {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-dropdown-menu a {
|
||
padding: 10px 12px;
|
||
border-radius: 10px;
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
letter-spacing: 0.02em;
|
||
text-transform: none;
|
||
}
|
||
|
||
.nav-dropdown-menu a::after {
|
||
display: none;
|
||
}
|
||
|
||
.nav-dropdown-menu a:hover,
|
||
.nav-dropdown-menu a.active {
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
background: rgba(59, 163, 255, 0.12);
|
||
}
|
||
|
||
/* =========================
|
||
Service Detail Pages
|
||
========================= */
|
||
.service-page-section {
|
||
min-height: calc(100vh - 180px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 70px 0 90px;
|
||
}
|
||
|
||
.service-page-content {
|
||
text-align: center;
|
||
}
|
||
|
||
.service-page-title {
|
||
font-size: 36px;
|
||
margin-bottom: 28px;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
.service-page-image {
|
||
width: min(100%, 860px);
|
||
max-height: 64vh;
|
||
margin: 0 auto 24px;
|
||
object-fit: contain;
|
||
border-radius: 18px;
|
||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.service-page-tagline {
|
||
max-width: 920px;
|
||
margin: 0 auto;
|
||
font-size: 26px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.nav-dropdown {
|
||
width: 100%;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.nav-dropdown-toggle {
|
||
font-size: 15px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
position: static;
|
||
min-width: 100%;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.service-page-title {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.service-page-tagline {
|
||
font-size: 21px;
|
||
}
|
||
}
|
||
|
||
|
||
/* =========================
|
||
Mobile Navigation + Cleanup Overrides
|
||
Added to preserve desktop while fixing phone layout
|
||
========================= */
|
||
.mobile-nav-toggle {
|
||
display: none;
|
||
appearance: none;
|
||
background: transparent;
|
||
border: 1px solid rgba(59, 163, 255, 0.28);
|
||
border-radius: 10px;
|
||
width: 48px;
|
||
height: 44px;
|
||
padding: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
flex-direction: column;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mobile-nav-toggle span {
|
||
display: block;
|
||
width: 20px;
|
||
height: 2px;
|
||
background: var(--text);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.site-header {
|
||
height: auto;
|
||
min-height: 76px;
|
||
padding: 12px 16px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
.logo {
|
||
position: static;
|
||
left: auto;
|
||
top: auto;
|
||
transform: none;
|
||
z-index: auto;
|
||
}
|
||
|
||
.logo-link img {
|
||
height: 52px;
|
||
width: auto;
|
||
transform: none;
|
||
filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
|
||
}
|
||
|
||
.mobile-nav-toggle {
|
||
display: inline-flex;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.app {
|
||
padding-top: 0;
|
||
min-height: calc(100vh - 92px);
|
||
}
|
||
|
||
.site-nav {
|
||
display: none;
|
||
width: 100%;
|
||
margin-left: 0;
|
||
padding: 10px 0 0;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.site-nav.open {
|
||
display: flex;
|
||
}
|
||
|
||
.site-nav > a,
|
||
.site-nav > .nav-dropdown {
|
||
width: 100%;
|
||
}
|
||
|
||
.site-nav a,
|
||
.nav-dropdown-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
border-radius: 12px;
|
||
background: rgba(11, 50, 70, 0.55);
|
||
border: 1px solid rgba(199, 190, 161, 0.12);
|
||
font-size: 14px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.site-nav a::after {
|
||
display: none;
|
||
}
|
||
|
||
.nav-dropdown {
|
||
display: block;
|
||
padding-bottom: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.nav-dropdown-toggle {
|
||
padding-right: 36px;
|
||
}
|
||
|
||
.nav-dropdown-toggle::before {
|
||
display: none;
|
||
}
|
||
|
||
.nav-dropdown-toggle::after {
|
||
right: 14px;
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
position: static;
|
||
display: none;
|
||
min-width: 0;
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
padding: 8px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.nav-dropdown:hover .nav-dropdown-menu,
|
||
.nav-dropdown:focus-within .nav-dropdown-menu {
|
||
display: none;
|
||
}
|
||
|
||
.nav-dropdown.open .nav-dropdown-menu {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-dropdown-menu a {
|
||
background: transparent;
|
||
border: 0;
|
||
padding: 10px 12px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.hero {
|
||
min-height: auto;
|
||
padding: 32px 0 46px;
|
||
}
|
||
|
||
.hero-inner {
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.hero-split-inner,
|
||
.page-hero-inner,
|
||
.two-column,
|
||
.footer-main {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.hero-content {
|
||
order: 1;
|
||
}
|
||
|
||
.hero-media {
|
||
order: 2;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 28px;
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 16px;
|
||
max-width: none;
|
||
}
|
||
|
||
.hero-actions {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.hero-trust {
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.hero-trust span {
|
||
font-size: 12px;
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.hero-photo {
|
||
max-width: 100%;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.hero-media-overlay {
|
||
left: 12px;
|
||
right: 12px;
|
||
bottom: 12px;
|
||
gap: 4px;
|
||
}
|
||
|
||
.hero-rotator-text,
|
||
.hero-lockup-subtitle {
|
||
font-size: 18px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.hero-brand {
|
||
font-size: 22px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.section,
|
||
.page-hero {
|
||
padding: 42px 0;
|
||
}
|
||
|
||
.container {
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.section h2,
|
||
.service-page-title {
|
||
font-size: 28px;
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.section-intro,
|
||
.service-page-tagline {
|
||
font-size: 18px;
|
||
max-width: none;
|
||
}
|
||
|
||
.service-page-section {
|
||
min-height: auto;
|
||
padding: 42px 0 56px;
|
||
}
|
||
|
||
.service-page-image {
|
||
width: 100%;
|
||
max-height: none;
|
||
margin-bottom: 18px;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.card-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.about-canvas {
|
||
min-height: auto;
|
||
padding: 108px 16px 48px;
|
||
background-size: 92%;
|
||
background-position: center 72px;
|
||
}
|
||
|
||
#page-services {
|
||
min-height: auto;
|
||
padding: 108px 0 48px;
|
||
background-size: 88%;
|
||
background-position: center 180px;
|
||
}
|
||
|
||
#page-industries .industry-item {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.industry-image img {
|
||
width: 100%;
|
||
}
|
||
|
||
#page-8x8 .page-hero,
|
||
#page-contact .page-hero,
|
||
#page-support .page-hero {
|
||
padding-top: 36px;
|
||
}
|
||
|
||
.site-footer {
|
||
padding-top: 24px;
|
||
}
|
||
}
|
||
|
||
/* =========================
|
||
Mobile layout refinement only
|
||
Tightens phone layout without changing desktop
|
||
========================= */
|
||
@media (max-width: 900px) {
|
||
.site-header {
|
||
min-height: 68px;
|
||
padding: 10px 16px;
|
||
gap: 8px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 120;
|
||
}
|
||
|
||
.logo-link img {
|
||
height: 72px;
|
||
width: auto;
|
||
max-width: 132px;
|
||
}
|
||
|
||
.mobile-nav-toggle {
|
||
width: 42px;
|
||
height: 40px;
|
||
border-radius: 12px;
|
||
border-color: rgba(59, 163, 255, 0.22);
|
||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
|
||
}
|
||
|
||
.mobile-nav-toggle span {
|
||
width: 18px;
|
||
}
|
||
|
||
.site-nav {
|
||
position: absolute;
|
||
top: calc(100% + 1px);
|
||
left: 0;
|
||
right: 0;
|
||
display: none;
|
||
padding: 10px 16px 14px;
|
||
background: rgba(4, 23, 32, 0.96);
|
||
backdrop-filter: blur(14px);
|
||
border-top: 1px solid rgba(59, 163, 255, 0.12);
|
||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
|
||
gap: 8px;
|
||
}
|
||
|
||
.site-nav a,
|
||
.nav-dropdown-toggle {
|
||
padding: 10px 14px;
|
||
min-height: 48px;
|
||
border-radius: 14px;
|
||
background: rgba(11, 50, 70, 0.46);
|
||
border: 1px solid rgba(199, 190, 161, 0.1);
|
||
font-size: 13px;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
.nav-dropdown-toggle {
|
||
padding-right: 34px;
|
||
}
|
||
|
||
.nav-dropdown-toggle::after {
|
||
right: 14px;
|
||
width: 11px;
|
||
height: 11px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
margin-top: 6px;
|
||
padding: 6px;
|
||
border-radius: 14px;
|
||
background: rgba(8, 33, 45, 0.88);
|
||
border: 1px solid rgba(199, 190, 161, 0.1);
|
||
}
|
||
|
||
.nav-dropdown-menu a {
|
||
min-height: 40px;
|
||
padding: 8px 10px;
|
||
font-size: 12.5px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.app {
|
||
min-height: calc(100vh - 76px);
|
||
}
|
||
|
||
.hero {
|
||
padding: 18px 0 40px;
|
||
}
|
||
|
||
.hero-inner {
|
||
padding: 0 14px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 27px;
|
||
line-height: 1.08;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.primary-btn {
|
||
width: 100%;
|
||
max-width: 340px;
|
||
padding: 12px 18px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.hero-trust {
|
||
gap: 6px;
|
||
}
|
||
|
||
.hero-trust span {
|
||
font-size: 11px;
|
||
padding: 5px 9px;
|
||
}
|
||
|
||
.hero-media {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.hero-photo {
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.hero-media-overlay {
|
||
left: 10px;
|
||
right: 10px;
|
||
bottom: 10px;
|
||
}
|
||
|
||
.hero-rotator-text,
|
||
.hero-lockup-subtitle {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.hero-brand {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
/* =========================
|
||
Mobile corrections only - visible tabs, larger logo, no hamburger
|
||
Keeps desktop unchanged
|
||
========================= */
|
||
@media (max-width: 900px) {
|
||
.mobile-nav-toggle {
|
||
display: none !important;
|
||
}
|
||
|
||
.site-header {
|
||
height: auto;
|
||
min-height: 94px;
|
||
padding: 10px 14px 12px;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex-wrap: nowrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.logo {
|
||
position: absolute;
|
||
left: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 60;
|
||
}
|
||
|
||
.logo-link img {
|
||
height: 110px;
|
||
width: auto;
|
||
max-width: none;
|
||
transform: translateY(6px);
|
||
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
|
||
}
|
||
|
||
.app {
|
||
padding-top: 4px;
|
||
min-height: calc(100vh - 110px);
|
||
}
|
||
|
||
.site-nav {
|
||
display: flex !important;
|
||
position: static;
|
||
width: 100%;
|
||
margin-left: auto;
|
||
padding: 0 0 0 108px;
|
||
background: transparent;
|
||
backdrop-filter: none;
|
||
border-top: 0;
|
||
box-shadow: none;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 8px 14px;
|
||
}
|
||
|
||
.site-nav.open {
|
||
display: flex !important;
|
||
}
|
||
|
||
.site-nav > a,
|
||
.site-nav > .nav-dropdown {
|
||
width: auto;
|
||
}
|
||
|
||
.site-nav a,
|
||
.nav-dropdown-toggle {
|
||
display: inline-flex;
|
||
width: auto;
|
||
min-height: 0;
|
||
padding: 6px 0;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 0;
|
||
font-size: 12px;
|
||
line-height: 1.2;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.site-nav a::after {
|
||
display: block;
|
||
}
|
||
|
||
.nav-dropdown {
|
||
display: flex;
|
||
width: auto;
|
||
align-items: center;
|
||
padding-bottom: 10px;
|
||
margin-bottom: -10px;
|
||
}
|
||
|
||
.nav-dropdown-toggle {
|
||
padding: 6px 18px 6px 0;
|
||
}
|
||
|
||
.nav-dropdown-toggle::before {
|
||
display: block;
|
||
}
|
||
|
||
.nav-dropdown-toggle::after {
|
||
right: 0;
|
||
width: 11px;
|
||
height: 11px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
position: absolute;
|
||
top: calc(100% - 2px);
|
||
left: 0;
|
||
right: auto;
|
||
width: max-content;
|
||
min-width: 260px;
|
||
max-width: min(88vw, 340px);
|
||
margin-top: 0;
|
||
padding: 8px;
|
||
background: rgba(4, 23, 32, 0.98);
|
||
backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(59, 163, 255, 0.2);
|
||
border-radius: 14px;
|
||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
.nav-dropdown:hover .nav-dropdown-menu,
|
||
.nav-dropdown:focus-within .nav-dropdown-menu,
|
||
.nav-dropdown.open .nav-dropdown-menu {
|
||
display: flex;
|
||
}
|
||
|
||
.nav-dropdown-menu a {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 0;
|
||
padding: 9px 12px;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
letter-spacing: 0.02em;
|
||
text-transform: none;
|
||
}
|
||
|
||
.hero {
|
||
padding: 26px 0 40px;
|
||
}
|
||
|
||
.hero-inner,
|
||
.container {
|
||
padding: 0 14px;
|
||
}
|
||
|
||
#page-services {
|
||
padding: 104px 0 48px;
|
||
background-size: 118%;
|
||
background-position: center 170px;
|
||
}
|
||
|
||
#page-services .page-hero {
|
||
padding-bottom: 18px;
|
||
}
|
||
|
||
#page-services .card-grid {
|
||
gap: 18px;
|
||
}
|
||
|
||
.service-page-section {
|
||
padding: 36px 0 52px;
|
||
}
|
||
|
||
.service-page-image {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
display: block;
|
||
margin: 0 auto 18px;
|
||
max-height: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 520px) {
|
||
.site-header {
|
||
min-height: 102px;
|
||
padding: 10px 12px 12px;
|
||
}
|
||
|
||
.logo {
|
||
left: 6px;
|
||
}
|
||
|
||
.logo-link img {
|
||
height: 124px;
|
||
}
|
||
|
||
.site-nav {
|
||
padding-left: 96px;
|
||
gap: 7px 12px;
|
||
}
|
||
|
||
.site-nav a,
|
||
.nav-dropdown-toggle {
|
||
font-size: 11px;
|
||
letter-spacing: 0.045em;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
min-width: 232px;
|
||
max-width: min(90vw, 320px);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 15px;
|
||
}
|
||
|
||
#page-services {
|
||
background-size: 132%;
|
||
background-position: center 188px;
|
||
}
|
||
}
|
||
|
||
|
||
/* =========================================================
|
||
Services overview image grid
|
||
========================================================= */
|
||
#page-services .services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 28px;
|
||
}
|
||
|
||
#page-services .service-item {
|
||
display: block;
|
||
text-decoration: none;
|
||
}
|
||
|
||
#page-services .service-item:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
#page-services .service-overview-image {
|
||
width: 100%;
|
||
height: 320px;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
border-radius: 22px;
|
||
box-shadow: 0 12px 34px rgba(3, 10, 17, 0.75);
|
||
}
|
||
|
||
#page-services .service-overview-card {
|
||
margin-top: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
#page-services .service-overview-card h3 {
|
||
font-size: 28px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
#page-services .service-overview-card p {
|
||
font-size: 20px;
|
||
line-height: 1.6;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* =========================================================
|
||
Mobile navigation + layout cleanup
|
||
========================================================= */
|
||
@media (max-width: 900px) {
|
||
.mobile-nav-toggle {
|
||
display: none !important;
|
||
}
|
||
|
||
.site-header {
|
||
height: auto !important;
|
||
padding: 14px 12px 12px !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
.logo {
|
||
position: static !important;
|
||
left: auto !important;
|
||
top: auto !important;
|
||
transform: none !important;
|
||
margin: 0 auto 10px !important;
|
||
}
|
||
|
||
.logo-link img {
|
||
height: 120px !important;
|
||
width: auto !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
.app {
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
.site-nav {
|
||
position: static !important;
|
||
inset: auto !important;
|
||
opacity: 1 !important;
|
||
visibility: visible !important;
|
||
pointer-events: auto !important;
|
||
transform: none !important;
|
||
display: flex !important;
|
||
width: 100% !important;
|
||
margin: 0 auto !important;
|
||
padding: 0 !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
flex-wrap: wrap !important;
|
||
gap: 10px 18px !important;
|
||
background: transparent !important;
|
||
border: 0 !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.site-nav > a,
|
||
.site-nav > .nav-dropdown {
|
||
flex: 0 0 auto !important;
|
||
}
|
||
|
||
.site-nav a,
|
||
.nav-dropdown-toggle {
|
||
font-size: 14px !important;
|
||
letter-spacing: 0.04em !important;
|
||
padding: 6px 0 !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
.nav-dropdown {
|
||
position: relative !important;
|
||
width: auto !important;
|
||
}
|
||
|
||
.nav-dropdown-toggle {
|
||
min-width: 0 !important;
|
||
justify-content: flex-start !important;
|
||
background: transparent !important;
|
||
border: 0 !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.nav-dropdown-toggle::before {
|
||
bottom: -2px !important;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
position: absolute !important;
|
||
top: calc(100% + 8px) !important;
|
||
left: 50% !important;
|
||
right: auto !important;
|
||
transform: translateX(-50%) !important;
|
||
min-width: 220px !important;
|
||
max-width: min(92vw, 320px) !important;
|
||
padding: 10px 0 !important;
|
||
z-index: 120 !important;
|
||
}
|
||
|
||
.nav-dropdown-menu a {
|
||
padding: 10px 18px !important;
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
.hero {
|
||
padding-top: 42px !important;
|
||
}
|
||
|
||
#page-services .services-grid {
|
||
grid-template-columns: 1fr !important;
|
||
gap: 24px !important;
|
||
}
|
||
|
||
#page-services .service-overview-image {
|
||
height: auto !important;
|
||
aspect-ratio: 16 / 10;
|
||
}
|
||
|
||
#page-services .service-overview-card h3 {
|
||
font-size: 24px !important;
|
||
}
|
||
|
||
#page-services .service-overview-card p {
|
||
font-size: 18px !important;
|
||
}
|
||
}
|
||
|
||
/* =========================================================
|
||
Final mobile nav override: force horizontal tab flow
|
||
without changing desktop layout
|
||
========================================================= */
|
||
@media (max-width: 900px) {
|
||
.site-header {
|
||
align-items: center !important;
|
||
}
|
||
|
||
.site-nav {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
flex-wrap: wrap !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
align-content: center !important;
|
||
width: min(100%, 360px) !important;
|
||
max-width: 360px !important;
|
||
margin: 0 auto !important;
|
||
padding: 0 !important;
|
||
gap: 12px 18px !important;
|
||
}
|
||
|
||
.site-nav > a,
|
||
.site-nav > .nav-dropdown {
|
||
display: inline-flex !important;
|
||
flex: 0 0 auto !important;
|
||
width: auto !important;
|
||
max-width: none !important;
|
||
min-width: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.site-nav a,
|
||
.nav-dropdown-toggle {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
width: auto !important;
|
||
min-width: 0 !important;
|
||
max-width: none !important;
|
||
margin: 0 !important;
|
||
text-align: center !important;
|
||
line-height: 1.1 !important;
|
||
font-size: 13px !important;
|
||
padding: 4px 0 !important;
|
||
}
|
||
|
||
.nav-dropdown {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
.nav-dropdown-toggle::after {
|
||
margin-left: 8px !important;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
top: calc(100% + 6px) !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* =========================================================
|
||
Mobile-only: remove Services/Industries dropdown behavior
|
||
and keep nav as simple wrapped tabs
|
||
========================================================= */
|
||
@media (max-width: 900px) {
|
||
.site-nav {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
justify-content: center !important;
|
||
gap: 10px 16px !important;
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
.site-nav a,
|
||
.nav-dropdown-toggle {
|
||
font-size: 12px !important;
|
||
padding: 4px 0 !important;
|
||
letter-spacing: 0.035em !important;
|
||
}
|
||
|
||
.nav-dropdown-toggle::after,
|
||
.nav-dropdown-toggle::before {
|
||
display: none !important;
|
||
content: none !important;
|
||
}
|
||
|
||
.nav-dropdown-menu {
|
||
display: none !important;
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
.nav-dropdown.open .nav-dropdown-menu,
|
||
.nav-dropdown:hover .nav-dropdown-menu {
|
||
display: none !important;
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
.nav-dropdown,
|
||
.site-nav > .nav-dropdown {
|
||
display: inline-flex !important;
|
||
width: auto !important;
|
||
}
|
||
|
||
.nav-dropdown-toggle {
|
||
background: transparent !important;
|
||
border: 0 !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.nav-dropdown.open .nav-dropdown-toggle,
|
||
.nav-dropdown:hover .nav-dropdown-toggle {
|
||
color: var(--text) !important;
|
||
}
|
||
}
|
||
|
||
/* Zoho CRM Webform splash message - scoped to Contact page form only */
|
||
.wf_customMessageBox {
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
color: #132C14;
|
||
background: #F5FAF5;
|
||
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.25);
|
||
max-width: 90%;
|
||
width: max-content;
|
||
word-break: break-word;
|
||
z-index: 11000;
|
||
border-radius: 6px;
|
||
border: 1px solid #A9D3AB;
|
||
min-width: 100px;
|
||
padding: 10px 15px;
|
||
align-items: center;
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
.wf_customCircle {
|
||
position: relative;
|
||
background-color: #12AA67;
|
||
border-radius: 100%;
|
||
width: 20px;
|
||
height: 20px;
|
||
flex: none;
|
||
margin-right: 7px;
|
||
}
|
||
.wf_customCheckMark {
|
||
box-sizing: unset !important;
|
||
position: absolute;
|
||
transform: rotate(45deg) translate(-50%, -50%);
|
||
left: 6px;
|
||
top: 9px;
|
||
height: 8px;
|
||
width: 3px;
|
||
border-bottom: 2px solid #fff;
|
||
border-right: 2px solid #fff;
|
||
}
|
||
.wf_customClose {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-left: 12px;
|
||
border: 0;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
.wf_customClose::after,
|
||
.wf_customClose::before {
|
||
content: '';
|
||
display: block;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 1.5px;
|
||
background: #616E88;
|
||
transform: rotate(45deg);
|
||
border-radius: 5px;
|
||
top: 8px;
|
||
left: 3px;
|
||
}
|
||
.wf_customClose::after {
|
||
transform: rotate(-45deg);
|
||
}
|