/* ============================================================ ANDRA2 REGISTER V12 — CONSOLIDATED Base + Ultra Premium + Access Granted + unified responsive ============================================================ */ /* ANDRA2 V11 — REGISTER PAGE */ .andra-register-page{position:relative;min-height:790px;margin:0;overflow:hidden;border:1px solid rgba(105,157,210,.16);border-radius:14px;background:#070d15;box-shadow:0 30px 90px rgba(0,0,0,.4)} .andra-register-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,17,.96) 0%,rgba(5,10,17,.78) 42%,rgba(5,10,17,.36) 60%,rgba(5,10,17,.9) 100%),linear-gradient(180deg,rgba(5,9,15,.12),rgba(5,9,15,.86)),url("../img/theme/header-bg.png") center/cover no-repeat;filter:saturate(.92)} .andra-register-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(103,231,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(103,231,255,.025) 1px,transparent 1px),radial-gradient(circle at 60% 40%,rgba(72,126,255,.14),transparent 34%);background-size:36px 36px,36px 36px,auto} .andra-register-hero{position:relative;z-index:2;min-height:790px;padding:58px;display:grid;grid-template-columns:minmax(330px,1fr) minmax(520px,620px);gap:56px;align-items:center} .andra-register-brand{align-self:center;max-width:520px;padding:20px 0 20px 12px} .andra-register-kicker{margin-bottom:18px;color:#71e9ff;font:900 9px/1 Inter,sans-serif;letter-spacing:.25em;text-shadow:0 0 16px rgba(103,231,255,.4)} .andra-register-brand h1{margin:0;color:#fff;font:700 clamp(42px,4vw,68px)/1.02 "Cinzel Decorative",serif;letter-spacing:.015em;text-transform:uppercase;text-shadow:0 8px 35px #000} .andra-register-brand h1 span{color:#d8efff;text-shadow:0 0 30px rgba(91,134,255,.25)} .andra-register-brand>p{max-width:470px;margin:24px 0 28px;color:#a8b7c7;font:500 13px/1.75 Inter,sans-serif} .andra-register-steps{display:flex;align-items:center;gap:8px;margin:0 0 30px} .andra-step{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(116,155,198,.13);border-radius:5px;background:rgba(6,13,22,.58);backdrop-filter:blur(8px)} .andra-step b{color:#61768b;font:900 8px Inter,sans-serif}.andra-step span{color:#7f91a3;font:800 8px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase} .andra-step.is-active{border-color:rgba(103,231,255,.35);box-shadow:inset 2px 0 #67e7ff,0 0 18px rgba(103,231,255,.06)}.andra-step.is-active b,.andra-step.is-active span{color:#dffaff} .andra-register-features{display:grid;gap:11px}.andra-register-features div{display:flex;align-items:center;gap:10px;color:#a8b8c8;font:650 10px Inter,sans-serif}.andra-register-features i{width:7px;height:7px;border-radius:50%;background:#70f6b1;box-shadow:0 0 12px rgba(112,246,177,.6)} .andra-register-panel{position:relative;padding:31px;border:1px solid rgba(112,166,219,.2);border-radius:13px;background:linear-gradient(180deg,rgba(12,20,32,.9),rgba(6,12,21,.95));backdrop-filter:blur(18px);box-shadow:0 30px 75px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.03)} .andra-register-panel:before{content:"";position:absolute;left:0;top:0;width:180px;height:2px;background:linear-gradient(90deg,#67e7ff,#597eff,transparent);box-shadow:0 0 18px rgba(103,231,255,.55)} .andra-panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid rgba(103,231,255,.08)} .andra-panel-head small{display:block;margin-bottom:7px;color:#67e7ff;font:900 7px Inter,sans-serif;letter-spacing:.2em}.andra-panel-head h2{margin:0;color:#f5f9fd;font:700 21px "Cinzel Decorative",serif;letter-spacing:.07em;text-transform:uppercase} .andra-online-dot{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(105,247,176,.16);border-radius:999px;color:#83f6b7;font:900 7px Inter,sans-serif;letter-spacing:.08em}.andra-online-dot:before{content:"";width:5px;height:5px;border-radius:50%;background:#69f7b0;box-shadow:0 0 9px #69f7b0} .andra-register-notice{display:flex;align-items:center;gap:12px;margin:18px 0;padding:12px 14px;border:1px solid rgba(231,193,110,.17);border-radius:6px;background:linear-gradient(90deg,rgba(231,193,110,.07),rgba(231,193,110,.015))} .andra-register-notice>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(231,193,110,.3);border-radius:50%;color:#f0cc7a;font:900 12px Inter,sans-serif}.andra-register-notice strong{display:block;color:#e7edf3;font:800 9px Inter,sans-serif}.andra-register-notice p{margin:3px 0 0;color:#8e9dad;font:500 8px Inter,sans-serif} .andra-register-form{margin:0}.andra-field{margin-bottom:13px}.andra-field label{display:flex;justify-content:space-between;margin:0 0 7px;color:#a9b8c8;font:750 8px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase}.andra-field label em{color:#53677b;font-style:normal;font-weight:650;letter-spacing:.02em;text-transform:none} .andra-input{position:relative}.andra-field-icon{position:absolute;left:1px;top:1px;bottom:1px;width:46px;display:grid;place-items:center;border-right:1px solid rgba(103,231,255,.09);color:#648297;font:900 8px Inter,sans-serif;z-index:2} .andra-register-page .andra-input input{display:block!important;width:100%!important;height:47px!important;margin:0!important;padding:0 14px 0 60px!important;border:1px solid rgba(108,151,195,.2)!important;border-radius:5px!important;outline:none!important;background:#081522!important;background-image:none!important;color:#eef8ff!important;-webkit-text-fill-color:#eef8ff!important;font:550 12px Inter,sans-serif!important;box-shadow:inset 0 1px rgba(255,255,255,.015)!important;transition:.2s ease!important} .andra-register-page .andra-input input:focus{transform:translateY(-1px);border-color:rgba(103,231,255,.68)!important;box-shadow:0 0 0 3px rgba(103,231,255,.05),0 10px 24px rgba(0,0,0,.22)!important}.andra-register-page .andra-input input::placeholder{color:#60758a!important;-webkit-text-fill-color:#60758a!important} .andra-register-page input:-webkit-autofill,.andra-register-page input:-webkit-autofill:hover,.andra-register-page input:-webkit-autofill:focus{-webkit-text-fill-color:#eef8ff!important;-webkit-box-shadow:0 0 0 1000px #081522 inset!important;caret-color:#fff} .andra-register-grid{display:grid;grid-template-columns:150px 1fr;gap:12px} .andra-register-page .text-danger{min-height:0;margin:5px 0 0!important;color:#ff7889!important;font:650 8px Inter,sans-serif!important} .andra-security{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0 0;padding:13px;border:1px solid rgba(105,247,176,.11);border-radius:6px;background:rgba(105,247,176,.025)} .andra-security-copy{display:flex;align-items:center;gap:10px;min-width:145px}.andra-shield{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(105,247,176,.18);border-radius:5px;color:#69f7b0;text-shadow:0 0 10px rgba(105,247,176,.5)}.andra-security-copy strong{display:block;color:#dce9e2;font:750 8px Inter,sans-serif}.andra-security-copy small{display:block;margin-top:3px;color:#627769;font:600 7px Inter,sans-serif} .andra-register-page .cf-turnstile{margin:0!important;transform-origin:right center} .andra-register-submit{position:relative;width:100%;height:55px;margin-top:18px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;overflow:hidden;border:1px solid rgba(103,231,255,.55);border-radius:5px;background:linear-gradient(180deg,#16748c,#0b5068)!important;color:#f6fcff;box-shadow:inset 0 1px rgba(255,255,255,.14),0 13px 30px rgba(0,0,0,.28),0 0 25px rgba(103,231,255,.09);cursor:pointer;transition:.22s ease} .andra-register-submit:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.2) 48%,transparent 70%);transform:translateX(-130%);transition:.65s ease}.andra-register-submit:hover{transform:translateY(-2px);border-color:#96f2ff;filter:brightness(1.12);box-shadow:0 17px 38px rgba(0,0,0,.35),0 0 34px rgba(103,231,255,.16)}.andra-register-submit:hover:before{transform:translateX(130%)} .andra-register-submit span,.andra-register-submit b{position:relative;z-index:2}.andra-register-submit span{font:900 10px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}.andra-register-submit b{color:#9eefff;font:850 7px Inter,sans-serif;letter-spacing:.12em} .andra-register-bottom{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:15px;color:#455a6e;font:850 6px Inter,sans-serif;letter-spacing:.14em}.andra-register-bottom i{width:4px;height:4px;border-radius:50%;background:#50677c} .andra-register-disabled{padding:25px;border:1px solid rgba(255,100,120,.18);border-radius:7px;background:rgba(255,100,120,.04)}.andra-register-disabled strong{color:#ff9daa}.andra-register-disabled p{color:#8999aa} @media(max-width:1100px){.andra-register-hero{grid-template-columns:1fr;padding:35px}.andra-register-brand{display:none}.andra-register-panel{width:min(620px,100%);margin:auto}} @media(max-width:620px){.andra-register-hero{padding:14px}.andra-register-panel{padding:20px 14px}.andra-register-grid{grid-template-columns:1fr}.andra-security{display:block}.andra-register-page .cf-turnstile{margin-top:12px!important;transform-origin:left center}.andra-panel-head h2{font-size:17px}} /* ============================================================ ANDRA2 V11.1 — ULTRA PREMIUM POLISH Append AFTER andra2-register-v11.css ============================================================ */ :root{ --u-cyan:#76ecff; --u-cyan2:#35d7ff; --u-blue:#6288ff; --u-violet:#a17cff; --u-gold:#f0cb78; --u-ink:#050a11; } /* ---------- PAGE / CINEMATIC DEPTH ---------- */ .andra-register-page{ min-height:760px!important; border-color:rgba(118,236,255,.17)!important; background:#050a11!important; box-shadow: 0 38px 120px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.015) inset!important; } .andra-register-backdrop{ background: linear-gradient(90deg, rgba(3,8,14,.97) 0%, rgba(3,8,14,.85) 31%, rgba(3,8,14,.36) 53%, rgba(3,8,14,.72) 68%, rgba(3,8,14,.95) 100%), linear-gradient(180deg, rgba(8,16,30,.04) 0%, rgba(5,9,16,.15) 54%, rgba(3,6,11,.90) 100%), url("../img/theme/header-bg.png") 38% center/cover no-repeat!important; filter:saturate(1.05) contrast(1.04)!important; transform:scale(1.015); } .andra-register-backdrop:before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 33% 44%,rgba(96,151,255,.19),transparent 23%), radial-gradient(circle at 57% 25%,rgba(118,236,255,.08),transparent 20%), radial-gradient(circle at 18% 80%,rgba(161,124,255,.08),transparent 26%); mix-blend-mode:screen; animation:andraAura 8s ease-in-out infinite alternate; } .andra-register-backdrop:after{ background: linear-gradient(rgba(118,236,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.022) 1px,transparent 1px), repeating-linear-gradient(to bottom, transparent 0, transparent 4px, rgba(118,236,255,.012) 5px), radial-gradient(circle at 58% 40%,rgba(73,130,255,.11),transparent 36%)!important; background-size:38px 38px,38px 38px,auto,auto!important; opacity:.82!important; } @keyframes andraAura{ 0%{opacity:.72;transform:translate3d(-8px,0,0) scale(1)} 100%{opacity:1;transform:translate3d(10px,-4px,0) scale(1.02)} } /* ---------- LAYOUT ---------- */ .andra-register-hero{ min-height:760px!important; grid-template-columns:minmax(360px,1fr) minmax(560px,640px)!important; gap:70px!important; padding:52px 64px!important; } .andra-register-brand{ max-width:560px!important; padding-left:18px!important; transform:translateY(-6px); } /* ---------- BRAND / HERO COPY ---------- */ .andra-register-kicker{ position:relative; width:max-content; margin-bottom:20px!important; padding-left:22px; color:#a7f3ff!important; font-size:9px!important; letter-spacing:.28em!important; text-shadow:0 0 18px rgba(118,236,255,.45)!important; } .andra-register-kicker:before{ content:""; position:absolute; left:0; top:50%; width:12px; height:1px; background:var(--u-cyan); box-shadow:0 0 10px var(--u-cyan); } .andra-register-brand h1{ max-width:500px; font-size:clamp(43px,3.6vw,62px)!important; line-height:.98!important; letter-spacing:.005em!important; text-wrap:balance; background:linear-gradient(180deg,#fff 0%,#f4f9ff 44%,#aebfd1 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff!important; filter:drop-shadow(0 10px 26px rgba(0,0,0,.75)); } .andra-register-brand h1 span{ background:linear-gradient(90deg,#fff,#cae9ff 54%,#98b9ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 18px rgba(93,137,255,.16)); } .andra-register-brand>p{ max-width:455px!important; margin-top:26px!important; margin-bottom:30px!important; color:#b3c0cf!important; font-size:12px!important; line-height:1.8!important; text-shadow:0 2px 16px rgba(0,0,0,.75); } /* ---------- STEPS ---------- */ .andra-register-steps{ gap:7px!important; margin-bottom:30px!important; } .andra-step{ position:relative; min-width:96px; min-height:40px; justify-content:center; padding:8px 12px!important; border-radius:4px!important; background:linear-gradient(180deg,rgba(13,24,39,.72),rgba(7,15,25,.74))!important; backdrop-filter:blur(12px)!important; overflow:hidden; } .andra-step:after{ content:""; position:absolute; left:8px; right:8px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(118,236,255,.18),transparent); } .andra-step.is-active{ border-color:rgba(118,236,255,.50)!important; background: linear-gradient(180deg,rgba(27,77,95,.38),rgba(8,22,35,.82))!important; box-shadow: inset 2px 0 var(--u-cyan), 0 0 22px rgba(118,236,255,.07)!important; } .andra-step.is-active:after{ background:linear-gradient(90deg,transparent,var(--u-cyan),transparent); box-shadow:0 0 8px rgba(118,236,255,.55); } .andra-step b{font-size:7px!important} .andra-step span{font-size:7px!important} /* ---------- FEATURE BULLETS ---------- */ .andra-register-features{ gap:12px!important; } .andra-register-features div{ position:relative; width:max-content; min-width:230px; padding:7px 11px 7px 18px; color:#b6c4d3!important; background:linear-gradient(90deg,rgba(10,22,34,.54),transparent); border-left:1px solid rgba(118,236,255,.10); } .andra-register-features i{ width:6px!important; height:6px!important; background:#85ffc3!important; box-shadow: 0 0 0 4px rgba(105,247,176,.045), 0 0 14px rgba(105,247,176,.7)!important; } /* ---------- GLASS FORM PANEL ---------- */ .andra-register-panel{ padding:31px 31px 27px!important; border-color:rgba(125,181,229,.24)!important; border-radius:14px!important; background: radial-gradient(circle at 100% 0,rgba(83,131,255,.12),transparent 30%), linear-gradient(180deg,rgba(14,25,42,.91),rgba(6,13,23,.96))!important; backdrop-filter:blur(22px) saturate(1.08)!important; box-shadow: -25px 0 80px rgba(3,8,14,.28), 0 32px 85px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.035), inset 0 0 55px rgba(82,136,255,.022)!important; } .andra-register-panel:before{ width:230px!important; height:2px!important; background:linear-gradient(90deg,#8cf3ff,#5e88ff 55%,transparent)!important; box-shadow: 0 0 16px rgba(118,236,255,.65), 0 0 30px rgba(99,133,255,.16)!important; } .andra-register-panel:after{ content:""; position:absolute; pointer-events:none; width:44px; height:44px; right:-1px; bottom:-1px; border-right:1px solid rgba(118,236,255,.32); border-bottom:1px solid rgba(118,236,255,.32); clip-path:polygon(55% 0,100% 0,100% 100%,0 100%,0 55%); opacity:.6; } /* ---------- PANEL HEADER ---------- */ .andra-panel-head{ padding-bottom:19px!important; } .andra-panel-head small{ color:#91efff!important; font-size:7px!important; letter-spacing:.23em!important; } .andra-panel-head h2{ font-size:22px!important; letter-spacing:.08em!important; background:linear-gradient(180deg,#fff,#b8c9dc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .andra-online-dot{ padding:7px 10px!important; border-color:rgba(105,247,176,.24)!important; background:rgba(105,247,176,.035); box-shadow:inset 0 0 13px rgba(105,247,176,.025); } /* ---------- NOTICE ---------- */ .andra-register-notice{ min-height:54px; margin:18px 0 17px!important; padding:11px 14px!important; border-color:rgba(240,203,120,.21)!important; background: linear-gradient(90deg,rgba(240,203,120,.075),rgba(240,203,120,.015)), rgba(9,16,27,.48)!important; } .andra-register-notice>span{ flex:0 0 31px; width:31px!important; height:31px!important; border-color:rgba(240,203,120,.38)!important; background:rgba(240,203,120,.035); box-shadow:0 0 16px rgba(240,203,120,.06); } .andra-register-notice strong{ color:#f5e5bd!important; font-size:8px!important; letter-spacing:.06em; text-transform:uppercase; } .andra-register-notice p{ color:#94a4b4!important; font-size:8px!important; } /* ---------- FIELD LABELS ---------- */ .andra-field{ margin-bottom:12px!important; } .andra-field label{ margin-bottom:6px!important; color:#c7d4df!important; font-size:7px!important; letter-spacing:.075em!important; } .andra-field label em{ color:#668197!important; font-size:7px!important; } /* ---------- INPUTS ---------- */ .andra-input{ isolation:isolate; } .andra-field-icon{ width:48px!important; color:#7095ad!important; border-right-color:rgba(118,236,255,.10)!important; background:linear-gradient(90deg,rgba(118,236,255,.025),transparent); transition:.2s ease; } .andra-input:focus-within .andra-field-icon{ color:#a8f5ff!important; text-shadow:0 0 12px rgba(118,236,255,.48); border-right-color:rgba(118,236,255,.27)!important; } .andra-register-page .andra-input input{ height:49px!important; padding-left:62px!important; border-color:rgba(117,162,204,.24)!important; border-radius:6px!important; background: linear-gradient(180deg,#0a1927,#07131f)!important; color:#ecf8ff!important; -webkit-text-fill-color:#ecf8ff!important; caret-color:var(--u-cyan)!important; box-shadow: inset 0 1px rgba(255,255,255,.02), inset 0 -1px rgba(0,0,0,.15), 0 6px 17px rgba(0,0,0,.10)!important; } .andra-register-page .andra-input input:hover{ border-color:rgba(118,236,255,.38)!important; } .andra-register-page .andra-input input:focus{ transform:translateY(-1px)!important; border-color:rgba(118,236,255,.78)!important; background:#071827!important; box-shadow: 0 0 0 3px rgba(118,236,255,.05), 0 10px 26px rgba(0,0,0,.22), 0 0 24px rgba(94,136,255,.10), inset 0 1px rgba(255,255,255,.03)!important; } /* brutal autofill override */ .andra-register-page input:-webkit-autofill, .andra-register-page input:-webkit-autofill:hover, .andra-register-page input:-webkit-autofill:focus, .andra-register-page input:-webkit-autofill:active{ -webkit-text-fill-color:#eefaff!important; caret-color:#fff!important; -webkit-box-shadow: 0 0 0 1000px #081725 inset, 0 0 0 1px rgba(118,236,255,.28)!important; box-shadow: 0 0 0 1000px #081725 inset, 0 0 0 1px rgba(118,236,255,.28)!important; background-color:#081725!important; transition:background-color 99999s ease-out 0s!important; } /* ---------- PIN + EMAIL ---------- */ .andra-register-grid{ grid-template-columns:155px 1fr!important; gap:12px!important; } /* ---------- SECURITY / TURNSTILE ---------- */ .andra-security{ position:relative; min-height:96px; padding:12px 13px!important; border-color:rgba(105,247,176,.16)!important; background: linear-gradient(90deg,rgba(105,247,176,.035),transparent 45%), rgba(5,14,20,.50)!important; overflow:visible; } .andra-security:before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; background:#69f7b0; opacity:.7; box-shadow:0 0 9px rgba(105,247,176,.6); } .andra-shield{ width:33px!important; height:33px!important; border-color:rgba(105,247,176,.28)!important; background:rgba(105,247,176,.035); box-shadow:0 0 15px rgba(105,247,176,.06); } .andra-security-copy strong{ color:#e1f6e8!important; font-size:7px!important; letter-spacing:.04em; } .andra-security-copy small{ color:#607f6e!important; font-size:6px!important; } /* Turnstile is external iframe; make the container integrate visually */ .andra-register-page .cf-turnstile{ position:relative!important; margin:0!important; border-radius:5px; overflow:hidden; filter: saturate(.84) contrast(1.04) drop-shadow(0 10px 20px rgba(0,0,0,.28))!important; } /* ---------- SUBMIT CTA ---------- */ .andra-register-submit{ height:58px!important; margin-top:18px!important; border-color:rgba(118,236,255,.68)!important; border-radius:6px!important; background: radial-gradient(circle at 50% -20%,rgba(255,255,255,.12),transparent 35%), linear-gradient(180deg,#1c89a3 0%,#0b647f 52%,#08475e 100%)!important; box-shadow: inset 0 1px rgba(255,255,255,.20), inset 0 -1px rgba(0,0,0,.24), 0 15px 34px rgba(0,0,0,.30), 0 0 30px rgba(118,236,255,.12)!important; } .andra-register-submit:before{ background: linear-gradient(112deg, transparent 22%, rgba(255,255,255,.08) 39%, rgba(255,255,255,.28) 49%, rgba(118,236,255,.12) 54%, transparent 72%)!important; } .andra-register-submit:after{ content:""; position:absolute; z-index:1; left:14%; right:14%; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#a7f6ff,transparent); box-shadow:0 0 14px rgba(118,236,255,.9); } .andra-register-submit:hover{ transform:translateY(-3px) scale(1.004)!important; filter:brightness(1.12)!important; border-color:#b4f8ff!important; box-shadow: inset 0 1px rgba(255,255,255,.23), 0 20px 44px rgba(0,0,0,.38), 0 0 42px rgba(118,236,255,.21)!important; } .andra-register-submit span{ font-size:10px!important; letter-spacing:.12em!important; } .andra-register-submit b{ color:#bdf6ff!important; font-size:6px!important; opacity:.9; } /* ---------- BOTTOM SYSTEM META ---------- */ .andra-register-bottom{ margin-top:13px!important; color:#4d6980!important; font-size:5px!important; letter-spacing:.18em!important; } .andra-register-bottom i{ background:#74dcef!important; box-shadow:0 0 7px rgba(118,236,255,.45); } /* ---------- TINY AMBIENT PARTICLES ---------- */ .andra-register-page:before, .andra-register-page:after{ content:""; position:absolute; z-index:1; pointer-events:none; border-radius:50%; } .andra-register-page:before{ width:3px;height:3px; left:24%;top:20%; background:#8defff; box-shadow: 110px 80px rgba(116,222,255,.40), -75px 220px rgba(118,236,255,.23), 180px 330px rgba(161,124,255,.24), 420px 100px rgba(118,236,255,.22), 510px 390px rgba(118,236,255,.16); animation:andraParticles 6s ease-in-out infinite alternate; opacity:.6; } .andra-register-page:after{ width:2px;height:2px; left:45%;top:12%; background:#fff; box-shadow: -260px 150px rgba(255,255,255,.18), 350px 210px rgba(118,236,255,.20), 510px 60px rgba(255,255,255,.12), 130px 500px rgba(161,124,255,.18); animation:andraParticles2 9s ease-in-out infinite alternate; opacity:.45; } @keyframes andraParticles{ to{transform:translate3d(8px,-13px,0);opacity:.85} } @keyframes andraParticles2{ to{transform:translate3d(-6px,15px,0);opacity:.7} } /* ---------- RESPONSIVE ---------- */ @media(max-width:1250px){ .andra-register-hero{ grid-template-columns:minmax(300px,.9fr) minmax(520px,1.1fr)!important; gap:42px!important; padding:44px 38px!important; } .andra-register-brand h1{font-size:44px!important} } @media(max-width:1100px){ .andra-register-page{min-height:auto!important} .andra-register-hero{ min-height:auto!important; grid-template-columns:1fr!important; padding:32px!important; } .andra-register-brand{display:none!important} .andra-register-panel{ width:min(660px,100%)!important; margin:auto!important; } } @media(max-width:640px){ .andra-register-hero{padding:12px!important} .andra-register-panel{padding:19px 13px!important;border-radius:9px!important} .andra-register-grid{grid-template-columns:1fr!important} .andra-security{display:block!important} .andra-security-copy{margin-bottom:12px!important} .andra-panel-head h2{font-size:18px!important} .andra-register-submit b{display:none!important} } /* V11.2 minimal retry */ .andra-register-panel .alert-success, .andra-register-panel .success, .andra-register-panel .notification_success{ border-color:rgba(105,247,176,.22)!important; background:linear-gradient(90deg,rgba(105,247,176,.07),rgba(8,22,18,.90) 58%,rgba(6,13,21,.95))!important; color:#dffbed!important; box-shadow:inset 2px 0 #69f7b0,0 12px 30px rgba(0,0,0,.20),0 0 24px rgba(105,247,176,.05)!important; } .andra-register-panel .alert-success:after, .andra-register-panel .success:after, .andra-register-panel .notification_success:after{content:"ACCESS GRANTED";color:rgba(105,247,176,.38)} .andra-register-panel .alert-danger, .andra-register-panel .alert-warning, .andra-register-panel .failed{ border-color:rgba(255,99,119,.22)!important; background:linear-gradient(90deg,rgba(255,99,119,.07),rgba(27,10,15,.90) 55%,rgba(6,13,21,.95))!important; box-shadow:inset 2px 0 #ff6377,0 12px 30px rgba(0,0,0,.20)!important; } .andra-register-panel{padding-top:28px!important;padding-bottom:24px!important} .andra-panel-head{padding-bottom:16px!important} .andra-register-notice{margin-top:15px!important;margin-bottom:15px!important} .andra-field{margin-bottom:10px!important} .andra-field label{margin-bottom:5px!important} .andra-register-page .andra-input input{height:47px!important} .andra-register-grid{gap:10px!important} .andra-security{margin-top:13px!important;min-height:90px!important} .andra-register-submit{margin-top:15px!important} .andra-register-backdrop{filter:saturate(1.13) contrast(1.07) brightness(1.02)!important} .andra-register-brand{position:relative} .andra-register-brand:before{ content:"";position:absolute;z-index:-1;left:-70px;top:110px;width:520px;height:430px;pointer-events:none; background:radial-gradient(ellipse at center,rgba(66,123,255,.16) 0%,rgba(66,123,255,.07) 35%,transparent 70%); filter:blur(6px);transform:rotate(-6deg) } .andra-register-brand h1{position:relative} .andra-register-brand h1:after{ content:"";position:absolute;left:-4%;top:0;width:108%;height:100%;pointer-events:none; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.08) 48%,transparent 62%); transform:translateX(-120%);animation:andraTitleShine 7s ease-in-out infinite;mix-blend-mode:screen } @keyframes andraTitleShine{ 0%,65%{transform:translateX(-120%);opacity:0} 72%{opacity:.7} 86%{transform:translateX(120%);opacity:.35} 100%{transform:translateX(120%);opacity:0} } .andra-register-submit span:before{ content:"";display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%; background:#d9fbff;box-shadow:0 0 10px rgba(217,251,255,.8);vertical-align:1px } .andra-register-submit:hover span:before{background:#87ffd0;box-shadow:0 0 12px rgba(135,255,208,.85)} .andra-security-copy{min-width:160px!important} .andra-security-copy strong{font-size:7px!important;letter-spacing:.045em!important;text-transform:uppercase} @media(max-width:640px){.andra-register-brand:before{display:none}.andra-register-page .andra-input input{height:46px!important}.andra-security{min-height:0!important}} /* ============================================================ FIX — ID / PW / @ icons overlapping text ============================================================ */ .andra-register-page .andra-input { position: relative !important; } .andra-register-page .andra-field-icon { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 52px !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 5 !important; color: #7fa6bd !important; font-size: 8px !important; font-weight: 900 !important; border-right: 1px solid rgba(118, 236, 255, .12) !important; pointer-events: none !important; } /* Главное исправление */ .andra-register-page .andra-input input, .andra-register-page .andra-input input.form-control, .andra-register-page input#username, .andra-register-page input#password, .andra-register-page input#rpassword, .andra-register-page input#email { box-sizing: border-box !important; width: 100% !important; height: 49px !important; padding-top: 0 !important; padding-right: 16px !important; padding-bottom: 0 !important; padding-left: 68px !important; text-indent: 0 !important; line-height: normal !important; } /* Подсветка иконки при вводе */ .andra-register-page .andra-input:focus-within .andra-field-icon { color: #b8f7ff !important; background: linear-gradient( 90deg, rgba(118, 236, 255, .08), rgba(118, 236, 255, .01) ) !important; text-shadow: 0 0 10px rgba(118, 236, 255, .75) !important; border-right-color: rgba(118, 236, 255, .35) !important; } /* ============================================================ ANDRA2 REGISTER — SMALL SCREEN / HEIGHT FIX Должен находиться В САМОМ КОНЦЕ CSS ============================================================ */ /* * Небольшие ноутбуки и экраны с малой высотой. * Не даём регистрационной странице обрезать форму. */ @media (max-width: 1280px), (max-height: 900px) { .andra-register-page { height: auto !important; min-height: 100vh !important; max-height: none !important; overflow-x: hidden !important; overflow-y: visible !important; } .andra-register-hero { height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 24px !important; margin-bottom: 40px !important; overflow: visible !important; } .andra-register-panel { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .andra-register-form { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } } /* ============================================================ TABLET ============================================================ */ @media (max-width: 900px) { .andra-register-page { display: block !important; width: 100% !important; height: auto !important; min-height: 100vh !important; padding: 20px 15px 50px !important; overflow-x: hidden !important; overflow-y: visible !important; } /* * Фон оставляем на месте, * а контент страницы свободно прокручивается поверх него. */ .andra-register-backdrop { position: fixed !important; inset: 0 !important; } /* * Две колонки превращаем в одну. */ .andra-register-hero { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 680px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; overflow: visible !important; } .andra-register-brand { width: 100% !important; height: auto !important; min-height: 0 !important; padding: 40px 32px !important; } .andra-register-brand h1 { font-size: clamp(44px, 9vw, 68px) !important; line-height: .94 !important; } .andra-register-brand p { max-width: 520px !important; } .andra-register-panel { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 28px 30px 26px !important; overflow: visible !important; } .andra-register-form { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .andra-security { height: auto !important; max-height: none !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 640px) { html, body { min-height: 100% !important; height: auto !important; } .andra-register-page { position: relative !important; width: 100% !important; height: auto !important; min-height: 100vh !important; max-height: none !important; padding: 10px 10px 40px !important; overflow-x: hidden !important; overflow-y: visible !important; } .andra-register-hero { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; overflow: visible !important; } /* Верхняя презентационная часть */ .andra-register-brand { width: 100% !important; padding: 28px 20px 25px !important; } .andra-register-kicker { font-size: 8px !important; letter-spacing: .16em !important; } .andra-register-brand h1 { margin-top: 13px !important; font-size: clamp(38px, 12vw, 52px) !important; line-height: .94 !important; } .andra-register-brand p { margin-top: 17px !important; font-size: 12px !important; line-height: 1.65 !important; } /* * Шаги оставляем, * но делаем компактнее. */ .andra-register-steps { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; margin-top: 22px !important; } .andra-step { min-width: 0 !important; padding: 10px 7px !important; } .andra-step b { font-size: 7px !important; } .andra-step span { font-size: 7px !important; } /* * На телефоне этот список только занимает вертикальное место. */ .andra-register-features { display: none !important; } /* Форма */ .andra-register-panel { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 22px 16px 20px !important; overflow: visible !important; } .andra-panel-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding-bottom: 13px !important; } .andra-panel-head h2 { font-size: 27px !important; line-height: 1 !important; } .andra-online-dot { flex: 0 0 auto !important; } .andra-register-notice { margin-top: 10px !important; margin-bottom: 14px !important; padding: 12px !important; } .andra-register-form { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .andra-field { width: 100% !important; margin-bottom: 12px !important; } .andra-field label { margin-bottom: 5px !important; } .andra-field label em { font-size: 7px !important; } .andra-register-page .andra-input { width: 100% !important; } /* * Сохраняем твой фикс ID / PW / @. */ .andra-register-page .andra-field-icon { width: 48px !important; } .andra-register-page .andra-input input, .andra-register-page .andra-input input.form-control, .andra-register-page input#username, .andra-register-page input#password, .andra-register-page input#rpassword, .andra-register-page input#email { width: 100% !important; min-width: 0 !important; height: 47px !important; padding-left: 60px !important; padding-right: 12px !important; box-sizing: border-box !important; } /* * Turnstile располагаем отдельной строкой. */ .andra-security { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; gap: 12px !important; margin-top: 12px !important; padding: 12px !important; overflow: hidden !important; } .andra-security-copy { width: 100% !important; min-width: 0 !important; } .cf-turnstile { display: block !important; max-width: 100% !important; overflow: hidden !important; } .andra-register-submit { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 56px !important; margin-top: 14px !important; } .andra-register-submit span { font-size: 10px !important; } /* * ENTER ANDRA2 справа на телефоне убираем — * кнопка становится заметно чище. */ .andra-register-submit b { display: none !important; } .andra-register-bottom { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 7px !important; margin-top: 15px !important; } } /* ============================================================ VERY SMALL MOBILE ============================================================ */ @media (max-width: 390px) { .andra-register-page { padding-left: 6px !important; padding-right: 6px !important; } .andra-register-brand { padding-left: 16px !important; padding-right: 16px !important; } .andra-register-panel { padding-left: 12px !important; padding-right: 12px !important; } .andra-register-brand h1 { font-size: 36px !important; } .andra-register-steps { grid-template-columns: 1fr !important; } .andra-step { display: flex !important; align-items: center !important; gap: 8px !important; } } /* ============================================================ V12 FINAL RESPONSIVE AUTHORITY This section intentionally comes last. ============================================================ */ .andra-register-page, .andra-register-hero, .andra-register-panel, .andra-register-form { box-sizing: border-box; } /* Never clip the registration vertically. */ .andra-register-page { height: auto !important; max-height: none !important; } .andra-register-hero, .andra-register-panel, .andra-register-form { max-height: none !important; } /* Compact desktop / laptop: keep the form large and usable instead of squeezing two inner columns. */ @media (min-width: 901px) and (max-width: 1600px) { .andra-register-page { min-height: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; } .andra-register-hero { display: block !important; width: 100% !important; max-width: 820px !important; min-height: 0 !important; margin: 0 auto !important; padding: 30px 28px 42px !important; overflow: visible !important; } .andra-register-brand { display: none !important; } .andra-register-panel { width: 100% !important; max-width: 720px !important; min-height: 0 !important; margin: 0 auto !important; padding: 28px 31px 24px !important; overflow: visible !important; } .andra-register-form { width: 100% !important; min-height: 0 !important; overflow: visible !important; } .andra-register-page .andra-input input, .andra-register-page .andra-input input.form-control, .andra-register-page input#username, .andra-register-page input#password, .andra-register-page input#rpassword, .andra-register-page input#email { height: 49px !important; padding-left: 68px !important; padding-right: 16px !important; } .andra-security { width: 100% !important; height: auto !important; min-height: 90px !important; } .andra-register-submit { width: 100% !important; min-height: 58px !important; } } /* Tablet */ @media (max-width: 900px) { html, body { height: auto !important; min-height: 100% !important; } .andra-register-page { position: relative !important; display: block !important; width: 100% !important; min-height: 100vh !important; padding: 18px 14px 44px !important; overflow-x: hidden !important; overflow-y: visible !important; } .andra-register-backdrop { position: absolute !important; inset: 0 !important; transform: none !important; } .andra-register-hero { display: block !important; width: 100% !important; max-width: 680px !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; } /* On tablet/mobile the form is the primary action. */ .andra-register-brand { display: none !important; } .andra-register-panel { position: relative !important; width: 100% !important; max-width: 660px !important; min-height: 0 !important; margin: 0 auto !important; padding: 26px 26px 24px !important; overflow: visible !important; } .andra-register-form { width: 100% !important; min-height: 0 !important; overflow: visible !important; } .andra-register-grid { grid-template-columns: 1fr !important; gap: 10px !important; } } /* Mobile */ @media (max-width: 640px) { .andra-register-page { min-height: 100vh !important; padding: 8px 8px 34px !important; border-radius: 8px !important; } .andra-register-hero { max-width: 100% !important; } .andra-register-panel { width: 100% !important; max-width: 100% !important; padding: 20px 14px 18px !important; border-radius: 9px !important; } .andra-panel-head { gap: 10px !important; padding-bottom: 13px !important; } .andra-panel-head h2 { font-size: 18px !important; line-height: 1.1 !important; } .andra-online-dot { flex: 0 0 auto !important; padding: 6px 8px !important; } .andra-register-notice { margin: 11px 0 13px !important; padding: 11px !important; } .andra-field { width: 100% !important; margin-bottom: 11px !important; } .andra-field label { gap: 8px !important; margin-bottom: 5px !important; } .andra-register-page .andra-field-icon { width: 48px !important; } .andra-register-page .andra-input input, .andra-register-page .andra-input input.form-control, .andra-register-page input#username, .andra-register-page input#password, .andra-register-page input#rpassword, .andra-register-page input#email { width: 100% !important; min-width: 0 !important; height: 47px !important; padding: 0 12px 0 60px !important; box-sizing: border-box !important; } .andra-security { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-height: 0 !important; gap: 11px !important; margin-top: 12px !important; padding: 11px !important; overflow: hidden !important; } .andra-security-copy { width: 100% !important; min-width: 0 !important; margin: 0 !important; } .andra-register-page .cf-turnstile { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; transform-origin: left top !important; overflow: hidden !important; } .andra-register-submit { width: 100% !important; height: auto !important; min-height: 56px !important; margin-top: 14px !important; justify-content: center !important; padding: 0 14px !important; } .andra-register-submit b { display: none !important; } .andra-register-bottom { flex-wrap: wrap !important; gap: 7px !important; margin-top: 13px !important; } } /* Cloudflare Turnstile is about 300px wide in its normal widget form. Scale only on very narrow phones. */ @media (max-width: 360px) { .andra-register-page { padding-left: 5px !important; padding-right: 5px !important; } .andra-register-panel { padding-left: 11px !important; padding-right: 11px !important; } .andra-register-page .cf-turnstile { transform: scale(.90) !important; width: 111.111% !important; margin-bottom: -7px !important; } .andra-register-notice p { line-height: 1.45 !important; } } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .andra-register-backdrop:before, .andra-register-page:before, .andra-register-page:after, .andra-register-brand h1:after { animation: none !important; } .andra-register-submit, .andra-register-page .andra-input input { transition: none !important; } } /* ============================================================ V12.1 — REGISTER LAYOUT HARD FIX ============================================================ */ @media (min-width: 901px) { .andra-register-page { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .andra-register-hero { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 690px !important; max-height: none !important; margin: 0 !important; padding: 28px !important; overflow: hidden !important; } .andra-register-brand { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 45px 42px !important; transform: none !important; } .andra-register-panel { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 28px 30px 24px !important; transform: none !important; overflow: visible !important; } .andra-register-form { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; overflow: visible !important; } .andra-register-grid { width: 100% !important; min-width: 0 !important; } .andra-field, .andra-input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .andra-register-page .andra-input input, .andra-register-page .andra-input input.form-control, .andra-register-page input#username, .andra-register-page input#password, .andra-register-page input#rpassword, .andra-register-page input#email { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .andra-security { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .andra-register-submit { width: 100% !important; max-width: 100% !important; } }