/* Lottes Ditjes en Datjes — warm illustrated bakery coming-soon page */
@font-face { font-family:"Caveat"; font-style:normal; font-weight:500 700; font-display:swap; src:url("../fonts/caveat-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Caveat"; font-style:normal; font-weight:500 700; font-display:swap; src:url("../fonts/caveat-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/nunito-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root { --cream:#fffaf7; --text:#58635e; --coral:#f58f76; --pink:#e98699; --pink-soft:#f9d8de; --green:#a8c99a; --green-soft:#dcebd8; --yellow:#f4d47f; --yellow-soft:#f9edc6; --blue:#9ec8cf; --blue-soft:#deedf0; --lilac:#c8add0; --shadow:rgba(92,73,68,.08); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--cream); scroll-behavior:smooth; }
body { min-height:100vh; margin:0; color:var(--text); background:var(--cream); font-family:"Nunito",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
.coming-soon { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; display:grid; place-items:center; padding:18px 22px 30px; background:#fffaf7; }
.coming-soon::before { content:""; position:absolute; inset:0; z-index:-2; background:url("../images/bakery-background.png") center / cover no-repeat; }
.coming-soon::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 58% 70% at 50% 48%,rgba(255,253,251,.96) 0%,rgba(255,253,251,.82) 52%,rgba(255,253,251,.13) 100%); pointer-events:none; }
.hero { position:relative; z-index:2; width:min(760px,100%); min-height:calc(100svh - 48px); display:flex; flex-direction:column; align-items:center; text-align:center; }
.logo-wrap { width:min(410px,49vw); margin-top:-45px; animation:appear .8s ease both; }
.logo { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.hero-copy { margin-top:-24px; animation:rise .8s .12s ease both; }
.eyebrow { display:none; }
h1 { margin:0; color:#d96e84; font-family:"Caveat",cursive; font-size:clamp(4.4rem,8vw,6.6rem); font-weight:600; line-height:.85; letter-spacing:-.035em; }
h1 span { color:var(--pink); font-size:.65em; vertical-align:.08em; }
.intro { margin:15px 0 0; font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.45; font-weight:600; }
.motto { margin:7px 0 0; color:var(--pink); font-family:"Caveat",cursive; font-size:clamp(1.65rem,3vw,2.2rem); font-weight:600; }
.options-title { margin-top:18px; color:#7a837f; font-family:"Caveat",cursive; font-size:1.45rem; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(122,131,127,.3); animation:rise .8s .2s ease both; }
.options-title:hover { color:var(--pink); border-color:var(--pink); }
.options { display:flex; justify-content:center; align-items:flex-start; gap:clamp(12px,2vw,22px); width:100%; margin:8px auto 20px; animation:rise .8s .24s ease both; }
.option { width:116px; min-height:112px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:10px; border-radius:50%; font-size:.84rem; line-height:1.15; font-weight:700; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.option:hover { transform:translateY(-3px); box-shadow:0 9px 22px var(--shadow); }
.option:focus-visible,.options-title:focus-visible { outline:3px solid rgba(158,200,207,.55); outline-offset:4px; }
.option .icon { display:grid; place-items:center; width:42px; height:42px; border:1.5px solid currentColor; border-radius:50%; }
.option .icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.65; }
.option-green { background:rgba(220,235,216,.86); color:#66876a; }.option-pink { background:rgba(249,216,222,.86); color:#a86572; }.option-yellow { background:rgba(249,237,198,.9); color:#a48a48; }.option-blue { background:rgba(222,237,240,.9); color:#5f8991; }.option-lilac { background:rgba(234,223,237,.88); color:#806c86; }
.signup { width:min(600px,100%); animation:rise .8s .35s ease both; }
.signup h2 { margin:0 0 10px; font-family:"Caveat",cursive; font-size:clamp(1.65rem,3vw,2.1rem); font-weight:600; color:#69726e; }
.signup-form { display:flex; flex-wrap:wrap; gap:8px; padding:5px; background:rgba(255,255,255,.9); border:1px solid rgba(105,114,110,.16); border-radius:24px; box-shadow:0 10px 35px var(--shadow); }
.signup-form input[type="email"] { min-width:0; flex:1; border:0; outline:0; padding:13px 17px; background:transparent; color:var(--text); }.signup-form input[type="email"]::placeholder { color:#afb5b1; }
.signup-form button { flex:0 0 auto; border:0; border-radius:999px; padding:12px 20px; color:#fff; background:var(--pink); cursor:pointer; font-weight:700; transition:transform .2s ease,box-shadow .2s ease; }.signup-form button:hover { transform:translateY(-1px); box-shadow:0 7px 18px rgba(233,134,153,.25); }.signup-form button svg { width:1em; height:1em; margin-left:4px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:2; vertical-align:-.12em; }.sib-hide-loader-icon { display:none; }
.signup-form button:focus-visible,.signup-form input:focus-visible { outline:3px solid rgba(158,200,207,.55); outline-offset:2px; }
.signup-consent { display:flex; align-items:flex-start; gap:7px; width:100%; padding:2px 11px 5px; color:#7f8883; font-size:.72rem; line-height:1.3; text-align:left; cursor:pointer; }.signup-consent input { width:14px; height:14px; margin:1px 0 0; accent-color:var(--pink); }.signup-consent a { color:#69726e; text-underline-offset:2px; }.input--hidden { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }.form-message { display:none; margin:0 0 9px; padding:9px 12px; border-radius:14px; font-size:.85rem; line-height:1.35; }.form-message.sib-form-message-panel--active { display:block; }.form-message-error { color:#8d4650; background:#fff0f1; }.form-message-success { color:#4e7957; background:#edf7ec; }
.form-note { margin:6px 0 0; font-size:.72rem; opacity:.55; }
.support-link { margin:10px 0 0; font-size:.74rem; }
.support-link a { color:#8e8f90; text-decoration:none; border-bottom:1px solid rgba(142,143,144,.28); transition:color .2s ease,border-color .2s ease; }
.support-link a:hover { color:#69726e; border-color:rgba(105,114,110,.52); }
.support-link a:focus-visible { outline:3px solid rgba(158,200,207,.55); outline-offset:3px; border-radius:4px; }
.mini-footer { margin-top:auto; padding-top:20px; display:flex; align-items:center; gap:11px; color:#9ba39f; font-size:.66rem; letter-spacing:.32em; font-weight:700; }.mini-footer b { color:var(--pink); letter-spacing:0; }
.legal-links { margin-top:7px; font-size:.68rem; }.legal-links a { color:#8e8f90; text-underline-offset:3px; }
.diet-page { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; padding:34px 22px 70px; background:linear-gradient(rgba(255,250,247,.88),rgba(255,250,247,.94)),url("../images/bakery-background.png") center / cover fixed; }
.diet-page .wash { position:fixed; z-index:-1; }
.diet-shell { width:min(980px,100%); margin:0 auto; }
.diet-header { max-width:730px; margin:0 auto 54px; text-align:center; }
.page-back { display:block; width:max-content; margin:0 auto 6px 0; color:#7f8883; font-size:.84rem; font-weight:700; text-underline-offset:3px; }
.diet-logo { display:block; width:min(300px,68vw); height:auto; margin:-38px auto -25px; mix-blend-mode:multiply; }
.diet-kicker { margin:0 0 5px; color:#a86572; font-size:.73rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.diet-header h1 { font-size:clamp(3.4rem,8vw,5.8rem); line-height:.88; }
.diet-intro { max-width:650px; margin:20px auto 0; font-size:1.08rem; font-weight:600; line-height:1.6; }
.diet-options { padding:clamp(27px,5vw,48px); background:rgba(255,255,255,.92); border:1px solid rgba(105,114,110,.13); border-radius:8px; box-shadow:0 18px 55px var(--shadow); }
.diet-options > h2,.diet-note h2 { margin:0; color:#69726e; font-family:"Caveat",cursive; font-size:clamp(2rem,5vw,3rem); font-weight:600; line-height:1; }
.diet-options > p { max-width:660px; margin:9px 0 28px; line-height:1.55; }
.diet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(105,114,110,.14); border-left:1px solid rgba(105,114,110,.14); }
.diet-card { position:relative; min-height:205px; padding:30px; scroll-margin-top:20px; border-right:1px solid rgba(105,114,110,.14); border-bottom:1px solid rgba(105,114,110,.14); }
.diet-card h3 { margin:0 0 8px; font-family:"Caveat",cursive; font-size:2rem; line-height:1; }.diet-card p { margin:0; line-height:1.55; }
.diet-number { display:block; margin-bottom:20px; font-size:.7rem; font-weight:700; letter-spacing:.16em; opacity:.65; }
.diet-card-green { background:rgba(220,235,216,.56); color:#58775c; }.diet-card-pink { background:rgba(249,216,222,.56); color:#8e5964; }.diet-card-yellow { background:rgba(249,237,198,.62); color:#897239; }.diet-card-blue { background:rgba(222,237,240,.64); color:#51777e; }.diet-card-lilac { grid-column:1 / -1; min-height:0; background:rgba(234,223,237,.62); color:#6f5c75; }
.diet-contact-link { display:inline-block; margin-top:14px; color:#6f5c75; font-weight:700; text-underline-offset:3px; }
.diet-note { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; margin:42px auto; padding:6px clamp(10px,5vw,48px); scroll-margin-top:20px; }
.diet-note-heart { color:var(--pink); font-family:"Caveat",cursive; font-size:5rem; line-height:.7; transform:rotate(-8deg); }.diet-note p:last-child { margin:12px 0 0; line-height:1.65; }
.diet-footer { padding-top:28px; border-top:1px solid rgba(105,114,110,.18); text-align:center; }.diet-footer p { margin:0 0 17px; }.diet-home-link { display:inline-block; padding:11px 18px; border-radius:999px; color:#fff; background:var(--pink); font-weight:700; text-decoration:none; }.diet-privacy-link { margin-left:15px; color:#7f8883; font-size:.78rem; text-underline-offset:3px; }
.privacy-page { position:relative; min-height:100svh; padding:48px 22px 70px; background:linear-gradient(rgba(255,250,247,.94),rgba(255,250,247,.94)),url("../images/bakery-background.png") center / cover fixed; }
.privacy-shell { width:min(780px,100%); margin:0 auto; padding:clamp(26px,5vw,52px); background:rgba(255,255,255,.94); border:1px solid rgba(105,114,110,.14); border-radius:8px; box-shadow:0 18px 55px var(--shadow); }
.privacy-back { display:inline-block; margin-bottom:22px; color:#8e6c75; font-size:.86rem; font-weight:700; text-underline-offset:3px; }
.privacy-page h1 { color:#d96e84; font-size:clamp(3.2rem,8vw,5rem); line-height:.95; }
.privacy-intro { margin:14px 0 30px; font-size:1.08rem; line-height:1.6; }
.privacy-section + .privacy-section { margin-top:28px; padding-top:26px; border-top:1px solid rgba(105,114,110,.13); }
.privacy-section h2 { margin:0 0 10px; color:#69726e; font-family:"Caveat",cursive; font-size:2rem; line-height:1.1; }
.privacy-section p,.privacy-section li { line-height:1.65; }
.privacy-section p { margin:0 0 10px; }.privacy-section ul { margin:8px 0 0; padding-left:21px; }.privacy-section li + li { margin-top:7px; }
.privacy-section a { color:#9a6571; text-underline-offset:3px; }.privacy-meta { margin-top:32px; color:#7f8883; font-size:.8rem; }
.wash { position:absolute; z-index:0; border-radius:48% 52% 55% 45% / 55% 45% 55% 45%; opacity:.72; pointer-events:none; }.wash-pink { width:570px; height:370px; top:-105px; left:-100px; background:#f9dfe2; transform:rotate(-12deg); }.wash-green { width:510px; height:370px; top:-100px; right:-100px; background:#e0edd9; transform:rotate(14deg); }.wash-yellow { width:510px; height:370px; bottom:-125px; right:-105px; background:#f9e8bf; transform:rotate(-15deg); }.wash-blue { width:570px; height:370px; bottom:-125px; left:-100px; background:#e0eff1; transform:rotate(10deg); }
.dot,.heart { position:absolute; z-index:1; pointer-events:none; }.dot { width:18px; height:18px; border-radius:50%; opacity:.9; }.dot-green { background:var(--green); }.dot-pink { background:var(--pink); }.dot-yellow { background:var(--yellow); }.dot-blue { background:var(--blue); }.d1 { left:29%; top:18%; }.d2 { right:29%; top:21%; }.d3 { left:26%; bottom:17%; width:11px; height:11px; }.d4 { right:26%; bottom:18%; width:12px; height:12px; }
.heart { color:var(--coral); font-family:"Caveat",cursive; font-size:3rem; opacity:.72; }.h1 { left:28%; top:37%; transform:rotate(-12deg); color:var(--pink); }.h2 { right:27%; top:38%; transform:rotate(10deg); color:var(--green); }.h3 { left:22%; bottom:12%; transform:rotate(8deg); color:var(--blue); font-size:2.5rem; }
.corner-note { position:absolute; z-index:1; display:flex; align-items:center; gap:15px; max-width:205px; color:#cc7787; font-family:"Caveat",cursive; font-size:clamp(1.65rem,2.5vw,2.35rem); font-weight:600; line-height:.92; text-align:center; pointer-events:none; }.corner-note b { font-size:2.6rem; font-weight:500; }.note-top-left { top:48px; left:clamp(26px,6vw,94px); transform:rotate(-9deg); }.note-top-left b { color:#df8997; }.note-top-right { top:47px; right:clamp(26px,6vw,94px); color:#718d70; transform:rotate(7deg); }.note-top-right b { color:#d89670; }.note-bottom-left { bottom:54px; left:clamp(26px,5vw,78px); color:#6b9da4; transform:rotate(-8deg); }.note-bottom-left b { color:#6d9ca3; }.note-bottom-right { right:clamp(26px,6vw,94px); bottom:54px; color:#cd9561; transform:rotate(7deg); }.note-bottom-right b { color:#df8b83; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes appear { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:700px) { .coming-soon { min-height:100svh; padding:8px 16px 18px; }.coming-soon::before { background-position:45% center; }.coming-soon::after { background:rgba(255,253,251,.82); }.hero { min-height:calc(100svh - 26px); }.logo-wrap { width:min(350px,90vw); margin-top:-34px; }.hero-copy { margin-top:-15px; }h1 { font-size:clamp(3.7rem,16vw,5.4rem); }.intro { margin-top:13px; font-size:.94rem; }.desktop-only { display:none; }.motto { margin-top:7px; }.options-title { margin-top:13px; font-size:1.25rem; }.options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:7px auto 14px; max-width:410px; }.option { width:100%; min-height:83px; border-radius:35px; font-size:.72rem; padding:8px 4px; gap:4px; }.option .icon { width:29px; height:29px; }.option .icon svg { width:19px; height:19px; }.option:nth-child(4) { grid-column:1 / 3; border-radius:999px; }.option:nth-child(5) { border-radius:999px; }.signup h2 { font-size:1.55rem; }.signup-form { flex-direction:column; border-radius:22px; padding:7px; }.signup-form input[type="email"] { padding:12px 14px; text-align:center; }.signup-form button { width:100%; }.support-link { margin-top:8px; }.mini-footer { padding-top:14px; font-size:.56rem; letter-spacing:.22em; }.wash-pink { width:250px; height:200px; left:-105px; }.wash-green { width:240px; height:190px; right:-105px; }.wash-yellow { width:220px; height:170px; right:-105px; }.wash-blue { width:220px; height:170px; left:-105px; }.d1 { left:5%; top:38%; }.d2 { right:5%; top:38%; }.h1 { left:4%; top:57%; }.h2 { right:4%; top:61%; }.h3 { display:none; }.corner-note { display:none; }.privacy-page { padding:18px 12px 38px; }.privacy-shell { padding:25px 20px; }.privacy-page h1 { font-size:3.2rem; }.diet-page { padding:18px 12px 42px; }.diet-header { margin-bottom:34px; }.page-back { margin-left:8px; }.diet-logo { margin-top:-27px; }.diet-intro { font-size:.98rem; }.diet-options { padding:25px 18px; }.diet-grid { grid-template-columns:1fr; }.diet-card { min-height:0; padding:24px; }.diet-note { grid-template-columns:1fr; gap:12px; margin:34px auto; padding:0 12px; }.diet-note-heart { font-size:4rem; }.diet-privacy-link { display:block; margin:14px 0 0; } }
@media (max-height:780px) and (min-width:701px) { .logo-wrap { width:350px; margin-top:-72px; }.hero-copy { margin-top:-18px; }h1 { font-size:5rem; }.options { margin:15px auto; }.option { min-height:95px; width:100px; }.corner-note { font-size:1.65rem; }.note-top-left,.note-top-right { top:25px; }.note-bottom-left,.note-bottom-right { bottom:22px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
