/* ========================================================================== DigiKnowHow Minimalist Clean White/Black Theme with Orange Accents ========================================================================== */ /* Fonts loaded directly via preconnect in HTML for fast non-blocking rendering */ :root { --primary: #0f172a; /* Deep Crisp Black */ --primary-hover: #1e293b; --secondary: #f97316; /* Warm Vibrant Orange (Highlighting only) */ --secondary-hover: #ea580c; --secondary-glow: rgba(249, 115, 22, 0.25); --bg-body: #ffffff; /* Pure White Body */ --bg-alt: #f8fafc; /* Off-white Section Background */ --bg-card: #ffffff; /* White Card */ --bg-card-hover: #ffffff; --bg-dark-footer: #020617; /* Crisp Black Footer */ --border-light: #e2e8f0; /* Subtle Light Border */ --border-glow: rgba(249, 115, 22, 0.35); --text-main: #0f172a; /* Dark Black Text */ --text-muted: #475569; /* Charcoal Muted Text */ --text-dim: #94a3b8; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 9999px; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 30px -10px rgba(15, 23, 42, 0.12); --shadow-orange: 0 10px 25px rgba(249, 115, 22, 0.25); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; overflow-x: hidden; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #0f172a; line-height: 1.25; word-wrap: break-word; } a { color: var(--text-main); text-decoration: none; transition: var(--transition); } a:hover { color: var(--secondary); } /* Container */ .container { max-width: 1240px; margin: 0 auto; padding: 0 20px; width: 100%; } .social-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; transition: var(--transition); } .social-icon:hover { background: var(--secondary); color: #fff; } /* Header Navbar */ header.app-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-light); } .nav-wrapper { display: flex; align-items: center; justify-content: space-between; height: 76px; } /* Orange Logo Accent */ .logo-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; color: #0f172a; } .logo-brand img { height: 48px; width: auto; max-width: 250px; object-fit: contain; display: block; } .brand-accent { color: var(--secondary); } .main-nav { display: flex; align-items: center; gap: 8px; list-style: none; } .nav-item { position: relative; } .nav-link { padding: 12px 16px; color: #334155; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); transition: var(--transition); } .nav-link:hover { color: var(--secondary); background: #f1f5f9; } .dropdown-box { position: absolute; top: 100%; left: 0; min-width: 240px; background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); z-index: 100; } .nav-item:hover .dropdown-box { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-link { padding: 10px 14px; color: #475569; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); transition: var(--transition); } .dropdown-link:hover { background: #fff7ed; color: var(--secondary); transform: translateX(4px); } .nav-actions { display: flex; align-items: center; gap: 14px; } /* Primary Button with Selective Orange Touch */ .btn-cta { background: #0f172a; color: #ffffff; font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: var(--radius-full); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition); min-height: 44px; } .btn-cta:hover { background: var(--secondary); color: #ffffff; box-shadow: var(--shadow-orange); } /* Mobile Toggle */ .mobile-toggle { display: none; background: #f1f5f9; border: 1px solid var(--border-light); color: #0f172a; font-size: 20px; width: 44px; height: 44px; border-radius: var(--radius-sm); align-items: center; justify-content: center; cursor: pointer; } /* Hero Section */ .hero { padding: 70px 0 90px; position: relative; background: #ffffff; } .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; } .hero-glass-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-md); } /* Orange Highlight Badge */ .badge-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: var(--radius-full); background: #fff7ed; border: 1px solid rgba(249, 115, 22, 0.3); color: var(--secondary); font-size: 13px; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.5px; } .hero-title { font-size: clamp(32px, 5vw, 50px); font-weight: 800; letter-spacing: -1px; margin-bottom: 20px; color: #0f172a; line-height: 1.15; } .hero-title .gradient-text { color: var(--secondary); } .hero-desc { font-size: clamp(15px, 2vw, 18px); color: var(--text-muted); margin-bottom: 32px; max-width: 620px; } .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; } .btn-secondary-glass { background: #f8fafc; border: 1px solid var(--border-light); color: #0f172a; font-weight: 600; font-size: 15px; padding: 12px 26px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition); cursor: pointer; min-height: 44px; } .btn-secondary-glass:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; } /* ========================================================================= Unified Premium Hero Section Styles (Dark Luxury Tech Aesthetic) ========================================================================= */ .hero-premium-section { position: relative; background: #090d16; background-image: radial-gradient(900px circle at 85% 15%, rgba(249, 115, 22, 0.18), transparent 50%), radial-gradient(700px circle at 15% 85%, rgba(59, 130, 246, 0.12), transparent 45%), linear-gradient(135deg, #070b14 0%, #0f172a 60%, #1e1b4b 100%); color: #ffffff; padding: 60px 0 75px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hero-grid-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; opacity: 0.6; } .hero-ambient-glow-1 { position: absolute; top: -10%; right: 10%; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(249, 115, 22, 0.15), transparent 70%); filter: blur(60px); pointer-events: none; } .hero-ambient-glow-2 { position: absolute; bottom: -15%; left: 5%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%); filter: blur(60px); pointer-events: none; } .hero-premium-container { position: relative; z-index: 2; } /* Modern Breadcrumbs */ .hero-breadcrumb-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 28px; } .hero-breadcrumb-nav .bc-link { color: #94a3b8; text-decoration: none; transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } .hero-breadcrumb-nav .bc-link:hover { color: #ffffff; } .hero-breadcrumb-nav .bc-sep { color: #475569; font-size: 10px; } .hero-breadcrumb-nav .bc-active { color: #fb923c; font-weight: 600; } /* Grid Layout */ .hero-premium-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; } /* Left Content */ .hero-pill-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 50px; background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.35); color: #fb923c; font-size: 13px; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.3px; backdrop-filter: blur(8px); } .badge-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #f97316; box-shadow: 0 0 8px #f97316; animation: pulseGlow 2s infinite ease-in-out; } .hero-title-main { font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; line-height: 1.18; color: #ffffff; margin-bottom: 18px; letter-spacing: -0.02em; } .hero-desc-main { font-size: 16px; line-height: 1.7; color: #cbd5e1; margin-bottom: 24px; max-width: 580px; } /* Feature Value Chips */ .hero-feature-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .feat-chip { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); padding: 7px 14px; border-radius: 30px; font-size: 13px; color: #e2e8f0; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(8px); } .feat-chip i { color: var(--secondary); font-size: 12px; } /* Action Buttons */ .hero-buttons-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .btn-hero-primary { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #ffffff; padding: 14px 28px; border-radius: 50px; font-weight: 700; font-size: 15px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 25px -4px rgba(249, 115, 22, 0.5); transition: all 0.25s ease; } .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -4px rgba(249, 115, 22, 0.7); } .btn-hero-primary i { transition: transform 0.2s ease; } .btn-hero-primary:hover i { transform: translateX(3px); } .btn-hero-secondary { background: rgba(255, 255, 255, 0.07); color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.22); padding: 14px 26px; border-radius: 50px; font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; backdrop-filter: blur(10px); transition: all 0.25s ease; } .btn-hero-secondary:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-2px); color: #ffffff !important; } .btn-hero-secondary i { color: #fb923c; } /* Right Showcase Column */ .hero-visual-col { position: relative; } .showcase-card-container { position: relative; background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; padding: 14px; backdrop-filter: blur(20px); box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 40px -10px rgba(249, 115, 22, 0.2); } .showcase-topbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 14px; } .window-dots { display: flex; gap: 6px; } .window-dots .dot { width: 10px; height: 10px; border-radius: 50%; } .window-dots .d-red { background: #ef4444; } .window-dots .d-yellow { background: #f59e0b; } .window-dots .d-green { background: #10b981; } .window-badge { font-size: 11px; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.05); padding: 3px 10px; border-radius: 12px; } .window-badge i { color: #38bdf8; } .showcase-media-frame { border-radius: 14px; overflow: hidden; height: 290px; background: #090d16; position: relative; } .showcase-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .showcase-card-container:hover .showcase-media-frame img { transform: scale(1.03); } /* Floating Stat Chips */ .hero-float-chip { position: absolute; background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(16px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); z-index: 3; } .hero-float-chip.float-top { top: -16px; right: -16px; animation: floatTopAnim 4.5s ease-in-out infinite; } .hero-float-chip.float-bottom { bottom: -16px; left: -16px; animation: floatBottomAnim 4.5s ease-in-out infinite 2.25s; } .chip-icon-circle { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .chip-icon-circle.green { background: rgba(16, 185, 129, 0.2); color: #34d399; } .chip-icon-circle.orange { background: rgba(249, 115, 22, 0.2); color: #fb923c; } .chip-title { font-size: 13px; font-weight: 800; color: #ffffff; line-height: 1.2; } .chip-caption { font-size: 11px; color: #94a3b8; line-height: 1.2; margin-top: 2px; } /* Keyframes */ @keyframes pulseGlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } @keyframes floatTopAnim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes floatBottomAnim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* Mobile Responsive Overrides */ @media (max-width: 991px) { .hero-premium-section { padding: 40px 0 55px; } .hero-premium-grid { grid-template-columns: 1fr; gap: 40px; } .hero-visual-col { max-width: 480px; margin: 0 auto; width: 100%; } .hero-float-chip.float-top { right: 0; } .hero-float-chip.float-bottom { left: 0; } } @media (max-width: 576px) { .hero-float-chip { padding: 8px 12px; } .chip-icon-circle { width: 30px; height: 30px; font-size: 13px; } .chip-title { font-size: 12px; } .chip-caption { font-size: 10px; } .showcase-media-frame { height: 220px; } .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; } } .hero-image-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-light); box-shadow: var(--shadow-md); width: 100%; } .hero-image-wrap img { width: 100%; height: auto; display: block; } /* Quick Audit Banner */ .audit-banner { background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 36px; margin-top: 50px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; box-shadow: var(--shadow-sm); } .audit-form-group { display: flex; gap: 12px; flex-wrap: wrap; } .audit-input { flex: 1; min-width: 200px; background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-full); padding: 14px 22px; color: #0f172a; font-size: 14px; outline: none; transition: var(--transition); min-height: 44px; } .audit-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); } /* Stats Section */ .stats-bar { background: #0f172a; color: #fff; padding: 50px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-item { text-align: center; } .stat-val { font-size: clamp(32px, 4vw, 44px); font-weight: 800; color: var(--secondary); margin-bottom: 4px; } .stat-title { color: #94a3b8; font-size: 14px; font-weight: 500; } /* Services Section */ .services-section { padding: 80px 0; background: #f8fafc; } .section-head { text-align: center; max-width: 700px; margin: 0 auto 50px; } .sub-heading { color: var(--secondary); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; display: block; } .main-heading { font-size: clamp(28px, 4vw, 38px); font-weight: 800; color: #0f172a; margin-bottom: 16px; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .card-service { background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; transition: var(--transition); display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .card-service::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #0f172a; opacity: 0; transition: var(--transition); } .card-service:hover { transform: translateY(-6px); border-color: #cbd5e1; box-shadow: var(--shadow-md); } .card-service:hover::before { opacity: 1; background: var(--secondary); } .card-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #0f172a; margin-bottom: 20px; transition: var(--transition); } .card-service:hover .card-icon { background: #fff7ed; color: var(--secondary); } .card-title { font-size: 22px; color: #0f172a; margin-bottom: 12px; } .card-desc { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; flex-grow: 1; } .card-link { font-weight: 600; font-size: 14px; color: #0f172a; display: flex; align-items: center; gap: 8px; cursor: pointer; } .card-service:hover .card-link { color: var(--secondary); gap: 12px; } /* FAQ Accordion Section */ .faq-section { padding: 80px 0; background: #ffffff; } .faq-accordion { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; } .faq-item { background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); } .faq-question { padding: 20px 24px; font-size: 17px; font-weight: 600; color: #0f172a; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .faq-icon { font-size: 16px; color: #64748b; transition: var(--transition); } .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--secondary); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out, padding 0.35s ease-out; padding: 0 24px; color: var(--text-muted); font-size: 15px; line-height: 1.7; } .faq-item.active .faq-answer { max-height: 300px; padding: 0 24px 20px; } /* Modal Popup */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: var(--transition); padding: 20px; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 36px 28px; max-width: 550px; width: 100%; position: relative; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; } .modal-close { position: absolute; top: 16px; right: 16px; background: #f1f5f9; border: none; color: #475569; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .modal-close:hover { color: #fff; background: #ef4444; } /* Testimonials */ .testimonials-section { padding: 80px 0; background: #ffffff; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .testi-card { background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; } .testi-quote { font-size: 28px; color: var(--secondary); margin-bottom: 12px; } .testi-text { font-size: 15px; font-style: italic; color: #334155; margin-bottom: 20px; } .testi-author { font-weight: 700; color: #0f172a; } .testi-meta { font-size: 13px; color: var(--text-muted); } /* Footer */ footer.app-footer { background: #0f172a; color: #ffffff; padding: 70px 0 30px; } footer.app-footer h4 { color: #ffffff; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.5fr; gap: 36px; margin-bottom: 50px; } .footer-head { font-size: 18px; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-head::after { content: ''; position: absolute; bottom: 0; left: 0; width: 36px; height: 3px; background: var(--secondary); } .footer-nav { list-style: none; } .footer-nav li { margin-bottom: 10px; } .footer-nav a { color: #94a3b8; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } .footer-nav a:hover { color: var(--secondary); transform: translateX(4px); } /* Floating WhatsApp */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4); z-index: 999; } /* Mobile Queries & Form Design System */ .form-group { margin-bottom: 16px; text-align: left; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; gap: 0; } } .form-label { display: block; font-size: 14px; font-weight: 600; color: #334155; margin-bottom: 6px; line-height: 1.3; } .required-star { color: #ef4444; font-weight: 700; margin-left: 2px; } .form-input, .audit-input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select.form-input, select.audit-input, textarea.form-input, textarea.audit-input { display: block; width: 100%; padding: 12px 16px; font-size: 15px; font-family: inherit; color: #0f172a; background-color: #ffffff; background-clip: padding-box; border: 1.5px solid #cbd5e1; border-radius: 10px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; appearance: none; -webkit-appearance: none; } select.form-input, select.audit-input, select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; cursor: pointer; } textarea.form-input, textarea.audit-input, textarea { min-height: 85px; resize: vertical; } .form-input:focus, .audit-input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus { border-color: var(--secondary); outline: 0; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15); } .form-input::placeholder, .audit-input::placeholder { color: #94a3b8; opacity: 1; } .btn-submit { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 14px 24px; font-size: 16px; font-weight: 700; border-radius: 10px; margin-top: 6px; } /* Modal Popup Enhancements */ .modal-overlay, .modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 16px; box-sizing: border-box; } .modal-overlay.active, .modal-backdrop.active { opacity: 1; visibility: visible; } .modal-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px 28px; max-width: 520px; width: 100%; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); max-height: 90vh; overflow-y: auto; box-sizing: border-box; transform: translateY(20px) scale(0.97); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active .modal-card, .modal-backdrop.active .modal-card { transform: translateY(0) scale(1); } /* ========================================================================== Comprehensive Mobile Responsiveness Across All Pages ========================================================================== */ html, body { overflow-x: hidden; max-width: 100%; } /* Ensure all images are responsive */ img { max-width: 100%; height: auto; } /* ===== Tablet Landscape (1024px) ===== */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr !important; gap: 30px !important; } .services-grid, .testimonial-grid, .features-grid, .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; } .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; } .audit-banner { grid-template-columns: 1fr !important; } /* Service page metrics grid */ #metricsGrid { grid-template-columns: repeat(3, 1fr) !important; } /* Features list */ #featuresList { grid-template-columns: repeat(2, 1fr) !important; } } /* ===== Tablet Portrait / Large Phone (768px) ===== */ @media (max-width: 768px) { /* --- Top Bar --- */ .top-bar-flex { flex-direction: column; text-align: center; gap: 8px; } .top-contacts { justify-content: center; font-size: 12px; gap: 10px !important; } .top-contacts span { display: none; } .social-badges { justify-content: center; } /* --- Header / Navbar --- */ .nav-wrapper { height: 68px; } .logo-brand img { height: 38px; } /* Hide CTA button on mobile, keep mobile toggle */ .nav-actions .btn-cta { display: none; } .main-nav { display: none; flex-direction: column; position: absolute; top: 68px; left: 0; width: 100%; background: #ffffff; border-bottom: 1px solid var(--border-light); padding: 16px 20px; box-shadow: var(--shadow-lg); z-index: 1001; max-height: 80vh; overflow-y: auto; } .main-nav.active { display: flex; } .mobile-toggle { display: flex; } /* Mobile dropdown - show on tap via .open class */ .nav-item .dropdown-box { position: static; min-width: 100%; opacity: 0; max-height: 0; overflow: hidden; visibility: hidden; transform: none; box-shadow: none; border: none; padding: 0; transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease; background: #f8fafc; border-radius: var(--radius-sm); } .nav-item.open .dropdown-box { opacity: 1; visibility: visible; max-height: 500px; padding: 8px 0; margin-top: 4px; } /* Disable hover dropdowns on mobile */ .nav-item:hover .dropdown-box { opacity: 0; visibility: hidden; max-height: 0; padding: 0; } .nav-item.open:hover .dropdown-box { opacity: 1; visibility: visible; max-height: 500px; padding: 8px 0; } .dropdown-link { padding: 10px 16px; } .nav-link { padding: 12px 8px; width: 100%; justify-content: space-between; } /* --- Hero Section --- */ .hero { padding: 40px 0 50px !important; } .hero-glass-card { padding: 24px 20px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .hero-title { font-size: 26px !important; } .hero-desc { font-size: 15px !important; } /* --- Grids (all page grids collapse to 1 column) --- */ .services-grid, .testimonial-grid, .features-grid, .portfolio-grid { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } /* Service/Blog/Portfolio page grids with inline styles */ #metricsGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } #featuresList { grid-template-columns: 1fr !important; gap: 10px !important; } #relatedServicesGrid, #relatedArticlesGrid, #relatedProjectsGrid, #blogGrid, #portfolioGrid { grid-template-columns: 1fr !important; gap: 20px !important; } /* --- Content Cards / Containers --- */ .modal-card { padding: 24px 18px; border-radius: 14px; max-height: 85vh; } /* Service page content card */ .article-body-text { font-size: 15px !important; } /* --- Footer bottom bar --- */ .app-footer .container > div:last-child, .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 10px !important; } /* --- Blog Detail Page --- */ /* Share buttons */ .share-btn { padding: 8px 12px !important; font-size: 12px !important; } /* Author bio box stack */ #articleSummaryBox { font-size: 16px !important; padding: 16px 18px !important; } /* --- Filter Pills horizontal scroll --- */ .filter-pill { padding: 6px 14px; font-size: 13px; white-space: nowrap; } /* --- FAQ adjustments --- */ .faq-question { padding: 16px 18px; font-size: 15px; } .faq-answer { font-size: 14px; padding: 0 18px; } .faq-item.active .faq-answer { padding: 0 18px 16px; } /* --- Section padding reduction --- */ .services-section, .testimonials-section, .faq-section { padding: 50px 0 !important; } .section-head { margin-bottom: 30px !important; } .main-heading { font-size: 24px !important; } /* --- Stats bar --- */ .stats-bar { padding: 36px 0 !important; } .stat-val { font-size: 28px !important; } /* --- Card padding --- */ .card-service { padding: 24px !important; } .testi-card { padding: 24px !important; } } /* ===== Small Phone (480px) ===== */ @media (max-width: 480px) { .container { padding: 0 16px !important; } .hero-buttons { flex-direction: column !important; width: 100% !important; } .btn-cta, .btn-secondary-glass { width: 100% !important; justify-content: center !important; } .stats-grid { grid-template-columns: 1fr !important; } /* Metrics grid single column on very small screens */ #metricsGrid { grid-template-columns: 1fr !important; } /* Hero */ .hero-title { font-size: 22px !important; letter-spacing: -0.5px !important; } .hero-desc { font-size: 14px !important; } .hero { padding: 30px 0 40px !important; } /* Audit banner */ .audit-banner { padding: 20px !important; } .audit-form-group { flex-direction: column !important; } .audit-input { min-width: unset !important; width: 100% !important; } /* Card titles */ .card-title { font-size: 18px !important; } .card-desc { font-size: 13px !important; } /* Footer */ .app-footer { padding: 40px 0 20px !important; } .footer-head { font-size: 16px !important; } /* Blog article share buttons - stack vertically */ .share-btn { display: block !important; width: 100% !important; margin-bottom: 6px !important; text-align: center !important; } /* Section head */ .main-heading { font-size: 22px !important; } .sub-heading { font-size: 11px !important; } /* Modal */ .modal-card { padding: 20px 16px !important; } .modal-overlay { padding: 12px !important; } /* FAQ */ .faq-question { font-size: 14px !important; padding: 14px 14px !important; } /* Privacy/Terms content card */ .faq-section { padding: 40px 0 !important; } } /* ===== Extra-specific page overrides (inline style battles) ===== */ /* Service page hero grid override */ @media (max-width: 768px) { .hero .hero-grid[style] { grid-template-columns: 1fr !important; gap: 24px !important; } /* Service page content card padding */ .hero .hero-glass-card[style] { padding: 24px 18px !important; } /* Service/Blog/Portfolio inline padded containers */ div[style*="padding: 48px 36px"], div[style*="padding: 40px 32px"], div[style*="padding: 40px 36px"] { padding: 24px 18px !important; } div[style*="padding: 40px"] { padding: 24px 18px !important; } /* Strategy CTA boxes */ div[style*="background: linear-gradient"][style*="padding: 40px"] { padding: 28px 20px !important; } div[style*="background: linear-gradient"] h2 { font-size: 22px !important; } div[style*="background: linear-gradient"] p { font-size: 14px !important; } /* Blog/Portfolio detail meta bar */ div[style*="display: flex"][style*="gap: 24px"][style*="flex-wrap: wrap"] { gap: 12px !important; } div[style*="display: flex"][style*="gap: 20px"][style*="flex-wrap: wrap"] { gap: 12px !important; } /* Hide vertical dividers in meta bars on mobile */ div[style*="height: 24px"][style*="width: 1px"], div[style*="height: 20px"][style*="width: 1px"] { display: none !important; } /* Blog author bio box stack */ div[style*="display: flex"][style*="gap: 20px"][style*="align-items: center"][style*="border: 1px solid"] { flex-direction: column !important; text-align: center !important; gap: 14px !important; } /* Blog share bar stack */ div[style*="justify-content: space-between"][style*="border-top: 1px solid"] { flex-direction: column !important; gap: 14px !important; } /* Privacy/terms content box */ div[style*="padding: 40px"][style*="border-radius"] { padding: 24px 18px !important; } /* Breadcrumb font size */ .breadcrumb-nav, nav[style*="font-size: 14px"] { font-size: 12px !important; } /* Blog hero section */ .blog-hero-section, .portfolio-hero-section { padding: 36px 0 30px !important; } /* Article title on detail pages */ #articleTitle, #projectTitle, #serviceTitle { font-size: clamp(22px, 5vw, 32px) !important; } /* Deliverables tags wrap tighter */ #deliverablesList { gap: 6px !important; } #deliverablesList span { font-size: 12px !important; padding: 4px 10px !important; } /* Key takeaways box */ #keyTakeawaysWrapper { padding: 18px !important; } #keyTakeawaysWrapper h3 { font-size: 16px !important; } /* Feature pills on service page */ div[style*="background: rgba(249,115,22,0.04)"] { padding: 18px !important; } /* Related section titles */ div[style*="margin-top: 60px"] h3 { font-size: 18px !important; } } /* ===== Touch-friendly targets ===== */ @media (max-width: 768px) { a, button, .nav-link, .dropdown-link, .faq-question, .filter-pill { min-height: 44px; display: flex; align-items: center; } .dropdown-link { min-height: 40px; } }