/* ========================================================================= Kina 2026 — Blank Samme typografiske system som italia.blank.no, med kinesisk palett. Rendret av Phoenix; denne fila redigeres direkte (ingen bundler). ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@800;900&family=Work+Sans:wght@400;500;600;700&display=swap"); @font-face { font-family: "Respira"; src: url("https://www.blank.no/fonts/Respira/Respira-Black.otf") format("opentype"); font-weight: 900; font-display: swap; } @font-face { font-family: "PlakatGrotesk"; src: url("https://www.blank.no/fonts/PlakatGrotesk/PlakatGrotesk.otf") format("opentype"); font-weight: 400; font-display: swap; } /* ----------------------------------------------------------------------- Variabler ----------------------------------------------------------------------- */ :root { --blank-black: #272d2a; --lacquer: #2a1f1d; /* mørkt papir — forsiden */ --rice-paper: #f5e6c8; /* blekk på mørk bakgrunn */ --cinnabar: #c8102e; /* aksent — ett anslag per side */ --muted: #6b6f66; --rule: rgba(39, 45, 42, 0.18); --rule-on-dark: rgba(245, 230, 200, 0.22); /* Dagsfarger */ --color-tirsdag: #e8a39b; /* lotusrosa */ --color-onsdag: #a8c5a8; /* jadegrønn */ --color-torsdag: #f2d9a0; /* keisergul */ --color-fredag: #a9c4dc; /* porselensblå */ --color-lordag: #c9afc4; /* plommeblomst */ --color-sondag: #e5b7a0; /* aprikos */ /* Standard sidefarger — overstyres per side */ --paper: #f7f1e4; --ink: var(--blank-black); --max-width: 1180px; --measure: 64ch; --gutter: clamp(1.25rem, 4vw, 2.5rem); } /* ----------------------------------------------------------------------- Reset ----------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: "PlakatGrotesk", "Work Sans", system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; min-height: 100vh; } svg { max-width: 100%; display: block; } a { color: inherit; } ul { list-style: none; } button { font: inherit; cursor: pointer; } /* ----------------------------------------------------------------------- Sidefarger per dag — settes via klasse på ----------------------------------------------------------------------- */ body.day-tirsdag { --paper: var(--color-tirsdag); --ink: var(--blank-black); } body.day-onsdag { --paper: var(--color-onsdag); --ink: var(--blank-black); } body.day-torsdag { --paper: var(--color-torsdag); --ink: var(--blank-black); } body.day-fredag { --paper: var(--color-fredag); --ink: var(--blank-black); } body.day-lordag { --paper: var(--color-lordag); --ink: var(--blank-black); } body.day-sondag { --paper: var(--color-sondag); --ink: var(--blank-black); } body.dark { --paper: var(--lacquer); --ink: var(--rice-paper); --rule: var(--rule-on-dark); } /* ----------------------------------------------------------------------- Layout ----------------------------------------------------------------------- */ .shell { max-width: var(--max-width); margin: 0 auto; padding: clamp(1rem, 3vw, 1.75rem) var(--gutter) clamp(2rem, 5vw, 3.5rem); transition: opacity 0.12s ease; } /* Skriftene hentes fra blank.no, og med font-display: swap tegnes teksten først i reserveskriften og flyter om når de lander. Klassen settes av font_gate/1 i KinaWeb.TripComponents mens de er underveis, og fjernes når de er klare. Innholdet skjules, ikke : sidefargen skal stå. Uten JavaScript settes klassen aldri, og siden oppfører seg som før. */ html.fonts-loading .shell { opacity: 0; } /* ----------------------------------------------------------------------- Topp-header med logo + meta ----------------------------------------------------------------------- */ .site-top { display: flex; justify-content: space-between; align-items: center; padding-top: clamp(0.75rem, 2vw, 1.25rem); padding-bottom: clamp(1rem, 3vw, 1.75rem); } .brand-logo { height: 28px; color: var(--ink); flex-shrink: 0; } .site-top .meta { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; text-align: right; color: var(--ink); /* Lets the line wrap rather than run off the edge on a phone. */ min-width: 0; padding-left: 1rem; } /* ----------------------------------------------------------------------- Horisontal navigasjonstripe — alltid synlig ----------------------------------------------------------------------- */ .nav-strip { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-strip::-webkit-scrollbar { display: none; } .nav-strip ul { display: flex; gap: clamp(0.5rem, 2vw, 1.5rem); align-items: center; white-space: nowrap; padding: 0.875rem 0; } .nav-strip a { text-decoration: none; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); opacity: 0.55; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: opacity 0.15s ease, border-color 0.15s ease; } .nav-strip a:hover { opacity: 1; } .nav-strip a[aria-current="page"] { opacity: 1; border-bottom-color: var(--ink); } /* ----------------------------------------------------------------------- Hero / dagstittel ----------------------------------------------------------------------- */ .hero { padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 3rem); } .hero .eyebrow { font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.25rem; } .display { font-family: "Respira", "Bodoni Moda", Georgia, serif; font-weight: 900; line-height: 0.92; letter-spacing: -0.025em; color: var(--ink); } .display-xl { font-size: clamp(3.5rem, 13vw, 9.5rem); } .display-lg { font-size: clamp(3rem, 10vw, 7rem); } .display-md { font-size: clamp(2.25rem, 7vw, 4.5rem); } .accent-rect { display: block; width: 64px; height: 14px; background: var(--cinnabar); margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1rem, 2.5vw, 1.5rem); } .tagline { font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.32; max-width: 36ch; } .hero-rule { border: none; border-top: 1px solid var(--rule); margin: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(1.25rem, 3vw, 2rem); } /* ----------------------------------------------------------------------- Seksjonsoverskrifter — små caps med understrek ----------------------------------------------------------------------- */ .section-head { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 0.5rem; margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 1.5rem); } .section-intro { max-width: var(--measure); font-size: 1.05rem; margin-bottom: 1.5rem; } /* ----------------------------------------------------------------------- Tidslinje ----------------------------------------------------------------------- */ .timeline { margin: 1rem 0 2rem; border-top: 1px solid var(--rule); } .timeline-item { display: grid; grid-template-columns: 80px 1fr; gap: clamp(0.75rem, 2vw, 1.5rem); padding: clamp(0.875rem, 2vw, 1.125rem) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .timeline-item .when { font-weight: 700; font-size: 14px; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; } .timeline-item .what { font-size: 1.05rem; line-height: 1.4; } .timeline-item .what strong { font-weight: 600; } .timeline-item .what .note { display: block; font-size: 0.92rem; color: var(--muted); margin-top: 0.25rem; } body.dark .timeline-item .what .note { color: rgba(245, 230, 200, 0.7); } /* ----------------------------------------------------------------------- Venue-kort ----------------------------------------------------------------------- */ .venues { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); margin: clamp(1rem, 3vw, 1.5rem) 0 clamp(2rem, 5vw, 3rem); } @media (min-width: 720px) { .venues.two-col { grid-template-columns: 1fr 1fr; } } .venue { background: rgba(255, 255, 255, 0.28); border: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; } .venue h3 { font-family: "Respira", "Bodoni Moda", Georgia, serif; font-weight: 900; font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1; margin-bottom: 0.625rem; letter-spacing: -0.01em; } .venue .kind { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.625rem; } .venue p { margin-bottom: 1rem; line-height: 1.5; } .venue .meta-list { border-top: 1px solid var(--rule); padding-top: 0.875rem; font-size: 0.95rem; display: grid; gap: 0.375rem; margin-top: auto; } .venue .meta-list dt { display: inline; font-weight: 600; margin-right: 0.5rem; } .venue .meta-list dd { display: inline; } .venue .meta-list .row { display: block; } .venue .meta-list .row + .row { margin-top: 0.25rem; } .venue .links { margin-top: 0.875rem; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; font-weight: 600; } .venue .links a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } /* ----------------------------------------------------------------------- Meny-blokk i venue ----------------------------------------------------------------------- */ .menu { margin: 1.5rem 0; padding: 1.25rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .menu + .meta-list { border-top: none; padding-top: 0; } .menu h4 { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.625rem; } .menu ol { display: grid; gap: 0.5rem; list-style: none; font-size: 0.95rem; counter-reset: course; } .menu ol li { display: grid; grid-template-columns: 90px 1fr; gap: 0.75rem; align-items: baseline; } .menu ol li .course { font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .menu ol li .dish .it { font-style: italic; display: block; } .menu ol li .dish .no { color: var(--muted); font-size: 0.9rem; display: block; margin-top: 0.125rem; } body.dark .menu ol li .dish .no { color: rgba(245, 230, 200, 0.65); } /* ----------------------------------------------------------------------- Praktisk-bokser (transport, oppmøte etc.) ----------------------------------------------------------------------- */ .notice { border-left: 4px solid var(--ink); padding: 0.875rem 1rem 0.875rem 1.125rem; background: rgba(255, 255, 255, 0.32); font-size: 0.98rem; margin: 1.25rem 0; line-height: 1.5; } .notice strong { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.375rem; } body.dark .notice { background: rgba(245, 230, 200, 0.06); } /* ----------------------------------------------------------------------- Forsidens dagskort-grid ----------------------------------------------------------------------- */ .day-grid { display: grid; grid-template-columns: 1fr; gap: clamp(0.875rem, 2vw, 1.25rem); margin: clamp(2rem, 5vw, 3.5rem) 0; } /* Six days, and the display face is wide: two rows of three reads better than cramming six columns into the 1180px shell. */ @media (min-width: 600px) { .day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 860px) { .day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .day-card { --card-bg: var(--color-tirsdag); background: var(--card-bg); color: var(--blank-black); text-decoration: none; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.5rem); display: grid; grid-template-rows: auto auto 1fr auto; min-height: 260px; transition: transform 0.18s ease; border-radius: 2px; } .day-card:hover { transform: translateY(-3px); } .day-card.tirsdag { --card-bg: var(--color-tirsdag); } .day-card.onsdag { --card-bg: var(--color-onsdag); } .day-card.torsdag { --card-bg: var(--color-torsdag); } .day-card.fredag { --card-bg: var(--color-fredag); } .day-card.lordag { --card-bg: var(--color-lordag); } .day-card.sondag { --card-bg: var(--color-sondag); } .day-card .top { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .day-card .day-display { font-family: "Respira", "Bodoni Moda", Georgia, serif; font-weight: 900; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; margin: clamp(2rem, 4vw, 3rem) 0 clamp(0.5rem, 1.5vw, 1rem); letter-spacing: -0.02em; } .day-card .day-summary { font-size: 0.95rem; line-height: 1.4; font-weight: 500; max-width: 22ch; } /* ----------------------------------------------------------------------- Forside-spesifikt ----------------------------------------------------------------------- */ .intro-prose { max-width: 38ch; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem); font-weight: 500; } .fact-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem 2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 1.75rem) 0; margin: clamp(2rem, 5vw, 3rem) 0; } @media (min-width: 540px) { .fact-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 880px) { .fact-grid { grid-template-columns: repeat(4, 1fr); } } .fact dt { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.375rem; opacity: 0.7; } .fact dd { font-size: 1.05rem; line-height: 1.35; font-weight: 500; } /* ----------------------------------------------------------------------- Praktisk-side ----------------------------------------------------------------------- */ /* To urskiver under hero-en: hjemme og der vi er. Selve visningen settes av assets/js/watches.js — her ligger bare skiva. Uten JavaScript står viserne på tolv, og .is-live holder dem dempet til klokka faktisk går. */ .watches { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 6vw, 3rem); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(1.5rem, 4vw, 2.25rem) 0; margin: clamp(2rem, 5vw, 3rem) 0; } .watch { margin: 0; min-width: 0; text-align: center; } .watch-face { width: clamp(7rem, 26vw, 10.5rem); height: auto; margin: 0 auto; overflow: visible; } .watch-dial { fill: rgba(255, 255, 255, 0.32); stroke: var(--rule); stroke-width: 1; } .watch-tick { stroke: var(--rule); stroke-width: 1.25; } .watch-tick--quarter { stroke: var(--ink); stroke-width: 2; opacity: 0.55; } .watch-hand { stroke: var(--ink); stroke-linecap: round; /* Viserne er dempet til skriptet har satt dem, så en stoppet klokke ikke ser ut som en klokke som går feil. */ opacity: 0.25; } .watch-hand--hour { stroke-width: 4; } .watch-hand--minute { stroke-width: 2.5; } .watch-hand--second { stroke: var(--cinnabar); stroke-width: 1.25; } .watch-pin { fill: var(--ink); } /* Ingen transition på viserne: ett sekund er ett hopp, som på en kvartsklokke, og en myk overgang ville dessuten sveipe hele skiva baklengs når sekundet går fra 59 til 0. */ .watches.is-live .watch-hand { opacity: 1; } .watch-caption { display: block; margin-top: clamp(0.75rem, 2vw, 1rem); } .watch-city { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; } .watch-digital { display: block; font-family: "Respira", "Bodoni Moda", Georgia, serif; font-weight: 900; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 0.25rem; } .watch-weekday, .watch-note { display: block; font-size: 0.85rem; line-height: 1.35; margin-top: 15px; } .watch-weekday { font-weight: 500; } .watch-note { color: var(--muted); margin-top: 0.125rem; } body.dark .watch-dial { fill: rgba(245, 230, 200, 0.06); } body.dark .watch-note { color: var(--ink); opacity: 0.65; } /* Pakkeliste: to kolonner med to kategorier per kolonne, stablet vertikalt */ .packing-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin: 1rem 0 2rem; } @media (min-width: 720px) { .packing-grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } } .packing-col { display: flex; flex-direction: column; gap: 1.75rem; } .packing-section { margin: 0; } .packing-h { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } .packing-items { display: flex; flex-direction: column; } .packing-items label { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); user-select: none; } .packing-items input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--blank-black); } .packing-items label.checked .text { text-decoration: line-through; opacity: 0.5; } .contact-list { display: grid; grid-template-columns: 1fr; gap: 0.875rem 2rem; margin: 1rem 0 2rem; } @media (min-width: 640px) { .contact-list { grid-template-columns: 1fr 1fr; } } .contact { border-bottom: 1px solid var(--rule); padding-bottom: 0.875rem; } .contact .role { font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.25rem; opacity: 0.7; } .contact .name { font-weight: 600; margin-bottom: 0.125rem; } .contact .links { font-size: 0.95rem; display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; } .kvbox-list { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0 2rem; } @media (min-width: 640px) { .kvbox-list { grid-template-columns: 1fr 1fr; } } .kvbox { background: rgba(255, 255, 255, 0.32); border: 1px solid var(--rule); padding: 1.125rem 1.25rem; } .kvbox h3 { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.5rem; } .kvbox p { font-size: 0.98rem; line-height: 1.5; } body.dark .kvbox { background: rgba(245, 230, 200, 0.06); } /* ----------------------------------------------------------------------- Footer / dag-til-dag-navigasjon ----------------------------------------------------------------------- */ .dag-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--rule); padding-top: clamp(1.5rem, 3vw, 2rem); } .dag-nav a { text-decoration: none; display: block; padding: 0.5rem 0; } .dag-nav .label { font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.125rem; } .dag-nav .target { font-family: "Respira", "Bodoni Moda", Georgia, serif; font-size: 1.75rem; letter-spacing: -0.01em; } .dag-nav .next { text-align: right; } .site-foot { display: flex; justify-content: space-between; align-items: center; padding-top: clamp(1.5rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } /* ----------------------------------------------------------------------- Smaller utilities ----------------------------------------------------------------------- */ .measure { max-width: var(--measure); } .mt-2 { margin-top: 1.25rem; } .mt-4 { margin-top: 2.5rem; } .body-text { font-size: 1.05rem; line-height: 1.55; max-width: var(--measure); } .body-text + .body-text { margin-top: 1rem; } .body-text strong { font-weight: 600; } a.inline-link { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; font-weight: 500; } a.inline-link:hover { opacity: 0.7; } .lunch-list { display: grid; gap: 1rem; margin: 1rem 0 2rem; } @media (min-width: 720px) { .lunch-list { grid-template-columns: 1fr 1fr; } } .lunch { background: rgba(255, 255, 255, 0.32); border: 1px solid var(--rule); padding: 1.125rem 1.25rem; } body.dark .lunch { background: rgba(245, 230, 200, 0.06); } .lunch h3 { font-family: "Respira", "Bodoni Moda", Georgia, serif; font-size: 1.5rem; line-height: 1.05; margin-bottom: 0.5rem; } .lunch .meta-row { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.5rem; font-weight: 500; } body.dark .lunch .meta-row { color: rgba(245, 230, 200, 0.7); } .lunch p { font-size: 0.98rem; line-height: 1.5; margin-bottom: 0.625rem; } .lunch .lnk { font-size: 0.95rem; font-weight: 600; } .lunch .lnk a { text-decoration: none; border-bottom: 1px solid currentColor; } /* ----------------------------------------------------------------------- Mobile tilpasninger ----------------------------------------------------------------------- */ @media (max-width: 480px) { body { font-size: 16px; } .site-top { align-items: flex-start; } .site-top .meta { font-size: 10px; letter-spacing: 0.16em; } .timeline-item { grid-template-columns: 64px 1fr; gap: 0.875rem; } .timeline-item .when { font-size: 13px; } .day-card { min-height: 200px; } .menu ol li { grid-template-columns: 70px 1fr; gap: 0.5rem; } }