/*
Layout+identitet styres av (satt fra cookien
"layout", med RECIPE_LAYOUT i .env som standardverdi før besøkeren har
valgt noe selv — se app/__init__.py og app/routes.py). Bytteknappen
nederst på siden (static/js/layout-switch.js) setter cookien og laster
siden på nytt.
Tre varianter, hver med egen farge+type+struktur:
registeret — typografisk indeks, ingen kort
menytavla — gruppert etter kategori, meny-rytme
kartoteket — søk/filter, verktøypreget
*/
/*
Selvhostede fonter (app/static/fonts/) — ikke systemfont-stabler.
Iowan Old Style/Georgia o.l. finnes ikke på Linux og faller tilbake på
en generisk, stygg serif. Bare latin-tegnsettet er hentet ned (dekker
æøå), ingen ekstern forespørsel ved kjøring.
*/
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/source-serif-4-regular.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/fraunces-bold.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--paper: #f1efe9;
--ink: #211f1a;
--ink-soft: #6f6a5e;
--line: #ddd8c9;
--accent: #33465c;
--accent-soft: #e6eaee;
--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--heading-font: var(--serif);
--heading-weight: 400;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #191814;
--ink: #e9e5da;
--ink-soft: #9c968a;
--line: #332f27;
--accent: #8ba3bd;
--accent-soft: #1f2a33;
}
}
html[data-layout="menytavla"] {
--paper: #eee6d8;
--ink: #241a12;
--ink-soft: #7c6b57;
--line: #ddceb0;
--accent: #8a3324;
--accent-soft: #f1e0d8;
--heading-font: "Fraunces", Georgia, "Times New Roman", serif;
--heading-weight: 700;
}
@media (prefers-color-scheme: dark) {
html[data-layout="menytavla"] {
--paper: #1c1611;
--ink: #f0e6d8;
--ink-soft: #b3a48f;
--line: #3a2f22;
--accent: #d98567;
--accent-soft: #2c1f17;
}
}
html[data-layout="kartoteket"] {
--paper: #f4f5f5;
--ink: #15181a;
--ink-soft: #5f6669;
--line: #dfe3e3;
--accent: #3a6b6e;
--accent-soft: #e4eeee;
--heading-font: var(--sans);
--heading-weight: 600;
}
@media (prefers-color-scheme: dark) {
html[data-layout="kartoteket"] {
--paper: #101314;
--ink: #eef1f1;
--ink-soft: #8b9598;
--line: #2a3032;
--accent: #7fbcbf;
--accent-soft: #182322;
}
}
/*
Fluid overgang mellom sider (og mellom layout-varianter, som reloader
siden — se layout-switch.js) via cross-document View Transitions.
Rene CSS-progressive-enhancement: nettlesere uten støtte (Firefox,
eldre Safari) ignorerer bare @view-transition og navigerer som normalt.
*/
@view-transition {
navigation: auto;
}
/* alle navngitte overganger (root, bytteknapp, oppskrift-elementer under)
deler samme varighet/kurve, slik at ingenting føles usynkronisert */
::view-transition-group(*) {
animation-duration: 420ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
/* root krysses ikke bare over - den løses opp i en myk uskarphet og
smelter sammen, i stedet for et rent opacity-kutt. Standard (ingen
kjent retning, f.eks. første sidelast): rett dissolve. */
@keyframes vt-blend-out {
to {
opacity: 0;
filter: blur(10px);
}
}
@keyframes vt-blend-in {
from {
opacity: 0;
filter: blur(10px);
}
}
::view-transition-old(root) {
animation: 420ms cubic-bezier(0.22, 1, 0.36, 1) both vt-blend-out;
}
::view-transition-new(root) {
animation: 420ms cubic-bezier(0.22, 1, 0.36, 1) both vt-blend-in;
}
/* Retningsbevisst variant: satt av goTo() i layout-switch.js (knapp
eller swipe) rett før reload, videreført via sessionStorage til neste
side sitt blocking-script i . Gir en faktisk "gli forbi"-følelse
i stedet for en statisk blur-fade på stedet. */
@keyframes vt-old-forward {
to {
transform: translateX(-4%) scale(0.98);
opacity: 0;
filter: blur(8px);
}
}
@keyframes vt-new-forward {
from {
transform: translateX(4%) scale(0.98);
opacity: 0;
filter: blur(8px);
}
to {
transform: translateX(0) scale(1);
opacity: 1;
filter: blur(0);
}
}
@keyframes vt-old-backward {
to {
transform: translateX(4%) scale(0.98);
opacity: 0;
filter: blur(8px);
}
}
@keyframes vt-new-backward {
from {
transform: translateX(-4%) scale(0.98);
opacity: 0;
filter: blur(8px);
}
to {
transform: translateX(0) scale(1);
opacity: 1;
filter: blur(0);
}
}
:root[data-vt-direction="forward"]::view-transition-old(root) {
animation-name: vt-old-forward;
}
:root[data-vt-direction="forward"]::view-transition-new(root) {
animation-name: vt-new-forward;
}
:root[data-vt-direction="backward"]::view-transition-old(root) {
animation-name: vt-old-backward;
}
:root[data-vt-direction="backward"]::view-transition-new(root) {
animation-name: vt-new-backward;
}
/* bytteknappen skal ikke tones ut/inn med resten av siden - den er fast krom */
.layout-switch {
view-transition-name: layout-switch;
}
.wordmark {
view-transition-name: vt-wordmark;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
* {
box-sizing: border-box;
}
html {
color-scheme: light dark;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
padding-bottom: 5.5rem; /* rom til den flytende bytteknappen */
}
.wrap {
max-width: 50rem;
margin: 0 auto;
padding: 0 1.5rem;
}
a {
color: inherit;
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
Delt krom: header, footer, tilbake-lenke, tomme tilstander
============================================================ */
.site-header {
border-bottom: 1px solid var(--line);
}
.site-header__inner {
display: flex;
align-items: center;
height: 4.5rem;
}
.wordmark {
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 1.25rem;
letter-spacing: 0.01em;
text-decoration: none;
color: var(--ink);
}
.site-footer {
margin-top: 5rem;
padding: 2rem 0 3rem;
border-top: 1px solid var(--line);
color: var(--ink-soft);
font-size: 0.85rem;
}
main.wrap {
padding-top: 3rem;
padding-bottom: 3rem;
min-height: 50vh;
}
.back-link {
display: inline-block;
font-size: 0.85rem;
color: var(--ink-soft);
text-decoration: none;
margin-bottom: 2rem;
}
.back-link:hover {
color: var(--accent);
}
.empty {
color: var(--ink-soft);
}
.not-found {
text-align: center;
padding: 4rem 0;
}
.not-found h1 {
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 3rem;
margin: 0 0 0.5rem;
}
/* ============================================================
Bytteknapp — flytende, samme på alle sider/layouter
============================================================ */
.layout-switch {
position: fixed;
left: 50%;
bottom: calc(1rem + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 100;
display: flex;
width: min(92vw, 23rem);
padding: 3px;
border-radius: 999px;
background: rgba(127, 122, 110, 0.14);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(127, 122, 110, 0.22);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
/* På ekte touch-enheter (ikke bare smale desktop-vinduer) er baren
skjult til man begynner å swipe - se touchmove/touchend i
layout-switch.js. Vanlig mus/tastatur-bruk ser den alltid. */
@media (hover: none) and (pointer: coarse) {
.layout-switch {
opacity: 0;
transform: translate(-50%, 12px);
pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease;
}
.layout-switch.is-visible {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
}
.layout-switch__indicator {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
width: calc((100% - 6px) / 3);
border-radius: 999px;
background: var(--ink);
transform: translateX(calc(var(--i, 0) * 100%));
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.layout-switch__indicator {
transition: none;
}
}
.layout-switch__btn {
position: relative;
z-index: 1;
flex: 1;
appearance: none;
background: none;
border: none;
color: var(--ink);
font: inherit;
font-size: 0.78rem;
letter-spacing: 0.01em;
padding: 0.65rem 0.5rem;
cursor: pointer;
border-radius: 999px;
transition: color 200ms ease;
}
.layout-switch__btn.is-active {
color: var(--paper);
font-weight: 600;
}
.layout-switch__btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.layout-switch__btn:disabled {
cursor: default;
}
/* ============================================================
REGISTERET — typografisk indeks
============================================================ */
.idx-list {
max-width: 36rem;
margin: 0 auto;
font-family: var(--serif);
}
.idx-group {
margin-bottom: 0.25rem;
}
.idx-letter {
font-size: 3rem;
line-height: 1;
color: var(--accent);
opacity: 0.35;
margin: 1.75rem 0 0.4rem;
font-weight: 400;
}
.idx-group:first-child .idx-letter {
margin-top: 0;
}
.idx-row {
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.6rem 0;
border-top: 1px solid var(--line);
font-size: 1.05rem;
text-decoration: none;
color: var(--ink);
}
.idx-group .idx-row:last-child {
border-bottom: 1px solid var(--line);
}
.idx-row:hover .idx-title {
color: var(--accent);
}
.idx-title {
flex: none;
max-width: 70%;
}
.idx-leader {
flex: 1;
border-bottom: 1px dotted var(--ink-soft);
height: 0.5em;
opacity: 0.6;
}
.idx-meta {
flex: none;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink-soft);
text-align: right;
}
.idx-detail {
max-width: 36rem;
margin: 0 auto;
font-family: var(--serif);
}
.idx-detail h1 {
font-size: 1.9rem;
font-weight: 400;
line-height: 1.2;
margin: 0 0 1.75rem;
}
.idx-detail-grid {
display: grid;
grid-template-columns: 11rem 1fr;
gap: 2.25rem;
}
@media (max-width: 40rem) {
.idx-detail-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.idx-margin {
border-right: none;
border-bottom: 1px solid var(--line);
padding-right: 0;
padding-bottom: 1.25rem;
}
}
.idx-margin {
font-size: 0.88rem;
font-style: italic;
color: var(--ink-soft);
border-right: 1px solid var(--line);
padding-right: 1.5rem;
}
.idx-label {
margin: 0 0 0.6rem;
text-transform: uppercase;
font-style: normal;
letter-spacing: 0.06em;
font-size: 0.7rem;
font-family: var(--sans);
color: var(--ink-soft);
}
.idx-margin ul {
list-style: none;
margin: 0;
padding: 0;
}
.idx-margin li {
padding: 0.25rem 0;
}
.idx-method {
counter-reset: idx-step;
}
.idx-method p:not(.idx-label) {
margin: 0 0 1rem;
counter-increment: idx-step;
}
.idx-method p:not(.idx-label)::before {
content: counter(idx-step) ". ";
color: var(--accent);
font-family: var(--sans);
font-weight: 600;
}
.idx-notes {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
font-size: 0.88rem;
color: var(--ink-soft);
font-style: italic;
}
/* ============================================================
MENYTAVLA — gruppert etter kategori
============================================================ */
.menu-board {
columns: 2 16rem;
column-gap: 3rem;
max-width: 48rem;
margin: 0 auto;
}
@media (max-width: 30rem) {
.menu-board {
columns: 1;
}
}
.menu-section {
break-inside: avoid;
margin-bottom: 2rem;
}
.menu-section h2 {
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 1rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid var(--line);
padding-bottom: 0.5rem;
margin: 0 0 0.75rem;
}
.menu-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.45rem 0;
font-size: 0.95rem;
text-decoration: none;
color: var(--ink);
}
.menu-row:hover span:first-child {
color: var(--accent);
}
.menu-leader {
flex: 1;
border-bottom: 1px dotted var(--ink-soft);
height: 0.5em;
opacity: 0.5;
}
.menu-time {
flex: none;
font-variant-numeric: tabular-nums;
font-size: 0.8rem;
color: var(--ink-soft);
}
.menu-detail {
max-width: 36rem;
margin: 0 auto;
}
.menu-detail h1 {
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 2rem;
margin: 0 0 0.5rem;
}
.menu-tag {
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 1.75rem;
}
.menu-label {
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 0.85rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.6rem;
}
.menu-ingredients {
list-style: none;
margin: 0 0 2rem;
padding: 0;
columns: 2 13rem;
column-gap: 2rem;
}
.menu-ingredients li {
padding: 0.4rem 0;
border-top: 1px dotted var(--line);
break-inside: avoid;
font-size: 0.95rem;
}
.menu-method {
list-style: none;
counter-reset: menu-step;
margin: 0;
padding: 0;
}
.menu-method li {
counter-increment: menu-step;
display: flex;
gap: 0.6rem;
padding: 0.55rem 0;
border-top: 1px dotted var(--line);
}
.menu-method li::before {
content: counter(menu-step) ".";
flex: none;
color: var(--accent);
font-family: var(--heading-font);
font-weight: var(--heading-weight);
}
.menu-notes {
margin-top: 1.5rem;
font-size: 0.85rem;
color: var(--ink-soft);
}
/* ============================================================
KARTOTEKET — søk/filter, verktøypreget
============================================================ */
.cat-controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
margin-bottom: 1.1rem;
}
.cat-search {
flex: 1;
min-width: 12rem;
background: transparent;
border: 1px solid var(--line);
color: var(--ink);
font-family: var(--mono);
font-size: 0.85rem;
padding: 0.6rem 0.8rem;
}
.cat-search::placeholder {
color: var(--ink-soft);
}
.cat-search:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.cat-chip {
appearance: none;
background: transparent;
border: 1px solid var(--line);
color: var(--ink-soft);
font-family: var(--mono);
font-size: 0.72rem;
padding: 0.4rem 0.65rem;
cursor: pointer;
}
.cat-chip.active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}
.cat-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.cat-count {
font-family: var(--mono);
font-size: 0.75rem;
color: var(--ink-soft);
margin: 0 0 0.75rem;
font-variant-numeric: tabular-nums;
}
.cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.cat-card {
background: var(--paper);
padding: 0.9rem 1rem;
text-decoration: none;
color: var(--ink);
display: block;
}
.cat-card:hover {
background: var(--accent-soft);
}
.cat-card-title {
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 0.92rem;
margin: 0 0 0.4rem;
}
.cat-card-meta {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--ink-soft);
}
.cat-empty {
grid-column: 1 / -1;
padding: 2rem;
text-align: center;
color: var(--ink-soft);
font-family: var(--mono);
font-size: 0.85rem;
}
.cat-noscript {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
}
.cat-noscript li {
padding: 0.4rem 0;
border-bottom: 1px solid var(--line);
}
.cat-detail {
max-width: 24rem;
margin: 0 auto;
border: 1px solid var(--line);
background: var(--paper);
position: relative;
padding: 2.25rem 1.75rem 1.75rem;
}
.cat-detail::before {
content: "";
position: absolute;
top: -1px;
left: 1.75rem;
width: 3.5rem;
height: 0.6rem;
background: var(--accent-soft);
border: 1px solid var(--line);
border-top: none;
}
.cat-detail-meta {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--ink-soft);
margin: 0 0 0.9rem;
}
.cat-detail h1 {
font-family: var(--heading-font);
font-weight: var(--heading-weight);
font-size: 1.5rem;
margin: 0 0 1.4rem;
}
.cat-label {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 0.5rem;
}
.cat-check-list {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
border-top: 1px solid var(--line);
}
.cat-check-list li {
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.45rem 0;
border-bottom: 1px solid var(--line);
font-size: 0.85rem;
}
.cat-check-list input {
accent-color: var(--accent);
margin: 0;
}
.cat-check-list input:checked + label {
color: var(--ink-soft);
text-decoration: line-through;
}
.cat-method {
list-style: none;
counter-reset: cat-step;
margin: 0;
padding: 0;
}
.cat-method li {
counter-increment: cat-step;
display: flex;
gap: 0.7rem;
padding: 0.5rem 0;
font-size: 0.85rem;
}
.cat-method li::before {
content: counter(cat-step, decimal-leading-zero);
flex: none;
font-family: var(--mono);
color: var(--accent);
font-size: 0.75rem;
padding-top: 0.15rem;
}
.cat-notes {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 0.75rem;
color: var(--ink-soft);
}