/* ============================================================================ HJEMHØR — Design System (production CSS) ============================================================================ Drop-in stylesheet for the Hjemhør webshop and marketing pages. Plain CSS, no build step. Two themes: → Variant A "Egetræ" (default, warm oat) → Variant B "Mosbund" (moss-forward) Toggle by setting the attribute on (or any wrapper element). Sections: 1. Font imports 2. Design tokens (:root) — colors, type, spacing, radii, shadows 3. Theme B overrides 4. Base / reset 5. Typography utilities 6. Layout helpers 7. Components: buttons, fields, product card, badge, info row, divider ========================================================================= */ /* --------------------------------------------------------------------------- 1. FONTS Substitutes for the brand's commercial serif — swap for the real .woff2 files if you have them (replace this @import + update --font-display). --------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); /* --------------------------------------------------------------------------- 2. TOKENS — Variant A "Egetræ" (default) --------------------------------------------------------------------------- */ :root { /* ---- Palette ---- */ --oat-50: #FAF6EE; --oat-100: #F5EFE6; --oat-200: #F1EAD9; --oat-300: #E8DFC9; --oat-400: #D6C9AB; --ink-900: #1A1612; --ink-700: #3A332B; --ink-500: #645A4F; --ink-300: #8E8478; --ink-200: #B2A99C; --forest-900: #14301E; --forest-700: #1F3E2A; --forest-500: #3D6B3E; --forest-300: #6A8E6C; --terracotta: #B0573A; --mustard: #C89B3C; --soil: #6B4423; --bloom: #C97A8B; /* ---- Semantic ---- */ --bg: var(--oat-100); --bg-2: var(--oat-200); --bg-3: var(--oat-300); --bg-elevated: var(--oat-50); --bg-inverse: var(--ink-900); --fg: var(--ink-900); --fg-1: var(--ink-900); --fg-2: var(--ink-500); --fg-3: var(--ink-300); --fg-inverse: var(--oat-50); --fg-on-primary: var(--oat-50); --primary: var(--forest-700); --primary-hover: var(--forest-900); --primary-press: #102818; --accent: var(--forest-500); --accent-warm: var(--terracotta); --line: rgba(26, 22, 18, 0.12); --line-strong: rgba(26, 22, 18, 0.24); --line-inverse:rgba(250, 246, 238, 0.16); --success: var(--forest-500); --warning: var(--mustard); --danger: var(--terracotta); /* ---- Shadows (subtle) ---- */ --shadow-xs: 0 1px 2px rgba(26, 22, 18, 0.04); --shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.04), 0 4px 12px rgba(26, 22, 18, 0.04); --shadow-md: 0 1px 2px rgba(26, 22, 18, 0.04), 0 8px 24px rgba(26, 22, 18, 0.06); --shadow-lg: 0 2px 4px rgba(26, 22, 18, 0.06), 0 16px 40px rgba(26, 22, 18, 0.08); /* ---- Radii ---- */ --radius-0: 0; /* buttons — always squared */ --radius-1: 2px; --radius-2: 4px; /* inputs, image tiles */ --radius-3: 8px; /* icon containers */ --radius-pill: 999px; /* ---- Spacing (4px grid) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* ---- Layout ---- */ --container: 1280px; --gutter: 64px; /* ---- Type families ---- */ --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* ---- Type scale ---- */ --t-display: clamp(56px, 8vw, 112px); --t-h1: clamp(40px, 5vw, 64px); --t-h2: clamp(32px, 3.5vw, 48px); --t-h3: 28px; --t-h4: 22px; --t-body-lg: 18px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 13px; --t-label: 12px; --t-micro: 11px; /* ---- Tracking ---- */ --track-tight: -0.01em; --track-label: 0.14em; --track-button: 0.12em; /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 500ms; } /* --------------------------------------------------------------------------- 3. TOKENS — Variant B "Mosbund" overrides --------------------------------------------------------------------------- */ [data-theme="mosbund"] { --bg: #DCDCC4; --bg-2: #C8C9A9; --bg-3: #B3B58C; --bg-elevated: #F2EEDC; --bg-inverse: #1B2415; --fg: #1B2415; --fg-1: #1B2415; --fg-2: #4A523F; --fg-3: #7A8170; --primary: #2D4A22; --primary-hover: #1E3617; --primary-press: #142910; --accent: #6B8A3F; --accent-warm: #9F4A2C; --line: rgba(27, 36, 21, 0.16); --line-strong: rgba(27, 36, 21, 0.32); --terracotta: #9F4A2C; --mustard: #B58329; --soil: #563A1C; --success: #6B8A3F; } /* --------------------------------------------------------------------------- 4. BASE / RESET --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--primary); color: var(--fg-on-primary); } img { max-width: 100%; display: block; } /* --------------------------------------------------------------------------- 5. TYPOGRAPHY --------------------------------------------------------------------------- */ h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 500; color: var(--fg-1); letter-spacing: var(--track-tight); line-height: 1.08; margin: 0; text-wrap: balance; } .display { font-size: var(--t-display); line-height: 0.95; } h1 { font-size: var(--t-h1); line-height: 1.08; } h2 { font-size: var(--t-h2); line-height: 1.1; } h3 { font-size: var(--t-h3); line-height: 1.2; } h4 { font-size: var(--t-h4); line-height: 1.25; } .italic { font-style: italic; } p { margin: 0; line-height: 1.6; color: var(--fg-1); text-wrap: pretty; } .lead { font-size: var(--t-body-lg); line-height: 1.55; color: var(--fg-2); } .caption, small { font-size: var(--t-caption); color: var(--fg-2); } /* ALL-CAPS labels (form labels, section eyebrows, product names) */ .label { font-family: var(--font-body); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-1); } .eyebrow { font-family: var(--font-body); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); } .product-name { font-family: var(--font-body); font-size: var(--t-body-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-1); } /* Price — note Danish formatting: 2.495 kr. (period as thousands sep) */ .price { font-family: var(--font-body); font-size: var(--t-body); font-weight: 600; color: var(--fg-1); } .price .tax { font-weight: 400; font-size: var(--t-caption); color: var(--fg-2); margin-left: 4px; } code, .mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-1); } a { color: var(--fg-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } a:hover { color: var(--primary); text-decoration-color: var(--primary); } /* --------------------------------------------------------------------------- 6. LAYOUT HELPERS --------------------------------------------------------------------------- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .stack > * + * { margin-top: var(--space-4); } .row { display: flex; gap: var(--space-4); align-items: center; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } @media (max-width: 900px) { :root { --gutter: 24px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .grid-4 { grid-template-columns: 1fr; } } /* Divider rules */ .rule { border: 0; height: 1px; background: var(--line); margin: var(--space-5) 0; } .rule-accent { border: 0; height: 1px; width: 40px; background: var(--primary); margin: var(--space-3) 0; } /* --------------------------------------------------------------------------- 7. COMPONENTS --------------------------------------------------------------------------- */ /* ---- Buttons (always squared) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--t-caption); font-weight: 600; letter-spacing: var(--track-button); text-transform: uppercase; text-decoration: none; padding: 16px 28px; border: 1px solid transparent; border-radius: var(--radius-0); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn:active { transform: scale(0.985); } .btn--primary { background: var(--primary); color: var(--fg-on-primary); } .btn--primary:hover { background: var(--primary-hover); color: var(--fg-on-primary); } .btn--dark { background: var(--ink-900); color: var(--oat-50); } .btn--dark:hover { background: #000; } .btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--fg-1); } .btn--ghost:hover { background: var(--fg-1); color: var(--oat-50); } .btn--link { background: transparent; color: var(--fg-1); padding: 8px 0; border-bottom: 1px solid var(--fg-1); letter-spacing: 0.08em; } .btn--block { width: 100%; } /* ---- Form fields ---- */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field > .label { color: var(--fg-1); } .input, .select, .textarea { font-family: var(--font-body); font-size: var(--t-body); color: var(--fg-1); background: transparent; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-2); outline: none; transition: border-color var(--dur-fast) var(--ease); width: 100%; } .input::placeholder, .textarea::placeholder { color: var(--fg-3); } .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); } .textarea { resize: vertical; min-height: 120px; } .select { appearance: none; cursor: pointer; /* inline chevron (forest) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231F3E2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; } /* ---- Product card ---- */ .product-card { display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; color: inherit; } .product-card__media { aspect-ratio: 4 / 5; background-size: cover; background-position: center; background-color: var(--bg-3); border-radius: var(--radius-0); } .product-card__body { display: flex; flex-direction: column; gap: 6px; } .product-card__dim { font-size: var(--t-caption); color: var(--fg-3); } /* ---- Stock badge / dot ---- */ .stock { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-caption); font-weight: 500; color: var(--accent); } .stock__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--accent); } .stock--out { color: var(--fg-3); } .stock--out .stock__dot { background: var(--fg-3); } .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; border-radius: var(--radius-pill); background: var(--bg-3); color: var(--fg-1); } .badge--accent { background: var(--primary); color: var(--fg-on-primary); } /* ---- Card surface (use sparingly — brand prefers chrome-less) ---- */ .card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--space-5); } /* ---- Info row with icon-in-square (contact / specs) ---- */ .info-row { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--line); } .info-row:last-child { border-bottom: 1px solid var(--line); } .icon-box { width: 40px; height: 40px; border-radius: var(--radius-3); background: rgba(26, 22, 18, 0.04); display: flex; align-items: center; justify-content: center; color: var(--primary); } [data-theme="mosbund"] .icon-box { background: rgba(27, 36, 21, 0.06); } .icon-box svg { width: 18px; height: 18px; } .info-row__label { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); } .info-row__value { font-size: var(--t-body); color: var(--fg-1); margin-top: 2px; } /* ---- Quantity stepper ---- */ .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-2); } .qty button { width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; color: var(--fg-1); display: inline-flex; align-items: center; justify-content: center; } .qty button:hover { background: var(--bg-3); } .qty output { width: 40px; text-align: center; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 8. SITE CHROME — header, hero, sections, footer Building blocks for full pages (see templates/). --------------------------------------------------------------------------- */ /* ---- Site header (sticky, blurred on scroll) ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: var(--container); margin-inline: auto; padding: 20px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .site-nav { display: flex; gap: 36px; justify-content: center; } .site-nav a { font-size: var(--t-body-sm); font-weight: 500; letter-spacing: 0.02em; text-decoration: none; color: var(--fg-1); padding-bottom: 4px; border-bottom: 1px solid transparent; } .site-nav a:hover { border-bottom-color: var(--line-strong); color: var(--fg-1); } .site-nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); } .site-header__actions { display: flex; gap: 16px; justify-content: flex-end; align-items: center; } /* Brand lockup (mark + wordmark) */ .brand { display: inline-flex; align-items: flex-end; gap: 8px; color: var(--fg-1); text-decoration: none; } .brand img { height: 30px; width: auto; margin-bottom: 2px; } .brand span { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.005em; } /* Icon button (search, cart…) */ .icon-btn { width: 40px; height: 40px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--fg-1); display: inline-flex; align-items: center; justify-content: center; position: relative; } .icon-btn svg, .icon-btn img { width: 20px; height: 20px; } .icon-btn__count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--primary); color: var(--fg-on-primary); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } /* ---- Sections ---- */ .section { padding-block: var(--space-9); } .section--tight { padding-block: var(--space-7); } .section--alt { background: var(--bg-2); } .section__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-7); gap: var(--space-5); } /* ---- Split hero (text + image) ---- */ .hero { max-width: var(--container); margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-9); display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .hero__media { aspect-ratio: 4 / 5; background-size: cover; background-position: center; background-color: var(--bg-3); } .hero h1 { font-size: clamp(56px, 7vw, 96px); line-height: 1.12; } /* ---- USP bar ---- */ .usp-bar { border-block: 1px solid var(--line); } .usp-bar__inner { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); } .usp-bar__item { padding: 22px 24px; text-align: center; color: var(--fg-2); font-size: 15px; } .usp-bar__item + .usp-bar__item { border-left: 1px solid var(--line); } /* ---- Footer ---- */ .site-footer { background: var(--bg-inverse); color: var(--oat-100); padding: var(--space-9) var(--gutter) var(--space-7); } .site-footer__inner { max-width: var(--container); margin-inline: auto; } .site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 64px; padding-bottom: var(--space-8); border-bottom: 1px solid var(--line-inverse); } .site-footer .brand span { color: var(--oat-50); } .site-footer h5 { font-size: 11px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--forest-300); margin: 0 0 18px; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .site-footer ul a { color: var(--oat-100); text-decoration: none; font-size: var(--t-body-sm); opacity: 0.88; } .site-footer ul a:hover { opacity: 1; color: var(--oat-50); } .site-footer__legal { padding-top: 28px; display: flex; justify-content: space-between; color: rgba(250,246,238,0.45); font-size: var(--t-label); } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; } .site-nav { display: none; } .site-header__inner { grid-template-columns: 1fr auto; } .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; } .usp-bar__inner { grid-template-columns: 1fr; } .usp-bar__item + .usp-bar__item { border-left: 0; border-top: 1px solid var(--line); } } @media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; gap: 32px; } .site-footer__legal { flex-direction: column; gap: 8px; } .brand span { font-size: 22px; } .brand img { height: 24px; } } /* --------------------------------------------------------------------------- 9. PRICING CARDS + FEATURE LISTS + SPLIT FEATURE --------------------------------------------------------------------------- */ /* ---- Pricing cards ("Vores pakker") ---- */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; } .price-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--space-6) var(--space-6) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); } .price-card--featured { background: var(--ink-900); border-color: var(--ink-900); color: var(--oat-100); /* lift the popular card slightly */ transform: translateY(-12px); box-shadow: var(--shadow-md); } .price-card__tier { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); } .price-card__price { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--fg-1); } .price-card--featured .price-card__price { color: var(--oat-50); } .price-card__tax { font-size: var(--t-caption); color: var(--fg-2); margin-top: -8px; } .price-card--featured .price-card__tax { color: rgba(245,239,230,0.65); } .price-card__pill { align-self: flex-start; display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--forest-700); color: var(--oat-50); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; } /* Feature list with check icons */ .feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .feature-list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; font-size: var(--t-body-sm); line-height: 1.45; color: var(--fg-1); } .price-card--featured .feature-list li { color: var(--oat-100); } .feature-list li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; background-color: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .price-card__cta { margin-top: auto; } /* Outlined button for use inside cards */ .btn--outline { background: transparent; color: var(--fg-1); border-color: var(--line-strong); } .btn--outline:hover { background: var(--fg-1); color: var(--oat-50); border-color: var(--fg-1); } .price-card--featured .btn--outline { color: var(--oat-50); border-color: rgba(245,239,230,0.4); } .price-card--featured .btn--outline:hover { background: var(--oat-50); color: var(--ink-900); border-color: var(--oat-50); } /* ---- Split feature ("Om konceptet" prose + bee) ---- */ .prose-feature { position: relative; max-width: 880px; margin-inline: auto; padding-block: var(--space-3); } .prose-feature__head { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-5); align-items: start; margin-bottom: var(--space-6); } .prose-feature__bee { width: 120px; height: auto; } .prose-feature__bee--br { position: absolute; right: -16px; bottom: 24px; width: 120px; transform: scaleX(-1); pointer-events: none; } .prose-feature__body { padding-left: 144px; display: flex; flex-direction: column; gap: var(--space-5); max-width: 700px; } .prose-feature__body p { font-size: var(--t-body-lg); line-height: 1.7; color: var(--fg-2); } @media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } .price-card--featured { transform: none; } .prose-feature__head { grid-template-columns: 80px 1fr; gap: var(--space-4); } .prose-feature__bee { width: 80px; } .prose-feature__body { padding-left: 0; } .prose-feature__bee--br { display: none; } }