/* ============================================================================ 2011-login-register.css — the "¿Primera vez aquí?" (first time here) box ---------------------------------------------------------------------------- Loads AFTER 2011-login-base.css. Shared chrome / palette / button recipe come from the base file; this file only styles THIS box's internals: .login-register-card > .card-title .login-register-card > .register-card-body > span .login-register-card > .register-card-body > button.register-link CASCADE: every rule is anchored on #root .nitro-login-view and doubles the class where it has to beat a surviving (1,3,0) rule. !important throughout, because Nitro's bundle CSS is injected at runtime AFTER these s. FRAME PARITY: this box sits directly under .login-auth-card and the two are read as one stack, so the frame must be identical. The chrome is NOT re-invented here — the base file's .nitro-card-shell / .card-title / .card-body rules already produce it (measured live: both cards 292px wide, 21px title bar). The few chrome declarations below are DEFENSIVE re-pins of exactly the base values (21px bar, 1px #1c3f4f border, hard 2px offset shadow) so a later edit to a sibling file cannot desync the two boxes. GREEN: 2011 used a green "positive action" button for signup. Every green below is SAMPLED FROM REAL 2011 CLIENT ART extracted out of Habbo.swf, not invented: #5fad57 face - flat fill of the green avatar chip, symbol _-2uP #71b96e top bevel - highlight ramp of the green tick, symbol _-cM #20911d bottom bevel - mid ramp of the same tick, symbol _-cM #1d821a 1px border - darkest ramp of the same tick, symbol _-cM (also the 1px pixel text shadow, as 2011 does) The glyph on the button is the GENUINE 13x14 green "+" positive-action sprite (symbol _-1UK: #80ff59 face / #38bd12 shade / white 1px outline) — the same visual family as the "+" on the 2011 "Find new friends" buttons. Published verbatim (no recolour, no resample) at /skin/2011ui/register_plus_green.png. ========================================================================= */ #root .nitro-login-view .login-register-card { /* genuine-2011 green ramp, see header */ --reg-green-bg: #5fad57; --reg-green-hi: #71b96e; --reg-green-lo: #20911d; --reg-green-bd: #1d821a; --reg-green-fg: #ffffff; } /* ------------------------------------------------------------------ 1. SHELL — defensive parity with .login-auth-card above it. These are the base file's own values, restated so the two stacked boxes cannot drift apart. ------------------------------------------------------------------ */ #root .nitro-login-view .login-register-card.login-register-card { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; border: 1px solid var(--c11-outline) !important; border-radius: 0 !important; background: var(--c11-panel-bg) !important; background-image: none !important; overflow: hidden !important; filter: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 2px 2px 0 0 var(--c11-shadow) !important; } /* ------------------------------------------------------------------ 2. TITLE BAR — flat teal, 21px, white 9px bold Volter with a 1px pixel drop shadow. Identical to the auth card's bar. ------------------------------------------------------------------ */ #root .nitro-login-view .login-register-card > .card-title.card-title { box-sizing: border-box !important; display: flex !important; flex: 0 0 21px !important; align-items: center !important; justify-content: center !important; height: 21px !important; min-height: 21px !important; max-height: 21px !important; padding: 0 6px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--c11-title-lo) !important; background: var(--c11-title-bg) !important; background-image: none !important; box-shadow: inset 0 1px 0 0 var(--c11-title-hi) !important; } /* The bundle pins min-height/max-height:31px on .nitro-card-title; in a 21px bar that flex-centres to y=-5px and overflow:hidden erases it. Unpin. */ #root .nitro-login-view .login-register-card > .card-title > .nitro-card-title { display: block !important; position: static !important; inset: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; font-family: var(--c11-font) !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-title-fg) !important; text-shadow: 1px 1px 0 var(--c11-title-sh) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ------------------------------------------------------------------ 3. BODY — 2011 spacing. The default was a loose 10px pad + 8px gap; the real client packs a two-line box into ~7px of padding with a 6px gap, so the whole box loses ~10px of height and stops looking like a modern airy card. ------------------------------------------------------------------ */ #root .nitro-login-view .login-register-card > .register-card-body.register-card-body { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; /* shrink the CTA to its own content */ justify-content: flex-start !important; gap: 6px !important; padding: 7px 8px 8px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--c11-panel-bg) !important; background-image: none !important; box-shadow: inset 0 1px 0 0 var(--c11-panel-hi) !important; color: var(--c11-fg) !important; text-align: center !important; } /* the "¿Aún no tienes una cuenta de habbo?" line */ #root .nitro-login-view .login-register-card .register-card-body > span { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; font-family: var(--c11-font) !important; font-size: 9px !important; line-height: 11px !important; font-weight: 400 !important; /* solid dark, NOT the dim grey: at 9px a bitmap face needs full contrast or the glyph edges read as anti-aliased mush. 2011 never dimmed body copy inside a window. */ color: var(--c11-fg) !important; text-align: center !important; text-shadow: none !important; -webkit-font-smoothing: none !important; text-rendering: geometricPrecision !important; } /* ------------------------------------------------------------------ 4. THE GREEN CTA Construction is the foundation's button recipe VERBATIM — same 1px border, same three box-shadow lines (1px inset light top, 1px inset dark bottom, 1px hard black drop, zero blur), same 9px/9px bold Volter, same 3px 8px padding rhythm. ONLY the four colours change, plus the genuine 2011 "+" sprite on the left. Content-sized, not stretched edge to edge: a 270px-wide button in a 292px box is a modern full-width CTA, not a 2011 one. ------------------------------------------------------------------ */ #root .nitro-login-view .login-register-card button.register-link.register-link { box-sizing: border-box !important; display: inline-flex !important; flex: 0 0 auto !important; align-self: center !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: 20px !important; min-height: 20px !important; /* 22px of left padding makes room for the 13px "+" sprite + gutter. Vertical padding mirrors .ok-button in 2011-login-auth.css exactly (0 top / 1px bottom) so the two buttons are the same widget at the same height, differing only in colour. */ padding: 0 8px 1px 22px !important; margin: 1px 0 0 !important; border: 1px solid var(--reg-green-bd) !important; border-radius: 0 !important; background-color: var(--reg-green-bg) !important; background-image: url('/skin/2011ui/register_plus_green.png') !important; background-repeat: no-repeat !important; background-position: 5px center !important; background-size: 13px 14px !important; image-rendering: pixelated !important; color: var(--reg-green-fg) !important; font-family: var(--c11-font) !important; font-size: 9px !important; line-height: 9px !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; text-shadow: 1px 1px 0 var(--reg-green-bd) !important; white-space: nowrap !important; cursor: pointer !important; transition: none !important; filter: none !important; /* 4-side outset pixel bevel: 1px light along top+left, 1px dark along bottom+right, then one HARD 1px black drop. Zero blur anywhere. This is the same three-line construction the sibling .ok-button uses in 2011-login-auth.css — only the four colours differ. */ box-shadow: inset 1px 1px 0 0 var(--reg-green-hi), inset -1px -1px 0 0 var(--reg-green-lo), 1px 1px 0 0 rgba(0, 0, 0, 0.22) !important; } #root .nitro-login-view .login-register-card button.register-link.register-link:hover { background-color: #6dbb64 !important; /* one step up the _-cM ramp */ } /* pressed: face drops to the ramp's mid green and the bevel inverts — exactly how the base button's :active behaves, so the two buttons still feel like the same widget. */ #root .nitro-login-view .login-register-card button.register-link.register-link:active { background-color: var(--reg-green-lo) !important; background-position: 6px calc(50% + 1px) !important; /* glyph sinks 1px */ box-shadow: inset 1px 1px 0 0 var(--reg-green-bd), inset -1px -1px 0 0 var(--reg-green-hi) !important; } #root .nitro-login-view .login-register-card button.register-link.register-link:focus, #root .nitro-login-view .login-register-card button.register-link.register-link:focus-visible { outline: none !important; }