/* ============================================================= DJAS – designsystem Låst forsidedesign, versjon 1.0 Filen er delt i nummererte seksjoner. Alt som gjelder farger, avstander og skrift ligger i seksjon 1. Endrer du noe der, endrer det seg over hele nettstedet. 1. Tokens (farger, mål) 2. Grunnstiler 3. Header 4. Meny 5. Hero 6. Bånd (de lyse og mørke seksjonene) 7. Fra anlegget 8. Hvem vi er 9. Dører 10. Kontakt og bunn 11. Responsivt ============================================================= */ /* ============================================================= 1. TOKENS ============================================================= */ :root{ /* Profilfarge. Brukes som strek, markør og knapp – aldri store flater. */ --red:#d10a10; --red-dark:#a10409; /* Lyse flater */ --paper:#edeff2; /* standard lyst bånd */ --paper-2:#ffffff; /* hvitt bånd, brukes til vekslingen */ --ink:#14161a; /* brødtekst og overskrift på lyst */ --ink-2:#4e5460; /* dempet tekst */ --ink-3:#767d8a; /* etiketter og metadata */ --rule:rgba(20,22,26,.16); /* Mørke flater: header, hero, mørkt bånd, kontakt, bunn */ --dark:#14161a; --dark-2:#0d0f12; /* meny og bunnlinje, ett hakk dypere */ --dark-3:#1a1d23; /* logoboksen i headeren */ --dark-ink:#ffffff; --dark-ink-2:rgba(255,255,255,.66); --dark-rule:rgba(255,255,255,.14); --container:1280px; } /* Fargetema for søsterselskapet. Legg data-brand="jmas" på i JMAS-sidene, så bytter hele nettstedet aksentfarge uten at noe annet må endres. */ html[data-brand="jmas"]{ --red:#1f6fa8; --red-dark:#17547e; } /* ============================================================= 2. GRUNNSTILER ============================================================= */ *{box-sizing:border-box} html,body{margin:0;padding:0} /* Skroll hviler ved starten av hver seksjon i stedet for å stanse midt mellom to bånd, med masse luft over og under. */ html{scroll-snap-type:y proximity} .site-header,.hero,.page-hero,.band,.prefooter,.site-footer{scroll-snap-align:start} body{ background:var(--paper); color:var(--ink); font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit} .container{max-width:var(--container);margin:0 auto;padding:0 28px} /* Overskriftene settes i en litt bredere variant av Archivo. Det er dette som gir slektskap med logoen. */ h1,h2,h3{ margin:0; font-weight:800; font-stretch:112%; letter-spacing:-.018em; line-height:1.08; } /* Etikett over overskrift, med rød strek foran. */ .eyebrow{ display:flex;align-items:center;gap:14px; margin:0 0 20px; font-size:14px;font-weight:600; color:var(--ink-3); } .eyebrow::before{content:"";width:44px;height:3px;background:var(--red)} /* Skrå striper. Samme motiv som divideren i headeren. Dette er det eneste dekorative elementet på nettstedet – ikke legg til flere. */ .stripe-edge{ height:14px; background:repeating-linear-gradient(-76deg, rgba(20,22,26,.22) 0 9px, rgba(20,22,26,0) 9px 13px); } .btn{ display:inline-flex;align-items:center;justify-content:center; height:46px;padding:0 22px; background:var(--red);color:#fff; font-size:14.5px;font-weight:700;text-decoration:none; transition:background-color .2s; } .textlink{ font-size:15px;font-weight:700;text-decoration:none; border-bottom:3px solid var(--red);padding-bottom:3px; white-space:nowrap; } :focus-visible{outline:3px solid var(--red);outline-offset:3px} /* --- Prosjektregister (hurtiglenker) --- */ .register{ list-style:none;margin:36px 0 0;padding:0; border-top:2px solid var(--ink); display:grid;grid-template-columns:repeat(3,1fr); } .register li{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)} .register li:nth-child(3n){border-right:0} .register li:not(:nth-child(3n+1)) a{padding-left:24px} .register a{display:block;padding:16px 24px 18px 0;text-decoration:none} .register-name{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em} .register-where{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-3)} /* --- Prosjekt ------------------------------------------------- Beskrivelsen ligger sammenleggbar, slik at siden er mulig å skumme på mobil. Fakta og nøkkelpunkt står alltid åpent. */ .project{border-top:2px solid var(--ink);padding:30px 0 34px} .project:first-of-type{margin-top:44px} .project-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap} .project h3{font-size:clamp(22px,2.4vw,28px)} .project-where{margin:8px 0 0;font-size:14.5px;color:var(--ink-3);font-weight:600} .hms-badge,.role-badge{ flex:0 0 auto;display:inline-flex;align-items:center;gap:9px; padding:8px 14px;border:1px solid var(--rule); font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap; } .hms-badge::before,.role-badge::before{content:"";width:8px;height:8px;background:var(--red)} /* --- Rolle (gjenbruker .project-oppsettet) --- */ .role-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:6px} .role-lists h4{ margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--rule); font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink-3); } .checklist{list-style:none;margin:0;padding:0} .checklist li{position:relative;padding-left:22px;margin-bottom:9px;font-size:15px;color:var(--ink-2)} .checklist li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--red)} .checklist li:last-child{margin-bottom:0} .project-facts{ margin:24px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule); } .project-facts > div{background:var(--paper-2);padding:14px 16px} .band--paper .project-facts > div{background:var(--paper)} .project-facts dt{margin:0 0 3px;font-size:12.5px;font-weight:700;color:var(--ink-3)} .project-facts dd{margin:0;font-size:15px;color:var(--ink);line-height:1.45} .tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0} .tag{padding:6px 12px;border:1px solid var(--rule);font-size:13px;font-weight:600;color:var(--ink-2)} /* Prosjektbilder. To i bredden på skjerm, stablet på mobil. */ .project-media{margin:26px 0 0} .project-media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .project-media figure{margin:0} .project-media img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2,#e9ebf0)} .project-media figcaption{ margin-top:10px;padding-top:9px;border-top:1px solid var(--rule); font-size:13.5px;color:var(--ink-3); } .project-media figcaption b{display:block;color:var(--ink-2);font-weight:700} .project-body{margin-top:10px} .project-body p{margin:0 0 14px;color:var(--ink-2);max-width:80ch} .project-body p:last-child{margin-bottom:0} /* --- Kontaktpersoner ------------------------------------------ Portrettene ligger i assets/img/people/. Når ekte bilder foreligger, overskriv filene med samme navn – da trengs ingen endring i HTML. */ .people{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px} .person-img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#22252b} .person-name{ margin:0;border-top:2px solid var(--ink);padding-top:14px; font-size:21px;font-weight:800;font-stretch:110%;letter-spacing:-.015em; } .person-role{margin:4px 0 16px;font-size:14px;font-weight:600;color:var(--red)} .person-contact{list-style:none;margin:0;padding:0} .person-contact li + li{margin-top:8px} .person-contact a{ display:inline-flex;align-items:center;gap:11px; font-size:15.5px;color:var(--ink-2);text-decoration:none; } .person-contact svg{flex:0 0 17px;color:var(--ink-3)} /* --- Avslutning med kartmerke --- */ .outro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center} .outro-map{margin:0} .outro-map img{width:100%;max-width:330px;height:auto;margin:0 auto;opacity:.9} .detail-list{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--ink)} .detail-list li{ display:flex;gap:20px;align-items:baseline; padding:15px 0;border-bottom:1px solid var(--rule); } .detail-list dt,.detail-list .label{ flex:0 0 108px;font-size:13.5px;font-weight:700;color:var(--ink-3); } .detail-list a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px} /* Tekst kun for skjermlesere. */ .visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* Hopp til innhold – vises kun ved tabulering. */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--red);color:#fff;padding:12px 20px; font-weight:700;text-decoration:none; } .skip-link:focus{left:0} /* ============================================================= 3. HEADER ============================================================= */ .site-header{background:var(--dark)} .header-inner{ display:flex;align-items:center;justify-content:space-between; gap:20px;min-height:74px; } .brand{display:inline-flex;align-items:stretch;text-decoration:none;background:var(--dark-3)} .brand-left{display:flex;align-items:center;padding:12px 22px;background:#f2f3f5} .brand-logo{height:clamp(22px,3.9vw,42px);width:auto;max-width:none;flex-shrink:0} .brand-divider{ width:clamp(38px,6.8vw,73px);flex-shrink:0;position:relative; clip-path:polygon(0 0,100% 0,78% 100%,0 100%); background:linear-gradient(90deg, #f2f3f5 0%,#d8dbe0 20%,#aeb4bd 42%,#707785 64%,#2b2f39 82%,var(--dark-3) 92%); } .brand-divider::before{ content:"";position:absolute;inset:0; clip-path:polygon(0 0,100% 0,78% 100%,0 100%); background:repeating-linear-gradient(-76deg, rgba(255,255,255,.7) 0 10px,rgba(255,255,255,0) 10px 14px); -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.75),rgba(0,0,0,.3) 72%,transparent); mask-image:linear-gradient(to right,rgba(0,0,0,.75),rgba(0,0,0,.3) 72%,transparent); opacity:.6; } .brand-right{ display:flex;flex-direction:column;justify-content:center; padding:10px 22px;background:var(--dark-3); } .brand-title{ font-weight:800;font-size:16px;font-stretch:118%; letter-spacing:.01em;text-transform:uppercase; color:#fff;line-height:1.1; } .brand-subtitle{font-size:11.5px;color:var(--dark-ink-2);margin-top:2px} /* Lenke til søsterselskapet. Blå prikk skiller den fra DJAS-rødt. */ .subbrand{ display:inline-flex;align-items:center;gap:10px; padding:10px 15px;border:1px solid rgba(255,255,255,.16); font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--dark-ink-2);text-decoration:none; transition:border-color .25s,color .25s,background-color .25s; } .subbrand::before{content:"";width:8px;height:8px;background:#4b93c9} /* ============================================================= 4. MENY ============================================================= */ .primary-nav{background:var(--dark-2);border-top:1px solid var(--dark-rule)} .nav-inner{display:flex;align-items:center;gap:30px;height:54px} .nav-link{ position:relative;display:inline-flex;align-items:center;height:100%; font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--dark-ink-2);text-decoration:none; } .nav-link::after{ content:"";position:absolute;left:0;right:100%;bottom:0; height:3px;background:var(--red);transition:right .25s ease; } .nav-link.active{color:#fff} .nav-link.active::after{right:0} .nav-toggle{display:none} /* ============================================================= 5. HERO ============================================================= */ .hero{ position:relative;color:var(--dark-ink); background: linear-gradient(100deg, rgba(13,15,18,.85) 0%, rgba(13,15,18,.72) 46%, rgba(13,15,18,.30) 100%), image-set( url("../img/design/knusing-1920.webp") type("image/webp"), url("../img/design/knusing-1920.jpg") type("image/jpeg") ) center 40% / cover no-repeat; } .hero-grid{ display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:64px;align-items:end;padding:88px 0 76px; } .hero h1{font-size:clamp(36px,5.2vw,62px);max-width:16ch;color:#fff;margin-bottom:26px} .hero-lead{margin:0 0 16px;color:var(--dark-ink-2);max-width:58ch;font-size:16.5px} .hero-lead:last-child{margin-bottom:0} .hero .eyebrow{color:var(--dark-ink-2)} /* Rekrutteringsboksen */ .notice{ border:1px solid rgba(255,255,255,.18); border-top:4px solid var(--red); padding:24px;background:rgba(255,255,255,.04); } .notice-flag{ display:flex;align-items:center;gap:10px;margin:0; font-size:13px;font-weight:700;letter-spacing:.05em;color:#fff; } .notice-dot{ width:9px;height:9px;border-radius:50%;background:var(--red); box-shadow:0 0 0 5px rgba(209,10,16,.2); } .notice p{margin:14px 0 20px;font-size:15px;color:var(--dark-ink-2)} /* ============================================================= 6. BÅND Vekslingen lys/mørk styres kun av disse tre klassene. Rekkefølgen på forsiden er: hero(mørk) – hvit – mørk – lys – kontakt(mørk) ============================================================= */ .band{padding:84px 0} .band--paper{background:var(--paper)} .band--white{background:var(--paper-2)} .band--dark{background:var(--dark);color:var(--dark-ink)} .band--dark .eyebrow{color:var(--dark-ink-2)} .band-head h2{font-size:clamp(28px,3.4vw,42px)} /* ============================================================= 7. FRA ANLEGGET Fylles automatisk med de tre siste innleggene fra aktivitetssiden. ============================================================= */ .feed-top{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap} .feed{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px} .post-img{width:100%;height:230px;object-fit:cover} .post-meta{ display:flex;align-items:center;gap:12px;margin:0; border-top:2px solid var(--ink);padding-top:14px; font-size:13px;font-weight:600;color:var(--ink-3); } .post-meta span:first-child{color:var(--red)} .post h3{font-size:20px;margin:12px 0 10px} .post p{margin:0;color:var(--ink-2);font-size:15.5px} /* ============================================================= 8. HVEM VI ER ============================================================= */ .who{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px;align-items:start} .statement{max-width:34ch} .statement h2{font-size:clamp(28px,3.4vw,42px);color:#fff} .who-body p{margin:0 0 16px;color:var(--dark-ink-2)} .who-body p:last-child{margin-bottom:0} .facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--dark-rule)} .facts > div{padding:22px 24px 0 0;border-right:1px solid var(--dark-rule)} .facts > div:not(:nth-child(4n+1)){padding-left:24px} .facts > div:last-child{border-right:0} .facts dt{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--dark-ink-2)} .facts dd{margin:0;font-size:19px;font-weight:700;font-stretch:110%;color:#fff;line-height:1.25} /* ============================================================= 9. DØRER ============================================================= */ .doors{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:2px solid var(--ink)} .door{ position:relative;display:block;text-decoration:none; padding:32px 34px 38px 0;border-right:1px solid var(--rule); } .door:not(:nth-child(3n+1)){padding-left:34px} .door:last-child{border-right:0} .door::before{ content:"";position:absolute;left:0;right:100%;top:-2px; height:4px;background:var(--red);transition:right .3s ease; } .door h3{font-size:24px;margin-bottom:12px} .door p{margin:0 0 20px;color:var(--ink-2);font-size:15.5px} .door-proof{ display:block;border-top:1px solid var(--rule);padding-top:14px; font-size:14px;font-weight:600;color:var(--ink-3); } /* ============================================================= 10. KONTAKT OG BUNN ============================================================= */ .prefooter{position:relative;overflow:hidden;background:var(--dark);color:var(--dark-ink);padding:70px 0 64px} .prefooter-bg{ position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); font-size:clamp(58px,11.5vw,158px);font-weight:800;font-stretch:118%; letter-spacing:-.035em;white-space:nowrap;line-height:1;text-align:center; color:rgba(255,255,255,.04);pointer-events:none;user-select:none; } .prefooter-inner{position:relative} .prefooter h2{font-size:24px;color:#fff;margin-bottom:30px} .contact-list{list-style:none;margin:0;padding:0;display:flex;gap:48px;flex-wrap:wrap} .contact-list a{display:inline-flex;align-items:center;gap:12px;color:var(--dark-ink-2);text-decoration:none;font-size:16px} .contact-list svg{flex:0 0 18px;color:var(--red)} .site-footer{background:var(--dark-2);color:rgba(255,255,255,.46);font-size:13.5px;padding:22px 0} .site-footer a{color:rgba(255,255,255,.66);text-decoration:none} /* ============================================================= 11. INNHOLDSKOMPONENTER Byggeklosser for undersidene. Samme strukturspråk som forsiden: innhold står på streker, ikke i bokser. ============================================================= */ /* --- Kompakt topp på undersidene ------------------------------ Lavere enn heroen på forsiden. Bakgrunnsbildet settes per side med --hero-img direkte i HTML-en. */ .page-hero{ position:relative;color:var(--dark-ink); background: linear-gradient(100deg, rgba(13,15,18,.97) 0%, rgba(13,15,18,.91) 50%, rgba(13,15,18,.62) 100%), var(--hero-img) center 45% / cover no-repeat; } .page-hero-inner{padding:64px 0 60px} .page-hero .eyebrow{color:var(--dark-ink-2)} .page-hero h1{font-size:clamp(32px,4.4vw,50px);color:#fff;margin-bottom:22px;max-width:20ch} .page-hero p{margin:0 0 16px;color:var(--dark-ink-2);max-width:62ch;font-size:16.5px} .page-hero p:last-child{margin-bottom:0} /* --- Ingress under en seksjonsoverskrift --- */ .lead{margin:0;color:var(--ink-2);max-width:70ch;font-size:17px} .band--dark .lead{color:var(--dark-ink-2)} /* --- Rutenett med streker ------------------------------------- Hovedkomponenten for innhold. Erstatter kort og bokser. Bruk --2, --3 eller --4 for antall kolonner. */ .rulegrid{ display:grid;gap:0;margin-top:44px; border-top:2px solid var(--ink); } .rulegrid--2{grid-template-columns:repeat(2,1fr)} .rulegrid--3{grid-template-columns:repeat(3,1fr)} .rulegrid--4{grid-template-columns:repeat(4,1fr)} .rulegrid > *{ padding:26px 34px 30px 0; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); } .rulegrid--2 > *:nth-child(2n), .rulegrid--3 > *:nth-child(3n), .rulegrid--4 > *:nth-child(4n){border-right:0} .rulegrid > *:last-child{border-right:0} .rulegrid h3{ position:relative;padding-left:26px; font-size:20px;margin-bottom:10px; } .rulegrid h3::before{ content:"";position:absolute;left:0;top:.55em; width:12px;height:3px;background:var(--red); } .rulegrid p{margin:0;color:var(--ink-2);font-size:15.5px;padding-left:26px} .rulegrid p + p{margin-top:12px} /* Samme komponent på mørkt bånd */ .band--dark .rulegrid{border-top-color:var(--dark-rule)} .band--dark .rulegrid > *{border-bottom-color:var(--dark-rule);border-right-color:var(--dark-rule)} .band--dark .rulegrid h3{color:#fff} .band--dark .rulegrid p{color:var(--dark-ink-2)} /* Fremhevet rute i rutenettet */ .rulegrid .highlight{background:rgba(209,10,16,.05)} .band--dark .rulegrid .highlight{background:rgba(255,255,255,.04)} /* --- Tabell over tiltaksklasser --- */ .qual-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px} .qual-table th{ text-align:left;padding:10px 14px 10px 0; border-bottom:2px solid var(--ink); font-weight:700;font-size:13px;color:var(--ink-3); } .qual-table td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)} .qual-table td:last-child{ font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums;text-align:right;padding-right:0; } .qual-table th:last-child{text-align:right;padding-right:0} /* --- Utvidbar seksjon --- */ .disclose{margin-top:22px;border-top:1px solid var(--rule);padding-top:16px} .disclose > summary{ cursor:pointer;list-style:none; font-size:14.5px;font-weight:700;color:var(--red); display:inline-flex;align-items:center;gap:10px; } .disclose > summary::-webkit-details-marker{display:none} .disclose > summary::before{ content:"";width:10px;height:10px; border-right:2px solid var(--red);border-bottom:2px solid var(--red); transform:rotate(45deg) translateY(-2px);transition:transform .2s ease; } .disclose[open] > summary::before{transform:rotate(-135deg) translateY(-2px)} /* --- Rammet notat, brukt sparsomt --- */ .callout{ margin-top:36px;padding:26px 28px; border-left:4px solid var(--red);background:var(--paper-2); color:var(--ink-2); } .band--white .callout{background:var(--paper)} .band--dark .callout{background:rgba(255,255,255,.04);color:var(--dark-ink-2)} .callout p{margin:0;max-width:74ch} /* --- Kontaktpersoner ------------------------------------------ Portrettene har fast høyde/bredde-forhold slik at de tre kortene står i linje uansett hvilke bilder som legges inn. */ .people{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px} .portrait{ position:relative;aspect-ratio:4/5;overflow:hidden; background:var(--dark-3);border-top:4px solid var(--red); } .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%} /* Plassholder inntil portrettene er tatt. Byttes ut med . */ .portrait--empty{display:flex;align-items:center;justify-content:center} .portrait--empty span{ font-size:44px;font-weight:800;font-stretch:118%;letter-spacing:.04em; color:rgba(255,255,255,.22); } .person h3{font-size:21px;margin:20px 0 4px} .person .role{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--red)} .person ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--rule)} .person li + li{margin-top:8px} .person a{color:var(--ink-2);text-decoration:none;font-size:15.5px} .person a:hover{color:var(--ink)} /* ============================================================= 12. HOVER Samlet på ett sted, og bak (hover:hover), så ingenting av dette når fingeren på en mobil eller et nettbrett. Uten den sperren krever iOS Safari to trykk på lenker med :hover-stil: det første trykket spiller bare av hover-fargen, og bruker som prøver å komme seg videre i menyen opplever at lenken ikke gjør noe. ============================================================= */ @media (hover:hover){ .btn:hover{background:var(--red-dark)} .textlink:hover{color:var(--red)} .register a:hover .register-name{color:var(--red)} .person-contact a:hover{color:var(--ink)} .subbrand:hover{border-color:rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.04)} .nav-link:hover{color:#fff} .nav-link:hover::after{right:0} .door:hover::before{right:0} .door:hover h3{color:var(--red)} .contact-list a:hover{color:#fff} .site-footer a:hover{color:#fff} .detail-list a:hover{color:var(--red)} } /* ============================================================= 13. RESPONSIVT Én nettside som brytes om. Ingen egen mobilversjon. ============================================================= */ @media (max-width:1040px){ .role-lists{grid-template-columns:1fr;gap:28px} .register{grid-template-columns:repeat(2,1fr)} .register li:nth-child(3n){border-right:1px solid var(--rule)} .register li:nth-child(2n){border-right:0} .people{grid-template-columns:repeat(3,1fr);gap:24px} .outro{grid-template-columns:1fr;gap:36px} .outro-map img{max-width:250px} .rulegrid--3,.rulegrid--4{grid-template-columns:repeat(2,1fr)} .rulegrid--3 > *:nth-child(3n), .rulegrid--4 > *:nth-child(4n){border-right:1px solid var(--rule)} .rulegrid > *:nth-child(2n){border-right:0} .band--dark .rulegrid > *:nth-child(2n-1){border-right-color:var(--dark-rule)} .page-hero-inner{padding:48px 0 46px} .hero{ background: linear-gradient(180deg,rgba(13,15,18,.72) 0%,rgba(13,15,18,.85) 70%), image-set( url("../img/design/knusing-1200.webp") type("image/webp"), url("../img/design/knusing-1200.jpg") type("image/jpeg") ) center / cover no-repeat; } .hero-grid{grid-template-columns:1fr;gap:40px;padding:60px 0 56px;align-items:start} .who{grid-template-columns:1fr;gap:32px} .statement{max-width:none} .facts{grid-template-columns:repeat(2,1fr)} .facts > div:nth-child(2n){border-right:0} .feed{grid-template-columns:1fr;gap:40px} .post-img{height:250px} .doors{grid-template-columns:1fr} .door{border-right:0;border-bottom:1px solid var(--rule);padding:28px 0 30px} .door::before{display:none} } @media (max-width:760px){ body{font-size:16px} .register{grid-template-columns:1fr} .register li{border-right:0 !important} .project-facts{grid-template-columns:1fr} .project-media-grid{grid-template-columns:1fr;gap:26px} .role-lists{grid-template-columns:1fr;gap:26px} .hms-badge{order:-1} .people{grid-template-columns:1fr;gap:44px} .detail-list li{flex-direction:column;gap:4px} .detail-list .label{flex:none} .rulegrid,.rulegrid--2,.rulegrid--3,.rulegrid--4{grid-template-columns:1fr} .rulegrid > *{border-right:0 !important;padding:22px 0 24px} .callout{padding:22px 20px} .qual-table{font-size:13.5px} .band{padding:56px 0} .container{padding:0 20px} .subbrand{display:none} .brand-left{padding:10px 14px} .brand-right{padding:12px 12px} .brand-title{font-size:15px} .facts{grid-template-columns:1fr} .facts > div{border-right:0;border-bottom:1px solid var(--dark-rule);padding:18px 0} .contact-list{flex-direction:column;gap:18px} /* Menyen kollapser til én knapp */ .nav-toggle{ display:inline-flex;align-items:center;gap:11px; height:54px;padding:0;cursor:pointer; background:none;border:0;color:var(--dark-ink-2); font:inherit;font-size:12.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } .nav-toggle svg{width:20px;height:20px} .nav-inner{flex-direction:column;align-items:stretch;height:auto;gap:0} .nav-links{display:none;flex-direction:column;padding-bottom:8px} .nav-inner[data-open="true"] .nav-links{display:flex} .nav-link{height:48px;border-top:1px solid var(--dark-rule)} .nav-link::after{display:none} .nav-link.active{color:var(--red)} } @media (min-width:761px){ .nav-links{display:flex;align-items:center;gap:30px;height:100%} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }