/* hosteasy/login-page.css — PAGE-specific CSS for the Host Easy "Customer Log In / Sign Up" page (the LIVE https://www.hosteasy.in/login.php). ========================================================================= Loads the shared design system first (tokens + base + header/nav/footer via common.css → brand-tokens.css), then styles ONLY this page's sections — every selector hangs off the LIVE page's own class names / ids (no invented class); the five live customer/css bundles are re-implemented here so the single-CSS rule holds (HYG-01): .skip-link → keyboard skip-to-content (a11y) main / .content / .innercontent → the centred page shell .login_register → the auth-panel stage (one .form shows) .form (#login / #forget / #register) the auth card itself h3 card title p helper copy label / font[color=red] field label + required asterisk .form_row / .form_clmn / .frm_rw_50 field rows & columns input[type=text|password] / select the fields .error / #message-* inline validation messages .captcha_design + .signup_captcha the math-captcha strip … .captcha_design_yellow/_grey/_blue operand + operator chips .captcha_design_green / signup_..._green the answer-input tile input[type=submit] the ONE gold primary action a.logformlink / .txt_right the switch links (Login/Forget/Register) CSS-ONLY design: never a raw hex — every value is a --ho-* token from brand-tokens.css. Production pulls the tokens + chrome from common.css / brand-tokens.css; the design lives entirely in this one page stylesheet. */ @import "common.css"; /* ── skip-link (visually hidden until focused) ─────────────────────────────── */ .skip-link{position:absolute;left:var(--ho-s-2);top:-48px;z-index:80; background:var(--ho-card);color:var(--ho-brand-text);font-weight:var(--ho-fw-semi); font-size:var(--ho-fs-sm);padding:var(--ho-s-2) var(--ho-s-4);border:1px solid var(--ho-brand); border-radius:var(--ho-r-sm);box-shadow:var(--ho-e-2);transition:top var(--ho-dur) var(--ho-ease)} .skip-link:focus{top:var(--ho-s-2)} /* ── page shell — a calm cyan wash the auth card floats on ─────────────────── */ main{display:block} .content{min-height:calc(100vh - 220px); background:radial-gradient(1100px 460px at 50% -8%,var(--ho-sky-100),transparent 70%),var(--ho-surface); display:flex;align-items:flex-start;justify-content:center; padding:var(--ho-s-section) var(--ho-s-5)} .innercontent{width:100%;max-width:var(--wrap);display:flex;justify-content:center} /* only one .form is visible at a time (the others carry inline display:none), so the stage just centres whichever panel is showing */ .login_register{width:100%;display:flex;justify-content:center} /* ── the auth card (.form) ─────────────────────────────────────────────────── */ .form{width:100%;max-width:440px;background:var(--ho-card); border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-3); padding:var(--ho-s-7) var(--ho-s-6); /* a hairline of brand at the top edge, no extra markup */ border-top:3px solid var(--ho-brand)} /* the sign-up form carries a two-column body → give it room to breathe */ #register.form{max-width:720px} .form h3{font-size:var(--ho-fs-2xl);line-height:var(--ho-lh-tight); letter-spacing:var(--ho-tracking-tight);color:var(--ho-hero-ink); font-weight:var(--ho-fw-black);text-align:center;margin:0 0 var(--ho-s-2)} /* helper copy under the title / at the card foot */ .form > p{color:var(--ho-muted);font-size:var(--ho-fs-sm);line-height:var(--ho-lh); text-align:center;margin:var(--ho-s-4) auto 0;max-width:52ch} #register.form > p:first-of-type{margin-top:0;margin-bottom:var(--ho-s-5)} /* ── field labels + required asterisk ──────────────────────────────────────── */ .form label{display:block;font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi); color:var(--ho-ink);margin:var(--ho-s-4) 0 var(--ho-s-1)} .form label font{color:var(--ho-danger)!important;font-size:var(--ho-fs-sm)!important; font-weight:var(--ho-fw-bold);padding-left:2px} /* ── rows & columns ────────────────────────────────────────────────────────── */ .form_row{display:flex;flex-wrap:wrap;gap:var(--ho-s-4);margin-top:var(--ho-s-3)} .form_clmn{flex:1 1 200px;min-width:0} .form_clmn.txt_right{text-align:right} /* a label placed INSIDE a column (the register grid) sits tight above its field */ .form_clmn > label{margin-top:0} /* ── fields ────────────────────────────────────────────────────────────────── */ .form input[type=text], .form input[type=password], .form select{width:100%;font:inherit;font-size:var(--ho-fs-base);color:var(--ho-ink); background:var(--ho-card);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-sm); padding:var(--ho-s-3) var(--ho-s-4);line-height:var(--ho-lh-snug); transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)} .form input[type=text]::placeholder, .form input[type=password]::placeholder{color:var(--ho-muted)} .form input[type=text]:focus, .form input[type=password]:focus, .form select:focus{outline:none;border-color:var(--ho-brand); box-shadow:0 0 0 3px var(--ho-brand-soft)} .form input[readonly]{background:var(--ho-tile);color:var(--ho-muted);cursor:default} .form select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--ho-muted) 50%), linear-gradient(135deg,var(--ho-muted) 50%,transparent 50%); background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:var(--ho-s-7)} /* ── inline validation messages ────────────────────────────────────────────── :not(.correct) matters. The live JS reuses these same slots for SUCCESS and marks them .correct, which common.css styles as a green chip — but this rule used to claim them too and win, so success messages rendered in the error red: `#message-… .correct` scores (0,2,0) here against .correct's (0,1,0), and a `class="error correct"` element ties at (0,1,0) with this sheet read after its own @import of common.css. Excluding .correct lets the shared green through. (req 0a5354) */ .error:not(.correct),[id^="message-"]:not(:empty):not(.correct){color:var(--ho-danger); font-size:var(--ho-fs-xs);line-height:var(--ho-lh-snug);margin-bottom:var(--ho-s-1)} /* success keeps common.css's green chip; only the spacing is matched here so it sits in the form the way the error slots do */ .correct{margin-bottom:var(--ho-s-1)} /* ── math-captcha strip ────────────────────────────────────────────────────── */ .captcha_design{display:flex;align-items:center;gap:var(--ho-s-2);flex-wrap:wrap} .captcha_design_yellow,.captcha_design_blue,.captcha_design_grey{ display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:44px;padding:0 var(--ho-s-2);border-radius:var(--ho-r-sm); font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-md)} .captcha_design_yellow{background:var(--ho-gold-soft);color:var(--ho-gold-ink); border:1px solid var(--ho-gold-border)} .captcha_design_blue{background:var(--ho-brand-soft);color:var(--ho-brand-text); border:1px solid var(--ho-sky-200)} .captcha_design_grey{background:transparent;color:var(--ho-muted);min-width:auto} .captcha_design_green{flex:1 1 90px;min-width:0} .captcha_design_green input{width:100%;font:inherit;font-size:var(--ho-fs-base); color:var(--ho-ink);background:var(--ho-card);border:1px solid var(--ho-line-2); border-radius:var(--ho-r-sm);padding:var(--ho-s-3) var(--ho-s-4); transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)} .captcha_design_green input:focus{outline:none;border-color:var(--ho-brand); box-shadow:0 0 0 3px var(--ho-brand-soft)} /* ── the ONE gold primary action (Login / Reset Password / Create Account) ──── */ .frm_rw_50{margin-top:var(--ho-s-5)} .form input[type=submit]{width:100%;cursor:pointer;font:inherit; font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-md);color:var(--ho-gold-ink); background:var(--ho-gold-grad);border:1px solid var(--ho-gold-border); border-radius:var(--ho-r);padding:var(--ho-s-3) var(--ho-s-6); transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease)} .form input[type=submit]:hover{box-shadow:var(--ho-e-2);transform:translateY(-1px)} .form input[type=submit]:active{transform:translateY(0)} /* ── switch links (Login / Forget Password? / Register) ────────────────────── */ /* the two switch links share ONE row — first link pinned left, the .txt_right link pinned right — instead of wrapping to two stacked lines (the columns' 200px flex-basis is wider than half the card, so nowrap + space-between keeps them on a single line, left ⇄ right) */ .form .form_row:last-of-type{margin-top:var(--ho-s-5); padding-top:var(--ho-s-4);border-top:1px solid var(--ho-line); flex-wrap:nowrap;justify-content:space-between;align-items:baseline} .form .form_row:last-of-type .form_clmn{flex:0 1 auto} a.logformlink{cursor:pointer;color:var(--ho-brand-text);font-weight:var(--ho-fw-semi); font-size:var(--ho-fs-sm);transition:color var(--ho-dur) var(--ho-ease)} a.logformlink:hover{color:var(--ho-link-d);text-decoration:underline} /* the register form ends on the switch links then a helper

; keep that

from inheriting the row divider spacing */ #register.form .form_row:last-of-type{margin-top:var(--ho-s-5)} /* ── responsive (1024 / 640 / 400 tiers) ───────────────────────────────────── */ @media (max-width:1024px){ .content{padding:var(--ho-s-7) var(--ho-s-4)} } @media (max-width:640px){ .content{min-height:0;padding:var(--ho-s-6) var(--ho-s-4);align-items:stretch} .form{padding:var(--ho-s-6) var(--ho-s-5)} /* stack the register grid to one column on phones */ .form_row{gap:var(--ho-s-3)} #register.form .form_row{flex-direction:column} #register.form .form_clmn{flex:1 1 100%} .form_clmn.txt_right{text-align:left} } @media (max-width:400px){ .content{padding:var(--ho-s-5) var(--ho-s-3)} .form{padding:var(--ho-s-5) var(--ho-s-4)} .captcha_design_green{flex-basis:100%} }