/* ========================================================================= Italia 2026 — Blank Tonet etter Blanks visuelle profil og Områdeintro-malene fra strategiworkshop ========================================================================= */ @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; --blank-yellow: #FFFCBD; --muted: #6B6F66; --rule: rgba(39, 45, 42, 0.18); --rule-on-dark: rgba(255, 252, 182, 0.22); /* Dagsfarger */ --color-onsdag: #E5A985; /* peach (Folkene) */ --color-torsdag: #A8CDA8; /* salvie (Limet) */ --color-fredag: #C8C2E3; /* lavendel (Håndverket) */ --color-lordag: #B0CAE8; /* himmelblå (Skiftet) */ --color-sondag: #FFFCBD; /* smørgul (Stjernestatus) */ /* Standard sidefarger — overstyres per side */ --paper: #F4EFE6; --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; } img, 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-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(--blank-black); --ink: var(--blank-yellow); --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); } /* ----------------------------------------------------------------------- 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); } /* ----------------------------------------------------------------------- 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(--ink); 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); } .hero-photo { width: 100%; aspect-ratio: 16 / 7; background: var(--rule); margin: clamp(1.5rem, 4vw, 2.5rem) 0; overflow: hidden; border-radius: 2px; display: flex; align-items: flex-end; justify-content: flex-start; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; } .hero-photo figcaption { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); padding: 0.625rem 0.875rem; background: var(--paper); margin: 0.625rem; font-weight: 600; } /* ----------------------------------------------------------------------- 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(255,252,182,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-photo { aspect-ratio: 16 / 9; background: var(--rule); margin: calc(clamp(1.25rem, 3vw, 1.75rem) * -1) calc(clamp(1.25rem, 3vw, 1.75rem) * -1) clamp(1rem, 2vw, 1.25rem); overflow: hidden; } .venue-photo img { width: 100%; height: 100%; object-fit: cover; } .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(255,252,182,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(255,252,182,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; } @media (min-width: 600px) { .day-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .day-grid { grid-template-columns: repeat(5, 1fr); } } .day-card { --card-bg: var(--color-onsdag); 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.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 ----------------------------------------------------------------------- */ /* 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(255,252,182,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(255,252,182,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(255,252,182,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; } .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; } }