.hero { position: relative; overflow: hidden; min-height: 85vh; color: white; background: linear-gradient( 90deg, rgba(0,20,45,.85), rgba(0,20,45,.55), rgba(0,20,45,.20) ), url("assets/hero.jpg"); background-size: cover; background-position: right center; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at 72% 38%, rgba(255,255,255,.05) 0%, rgba(0,0,0,0) 30%, rgba(0,20,45,.20) 75%, rgba(0,20,45,.45) 100% ); pointer-events: none; } .hero > * { position: relative; z-index: 2; } .main-nav { max-width: 1320px; margin: auto; padding: 38px 32px 24px; display: flex; justify-content: space-between; align-items: center; } .brand img { width: 260px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(255,255,255,.08)); transition: transform .35s ease, filter .35s ease; } .brand:hover img { transform: scale(1.03); filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(255,255,255,.15)); } .desktop-menu { display: flex; gap: 30px; list-style: none; } .desktop-menu a { color: white; text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; text-shadow: 0 2px 8px rgba(0,0,0,.45); transition: .25s; } .desktop-menu a:hover { text-shadow: 0 0 8px rgba(255,255,255,.35), 0 2px 12px rgba(0,0,0,.55); } .hero-inner { max-width: 1320px; margin: auto; padding: 120px 32px; } .hero-copy { max-width: 700px; } .eyebrow { opacity: .92; font-size: .9rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.45); } .hero h1 { font-size: clamp(4.2rem, 9vw, 7.8rem); line-height: .86; margin: 18px 0 8px; letter-spacing: -.06em; text-shadow: 0 6px 24px rgba(0,0,0,.45); } .hero h1 span { display: block; margin-top: 18px; font-size: .42em; font-weight: 700; letter-spacing: .12em; color: #e30613; text-shadow: 0 5px 20px rgba(0,0,0,.45); transform: translateY(-6px); } .hero-info { margin-top: 22px; margin-bottom: 34px; font-size: 1.25rem; font-weight: 600; line-height: 1.45; } .hero-date { margin-bottom: 18px; font-size: 1.85rem; font-weight: 800; letter-spacing: .08em; color: #e30613; text-shadow: 0 5px 20px rgba(0,0,0,.45); } .hero-date span { text-transform: uppercase; } .hero-place { margin-bottom: 10px; } .hero-place span { display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); } .hero-place strong { display: block; font-size: 1.1rem; font-weight: 700; color: white; } .hero-actions { display: flex; gap: 16px; margin-top: 30px; } .hero-actions .btn { box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .hero-actions .btn:hover { transform: translateY(-2px); } .hero-actions .btn-primary { box-shadow: 0 12px 30px rgba(227,6,19,.28); } .hero-actions .btn-primary:hover { box-shadow: 0 18px 36px rgba(227,6,19,.4); } .hero-actions .btn-secondary { background: rgba(255,255,255,.05); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-color: rgba(255,255,255,.85); } .mobile-menu { display: none; } @media (max-width: 768px) { .main-nav { padding: 28px 20px 20px; } .brand img { width: 210px; } .desktop-menu { display: none; } .mobile-menu { display: block; } .mobile-menu summary { color: white; cursor: pointer; border: 1px solid rgba(255,255,255,.4); padding: 10px 16px; border-radius: 8px; font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; text-shadow: 0 2px 8px rgba(0,0,0,.45); } .mobile-menu ul { list-style: none; margin-top: 10px; padding: 10px; background: rgba(0,20,45,.95); border-radius: 8px; } .mobile-menu a { color: white; text-decoration: none; display: block; padding: 10px; } .hero-inner { padding: 80px 20px; } .hero h1 { font-size: clamp(3.4rem, 15vw, 5rem); } .hero-date { font-size: 1.5rem; } .hero-actions { flex-wrap: wrap; } }