/* =========================================================================== BJÖRKLIDENS - BRAND THEME (warm-craft) Läggs OVANPÅ style-base.css. Skriver bara över :root-tokens + ett fåtal komponenter som token ensamt inte kan fixa. Inga beroenden. ANVÄNDNING 1. Ladda EFTER baselinen i : (Eller konkatenera till en style.css vid build. Brand sist.) 2. Ladda ner fonterna (OFL, gratis) som TTF till /assets/fonts/: Merriweather (rubriker) -> merriweather-400.ttf, merriweather-700.ttf Raleway (brödtext) -> raleway-400/500/600/700.ttf Källa: fonts.google.com/specimen/Merriweather + /Raleway 3. Lägg detta i för att skydda LCP och slippa FOUT: DESIGNRIKTNING Warm-craft, raffinerad minimalism. Tyst gränssnitt, produktfotot bär färgen. Skogsgrön som signatur (CTA + detalj), varma neutraler som bas, varmt trä/ockra som litet accentljus. Inga heltäckande gröna fält (motsats till nuvarande sajt). Mindre rundat = mer "byggbart", mindre SaaS. KONTRAST (WCAG, ny brand-grön #347369) charcoal/stone-text på papper > 5:1. Vit text på brand-grön ≈ 5.5:1 (AA ok). Footer/mörk skog (#214B45) > 9:1. Cream-siffror på grön = stor text (≥3:1 ok). Trä (--bj-wood) endast för STORT/UI/dekor (≈4:1). Smått accent-text: wood-ink. =========================================================================== */ /* --------------------------------------------------------------------------- 0. FONTER (self-hosted, static weights) --------------------------------------------------------------------------- */ @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/merriweather-400.woff2') format('woff2'), url('../fonts/merriweather-400.ttf') format('truetype'); } @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/merriweather-700.woff2') format('woff2'), url('../fonts/merriweather-700.ttf') format('truetype'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/raleway-400.woff2') format('woff2'), url('../fonts/raleway-400.ttf') format('truetype'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/raleway-500.woff2') format('woff2'), url('../fonts/raleway-500.ttf') format('truetype'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/raleway-600.woff2') format('woff2'), url('../fonts/raleway-600.ttf') format('truetype'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/raleway-700.woff2') format('woff2'), url('../fonts/raleway-700.ttf') format('truetype'); } /* --------------------------------------------------------------------------- 1. TOKEN-OVERRIDE --------------------------------------------------------------------------- */ :root { /* --- Björklidens råpalett --- */ --bj-forest: #347369; /* primär brand-grön (CTA-fyllning, mörka block) */ --bj-forest-deep: #214B45; /* djupare grön (footer, hover, mörka sektioner) */ --bj-wood: #A9743F; /* varmt trä/ockra. ENDAST stort/UI/dekor (~4:1) */ --bj-wood-ink: #835424; /* mörkare trä för SMÅ accent-texter (~6.4:1) */ --bj-cream: #EAD9BE; /* varmt ljus för text PÅ grön (stat-siffror m.m.) */ --bj-sage: #5E8B6E; /* dämpad salviagrön, bockar/ikoner på ljust */ --bj-charcoal: #262220; /* varm nästan-svart brödtext (~14:1) */ --bj-stone: #665D54; /* varm dämpad text (~6:1 på papper) */ --bj-paper: #F4F0E6; /* varmt papper, ljusa sektioner */ --bj-paper-white: #FBF9F3; /* varm vit, huvudbakgrund */ --bj-border-warm: #E4DDCE; /* varm hårfin kantlinje */ /* --- Mappning till baselinens tokens --- */ --color-primary: var(--bj-forest); --color-secondary: var(--bj-wood); /* fokus-outline, hero-badge, expert-badge */ --color-accent: var(--bj-sage); /* feature-bockar, usp-ikoner (override nedan vid mörk bg) */ --color-text-dark: var(--bj-charcoal); --color-text-light: var(--bj-paper-white); --color-text-muted: var(--bj-stone); --color-bg-white: var(--bj-paper-white); --color-bg-light: var(--bj-paper); --color-bg-dark: var(--bj-forest-deep); /* footer + section--dark = djup skog */ --color-border: var(--bj-border-warm); --color-success: var(--bj-sage); --color-error: #B23A2E; /* något varmare röd */ /* --- Typografi --- */ --font-primary: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif; /* --- Form: mindre rundat = mer byggbart, mindre SaaS --- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* --radius-full lämnas (avatarer/sociala ikoner) */ /* --- Skuggor: varma, subtila, plattare --- */ --shadow-sm: 0 1px 2px rgba(38, 34, 32, 0.06); --shadow-md: 0 4px 14px rgba(38, 34, 32, 0.08); --shadow-lg: 0 12px 30px rgba(38, 34, 32, 0.10); --shadow-xl: 0 24px 50px rgba(38, 34, 32, 0.12); } /* --------------------------------------------------------------------------- 2. TYPOGRAFI-FÖRFINING Serif (Merriweather) på de stora rubrikerna. H4-H6 i Raleway för en renare, modernare editorial-känsla. Raleway som brödtext är smal, så vi ger den lite mer radavstånd för läsbarhet. --------------------------------------------------------------------------- */ body { line-height: 1.7; } /* hjälper Raleways läsbarhet i löptext */ h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.005em; /* Merriweather gillar inte negativ tracking, håll lätt */ font-weight: 700; } h1 { line-height: 1.12; } h2 { line-height: 1.12; } h4, h5, h6 { font-family: var(--font-primary); font-weight: 600; letter-spacing: 0; } /* Innehållslänkar: grön + diskret understrykning. :where() = noll specificitet, lätt att skriva över, krockar inte med knappar. */ :where(main p, main li, .faq__answer, .section__lead, .card__text) a { color: var(--bj-forest); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--transition-fast); } :where(main p, main li, .faq__answer, .section__lead, .card__text) a:hover { color: var(--bj-forest-deep); } /* --------------------------------------------------------------------------- 3. KNAPPAR Primär CTA = grön fyllning + varm vit text. Jordad hover (litet lyft). --------------------------------------------------------------------------- */ .btn { border-radius: var(--radius-md); font-weight: 600; letter-spacing: 0.01em; } .btn--primary { background-color: var(--bj-forest); color: var(--bj-paper-white); border-color: var(--bj-forest); } .btn--primary:hover { background-color: var(--bj-forest-deep); color: var(--bj-paper-white); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--secondary { background-color: transparent; border-color: var(--bj-forest); color: var(--bj-forest); } .btn--secondary:hover { background-color: var(--bj-forest); color: var(--bj-paper-white); } .btn--white { /* används i CTA-sektionen på grön bg */ background-color: var(--bj-paper-white); color: var(--bj-forest); } .btn--white:hover { background-color: var(--bj-wood); color: var(--bj-charcoal); transform: translateY(-1px); } /* --------------------------------------------------------------------------- 4. HEADER / NAV --------------------------------------------------------------------------- */ .nav__link::after { background: var(--bj-forest); } .nav__link--active { color: var(--bj-forest); } .mobile-nav a:hover { color: var(--bj-forest); } /* --------------------------------------------------------------------------- 5. HERO Varm pappersgradient. Bild med lugnare skugga och mindre radie. --------------------------------------------------------------------------- */ .hero { background: linear-gradient(180deg, var(--bj-paper) 0%, var(--bj-paper-white) 100%); } .hero__image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Hero-badge som tyst eyebrow-chip i stället för solitt fält */ .hero__badge { background: var(--bj-paper-white); color: var(--bj-forest); border: 1px solid var(--bj-border-warm); } /* --------------------------------------------------------------------------- 6. KORT Hårfin kantlinje i stället för tung skugga. Subtil hover. Ingen SaaS-gradient. --------------------------------------------------------------------------- */ .card { border-radius: var(--radius-lg); border: 1px solid var(--bj-border-warm); box-shadow: none; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; } .card__icon { background: var(--bj-paper); /* ersätter gradienten secondary->accent */ color: var(--bj-forest); border-radius: var(--radius-md); } .card__link { color: var(--bj-forest); } .card__link:hover { color: var(--bj-forest-deep); } /* --------------------------------------------------------------------------- 7. MÖRKA SEKTIONER (usp-bar, stats, cta, footer) Säkrar kontrast PÅ grönt: cream/vit text, inte trä. --------------------------------------------------------------------------- */ .usp-bar { background: var(--bj-forest-deep); } .usp-bar__icon { color: var(--bj-cream); } .stat__number { color: var(--bj-cream); } /* varmt ljus på grön (~7:1) */ .stat__label, .stat__context { color: var(--bj-paper-white); } /* CTA-sektionen: baselinen hårdkodar en marinblå gradient. Ersätt med skog. */ .section--cta { background: linear-gradient(135deg, var(--bj-forest) 0%, var(--bj-forest-deep) 100%); } /* Subtil djup-atmosfär i stället för platt fält (diskret, billig, ingen bild) */ .section--cta, .footer { position: relative; } .section--cta::before, .footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(234, 217, 190, 0.06), transparent 60%); pointer-events: none; } .section--cta > *, .footer > * { position: relative; } .footer__social a:hover { background: var(--bj-forest); } /* feature-bockar på ljus bakgrund */ .feature-list__item::before { color: var(--bj-forest); } /* --------------------------------------------------------------------------- 8. FAQ --------------------------------------------------------------------------- */ .faq__item[open] .faq__question { color: var(--bj-forest); } /* =========================================================================== 9. NYA WARM-CRAFT-KOMPONENTER (Mellby-lärdomarna) Additivt. Klassnamnen nedan kan CC använda direkt på produkt-/kategorisidor. =========================================================================== */ /* --- EYEBROW / KICKER (liten överrubrik) --- Markup:

Svensktillverkat sedan 1953

*/ .eyebrow { display: inline-block; font-family: var(--font-primary); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bj-wood-ink); /* mörkt trä = AA-säkert för liten text */ margin-bottom: var(--space-3); } /* --- PRIS SOM BLICKFÅNG --- Markup:

Från112 100 kr

*/ .price { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 4vw, var(--text-4xl)); line-height: 1; color: var(--bj-charcoal); } .price__prefix { display: block; font-family: var(--font-primary); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bj-stone); margin-bottom: var(--space-1); } .price__suffix { font-family: var(--font-primary); font-size: var(--text-base); font-weight: 500; color: var(--bj-stone); } /* --- SPEC-RAD (mått / yta / taktyp), Mellbys ikon-rad --- Markup: (Lägg gärna en liten inline-SVG-ikon före .spec__value för Mellby-känslan.) */ .spec-list { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); margin: var(--space-5) 0; padding: var(--space-4) 0; border-top: 1px solid var(--bj-border-warm); border-bottom: 1px solid var(--bj-border-warm); } .spec { display: flex; flex-direction: column; gap: 2px; } .spec__value { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); color: var(--bj-charcoal); } .spec__label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bj-stone); } /* --- PRODUKTKORT (tyst UI, fotoburet) --- Markup:
Enkelgarage GP 50 med pulpettak

Enkelgarage med pulpettak GP 50

31 m². Pulpettak. Kan förlängas per 120 cm.

Från136 400 kr

Se modell
*/ .product-card { display: flex; flex-direction: column; background: var(--bj-paper-white); border: 1px solid var(--bj-border-warm); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .product-card__media { display: block; aspect-ratio: 4 / 3; background: var(--bj-paper); overflow: hidden; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .product-card:hover .product-card__media img { transform: scale(1.03); } .product-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; } .product-card__title { font-family: var(--font-heading); font-size: var(--text-xl); line-height: 1.2; } .product-card__desc { color: var(--bj-stone); font-size: var(--text-sm); } .product-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: auto; padding-top: var(--space-2); } @media (prefers-reduced-motion: reduce) { .product-card:hover .product-card__media img { transform: none; } } /* --- TRUST-RAD (sedan 1953 / egen tillverkning), liten signatur --- Markup:

Egen tillverkning i Sölvesborg sedan 1953

*/ .trust-line { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-primary); font-weight: 600; font-size: var(--text-sm); color: var(--bj-stone); } .trust-line::before { content: ''; width: 24px; height: 1px; background: var(--bj-wood); }