/* ===================================================================== HAVN Onboarding & Login — immersive front-end Theme tokens mirror the flagship landing page (Fraunces + Inter, gold on near-black, glass cards). ===================================================================== */ .havn-ob{ --bg:#0a0a0c; --ink:#050506; --text:#F4F4F5; --muted:#9CA3AF; --muted-2:#6b7280; --gold:#D4B370; --gold-2:#c8a45c; --gold-bright:#F2C94C; --champagne:#E9C877; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06); --glass:rgba(9,9,11,.66); --bad:#e2766c; --ok:#8fbf9a; --radius:22px; --radius-sm:12px; --ease:cubic-bezier(.2,.7,.2,1); position:relative; min-height:100vh; min-height:100dvh; width:100vw; margin-left:calc(50% - 50vw); /* escape any theme gutter */ background:var(--ink); color:var(--text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:400; line-height:1.6; overflow:hidden; -webkit-font-smoothing:antialiased; color-scheme:dark; display:flex; flex-direction:column; } body.havn-ob-body{margin:0; background:var(--ink)} body.havn-ob-body #wpadminbar{opacity:.25} body.havn-ob-body #wpadminbar:hover{opacity:1} .havn-ob *{box-sizing:border-box} .havn-ob ::selection{background:var(--gold); color:#000} .havn-ob a{color:var(--gold); text-decoration:none} .havn-ob a:hover{color:var(--champagne)} /* ---------- entrance ---------- */ @keyframes havnObIn{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}} .havn-ob [style*="--d"]{animation:havnObIn .8s var(--ease) both; animation-delay:var(--d)} @keyframes havnObCard{from{opacity:0; transform:translateY(22px) scale(.975)}to{opacity:1; transform:none}} /* ---------- background layers ---------- */ .havn-ob-bg{position:absolute; inset:0; pointer-events:none; overflow:hidden} .havn-ob-mist{position:absolute; border-radius:50%; filter:blur(110px); opacity:.5; will-change:transform} .havn-ob-m1{width:56vw; height:56vw; left:-16vw; top:-22vw; background:radial-gradient(circle at 40% 40%, rgba(212,179,112,.16), transparent 62%); animation:havnObDrift1 34s ease-in-out infinite alternate} .havn-ob-m2{width:48vw; height:48vw; right:-14vw; bottom:-18vw; background:radial-gradient(circle at 60% 60%, rgba(94,110,140,.17), transparent 64%); animation:havnObDrift2 41s ease-in-out infinite alternate} .havn-ob-m3{width:34vw; height:34vw; left:32vw; top:44%; background:radial-gradient(circle at 50% 50%, rgba(212,179,112,.08), transparent 60%); animation:havnObDrift3 28s ease-in-out infinite alternate} @keyframes havnObDrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.14)}} @keyframes havnObDrift2{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-8vw,-6vh) scale(.96)}} @keyframes havnObDrift3{from{transform:translate(0,0)}to{transform:translate(-6vw,-9vh) scale(1.2)}} .havn-ob-particles{position:absolute; inset:0; width:100%; height:100%} .havn-ob-grid{position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.6px); background-size:36px 36px; -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%, #000 0%, transparent 78%); mask-image:radial-gradient(ellipse 75% 70% at 50% 45%, #000 0%, transparent 78%); opacity:.6} .havn-ob-vignette{position:absolute; inset:0; background:radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%)} /* ---------- stage ---------- */ .havn-ob-stage{position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:clamp(18px,3.5vh,44px) clamp(16px,4vw,44px); flex:1; display:flex; flex-direction:column; justify-content:center; gap:20px} .havn-ob-home{display:inline-flex; width:max-content} .havn-ob-logo-sm{height:34px; width:auto; display:block; opacity:.92; transition:opacity .25s} .havn-ob-home:hover .havn-ob-logo-sm{opacity:1} /* ---------- card ---------- */ .havn-ob-card{position:relative; display:grid; grid-template-columns:1.08fr .92fr; background:var(--glass); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(212,179,112,.05), 0 0 120px rgba(212,179,112,.05); animation:havnObCard .9s var(--ease) both .05s} .havn-ob-pane{padding:clamp(26px,4.5vw,54px)} .havn-ob-form-pane{display:flex; flex-direction:column; justify-content:center} .havn-ob-solo{grid-column:1/-1; align-items:flex-start} /* ---------- headings + copy ---------- */ .havn-ob-eyebrow{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 14px; display:flex; align-items:center; gap:10px} .havn-ob-eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); display:inline-block} .havn-ob-title{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(28px,3.4vw,40px); line-height:1.08; letter-spacing:-.015em; margin:0 0 10px; color:var(--text)} .havn-ob-title em{font-style:italic; color:var(--gold)} .havn-ob-sub{color:var(--muted); font-size:14.5px; margin:0 0 22px; max-width:44ch} /* ---------- banner ---------- */ @keyframes havnObDrop{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}} .havn-ob-banner{border:1px solid rgba(226,118,108,.4); background:rgba(120,40,36,.22); color:#f4c1bc; border-radius:var(--radius-sm); padding:11px 14px; font-size:13px; margin:0 0 18px; animation:havnObDrop .4s var(--ease) both} .havn-ob-banner.is-ok{border-color:rgba(143,191,154,.4); background:rgba(38,84,52,.22); color:#c4e4cc} .havn-ob-banner.is-info{border-color:rgba(212,179,112,.4); background:rgba(212,179,112,.09); color:#E9D9B8} /* ---------- form grid ---------- */ .havn-ob-form{display:grid; grid-template-columns:1fr 1fr; gap:14px 14px; margin:0} .havn-ob-field{grid-column:1/-1; position:relative; margin:0; display:block} .havn-ob-field.is-half{grid-column:auto/span 1} @media(max-width:560px){.havn-ob-field.is-half{grid-column:1/-1}} .havn-ob-label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:0 0 7px; transition:color .25s} .havn-ob-field:focus-within .havn-ob-label{color:var(--gold)} .havn-ob-req{color:var(--gold); font-style:normal; margin-left:3px} .havn-ob-input{width:100%; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.13); border-radius:13px; color:var(--text); font-family:inherit; font-size:14.5px; padding:13px 15px; outline:none; transition:border-color .25s, box-shadow .25s, background .25s; -webkit-appearance:none; appearance:none} .havn-ob-input::placeholder{color:var(--muted-2)} .havn-ob-input:hover{border-color:rgba(255,255,255,.22)} .havn-ob-input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,179,112,.14), 0 0 24px rgba(212,179,112,.07); background:rgba(255,255,255,.05)} .havn-ob-field.is-bad .havn-ob-input{border-color:var(--bad); box-shadow:0 0 0 3px rgba(226,118,108,.12)} textarea.havn-ob-input{resize:vertical; min-height:84px} .havn-ob-selwrap{position:relative} .havn-ob-selwrap::after{content:"\25BE"; position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--gold); pointer-events:none; font-size:13px} .havn-ob-selwrap select{cursor:pointer; padding-right:38px} .havn-ob-selwrap select option{background:#101014; color:var(--text)} /* errors + hints */ .havn-ob-err{display:block; color:var(--bad); font-size:12px; margin-top:6px; min-height:0} .havn-ob-err:empty{display:none} .havn-ob-hint{display:block; font-size:12px; margin-top:6px; color:var(--muted-2)} .havn-ob-hint.is-ok{color:var(--ok)} .havn-ob-hint.is-bad{color:var(--bad)} .havn-ob-hint:empty{display:none} @keyframes havnObShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}} .havn-ob-field.is-shake{animation:havnObShake .5s both} /* password */ .havn-ob-passwrap{position:relative} .havn-ob-passwrap .havn-ob-input{padding-right:64px} .havn-ob-peek{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; color:var(--muted-2); font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:8px; transition:color .2s} .havn-ob-peek:hover{color:var(--gold)} .havn-ob-strength{display:flex; align-items:center; gap:5px; margin-top:8px; height:14px} .havn-ob-strength i{height:3px; flex:1; max-width:44px; border-radius:2px; background:rgba(255,255,255,.1); transition:background .35s} .havn-ob-strength b{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-left:6px} .havn-ob-strength[data-lvl="1"] i:nth-child(-n+1){background:#c46a60} .havn-ob-strength[data-lvl="2"] i:nth-child(-n+2){background:#c98a4e} .havn-ob-strength[data-lvl="3"] i:nth-child(-n+3){background:var(--gold)} .havn-ob-strength[data-lvl="4"] i:nth-child(-n+4){background:var(--ok)} .havn-ob-strength[data-lvl="1"] b{color:#c46a60} .havn-ob-strength[data-lvl="2"] b{color:#c98a4e} .havn-ob-strength[data-lvl="3"] b{color:var(--gold)} .havn-ob-strength[data-lvl="4"] b{color:var(--ok)} /* checkboxes + consent */ .havn-ob-checkrow{display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:13.5px; color:var(--muted); position:relative; flex-wrap:wrap} .havn-ob-checkrow input[type=checkbox]{position:absolute; opacity:0; width:1px; height:1px} .havn-ob-check{width:21px; height:21px; flex:0 0 21px; border-radius:7px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.03); position:relative; transition:all .25s var(--ease); margin-top:1px} .havn-ob-check::after{content:"\2713"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#1a1408; font-size:13px; font-weight:700; transform:scale(0); transition:transform .3s cubic-bezier(.35,1.6,.4,1)} .havn-ob-checkrow input:checked + .havn-ob-check, .havn-ob-checkrow input:checked ~ .havn-ob-check{background:linear-gradient(180deg,var(--champagne),var(--gold-2)); border-color:var(--gold)} .havn-ob-checkrow input:checked + .havn-ob-check::after, .havn-ob-checkrow input:checked ~ .havn-ob-check::after{transform:scale(1)} .havn-ob-checkrow input:focus-visible + .havn-ob-check, .havn-ob-checkrow input:focus-visible ~ .havn-ob-check{box-shadow:0 0 0 3px rgba(212,179,112,.2)} .havn-ob-check-txt{flex:1; min-width:200px; line-height:1.5} .havn-ob-checkrow .havn-ob-err{flex-basis:100%; margin-left:32px} .havn-ob-consent.is-bad .havn-ob-check{border-color:var(--bad); box-shadow:0 0 0 3px rgba(226,118,108,.12)} .havn-ob-doclink{background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:inherit; color:var(--gold); font-weight:600; text-decoration:underline; text-decoration-color:rgba(212,179,112,.35); text-underline-offset:3px; transition:color .2s} .havn-ob-doclink:hover{color:var(--champagne); text-decoration-color:var(--champagne)} /* honeypot */ .havn-ob-hp{display:none !important} /* login extras */ .havn-ob-loginrow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap} .havn-ob-remember{font-size:13px} .havn-ob-forgot{font-size:13px; color:var(--muted); text-decoration:none} .havn-ob-forgot:hover{color:var(--gold)} /* tier picker */ .havn-ob-tiers{display:grid; grid-template-columns:1fr 1fr; gap:10px} @media(max-width:560px){.havn-ob-tiers{grid-template-columns:1fr}} .havn-ob-tier{position:relative; cursor:pointer; display:block; margin:0} .havn-ob-tier input{position:absolute; opacity:0; width:1px; height:1px} .havn-ob-tier-in{display:flex; flex-direction:column; gap:3px; border:1px solid rgba(255,255,255,.12); border-radius:15px; padding:14px 15px 12px; background:rgba(255,255,255,.025); transition:all .3s var(--ease); position:relative; overflow:hidden} .havn-ob-tier-in::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tier,#D4B370); opacity:.4; transition:opacity .3s} .havn-ob-tier:hover .havn-ob-tier-in{transform:translateY(-2px); border-color:rgba(255,255,255,.24)} .havn-ob-tier input:checked + .havn-ob-tier-in{border-color:var(--tier,#D4B370); background:rgba(212,179,112,.07); box-shadow:0 0 0 1px var(--tier,#D4B370), 0 8px 28px rgba(212,179,112,.13)} .havn-ob-tier input:checked + .havn-ob-tier-in::before{opacity:1} .havn-ob-tier input:focus-visible + .havn-ob-tier-in{box-shadow:0 0 0 3px rgba(212,179,112,.25)} .havn-ob-tier-name{font-family:'Fraunces',Georgia,serif; font-size:16.5px; font-weight:600; color:var(--text)} .havn-ob-tier-price{font-size:13px; color:var(--gold); font-weight:600} .havn-ob-tier-price em{font-style:normal; color:var(--muted-2); font-weight:400; font-size:11.5px} .havn-ob-tier-tag{font-size:11.5px; color:var(--muted-2); line-height:1.4} .havn-ob-tier-pick{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--tier,#D4B370); max-height:0; opacity:0; overflow:hidden; transition:all .35s var(--ease); margin-top:0} .havn-ob-tier input:checked + .havn-ob-tier-in .havn-ob-tier-pick{max-height:20px; opacity:1; margin-top:5px} /* submit */ .havn-ob-submit{position:relative; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 22px; border:0; border-radius:14px; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:700; color:#1a1408; background:linear-gradient(180deg,var(--champagne),var(--gold-2)); box-shadow:0 10px 30px rgba(212,179,112,.22), inset 0 1px 0 rgba(255,255,255,.4); transition:transform .25s var(--ease), box-shadow .25s, filter .25s; text-decoration:none; letter-spacing:.01em} .havn-ob-submit:hover{transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 16px 40px rgba(212,179,112,.3), inset 0 1px 0 rgba(255,255,255,.4); color:#1a1408} .havn-ob-submit:active{transform:translateY(0)} .havn-ob-spin{display:none; width:16px; height:16px; border:2px solid rgba(26,20,8,.25); border-top-color:#1a1408; border-radius:50%; animation:havnObSpin .7s linear infinite} @keyframes havnObSpin{to{transform:rotate(360deg)}} .havn-ob-submit.is-busy{pointer-events:none; filter:saturate(.8) brightness(.96)} .havn-ob-submit.is-busy .havn-ob-spin{display:inline-block} .havn-ob-ghost{display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:14px; border:1px solid var(--line); color:var(--text); font-weight:600; font-size:14px; transition:border-color .25s, color .25s} .havn-ob-ghost:hover{border-color:var(--gold); color:var(--gold)} .havn-ob-row{display:flex; gap:12px; flex-wrap:wrap} .havn-ob-row .havn-ob-submit{width:auto} /* alt links */ .havn-ob-alt{margin-top:20px; font-size:13px; color:var(--muted)} .havn-ob-dot{margin:0 7px; color:var(--muted-2)} /* ---------- brand pane ---------- */ .havn-ob-brand-pane{position:relative; border-left:1px solid var(--line-2); display:flex; align-items:center; background: linear-gradient(200deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.62) 45%, rgba(8,8,10,.9) 100%), url(brand-interior.jpg) center/cover no-repeat; } .havn-ob-brand-pane::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 90% 70% at 70% 20%, rgba(212,179,112,.13), transparent 60%); pointer-events:none} .havn-ob-brand-in{position:relative; z-index:1; width:100%} .havn-ob-logo{width:min(190px,52%); height:auto; margin:0 0 26px} .havn-ob-brand-h{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(26px,2.8vw,36px); line-height:1.12; letter-spacing:-.015em; margin:0 0 14px; color:var(--text)} @keyframes havnObWord{from{opacity:0; transform:translateY(14px); filter:blur(7px)}to{opacity:1; transform:none; filter:blur(0)}} .havn-ob-w{display:inline-block; animation:havnObWord .9s var(--ease) both; animation-delay:var(--d)} .havn-ob-brand-sub{color:var(--muted); font-size:14px; max-width:38ch; margin:0 0 22px} .havn-ob-ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px} .havn-ob-ticks li{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--text); opacity:0; animation:havnObIn .7s var(--ease) forwards} .havn-ob-ticks li:nth-child(1){animation-delay:1s} .havn-ob-ticks li:nth-child(2){animation-delay:1.15s} .havn-ob-ticks li:nth-child(3){animation-delay:1.3s} .havn-ob-ticks li:nth-child(4){animation-delay:1.45s} .havn-ob-ticks li:nth-child(5){animation-delay:1.6s} .havn-ob-ticks li:nth-child(6){animation-delay:1.75s} .havn-ob-tick{color:var(--gold); flex-shrink:0; font-size:13px; margin-top:1px} .havn-ob-brand-line{height:1px; background:linear-gradient(90deg, var(--gold), transparent); opacity:.5; margin:6px 0 18px; max-width:220px} .havn-ob-brand-q{font-size:13.5px; color:var(--muted); margin:0 0 13px} .havn-ob-pills{display:flex; gap:10px; flex-wrap:wrap} .havn-ob-pill{display:inline-flex; align-items:center; padding:11px 22px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#1a1408; background:linear-gradient(180deg,var(--champagne),var(--gold-2)); transition:transform .25s var(--ease), box-shadow .25s} .havn-ob-pill:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(212,179,112,.3); color:#1a1408} /* ---------- footer ---------- */ .havn-ob-foot{display:flex; align-items:center; justify-content:center; gap:4px; font-size:12px; color:var(--muted-2); flex-wrap:wrap} .havn-ob-foot .havn-ob-doclink{font-size:12px; font-weight:500; color:var(--muted); text-decoration-color:transparent} .havn-ob-foot .havn-ob-doclink:hover{color:var(--gold)} /* ---------- legal modals ---------- */ .havn-ob-modal{position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,36px)} .havn-ob-modal[hidden]{display:none} .havn-ob-modal-scrim{position:absolute; inset:0; background:rgba(3,3,4,.72); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); animation:havnObFade .35s both} @keyframes havnObFade{from{opacity:0}to{opacity:1}} @keyframes havnObPop{from{opacity:0; transform:translateY(16px) scale(.965)}to{opacity:1; transform:none}} .havn-ob-modal-card{position:relative; width:min(760px,100%); max-height:min(84vh,860px); display:flex; flex-direction:column; background:#0c0c0f; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 90px rgba(212,179,112,.06); animation:havnObPop .45s var(--ease) both} .havn-ob-modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 26px 16px; border-bottom:1px solid var(--line-2)} .havn-ob-modal-head h3{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:22px; margin:0; color:var(--text)} .havn-ob-modal-date{margin:4px 0 0; font-size:12px; color:var(--muted-2)} .havn-ob-modal-x{background:none; border:0; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; padding:2px 8px; border-radius:8px; transition:color .2s, background .2s} .havn-ob-modal-x:hover{color:var(--text); background:rgba(255,255,255,.06)} .havn-ob-modal-body{padding:20px 26px; overflow-y:auto; font-size:13.5px; color:#cfd2d6; line-height:1.7; overscroll-behavior:contain} .havn-ob-modal-body h2{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:17px; color:var(--text); margin:22px 0 8px} .havn-ob-modal-body h2:first-child{margin-top:0} .havn-ob-modal-body p{margin:0 0 12px} .havn-ob-modal-body ul{margin:0 0 14px; padding-left:20px} .havn-ob-modal-body li{margin:0 0 7px} .havn-ob-modal-body strong{color:var(--text)} .havn-ob-modal-body a{color:var(--gold)} .havn-ob-modal-body::-webkit-scrollbar{width:9px} .havn-ob-modal-body::-webkit-scrollbar-track{background:transparent} .havn-ob-modal-body::-webkit-scrollbar-thumb{background:rgba(212,179,112,.28); border-radius:99px} .havn-ob-modal-foot{padding:14px 26px 20px; border-top:1px solid var(--line-2); display:flex; justify-content:flex-end} .havn-ob-agreebtn{border:0; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.03em; padding:12px 22px; border-radius:12px; color:#1a1408; background:linear-gradient(180deg,var(--champagne),var(--gold-2)); transition:transform .25s var(--ease), box-shadow .25s} .havn-ob-agreebtn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(212,179,112,.28)} html.havn-ob-lock, html.havn-ob-lock body{overflow:hidden !important} /* ---------- success overlay ---------- */ .havn-ob-success{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:30px; background:rgba(6,6,8,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); animation:havnObFade .5s both} .havn-ob-success[hidden]{display:none} @keyframes havnObRing{0%{transform:scale(.5); opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1); opacity:1}} @keyframes havnObTick{0%,45%{transform:scale(0) rotate(-14deg)}75%{transform:scale(1.2)}100%{transform:scale(1)}} @keyframes havnObPulse{0%{box-shadow:0 0 0 0 rgba(212,179,112,.35)}100%{box-shadow:0 0 0 26px rgba(212,179,112,0)}} .havn-ob-success-ring{width:92px; height:92px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:16px; animation:havnObRing .7s var(--ease) both, havnObPulse 1.6s var(--ease) .5s 2; background:radial-gradient(circle, rgba(212,179,112,.14), transparent 70%)} .havn-ob-success-tick{font-size:38px; color:var(--gold); animation:havnObTick 1s var(--ease) both} .havn-ob-success-title{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(24px,3vw,34px); margin:0; color:var(--text)} .havn-ob-success-sub{color:var(--muted); font-size:14px; margin:6px 0 20px} .havn-ob-success-bar{width:min(240px,70%); height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden} .havn-ob-success-bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-2),var(--champagne)); animation:havnObBar 1.5s var(--ease) .3s forwards} @keyframes havnObBar{to{width:100%}} /* --------------------------------------------------------------------- Validation feedback — live-site cascade guard. The live theme sets text colours at BODY level with !important, which repaints our red error text to ordinary body text. A genuine typo (say, mismatched passwords) then reads like an unexplained system failure instead of "fix this field". Same body-qualified !important treatment as the buttons below, including -webkit-text-fill-color. --------------------------------------------------------------------- */ body .havn-ob .havn-ob-err, body .havn-ob .havn-ob-hint.is-bad{ color:var(--bad) !important; -webkit-text-fill-color:var(--bad) !important; font-weight:500; } body .havn-ob .havn-ob-hint.is-ok{ color:var(--ok) !important; -webkit-text-fill-color:var(--ok) !important; } /* and make the offending field itself unmistakable */ body .havn-ob .havn-ob-field.is-bad .havn-ob-input{ border-color:var(--bad) !important; box-shadow:0 0 0 3px rgba(226,118,108,.16) !important; } /* --------------------------------------------------------------------- Anchors styled as buttons — live-site cascade guard. Two things repaint these if we only set `color` normally: 1. our own generic `.havn-ob a` gold link colour, and 2. the live theme, which sets link colours at BODY level with !important (gold on a gold pill = invisible text). Body-qualified + !important is the minimum that reliably wins, and -webkit-text-fill-color is set too because it beats `color` outright wherever a theme uses it for gradient/clipped text. --------------------------------------------------------------------- */ body .havn-ob a.havn-ob-pill, body .havn-ob a.havn-ob-pill:link, body .havn-ob a.havn-ob-pill:visited, body .havn-ob a.havn-ob-pill:hover, body .havn-ob a.havn-ob-pill:focus, body .havn-ob a.havn-ob-pill:active, body .havn-ob a.havn-ob-submit, body .havn-ob a.havn-ob-submit:link, body .havn-ob a.havn-ob-submit:visited, body .havn-ob a.havn-ob-submit:hover, body .havn-ob a.havn-ob-submit:focus, body .havn-ob a.havn-ob-submit:active{ color:#1a1408 !important; -webkit-text-fill-color:#1a1408 !important; } /* the same treatment for the