/* ========================================================================== Publieke homepage (marketing) - ingetogen, in de huisstijl ========================================================================== */ /* Thema - lichte modus (alleen de homepage; kaarten blijven donker). Aangestuurd door data-theme op : "light", "dark", of afwezig = systeem. */ :root[data-theme="light"] { --bg: #eceef4; --bg-2: #ffffff; --bg-3: #e4e7f0; --panel: #ffffff; --panel-2: #f4f6fa; --line: #dce0ea; --text: #2a3350; --muted: #5c6580; --muted-2: #8892a8; --accent: #a9843f; --accent-soft: rgba(169, 132, 63, 0.13); --danger: #c0504c; --success: #3f8f6e; --info: #4a7bc0; --shadow: 0 12px 34px rgba(40, 50, 80, 0.12); --shadow-sm: 0 3px 10px rgba(40, 50, 80, 0.08); --book-shadow: drop-shadow(0 18px 30px rgba(40, 50, 80, .22)); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #eceef4; --bg-2: #ffffff; --bg-3: #e4e7f0; --panel: #ffffff; --panel-2: #f4f6fa; --line: #dce0ea; --text: #2a3350; --muted: #5c6580; --muted-2: #8892a8; --accent: #a9843f; --accent-soft: rgba(169, 132, 63, 0.13); --danger: #c0504c; --success: #3f8f6e; --info: #4a7bc0; --shadow: 0 12px 34px rgba(40, 50, 80, 0.12); --shadow-sm: 0 3px 10px rgba(40, 50, 80, 0.08); --book-shadow: drop-shadow(0 18px 30px rgba(40, 50, 80, .22)); } } .home .book { filter: var(--book-shadow, drop-shadow(0 24px 40px rgba(0,0,0,.5))); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .home { min-height: 100vh; } .home-inner { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; } .home section { padding: 4.5rem 0; } .home h2 { font-family: var(--serif); font-size: 2rem; text-align: center; margin-bottom: .6rem; } .home .section-sub { text-align: center; color: var(--muted); max-width: 620px; margin: 0 auto 2.5rem; } /* Top bar */ .home-top { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; } .home-top .brand-logo { width: 190px; height: auto; color: var(--text); } .home-top a.login { color: var(--muted); font-size: .9rem; } .home-top a.login:hover { color: var(--text); text-decoration: none; } .home-top .top-actions { display: flex; align-items: center; gap: .9rem; } /* Thema-knop (licht/donker) */ .theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; transition: .15s ease; } .theme-toggle:hover { color: var(--text); background: var(--panel-2); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .ico-dark { display: none; } :root[data-theme="light"] .theme-toggle .ico-light { display: none; } :root[data-theme="light"] .theme-toggle .ico-dark { display: inline; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-toggle .ico-light { display: none; } :root:not([data-theme]) .theme-toggle .ico-dark { display: inline; } } @media (max-width: 480px) { .home-top .brand-logo { width: 160px; } .home-top .btn { padding: .35rem .65rem; } } /* Hero */ .home-hero { text-align: center; padding: 4.5rem 0 4rem; background: radial-gradient(900px 460px at 50% -5%, rgba(201,168,106,.12), transparent 62%); } .home-hero .star { width: 58px; height: 58px; margin: 0 auto 1.6rem; display: block; } .home-hero h1 { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.15; margin-bottom: 1rem; } .home-hero .lead { color: var(--muted); font-size: 1.15rem; line-height: 1.7; max-width: 600px; margin: 0 auto 2rem; } .home-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } /* Feature-kaarten */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; } .feature .fi { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; margin-bottom: 1rem; } .feature h3 { font-size: 1.1rem; margin-bottom: .4rem; } .feature p { color: var(--muted); font-size: .95rem; margin: 0; } /* Stappen */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; } .step { text-align: center; } .step .num { width: 54px; height: 54px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-family: var(--serif); font-size: 1.4rem; } .step h3 { font-size: 1.05rem; margin-bottom: .35rem; } .step p { color: var(--muted); font-size: .95rem; margin: 0; } /* Demo */ .home-demo { text-align: center; } .demo-stage { perspective: 2200px; display: flex; justify-content: center; width: 100%; margin: 1.5rem 0 1rem; min-height: var(--page-h, 360px); } .demo-hint { color: var(--accent); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin-top: 1rem; } .demo-hint.hidden { display: none; } /* Privacy / vertrouwen */ .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; max-width: 760px; margin: 0 auto; } .trust { display: flex; gap: .8rem; align-items: flex-start; } .trust .ti { color: var(--accent); font-size: 1.1rem; line-height: 1.5; } .trust p { margin: 0; color: var(--muted); font-size: .95rem; } .trust strong { color: var(--text); font-weight: 600; display: block; } /* Contact */ .home-contact { text-align: center; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .contact-form { max-width: 620px; margin: 2rem auto 0; text-align: left; } .contact-form .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; } .contact-form .field { margin-bottom: 1rem; } .contact-form textarea { min-height: 130px; } .contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; } .contact-form .cf-turnstile { margin: .3rem 0 1.2rem; } .contact-note { max-width: 620px; margin: 1.5rem auto 0; padding: .9rem 1.1rem; border-radius: var(--radius-sm); text-align: left; font-weight: 500; } .contact-success { background: rgba(123, 196, 164, .14); border: 1px solid rgba(123, 196, 164, .45); color: var(--success); } .contact-error { background: rgba(224, 115, 111, .14); border: 1px solid rgba(224, 115, 111, .45); color: var(--danger); } .contact-alt { margin-top: 1.6rem; color: var(--muted-2); font-size: .9rem; } @media (max-width: 640px) { .contact-form .cf-grid { grid-template-columns: 1fr; } } /* Footer */ .home-footer { text-align: center; padding: 2.5rem 0; color: var(--muted-2); font-size: .85rem; } .home-footer a { color: var(--muted); } @media (max-width: 760px) { .feature-grid, .steps, .trust-grid { grid-template-columns: 1fr; } .home section { padding: 3.5rem 0; } }