/* LumenSphere — Organic Flow design-systeem (naar Kim's styleguide). Tokens + globale basis. Gebruik ALTIJD deze variabelen, geen losse hex. Lettertype: Source Serif 4 (zelf-hosten wanneer beschikbaar); nu systeem-serif. */ :root { /* Basiskleuren */ --bg: #fdfbf7; --bg-soft: #f8f4ee; --text: #2c2a32; --text-muted: #6b6575; --white: #ffffff; /* Accenten */ --lavender: #c9b8e8; --lavender-deep: #9b7fd4; --mint: #a8c9b8; --peach: #f0c9b0; --gold: #d4b87a; --gold-light: #e8d5a3; --purple-soft: #e8e0f5; --green-soft: #dce8e0; /* Lavendel-ramp */ --color-accent-100: #f3eefb; --color-accent-200: var(--purple-soft); --color-accent-300: #d6c8ef; --color-accent-600: #8a6cc9; --color-accent-700: #6f54a8; --color-accent-800: #57418a; --color-accent-900: #3f2f66; /* Goud-ramp */ --color-accent-2-100: #faf4e3; --color-accent-2-200: var(--gold-light); --color-accent-2-700: #8a7340; /* Schaduw & glow */ --shadow: rgba(100, 80, 140, 0.10); --glow: rgba(155, 127, 212, 0.22); --shadow-soft: 0 4px 20px rgba(100, 80, 140, 0.08); --shadow-medium: 0 12px 40px rgba(100, 80, 140, 0.12); /* Spacing / radius */ --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --radius-md: 16px; --radius-lg: 24px; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --header-h: 73px; } * { box-sizing: border-box; } /* Pastel-waterverf op (het wortelelement), NIET op body. Zo kan de gouden sierlaag (#gold-lines, z-index:-1, kind van body) er zichtbaar bovenop liggen; stond de achtergrond op body dan tekende die er overheen. */ html { scroll-behavior: smooth; background-color: var(--bg); background-image: radial-gradient(55% 60% at 10% 8%, rgba(201,184,232,0.28), rgba(201,184,232,0.05) 70%), radial-gradient(50% 55% at 92% 14%, rgba(168,201,184,0.24), rgba(168,201,184,0.04) 70%), radial-gradient(45% 50% at 6% 78%, rgba(240,201,176,0.20), rgba(240,201,176,0.04) 70%), radial-gradient(50% 55% at 94% 82%, rgba(232,224,245,0.30), rgba(232,224,245,0.05) 70%), radial-gradient(60% 50% at 50% 50%, rgba(220,232,224,0.14), rgba(220,232,224,0.05) 75%), linear-gradient(180deg, rgba(232,224,245,0.14), rgba(220,232,224,0.12) 50%, rgba(240,201,176,0.12)); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%; } body { margin: 0; position: relative; /* containing block voor de absolute #gold-lines-laag */ overflow-x: hidden; /* decoratieve blobs mogen nooit horizontaal scrollen veroorzaken */ color: var(--text); font-family: var(--serif); font-size: 18px; line-height: 1.7; background: transparent; /* achtergrond staat op ; body laat de sierlijnen door */ } section { border: none !important; box-shadow: none !important; } /* Typografie */ h1, h2, h3 { font-weight: 600; margin: 0 0 0.4em; color: var(--text); } h1 { font-size: 56px; line-height: 1.12; letter-spacing: 0.015em; text-wrap: balance; } h2 { font-size: 38px; text-wrap: balance; } h3 { font-size: 24px; } p { margin: 0 0 1em; color: var(--text-muted); } p.on-text { color: var(--text); } h2.gold-rim { text-shadow: 0 1px 0 rgba(232,205,140,0.9), 0 2px 5px rgba(198,158,72,0.4); } a { color: var(--lavender-deep); text-decoration: none; } a:hover { color: var(--color-accent-700); } /* Sectie-wrapper */ .section { max-width: 1200px; margin: 0 auto; padding: 96px 32px; position: relative; scroll-margin-top: 90px; } .section.narrow { max-width: 880px; } .section.center { text-align: center; } .eyebrow { color: var(--color-accent-2-700); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; } /* Knoppen */ .btn-primary-ls { display: inline-block; padding: 12px 32px; font-family: var(--serif); background: linear-gradient(180deg, var(--lavender) 0%, #a58fd0 100%); color: var(--white); font-size: 16px; font-weight: 500; border: 1px solid var(--gold-light); border-radius: 9999px; cursor: pointer; box-shadow: 0 0 0 1.5px #e8d5a3; transition: box-shadow 0.25s ease, transform 0.25s ease; } .btn-primary-ls:hover { color: var(--white); box-shadow: 0 0 0 1.5px #e8d5a3, 0 0 10px rgba(232,213,163,0.5), 0 0 18px rgba(232,213,163,0.25); transform: scale(1.04); } .btn-secondary-ls { display: inline-block; padding: 12px 30px; font-family: var(--serif); background: var(--white); color: var(--lavender-deep); font-size: 16px; font-weight: 500; cursor: pointer; border: 1px solid var(--lavender); border-radius: 9999px; transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.2s ease; } .btn-secondary-ls:hover { transform: scale(1.03); box-shadow: var(--shadow-soft); } .text-link { font-weight: 500; } /* Icooncirkel/chip */ .icon-chip { width: 58px; height: 58px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .icon-chip.lg { width: 74px; height: 74px; border-radius: 22px; } /* Kaart (organische hoeken) */ .card-ls { background: var(--white); border-radius: 36px 26px 34px 26px; padding: 32px 30px; box-shadow: var(--shadow-soft); } .card-ls.r2 { border-radius: 26px 36px 26px 34px; } /* Getint quote/voorbeeld-vak */ .tintbox { border-radius: 34px 26px 34px 26px; padding: 30px 30px; } .tintbox.r2 { border-radius: 26px 34px 26px 34px; } .tintbox .quote { font-style: italic; color: var(--text); margin: 0; } /* Pill-kaart (meegroeien) */ .pill-card { display: flex; align-items: center; gap: 16px; padding: 24px 26px; border-radius: 30px 20px 30px 20px; } .pill-card.r2 { border-radius: 20px 30px 20px 30px; } .pill-card p { margin: 0; color: var(--text); font-size: 18px; } /* Formulier */ .input { width: 100%; padding: 13px 18px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--lavender); border-radius: 999px; transition: box-shadow 0.2s ease, border-color 0.2s ease; } textarea.input { border-radius: 24px; resize: vertical; } .input::placeholder { color: var(--text-muted); opacity: 0.7; } .input:focus, .input:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--glow); border-color: var(--lavender-deep); } .field-label { display: block; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-2-700); margin-bottom: 6px; } /* Fade-up bij scroll */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: none; } /* Honeypot */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* Responsive */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 900px) { h1 { font-size: 40px; } h2 { font-size: 30px; } .section { padding: 72px 24px; } .cols-2 { grid-template-columns: 1fr !important; } .zig { grid-template-columns: 1fr !important; } .zig .zig-quote { order: 2; } } @media (max-width: 560px) { h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 21px; } .grid-4, .grid-3 { grid-template-columns: 1fr !important; } .section { padding: 56px 20px; } } @media (max-width: 400px) { h1 { font-size: 27px; } h2 { font-size: 22px; } .section { padding: 46px 16px; } }