/* sgmaraton components.css — bygges ut per komponent gjennom planen */ .sgm-container { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); } /* Helpers brukt på tvers av komponenter */ .sgm-eyebrow { font-size: 11px; letter-spacing: .25em; font-weight: 800; text-transform: uppercase; color: var(--wp--preset--color--warm); } .sgm-eyebrow .dot { display: inline-block; width: 7px; height: 7px; background: var(--wp--preset--color--green-light); border-radius: 999px; margin-right: 8px; vertical-align: middle; } /* === Header === */ .sgm-topbar { background: var(--wp--preset--color--navy); color: rgba(255,255,255,.85); padding: 10px 32px; font-size: 12px; letter-spacing: .04em; } .sgm-topbar__inner { max-width: 1280px; margin-inline: auto; } .sgm-topbar p { margin: 0; } .sgm-topbar strong { color: white; } .sgm-topbar__cta a { color: var(--wp--preset--color--green-light); font-weight: 700; text-decoration: none; } /* Sticky meny via position:fixed. * * Hvorfor ikke position:sticky? WordPress pakker header-template-part i *

-element.

er bare så høyt som sin egen content (~300px), * så når man scroller forbi, slutter sticky-containing-block og element * scroller ut. position:fixed er forankret til viewporten og funker uansett. * * Vi viser .sgm-mainbar to ganger: * - Original i normal flyt (over hero, sammen med topbar/logo/sponsors) * - En klone .is-pinned satt på via JS legger til en duplikat-bar * fixed på top når man har scrollet forbi den originale. * Enkel CSS-løsning: original mainbar er position:static, og en SEPARAT * .sgm-pinned-bar er fixed med opacity:0 + pointer-events:none, og blir * synlig når får .sgm-scrolled. */ .sgm-mainbar { background: white; padding: 14px 32px; border-bottom: 1px solid #ececec; } /* Pinned-baren ligger fixed på toppen, usynlig til vi scroller */ .sgm-pinned-bar { position: fixed; inset: 0 0 auto 0; /* top:0 left:0 right:0 */ z-index: 100; background: white; border-bottom: 1px solid #ececec; box-shadow: 0 4px 18px rgba(8, 48, 107, 0.10); padding: 8px 32px; opacity: 0; transform: translateY(-100%); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } body.sgm-scrolled .sgm-pinned-bar { opacity: 1; transform: translateY(0); pointer-events: auto; } body.admin-bar .sgm-pinned-bar { top: 32px; } @media (max-width: 782px) { body.admin-bar .sgm-pinned-bar { top: 46px; } } .sgm-brand { background: white; padding: 24px 32px 16px; text-align: center; } .sgm-brand .wp-block-site-logo { display: flex; justify-content: center; } .sgm-brand .wp-block-site-logo img { max-height: 140px; width: auto; height: auto; } .sgm-mainnav { font-size: 14px; font-weight: 600; width: 100%; justify-content: center; } .sgm-mainnav a { color: var(--wp--preset--color--ink); padding: 8px 0; } .sgm-mainnav a:hover, .sgm-mainnav .current-menu-item a { color: var(--wp--preset--color--navy); } .sgm-mainbar__menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; width: 44px; height: 44px; } .sgm-mainbar__menu-toggle span { display: block; width: 24px; height: 2px; background: var(--wp--preset--color--navy); margin: 4px auto; transition: transform var(--sgm-tx-fast); } /* === Sponsor-stripe === */ .sgm-sponsors { background: white; border-bottom: 1px solid #ececec; padding: 32px; } .sgm-sponsors__label { font-size: 11px; letter-spacing: .3em; font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--warm); margin: 0 0 18px; text-align: center; } .sgm-sponsors__label strong { color: var(--wp--preset--color--navy); } .sgm-sponsors__logos { gap: 80px !important; align-items: center; flex-wrap: wrap; } .sgm-sponsor-logo img { max-height: 78px; width: auto; transition: transform var(--sgm-tx-fast); } .sgm-sponsor-logo:hover img { transform: scale(1.04); } @media (max-width: 900px) { .sgm-topbar { padding: 8px 18px; font-size: 11px; } .sgm-topbar__inner { flex-wrap: wrap; row-gap: 4px; } .sgm-mainbar { padding: 10px 18px; } header.wp-block-template-part.is-stuck .sgm-mainbar { padding: 6px 18px; } .sgm-brand { padding: 18px 18px 12px; } .sgm-brand .wp-block-site-logo img { max-height: 90px; } /* WP-block-navigation håndterer mobil-toggle via overlayMenu="mobile" */ .sgm-sponsors { padding: 18px; } .sgm-sponsors__logos { gap: 40px !important; } .sgm-sponsor-logo img { max-height: 44px; } } /* === Footer === */ .sgm-footer { background: var(--wp--preset--color--navy-deep); color: rgba(255,255,255,.7); padding: 64px 32px 24px; margin-block-start: 96px; } .sgm-footer__inner { max-width: 1280px; margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; } .sgm-footer h4 { color: white; font-size: 14px; font-weight: 800; margin-bottom: 16px; letter-spacing: .04em; } .sgm-footer__col--brand h4 { font-size: 18px; margin-bottom: 12px; } .sgm-footer__col p { font-size: 14px; line-height: 1.6; } .sgm-footer__col ul { list-style: none; padding: 0; margin: 0; } .sgm-footer__col li { font-size: 14px; padding: 6px 0; } .sgm-footer__col a { color: rgba(255,255,255,.7); } .sgm-footer__col a:hover { color: white; } .sgm-footer__bottom { max-width: 1280px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.55); } .sgm-footer__bottom p { margin: 0; } @media (max-width: 900px) { .sgm-footer { padding: 48px 18px 24px; margin-block-start: 64px; } .sgm-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; } .sgm-footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; } } @media (max-width: 480px) { .sgm-footer__inner { grid-template-columns: 1fr; } } /* === Hero === */ .sgm-hero { position: relative; min-height: 600px; background: linear-gradient(180deg, rgba(10,21,101,.55) 0%, rgba(10,21,101,.55) 50%, rgba(10,21,101,.92) 100%), var(--sgm-hero-bg) center/cover no-repeat; color: white; overflow: hidden; } .sgm-hero__grid { max-width: 1280px; margin-inline: auto; padding: 80px 32px 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; min-height: 600px; } .sgm-hero__text { padding-bottom: 40px; } .sgm-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .28em; font-weight: 800; text-transform: uppercase; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.22); padding: 9px 16px; border-radius: 999px; margin: 0; } .sgm-hero__eyebrow .dot { width: 7px; height: 7px; background: var(--wp--preset--color--green-light); border-radius: 999px; display: inline-block; } .sgm-hero__h1 { font-size: clamp(42px, 5.5vw, 80px); line-height: .92; font-weight: 900; letter-spacing: -.025em; margin: 22px 0 16px; color: white !important; text-shadow: 0 2px 28px rgba(0,0,0,.3); } .sgm-hero__h1 em { font-style: normal; color: var(--wp--preset--color--green-light); display: block; } .sgm-hero__sub { font-size: 18px; max-width: 560px; color: rgba(255,255,255,.94); margin: 0 0 30px; line-height: 1.55; } .sgm-hero__actions { gap: 12px !important; flex-wrap: wrap; } /* === Countdown card === */ .sgm-cd { background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; padding: 30px; color: white; box-shadow: var(--sgm-shadow-glass); } .sgm-cd__label { font-size: 11px; letter-spacing: .25em; font-weight: 800; text-transform: uppercase; color: var(--wp--preset--color--green-light); margin: 0 0 4px; } .sgm-cd__title { font-size: 24px; font-weight: 900; margin: 0 0 22px; letter-spacing: -.01em; } .sgm-cd__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sgm-cd__cell { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 18px 6px; text-align: center; } .sgm-cd__num { display: block; font-size: 42px; font-weight: 900; line-height: 1; color: white; letter-spacing: -.025em; } .sgm-cd__lbl { font-size: 10px; letter-spacing: .22em; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 8px; display: block; } .sgm-cd__meta { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.78); } .sgm-cd__meta strong { color: white; } @media (max-width: 900px) { .sgm-hero__grid { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 48px; } .sgm-hero__text { padding-bottom: 0; } } /* === Featured news === */ .sgm-news-featured .sgm-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; background: white; border-radius: 18px; overflow: hidden; border: 1px solid #ececec; margin-bottom: 28px; transition: transform var(--sgm-tx-fast), box-shadow var(--sgm-tx-fast); cursor: pointer; } .sgm-news-featured .sgm-featured:hover { transform: translateY(-4px); box-shadow: var(--sgm-shadow-card-hover); } .sgm-featured__img img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; } .sgm-featured__body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; } .sgm-featured__title { font-size: clamp(24px, 2.2vw, 34px); font-weight: 900 !important; color: var(--wp--preset--color--navy); letter-spacing: -.02em; line-height: 1.15; margin: 14px 0; } .sgm-featured__excerpt { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 0; } .sgm-featured__excerpt a { color: var(--wp--preset--color--bright); font-weight: 700; } /* === 3-up grid === */ .sgm-news-3 { margin-top: 28px; } .sgm-news-3 .wp-block-post-template { gap: 28px !important; } .sgm-news-3 .sgm-card { background: white; border-radius: 16px; overflow: hidden; border: 1px solid #ececec; transition: transform var(--sgm-tx-fast), box-shadow var(--sgm-tx-fast); cursor: pointer; height: 100%; display: flex; flex-direction: column; } .sgm-news-3 .sgm-card:hover { transform: translateY(-4px); box-shadow: var(--sgm-shadow-card); } .sgm-card__img img { aspect-ratio: 16/10; object-fit: cover; width: 100%; } .sgm-card__body { padding: 22px; } .sgm-card__meta { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--wp--preset--color--warm); font-weight: 700; gap: 8px !important; } .sgm-card__meta time, .sgm-card__meta a { color: inherit; } .sgm-card__title { font-size: 19px !important; font-weight: 800 !important; color: var(--wp--preset--color--ink) !important; line-height: 1.25; letter-spacing: -.01em; margin: 8px 0; } .sgm-card__excerpt { font-size: 14px; color: #555; margin: 0; } /* Compact-variant */ .sgm-news-3.is-compact .sgm-card__img img { aspect-ratio: 16/9; } .sgm-news-3.is-compact .sgm-card__body { padding: 16px 18px; } .sgm-news-3.is-compact .sgm-card__title { font-size: 16px !important; } .sgm-news-3.is-compact .sgm-card__excerpt { display: none; } @media (max-width: 900px) { .sgm-news-featured .sgm-featured { grid-template-columns: 1fr; } .sgm-featured__img img { min-height: 220px; } .sgm-featured__body { padding: 24px 22px; } .sgm-news-3 .wp-block-post-template { grid-template-columns: 1fr !important; } } /* === Section / sec-head === */ .sgm-section { margin-block: 80px; } .sgm-section .sgm-sec-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 32px; padding-inline: clamp(20px, 4vw, 32px); } .sgm-sec-head__title-block .sgm-eyebrow { margin-bottom: 6px; } .sgm-sec-head__title-block h2 { margin: 0; } .sgm-sec-head__link a { font-size: 14px; font-weight: 700; color: var(--wp--preset--color--bright); } .sgm-section--news { padding-inline: clamp(20px, 4vw, 32px); } .sgm-section__cta { margin-top: 48px; justify-content: center; } @media (max-width: 600px) { .sgm-section { margin-block: 48px; } .sgm-sec-head { flex-direction: column; gap: 12px; align-items: flex-start; } } /* === Info-hero (smal sidehero) === */ .sgm-info-hero { background: linear-gradient(135deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-deep) 100%); color: white; padding: 80px 32px 64px; } .sgm-info-hero__inner { max-width: 1280px; margin-inline: auto; } .sgm-info-hero__title { color: white !important; font-size: clamp(32px, 4vw, 56px) !important; font-weight: 900 !important; letter-spacing: -.025em; margin: 0; } /* === Single post === */ .sgm-single__body { max-width: 720px; margin: 64px auto; padding-inline: clamp(20px, 4vw, 32px); } .sgm-post-meta { font-size: 13px; color: var(--wp--preset--color--warm); letter-spacing: .15em; text-transform: uppercase; font-weight: 700; gap: 16px !important; margin-bottom: 24px; } .sgm-single__featured img { border-radius: var(--sgm-radius-lg); margin-bottom: 32px; } .sgm-single__body h2, .sgm-single__body h3 { margin-top: 1.5em; margin-bottom: .5em; } .sgm-single__body p { margin-bottom: 1.2em; line-height: 1.7; } .sgm-single__nav { margin-top: 48px; padding-top: 32px; border-top: 1px solid #ececec; font-size: 14px; } /* === Page === */ .sgm-page__content { max-width: 720px; margin: 64px auto; padding-inline: clamp(20px, 4vw, 32px); } .sgm-page__content > .alignwide, .sgm-page__content > .alignfull { margin-inline-start: calc(50% - 50vw); margin-inline-end: calc(50% - 50vw); max-width: none; } .sgm-page__content h2 { margin-top: 2em; margin-bottom: .5em; } .sgm-page__content p { margin-bottom: 1.2em; line-height: 1.7; } /* === Arkiv / søk === */ .sgm-archive .sgm-section, .sgm-search .sgm-section { padding-inline: clamp(20px, 4vw, 32px); } .sgm-search-result { padding: 24px 0; border-bottom: 1px solid #ececec; } .sgm-search-result h3 { margin-bottom: 8px !important; } .sgm-search-result time { font-size: 12px; color: var(--wp--preset--color--warm); } .sgm-pagination { margin-top: 48px; gap: 12px !important; font-weight: 700; } .sgm-pagination a, .sgm-pagination .page-numbers { padding: 8px 14px; border-radius: 999px; background: white; border: 1px solid #ececec; color: var(--wp--preset--color--navy); text-decoration: none; } .sgm-pagination .page-numbers.current { background: var(--wp--preset--color--navy); color: white; border-color: var(--wp--preset--color--navy); } /* === 404 === */ .sgm-404__inner { max-width: 720px; margin: 96px auto; padding-inline: clamp(20px, 4vw, 32px); text-align: center; } .sgm-404__code { font-size: clamp(80px, 14vw, 200px) !important; font-weight: 900 !important; color: var(--wp--preset--color--green-light) !important; margin: 0 0 16px; line-height: 1; } .sgm-404__title { font-size: clamp(24px, 3vw, 36px) !important; margin-bottom: 16px; } /* === Galleri (masonry) === */ .sgm-gallery .wp-block-gallery { column-count: 3; column-gap: 16px; } .sgm-gallery .wp-block-gallery .wp-block-image { break-inside: avoid; margin-bottom: 16px; } .sgm-gallery .wp-block-gallery img { width: 100%; height: auto; border-radius: var(--sgm-radius-sm); display: block; cursor: zoom-in; transition: transform var(--sgm-tx-fast); } .sgm-gallery .wp-block-gallery img:hover { transform: scale(1.02); } @media (max-width: 900px) { .sgm-gallery .wp-block-gallery { column-count: 2; } } @media (max-width: 480px) { .sgm-gallery .wp-block-gallery { column-count: 1; } } /* Year-headings i galleri */ .sgm-gallery h2 { font-size: clamp(24px, 3vw, 36px) !important; margin: 64px 0 24px !important; padding-bottom: 12px; border-bottom: 2px solid var(--wp--preset--color--green-med); } /* === Fact grid === */ .sgm-fact-grid { gap: 24px !important; margin-block: 48px; } .sgm-fact { text-align: center; padding: 24px; background: white; border-radius: var(--sgm-radius-md); border: 1px solid #ececec; } .sgm-fact__num { font-size: 56px !important; font-weight: 900 !important; color: var(--wp--preset--color--green-med) !important; line-height: 1; letter-spacing: -.025em; margin: 0 0 8px; } .sgm-fact__lbl { font-size: 13px; color: var(--wp--preset--color--warm); margin: 0; line-height: 1.4; } @media (max-width: 700px) { .sgm-fact-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .sgm-fact__num { font-size: 40px !important; } } /* === Callout === */ .sgm-callout { background: var(--wp--preset--color--navy); color: white; padding: 48px; border-radius: var(--sgm-radius-lg); margin-block: 48px; } .sgm-callout .sgm-eyebrow { color: var(--wp--preset--color--green-light); } .sgm-callout h3 { color: white !important; margin-block: 16px; } .sgm-callout p { color: rgba(255,255,255,.85); } @media (max-width: 600px) { .sgm-callout { padding: 28px; } } /* === FAQ === */ .sgm-faq { margin-block: 48px; } .sgm-faq details { border-bottom: 1px solid #ececec; padding: 16px 0; } .sgm-faq summary { font-weight: 700; color: var(--wp--preset--color--navy); cursor: pointer; font-size: 18px; padding: 8px 0; list-style-position: outside; } .sgm-faq summary::after { content: '+'; float: right; color: var(--wp--preset--color--green-med); font-weight: 900; transition: transform var(--sgm-tx-fast); } .sgm-faq details[open] summary::after { content: '−'; } .sgm-faq details p { padding: 8px 0 12px; color: #555; } /* === Contact card === */ .sgm-contact-card { background: white; border: 1px solid #ececec; border-radius: var(--sgm-radius-lg); padding: 32px; gap: 32px !important; margin-block: 48px; } .sgm-contact-card__cell .sgm-eyebrow { margin-bottom: 8px; } .sgm-contact-card__cell p { margin: 0; line-height: 1.6; } @media (max-width: 700px) { .sgm-contact-card { grid-template-columns: 1fr !important; gap: 20px !important; padding: 24px; } }