/* styles.css */ /* CSS isolation: all component styles are scoped under .ds (applied to ) */ /* Global (intentionally not isolated): enables smooth anchor scrolling */ html { scroll-behavior: smooth; } .ds { --bg: #070b14; --panel: rgba(255, 255, 255, 0.06); --panel2: rgba(255, 255, 255, 0.075); --text: rgba(255, 255, 255, 0.88); --muted: rgba(255, 255, 255, 0.62); --line: rgba(255, 255, 255, 0.12); --line2: rgba(255, 255, 255, 0.14); --shadow: 0 20px 60px rgba(0, 0, 0, 0.45); --r: 18px; --max: 1100px; margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* ✅ critical fallback so the page is never white */ background-color: var(--bg); /* ✅ all layers are valid background-image layers */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cdefs%3E%3CradialGradient id='g' cx='40%25' cy='30%25' r='75%25'%3E%3Cstop offset='0%25' stop-color='%235c8cff' stop-opacity='0.16'/%3E%3Cstop offset='60%25' stop-color='%2300ffd1' stop-opacity='0.06'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06'%3E%3Cpath d='M90 140 C220 80, 340 120, 470 70 S730 80, 820 40'/%3E%3Cpath d='M70 420 C210 380, 320 520, 480 470 S720 410, 860 520'/%3E%3Cpath d='M120 620 C260 560, 400 640, 520 600 S740 560, 860 640'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.06'%3E%3Ccircle cx='90' cy='140' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='260' cy='105' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='470' cy='70' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='650' cy='86' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='820' cy='40' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='70' cy='420' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='310' cy='505' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='480' cy='470' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='720' cy='410' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='860' cy='520' r='4' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.04'%3E%3Cpath d='M0 260 H900 M0 300 H900 M0 340 H900'/%3E%3Cpath d='M120 0 V700 M180 0 V700 M240 0 V700'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient( 1200px 700px at 20% 10%, rgba(92, 140, 255, 0.18), transparent 55% ), radial-gradient( 900px 600px at 85% 15%, rgba(0, 255, 209, 0.1), transparent 55% ), radial-gradient( 900px 600px at 55% 85%, rgba(255, 154, 0, 0.06), transparent 55% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 40% ); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-size: cover, auto, auto, auto, auto; background-attachment: fixed, fixed, fixed, fixed, fixed; color: var(--text); line-height: 1.55; min-height: 100vh; } .ds * { box-sizing: border-box; } .ds a { color: inherit; text-decoration: none; } .ds-container { max-width: var(--max); margin: 0 auto; padding: 0 22px; } .ds-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: linear-gradient( to bottom, rgba(7, 11, 20, 0.78), rgba(7, 11, 20, 0.42) ); border-bottom: 1px solid var(--line); } .ds-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; } /* Brand as a single full logo image (replaces icon + text) */ .ds-brand--img{ gap: 0; /* no extra spacing needed */ white-space: normal; /* logo handles its own width */ } .ds-brand-logo{ height: 100px; /* adjust: 24–32px is typical */ width: auto; display: block; /* If your logo has transparency and you want it to pop on dark background: */ /* filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); */ } .ds-logo { width: 34px; height: 34px; border-radius: 12px; background: linear-gradient( 135deg, rgba(92, 140, 255, 0.95), rgba(0, 255, 209, 0.65) ); box-shadow: 0 10px 30px rgba(92, 140, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18); } .ds-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .ds-links a { font-size: 14px; color: var(--muted); padding: 8px 10px; border-radius: 12px; transition: all 0.18s ease; } .ds-links a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } .ds-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--text); font-weight: 600; font-size: 14px; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; will-change: transform; } .ds-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); } .ds-primary { background: linear-gradient( 135deg, rgba(92, 140, 255, 0.95), rgba(0, 255, 209, 0.62) ); border-color: rgba(255, 255, 255, 0.18); color: rgba(7, 11, 20, 0.95); } .ds-hero { padding: 15px 0 15px; margin: 100px auto; } .ds-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 22px; align-items: stretch; } .ds-card { background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow); } .ds-hero-card { padding: 28px; } .ds-kicker { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--muted); font-size: 13px; } .ds-h1 { margin: 14px 0 10px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.7px; } .ds-lead { margin: 0 0 18px; color: var(--muted); font-size: 16px; max-width: 62ch; } .ds-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .ds-side { padding: 22px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .ds-side::before { content: ""; position: absolute; inset: -40px; background: radial-gradient( 300px 200px at 30% 30%, rgba(92, 140, 255, 0.25), transparent 60% ), radial-gradient( 300px 200px at 70% 50%, rgba(0, 255, 209, 0.16), transparent 60% ); filter: blur(2px); opacity: 0.9; } .ds-side > * { position: relative; } .ds-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; } .ds-stat b { font-size: 14px; } .ds-stat span { color: var(--muted); font-size: 13px; } .ds-section-title { font-size: 18px; letter-spacing: 0.2px; margin: 0 0 10px; } .ds-section-sub { color: var(--muted); margin: 0 0 24px; } .ds-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; /* pushes cards down from bullets */ gap: 18px; /* more space between cards */ } .ds-service { padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .ds-service:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } .ds-icon { width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient( 135deg, rgba(92, 140, 255, 0.35), rgba(0, 255, 209, 0.18) ); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.85); font-size: 12px; letter-spacing: 0.5px; } .ds-service h3 { margin: 0 0 6px; font-size: 15px; } .ds-service p { margin: 0; color: var(--muted); font-size: 13.5px; } .ds-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ds-box { padding: 18px; } .ds-list { margin: 10px 0 0; padding: 0; list-style: none; } .ds-list li { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--muted); display: flex; gap: 10px; } .ds-dot { margin-top: 8px; width: 8px; height: 8px; border-radius: 999px; background: rgba(0, 255, 209, 0.6); flex: 0 0 auto; } /* Lead paragraph under section title */ .ds-section-lead{ margin: 10px 0 26px; color: rgba(255,255,255,.72); max-width: 92ch; line-height: 1.75; } /* Bullet list: 2 columns on desktop, 1 on mobile */ .ds-bullets{ margin: 0 0 100px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; /* two columns */ gap: 26px 34px; /* row gap / column gap */ max-width: 100ch; line-height: 1.7; } .ds-bullets li{ display: flex; gap: 10px; color: var(--muted); line-height: 1.55; } /* Align the dot with the first line of text */ .ds-bullets .ds-dot{ margin-top: 10px; } .ds-legal { margin: 0; color: var(--muted); } .ds-legal b { color: rgba(255, 255, 255, 0.86); } .ds-dim { opacity: 0.9; } .ds-mini { margin-top: 14px; color: rgba(255, 255, 255, 0.52); font-size: 13px; } .ds-footer { padding: 22px 0 36px; border-top: 1px solid var(--line); color: rgba(255, 255, 255, 0.55); font-size: 13px; } /* ========================= Taller sections (more scroll value) ========================= */ .ds-section--tall .ds-section-inner { min-height: 72vh; display: flex; align-items: center; } /* ========================= Visual bands between sections ========================= */ .ds-band { position: relative; padding: 160px 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* soft dark overlay so the band never gets too bright */ .ds-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(7, 11, 20, 0.35), rgba(7, 11, 20, 0.72) ); pointer-events: none; } /* subtle vignette */ .ds-band::after { content: ""; position: absolute; inset: -60px; background: radial-gradient( 700px 260px at 50% 50%, rgba(92, 140, 255, 0.16), transparent 60% ); opacity: 0.7; filter: blur(2px); pointer-events: none; } .ds-band-inner { position: relative; min-height: 400px; display: flex; align-items: flex-end; } .ds-band-caption { display: flex; justify-content: flex-start; width: 100%; } .ds-band-pill { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.65); font-size: 13px; backdrop-filter: blur(8px); } /* --- Band variants (pure CSS “imagery” via SVG data-URIs) --- */ /* Routes + nodes (aircargo network vibe) */ /* .ds-band--routes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='420' viewBox='0 0 1400 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10'%3E%3Cpath d='M60 120 C260 40, 420 210, 620 120 S980 40, 1340 120'/%3E%3Cpath d='M60 300 C280 240, 460 360, 700 300 S1100 240, 1340 300'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Ccircle cx='60' cy='120' r='5'/%3E%3Ccircle cx='360' cy='110' r='5'/%3E%3Ccircle cx='620' cy='120' r='5'/%3E%3Ccircle cx='980' cy='70' r='5'/%3E%3Ccircle cx='1340' cy='120' r='5'/%3E%3Ccircle cx='60' cy='300' r='5'/%3E%3Ccircle cx='460' cy='340' r='5'/%3E%3Ccircle cx='700' cy='300' r='5'/%3E%3Ccircle cx='1100' cy='260' r='5'/%3E%3Ccircle cx='1340' cy='300' r='5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(900px 260px at 30% 30%, rgba(92, 140, 255, 0.18), transparent 60%), radial-gradient(900px 260px at 70% 70%, rgba(0, 255, 209, 0.10), transparent 60%); background-size: cover, auto, auto; background-repeat: no-repeat; background-attachment: fixed, fixed, fixed; } */ .ds-band--routes { background-image: linear-gradient(to bottom, rgba(7,11,20,.35), rgba(7,11,20,.75)), url("img/Main-01.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } /* Warehouse / container grid vibe */ /* .ds-band--warehouse { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='420' viewBox='0 0 1400 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10'%3E%3Cpath d='M60 120 H1340'/%3E%3Cpath d='M60 170 H1340'/%3E%3Cpath d='M60 220 H1340'/%3E%3Cpath d='M60 270 H1340'/%3E%3Cpath d='M60 320 H1340'/%3E%3Cpath d='M220 80 V360'/%3E%3Cpath d='M420 80 V360'/%3E%3Cpath d='M620 80 V360'/%3E%3Cpath d='M820 80 V360'/%3E%3Cpath d='M1020 80 V360'/%3E%3Cpath d='M1220 80 V360'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Crect x='220' y='170' width='200' height='50' rx='8'/%3E%3Crect x='620' y='220' width='200' height='50' rx='8'/%3E%3Crect x='1020' y='120' width='200' height='50' rx='8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(900px 260px at 35% 30%, rgba(92, 140, 255, 0.16), transparent 60%), radial-gradient(900px 260px at 65% 70%, rgba(0, 255, 209, 0.08), transparent 60%); background-size: cover, auto, auto; background-repeat: no-repeat; background-attachment: fixed, fixed, fixed; } */ .ds-band--warehouse { background-image: linear-gradient(to bottom, rgba(7,11,20,.35), rgba(7,11,20,.75)), url("img/Reporting-02.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } /* AI / data nodes vibe */ /* .ds-band--ai { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='420' viewBox='0 0 1400 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10'%3E%3Cpath d='M200 210 L420 120 L640 210 L860 120 L1080 210'/%3E%3Cpath d='M200 210 L420 300 L640 210 L860 300 L1080 210'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Ccircle cx='200' cy='210' r='6'/%3E%3Ccircle cx='420' cy='120' r='6'/%3E%3Ccircle cx='420' cy='300' r='6'/%3E%3Ccircle cx='640' cy='210' r='6'/%3E%3Ccircle cx='860' cy='120' r='6'/%3E%3Ccircle cx='860' cy='300' r='6'/%3E%3Ccircle cx='1080' cy='210' r='6'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(900px 260px at 40% 45%, rgba(92, 140, 255, 0.18), transparent 60%), radial-gradient(900px 260px at 70% 55%, rgba(0, 255, 209, 0.10), transparent 60%); background-size: cover, auto, auto; background-repeat: no-repeat; background-attachment: fixed, fixed, fixed; } */ .ds-band--ai { background-image: linear-gradient(to bottom, rgba(7,11,20,.35), rgba(7,11,20,.75)), url("img/Documentation-02.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } .ds-mailto{ color: rgba(255,255,255,.82); text-decoration: underline; text-decoration-color: rgba(0,255,209,.45); text-underline-offset: 3px; } .ds-mailto:hover{ text-decoration-color: rgba(92,140,255,.65); } /* Responsive tweak: reduce band height on small screens */ @media (max-width: 700px) { .ds-band { padding: 60px 0; } .ds-section { padding: 72px 0; } .ds-section--tall .ds-section-inner { min-height: auto; align-items: stretch; } } /* Responsive */ @media (max-width: 920px) { .ds-hero-grid { grid-template-columns: 1fr; } .ds-links { display: none; } } @media (max-width: 980px) { .ds-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ds-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .ds-two { grid-template-columns: 1fr; } } /* Collapse to one column on smaller screens */ @media (max-width: 820px){ .ds-bullets{ grid-template-columns: 1fr; gap: 10px; } }