/* ================================ THEME TOKENS (DEFAULT: DARK) ================================ */ :root{ --bg: #0a0a0f; --surface: #18181b; --primary: #22c55e; --secondary: #f97316; --text: #fafafa; --muted: #a1a1aa; --border: rgba(255,255,255,0.08); /* theme-aware glass + shadow */ --glass: rgba(255,255,255,0.04); --shadow: 0 20px 60px rgba(0,0,0,.45); } /* ================================ LIGHT MODE OVERRIDES (activated by: ) ================================ */ html[data-theme="light"]{ --bg: #f7f8fb; --surface: #ffffff; --text: #0b0f17; --muted: rgba(11,15,23,.68); --border: rgba(11,15,23,0.10); --glass: rgba(0,0,0,0.03); --shadow: 0 18px 50px rgba(11,15,23,.10); } /* ================================ RESET & BASE ================================ */ *{box-sizing:border-box} html,body{height:100%} body{ background: var(--bg); color: var(--text); font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial; -webkit-font-smoothing:antialiased; line-height:1.6; scroll-behavior:smooth; } /* ================================ NOISE OVERLAY (THEME SAFE) ================================ */ /* Default (dark theme): your current noise is fine */ body::after{ content:""; position:fixed; inset:0; pointer-events:none; background:url("assets/images/noise.png"); opacity:.035; mix-blend-mode:overlay; z-index:9999; } /* Light mode: reduce impact + change blend so it doesn't darken */ html[data-theme="light"] body::after{ opacity:.06; /* slightly visible */ mix-blend-mode:soft-light; /* safer for light backgrounds */ filter:invert(1); /* makes dark noise become light grain */ } /* ================================ FIXED NAVBAR OFFSET (GLOBAL) ================================ */ main#mainContent{ padding-top: 96px; } @media (max-width: 991px){ main#mainContent{ padding-top: 88px; } } /* ================================ SECTION BASE (TIGHTER + CONTROLLED) ================================ */ section{ position:relative; padding:72px 0; } @media (max-width:768px){ section{ padding:56px 0; } } /* ================================ TYPOGRAPHY ================================ */ h1,h2,h3,h4,h5{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.03em; } .display-4{ font-weight:800; } .muted{ color:var(--muted); } .section-title{ font-weight:700; margin-bottom:10px; } /* ================================ NAVBAR + LOGO ================================ */ .site-header{ transition:all .35s ease; } .navbar{ background:transparent; } /* THEME-AWARE scrolled state (FIXED) */ .site-header, .site-header.scrolled{ background:rgba(10,10,15,.92); backdrop-filter: blur(10px); border-bottom: 1px; solid rgba(255,255,255,.08); } /* Brand */ .brand-logo{ width:auto; height:75px; flex-shrink:0; filter:drop-shadow(0 8px 24px rgba(34,197,94,.25)); } /* ================================ BUTTONS ================================ */ .btn{ border-radius:6px; padding:10px 20px; font-weight:600; transition:transform .2s ease, box-shadow .2s ease; } .btn-primary-cta{ background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#051010; border:none; box-shadow:0 10px 40px rgba(34,197,94,.25); } .btn-outline-cta{ background:transparent; border:1px solid var(--border); color:var(--text); } .btn:hover{ transform:translateY(-2px); } /* ================================ HERO ================================ */ .hero{ padding-top:140px; } .hero-title{ font-size:2.6rem; line-height:1.05; background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; color:transparent; } .hero-mockup img{ box-shadow: 0 40px 140px rgba(34,197,94,.25), 0 0 0 1px rgba(255,255,255,.05); transform:perspective(1200px) rotateY(-6deg); transition:transform .6s ease; } .hero-mockup img:hover{ transform:perspective(1200px) rotateY(0deg) scale(1.02); } /* ================================ TICKER ================================ */ .ticker{ overflow:hidden; border-radius:10px; } .ticker-inner{ display:flex; gap:3rem; white-space:nowrap; animation:marquee 18s linear infinite; } .ticker-inner span{ padding:8px 14px; background:rgba(255,255,255,.03); border-radius:6px; color:var(--muted); } @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ticker chips in light mode */ html[data-theme="light"] .ticker-inner span{ background: rgba(0,0,0,.04); color: rgba(11,15,23,.70); border: 1px solid rgba(11,15,23,.08); } /* ================================ GLASS PANELS (THEME-AWARE) ✅ FIXED DUPLICATE ================================ */ .glass-panel{ background: var(--glass); border:1px solid var(--border); border-radius:16px; backdrop-filter:blur(12px); box-shadow: var(--shadow); } /* ================================ OUR PHILOSOPHY (INTERACTIVE) ================================ */ .service-card{ height:100%; cursor:pointer; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease; } .service-card:hover, .service-card:focus-within{ transform:translateY(-8px); background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.4); box-shadow:0 30px 80px rgba(34,197,94,.25); } .service-card h6{ transition:color .3s ease; } .service-card:hover h6{ color:var(--primary); } /* ================================ FEATURED PROJECTS ================================ */ .project-row{ transition:transform .4s ease; } .project-thumb img{ width:200px; box-shadow:0 30px 80px rgba(0,0,0,.6); border-radius:14px; } .project-row:hover{ transform:translateY(-6px); } /* Responsive featured projects */ @media (max-width:991px){ .project-row{ flex-direction:column !important; text-align:center; } .project-thumb img{ width:260px; margin-bottom:20px; } } /* ================================ PORTFOLIO GRID ================================ */ .masonry-grid{ column-count:3; column-gap:1.2rem; } .masonry-item{ margin-bottom:1.2rem; break-inside:avoid; } @media(max-width:992px){.masonry-grid{column-count:2}} @media(max-width:576px){.masonry-grid{column-count:1}} /* ================================ SCROLLBAR ================================ */ ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04)); border-radius:10px; } /* scrollbar for light mode */ html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(11,15,23,.14),rgba(11,15,23,.06)); } /* ================================ PORTFOLIO (INDUSTRY STANDARD) ================================ */ .portfolio-image a{ display:block; cursor:zoom-in; } .portfolio-image img{ transition:transform .65s cubic-bezier(.2,.9,.3,1); } .portfolio-header{ margin-bottom:60px; } .portfolio-grid{ margin-top:20px; } .portfolio-card{ height:100%; overflow:hidden; transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; } .portfolio-card:hover{ transform:translateY(-10px); border-color:rgba(34,197,94,.35); box-shadow: 0 40px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(34,197,94,.25); } /* Image */ .portfolio-image{ position:relative; overflow:hidden; border-radius:14px 14px 0 0; } .portfolio-image img{ width:100%; height:230px; object-fit:cover; transition:transform .6s ease; } .portfolio-card:hover img{ transform:scale(1.08); } /* Content */ .portfolio-content{ padding:22px; } .portfolio-category{ display:inline-block; margin-bottom:6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); } .portfolio-content h5{ margin-bottom:6px; } /* Mobile refinement */ @media (max-width:768px){ .portfolio-image img{ height:200px; } } /* ================================ SERVICES – INDUSTRY STANDARD ================================ */ .services-header{ margin-bottom:60px; } .service-card-lg{ height:100%; padding:32px; transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease, background .4s ease; } /* Hover / touch highlight */ .service-card-lg:hover, .service-card-lg:focus-within{ transform:translateY(-10px); border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.06); box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(34,197,94,.25); } /* Top row */ .service-top{ display:flex; align-items:center; gap:14px; margin-bottom:10px; } .service-num{ font-family:'Space Grotesk'; font-size:28px; font-weight:800; color:var(--primary); } /* Feature list */ .service-features li{ display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--muted); font-size:14px; } .service-features .check{ color:var(--primary); font-size:12px; } /* Responsive refinement */ @media (max-width:768px){ .service-card-lg{ padding:26px; } } /* ================================ FOOTER – LOGO + ICONS ================================ */ .site-footer{ margin-top:140px; padding:120px 0 60px; background: radial-gradient(900px 300px at 15% -10%, rgba(34,197,94,.08), transparent), radial-gradient(900px 300px at 85% -10%, rgba(249,115,22,.06), transparent); border-top:1px solid var(--border); } /* footer background in light mode */ html[data-theme="light"] .site-footer{ background: radial-gradient(900px 300px at 15% -10%, rgba(34,197,94,.10), transparent), radial-gradient(900px 300px at 85% -10%, rgba(249,115,22,.08), transparent); } .footer-main{ margin-bottom:80px; } /* Brand */ .footer-logo{ width:auto; height:100px; } .footer-desc{ max-width:420px; color:var(--muted); line-height:1.7; margin-bottom:18px; } /* Social icons */ .footer-socials{ display:flex; gap:14px; } .footer-socials a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.05); color:var(--text); transition:all .3s ease; text-decoration:none; } html[data-theme="light"] .footer-socials a{ background: rgba(0,0,0,.05); } .footer-socials a:hover{ background:var(--primary); color:#04110a; transform:translateY(-4px); } /* Columns */ .footer-sub{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; } .footer-list{ list-style:none; padding:0; margin:0; } .footer-list li{ margin-bottom:10px; font-size:14px; color:var(--muted); } .footer-list a{ color:var(--muted); text-decoration:none; transition:color .3s ease, transform .3s ease; } .footer-list a:hover{ color:var(--primary); transform:translateX(4px); } /* Bottom */ .footer-bottom{ padding-top:30px; border-top:1px solid var(--border); display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); } .footer-dot{ width:4px; height:4px; background:var(--muted); border-radius:50%; } /* Responsive */ @media (max-width:768px){ .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; } } /* ================================ WHATSAPP FLOAT BUTTON ================================ */ .whatsapp-float{ position:fixed; bottom:24px; right:24px; width:56px; height:56px; background:#25D366; color:#04110a; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; z-index:9999; box-shadow: 0 12px 40px rgba(37,211,102,.45), 0 0 30px rgba(37,211,102,.35); transition:transform .3s ease, box-shadow .3s ease; text-decoration:none; } .whatsapp-float:hover{ transform:translateY(-4px) scale(1.05); box-shadow: 0 18px 60px rgba(37,211,102,.6), 0 0 40px rgba(37,211,102,.55); } /* Footer contact icons */ .footer-contact-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; } .footer-contact-list li{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--muted); } .footer-contact-list i{ font-size:16px; color:var(--primary); margin-top:2px; } .footer-contact-list a{ color:var(--muted); text-decoration:none; transition:color .3s ease; } .footer-contact-list a:hover{ color:var(--primary); } /* ================================ CONTACT PAGE – PREMIUM ================================ */ .contact-icon-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; } .contact-icon-list li{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--muted); } .contact-icon-list i{ font-size:18px; color:var(--primary); } /* Map */ .contact-map{ position:relative; cursor:pointer; } .contact-map img{ width:100%; height:220px; object-fit:cover; box-shadow:0 20px 60px rgba(0,0,0,.5); } .map-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.4); color:#fff; opacity:0; transition:.3s; } .contact-map:hover .map-overlay{ opacity:1; } /* Contact methods */ .contact-methods{ display:flex; gap:16px; } .contact-methods label{ display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; color:var(--muted); transition:all .3s ease; } .contact-methods input{ display:none; } .contact-methods label:hover, .contact-methods input:checked + span{ color:var(--primary); } .contact-methods span{ display:flex; align-items:center; gap:8px; } /* ================================ MOBILE NAV DROPDOWN FIX ================================ */ @media (max-width: 991px){ .navbar-collapse{ transition:none !important; } .navbar-collapse:not(.show){ display:none !important; } .navbar-collapse.show{ display:block !important; /* 🔥 Premium dark glass dropdown */ background: linear-gradient( 180deg, rgba(10,10,15,.96), rgba(18,18,25,.92) ); backdrop-filter: blur(14px); padding:28px 24px 32px; margin-top:14px; border-radius:18px; border:1px solid rgba(34,197,94,.18); box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(34,197,94,.12); animation: navDrop .25s ease; } /* Nav links inside dropdown */ .navbar-nav .nav-link{ padding:14px 0; font-size:17px; color:#fafafa; } /* CTA full width */ .navbar .btn-primary-cta{ width:100%; margin-top:18px; text-align:center; } } /* Animation */ @keyframes navDrop{ from{ opacity:0; transform:translateY(-16px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } } /* ================================ THEME TOGGLE BUTTON (NAV) ================================ */ .theme-toggle{ width:44px; height:44px; border-radius:12px; border:1px solid rgba(34,197,94,.35); background:rgba(34,197,94,.10); color:var(--text); display:flex; align-items:center; justify-content:center; box-shadow: 0 0 18px rgba(34,197,94,.25), inset 0 0 12px rgba(34,197,94,.18); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; } .theme-toggle:hover{ transform:translateY(-1px); box-shadow: 0 0 26px rgba(34,197,94,.45), inset 0 0 14px rgba(34,197,94,.25); } .theme-toggle i{ font-size:18px; } /* Smooth theme transition */ html, body, .glass-panel, .site-header, .navbar, section{ transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ================================ SECTION SPACING SYSTEM ================================ */ .section-tight{ padding:48px 0; } .section-loose{ padding:96px 0; } /* Mobile */ @media (max-width:768px){ .section-tight{ padding:40px 0; } .section-loose{ padding:72px 0; } } /* ================================ SUBTLE SECTION BACKGROUNDS ================================ */ .bg-gradient-1{ background: radial-gradient(800px 400px at 10% 10%, rgba(34,197,94,0.08), transparent 60%); } .bg-gradient-2{ background: radial-gradient(700px 400px at 90% 20%, rgba(249,115,22,0.06), transparent 60%); } .bg-divider{ position: relative; } .bg-divider::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); } /* Light mode section backgrounds + divider */ html[data-theme="light"] .bg-gradient-1{ background: radial-gradient(900px 420px at 12% 12%, rgba(34,197,94,0.10), transparent 62%), radial-gradient(900px 420px at 85% 10%, rgba(249,115,22,0.08), transparent 60%); } html[data-theme="light"] .bg-gradient-2{ background: radial-gradient(900px 420px at 88% 18%, rgba(249,115,22,0.10), transparent 60%), radial-gradient(900px 420px at 12% 10%, rgba(34,197,94,0.07), transparent 60%); } html[data-theme="light"] .bg-divider::before{ background:linear-gradient(90deg, transparent, rgba(11,15,23,0.10), transparent); }