/* SOWE — designtokens + gemensamma komponenter. Källa: designsystemet i design/_ds (colors.css) + HANDOFF_README. BAKGRUNDSREGEL (hård): bakgrunder är ett FOTO eller VITT — aldrig gul/svart platta. Gult är accent. Undantag (beslutat juli 2026): Resan-tidslinjen på Om oss ligger på #141414. */ :root { --sowe-yellow: #FAD232; --sowe-yellow-mid:#FCDF6B; --sowe-gold: #D4AF1A; --sowe-black: #141414; --sowe-grey-900: #3A3A3A; --sowe-grey-500: #6B6B6B; /* mörkad från #777 för AA-kontrast på vitt */ --sowe-line: #E7E5E0; --sowe-white: #FFFFFF; --sowe-surface-2: #F6F5F2; --img-scrim: linear-gradient(180deg, rgba(20,20,20,0) 35%, rgba(20,20,20,0.55) 100%); --img-scrim-strong: linear-gradient(180deg, rgba(20,20,20,0.10) 0%, rgba(20,20,20,0.60) 100%); --accent-hover: #F6C81E; --accent-press: var(--sowe-gold); --focus-ring: var(--sowe-gold); --font-sans: 'Montserrat', Arial, sans-serif; /* Kampanjhjulet */ --wheel-paid: #1F9D55; --wheel-school: #FBE49B; --wheel-holiday: #EFEDE8; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Ankarlänkar ska inte landa under den stickiga headern */ section[id], div[id] { scroll-margin-top: 84px; } body { margin: 0; font-family: var(--font-sans); color: var(--sowe-black); background: var(--sowe-white); } a { color: var(--sowe-black); text-decoration: none; } img { max-width: 100%; } button { font-family: inherit; } /* --- Språk: SV är standard, .lang-en på växlar --- :not(html) är kritiskt: site.js sätter lang-attributet även på (tillgänglighet) — utan undantaget släcker regeln hela sidan i EN-läge. */ [lang="en"]:not(html) { display: none; } .lang-en [lang="en"]:not(html) { display: revert; } .lang-en [lang="sv"] { display: none; } /* --- Layout --- */ .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* --- Knappar (Button ur _ds_bundle: mått, radier, hover/press) --- */ .btn { font-family: var(--font-sans); font-weight: 700; border-radius: 11px; cursor: pointer; outline: none; transition: background .15s ease, box-shadow .15s ease; display: inline-flex; align-items: center; justify-content: center; text-align: center; border: 1px solid transparent; } .btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--focus-ring); } .btn-sm { padding: 8px 16px; font-size: 13px; min-height: 36px; } .btn-md { padding: 11px 22px; font-size: 15px; min-height: 44px; } .btn-lg { padding: 14px 28px; font-size: 16px; min-height: 52px; } .btn-primary { background: var(--sowe-yellow); color: var(--sowe-black); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { background: var(--accent-press); } .btn-secondary { background: var(--sowe-white); color: var(--sowe-black); border-color: var(--sowe-line); } .btn-secondary:hover, .btn-secondary:active { background: var(--sowe-surface-2); } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* --- Livepuls (2,4 s ease-in-out — designens diskreta animation) --- */ @keyframes sowePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sowe-gold); display: inline-block; animation: sowePulse 2.4s ease-in-out infinite; } /* --- Kort och modaler (handoffens hover/skugg-spec) --- */ .card-hover { transition: box-shadow .2s ease; } .card-hover:hover { box-shadow: 0 6px 18px rgba(20, 20, 20, 0.07); } .modal-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(20, 20, 20, 0.5); display: none; align-items: center; justify-content: center; padding: 20px; } .modal-scrim.open { display: flex; } .modal-card { background: var(--sowe-white); border-radius: 16px; box-shadow: 0 14px 40px rgba(20, 20, 20, 0.28); max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; } /* --- Progressbar --- */ .progress-track { background: var(--sowe-surface-2); border-radius: 999px; height: 10px; overflow: hidden; } .progress-fill { background: var(--sowe-yellow); height: 100%; border-radius: 999px; transition: width 0.8s ease; } /* --- Typografi-hjälpare (README: kickers, avdelare) --- */ .kicker { font-size: 15px; font-weight: 700; color: var(--sowe-gold); letter-spacing: 0.06em; text-transform: uppercase; } .rule-gold { width: 56px; height: 3px; background: var(--sowe-gold); border: 0; margin: 0; } .link-underline { border-bottom: 2px solid var(--sowe-yellow); padding-bottom: 1px; } /* --- Tidslinjen (sowe-tidslinje): ljus + mörk (Resan — beslutat undantag) --- */ .tl-year { font-weight: 800; font-size: 17px; letter-spacing: -0.005em; line-height: 1.25; } .tl-when { font-weight: 600; font-size: 12.5px; margin-top: 2px; } .tl-marker { width: 14px; height: 14px; border-radius: 4px; background: #FAD232; flex-shrink: 0; margin-top: 2px; box-sizing: content-box; } .tl-line { width: 3px; flex: 1; border-radius: 2px; margin-top: 6px; } .tl-stat { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; line-height: 1.2; } .tl-statlabel { font-size: 15px; line-height: 1.4; } .tl-title { font-weight: 800; font-size: 17px; line-height: 1.35; } .tl-text { margin: 8px 0 0; font-size: 15px; line-height: 1.65; max-width: 560px; text-wrap: pretty; } .tl-link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14.5px; border-bottom: 2px solid #FAD232; padding-bottom: 2px; } .tl-ljus .tl-year { color: #B8930E; } /* Q5: mörkare gul för läsbarhet på ljus bakgrund */ .tl-ljus .tl-when { color: #777777; } .tl-ljus .tl-marker { border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px #E7E5E0; } .tl-ljus .tl-line { background: #E7E5E0; } .tl-ljus .tl-stat, .tl-ljus .tl-title, .tl-ljus .tl-link { color: #141414; } .tl-ljus .tl-statlabel, .tl-ljus .tl-text { color: #3A3A3A; } .tl-mork .tl-year { color: #FAD232; } .tl-mork .tl-when { color: rgba(255,255,255,0.55); } .tl-mork .tl-marker { border: 3px solid #141414; } .tl-mork .tl-line { background: rgba(255,255,255,0.22); } .tl-mork .tl-stat, .tl-mork .tl-title, .tl-mork .tl-link { color: #FFFFFF; } .tl-mork .tl-statlabel, .tl-mork .tl-text { color: rgba(255,255,255,0.78); } /* --- Responsivt: grid faller ihop under 900px --- */ @media (max-width: 900px) { .container { padding: 0 20px; } .grid-12 { display: block !important; } .grid-12 > * { margin-bottom: 18px; } .stack-mobile { display: block !important; } .stack-mobile > * { width: 100% !important; max-width: 100% !important; } /* Rutnätets gap försvinner när kolumnerna staplas: utan detta kläms CTA-knappar mot nästa bilds överkant (Kims skärmdumpar 2026-07-20). */ .stack-mobile > * + * { margin-top: 26px; } .hide-mobile { display: none !important; } /* Headern: fast 66px-höjd klämde loggan när nav-länkarna radbröts (Kims copy-svar 2026-07-16: "loggan är fel" på mobil). Auto-höjd, mindre logga, nav på egen rad som får scrolla i sidled. */ .site-header-inner { height: auto !important; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 6px; } .site-logo { height: 34px !important; } /* Kims TG-svar 2026-07-31: sidscrollen gömde menyn. Radbryt i stället. */ .site-nav { gap: 10px 16px !important; justify-content: flex-start !important; width: 100%; flex-wrap: wrap !important; } .site-nav a, .site-nav > span { flex-shrink: 0; } /* Ge en gåva och språkvalet först i raden så de aldrig hamnar utanför skärmen */ .site-nav > a:last-of-type { order: -2; } .site-nav > span { order: -1; } .site-nav .btn-md { min-width: 0 !important; min-height: 36px; padding: 8px 16px; font-size: 14px; } section[id], div[id] { scroll-margin-top: 116px; } /* Tidslinjen: fasta 96+44px-kolumner klämde texten till halva skärmen */ .tl-rad { grid-template-columns: 52px 26px 1fr !important; column-gap: 10px !important; } .tl-year { font-size: 15px; } /* Stora siffran radbryts mot 15px-etiketten på smal skärm: samma storlek, bara fetare, så blir det en lugn faktarad (Kims beslut 2026-07-26). */ .tl-stat { font-size: 16px; } /* Visas bara på mobil (t.ex. impact-remsan under hem-heron) */ .only-mobile { display: block !important; } /* Footern: 96px-loggan och fyra staplade kolumner blev stökigt på mobil (Kims skärmdump 2026-07-19). Mindre logga, länkkolumnerna sida vid sida. */ .site-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; } .site-footer-grid > div:first-child { grid-column: 1 / -1; } .site-footer-grid > div:last-child { grid-column: 1 / -1; } .site-footer-logo { height: 44px !important; } } .only-mobile { display: none; } .resan-huvud { position: sticky; top: 100px; } @media (max-width: 900px) { .resan-huvud { position: static; } }