:root{ --bg:#0f0f10; --card:#1e1f22; --text:#eaeaea; --muted:#b7bcc5; --brand:#80FF44; --brand-2:#C6FF4B; --max:1200px; --rad:20px; --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px; } /* Prevent any horizontal scrolling (avoid 100vw issues) */ html, body { overflow-x: hidden; max-width: 100%; } /* Safety guards for media in case an asset is wider than its container */ video, iframe, img { max-width: 100%; height: auto; display: block; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,"Helvetica Neue",Arial,sans-serif; color:var(--text); background:linear-gradient(180deg,#0b0b0c, #121315 40%, #0f0f10); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} p{line-height:1.7;color:var(--muted)} /* ----- Header / Nav ----- */ header{ position:sticky;top:0;z-index:50; background:rgba(15,15,16,.7); backdrop-filter:blur(10px); border-bottom:1px solid #1b1c1f } nav{ max-width:var(--max); margin:auto; display:flex; align-items:center; gap:var(--space-4); padding:12px var(--space-3); } .logo img{height:40px; width:auto;} .nav-links{ list-style:none; display:flex; gap:var(--space-4); margin-left:auto; align-items:center; } .nav-links a{ padding:10px 12px; border-radius:999px; font-weight:500; transition:opacity .25s, transform .2s, background .25s, color .25s, border-color .25s; } .nav-links a:hover{opacity:.8; transform:translateY(-1px)} .nav-links a.active{ background:var(--brand); color:#0c100c; border:1px solid var(--brand-2); } /* Hamburger + Mobile menu */ .hamburger{display:none; flex-direction:column; gap:4px; margin-left:auto; cursor:pointer} .hamburger span{width:24px; height:2px; background:#fff; border-radius:2px} /* Off-canvas mobile menu (fixed + above header + scrollable) */ .mobile-menu{ position:fixed; inset:0; z-index:1000; background:#0f0f10; transform:translateX(100%); transition:transform .3s ease; padding:24px; display:flex; flex-direction:column; gap:16px; height:100dvh; /* full dynamic viewport height */ overflow-y:auto; /* scroll all items */ -webkit-overflow-scrolling:touch; } .mobile-menu.open{transform:none} .mobile-menu a{ padding:12px 8px; border-bottom:1px solid #1b1c1f; border-radius:8px; transition:background .25s, color .25s, border-color .25s; } .mobile-menu a:hover{background:#1c1d20} .mobile-menu a:active{ background:var(--brand); color:#0c100c; } .mobile-menu a.active{ background:var(--brand); color:#0c100c; border:1px solid var(--brand-2); } /* ----- Hero ----- */ .hero{ position:relative; min-height:70vh; display:grid; place-items:center; padding:var(--space-6) var(--space-3); background: radial-gradient(800px 400px at 10% -10%, rgba(128,255,68,.12), transparent 60%), radial-gradient(800px 400px at 90% 10%, rgba(198,255,75,.08), transparent 60%); } .hero-content{ max-width:var(--max); width:100%; margin:auto; text-align:center; } .hero h1{ font-size:clamp(32px,6vw,64px); line-height:1.1; margin:0 0 12px; } .hero h1 span{color:var(--brand)} .hero p{font-size:clamp(16px,2.2vw,20px)} /* ----- Buttons (global) ----- */ .cta-btn, button { display:inline-block; margin-top:20px; padding:12px 20px; background:#2a2a2a; border:1px solid #34363b; border-radius:999px; font-weight:600; color:var(--text); cursor:pointer; transition:background .25s, color .25s, border-color .25s, box-shadow .2s; } .cta-btn:hover, button:hover { background:#34363b; } .cta-btn:active, button:active { background:var(--brand); border-color:var(--brand-2); color:#0c100c; } /* ----- Layout sections ----- */ .section{max-width:var(--max); margin:auto; padding:var(--space-6) var(--space-3)} /* Feature cards */ .features{ max-width:var(--max); margin:auto; padding:var(--space-5) var(--space-3); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); } /* Make cards work for both <div> and <a> */ .card{ background:var(--card); border:1px solid #2a2d31; border-radius:var(--rad); padding:var(--space-4); transition:transform .25s, box-shadow .25s, border-color .25s, background .25s; } .card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.4); border-color:#3a3d42; } a.card{display:block; cursor:pointer} a.card:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(128,255,68,.18), 0 0 0 1px var(--brand); } /* Subtle brand-tinted hover only for clickable cards */ .features a.card:hover{ background: linear-gradient(0deg, rgba(128,255,68,.06), rgba(128,255,68,.06)), var(--card); } .card h2{margin:0 0 6px} .card p{margin:0} /* Page header */ .page-header{ text-align:center; padding:var(--space-6) var(--space-3); } .page-header h1{font-size:clamp(28px,5vw,48px); margin:0 0 10px} .page-header .highlight{color:var(--brand)} /* About layout */ .about-container{ max-width:var(--max); margin:auto; padding:var(--space-5) var(--space-3); display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-5); align-items:center; } .about-text h2{margin:0 0 6px} .about-text p{margin:0 0 18px} .about-image img{border-radius:var(--rad); border:1px solid #2a2d31} /* Contact cards */ .contact-info{ max-width:var(--max); margin:auto; padding:var(--space-5) var(--space-3); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); } .contact-card{background:var(--card); border:1px solid #2a2d31; border-radius:var(--rad); padding:var(--space-4)} /* Footer */ footer{border-top:1px solid #1b1c1f; padding:20px; text-align:center; color:#999} /* ----- Animations ----- */ .fade-in{opacity:0; transform:translateY(10px); transition:all .6s ease-out} .fade-in.revealed{opacity:1; transform:none} .slide-up{opacity:0; transform:translateY(18px); transition:all .7s ease-out} .slide-up.revealed{opacity:1; transform:none} /* ----- Responsive ----- */ @media (max-width: 900px){ .features{grid-template-columns:1fr} .contact-info{grid-template-columns:1fr} .about-container{grid-template-columns:1fr; text-align:left} .nav-links{display:none} .hamburger{display:flex} } /* ----- Typography tweaks for cards ----- */ .card h2 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.25rem; margin-bottom: 8px; } .card p { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.95rem; color: var(--muted); } /* ----- Contact form section ----- */ .contact-form { max-width: 600px; margin: 40px auto; background: var(--card); padding: 24px; border-radius: var(--rad); border: 1px solid #2a2d31; text-align: center; } .contact-form h2 { margin-bottom: 16px; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #34363b; border-radius: 8px; background: #1c1d20; color: var(--text); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--brand); } /* Status message after submit */ #form-status { margin-top: 16px; font-size: 0.95rem; color: var(--brand); font-weight: 500; display: none; } #form-status.error { color: #ff6b6b; } /* Contact form button — brand colours */ .contact-form .cta-btn { width: 100%; background: #1f2124; border: 1px solid #34363b; color: var(--text); border-radius: 999px; font-weight: 600; padding: 12px 20px; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .2s; } .contact-form .cta-btn:hover { background: #282c30; border-color: #3a3f45; } .contact-form .cta-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(128,255,68,.18), 0 0 0 1px var(--brand); } .contact-form .cta-btn:active { background: var(--brand); border-color: var(--brand-2); color: #0c100c; } .contact-form .cta-btn:disabled { opacity: .55; cursor: not-allowed; } /* ===== Project detail layout + responsive video ===== */ .project-detail{ max-width: var(--max); margin: auto; padding: var(--space-5) var(--space-3); display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-5); align-items: start; } .project-text h2{ margin: 0 0 10px; } .project-text h3{ margin: 16px 0 8px; } .video-wrapper{ width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--rad); border: 1px solid #2a2d31; overflow: hidden; } .video-wrapper video, .video-wrapper iframe{ width: 100%; height: 100%; display: block; } /* Stack on mobile */ @media (max-width: 900px){ .project-detail{ grid-template-columns: 1fr; gap: var(--space-4); } }