/* ============================================================ auth.css — the way in: log in, create an account, recover access Copied VERBATIM from Carolain's styles/login.css and not edited. Unlike the app screens, this file KEEPS her :root. The auth pages are the only ones that do not load the shell, so her palette has to travel with the file. Every other rule in her file resolves against it. Her page is one document with three views, switched by body[data-view]. Ours are five documents; each one sets the data-view its content belongs to, so her rules keep working with only that view's markup present. Anything our data forces lives in the ADDITIONS block at the end. Never edit her rules in place. TYPE FLOOR (Kolmena, applied mechanically): every font-size below 11px was raised to 11px and nothing else was touched. ============================================================ */ :root{--ink:#111312;--muted:#6e716f;--amber:#f5a400;--amber-2:#ffb91d;--line:#e6e3dd;--cream:#fff8ec;--dark:#121413;--green:#4caf6a} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e9e7e2;color:var(--ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}.shell{width:min(1440px,100%);min-height:100vh;margin:auto;background:white;display:grid;grid-template-columns:55% 45%;overflow:hidden}.story{position:relative;min-height:100vh;padding:42px 58px;color:#fff;background:radial-gradient(circle at 90% 8%,rgba(245,164,0,.25),transparent 27%),radial-gradient(circle at 20% 100%,rgba(245,164,0,.13),transparent 28%),#121413;overflow:hidden}.brand{position:relative;z-index:10;display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:24px}.brand-mark,.tiny-mark{position:relative;display:inline-grid;place-items:center;width:36px;height:40px;background:linear-gradient(145deg,var(--amber-2),var(--amber));clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%)}.brand-mark:after,.tiny-mark:after{content:"";width:17px;height:20px;background:var(--dark);clip-path:inherit}.story-copy{position:absolute;z-index:5;left:58px;top:18%;width:min(540px,76%)}.story-copy .eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--amber-2);font-size:12px;font-weight:700;margin:0 0 18px}.story-copy h1{font-size:clamp(38px,4.1vw,62px);line-height:1.05;letter-spacing:-.045em;margin:0}.story-copy h1 em{color:var(--amber-2);font-style:normal}.story-copy .intro{color:#c9cbc9;font-size:17px;line-height:1.65;max-width:480px;margin:23px 0 0}.benefits{display:grid;gap:19px;margin-top:35px;max-width:430px}.benefits article{display:flex;align-items:center;gap:15px}.mini-icon{display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;color:var(--amber-2);background:rgba(255,255,255,.08);border:1px solid rgba(255,185,29,.2);clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);font-size:22px}.benefits b,.benefits small{display:block}.benefits b{font-size:14px}.benefits small{color:#9fa3a0;margin-top:3px}.story-register,.story-recover{display:none}.network{position:absolute;right:4%;bottom:12%;width:48%;aspect-ratio:1/1;z-index:3}.network:before,.network:after{content:"";position:absolute;border:1px solid rgba(245,164,0,.25);transform:rotate(30deg)}.network:before{inset:12%}.network:after{inset:28%;border-color:rgba(255,255,255,.13)}.avatar,.hub{position:absolute;width:104px;aspect-ratio:1;clip-path:polygon(50% 0,93% 24%,93% 75%,50% 100%,7% 75%,7% 24%);padding:4px;background:linear-gradient(150deg,#fff,var(--amber));z-index:3}.avatar img{width:100%;height:100%;object-fit:cover;clip-path:inherit;filter:saturate(.85)}.a1{top:0;left:36%}.a2{top:31%;left:5%;}.a3{bottom:2%;left:17%}.a4{bottom:8%;right:1%}.hub{width:122px;left:39%;top:41%;background:rgba(245,164,0,.78);filter:drop-shadow(0 0 16px rgba(245,164,0,.35));display:grid;place-items:center}.hub:after{content:"";position:absolute;inset:2px;background:#1a1c1b;clip-path:inherit}.hub span{position:relative;z-index:2;font-size:48px;color:var(--amber-2)}.line{position:absolute;height:1px;background:rgba(245,164,0,.65);transform-origin:left}.l1{width:36%;top:29%;left:23%;transform:rotate(25deg)}.l2{width:31%;top:49%;left:20%;transform:rotate(27deg)}.l3{width:37%;top:60%;left:49%;transform:rotate(30deg)}.dot{position:absolute;width:9px;height:9px;background:var(--amber-2);border-radius:50%;box-shadow:0 0 15px var(--amber)}.d1{top:29%;left:25%}.d2{top:69%;left:12%}.d3{top:48%;right:7%}.secure-card,.story blockquote{display:none}.community-pill{position:absolute;z-index:5;bottom:44px;left:58px;width:400px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border-radius:18px;padding:12px 20px;display:flex;align-items:center;gap:18px}.faces{display:flex}.faces img,.faces span{width:42px;height:42px;border-radius:50%;object-fit:cover;margin-left:-9px;border:2px solid #242725}.faces img:first-child{margin-left:0}.faces span{display:grid;place-items:center;background:var(--av,var(--amber));font-weight:700}.community-pill p{margin:0}.community-pill b,.community-pill small{display:block}.community-pill small{color:#afb2af;margin-top:2px}.access{position:relative;min-height:100vh;background:#fff;display:flex;justify-content:center}.topbar{position:absolute;top:40px;right:8%;display:flex;align-items:center;gap:22px;font-size:13px;z-index:3}.topbar a,.topbar button{font:inherit;color:inherit;text-decoration:none;border:0;background:none;cursor:pointer}.topbar .divider{width:1px;height:20px;background:#ddd}.form-wrap{width:min(470px,76%);display:flex;flex-direction:column;justify-content:center;padding:110px 0 45px}.form-heading{margin-bottom:30px}.tiny-mark{width:27px;height:31px;margin-bottom:16px}.tiny-mark:after{width:12px;height:14px;background:#fff}.form-heading h2{font-size:36px;line-height:1.1;letter-spacing:-.035em;margin:0 0 9px}.form-heading p{margin:0;color:#858784;font-size:15px}.auth-form{display:grid;gap:18px}.auth-form label{font-size:12px;font-weight:600}.field{height:52px;border:1px solid var(--line);border-radius:10px;margin-top:8px;display:flex;align-items:center;gap:12px;padding:0 14px;box-shadow:0 1px 3px rgba(0,0,0,.025);transition:.2s}.field:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,164,0,.12)}.field>span{color:#969996;font-size:17px}.field input{border:0;outline:0;min-width:0;width:100%;font:inherit;font-size:14px;background:none}.field input::placeholder{color:#a3a5a2}.eye{border:0;background:0;color:#969996;cursor:pointer}.form-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px}.form-meta a,.switch a,.legal a{color:#d98900;text-decoration:underline;text-underline-offset:2px}.check{display:flex;align-items:center;gap:9px!important;color:#747774;font-weight:400!important;cursor:pointer}.check input{display:none}.check span{width:17px;height:17px;border:1px solid var(--amber);border-radius:4px}.check input:checked+span{background:var(--amber);box-shadow:inset 0 0 0 3px white}.primary{height:55px;border:0;border-radius:10px;background:linear-gradient(100deg,#ec9600,var(--amber-2));box-shadow:0 10px 25px rgba(245,164,0,.22);font:700 14px inherit;cursor:pointer;position:relative;transition:.2s}.primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(245,164,0,.28)}.primary b{position:absolute;right:18px;font-size:22px;top:14px}.or{display:flex;align-items:center;gap:14px;color:#858784;font-size:11px}.or:before,.or:after{content:"";height:1px;flex:1;background:var(--line)}.socials{display:grid;grid-template-columns:1fr 1fr;gap:10px}.socials button{height:52px;border:1px solid var(--line);background:#fff;border-radius:10px;font:600 13px inherit;cursor:pointer}.socials button:hover{background:#faf9f7}.google{font-size:20px;color:#4285f4;margin-right:8px}.microsoft{font-size:23px;color:#f25022;margin-right:8px}.switch{text-align:center;margin:2px 0;font-size:13px;color:#686b68}.legal{margin:auto 0 0;text-align:center;color:#9b9d9b;font-size:11px}.form-register,.form-recover{display:none}.form-register{gap:12px}.form-register .field{height:47px;margin-top:5px}.strength{display:flex;gap:7px;align-items:center}.strength i{height:3px;flex:1;border-radius:3px;background:#ddd}.strength i:first-child{background:var(--amber)}.strength small{font-size:11px;color:#777;margin-left:7px}.rules{list-style:none;margin:-2px 0 4px;padding:0;display:grid;gap:3px;font-size:11px;color:#5d605d}.rules li:before{content:"✓";color:var(--green);border:1px solid var(--green);border-radius:50%;display:inline-grid;place-items:center;width:12px;height:12px;margin-right:7px;font-size:11px}.notice{margin-top:12px;background:#fff9f0;border-radius:12px;padding:19px;display:flex;gap:14px}.notice>span{width:37px;height:37px;display:grid;place-items:center;color:var(--amber);border:1px solid #ffd587;border-radius:50%;font-size:20px}.notice p{margin:0}.notice b,.notice small{display:block}.notice small{color:#777;line-height:1.5;margin-top:3px}.toast{position:fixed;left:50%;bottom:28px;z-index:50;transform:translate(-50%,20px);opacity:0;background:#191b1a;color:white;padding:12px 18px;border-radius:9px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)} body[data-view="register"] .story-login,body[data-view="register"] .community-pill,body[data-view="register"] .form-login,body[data-view="recover"] .story-login,body[data-view="recover"] .community-pill,body[data-view="recover"] .form-login{display:none}body[data-view="register"] .story-register,body[data-view="register"] .form-register,body[data-view="register"] .secure-card,body[data-view="recover"] .story-recover,body[data-view="recover"] .form-recover,body[data-view="recover"] .story blockquote{display:grid}body[data-view="register"] .story-copy{top:18%}body[data-view="register"] .network{bottom:21%;width:54%;right:21%}body[data-view="register"] .secure-card{position:absolute;left:58px;bottom:48px;z-index:4;width:360px;padding:17px;border:1px solid rgba(245,164,0,.16);border-radius:12px;background:rgba(255,255,255,.035);grid-template-columns:45px 1fr;gap:14px}.secure-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--amber);border:1px solid rgba(245,164,0,.3);border-radius:9px}.secure-card b,.secure-card small{display:block}.secure-card small{color:#a9aca9;line-height:1.4;margin-top:3px}body[data-view="register"] .form-wrap{padding-top:95px;padding-bottom:28px}body[data-view="register"] .form-heading{margin-bottom:20px}body[data-view="register"] .form-heading h2{font-size:32px}body[data-view="recover"] .network{width:58%;right:12%;bottom:23%}body[data-view="recover"] .avatar{display:none}body[data-view="recover"] .hub{width:170px;left:35%;top:35%}body[data-view="recover"] .hub span:before{content:"▣";font-size:70px}body[data-view="recover"] .hub span{font-size:0}body[data-view="recover"] .story blockquote{position:absolute;left:58px;bottom:70px;margin:0;color:#c6c9c6;font-style:normal;font-size:15px;line-height:1.5}body[data-view="recover"] .story blockquote b{color:var(--amber)}body[data-view="recover"] .form-wrap{justify-content:center}body[data-view="recover"] .auth-form{gap:22px} @media(max-width:1000px){.shell{grid-template-columns:45% 55%}.story{padding:32px}.brand{font-size:20px}.story-copy{left:32px;width:82%}.story-copy h1{font-size:40px}.benefits,.community-pill{display:none}.network{width:80%;right:-10%}.form-wrap{width:78%}body[data-view="register"] .secure-card{left:32px;width:calc(100% - 64px)}body[data-view="recover"] .story blockquote{left:32px}} @media(max-width:720px){body{background:#fff}.shell{display:block}.story{min-height:300px;padding:26px 24px;border-radius:0 0 26px 26px}.story-copy{top:105px;left:24px;width:85%}.story-copy .eyebrow{display:none}.story-copy h1{font-size:34px}.story-copy .intro{font-size:14px;line-height:1.5;margin-top:14px}.benefits,.network,.community-pill,.secure-card,.story blockquote{display:none!important}.access{min-height:auto}.topbar{position:relative;top:auto;right:auto;justify-content:flex-end;width:100%;padding:20px 24px 0}.form-wrap{width:100%;padding:38px 24px 30px}.form-heading{margin-bottom:26px}.tiny-mark{display:none}.form-heading h2{font-size:30px}.legal{margin-top:38px}body[data-view="register"] .story,body[data-view="recover"] .story{min-height:250px}body[data-view="register"] .story-copy,body[data-view="recover"] .story-copy{top:105px}body[data-view="register"] .form-wrap{padding:35px 24px}.topbar a{font-size:0}.topbar a:first-letter{font-size:14px}} @media(max-width:420px){.story-copy h1{font-size:30px}.topbar{gap:12px}.form-wrap{padding-left:19px;padding-right:19px}.form-meta{align-items:flex-start;gap:10px}.check{max-width:145px}.socials{grid-template-columns:1fr}.brand-mark{width:30px;height:34px}.brand{font-size:19px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.primary,.field,.toast{transition:none}} /* Refined visual pass: the login follows the light reference, while sign-up and recovery stay dark. */ .kolmena-logo{width:34px;height:39px;overflow:visible}.kolmena-logo path{fill:none;stroke:var(--amber);stroke-width:2.3;stroke-linejoin:round}.tiny-kolmena{width:27px;height:31px;margin-bottom:17px}.tiny-kolmena path{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-linejoin:round}.social-logo{width:21px;height:21px;flex:0 0 auto}.ms-logo{width:19px;height:19px}.socials button{display:flex;align-items:center;justify-content:center;gap:10px;color:#202124}.socials button span{line-height:1} body[data-view="login"] .story{color:var(--ink);background:radial-gradient(circle at 78% 35%,rgba(245,164,0,.14),transparent 28%),linear-gradient(130deg,#fffdf8 0%,#fff7e9 66%,#fff4dc 100%)} body[data-view="login"] .tiny-kolmena{display:none} body[data-view="login"] .brand{color:var(--ink)}body[data-view="login"] .story-copy{top:16.5%;width:59%;max-width:510px}body[data-view="login"] .story-copy .eyebrow{display:none}body[data-view="login"] .story-copy h1{font-size:clamp(38px,3vw,48px);line-height:1.08}body[data-view="login"] .story-copy .intro{color:#666b67;font-size:15px;line-height:1.55;margin-top:18px}body[data-view="login"] .benefits{margin-top:30px;gap:17px}body[data-view="login"] .benefits b{color:#222522}body[data-view="login"] .benefits small{color:#6f746f;line-height:1.4}body[data-view="login"] .mini-icon{background:#fff;color:var(--amber);border-color:#f3e4c9;filter:drop-shadow(0 7px 10px rgba(86,67,34,.08))} body[data-view="login"] .network{width:37%;right:1%;bottom:21%}body[data-view="login"] .network:before{border-color:rgba(236,150,0,.32)}body[data-view="login"] .network:after{border-color:rgba(236,150,0,.17)}body[data-view="login"] .avatar{width:90px;background:#fff;filter:drop-shadow(0 8px 10px rgba(75,54,20,.12))}body[data-view="login"] .a3{display:none}body[data-view="login"] .hub{width:70px;background:white;filter:drop-shadow(0 8px 12px rgba(75,54,20,.11))}body[data-view="login"] .hub:after{background:#fff}body[data-view="login"] .hub span{font-size:30px;color:var(--amber)}body[data-view="login"] .line{background:rgba(236,150,0,.55);border-top:1px dashed rgba(236,150,0,.7);height:0}body[data-view="login"] .dot{box-shadow:0 0 10px rgba(245,164,0,.45)}body[data-view="login"] .community-pill{color:var(--ink);background:rgba(255,255,255,.78);border-color:#fff;box-shadow:0 12px 35px rgba(110,77,23,.09);backdrop-filter:blur(18px)}body[data-view="login"] .community-pill small{color:#6d716e} .access:after{content:"";pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 100% 50%,rgba(245,164,0,.025),transparent 38%)}.form-wrap{position:relative;z-index:1}.form-heading h2{font-weight:700}.field{background:#fff}.primary{color:#171915}.socials button{box-shadow:0 1px 2px rgba(0,0,0,.025)} @media(min-width:721px) and (max-height:800px){.story{padding-top:30px;padding-bottom:30px}.story-copy{top:15%}.story-copy h1{font-size:40px}.story-copy .intro{margin-top:14px}.benefits{margin-top:19px;gap:12px}.community-pill{bottom:25px}.form-wrap{padding-top:86px;padding-bottom:25px}.form-heading{margin-bottom:20px}.auth-form{gap:13px}.field{height:48px}.primary{height:50px}.socials button{height:47px}body[data-view="register"] .form-wrap{padding-top:76px}.form-register{gap:8px}body[data-view="register"] .form-heading{margin-bottom:12px}} @media(max-width:1000px){body[data-view="login"] .story-copy{width:78%}body[data-view="login"] .network{opacity:.34;width:70%;right:-28%}} @media(max-width:720px){body[data-view="login"] .story{background:linear-gradient(145deg,#fffdf8,#fff2d9)}body[data-view="login"] .story-copy{top:104px;width:87%}body[data-view="login"] .story-copy h1{font-size:34px}.kolmena-logo{width:29px;height:34px}} /* Icons, depth and motion */ .svg-sprite{position:absolute;width:0;height:0;overflow:hidden}.mini-icon svg,.field-icon svg,.eye svg,.topbar svg,.secure-icon svg,.notice svg,.hub svg{width:18px;height:auto;aspect-ratio:1;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mini-icon svg{width:23px;height:23px}.field-icon{display:grid;place-items:center}.field-icon svg{width:17px;height:17px}.eye{display:grid;place-items:center;padding:5px}.eye svg{width:18px;height:18px}.topbar button,.topbar a{display:flex;align-items:center;gap:8px}.topbar svg{width:17px;height:17px}.secure-icon svg{width:24px;height:24px}.notice svg{width:21px;height:21px}.hub svg{position:relative;z-index:2;width:46px;height:46px;fill:none;stroke:var(--amber);stroke-width:1.5}.hub-lock{display:none}.story:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) .7px,transparent .7px);background-size:5px 5px;mix-blend-mode:soft-light;opacity:.45}.story>*{position:relative}.story>.ambient,.story>.network,.story>.community-pill,.story>.secure-card,.story>blockquote{position:absolute}.ambient{width:420px;height:420px;border-radius:50%;filter:blur(95px);pointer-events:none;opacity:.34}.ambient-one{right:-180px;top:-190px;background:#f3a300}.ambient-two{left:-220px;bottom:-220px;background:#d87f00}.brand,.story-copy,.community-pill,.secure-card,.story blockquote{z-index:6}.network{z-index:3;transition:transform .18s ease-out}.network:before,.network:after{border-radius:22px;box-shadow:0 0 40px rgba(245,164,0,.03)}.avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);transition:transform .25s ease,filter .25s ease}.avatar:hover{transform:translateY(-7px) scale(1.04);filter:drop-shadow(0 14px 18px rgba(245,164,0,.28))}.dot{animation:pulse-dot 2.2s ease-in-out infinite}.d2{animation-delay:.5s}.d3{animation-delay:1s}.line{overflow:visible}.line:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--amber);right:0;top:-3px;box-shadow:0 0 13px var(--amber);animation:travel 2.8s ease-in-out infinite}.l2:after{animation-delay:.8s}.l3:after{animation-delay:1.5s}.form-heading,.auth-form{animation:rise-in .55s cubic-bezier(.2,.75,.25,1) both}.auth-form{animation-delay:.09s}.field{position:relative;overflow:hidden}.field:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:linear-gradient(90deg,var(--amber),var(--amber-2));transition:right .3s ease}.field:focus-within:after{right:0}.primary{overflow:hidden}.primary:before{content:"";position:absolute;inset:-100% -35%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.42) 49%,transparent 63%);transform:translateX(-55%);transition:transform .65s ease}.primary:hover:before{transform:translateX(55%)}.community-pill{box-shadow:0 18px 48px rgba(80,55,15,.1)!important}.socials button{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.socials button:hover{transform:translateY(-2px);border-color:#d6d2ca;box-shadow:0 8px 20px rgba(0,0,0,.06)}body[data-view="login"] .story:after{background-image:radial-gradient(rgba(220,148,15,.08) .7px,transparent .7px)}body[data-view="login"] .ambient-one{opacity:.17;right:-120px;top:120px}body[data-view="login"] .ambient-two{opacity:.08}.access{box-shadow:-12px 0 40px rgba(30,24,15,.035)} .eye.is-visible{color:var(--amber)}.strength i{transition:background .2s ease,box-shadow .2s ease}.strength i.active{background:var(--amber);box-shadow:0 0 7px rgba(245,164,0,.3)}.rules li{transition:color .2s ease}.rules li.valid{color:#319151}.rules li.valid:before{background:#4caf6a;color:white} body[data-view="register"] .hub,body[data-view="recover"] .hub{background:linear-gradient(145deg,#282a28,#131514);border:1px solid rgba(245,164,0,.65);box-shadow:0 0 0 14px rgba(245,164,0,.025),0 15px 45px rgba(0,0,0,.35)}body[data-view="register"] .hub:after,body[data-view="recover"] .hub:after{background:linear-gradient(145deg,#272927,#151716)}body[data-view="recover"] .hub{width:178px;background:linear-gradient(145deg,#ffbd2d,#ed9200);filter:drop-shadow(0 22px 28px rgba(245,164,0,.25))}body[data-view="recover"] .hub:after{background:linear-gradient(145deg,#ffb923,#e99200)}body[data-view="recover"] .hub-people{display:none}body[data-view="recover"] .hub-lock{display:block;width:74px;height:74px;stroke:#171918;stroke-width:1.35}body[data-view="recover"] .network:before,body[data-view="recover"] .network:after{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(245,164,0,.06));border-color:rgba(255,255,255,.22);backdrop-filter:blur(4px)}body[data-view="register"] .network{filter:drop-shadow(0 18px 38px rgba(0,0,0,.25))} body.view-changing .form-heading,body.view-changing .auth-form{animation:none;opacity:0;transform:translateY(9px)} @keyframes rise-in{from{transform:translateY(14px)}to{transform:translateY(0)}}@keyframes pulse-dot{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.25);opacity:1}}@keyframes travel{0%,100%{opacity:0;transform:translateX(-70px)}20%,75%{opacity:1}85%{transform:translateX(0);opacity:0}} @media(prefers-reduced-motion:reduce){.dot,.line:after,.form-heading,.auth-form{animation:none}.network{transition:none}} /* Login composition — mirrors the supplied vertical honeycomb layout. */ .network-node{display:none} @media(min-width:1001px){ body[data-view="login"] .story{padding:38px 50px} body[data-view="login"] .brand{font-size:22px} body[data-view="login"] .story-copy{left:50px;top:clamp(120px,17%,165px);width:48%;max-width:350px} body[data-view="login"] .story-copy h1{font-size:clamp(38px,3.05vw,47px);letter-spacing:-.047em} body[data-view="login"] .story-copy .intro{max-width:370px;font-size:clamp(13px,1vw,15px);line-height:1.55;margin-top:16px} body[data-view="login"] .benefits{width:min(370px,100%);gap:18px;margin-top:28px} body[data-view="login"] .benefits article{gap:13px} body[data-view="login"] .mini-icon{width:46px;height:50px;flex-basis:46px} body[data-view="login"] .benefits b{font-size:13px} body[data-view="login"] .benefits small{font-size:12px;line-height:1.42} body[data-view="login"] .network{display:block;width:clamp(265px,40%,335px);height:auto;aspect-ratio: .78;right:0;top:9%;bottom:auto} body[data-view="login"] .network:before{inset:9% 6% 17% 16%;transform:rotate(31deg);border-radius:0} body[data-view="login"] .network:after{inset:26% 10% 30% 10%;transform:rotate(31deg);border-radius:0} body[data-view="login"] .avatar{width:clamp(78px,7.2vw,98px)} body[data-view="login"] .a1{top:7%;left:47%} body[data-view="login"] .a2{top:34%;left:12%} body[data-view="login"] .a4{top:66%;right:9%;bottom:auto} body[data-view="login"] .hub{top:0;left:1%;width:57px} body[data-view="login"] .hub svg{width:27px;height:27px} body[data-view="login"] .line.l1{width:45%;top:21%;left:17%;transform:rotate(20deg)} body[data-view="login"] .line.l2{width:45%;top:50%;left:27%;transform:rotate(17deg)} body[data-view="login"] .line.l3{width:42%;top:70%;left:40%;transform:rotate(22deg)} body[data-view="login"] .d1{top:24%;left:14%} body[data-view="login"] .d2{top:57%;left:17%} body[data-view="login"] .d3{top:67%;right:5%} body[data-view="login"] .network-node{position:absolute;z-index:5;display:grid;place-items:center;width:53px;height:58px;color:var(--amber);background:#fff;clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);filter:drop-shadow(0 8px 12px rgba(75,54,20,.1))} body[data-view="login"] .network-node svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} body[data-view="login"] .node-calendar{right:0;top:39%} body[data-view="login"] .node-chart{left:20%;top:78%} body[data-view="login"] .node-cube{right:11%;top:90%;width:28px;height:31px;background:linear-gradient(145deg,#fff,#ffdc94)} body[data-view="login"] .community-pill{left:50px;top:clamp(520px,70vh,690px);bottom:auto;width:min(64%,500px);padding:13px 18px;border-radius:14px;gap:16px} body[data-view="login"] .faces img,body[data-view="login"] .faces span{width:39px;height:39px} body[data-view="login"] .community-pill b{font-size:14px} body[data-view="login"] .community-pill small{font-size:12px} } @media(min-width:1001px) and (max-height:760px){ body[data-view="login"] .story-copy{top:15%} body[data-view="login"] .story-copy h1{font-size:37px} body[data-view="login"] .story-copy .intro{font-size:12px;margin-top:12px} body[data-view="login"] .benefits{margin-top:18px;gap:11px} body[data-view="login"] .mini-icon{width:40px;height:44px;flex-basis:40px} body[data-view="login"] .network{top:9%;width:290px} body[data-view="login"] .community-pill{top:auto;bottom:28px} } /* Keep the hero anchored to the panel; the generic depth rule above must not return it to document flow. */ .story>.story-copy{position:absolute} /* Large desktop scale: preserve the proportions of the 1020px reference on wider screens. */ @media(min-width:1250px) and (min-height:780px){ .shell{grid-template-columns:55.2% 44.8%} .story{padding:46px 58px} .brand{font-size:25px;gap:13px} .kolmena-logo{width:39px;height:44px} body[data-view="login"] .story-copy{left:58px;top:clamp(145px,16.5vh,175px);width:48%;max-width:390px} body[data-view="login"] .story-copy h1{font-size:clamp(47px,3.55vw,53px);line-height:1.04} body[data-view="login"] .story-copy .intro{max-width:390px;font-size:16px;line-height:1.55;margin-top:21px} body[data-view="login"] .benefits{width:380px;gap:21px;margin-top:33px} body[data-view="login"] .benefits article{gap:16px} body[data-view="login"] .mini-icon{width:53px;height:58px;flex-basis:53px} body[data-view="login"] .mini-icon svg{width:27px;height:27px} body[data-view="login"] .benefits b{font-size:14px} body[data-view="login"] .benefits small{font-size:13px;margin-top:4px} body[data-view="login"] .network{width:clamp(340px,46%,395px);right:-1%;top:8.5%} body[data-view="login"] .avatar{width:clamp(98px,7.8vw,112px)} body[data-view="login"] .hub{width:66px} body[data-view="login"] .hub svg{width:31px;height:31px} body[data-view="login"] .network-node{width:61px;height:66px} body[data-view="login"] .network-node svg{width:29px;height:29px} body[data-view="login"] .node-cube{width:32px;height:35px} body[data-view="login"] .community-pill{left:58px;top:clamp(700px,73vh,755px);width:min(65%,520px);min-height:74px;padding:14px 20px} body[data-view="login"] .faces img,body[data-view="login"] .faces span{width:45px;height:45px} body[data-view="login"] .community-pill b{font-size:15px} body[data-view="login"] .community-pill small{font-size:13px} .topbar{top:45px;right:7%;font-size:14px;gap:24px} .topbar svg{width:18px;height:18px} .form-wrap{width:min(520px,80%);padding-top:105px} .form-heading{margin-bottom:34px} .form-heading h2{font-size:42px} .form-heading p{font-size:17px} .auth-form{gap:20px} .auth-form label{font-size:13px} .field{height:58px;border-radius:11px;padding-inline:16px} .field input{font-size:15px} .form-meta,.switch{font-size:13px} .primary{height:59px;font-size:15px} .socials button{height:56px;font-size:14px} .legal{font-size:11px} } /* Sign-up composition — compact copy above, people network clearly below it. */ @media(min-width:1001px){ body[data-view="register"] .story-copy{left:54px;top:12.5%;width:72%;max-width:570px} body[data-view="register"] .story-copy .eyebrow{font-size:12px;margin-bottom:17px} body[data-view="register"] .story-copy h1{font-size:clamp(38px,3.25vw,48px);line-height:1.08;letter-spacing:-.04em} body[data-view="register"] .story-copy .intro{max-width:500px;margin-top:18px;font-size:15px;line-height:1.55} body[data-view="register"] .network{width:clamp(400px,57%,475px);right:12%;top:33%;bottom:auto} body[data-view="register"] .avatar{width:clamp(82px,7vw,103px)} body[data-view="register"] .hub{width:clamp(105px,9vw,130px)} body[data-view="register"] .secure-card{left:54px;bottom:4.5%;width:min(48%,390px);padding:17px 19px} body[data-view="register"] .secure-card b{font-size:13px} body[data-view="register"] .secure-card small{font-size:11px} body[data-view="register"] .network-node{display:none} } @media(min-width:1250px) and (min-height:780px){ body[data-view="register"] .story-copy{left:54px;top:12%;max-width:600px} body[data-view="register"] .story-copy h1{font-size:47px} body[data-view="register"] .story-copy .intro{font-size:16px} body[data-view="register"] .network{width:455px;right:13%;top:33%} body[data-view="register"] .secure-card{left:54px;bottom:4.5%;width:390px;min-height:96px;align-items:center} body[data-view="register"] .secure-icon{width:48px;height:48px} body[data-view="register"] .secure-card b{font-size:14px} body[data-view="register"] .secure-card small{font-size:12px} } @media(min-width:1001px) and (max-height:760px){ body[data-view="register"] .story-copy{top:12%} body[data-view="register"] .story-copy h1{font-size:36px} body[data-view="register"] .story-copy .intro{font-size:12px;margin-top:12px} body[data-view="register"] .network{width:350px;top:34%;right:14%} body[data-view="register"] .secure-card{bottom:3%;min-height:auto} } /* Stronger hierarchy for the sign-up form on full desktop. */ @media(min-width:1250px) and (min-height:780px){ body[data-view="register"] .form-wrap{width:min(550px,86%);padding-top:96px;padding-bottom:30px} body[data-view="register"] .form-heading{margin-bottom:24px} body[data-view="register"] .tiny-kolmena{width:31px;height:36px;margin-bottom:18px} body[data-view="register"] .form-heading h2{font-size:44px;line-height:1.05} body[data-view="register"] .form-heading p{font-size:18px;margin-top:11px} body[data-view="register"] .form-register{gap:14px} body[data-view="register"] .auth-form label{font-size:14px} body[data-view="register"] .field{height:60px;margin-top:7px;padding-inline:17px;border-radius:11px} body[data-view="register"] .field input{font-size:16px} body[data-view="register"] .field-icon svg{width:18px;height:18px} body[data-view="register"] .eye svg{width:19px;height:19px} body[data-view="register"] .strength{gap:8px;margin-top:1px} body[data-view="register"] .strength i{height:4px} body[data-view="register"] .strength small{font-size:11px;white-space:nowrap} body[data-view="register"] .rules{font-size:11.5px;gap:4px;margin-top:1px} body[data-view="register"] .rules li:before{width:14px;height:14px;font-size:11px;margin-right:8px} body[data-view="register"] .primary{height:63px;margin-top:4px;font-size:16px;border-radius:11px} body[data-view="register"] .primary b{top:16px;font-size:24px} body[data-view="register"] .or{font-size:12px} body[data-view="register"] .socials{gap:12px} body[data-view="register"] .socials button{height:58px;font-size:15px} body[data-view="register"] .switch{font-size:14px;margin-top:3px} body[data-view="register"] .legal{font-size:11px} } /* Desktop auth screens always fit inside the viewport; mobile keeps natural scrolling. */ @media(min-width:721px){ html,body{height:100%;overflow:hidden} .shell{height:100dvh;min-height:0} .story,.access{height:100%;min-height:0} .form-wrap{height:100%;max-height:100%;overflow:hidden} } /* Compact vertical rhythm for laptops and short desktop windows. */ @media(min-width:1001px) and (min-height:761px) and (max-height:940px){ body[data-view="register"] .form-wrap{width:min(540px,85%);padding-top:60px;padding-bottom:16px} body[data-view="register"] .form-heading{margin-bottom:12px} body[data-view="register"] .tiny-kolmena{width:25px;height:29px;margin-bottom:10px} body[data-view="register"] .form-heading h2{font-size:38px} body[data-view="register"] .form-heading p{font-size:16px;margin-top:7px} body[data-view="register"] .form-register{gap:8px} body[data-view="register"] .auth-form label{font-size:13px} body[data-view="register"] .field{height:48px;margin-top:4px;padding-inline:15px} body[data-view="register"] .field input{font-size:14px} body[data-view="register"] .strength{margin-top:0} body[data-view="register"] .strength i{height:3px} body[data-view="register"] .strength small{font-size:11px} body[data-view="register"] .rules{font-size:11px;gap:2px;margin:0} body[data-view="register"] .rules li:before{width:12px;height:12px;margin-right:7px} body[data-view="register"] .primary{height:50px;margin-top:2px;font-size:14px} body[data-view="register"] .primary b{top:13px;font-size:22px} body[data-view="register"] .or{font-size:11px} body[data-view="register"] .socials button{height:48px;font-size:13px} body[data-view="register"] .switch{font-size:12px;margin:0} body[data-view="register"] .legal{font-size:11px} } /* Fluid full-screen canvas: no centered 1440px frame or gray side gutters. */ body{background:#fff} .shell{width:100%;max-width:none;margin:0} @media(min-width:1700px){ .shell{grid-template-columns:55% 45%} .story{padding:48px clamp(64px,4vw,82px)} .brand{font-size:27px} .kolmena-logo{width:42px;height:47px} body[data-view="login"] .story-copy{left:clamp(64px,4vw,82px);top:15.5%;width:45%;max-width:470px} body[data-view="login"] .story-copy h1{font-size:clamp(52px,3vw,60px)} body[data-view="login"] .story-copy .intro{max-width:440px;font-size:17px} body[data-view="login"] .benefits{width:430px;gap:22px} body[data-view="login"] .mini-icon{width:57px;height:62px;flex-basis:57px} body[data-view="login"] .benefits b{font-size:15px} body[data-view="login"] .benefits small{font-size:13px} body[data-view="login"] .network{width:clamp(410px,45%,480px);right:3%;top:7.5%} body[data-view="login"] .avatar{width:118px} body[data-view="login"] .hub{width:70px} body[data-view="login"] .network-node{width:66px;height:71px} body[data-view="login"] .community-pill{left:clamp(64px,4vw,82px);width:min(62%,565px)} .form-wrap{width:min(600px,75%)} .form-heading h2{font-size:46px} .form-heading p{font-size:18px} .field{height:62px} .primary{height:62px} .socials button{height:58px} .topbar{right:7%} body[data-view="register"] .story-copy{left:clamp(64px,4vw,82px);max-width:650px} body[data-view="register"] .network{width:500px;right:15%;top:33%} body[data-view="register"] .secure-card{left:clamp(64px,4vw,82px);width:430px} body[data-view="register"] .form-wrap{width:min(590px,78%)} } /* Each auth view follows its own reference proportions. */ @media(min-width:721px){ body[data-view="login"] .shell{grid-template-columns:55% 45%} body[data-view="register"] .shell{grid-template-columns:44% 56%} body[data-view="recover"] .shell{grid-template-columns:46% 54%} body[data-view="register"] .access{justify-content:flex-start} body[data-view="register"] .form-wrap{width:min(680px,72%);margin-left:10%} } /* Recovery layout and branded confirmation dialog. */ @media(min-width:1001px){ body[data-view="recover"] .story-copy{left:clamp(54px,4vw,76px);top:16%;width:76%;max-width:680px} body[data-view="recover"] .story-copy h1{font-size:clamp(44px,3.3vw,55px);line-height:1.08} body[data-view="recover"] .story-copy .intro{max-width:530px;font-size:16px;line-height:1.55;margin-top:22px} body[data-view="recover"] .network{width:clamp(420px,54%,500px);right:17%;top:30%;bottom:auto} body[data-view="recover"] .story blockquote{left:clamp(54px,4vw,76px);bottom:7%;font-size:16px} } .modal-backdrop[hidden]{display:none}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(17,19,18,.52);backdrop-filter:blur(9px);animation:modal-fade .25s ease both}.success-modal{position:relative;width:min(500px,100%);padding:38px 40px 30px;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:linear-gradient(155deg,#fff 0%,#fffdf8 100%);box-shadow:0 32px 90px rgba(0,0,0,.24),0 0 0 1px rgba(245,164,0,.08);text-align:center;animation:modal-rise .38s cubic-bezier(.2,.8,.25,1) both}.modal-close{position:absolute;right:18px;top:15px;width:34px;height:34px;border:0;border-radius:50%;background:#f5f3ef;color:#666;font:300 24px/1 inherit;cursor:pointer;transition:.2s}.modal-close:hover{background:#ece8e0;color:#111;transform:rotate(5deg)}.success-mark{position:relative;display:grid;place-items:center;width:78px;height:86px;margin:0 auto 20px;color:#181a19;background:linear-gradient(145deg,#ffc43b,#f19a00);clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);filter:drop-shadow(0 14px 18px rgba(245,164,0,.22))}.success-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.success-mark i{position:absolute;right:5px;bottom:12px;display:grid;place-items:center;width:23px;height:23px;border:3px solid white;border-radius:50%;background:#2fa85d;color:#fff;font:700 12px/1 Arial}.modal-eyebrow{margin:0 0 8px;color:#d98b00;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700}.success-modal h3{margin:0;font-size:29px;letter-spacing:-.035em}.modal-copy{max-width:390px;margin:12px auto 20px;color:#6f726f;font-size:14px;line-height:1.55}.sent-address{height:51px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;border:1px solid #eee0c7;border-radius:10px;background:#fffaf0;color:#3d403e;font-size:14px;font-weight:600}.sent-address svg{width:18px;height:18px;fill:none;stroke:#dc8c00;stroke-width:1.8}.modal-tip{display:flex;align-items:center;gap:13px;margin:14px 0 20px;padding:14px 16px;border-radius:11px;background:#f7f7f4;text-align:left}.modal-tip>svg{width:27px;height:27px;flex:0 0 auto;fill:none;stroke:#e39300;stroke-width:1.7}.modal-tip p{margin:0}.modal-tip b,.modal-tip small{display:block}.modal-tip b{font-size:12px}.modal-tip small{margin-top:3px;color:#777;font-size:11px}.modal-primary{width:100%;height:55px}.resend-button{margin-top:17px;border:0;background:none;color:#c77d00;font:600 13px inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.resend-button:disabled{color:#999;cursor:default}.modal-open{overflow:hidden!important}@keyframes modal-fade{from{opacity:0}to{opacity:1}}@keyframes modal-rise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @media(max-width:600px){.modal-backdrop{padding:16px}.success-modal{padding:32px 20px 25px;border-radius:20px}.success-modal h3{font-size:25px}.success-mark{width:68px;height:75px}.modal-copy{font-size:13px}} @media(min-width:1250px){ body[data-view="register"] .story{padding-left:clamp(54px,4vw,76px);padding-right:40px} body[data-view="register"] .story-copy{left:clamp(54px,4vw,76px);width:76%;max-width:610px} body[data-view="register"] .network{width:clamp(430px,59%,500px);right:8%;top:32%} body[data-view="register"] .secure-card{left:clamp(54px,4vw,76px);width:min(64%,500px)} } @media(min-width:1700px){ body[data-view="register"] .story-copy h1{font-size:46px} body[data-view="register"] .network{width:500px;right:8%;top:32%} body[data-view="register"] .secure-card{width:470px} body[data-view="register"] .form-wrap{width:min(680px,72%);margin-left:10%} } /* ============================================================ ADDITIONS — Kolmena only. Everything above is Carolain's. ============================================================ */ /* Several of her buttons are links for us: "back to sign in" goes to a page of ours, and the panel that replaces a finished form ends in one. Her .primary is a