@import url(fontawesome-all.min.css); @import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic"); :root { --bg: #0b1220; --bg-elev: #0f172a; /* slate-900 */ --card: #111827; /* gray-900 */ --text: #e5e7eb; /* gray-200 */ --muted: #9ca3af; /* gray-400 */ --brand: #22d3ee; /* cyan-400 */ --brand-2: #60a5fa; /* blue-400 */ --accent: #f59e0b; /* amber-500 */ --ring: rgba(34, 211, 238, 0.5); --maxw: 1200px; --radius: 18px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --header-h: 64px; /* used for anchor offset */ } * { box-sizing: border-box; } html, body { height: 100%; } /* Smooth scrolling and anchor offset support */ html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient( 1200px 600px at 20% -10%, rgba(96, 165, 250, 0.15), transparent 60% ), radial-gradient( 900px 500px at 110% 10%, rgba(34, 211, 238, 0.12), transparent 60% ), var(--bg); line-height: 1.55; } /* Prevent accidental horizontal scrolling on small devices */ html, body { overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--maxw); width: 100%; padding-inline: 1rem; margin-inline: auto; } /* Header */ header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(8px); background: linear-gradient( 180deg, rgba(11, 18, 32, 0.85), rgba(11, 18, 32, 0.45) ); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 800; letter-spacing: 0.2px; } .brand svg { width: 74px; height: 74px; } .brand img { height: 74px; width: auto; } .brand span { font-size: 1.1rem; } .menu { display: flex; align-items: center; gap: 1.2rem; } .menu a { color: var(--muted); font-weight: 500; } .menu a:hover { color: #fff; } .cta-btn { padding: 0.6rem 0.95rem; border-radius: 12px; font-weight: 600; background: linear-gradient(90deg, #233f43, #010810); color: #ffffff; box-shadow: var(--shadow); } /* Mobile nav (CSS-only toggle) */ #nav-toggle { display: none; } .hamburger { display: none; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; /* stack bars vertically */ gap: 6px; /* spacing between bars */ cursor: pointer; z-index: 1100; /* keep above content */ } .hamburger span, .hamburger::before, .hamburger::after { content: ""; display: block; width: 22px; height: 2px; background: #e5e7eb; border-radius: 999px; } .hamburger::before { transform: none; } .hamburger::after { transform: none; } @media (max-width: 900px) { /* Ensure hamburger sits at the far right */ .nav .brand { order: 1; } .nav nav { order: 2; } .nav .hamburger { order: 3; } /* Keep hamburger pinned to top-right line within nav row */ .nav { position: relative; } .nav .hamburger { position: relative; } .menu { position: fixed; top: 64px; right: 0; left: auto; background: var(--bg-elev); border-left: 1px solid rgba(255, 255, 255, 0.06); padding: 1rem; display: grid; gap: 0.6rem; width: min(80vw, 320px); transform: translateX(110%); transition: transform 0.3s ease; z-index: 1000; } /* Toggle menu open when checkbox is checked */ #nav-toggle:checked ~ header nav .menu { transform: translateX(0); } /* JS fallback class on */ body.nav-open header nav .menu { transform: translateX(0); } .hamburger { display: inline-flex; } /* Offset hamburger 5% from the right screen edge */ .nav .hamburger { margin-right: 5vw; } .menu .cta-btn { width: max-content; } } /* Hero */ /* .hero { padding: clamp(3rem, 6vw, 6rem) 0; } */ .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2rem; align-items: center; } .hero-grid > *, .feature > *, .contact > * { /* Allow content to shrink inside grid columns without forcing overflow */ min-width: 0; } .hero h1 { font-size: clamp(2rem, 4.8vw, 3.5rem); line-height: 1.1; margin: 0 0 1rem; } .hero p { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); margin: 0 0 1.5rem; } .hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; } .btn-outline { border: 1px solid rgba(255, 255, 255, 0.18); color: #e5e7eb; padding: 0.6rem 0.95rem; border-radius: 12px; font-weight: 600; } .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; } .kpis .card { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02) ); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); padding: 1rem; text-align: center; } .kpis .big { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 800; } .hero-art { aspect-ratio: 16/10; border-radius: var(--radius); background: linear-gradient( 120deg, rgba(34, 211, 238, 0.12), rgba(96, 165, 250, 0.12) ); border: 1px dashed rgba(255, 255, 255, 0.2); display: grid; place-items: center; color: var(--muted); } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } } /* Sections */ section { padding: clamp(2.5rem, 5vw, 4rem) 0; /* Ensure anchored sections are visible below sticky header */ scroll-margin-top: calc(var(--header-h) + 12px); } .section-head { margin-bottom: 1.2rem; } .eyebrow { color: var(--brand); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; } h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 0.3rem 0 0.6rem; } .lead { color: var(--muted); max-width: 70ch; } /* Cards grid */ .grid { display: grid; gap: 1rem; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); } .card h3 { margin: 0.2rem 0 0.4rem; font-size: 1.15rem; } .tag { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--muted); } /* Feature rows */ .feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.2rem; align-items: center; } .feature.reverse { grid-template-columns: 1.1fr 0.9fr; } .feature .media { aspect-ratio: 16/10; border-radius: var(--radius); background: linear-gradient( 120deg, rgba(34, 211, 238, 0.12), rgba(245, 158, 11, 0.12) ); border: 1px dashed rgba(255, 255, 255, 0.2); display: grid; place-items: center; color: var(--muted); } .feature .media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } @media (max-width: 900px) { .feature, .feature.reverse { grid-template-columns: 1fr; } } /* Logos row */ .logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: center; opacity: 0.85; } .logos div { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 0.9rem; text-align: center; color: var(--muted); } @media (max-width: 900px) { .logos { grid-template-columns: repeat(3, 1fr); } } /* Contact */ .contact { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1rem; } .contact > * { min-width: 0; } @media (max-width: 900px), (orientation: portrait) { .contact { grid-template-columns: 1fr; } } .contact form { display: grid; gap: 0.7rem; } .field { display: grid; gap: 0.35rem; } .field input, .field textarea { width: 100%; padding: 0.8rem 0.9rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: #0b1220; color: #e5e7eb; outline: none; transition: border 0.2s, box-shadow 0.2s; } .field input:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); } .field textarea { min-height: 120px; resize: vertical; } /* Footer */ footer { padding: 2rem 0; color: var(--muted); border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.2); } .foot { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; } .social { display: flex; gap: 0.6rem; } .social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; } /* Utilities */ .muted { color: var(--muted); } .feature .media video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.8rem; color: var(--muted); } /* Place near the existing .hero-art styles */ .hero-art.video { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); background: #000; } .hero-art.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .hero-art.video::after { /* subtle gradient so overlaid text remains legible if you add any */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)); pointer-events: none; } /* PCB section helpers */ #pcb_video, #pcb_dtls { position: static; /* avoid accidental overlays */ } #pcb_video { display: block; width: 100%; max-width: 640px; /* reduce overall video footprint */ aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; margin: 0 auto 1rem; /* center and separate from details */ } #pcb_video video, #pcb_video iframe, #pcb_video img { width: 100%; height: 100%; object-fit: cover; display: block; } #pcb_dtls { display: block; } @media (min-width: 900px) { .pcb-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } }