/* nav.css Global navigasjonskomponent, brukt på alle sider (forsiden, /golfklubber, /sponsorer, /kontakt, ...). Lastes sammen med js/nav.js. Bruk: legg

-markupen (se kontakt/index.html eller golfklubber/index.html for eksempel) helt øverst i på hver side. data-nav-theme styrer utseendet FØR man har scrollet: - "dark" — for sider med mørkt/fotografisk innhold øverst (hero, toppbilde). Hvit tekst, ghost-knapp. - "light" — for sider med hvit bakgrunn øverst (ingen hero-bilde). Mørk tekst, solid sort knapp. Uansett tema får menyen alltid samme lyse, opake bakgrunn (#F5F5F5) og mørk tekst/knapp/logo så snart man scroller — se .is-scrolled, satt av js/nav.js. Menyen sitter fast på toppen som en vanlig seksjon og flyttes ut/inn av syne 1:1 med scrollen (js/nav.js setter transform: translateY(...) direkte som inline style) — gradvis forbiscrolling nedover, gradvis tilbake oppover, ingen brå terskel. Selvstendig fil — ingen avhengigheter til andre sider/seksjoner. */ /* Open Sans brukes kun til ordmerket "NEMOVA" ved siden av logoen, og registreres derfor her i stedet for i css/base.css. Lokal fil (public/fonts/open-sans/), ikke Google Fonts CDN — kun vekt 700, den eneste som er i bruk. */ @font-face { font-family: 'Open Sans'; src: url('../public/fonts/open-sans/OpenSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; box-shadow: none; /* Ingen transition på transform: js/nav.js setter den fortløpende, 1:1 med scrollen, så en transition ville bare gitt etterslep. */ transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* Fast total høyde på navigasjonslinjen: 82px. .nav har ingen egen padding, og box-sizing: border-box (css/base.css) gjør at høyden er den ytre. Går i full bredde — bevisst IKKE begrenset til 1180px som resten av sideinnholdet — slik at avstanden fra venstre skjermkant inn til logoen er nøyaktig 28px uansett vindusbredde. Menyen til høyre får samme avstand ut til høyre skjermkant. */ .nav__inner { width: 100%; height: 82px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Ordmerket står ved siden av en logo med ~39px synlig høyde. 1.25rem (20px) gir en versalhøyde på ca. 14px, altså rundt en tredjedel av logoen — stort nok til å balansere den uten å konkurrere. Sperringen er trukket litt inn (0.12em → 0.1em), som kler den større graden bedre. */ .nav__logo { display: inline-flex; align-items: center; gap: 10px; font-family: 'Open Sans', 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: #9EA2A2; transition: color 0.3s ease; } /* Logo-ikonet vises som det er i kildefilen — ingen farge- eller maskeeffekt. Høyden styrer, bredden følger bildets proporsjoner. */ .nav__logo-icon { display: block; width: auto; height: 40px; flex-shrink: 0; } /* To varianter av samme logo: den lyse (grå) vises mens menyen er transparent/mørk, den mørke (sort) når menyen får #F5F5F5-bakgrunn ved scroll (.is-scrolled, satt av js/nav.js). De to filene er beskåret ulikt: merket fyller 97,9% av høyden i den sorte filen, men bare 73,8% i den grå. Lik bildehøyde ville derfor gitt ulik synlig størrelse. Den grå settes til 53px slik at begge merkene blir ca. 39px høye — altså samme synlige logo, og ingen hopp i det øyeblikket de bytter. Endres en av filene, må dette forholdet regnes om. */ .nav__logo-icon--light { height: 53px; } .nav__logo-icon--dark { display: none; } .nav.is-scrolled .nav__logo-icon--light { display: none; } .nav.is-scrolled .nav__logo-icon--dark { display: block; } .nav__links { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); } .nav__link { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 0.3s ease, opacity 0.2s ease; } .nav__link:hover, .nav__link:focus-visible { opacity: 0.7; } /* "Partnere"-dropdown i hovedmenyen: knapp (ikke lenke, siden det ikke finnes noen samleside å lenke til ennå) som åpner en liten boks med de enkelte partnersidene. Åpnes ved klikk (touch/tastatur) og ved hover (mus) — se js/nav.js. */ .nav__dropdown { position: relative; } .nav__dropdown-trigger { /* Ingen font/color-reset her — knappen har også klassen .nav__link, som allerede setter riktig font-family/-size/-weight og farge (inkl. tema/scroll-variantene). Et `font: inherit`/`color: inherit` her ville, som shorthand, overstyrt de mer spesifikke reglene og latt Partnere-teksten falle tilbake til nettleserens standard knapp-skrift (synlig større enn Golfklubb/Sponsor). */ display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; } .nav__dropdown-caret { width: 12px; height: 12px; transition: transform 0.2s ease; } .nav__dropdown.is-open .nav__dropdown-caret { transform: rotate(180deg); } /* Hvit boks uansett tema/scroll-tilstand — flyter over resten av siden, ikke en del av selve menylinjen. */ .nav__dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; min-width: 200px; padding: 8px; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .nav__dropdown.is-open .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav__dropdown-link { display: block; padding: 10px 14px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; color: #111111; text-decoration: none; white-space: nowrap; } .nav__dropdown-link:hover, .nav__dropdown-link:focus-visible { background: rgba(17, 17, 17, 0.06); } .nav__btn { display: inline-block; padding: 10px 22px; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .nav__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; } .nav__toggle span { display: block; width: 100%; height: 2px; transition: background-color 0.3s ease; } .nav__mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; /* Samme 28px som .nav__inner, så lenkene flukter med logoen. */ padding: 8px 28px 24px; } .nav--open .nav__mobile { display: flex; } .nav__mobile-link { padding: 14px 0; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(17, 17, 17, 0.08); } .nav__btn--mobile { margin-top: 16px; text-align: center; } /* "Partnere" i mobilmenyen: samme trigger+boks-mønster som desktop-dropdownen, men vises innfelt under raden i stedet for flytende — det er allerede en dropdown (hele hamburger-menyen). */ .nav__mobile-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; /* Bare topp/side-kanter nulles — border-bottom kommer fra .nav__mobile-link (samme klasse ligger på knappen), så raden får samme skillelinje som de vanlige lenkene over. */ border-top: 0; border-left: 0; border-right: 0; background: none; cursor: pointer; font: inherit; text-align: left; } .nav__mobile-dropdown.is-open .nav__dropdown-caret { transform: rotate(180deg); } .nav__mobile-dropdown-menu { display: none; flex-direction: column; padding: 0 0 8px; } .nav__mobile-dropdown.is-open .nav__mobile-dropdown-menu { display: flex; } .nav__mobile-dropdown-link { padding: 12px 0 12px 16px; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500; text-decoration: none; opacity: 0.75; } /* ---------- Tema: mørk (over hero/toppbilde) ---------- */ .nav[data-nav-theme="dark"] .nav__link { color: #ffffff; } .nav[data-nav-theme="dark"] .nav__btn { border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.45); color: #ffffff; } .nav[data-nav-theme="dark"] .nav__btn:hover, .nav[data-nav-theme="dark"] .nav__btn:focus-visible { background: rgba(0, 0, 0, 0.6); } .nav[data-nav-theme="dark"] .nav__toggle span { background: #ffffff; } .nav[data-nav-theme="dark"] .nav__mobile { background: rgba(10, 10, 10, 0.96); } .nav[data-nav-theme="dark"] .nav__mobile-link { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.15); } .nav[data-nav-theme="dark"] .nav__mobile-dropdown-link { color: #ffffff; } /* ---------- Tema: lys (hvit bakgrunn øverst) ---------- */ .nav[data-nav-theme="light"] .nav__link { color: #111111; } .nav[data-nav-theme="light"] .nav__btn { border: 0; background: #111111; color: #ffffff; } .nav[data-nav-theme="light"] .nav__toggle span { background: #111111; } .nav[data-nav-theme="light"] .nav__mobile { background: #ffffff; } .nav[data-nav-theme="light"] .nav__mobile-link { color: #111111; } .nav[data-nav-theme="light"] .nav__mobile-dropdown-link { color: #111111; } /* ---------- Scrollet tilstand — samme utseende uansett tema ---------- */ .nav.is-scrolled { /* Samme farge som seksjonene rett under hero på de fleste sider (hero.css, two-way-cta.css, golfklubber.css, sponsorer.css). */ background: #F5F5F5; box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08); } .nav.is-scrolled .nav__logo { color: #111111; } .nav.is-scrolled .nav__link { color: #111111; } .nav.is-scrolled .nav__btn { border: 0; background: #111111; color: #ffffff; } .nav.is-scrolled .nav__toggle span { background: #111111; } .nav.is-scrolled .nav__mobile { background: #F5F5F5; } .nav.is-scrolled .nav__mobile-link { color: #111111; } .nav.is-scrolled .nav__mobile-dropdown-link { color: #111111; } @media (max-width: 760px) { .nav__links { display: none; } .nav__toggle { display: flex; } /* Litt mindre logo/ordmerke og menyelementer på mobil — desktop (reglene lenger opp i filen) er urørt. */ .nav__logo { font-size: 1.1rem; } .nav__logo-icon { height: 36px; } .nav__logo-icon--light { /* Skalert ned tilsvarende --dark (40px -> 36px er samme forhold som 53px -> 48px, se kalibreringskommentaren lenger opp). */ height: 48px; } .nav__link { font-size: 0.8rem; } .nav__btn { padding: 9px 20px; font-size: 0.8rem; } }