/* FrezhUp landingspagina Ondergrens: Safari 16.4 / Chrome 111. Geen CSS-nesting, geen features zonder terugval. Beweging alleen via transform en opacity; alles staat in de eindstand zolang JS geen .js op zet. De ontwerptaal is die van de app zelf (globals.css van het product): hoogte komt van schaduw en niet van randen, status is een stip of een zacht vlak met de bijbehorende diepe tekstkleur, labels boven kerncijfers zijn klein en kapitaal, en balken groeien één keer uit hun basislijn waarna het cijfer erachteraan komt. */ /* ---------- Fonts ---------- */ @font-face { font-family: "Switzer"; src: url("fonts/Switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("fonts/Switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("fonts/Switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("fonts/Switzer-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("fonts/Switzer-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* ---------- Tokens (uit de app) ---------- */ :root { --merk: #b4552e; --merk-diep: #9a4526; --merk-zacht: #fbeee7; --merk-rand: #f0d6c7; --inkt: #191817; --inkt-zacht: #6e6a65; --inkt-vaag: #9c9791; --doek: #f7f6f4; --rand: #eceae6; --wit: #ffffff; /* status, met de zacht/diep-paren van het product */ --open: #9c9791; --stil: #c9c2b8; --bezig: #c98a16; --bezig-zacht: #fdf3e0; --bezig-diep: #7a5309; --schoon: #3b7bc4; --schoon-zacht: #eaf2fb; --schoon-diep: #1d4e86; --klaar: #3e8e68; --klaar-zacht: #eaf4ef; --klaar-diep: #1f5a41; --radius-kaart: 1rem; --radius-knop: 0.625rem; --shadow-kaart: 0 1px 2px rgba(25,24,23,.04), 0 4px 12px rgba(25,24,23,.05); --shadow-kaart-op: 0 1px 2px rgba(25,24,23,.05), 0 10px 24px rgba(25,24,23,.09); --shadow-zweef: 0 1px 2px rgba(25,24,23,.05), 0 24px 48px -24px rgba(25,24,23,.25); --ease-uit: cubic-bezier(0.22, 1, 0.36, 1); --maat: 72rem; --maat-smal: 44rem; } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; /* De gekantelde kaarten in de hero steken buiten de tekstkolom. Clip op het document houdt de horizontale scrollbalk weg zonder dat een sectie zijn eigen schaduw afknipt; overflow op de sectie zelf deed dat wel. */ overflow-x: clip; font-family: "Switzer", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: 1.65; color: var(--inkt); background: var(--doek); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, dl, dd, ul, figure { margin: 0; } ul { padding: 0; list-style: none; } a { color: var(--merk-diep); } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } ::selection { background: var(--merk-rand); color: var(--inkt); } :focus-visible { outline: 2px solid var(--merk-diep); outline-offset: 2px; } [hidden] { display: none !important; } .cijfers { font-variant-numeric: tabular-nums; } /* interactieve hulpstukken bestaan alleen als het script draait */ html:not(.js) .js-alleen { display: none; } .wikkel { max-width: var(--maat); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .wikkel--smal { max-width: var(--maat-smal); margin-inline: auto; } /* Alleen waar de inleiding op dezelfde linkerlijn moet staan als de brede blokken eronder (het mechanisme en de vloer). Gecentreerd sprong hij daar 184px naar binnen en leek hij los te staan van de punten waar hij bij hoort. Overal elders blijft de smalle kolom gecentreerd. */ .wikkel--links { margin-inline: 0; } /* ---------- Iconen ---------- */ .icoon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.12em; } .icoon--groot { width: 1.55rem; height: 1.55rem; } .icoon--chip { width: 0.8em; height: 0.8em; margin-right: 0.35em; } .icoon--vink { width: 2.1rem; height: 2.1rem; stroke-width: 2.6; } /* ---------- Koppen ---------- */ h1 { font-size: clamp(2.15rem, 1.55rem + 2.6vw, 3.35rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; /* genegeerd onder Chrome 114, breekt niets */ } h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.45rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.022em; margin-bottom: 1.25rem; max-width: 26ch; text-wrap: balance; } h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.35rem; } .kicker { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--merk-diep); margin-bottom: 1rem; } .kicker::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--merk); } /* ---------- Header ---------- */ .kop { background: var(--merk-zacht); } .kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; } /* padding-block, niet alleen voor de lucht: zonder dit is het tikdoel 32px hoog en dat is onder de ondergrens van 44px op een telefoon. */ .logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; padding-block: 0.4rem; } .logo-merk { display: block; flex: none; } .logo-woord { font-size: 1.5rem; /* 24px: telt als grote tekst, zodat de merkkleur het contrastcriterium haalt */ font-weight: 600; letter-spacing: -0.035em; color: #2a2622; line-height: 1; } .logo-woord--klein { font-size: 1.0625rem; } .logo-up { color: #b9531f; } .kop-acties { display: flex; align-items: center; gap: 0.35rem; } /* Inloggen is voor wie al klant is, dus geen knop: dat zou concurreren met de ene CTA. Een tekstlink met genoeg tikruimte eromheen. */ .kop-login { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--inkt-zacht); text-decoration: none; white-space: nowrap; border-radius: var(--radius-knop); transition: color 0.16s var(--ease-uit); } .kop-login:hover { color: var(--merk-diep); } .kop-cta { font-size: 0.9375rem; font-weight: 600; color: var(--merk-diep); text-decoration: none; border: 1px solid var(--merk-rand); background: rgba(255, 255, 255, 0.6); border-radius: var(--radius-knop); padding: 0.55em 1em; white-space: nowrap; transition: background-color 0.16s var(--ease-uit); } .kop-cta:hover { background: var(--wit); } /* Onder de 30em passen het woordmerk, inloggen en de knop niet samen. De verkoopknop gaat weg: die staat in hetzelfde eerste scherm nog een keer en daarna neemt de meelopende balk het over. Inloggen blijft juist wel staan, want een housekeeper met een telefoon komt hier om dáár te zijn. */ @media (max-width: 29.999em) { .kop-cta { display: none; } } /* ---------- Blok 1: hero ---------- */ .held { background: linear-gradient(180deg, var(--merk-zacht) 0%, var(--doek) 82%); } .held-raster { display: grid; gap: clamp(2.5rem, 4.5vw, 3.75rem); align-items: center; padding-block: clamp(2.75rem, 6.5vw, 5.5rem) clamp(3.5rem, 8vw, 6.5rem); } /* Zelfde breedte als de navigatie en de rest van de pagina: de hero gebruikt de gewone .wikkel-maat. Alleen de kolomverdeling is wat gunstiger voor de kaart, want het cijfer daarop is het argument van de pagina. */ @media (min-width: 64em) { .held-raster { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); } } .wenkbrauw { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--merk-diep); background: rgba(255, 255, 255, 0.65); border: 1px solid var(--merk-rand); border-radius: 999px; padding: 0.4em 0.95em; margin-bottom: 1.5rem; } /* Op een telefoon past deze regel niet op een lijn. Een pil van 999px wordt dan een uitgerekte capsule met enorme ronde uiteinden; met een gewone hoekradius leest hij als een label. */ @media (max-width: 36em) { .wenkbrauw { border-radius: 0.75rem; padding: 0.5em 0.85em; } } .held-vraag { color: var(--merk); } .held-sub { font-size: 1.1875rem; line-height: 1.6; color: var(--inkt-zacht); max-width: 34em; margin-top: 1.5rem; } .held-actie { margin-top: 2.25rem; } .knop { display: inline-flex; align-items: center; font-size: 1.0625rem; font-weight: 600; color: var(--wit); background: var(--merk); text-decoration: none; border-radius: var(--radius-knop); padding: 0.9em 1.6em; box-shadow: 0 1px 2px rgba(25,24,23,.12); transition: transform 0.16s var(--ease-uit), background-color 0.16s var(--ease-uit), box-shadow 0.16s var(--ease-uit); } .knop .icoon { width: 0.95em; height: 0.95em; } @media (hover: hover) { .knop:hover { background: var(--merk-diep); transform: translateY(-1px); box-shadow: var(--shadow-kaart-op); } } .knop:active { transform: translateY(0) scale(0.99); } .knop-noot { font-size: 0.9375rem; color: var(--inkt-zacht); margin-top: 0.8rem; } /* De kostenkaart, met twee bonnetjes eronder: er is niet één kamer gemeten, dit is een stapel. */ .held-visueel { position: relative; } .held-visueel::before { content: ""; position: absolute; inset: -2.5rem -1.5rem; background: radial-gradient(32rem 24rem at 60% 40%, rgba(180, 85, 46, 0.12), transparent 68%); pointer-events: none; } /* Hier stonden twee gekantelde kaarten achter de echte, als een stapeltje bonnetjes. Bij deze kaartgrootte leverden ze geen stapel op maar een harde rand onder de kaart, die als een afgeknipte schaduw las. Weg dus: de kaart draagt zijn eigen schaduw, en die loopt wel vloeiend uit. */ .kaartstapel { position: relative; max-width: 31rem; margin-inline: auto; } @media (max-width: 63.999em) { .kaartstapel { max-width: 24rem; } .held-visueel::before { inset: -1.25rem -0.5rem; } } .kostenkaart { position: relative; z-index: 1; background: var(--wit); border-radius: 1.25rem; /* Vijf lagen die elk twee keer zo ver reiken en half zo hard zijn. Eén enkele grote schaduw geeft een zichtbare rand waar hij ophoudt; deze dooft uit. */ box-shadow: 0 0 0 1px rgba(25, 24, 23, 0.045), 0 1px 2px rgba(25, 24, 23, 0.03), 0 4px 8px -2px rgba(25, 24, 23, 0.04), 0 12px 24px -8px rgba(25, 24, 23, 0.06), 0 32px 56px -20px rgba(25, 24, 23, 0.1), 0 64px 96px -40px rgba(25, 24, 23, 0.12); padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem) clamp(1.6rem, 1.1rem + 1.4vw, 2.15rem) clamp(1.35rem, 1rem + 1.2vw, 1.85rem); } .kaart-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .kaart-kamer { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; } /* Het scheidingsteken komt uit CSS en niet uit de tekst. Zo kan het weg zodra de ondertitel op een smal scherm toch op een eigen regel belandt; anders staat daar een losse punt aan het begin van de regel. */ .kaart-type { font-size: 0.9375rem; font-weight: 400; color: var(--inkt-zacht); white-space: nowrap; } .kaart-type::before { content: "\00b7"; padding-inline: 0.45em 0.3em; } @media (max-width: 34em) { .kaart-type { display: block; white-space: normal; } .kaart-type::before { content: none; } } .regel { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.62rem; border-top: 1px solid var(--rand); } .regel dt { font-size: 0.9375rem; color: var(--inkt-zacht); } .regel dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .tag-gemeten, .tag-uitschieter { display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 0.2em 0.65em; vertical-align: 0.1em; } .tag-gemeten { color: var(--klaar-diep); background: var(--klaar-zacht); margin-left: 0.35em; } .tag-uitschieter { color: var(--bezig-diep); background: var(--bezig-zacht); margin-left: 0.45em; } .kaart-som { border-top: 2px solid var(--inkt); margin-top: 0.35rem; padding-top: 0.95rem; } .som-label, .applabel { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkt-zacht); } .som-bedrag { line-height: 1.1; margin-top: 0.2rem; font-variant-numeric: tabular-nums; } .euroteken { font-size: 1.5rem; font-weight: 600; color: var(--inkt-zacht); } .som-getal { font-size: clamp(2.7rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; } .kaart-voetnoot { font-size: 0.875rem; color: var(--inkt-zacht); border-top: 1px dashed var(--rand); margin-top: 1rem; padding-top: 0.85rem; } .kaart-voetnoot strong { color: var(--bezig-diep); font-weight: 700; font-variant-numeric: tabular-nums; } .visueel-noot { position: relative; font-size: 0.8125rem; color: var(--inkt-zacht); text-align: center; margin-top: 1.4rem; } /* ---------- De rekenhulp (blok 2) ---------- De lezer rekent zijn eigen jaarbedrag uit. Zonder JS staan de velden uit en blijft het voorbeeld van 40 kamers staan. */ .rekenhulp { margin-top: 2.75rem; } .reken-intro { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1.1rem; } .reken-velden { display: grid; gap: 0.9rem; } @media (min-width: 34em) { .reken-velden { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } /* min-width: 0 is hier niet cosmetisch. Een input heeft een intrinsieke minimumbreedte van ongeveer twintig tekens, en een rasterkolom van 1fr mag standaard niet kleiner worden dan de inhoud. Zonder deze regel duwen de drie velden samen de kaart uit elkaar. */ .reken-veld { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .reken-veld label { font-size: 0.8125rem; font-weight: 600; color: var(--inkt-zacht); } .reken-invoer { display: flex; align-items: center; gap: 0.15rem; background: var(--doek); border-radius: var(--radius-knop); box-shadow: inset 0 0 0 1px var(--rand); padding-inline: 0.75rem; transition: box-shadow 0.14s var(--ease-uit); } .reken-invoer:focus-within { box-shadow: inset 0 0 0 2px var(--merk); background: var(--wit); } .reken-teken { font-size: 1rem; font-weight: 600; color: var(--inkt-zacht); } .reken-invoer input { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--inkt); background: none; border: 0; padding: 0.6rem 0 0.65rem; min-height: 2.75rem; } .reken-invoer input:focus { outline: none; } /* zonder JS zijn de velden uit: dan is het een uitgewerkt voorbeeld */ .reken-invoer input:disabled { color: var(--inkt-zacht); -webkit-text-fill-color: var(--inkt-zacht); opacity: 1; } .reken-uitkomst { border-top: 2px solid var(--inkt); margin-top: 1.5rem; padding-top: 1rem; } .reken-bedrag { line-height: 1.1; margin-top: 0.2rem; font-variant-numeric: tabular-nums; } .reken-getal { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.025em; } .reken-onder { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.65rem; max-width: 34rem; } .reken-marge { font-size: 0.9688rem; line-height: 1.6; color: var(--inkt-zacht); background: var(--bezig-zacht); border-radius: var(--radius-knop); padding: 0.9rem 1.1rem; margin-top: 1.25rem; } .reken-marge strong { color: var(--bezig-diep); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Niet --inkt-vaag: dat haalt op wit de contrastdrempel niet, en deze regel moet gelezen worden. Hij verantwoordt de hele som. */ .reken-aannames { font-size: 0.8125rem; line-height: 1.55; color: var(--inkt-zacht); margin-top: 0.9rem; } /* De vraag hoort hier, direct onder zijn eigen bedrag. Dat is het moment met de hoogste urgentie en de laagste weerstand op de hele pagina. */ .reken-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; border-top: 1px solid var(--rand); margin-top: 1.25rem; padding-top: 1.25rem; } .reken-cta-tekst { flex: 1 1 16rem; min-width: 0; font-size: 0.9688rem; font-weight: 600; line-height: 1.5; } .knop--klein { font-size: 0.9375rem; padding: 0.7em 1.2em; } /* ---------- Banden ---------- */ .band { padding-block: clamp(4rem, 9vw, 6.75rem); } .band--wit { background: var(--wit); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); } /* ---------- Proza ---------- */ .proza p { margin-bottom: 1.05em; max-width: 40rem; } .proza p:last-child { margin-bottom: 0; } .proza .kicker { margin-bottom: 1rem; } .kern { font-weight: 600; font-size: 1.15em; letter-spacing: -0.01em; } /* ---------- App-kaarten (de nagebouwde schermen) ---------- */ .appkaart { background: var(--wit); border-radius: var(--radius-kaart); box-shadow: 0 0 0 1px var(--rand), var(--shadow-kaart-op); padding: 1.35rem 1.5rem; } .appkaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .appkaart-periode { font-size: 0.8125rem; color: var(--inkt-zacht); } .appkaart-noot { font-size: 0.8125rem; color: var(--inkt-zacht); } .kerncijfer { font-size: clamp(1.9rem, 3vw, 2.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; padding-block: 0.15rem 0.1rem; } /* ---------- Chips en stippen (statustaal van het product) ---------- */ .chip { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 999px; padding: 0.32em 0.8em; white-space: nowrap; } .chip--open { background: var(--doek); color: var(--inkt-zacht); box-shadow: inset 0 0 0 1px var(--rand); } .chip--klaar { background: var(--klaar-zacht); color: var(--klaar-diep); } .stip { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; margin-top: 0.5em; } .stip--klaar { background: var(--klaar); } .stip--open { background: var(--stil); } /* ---------- Blok 3: de drie pogingen ---------- */ .blok-kop { margin-bottom: 2rem; } .pogingen { display: grid; gap: 1.25rem; } @media (min-width: 56em) { .pogingen { grid-template-columns: repeat(3, 1fr); } } .poging { background: var(--wit); border-radius: var(--radius-kaart); box-shadow: 0 0 0 1px var(--rand), var(--shadow-kaart); padding: 1.5rem 1.6rem; } .poging-icoon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--doek); color: var(--inkt-zacht); margin-bottom: 0.9rem; } .poging p { font-size: 0.9375rem; line-height: 1.6; color: var(--inkt-zacht); } .poging--accent { box-shadow: 0 0 0 1px var(--merk-rand), var(--shadow-kaart); background: linear-gradient(180deg, var(--wit) 55%, var(--merk-zacht) 170%); } .poging--accent .poging-icoon { background: var(--merk-zacht); color: var(--merk-diep); } .poging--accent strong { color: var(--merk-diep); } .uitsmijter { font-size: clamp(1.3rem, 1.05rem + 1.3vw, 1.75rem); font-weight: 700; letter-spacing: -0.018em; line-height: 1.3; max-width: 32ch; margin-top: 2.75rem; } .uitsmijter-accent { color: var(--merk-diep); } .uitsmijter-na { font-size: 1.0625rem; color: var(--inkt-zacht); max-width: 40rem; margin-top: 0.9rem; } /* ---------- Blok 4: mechanisme ---------- */ .punten { display: grid; gap: 1.75rem 2rem; margin-top: 2.25rem; } @media (min-width: 56em) { .punten--drie { grid-template-columns: repeat(3, 1fr); } } .punten--drie { counter-reset: punt; } .punten--drie .punt { counter-increment: punt; } .punten--drie .punt::before { content: counter(punt); display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; background: var(--merk-zacht); color: var(--merk-diep); font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.7rem; } .punt p { font-size: 0.9688rem; color: var(--inkt-zacht); } .formule { margin-top: 2.75rem; background: var(--merk-zacht); border: 1px solid var(--merk-rand); border-radius: var(--radius-kaart); padding: 1.15rem 1.5rem; font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; max-width: fit-content; } .formule-teken { color: var(--merk-diep); font-weight: 700; padding-inline: 0.1em; } .formule strong { font-weight: 700; } .mech-uit { display: grid; gap: 2.5rem; align-items: center; margin-top: 3rem; } @media (min-width: 56em) { .mech-uit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; } } .mech-uit-tekst { font-size: 1.125rem; line-height: 1.6; max-width: 40rem; } /* De balkgrafiek: naam en bedrag op één regel, de rail eronder over de volle breedte, precies zoals in het product. */ .staaflijst { display: flex; flex-direction: column; gap: 0.95rem; } .staaf-rij { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .staaf-naam { font-size: 0.875rem; font-weight: 500; } .staaf-bedrag { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .rail { display: block; height: 0.625rem; border-radius: 999px; background: var(--doek); overflow: hidden; margin-top: 0.4rem; } .vulling { display: block; height: 100%; width: var(--deel); border-radius: 999px; background: var(--merk); transform-origin: left; } .appkaart-voet { border-top: 1px solid var(--rand); margin-top: 1.25rem; padding-top: 1rem; } /* ---------- Blok 5: weekstrook + dagbalk ---------- */ .weekstrook { max-width: 46rem; margin: 3rem auto 0; } .strook-vlak { position: relative; background: var(--wit); border-radius: var(--radius-kaart); box-shadow: 0 0 0 1px var(--rand), var(--shadow-kaart); padding: 1.15rem clamp(0.75rem, 2.5vw, 1.5rem) 0.9rem; } .strook-titel { margin-bottom: 1.6rem; } .strook-dagen { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(0.4rem, 2vw, 1rem); align-items: end; } .dag { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.45rem; min-width: 0; } /* De bedragen staan voor de budgetlijn en krijgen de kaartkleur als achtergrond, zodat de stippellijn er niet dwars doorheen loopt bij een dag die er vlak onder zit. Zonder dit staat "348" doorgestreept. */ .euro { position: relative; z-index: 1; background: var(--wit); padding-inline: 0.2rem; font-size: clamp(0.72rem, 1.8vw, 0.9375rem); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .balk { width: 100%; max-width: 3.25rem; height: var(--h); border-radius: 0.45rem 0.45rem 0 0; background: linear-gradient(180deg, #c96a41 0%, var(--merk-diep) 100%); transform-origin: bottom; } .dag--over .balk { background: linear-gradient(180deg, #dda03a 0%, var(--bezig) 100%); } .dag--over .euro { color: var(--bezig-diep); } /* vóór het uitgroeien nog geen oranje bedrag (JS haalt de klasse er na afloop af) */ .weekstrook.nog-niet .dag--over .euro { color: var(--inkt); } .dagnaam { font-size: 0.78rem; font-weight: 500; color: var(--inkt-zacht); } .budgetlijn { position: absolute; z-index: 0; left: 0; right: 0; /* 144px balkhoogte (= €380) + dagnaam-regel + kolomgap */ bottom: calc(1.3rem + 0.45rem + 144px); border-top: 2px dashed #d9c4b3; pointer-events: none; } /* Links en niet rechts: rechts staan de hoogste dagen, en daar botst het label op elke breedte met de balk of met het bedrag erboven. Boven de laagste dagen is altijd ruimte. */ .budgetlijn-label { position: absolute; left: 0.25rem; top: -1.75em; font-size: 0.72rem; font-weight: 600; color: var(--inkt-zacht); background: var(--wit); box-shadow: inset 0 0 0 1px var(--rand); border-radius: 999px; padding: 0.18em 0.6em; white-space: nowrap; } .strook-noot { font-size: 0.875rem; color: var(--inkt-zacht); text-align: center; margin-top: 0.75rem; } /* De dagbalk van zaterdag: drie cijfers naast elkaar (werk, mensen, geld), in die volgorde, zoals op het echte planscherm. */ .dagbalk { max-width: 46rem; margin: 2rem auto 0; } .dagbalk-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .dagbalk-datum { font-size: 1.0625rem; font-weight: 700; } .dagbalk-onder { font-size: 0.875rem; color: var(--inkt-zacht); padding-top: 0.1rem; } .dagbalk-cijfers { display: grid; gap: 1.5rem; } @media (min-width: 40em) { .dagbalk-cijfers { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } .stepper { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.15rem 0.1rem; } .stepper-knop { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-knop); background: var(--doek); color: var(--inkt-zacht); box-shadow: inset 0 0 0 1px var(--rand); transition: transform 0.12s var(--ease-uit), background-color 0.12s var(--ease-uit); } .stepper-knop:hover { background: var(--merk-zacht); color: var(--merk-diep); } .stepper-knop:active { transform: scale(0.92); } .stepper-knop:disabled { opacity: 0.35; cursor: not-allowed; background: var(--doek); color: var(--inkt-zacht); } .stepper-getal { min-width: 2.1rem; text-align: center; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .stand { display: flex; align-items: center; font-weight: 600; } .stand--past { color: var(--klaar-diep); } .stand--tekort { color: var(--bezig-diep); } .splitsing { padding-top: 0.15rem; } /* de twee standen wisselen met de klasse .is-vier op de kaart */ .dagbalk .stand--tekort { display: none; } .dagbalk.is-vier .stand--past { display: none; } .dagbalk.is-vier .stand--tekort { display: flex; } .dagbalk.is-vier .dagkosten { color: var(--bezig-diep); } /* CTA halverwege, na de dagbalk */ .tussen-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; text-align: center; max-width: 46rem; margin: 2.5rem auto 0; } .tussen-cta-tekst { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; } /* ---------- Blok 6: de vloer ---------- */ .vloer-raster { display: grid; gap: 3rem; margin-top: 2.5rem; align-items: start; } @media (min-width: 56em) { .vloer-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } } .vloer-demo { max-width: 19rem; margin-inline: auto; width: 100%; } .telefoon { background: var(--wit); border-radius: 2.4rem; padding: 0.55rem; box-shadow: 0 0 0 1px var(--rand), var(--shadow-zweef); } .telefoon-scherm { background: var(--doek); border-radius: 1.9rem; min-height: 26.5rem; padding: 1.15rem 1rem; display: flex; flex-direction: column; overflow: hidden; } .fase { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* fase 0: de lijst */ .tel-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.9375rem; font-weight: 700; padding: 0.15rem 0.25rem 0.85rem; } .tel-kop span { font-size: 0.78rem; font-weight: 500; color: var(--inkt-zacht); } .tel-rij { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: var(--wit); border-radius: 0.8rem; box-shadow: 0 0 0 1px var(--rand), var(--shadow-kaart); padding: 0.8rem 0.9rem; margin-bottom: 0.6rem; min-height: 3.5rem; } .tel-rij--klaar { background: var(--klaar-zacht); box-shadow: 0 0 0 1px rgba(62,142,104,.25); } .tel-rij--klaar .tel-nr { color: var(--klaar-diep); } .tel-rij--knop { transition: transform 0.12s var(--ease-uit), box-shadow 0.12s var(--ease-uit); } .tel-rij--knop:hover { box-shadow: 0 0 0 2px var(--merk), var(--shadow-kaart-op); } .tel-rij--knop:active { transform: scale(0.985); } .tel-nr { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; min-width: 2.9rem; } .tel-soort { flex: 1; font-size: 0.84rem; color: var(--inkt-zacht); } .tel-duur { font-size: 0.9rem; font-weight: 600; color: var(--klaar-diep); font-variant-numeric: tabular-nums; } .tel-pijl { font-size: 1.3rem; color: var(--open); line-height: 1; } .tel-hint { margin-top: auto; padding-top: 0.8rem; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--merk-diep); } /* fase 1 en 2: kamer en timer */ .fase--start, .fase--bezig, .fase--klaar { align-items: center; justify-content: center; text-align: center; gap: 0.35rem; } .tel-kamer { font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .tel-onder { font-size: 0.9375rem; color: var(--inkt-zacht); } .startknop { width: 10.5rem; height: 10.5rem; border-radius: 50%; background: var(--merk); color: var(--wit); font-size: 1.7rem; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 14px 30px -12px rgba(180, 85, 46, 0.55); margin-block: 1.6rem 1rem; transition: transform 0.12s var(--ease-uit), background-color 0.12s var(--ease-uit); } .startknop:hover { background: var(--merk-diep); } .startknop:active { transform: scale(0.95); } .tel-timer { font-size: 2.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; padding-top: 0.9rem; } .afrondknop { width: 100%; min-height: 3.4rem; border-radius: var(--radius-knop); background: var(--klaar); color: var(--wit); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 10px 22px -10px rgba(62, 142, 104, 0.5); margin-top: 1.6rem; transition: transform 0.12s var(--ease-uit), filter 0.12s var(--ease-uit); } .afrondknop:hover { filter: brightness(0.94); } .afrondknop:active { transform: scale(0.98); } /* fase 3: klaar */ .vinkrond { display: inline-flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--klaar-zacht); color: var(--klaar); margin-bottom: 0.6rem; } .tel-klaar { font-size: 1.25rem; font-weight: 700; } .tel-mews { font-size: 0.84rem; font-weight: 600; color: var(--klaar-diep); background: var(--klaar-zacht); border-radius: 999px; padding: 0.3em 0.9em; margin-top: 0.5rem; } .tel-opnieuw { margin-top: 1.1rem; font-size: 0.8125rem; font-weight: 600; color: var(--merk-diep); text-decoration: underline; text-underline-offset: 3px; min-height: 2.75rem; padding-inline: 0.75rem; } .tel-tikken { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 1rem; } .tik { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--merk); background: transparent; } .tik.is-aan { background: var(--merk); } .tik-label { font-size: 0.8125rem; font-weight: 500; color: var(--inkt-zacht); margin-left: 0.45rem; } /* de punten rechts */ .punt--icoon { display: flex; gap: 1rem; align-items: flex-start; } .punt-icoon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 0.75rem; background: var(--merk-zacht); color: var(--merk-diep); } .vloer-rechts .punten { margin-top: 0; } @media (min-width: 72em) { .vloer-rechts .punten { grid-template-columns: 1fr 1fr; } } .vloer-slot { margin-top: 1.9rem; max-width: 40rem; } /* het blok voor de meelezer: de housekeeping manager */ .meelezer { background: var(--doek); border-radius: 1.25rem; padding: clamp(1.6rem, 4vw, 2.5rem); margin-top: 3.5rem; } .meelezer-kop { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 1rem; } .meelezer p { font-size: 0.9688rem; color: var(--inkt-zacht); } .meelezer p:first-of-type { color: var(--inkt); } /* ---------- Blok 7: koppeling ---------- */ .koppel-raster { display: grid; gap: 2.75rem; align-items: center; } /* Zelfde valkuil als bij de rekenhulp: de koppelkaart bevat regels met white-space: nowrap, en een 1fr-kolom mag niet kleiner worden dan zijn inhoud. Zonder dit duwt de kaart op een smal scherm de hele sectie uit het venster. */ .koppel-raster > * { min-width: 0; } .koppelrij-rechts { white-space: normal; } @media (min-width: 30em) { .koppelrij-rechts { white-space: nowrap; } } @media (min-width: 60em) { .koppel-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; } } .koppellijst { display: flex; flex-direction: column; } .koppelrij { display: flex; align-items: flex-start; gap: 0.75rem; padding-block: 0.7rem; border-top: 1px solid var(--rand); font-size: 0.9375rem; line-height: 1.5; } .koppelrij:first-child { border-top: 0; } .koppelrij-rechts { margin-left: auto; white-space: nowrap; font-size: 0.8125rem; color: var(--inkt-zacht); padding-top: 0.1em; } .koppelrij-zacht { color: var(--inkt-zacht); } .koppel-voet { border-top: 1px solid var(--rand); margin-top: 0.25rem; padding-top: 0.85rem; } .privacynoot { background: var(--wit); border-left: 3px solid var(--merk); border-radius: 0.5rem var(--radius-kaart) var(--radius-kaart) 0.5rem; box-shadow: 0 0 0 1px var(--rand), var(--shadow-kaart); padding: 1.1rem 1.35rem; margin-top: 1.75rem; } .privacynoot p { font-size: 0.9688rem; color: var(--inkt-zacht); max-width: none; } .privacynoot strong { color: var(--inkt); } /* ---------- Blok 8: de maker ---------- */ .maker-raster { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 56em) { .maker-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } } /* De foto is hier geen sierlijk portretje maar het bewijs onder dit blok: bij nul klanten is de maker het enige controleerbare anker dat er is. Dus groot. */ .maker-portret { max-width: 26rem; margin-inline: auto; width: 100%; } .maker-portret img { width: 100%; height: auto; border-radius: 1.25rem; box-shadow: var(--shadow-zweef); } .maker-portret figcaption { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; margin-top: 1rem; } .maker-portret figcaption span { display: block; font-weight: 400; color: var(--inkt-zacht); } @media (min-width: 56em) { .maker-portret figcaption { text-align: left; } } /* ---------- Blok 9: eerlijk ---------- */ .eerlijk { background: var(--merk-zacht); border: 1px solid var(--merk-rand); border-radius: 1.25rem; padding: clamp(1.9rem, 5vw, 3.25rem); max-width: 48rem; margin-inline: auto; } /* ---------- Blok 10: slot ---------- */ .band--slot { background: radial-gradient(60rem 30rem at 50% 0%, rgba(180, 85, 46, 0.18), transparent 62%), var(--inkt); color: #dcd9d4; } .band--slot h2 { color: var(--doek); } .kicker--slot { color: #e8a177; } .kicker--slot::before { background: #e8a177; } .slot-actie { margin-top: 2.25rem; } .band--slot .knop { box-shadow: 0 10px 28px -10px rgba(180, 85, 46, 0.55); } .knop-noot--slot { color: #b3aea7; max-width: 32rem; } .ps { border-top: 1px solid #33312f; margin-top: 2.75rem; padding-top: 1.9rem; } .ps p { font-size: 0.9375rem; line-height: 1.65; color: #b3aea7; margin-bottom: 1em; } .ps p:last-child { margin-bottom: 0; } .ps strong { color: #dcd9d4; } #plan { scroll-margin-top: 1.5rem; } /* ---------- Meelopende balk op mobiel ---------- De pagina is op een telefoon achttien schermen lang. Zonder deze balk zit er tussen de hero en het slot geen enkele knop. Alleen onder 48em: op desktop is de tussen-CTA genoeg en zou hij alleen ruimte innemen. */ .mobielbalk { display: none; } @media (max-width: 47.999em) { .mobielbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: block; background: rgba(255, 255, 255, 0.92); box-shadow: 0 -1px 0 var(--rand), 0 -8px 24px -12px rgba(25, 24, 23, 0.18); padding: 0.7rem clamp(1rem, 4vw, 1.5rem); padding-bottom: calc(0.7rem + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform 0.24s var(--ease-uit); } /* Terugval voor browsers zonder backdrop-filter: de achtergrond hierboven is al bijna dekkend, dus de tekst blijft leesbaar. */ @supports (backdrop-filter: blur(8px)) { .mobielbalk { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); } } .mobielbalk.is-zichtbaar { transform: translateY(0); } .mobielbalk-binnen { display: flex; align-items: center; gap: 0.75rem; max-width: var(--maat); margin-inline: auto; } .mobielbalk-tekst { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--inkt-zacht); } .mobielbalk .knop { flex: none; white-space: nowrap; } /* Ruimte onder de voet zodat de balk nooit over de laatste regel valt. */ .voet { padding-bottom: 6rem; } } @media (max-width: 47.999em) and (prefers-reduced-motion: reduce) { .mobielbalk { transform: none; display: none; } .mobielbalk.is-zichtbaar { display: block; } } /* ---------- Footer ---------- */ .voet { padding-block: 2.5rem; } .voet-rij { display: flex; align-items: center; gap: 0.75rem 2rem; flex-wrap: wrap; } .voet-merk { display: inline-flex; align-items: center; gap: 0.45rem; } .voet-regel { font-size: 0.875rem; color: var(--inkt-zacht); } .voet-regel a { color: var(--inkt-zacht); display: inline-flex; align-items: center; min-height: 44px; /* tikdoel op een telefoon */ } .voet-regel a:hover { color: var(--merk-diep); } /* ---------- Animatie-beginstanden (alleen met JS aan) ---------- Zonder .js op staat alles hieronder gewoon in de eindstand. */ .js [data-anim="kaart"] .regel, .js [data-anim="kaart"] .kaart-som, .js [data-anim="kaart"] .kaart-voetnoot { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-uit), transform 0.5s var(--ease-uit); } .js [data-anim="kaart"] .regel:nth-child(2) { transition-delay: 90ms; } .js [data-anim="kaart"] .regel:nth-child(3) { transition-delay: 180ms; } .js [data-anim="kaart"] .kaart-som { transition-delay: 300ms; } .js [data-anim="kaart"] .kaart-voetnoot { transition-delay: 650ms; } .js [data-anim="kaart"].is-af .regel, .js [data-anim="kaart"].is-af .kaart-som, .js [data-anim="kaart"].is-af .kaart-voetnoot { opacity: 1; transform: none; } .js [data-anim="week"] .balk { transform: scaleY(0); transition: transform 0.65s var(--ease-uit); transition-delay: var(--vertraag, 0ms); } .js [data-anim="week"].is-af .balk { transform: scaleY(1); } /* balken van de balkgrafiek groeien uit de basislijn; het cijfer komt erna */ .js [data-anim="grafiek"] .vulling { transform: scaleX(0); transition: transform 0.55s var(--ease-uit); transition-delay: calc(var(--volg, 0) * 70ms); } .js [data-anim="grafiek"].is-af .vulling { transform: scaleX(1); } .js [data-anim="grafiek"] .staaf-bedrag { opacity: 0; transition: opacity 0.3s ease-out; transition-delay: calc(var(--volg, 0) * 70ms + 0.3s); } .js [data-anim="grafiek"].is-af .staaf-bedrag { opacity: 1; } .js [data-anim="koppeling"] .koppelrij, .js [data-anim="koppeling"] .koppel-voet { opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease-uit), transform 0.4s var(--ease-uit); } .js [data-anim="koppeling"] .koppelrij:nth-child(2) { transition-delay: 80ms; } .js [data-anim="koppeling"] .koppelrij:nth-child(3) { transition-delay: 160ms; } .js [data-anim="koppeling"] .koppelrij:nth-child(4) { transition-delay: 240ms; } .js [data-anim="koppeling"] .koppel-voet { transition-delay: 340ms; } .js [data-anim="koppeling"].is-af .koppelrij, .js [data-anim="koppeling"].is-af .koppel-voet { opacity: 1; transform: none; } .js [data-anim="reken"] .reken-onder, .js [data-anim="reken"] .reken-marge { opacity: 0; transition: opacity 0.45s ease-out; } .js [data-anim="reken"] .reken-marge { transition-delay: 250ms; } .js [data-anim="reken"].is-af .reken-onder, .js [data-anim="reken"].is-af .reken-marge { opacity: 1; } /* de fases in de telefoon komen zacht binnen */ .js .fase { animation: fase-in 0.28s var(--ease-uit) backwards; } @keyframes fase-in { from { opacity: 0; transform: translateY(6px); } } /* ---------- Reduced motion: alles uit ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }