/* ========================= theme-tech.css High-tech theme layer (scoped) Usage: ========================= */ body.theme-tech{ --bg0:#05040a; --bg1:#0b0612; --p1:#a855f7; --p2:#38bdf8; --p3:#22c55e; --text:#ffffff; --muted:rgba(255,255,255,.72); --glass:rgba(255,255,255,.08); --glass2:rgba(255,255,255,.12); --stroke:rgba(255,255,255,.14); --shadow:0 18px 60px rgba(0,0,0,.45); background: var(--bg0); color: var(--text); } /* banner/header glass */ body.theme-tech .top-banner{ background: linear-gradient(90deg, rgba(168,85,247,.18), rgba(56,189,248,.18)); border-bottom: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(10px); color:#1f1130; } body.theme-tech .top-banner a{ color:#2d0036; font-weight:700; } body.theme-tech header{ position: sticky; top: var(--banner-h, 0px); z-index: 9998; background: linear-gradient(180deg, rgba(10,6,16,.76), rgba(10,6,16,.52)); border-bottom: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(14px); box-shadow: 0 10px 35px rgba(0,0,0,.25); } body.theme-tech nav ul li a, body.theme-tech .menu-label{ color: rgba(255,255,255,.92); } body.theme-tech nav ul li:hover > a, body.theme-tech nav ul li:hover > .menu-label, body.theme-tech nav ul li:focus-within > a, body.theme-tech nav ul li:focus-within > .menu-label{ background: rgba(255,255,255,.10); } body.theme-tech nav ul ul{ background: rgba(20,8,32,.92); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(14px); } /* layout helpers */ body.theme-tech main{ display:block; } body.theme-tech .wrap{ max-width: 1100px; margin: 0 auto; padding: 0 20px; } body.theme-tech .section-pad{ padding: 54px 0; } body.theme-tech .muted{ color: var(--muted); } body.theme-tech a{ color: #9bdcff; } body.theme-tech a:hover{ color: #c7f0ff; } body.theme-tech .hero.hero-tech{ position: relative; overflow: hidden; padding: 92px 20px 64px; text-align: center; background: radial-gradient(1200px 700px at 20% 20%, rgba(168,85,247,.22), transparent 55%), radial-gradient(900px 600px at 80% 20%, rgba(56,189,248,.18), transparent 55%), linear-gradient(180deg, #14031f 0%, #06030b 100%); } body.theme-tech .tech-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; } body.theme-tech .tech-bg .mesh{ position:absolute; inset:-20%; background: radial-gradient(circle at 20% 30%, rgba(168,85,247,.35), transparent 45%), radial-gradient(circle at 70% 20%, rgba(56,189,248,.30), transparent 45%), radial-gradient(circle at 60% 80%, rgba(34,197,94,.20), transparent 50%); filter: blur(30px); animation: drift 10s ease-in-out infinite alternate; } body.theme-tech .tech-bg .grid{ position:absolute; inset:0; background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,.2) 55%, transparent 75%); opacity:.35; transform: perspective(900px) rotateX(55deg); transform-origin: center 30%; animation: gridFloat 6s ease-in-out infinite alternate; } body.theme-tech .tech-bg .glow{ position:absolute; inset:0; background: radial-gradient(520px 320px at 50% 28%, rgba(255,255,255,.12), transparent 65%); opacity:.85; } body.theme-tech .tech-bg .noise{ position:absolute; inset:0; background-image: url("images/noise.png"); opacity:.06; mix-blend-mode: overlay; } body.theme-tech .hero-inner{ position:relative; z-index:1; } body.theme-tech .hero-badges{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; } body.theme-tech .badge{ border:1px solid var(--stroke); background: linear-gradient(180deg, var(--glass2), rgba(255,255,255,.03)); color: rgba(255,255,255,.88); padding:8px 12px; border-radius:999px; font-weight:700; font-size:.85rem; backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,.25); } body.theme-tech .hero h1{ font-size: 2.6rem; line-height: 1.08; margin: 0 auto 10px; max-width: 980px; letter-spacing: -0.03em; } body.theme-tech .hero .hero-sub{ margin: 10px auto 18px; max-width: 900px; color: var(--muted); font-size: 1.06rem; } body.theme-tech .cta-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top: 16px; } /* buttons extend your .btn from style.css */ body.theme-tech .btn{ position:relative; overflow:hidden; } body.theme-tech .btn-glow{ background: linear-gradient(90deg, var(--p1), var(--p2)); box-shadow: 0 18px 45px rgba(168,85,247,.25); } body.theme-tech .btn-glass{ background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border: 1px solid var(--stroke); backdrop-filter: blur(10px); } body.theme-tech .btn-small{ padding:10px 14px; font-size:.95rem; } body.theme-tech .btn::after{ content:""; position:absolute; inset:-2px; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.25), transparent 65%); transform: translateX(-120%); transition: transform .6s ease; border-radius: inherit; pointer-events:none; } body.theme-tech .btn:hover::after{ transform: translateX(120%); } /* sections */ body.theme-tech .dark-band{ background: radial-gradient(1000px 550px at 30% 0%, rgba(168,85,247,.10), transparent 60%), radial-gradient(900px 520px at 70% 0%, rgba(56,189,248,.10), transparent 60%), linear-gradient(180deg, #0a0610 0%, #08040d 100%); color: #fff; } /* cards */ body.theme-tech .card-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; } body.theme-tech .card.card-tech{ background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 18px; backdrop-filter: blur(10px); color: rgba(255,255,255,.92); box-shadow: 0 10px 35px rgba(0,0,0,.25); } body.theme-tech .card.card-tech h3{ margin: 10px 0 8px; color:#fff; } body.theme-tech .card.card-tech p{ margin: 0 0 14px; color: rgba(255,255,255,.76); } body.theme-tech .card.card-tech .icon{ font-size: 1.5rem; } body.theme-tech .tilt{ transform-style: preserve-3d; } body.theme-tech .card, body.theme-tech .project-card{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.theme-tech .card:hover, body.theme-tech .project-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(0,0,0,.35); border-color: rgba(255,255,255,.20); } /* proof panel */ body.theme-tech .proof-panel{ margin: 0 auto 18px; max-width: 1100px; border-radius: 18px; padding: 22px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 55px rgba(0,0,0,.40); backdrop-filter: blur(12px); } body.theme-tech .proof-panel h2, body.theme-tech .proof-panel h3{ margin: 0 0 10px; font-size: 1.6rem; background-image: linear-gradient(90deg, var(--p2), var(--p1)); -webkit-background-clip:text; background-clip:text; color:transparent; } body.theme-tech .proof-panel p{ margin: 0 0 14px; color: rgba(255,255,255,.72); } body.theme-tech .proof-panel ol, body.theme-tech .proof-panel ul{ padding-left: 20px; margin: 0; } body.theme-tech .proof-panel li{ margin: 8px 0; color: rgba(255,255,255,.88); } body.theme-tech .proof-panel a{ color: #9bdcff; text-decoration: none; border-bottom: 1px solid rgba(155,220,255,.35); padding-bottom: 1px; } body.theme-tech .proof-panel a:hover{ border-bottom-color: rgba(155,220,255,.75); } /* project cards */ body.theme-tech .project-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; margin-top: 14px; } body.theme-tech .project-card{ border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 12px 35px rgba(0,0,0,.30); display:flex; flex-direction:column; min-height: 280px; } body.theme-tech .project-card img{ width:100%; height: 160px; object-fit: cover; display:block; filter: saturate(1.05); } body.theme-tech .project-body{ padding: 14px; } body.theme-tech .project-body h4{ margin: 0 0 6px; color: #9bdcff; font-size: 1.05rem; } body.theme-tech .project-body p{ margin: 0 0 10px; color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.35; } body.theme-tech .project-body a{ display:inline-block; margin-top:auto; color: rgba(255,255,255,.92); font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; } body.theme-tech .project-body a:hover{ border-bottom-color: rgba(255,255,255,.65); } /* reveal */ body.theme-tech .reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } body.theme-tech .reveal.in{ opacity:1; transform: translateY(0); } /* footer */ body.theme-tech footer{ padding: 26px 20px; text-align:center; color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(10,6,16,.55), rgba(10,6,16,.85)); } /* animations */ @keyframes drift{ from { transform: translate3d(-2%, -2%, 0) scale(1.02); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } } @keyframes gridFloat{ from { opacity:.28; transform: perspective(900px) rotateX(55deg) translateY(0); } to { opacity:.40; transform: perspective(900px) rotateX(55deg) translateY(14px); } } @media (max-width: 900px){ body.theme-tech .hero.hero-tech{ padding: 78px 16px 54px; } body.theme-tech .hero h1{ font-size: 2.1rem; } body.theme-tech .proof-panel{ padding: 18px; } } @media (max-width: 640px){ body.theme-tech .hero.hero-tech{ padding: 62px 16px 46px; } body.theme-tech .hero h1{ font-size: 1.7rem; } } @media (prefers-reduced-motion: reduce){ body.theme-tech .tech-bg .mesh, body.theme-tech .tech-bg .grid { animation: none !important; } body.theme-tech .btn::after{ transition:none; } body.theme-tech .card, body.theme-tech .project-card{ transition:none; } body.theme-tech .reveal{ transition:none; opacity:1; transform:none; } } /* === NAV ALIGNMENT FIX (mix of +