body {
background: var(–bg);
font-family: ‘DM Sans’, sans-serif;
color: var(–text);
min-height: 100vh;
padding: 48px 40px 64px;
position: relative;
overflow-x: hidden;
}
body::before {
content: »;
position: fixed;
inset: 0;
background-image: url(«data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noise)’ opacity=’0.04’/%3E%3C/svg%3E»);
pointer-events: none;
z-index: 0;
}
.page { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
/* ── HEADER ── */
.header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 64px;
padding-bottom: 24px;
border-bottom: 1px solid var(–border);
}
.header-left {
display: flex;
align-items: flex-end;
gap: 24px;
}
/* Header icon */
.header-icon {
width: 72px;
height: 72px;
flex-shrink: 0;
opacity: 0.9;
}
.header-left h1 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 3.2rem;
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.1;
color: var(–text);
}
.header-left h1 span {
color: var(–now);
}
.header-text p {
margin-top: 8px;
font-size: 0.82rem;
color: var(–muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tpack-badge {
display: flex;
gap: 6px;
align-items: center;
}
.tpack-letter {
width: 44px; height: 44px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.3rem;
font-weight: 600;
}
.tpack-letter.t { background: var(–now); color: var(–bg); }
.tpack-letter.p { background: rgba(122,179,176,0.25); color: var(–phase2); }
.tpack-letter.ck { background: rgba(155,143,173,0.25); color: var(–phase3); font-size: 1rem; }
.tpack-label {
font-size: 0.68rem;
color: var(–muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: 8px;
line-height: 1.4;
max-width: 100px;
}
/* ── PHASE LEGEND ── */
.legend {
display: flex;
gap: 24px;
margin-bottom: 48px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
color: var(–muted);
}
.legend-dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── TIMELINE ── */
.timeline {
position: relative;
}
.timeline::before {
content: »;
position: absolute;
left: 140px;
top: 0; bottom: 0;
width: 1px;
background: linear-gradient(to bottom,
var(–phase1) 0%,
var(–phase1) 20%,
var(–phase2) 20%,
var(–phase2) 50%,
var(–phase3) 50%,
var(–phase3) 72%,
var(–now) 72%,
var(–now) 78%,
var(–future) 78%,
var(–future) 100%
);
opacity: 0.4;
}
/* ── PHASE BLOCK ── */
.phase {
margin-bottom: 48px;
animation: fadeUp 0.5s ease both;
}
.phase:nth-child(1) { animation-delay: 0.05s; }
.phase:nth-child(2) { animation-delay: 0.15s; }
.phase:nth-child(3) { animation-delay: 0.25s; }
.phase:nth-child(4) { animation-delay: 0.35s; }
.phase:nth-child(5) { animation-delay: 0.45s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.phase-header {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 16px;
position: relative;
}
.phase-year {
width: 140px;
flex-shrink: 0;
text-align: right;
padding-right: 24px;
font-family: ‘Cormorant Garamond’, serif;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.phase-dot {
width: 14px; height: 14px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
z-index: 2;
margin: 0 -7px;
border: 2px solid var(–bg);
box-shadow: 0 0 0 1px currentColor;
}
.phase-title {
padding-left: 28px;
font-size: 1.05rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
}
.phase-title em {
font-style: normal;
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.2rem;
font-weight: 600;
}
/* Phase icon */
.phase-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
opacity: 0.85;
}
/* ── EVENTS ── */
.events {
padding-left: 168px;
display: flex;
flex-direction: column;
gap: 8px;
}
.event {
display: flex;
gap: 16px;
align-items: baseline;
padding: 10px 14px;
border-radius: 8px;
transition: background 0.2s;
}
.event:hover {
background: rgba(255,255,255,0.03);
}
.event-date {
font-size: 0.72rem;
color: var(–muted);
white-space: nowrap;
min-width: 80px;
letter-spacing: 0.04em;
}
.event-content strong {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(–text);
margin-bottom: 2px;
}
.event-content span {
font-size: 0.76rem;
color: var(–muted);
line-height: 1.5;
}
.event-tag {
font-size: 0.62rem;
padding: 2px 7px;
border-radius: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
display: inline-block;
margin-top: 4px;
}
/* ── PHASE COLORS ── */
.p1 .phase-year { color: var(–phase1); }
.p1 .phase-dot { color: var(–phase1); background: var(–phase1); }
.p1 .phase-title { color: var(–phase1); }
.p1 .event-tag { background: rgba(196,147,90,0.15); color: var(–phase1); }
.p1 .phase-icon { color: var(–phase1); }
.p2 .phase-year { color: var(–phase2); }
.p2 .phase-dot { color: var(–phase2); background: var(–phase2); }
.p2 .phase-title { color: var(–phase2); }
.p2 .event-tag { background: rgba(122,179,176,0.15); color: var(–phase2); }
.p2 .phase-icon { color: var(–phase2); }
.p3 .phase-year { color: var(–phase3); }
.p3 .phase-dot { color: var(–phase3); background: var(–phase3); }
.p3 .phase-title { color: var(–phase3); }
.p3 .event-tag { background: rgba(155,143,173,0.15); color: var(–phase3); }
.p3 .phase-icon { color: var(–phase3); }
.p-now .phase-year { color: var(–now); }
.p-now .phase-dot { color: var(–now); background: var(–now); box-shadow: 0 0 12px var(–now), 0 0 0 1px var(–now); }
.p-now .phase-title { color: var(–now); }
.p-now .event-tag { background: rgba(232,197,71,0.15); color: var(–now); }
.p-now .phase-icon { color: var(–now); }
.p-future .phase-year { color: var(–future); }
.p-future .phase-dot { color: var(–future); background: var(–future); }
.p-future .phase-title { color: var(–future); }
.p-future .event-tag { background: rgba(130,168,125,0.15); color: var(–future); }
.p-future .phase-icon { color: var(–future); }
/* ── NOW MARKER ── */
.now-marker {
display: flex;
align-items: center;
gap: 0;
margin: 8px 0 32px;
}
.now-marker .spacer { width: 140px; flex-shrink: 0; }
.now-line {
flex: 1;
height: 1px;
background: var(–now);
margin-left: 14px;
opacity: 0.5;
}
.now-text {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(–now);
padding: 4px 12px;
border: 1px solid rgba(232,197,71,0.3);
border-radius: 20px;
white-space: nowrap;
margin-left: 12px;
}
/* ── TPACK CALLOUT ── */
.tpack-callout {
margin: 48px 0 0;
padding: 28px 32px;
background: rgba(232,197,71,0.05);
border: 1px solid rgba(232,197,71,0.2);
border-radius: 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.tpack-col { text-align: center; padding: 8px; }
.tpack-col .letter {
font-family: ‘Cormorant Garamond’, serif;
font-size: 2.8rem;
font-weight: 300;
line-height: 1;
margin-bottom: 8px;
}
.tpack-col .name {
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 6px;
}
.tpack-col .desc {
font-size: 0.72rem;
color: var(–muted);
line-height: 1.5;
}
.tpack-col .status {
margin-top: 10px;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 3px 10px;
border-radius: 10px;
display: inline-block;
}
.tpack-col.done .letter { color: var(–phase2); }
.tpack-col.done .status { background: rgba(122,179,176,0.15); color: var(–phase2); }
.tpack-col.done2 .letter { color: var(–phase3); }
.tpack-col.done2 .status { background: rgba(155,143,173,0.15); color: var(–phase3); }
.tpack-col.missing .letter { color: var(–now); }
.tpack-col.missing .name { color: var(–now); }
.tpack-col.missing .status { background: rgba(232,197,71,0.15); color: var(–now); border: 1px solid rgba(232,197,71,0.3); }
.tpack-divider {
width: 1px;
background: var(–border);
align-self: stretch;
}
DigSkole
Gauldal
Reisen 2022 – 2027 · NTNU
PK
Pedagogical
Knowledge
CK
Content
Knowledge
TK
Technological Knowledge
PCK
TPK
TCK
TPACK
RAMMEVERKET FOR DIGITAL KOMPETANSE
Fase 1: Grunnmuren
Fase 2: Utforsking og fordypning
Fase 3: Deling og forankring
Vendepunktet — vi er her
Fremover
Fase 1 — Grunnmuren
Digitalisering som samfunnsendring. Design for læring og PfDK som teoretisk ramme. DigSkole som samskapingsprosjekt med fem moduler.
DigSkole online, prosjektbeskrivelse, produksjonsdag ved NTNU Akrin.
Surveys til lærere og elever. Lokal prosjektbeskrivelse.
Fase 2 — Utforsking og fordypning
Custer dim. 4: teknologi som sosial kraft og makt
Custer dim. 2: kunnskap om hvorfor teknologi i undervisning
Custer dim. 2 og 4: kunnskap om KI og teknologi som sosial konstruksjon. Policy og etikk.
Custer dim. 2 og 3: kunnskap om multimodalitet og prosess — dokumentere og reflektere
Custer dim. 3: prosess — problemløsning og innovasjon
Custer dim. 2: kunnskap om hvordan teknologi støtter inkludering
Fase 3 — Deling og forankring
Hvordan lykkes med utviklingsarbeid.
Planlegging av høsten 2025 og fagdag 29. oktober.
Hvordan bruke det vi erfarte ved skolene.
Vendepunktet — T-en i TPACK · Custer D1 og D3
Erkjennelsen: vi har jobbet mye med Custers dim. 2 (kunnskap om hvorfor) og dim. 4 (makt/etikk) — men dim. 1 (artefakt/verktøy) og dim. 3 (prosess/produksjon) har blitt glemt. T-en i TPACK mangler.
Sanselig og estetisk inngang · Klafki · Akvarell + Book Creator · Eleven som produsent. Custer dim. 1: læreren bruker verktøyet selv. Custer dim. 3: skapende prosess med digitale materialer.
Fremover — Alle fire Custer-dimensjoner i spill
Hva må læreren beherske av konkrete verktøy (D1) for å motivere eleven som produsent (D3)? Hvorfor virker det (D2) og hvilke maktforhold skapes (D4)?
Teknologi som inkluderingsverktøy (D1) — universell utforming i praksis. Prosessen med å designe for alle (D3). Teknologi som sosial kraft (D4).
Digitale vurderingsverktøy (D1). Prosessen med å vurdere skapende digitalt arbeid (D3). Kunnskap om hva som gir god vurderingspraksis digitalt (D2).
Kunstig intelligens i alle fire dimensjoner — KI som artefakt/verktøy (D1), kunnskap om hvordan og hvorfor (D2), KI i skapende prosesser (D3) og KI som sosial kraft og maktforhold (D4).
D1 Artefakt · D2 Kunnskap · D3 Prosess · D4 Makt/kraft — alle fire må være i spill for at læreren kan iscenesette eleven som produsent, ikke bare konsument.
Custer D2 (kunnskap om hvorfor) og D4 (makt/etikk) godt dekket.
Custer D2 og D4 — men lite D1 og D3.
Custer D3: skapende prosess og produksjon
Dette er det som nå skal inn — fra samling 7 og fremover.
Mari-Ann Letnes 