/* ========================================================== YASHARIEL HEADER SINGLE SOURCE OF TRUTH Normal desktop header based on /login/ proportions. ========================================================== */ /* ========================================================== DESKTOP ========================================================== */ @media (min-width: 1181px) { /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .site-header { position: sticky !important; top: 0 !important; z-index: 1000 !important; display: block !important; width: 100% !important; height: 76px !important; min-height: 76px !important; margin: 0 !important; padding: 0 !important; background: rgba(5, 4, 3, .90) !important; border-bottom: 1px solid rgba(175,125,70,.22) !important; backdrop-filter: blur(12px) !important; } .site-header .header-inner { position: relative !important; display: grid !important; /* 1 = YASHARIEL 2 = NAVIGATION 3 = LOGIN / WISHLIST */ grid-template-columns: max-content minmax(0, 1fr) max-content !important; align-items: center !important; width: 100% !important; max-width: none !important; height: 76px !important; min-height: 76px !important; column-gap: clamp(18px, 1.2vw, 26px) !important; margin: 0 !important; padding: 0 clamp(18px, 2vw, 38px) !important; box-sizing: border-box !important; } /* ------------------------------------------------------ YASHARIEL ------------------------------------------------------ */ .site-header .brand, .site-header a.brand { grid-column: 1 !important; position: static !important; display: block !important; justify-self: start !important; width: auto !important; min-width: max-content !important; margin: 0 !important; padding: 0 !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; font-family: Cinzel, Georgia, "Times New Roman", serif !important; font-size: 1.2rem !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .18em !important; text-decoration: none !important; white-space: nowrap !important; } /* ------------------------------------------------------ NAVIGATION DIREKT nach YASHARIEL. Nicht Bildschirm-zentriert. ------------------------------------------------------ */ .site-header .main-navigation, .site-header .main-nav { grid-column: 2 !important; position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; justify-self: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: clamp(10px, .8vw, 18px) !important; margin: 0 !important; padding: 0 !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: hidden !important; white-space: nowrap !important; } .site-header .main-navigation > a, .site-header .main-nav > a { position: relative !important; display: block !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 28px 0 25px !important; font-size: clamp(.62rem, .6vw, .74rem) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: clamp(.05em, .07vw, .13em) !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; transform: none !important; } /* ------------------------------------------------------ LOGIN + WISHLIST ------------------------------------------------------ */ .site-header .header-actions { grid-column: 3 !important; position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; width: auto !important; min-width: max-content !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; inset: auto !important; transform: none !important; white-space: nowrap !important; } .site-header .header-login { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-height: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 16px !important; font-size: .74rem !important; line-height: 1 !important; letter-spacing: .13em !important; white-space: nowrap !important; transform: none !important; } .site-header .header-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-height: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 20px !important; font-size: .74rem !important; line-height: 1 !important; letter-spacing: .11em !important; white-space: nowrap !important; transform: none !important; } /* Mobile Elemente Desktop AUS */ .site-header .menu-toggle, .site-header .mobile-header-actions, .site-header .mobile-language-entry, .site-header .mobile-language-link { display: none !important; } } /* ========================================================== SCHMALERE DESKTOPS Lange Sprachen bekommen mehr Platz. ========================================================== */ @media (min-width: 1181px) and (max-width: 1550px) { .site-header .header-inner { column-gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; } .site-header .main-navigation, .site-header .main-nav { gap: 6px !important; } .site-header .main-navigation > a, .site-header .main-nav > a { font-size: .59rem !important; letter-spacing: .035em !important; } .site-header .header-actions { gap: 5px !important; } .site-header .header-login, .site-header .header-button { padding-left: 10px !important; padding-right: 10px !important; } } /* ========================================================== MOBILE Bestehendes Mobile-System weiter benutzen. Wir überschreiben dort KEIN Layout. ========================================================== */ @media (max-width: 1180px) { .site-header .header-inner { display: flex !important; grid-template-columns: none !important; } .site-header .main-navigation, .site-header .main-nav { left: auto !important; right: auto !important; transform: none !important; } } /* ========================================================== DESKTOP LANGUAGE LINK AUS ========================================================== */ @media (min-width: 1181px) { .site-header .main-navigation > a[href="/language/"], .site-header .main-navigation > a[href$="/language/"], .site-header .main-nav > a[href="/language/"], .site-header .main-nav > a[href$="/language/"] { display: none !important; } } /* YASHARIEL HERO HEADER CLEARANCE FINAL START */ /* ========================================================== HOME - MOBILE Die komplette Hero-Copy beginnt deutlich weiter unten. Dadurch bleibt auch "THE EMBER STILL REMAINS" sichtbar. ========================================================== */ @media (max-width: 1024px) { body > main#top > section.hero { height: auto !important; min-height: max( 860px, calc(100svh - 76px) ) !important; overflow: hidden !important; } body > main#top > section.hero > .hero-inner { height: auto !important; min-height: inherit !important; display: flex !important; align-items: flex-start !important; } body > main#top > section.hero .hero-copy { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; max-width: 680px !important; margin: 0 !important; /* Deutlich mehr Abstand als bisher. */ padding: 96px 18px 55px !important; box-sizing: border-box !important; } } /* ========================================================== GAME - MOBILE Gleicher Abstand wie Home. ========================================================== */ @media (max-width: 1024px) { body > main > section.hero#game { height: auto !important; min-height: max( 900px, calc(100svh - 76px) ) !important; } body > main > section.hero#game > .hero-inner { min-height: inherit !important; display: flex !important; align-items: flex-start !important; } body > main > section.hero#game .hero-copy { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; margin: 0 !important; padding-top: 96px !important; padding-bottom: 55px !important; box-sizing: border-box !important; } } /* ========================================================== KLEINE HANDYS Header ist dort kompakter, aber weiterhin genug Luft. ========================================================== */ @media (max-width: 520px) { body > main#top > section.hero .hero-copy { padding-top: 82px !important; } body > main > section.hero#game .hero-copy { padding-top: 82px !important; } } /* ========================================================== FEATURES SECTION NAV Ursache auf dem Desktop-Screenshot: .section-nav war STICKY. Beim Scrollen blieb sie unter dem Hauptheader hängen, während FEATURES dahinter weiterlief. Sie wird jetzt wieder Teil des normalen Seitenflusses. ========================================================== */ .yashariel-features-page .section-nav { position: relative !important; top: auto !important; left: auto !important; right: auto !important; z-index: 20 !important; margin: 0 !important; transform: none !important; } /* Auch alte alternative Feature-Nav-Klassen absichern */ .yashariel-features-page .features-tabs, .yashariel-features-page .features-nav, .yashariel-features-page .feature-tabs, .yashariel-features-page .feature-nav, .yashariel-features-page .features-section-nav, .yashariel-features-page .features-anchor-nav, .yashariel-features-page .sticky-feature-nav, .yashariel-features-page [data-features-nav] { position: relative !important; top: auto !important; transform: none !important; } /* ========================================================== FEATURES SCROLL OFFSET Weil die zweite Leiste nun nicht mehr sticky ist, wird beim Anklicken nur noch der Hauptheader berücksichtigt. ========================================================== */ .yashariel-features-page { scroll-padding-top: 94px !important; } .yashariel-features-page #ownership, .yashariel-features-page #combat, .yashariel-features-page #talents, .yashariel-features-page #loot, .yashariel-features-page #shared-world, .yashariel-features-page #endgame { scroll-margin-top: 94px !important; } /* ========================================================== DESKTOP-HAUPTHEADER NICHT VERÄNDERN Keine Regeln für: .header-inner .brand .main-navigation .header-actions ========================================================== */ /* YASHARIEL HERO HEADER CLEARANCE FINAL END */ /* YASHARIEL FEATURES STICKY NAV FINAL START */ /* ========================================================== FEATURES DESKTOP Hauptheader = 76px Feature-Navigation bleibt direkt darunter sichtbar. ========================================================== */ @media (min-width: 1181px) { body.yashariel-features-page .section-nav { position: sticky !important; top: 76px !important; left: auto !important; right: auto !important; z-index: 900 !important; width: 100% !important; margin: 0 !important; transform: none !important; background: rgba(5, 4, 3, .96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(175,125,70,.12); border-bottom: 1px solid rgba(175,125,70,.22); } } /* ========================================================== TABLET / MOBILE Die obere Hauptnavigation ist dort kompakter. ========================================================== */ @media (max-width: 1180px) { body.yashariel-features-page .section-nav { position: sticky !important; top: 76px !important; z-index: 900 !important; width: 100% !important; margin: 0 !important; transform: none !important; background: rgba(5, 4, 3, .96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } @media (max-width: 520px) { body.yashariel-features-page .section-nav { top: 64px !important; } } /* ========================================================== ANKER-OFFSET Beim Klick auf Combat, Loot usw. soll die Überschrift nicht hinter beiden Navigationsleisten verschwinden. ========================================================== */ body.yashariel-features-page { scroll-padding-top: 150px !important; } body.yashariel-features-page #ownership, body.yashariel-features-page #combat, body.yashariel-features-page #talents, body.yashariel-features-page #loot, body.yashariel-features-page #shared-world, body.yashariel-features-page #endgame { scroll-margin-top: 150px !important; } /* YASHARIEL FEATURES STICKY NAV FINAL END */