/* ========================================================================== SLOTTSFJELL ATELIER — stilark Alt utseende styres av verdiene i :root nedenfor: farger, skriftstørrelser, avstander, avrundinger og bevegelse. Resten av fila bruker bare disse verdiene, aldri egne tall. Skal du endre noe, endre det her, så følger hele nettsiden etter. ========================================================================== */ :root { /* --- FARGER ---------------------------------------------------------- */ /* HOVEDFARGE: babyblå. Bakgrunnen på hele sida. */ --babyblaa: #E4EFF7; /* Grunnfarge. Bakgrunn på alle sider. */ --babyblaa-dyp: #D3E4F0; /* Litt dypere babyblå. Brukes på annenhver seksjon. */ --kort: #F7FBFD; /* Nesten hvit. Bakgrunn i kort og felt. */ /* ANDREFARGE: marineblå. Bunnfeltet, overtitler, tall, «Atelier» i toppen. */ --marine: #1F3D63; --marine-mork: #162C48; /* Mørkere. Hover og trykk. */ --marine-lys: #B4C6DA; /* Lys. Dempet tekst på marineblå bunn. */ /* AKSENT: skogsgrønn. Knapper, streker, prikker, små detaljer. */ --skog: #2E5D3A; --skog-mork: #285233; /* Mørkere grønn. Knapper og liten tekst. */ --tekst: #2B2B2B; /* Brødtekst og overskrifter. */ --tekst-dempet: #4F5B63; /* Bildetekst, detaljer, mindre viktig tekst. */ --tekst-lys: #E4EFF7; /* Tekst på marineblå bunn. */ --tekst-svak: #77848D; /* Hjelpetekst inni felt. */ --linje: #C6D9E6; /* Tynne skillelinjer og kantlinjer. */ --linje-lys: rgba(228, 239, 247, 0.22); /* Skillelinjer på marineblå bunn. */ /* Bilderammene. Dempet gull, som en klassisk rammelist. Gull mot blå vegg er den klassiske utstillingskombinasjonen. Lys og mørk brukes på hver sin side, så listen ser ut til å ha dybde. */ --ramme: #A8834E; --ramme-lys: #C09B63; --ramme-mork: #7E6238; --slor: 20, 26, 30; /* Grunntonen i det mørke sløret over hero-bildet. */ /* --- SKRIFT ---------------------------------------------------------- */ /* Bytter du skrifttype, bytt også lenka i i HTML-filene. */ --skrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --skrift-tittel: 'Fraunces', Georgia, 'Times New Roman', serif; /* Tre vekter på hele siden. Ikke flere. */ --vekt-vanlig: 400; --vekt-medium: 500; --vekt-halvfet: 600; /* Skriftstørrelser. Alt på siden bruker én av disse. clamp(minst, vokser med skjermen, størst) */ --tekst-xs: 0.78rem; --tekst-s: 0.875rem; --tekst-m: 1rem; --tekst-l: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); --tekst-xl: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); --tittel-xs: 1.25rem; --tittel-s: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem); --tittel-m: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem); --tittel-l: clamp(2.3rem, 1.7rem + 2.8vw, 3.8rem); /* Tre linjeavstander. */ --linje-tett: 1.15; /* overskrifter */ --linje-mid: 1.35; /* sitat og store ingresser */ --linje-luft: 1.65; /* brødtekst */ /* Sperring på store bokstaver. */ --sperret: 0.14em; /* --- AVSTANDER ------------------------------------------------------- */ /* Én trapp. Alle marger, luft og mellomrom henter herfra. */ --rom-1: 0.25rem; --rom-2: 0.5rem; --rom-3: 0.75rem; --rom-4: 1rem; --rom-5: 1.5rem; --rom-6: 2.5rem; --rom-7: 4rem; --rom-8: clamp(4rem, 3rem + 5vw, 7rem); /* mellom seksjoner */ --bredde: 1160px; /* maks innholdsbredde */ --kant: clamp(1.25rem, 4vw, 3rem); /* luft mot skjermkanten */ --topp-hoyde: 4.5rem; /* høyden på toppfeltet */ --portrett: 5.5rem; /* lærerbildene */ --kart-hoyde: clamp(16rem, 40vw, 24rem); /* --- FORM ------------------------------------------------------------ */ /* Tre avrundinger på hele siden. Ikke flere. */ --rund-0: 0; --rund-m: 10px; --rund-pille: 999px; --rund-sirkel: 50%; --kant-tynn: 1px; --ramme-list: 7px; /* bredden på rammelisten */ --skygge: 0 16px 40px -28px rgba(31, 61, 99, 0.45); /* --- BEVEGELSE ------------------------------------------------------- */ /* Én kurve og tre tempoer. Alt som beveger seg bruker disse. */ --kurve: cubic-bezier(0.22, 1, 0.36, 1); --fart-rask: 0.18s; --fart: 0.35s; --fart-rolig: 0.7s; --loft: -3px; /* hvor mye et kort løftes når man peker på det */ } /* ========================================================================== GRUNNLAG ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--babyblaa); color: var(--tekst); font-family: var(--skrift); font-size: var(--tekst-m); font-weight: var(--vekt-vanlig); line-height: var(--linje-luft); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--skrift-tittel); font-weight: var(--vekt-vanlig); line-height: var(--linje-tett); letter-spacing: -0.01em; text-wrap: balance; margin: 0; } h1 { font-size: var(--tittel-l); } h2 { font-size: var(--tittel-m); } h3 { font-size: var(--tittel-s); } /* Alle avsnitt får luft nedenfor, aldri ovenfor. Da blir avstanden mellom avsnitt lik overalt, uansett hva som står rundt. */ p { margin: 0 0 var(--rom-4); } p:last-child { margin-bottom: 0; } a { color: inherit; } /* Tastaturfokus skal alltid være godt synlig. */ :focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; border-radius: var(--rund-0); } /* Lenke rett til innholdet, for de som bruker tastatur eller skjermleser. */ .hopp-lenke { position: absolute; left: var(--kant); top: calc(var(--rom-8) * -1); z-index: 200; padding: var(--rom-3) var(--rom-5); background: var(--marine); color: var(--tekst-lys); border-radius: var(--rund-m); text-decoration: none; font-size: var(--tekst-s); transition: top var(--fart) var(--kurve); } .hopp-lenke:focus { top: var(--rom-4); } /* Synlig bare for skjermlesere. */ .kun-skjermleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ========================================================================== BYGGEKLOSSER ========================================================================== */ .midt { width: 100%; max-width: var(--bredde); margin-inline: auto; padding-inline: var(--kant); } .seksjon { padding-block: var(--rom-8); } .seksjon--dyp { background: var(--babyblaa-dyp); } .seksjon--tett { padding-top: 0; } /* Den lille teksten med store bokstaver over overskriftene. */ .overtittel { display: block; font-size: var(--tekst-xs); font-weight: var(--vekt-medium); letter-spacing: var(--sperret); text-transform: uppercase; color: var(--marine); margin-bottom: var(--rom-4); } .ingress { font-size: var(--tekst-l); line-height: var(--linje-luft); color: var(--tekst-dempet); max-width: 58ch; margin-bottom: 0; } /* Overskrift og ingress hører sammen, så luften mellom dem er mindre enn luften ned til innholdet under. */ .seksjon-topp { max-width: 62ch; margin-bottom: var(--rom-7); } .seksjon-topp h1, .seksjon-topp h2 { margin-bottom: var(--rom-5); } /* --- Bilderamme ----------------------------------------------------------- Én ramme, brukt tre steder: bildene i galleriet, bildet på om oss, og sitatet fra avisa. Med vilje IKKE på kort, priser eller lærere — da ville hele siden blitt rammer, og det er nettopp det som gjør en side rotete. Rammen er bygget slik en ekte ramme er: en list ytterst (border), et passepartout innenfor (padding + lys bakgrunn), og en hårtynn strek der passepartouten møter bildet. --------------------------------------------------------------------------- */ .ramme { margin: 0; padding: var(--rom-4); background: var(--kort); border: var(--ramme-list) solid var(--ramme); /* Lys på oversiden, mørk på undersiden, så listen får dybde. */ border-top-color: var(--ramme-lys); border-left-color: var(--ramme-lys); border-bottom-color: var(--ramme-mork); border-right-color: var(--ramme-mork); border-radius: var(--rund-0); box-shadow: var(--skygge); transition: transform var(--fart) var(--kurve); } /* Hårtynn strek rundt selve bildet, slik ekte innramming har. */ .ramme img { display: block; width: 100%; box-shadow: 0 0 0 var(--kant-tynn) rgba(31, 61, 99, 0.14); } .ramme__tekst { padding-top: var(--rom-4); font-size: var(--tekst-s); color: var(--tekst-dempet); text-align: center; } /* Litt smalere list på telefon, ellers spiser rammene opp bildet. */ @media (max-width: 559px) { .ramme { padding: var(--rom-3); border-width: 5px; } } /* --- Knapper -------------------------------------------------------------- */ .knapp { display: inline-flex; align-items: center; gap: var(--rom-2); padding: var(--rom-3) var(--rom-6); border: var(--kant-tynn) solid transparent; border-radius: var(--rund-pille); font-family: var(--skrift); font-size: var(--tekst-s); font-weight: var(--vekt-medium); line-height: var(--linje-luft); text-decoration: none; cursor: pointer; transition: transform var(--fart) var(--kurve), background-color var(--fart) var(--kurve), border-color var(--fart) var(--kurve); } .knapp--fylt { background: var(--skog-mork); color: #FFFFFF; } .knapp--fylt:hover { background: var(--skog); transform: translateY(var(--loft)); } .knapp--tom { background: transparent; border-color: var(--linje); color: var(--tekst); } .knapp--tom:hover { border-color: var(--marine); transform: translateY(var(--loft)); } /* Lys variant, til bruk oppå hero-bildet. */ .knapp--lys { background: rgba(247, 251, 253, 0.14); border-color: rgba(247, 251, 253, 0.5); color: #FFFFFF; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .knapp--lys:hover { background: rgba(247, 251, 253, 0.26); transform: translateY(var(--loft)); } .knapp-rad { display: flex; flex-wrap: wrap; gap: var(--rom-4); margin-top: var(--rom-6); } /* ========================================================================== TOPPEN — logo og meny ========================================================================== */ .topp { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: var(--kant-tynn) solid transparent; transition: background-color var(--fart) var(--kurve), border-color var(--fart) var(--kurve); } /* Når man har rullet, eller på undersidene, får toppen bakgrunn. */ .topp--fast, .topp.er-rullet { background: rgba(228, 239, 247, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--linje); } .topp__innhold { display: flex; align-items: center; justify-content: space-between; gap: var(--rom-5); min-height: var(--topp-hoyde); } .merke { font-family: var(--skrift-tittel); font-size: var(--tittel-xs); font-weight: var(--vekt-vanlig); line-height: var(--linje-tett); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .merke__del2 { color: var(--marine); } /* Over hero-bildet er teksten hvit til man ruller. */ .topp:not(.er-rullet):not(.topp--fast) .merke { color: #FFFFFF; } .topp:not(.er-rullet):not(.topp--fast) .merke__del2 { color: rgba(255, 255, 255, 0.78); } .topp:not(.er-rullet):not(.topp--fast) .meny__lenke { color: #FFFFFF; } .topp:not(.er-rullet):not(.topp--fast) .meny-knapp { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.45); } .meny { display: none; } .meny__liste { display: flex; align-items: center; gap: var(--rom-6); list-style: none; margin: 0; padding: 0; } .meny__lenke { position: relative; font-size: var(--tekst-s); text-decoration: none; padding-block: var(--rom-1); transition: color var(--fart) var(--kurve); } /* Tynn strek som gror fram under lenka. */ .meny__lenke::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--kant-tynn); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--fart) var(--kurve); } .meny__lenke:hover::after, .meny__lenke[aria-current='page']::after { transform: scaleX(1); } .meny-knapp { display: inline-flex; align-items: center; gap: var(--rom-2); background: transparent; border: var(--kant-tynn) solid var(--linje); border-radius: var(--rund-pille); padding: var(--rom-2) var(--rom-4); font-family: var(--skrift); font-size: var(--tekst-s); color: var(--tekst); cursor: pointer; } .meny-knapp__strek { display: block; width: 1em; height: 1.5px; background: currentColor; box-shadow: 0 5px currentColor; } /* Menyen som glir ned på mobil. */ .mobilmeny { position: fixed; inset: 0; z-index: 99; background: var(--babyblaa); padding: calc(var(--topp-hoyde) + var(--rom-5)) var(--kant) var(--rom-7); display: flex; flex-direction: column; gap: var(--rom-4); opacity: 0; visibility: hidden; transform: translateY(-8px); /* visibility ventes ut til slutten når menyen lukkes, så den rekker å tone ut, men slås på med én gang når den åpnes, slik at tastaturfokus kan flyttes inn i den umiddelbart. */ transition: opacity var(--fart) var(--kurve), transform var(--fart) var(--kurve), visibility 0s linear var(--fart); } .mobilmeny.er-apen { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--fart) var(--kurve), transform var(--fart) var(--kurve), visibility 0s linear 0s; } .mobilmeny__lenke { font-family: var(--skrift-tittel); font-size: var(--tittel-s); text-decoration: none; padding-block: var(--rom-4); border-bottom: var(--kant-tynn) solid var(--linje); } .mobilmeny__lenke[aria-current='page'] { color: var(--marine); } @media (min-width: 800px) { .meny { display: block; } .meny-knapp { display: none; } .mobilmeny { display: none; } } /* ========================================================================== HERO — bildet som fyller hele skjermen ========================================================================== */ .hero { position: relative; /* 100svh = «liten» skjermhøyde. Hindrer at adresselinja på mobil dytter bildet slik at det blir en stripe under. */ height: 100vh; height: 100svh; min-height: 34rem; display: flex; align-items: flex-end; overflow: hidden; /* Samme farge som resten av sida, slik at hero-en løser seg opp i bakgrunnen når man ruller, i stedet for å ende i en mørk stripe. */ background: var(--babyblaa); } .hero__media { position: absolute; inset: 0; z-index: 0; will-change: transform, opacity; } /* Bildet dekker alltid hele flata, uansett skjermformat. */ .hero__bilde { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; } /* Three.js-laget legger seg oppå bildet. Skjult til det er klart. */ .hero__lerret { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } /* Mørk tone nedover slik at den hvite teksten alltid er lesbar. */ .hero__slor { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(var(--slor), 0.52) 0%, rgba(var(--slor), 0.22) 40%, rgba(var(--slor), 0.04) 68%, rgba(var(--slor), 0.26) 100%); } .hero__innhold { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(4rem, 10vh, 7rem); color: #FFFFFF; } .hero__overtittel { color: rgba(255, 255, 255, 0.82); } /* Overskrifta og ingressen er tatt bort fra hero, så bildet får stå alene. Overtittelen og knappene er det eneste som ligger oppå nå. */ .hero__overtittel { margin-bottom: var(--rom-5); } .hero__innhold .knapp-rad { margin-top: 0; } /* Liten «bla ned»-markør. */ .hero__rull { position: absolute; right: var(--kant); bottom: clamp(4rem, 10vh, 7rem); z-index: 2; display: none; align-items: center; gap: var(--rom-3); font-size: var(--tekst-xs); letter-spacing: var(--sperret); text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .hero__rull-strek { display: block; width: var(--kant-tynn); height: var(--rom-6); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent); } /* På telefon fyller teksten mer av bildet, så sløret må være litt kraftigere for at den hvite teksten skal være godt lesbar uansett motiv. */ @media (max-width: 699px) { .hero__slor { background: linear-gradient(to top, rgba(var(--slor), 0.76) 0%, rgba(var(--slor), 0.52) 46%, rgba(var(--slor), 0.18) 74%, rgba(var(--slor), 0.38) 100%); } } @media (min-width: 800px) { .hero__rull { display: flex; } .hero__bilde { object-position: 50% 55%; } } /* ========================================================================== KORT — brukes til «hva vi tilbyr» ========================================================================== */ .kort-rutenett { display: grid; gap: var(--rom-5); grid-template-columns: 1fr; } .kort { background: var(--kort); border: var(--kant-tynn) solid var(--linje); border-radius: var(--rund-m); padding: var(--rom-6); transition: transform var(--fart) var(--kurve), border-color var(--fart) var(--kurve); } .kort:hover { transform: translateY(var(--loft)); border-color: var(--marine); } /* Kort strek i terrakotta over hver korttittel. */ .kort__strek { display: block; width: var(--rom-6); height: 2px; background: var(--skog); margin-bottom: var(--rom-5); } .kort h3 { margin-bottom: var(--rom-4); } .kort__tekst { color: var(--tekst-dempet); } @media (min-width: 760px) { .kort-rutenett { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== KURS OG PRISER ========================================================================== */ .kurs-oppsett { display: grid; gap: var(--rom-7); grid-template-columns: 1fr; align-items: start; } .fakta + .fakta { margin-top: var(--rom-6); } .fakta__tittel { font-family: var(--skrift); font-size: var(--tekst-xs); font-weight: var(--vekt-halvfet); line-height: var(--linje-luft); letter-spacing: var(--sperret); text-transform: uppercase; color: var(--tekst-dempet); margin: 0 0 var(--rom-4); } .punktliste { list-style: none; margin: 0; padding: 0; } .punktliste li { position: relative; padding-left: var(--rom-5); padding-block: var(--rom-2); } /* Liten terrakotta-prikk i stedet for vanlig kulepunkt. */ .punktliste li::before { content: ''; position: absolute; left: 0; top: calc(var(--rom-2) + 0.55em); width: 6px; height: 6px; border-radius: var(--rund-sirkel); background: var(--skog); } .tidliste { list-style: none; margin: 0; padding: 0; } .tidliste li { padding-block: var(--rom-3); border-bottom: var(--kant-tynn) solid var(--linje); font-variant-numeric: tabular-nums; } .tidliste li:last-child { border-bottom: 0; } /* --- De to semestrene --- */ .semesterliste { list-style: none; margin: 0; padding: 0; } .semester { display: grid; gap: var(--rom-1); padding-block: var(--rom-4); border-bottom: var(--kant-tynn) solid var(--linje); } .semester:last-child { border-bottom: 0; } .semester__navn { font-weight: var(--vekt-medium); } .semester__periode { color: var(--tekst-dempet); } .semester__maneder { font-size: var(--tekst-s); color: var(--tekst-dempet); } /* --- Prispanelet --- */ .priskort { background: var(--kort); border: var(--kant-tynn) solid var(--linje); border-radius: var(--rund-m); padding: var(--rom-6); box-shadow: var(--skygge); } .priskort__topp { margin-bottom: var(--rom-5); } .priskort__undertittel { font-size: var(--tekst-s); color: var(--tekst-dempet); margin: var(--rom-1) 0 0; } .prisliste { list-style: none; margin: 0; padding: 0; } .prisrad { padding-block: var(--rom-5); border-top: var(--kant-tynn) solid var(--linje); } .prisrad__topp { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rom-3); } .prisrad__navn { font-weight: var(--vekt-medium); } /* Hvor mye rimeligere dette nivået er enn grunnprisen. */ .prisrad__avslag { flex: 0 0 auto; font-size: var(--tekst-xs); font-weight: var(--vekt-medium); letter-spacing: 0.04em; color: var(--skog-mork); white-space: nowrap; } /* Månedsprisen. Til opplysning — det er semesterprisen man betaler. */ .prisrad__maned { font-size: var(--tekst-s); color: var(--tekst-dempet); margin: var(--rom-1) 0 var(--rom-3); } /* Totalprisen for hvert semester. */ .prisrad__semestre { margin: 0; } .prisrad__semestre > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rom-3); padding-block: var(--rom-1); } .prisrad__semestre dt { font-size: var(--tekst-s); color: var(--tekst-dempet); } .prisrad__semestre dd { margin: 0; font-family: var(--skrift-tittel); font-size: var(--tittel-xs); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Den ene raden som er trukket fram får marineblå tall. */ .prisrad--fremhevet .prisrad__semestre dd { color: var(--marine); } .priskort__notis { font-size: var(--tekst-s); color: var(--tekst-dempet); margin: var(--rom-5) 0 0; padding-top: var(--rom-5); border-top: var(--kant-tynn) solid var(--linje); } .priskort .knapp { width: 100%; justify-content: center; margin-top: var(--rom-5); } @media (min-width: 900px) { .kurs-oppsett { grid-template-columns: 1fr 400px; gap: var(--rom-8); } } /* ========================================================================== GALLERI ========================================================================== */ .galleri { display: grid; gap: var(--rom-4); grid-template-columns: repeat(2, 1fr); } /* Bildene i galleriet henger i ramme. Løftes litt når man peker på dem, som når man bøyer seg fram mot et bilde på en vegg. */ .galleri__figur img { aspect-ratio: 4 / 3; object-fit: cover; } .galleri__figur:hover { transform: translateY(var(--loft)); } @media (min-width: 760px) { .galleri { grid-template-columns: repeat(3, 1fr); gap: var(--rom-5); } } /* ========================================================================== AVSLUTNING — siste oppfordring før bunnen ========================================================================== */ .avslutning { text-align: center; padding-block: var(--rom-8); background: var(--babyblaa-dyp); } .avslutning h2 { margin-bottom: var(--rom-5); } .avslutning p { margin-inline: auto; max-width: 46ch; color: var(--tekst-dempet); } .avslutning .knapp-rad { justify-content: center; } /* ========================================================================== UNDERSIDER — felles topp ========================================================================== */ .sidetopp { padding-top: calc(var(--topp-hoyde) + var(--rom-8)); padding-bottom: var(--rom-7); } .sidetopp h1 { margin-bottom: var(--rom-5); } /* Teksten står i én spalte med lesbar bredde. Bildet ligger under, i bredden, i ramme. Da slipper vi å beskjære et liggende foto til en høy spalte, som aldri ble bra. */ .tekstblokk { max-width: 62ch; } .tekstblokk + .tekstblokk { margin-top: var(--rom-7); } .tekstblokk h2 { margin-bottom: var(--rom-5); } .tekstblokk p { color: var(--tekst-dempet); } .bredbilde { margin-top: var(--rom-8); margin-inline: auto; max-width: 780px; } .bredbilde img { aspect-ratio: 3 / 2; object-fit: cover; } /* ========================================================================== LÆRERE ========================================================================== */ .laerere { display: grid; gap: var(--rom-5); grid-template-columns: 1fr; } .laerer { display: flex; gap: var(--rom-5); background: var(--kort); border: var(--kant-tynn) solid var(--linje); border-radius: var(--rund-m); padding: var(--rom-5); align-items: flex-start; } .laerer__bilde, .laerer__initial { flex: 0 0 var(--portrett); width: var(--portrett); height: var(--portrett); border-radius: var(--rund-sirkel); background: var(--marine); } .laerer__bilde { object-fit: cover; } /* Vises når det ikke finnes portrettbilde ennå. */ .laerer__initial { display: grid; place-items: center; color: var(--tekst-lys); font-family: var(--skrift-tittel); font-size: var(--tittel-xs); letter-spacing: 0.02em; } .laerer__rolle { font-size: var(--tekst-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--skog-mork); margin: var(--rom-1) 0 var(--rom-4); } .laerer__bio { color: var(--tekst-dempet); font-size: var(--tekst-s); } @media (min-width: 760px) { .laerere { grid-template-columns: repeat(2, 1fr); } } /* --- Sitatet fra avisa --- */ .omtale { text-align: center; } .omtale h2 { margin-bottom: var(--rom-6); } /* Sitatet henger i ramme, som en plakett ved siden av et bilde. */ .omtale__ramme { max-width: 34rem; margin-inline: auto; padding: var(--rom-7) var(--rom-6); } .omtale__sitat { font-family: var(--skrift-tittel); font-size: var(--tittel-m); line-height: var(--linje-mid); margin: 0; text-wrap: balance; } /* ========================================================================== KONTAKT ========================================================================== */ .kontakt-oppsett { display: grid; gap: var(--rom-7); grid-template-columns: 1fr; align-items: start; } /* --- Kopier e-post og telefon --- */ .direkte { display: grid; gap: var(--rom-4); } .kopirad { display: grid; gap: var(--rom-2); padding: var(--rom-5) var(--rom-6); background: var(--kort); border: var(--kant-tynn) solid var(--linje); border-radius: var(--rund-m); transition: border-color var(--fart) var(--kurve); } .kopirad:hover { border-color: var(--marine); } .kopirad__etikett { font-size: var(--tekst-xs); font-weight: var(--vekt-medium); letter-spacing: var(--sperret); text-transform: uppercase; color: var(--tekst-dempet); } /* Selve verdien. Stor, fordi det er den folk skal lese og kopiere. */ .kopiknapp { display: block; width: 100%; padding: 0; background: none; border: 0; font-family: var(--skrift-tittel); font-size: var(--tekst-xl); line-height: var(--linje-mid); color: var(--tekst); text-align: left; word-break: break-word; /* Reserven hvis den blå boblen ikke kan tegnes. */ cursor: copy; transition: color var(--fart) var(--kurve); } .kopiknapp:hover { color: var(--marine); } .kopiknapp.er-kopiert { color: var(--marine); } /* Når den blå boblen følger pekeren, skjuler vi den vanlige pekeren. */ body.har-kopiboble .kopiknapp { cursor: none; } .kopirad__lenke { justify-self: start; font-size: var(--tekst-s); color: var(--marine); text-decoration: none; border-bottom: var(--kant-tynn) solid transparent; transition: border-color var(--fart) var(--kurve); } .kopirad__lenke:hover { border-bottom-color: currentColor; } /* Bekreftelsen «Kopiert» som toner inn. */ .kopimelding { font-size: var(--tekst-s); color: var(--marine); min-height: 1.4em; margin: var(--rom-4) 0 0; } /* Den blå boblen som erstatter musepekeren over e-post og telefon. */ .kopiboble { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; padding: var(--rom-2) var(--rom-4); background: var(--marine); color: var(--tekst-lys); border-radius: var(--rund-pille); font-family: var(--skrift); font-size: var(--tekst-s); font-weight: var(--vekt-medium); line-height: var(--linje-tett); white-space: nowrap; box-shadow: var(--skygge); opacity: 0; transform: translate3d(var(--boble-x, 0), var(--boble-y, 0), 0) translate(-50%, -50%) scale(0.7); transition: opacity var(--fart-rask) var(--kurve), scale var(--fart-rask) var(--kurve); } .kopiboble.er-synlig { opacity: 1; transform: translate3d(var(--boble-x, 0), var(--boble-y, 0), 0) translate(-50%, -50%) scale(1); } /* --- Adresse og kart --- */ .adressekort { background: var(--kort); border: var(--kant-tynn) solid var(--linje); border-radius: var(--rund-m); padding: var(--rom-6); } .adressekort h3 { margin-bottom: var(--rom-4); } .adressekort address { font-style: normal; color: var(--tekst-dempet); margin-bottom: var(--rom-5); } /* Bilde av inngangen, så folk kjenner igjen døra. Også i ramme. */ .inngang { margin-top: var(--rom-7); } .inngang img { aspect-ratio: 16 / 9; object-fit: cover; } .kart { margin-top: var(--rom-7); border: var(--kant-tynn) solid var(--linje); border-radius: var(--rund-m); overflow: hidden; line-height: 0; /* Rolig flate mens kartet lastes, så det ikke blir et hvitt hull. */ background: var(--babyblaa-dyp); min-height: var(--kart-hoyde); } .kart iframe { display: block; width: 100%; height: var(--kart-hoyde); border: 0; } @media (min-width: 900px) { .kontakt-oppsett { grid-template-columns: 1fr 380px; gap: var(--rom-8); } } /* ========================================================================== BUNNEN — det marineblå feltet ========================================================================== */ .bunn { background: var(--marine); color: var(--tekst-lys); padding-block: var(--rom-7) var(--rom-5); } .bunn__rutenett { display: grid; gap: var(--rom-6); grid-template-columns: 1fr; } .bunn__merke { font-family: var(--skrift-tittel); font-size: var(--tittel-xs); line-height: var(--linje-tett); margin-bottom: var(--rom-1); } .bunn__slagord { font-size: var(--tekst-s); color: var(--marine-lys); } .bunn__tittel { font-family: var(--skrift); font-size: var(--tekst-xs); font-weight: var(--vekt-halvfet); line-height: var(--linje-luft); letter-spacing: var(--sperret); text-transform: uppercase; color: var(--marine-lys); margin: 0 0 var(--rom-4); } .bunn ul { list-style: none; margin: 0; padding: 0; } .bunn li { padding-block: var(--rom-1); font-size: var(--tekst-s); } .bunn a { color: var(--tekst-lys); text-decoration: none; border-bottom: var(--kant-tynn) solid transparent; transition: border-color var(--fart) var(--kurve); } .bunn a:hover { border-bottom-color: currentColor; } .bunn :focus-visible { outline-color: var(--tekst-lys); } .bunn__strek { margin: var(--rom-7) 0 0; padding-top: var(--rom-5); border-top: var(--kant-tynn) solid var(--linje-lys); font-size: var(--tekst-xs); color: var(--marine-lys); } @media (min-width: 760px) { .bunn__rutenett { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } /* ========================================================================== MINDRE BEVEGELSE Noen har slått på «reduser bevegelse» i systeminnstillingene sine. Da skrur vi av alt som beveger seg. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .kort:hover, .knapp:hover { transform: none; } .galleri__figur:hover img { transform: none; } }