/* Group Elevate - Main Stylesheet */ /* Note: Google Fonts and variables.css are loaded in HTML */ /* ======================================== Global Resets & Base Styles ======================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text-primary); background-color: var(--color-bg-primary); overflow-x: hidden; } /* ======================================== Typography ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); } h1 { font-size: var(--font-size-6xl); margin-bottom: var(--spacing-md); } h2 { font-size: var(--font-size-5xl); margin-bottom: var(--spacing-md); } h3 { font-size: var(--font-size-4xl); } h4 { font-size: var(--font-size-3xl); } h5 { font-size: var(--font-size-2xl); } h6 { font-size: var(--font-size-xl); } p { margin-bottom: var(--spacing-sm); line-height: var(--line-height-relaxed); } .text-large { font-size: var(--font-size-xl); line-height: var(--line-height-relaxed); } .text-small { font-size: var(--font-size-sm); } .text-accent { color: var(--color-accent-gold); } .text-secondary { color: var(--color-text-secondary); } /* ======================================== Layout & Container ======================================== */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--spacing-md); } .container-narrow { max-width: var(--container-lg); } .container-wide { max-width: var(--container-2xl); } section { padding: var(--spacing-lg) 0; } section.section-lg { padding: var(--spacing-xl) 0; } section.section-sm { padding: var(--spacing-md) 0; } /* ======================================== Header & Navigation ======================================== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(250, 250, 250, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(17, 24, 39, 0.1); z-index: var(--z-sticky); transition: all var(--transition-base); } .site-header.scrolled { box-shadow: var(--shadow-md); } .header-content { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem var(--spacing-md); max-width: var(--container-2xl); margin: 0 auto; } .logo { height: 100px; width: auto; } .nav-menu { display: flex; gap: var(--spacing-md); list-style: none; align-items: center; } .nav-link { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); text-decoration: none; transition: color var(--transition-fast); position: relative; } .nav-link:hover { color: var(--color-accent-gold); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--color-accent-gold); transition: width var(--transition-base); } .nav-link:hover::after { width: 100%; } .nav-link.active { color: var(--color-accent-gold); } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--spacing-xs); } .mobile-menu-toggle span { display: block; width: 25px; height: 3px; background-color: var(--color-primary); margin: 5px 0; transition: all var(--transition-base); } /* ======================================== Footer ======================================== */ .site-footer { background-color: var(--color-primary); color: var(--color-white); padding: var(--spacing-xl) 0 var(--spacing-md); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .footer-section h4 { color: var(--color-accent-gold); font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); } .footer-tagline { font-size: var(--font-size-lg); color: var(--color-accent-gold); font-family: var(--font-heading); margin-bottom: var(--spacing-md); } .footer-nav { list-style: none; } .footer-nav li { margin-bottom: var(--spacing-xs); } .footer-nav a { color: var(--color-white); text-decoration: none; transition: color var(--transition-fast); } .footer-nav a:hover { color: var(--color-accent-gold); } .footer-bottom { text-align: center; padding-top: var(--spacing-md); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--font-size-sm); color: var(--color-secondary); } /* ======================================== Utility Classes ======================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mt-xl { margin-top: var(--spacing-xl); } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } .mb-xl { margin-bottom: var(--spacing-xl); } .pt-sm { padding-top: var(--spacing-sm); } .pt-md { padding-top: var(--spacing-md); } .pt-lg { padding-top: var(--spacing-lg); } .pt-xl { padding-top: var(--spacing-xl); } .pb-sm { padding-bottom: var(--spacing-sm); } .pb-md { padding-bottom: var(--spacing-md); } .pb-lg { padding-bottom: var(--spacing-lg); } .pb-xl { padding-bottom: var(--spacing-xl); } /* ======================================== Responsive Design ======================================== */ @media (max-width: 768px) { .nav-menu { position: fixed; top: 70px; left: 0; width: 100%; background-color: var(--color-bg-white); flex-direction: column; padding: var(--spacing-md); box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform var(--transition-base); } .nav-menu.active { transform: translateX(0); } .mobile-menu-toggle { display: block; } h1 { font-size: var(--font-size-5xl); } h2 { font-size: var(--font-size-4xl); } h3 { font-size: var(--font-size-3xl); } section { padding: var(--spacing-xl) 0; } section.section-lg { padding: var(--spacing-2xl) 0; } } @media (max-width: 480px) { .container { padding: 0 var(--spacing-sm); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } }