/* ============================================================
CARGO CENTRUM — Design Theme
Derived from: cargo-centrum-v2.html, cargoparse.html, hws.html
Company: Admaren Tech Pvt. Ltd.
============================================================ */
/* ── GOOGLE FONTS ── */
/* @import this before anything else, or add to :
*/
:root {
/* ══════════════════════════════════════════
COLORS — BRAND
══════════════════════════════════════════ */
/* Primary — Purple / Violet */
--clr-primary: #7B61FF; /* Main brand purple — buttons, links, accents */
--clr-primary-dark: #6B4EE6; /* Hover & pressed states */
--clr-primary-light: #9B85FF; /* Lighter accent, highlights */
--clr-primary-xlight: #BBA5FF; /* Pale tint — used in dark sections */
--clr-primary-xxlight: #D4C8FF; /* Very pale tint */
--clr-primary-soft: #EEEAFF; /* Soft background tint — badges, chips */
--clr-primary-glow: rgba(123, 97, 255, 0.12); /* Box-shadow glow color */
--clr-primary-glow-btn: rgba(123, 97, 255, 0.20); /* Stronger glow on buttons */
/* ══════════════════════════════════════════
COLORS — NEUTRALS
══════════════════════════════════════════ */
/* Dark / Navy — headings, dark section backgrounds */
--clr-dark: #1A1535;
--clr-dark-2: #2D2750;
/* Page backgrounds — lightest to deepest */
--clr-bg: #F8F7FC; /* Default page background */
--clr-bg-2: #F0EFF7; /* Slightly deeper — alternating sections, inputs */
--clr-bg-3: #E6E4F0; /* Cards on bg, progress bars, dividers */
--clr-bg-4: #D8D5E8; /* Deeper dividers, inactive elements */
--clr-bg-5: #C8C4DA; /* Borders visible on tinted backgrounds */
/* Surfaces — card / panel whites */
--clr-surface: #FFFFFF;
--clr-surface-2: #FAF9FF; /* Slightly lavender-tinted surface */
/* Text */
--clr-text: #1A1535; /* Primary body text */
--clr-text-2: #56507A; /* Secondary — descriptions, subtitles */
--clr-text-3: #8C86AA; /* Tertiary — labels, captions */
--clr-text-4: #B5B0CC; /* Muted — placeholders, disabled */
/* Borders */
--clr-border: rgba(26, 21, 53, 0.06); /* Subtle — most cards */
--clr-border-2: rgba(26, 21, 53, 0.10); /* Standard — nav, inputs */
--clr-border-accent: rgba(123, 97, 255, 0.20); /* Purple-tinted — hover states */
--clr-border-accent-2: rgba(123, 97, 255, 0.08); /* Softer purple border */
/* ══════════════════════════════════════════
COLORS — SEMANTIC / SECONDARY
══════════════════════════════════════════ */
--clr-blue: #3B7DD8; /* Info / secondary link */
--clr-blue-soft: #EBF1FB;
--clr-amber: #D4850A; /* Warning / COEMS brand */
--clr-amber-soft: #FEF3E0;
/* ══════════════════════════════════════════
COLORS — DARK SECTION OVERLAYS
(used when section background = --clr-dark)
══════════════════════════════════════════ */
--clr-dark-surface: rgba(255, 255, 255, 0.04);
--clr-dark-surface-hover: rgba(255, 255, 255, 0.07);
--clr-dark-border: rgba(255, 255, 255, 0.08);
--clr-dark-border-hover: rgba(255, 255, 255, 0.14);
--clr-dark-text: rgba(255, 255, 255, 0.50);
--clr-dark-text-muted: rgba(255, 255, 255, 0.25);
--clr-dark-dot-grid: rgba(255, 255, 255, 0.035); /* bg dot pattern */
/* ══════════════════════════════════════════
COLORS — LOGO (SVG Asset)
Note: The SVG logo uses a blue-to-purple
gradient palette that differs from --clr-primary.
Use these only for logo recreation in code.
══════════════════════════════════════════ */
--logo-blue-1: #3F58DF; /* Top-left dot */
--logo-blue-2: #2563EB; /* Top-center dot */
--logo-blue-3: #4F6EF7; /* Top-right dot */
--logo-violet: #4939C2; /* Mid-left dot */
--logo-purple-1: #7133DE; /* Bottom-left dot */
--logo-purple-2: #802ED5; /* Bottom-center dot */
--logo-purple-3: #9345E9; /* Bottom-right dot */
--logo-text-dark: #201C49; /* "CARGO" text */
--logo-text-purple: #6E2ED9; /* "CENTRUM" text */
/* ══════════════════════════════════════════
GRADIENTS
══════════════════════════════════════════ */
--gradient-cta: linear-gradient(135deg, #6B4EE6, #7B61FF, #9B85FF);
--gradient-hero-dot: radial-gradient(var(--clr-border-2) 1px, transparent 1px);
--gradient-dark-glow-r: radial-gradient(ellipse 65% 55% at 72% 28%, black 30%, transparent 80%);
/* ══════════════════════════════════════════
TYPOGRAPHY
══════════════════════════════════════════ */
--font-heading: 'Outfit', sans-serif; /* H1–H6, nav brand, buttons, eyebrows */
--font-body: 'DM Sans', sans-serif; /* All body text, UI labels */
--font-mono: 'Space Mono', monospace; /* Stats, tags, badges, code, table data */
/* Scale */
--text-xxs: 10px;
--text-xs: 11px;
--text-sm: 13px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 16px;
--text-xl: 17px;
--text-2xl: 18px;
--text-3xl: 24px;
--text-4xl: 28px;
/* Fluid heading sizes (use with clamp in components) */
/* h1 hero: clamp(32px, 4.2vw, 48px) — cargo-centrum-v2 */
/* h1 product: clamp(36px, 4.8vw, 52px) — cargoparse */
/* h1 hws: clamp(36px, 5vw, 56px) — hws */
/* h2 section: clamp(26px, 3.2vw, 36px) */
/* h2 cta: clamp(22px, 3vw, 30px) */
/* h2 feature: clamp(28px, 3.5vw, 40px) */
/* Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* Line heights */
--leading-tight: 1.08; /* Hero headings */
--leading-snug: 1.15;
--leading-normal: 1.6; /* Body default */
--leading-relaxed: 1.65;
--leading-loose: 1.7;
--leading-looser: 1.75; /* Hero sub-copy */
/* Letter spacing */
--tracking-tighter: -0.03em; /* Hero h1 */
--tracking-tight: -0.02em; /* Section h2 */
--tracking-normal: 0em;
--tracking-wide: 0.04em;
--tracking-wider: 0.06em; /* Eyebrows, logo */
--tracking-widest: 0.10em; /* Section labels, mono tags */
/* ══════════════════════════════════════════
SPACING
══════════════════════════════════════════ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-22: 88px;
--space-24: 96px;
/* Section vertical padding */
--section-pad-sm: 56px;
--section-pad-md: 80px;
--section-pad-lg: 90px;
--section-pad-xl: 100px;
/* ══════════════════════════════════════════
LAYOUT
══════════════════════════════════════════ */
--container-max: 1100px; /* Main pages (cargo-centrum-v2, cargoparse) */
--container-max-wide: 1200px; /* HWS — wider layout */
--container-px: 28px; /* Horizontal page gutter */
--container-px-wide: 32px; /* HWS wider gutter */
/* ══════════════════════════════════════════
BORDER RADIUS
══════════════════════════════════════════ */
--radius-xs: 4px; /* Tiny tags, table rows */
--radius-sm: 5px; /* Small inputs, chips */
--radius-md: 6px; /* Medium buttons, small badges */
--radius-lg: 7px; /* Nav buttons */
--radius-xl: 8px; /* Primary buttons, CTA buttons */
--radius-2xl: 9px; /* Icon containers */
--radius-3xl: 10px; /* Indicator badges */
--radius-4xl: 12px; /* About cards, use-case cards */
--radius-5xl: 14px; /* Feature cards, main cards */
--radius-6xl: 16px; /* Large section cards (HWS) */
--radius-7xl: 20px; /* CTA gradient cards */
--radius-full: 9999px;
/* ══════════════════════════════════════════
SHADOWS
══════════════════════════════════════════ */
--shadow-card: 0 1px 3px rgba(26, 21, 53, 0.04),
0 6px 20px rgba(26, 21, 53, 0.04);
--shadow-card-hover: 0 2px 8px rgba(26, 21, 53, 0.06),
0 12px 32px rgba(26, 21, 53, 0.06);
--shadow-btn: 0 6px 20px rgba(123, 97, 255, 0.20);
--shadow-btn-hover: 0 8px 28px rgba(0, 0, 0, 0.15);
--shadow-scatter: 0 4px 24px rgba(26, 21, 53, 0.08);
/* ══════════════════════════════════════════
TRANSITIONS
══════════════════════════════════════════ */
--ease-fast: all 0.15s ease;
--ease-base: all 0.20s ease;
--ease-slow: all 0.25s ease;
--ease-reveal: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
/* ══════════════════════════════════════════
NAV
══════════════════════════════════════════ */
--nav-bg: rgba(248, 247, 252, 0.92);
--nav-blur: blur(20px);
--nav-border: var(--clr-border);
--nav-pad-y: 16px;
/* ══════════════════════════════════════════
Z-INDEX SCALE
══════════════════════════════════════════ */
--z-base: 1;
--z-nav: 100;
--z-modal: 200;
--z-toast: 300;
}
/* ══════════════════════════════════════════
BASE RESET & DEFAULTS
══════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--text-lg);
color: var(--clr-text);
background: var(--clr-bg);
line-height: var(--leading-normal);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ══════════════════════════════════════════
TYPOGRAPHY
══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--clr-dark);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
}
h1 { font-size: clamp(32px, 4.2vw, 48px); font-weight: var(--weight-extrabold); }
h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
p {
color: var(--clr-text-2);
line-height: var(--leading-loose);
}
/* Section label — e.g. "CORE CAPABILITIES" above h2 */
.label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--clr-primary);
margin-bottom: var(--space-3);
}
/* Eyebrow — inline with dot indicator */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--clr-primary);
margin-bottom: var(--space-4);
}
.eyebrow-dot {
width: 6px;
height: 6px;
background: var(--clr-primary);
border-radius: 50%;
animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
/* ══════════════════════════════════════════
LAYOUT
══════════════════════════════════════════ */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-px);
}
.container--wide {
max-width: var(--container-max-wide);
margin: 0 auto;
padding: 0 var(--container-px-wide);
}
/* Section vertical rhythm */
.section { padding: var(--section-pad-lg) 0; }
.section--sm { padding: var(--section-pad-sm) 0; }
.section--lg { padding: var(--section-pad-xl) 0; }
/* Dark section */
.section--dark {
background: var(--clr-dark);
color: var(--clr-dark-text);
position: relative;
overflow: hidden;
}
/* Dark section dot-grid background pattern */
.section--dark::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(var(--clr-dark-dot-grid) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 {
color: #ffffff;
}
.section--dark p {
color: var(--clr-dark-text);
}
.section--dark .label {
color: var(--clr-primary-light);
}
/* ══════════════════════════════════════════
BUTTONS
══════════════════════════════════════════ */
/* Primary — filled purple */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
border-radius: var(--radius-xl);
text-decoration: none;
border: none;
cursor: pointer;
transition: var(--ease-slow);
}
.btn--primary {
padding: 13px 28px;
background: var(--clr-primary);
color: #ffffff;
}
.btn--primary:hover {
background: var(--clr-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-btn);
}
/* Ghost — text only */
.btn--ghost {
padding: 13px 18px;
background: transparent;
color: var(--clr-text-2);
border: none;
}
.btn--ghost:hover { color: var(--clr-dark); }
/* White — for dark / gradient backgrounds */
.btn--white {
padding: 14px 36px;
background: #ffffff;
color: var(--clr-primary);
font-weight: var(--weight-bold);
font-size: var(--text-base);
}
.btn--white:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-btn-hover);
}
/* Nav button — outlined */
.btn--nav {
padding: 7px 14px;
font-size: var(--text-xs);
border-radius: var(--radius-lg);
border: 1px solid var(--clr-border-2);
background: var(--clr-surface);
color: var(--clr-text-2);
}
.btn--nav:hover {
border-color: var(--clr-primary);
color: var(--clr-primary);
background: var(--clr-primary-soft);
}
/* Nav CTA — filled, small */
.btn--nav-cta {
padding: 8px 20px;
font-size: var(--text-xs);
background: var(--clr-primary);
color: #ffffff;
border-radius: var(--radius-lg);
}
.btn--nav-cta:hover {
background: var(--clr-primary-dark);
box-shadow: 0 4px 20px var(--clr-primary-glow);
}
/* ══════════════════════════════════════════
CARDS
══════════════════════════════════════════ */
.card {
background: var(--clr-surface);
border: 1px solid var(--clr-border-2);
border-radius: var(--radius-5xl);
box-shadow: var(--shadow-card);
transition: var(--ease-slow);
}
.card:hover {
box-shadow: var(--shadow-card-hover);
border-color: var(--clr-primary);
transform: translateY(-2px);
}
/* Feature card — on dark background */
.card--dark {
background: var(--clr-dark-surface);
border: 1px solid var(--clr-dark-border);
border-radius: var(--radius-5xl);
backdrop-filter: blur(8px);
transition: var(--ease-slow);
position: relative;
overflow: hidden;
}
.card--dark::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-light));
opacity: 0;
transition: opacity 0.3s ease;
}
.card--dark:hover {
background: var(--clr-dark-surface-hover);
border-color: var(--clr-dark-border-hover);
transform: translateY(-2px);
}
.card--dark:hover::after { opacity: 1; }
/* ══════════════════════════════════════════
ICON CONTAINER
══════════════════════════════════════════ */
.icon-box {
display: flex;
align-items: center;
justify-content: center;
background: var(--clr-primary-soft);
border-radius: var(--radius-3xl);
color: var(--clr-primary);
flex-shrink: 0;
}
.icon-box--sm { width: 32px; height: 32px; border-radius: var(--radius-lg); }
.icon-box--md { width: 38px; height: 38px; border-radius: var(--radius-2xl); }
.icon-box--lg { width: 44px; height: 44px; border-radius: var(--radius-3xl); }
.icon-box--xl { width: 52px; height: 52px; border-radius: var(--radius-4xl); }
/* ══════════════════════════════════════════
BADGES & TAGS
══════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--radius-sm);
}
.badge--primary {
background: var(--clr-primary-soft);
color: var(--clr-primary);
border: 1px solid rgba(123, 97, 255, 0.12);
}
.badge--dark {
background: rgba(123, 97, 255, 0.15);
color: var(--clr-primary-xlight);
}
.badge--ai {
background: var(--clr-primary);
color: #ffffff;
border-radius: var(--radius-xs);
font-size: 8px;
padding: 2px 7px;
}
/* ══════════════════════════════════════════
CTA GRADIENT CARD
══════════════════════════════════════════ */
.cta-card {
background: var(--gradient-cta);
border-radius: var(--radius-7xl);
padding: 60px 48px;
max-width: 700px;
margin: 0 auto;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: -60%; right: -30%;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
pointer-events: none;
}
.cta-card h2 {
color: #ffffff;
font-size: clamp(22px, 3vw, 30px);
margin-bottom: var(--space-4);
position: relative;
}
.cta-card p {
color: rgba(255, 255, 255, 0.70);
font-size: var(--text-md);
margin-bottom: var(--space-8);
position: relative;
line-height: var(--leading-loose);
}
/* ══════════════════════════════════════════
NAV
══════════════════════════════════════════ */
.nav-wrap {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: var(--nav-bg);
backdrop-filter: var(--nav-blur);
border-bottom: 1px solid var(--nav-border);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--nav-pad-y) 0;
}
.nav-divider {
width: 1px;
height: 20px;
background: var(--clr-border-2);
}
.nav-tag {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--clr-text-3);
}
/* ══════════════════════════════════════════
LOGO (CSS-drawn dot grid)
Note: This matches the coded logo in the HTML files.
The SVG asset (assets/SVG/Asset 1.svg) uses a different
blue-to-purple palette — align before production.
══════════════════════════════════════════ */
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.logo-dots {
display: grid;
grid-template-columns: repeat(3, 6px);
gap: 3px;
}
.logo-dots span {
width: 6px;
height: 6px;
border-radius: 2px;
}
/* Row 1 — darkest */
.logo-dots span:nth-child(1) { background: #6B4EE6; }
.logo-dots span:nth-child(2) { background: #7B61FF; }
.logo-dots span:nth-child(3) { background: #9B85FF; }
/* Row 2 */
.logo-dots span:nth-child(4) { background: #7B61FF; }
.logo-dots span:nth-child(5) { background: #8B75FF; }
.logo-dots span:nth-child(6) { background: #AB95FF; }
/* Row 3 — lightest */
.logo-dots span:nth-child(7) { background: #8B75FF; }
.logo-dots span:nth-child(8) { background: #9B85FF; }
.logo-dots span:nth-child(9) { background: #BBA5FF; }
.logo-text {
font-family: var(--font-heading);
font-weight: var(--weight-extrabold);
font-size: 14px;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
line-height: 1.1;
}
.logo-text .t1 { color: var(--clr-dark); display: block; }
.logo-text .t2 { color: var(--clr-primary); display: block; }
/* ══════════════════════════════════════════
REVEAL ON SCROLL
══════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: var(--ease-reveal);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
/* ══════════════════════════════════════════
DIVIDERS
══════════════════════════════════════════ */
.section-divider {
border: none;
border-top: 1px solid var(--clr-border);
}
/* ══════════════════════════════════════════
FOOTER
══════════════════════════════════════════ */
footer {
padding: 28px 0;
border-top: 1px solid var(--clr-border);
background: var(--clr-surface);
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-text {
font-size: var(--text-sm);
color: var(--clr-text-4);
}
.footer-links {
display: flex;
gap: var(--space-5);
}
.footer-links a {
font-size: var(--text-sm);
color: var(--clr-text-3);
text-decoration: none;
transition: var(--ease-base);
}
.footer-links a:hover { color: var(--clr-primary); }
/* ══════════════════════════════════════════
RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */
/* Tablet */
@media (max-width: 900px) {
.footer-inner {
flex-direction: column;
gap: var(--space-3);
text-align: center;
}
}
/* Mobile */
@media (max-width: 600px) {
:root {
--container-px: 20px;
--section-pad-lg: 60px;
--section-pad-xl: 70px;
}
.nav-tag { display: none; }
}