/* ========================================================================== SIGN IN / CREATE ACCOUNT A split threshold: the dark panel carries the promise, the light panel does the work. Dark here is deliberate and within the design system's four allowed dark surfaces — this is a door, not a content page. ========================================================================== */ .auth{display:grid;grid-template-columns:1fr} /* The floor only applies once there are two columns to fill. Stacked, it just stretched the dark panel to a screen's height of empty mesh. */ @media(min-width:900px){.auth{grid-template-columns:1fr 1fr;min-height:calc(100vh - 72px)}} @media(min-width:1280px){.auth{grid-template-columns:0.92fr 1.08fr}} /* ---------- the dark side ---------- */ .auth-aside{position:relative;overflow-x:clip;display:flex;flex-direction:column; gap:28px;padding:32px 28px 36px;color:#C7D2E0; background:linear-gradient(150deg,var(--navy-900) 0%,#2A2A6B 62%,#4744A8 100%)} @media(min-width:900px){.auth-aside{padding:40px 48px 44px}} @media(min-width:1280px){.auth-aside{padding:44px 64px 52px}} .auth-aside>*{position:relative;z-index:1} /* The mesh is a backdrop, not a row. The only bare .nodegrid{position:absolute} on the site is in home.css, which is enqueued on the front page alone — so on these two pages the SVG had no positioning at all, sat in the flex column as a full-height item, and pushed the logo and everything under it down by its own height. Same collision that took .ctop and .fy-head apart; positioned here rather than globally so the fix stays where the markup is. */ /* The brand panel's mesh. It used to be the shared dark node grid, which draws #24466B lines at 28% and purple dots at 30% — a treatment built for a light band, and invisible against this navy. The design draws it in white and fades it out towards the foot, so that is what this is: a pseudo on the panel itself, no SVG to position and nothing for the mask to fight. */ .auth-aside::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--white) 26%, transparent) 1.6px, transparent 2px), linear-gradient(to right, color-mix(in srgb, var(--white) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--white) 7%, transparent) 1px, transparent 1px); background-size:44px 44px,44px 44px,44px 44px; -webkit-mask-image:linear-gradient(160deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 70%, transparent); mask-image:linear-gradient(160deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 70%, transparent)} .auth-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--white)} .auth-brand img{border-radius:6px} .auth-brand .name{display:block;font-family:'Lora',Georgia,serif;font-weight:600;letter-spacing:0;font-size:1.02rem;} .auth-brand .sub{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#9FA6E8;margin-top:2px} /* Brand at the top, ticks on the floor, and the headline and seal centred between them. Auto margins on both sides of the body split the free space evenly, so the panel reads as balanced whether it is sized by the short sign-in form or the much taller sign-up one. It used to be margin-top:auto, which pinned the cluster to the bottom and left the whole upper half empty. */ .auth-aside-body{margin:auto 0} .auth-aside h2{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:2rem;line-height:1.12; letter-spacing:-.025em;color:var(--white);margin-top:12px} @media(min-width:1280px){.auth-aside h2{font-size:2.4rem}} .auth-aside p{margin-top:16px;font-size:1rem;line-height:1.6;max-width:34ch;color:#C7D2E0} .auth-seal{width:74px;height:74px;margin-top:34px;color:rgba(255,255,255,.62)} .auth-points{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:0} .auth-points li{display:flex;align-items:center;gap:7px;font-size:.82rem;color:#9FADBF} .auth-points svg{width:14px;height:14px;color:var(--accent-500);flex:none} /* ---------- the light side ---------- */ .auth-panel{display:flex;align-items:center;justify-content:center;padding:44px 20px;background:var(--paper-50)} @media(min-width:768px){.auth-panel{padding:52px 32px}} .auth-form{width:100%;max-width:396px} .auth-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap} .auth-head h1{font-size:1.8rem;letter-spacing:-.025em;color:var(--navy-900)} .auth-head>a{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.9rem;color:var(--accent-800);text-decoration:none;white-space:nowrap} .auth-head>a:hover{text-decoration:underline} .auth-lede{margin-top:8px;font-size:.95rem;color:var(--slate-600)} .auth-error{margin-top:18px;padding:12px 14px;border:1px solid #FDA29B;border-left:3px solid var(--danger); border-radius:var(--r-btn);background:#FEF3F2;font-size:.9rem;font-weight:500;color:#B42318} /* Not every message here is a mistake: the checkout explanation keeps the calm brand look. */ .auth-error.is-info{border-color:var(--brand-300);border-left-color:var(--brand-500);background:var(--brand-50);font-weight:400;color:var(--navy-800)} /* ---------- providers ---------- */ .auth-providers{display:grid;gap:10px;grid-template-columns:1fr;margin-top:24px} @media(min-width:420px){.auth-providers{grid-template-columns:1fr 1fr}} .auth-provider{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 14px; border:1px solid var(--slate-300);border-radius:var(--r-btn);background:var(--white); font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.9rem;color:var(--navy-900); text-decoration:none;text-align:center;transition:border-color .16s ease-out} .auth-provider:hover{border-color:var(--navy-800)} .auth-provider svg{width:18px;height:18px;flex:none} .auth-or{display:flex;align-items:center;gap:14px;margin:22px 0 4px; font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-500)} .auth-or::before,.auth-or::after{content:"";height:1px;flex:1;background:var(--slate-200)} /* ---------- fields ---------- */ .auth-fields{display:grid;gap:16px;margin-top:20px} .field{display:block} .field-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--slate-600);margin-bottom:7px} .field-label em{font-style:normal;color:var(--slate-500);text-transform:none;letter-spacing:0;font-size:11px} .field input[type=text],.field input[type=email],.field input[type=password],.field select{ width:100%;padding:12px 13px;border:1px solid var(--slate-300);border-radius:var(--r-btn); background:var(--white);font:inherit;font-size:.95rem;color:var(--navy-900)} .field input:focus,.field select:focus{outline:2px solid var(--accent-800);outline-offset:-1px;border-color:transparent} .field-pw{position:relative;display:block} .field-pw input{padding-right:44px} .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex; padding:7px;border:0;background:none;color:var(--slate-500);cursor:pointer;border-radius:var(--r-btn)} .pw-toggle:hover{color:var(--navy-800)} .pw-toggle svg{width:19px;height:19px} .field-hint{display:block;margin-top:6px;font-size:.78rem;color:var(--slate-500)} .auth-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:-2px} .auth-row a{font-size:.86rem;color:var(--accent-800);text-decoration:none} .auth-row a:hover{text-decoration:underline} .check{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;color:var(--slate-600);cursor:pointer} .check input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--brand-700)} .check-terms{margin-top:2px} .check a{color:var(--accent-800)} .auth-fields .btn{margin-top:4px} .auth-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--slate-200);font-size:.9rem;color:var(--slate-600)} .auth-foot a{color:var(--accent-800);font-weight:600;text-decoration:none} .auth-foot a:hover{text-decoration:underline} /* ========================================================================== SIGN-IN, TO THE DESIGN The lockup repeated inside the form column, the four social buttons above the email form, and the terms line that closes it. Ported from login.html. ========================================================================== */ .auth-panel-inner{width:100%; max-width:424px; margin:auto;} .auth-mini-logo{display:inline-flex; align-items:center; gap:10px; margin-bottom:32px;} .auth-mini-logo img{width:34px; height:34px;} .auth-mini-logo .name{font-family:'Lora',Georgia,serif;font-weight:600;letter-spacing:0;font-size:.98rem; color:var(--navy-900); line-height:1.15;} .auth-mini-logo .sub{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-600);} .auth-intro{font-size:.95rem; color:var(--slate-600); margin-bottom:26px;} .pw-wrap{position:relative;} .pw-wrap input{padding-right:46px;} .auth-row .check-row{margin:0;} .auth-alt{font-size:.9rem; color:var(--slate-600); margin-top:24px;} .auth-terms{font-size:.8rem; color:var(--slate-600); margin-top:22px; padding-top:20px; border-top:1px solid var(--slate-200);} .auth-terms a{color:var(--accent-800); font-weight:600;} .auth-terms a:hover{text-decoration:underline;} .auth-terms a:focus-visible{outline:2px solid var(--accent-500); outline-offset:2px; border-radius:3px;} .auth-swap{font-size:.9rem; font-weight:600; color:var(--accent-800);} .auth-swap:hover{text-decoration:underline;} .auth-swap:focus-visible{outline:2px solid var(--accent-500); outline-offset:2px; border-radius:3px;} .social-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px;} /* Two providers stack: a lone button in a half-cell wraps its label and reads as a broken row rather than a deliberate one. */ /* One provider has nothing to sit beside, so it takes the row. Two or more stay in the prototype's two-up grid — side by side, equal halves. */ .social-btns[data-count="1"]{grid-template-columns:1fr} @media(max-width:420px){ .social-btns{grid-template-columns:1fr;} } .social-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:46px; font-family:'Inter',sans-serif; font-weight:600; font-size:.9rem; color:var(--navy-900); background:var(--white); border:1.5px solid var(--slate-400); border-radius:var(--r-btn); padding:12px 14px; cursor:pointer; transition:border-color .16s ease-out, box-shadow .16s ease-out;} .social-btn:hover{border-color:var(--accent-800); box-shadow:var(--sh-rest);} .social-btn:focus-visible{outline:2px solid var(--accent-500); outline-offset:2px;} .auth-divider{display:flex; align-items:center; gap:14px; margin:0 0 22px;} .auth-divider-line{flex:1 1 auto; height:1px; background:var(--slate-300);} .auth-divider-txt{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--slate-600); white-space:nowrap;} /* Microsoft leads the row and spans it: most of CIA's partner businesses run on Microsoft accounts, so it is the one most readers will recognise as theirs. */ .social-btn--primary{border-color:var(--navy-800)} .social-btn[disabled]{opacity:.5; cursor:not-allowed} .social-btn[disabled]:hover{border-color:var(--slate-400); box-shadow:none} .social-btn svg{width:18px; height:18px; flex:none} /* The longest label, "Continue with Microsoft", overruns half the panel by a few pixels at .9rem and wraps — which reads as a broken row, not a long word. Buy the space back from the padding and the gap; the label stays whole. */ .social-btn{white-space:nowrap} @media(min-width:721px){ .social-btn{font-size:.85rem; gap:7px; padding:12px 8px} } .social-note{font-size:.82rem; color:var(--slate-600); margin:-12px 0 20px; text-align:center} .social-note a{color:var(--accent-800); text-decoration:underline; text-underline-offset:2px} /* ---------- password reset ------------------------------------------------- WooCommerce owns this route and prints its own notices into the panel — an expired key, a mistyped confirmation. They arrive as bare