/* ===================================================== EduConnect Web - Critical & Shared Styles This file loads in to prevent FOUC ===================================================== */ /* ----------------------------------------------------- FOUC Prevention Content is hidden by inline style, shown when CSS loads ----------------------------------------------------- */ /* FOUC Prevention - works with critical inline CSS */ html.ec-loaded { visibility: visible !important; } html.ec-loaded .ec-nav, html.ec-loaded .ec-footer, html.ec-loaded .ec-mobile-menu, html.ec-loaded .ec-mobile-overlay { visibility: visible !important; opacity: 1 !important; } /* Smooth transition */ body { transition: opacity 0.15s ease-out; } /* Prevent layout shift - reserve space for fixed navbar */ body { padding-top: 80px !important; min-height: 100vh; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Common background for all pages */ .page-content-wrapper, .main-section, main { background: linear-gradient(180deg, #fefcf6 0%, #fffdf8 100%); min-height: calc(100vh - 80px); } /* ----------------------------------------------------- CSS VARIABLES - Shared Design Tokens ----------------------------------------------------- */ :root { --ec-primary: #fbbf24; --ec-primary-hover: #f59e0b; --ec-primary-dark: #b45309; --ec-primary-bg: #fef9e7; --ec-primary-bg-light: #fef3c7; --ec-accent: #b45309; --ec-success: #059669; --ec-success-bg: #ecfdf5; --ec-error: #dc2626; --ec-error-bg: #fef2f2; --ec-text-dark: #18181b; --ec-text-medium: #52525b; --ec-text-light: #71717a; --ec-text-muted: #a1a1aa; --ec-border: #e4e4e7; --ec-border-warm: #e8e0d5; --ec-bg-white: #ffffff; --ec-bg-gray: #f4f4f5; --ec-bg-cream: linear-gradient(180deg, #fefcf6 0%, #fffdf8 100%); --ec-nav-height: 80px; --ec-container-max: 1200px; --ec-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ec-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --ec-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --ec-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); } /* ----------------------------------------------------- NAVBAR STYLES ----------------------------------------------------- */ .ec-nav { background: #ffffff; padding: 0 1rem; height: 80px !important; min-height: 80px !important; border-bottom: 1px solid #e4e4e7; position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; font-family: var(--ec-font-sans); display: flex; align-items: center; justify-content: center; } .ec-nav-inner { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0; display: flex; justify-content: space-between; align-items: center; } .ec-logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; z-index: 1002; } .ec-logo-img { height: 58px; width: auto; display: block; } .ec-nav-links { display: flex; gap: 0.25rem; align-items: center; } .ec-nav-links a { text-decoration: none; color: #3f3f46; font-weight: 600; font-size: 0.875rem; padding: 0.5rem 0.875rem; border-radius: 6px; transition: all 0.15s ease; } .ec-nav-links a:hover { background: #f4f4f5; color: #18181b; } .ec-nav-links a.active { background: #fef3c7; color: #b45309; } .ec-nav-cta { background: #18181b !important; color: #ffffff !important; } .ec-mobile-toggle { display: none; } @media (max-width: 768px) { .ec-nav-links { display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background: #ffffff; flex-direction: column; padding: 1rem; gap: 0.5rem; } .ec-nav-links.active { display: flex; } .ec-mobile-toggle { display: flex; } } /* ----------------------------------------------------- FOOTER STYLES ----------------------------------------------------- */ .ec-footer { background: #18181b; color: #ffffff; font-family: var(--ec-font-sans); width: 100vw; margin-left: calc(-50vw + 50%); margin-top: auto; } .ec-footer-inner { max-width: 1200px; margin: 0 auto; padding: 4rem 1.5rem 2rem; } .ec-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 3rem; margin-bottom: 3rem; } .ec-footer-logo-img { height: 40px; width: auto; } .ec-footer-tagline { color: #a1a1aa; font-size: 0.9375rem; line-height: 1.6; } .ec-footer-section h4 { color: #ffffff; font-size: 0.875rem; font-weight: 600; margin-bottom: 1.25rem; text-transform: uppercase; } .ec-footer-links { list-style: none; padding: 0; margin: 0; } .ec-footer-links a { color: #a1a1aa; text-decoration: none; } .ec-footer-links a:hover { color: #ffffff; } .ec-footer-bottom { border-top: 1px solid #27272a; padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 768px) { .ec-footer-grid { grid-template-columns: 1fr 1fr; } .ec-footer-brand { grid-column: span 2; } } /* ----------------------------------------------------- UTILITY CLASSES ----------------------------------------------------- */ .container { max-width: var(--ec-container-max); margin: 0 auto; padding: 0 20px; } /* Hide empty Frappe elements */ .page-header-wrapper:empty, .page-breadcrumbs:empty, .page-footer:empty { display: none; }