/* Ozsolutions Theme (Antigravity-inspired) -------------------------------------------------- - Dark-by-default page theme (set ) - Nav uses its own theme via [data-theme]: transparentLight | transparentDark | light | dark - Clean tokens + utilities, glass surfaces, gradient accents */ /* ---------- CSS Reset / Base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} :root{ /* Page tokens (light default, overridden by [data-theme="dark"]) */ --bg:#ffffff; --text:rgba(0,0,0,.85); --muted:rgba(0,0,0,.55); --line:rgba(0,0,0,.12); --glass:rgba(0,0,0,.03); --shadow:0 10px 30px rgba(0,0,0,.25); --brand-1:#7dd3fc; /* cyan */ --brand-2:#a78bfa; /* violet */ --mono:"Noto Sans Mono","Noto Sans SC",monospace; --maxw:1200px; --radius-xl:22px; --speed:.35s; } :root[data-theme="dark"]{ --bg:#000000; --text:rgba(243,242,237,.90); --muted:rgba(243,242,237,.60); --line:rgba(243,242,237,.12); --glass:rgba(255,255,255,.05); --shadow:0 10px 30px rgba(0,0,0,.45); } body{ font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; } a{color:inherit;text-decoration:none} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px} /* ---------- Ambient Background (orbs + grid, subtle) ---------- */ .bg-orbs::before,.bg-orbs::after{ content:"";position:fixed;inset:auto;z-index:-2;border-radius:50%;filter:blur(90px);opacity:.22;width:60vmax;height:60vmax;pointer-events:none } .bg-orbs::before{left:-20vmax;top:-10vmax;background:radial-gradient(circle at 30% 30%, var(--brand-2), transparent 60%)} .bg-orbs::after{right:-15vmax;bottom:-10vmax;background:radial-gradient(circle at 70% 70%, var(--brand-1), transparent 60%)} .grid-bg{position:fixed;inset:0;z-index:-1;opacity:.08;background-image:linear-gradient(to right, currentColor .75px, transparent 1px),linear-gradient(to bottom, currentColor .75px, transparent 1px);background-size:40px 40px;color:var(--line);mask-image:radial-gradient(ellipse at 60% 20%, #000 18%, transparent 70%)} /* ---------- NAV (attribute-driven theme like Antigravity) ---------- */ .nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);transition:background-color .3s,color .3s,border-color .3s} .nav .nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px} /* Mono/uppercase look */ .nav{ font-family: var(--mono), "Helvetica Neue","Helvetica","Arial",sans-serif; } .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.4px} .logo{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));box-shadow:inset 0 0 18px rgba(255,255,255,.12),0 6px 18px rgba(124,181,255,.35)} .logo-svg{display:block} .nav-links{display:flex;align-items:center;gap:18px} /* link hover slide (simple variant) */ .nav-links a{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:inherit;opacity:.85;padding:10px 12px;border-radius:10px} .nav-links a:hover{opacity:1} /* Nav themes */ .nav[data-theme="transparentLight"]{color:hsla(0,0%,100%,.85);background-color:rgba(0,0,0,0)} .nav[data-theme="transparentDark"]{color:rgba(0,0,0,.85);background-color:rgba(0,0,0,0)} .nav[data-theme="light"]{color:hsla(0,0%,100%,.85);background-color:rgba(0,0,0,.90);border-bottom:1px solid rgba(255,255,255,.08)} .nav[data-theme="dark"]{color:rgba(0,0,0,.85);background-color:hsla(0,0%,100%,.90);border-bottom:1px solid rgba(0,0,0,.08)} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:600;position:relative;background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.03));border:1px solid var(--line);transition:transform var(--speed), box-shadow var(--speed), background var(--speed);box-shadow:var(--shadow)} .btn:hover{transform:translateY(-1px)} .btn-ghost{background:transparent} .btn-primary{border:0;color:#0b0f14;background:linear-gradient(#fff,#fff) padding-box, linear-gradient(45deg, var(--brand-1), var(--brand-2)) border-box;border:2px solid transparent} .btn-primary .inner{background:linear-gradient(45deg, var(--brand-1), var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700} /* ---------- HERO ---------- */ .hero{padding:min(12vh,120px) 0 80px} .tag{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;font-size:.82rem;color:#0b0f14;font-weight:700;letter-spacing:.4px;background:linear-gradient(90deg, var(--brand-1), var(--brand-2));box-shadow:0 8px 30px rgba(124,181,255,.25)} .hero h1{margin:18px 0 12px;font-size:clamp(2.2rem,5vw,4rem);line-height:1.1;letter-spacing:.5px;font-weight:700;background:linear-gradient(180deg,#fff,#c9d7e6);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p{color:var(--muted);font-size:clamp(1.02rem,1.2vw,1.25rem);max-width:820px;margin:0 auto 26px} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px} /* ---------- CARDS ---------- */ .features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px} .card{background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--radius-xl);padding:22px;min-height:155px;position:relative;overflow:hidden;transition:transform var(--speed), border-color var(--speed)} .card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18)} .card::after{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:radial-gradient(120px 120px at var(--mx,80%) var(--my,20%), rgba(124,181,255,.22), transparent 60%)} .ic{width:28px;height:28px;display:inline-block;margin-bottom:10px} .card h3{margin:4px 0 6px;font-size:1.05rem} .card p{margin:0;color:var(--muted);font-size:.96rem} /* ---------- Sections / Tiles ---------- */ .section{padding:90px 0} .section h2{font-size:clamp(1.6rem,3.2vw,2.2rem);text-align:center;margin:0 0 12px} .section p.lead{margin:0 auto 26px;text-align:center;color:var(--muted);max-width:840px} .showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .tile{border-radius:var(--radius-xl);border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));overflow:hidden;position:relative;min-height:220px;transition:transform var(--speed), border-color var(--speed)} .tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16)} .tile .hdr{padding:18px 20px 8px;font-weight:600;background:linear-gradient(180deg, rgba(124,181,255,.08), transparent 60%)} .tile .body{padding:0 20px 22px;color:var(--muted)} .chip{display:inline-block;font-size:.78rem;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-right:8px;margin-top:8px} /* ---------- Case Studies ---------- */ .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .case{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));transition:transform var(--speed), border-color var(--speed)} .case:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16)} .case .top{padding:18px 20px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg, rgba(167,139,250,.10), transparent 65%)} .case .title{font-weight:700} .case .body{padding:0 20px 18px;color:var(--muted)} .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .pill{font-size:.78rem;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)} .case .cta{display:flex;gap:10px;margin-top:14px} /* ---------- CTA ---------- */ .cta{border-radius:var(--radius-xl);border:1px solid var(--line);background:radial-gradient(150% 150% at 100% 0, rgba(167,139,250,.15), transparent 50%), radial-gradient(150% 150% at 0 100%, rgba(125,211,252,.12), transparent 50%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));padding:26px;text-align:center} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line);color:var(--muted);margin-top:80px} .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0;flex-wrap:wrap} .foot a{color:var(--brand-1)} /* ---------- Responsive ---------- */ .hamb{display:none} @media (max-width:1024px){ .features{grid-template-columns:1fr 1fr} .showcase{grid-template-columns:1fr 1fr} .cases{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .nav-links{display:none} .hamb{display:inline-flex} .features{grid-template-columns:1fr} .showcase{grid-template-columns:1fr} .cases{grid-template-columns:1fr} } /* ---------- Mobile Menu ---------- */ .mobile-menu{position:fixed;inset:70px 14px auto;border-radius:18px;padding:10px;border:1px solid var(--line);background:rgba(15,21,32,.95);backdrop-filter:blur(12px);display:none;z-index:40} .mobile-menu a{display:block;padding:14px 12px;color:var(--muted)} .mobile-menu a:hover{color:var(--text)} .mobile-menu.show{display:block} /* ---------- Misc ---------- */ .card:hover,.tile:hover,.case:hover{cursor:default} @media (prefers-reduced-motion:reduce){*{transition:none!important}}