/* * Global Variables & Resets * Custom properties (colors) are also overridden by the Customizer using inline CSS in . */ :root { /* Fallback variables if customizer isn't active */ --eduzplus-primary: #0056b3; --eduzplus-secondary: #6c757d; --eduzplus-theme: #1f2937; --eduzplus-bg: #ffffff; --eduzplus-text: #333333; /* Typography setups */ --eduzplus-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Spacing & Sizes */ --eduzplus-container-width: 1200px; } @media (prefers-color-scheme: dark) { :root { --eduzplus-bg: #121212; --eduzplus-text: #e0e0e0; --eduzplus-theme: #ffffff; } } /* Minimal Reset */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--eduzplus-font-primary); background-color: var(--eduzplus-bg); color: var(--eduzplus-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; } img { max-width: 100%; height: auto; display: block; } a { color: var(--eduzplus-primary); text-decoration: none; transition: color 0.2s ease-in-out; } a:hover { color: var(--eduzplus-theme); } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* Base Classes */ .btn, .wp-block-button__link { display: inline-block; background-color: var(--eduzplus-primary); color: #fff; padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: 500; border: none; cursor: pointer; text-align: center; transition: background-color 0.2s; } .btn:hover, .wp-block-button__link:hover { background-color: var(--eduzplus-theme); color: #fff; } /* Page Layout Options */ .layout-boxed { max-width: var(--eduzplus-container-width); margin: 2rem auto; background-color: var(--eduzplus-bg); padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Distinct boxed effect */ border-radius: 12px; } @media (prefers-color-scheme: dark) { .layout-boxed { background-color: #1a1a1a; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } } .layout-full-width { width: 100%; } .entry-header { margin-bottom: 2.5rem; text-align: center; } /* Header & Navbar Dynamic Styles */ .site-header { width: 100%; max-width: 100vw; z-index: 1000; position: sticky; top: 0; left: 0; } .site-footer { width: 100%; max-width: 100vw; } .header-container { max-width: var(--eduzplus-container-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: var(--header-height-desktop, 90px); } .site-branding .custom-logo, .site-branding img.custom-logo, .mobile-branding .custom-logo-link img { max-width: var(--header-logo-size, 180px); height: auto; } .footer-logo img, .footer-logo .custom-logo-link img { max-width: var(--footer-logo-width, 150px); height: auto; } .site-title { margin: 0; font-size: 1.5rem; font-weight: 700; } .site-title a { color: var(--menu-text-color, var(--eduzplus-text)); } .main-navigation.desktop-menu { display: flex; gap: 2rem; align-items: center; } #primary-menu { display: flex; padding: 0; margin: 0; list-style: none; gap: 1.5rem; } #primary-menu a { color: var(--menu-text-color, #333); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } #primary-menu a:hover, #primary-menu a:active { color: var(--menu-hover-color, #0056b3); } /* Hamburger button — premium pill style, hidden on desktop */ .menu-toggle { display: none; background: transparent; border: 1.5px solid rgba(0, 0, 0, 0.15); border-radius: 50px; cursor: pointer; padding: 8px 14px; margin: 0; align-items: center; justify-content: center; align-self: center; gap: 8px; line-height: 1; color: var(--menu-text-color, #333); transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .menu-toggle:hover { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.3); transform: scale(1.04); } .hamburger-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hamburger-icon svg { width: var(--hamburger-size, 18px); height: calc(var(--hamburger-size, 18px) * 0.72); display: block; color: var(--menu-text-color, #333); transition: color 0.25s ease; } .menu-toggle img { width: var(--hamburger-size, 18px); height: auto; display: block; } /* Mobile Logic & Boxed Active */ @media (max-width: 768px) { .header-container { height: var(--header-height-mobile, 70px); } .main-navigation.desktop-menu { display: none !important; } .menu-toggle { display: flex !important; } .site-branding .custom-logo, .site-branding img.custom-logo, .mobile-branding .custom-logo-link img { max-width: var(--header-logo-size-mobile, 120px) !important; } .footer-logo img, .footer-logo .custom-logo-link img { max-width: var(--footer-logo-width-mobile, 120px) !important; } } /* Boxed Active Look for Mobile menus */ .off-canvas-content.is-boxed #mobile-menu-items a { display: block; padding: 12px 18px; border-radius: 8px; background: transparent; transition: background 0.3s ease, color 0.3s ease; } .off-canvas-content.is-boxed #mobile-menu-items a:hover { background: var(--menu-hover-color, #0056b3); color: #ffffff; }