/* Fonts are loaded with a in each page's , not @import here. An @import can only be discovered after this stylesheet has downloaded and started parsing, so it serialises the chain (HTML -> styles.css -> Google's CSS -> the font files) and makes the pages' fonts.googleapis preconnect useless, because the connection is opened long before it is needed. */ :root { --ink:#241a3a; --cream:#fdfbff; --coral:#ff5e93; --yellow:#ffc24b; --mint:#6be3c9; --pale:#f0ebff; --line:rgba(36,26,58,.16); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:linear-gradient(180deg,#fdfbff,#f6f0ff); font-family:"DM Sans",Arial,sans-serif; font-size:16px; } a { color:inherit; text-decoration:none; } .skip { position:absolute; left:-999px; top:8px; background:var(--ink); color:white; padding:10px; z-index:9; } .skip:focus { left:8px; } .topbar { height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); } .logo { display:inline-flex; align-items:center; width:74px; height:74px; overflow:hidden; border-radius:50%; background:#25b9b5; } .logo img { width:100%; height:100%; object-fit:cover; } nav { display:flex; gap:31px; } nav a { border-bottom:1px solid transparent; padding:6px 0; font:700 .82rem "DM Sans",Arial,sans-serif; text-transform:uppercase; letter-spacing:.05em; } nav a:hover { border-color:var(--coral); color:var(--coral); } .topbar-actions { display:flex; align-items:center; gap:16px; } .lang-switch { display:inline-flex; align-items:center; background:var(--pale); border-radius:999px; padding:3px; gap:2px; } .lang-switch a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:30px; border-radius:999px; font:700 .68rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); opacity:.5; transition:background .2s,color .2s,opacity .2s; } .lang-switch a:hover { opacity:1; } .lang-switch a.active { background:var(--ink); color:var(--cream); opacity:1; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:49px; padding:0 25px; border-radius:999px; background:var(--ink); color:white; font-size:.9rem; font-weight:700; transition:transform .2s,background .2s; } .button:hover { background:var(--coral); transform:translateY(-2px); } .button-small { min-height:39px; padding:0 18px; } .hero { display:grid; grid-template-columns:1.04fr .96fr; min-height:600px; } .hero-copy { display:flex; flex-direction:column; justify-content:center; padding:80px clamp(24px,8vw,128px); } .eyebrow { margin:0 0 17px; color:#64746b; text-transform:uppercase; font:700 .68rem "DM Mono",monospace; letter-spacing:.1em; } h1,h2,h3 { margin:0; font-family:Fraunces,Georgia,serif; line-height:1.02; letter-spacing:-.045em; } h1 { max-width:630px; font-size:clamp(3.1rem,5.5vw,5.6rem); } .lead { max-width:410px; margin:26px 0 32px; line-height:1.6; font-size:1.08rem; } .actions { display:flex; flex-wrap:wrap; align-items:center; gap:25px; } .text-link { display:inline-block; border-bottom:1px solid var(--ink); padding-bottom:3px; font-size:.9rem; font-weight:700; } .text-link:hover { color:var(--coral); border-color:var(--coral); } .hero-art { position:relative; overflow:hidden; min-height:450px; background:linear-gradient(135deg,#ffcf5c,#ff5e93 55%,#a24bff); display:flex; align-items:center; justify-content:center; } .hero-art img { position:relative; width:78%; height:85%; object-fit:contain; mix-blend-mode:multiply; filter:saturate(1.12) contrast(1.05); z-index:1; transform:rotate(-3deg); } .hero-art.kosma-photo { background:#1c1430; } .hero-art.kosma-photo .sun { display:none; } .hero-art.kosma-photo img { width:100%; height:100%; object-fit:cover; object-position:center 34%; mix-blend-mode:normal; filter:none; transform:none; } .sun { position:absolute; width:320px; height:320px; right:9%; top:8%; border-radius:50%; background:#f7a54a; } .sticker { position:absolute; z-index:2; right:8%; bottom:8%; padding:14px 18px; background:var(--cream); border-radius:50% 46% 52% 43%; transform:rotate(8deg); font:700 .78rem/1.2 "DM Mono",monospace; text-align:center; } .promise { display:flex; justify-content:center; align-items:center; gap:22px; min-height:84px; padding:15px 20px; background:linear-gradient(90deg,#241a3a,#3a2a5a); color:var(--cream); text-transform:uppercase; font:700 .84rem "DM Mono",monospace; letter-spacing:.075em; } .promise p { margin:0; }.promise i{font-style:normal;color:var(--coral);font-size:1.45rem;} .story { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,8vw,130px); align-items:center; max-width:1180px; margin:0 auto; padding:130px 32px; } .story-picture { height:480px; overflow:hidden; background:linear-gradient(160deg,#6be3c9,#4bc0ff); border-radius:45% 45% 7px 7px; } .story-picture img { width:100%;height:100%;object-fit:cover; } .story-copy { max-width:470px; }.story h2,.collection h2,.cta h2 { font-size:clamp(2.4rem,4.2vw,4.3rem); } .story-copy > p:not(.eyebrow) { margin:24px 0; line-height:1.7; } .collection { padding:108px clamp(24px,5vw,76px) 124px; background:linear-gradient(180deg,#f7f2ff,#ffeff7); } .section-heading { display:flex; align-items:end; justify-content:space-between; max-width:1300px; margin:0 auto 46px; } .creature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1300px; margin:auto; } .creature-card { min-height:550px; position:relative; overflow:hidden; transition:transform .2s; }.creature-card:hover{transform:translateY(-7px)} .creature-card a { display:block; height:100%; padding:28px; }.coral{background:linear-gradient(150deg,#ff6b9c,#ffa14b)}.yellow{background:linear-gradient(150deg,#4bd0c4,#4b9dff)}.mint{background:linear-gradient(150deg,#b06bff,#ff6bd0)} .card-image { height:360px; display:flex; justify-content:center; align-items:center; overflow:hidden; }.card-image img{width:100%;height:100%;object-fit:contain;transition:transform .25s}.creature-card:hover img{transform:scale(1.06)} .card-number { margin:8px 0 10px; font:.7rem "DM Mono",monospace; }.creature-card h3{font-size:2.4rem}.creature-card h3+p{margin:10px 0;font-size:.9rem}.arrow{position:absolute;right:27px;bottom:25px;font-size:1.65rem} .cat-shape { position:relative; }.cat-shape b { width:180px;height:198px;background:#e57c4e;border-radius:49% 49% 46% 46%;display:block;position:relative; }.cat-shape span { position:absolute;top:36px;width:72px;height:88px;background:#e57c4e;z-index:1; }.cat-shape span:first-child{transform:translateX(-55px) rotate(30deg)}.cat-shape span:nth-child(2){transform:translateX(55px) rotate(-30deg)} .testimonial { max-width:840px; text-align:center; padding:120px 28px; margin:auto; }.quote-mark{font:5rem/1 Fraunces,serif;color:var(--coral);height:56px}.testimonial blockquote{margin:0;font:600 clamp(1.85rem,3.5vw,3.25rem)/1.18 Fraunces,serif;letter-spacing:-.035em}.testimonial p{margin:23px 0 12px;font-size:.85rem}.stars{color:var(--coral);letter-spacing:6px;font-size:clamp(1.4rem,2.6vw,1.85rem)} .reviews-eyebrow{text-align:center;margin-bottom:28px} .review-carousel{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center} .review-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s linear 1.1s;pointer-events:none} .review-card.active{opacity:1;visibility:visible;transition:opacity 1.1s ease;pointer-events:auto} .review-card blockquote{margin:0;font:600 clamp(1.5rem,3vw,2.4rem)/1.22 Fraunces,serif;letter-spacing:-.03em} .review-byline{display:flex;align-items:center;gap:14px;margin-top:28px} .review-byline img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:2px solid var(--coral)} .review-name{margin:0 0 4px;font:700 .85rem "DM Mono",monospace} .review-dots{display:flex;justify-content:center;gap:9px;margin-top:36px} .review-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:var(--line);cursor:pointer;transition:background .3s,transform .3s} .review-dot.active{background:var(--coral);transform:scale(1.3)} .cta { display:flex; justify-content:space-between; gap:40px; align-items:center; padding:86px max(28px,10vw); background:linear-gradient(120deg,#a24bff,#ff5e93 60%,#ff9a4b); }.cta h2{max-width:620px;color:var(--cream)}.cta .eyebrow{color:var(--ink)}.cta-actions{display:flex;flex-direction:column;align-items:center;gap:20px;white-space:nowrap}.button-light{background:var(--cream);color:var(--ink)}.light-link{border-color:var(--ink)} footer { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:15px; padding:34px clamp(24px,5vw,76px); background:linear-gradient(90deg,#241a3a,#3a2a5a); color:var(--cream); font-size:.82rem; }footer .logo { width:70px; height:70px; }footer .copyright{text-align:right;color:#b9c3bd}footer p{margin:0} .mobile-only{display:none} /* Language suggestion (js/lang-hint.js). Fixed to the bottom rather than inserted at the top of the flow, because it is revealed by JS after load — a top bar would push the page down and register as layout shift (CLS). */ .lang-hint{position:fixed;z-index:20;left:50%;bottom:22px;transform:translate(-50%,140%);display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:12px 14px 12px 22px;border-radius:999px;background:var(--ink);color:var(--cream);box-shadow:0 12px 34px rgba(36,26,58,.34);opacity:0;transition:transform .26s ease,opacity .26s ease} .lang-hint.is-open{transform:translate(-50%,0);opacity:1} .lang-hint[hidden]{display:none} .lang-hint p{margin:0;font-size:.86rem;white-space:nowrap} .lang-hint-go{border-bottom:1px solid var(--cream);padding-bottom:2px;font-size:.86rem;font-weight:700;white-space:nowrap} .lang-hint-go:hover{color:var(--yellow);border-color:var(--yellow)} .lang-hint-close{flex:none;width:30px;height:30px;padding:0;border:none;border-radius:50%;background:rgba(253,251,255,.14);color:var(--cream);font-size:.76rem;line-height:1;cursor:pointer;transition:background .2s,color .2s} .lang-hint-close:hover{background:var(--coral);color:white} @media (prefers-reduced-motion:reduce){.lang-hint{transition:none}} @media (max-width:760px){.topbar{height:67px;padding:0 20px}.logo{width:52px;height:52px}nav{display:none}.topbar-actions{gap:10px}.lang-switch a{min-width:30px;height:26px;font-size:.62rem}.button-small{padding:0 14px;font-size:.8rem}.hero{grid-template-columns:1fr}.hero-copy{padding:73px 25px 58px}.hero-art{min-height:420px}.promise{justify-content:flex-start;overflow:auto;white-space:nowrap}.promise i{flex:none}.story{grid-template-columns:1fr;padding:76px 25px;gap:38px}.story-picture{height:390px}.collection{padding:75px 20px}.desktop-only{display:none}.mobile-only{display:inline-flex;margin-top:28px}.creature-grid{grid-template-columns:1fr;gap:16px}.creature-card{min-height:470px}.card-image{height:300px}.testimonial{padding:86px 25px}.review-carousel{min-height:400px}.cta{padding:67px 25px;display:block}.cta-actions{margin-top:32px}footer{grid-template-columns:1fr;padding:31px 25px}footer .copyright{text-align:left}h1{font-size:3.35rem}} /* Narrow screens: the centred pill would squeeze the sentence to a word per line, so become a full-width sheet instead — text on its own row, actions beneath. left/right replace the centring, so both transforms are overridden. */ @media (max-width:560px){.lang-hint{left:14px;right:14px;bottom:14px;max-width:none;flex-wrap:wrap;justify-content:space-between;gap:10px 12px;padding:14px 16px;border-radius:20px;transform:translateY(150%)}.lang-hint.is-open{transform:translateY(0)}.lang-hint p{flex:1 0 100%;font-size:.82rem;white-space:normal}.lang-hint-go{font-size:.84rem}} @media (max-width:440px){.topbar{padding:0 14px}.logo{width:42px;height:42px}.topbar-actions{gap:6px}.lang-switch{padding:2px}.lang-switch a{min-width:24px;height:22px;font-size:.56rem}.button-small{padding:0 10px;font-size:.68rem;min-height:32px}}