/* ==========================================================
Mooya – gemensam stilmall
Länka in på varje sida i :
(sidor i roten)
(sidor i undermappar)
Byggstenar: .hero, .band (+ .green / .tall), .row (+ .flip),
.media, .text, .bullets, footer
========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600&display=swap");
/* Layout: one-page, full-bleed bands alternating Mooya blue / green; two-column image + text, text side alternates. Built from the PSD at 2880px (= 1440px @2x). */
:root {
--blue: #4574d6;
--green: #7cc06f;
--ink: #ffffff;
--ink-soft: rgba(255, 255, 255, .88);
--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
--fs-h: clamp(2.1rem, 4.86vw, 4.375rem); /* 140px @2x -> 70px */
--fs-intro: clamp(1.15rem, 2.57vw, 2.3125rem); /* 74px @2x -> 37px */
--fs-body: clamp(1.05rem, 2.08vw, 1.875rem); /* 60px @2x -> 30px */
--gutter: clamp(16px, 5.8vw, 83px);
color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--blue);
color: var(--ink);
font-family: var(--font);
font-weight: 500;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* ---------- Header ---------- */
.hero {
padding-inline: var(--gutter);
padding-block: clamp(44px, 6vw, 88px) clamp(56px, 7vw, 100px);
text-align: center;
display: grid;
justify-items: center;
}
.hero h1 { margin: 0; line-height: 0; }
.hero h1 img { width: min(711px, 88vw); }
.tagline {
margin: clamp(-14px, -1vw, -6px) 0 0;
font-size: var(--fs-intro);
font-weight: 600;
letter-spacing: .005em;
}
.intro {
margin: clamp(14px, 1.8vw, 26px) 0 0;
max-width: 50ch;
font-size: var(--fs-intro);
font-weight: 300;
line-height: 1.22;
text-wrap: balance;
}
/* ---------- Bands ---------- */
.band { padding-inline: var(--gutter); padding-block: clamp(48px, 4.4vw, 64px); }
.band.green { background: var(--green); }
.band.tall { padding-block: clamp(48px, 7vw, 100px); }
.row {
max-width: 1280px;
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(32px, 7vw, 110px);
min-height: clamp(0px, 62vw, 896px);
}
.row > * { min-width: 0; }
.row.flip .media { order: 2; }
.media { display: flex; justify-content: center; }
.media img { width: min(100%, 580px); }
.text h2 {
margin: 0 0 .35em;
font-size: var(--fs-h);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.01em;
text-wrap: balance;
}
.text p, .text li {
font-size: var(--fs-body);
line-height: 1.22;
color: var(--ink-soft);
}
.text p { margin: 0 0 .9em; max-width: 40ch; }
.text p:last-child { margin-bottom: 0; }
.text strong { color: var(--ink); font-weight: 600; }
.bullets { list-style: none; padding: 0; margin: 1.1em 0 0; display: grid; gap: .8em; }
.bullets li { padding-left: 1em; position: relative; }
.bullets li::before { content: "•"; position: absolute; left: 0; }
footer {
padding-inline: var(--gutter);
padding-block: clamp(40px, 6vw, 90px);
text-align: center;
font-size: .95rem;
font-weight: 500;
color: var(--ink-soft);
}
footer img { width: 140px; margin: 0 auto 12px; }
/* ---------- Mobile ---------- */
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
.row.flip .media { order: 0; }
.media img { width: min(100%, 380px); }
.text p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ==========================================================
Juridiska undersidor (integritetspolicy, användarvillkor)
-> blå
-> grön
========================================================== */
.legal {
--legal-ink: var(--ink);
--legal-soft: var(--ink-soft);
--legal-rule: rgba(255, 255, 255, .35);
padding-inline: var(--gutter);
line-height: 1.55;
}
/* Mörk text på grönt – vit text på den gröna ger för låg kontrast för brödtext */
.legal.is-green {
--legal-ink: #13381c;
--legal-soft: #1d4a27;
--legal-rule: rgba(19, 56, 28, .3);
background: var(--green);
color: var(--legal-ink);
}
.legal .page {
max-width: 44rem;
margin-inline: auto;
padding-block: clamp(44px, 6vw, 88px) clamp(40px, 5vw, 72px);
}
.legal .brand { display: block; width: min(360px, 70vw); margin: 0 auto clamp(36px, 5vw, 64px); }
.legal .brand:focus-visible { outline: 3px solid var(--legal-ink); outline-offset: 6px; border-radius: 8px; }
.legal h1 {
margin: 0;
font-size: clamp(2.1rem, 4.5vw, 3.25rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--legal-ink);
}
.legal .updated { margin: .5em 0 2em; font-size: .95rem; color: var(--legal-soft); }
.legal h2 {
margin: 2.2em 0 .5em;
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
font-weight: 600;
line-height: 1.25;
color: var(--legal-ink);
}
.legal main p, .legal main li { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--legal-soft); }
.legal main p { margin: 0 0 1em; }
.legal main ul { margin: 0 0 1em; padding-left: 1.2em; display: grid; gap: .6em; }
.legal strong { color: var(--legal-ink); font-weight: 600; }
.legal a { color: var(--legal-ink); text-decoration: underline; text-underline-offset: .18em; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal .footer {
margin-top: clamp(40px, 5vw, 64px);
padding-top: 20px;
border-top: 1px solid var(--legal-rule);
text-align: center;
font-size: .95rem;
color: var(--legal-soft);
}