/* ========================================================================== CRITICAL CSS - Inline in for faster FCP Contains only above-the-fold styles: navbar, hero, buttons, variables ========================================================================== */ /* ========================================================================== AOS FALLBACK - Critical safety net If AOS library fails to load/initialize, show all elements ========================================================================== */ .aos-fallback [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } /* Prevent blank sections: keep elements visible until AOS JS has fully initialized. JS adds .aos-ready to after AOS.init() completes. Elements below fold are off-screen when override is removed, so no visible flash. */ html:not(.aos-ready) [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } /* CSS Variables */ :root { --nav-primary: #1e4075; --nav-primary-dark: #1A3662; --nav-secondary: #567FBF; --nav-accent: #5bbeff; --nav-text: #2c3e50; --nav-text-light: #6c757d; --nav-white: #ffffff; --nav-transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .redesign-wrapper, .eracun-redesign-wrapper, .dms-redesign-wrapper, .blog-redesign-wrapper { --rd-primary: #1e4075; --rd-primary-dark: #1A3662; --rd-secondary: #567FBF; --rd-accent: #5bbeff; --rd-success: #16a34a; --rd-light: #F8F9FA; --rd-white: #ffffff; --rd-text: #2c3e50; --rd-text-light: #6c757d; --rd-shadow: 0 4px 20px rgba(30, 64, 117, 0.15); --rd-shadow-lg: 0 8px 40px rgba(30, 64, 117, 0.2); --rd-radius: 16px; --rd-radius-lg: 24px; font-family: 'Montserrat', sans-serif; color: var(--rd-text); overflow-x: hidden; } /* ========================================================================== NAVBAR - Critical for above-fold ========================================================================== */ .rd-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; padding: 1rem 0; transition: var(--nav-transition); font-family: 'Montserrat', sans-serif; } .rd-navbar--top { background: transparent; } .rd-navbar--scrolled { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); padding: 0.75rem 0; } .rd-navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .rd-navbar__logo { display: flex; align-items: center; text-decoration: none; position: relative; z-index: 1060; } .rd-navbar__logo img { height: 56px; width: auto; transition: var(--nav-transition); } .rd-navbar__nav { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .rd-navbar__item { position: relative; } .rd-navbar__link { display: flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1.125rem; font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-decoration: none; border-radius: 10px; transition: var(--nav-transition); position: relative; white-space: nowrap; } .rd-navbar__link:hover { color: var(--nav-white); background: rgba(255, 255, 255, 0.1); } .rd-navbar__link.active { color: var(--nav-white); } .rd-navbar--scrolled .rd-navbar__link { color: var(--nav-text); } .rd-navbar--scrolled .rd-navbar__link:hover { color: var(--nav-primary); background: rgba(30, 64, 117, 0.06); } .rd-navbar--scrolled .rd-navbar__link.active { color: var(--nav-primary); } /* Light background pages */ .page-light-bg .rd-navbar--top { background: #ffffff; box-shadow: 0 4px 30px rgba(30, 64, 117, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05); } .page-light-bg .rd-navbar--top .rd-navbar__link { color: var(--nav-text); } .page-light-bg .rd-navbar--top .rd-navbar__link:hover { color: var(--nav-primary); background: rgba(30, 64, 117, 0.06); } /* CTA Button in navbar */ .rd-navbar__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--nav-white); background: linear-gradient(135deg, var(--nav-primary) 0%, var(--nav-secondary) 100%); border: none; border-radius: 50px; text-decoration: none; cursor: pointer; transition: var(--nav-transition); box-shadow: 0 4px 15px rgba(30, 64, 117, 0.35); white-space: nowrap; } .rd-navbar__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(30, 64, 117, 0.45); color: var(--nav-white); } .rd-navbar__cta svg { width: 18px; height: 18px; } .rd-navbar__cta-mobile { display: none; } /* Mobile toggle */ .rd-navbar__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 12px; cursor: pointer; transition: var(--nav-transition); position: relative; z-index: 1060; } .rd-navbar--scrolled .rd-navbar__toggle { background: rgba(30, 64, 117, 0.06); } .rd-navbar__toggle-line { position: absolute; width: 22px; height: 2px; background: var(--nav-white); border-radius: 2px; transition: var(--nav-transition); } .rd-navbar--scrolled .rd-navbar__toggle-line { background: var(--nav-primary); } .rd-navbar__toggle-line:nth-child(1) { transform: translateY(-6px); } .rd-navbar__toggle-line:nth-child(3) { transform: translateY(6px); } .rd-navbar__actions { display: flex; align-items: center; gap: 1rem; } .rd-navbar__menu { display: flex; align-items: center; } /* ========================================================================== HERO SECTION - Critical for above-fold ========================================================================== */ .redesign-wrapper .rd-hero, .eracun-redesign-wrapper .rd-hero, .dms-redesign-wrapper .rd-hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, #0d1b2a 0%, #1b3a5f 50%, #1e4075 100%); overflow: hidden; padding: 120px 0 100px; } .redesign-wrapper .rd-hero-container, .eracun-redesign-wrapper .rd-hero-container, .dms-redesign-wrapper .rd-hero-container { position: relative; z-index: 10; width: 100%; } .redesign-wrapper .rd-hero-content, .eracun-redesign-wrapper .rd-hero-content, .dms-redesign-wrapper .rd-hero-content { position: relative; z-index: 2; } .redesign-wrapper .rd-hero h1, .eracun-redesign-wrapper .rd-hero h1, .dms-redesign-wrapper .rd-hero h1 { color: #ffffff; font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .redesign-wrapper .rd-hero h1 .rd-highlight, .redesign-wrapper .rd-hero h1 .rd-hero-highlight, .eracun-redesign-wrapper .rd-hero h1 .rd-highlight, .dms-redesign-wrapper .rd-hero h1 .rd-highlight { background: linear-gradient(135deg, #5bbeff 0%, #60a5fa 50%, #93c5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .redesign-wrapper .rd-hero-sub, .eracun-redesign-wrapper .rd-hero-sub, .dms-redesign-wrapper .rd-hero-sub { font-size: 1.25rem; line-height: 1.7; color: rgba(255, 255, 255, 0.8); margin-bottom: 2rem; max-width: 540px; } .redesign-wrapper .rd-hero-sub strong, .eracun-redesign-wrapper .rd-hero-sub strong, .dms-redesign-wrapper .rd-hero-sub strong { color: #ffffff; } .redesign-wrapper .rd-hero-cta, .eracun-redesign-wrapper .rd-hero-cta, .dms-redesign-wrapper .rd-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } /* ========================================================================== BUTTONS - Critical for hero CTAs ========================================================================== */ .redesign-wrapper .rd-btn, .eracun-redesign-wrapper .rd-btn, .dms-redesign-wrapper .rd-btn, .blog-redesign-wrapper .rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 50px; border: none; cursor: pointer; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .redesign-wrapper .rd-btn-primary, .eracun-redesign-wrapper .rd-btn-primary, .dms-redesign-wrapper .rd-btn-primary, .blog-redesign-wrapper .rd-btn-primary { background: linear-gradient(135deg, var(--rd-primary) 0%, var(--rd-secondary) 100%); color: var(--rd-white); box-shadow: 0 4px 15px rgba(30, 64, 117, 0.4); } .redesign-wrapper .rd-btn-primary:hover, .eracun-redesign-wrapper .rd-btn-primary:hover, .dms-redesign-wrapper .rd-btn-primary:hover, .blog-redesign-wrapper .rd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(30, 64, 117, 0.5); color: var(--rd-white); } .redesign-wrapper .rd-btn-secondary, .eracun-redesign-wrapper .rd-btn-secondary, .dms-redesign-wrapper .rd-btn-secondary { background: var(--rd-white); color: var(--rd-primary); border: 2px solid var(--rd-primary); } .redesign-wrapper .rd-btn-secondary:hover, .eracun-redesign-wrapper .rd-btn-secondary:hover, .dms-redesign-wrapper .rd-btn-secondary:hover { background: var(--rd-primary); color: var(--rd-white); } .redesign-wrapper .rd-btn svg, .eracun-redesign-wrapper .rd-btn svg, .dms-redesign-wrapper .rd-btn svg { width: 20px; height: 20px; } /* ========================================================================== MOBILE NAVBAR - Critical responsive ========================================================================== */ @media (max-width: 991px) { .rd-navbar__toggle { display: flex; } .rd-navbar__cta-desktop { display: none !important; } .rd-navbar__menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(165deg, #0a1628 0%, #132744 40%, #1a3a5c 70%, #1e4075 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; opacity: 0; visibility: hidden; transition: var(--nav-transition); z-index: 1055; } .rd-navbar__menu.active { opacity: 1; visibility: visible; } .rd-navbar__nav { flex-direction: column; gap: 0.5rem; width: 100%; max-width: 320px; } .rd-navbar__item { width: 100%; } .rd-navbar__link { justify-content: center; padding: 1rem 1.5rem; font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); border-radius: 14px; } .rd-navbar__link:hover, .rd-navbar__link.active { background: rgba(255, 255, 255, 0.1); color: var(--nav-white); } .rd-navbar__cta-mobile { display: inline-flex; margin-top: 2rem; padding: 1rem 2.5rem; font-size: 1rem; } .rd-navbar__toggle.active .rd-navbar__toggle-line:nth-child(1) { transform: rotate(45deg); } .rd-navbar__toggle.active .rd-navbar__toggle-line:nth-child(2) { opacity: 0; } .rd-navbar__toggle.active .rd-navbar__toggle-line:nth-child(3) { transform: rotate(-45deg); } } @media (max-width: 575px) { .rd-navbar { padding: 0.875rem 0; } .rd-navbar--scrolled { padding: 0.625rem 0; } .rd-navbar__logo img { height: 44px; } .rd-navbar__toggle { width: 40px; height: 40px; } } /* ========================================================================== HERO RESPONSIVE ========================================================================== */ @media (max-width: 992px) { .redesign-wrapper .rd-hero, .eracun-redesign-wrapper .rd-hero, .dms-redesign-wrapper .rd-hero { padding: 100px 0 60px; min-height: auto; } .redesign-wrapper .rd-hero h1, .eracun-redesign-wrapper .rd-hero h1, .dms-redesign-wrapper .rd-hero h1 { font-size: clamp(2rem, 6vw, 2.75rem); } .redesign-wrapper .rd-hero-sub, .eracun-redesign-wrapper .rd-hero-sub, .dms-redesign-wrapper .rd-hero-sub { font-size: 1.0625rem; } } @media (max-width: 576px) { .redesign-wrapper .rd-hero-cta, .eracun-redesign-wrapper .rd-hero-cta, .dms-redesign-wrapper .rd-hero-cta { flex-direction: column; } .redesign-wrapper .rd-btn, .eracun-redesign-wrapper .rd-btn, .dms-redesign-wrapper .rd-btn { width: 100%; justify-content: center; } }