/* ============================================
i-Comply Design System - Mosey-inspired
Warm off-white + i-Comply blue brand
============================================ */
/* --- Font Loading ---
Loaded via in each page's , not @import.
An @import here cannot start downloading until style.css itself has been
fetched and parsed, which adds a full round-trip before first paint. */
/* ============================================
DESIGN TOKENS
============================================ */
:root, [data-theme="light"] {
/* Type scale */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
--text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
/* Fonts */
--font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
--font-body: 'Satoshi', 'Inter', sans-serif;
/* Surfaces - warm off-white like Mosey */
--color-bg: #f0ede6;
--color-surface: #f4f1ea;
--color-surface-2: #f8f6f1;
--color-surface-offset: #e8e4dc;
--color-surface-offset-2: #e2ddd4;
--color-divider: #d8d3c8;
--color-border: #ccc8bc;
/* Text - dark near-black with warm undertone */
--color-text: #1a1814;
--color-text-muted: #5e5b54;
--color-text-faint: #646159;
--color-text-inverse: #f8f6f1;
/* Primary - i-Comply blue (evolved, more refined) */
--color-primary: #0066a1;
--color-primary-hover: #004f80;
--color-primary-active: #003b61;
--color-primary-highlight: #cce2f4;
--color-primary-subtle: #e8f3fb;
/* Secondary accent - deep teal */
--color-secondary: #005e6b;
--color-secondary-hover: #004850;
/* Feedback */
--color-error: #b3261e;
/* Borders & Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;
/* Transitions */
--transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
/* Shadows (warm-tinted) */
--shadow-sm: 0 1px 2px oklch(0.2 0.01 50 / 0.06);
--shadow-md: 0 4px 12px oklch(0.2 0.01 50 / 0.08), 0 1px 3px oklch(0.2 0.01 50 / 0.06);
--shadow-lg: 0 12px 32px oklch(0.2 0.01 50 / 0.12), 0 4px 8px oklch(0.2 0.01 50 / 0.06);
/* Content widths */
--content-narrow: 640px;
--content-default: 960px;
--content-wide: 1200px;
--content-full: 100%;
}
/* --- DARK MODE --- */
[data-theme="dark"] {
--color-bg: #14120f;
--color-surface: #1a1814;
--color-surface-2: #1f1d19;
--color-surface-offset: #171510;
--color-surface-offset-2: #1c1a15;
--color-divider: #252219;
--color-border: #363128;
--color-text: #e8e4db;
--color-text-muted: #959189;
--color-text-faint: #908c84;
--color-text-inverse: #1a1814;
--color-primary: #4fa3d6;
--color-primary-hover: #2d8bbf;
--color-primary-active: #1a70a0;
--color-primary-highlight: #1a3346;
--color-primary-subtle: #0f2233;
--color-secondary: #4db3c2;
--color-secondary-hover: #2d9aaa;
--color-error: #f2b8b5;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
--shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
--shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-bg: #14120f;
--color-surface: #1a1814;
--color-surface-2: #1f1d19;
--color-surface-offset: #171510;
--color-surface-offset-2: #1c1a15;
--color-divider: #252219;
--color-border: #363128;
--color-text: #e8e4db;
--color-text-muted: #959189;
--color-text-faint: #908c84;
--color-text-inverse: #1a1814;
--color-primary: #4fa3d6;
--color-primary-hover: #2d8bbf;
--color-primary-active: #1a70a0;
--color-primary-highlight: #1a3346;
--color-primary-subtle: #0f2233;
--color-secondary: #4db3c2;
--color-secondary-hover: #2d9aaa;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
--shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
--shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}
}
/* ============================================
LAYOUT UTILITIES
============================================ */
.container {
max-width: var(--content-wide);
margin-inline: auto;
padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}
.container--narrow {
max-width: var(--content-narrow);
margin-inline: auto;
padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}
.container--default {
max-width: var(--content-default);
margin-inline: auto;
padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}
/* ============================================
NAVIGATION
============================================ */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: oklch(from var(--color-bg) l c h / 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-divider);
transition: box-shadow var(--transition-interactive);
}
.nav--scrolled {
box-shadow: var(--shadow-sm);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding-block: var(--space-4);
}
.nav__logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--color-text);
flex-shrink: 0;
}
.nav__logo-mark {
width: 36px;
height: 36px;
}
.nav__logo-text {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-text);
}
.nav__logo-text span {
color: var(--color-primary);
}
/* Skip link — visually hidden until focused by keyboard. */
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: 1000;
padding: var(--space-3) var(--space-5);
background: var(--color-primary);
color: #fff;
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transform: translateY(-200%);
transition: transform 180ms var(--ease-out);
}
.skip-link:focus-visible,
.skip-link:focus { transform: translateY(0); }
.nav__links {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
}
.nav__links a {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
transition: color var(--transition-interactive), background var(--transition-interactive);
}
.nav__links a { white-space: nowrap; }
.nav__links a:hover { color: var(--color-text); background: var(--color-surface-offset); }
.nav__links a.active { color: var(--color-primary); font-weight: 600; }
.nav__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.nav__mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: var(--space-2);
cursor: pointer;
background: none;
border: none;
}
.nav__mobile-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav__mobile-menu {
display: none;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4);
border-top: 1px solid var(--color-divider);
background: var(--color-bg);
}
.nav__mobile-menu a {
font-size: var(--text-base);
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
transition: color var(--transition-interactive), background var(--transition-interactive);
}
.nav__mobile-menu a:hover { color: var(--color-text); background: var(--color-surface-offset); }
.nav__mobile-menu.open { display: flex; }
/* The desktop link row needs ~990px to sit beside the logo and the CTA. Below
that it used to squeeze and wrap ("Our / Solutions") instead of collapsing,
so the hamburger has to take over well before the 768px phone breakpoint. */
@media (max-width: 1024px) {
.nav__links, .nav__actions .btn:not(.btn--primary) { display: none; }
.nav__mobile-toggle { display: flex; }
}
/* Below ~400px the nav's theme toggle + CTA + hamburger (220px) plus the logo
(98px) no longer fit beside the container padding, and the header pushed the
whole page sideways — 38px of horizontal scroll on a 320px phone. Tightening
the CTA is enough; the button stays, because it is the primary conversion
element and the hamburger menu is not a substitute for it. */
@media (max-width: 400px) {
.nav__actions { gap: var(--space-2); }
.nav__actions .btn--primary {
padding-inline: var(--space-3);
font-size: var(--text-xs);
}
.nav__logo .logo { height: 26px; }
}
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
border: none;
transition: background var(--transition-interactive),
color var(--transition-interactive),
box-shadow var(--transition-interactive),
transform var(--transition-interactive);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--color-primary);
color: #fff;
box-shadow: 0 2px 8px oklch(from var(--color-primary) l c h / 0.3);
}
.btn--primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 0.35);
}
.btn--primary:active { background: var(--color-primary-active); box-shadow: var(--shadow-sm); }
.btn--ghost {
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.btn--ghost:hover {
background: var(--color-surface-offset);
color: var(--color-text);
border-color: var(--color-text-muted);
}
.btn--outline {
background: transparent;
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
}
.btn--outline:hover {
background: var(--color-primary-subtle);
}
.btn--sm {
padding: var(--space-2) var(--space-4);
font-size: var(--text-xs);
}
/* ============================================
BADGE / PILL
============================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.badge--blue {
background: var(--color-primary-subtle);
color: var(--color-primary);
border: 1px solid var(--color-primary-highlight);
}
.badge--outline {
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.badge--dark {
background: var(--color-text);
color: var(--color-bg);
}
/* ============================================
ABSTRACT LINE ILLUSTRATION (SVG decorative)
============================================ */
.line-art {
position: absolute;
pointer-events: none;
overflow: visible;
opacity: 0.45;
}
.line-art path {
fill: none;
stroke: var(--color-primary);
stroke-width: 1.5;
stroke-linecap: round;
}
/* ============================================
HERO SECTION
============================================ */
.hero {
position: relative;
overflow: hidden;
padding-block: clamp(var(--space-16), 12vw, var(--space-32));
background: var(--color-bg);
}
.hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
}
.hero__eyebrow {
margin-bottom: var(--space-4);
}
.hero__heading {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--color-text);
margin-bottom: var(--space-6);
}
.hero__heading em {
font-style: normal;
color: var(--color-primary);
}
.hero__body {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: var(--space-8);
max-width: 52ch;
}
.hero__cta {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.hero__visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero__svg-art {
width: 100%;
max-width: 480px;
height: auto;
}
.hero__bg-decoration {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
@media (max-width: 768px) {
.hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.hero__body { max-width: none; margin-inline: auto; }
.hero__cta { justify-content: center; }
.hero__svg-art { max-width: 300px; }
}
/* ============================================
SECTION SHARED
============================================ */
.section {
padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
.section--alt {
background: var(--color-surface);
}
.section--dark {
background: var(--color-text);
color: var(--color-text-inverse);
}
.section__eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.section__label {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.section__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--color-text);
margin-bottom: var(--space-4);
}
.section--dark .section__title { color: var(--color-text-inverse); }
.section__subtitle {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.7;
max-width: 56ch;
}
.section--dark .section__subtitle { color: color-mix(in oklch, var(--color-text-inverse) 70%, transparent); }
/* ============================================
SERVICE CARDS
============================================ */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: var(--space-6);
margin-top: var(--space-12);
}
.service-card {
background: var(--color-surface-2);
border: 1px solid var(--color-divider);
border-radius: var(--radius-2xl);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
cursor: default;
}
.service-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: var(--color-primary-highlight);
}
.service-card__icon {
width: 48px;
height: 48px;
background: var(--color-primary-subtle);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.service-card__icon svg {
width: 24px;
height: 24px;
stroke: var(--color-primary);
}
.service-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
letter-spacing: -0.01em;
}
.service-card__body {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.65;
flex: 1;
}
.service-card__link {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-1);
transition: gap var(--transition-interactive), color var(--transition-interactive);
}
.service-card__link:hover { gap: var(--space-2); color: var(--color-primary-hover); }
/* ============================================
WHY CHOOSE US / TRUST GRID
============================================ */
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
@media (max-width: 640px) {
.trust-grid { grid-template-columns: 1fr; }
}
.trust-item {
display: flex;
flex-direction: column;
gap: var(--space-3);
/* A `1fr` track's automatic minimum is min-content, so a long unbreakable word
("accountability.") plus 64px of padding pushed the four tracks past the
container and scrolled the page sideways at 768px. min-width:0 lets the track
shrink; overflow-wrap stops the word poking out instead. */
min-width: 0;
overflow-wrap: break-word;
padding: var(--space-8);
border-radius: var(--radius-2xl);
background: var(--color-surface-2);
border: 1px solid var(--color-divider);
transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.trust-item:hover {
box-shadow: var(--shadow-sm);
border-color: var(--color-primary-highlight);
}
.trust-item__number {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 900;
color: var(--color-primary);
line-height: 1;
letter-spacing: -0.04em;
}
.trust-item__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
}
.trust-item__body {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.65;
}
/* ============================================
CLIENT MARQUEE
============================================ */
.client-marquee-wrapper {
overflow: hidden;
width: 100vw;
margin-inline: calc(50% - 50vw);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.client-marquee-track {
display: flex;
align-items: center;
gap: var(--space-12);
width: max-content;
animation: marquee-scroll 30s linear infinite;
}
.client-marquee-track:hover {
animation-play-state: paused;
}
.client-logo-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 92px;
}
.client-logo-item img {
height: 80px;
width: auto;
max-width: 240px;
object-fit: contain;
filter: brightness(1) invert(1);
opacity: 0.5;
transition: opacity 0.3s ease;
}
.client-logo-item img:hover {
opacity: 1;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================
STATS BAR
============================================ */
.stats-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-1);
background: var(--color-text);
border-radius: var(--radius-2xl);
overflow: hidden;
margin-block: var(--space-16);
}
.stat-item {
padding: var(--space-8) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-1);
border-right: 1px solid oklch(from var(--color-text-inverse) l c h / 0.12);
}
.stat-item:last-child { border-right: none; }
.stat-item__value {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 900;
color: var(--color-text-inverse);
letter-spacing: -0.03em;
line-height: 1;
}
.stat-item__value span {
color: var(--color-primary);
}
[data-theme="dark"] .stat-item__value span { color: #6ec6f5; }
.stat-item__label {
font-size: var(--text-sm);
color: color-mix(in oklch, var(--color-text-inverse) 55%, transparent);
font-weight: 500;
}
@media (max-width: 480px) {
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.stat-item:nth-child(2) { border-right: none; }
}
/* ============================================
CTA BANNER
============================================ */
.cta-banner {
position: relative;
overflow: hidden;
background: var(--color-primary);
border-radius: var(--radius-2xl);
padding: clamp(var(--space-12), 6vw, var(--space-20));
display: flex;
flex-direction: column;
gap: var(--space-6);
align-items: flex-start;
margin-block: var(--space-16);
}
.cta-banner__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 900;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.1;
max-width: 18ch;
}
.cta-banner__body {
font-size: var(--text-base);
color: rgba(255,255,255,0.75);
max-width: 48ch;
line-height: 1.65;
}
.cta-banner .btn--white {
background: #fff;
color: var(--color-primary);
font-weight: 700;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.cta-banner .btn--white:hover {
background: rgba(255,255,255,0.92);
box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}
.cta-banner__decoration {
position: absolute;
right: 0; top: 0; bottom: 0;
pointer-events: none;
opacity: 0.12;
}
/* ============================================
TESTIMONIAL / CLIENT
============================================ */
.client-logos {
display: flex;
align-items: center;
gap: var(--space-8);
flex-wrap: wrap;
margin-top: var(--space-8);
}
.client-logo {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-faint);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
}
/* ============================================
PAGE HEADER (inner pages)
============================================ */
.page-header {
padding-block: clamp(var(--space-12), 8vw, var(--space-20));
background: var(--color-bg);
border-bottom: 1px solid var(--color-divider);
position: relative;
overflow: hidden;
}
.page-header__eyebrow { margin-bottom: var(--space-4); }
.page-header__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--color-text);
margin-bottom: var(--space-4);
}
.page-header__subtitle {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.7;
max-width: 56ch;
}
/* ============================================
SCROLL ANIMATIONS
All scroll reveals are owned by animations.css (the motion engine).
Keep .fade-in visible by default here so content is never stranded
if animations.css / JS fails to load.
============================================ */
.fade-in {
opacity: 1;
}
/* ============================================
FOOTER
============================================ */
.footer {
background: var(--color-surface-offset);
border-top: 1px solid var(--color-divider);
padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-12);
}
@media (max-width: 768px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.footer__grid { grid-template-columns: 1fr; }
}
.footer__logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--color-text);
margin-bottom: var(--space-4);
}
.footer__tagline {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
max-width: 32ch;
margin-bottom: var(--space-6);
}
.footer__col-title {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-bottom: var(--space-4);
}
.footer__links {
display: flex;
flex-direction: column;
gap: var(--space-3);
list-style: none;
}
.footer__links a {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-interactive);
}
.footer__links a:hover { color: var(--color-text); }
.footer__bottom {
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: 1px solid var(--color-divider);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
}
/* Privacy link in the footer bar. Same weight as the copyright it sits beside —
it is a legal notice, not a call to action, so it should not out-shout the nav. */
.footer__legal {
font-size: var(--text-xs);
margin: 0;
}
.footer__legal a {
color: var(--color-text-faint);
text-decoration: none;
}
.footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
.footer__copyright {
font-size: var(--text-xs);
color: var(--color-text-faint);
}
.footer__attribution {
font-size: var(--text-xs);
color: var(--color-text-faint);
}
.footer__attribution a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-interactive);
}
.footer__attribution a:hover { color: var(--color-primary); }
/* ============================================
CONTACT FORM
============================================ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-muted);
}
.form-input, .form-select, .form-textarea {
padding: var(--space-3) var(--space-4);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-2);
color: var(--color-text);
font-size: var(--text-base);
font-family: var(--font-body);
transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.form-textarea { resize: vertical; min-height: 140px; }
/* ============================================
DIVIDER LINE
============================================ */
.divider {
width: 100%;
height: 1px;
background: var(--color-divider);
margin-block: var(--space-4);
}
/* ============================================
DARK MODE TOGGLE
============================================ */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--color-surface-offset);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--transition-interactive), color var(--transition-interactive);
}
.theme-toggle:hover { background: var(--color-surface-offset-2); color: var(--color-text); }
/* ============================================
Fucken spinny globey
============================================ */
.globe-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
max-width: 520px;
margin-inline: auto;
position: relative;
overflow: hidden;
}
#globeViz,
#globeVizIndex {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
}
/* ============================================
Logo changer Dark theme/ Day theme
============================================ */
.nav__logo .logo {
height: 32px; /* tweak size to taste */
/* The ![]()
now carries intrinsic width/height (to stop layout shift), so the
width must be pinned back to auto — otherwise it lays out at the attribute
width and blows past the viewport on mobile. */
width: auto;
display: block;
}
.nav__logo .logo + .logo {
margin-top: 0; /* stack them on top of each other */
}
/* Light theme (dark wordmark on white background) */
html[data-theme="light"] .logo--light-theme { display: block; }
html[data-theme="light"] .logo--dark-theme { display: none; }
/* Dark theme (light logo on dark background) */
html[data-theme="dark"] .logo--light-theme { display: none; }
html[data-theme="dark"] .logo--dark-theme { display: block; }
/* ─────────────────────────────────────────────────────────
* Supplemental hover & transition enhancements
* (animations.css handles most; these fill remaining gaps)
* ───────────────────────────────────────────────────────── */
/* Client logos — grayscale to color reveal on hover */
.client-marquee-wrapper .client-logo-item img {
filter: grayscale(100%);
opacity: 0.55;
transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.client-marquee-wrapper .client-logo-item:hover img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.08);
}
/* Light-mode fix: white wordmark logos get a dark backdrop on hover so they're visible */
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="JAKALA"]),
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="Jellyroad"]) {
padding: 0 var(--space-3);
border-radius: 10px;
background: transparent;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="JAKALA"]):hover,
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="Jellyroad"]):hover {
background: rgba(15, 23, 42, 0.9);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
}
/* JAKALA and Jellyroad ship as white artwork, so on the light theme the shared
grayscale() above leaves them white-on-cream — desaturating something that is
already colourless changes nothing. Knocking the brightness down is what
actually renders them as grey, so at rest they read as part of the strip.
On hover the filter lifts entirely and the dark pill above slides in behind
them, showing each logo in its true colour (including JAKALA's red mark). */
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="JAKALA"]) img,
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="Jellyroad"]) img {
filter: grayscale(100%) brightness(0.45);
opacity: 0.8;
}
/* Jellyroad needs to go further than JAKALA: its lettering is thin and widely
tracked, so most of what you see is antialiased edge rather than solid ink and
it reads lighter at the same brightness. This lands it on roughly the same
weight as the rest of the strip. */
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="Jellyroad"]) img {
filter: grayscale(100%) brightness(0.28);
}
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="JAKALA"]):hover img,
[data-theme="light"] .client-marquee-wrapper .client-logo-item:has(img[src*="Jellyroad"]):hover img {
filter: none;
opacity: 1;
}
/* Section titles — ensure position for animations */
.section__title { position: relative; }
/* Testimonial — position relative for ::before pseudo */
.testimonial { position: relative; overflow: hidden; }
/* Service card icon — explicit size */
.service-card__icon svg {
width: 22px;
height: 22px;
}
/* Hero — ensure stacking context */
.hero { position: relative; overflow: hidden; }