/* ============================================================================ 2011-catalog-pages.css — Agent 4 of the 2011 catalog re-skin ---------------------------------------------------------------------------- OWNS the page layouts that are NOT ctlg_default_3x3: ctlg_frontpage3 (the front page) .ctlg-frontpage3 ctlg_pets (29 pet pages) .ctlg-pets ctlg_pets3 (10 + 4 info pages) .ctlg-pets3 + a shared 2011 flattening pass for the one-off layouts that were NOT rebuilt coordinate-for-coordinate (trophies, spaces_new, soundmachine, marketplace, marketplace_own_items, club_buy, plasto, room/single bundles, roomads, badge_display, info_loyalty). Those are made CONSISTENT with the 2011 chrome, not coordinate-accurate — see the agent report; the layout XMLs for several of them describe only a fragment (ctlg_trophies is literally one 229x71 text box) and cannot be reconstructed into a full page from the dump alone. Loads AFTER 2011-catalog-base / -nav / -grid / -detail and reuses their --c11-* custom properties. Anchored on `#root .nitro-catalog-window` with !important because Nitro's bundle CSS is injected at runtime. SOURCE OF TRUTH — layout XMLs extracted from the original Habbo.swf: HabboCatalogCom_ctlg_frontpage3.xml _-07M.xml (layout name="ctlg_pets") HabboCatalogCom_ctlg_pets3.xml Every left/top/width/height below is a literal from those files. ========================================================================= */ /* ============================================================ 0. CASCADE-LAYER ESCAPE HATCH Same trick as 2011-catalog-grid.css section 0: Tailwind's !important utilities in the runtime-injected bundle outrank unlayered !important declarations, so anything the bundle pins with `min-h-[...]!` has to be beaten from inside a layer that is registered before the bundle's. ============================================================ */ @layer c11-a4 { #root .nitro-catalog-window :is(.ctlg-frontpage3, .ctlg-pets, .ctlg-pets3) { height: 415px !important; min-height: 0 !important; max-height: 415px !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget .ctlg-pets-purchase button.nitro-catalog-swf-button { min-height: 22px !important; height: 22px !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget input.ctlg-pets-name.ctlg-pets-name { height: 19px !important; min-height: 0 !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row input { height: 20px !important; min-height: 0 !important; } } /* ============================================================ 1. THE SHARED HEADER STRIP, PER LAYOUT CatalogView renders one .nitro-catalog-swf-header for every page at ctlg_default_3x3's coordinates (bitmap 0,0 339x68 + text 12,73 315x52). Three of the layouts here put the banner somewhere else and have no header text at all, so the strip is repositioned/suppressed with :has(). ctlg_frontpage3 bitmap 0,8 339x37 no ctlg_header_text ctlg_pets bitmap 30,13 286x60 no ctlg_header_text ctlg_pets3 bitmap 30,13 286x60 no ctlg_header_text ============================================================ */ #root .nitro-catalog-window .nitro-catalog-layout-shell:has(:is(.ctlg-frontpage3, .ctlg-pets, .ctlg-pets3)) .nitro-catalog-swf-header-copy, #root .nitro-catalog-window .nitro-catalog-layout-shell:has(:is(.ctlg-frontpage3, .ctlg-pets, .ctlg-pets3)) .nitro-catalog-swf-header-icon { display: none !important; } #root .nitro-catalog-window .nitro-catalog-layout-shell:has(.ctlg-frontpage3) .nitro-catalog-swf-header-bg[style*='url('] { margin: 26px 0 0 10px !important; width: 339px !important; height: 37px !important; background-position: center top !important; background-size: auto !important; background-repeat: no-repeat !important; } #root .nitro-catalog-window .nitro-catalog-layout-shell:has(:is(.ctlg-pets, .ctlg-pets3)) .nitro-catalog-swf-header-bg[style*='url('] { margin: 31px 0 0 40px !important; width: 286px !important; height: 60px !important; background-position: center top !important; background-size: auto !important; background-repeat: no-repeat !important; } /* ============================================================ 2. SHARED PAGE-BOX RECIPE layoutContainer is 6,37 339x416 and .nitro-catalog-layout-shell is already absolutely positioned there by 2011-catalog-base.css, so every page root simply covers it and each child sits at its literal coordinate. pointer-events are released on the root so the header strip underneath stays clickable (same approach as 2011-catalog-grid.css). ============================================================ */ #root .nitro-catalog-window :is(.ctlg-frontpage3, .ctlg-pets, .ctlg-pets3) { position: absolute !important; left: 10px !important; top: 18px !important; width: 339px !important; height: 415px !important; display: block !important; flex: none !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; pointer-events: none !important; } #root .nitro-catalog-window :is(.ctlg-frontpage3, .ctlg-pets, .ctlg-pets3) > * { pointer-events: auto; } #root .nitro-catalog-window :is(.ctlg-frontpage3, .ctlg-pets, .ctlg-pets3) * { box-sizing: border-box !important; } /* every positioned box in this file is a literal from the XML */ #root .nitro-catalog-window :is(.ctlg-frontpage3, .ctlg-pets, .ctlg-pets3) > *, #root .nitro-catalog-window .ctlg-pets-widget > * { position: absolute !important; margin: 0 !important; } /* ============================================================ 3. ctlg_frontpage3 (339x415) ============================================================ */ /* bitmap front_page_border 15,55 313x164 In 2011 this is a painted 1px picture frame. The frame art is not in the SWF sprite dump (same gap as the window nine-slices), so it is a 1px CSS border on the panel-lo rule colour. */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-border { left: 15px !important; top: 55px !important; width: 313px !important; height: 164px !important; border: 1px solid var(--c11-panel-lo) !important; background: var(--c11-panel-hi) !important; overflow: hidden !important; } /* bitmap ctlg_special_img 20,60 300x154 — i.e. inset 5,5 inside the frame. */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-hero { position: absolute !important; left: 4px !important; top: 4px !important; max-width: 303px !important; max-height: 154px !important; object-fit: contain !important; image-rendering: pixelated !important; } /* text ctlg_txt1 44,116 213x14 Volter Bold */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt1 { left: 44px !important; top: 116px !important; width: 213px !important; height: 14px !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-fg) !important; overflow: hidden !important; } /* text ctlg_txt3 44,164 173x21 Volter Bold */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt3 { left: 44px !important; top: 164px !important; width: 173px !important; height: 21px !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-fg) !important; overflow: hidden !important; } /* border bgBorder 8,222 325x136 0xcccccc */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-panel { left: 8px !important; top: 222px !important; width: 325px !important; height: 136px !important; border: 1px solid #b3b3b3 !important; background: #cccccc !important; overflow: hidden !important; } /* The featured-page links occupy the ctlg_txt4 (26,232 280x14) + ctlg_txt5 (26,246 280x83) band, i.e. 18,10 .. 18,107 inside the panel. */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-links { position: absolute !important; left: 17px !important; top: 9px !important; width: 280px !important; height: 97px !important; display: block !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-links button.ctlg-fp-link.ctlg-fp-link { display: block !important; width: 280px !important; height: 14px !important; min-height: 0 !important; margin: 0 0 4px 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 9px !important; line-height: 13px !important; font-weight: 700 !important; color: var(--c11-link) !important; text-align: left !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; cursor: pointer !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-links button.ctlg-fp-link.ctlg-fp-link:hover { background: transparent !important; text-decoration: underline !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-links button.ctlg-fp-link.ctlg-fp-link:active { background: transparent !important; box-shadow: none !important; } /* border bgBorder 8,365 325x50 0x6699cc */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-strip { left: 8px !important; top: 365px !important; width: 325px !important; height: 50px !important; border: 1px solid #4d7ba3 !important; background: #6699cc !important; } /* container redeemItemCodeWidget 24,362 292x50 */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem { left: 24px !important; top: 362px !important; width: 292px !important; height: 50px !important; background: transparent !important; } /* text ctlg_txt6 25,370 272x20 (page coords -> 1,8 inside the widget) */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt6 { position: absolute !important; left: 1px !important; top: 8px !important; width: 272px !important; height: 12px !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: #ffffff !important; overflow: hidden !important; } /* border 0,25 216x20 (the field well) and button redeem 234,25 56x21 */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row { position: absolute !important; left: 0 !important; top: 25px !important; width: 292px !important; height: 21px !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row > * { display: block !important; gap: 0 !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row input { position: absolute !important; left: 0 !important; top: 0 !important; width: 216px !important; height: 20px !important; padding: 0 4px !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row :is(button, .cursor-pointer.select-none.no-underline) { position: absolute !important; left: 234px !important; top: 0 !important; width: 56px !important; height: 21px !important; min-height: 21px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ============================================================ 4. ctlg_pets (339x415) — the `newPetsWidget` body ============================================================ */ /* container newPetsWidget 14,45 310x365 0xeeeeee */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget { left: 14px !important; top: 45px !important; width: 310px !important; height: 365px !important; background: #eeeeee !important; border: 1px solid var(--c11-panel-lo) !important; overflow: hidden !important; } /* bitmap ctlg_teaserimg_1 87,60 133x127 — the live pet previewer */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-teaser { left: 87px !important; top: 60px !important; width: 133px !important; height: 127px !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid var(--c11-panel-lo) !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-teaser > * { width: 131px !important; height: 125px !important; } /* container addOnBadgeViewWidget 30,115 40x40 */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-badge { left: 30px !important; top: 115px !important; width: 40px !important; height: 40px !important; background: transparent !important; } /* text pet_breed_text 10,166 280x13 */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-breedtext { left: 10px !important; top: 166px !important; width: 280px !important; height: 13px !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-fg) !important; text-align: center !important; overflow: hidden !important; white-space: nowrap !important; } /* text ctlg_text_3 12,186 150x20 */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-text3 { left: 12px !important; top: 186px !important; width: 150px !important; height: 20px !important; font-size: 9px !important; line-height: 13px !important; font-weight: 700 !important; color: var(--c11-fg) !important; overflow: hidden !important; white-space: nowrap !important; } /* The breed/colour flip. 2011's other pets body used a `type_drop_menu` in this row; there is no equivalent control in newPetsWidget, so the toggle is parked at the right end of the ctlg_text_3 row. INVENTED PLACEMENT. */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget button.ctlg-pets-mode.ctlg-pets-mode { left: 170px !important; top: 186px !important; width: 128px !important; height: 16px !important; min-height: 16px !important; padding: 0 3px !important; font-size: 9px !important; line-height: 13px !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; } /* container colourGridWidget 25,203 280x60 (itemgrid_vertical, spacing=2) */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-grid { left: 25px !important; top: 203px !important; width: 280px !important; height: 60px !important; display: flex !important; flex-wrap: wrap !important; align-content: flex-start !important; gap: 2px !important; padding: 0 !important; background: #ffffff !important; border: 1px solid var(--c11-cell-bd) !important; overflow-x: hidden !important; overflow-y: auto !important; } /* 36x36 cells, exactly as the extracted `gridItem` layout (agent 3's read). */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-grid > * { flex: 0 0 auto !important; width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--c11-cell-bd) !important; border-radius: 0 !important; background: var(--c11-cell-bg) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-grid > *.active, #root .nitro-catalog-window .ctlg-pets .ctlg-pets-grid > *[class*='active'] { background: #d2f0f3 !important; border-color: #418db0 !important; } /* text ctlg_text_2 12,258 170x20 DEVIATION (legibility only): colourGridWidget runs 203..263 and this label starts at 258, so 2011 genuinely drew the caption over the last 5px of the grid (the widget is declared before the text, so the text wins the z-order). With 25 breeds our grid has a clipped second row exactly there, and the caption became unreadable, so the label is given the widget's own 0xeeeeee as an opaque background. Delete `background` to get the literal overlap. */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-text2 { left: 12px !important; top: 258px !important; background: #eeeeee !important; width: 170px !important; height: 20px !important; font-size: 9px !important; line-height: 13px !important; font-weight: 700 !important; color: var(--c11-fg) !important; overflow: hidden !important; white-space: nowrap !important; } /* border 60,275 200x33 0xcccccc */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-namebox { left: 60px !important; top: 275px !important; width: 200px !important; height: 33px !important; background: #cccccc !important; border: 1px solid #b3b3b3 !important; } /* input name_input_text 80,283 150x31 (Volter Bold). The declared 31px would overflow the 33px well it sits in; Flash text fields report their content box loosely. Drawn at the well's inner height. */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget input.ctlg-pets-name.ctlg-pets-name { left: 80px !important; top: 283px !important; width: 150px !important; height: 19px !important; padding: 0 4px !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; border: 1px solid var(--c11-btn-bd) !important; background: var(--c11-field-bg) !important; text-align: center !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget input.ctlg-pets-name.ctlg-pets-name.is-bad { border-color: #aa0000 !important; background: #ffecec !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-error { left: 60px !important; top: 305px !important; width: 200px !important; height: 11px !important; font-size: 9px !important; line-height: 11px !important; color: #aa0000 !important; text-align: center !important; overflow: hidden !important; } /* container purchaseWidget 143,317 162x47 Same `purchaseButtons` recipe agent 3 used for ctlg_default_3x3: a green 0x00aa00 container_button with a centred white bold caption. */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-purchase { left: 143px !important; top: 317px !important; width: 162px !important; height: 47px !important; display: block !important; background: transparent !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-purchase > *:first-child { position: absolute !important; left: 11px !important; top: 0 !important; width: 140px !important; height: 14px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; font-size: 9px !important; line-height: 11px !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget .ctlg-pets-purchase button.nitro-catalog-swf-button { position: absolute !important; left: 11px !important; top: 18px !important; width: 140px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; border: 1px solid #006600 !important; background: #00aa00 !important; box-shadow: inset 0 1px 0 #33cc33, inset 0 -1px 0 #007700 !important; color: #ffffff !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; text-align: center !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget .ctlg-pets-purchase button.nitro-catalog-swf-button:hover { background: #11bb11 !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-widget .ctlg-pets-purchase button.nitro-catalog-swf-button:disabled { background: #8fb98f !important; border-color: #6f8f6f !important; box-shadow: none !important; color: #e6efe6 !important; cursor: default !important; } /* ============================================================ 5. ctlg_pets3 (339x415) ============================================================ */ /* border 33,150 286x220 0xff9900 */ #root .nitro-catalog-window .ctlg-pets3 .ctlg-pets3-box { left: 33px !important; top: 150px !important; width: 286px !important; height: 220px !important; border: 1px solid #ff9900 !important; background: transparent !important; } /* bitmap ctlg_teaserimg_1 44,80 57x57 */ #root .nitro-catalog-window .ctlg-pets3 .ctlg-pets3-teaser { left: 44px !important; top: 80px !important; width: 57px !important; height: 57px !important; object-fit: contain !important; image-rendering: pixelated !important; } /* text ctlg_header_text 123,81 194x63 */ #root .nitro-catalog-window .ctlg-pets3 .ctlg-pets3-header { left: 123px !important; top: 81px !important; width: 194px !important; height: 63px !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-fg) !important; overflow: hidden !important; } /* text ctlg_text_1 45,156 262x18 */ #root .nitro-catalog-window .ctlg-pets3 .ctlg-pets3-text1 { left: 45px !important; top: 156px !important; width: 262px !important; height: 18px !important; font-size: 9px !important; line-height: 13px !important; color: var(--c11-fg) !important; white-space: nowrap !important; text-overflow: clip !important; overflow: hidden !important; } /* text ctlg_text_2 55,172 247x139 */ #root .nitro-catalog-window .ctlg-pets3 .ctlg-pets3-text2 { left: 55px !important; top: 172px !important; width: 247px !important; height: 139px !important; font-size: 9px !important; line-height: 11px !important; color: var(--c11-fg) !important; overflow: hidden !important; } /* text ctlg_text_3 61,320 236x44 */ #root .nitro-catalog-window .ctlg-pets3 .ctlg-pets3-text3 { left: 61px !important; top: 320px !important; width: 236px !important; height: 44px !important; font-size: 9px !important; line-height: 11px !important; color: var(--c11-fg) !important; overflow: hidden !important; } /* ============================================================ 6. CONSISTENCY PASS for the layouts that were NOT rebuilt. One page each: trophies (x3), spaces_new, soundmachine, marketplace, marketplace_own_items, club_buy, plasto, room/single bundle, roomads, badge_display, info_loyalty. These keep Nitro's own structure; this section only removes the remaining modern affordances so they sit inside the 2011 window without clashing. NOT coordinate-accurate. ============================================================ */ #root .nitro-catalog-window .nitro-catalog-layout-container :is(.bg-white, .bg-card-grid-item, .bg-muted) { background: var(--c11-panel-hi) !important; } #root .nitro-catalog-window .nitro-catalog-layout-container [class*='border-'] { border-color: var(--c11-panel-lo) !important; } #root .nitro-catalog-window .nitro-catalog-layout-container :is(textarea, input) { border: 1px solid var(--c11-btn-bd) !important; background: var(--c11-field-bg) !important; border-radius: 0 !important; } /* Nitro paints a lot of these in modern accent colours; 2011 used exactly two text colours in the catalog body. */ #root .nitro-catalog-window .nitro-catalog-layout-container :is(.text-primary, .text-warning, .text-muted, .text-dark) { color: var(--c11-fg) !important; } /* react-icons glyphs are the loudest non-2011 tell left on these pages. */ #root .nitro-catalog-window .nitro-catalog-layout-container svg[class*='fa-'], #root .nitro-catalog-window .nitro-catalog-layout-container .fa-icon { color: var(--c11-fg-dim) !important; } /* Pet breed thumbnails are full-body renders; clamp them to the 36x36 cell so the 280x60 colourGrid slot holds a real grid instead of one huge sprite. */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-grid > * :is(img, canvas, div) { max-width: 34px !important; max-height: 34px !important; object-fit: contain !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } /* ============================================================ 7. LAYERED OVERRIDES — the rules that lost the !important fight. Recap of the trap (2011-catalog-grid.css section 0 documents it too): for !important declarations CSS REVERSES layer order, and unlayered styles rank LAST. So every unlayered `x: y !important` above loses to any Tailwind `w-full!` / `min-h-[..]!` utility in the runtime-injected bundle, no matter how specific it is. Anything the bundle also sets has to live in here. Symptoms this fixed, both verified in the browser: * LayoutGridItem cells came out 278x70 instead of 36x36, so the 280x60 colourGrid slot held one giant sprite instead of a grid. * the header GIFs kept `background-size: contain` and were upscaled by a fractional factor (catalog_pet_headline1 is 190x49 in a 286x60 box), which sliced the pixel lettering. ============================================================ */ @layer c11-a4 { #root .nitro-catalog-window .nitro-catalog-layout-shell:has(.ctlg-frontpage3) .nitro-catalog-swf-header-bg[style*='url('] { background-size: auto !important; background-repeat: no-repeat !important; background-position: center top !important; } #root .nitro-catalog-window .nitro-catalog-layout-shell:has(:is(.ctlg-pets, .ctlg-pets3)) .nitro-catalog-swf-header-bg[style*='url('] { background-size: auto !important; background-repeat: no-repeat !important; background-position: center top !important; } /* itemgrid_vertical colourGrid — 36x36 cells, spacing=2, exactly as the extracted `gridItem` layout. */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-grid > * { flex: 0 0 auto !important; width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; max-width: 36px !important; max-height: 36px !important; padding: 0 !important; gap: 0 !important; border-radius: 0 !important; } #root .nitro-catalog-window .ctlg-pets .ctlg-pets-grid > * > * { max-width: 34px !important; max-height: 34px !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } /* bitmap ctlg_teaserimg_1 87,60 133x127 — the RoomPreviewer canvas. */ #root .nitro-catalog-window .ctlg-pets .ctlg-pets-teaser > * { width: 131px !important; height: 125px !important; min-width: 0 !important; min-height: 0 !important; } } /* ============================================================ 99. POST-REVIEW FIXES (owner feedback: "looks glitchy") Appended last so these win the cascade. ============================================================ */ /* The 2011 catalog has NO search box. It was parked in the nav frame's dead space, where its magnifier glyph overlapped the placeholder text — which is what read as "glitchy". Hidden rather than deleted from the component, so it costs no rebuild and is trivially reversible (delete this rule). */ #root .nitro-catalog-window .nitro-catalog-search-shell, #root .nitro-catalog-window .nitro-catalog-search, #root .nitro-catalog-window input[placeholder*="Search" i] { display: none !important; } /* redeemItemCodeWidget button: the spec gives it caption=${redeem}, not an icon. Nitro renders an inline SVG tag glyph, which cannot be swapped from CSS — so hide the glyph and paint the caption instead, on the standard 2011 bevel. */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row :is(button, .cursor-pointer) svg { display: none !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row :is(button, .cursor-pointer) { border: 1px solid var(--c11-btn-bd, #4a5a60) !important; border-radius: 0 !important; background: var(--c11-btn-bg, #e8ecec) !important; background-image: none !important; color: var(--c11-btn-fg, #2b2b2b) !important; box-shadow: inset 0 1px 0 0 var(--c11-btn-hi, #fff), inset 0 -1px 0 0 var(--c11-btn-lo, #c4cbcb) !important; transition: none !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row :is(button, .cursor-pointer)::after { content: "Canjear"; font-family: var(--c11-font, Volter), monospace !important; font-size: 9px !important; line-height: 9px !important; font-weight: 700 !important; color: var(--c11-btn-fg, #2b2b2b) !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-row :is(button, .cursor-pointer):active { background: var(--c11-btn-down-bg, #ccd3d3) !important; box-shadow: inset 1px 1px 0 0 var(--c11-btn-lo, #c4cbcb) !important; } /* ============================================================ AGENT 4 (final QA) — frontpage legibility corrections ------------------------------------------------------------ 2011 puts ctlg_txt1/2/3 at 44,116 / 44,130 / 44,164, i.e. ON TOP of ctlg_special_img (20,60 300x154), because in 2011 that slot held a PROMO BANNER designed to carry text. This hotel r63b row has page_special = "" (no promo) and the hero we show comes from page_teaser, an illustrated scene with no text well. Rendering "Habbo.vg Catalouge!" over it made it unreadable and read as a bug. Deliberate deviation: move the caption band down into the otherwise empty ctlg_txt4/txt5 area (26,232 280x…) inside the grey bgBorder panel. Nothing is hidden and no page data is changed. Revert: delete this block (backup 2011-catalog-pages.css.a4bak). ============================================================ */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt1.ctlg-fp-txt1 { left: 26px !important; top: 232px !important; width: 280px !important; height: 14px !important; color: var(--c11-fg) !important; text-shadow: none !important; } #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt3.ctlg-fp-txt3 { left: 26px !important; top: 248px !important; width: 280px !important; height: 40px !important; white-space: normal !important; } /* ctlg_txt6 is 272x20 in 2011 (two 9px lines). It was pinned to 12px, which clipped the welcome copy mid-sentence. */ #root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt6.ctlg-fp-txt6 { height: 20px !important; top: 4px !important; line-height: 10px !important; white-space: normal !important; } /* ============================================================ AGENT 4 — ctlg_trophies (2 pages: Trofeus, Trofeus/Outros) The trophies body was never skinned: it shipped modern Nitro chrome (white rounded info card, soft-shadowed textarea) AND repeated the page description that ctlg_header_text already draws directly above it, so the same paragraph appeared twice, the second time in a card that has no 2011 equivalent. Scoped with :has() on the trophy inscription field so nothing else can be caught. Revert: delete this block (backup 2011-catalog-pages.css.a4bak). ============================================================ */ /* the duplicated description card */ #root .nitro-catalog-window .nitro-catalog-layout-container:has(.nitro-catalog-trophy-inscription) > * > .bg-white.rounded { display: none !important; } /* the "INSCRIPCIÓN DEL TROFEO" caption row -> 2011 Volter label */ #root .nitro-catalog-window .nitro-catalog-layout-container:has(.nitro-catalog-trophy-inscription) span[class*=uppercase] { font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--c11-fg) !important; } /* the inscription field -> square 2011 input well */ #root .nitro-catalog-window textarea.nitro-catalog-trophy-inscription.nitro-catalog-trophy-inscription { height: 34px !important; min-height: 34px !important; border-radius: 0 !important; border: 1px solid var(--c11-panel-lo) !important; box-shadow: none !important; background: #ffffff !important; font-size: 9px !important; line-height: 11px !important; padding: 3px 4px !important; resize: none !important; } /* ============================================================ 100. THE NOTEPAD (from the owner's genuine 2011 reference) The 2011 shop page is a SPIRAL-BOUND NOTEPAD: white paper with a silver wire binding along the top edge. layoutBackground (0,0 360x481) is that graphic, not a flat panel. The binding + perforation occupy y 0..37, which is exactly where the spec puts layoutContainer (6,37) - so the page copy starts directly under the perforation, as it did in 2011. Art recovered pixel-for-pixel from the owner's screenshot. ============================================================ */ /* REMOVED by Agent 4 (QA), 2026-07-31. The notepad bitmap used to be painted on `.nitro-catalog-stage::before`. It now lives on the real `layoutBackground` element and is owned solely by 2011-catalog-base.css (`.nitro-catalog-layout-background`, 0,0 360x481). No rule anywhere declares `content` on `.nitro-catalog-stage::before`, so this block generated no box at all - it was dead code with a second, silent copy of the art path. One owner for the notepad, as flagged by Agent 1. */ /* the page is WHITE PAPER - kill the grey panel fill behind the content */ #root .nitro-catalog-window .nitro-catalog-layout-shell, #root .nitro-catalog-window .nitro-catalog-layout-container, #root .nitro-catalog-window .nitro-catalog-content-shell { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* ============================================================ 101. NAVIGATION ROWS - the arrow belongs on the RIGHT In the 2011 reference every expandable row carries a small dark triangle at the RIGHT edge of the row, not a caret on the left. ============================================================ */ #root .nitro-catalog-window [class*="navigation-item"] { position: relative !important; } #root .nitro-catalog-window [class*="navigation-item"] > :is(svg, .fa-icon, [class*="caret"], [class*="chevron"], [class*="arrow"]):first-child { display: none !important; } #root .nitro-catalog-window [class*="navigation-item"][aria-expanded]::after, #root .nitro-catalog-window [class*="navigation-item"]:has(> [class*="children"])::after, #root .nitro-catalog-window [class*="navigation-item"].has-children::after { position: absolute !important; top: 50% !important; right: 5px !important; width: 0 !important; height: 0 !important; margin-top: -3px !important; border-top: 3px solid transparent !important; border-bottom: 3px solid transparent !important; border-left: 4px solid #2b2b2b !important; content: "" !important; } /* ============================================================ 102. PURCHASE BUTTONS - 2011 pixel bevel, not modern fills The stock Buy button is a saturated green pill and Buy-as-gift a white modern button. 2011 used the same chunky bevelled button as everywhere else: flat face, 1px dark outline, 1px light top/left, 1px dark bottom /right, inverting 1px on :active. ============================================================ */ #root .nitro-catalog-window :is(button, .cursor-pointer.select-none):not([class*="navigation"]):not([class*="tab"]) { border: 1px solid var(--c11-btn-bd, #4a5a60) !important; border-radius: 0 !important; background-image: none !important; background-color: var(--c11-btn-bg, #e8ecec) !important; color: var(--c11-btn-fg, #2b2b2b) !important; font-family: var(--c11-font, Volter), monospace !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; text-shadow: none !important; transition: none !important; box-shadow: inset 0 1px 0 0 var(--c11-btn-hi, #fff), inset 0 -1px 0 0 var(--c11-btn-lo, #c4cbcb) !important; } #root .nitro-catalog-window :is(button, .cursor-pointer.select-none):not([class*="navigation"]):not([class*="tab"]):hover { background-color: var(--c11-btn-hover-bg, #f4f7f7) !important; } #root .nitro-catalog-window :is(button, .cursor-pointer.select-none):not([class*="navigation"]):not([class*="tab"]):active { background-color: var(--c11-btn-down-bg, #ccd3d3) !important; box-shadow: inset 1px 1px 0 0 var(--c11-btn-lo, #c4cbcb) !important; } /* 103. The BUY button keeps a green "positive action" face (2011 used green for buy/confirm) but gets the same pixel bevel as every other button. Needs the doubled class to beat the bundle rule that pins rgb(0,170,0). */ #root .nitro-catalog-window button.btn-success.btn-success, #root .nitro-catalog-window .btn-success.btn-success, #root .nitro-catalog-window :is(button, .cursor-pointer)[class*="success"] { border: 1px solid #2f6b1f !important; border-radius: 0 !important; background-image: none !important; background-color: #5aa32a !important; color: #ffffff !important; font-family: var(--c11-font, Volter), monospace !important; font-size: 9px !important; font-weight: 700 !important; text-shadow: 1px 1px 0 #2f6b1f !important; box-shadow: inset 0 1px 0 0 #8ccc5e, inset 0 -1px 0 0 #3f7d22 !important; transition: none !important; } #root .nitro-catalog-window button.btn-success.btn-success:active, #root .nitro-catalog-window .btn-success.btn-success:active { background-color: #4a8c22 !important; box-shadow: inset 1px 1px 0 0 #3f7d22 !important; } /* 104. The BUY control is a DIV.inline-flex inside .ctlg-purchase (not a