/* Theme Name: WP Rentals Child - Puerto Morelos Life Theme URI: https://rentals.puertomoreloslife.com Description: Child theme for WP Rentals, customized for Puerto Morelos Life vacation rental directory. Author: Chuy (JesusLpz30) Author URI: https://github.com/JesusLpz30 Template: wprentals Version: 1.0.7 License: Private Text Domain: wprentals-child */ /* !!! VERSION HEADER KILL SWITCH — DO NOT BUMP TO 1.1+ !!! The PARENT theme (wprentals/functions.php, wprentals_deactivate_21_plugin on admin_init) reads THIS file's "Version:" header via wp_get_theme() and FORCE-DEACTIVATES the wprentals-core plugin (singles 404, home/about 500) whenever floatval(Version) lands in [1.1, 2.2). This caused the S17 and S43 incidents (Version 2.0.0 and 1.1.x respectively). Safe values: 1.0.x ONLY (floatval == 1 is the vendor's child-theme exemption). Bump the PATCH digit for cache busting (1.0.1, 1.0.2, ...). Watchdog: mu-plugins/pml-watchdog.php. Runbook: docs repo custom-code-registry.md "Single property 404". */ /* Parent theme folder verified 2026-04-09 in Local pull from Production: wp-content/themes/wprentals/ — child theme correctly references it. */ /* ========================================================================== PML Design System Variables CT-55 (2026-06-06) — TOTAL MIGRATION to the Showit-extracted flat system. Old system (coral #E45E4C + Jost + glassmorphism) SUPERSEDED. ========================================================================== */ :root { /* ========================================================================== LAYER 0 — NEW DESIGN SYSTEM PRIMITIVES (CT-55, 2026-06-06) Source of truth: docs/governance/design-system/ (extracted from Showit). Decision: Chuy 2026-06-06 — total brand switch to the flat Showit system (coral #FA4E24, cream, Outfit/Poppins, zero shadow/glass, square inputs, pill buttons). Strategy "break-nothing": these new --color-*/--font-*/ --radius-* names are canonical for NEW code; the legacy --pml-* names in Layer 1 are KEPT and re-pointed here (153+ refs depend on the --pml-* names, so we re-map values instead of renaming). Fonts are Google-Fonts- only / OFL (Outfit + Poppins); Showit-CDN + the Marlide trial font are intentionally NOT used (100% license-clean — Chuy decision). ========================================================================== */ /* Backgrounds */ --color-bg-page: #fcf9f5; /* cream — global page background */ --color-bg-dark: #2e0a16; /* burgundy — dark section / footer */ --color-bg-lavender: #ead8f5; /* lavender accent */ --color-bg-sky: #d0eaf0; /* sky — soft blue accent / UI button */ --color-bg-chartreuse: #e9f29c; /* chartreuse accent */ --color-bg-white: #ffffff; --color-bg-black: #000000; /* Brand / accent */ --color-primary: #fa4e24; /* coral — CTA, logo, nav */ --color-secondary: #eca27a; /* peach — secondary button (NOTE: white text on peach = 2.1:1, fails AA — use dark text on peach) */ --color-coral-dark: #c63d18; /* WCAG AA coral for body links — 5.14:1 on white (new #fa4e24 is only 3.4:1 = AA-large/buttons only) */ /* Text */ --color-text-default: #000000; --color-text-white: #ffffff; --color-text-dark: #2e0a16; /* burgundy display text */ --color-text-gray: #333333; /* inputs / body */ --color-text-accent: #fa4e24; /* Borders */ --color-border-gray: #b8b8b8; /* input / structural borders (flat system) */ /* UI */ --color-dot-indicator: #ead8f5; /* decorative nav dot */ /* Fonts — Google Fonts only (OFL). Outfit ≈ Google Sans; Poppins = UI. --font-display-serif (Fraunces) is RESERVED but NOT enqueued unless an in-scope serif heading needs it (search + user pages use sans only). */ --font-body: 'Outfit', sans-serif; /* body, headings */ --font-ui: 'Poppins', sans-serif; /* inputs, controls, small labels */ --font-display-serif: 'Fraunces', serif; /* reserved — not loaded by default */ --font-system: 'Times', serif; /* nav (system serif) */ /* Radius — new flat scale (canonical). Per-component application is CT-56; legacy --pml-radius-* below stay at old values until CT-56 remaps them. */ --radius-none: 0px; --radius-sm: 30px; /* image / property cards */ --radius-md: 40px; /* containers, modals, dropdowns */ --radius-pill: 100px; /* primary buttons, nav pills */ --radius-circle: 50%; /* ========================================================================== LAYER 1 — LEGACY PRIMITIVES (--pml-*) — REMAPPED to Layer 0 (CT-55) Names preserved for cascade safety. Values now point at the new system. Old Kim WhatsApp palette superseded by docs/governance/design-system/ (brand-source-kim/ kept as historical provenance only). ========================================================================== */ /* Primary */ --pml-coral: var(--color-primary); /* now #fa4e24 */ --pml-coral-dark: var(--color-coral-dark); /* now #c63d18 — AA body links */ --pml-black: var(--color-bg-black); --pml-white: var(--color-bg-white); /* Secondary — remapped to new accents; gold/pink RETAINED as functional */ --pml-off-white: var(--color-bg-page); /* now cream #fcf9f5 */ --pml-light-blue: var(--color-bg-sky); /* now sky #d0eaf0 */ --pml-pink: #f7cbcb; /* RETAINED functional — calendar booked days */ --pml-blue: var(--color-bg-sky); /* now sky (was secondary accent) */ --pml-gold: #e8bb5c; /* RETAINED functional — star ratings */ /* Text hierarchy (neutral grays — work in both systems) */ --pml-text: var(--color-text-gray); /* #333 body */ --pml-text-secondary: #666666; /* Captions, metadata */ --pml-text-tertiary: #999999; /* Placeholders, disabled */ /* Utilities */ --pml-border: var(--color-border-gray); /* now #b8b8b8 — flat structural border */ --pml-hover-bg: #f5f0ec; /* RETAINED — warm hover bg (cream family) */ /* Typography family — remapped to Outfit/Poppins (was Jost) */ --pml-font-heading: var(--font-body); /* Outfit — headings, titles */ --pml-font-accent: var(--font-ui); /* Poppins — UI: dropdowns, buttons, cards, inputs */ --pml-font-body: var(--font-body); /* Outfit — body text */ /* ========================================================================== LAYER 1.5 — TYPOGRAPHY PRIMITIVES (sizes, weights, line-heights, tracking) Source of truth: docs/governance/typography-system.md Decision S25: 12 sizes, 5 weights, 9 line-heights, 6 letter-spacings. Anything outside this set in CSS = drift. ========================================================================== */ /* Sizes (12 total) */ --pml-fs-display: 36px; /* Hero / display headlines */ --pml-fs-h1: 28px; /* Page titles, single property name */ --pml-fs-h2: 24px; /* Section headings (Description, Amenities) */ --pml-fs-h3: 20px; /* Card group headings, subsections */ --pml-fs-h4: 18px; /* Tertiary headings, nav menu items */ --pml-fs-body-lg: 16px; /* Lead paragraphs, prices */ --pml-fs-body: 15px; /* Standard body, card titles */ --pml-fs-button: 15px; /* Button labels */ --pml-fs-body-sm: 14px; /* Inputs, captions, secondary content */ --pml-fs-label: 13px; /* Form labels, badges, metadata */ --pml-fs-helper: 12px; /* Helper text, disclaimers, small print */ --pml-fs-overline: 11px; /* Badges, pill labels, tiny tags (UPPERCASE) */ /* Weights (5 total — 300 reserved but currently unused) */ --pml-fw-light: 300; /* Reserved (not currently applied) */ --pml-fw-regular: 400; /* Body text default */ --pml-fw-medium: 500; /* Form labels, nav items */ --pml-fw-semibold: 600; /* Headings h2-h4, card titles, primary buttons */ --pml-fw-bold: 700; /* H1, prices, hero, strong emphasis */ /* Line-heights (9 total) */ --pml-lh-tight: 1; /* Icons, single-line buttons */ --pml-lh-display: 1.1; /* Display headlines (36px+) */ --pml-lh-heading-h1: 1.2; --pml-lh-heading-h2: 1.25; --pml-lh-heading-h3: 1.3; --pml-lh-heading-h4: 1.35; --pml-lh-tight-body: 1.4; /* Card titles, dense UI text */ --pml-lh-body: 1.5; /* Body paragraphs, normal */ --pml-lh-relaxed: 1.6; /* Long-form content (terms, blog) */ /* Letter-spacing (6 total) */ --pml-ls-tight: -0.5px; /* Display headlines */ --pml-ls-tight-h: -0.3px; /* H1 */ --pml-ls-tight-soft: -0.2px; /* H2 */ --pml-ls-normal: 0; /* Default body, h3, h4, inputs */ --pml-ls-wide: 0.3px; /* Button labels */ --pml-ls-wider: 0.5px; /* Overline / uppercase badges */ /* ========================================================================== LAYER 2 — SEMANTIC TOKENS (decision S25, Chuy approved) Source of truth: docs/governance/brand-guidelines.md §1.5 New code uses these. Existing primitive references stay valid. ========================================================================== */ /* Backgrounds */ --pml-bg-page: var(--pml-off-white); /* Page-level background */ --pml-bg-card: var(--pml-white); /* Cards, modals, content surfaces */ --pml-bg-hover: var(--pml-hover-bg); /* Hover state on dropdowns/menu items */ --pml-bg-glass-strong: var(--pml-white); /* FLAT (CT-55) — glass removed, solid surface */ /* Text (semantic) */ --pml-text-heading: var(--pml-black); /* Headings h1-h4 */ --pml-text-body: var(--pml-text); /* Body paragraphs */ --pml-text-on-coral: var(--pml-white); /* Text on coral backgrounds (buttons) */ --pml-text-link: var(--pml-coral-dark); /* Inline links in body — WCAG AA 5.4:1 */ /* --pml-text-secondary and --pml-text-tertiary already defined above as primitives */ /* Borders (semantic) */ --pml-border-accent: var(--pml-light-blue); /* Accent borders, alternating dividers */ /* Action / interactive */ --pml-action: var(--pml-coral); /* Primary CTA buttons, action color */ --pml-action-hover: var(--color-coral-dark); /* Darken of coral on hover (CT-55) */ --pml-action-text: var(--pml-white); /* Text on --pml-action */ /* Semantic states — Strong Universal (decision S25) Universal recognition (red/green/amber) overrides strict Kim-adherence in functional UI feedback. WCAG AA verified for text-on-bg per token. */ --pml-error-bg: #fee2e2; --pml-error-text: #dc2626; --pml-error-border: #f87171; --pml-success-bg: #dcfce7; --pml-success-text: #16a34a; --pml-success-border: #4ade80; --pml-warning-bg: #fef3c7; --pml-warning-text: #b45309; --pml-warning-border: #fbbf24; /* Premium / accent */ --pml-rating: var(--pml-gold); /* Stars, premium badges */ --pml-accent-pink: var(--pml-pink); /* Calendar booked days */ --pml-accent-blue: var(--pml-blue); /* Footer links, secondary accent */ /* ========================================================================== LAYER 2.1 — BORDER-RADIUS SCALE (decision S25 Fase 2B) Source of truth: docs/governance/brand-guidelines.md §3 + §4 Anything outside this scale = drift. Special asymmetric cases (e.g., `2px 0 0 0`) stay as inline values, intentional. ========================================================================== */ /* CT-56: remapped to the flat Showit scale (0 / 30 / 40 / pill / circle). lg=40px → pill on short buttons (radius ≥ half-height) AND 40px on dropdown/panel surfaces, resolving the shared-token conflict. */ --pml-radius-xs: 0; /* was 4px — flat badges/tags */ --pml-radius-sm: 0; /* was 6px — flat notices */ --pml-radius: 0; /* was 8px — square secondary buttons / small cards */ --pml-radius-md: 0; /* was 10px — SQUARE INPUTS */ --pml-radius-lg: 40px; /* was 12px — pill buttons + 40px panels/dropdowns */ --pml-radius-card: 30px; /* was 14px — image / property cards */ --pml-radius-xl: 40px; /* was 16px — modals, popups, containers */ --pml-radius-pill: 100px; /* was 9999px — pill (same effect) */ --pml-radius-circle: 50%; /* circular elements */ /* ========================================================================== LAYER 2.2 — GLASS / SHADOW TOKENS — FLATTENED (CT-55) The new Showit system uses NO box-shadow and NO glassmorphism. Hierarchy is built from color, shape, and typography. These tokens are flattened to none/solid so every component that references them flattens automatically (the per-component pass CT-56 cleans up any hardcoded shadow/glass left). ========================================================================== */ /* Backdrop-filter blur — FLATTENED: no glassmorphism */ --pml-blur-light: none; --pml-blur-standard: none; --pml-blur-strong: none; /* Glass surfaces — FLATTENED to solid */ --pml-glass-strong: var(--pml-white); --pml-glass-medium: var(--pml-white); --pml-glass-edge: var(--color-border-gray); /* CT-58: flat panel border #b8b8b8 (defines edges without shadow) */ /* Box-shadow scale — FLATTENED to none */ --pml-shadow-card: none; --pml-shadow-card-hover: none; --pml-shadow-floating: none; --pml-shadow-subtle: none; } /* ========================================================================== S31 — Focus rings, tap highlight, back-to-top (global resets) -------------------------------------------------------------------------- Reset transversal: 1) Outline default del browser (azul/morado/negro) en click/focus → reportado por Chuy "borde feo azul oscuro al click". Solución moderna usa :focus-visible para mostrar outline SOLO en keyboard navigation. Click/tap del mouse/dedo no muestra outline. WCAG SC 2.4.7 (Focus Visible) sigue satisfecho — keyboard users ven el outline coral brand. @supports gate evita romper accesibilidad en browsers ancestrales que no soportan :focus-visible (Chrome <86, Safari <15.4) — esos mantienen el outline default del browser por fallback. Hoy son <0.5% del tráfico pero la regla es no degradar a11y. 2) -webkit-tap-highlight-color (flash overlay azul/gris al tap en mobile) → transparente. Sin esto cada tap muestra un overlay momentáneo encima del elemento. 3) Back-to-top button del parent theme (.backtop). CT-14 lo redesignó coral 36px en S13 pero Chuy ya no lo quiere visible en ninguna parte ("no me gusta que aparezca"). Hide global con display: none. El FAB de Rentals (S31 Bug 2/3) ocupará esa esquina en property-list/advanced-search; el resto del sitio no necesita scroll-to-top porque las páginas son cortas. Si en el futuro se quiere recuperar, basta quitar esta regla — los estilos de CT-14 siguen vivos pero inactivos por display:none. ========================================================================== */ * { -webkit-tap-highlight-color: transparent; } @supports selector(:focus-visible) { *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--pml-coral); outline-offset: 2px; } /* CT-61 (S44) — kill the BLUE focus ring on click/tap. Bootstrap 3 (parent theme) sets `outline: 5px auto -webkit-focus-ring-color` (the browser's blue ring) with `outline-offset:-2px` on a:focus, .btn:focus, and radio/checkbox/file:focus. Its class-level specificity (e.g. .btn:focus = 0,2,0) BEAT the global `*:focus` reset above (0,1,0), so the blue inset ring survived every prior attempt to remove it. These selectors restore the win for pointer interaction; keyboard users still get the coral :focus-visible ring above (a11y preserved). Text inputs keep their own coral focus (rules further down) — not touched here. */ a:focus:not(:focus-visible), .btn:focus:not(:focus-visible), button:focus:not(:focus-visible), input[type="file"]:focus:not(:focus-visible), input[type="radio"]:focus:not(:focus-visible), input[type="checkbox"]:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; } } /* S31 Bug #4 — Proxy invisible para el handler de #topbarlogin del parent. El parent inyecta un
en su header.php; templates custom del child que no llaman get_header() pierden ese elemento. El JS del parent no encuentra el target → modal de login nunca se dispara. Inyectamos un proxy en CT-16 (visualmente oculto pero presente en DOM) para que el listener del parent y mi pml-header.js lo encuentren. Patrón visually-hidden (a11y) — sin display:none que rompería listeners. */ .pml-login-modal-proxy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* Defensive selectors para back-to-top — el parent theme y plugins comunes usan varias convenciones. Cubrimos las más típicas para que ninguna variante se cuele. */ .backtop, #backtotop, #back-to-top, .back-to-top, .scrolltop, .scroll-top, .scrolltotop, .scroll-to-top, [class*="backtotop"], [id*="backtotop"] { display: none !important; visibility: hidden !important; } /* ========================================================================== WCAG 2.2 AA — Coral contrast fix -------------------------------------------------------------------------- The brand coral #e45e4c has only 3.3:1 contrast on white, which fails WCAG 2.2 AA for body text (needs 4.5:1). Real legal exposure: ADA US, AODA Canada. The brand color is preserved on solid coral backgrounds (where text is white) and on large headings (where the WCAG threshold for "large text" is 3:1, which #e45e4c just meets). Strategy: - Body text → #333 (was already mostly the case) - Inline links inside content → coral-dark #b5440f - Coral text on white anywhere it appears as small text → coral-dark - Buttons / hero coral backgrounds with white text → untouched Audit reference: docs/research/wprentals-audit-2026-04-09.md (P0 #1) ========================================================================== */ /* Inline content links — replace pure coral with accessible variant */ .entry-content a:not(.btn):not(.button):not([class*="wpestate"]), .listing_wrapper a:not(.btn):not(.button), .property_listing a:not(.btn):not(.button), .single-estate_property .listing_main_wrapper a:not(.btn):not(.button), .post-content a:not(.btn):not(.button), .widget a:not(.btn):not(.button) { color: var(--pml-coral-dark); } /* Common WP Rentals text elements where #e45e4c was applied as foreground */ .listing_main_image_price, .property_listing_price, .price_label, .price, .listing-unit-price-wrap, .property-meta .meta-price, .estate_breadcrumbs a, .entry-meta a, .post-meta a, .read-more, .more-link { color: var(--pml-coral-dark); } /* Hover state — keep coral-dark, slightly darker on hover */ .entry-content a:not(.btn):not(.button):not([class*="wpestate"]):hover, .listing_wrapper a:not(.btn):not(.button):hover, .property_listing a:not(.btn):not(.button):hover, .single-estate_property .listing_main_wrapper a:not(.btn):not(.button):hover, .post-content a:not(.btn):not(.button):hover, .widget a:not(.btn):not(.button):hover { /* S25: was #8a3308 (undocumented brown). Use coral-dark token — same WCAG AA, in-palette. */ color: var(--pml-coral-dark); text-decoration: underline; } /* Body text default — guarantee #333 even if parent overrides */ body, .entry-content, .entry-content p, .post-content, .post-content p, .widget, .listing_wrapper p, .property_description { color: var(--pml-text); } /* ========================================================================== CT-2 companion: dimensions for full-width featured image -------------------------------------------------------------------------- Parent CSS defines min-height for col-md-6 (515px) and col-md-3 (258px) but NOT for col-md-12. When CT-2 outputs col-md-12 for listings with <4 photos, the background-image div collapses without explicit height. References: Parent style.css:7863 .header_masonry .col-md-6.image_gallery { min-height: 515px } Parent style.css:7867 .header_masonry .col-md-3.image_gallery { min-height: 258px } Parent my_media.css:2803 @media ≤768px .header_masonry .image_gallery { 150px } ========================================================================== */ .header_masonry .col-md-12.image_gallery { min-height: 515px; } @media only screen and (max-width: 768px) { .header_masonry .col-md-12.image_gallery { min-height: 300px !important; height: 300px; width: 100% !important; } } @media only screen and (max-width: 667px) { .header_masonry .col-md-12.image_gallery { min-height: 250px !important; height: 250px; width: 100% !important; } } /* ========================================================================== Icon content fix — fontello pseudo-elements -------------------------------------------------------------------------- Parent theme style.css defines `content` multiple times in the same rule (Font Awesome fallback → fontello override). WP Engine's CSS optimization or browser parsing strips duplicate content declarations, leaving content: "" (empty). This makes all form icons invisible. Fix: explicitly re-declare the correct fontello content values. Parent references: style.css:8821-8834 .calendar_icon:after content: "\e801" style.css:8976-8999 .guest_icon ... content: "\e80c" style.css:9164-9171 .map_icon:after content: "\e800" ========================================================================== */ /* Fontello icon fix — content + position Parent's triple content declaration breaks in CSSOM (content: "" computed). Icons also need vertical centering within 34px-high inputs. */ body .calendar_icon::after { content: "\e801" !important; font-family: "fontello" !important; top: 7px !important; font-size: 18px; } body .guest_icon .wpestate_guest_no_control_wraper::after, body .guest_no_drop::after, body #guest_no_drop::after, body #guest_no_shortcode::after, body #guest_no_mobile::after, body #booking_guest_no_wrapper::after, body #guest_no_widget::after, body #guest_no::after { content: "\e80c" !important; font-family: "fontello" !important; top: 5px !important; font-size: 22px; } /* Align Guests field padding with calendar fields */ .guest_icon .wpestate_guest_no_control_info, .guest_no_drop .wpestate_guest_no_control_info { padding-left: 45px !important; } body .map_icon::after { content: "\e800" !important; font-family: "fontello" !important; top: 7px !important; font-size: 17px; } /* ========================================================================== Search form icon positioning fix -------------------------------------------------------------------------- The search form fields (Location, Check-In, Check-Out, Select Guests, Rental Type, etc.) use .custom_icon_class_icon with position:absolute, but the parent containers (col-md-4, col-md-8) lack position:relative. Icons position relative to a distant ancestor instead of their field. Also, parent CSS has `top` commented out (style.css:3938 /*top: 18px;*/), relying on line-height:48px which doesn't center properly in 39px inputs. Fix: add position:relative to field containers + explicit top for icons + padding-left for inputs inside those containers. ========================================================================== */ /* Ensure field containers are positioning context for absolute icons */ .advanced_search_form_wrapper [class*="col-md-"] { position: relative; } /* Center icon vertically within the input */ .advanced_search_form_wrapper .custom_icon_class_icon { top: 50% !important; transform: translateY(-50%); line-height: normal !important; } /* Ensure all inputs next to icons have left padding for the icon */ .advanced_search_form_wrapper .form-control, .advanced_search_form_wrapper .wpestate_guest_no_control_info { padding-left: 45px !important; } /* ========================================================================== Font Awesome icon content fix -------------------------------------------------------------------------- Same CSSOM bug as fontello: FA6 all.min.css and fontawesome.min.css have correct content values in the raw file, but browser CSSOM parses them as content: "" (empty) for all ::before pseudo-elements. Fix: re-declare content for all FA icons used on the site. Values sourced from: themes/wprentals/css/fontawesome/css/all.min.css ========================================================================== */ /* Search form icons (custom_icon_class_icon) */ body .fa-calendar-alt::before, body .fa-calendar-days::before { content: "\f073" !important; } body .fa-globe::before { content: "\f0ac" !important; } body .fa-users::before { content: "\f0c0" !important; } body .fa-home::before, body .fa-house::before { content: "\f015" !important; } body .fa-bed::before { content: "\f236" !important; } body .fa-dollar-sign::before, body .fa-dollar::before, body .fa-usd::before { content: "\24" !important; } body .fa-hospital::before { content: "\f0f8" !important; } body .fa-eye-slash::before { content: "\f070" !important; } body .fa-heart::before { content: "\f004" !important; } body .fa-times::before, body .fa-xmark::before { content: "\f00d" !important; } body .fa-chevron-up::before { content: "\f077" !important; } body .fa-chevron-left::before { content: "\f053" !important; } body .fa-chevron-right::before { content: "\f054" !important; } body .fa-chevron-down::before { content: "\f078" !important; } /* ========================================================================== Caret fix — Bootstrap vs parent theme conflict -------------------------------------------------------------------------- Parent theme sets .caret { border: none } to hide Bootstrap's CSS triangles and replace with FA chevron via .caret::after. But Bootstrap loads AFTER parent (line 104 vs 102) and re-applies border-top/bottom, making two triangles visible. Meanwhile FA chevron ::after has empty content (CSSOM bug). Fix: hide Bootstrap caret borders + restore FA chevron content. ========================================================================== */ .caret, .caret_filter, .caret_sidebar { border: none !important; width: auto !important; height: auto !important; } .caret::after { content: "\f078" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900; font-size: 11px; color: var(--pml-text-tertiary); } /* ========================================================================== Mobile header fix — compact + solid background -------------------------------------------------------------------------- On half-map pages, the header is position:fixed with transparent background and 241px height (announcement bar + search form). This eats ~50% of mobile viewport. Fix: solid background, hide search form on mobile (accessible via filter button instead), keep header compact. ========================================================================== */ /* ========================================================================== Mobile/Tablet header — PLACEHOLDER -------------------------------------------------------------------------- PENDIENTE: Diseño responsive del header planificado por breakpoints. Requiere mapear TODOS los breakpoints del parent theme + Elementor + Bootstrap antes de implementar. Ver plan en resumen-para-continuar.md. Breakpoints identificados que necesitan atención: >1155px = desktop (funciona bien) 1155-1007px = nav desaparece, solo Login/SignUp/Submit 1007-691px = hamburger aparece pero en posición incorrecta <691px = mobile (Login/SignUp en fila extra, ocupa mucho espacio) NO IMPLEMENTAR sin plan completo. Feedback S12: no trial-and-error. ========================================================================== */ /* ========================================================================== Back to top button — redesign -------------------------------------------------------------------------- Parent: 50px circle, black bg, asymmetric padding, oversized. Fix: 36px circle, PML coral bg, centered icon, subtle shadow. ========================================================================== */ /* ========================================================================== Mobile menu fixes — scrollable + Login/Sign Up styling ========================================================================== */ /* Make mobile menu scrollable when it exceeds viewport height */ .snap-drawer, .wpestate-elementor-menu-mobile-container .mobilex-menu { max-height: 80vh; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Back-to-top: hidden on desktop, visible on mobile only */ .backtop { display: none !important; } @media (max-width: 768px) { .backtop { width: 36px !important; height: 36px !important; font-size: 14px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; background-color: var(--pml-coral) !important; border-radius: var(--pml-radius-circle) !important; bottom: 20px !important; right: 16px !important; box-shadow: none; /* CT-56 flat */ opacity: 0.85 !important; z-index: 999 !important; } .backtop:hover { opacity: 1 !important; background-color: var(--pml-coral-dark) !important; } .backtop i, .backtop::before { color: var(--pml-white) !important; font-size: 14px; line-height: 1; } } /* ========================================================================== Uniform property card image height -------------------------------------------------------------------------- Property cards use background-image which renders at different heights depending on the original image aspect ratio. Forces consistent height across all cards for visual uniformity. ========================================================================== */ .listing-unit-img-wrapper, .listing-unit-img-wrapper .carousel, .listing-unit-img-wrapper .carousel-inner, .listing-unit-img-wrapper .carousel-inner .item, .listing-unit-img-wrapper .carousel-inner .item a { min-height: 280px; } .listing-unit-img-wrapper img { width: 100%; height: 280px; object-fit: cover; } /* ========================================================================== Migrated from Theme Options Custom CSS (was in DB, now version-controlled) -------------------------------------------------------------------------- CSS #0: Sliding Box + Testimonials (pre-existing, author unknown) CSS #1: Polylang Language Switcher Dropdown (Chuy, 2026-03-10) After migrating, enable `wp_estate_on_child_theme` toggle in Theme Options to stop WP Rentals from outputting the duplicate inline CSS. Registry: docs/governance/custom-code-registry.md ========================================================================== */ /* --- CSS #0 — Sliding Box + Testimonials --- */ .wpestate_sliding_box .sliding-content-wrapper { /* S25: was #fdf8f4 (orphan near-off-white). Use off-white token — virtually identical visual, in-palette. */ background: var(--pml-off-white); } .testimonial_type_2 .testimonial-text, .testimonial-container.testimonial_type_2 { background-color: #FFFFFF; box-shadow: none; } /* --- CSS #1 — Polylang Language Switcher Dropdown --- */ /* Dropdown menu container */ ul.sub-menu:has(.lang-item) { background-color: var(--pml-white) !important; border: 1px solid var(--pml-light-blue) !important; box-shadow: none !important; /* CT-58 flat */ padding: 4px 0 !important; } /* Items de idioma */ .lang-item { background-color: var(--pml-white) !important; } /* Enlaces dentro del dropdown */ .lang-item a.menu-item-link { color: var(--pml-black) !important; background-color: var(--pml-white) !important; padding: 8px 16px !important; display: block !important; } /* Hover sobre items */ .lang-item a.menu-item-link:hover { background-color: var(--pml-off-white) !important; color: var(--pml-coral) !important; } /* Ocultar idioma activo del dropdown */ .sub-menu .lang-item.current-lang { display: none !important; } /* ========================================================================== Layout centering fix — Bootstrap .row override -------------------------------------------------------------------------- The site structure uses
. Parent theme sets .content_wrapper { margin: 0 auto } (style.css:516), but Bootstrap loads AFTER the parent theme (bootstrap-css enqueued after wprentals-parent-style-css) and overrides with: .row { margin-left: -15px; margin-right: -15px } Same specificity (0,1,0), later source order wins → content is NOT centered, sits flush-left on wide viewports. Fix: restore auto margins with higher specificity (0,3,0). Does not affect other .row elements (scoped to .main_wrapper). Audit reference: S13 investigation — CSS cascade analysis of 46 stylesheets ========================================================================== */ /* Centering: let WP Rentals Theme Options "Main Grid Width" control the max-width globally. We only force auto margins on the content wrapper to fix the Bootstrap .row negative-margin override. */ .main_wrapper .content_wrapper.row { margin-left: auto; margin-right: auto; } /* Single listing pages: constrain the outer container on wide screens. Parent theme's .wide class sets width:100%/max-width:100% which removes centering. This scoped rule restores it for single property pages only. Does NOT affect half-map pages (they use .is_half_map body class). */ .single-estate_property .container.main_wrapper { max-width: 1400px; margin-left: auto; margin-right: auto; } /* CI/CD verification — first deploy via GitHub Actions to puertomoreldev (2026-04-09) */ /* ========================================================================== CT-16 — Hide parent theme's native headers (so CT-16 custom header wins) ========================================================================== PROBLEM: WP Rentals parent theme emits its own header markup on every page load — multiple variants depending on device/page (desktop `.master_header`, mobile `.mobile_header`, Snap.js mobile drawer `.mobilewrapper`/`.snap-drawers`). Additionally, an Elementor Studio Template (post ID 41777) may render a theme-level Elementor header on any page that uses Elementor. If we simply added our custom header without hiding the natives, the user would see DUPLICATE headers stacked on top of each other. ROOT CAUSE (why we don't edit the parent instead): Modifying the parent theme would break WP Rentals updates. The parent's header PHP is deeply intertwined with booking forms, login modals, menu trees, Polylang integration, etc. — hundreds of lines we don't want to own. Overriding select pieces via pluggable functions would still leave layout/CSS conflicts. The cleanest decoupling is: let the parent render its header invisibly (PHP still executes, hooks still fire, no errors), then hide it with CSS. WHY `!important` and 4 layered properties (display/height/overflow/visibility): WP Rentals' own stylesheets use `!important` in places and sometimes re-apply `display: block` via JavaScript on scroll/resize. Layering `display: none`, `height: 0`, `overflow: hidden`, and `visibility: hidden` ensures the native header is invisible even if one of them is overridden by a late-loading rule. Defensive belt-and-suspenders by design. SCOPE: Applies globally — all pages that would otherwise render these classes. Our CT-16 custom header is injected via `wp_body_open` hook, which fires BEFORE the parent's `get_header()` output, so our header renders first in the DOM but both exist. This rule makes the parent one invisible. MAINTENANCE: If WP Rentals publishes a theme update that renames these classes (e.g., `.master_header` → `.wpe-master-header`), this rule goes stale and the old-classname native header reappears. Audit after each parent theme update by opening any page with DevTools and searching for visible header-like elements outside `.pml-header`. */ .master_header, .mobile_header, .mobilewrapper, .mobilewrapper-user, .snap-drawers { display: none !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; } /* Hide ANY Elementor-rendered header/footer template globally. WP Rentals ships "Studio Templates" — Elementor templates for header/footer that can be published and assigned via Elementor Theme Builder or WP Rentals Studio settings. Any such template renders in addition to our CT-16 custom header, causing DOUBLE NAVBAR / DOUBLE FOOTER. HISTORICAL IDs SEEN (documented for future audits): - 41777 — original Studio Template header, Kim set to Draft in S17 (2026-04-13) - 41970 — original Studio Template footer, Kim set to Draft in S17 - 42634 — discovered S19 (2026-04-20) on homepage; origin unknown, possibly auto-created when Chuy experimented with Elementor Canvas templates STRATEGY (defensive, template-ID-agnostic): Instead of enumerating every known template ID (brittle — new IDs can appear), we hide ANY element with `data-elementor-type="header"` or `data-elementor-type="footer"`. These data attributes are emitted by Elementor Pro Theme Builder for ALL header/footer location templates. Result: no matter how many Elementor-rendered header/footer templates exist or get created, they all stay hidden while our CT-16/CT-17 custom ones remain the only visible header/footer. `position: absolute` is belt-and-suspenders: if Elementor's own JS re-applies `display: block`, `position: absolute` still removes the element from normal flow so it doesn't push content around. TRADE-OFF: If we ever WANT to use Elementor Pro Theme Builder for header/footer (alternative to CT-16/17), we'd need to remove this rule. Currently (S19) decision is: keep CT-16/17, hide any accidental Elementor templates. */ header[data-elementor-type="header"], footer[data-elementor-type="footer"], [data-elementor-type="header"], [data-elementor-type="footer"], .elementor-location-header, .elementor-location-footer, .elementor-41777, .elementor-41970, .elementor-42634 { display: none !important; position: absolute !important; } /* ========================================================================== CT-24 — Announcement Banner (above header) Renders only when widget area "PML Announcement Banner" has content. Kim edits text from wp-admin → Appearance → Widgets. ========================================================================== */ .pml-banner { position: relative; width: 100%; background: var(--pml-coral); color: #fff; font-family: var(--pml-font-accent); font-size: 14px; font-weight: 500; text-align: center; padding: 8px 40px; z-index: 10001; /* above header */ } .pml-banner__inner { max-width: 1200px; margin: 0 auto; } .pml-banner__inner p { margin: 0; line-height: 1.4; } .pml-banner__inner a { color: #fff; text-decoration: underline; font-weight: 600; } .pml-banner__inner a:hover { opacity: 0.85; } .pml-banner__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; opacity: 0.8; transition: opacity 0.2s; } .pml-banner__close:hover { opacity: 1; } /* Hide banner on dashboard pages */ .is_dashboard_page .pml-banner { display: none; } @media (max-width: 767px) { .pml-banner { font-size: 12px; padding: 6px 32px 6px 12px; } .pml-banner__close { right: 4px; font-size: 18px; } } /* ========================================================================== CT-16 — Custom Header: Base styles (desktop >1200px) ========================================================================== */ /* S31 — Altura del header en estado FIXED (post-scroll, position:fixed), expuesta como variable CSS global para que componentes con sticky descendants (CT-37 Rentals search bar, CT-36 Zones, etc.) puedan offsetearse sin hardcodear ni desincronizarse cuando cambia la altura del header en otro breakpoint. Una sola fuente de verdad: aquí. Valores deben coincidir con `.pml-header--fixed { height }` + sus media queries más abajo (líneas 859-893, 1681-1683, 1795-1797, 1840-1842). Si cambia uno, cambia el otro. */ :root { --pml-header-h-fixed: 64px; } @media (max-width: 768px) { :root { --pml-header-h-fixed: 56px; } } @media (max-width: 375px) { :root { --pml-header-h-fixed: 48px; } } .pml-header { position: relative; top: 0; left: 0; right: 0; z-index: 9999; height: 84px; padding-top: 10px; padding-bottom: 10px; background-color: var(--pml-off-white); box-shadow: none; font-family: var(--pml-font-accent); } /* Fixed state: slides down from -100% via CSS transition */ .pml-header--fixed { position: fixed; /* CT-71 PASO 2 (S51): sticky = BANDA BLANCA full-width (tapa las tarjetas que antes se asomaban en los huecos del floating) + la CÁPSULA CORAL flota dentro (ver .pml-header--fixed .pml-header__inner abajo). */ top: 0; left: 0; right: 0; height: 76px; padding: 0; /* CT-71 (Chuy): banda TRANSPARENTE por defecto (la cápsula flota sobre el contenido); solo BLANCA en el buscador (property-list, ver regla :has abajo) donde las tarjetas se asomaban en los huecos. pointer-events:none para que la banda transparente NO bloquee clicks del contenido de la página. */ background-color: transparent; pointer-events: none; box-shadow: none; /* flat system — no shadow */ border-bottom: none; border-radius: 0; transform: translateY(-100%); will-change: transform; transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1); /* smooth ease-out */ } /* La cápsula coral = el inner, flotando dentro de la banda blanca con margen */ .pml-header--fixed .pml-header__inner { background: var(--pml-coral); border-radius: 999px; height: 60px; max-width: none; margin: 8px 16px; padding: 0 22px; pointer-events: auto; /* la cápsula sí es clickeable (la banda es pointer-events:none) */ } /* Banda blanca SOLO en el buscador: property-list / advanced-search renderean el contenedor .pml-rentals (CT-37). En el resto de páginas la banda queda transparente y la cápsula flota sobre el contenido (Chuy). */ body:has(.pml-rentals) .pml-header--fixed { background-color: var(--pml-white); } /* Visible: slid into view */ .pml-header--visible { transform: translateY(0); } /* Hidden: slid out of view (scroll-down) */ .pml-header--hidden { transform: translateY(-100%); } /* CT-71 PASO 2b (S51): se RETIRÓ el override "desktop siempre visible" para que el header se oculte-al-bajar / aparezca-al-subir también en desktop (paridad Showit). Ahora las clases --visible/--hidden (desde pml-header.js) controlan el transform en todos los tamaños. La página /properties-list/ se adapta sola vía body.pml-header-hidden → --pml-header-fixed-h:0 (rentals-page.css). */ /* Background color fix (overscroll bounce + consistency) */ html, body { background-color: var(--pml-off-white) !important; } /* WCAG SC 2.4.11 — focused elements must not hide behind sticky header */ html { scroll-padding-top: 92px; } /* Placeholder handles the space — no body padding needed */ /* WordPress admin bar offset — only when header is fixed */ body.admin-bar .pml-header--fixed { top: 32px; } /* CT-73 (S52) — Admin-bar relative-state gap fix (desktop). PROBLEM (logged-in only): a ~32px white gap appears between the admin bar and the banner/header. MEASURED via getBoundingClientRect on /login/: banner top = 64px while the admin bar occupies only 0–32px → 32px empty gap. CAUSE: WP core already offsets content with `html { margin-top: 32px }` for the fixed admin bar. The WP Rentals PARENT theme ALSO sets `body { margin-top: 32px }` (confirmed in the computed cascade — not present in this child), double-counting the offset: 32 (html) + 32 (body) = 64. FIX: neutralize the parent's redundant body offset so only WP core's html offset applies → first element sits flush under the bar. Scoped to WP's own admin-bar desktop breakpoint (≥783px); mobile keeps its existing handling (see l.~2252, pending its own measured pass). Does NOT touch the fixed-header rule above (fixed elements clear the bar via `top`, unaffected by body margin). */ @media screen and (min-width: 783px) { body.admin-bar { margin-top: 0 !important; } } /* Admin bar dropdowns must appear above our header */ #wpadminbar { z-index: 100000 !important; } #wpadminbar .ab-sub-wrapper { z-index: 100001 !important; } .pml-header__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: 0 40px; height: 100%; } /* --- Zone 1: Logo --- */ .pml-header__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; } .pml-header__logo img { height: 58px; width: auto; display: block; transition: height 200ms ease; } /* Smaller logo in sticky header */ .pml-header--fixed .pml-header__logo img { height: 42px; } /* CT-70: wordmark de texto "Puerto Morelos Life" (sin ícono), igual que el navbar de Showit. En Showit el wordmark va OSCURO (no coral) — burgundy display (--color-text-dark #2e0a16); el coral es solo para la pill/acentos. Reemplaza el PNG en el header. */ .pml-header__logo-text { font-family: Georgia, 'Times New Roman', Times, serif; /* CT-71: wordmark serif como Showit */ font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--color-text-dark); white-space: nowrap; transition: font-size 200ms ease, color 200ms ease; } .pml-header--fixed .pml-header__logo-text { font-size: 21px; } /* CT-75b (S52): Chuy pidió el wordmark COMPLETO también en móvil (antes ≤600px se abreviaba a "PML"). Se muestra "Puerto Morelos Life" en todo ancho y se reduce el tamaño en móvil para que quepa junto a la hamburguesa + el pill compacto. */ .pml-header__logo-text--short { display: none; /* ya no se usa el abreviado; --full se queda visible siempre */ } @media (max-width: 768px) { .pml-header__logo-text { font-size: 17px; } .pml-header--fixed .pml-header__logo-text { font-size: 15px; } } @media (max-width: 375px) { .pml-header__logo-text { font-size: 14px; } .pml-header--fixed .pml-header__logo-text { font-size: 13px; } } /* ========================================================================== CT-71 (S51) — Navbar match Showit · PASO 1: top state colapsado Hamburguesa coral (círculo) a la IZQUIERDA en todos los tamaños + nav horizontal oculto + login/user/lang fuera de la barra (van al menú) + pill "Search Rentals" clara. El sticky = cápsula coral (PASO 2) y el menú overlay coral (PASO 3) son pasos aparte. ========================================================================== */ .pml-header__hamburger { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: var(--pml-coral); cursor: pointer; flex-shrink: 0; } .pml-header__hamburger-line { display: block; width: 24px; /* CT-71 fix: la línea central = la más LARGA (match Showit) */ height: 2.5px; /* un poco más gruesa */ border-radius: 3px; /* puntas redondeadas */ background-color: var(--pml-white); transition: transform 0.3s ease, opacity 0.3s ease; } /* Las externas más cortas → solo la central larga */ .pml-header__hamburger-line:nth-child(1), .pml-header__hamburger-line:nth-child(3) { width: 16px; } .pml-header__hamburger[aria-expanded="true"] .pml-header__hamburger-line:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); } .pml-header__hamburger[aria-expanded="true"] .pml-header__hamburger-line:nth-child(2) { opacity: 0; } .pml-header__hamburger[aria-expanded="true"] .pml-header__hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } /* Ocultar nav horizontal + lang de la barra (el nav va al menú expandible). El Login / User SÍ se quedan en la barra (Chuy: el botón de login va en el navbar, igual que el que pondrá en Showit). */ .pml-header__nav, .pml-header__lang { display: none !important; } /* Layout: [hamburguesa][wordmark] izquierda, pill a la derecha */ .pml-header__inner { justify-content: flex-start; gap: 16px; } .pml-header__actions { margin-left: auto; } /* Pill "Search Rentals" CLARA (top state): fondo blanco + texto oscuro + dot lavanda */ .pml-header__search-pill { background: var(--pml-white); color: var(--color-text-dark); border: 1px solid var(--pml-border); /* definición sobre el header cream */ display: inline-flex !important; /* visible también en móvil (override del display:none) */ } /* Hover: NO usar off-white (= fondo del header → se desvanecía). Acento coral. */ .pml-header__search-pill:hover { background: var(--pml-white); border-color: var(--pml-coral); color: var(--pml-coral); } /* ── CT-71 PASO 2: contenido en BLANCO sobre la cápsula coral (estado sticky) ── */ .pml-header--fixed .pml-header__inner { padding: 0 22px; } .pml-header--fixed .pml-header__hamburger { background: transparent; } .pml-header--fixed .pml-header__logo-text { color: var(--pml-white); } .pml-header--fixed .pml-header__search-pill, .pml-header--fixed .pml-header__search-pill:hover { background: transparent; border-color: transparent; color: var(--pml-white); } .pml-header--fixed .pml-header__login { border-color: rgba(255, 255, 255, 0.6); color: var(--pml-white); } .pml-header--fixed .pml-header__login:hover { border-color: var(--pml-white); color: var(--pml-white); } /* --- Zone 2: Nav center --- */ .pml-header__nav { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; min-width: 0; } .pml-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; } .pml-nav-list li { margin: 0; padding: 0; } .pml-nav-list li a { color: var(--color-text-default); /* CT-58: Showit nav — black */ text-decoration: none; font-family: var(--font-system); /* CT-58: Showit nav — Times serif */ font-size: 16px; font-weight: 400; padding: 8px 0; position: relative; transition: color 0.2s ease; white-space: nowrap; } .pml-nav-list li a:hover, .pml-nav-list li.current-menu-item > a, .pml-nav-list li.current_page_item > a { color: var(--pml-coral); } /* Polylang language items in nav — transparent background */ .pml-nav-list .pll-parent-menu-item, .pml-nav-list .lang-item, .pml-nav-list .lang-item a { background: transparent !important; } /* Active page underline */ .pml-nav-list li.current-menu-item > a::after, .pml-nav-list li.current_page_item > a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--pml-coral); border-radius: 1px; } /* "More" dropdown button — hidden on desktop */ .pml-header__more-btn { display: none; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: var(--pml-text); font-size: 15px; font-weight: 500; padding: 8px 0; white-space: nowrap; } .pml-header__more-btn:hover { color: var(--pml-coral); } .pml-header__caret { /* S25: was 10px (drift, below typography-system minimum 11px). Use overline token. */ font-size: var(--pml-fs-overline); } /* "More" dropdown panel */ .pml-header__more-dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: var(--pml-glass-strong); backdrop-filter: var(--pml-blur-standard); -webkit-backdrop-filter: var(--pml-blur-standard); border: 1px solid var(--pml-glass-edge); border-radius: var(--pml-radius-lg); box-shadow: none; /* CT-58 flat */ padding: 6px 0; min-width: 180px; z-index: 100; list-style: none; margin: 0; font-family: var(--pml-font-accent); } .pml-header__more-dropdown[hidden] { display: none; } .pml-header__more-dropdown li { margin: 0; padding: 0; } .pml-header__more-dropdown li a { display: block; padding: 10px 20px; color: var(--pml-text); text-decoration: none; font-size: 14px; transition: background-color 0.15s ease, color 0.15s ease; } .pml-header__more-dropdown li a:hover { background-color: var(--pml-off-white); color: var(--pml-coral); } /* --- Zone 3: Actions --- */ .pml-header__actions { flex-shrink: 0; display: flex; align-items: center; gap: 16px; } /* Language switcher */ .pml-header__lang { position: relative; } .pml-lang__trigger { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; color: var(--pml-text); font-size: 14px; font-weight: 500; } .pml-lang__trigger:hover { color: var(--pml-coral); } .pml-lang__globe { width: 18px; height: 18px; flex-shrink: 0; } .pml-lang__dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: var(--pml-glass-strong); backdrop-filter: var(--pml-blur-standard); -webkit-backdrop-filter: var(--pml-blur-standard); border: 1px solid var(--pml-glass-edge); border-radius: var(--pml-radius-lg); box-shadow: none; /* CT-58 flat */ padding: 6px 0; min-width: 140px; display: none; list-style: none; margin: 0; z-index: 101; font-family: var(--pml-font-accent); } .pml-lang__dropdown--open { display: block; } /* ── Shared dropdown animation + caret indicator ── */ /* Bubble-in keyframes */ @keyframes pml-bubble-in { 0% { opacity: 0; transform: scale(0.95) translateY(-4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Transition for scroll-fade + animation base */ .pml-lang__dropdown, .pml-user-dropdown, .pml-header__more-dropdown { transition: opacity 200ms ease; transform-origin: top right; } /* Bubble-in on open */ .pml-lang__dropdown--open, .pml-user-dropdown:not([hidden]), .pml-header__more-dropdown:not([hidden]) { animation: pml-bubble-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* Caret arrow — pure CSS triangle (no background fill = no diamond) */ .pml-lang__dropdown::before, .pml-user-dropdown::before, .pml-header__more-dropdown::before { content: ''; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px; background: inherit; border-top: 1px solid rgba(0, 0, 0, 0.06); border-left: 1px solid rgba(0, 0, 0, 0.06); border-bottom: none; border-right: none; transform: rotate(45deg); z-index: 1; border-radius: 2px 0 0 0; } /* User dropdown caret — aligned to avatar area */ .pml-user-dropdown::before { right: 24px; } .pml-lang__dropdown li, .pml-lang__dropdown .lang-item { margin: 0; padding: 0; background: transparent !important; } .pml-lang__dropdown li a, .pml-lang__dropdown .lang-item a, .pml-lang__dropdown .lang-item a.menu-item-link { display: block; padding: 10px 18px !important; color: var(--pml-text) !important; background: transparent !important; text-decoration: none; font-family: var(--pml-font-accent); font-size: 14px; font-weight: 400; letter-spacing: 0.3px; border-radius: var(--pml-radius); transition: background 0.2s ease, color 0.2s ease; } .pml-lang__dropdown li a:hover, .pml-lang__dropdown .lang-item a:hover, .pml-lang__dropdown .lang-item a.menu-item-link:hover { background: rgba(245, 240, 236, 0.6) !important; color: var(--pml-coral) !important; } /* Login — CT-71: botón outline en la barra (junto a "Search Rentals"). Top state = borde + texto oscuros, fondo transparente (no compite con la pill clara). El sticky lo invierte a blanco en el PASO 2. */ .pml-header__login { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--color-text-dark); border: 1px solid var(--pml-border); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: var(--pml-radius-pill); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .pml-header__login:hover { border-color: var(--color-text-dark); background: transparent; color: var(--color-text-dark); } .pml-header__login-icon { display: none; } /* CT-58 — Showit "Search Rentals" coral pill + lavender dot (entry to the search engine) */ .pml-header__search-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--pml-coral); color: var(--pml-white); font-family: var(--font-ui); font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: var(--pml-radius-pill); text-decoration: none; white-space: nowrap; transition: background 0.2s ease; } .pml-header__search-pill:hover { background: var(--color-coral-dark); color: var(--pml-white); } .pml-header__search-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg-lavender); /* Showit lavender dot */ flex-shrink: 0; } @media (max-width: 768px) { /* On mobile the hamburger + slide-in menu handle navigation */ .pml-header__search-pill { display: none; } } /* --- User dropdown (logged-in) --- */ .pml-header__user-wrap { position: relative; } .pml-header__user { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: var(--pml-text); font-size: 14px; font-weight: 500; padding: 6px 10px; /* S25: 24px is intentional — soft-pill on a ~36px-tall trigger. --pml-radius-pill (9999px) would change visual appearance with different heights. Single use case, kept inline. */ border-radius: 24px; transition: background-color 0.2s ease; } .pml-header__user:hover { background-color: var(--pml-off-white); } .pml-header__avatar { width: 32px; height: 32px; border-radius: var(--pml-radius-circle); flex-shrink: 0; } .pml-header__user-caret { transition: transform 0.2s ease; flex-shrink: 0; } .pml-header__user[aria-expanded="true"] .pml-header__user-caret { transform: rotate(180deg); } .pml-user-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 280px; background: var(--pml-glass-strong); backdrop-filter: var(--pml-blur-standard); -webkit-backdrop-filter: var(--pml-blur-standard); border: 1px solid var(--pml-glass-edge); border-radius: var(--pml-radius-xl); box-shadow: none; /* CT-58 flat */ padding: 8px 0; z-index: 200; font-family: var(--pml-font-accent); } .pml-user-dropdown[hidden] { display: none; } .pml-user-dropdown__header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; } .pml-user-dropdown__avatar { width: 48px; height: 48px; border-radius: var(--pml-radius-circle); flex-shrink: 0; } .pml-user-dropdown__name { font-weight: 600; font-size: 15px; color: var(--pml-text); } .pml-user-dropdown__email { font-size: 13px; color: var(--pml-text-secondary); margin-top: 2px; word-break: break-all; } .pml-user-dropdown__divider { height: 1px; background: var(--pml-border); margin: 4px 0; } .pml-user-dropdown__nav a, .pml-user-dropdown__logout { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--pml-text); text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; } .pml-user-dropdown__nav a:hover, .pml-user-dropdown__logout:hover { background-color: rgba(245, 240, 236, 0.6); color: var(--pml-coral); } .pml-user-dropdown__nav a svg, .pml-user-dropdown__logout svg { flex-shrink: 0; color: var(--pml-text-tertiary); } .pml-user-dropdown__nav a:hover svg, .pml-user-dropdown__logout:hover svg { color: var(--pml-coral); } .pml-user-dropdown__badge { background: var(--pml-coral); color: var(--pml-white); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--pml-radius-md); margin-left: auto; } .pml-user-dropdown__logout { color: var(--pml-text-tertiary); } /* Mobile menu — logged-in user section */ .pml-mobile-menu__user-header { display: flex; align-items: center; gap: 12px; padding-top: 16px; } .pml-mobile-menu__avatar-lg { width: 40px; height: 40px; border-radius: var(--pml-radius-circle); flex-shrink: 0; } .pml-mobile-menu__user-name { font-weight: 600; font-size: 15px; color: var(--pml-text); } .pml-mobile-menu__user-email { font-size: 13px; color: var(--pml-text-secondary); margin-top: 2px; } .pml-mobile-menu__user-links { margin-top: 16px; } .pml-mobile-menu__user-links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--pml-text); text-decoration: none; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--pml-border); } .pml-mobile-menu__user-links a:last-child { border-bottom: none; } .pml-mobile-menu__user-links a:hover { color: var(--pml-coral); } .pml-mobile-menu__logout { color: var(--pml-text-tertiary) !important; } /* WP Rentals login/register modal fix — our header (z-index 9999) must hide behind the modal overlay and content. Two selectors for redundancy: 1. body.modal-open = Bootstrap adds this to on ANY modal (CSS-only, no JS needed) 2. .pml-header--modal-open = our JS class via shown.bs.modal event (backup) */ body.modal-open .pml-header, .pml-header.pml-header--modal-open { z-index: 1 !important; } body.modal-open .pml-mobile-menu__overlay, body.modal-open .pml-mobile-menu__panel { z-index: 1 !important; } /* ========================================================================== CT-20 REMOVED (2026-04-20, S19) ========================================================================== Originally CT-20 was ~340 lines of CSS styling the login/signup/forgot password modal with glassmorphism, Jost typography, coral buttons, and responsive mobile layout. Why removed: 1. Pure cosmetic styling — NOT a WCAG/SEO/functional fix. Violates ADR-0005 "child theme as last resort": styling should live in Theme Options, Elementor, or parent theme — not in child theme. 2. Caused repeated regressions 2026-04-19/20: generic Bootstrap selectors leaked to booking modals (misdiagnosed as KIM-08 root cause), then scope fix exposed conflicts with parent theme's `position: absolute` image wrapper (register/forgot forms overlapping image), then every iteration introduced a new breakage. 3. The modal still works without CT-20 — it just looks like default WP Rentals styling (simple, functional). If PML brand styling on login is desired in future, best path is Elementor Pro Popup Builder (clean UI to style, no CSS cascade conflicts) OR Theme Options → Design → Custom CSS (single source Kim can see and edit). What WAS kept from this section: - Modal backdrop defensive rules (see below) — generic, prevents parent theme's rogue backdrop appearing on pages without a visible modal. These are bug-fixes for the parent theme, not styling. - CT-24 banner hide on modal-open (later in file) — also generic. - CT-25 modal positioning fix (later in file) — fixes parent theme bug. Git history: full CT-20 code preserved in commits prior to removal. */ /* Modal backdrop defensive rules — parent theme sometimes injects `.modal-backdrop` on pages without a visible modal (properties-list, advanced-search) creating a grey overlay that blocks all interaction. Fix: hide backdrop by default, re-enable only when `.modal.in` / `.modal.show` exists as sibling. This is a parent-theme bug fix, NOT CT-20 styling. */ .modal-backdrop { display: none !important; } .modal.in ~ .modal-backdrop, .modal.show ~ .modal-backdrop { display: block !important; opacity: 0.4; } /* Hide announcement banner (CT-24) when ANY modal is open. Why: the banner is position: fixed with z-index: 10001, which is higher than Bootstrap modal z-index (1050). Without this rule, the banner renders OVER the top of the modal, cutting off modal titles and headers. Alternative considered: lower banner z-index below modal (1050). Rejected because banner would then render below the site header (z-index 9999) too, and be invisible while scrolling. Hiding on modal-open is the cleanest UX — banner is a non-essential announcement, safe to hide briefly. Bootstrap adds `.modal-open` class to automatically when any modal is displayed. Reported by Chuy post CT-25 deploy 2026-04-20. */ body.modal-open .pml-banner { display: none !important; } /* ========================================================================== CT-25 — Fix Bootstrap modal positioning (KIM-08) ========================================================================== PROBLEM (user-visible symptom): Modales de "Custom Price", "Reserve a period" (booking), login modal, y otros modales del sitio salen desplazados ~428px a la derecha (o en otros casos al lado izquierdo) del centro y se cortan fuera del viewport. Reportado por Kim en junta 2026-04-13. ROOT CAUSE: WP Rentals v3.16.2 parent theme (`wprentals/style.css`) usa una técnica pre-flexbox de centrado que combina DOS declaraciones: .modal-dialog { left: 50%; margin-left: -235px; } (genérico 470px) #loginmodal .modal-dialog { margin-left: -375px; } (login 750px) (y probablemente variantes similares para otros modal IDs específicos) La lógica: `left: 50%` empuja al centro y `margin-left: -half-width` compensa con menos-mitad-del-ancho para centrar el dialog. EL BUG (dos bugs coexistentes): (a) Para `.modal-dialog` genérico: Bootstrap 3 `@media (min-width: 768px)` sobrescribe `margin: 30px auto` que pisa `margin-left: -235px` reseteándolo a `auto`. Queda solo `left: 50%` sin compensación, empujando el dialog a la mitad derecha del viewport. (b) Para `#loginmodal .modal-dialog` (y otros IDs específicos): Bootstrap `@media` NO puede sobrescribir porque el selector del parent tiene mayor especificidad (ID > clase). El `margin-left: -375px` persiste, empujando el dialog a la izquierda. En ambos casos el centrado se rompe — por caminos opuestos pero con el mismo root cause (intención de centrado pre-flexbox rota por interacción con Bootstrap). Bug pre-existente del parent theme, NO introducido por el child theme (confirmado 2026-04-20 con scan de cascada CSS vía `document.styleSheets` enumeration: el child theme no tiene ninguna regla afectando `.modal-dialog` fuera del scope CT-20 del login modal). WHY THIS APPROACH (vs alternativas): 1. Theme Options NO expone setting para esto — es CSS hardcoded del parent. 2. Elementor NO controla modales del dashboard de WP Rentals. 3. WP core NO aplica (Bootstrap 3 + WP Rentals manejan modales custom). 4. Opción descartada: setear `transform: translateX(-50%)` — funcionaría pero podría conflictar con animación `.modal.fade/.modal.in` de Bootstrap que ya usa `transform: translate(0, -25%)` / `translate(0, 0)`. 5. Opción elegida: forzar `left: auto` + `margin-left: auto` + `margin-right: auto` en TODOS los modales. Esto neutraliza ambos bugs del parent (el `left: 50%` Y el `margin-left: -X`) y deja que el default de Bootstrap (`margin: 30px auto` vía @media) haga el centrado correcto. Simple, sin efectos colaterales, cero conflicto con animación Bootstrap. SCOPE: Afecta a TODOS los modales del sitio (login, signup, booking, custom price, reserve period, etc.). El login modal sigue funcionando porque CT-20 (scopeado con :has()) aplica glassmorphism SOBRE este centrado, y el `max-width: 860px` de CT-20 no conflicta con auto-centering. Mobile override: el block mobile de CT-20 (`@media max-width: 768px`) tiene `.modal:has(...) .modal-dialog { margin: 0 !important; width: 100% }` con especificidad (0,0,3,0) !important que gana sobre CT-25's (0,0,2,0) !important — por eso en mobile el login modal sigue full-screen como se diseñó originalmente. VERIFICATION: Si WP Rentals actualiza a una versión que arregla este bug (retirando `.modal-dialog { left: 50% }` y los `margin-left: -X` de su stylesheet), esta regla se vuelve redundante pero no dañina — se puede retirar en ese momento. Checar en cada update del parent theme buscando los selectores en wprentals/style.css. */ .modal .modal-dialog { left: auto !important; margin-left: auto !important; margin-right: auto !important; } /* S31 Bug #4 v2 — Modal de login fullscreen en mobile. Reportes Chuy: "en celular parte del modal sale bajo la pantalla" → fix v1. Después: "es tan pequeño que no se puede usar, debe adaptarse al alto y ancho de la pantalla del celular" → fix v2 (este). Causa: el Bootstrap 3 modal del parent tiene styles `.modal-dialog { width: 600px }` y `#loginmodal .modal-dialog { width: 750px }` con inline `style="height:620px"`. En mobile el width: 750px excede el viewport, pero adicionalmente los media queries del parent reducen el width a algo pequeño (descubrimos que el v1 con max-width:95vw no era suficiente porque la regla width específica del parent ganaba). Solución v2: override TOTAL en mobile. Modal ocupa 100% del viewport (100vw × 100dvh), sin margin, content full-height con scroll interno. Los selectores son maximum specificity con !important para vencer todos los overrides del parent y las media queries de Bootstrap. */ @media (max-width: 768px) { body .modal#loginmodal, body.modal-open .modal#loginmodal { padding: 0 !important; } body .modal#loginmodal .modal-dialog, body.modal-open .modal#loginmodal .modal-dialog { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; transform: none !important; display: flex !important; flex-direction: column !important; } body .modal#loginmodal .modal-content { width: 100% !important; max-width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; border: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; flex: 1 1 auto; display: block; } /* Reset todo lo que pueda heredar height del parent inline styles */ body .modal#loginmodal .modal-content > *, body .modal#loginmodal #loginmodal_top_part, body .modal#loginmodal #ajax_login_div, body .modal#loginmodal #ajax_register_div, body .modal#loginmodal #lostpasswordform_wrapper { height: auto !important; max-height: none !important; min-height: 0 !important; width: auto !important; max-width: 100% !important; } /* Padding interno para que el contenido no toque los bordes */ body .modal#loginmodal .modal-body, body .modal#loginmodal #login-content, body .modal#loginmodal #register-content { padding: 16px !important; } } /* ========================================================================== CT-27 — Hide duplicate YouTube iframe on single property pages ========================================================================== PROBLEM (user-visible symptom): When a listing has BOTH a YouTube video AND photo gallery, the single property page renders the video iframe TWICE: 1. Standalone in a `.panel-wrapper.imagebody_wrapper` (video only, no images) 2. Inside the gallery `.panel-wrapper.imagebody_wrapper` (images + video appended) Both iframes carry `id="player_2"` (invalid HTML — IDs must be unique) and the same YouTube URL. Reported by Chuy 2026-04-20 on new listing "Casa de Chuy". ROOT CAUSE: Parent theme WP Rentals v3.16.2 template `templates/property_page_templates/property_page_templates_section/masonary_gallery_property_page.php` (or similar variant) has two code paths emitting the video block: - Top-of-page standalone video panel - Bottom of images gallery panel appending video Both paths run when video + images are both present, producing the duplicate. Pre-existing parent theme bug, not caused by child theme (confirmed: child theme has no video-related CSS or template override for this section). WHY CSS vs TEMPLATE OVERRIDE: We already have a child theme template override for this area (CT-2, `masonary_gallery_property_page.php` full-width fallback for <4 photos). Adding more template logic would couple the override to upstream changes — higher maintenance burden. A surgical CSS rule that hides the redundant wrapper is lower-risk and self-documenting. SELECTOR LOGIC: `.imagebody_wrapper:has(~ .imagebody_wrapper .imagebody_new)` matches an `.imagebody_wrapper` that has a following-sibling `.imagebody_wrapper` containing `.imagebody_new` (images). That identifies the FIRST (video-only) wrapper when a SECOND wrapper with images also exists. We hide that first one — leaving only the gallery-with-video version visible. EDGE CASES HANDLED: - Video only, no images: no following sibling match → not hidden, video shows - Images only, no video: first wrapper has imagebody_new, no second wrapper → not hidden - Both present: first wrapper (video-only) hidden, second wrapper (gallery+video) shown - No video, no images: no wrappers → nothing to hide BROWSER SUPPORT: `:has()` requires Chrome 105+, Safari 15.4+, Firefox 121+ (mid-2023+). Same support level already assumed by CT-20 / CT-25. Graceful degradation: in unsupported browsers, users see duplicate video — not ideal but functional. VERIFICATION AFTER PARENT THEME UPDATES: If WP Rentals publishes a version that fixes the duplicate rendering, this rule becomes redundant (no duplicates to hide) but harmless. Audit by opening a listing with both video and gallery and checking DOM — if only one iframe present, CT-27 can be removed. */ .single-estate_property .imagebody_wrapper:has(~ .imagebody_wrapper .imagebody_new) { display: none !important; } /* Submit Property CTA */ .pml-header__submit { display: inline-flex; align-items: center; padding: 10px 20px; background-color: var(--pml-coral); color: var(--pml-white) !important; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: var(--pml-radius-sm); transition: background-color 0.2s ease; white-space: nowrap; } .pml-header__submit:hover { background-color: var(--pml-coral-dark); color: var(--pml-white) !important; } .pml-header__submit-short { display: none; } /* Hamburger — hidden on desktop */ .pml-header__hamburger { display: none; } /* ========================================================================== CT-16 — Tablet breakpoint (769px – 1200px) ========================================================================== */ @media (max-width: 1200px) { html { scroll-padding-top: 72px; } .pml-header { height: 64px; } .pml-header__logo img { height: 44px; } .pml-header__logo-text { font-size: 19px; } .pml-nav-list { gap: 20px; } /* Hide nav items beyond 3rd — JS clones them into "More" dropdown */ .pml-nav-list li:nth-child(n+4) { display: none; } /* Show "More" button */ .pml-header__more-btn { display: flex; } /* Switch login to icon, hide username + caret on tablet */ .pml-header__login-text, .pml-header__username, .pml-header__user-caret { display: none; } .pml-header__login-icon { display: flex; align-items: center; } .pml-header__login { padding: 8px; } /* Shorter CTA text */ .pml-header__submit-text { display: none; } .pml-header__submit-short { display: inline; } .pml-header__submit { padding: 8px 16px; } /* Show hamburger */ .pml-header__hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; width: 40px; height: 40px; } .pml-header__hamburger-line { display: block; width: 22px; height: 2px; background-color: var(--pml-text); border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease; } /* Hamburger X animation when open */ .pml-header__hamburger[aria-expanded="true"] .pml-header__hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .pml-header__hamburger[aria-expanded="true"] .pml-header__hamburger-line:nth-child(2) { opacity: 0; } .pml-header__hamburger[aria-expanded="true"] .pml-header__hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } } /* ========================================================================== CT-16 — Mobile breakpoint (<768px) ========================================================================== */ /* WordPress admin bar is 46px on mobile (<783px) instead of 32px */ @media (max-width: 782px) { /* CT-73 (S52): el header RELATIVO ya NO se offsetea aquí. Medido en móvil logueado (vw 403): html{margin-top:46px} (WP reserva el top para la barra) y body margin-top = 0 (en móvil el parent NO mete el margin redundante que sí mete en desktop). Con eso el header en flujo cae flush bajo la barra; el viejo `top:46px` sobre el relativo doble-contaba → 46px de gap (header medido en top:91 ≈ 46+46). Se retira. El header FIXED sí conserva su top:46px: es position:fixed y el html margin no lo mueve, así que debe librar la barra. */ body.admin-bar .pml-header--fixed { top: 46px; } } @media (max-width: 768px) { html { scroll-padding-top: 64px; } .pml-header { height: 56px; padding-top: 0; /* reset desktop padding */ } .pml-header--fixed { height: 56px; /* same as static on mobile */ } .pml-header__logo img { height: 40px; } /* Fixed logo same size as static on mobile */ .pml-header--fixed .pml-header__logo img { height: 40px; } .pml-header__inner { padding: 0 16px; } /* Hide desktop/tablet nav entirely */ .pml-header__nav { display: none; } /* Hide login/user and submit — they go in hamburger menu */ .pml-header__login, .pml-header__user-wrap, .pml-header__submit { display: none; } /* Language: show only globe icon, no text */ .pml-lang__current { display: none; } } /* ========================================================================== CT-16 — Small mobile breakpoint (<375px) ========================================================================== */ @media (max-width: 375px) { .pml-header { height: 48px; } .pml-header--fixed { height: 48px; } .pml-header__logo img { height: 36px; } .pml-header--fixed .pml-header__logo img { height: 36px; } .pml-header__inner { padding: 0 12px; } } /* ========================================================================== CT-16 — Mobile slide-in menu ========================================================================== */ .pml-mobile-menu__overlay { position: fixed; inset: 0; /* CT-71 (S51, Chuy): backdrop BLANCO sólido (antes rgba negro semi-transp). Con el modal coral inset, el fondo transparente dejaba ver las tarjetas de property-list por detrás — se veía feo. Blanco = limpio en todas las páginas. */ background: var(--pml-white); z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .pml-mobile-menu--open .pml-mobile-menu__overlay { opacity: 1; visibility: visible; } .pml-mobile-menu__panel { position: fixed; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 360px; background: var(--pml-white); font-family: var(--pml-font-accent); z-index: 10001; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px; display: flex; flex-direction: column; gap: 24px; } .pml-mobile-menu--open .pml-mobile-menu__panel { transform: translateX(0); } .pml-mobile-menu__close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 28px; color: var(--pml-text); cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; line-height: 1; } .pml-mobile-menu__close:hover { color: var(--pml-coral); } /* Auth section */ .pml-mobile-menu__auth { padding-top: 24px; } .pml-mobile-menu__login-btn { display: block; text-align: center; padding: 12px 24px; background: var(--pml-coral); color: var(--pml-white); border: none; border-radius: var(--pml-radius-lg); text-decoration: none; font-weight: 600; font-size: 15px; transition: background 0.2s ease; } .pml-mobile-menu__login-btn:hover { /* S25: formalized as --pml-action-hover token */ background: var(--pml-action-hover); } /* Mobile nav list */ .pml-mobile-nav-list { list-style: none; margin: 0; padding: 0; } .pml-mobile-nav-list li { margin: 0; padding: 0; } .pml-mobile-nav-list li a { display: block; padding: 14px 0; color: var(--pml-text); text-decoration: none; font-size: 16px; font-weight: 500; } .pml-mobile-nav-list li a:hover, .pml-mobile-nav-list li.current-menu-item > a { color: var(--pml-coral); } /* Submit CTA in mobile menu */ .pml-mobile-menu__submit { display: block; text-align: center; padding: 14px 24px; background-color: var(--pml-coral); color: var(--pml-white) !important; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: var(--pml-radius-lg); transition: background-color 0.2s ease; } .pml-mobile-menu__submit:hover { background-color: var(--pml-coral-dark); } /* Language toggle in mobile menu */ .pml-mobile-menu__lang { display: flex; gap: 12px; justify-content: center; padding-top: 8px; } .pml-mobile-lang__link { padding: 8px 16px; color: var(--pml-text-secondary); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: var(--pml-radius-xs); transition: color 0.2s ease, background-color 0.2s ease; } .pml-mobile-lang__link:hover { color: var(--pml-coral); } .pml-mobile-lang--active { color: var(--pml-coral); background-color: var(--pml-off-white); } /* Body scroll lock when menu is open */ body.pml-menu-open { overflow: hidden !important; } /* ========================================================================== CT-71 PASO 3 (S51) — Menú del toggle = overlay CORAL full-screen (match Showit) Convierte el panel lateral blanco en un modal coral a pantalla completa: X arriba-izq, wordmark serif, e items grandes en blanco. Items = producto (Home/Stays/Neighborhoods) + login. (No replicamos el marketing de Showit.) ========================================================================== */ .pml-mobile-menu__panel { inset: 14px; width: auto; max-width: none; background: var(--pml-coral); color: var(--pml-white); border-radius: 28px; padding: 24px clamp(24px, 6vw, 80px) 48px; gap: 28px; transform: translateY(-14px); opacity: 0; visibility: hidden; transition: opacity .32s ease, transform .32s ease, visibility .32s ease; } .pml-mobile-menu--open .pml-mobile-menu__panel { transform: translateY(0); opacity: 1; visibility: visible; } /* CT-71 fix: el banner CT-24 tiene z-index 10001 (= el panel) y es fixed arriba, así que se asomaba un sliver cuando el menú abría. Lo ocultamos mientras el menú está abierto (igual que body.modal-open hace con los modales Bootstrap). */ body.pml-menu-open .pml-banner { display: none !important; } /* Más margen del modal en DESKTOP (Chuy: "le falta más margin en escritorio") */ @media (min-width: 1024px) { .pml-mobile-menu__panel { inset: 40px; border-radius: 32px; } } /* X arriba a la IZQUIERDA, blanca */ .pml-mobile-menu__close { left: clamp(18px, 5vw, 72px); right: auto; top: 22px; width: 48px; height: 48px; font-size: 34px; color: var(--pml-white); } .pml-mobile-menu__close:hover { color: var(--pml-white); opacity: .8; } /* Wordmark del menú (serif blanco, debajo de la X) */ .pml-mobile-menu__brand { display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: clamp(22px, 3vw, 30px); color: var(--pml-white); margin: 52px 0 4px; } /* Items GRANDES en blanco */ .pml-mobile-nav-list { display: flex; flex-direction: column; gap: 4px; } .pml-mobile-nav-list li a { color: var(--pml-white); font-family: var(--font-ui); font-size: clamp(28px, 5vw, 44px); font-weight: 500; padding: 8px 0; transition: opacity .15s ease; } .pml-mobile-nav-list li a:hover, .pml-mobile-nav-list li.current-menu-item > a { color: var(--pml-white); opacity: .72; } /* Login / Submit: blanco sobre coral (visibles) */ .pml-mobile-menu__login-btn, .pml-mobile-menu__submit { background: var(--pml-white) !important; color: var(--pml-coral) !important; border-radius: var(--pml-radius-pill); } .pml-mobile-menu__login-btn:hover, .pml-mobile-menu__submit:hover { background: var(--pml-white) !important; /* MANTENER blanco (nunca se funde con el coral) */ color: var(--pml-coral-dark) !important; } .pml-mobile-menu__auth { padding-top: 4px; } /* Estados logged-in + lang: texto blanco sobre coral */ .pml-mobile-menu__user-name, .pml-mobile-menu__user-email, .pml-mobile-menu__user-links a, .pml-mobile-menu__logout { color: var(--pml-white) !important; } .pml-mobile-menu__user-links a { border-color: rgba(255, 255, 255, 0.22); } .pml-mobile-lang__link { color: rgba(255, 255, 255, 0.85); } .pml-mobile-lang__link:hover, .pml-mobile-lang--active { color: var(--pml-white); background: transparent; } /* ========================================================================== CT-74 (S52) — Overlay logueado: arreglar distribución -------------------------------------------------------------------------- PROBLEM (Chuy: "no está bien distribuido una vez logueado"): los items del dashboard (.pml-mobile-menu__user-links a) usan justify-content: space-between → icono al borde izq, label al borde der. Tolerable en el panel angosto original de móvil, pero en el overlay coral full-width de desktop (CT-71) estira icono y texto a los extremos dejando un hueco enorme; además el nav de producto (44px) queda huérfano abajo. FIX: 1. Agrupar icono+label a la izquierda (flex-start + gap) en TODOS los tamaños. 2. Desktop (≥1024px) y SOLO logueado (body.logged-in): dos columnas — cuenta (dashboard) a la izq, producto (Home/Stays/Neighborhoods) a la der — y bajar el tamaño del nav de producto para que armonice con la lista de al lado. El overlay del GUEST (aprobado, palabras grandes tipo Showit) queda intacto: todo lo de dos columnas está scopeado a body.logged-in. */ /* 1. Icono + label juntos a la izquierda (antes: space-between → hueco). */ .pml-mobile-menu__user-links a { justify-content: flex-start; gap: 12px; } .pml-mobile-menu__user-links a i { width: 22px; text-align: center; flex-shrink: 0; font-size: 16px; } /* Badge de no-leídos (Inbox): al extremo derecho de su fila. */ .pml-mobile-menu__user-links a .pml-user-dropdown__badge { margin-left: auto; } /* 2. Dos columnas en desktop, solo logueado. */ @media (min-width: 1024px) { body.logged-in .pml-mobile-menu__panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "brand brand" "auth nav"; align-content: start; column-gap: clamp(48px, 8vw, 120px); row-gap: 24px; } body.logged-in .pml-mobile-menu__brand { grid-area: brand; } body.logged-in .pml-mobile-menu__auth { grid-area: auth; align-self: start; } body.logged-in .pml-mobile-menu__nav { grid-area: nav; align-self: start; } /* Lista de cuenta: un poco más grande en el modal full-screen. */ body.logged-in .pml-mobile-menu__user-links a { font-size: 17px; padding: 13px 0; } /* Nav de producto: bajar de 44px para armonizar con la lista de al lado. */ body.logged-in .pml-mobile-nav-list li a { font-size: clamp(22px, 2.2vw, 30px); } } /* ========================================================================== CT-75 (S52) — Header móvil: pill, cápsula sticky y hamburguesa -------------------------------------------------------------------------- Reportado por Chuy (screenshots, móvil, sin sesión): 1/2. El pill "Search Rentals" se ve muy grande: se encima con el banner y se corta contra el borde superior (desbordaba la altura del header móvil). 3. Al hacer scroll-down queda una "pestaña coral" asomada arriba: en móvil la banda fixed mide 56px (48px <375px) pero el inner conservaba su tamaño desktop (60px + 8px de margen top = 68px de fondo) → sobresalía de la banda y al ocultarse (translateY -100%) su parte baja quedaba visible. 4. En el sticky la hamburguesa salía OSCURA (var(--pml-text) del bloque móvil) e invisible sobre la cápsula coral. ========================================================================== */ /* 4. Hamburguesa blanca en estado fixed (cápsula coral). Especificidad (0,0,2,0) gana al override oscuro del bloque móvil (0,0,1,0). No toca el top state. */ .pml-header--fixed .pml-header__hamburger-line { background-color: var(--pml-white); } @media (max-width: 768px) { /* 1/2. Chuy (S52): el pill "Search Rentals" es innecesario en móvil — se ocultaba mal (se encimaba con el banner / se cortaba). La búsqueda ya está accesible por "Stays" en el menú overlay + el FAB coral en property-list, y sin el pill el wordmark completo tiene más espacio. Se oculta del navbar móvil. !important para ganar al display:inline-flex !important del top-state (l.~1295). */ .pml-header__search-pill { display: none !important; } /* 3. Cápsula sticky más baja: 40 + 8 (margen top) = 48 ≤ banda (56/48) → se oculta completa sin dejar la pestaña coral asomada. */ .pml-header--fixed .pml-header__inner { height: 40px; margin: 8px 12px; } } /* ========================================================================== CT-17 — Hide parent theme's native footer(s) (so CT-17 custom footer wins) ========================================================================== PROBLEM: WP Rentals parent theme emits its own footer on every page through several possible mechanisms depending on configuration: - `#colophon` — WordPress classic footer ID - `.wpestate_elementor_footer_custom` — WP Rentals' Elementor footer wrapper - `#footer-widget-area` — parent theme's widget-based footer - `.sub_footer` / `.sub_footer_wrapper` — sub-footer (copyright/social bar) - Any other `