/* ================================================================ T[AI]MELINE — Delt stilark Alle sider lenker til denne filen. Fargejusteringer: endre her, virker overalt. ================================================================ */ /* ── Variabler og temaer ──────────────────────────────────────── */ :root { /* Kortfarger */ --green: #00ff41; --purple: #cc44ff; --gold: #ffd700; --red: #ff4444; --cyan: #00e5ff; --orange: #ff8800; /* Mørkt tema (standard) */ --bg: #0a0a0a; --bg2: #0e0e0e; --bg3: #141414; --border: #1a1a1a; --border-accent: #1a3a1a; --dim: #2a2a2a; --mid: #666; --text: #999; --text-hi: #ddd; --nav-bg: rgba(10,10,10,0.97); /* Typografi — juster font-size på html-elementet via JS */ --lh: 1.85; /* Scanlines: synlig i mørkt, skjult i lyst */ --scanlines: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px ); } /* Lyst tema */ [data-theme="light"] { --green: #006b18; --purple: #7700aa; --gold: #9a6b00; --red: #bb0000; --cyan: #005f77; --orange: #b35200; --bg: #f8f7f3; --bg2: #efede8; --bg3: #e6e4de; --border: #d5d3cc; --border-accent: #99bb99; --dim: #c0bdb5; --mid: #888; --text: #444; --text-hi: #111; --nav-bg: rgba(248,247,243,0.97); --scanlines: none; } /* ── Font-skalering via data-fontsize på ──────────────── */ html { font-size: 15px; } html[data-fontsize="1"] { font-size: 13px; } html[data-fontsize="2"] { font-size: 15px; } html[data-fontsize="3"] { font-size: 17px; } html[data-fontsize="4"] { font-size: 19px; } /* ── Reset ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ────────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); font-family: 'Courier New', Courier, monospace; line-height: var(--lh); min-height: 100vh; overflow-x: hidden; } /* Scanlines-overlay */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: var(--scanlines); } /* ── Navigasjon ──────────────────────────────────────────────── */ nav { position: sticky; top: 0; z-index: 200; background: var(--nav-bg); border-bottom: 1px solid var(--border-accent); padding: 0 24px; display: flex; align-items: center; gap: 0; backdrop-filter: blur(4px); } .nav-logo { color: var(--green); font-size: 1rem; font-weight: bold; letter-spacing: 3px; text-shadow: 0 0 10px var(--green); padding: 14px 0; white-space: nowrap; text-decoration: none; margin-right: auto; /* skyver alt annet til høyre */ flex-shrink: 0; } .nav-logo .a-dim { opacity: 0.35; } .nav-links { display: flex; list-style: none; gap: 0; } .nav-links a { display: block; color: var(--mid); text-decoration: none; font-size: 0.75rem; letter-spacing: 2px; padding: 16px 16px; border-left: 1px solid var(--border); transition: color 0.15s; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--green); text-shadow: 0 0 6px var(--green); } /* Kontroller: A− A+ og tema */ .nav-controls { display: flex; align-items: center; gap: 2px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); } .ctrl-btn { background: transparent; border: 1px solid var(--border); color: var(--mid); font-family: inherit; font-size: 0.7rem; letter-spacing: 1px; padding: 5px 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s; line-height: 1; } .ctrl-btn:hover { color: var(--green); border-color: var(--green); } /* ── Sidelayout ──────────────────────────────────────────────── */ .page { max-width: 780px; margin: 0 auto; padding: 48px 24px 100px; } .page-wide { max-width: 960px; margin: 0 auto; padding: 48px 24px 100px; } /* ── Typografi ───────────────────────────────────────────────── */ .label-xs { font-size: 0.7rem; letter-spacing: 3px; color: var(--mid); } .label-sm { font-size: 0.75rem; letter-spacing: 2px; } .prompt { font-size: 0.75rem; letter-spacing: 3px; color: var(--green); text-shadow: 0 0 6px var(--green); } h1.hero-title { color: var(--green); font-size: clamp(1.8rem, 5vw, 3rem); font-weight: bold; letter-spacing: 6px; text-shadow: 0 0 16px var(--green), 0 0 40px var(--green); line-height: 1.2; margin: 20px 0 14px; } h2.section-title { color: var(--green); font-size: 1.1rem; font-weight: bold; letter-spacing: 4px; text-shadow: 0 0 8px var(--green); margin-bottom: 20px; border-bottom: 1px solid var(--border-accent); padding-bottom: 10px; } h3.sub-title { color: var(--text-hi); font-size: 0.85rem; letter-spacing: 3px; margin: 28px 0 10px; } p.body-text { color: var(--text); font-size: 0.95rem; line-height: var(--lh); max-width: 680px; } .divider { color: var(--dim); font-size: 0.75rem; letter-spacing: 1px; margin: 24px 0 18px; overflow: hidden; white-space: nowrap; } /* ── Bokser ──────────────────────────────────────────────────── */ .box { background: var(--bg2); border: 1px solid var(--border-accent); border-radius: 4px; padding: 20px 24px; margin: 14px 0; } .box-green { border-color: var(--green); box-shadow: 0 0 8px color-mix(in srgb, var(--green) 15%, transparent); } .box-cyan { border-color: var(--cyan); box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 12%, transparent); } .box-gold { border-color: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 12%, transparent); } .box-red { border-color: var(--red); box-shadow: 0 0 8px color-mix(in srgb, var(--red) 12%, transparent); } .box-purple { border-color: var(--purple); box-shadow: 0 0 8px color-mix(in srgb, var(--purple) 12%, transparent); } .box-orange { border-color: var(--orange); box-shadow: 0 0 8px color-mix(in srgb, var(--orange) 15%, transparent); } /* ── Knapper ─────────────────────────────────────────────────── */ .btn { display: inline-block; border: 1px solid var(--green); color: var(--green); font-family: inherit; font-size: 0.8rem; letter-spacing: 3px; padding: 10px 22px; text-decoration: none; cursor: pointer; background: transparent; transition: background 0.15s, box-shadow 0.15s; } .btn:hover { background: color-mix(in srgb, var(--green) 8%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--green) 30%, transparent); } .btn-cyan { border-color: var(--cyan); color: var(--cyan); } .btn-cyan:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 25%, transparent); } /* ── Chips / tags ────────────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .chip { font-size: 0.72rem; letter-spacing: 1px; padding: 4px 10px; border: 1px solid; border-radius: 2px; } /* ── Pull-quote ──────────────────────────────────────────────── */ .pull-quote { border-left: 2px solid var(--border-accent); padding: 12px 18px; margin: 24px 0; color: var(--mid); font-size: 0.9rem; line-height: var(--lh); font-style: italic; } .pull-quote cite { display: block; margin-top: 8px; font-size: 0.72rem; color: var(--dim); font-style: normal; letter-spacing: 1px; } blockquote.terminal-quote { border-left: 2px solid var(--green); padding: 12px 18px; margin: 20px 0; background: color-mix(in srgb, var(--green) 3%, transparent); } blockquote.terminal-quote p { font-size: 0.95rem; line-height: var(--lh); color: var(--text-hi); font-style: italic; } blockquote.terminal-quote cite { font-size: 0.75rem; color: var(--mid); display: block; margin-top: 8px; } /* ── Regeloversikt ───────────────────────────────────────────── */ .rule-item { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--dim); } .rule-item:last-child { border-bottom: none; } .rule-icon { flex-shrink: 0; width: 24px; font-size: 0.9rem; font-weight: bold; } .rule-text { font-size: 0.88rem; line-height: 1.6; color: var(--text); } .rule-text strong { color: var(--text-hi); } /* ── Mini-kort (forsiden) ────────────────────────────────────── */ .card-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0; } .mini-card { width: 130px; min-height: 180px; border-radius: 6px; border: 1.5px solid; display: flex; flex-direction: column; padding: 10px; position: relative; overflow: hidden; flex-shrink: 0; transition: transform 0.2s, box-shadow 0.2s; cursor: default; } .mini-card:hover { transform: translateY(-4px); } .mini-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px ); pointer-events: none; z-index: 1; } [data-theme="light"] .mini-card::before { display: none; } .mini-card-header { font-size: 0.65rem; letter-spacing: 1px; font-weight: bold; border-bottom: 1px solid currentColor; padding-bottom: 6px; margin-bottom: 8px; position: relative; z-index: 2; opacity: 0.85; } .mini-card-body { flex: 1; position: relative; z-index: 2; font-size: 0.78rem; line-height: 1.4; font-weight: bold; } .mini-card-footer { font-size: 0.62rem; border-top: 1px solid var(--border); padding-top: 4px; position: relative; z-index: 2; color: var(--dim); } /* ── Kategorikort (kortene-siden) ────────────────────────────── */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 20px 0; } .cat-card { background: var(--bg2); border: 1px solid; border-radius: 4px; padding: 20px; } .cat-symbol { font-size: 1.8rem; margin-bottom: 8px; } .cat-name { font-size: 0.78rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 10px; } .cat-desc { font-size: 0.85rem; line-height: 1.7; color: var(--text); } .cat-example { font-size: 0.75rem; margin-top: 10px; padding: 6px 8px; background: color-mix(in srgb, var(--bg) 60%, transparent); border-radius: 3px; color: var(--mid); font-style: italic; } /* ── Vinter-strimler ─────────────────────────────────────────── */ .winter-strip { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 12px 18px; margin: 12px 0; display: flex; align-items: center; gap: 14px; font-size: 0.85rem; } .winter-strip .ice { color: var(--mid); font-size: 1.1rem; letter-spacing: -2px; } .winter-strip .label { flex: 1; text-align: center; } .winter-strip .label strong { color: var(--text); font-size: 0.85rem; letter-spacing: 2px; } .winter-strip .label small { display: block; color: var(--mid); margin-top: 3px; font-size: 0.72rem; } /* Kronikk-spesifikke vinterbokser */ .winter-block { margin: 36px 0; border: 1px solid var(--border); background: var(--bg2); position: relative; overflow: hidden; } .winter-block::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent, transparent 8px, color-mix(in srgb, var(--mid) 6%, transparent) 8px, color-mix(in srgb, var(--mid) 6%, transparent) 9px ); } .winter-inner { position: relative; padding: 20px 24px; } .winter-inner .winter-label { font-size: 0.7rem; letter-spacing: 4px; color: var(--mid); margin-bottom: 6px; } .winter-inner .winter-title { font-size: 0.9rem; color: var(--mid); letter-spacing: 1px; margin-bottom: 10px; } .winter-inner .winter-text { font-size: 0.85rem; color: var(--dim); line-height: 1.7; } [data-theme="light"] .winter-inner .winter-text { color: var(--mid); } /* ── Kronikkens korthenvisninger ─────────────────────────────── */ .cref { display: inline-block; font-size: 0.7rem; letter-spacing: 1px; font-weight: bold; padding: 1px 6px; border-radius: 2px; border: 1px solid; margin: 0 2px; text-decoration: none; transition: background 0.15s, box-shadow 0.15s; vertical-align: middle; line-height: 1.6; } .cref:hover { box-shadow: 0 0 8px currentColor; } .cref.H { color: var(--green); border-color: var(--border-accent); background: color-mix(in srgb, var(--green) 8%, var(--bg)); } .cref.K { color: var(--purple); border-color: #330033; background: color-mix(in srgb, var(--purple) 8%, var(--bg)); } .cref.S { color: var(--gold); border-color: #333300; background: color-mix(in srgb, var(--gold) 8%, var(--bg)); } .cref.E { color: var(--red); border-color: #330000; background: color-mix(in srgb, var(--red) 8%, var(--bg)); } .cref.P { color: var(--cyan); border-color: #003333; background: color-mix(in srgb, var(--cyan) 8%, var(--bg)); } /* ── Innholdsfortegnelse (kronikk) ───────────────────────────── */ .toc { border: 1px solid var(--border); padding: 20px 24px; margin-bottom: 48px; background: var(--bg2); } .toc .toc-label { font-size: 0.72rem; letter-spacing: 3px; color: var(--mid); margin-bottom: 14px; } .toc-items { list-style: none; } .toc-items li { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; } .toc-items a { font-size: 0.85rem; color: var(--text); text-decoration: none; letter-spacing: 1px; transition: color 0.15s; } .toc-items a:hover { color: var(--green); } .toc-items .toc-year { font-size: 0.72rem; color: var(--mid); white-space: nowrap; flex-shrink: 0; } /* ── Kronikkens eraer ────────────────────────────────────────── */ .era { margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--border); } .era:last-child { border-bottom: none; } .era-header { margin-bottom: 28px; } .era-period { font-size: 0.72rem; letter-spacing: 3px; color: var(--mid); margin-bottom: 6px; } .era-title { font-size: 1.05rem; color: var(--text-hi); letter-spacing: 1px; line-height: 1.4; } .prose { font-size: 0.95rem; line-height: var(--lh); color: var(--text); } .prose p { margin-bottom: 20px; } .prose p:last-child { margin-bottom: 0; } .prose em { color: var(--text-hi); font-style: italic; } /* ── Statistikk-rad (forsiden) ───────────────────────────────── */ .stat-row { display: flex; gap: 36px; flex-wrap: wrap; margin: 24px 0; } .stat-num { color: var(--green); font-size: 1.5rem; font-weight: bold; text-shadow: 0 0 8px var(--green); } .stat-label { font-size: 0.72rem; color: var(--mid); letter-spacing: 1px; } /* ── Footer ──────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--border); text-align: center; padding: 24px; color: var(--dim); font-size: 0.72rem; letter-spacing: 2px; } /* ── Scrollbar ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-accent); } /* ── Animasjoner ─────────────────────────────────────────────── */ @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } .cursor { animation: blink 1s step-start infinite; } .fade-in { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ── Responsivt ──────────────────────────────────────────────── */ @media (max-width: 640px) { .page, .page-wide { padding: 32px 16px 80px; } nav { padding: 0 16px; flex-wrap: wrap; } .nav-links a { font-size: 0.7rem; padding: 12px 10px; letter-spacing: 1px; } .nav-controls { padding-left: 8px; margin-left: 8px; } h1.hero-title { font-size: 1.8rem; letter-spacing: 3px; } .card-row { gap: 10px; } .mini-card { width: 110px; } .cat-grid { grid-template-columns: 1fr; } .stat-row { gap: 20px; } }