/* * Matsnakk.no – global visuell identitet v1 * Inspirert av godkjent Matsnakk-layout: krem, mørk grønn, kobber, myke kort og tydelige tagger. * Denne filen er bevisst lagt sent i slik at den kan fungere som visuell overstyring uten å endre kjerne-CSS. */ :root { --mn-vi-cream: #f7f2ea; --mn-vi-cream-2: #fffaf1; --mn-vi-paper: rgba(255, 255, 255, .90); --mn-vi-paper-solid: #ffffff; --mn-vi-ink: #1f1712; --mn-vi-muted: #6e6258; --mn-vi-brown: #3b2a22; --mn-vi-copper: #a8663a; --mn-vi-copper-2: #c28755; --mn-vi-gold: #e0bd66; --mn-vi-green: #075642; --mn-vi-green-2: #0d6b53; --mn-vi-green-soft: #e8f4ee; --mn-vi-border: rgba(68, 43, 28, .15); --mn-vi-shadow: 0 18px 44px rgba(42, 27, 17, .10); --mn-vi-shadow-soft: 0 10px 26px rgba(42, 27, 17, .08); --mn-vi-radius-lg: 22px; --mn-vi-radius-md: 16px; --mn-vi-radius-sm: 11px; } html, body { background: radial-gradient(circle at 14% 6%, rgba(224, 189, 102, .13), transparent 28rem), radial-gradient(circle at 82% 14%, rgba(7, 86, 66, .10), transparent 34rem), linear-gradient(180deg, var(--mn-vi-cream-2), var(--mn-vi-cream)); color: var(--mn-vi-ink); } .mn-main { background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(247,242,234,.74)); } /* Global hero / sidehode */ .mn-v22-page-hero, .mn-categories-page-hero, .mn-v30-section__top, .mn-v30-hero__content, .mn-recipe-detail__hero, .mn-page-hero { color: var(--mn-vi-ink); } .mn-v22-page-hero, .mn-categories-page-hero, .mn-page-hero { max-width: 1180px; margin-left: auto; margin-right: auto; padding: clamp(2.4rem, 5vw, 4.6rem) clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 3vw, 2.4rem); } .mn-v22-page-hero h1, .mn-categories-page-hero h1, .mn-page-hero h1, .mn-v30-section__top h2, .mn-category-letter-section > h2, .mn-v30-hero h1 { color: var(--mn-vi-ink); letter-spacing: -.035em; } .mn-v30-kicker, .mn-v22-page-hero .mn-v30-kicker, .mn-categories-page-hero .mn-v30-kicker { color: var(--mn-vi-copper); font-weight: 900; letter-spacing: .28em; text-transform: uppercase; } /* Knapper og lenker */ .mn-v30-cta, .mn-button, button[type="submit"], input[type="submit"], .mn-category-overview-card a, .mn-v22-content-card a, .mn-v30-story-card a { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .mn-v30-cta--primary, .mn-button--primary, button[type="submit"], input[type="submit"] { background: linear-gradient(135deg, var(--mn-vi-green), var(--mn-vi-green-2)); color: #fff; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 24px rgba(7, 86, 66, .22); } .mn-v30-cta--secondary, .mn-button--secondary { background: rgba(168, 102, 58, .10); color: var(--mn-vi-brown); border: 1px solid rgba(168, 102, 58, .28); } .mn-v30-cta:hover, .mn-button:hover, button[type="submit"]:hover, input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 15px 32px rgba(42, 27, 17, .16); } /* Kortgrunnmur */ .mn-category-overview-card, .mn-v22-content-card, .mn-v30-story-card, .mn-v22-empty-card, .mn-v22-mini-card, .mn-card, .mn-panel, .mn-form-card, .mn-recipe-card, .mn-content-card, article[class*="card"] { background: var(--mn-vi-paper); border: 1px solid var(--mn-vi-border); border-radius: var(--mn-vi-radius-lg); box-shadow: var(--mn-vi-shadow-soft); } .mn-category-overview-card:hover, .mn-v22-content-card:hover, .mn-v30-story-card:hover, .mn-v22-mini-card:hover, .mn-recipe-card:hover, .mn-content-card:hover { transform: translateY(-2px); box-shadow: var(--mn-vi-shadow); } /* Kategorioversikt */ .mn-categories-page { max-width: 1240px; margin-left: auto; margin-right: auto; } .mn-categories-letter-nav { padding: .75rem; background: rgba(255,255,255,.62); border: 1px solid var(--mn-vi-border); border-radius: var(--mn-vi-radius-lg); box-shadow: var(--mn-vi-shadow-soft); } .mn-categories-letter-nav a { background: var(--mn-vi-green-soft) !important; color: var(--mn-vi-green) !important; border: 1px solid rgba(7, 86, 66, .13); } .mn-categories-letter-nav a:hover { background: var(--mn-vi-green) !important; color: #fff !important; } .mn-category-letter-section > h2 { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 3rem; padding: .55rem .95rem; border-radius: 999px; background: var(--mn-vi-brown); color: #fff; box-shadow: 0 10px 22px rgba(59, 42, 34, .18); } .mn-category-overview-card { overflow: hidden; } .mn-category-overview-card__image { border-bottom: 1px solid var(--mn-vi-border); } .mn-category-overview-card__body { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,241,.94)); } .mn-category-overview-card h3 { font-size: clamp(1.08rem, 1.6vw, 1.34rem); } .mn-category-overview-card__meta { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .62rem; border-radius: 999px; background: rgba(224, 189, 102, .20); color: #6d4b18; font-size: .88rem; } /* Innholdskort / oppskriftskort */ .mn-v22-content-grid, .mn-v30-story-grid { gap: 1.15rem; } .mn-v22-content-card, .mn-v30-story-card { overflow: hidden; } .mn-v22-content-card__image, .mn-v30-story-card__image, .mn-v22-mini-card { background: rgba(59, 42, 34, .08); } .mn-v22-content-card__image img, .mn-v30-story-card__image img, .mn-v22-mini-card img, .mn-category-overview-card__image img { filter: saturate(1.03) contrast(1.02); } .mn-v22-content-card__image span, .mn-v30-story-card__image span, .mn-v22-mini-card span { background: linear-gradient(135deg, var(--mn-vi-green), var(--mn-vi-green-2)) !important; color: #fff !important; border-radius: 999px; box-shadow: 0 8px 18px rgba(7, 86, 66, .20); } /* Tagger/chips */ .mn-tag, .mn-chip, .mn-taxonomy-chip, .mn-recipe-tag, [class*="tag"], [class*="chip"] { border-radius: 999px; } .mn-tag, .mn-chip, .mn-taxonomy-chip, .mn-recipe-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .68rem; background: var(--mn-vi-green-soft); color: var(--mn-vi-green); border: 1px solid rgba(7, 86, 66, .13); font-weight: 700; } /* Oppskriftssider */ .mn-recipe-detail, .mn-recipe-page, .mn-recipe-shell { color: var(--mn-vi-ink); } .mn-recipe-detail img, .mn-recipe-page img { border-radius: var(--mn-vi-radius-lg); } .mn-recipe-detail section, .mn-recipe-page section, .mn-recipe-shell section { border-radius: var(--mn-vi-radius-lg); } /* Skjemasider/opprett/rediger */ input, select, textarea { border-radius: var(--mn-vi-radius-sm); } input:focus, select:focus, textarea:focus { border-color: var(--mn-vi-green) !important; box-shadow: 0 0 0 4px rgba(7, 86, 66, .13) !important; outline: none; } fieldset, .form-section, .mn-form-section { background: rgba(255,255,255,.78); border: 1px solid var(--mn-vi-border); border-radius: var(--mn-vi-radius-lg); box-shadow: var(--mn-vi-shadow-soft); } /* Kontrollpanel/funksjonspaneler uten å endre rettigheter */ .mn-controlpanel-card, .mn-dashboard-card, .mn-status-card, .mn-admin-card { border-radius: var(--mn-vi-radius-lg); border: 1px solid var(--mn-vi-border); box-shadow: var(--mn-vi-shadow-soft); } /* Footer harmonisering */ .mn-footer { border-top: 1px solid rgba(224, 189, 102, .18); } /* Små skjermer */ @media (max-width: 760px) { .mn-v22-page-hero, .mn-categories-page-hero, .mn-page-hero { padding-top: 2rem; } .mn-category-letter-section { margin: 1.4rem 0; } }