{"id":57,"date":"2026-06-05T13:05:53","date_gmt":"2026-06-05T13:05:53","guid":{"rendered":"http:\/\/yhismzs.cluster100.hosting.ovh.net\/?page_id=57"},"modified":"2026-06-05T14:45:00","modified_gmt":"2026-06-05T14:45:00","slug":"elementor-57","status":"publish","type":"page","link":"https:\/\/toslea.com\/","title":{"rendered":"Toslea"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n toslea \u2014 To sleep easy<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Radio+Canada:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --light: #DFDFDF;\n --dark: #111111;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: auto; }\n body {\n font-family: 'Radio Canada', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n overflow-x: hidden;\n background: var(--dark);\n }\n #sticky-wrap {\n position: relative;\n height: 400vh;\n }\n #sticky-scene {\n position: sticky;\n top: 0;\n width: 100%;\n height: 100vh;\n overflow: hidden;\n }\n .panel {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px;\n }\n #p-hero { background: var(--dark); z-index: 1; }\n #p-cs { background: var(--light); z-index: 2; transform: translateY(100%); }\n #p-contact { background: var(--dark); z-index: 3; transform: translateY(100%); }\n\n \/* ---- Hero ---- *\/\n .hero-lockup {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n will-change: transform, opacity;\n }\n .hero-brand {\n color: var(--light);\n font-size: clamp(64px, 11vw, 130px);\n font-weight: 700;\n letter-spacing: -0.02em;\n line-height: 1;\n will-change: transform, opacity;\n }\n .hero-tag {\n color: var(--light);\n font-size: clamp(18px, 2.8vw, 32px);\n font-weight: 400;\n letter-spacing: 0.01em;\n margin-top: 8px;\n will-change: transform, opacity;\n }\n .scroll-hint {\n position: absolute;\n bottom: 36px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n color: var(--light);\n opacity: 0.4;\n font-size: 13px;\n font-weight: 400;\n }\n .scroll-hint .bar {\n width: 1.5px;\n height: 36px;\n background: var(--light);\n animation: blink 1.8s ease-in-out infinite;\n }\n @keyframes blink {\n 0%, 100% { opacity: .3; }\n 50% { opacity: 1; }\n }\n\n \/* ---- Coming soon ---- *\/\n .cs-eyebrow {\n color: var(--dark);\n font-size: clamp(14px, 1.8vw, 17px);\n font-weight: 400;\n opacity: 0.55;\n margin-bottom: 28px;\n will-change: transform, opacity;\n }\n .cs-title {\n color: var(--dark);\n font-size: clamp(56px, 10vw, 110px);\n font-weight: 700;\n letter-spacing: -0.02em;\n line-height: 1;\n margin-bottom: 32px;\n will-change: transform, opacity;\n }\n .cs-line {\n width: 56px;\n height: 2px;\n background: var(--dark);\n margin: 0 auto 28px;\n border-radius: 2px;\n will-change: transform, opacity;\n }\n .cs-sub {\n color: var(--dark);\n font-size: clamp(15px, 2vw, 20px);\n font-weight: 400;\n opacity: 0.6;\n will-change: transform, opacity;\n }\n\n \/* ---- Contact ---- *\/\n .ct-eyebrow {\n color: var(--light);\n font-size: clamp(28px, 4vw, 40px);\n font-weight: 700;\n letter-spacing: -0.02em;\n margin-bottom: 48px;\n will-change: transform, opacity;\n }\n .ct-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 28px;\n width: 100%;\n max-width: 520px;\n }\n .ct-list li {\n display: flex;\n flex-direction: column;\n gap: 6px;\n border-top: 1px solid rgba(223, 223, 223, 0.18);\n padding-top: 24px;\n will-change: transform, opacity;\n }\n .ct-list li:first-child { border-top: none; padding-top: 0; }\n .ct-key {\n color: var(--light);\n font-size: 14px;\n font-weight: 700;\n opacity: 0.5;\n }\n .ct-val {\n color: var(--light);\n font-size: clamp(18px, 2.5vw, 22px);\n font-weight: 400;\n opacity: 0.95;\n line-height: 1.5;\n }\n .ct-footer {\n margin-top: 56px;\n color: var(--light);\n font-size: 13px;\n font-weight: 400;\n opacity: 0.3;\n will-change: transform, opacity;\n }\n <\/style>\n<\/head>\n<body>\n<div id=\"sticky-wrap\">\n <div id=\"sticky-scene\">\n <div class=\"panel\" id=\"p-hero\">\n <div class=\"hero-lockup\" id=\"heroBrand\">\n <p class=\"hero-brand\">toslea<\/p>\n <p class=\"hero-tag\" id=\"heroTag\">To sleep easy<\/p>\n <\/div>\n <div class=\"scroll-hint\">\n <span>scroll<\/span>\n <div class=\"bar\"><\/div>\n <\/div>\n <\/div>\n <div class=\"panel\" id=\"p-cs\">\n <p class=\"cs-eyebrow\" id=\"csEye\">Something is on its way<\/p>\n <p class=\"cs-title\" id=\"csTitle\">Coming soon<\/p>\n <div class=\"cs-line\" id=\"csLine\"><\/div>\n <p class=\"cs-sub\" id=\"csSub\">Stay tuned for what's next<\/p>\n <\/div>\n <div class=\"panel\" id=\"p-contact\">\n <p class=\"ct-eyebrow\" id=\"ctEye\">Contact<\/p>\n <ul class=\"ct-list\">\n <li id=\"ct1\">\n <span class=\"ct-key\">Email<\/span>\n <span class=\"ct-val\">info@toslea.com<\/span>\n <\/li>\n <li id=\"ct2\">\n <span class=\"ct-key\">Phone<\/span>\n <span class=\"ct-val\"><\/span>\n <\/li>\n <li id=\"ct3\">\n <span class=\"ct-key\">Address<\/span>\n <span class=\"ct-val\"><br><\/span>\n <\/li>\n <\/ul>\n <p class=\"ct-footer\" id=\"ctFoot\">\u00a9 2026 toslea \u2014 All rights reserved<\/p>\n <\/div>\n <\/div>\n<\/div>\n<script>\n const wrap = document.getElementById('sticky-wrap');\n const pCs = document.getElementById('p-cs');\n const pContact = document.getElementById('p-contact');\n const heroBrand = document.getElementById('heroBrand');\n const heroTag = document.getElementById('heroTag');\n const csEye = document.getElementById('csEye');\n const csTitle = document.getElementById('csTitle');\n const csLine = document.getElementById('csLine');\n const csSub = document.getElementById('csSub');\n const ctEye = document.getElementById('ctEye');\n const ct1 = document.getElementById('ct1');\n const ct2 = document.getElementById('ct2');\n const ct3 = document.getElementById('ct3');\n const ctFoot = document.getElementById('ctFoot');\n function clamp01(v) { return Math.max(0, Math.min(1, v)); }\n function ease(t) { return t < 0.5 ? 2*t*t : -1+(4-2*t)*t; }\n function lerp(a, b, t) { return a + (b - a) * t; }\n function applyFade(el, progress, delay) {\n const t = ease(clamp01((progress - delay) \/ 0.4));\n el.style.opacity = t;\n el.style.transform = `translateY(${lerp(28, 0, t)}px)`;\n }\n function tick() {\n const rect = wrap.getBoundingClientRect();\n const totalScroll = wrap.offsetHeight - window.innerHeight;\n const scrolled = -rect.top;\n const progress = clamp01(scrolled \/ totalScroll);\n const seg1 = clamp01(progress \/ 0.33);\n const seg2 = clamp01((progress - 0.33) \/ 0.33);\n const heroOut = ease(seg1);\n heroBrand.style.opacity = 1 - heroOut * 0.8;\n heroBrand.style.transform = `scale(${lerp(1, 1.06, heroOut)})`;\n heroTag.style.opacity = 1 - heroOut;\n heroTag.style.transform = `translateY(${lerp(0, -16, heroOut)}px)`;\n pCs.style.transform = `translateY(${lerp(100, 0, ease(seg1))}%)`;\n applyFade(csEye, seg1, 0);\n applyFade(csTitle, seg1, 0.1);\n applyFade(csLine, seg1, 0.2);\n applyFade(csSub, seg1, 0.3);\n const csOut = ease(seg2);\n csEye.style.opacity = (parseFloat(csEye.style.opacity) || 0) * (1 - csOut * 0.7);\n csTitle.style.opacity = (parseFloat(csTitle.style.opacity) || 0) * (1 - csOut * 0.6);\n pContact.style.transform = `translateY(${lerp(100, 0, ease(seg2))}%)`;\n applyFade(ctEye, seg2, 0);\n applyFade(ct1, seg2, 0.1);\n applyFade(ct2, seg2, 0.2);\n applyFade(ct3, seg2, 0.3);\n applyFade(ctFoot, seg2, 0.45);\n requestAnimationFrame(tick);\n }\n requestAnimationFrame(tick);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>toslea \u2014 To sleep easy toslea To sleep easy scroll Something is on its way Coming soon Stay tuned for what’s next Contact Email info@toslea.com Phone Address \u00a9 2026 toslea \u2014 All rights reserved<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":19,"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/pages\/57\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/toslea.com\/index.php\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}