/* ========================================================================== Fayzar Computer & Digital Center - Design System Version: 4.1 (SEO-Optimized, Floating CTA, Performance-Tuned) NOTE: Google Fonts loaded via in HTML (no @import to avoid double-load and render-blocking penalty). Do NOT re-add @import here. ========================================================================== */ @font-face { font-family: 'SutonnyMJ'; src: url('../fonts/SutonnyMJ-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ========================================================================== DESIGN TOKENS (Single Source of Truth for Brand & Theme) ========================================================================== */ :root { /* Typography */ --font-heading: 'Noto Sans Bengali', 'Outfit', sans-serif; --font-body: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif; --font-sutonny: 'SutonnyMJ', SutonnyOMJ, Arial, sans-serif; /* Brand accents (emerald identity, preserved & modernized) */ --primary: #059669; --primary-strong: #047857; --primary-deep: #065f46; --primary-soft: #ecfdf5; --accent: #d97706; --accent-soft: #fef3c7; /* Surfaces */ --surface-bg: #f8fafc; --surface-alt: #f1f5f9; --surface-card: #ffffff; --surface-muted: #e2e8f0; --surface-elevated: #ffffff; /* Text */ --text-body: #334155; --text-heading: #1e293b; --text-muted: #64748b; /* Borders & shadow */ --border-color: #cbd5e1; --border-soft: #e2e8f0; /* Glow */ --primary-glow: rgba(5, 150, 105, 0.35); --accent-glow: rgba(217, 119, 6, 0.35); --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.03); --shadow-hover: 0 20px 35px -5px rgba(5, 150, 105, 0.16), 0 10px 15px -5px rgba(15, 23, 42, 0.06); } /* Deep night-mode surfaces (High-contrast canvas vs elevated cards) */ .dark { --primary: #10b981; --primary-strong: #059669; --primary-deep: #065f46; --primary-soft: rgba(16, 185, 129, 0.15); --accent: #fbbf24; --accent-soft: rgba(245, 158, 11, 0.15); --surface-bg: #060a12; --surface-alt: #080e1c; --surface-card: #16243d; --surface-muted: #1e2e4a; --surface-elevated: #1b2a47; --text-body: #f8fafc; --text-heading: #ffffff; --text-muted: #cbd5e1; --border-color: rgba(255, 255, 255, 0.16); --border-soft: rgba(255, 255, 255, 0.14); --primary-glow: rgba(16, 185, 129, 0.4); --accent-glow: rgba(251, 191, 36, 0.35); --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); --shadow-hover: 0 20px 45px -5px rgba(16, 185, 129, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.4); } /* Legacy aliases kept for backward compatibility with v3 markup */ :root { --primary-hover: var(--primary-strong); --primary-light: var(--primary-soft); --primary-dark: var(--primary-deep); --accent-hover: #b45309; --accent-light: var(--accent-soft); --bg-main: var(--surface-bg); --bg-section-alt: var(--surface-alt); --bg-card: var(--surface-card); --bg-card-solid: var(--surface-card); --bg-muted: var(--surface-muted); --text-main: var(--text-body); --border-card: var(--border-soft); --shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.06); } /* ========================================================================== BASE ========================================================================== */ body { font-family: var(--font-body); background-color: var(--surface-bg); color: var(--text-body); transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1); overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-heading); letter-spacing: -0.02em; color: var(--text-heading); } .font-sutonny { font-family: var(--font-sutonny) !important; } /* ========================================================================== SURFACE HELPERS (map tokens to utility classes for consistent theming) ========================================================================== */ .surface-bg { background-color: var(--surface-bg); } .surface-alt { background-color: var(--surface-alt); } .surface-card { background-color: var(--surface-card); } .surface-elevated { background-color: var(--surface-elevated); } .surface-muted { background-color: var(--surface-muted); } .text-body-c { color: var(--text-body); } .text-heading-c { color: var(--text-heading); } .text-muted-c { color: var(--text-muted); } /* ========================================================================== GLASS HEADER ========================================================================== */ .glass-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-soft); } .dark .glass-header { background: rgba(11, 17, 32, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* ========================================================================== CARDS (strong contrast, visual depth, category accents) ========================================================================== */ .service-card, .notice-card, .tool-box-card { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 1.25rem; box-shadow: var(--shadow-card); transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .service-card:hover, .notice-card:hover, .tool-box-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--primary); } .card-accent-land { border-top: 4px solid #059669 !important; } .card-accent-online { border-top: 4px solid #2563eb !important; } .card-accent-computer { border-top: 4px solid #7c3aed !important; } .card-accent-job { border-top: 4px solid #d97706 !important; } .card-accent-college { border-top: 4px solid #9333ea !important; } /* ========================================================================== HERO ========================================================================== */ .hero-gradient { background: linear-gradient(135deg, #059669 0%, #0d9488 55%, #0284c7 100%); position: relative; } .dark .hero-gradient { background: radial-gradient(120% 120% at 50% 0%, #064e3b 0%, #0f272a 45%, #0b1120 100%); border-bottom: 1px solid rgba(16, 185, 129, 0.25); } .hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 32px 32px, 64px 64px, 64px 64px; pointer-events: none; } /* ========================================================================== SECTIONS ========================================================================== */ .section-alt { background-color: var(--surface-bg); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .dark .section-alt { background-color: var(--surface-alt); border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .section-tinted { background: linear-gradient(180deg, var(--surface-bg) 0%, var(--surface-alt) 100%); } .dark .section-tinted { background: linear-gradient(180deg, var(--surface-bg) 0%, var(--surface-alt) 100%); } /* ========================================================================== GLOW & DECORATION ========================================================================== */ .glow-orb { position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; opacity: 0.5; } .glow-btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #0d9488 100%); box-shadow: 0 4px 15px -2px var(--primary-glow); transition: all 0.25s ease; } .glow-btn-primary:hover { background: linear-gradient(135deg, var(--primary-strong) 0%, #0f766e 100%); box-shadow: 0 8px 25px 0 var(--primary-glow); transform: translateY(-2px); } /* ========================================================================== SCROLLBAR ========================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--surface-muted); } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* ========================================================================== ANIMATIONS ========================================================================== */ .marquee-container { overflow: hidden; white-space: nowrap; position: relative; } .marquee-content { display: inline-block; animation: marquee 35s linear infinite; } .marquee-container:hover .marquee-content { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .status-dot-open { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse-green { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); } 70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .fade-in { animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .modal-backdrop { background-color: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .rotate-card-enter { animation: rotateCardEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes rotateCardEnter { 0% { opacity: 0; transform: translateY(16px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .stagger-1 { animation-delay: 0.05s; } .stagger-2 { animation-delay: 0.12s; } .stagger-3 { animation-delay: 0.19s; } .stagger-4 { animation-delay: 0.26s; } .stagger-5 { animation-delay: 0.33s; } .stagger-6 { animation-delay: 0.40s; } .cycle-progress-bar { transition: width 0.1s linear; } .carousel-nav-btn { transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .carousel-nav-btn:hover { transform: scale(1.1); } .carousel-nav-btn:active { transform: scale(0.95); } .tool-featured-highlight { position: relative; border: 2px solid var(--primary) !important; box-shadow: 0 0 20px -2px var(--primary-glow); } .dark .tool-featured-highlight { border: 2px solid #10b981 !important; box-shadow: 0 0 25px -2px rgba(16, 185, 129, 0.5); } .pulse-highlight-badge { animation: badgePulse 2.5s infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.6); } 50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); } } .file-dropzone-active { border-color: var(--primary) !important; background-color: rgba(5, 150, 105, 0.08) !important; transform: scale(1.01); } /* ========================================================================== AI PROCESSING ANIMATIONS ========================================================================== */ @keyframes scanLaser { 0% { top: 0%; opacity: 0.8; } 50% { top: 90%; opacity: 1; } 100% { top: 0%; opacity: 0.8; } } .animate-scan-laser { animation: scanLaser 2.2s ease-in-out infinite; } @keyframes shimmerProgress { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } .animate-progress-shimmer { animation: shimmerProgress 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ========================================================================== LINE CLAMP ========================================================================== */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== FLOATING CTA BUTTONS (WhatsApp + Call Stack) Fixed bottom-right corner. Hidden on mobile (<1024px) because the mobile bottom-nav-bar already provides WhatsApp access. ========================================================================== */ .floating-cta-stack { position: fixed; bottom: 2rem; right: 1.5rem; z-index: 9000; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; /* Hidden on mobile — mobile nav bar covers this */ display: none; } /* Show only on large screens (desktop/tablet) */ @media (min-width: 1024px) { .floating-cta-stack { display: flex; } } /* Base button style */ .floating-cta-btn { position: relative; width: 3.25rem; height: 3.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 1.375rem; color: #ffffff; text-decoration: none; box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.3); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; cursor: pointer; } .floating-cta-btn:hover { transform: scale(1.12) translateY(-2px); } /* WhatsApp button — green */ .floating-cta-btn.whatsapp-btn { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); box-shadow: 0 6px 20px -4px rgba(37, 211, 102, 0.55); animation: floatPulseGreen 3s ease-in-out infinite; } .floating-cta-btn.whatsapp-btn:hover { box-shadow: 0 10px 30px -4px rgba(37, 211, 102, 0.7); } /* Call button — emerald/teal */ .floating-cta-btn.call-btn { background: linear-gradient(135deg, #059669 0%, #0891b2 100%); box-shadow: 0 6px 20px -4px rgba(5, 150, 105, 0.5); animation: floatPulseEmerald 3s ease-in-out infinite 1.5s; } .floating-cta-btn.call-btn:hover { box-shadow: 0 10px 30px -4px rgba(5, 150, 105, 0.65); } /* Tooltip (appears to the left on hover) */ .cta-tooltip { position: absolute; right: calc(100% + 0.65rem); top: 50%; transform: translateY(-50%); background: rgba(15, 23, 42, 0.92); color: #f8fafc; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; white-space: nowrap; padding: 0.35rem 0.75rem; border-radius: 0.6rem; pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; transform: translateY(-50%) translateX(6px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); } .cta-tooltip::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: rgba(15, 23, 42, 0.92); } .floating-cta-btn:hover .cta-tooltip, .floating-cta-btn:focus .cta-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } /* Pulse glow animations */ @keyframes floatPulseGreen { 0%, 100% { box-shadow: 0 6px 20px -4px rgba(37, 211, 102, 0.55); } 50% { box-shadow: 0 6px 28px -2px rgba(37, 211, 102, 0.8), 0 0 0 6px rgba(37, 211, 102, 0.12); } } @keyframes floatPulseEmerald { 0%, 100% { box-shadow: 0 6px 20px -4px rgba(5, 150, 105, 0.5); } 50% { box-shadow: 0 6px 28px -2px rgba(5, 150, 105, 0.75), 0 0 0 6px rgba(5, 150, 105, 0.1); } } /* Dark mode adjustments */ .dark .cta-tooltip { background: rgba(241, 245, 249, 0.95); color: #0f172a; border-color: rgba(0,0,0,0.1); } .dark .cta-tooltip::after { border-left-color: rgba(241, 245, 249, 0.95); } /* ========================================================================== STATIC SERVICE CARDS (SEO-friendly no-JS fallback) These are shown immediately by default; JS replaces them once loaded. ========================================================================== */ .svc-static-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .svc-static-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .svc-static-grid { grid-template-columns: repeat(3, 1fr); } } .svc-static-card { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 1.25rem; box-shadow: var(--shadow-card); padding: 1.5rem; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .svc-static-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .svc-static-card__icon { width: 3rem; height: 3rem; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: 1rem; flex-shrink: 0; color: #fff; } .svc-static-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--text-heading); margin-bottom: 0.35rem; } .svc-static-card__desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.85rem; } .svc-static-card__checklist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-soft); padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; } .svc-static-card__checklist li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.72rem; color: var(--text-body); line-height: 1.45; } .svc-static-card__checklist li::before { content: '✓'; color: var(--primary); font-weight: 900; font-size: 0.75rem; flex-shrink: 0; margin-top: 1px; } .svc-static-card__checklist-label { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; } /* Card accent borders (top stripe) */ .svc-accent-job { border-top: 4px solid #d97706 !important; } .svc-accent-land { border-top: 4px solid #059669 !important; } .svc-accent-print { border-top: 4px solid #7c3aed !important; } .svc-accent-photo { border-top: 4px solid #2563eb !important; } .svc-accent-result { border-top: 4px solid #0891b2 !important; } .svc-accent-edu { border-top: 4px solid #9333ea !important; } /* ========================================================================== ACCESSIBILITY & MOBILE PERFORMANCE ENHANCEMENTS ========================================================================== */ /* Enhanced focus indicators for keyboard navigation */ :focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; } /* Hardware accelerated transitions for mobile touch & scrolls */ .glass-header, .floating-cta-btn, .mobile-bottom-dock, button, a { -webkit-tap-highlight-color: transparent; transform: translateZ(0); } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }