/* =================================================== ASK AVIATION - SHARED STYLESHEET Base styling and custom components =================================================== */ /* Root Colors */ :root { --brand-azure: #0078D4; --brand-graphite: #333333; --brand-cloud: #F4F7F9; --brand-green: #34E0A1; --brand-dark-blue: #000A3A; } /* Base styling */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* Base font, bg, and color are set in the tag via Tailwind */ /* Scroll progress bar */ #scroll-progress-container { width: 100%; height: 6px; background-color: #e9ecef; position: fixed; top: 0; left: 0; z-index: 100; } #scroll-progress-bar { height: 6px; background-color: #0078D4; /* brand-azure */ width: 0%; transition: width 0.1s ease-out; } /* Custom menu link styling */ .nav-link { position: relative; padding: 0.5rem 1rem; color: #E5E7EB; /* gray-200 for contrast on dark nav */ text-decoration: none; transition: color 0.3s ease; } .nav-link:hover { color: #FFFFFF; } /* The underline effect on hover */ .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #0078D4; /* brand-azure */ transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s ease-out; } .nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* The permanent underline for the active link */ .nav-link.active { color: #FFFFFF; font-weight: 600; } .nav-link.active::after { transform: scaleX(1); transform-origin: bottom left; } /* Mobile nav links */ .mobile-nav-link { /* All styles are now handled by Tailwind in header.html */ /* This class is kept for JS selection */ } /* Simple gradient for hero sections */ .hero-gradient { background: linear-gradient(135deg, #0078D4 0%, #005a9e 100%); } .horizon-gradient { background: linear-gradient(180deg, rgba(244,247,249,0) 0%, #F4F7F9 100%); } /* Card hover effect */ .hover-lift { transition: all 0.3s ease; } .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0, 120, 212, 0.2); } /* Article content styling */ .article-content h2 { font-size: 1.75rem; /* 28px */ font-weight: 600; color: #0078D4; /* brand-azure */ margin-top: 2rem; margin-bottom: 1rem; } .article-content p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; } .article-content ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1.5rem; } .article-content li { font-size: 1.1rem; line-height: 1.8; margin-bottom: 0.75rem; } .article-content ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 1.5rem; } .article-content blockquote { border-left: 4px solid #0078D4; /* brand-azure */ padding-left: 1.5rem; margin: 2rem 0; font-style: italic; font-size: 1.2rem; color: #555; } .faq-answer { transition: max-height 0.3s ease-in-out; overflow: hidden; } .faq-icon { transition: transform 0.3s ease; } /* ALL REDUNDANT .page, .hidden, header, footer, and utility classes (.flex, .container, .p-4, etc.) have been DELETED. Tailwind CDN now handles all of this without conflict. */