/* ============================================================ Moet ik de tuin water geven? Speels, één vraag, één antwoord. Achtergrond kleurt mee met het actuele weer (klasse op ). ============================================================ */ :root { --inkt: #1e2b22; --inkt-zacht: #46584c; --papier: #fdfaf3; --kaart: #ffffff; --accent: #2f7de1; /* water */ --accent-groen: #2f9e57; /* tuin */ --ja: #2f7de1; --nee: #2f9e57; --rand: rgba(30, 43, 34, 0.12); --schaduw: 0 18px 45px -18px rgba(30, 43, 34, 0.35); --straal: 26px; --font-kop: "Fredoka", "Trebuchet MS", sans-serif; --font-body: "Nunito", "Segoe UI", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--inkt); background: var(--papier); display: flex; flex-direction: column; transition: background 1.2s ease; } /* --- Weer-achtergronden ----------------------------------- */ body.weer-neutraal { background: linear-gradient(180deg, #eef4ec 0%, #fdfaf3 60%); } body.weer-zon { background: linear-gradient(180deg, #bfe3ff 0%, #fdf6d8 55%, #e8f4dd 100%); } body.weer-halfbewolkt{ background: linear-gradient(180deg, #cde7f7 0%, #f3f7e9 60%, #eef4e2 100%); } body.weer-bewolkt { background: linear-gradient(180deg, #d3dade 0%, #e9ece7 60%, #f2f2ec 100%); } body.weer-mist { background: linear-gradient(180deg, #dfe6e6 0%, #edf1ef 55%, #f5f6f2 100%); } body.weer-regen { background: linear-gradient(180deg, #a9c0d4 0%, #cfdde6 55%, #e8eee9 100%); } body.weer-onweer { background: linear-gradient(180deg, #7d8ba0 0%, #b4c0c9 55%, #e2e7e2 100%); } body.weer-sneeuw { background: linear-gradient(180deg, #dbe9f7 0%, #f0f5fb 55%, #fbfcfd 100%); } /* --- Layout ------------------------------------------------ */ .wrap { width: min(680px, 100% - 2.5rem); margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem) 0 2rem; flex: 1; text-align: center; } .kop h1 { font-family: var(--font-kop); font-weight: 600; font-size: clamp(1.6rem, 5.5vw, 2.6rem); line-height: 1.15; margin: 0 0 1.6rem; letter-spacing: -0.01em; } .kop .accent { color: var(--accent); position: relative; white-space: nowrap; } /* druppels die onder "water geven" vallen (Lucide droplet, MIT) */ .druppels { position: absolute; left: 0; right: 0; top: 100%; height: 0.9em; pointer-events: none; } .druppel { position: absolute; top: 0; width: 0.32em; height: 0.32em; fill: var(--accent); opacity: 0; animation: druppelen 2.4s ease-in infinite; } .druppel:nth-child(1) { left: 18%; } .druppel:nth-child(2) { left: 48%; animation-delay: 0.8s; width: 0.26em; height: 0.26em; } .druppel:nth-child(3) { left: 76%; animation-delay: 1.6s; } @keyframes druppelen { 0% { transform: translateY(-0.1em) scale(0.6); opacity: 0; } 25% { opacity: 0.85; } 70% { opacity: 0.7; } 100% { transform: translateY(0.65em) scale(1); opacity: 0; } } /* --- Zoekblok ---------------------------------------------- */ .zoek { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--straal); box-shadow: var(--schaduw); padding: clamp(1.3rem, 4vw, 2rem); max-width: 460px; margin-inline: auto; } .zoek-label { display: block; font-family: var(--font-kop); font-weight: 500; font-size: 1.15rem; margin-bottom: 0.8rem; } .zoek-rij { display: flex; gap: 0.5rem; } #plaatsInput { flex: 1; min-width: 0; font: 600 1.05rem var(--font-body); padding: 0.85rem 1.1rem; border: 2px solid var(--rand); border-radius: 999px; background: var(--papier); color: var(--inkt); outline-offset: 2px; } #plaatsInput:focus { border-color: var(--accent); } #zoekKnop, .wissel { font: 600 1rem var(--font-kop); border: none; border-radius: 999px; cursor: pointer; } #zoekKnop { padding: 0.85rem 1.5rem; background: var(--accent); color: #fff; transition: transform 0.15s ease, background 0.2s ease; } #zoekKnop:hover { background: #2465ba; transform: translateY(-2px); } #zoekKnop:disabled { opacity: 0.6; cursor: wait; transform: none; } .zoek-hint { font-size: 0.85rem; color: var(--inkt-zacht); margin: 0.8rem 0 0; } .suggesties { list-style: none; margin: 0.8rem 0 0; padding: 0; text-align: left; } .suggesties li button { width: 100%; text-align: left; font: 600 1rem var(--font-body); padding: 0.7rem 1rem; margin-top: 0.35rem; border: 1px solid var(--rand); border-radius: 14px; background: var(--papier); color: var(--inkt); cursor: pointer; } .suggesties li button:hover { border-color: var(--accent); background: #fff; } .suggesties li button small { color: var(--inkt-zacht); font-weight: 400; } /* --- Laden ------------------------------------------------- */ .laden { padding: 3rem 0; color: var(--inkt-zacht); } .laden-pootjes { font-size: 2.2rem; animation: stappen 1s ease-in-out infinite alternate; } @keyframes stappen { from { transform: translateX(-12px) rotate(-8deg); } to { transform: translateX(12px) rotate(8deg); } } /* --- Antwoord ---------------------------------------------- */ .plaats-regel { font-family: var(--font-kop); font-weight: 500; font-size: 1.1rem; color: var(--inkt-zacht); margin: 0 0 0.2rem; } .wissel { background: none; color: var(--accent); font-size: 0.85rem; padding: 0.2rem 0.55rem; text-decoration: underline; text-underline-offset: 3px; } .reuze-antwoord { font-family: var(--font-kop); font-weight: 700; font-size: clamp(6rem, 28vw, 13rem); line-height: 0.95; margin: 0.5rem 0 0.6rem; letter-spacing: -0.03em; animation: plof 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both; } .antwoord.is-ja .reuze-antwoord { color: var(--ja); } .antwoord.is-nee .reuze-antwoord { color: var(--nee); } /* langere antwoorden (speciale modi) iets kleiner, wel net zo hard */ .reuze-antwoord.lang { font-size: clamp(2.6rem, 11.5vw, 5.8rem); line-height: 1.05; text-wrap: balance; } @keyframes plof { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .advies { font-size: clamp(1.05rem, 3vw, 1.3rem); font-weight: 600; max-width: 34ch; margin: 0 auto 2.2rem; color: var(--inkt-zacht); text-wrap: balance; } /* --- Kattenkaart ------------------------------------------- */ .kat-kaart { margin: 0 auto 2.5rem; max-width: 420px; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--straal); box-shadow: var(--schaduw); padding: 0.9rem; transform: rotate(-1.2deg); animation: plof 0.55s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both; } .kat-kaart img { width: 100%; height: auto; display: block; border-radius: calc(var(--straal) - 8px); } /* --- Feiten ------------------------------------------------ */ .feiten { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; text-align: left; } .feiten li { background: var(--kaart); border: 1px solid var(--rand); border-radius: 18px; padding: 0.95rem 1.1rem; } .feiten .feit-label { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--inkt-zacht); margin-bottom: 0.25rem; } .feiten .feit-waarde { display: block; font-family: var(--font-kop); font-weight: 600; font-size: 1.35rem; } .feiten .feit-detail { display: block; font-size: 0.85rem; color: var(--inkt-zacht); margin-top: 0.15rem; } .feiten .goed .feit-waarde { color: var(--accent-groen); } .feiten .let-op .feit-waarde { color: #c77b19; } .feiten .slecht .feit-waarde { color: #c23b3b; } /* --- Uitleg ------------------------------------------------ */ .uitleg { text-align: left; background: var(--kaart); border: 1px solid var(--rand); border-radius: 18px; padding: 1rem 1.3rem; margin-bottom: 1rem; } .uitleg summary { cursor: pointer; font-family: var(--font-kop); font-weight: 600; font-size: 1.05rem; } .uitleg ol { padding-left: 1.2rem; } .uitleg li { margin-bottom: 0.4rem; } .uitleg .bron { font-size: 0.85rem; color: var(--inkt-zacht); } .uitleg a { color: var(--accent); } /* --- Fout -------------------------------------------------- */ .fout { background: #fdeeee; border: 1px solid #eec7c7; border-radius: 18px; padding: 1.2rem; max-width: 460px; margin: 1rem auto; } /* --- Voet -------------------------------------------------- */ .voet { text-align: center; font-size: 0.85rem; color: var(--inkt-zacht); padding: 1.5rem 1rem 2rem; } .voet a { color: var(--accent); } /* --- Toegankelijkheid & klein ------------------------------ */ @media (prefers-reduced-motion: reduce) { .reuze-antwoord, .kat-kaart { animation: none; } .laden-pootjes { animation: none; } .druppel { animation: none; opacity: 0.6; transform: translateY(0.2em); } body { transition: none; } } @media (max-width: 420px) { .zoek-rij { flex-direction: column; } #zoekKnop { padding: 0.85rem; } }