:root{--ink:#2f3a35;--moss:#586248;--sage:#7b8665;--cream:#f7f4ee;--paper:#fffdf9} .wn-belong{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream);min-height:78vh;overflow:hidden;border-radius:28px;position:relative} .belong-scene{display:none;position:relative;min-height:78vh}.belong-scene.is-active{display:flex;align-items:center;justify-content:center;animation:fade .75s ease both}.scene-inner{width:min(1100px,88vw);margin:auto;position:relative;z-index:2} .arrival-inner{text-align:center;max-width:850px;padding:92px 0}.eyebrow{letter-spacing:.23em;font-size:11px;font-weight:700;color:#77816d;margin:0 0 27px}.arrival-inner h1{font:400 clamp(45px,5.8vw,76px)/1.04 Georgia,serif;margin:0;color:#344038} .lede{font:italic 21px/1.6 Georgia,serif;color:#626d63;margin:27px auto 9px}.support{font:17px/1.72 Georgia,serif;color:#667067;max-width:680px;margin:0 auto 34px} .primary-btn{border:0;background:var(--moss);color:white;border-radius:999px;padding:16px 26px;font-size:14px;cursor:pointer;box-shadow:0 12px 30px rgba(47,58,53,.14)} .light-field{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 12%,rgba(255,245,204,.68),transparent 25%),radial-gradient(circle at 18% 76%,rgba(174,194,157,.25),transparent 28%),radial-gradient(circle at 83% 68%,rgba(196,179,157,.18),transparent 27%),linear-gradient(145deg,#faf8f1,#edf1e7 58%,#f5eee5)} .branch{position:absolute;width:320px;height:440px;border-left:1px solid rgba(88,98,72,.13);border-radius:50%;z-index:1}.branch-left{left:-90px;bottom:-100px;transform:rotate(-25deg)}.branch-right{right:-110px;top:-80px;transform:rotate(155deg)} .belong-doors{background:radial-gradient(circle at 50% 10%,rgba(255,247,214,.48),transparent 24%),linear-gradient(180deg,#f7f4ed,#eef1e8 62%,#f5f0e8)}.doors-inner{text-align:center;padding:72px 0 90px}.doors-inner h2{font:400 clamp(39px,5vw,61px)/1.08 Georgia,serif;margin:0;color:#354139}.doors-intro{font:17px/1.65 Georgia,serif;color:#687169;max-width:700px;margin:17px auto 38px} .door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.door-card{min-height:190px;border:1px solid rgba(88,98,72,.13);border-radius:28px;background:rgba(255,253,249,.76);padding:28px 23px;color:var(--ink);cursor:pointer;transition:.3s ease;box-shadow:0 17px 46px rgba(55,64,57,.055)}.door-card:hover,.door-card:focus{transform:translateY(-6px);background:#fffdf9;outline:none;box-shadow:0 24px 55px rgba(55,64,57,.11)} .door-card .mark{display:block;font:32px Georgia,serif;color:#7c886d;margin-bottom:15px}.door-card strong{display:block;font-size:12px;letter-spacing:.13em}.door-card small{display:block;font:15px/1.48 Georgia,serif;color:#6d756e;margin-top:10px}.door-card.looking{background:rgba(246,244,238,.62);border-style:dashed} .door-glimpse{max-width:680px;margin:38px auto 0;padding:36px 40px;background:rgba(255,253,249,.94);border:1px solid rgba(88,98,72,.13);border-radius:28px;text-align:left;position:relative;box-shadow:0 22px 58px rgba(55,64,57,.08);animation:rise .45s ease both}.close{position:absolute;right:17px;top:13px;border:0;background:transparent;font-size:24px;color:#899088;cursor:pointer}.glimpse-label{font-size:9px;letter-spacing:.2em;color:#87917e}.door-glimpse h3{font:400 33px/1.18 Georgia,serif;margin:8px 0 13px}.door-glimpse>p:not(.glimpse-label):not(.preview-note){font:17px/1.65 Georgia,serif;color:#616b63}.home-line{margin-top:23px;padding-top:19px;border-top:1px solid #e5e0d8;font:italic 16px Georgia,serif;color:#66725f}.preview-note{font-size:11px!important;color:#92978f!important;margin-top:17px!important} @keyframes fade{from{opacity:0}to{opacity:1}}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media(max-width:760px){.door-grid{grid-template-columns:1fr 1fr}.arrival-inner{padding:70px 0}.doors-inner{padding:58px 0 72px}} @media(max-width:480px){.door-grid{grid-template-columns:1fr}.door-card{min-height:150px}} /* Preview 2: pathways + Journey homecoming */ .belong-invitations{display:grid;gap:10px;margin-top:25px}.belong-invite{border:1px solid rgba(88,98,72,.14);background:rgba(247,244,238,.6);border-radius:18px;padding:16px 18px;text-align:left;color:var(--ink);cursor:pointer;transition:.25s ease}.belong-invite:hover,.belong-invite:focus{background:#eef1e7;transform:translateX(4px);outline:none}.belong-invite.is-chosen{background:#e5ebdc;border-color:rgba(88,98,72,.32)}.belong-invite strong{display:block;font:400 18px/1.25 Georgia,serif}.belong-invite span{display:block;font-size:13px;line-height:1.45;color:#747c75;margin-top:4px} .not-ready{border:0;background:transparent;padding:18px 1px 2px;color:#697467;font:italic 15px Georgia,serif;cursor:pointer} .belong-close{margin-top:29px;padding:34px 30px;background:linear-gradient(145deg,#f7f4e9,#e9eee1);border:1px solid rgba(88,98,72,.13);border-radius:24px;text-align:center}.close-kicker{font:700 10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:.2em;color:#75816e!important}.belong-close h4{font:400 31px/1.18 Georgia,serif;margin:10px auto 15px;max-width:560px}.belong-close>p:not(.close-kicker){font:15px/1.65 Georgia,serif!important;color:#687269!important;max-width:590px;margin:7px auto!important} .journey-ring{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:27px auto 20px;padding-top:22px;border-top:1px solid rgba(88,98,72,.13)}.journey-ring span{font-size:8px;letter-spacing:.13em;color:#7d877a;padding:6px 8px;border:1px solid rgba(88,98,72,.13);border-radius:999px}.home-signature{font:italic 19px Georgia,serif;color:#596750;margin-top:18px} @media(max-width:600px){.belong-close{padding:28px 18px}.journey-ring{gap:5px}.journey-ring span{font-size:7px;padding:5px 6px}} /* Preview 3: final Journey-path readability pass */ .journey-ring{gap:9px} .journey-ring span{font-size:9.5px;letter-spacing:.14em;color:#687368;border-color:rgba(88,98,72,.18);padding:7px 10px;background:rgba(255,253,249,.32)} @media(max-width:600px){.journey-ring span{font-size:8px;padding:6px 7px}} /* Preview 4: warmer homecoming */ .belong-close{padding:42px 42px 36px;background:radial-gradient(circle at 50% 0,rgba(255,249,218,.45),transparent 34%),linear-gradient(145deg,#faf7ed,#e9eee1)} .belong-close h4{font-size:36px;margin-bottom:20px}.belong-close>p:not(.close-kicker){max-width:620px} .belong-assurance{font-size:18px!important;margin:22px auto!important;color:#465345!important} .you-can-return{margin:25px auto 8px;max-width:460px;font:16px/1.55 Georgia,serif;color:#626e63}.you-can-return strong{display:block;font-size:20px;font-weight:400;margin-bottom:9px;color:#445144}.you-can-return span{display:block} .room-for-you{font-size:19px!important;margin-top:25px!important;color:#485648!important}.home-signature{font-size:22px;margin:20px 0 0} .return-doors{margin-top:34px;padding-top:27px;border-top:1px solid rgba(88,98,72,.14)}.return-doors>p{font-size:9px!important;letter-spacing:.18em!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#7b8577!important}.return-doors .journey-ring{border-top:0;padding-top:7px;margin:8px auto 15px}.return-doors .journey-ring span{font-size:8.5px;background:rgba(255,253,249,.4)} .take-home{border:0;background:transparent;color:#53634c;font-size:13px;font-weight:700;cursor:pointer;padding:8px 12px}.return-doors small{display:block;margin-top:8px;font:italic 12px Georgia,serif;color:#7d8779} @media(max-width:600px){.belong-close{padding:34px 20px 30px}.belong-close h4{font-size:31px}} /* Preview 4.1: functional return navigation */ .return-doors .journey-ring button{ font-size:8.5px;letter-spacing:.13em;color:#687368;padding:7px 10px; border:1px solid rgba(88,98,72,.18);border-radius:999px; background:rgba(255,253,249,.4);cursor:pointer;transition:.2s ease; } .return-doors .journey-ring button:hover, .return-doors .journey-ring button:focus{ background:#eef1e7;color:#3f4c42;transform:translateY(-1px);outline:none; } @media(max-width:600px){.return-doors .journey-ring button{font-size:8px;padding:6px 7px}} /* v1.0.2 CINEMATIC CONNECTION OPENING Visual atmosphere only. No Belong logic, doorway choices, return mapping, or Home routing changes. */ .wn-belong, .wnb, .wnb-wrap, .wellnuvo-belong, .belong-wrap { position: relative; isolation: isolate; } /* Warm connected field: cream, sage and taupe pools gently overlap. */ .wn-belong::before, .wnb::before, .wnb-wrap::before, .wellnuvo-belong::before, .belong-wrap::before { content: ""; position: absolute; z-index: -2; inset: -30px -28px -36px; border-radius: 40px; pointer-events: none; background: radial-gradient(ellipse at 18% 22%, rgba(183,170,151,.18) 0 18%, transparent 43%), radial-gradient(ellipse at 82% 20%, rgba(123,134,101,.18) 0 17%, transparent 42%), radial-gradient(ellipse at 72% 82%, rgba(88,98,72,.10) 0 18%, transparent 43%), radial-gradient(ellipse at 34% 76%, rgba(255,255,255,.74) 0 16%, transparent 40%), linear-gradient(145deg, rgba(255,253,249,.98), rgba(247,244,238,.97) 52%, rgba(231,234,223,.76)); box-shadow: 0 28px 76px rgba(55,64,57,.10), inset 0 1px 0 rgba(255,255,255,.90); } /* Abstract connection motif: overlapping forms, not people, so belonging stays open-ended. */ .wn-belong::after, .wnb::after, .wnb-wrap::after, .wellnuvo-belong::after, .belong-wrap::after { content: ""; position: absolute; z-index: -1; top: -18px; right: -18px; width: clamp(260px, 38vw, 500px); height: clamp(260px, 38vw, 500px); pointer-events: none; opacity: .68; background: radial-gradient(circle at 58% 38%, rgba(255,255,255,.56) 0 13%, transparent 14%), radial-gradient(ellipse at 72% 32%, rgba(123,134,101,.17) 0 20%, transparent 21%), radial-gradient(ellipse at 52% 56%, rgba(183,170,151,.14) 0 22%, transparent 23%), radial-gradient(ellipse at 80% 67%, rgba(88,98,72,.10) 0 18%, transparent 19%); filter: blur(.3px); transform: rotate(-6deg); } .wn-belong h1,.wn-belong h2, .wnb h1,.wnb h2, .wnb-wrap h1,.wnb-wrap h2, .wellnuvo-belong h1,.wellnuvo-belong h2, .belong-wrap h1,.belong-wrap h2 { text-wrap: balance; text-shadow: 0 1px 0 rgba(255,255,255,.64); } .wn-belong button,.wn-belong a[class*="button"],.wn-belong .button, .wnb button,.wnb a[class*="button"],.wnb .button, .wnb-wrap button,.wnb-wrap a[class*="button"],.wnb-wrap .button, .wellnuvo-belong button,.wellnuvo-belong a[class*="button"],.wellnuvo-belong .button, .belong-wrap button,.belong-wrap a[class*="button"],.belong-wrap .button { box-shadow: 0 12px 28px rgba(55,64,57,.12); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; } .wn-belong button:hover,.wn-belong a[class*="button"]:hover,.wn-belong .button:hover, .wnb button:hover,.wnb a[class*="button"]:hover,.wnb .button:hover, .wnb-wrap button:hover,.wnb-wrap a[class*="button"]:hover,.wnb-wrap .button:hover, .wellnuvo-belong button:hover,.wellnuvo-belong a[class*="button"]:hover,.wellnuvo-belong .button:hover, .belong-wrap button:hover,.belong-wrap a[class*="button"]:hover,.belong-wrap .button:hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(55,64,57,.16); filter: brightness(1.02); } @media (max-width:700px) { .wn-belong::before,.wnb::before,.wnb-wrap::before,.wellnuvo-belong::before,.belong-wrap::before { inset: -18px -10px -24px; border-radius: 28px; } .wn-belong::after,.wnb::after,.wnb-wrap::after,.wellnuvo-belong::after,.belong-wrap::after { right: -30px; top: 0; opacity: .46; } } /* v1.0.3 CINEMATIC BELONGING Stronger visible atmosphere, while preserving all experience logic. */ .wn-belong { position: relative; isolation: isolate; overflow: hidden; } /* Enveloping warm field */ .wn-belong::before { content: ""; position: absolute; z-index: -3; inset: -36px -34px -42px; pointer-events: none; border-radius: 42px; background: radial-gradient(ellipse at 10% 22%, rgba(183,170,151,.32) 0 15%, rgba(183,170,151,.12) 30%, transparent 52%), radial-gradient(ellipse at 91% 20%, rgba(123,134,101,.31) 0 15%, rgba(123,134,101,.11) 31%, transparent 53%), radial-gradient(ellipse at 84% 86%, rgba(88,98,72,.20) 0 16%, transparent 44%), radial-gradient(ellipse at 17% 84%, rgba(255,255,255,.88) 0 14%, transparent 42%), linear-gradient(135deg, #fffdf9 0%, #f7f4ee 43%, #ece9df 68%, #e3e7d8 100%); box-shadow: 0 32px 86px rgba(55,64,57,.13), inset 0 1px 0 rgba(255,255,255,.94); } /* Visible converging organic light forms */ .wn-belong::after { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .95; background: radial-gradient(ellipse at 4% 34%, rgba(88,98,72,.16) 0 8%, transparent 9%), radial-gradient(ellipse at 12% 48%, rgba(123,134,101,.19) 0 10%, transparent 11%), radial-gradient(ellipse at 5% 64%, rgba(183,170,151,.20) 0 11%, transparent 12%), radial-gradient(ellipse at 96% 31%, rgba(123,134,101,.18) 0 9%, transparent 10%), radial-gradient(ellipse at 88% 49%, rgba(88,98,72,.16) 0 11%, transparent 12%), radial-gradient(ellipse at 96% 67%, rgba(183,170,151,.18) 0 10%, transparent 11%), radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.64) 0 19%, transparent 42%); filter: blur(.2px); } /* Fine branch/root traces coming inward from both sides */ .wn-belong .branch-left, .wn-belong .branch-right { opacity: .42 !important; filter: drop-shadow(0 5px 12px rgba(55,64,57,.08)); } .wn-belong .branch-left { transform: scale(1.12) translate(8px, 2px); transform-origin: left center; } .wn-belong .branch-right { transform: scale(1.12) translate(-8px, 2px); transform-origin: right center; } .wn-belong .arrival-inner { position: relative; z-index: 2; } /* Soft luminous center so the copy remains the emotional anchor */ .wn-belong .arrival-inner::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 48%; width: min(760px, 88%); height: 82%; transform: translate(-50%,-50%); border-radius: 48% 52% 46% 54% / 52% 44% 56% 48%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,253,249,.90) 0%, rgba(255,253,249,.66) 42%, rgba(255,253,249,.16) 68%, transparent 78%); filter: blur(1px); } .wn-belong .eyebrow { letter-spacing: .24em; } .wn-belong .primary-btn { box-shadow: 0 15px 34px rgba(55,64,57,.18), inset 0 1px 0 rgba(255,255,255,.18); } .wn-belong .primary-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(55,64,57,.22), inset 0 1px 0 rgba(255,255,255,.20); } @media (max-width: 700px) { .wn-belong::before { inset: -20px -12px -28px; border-radius: 30px; } .wn-belong::after { opacity: .72; } .wn-belong .branch-left, .wn-belong .branch-right { opacity: .25 !important; } .wn-belong .arrival-inner::before { width: 96%; height: 88%; } }